feat: add code connect for Divider, EmptyData, SelectNative, and SplitButton

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,features,link,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,link,select-native,split-button,tag,tag-group}/**/*.{tsx,jsx}"
     ],
     "importPaths": {
       "src/core/*": "@reapit/elements/core/*",
@@ -26,10 +26,16 @@
       "<CHIP_SELECT_OPTION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12386-27991",
       "<CHIP_SELECT_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12386-28584",
       "<CHIP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7051-11054",
-      "<COMPACT_SELECT_NAVTIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=14083-70317",
+      "<COMPACT_SELECT_NATIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=14083-70317",
+      "<DIVIDER_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11095-10396",
+      "<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",
       "<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",
       "<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"
     }

src/core/button/button.figma.tsx

@@ -25,8 +25,8 @@ figma.connect(Button, '<BUTTON_URL>', {
     }),
   },
   example: (props) => (
-    // NOTE: Use AnchorButton when needing to navigate
     <Button
+      // NOTE: Use AnchorButton when needing to navigate
       disabled={props.disabled}
       hasNoPadding={props.hasNoPadding}
       iconLeft={props.iconLeft}

src/core/compact-select-native/compact-select-native.figma.tsx

@@ -1,9 +1,8 @@
 import { CompactSelectNative } from './compact-select-native'
 import figma from '@figma/code-connect'
 
-figma.connect(CompactSelectNative, '<COMPACT_SELECT_NAVTIVE_URL>', {
+figma.connect(CompactSelectNative, '<COMPACT_SELECT_NATIVE_URL>', {
   props: {
-    // These props were automatically mapped based on your linked code:
     size: figma.enum('Size', {
       Small: 'small',
       Medium: 'medium',

src/core/divider/divider.figma.tsx

@@ -0,0 +1,7 @@
+import { Divider } from './divider'
+import figma from '@figma/code-connect'
+
+figma.connect(Divider, '<DIVIDER_URL>', {
+  props: {},
+  example: () => <Divider />,
+})

src/core/empty-data/action/action-button.tsx

@@ -20,3 +20,5 @@ export type EmptyDataActionButtonProps = EmptyDataActionButton.Props
 export function EmptyDataActionButton(props: EmptyDataActionButton.Props) {
   return <Button {...props} size="medium" variant="tertiary" useLinkStyle />
 }
+
+EmptyDataActionButton.displayName = 'EmptyData.ActionButton'

src/core/empty-data/action/action.tsx

@@ -27,3 +27,5 @@ export type EmptyDataActionProps = EmptyDataAction.Props
 export function EmptyDataAction(props: EmptyDataAction.Props) {
   return <AnchorButton {...props} size="medium" variant="tertiary" useLinkStyle />
 }
+
+EmptyDataAction.displayName = 'EmptyData.Action'

src/core/empty-data/description/description.tsx

@@ -27,3 +27,5 @@ export function EmptyDataDescription({ children, secondaryText, ...rest }: Empty
     </ElEmptyDataDescription>
   )
 }
+
+EmptyDataDescription.displayName = 'EmptyData.Description'

src/core/empty-data/empty-data.figma.tsx

@@ -0,0 +1,52 @@
+import { EmptyData } from './empty-data'
+import figma from '@figma/code-connect'
+
+figma.connect(EmptyData, '<EMPTY_DATA_URL>', {
+  variant: { Content: 'Description & Action' },
+  props: {
+    action: figma.nestedProps('Button', {
+      label: figma.string('Label'),
+    }),
+    description: figma.textContent('Description'),
+    secondaryText: figma.enum('Content', {
+      'Description & Action': figma.textContent('Secondary text'),
+    }),
+  },
+  example: (props) => (
+    <EmptyData>
+      <EmptyData.Description secondaryText={props.secondaryText}>{props.description}</EmptyData.Description>
+      {/* NOTE: for actions that should act as a button, use EmptyData.ActionButton */}
+      <EmptyData.Action href="#replace-me">{props.action.label}</EmptyData.Action>
+    </EmptyData>
+  ),
+})
+
+figma.connect(EmptyData, '<EMPTY_DATA_URL>', {
+  variant: { Content: 'Description' },
+  props: {
+    description: figma.textContent('Description'),
+    secondaryText: figma.enum('Content', {
+      Description: figma.textContent('Secondary text'),
+    }),
+  },
+  example: (props) => (
+    <EmptyData>
+      <EmptyData.Description secondaryText={props.secondaryText}>{props.description}</EmptyData.Description>
+    </EmptyData>
+  ),
+})
+
+figma.connect(EmptyData, '<EMPTY_DATA_URL>', {
+  variant: { Content: 'Action' },
+  props: {
+    action: figma.nestedProps('Button', {
+      label: figma.string('Label'),
+    }),
+  },
+  example: (props) => (
+    <EmptyData>
+      {/* NOTE: for actions that should act as a button, use EmptyData.ActionButton */}
+      <EmptyData.Action href="#replace-me">{props.action.label}</EmptyData.Action>
+    </EmptyData>
+  ),
+})

src/core/select-native/select-native.figma.tsx

@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect'
+import { SelectNative } from './select-native'
+
+figma.connect(SelectNative, '<SELECT_NATIVE_URL>', {
+  props: {
+    size: figma.enum('Size', {
+      Small: 'small',
+      Medium: 'medium',
+      Large: 'large',
+    }),
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+    selectionLabel: figma.string('Selection label'),
+  },
+  example: (props) => (
+    <SelectNative disabled={props.disabled} size={props.size}>
+      <option>{props.selectionLabel}</option>
+      {/* TODO: add remaining options */}
+    </SelectNative>
+  ),
+})

src/core/split-button/action/action.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect'
+import { SplitButton } from '../split-button'
+
+figma.connect(SplitButton.Action, '<SPLIT_BUTTON_ACTION_URL>', {
+  props: {
+    children: figma.string('Label'),
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+  },
+  example: (props) => (
+    <SplitButton.Action disabled={props.disabled}>
+      {/* Use SplitButton.AnchorAction for main actions that involve navigation */}
+      {props.children}
+    </SplitButton.Action>
+  ),
+})

src/core/split-button/action/action.tsx

@@ -19,3 +19,5 @@ export namespace SplitButtonAction {
 export function SplitButtonAction(props: SplitButtonAction.Props) {
   return <SplitButtonActionBase as="button" {...props} />
 }
+
+SplitButtonAction.displayName = 'SplitButton.Action'

src/core/split-button/action/anchor-action.tsx

@@ -16,3 +16,5 @@ export namespace SplitButtonAnchorAction {
 export function SplitButtonAnchorAction(props: SplitButtonAnchorAction.Props) {
   return <SplitButtonActionBase as="a" {...props} />
 }
+
+SplitButtonAnchorAction.displayName = 'SplitButton.AnchorAction'

src/core/split-button/split-button-menu.figma.tsx

@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect'
+import { SplitButton } from './split-button'
+
+figma.connect(SplitButton.Menu, '<SPLIT_BUTTON_MENU_URL>', {
+  props: {
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+  },
+  example: (props) => (
+    <SplitButton.Menu aria-label="Replace me" disabled={props.disabled}>
+      TODO: Add menu items
+    </SplitButton.Menu>
+  ),
+})

src/core/split-button/split-button-menu.tsx

@@ -1,7 +1,8 @@
 import { Menu } from '#src/core/menu'
 import { SplitButtonMenuButton } from './menu-button'
+import { useId } from 'react'
 
-import { useId, type ComponentProps, type ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 export namespace SplitButtonMenu {
   export interface Props extends ComponentProps<typeof SplitButtonMenuButton> {
@@ -28,3 +29,5 @@ export function SplitButtonMenu({ children, id, ...rest }: SplitButtonMenu.Props
     </>
   )
 }
+
+SplitButtonMenu.displayName = 'SplitButton.Menu'

src/core/split-button/split-button.figma.tsx

@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect'
+import { SplitButton } from './split-button'
+
+figma.connect(SplitButton, '<SPLIT_BUTTON_URL>', {
+  props: {
+    action: figma.children('Main action button'),
+    menu: figma.children('Dropdown menu button'),
+    size: figma.enum('Size', {
+      Small: 'small',
+      Medium: 'medium',
+      Large: 'large',
+    }),
+    variant: figma.enum('Variant', {
+      Primary: 'primary',
+      Secondary: 'secondary',
+    }),
+  },
+  example: (props) => <SplitButton action={props.action} menu={props.menu} size={props.size} variant={props.variant} />,
+})

src/storybook/changelog.mdx

@@ -23,6 +23,7 @@ Beta versions should be relatively stable but subject to occssional breaking cha
   - The colour prop for `Avatar` now accepts `'default' | 'primary'` instead of `'default' | 'purple'`;
   - 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`.
 
 ### **5.0.0-beta.51 - 12/09/25**