reapit · kurtdoherty · Sep 16, 2025 · Sep 16, 2025
diff --git a/figma.config.json b/figma.config.json
@@ -1,8 +1,6 @@
 {
   "codeConnect": {
-    "include": [
-      "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,dialog,divider,drawer,empty-data,features,filter-bar,folder-tabs,label-text,link,menu,page-header,pagination,primary-tabs,secondary-tabs,select-native,side-bar,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip,top-bar}/**/*.{tsx,jsx}"
-    ],
+    "include": ["src/core/**/*.tsx"],
     "importPaths": {
       "src/core/*": "@reapit/elements/core/*",
       "src/icons/*": "@reapit/elements/icons/*",
@@ -56,6 +54,8 @@
       "<PAGE_HEADER_SUPPLEMENTARY_INFO_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13349-12535",
       "<PAGE_HEADER_TITLE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13350-15766",
       "<PAGINATION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6364-9402",
+      "<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",
       "<SIDE_BAR_COLLAPSE_BUTTON_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35369",
       "<SIDE_BAR_MENU_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35439",
       "<SIDE_BAR_MENU_LIST_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35460",
@@ -66,15 +66,23 @@
       "<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",
       "<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",
       "<STATUS_INDICATOR_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=5722-7495",
       "<SUPPLEMENTARY_INFO_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14145",
       "<SUPPLEMENTARY_INFO_ITEM_BASE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14088",
       "<SUPPLEMENTARY_INFO_ITEM_SM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14107",
       "<SUPPLEMENTARY_INFO_ITEM_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14126",
+      "<TABLE_BODY_CHECKBOX_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-6937",
+      "<TABLE_BODY_ROW_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-7210",
+      "<TABLE_DOUBLE_LINE_CELL_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-6971",
+      "<TABLE_HEADER_CELL_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-7042",
+      "<TABLE_HEADER_CHECKBOX_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-7118",
+      "<TABLE_HEADER_ROW_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-7201",
+      "<TABLE_PRIMARY_DATA_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-7032",
+      "<TABLE_SINGLE_LINE_CELL_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-6732",
+      "<TABLE_TEXT_SM_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-7145",
+      "<TABLE_TOOLBAR_URL>": "https://www.figma.com/design/XJ6qcAV8gHscsUodqJMNEF/Reapit-Elements-production-ready-components?node-id=1091-7237",
       "<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",
       "<TOOLTIP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381",

diff --git a/src/core/table/body-cell/body-cell.figma.tsx b/src/core/table/body-cell/body-cell.figma.tsx
@@ -0,0 +1,95 @@
+import figma from '@figma/code-connect'
+import { Skeleton } from '../../skeleton'
+import { Table } from '../table'
+
+figma.connect(Table.BodyCell, '<TABLE_SINGLE_LINE_CELL_URL>', {
+  props: {
+    children: figma.enum('Data', {
+      Address: figma.textContent('Value'),
+      Alphanumeric: figma.textContent('Value'),
+      Badge: figma.children('Badge'),
+      'Data not available': 'Not available',
+      'Date and time': figma.textContent('Content'),
+      Features: figma.children('Features'),
+      Icon: figma.children('Icon'),
+      'Icon and value': figma.children('*'),
+      'Status indicator': figma.children('Status indicator'),
+      Tags: figma.children('Tag group'),
+      'Value and icon': figma.children('*'),
+    }),
+  },
+  example: (props) => <Table.BodyCell>{props.children}</Table.BodyCell>,
+})
+
+figma.connect(Table.BodyCell, '<TABLE_SINGLE_LINE_CELL_URL>', {
+  variant: { Skeleton: true },
+  example: () => (
+    <Table.BodyCell>
+      <Skeleton width="100px" />
+    </Table.BodyCell>
+  ),
+})
+
+figma.connect(Table.BodyCell, '<TABLE_DOUBLE_LINE_CELL_URL>', {
+  variant: { Data: 'Address' },
+  props: {
+    line1: figma.children('Row 1'),
+    line2: figma.textContent('Row 2'),
+    thumbnail: figma.children('Avatar rectangle'),
+  },
+  example: (props) => (
+    <Table.BodyCell>
+      <Table.DoubleLineLayout mediaItem={props.thumbnail} supplementaryData={props.line2}>
+        {props.line1}
+      </Table.DoubleLineLayout>
+    </Table.BodyCell>
+  ),
+})
+
+figma.connect(Table.BodyCell, '<TABLE_DOUBLE_LINE_CELL_URL>', {
+  variant: { Data: 'Avatar' },
+  props: {
+    avatar: figma.children('Avatar circle'),
+    line1: figma.children('Row 1'),
+    line2: figma.textContent('Row 2'),
+  },
+  example: (props) => (
+    <Table.BodyCell>
+      <Table.DoubleLineLayout mediaItem={props.avatar} supplementaryData={props.line2}>
+        {props.line1}
+      </Table.DoubleLineLayout>
+    </Table.BodyCell>
+  ),
+})
+
+figma.connect(Table.BodyCell, '<TABLE_DOUBLE_LINE_CELL_URL>', {
+  variant: { Data: 'Mixed data' },
+  props: {
+    line1: figma.children('First row data'),
+    line2: figma.children('Second row data'),
+  },
+  example: (props) => (
+    <Table.BodyCell>
+      <Table.DoubleLineLayout supplementaryData={props.line2}>{props.line1}</Table.DoubleLineLayout>
+    </Table.BodyCell>
+  ),
+})
+
+figma.connect(Table.BodyCell, '<TABLE_DOUBLE_LINE_CELL_URL>', {
+  variant: { Skeleton: true },
+  props: {
+    justifySelf: figma.enum('Alignment', { Left: 'start', Center: 'center', Right: 'end' }),
+    mediaItem: figma.enum('Data', {
+      Address: <Skeleton width="48px" height="40px" />,
+      Avatar: <Skeleton borderRadius="100%" width="36px" height="36px" />,
+      'Mixed data': undefined,
+    }),
+  },
+  example: (props) => (
+    <Table.BodyCell justifySelf={props.justifySelf}>
+      <Table.DoubleLineLayout mediaItem={props.mediaItem} supplementaryData={<Skeleton width="124px" />}>
+        <Skeleton width="148px" />
+      </Table.DoubleLineLayout>
+    </Table.BodyCell>
+  ),
+})
diff --git a/src/core/table/body-cell/body-cell.tsx b/src/core/table/body-cell/body-cell.tsx
@@ -64,5 +64,7 @@ export function TableBodyCell({
   )
 }
 
+TableBodyCell.displayName = 'Table.BodyCell'
+
 // Backward compatibility
 export type TableBodyCellProps = TableBodyCell.Props
diff --git a/src/core/table/body-row/body-row.figma.tsx b/src/core/table/body-row/body-row.figma.tsx
@@ -0,0 +1,33 @@
+import figma from '@figma/code-connect'
+import { Table } from '../table'
+
+figma.connect(Table.BodyRow, '<TABLE_BODY_ROW_URL>', {
+  props: {
+    checkbox: figma.boolean('Selectable', {
+      true: (
+        <Table.BodyCell>
+          <Table.Checkbox aria-label="Select all" />
+        </Table.BodyCell>
+      ),
+      false: undefined,
+    }),
+    moreActions: figma.boolean('More button', {
+      true: (
+        <Table.BodyCell>
+          <Table.MoreActions aria-label="Replace me">TODO: add menu items</Table.MoreActions>
+        </Table.BodyCell>
+      ),
+      false: undefined,
+    }),
+    content: figma.nestedProps('Content', {
+      cells: figma.children('*'),
+    }),
+  },
+  example: (props) => (
+    <Table.BodyRow>
+      {props.checkbox}
+      {props.content.cells}
+      {props.moreActions}
+    </Table.BodyRow>
+  ),
+})
diff --git a/src/core/table/body-row/body-row.tsx b/src/core/table/body-row/body-row.tsx
@@ -33,5 +33,7 @@ export function TableBodyRow({ as: Element = 'tr', children, className, ...rest
   )
 }
 
+TableBodyRow.displayName = 'Table.BodyRow'
+
 // Backward compatibility
 export type TableBodyRowProps = TableBodyRow.Props
diff --git a/src/core/table/body/body.tsx b/src/core/table/body/body.tsx
@@ -33,5 +33,7 @@ export function TableBody({ as: Element = 'tbody', children, className, ...rest
   )
 }
 
+TableBody.displayName = 'Table.Body'
+
 // Backward compatibility
 export type TableBodyProps = TableBody.Props
diff --git a/src/core/table/checkbox/checkbox.tsx b/src/core/table/checkbox/checkbox.tsx
@@ -44,7 +44,7 @@ export const TableCellCheckbox = forwardRef<HTMLInputElement, TableCellCheckbox.
   },
 )
 
-TableCellCheckbox.displayName = 'TableCellCheckbox'
+TableCellCheckbox.displayName = 'Table.Checkbox'
 
 // Backward compatibility
 export type TableCellCheckboxProps = TableCellCheckbox.Props
diff --git a/src/core/table/double-line-layout/double-line-layout.tsx b/src/core/table/double-line-layout/double-line-layout.tsx
@@ -42,5 +42,7 @@ export function TableCellDoubleLineLayout({
   )
 }
 
+TableCellDoubleLineLayout.displayName = 'Table.DoubleLineLayout'
+
 // Backward compatibility
 export type TableCellDoubleLineLayoutProps = TableCellDoubleLineLayout.Props
diff --git a/src/core/table/head/head.tsx b/src/core/table/head/head.tsx
@@ -33,5 +33,7 @@ export function TableHead({ as: Element = 'thead', children, className, ...rest
   )
 }
 
+TableHead.displayName = 'Table.Head'
+
 // Backward compatibility
 export type TableHeadProps = TableHead.Props
diff --git a/src/core/table/header-cell/header-cell.figma.tsx b/src/core/table/header-cell/header-cell.figma.tsx
@@ -0,0 +1,41 @@
+import figma from '@figma/code-connect'
+import { Table } from '../table'
+
+figma.connect(Table.HeaderCell, '<TABLE_HEADER_CELL_URL>', {
+  variant: { Sortable: false },
+  props: {
+    children: figma.string('Value'),
+    justifySelf: figma.enum('Alignment', {
+      Center: 'center',
+      Left: 'start',
+      Right: 'end',
+    }),
+  },
+  example: (props) => <Table.HeaderCell justifySelf={props.justifySelf}>{props.children}</Table.HeaderCell>,
+})
+
+figma.connect(Table.HeaderCell, '<TABLE_HEADER_CELL_URL>', {
+  variant: { Sortable: true },
+  props: {
+    children: figma.string('Value'),
+    direction: figma.enum('State', {
+      Default: 'none',
+      Hover: 'none',
+      Focus: 'none',
+      Sorted: 'descending',
+      'n/a': 'none',
+    }),
+    justifySelf: figma.enum('Alignment', {
+      Center: 'center',
+      Left: 'start',
+      Right: 'end',
+    }),
+  },
+  example: (props) => (
+    <Table.HeaderCell justifySelf={props.justifySelf}>
+      <Table.SortButton name="replace-me" value={props.direction}>
+        {props.children}
+      </Table.SortButton>
+    </Table.HeaderCell>
+  ),
+})
diff --git a/src/core/table/header-cell/header-cell.tsx b/src/core/table/header-cell/header-cell.tsx
@@ -63,5 +63,7 @@ export function TableHeaderCell({
   )
 }
 
+TableHeaderCell.displayName = 'Table.HeaderCell'
+
 // Backward compatibility
 export type TableHeaderCellProps = TableHeaderCell.Props
diff --git a/src/core/table/header-row/header-row.figma.tsx b/src/core/table/header-row/header-row.figma.tsx
@@ -0,0 +1,29 @@
+import figma from '@figma/code-connect'
+import { Table } from '../table'
+
+figma.connect(Table.HeaderRow, '<TABLE_HEADER_ROW_URL>', {
+  props: {
+    checkbox: figma.boolean('Selectable', {
+      true: (
+        <Table.HeaderCell aria-label="Select rows">
+          <Table.Checkbox aria-label="Select all" />
+        </Table.HeaderCell>
+      ),
+      false: undefined,
+    }),
+    moreActions: figma.boolean('More button', {
+      true: <Table.HeaderCell aria-label="Actions" />,
+      false: undefined,
+    }),
+    content: figma.nestedProps('Content', {
+      cells: figma.children('Header cell'),
+    }),
+  },
+  example: (props) => (
+    <Table.HeaderRow>
+      {props.checkbox}
+      {props.content.cells}
+      {props.moreActions}
+    </Table.HeaderRow>
+  ),
+})
diff --git a/src/core/table/header-row/header-row.tsx b/src/core/table/header-row/header-row.tsx
@@ -33,5 +33,7 @@ export function TableHeaderRow({ as: Element = 'tr', children, className, ...res
   )
 }
 
+TableHeaderRow.displayName = 'Table.HeaderRow'
+
 // Backward compatibility
 export type TableHeaderRowProps = TableHeaderRow.Props
diff --git a/src/core/table/more-actions/more-actions.tsx b/src/core/table/more-actions/more-actions.tsx
@@ -47,5 +47,7 @@ export function TableRowMoreActions({ children, id, ...rest }: TableRowMoreActio
   )
 }
 
+TableRowMoreActions.displayName = 'Table.MoreActions'
+
 // Backward compatibility
 export type TableRowMoreActionsProps = TableRowMoreActions.Props
diff --git a/src/core/table/primary-action/primary-action-button.tsx b/src/core/table/primary-action/primary-action-button.tsx
@@ -24,5 +24,7 @@ export function TableRowPrimaryActionButton({ className, ...rest }: TableRowPrim
   return <button {...rest} className={cx(elTableRowPrimaryAction, className)} />
 }
 
+TableRowPrimaryActionButton.displayName = 'Table.PrimaryActionButton'
+
 // Backward compatibility
 export type TableRowPrimaryActionButtonProps = TableRowPrimaryActionButton.Props
diff --git a/src/core/table/primary-action/primary-action.figma.tsx b/src/core/table/primary-action/primary-action.figma.tsx
@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect'
+import { Table } from '../table'
+
+figma.connect(Table.PrimaryAction, '<TABLE_TEXT_SM_URL>', {
+  props: {
+    children: figma.textContent('Value'),
+  },
+  example: (props) => <>{props.children}</>,
+})
+
+figma.connect(Table.PrimaryAction, '<TABLE_TEXT_SM_URL>', {
+  variant: { Style: 'Primary' },
+  props: {
+    children: figma.textContent('Value'),
+  },
+  example: (props) => <Table.PrimaryAction href="#replace-me">{props.children}</Table.PrimaryAction>,
+})
diff --git a/src/core/table/primary-action/primary-action.tsx b/src/core/table/primary-action/primary-action.tsx
@@ -22,5 +22,7 @@ export function TableRowPrimaryAction({ className, ...rest }: TableRowPrimaryAct
   return <a {...rest} className={cx(elTableRowPrimaryAction, className)} />
 }
 
+TableRowPrimaryAction.displayName = 'Table.PrimaryAction'
+
 // Backward compatibility
 export type TableRowPrimaryActionProps = TableRowPrimaryAction.Props
diff --git a/src/core/table/primary-data/primary-data.figma.tsx b/src/core/table/primary-data/primary-data.figma.tsx
@@ -0,0 +1,42 @@
+import figma from '@figma/code-connect'
+import { Table } from '../table'
+
+figma.connect(Table.PrimaryData, '<TABLE_PRIMARY_DATA_URL>', {
+  variant: { Data: 'Alphanumeric' },
+  props: {
+    iconLeft: figma.children('Icon L'),
+    iconRight: figma.children('Icon R'),
+    data: figma.nestedProps('Alphanumeric value', {
+      children: figma.textContent('Value'),
+    }),
+  },
+  example: (props) => (
+    <Table.PrimaryData iconLeft={props.iconLeft} iconRight={props.iconRight}>
+      {props.data.children}
+    </Table.PrimaryData>
+  ),
+})
+
+figma.connect(Table.PrimaryData, '<TABLE_PRIMARY_DATA_URL>', {
+  variant: { Data: 'Date and Time' },
+  props: {
+    iconLeft: figma.children('Icon L'),
+    iconRight: figma.children('Icon R'),
+    date: figma.nestedProps('Date', {
+      value: figma.textContent('Value'),
+    }),
+    comma: figma.nestedProps('Comma', {
+      value: figma.textContent('Value'),
+    }),
+    time: figma.nestedProps('Time', {
+      value: figma.textContent('Value'),
+    }),
+  },
+  example: (props) => (
+    <Table.PrimaryData iconLeft={props.iconLeft} iconRight={props.iconRight}>
+      {props.date.value}
+      {props.comma.value}
+      {props.time.value}
+    </Table.PrimaryData>
+  ),
+})