feat: add code connect for FolderTabs, PrimaryTabs, SecondaryTabs, and Tooltip

figma.config.json

@@ -1,7 +1,7 @@
 {
   "codeConnect": {
     "include": [
-      "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,divider,empty-data,features,link,select-native,split-button,tag,tag-group}/**/*.{tsx,jsx}"
+      "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,divider,empty-data,features,folder-tabs,link,primary-tabs,secondary-tabs,select-native,split-button,tag,tag-group,tooltip}/**/*.{tsx,jsx}"
     ],
     "importPaths": {
       "src/core/*": "@reapit/elements/core/*",
@@ -31,13 +31,25 @@
       "<EMPTY_DATA_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=86-1823",
       "<FEATURE_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12955-37788",
       "<FEATURES_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9645",
+      "<FOLDER_TAB_ITEM_CONTENT_SM_2XL_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28409",
+      "<FOLDER_TAB_ITEM_SM_2XL_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28306",
+      "<FOLDER_TAB_ITEM_CONTENT_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28415",
+      "<FOLDER_TAB_ITEM_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28421",
+      "<FOLDER_TABS_SM_2XL_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15254-19347",
+      "<FOLDER_TABS_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15272-53111",
+      "<FOLDER_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15254-63400",
       "<LINK_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11867-66681",
       "<SELECT_NATIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12404-18248",
       "<SPLIT_BUTTON_ACTION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9778",
       "<SPLIT_BUTTON_MENU_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-10149",
       "<SPLIT_BUTTON_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2356-10273",
+      "<PRIMARY_TAB_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=60-1049",
+      "<PRIMARY_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7076-9436",
       "<TAG_GROUP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=118-6272",
-      "<TAG_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982"
+      "<TAG_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982",
+      "<TOOLTIP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381",
+      "<SECONDARY_TAB_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=209-5342",
+      "<SECONDARY_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7076-9436"
     }
   }
 }

src/core/folder-tabs/count-label/count-label.figma.tsx

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect'
+import { FolderTabs } from '../folder-tabs'
+
+figma.connect(FolderTabs.CountLabel, '<FOLDER_TAB_ITEM_CONTENT_SM_2XL_URL>', {
+  variant: { Variant: 'Count' },
+  props: {
+    children: figma.string('Label'),
+    count: figma.string('Count'),
+  },
+  example: (props) => <FolderTabs.CountLabel count={props.count}>{props.children}</FolderTabs.CountLabel>,
+})
+
+figma.connect(FolderTabs.CountLabel, '<FOLDER_TAB_ITEM_CONTENT_XS_URL>', {
+  variant: { Variant: 'Count' },
+  props: {
+    children: figma.string('Label'),
+    count: figma.string('Count'),
+  },
+  example: (props) => <FolderTabs.CountLabel count={props.count}>{props.children}</FolderTabs.CountLabel>,
+})

src/core/folder-tabs/count-label/count-label.tsx

@@ -23,3 +23,5 @@ export function FolderTabCountLabel({ children, count, ...rest }: FolderTabCount
     </ElFolderTabCountContainer>
   )
 }
+
+FolderTabCountLabel.displayName = 'FolderTabs.CountLabel'

src/core/folder-tabs/folder-tabs.figma.tsx

@@ -0,0 +1,25 @@
+import { FolderTabs } from './folder-tabs'
+import figma from '@figma/code-connect'
+
+// NOTE: This is the top-most folder tabs component in Figma
+figma.connect(FolderTabs, '<FOLDER_TABS_URL>', {
+  props: {
+    children: figma.children('Folder tabs'),
+  },
+  example: (props) => <FolderTabs>{props.children}</FolderTabs>,
+})
+
+// NOTE: These two are the two breakpoint-specific folder tab components in Figma
+figma.connect(FolderTabs, '<FOLDER_TABS_SM_2XL_URL>', {
+  props: {
+    children: figma.children('Tab *'),
+  },
+  example: (props) => <FolderTabs>{props.children}</FolderTabs>,
+})
+
+figma.connect(FolderTabs, '<FOLDER_TABS_XS_URL>', {
+  props: {
+    children: figma.children('Tab *'),
+  },
+  example: (props) => <FolderTabs>{props.children}</FolderTabs>,
+})

src/core/folder-tabs/tab/tab.figma.tsx

@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect'
+import { FolderTabs } from '../folder-tabs'
+
+figma.connect(FolderTabs.Item, '<FOLDER_TAB_ITEM_SM_2XL_URL>', {
+  props: {
+    children: figma.children('↳Content'),
+  },
+  example: (props) => (
+    <FolderTabs.Item aria-current={false} href="#replace-me">
+      {props.children}
+    </FolderTabs.Item>
+  ),
+})
+
+figma.connect(FolderTabs.Item, '<FOLDER_TAB_ITEM_XS_URL>', {
+  props: {
+    children: figma.children('↳Content'),
+  },
+  example: (props) => (
+    <FolderTabs.Item aria-current={false} href="#replace-me">
+      {props.children}
+    </FolderTabs.Item>
+  ),
+})

src/core/folder-tabs/tab/tab.tsx

@@ -30,3 +30,5 @@ export function FolderTab({ children, ...rest }: FolderTab.Props) {
     </ElFolderTab>
   )
 }
+
+FolderTab.displayName = 'FolderTabs.Item'

src/core/primary-tabs/primary-tabs-item.figma.tsx

@@ -0,0 +1,13 @@
+import figma from '@figma/code-connect'
+import { PrimaryTabs } from './primary-tabs'
+
+figma.connect(PrimaryTabs.Item, '<PRIMARY_TAB_URL>', {
+  props: {
+    children: figma.string('Tab name'),
+  },
+  example: (props) => (
+    <PrimaryTabs.Item aria-current={false} href="#replace-me">
+      {props.children}
+    </PrimaryTabs.Item>
+  ),
+})

src/core/primary-tabs/primary-tabs-item.tsx

@@ -20,3 +20,5 @@ export function PrimaryTabsItem(props: PrimaryTabsItem.Props) {
     </ElPrimaryTabsListItem>
   )
 }
+
+PrimaryTabsItem.displayName = 'PrimaryTabs.Item'

src/core/primary-tabs/primary-tabs.figma.tsx

@@ -0,0 +1,10 @@
+import figma from '@figma/code-connect'
+import { PrimaryTabs } from './primary-tabs'
+
+figma.connect(PrimaryTabs, '<PRIMARY_TABS_URL>', {
+  variant: { Variant: 'Default' },
+  props: {
+    children: figma.children('Tab item'),
+  },
+  example: (props) => <PrimaryTabs>{props.children}</PrimaryTabs>,
+})

src/core/secondary-tabs/secondary-tabs-item.figma.tsx

@@ -0,0 +1,13 @@
+import figma from '@figma/code-connect'
+import { SecondaryTabs } from './secondary-tabs'
+
+figma.connect(SecondaryTabs.Item, '<SECONDARY_TAB_URL>', {
+  props: {
+    children: figma.string('Tab name'),
+  },
+  example: (props) => (
+    <SecondaryTabs.Item aria-current={false} href="#replace-me">
+      {props.children}
+    </SecondaryTabs.Item>
+  ),
+})

src/core/secondary-tabs/secondary-tabs-item.tsx

@@ -21,3 +21,5 @@ export function SecondaryTabsItem(props: SecondaryTabsItem.Props) {
     </ElSecondaryTabsListItem>
   )
 }
+
+SecondaryTabsItem.displayName = 'SecondaryTabs.Item'

src/core/secondary-tabs/secondary-tabs.figma.tsx

@@ -0,0 +1,10 @@
+import figma from '@figma/code-connect'
+import { SecondaryTabs } from './secondary-tabs'
+
+figma.connect(SecondaryTabs, '<SECONDARY_TABS_URL>', {
+  variant: { Variant: 'Secondary' },
+  props: {
+    children: figma.children('Secondary tab item'),
+  },
+  example: (props) => <SecondaryTabs>{props.children}</SecondaryTabs>,
+})

src/core/tooltip/tooltip.figma.tsx

@@ -0,0 +1,13 @@
+import figma from '@figma/code-connect'
+import { Tooltip } from './tooltip'
+
+figma.connect(Tooltip, '<TOOLTIP_URL>', {
+  props: {
+    children: figma.string('Description'),
+  },
+  example: (props) => (
+    <Tooltip id="my-tooltip-id" triggerId="my-trigger-id" truncationTargetId="optional-truncation-target-id">
+      {props.children}
+    </Tooltip>
+  ),
+})

src/storybook/changelog.mdx

@@ -24,6 +24,7 @@ Beta versions should be relatively stable but subject to occssional breaking cha
   - Renamed `FeaturesItem` to `FeatureItem`. If consumers are using `Features.Item` or the common items like `Features.Bedrooms`, this change will have no impact.
 - **feat:** Added Figma Code Connect for `BottomBar`, `ButtonGroup`, `ChipSelect` and `CompactSelectNative`.
 - **feat:** Added Figma Code Connect for `Divider`, `EmptyData`, `SelectNative`, and `SplitButton`.
+- **feat:** Added Figma Code Connect for `FolderTabs`, `PrimaryTabs`, `SecondaryTabs`, and `Tooltip`.
 
 ### **5.0.0-beta.51 - 12/09/25**
 

vite.config.ts

@@ -122,6 +122,8 @@ export default defineConfig({
         '**/__story__/**',
         // - barrel files
         '**/index.ts',
+        // - our figma code connect files
+        '**/*.figma.*',
         // - our tests themselves
         '**/*.test.*',
         // - our stories