From 8cd34f2407ea473cb147501be5c9ca885b4a924f Mon Sep 17 00:00:00 2001
From: frankensteinke <51126809+frankensteinke@users.noreply.github.com>
Date: Wed, 13 May 2026 13:05:58 -0400
Subject: [PATCH] chore: connect Batch 5 components to Figma via Code Connect

---
 .../DescriptionList/DescriptionList.figma.tsx | 29 +++++++++++++
 .../src/components/NavBar/NavBar.figma.tsx    | 16 +++++++
 .../RadioGroup/RadioGroup.figma.tsx           | 15 +++++++
 .../react/src/components/Tabs/Tabs.figma.tsx  | 43 +++++++++++++++++++
 .../src/components/TopBar/TopBar.figma.tsx    | 16 +++++++
 5 files changed, 119 insertions(+)
 create mode 100644 packages/react/src/components/DescriptionList/DescriptionList.figma.tsx
 create mode 100644 packages/react/src/components/NavBar/NavBar.figma.tsx
 create mode 100644 packages/react/src/components/RadioGroup/RadioGroup.figma.tsx
 create mode 100644 packages/react/src/components/Tabs/Tabs.figma.tsx
 create mode 100644 packages/react/src/components/TopBar/TopBar.figma.tsx

diff --git a/packages/react/src/components/DescriptionList/DescriptionList.figma.tsx b/packages/react/src/components/DescriptionList/DescriptionList.figma.tsx
new file mode 100644
index 000000000..362914d56
--- /dev/null
+++ b/packages/react/src/components/DescriptionList/DescriptionList.figma.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import figma from '@figma/code-connect';
+import {
+  DescriptionList,
+  DescriptionListItem,
+  DescriptionTerm,
+  DescriptionDetails
+} from '../../index';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/CEFVdiecqDjLSjhorjHUzI/Product-Foundations--Cauldron--Library?node-id=240-4209&m=dev';
+
+figma.connect(DescriptionList, FIGMA_URL, {
+  props: {
+    collapsed: figma.enum('Collapsed', { True: true })
+  },
+  example: ({ collapsed }) => (
+    <DescriptionList collapsed={collapsed}>
+      <DescriptionListItem>
+        <DescriptionTerm>Term 1</DescriptionTerm>
+        <DescriptionDetails>Details 1</DescriptionDetails>
+      </DescriptionListItem>
+      <DescriptionListItem>
+        <DescriptionTerm>Term 2</DescriptionTerm>
+        <DescriptionDetails>Details 2</DescriptionDetails>
+      </DescriptionListItem>
+    </DescriptionList>
+  )
+});
diff --git a/packages/react/src/components/NavBar/NavBar.figma.tsx b/packages/react/src/components/NavBar/NavBar.figma.tsx
new file mode 100644
index 000000000..1007c5fa1
--- /dev/null
+++ b/packages/react/src/components/NavBar/NavBar.figma.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import figma from '@figma/code-connect';
+import { NavBar, NavItem } from '../../index';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/CEFVdiecqDjLSjhorjHUzI/Product-Foundations--Cauldron--Library?node-id=82-137&m=dev';
+
+figma.connect(NavBar, FIGMA_URL, {
+  example: () => (
+    <NavBar>
+      <NavItem active>Home</NavItem>
+      <NavItem active={false}>About</NavItem>
+      <NavItem active={false}>Contact</NavItem>
+    </NavBar>
+  )
+});
diff --git a/packages/react/src/components/RadioGroup/RadioGroup.figma.tsx b/packages/react/src/components/RadioGroup/RadioGroup.figma.tsx
new file mode 100644
index 000000000..bf0df2654
--- /dev/null
+++ b/packages/react/src/components/RadioGroup/RadioGroup.figma.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import figma from '@figma/code-connect';
+import { RadioGroup } from '../../index';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/CEFVdiecqDjLSjhorjHUzI/Product-Foundations--Cauldron--Library?node-id=231-2042&m=dev';
+
+figma.connect(RadioGroup, FIGMA_URL, {
+  example: () => (
+    <RadioGroup
+      name="example"
+      radios={[{ id: 'option-a', value: 'a', label: 'Option A' }]}
+    />
+  )
+});
diff --git a/packages/react/src/components/Tabs/Tabs.figma.tsx b/packages/react/src/components/Tabs/Tabs.figma.tsx
new file mode 100644
index 000000000..8391af018
--- /dev/null
+++ b/packages/react/src/components/Tabs/Tabs.figma.tsx
@@ -0,0 +1,43 @@
+import React, { useRef } from 'react';
+import figma from '@figma/code-connect';
+import { Tabs, Tab, TabPanel } from '../../index';
+
+const TAB_FIGMA_URL =
+  'https://www.figma.com/design/CEFVdiecqDjLSjhorjHUzI/Product-Foundations--Cauldron--Library?node-id=259-6525&m=dev';
+
+const TAB_PANEL_FIGMA_URL =
+  'https://www.figma.com/design/CEFVdiecqDjLSjhorjHUzI/Product-Foundations--Cauldron--Library?node-id=3409-1057&m=dev';
+
+figma.connect(Tab, TAB_FIGMA_URL, {
+  example: () => {
+    const panelOneRef = useRef<HTMLDivElement>(null);
+    const panelTwoRef = useRef<HTMLDivElement>(null);
+    return (
+      <>
+        <Tabs aria-label="Example tabs">
+          <Tab target={panelOneRef}>Tab 1</Tab>
+          <Tab target={panelTwoRef}>Tab 2</Tab>
+        </Tabs>
+        <TabPanel ref={panelOneRef}>Panel 1 content</TabPanel>
+        <TabPanel ref={panelTwoRef}>Panel 2 content</TabPanel>
+      </>
+    );
+  }
+});
+
+figma.connect(TabPanel, TAB_PANEL_FIGMA_URL, {
+  example: () => {
+    const panelOneRef = useRef<HTMLDivElement>(null);
+    const panelTwoRef = useRef<HTMLDivElement>(null);
+    return (
+      <>
+        <Tabs aria-label="Example tabs">
+          <Tab target={panelOneRef}>Tab 1</Tab>
+          <Tab target={panelTwoRef}>Tab 2</Tab>
+        </Tabs>
+        <TabPanel ref={panelOneRef}>Panel 1 content</TabPanel>
+        <TabPanel ref={panelTwoRef}>Panel 2 content</TabPanel>
+      </>
+    );
+  }
+});
diff --git a/packages/react/src/components/TopBar/TopBar.figma.tsx b/packages/react/src/components/TopBar/TopBar.figma.tsx
new file mode 100644
index 000000000..718ed46b0
--- /dev/null
+++ b/packages/react/src/components/TopBar/TopBar.figma.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import figma from '@figma/code-connect';
+import { TopBar, TopBarItem, TopBarTrigger } from '../../index';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/CEFVdiecqDjLSjhorjHUzI/Product-Foundations--Cauldron--Library?node-id=515-2774&m=dev';
+
+figma.connect(TopBar, FIGMA_URL, {
+  example: () => (
+    <TopBar>
+      <TopBarItem>Home</TopBarItem>
+      <TopBarItem>About</TopBarItem>
+      <TopBarTrigger>Menu</TopBarTrigger>
+    </TopBar>
+  )
+});