@cerberus-design/react 0.13.2-next-61259ca → 0.14.0-next-01a1b5e

package/build/modern/{chunk-ECKJGCNH.js → chunk-T6U7AKKP.js}

@@ -16,9 +16,6 @@ import {
 import {
   Button
 } from "./chunk-EXGKZGML.js";
-import {
-  useModal
-} from "./chunk-KGQG5JGW.js";
 import {
   Avatar
 } from "./chunk-BU5JK37R.js";
@@ -31,6 +28,9 @@ import {
 import {
   $cerberusIcons
 } from "./chunk-DDOTCGGA.js";
+import {
+  useModal
+} from "./chunk-KGQG5JGW.js";
 
 // src/context/confirm-modal.tsx
 import {
@@ -170,4 +170,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-ECKJGCNH.js.map
+//# sourceMappingURL=chunk-T6U7AKKP.js.map

package/build/modern/components/Tabs.client.js

@@ -0,0 +1,18 @@
+"use client";
+import {
+  Tab,
+  TabIndicator,
+  TabList,
+  TabPanel,
+  TabsList
+} from "../chunk-N7O6D7BW.js";
+import "../chunk-RZ7NG77U.js";
+import "../chunk-FQLMPEYX.js";
+export {
+  Tab,
+  TabIndicator,
+  TabList,
+  TabPanel,
+  TabsList
+};
+//# sourceMappingURL=Tabs.client.js.map

package/build/modern/context/confirm-modal.js

@@ -2,14 +2,13 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-ECKJGCNH.js";
+} from "../chunk-T6U7AKKP.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";
 import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-IQJDVFPP.js";
 import "../chunk-EXGKZGML.js";
-import "../chunk-KGQG5JGW.js";
 import "../chunk-BU5JK37R.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-JIZQFTW6.js";
@@ -17,6 +16,7 @@ import "../chunk-DDOTCGGA.js";
 import "../chunk-5KHU6MM5.js";
 import "../chunk-E3PAEB7Y.js";
 import "../chunk-HVKM54BA.js";
+import "../chunk-KGQG5JGW.js";
 export {
   ConfirmModal,
   useConfirmModal

package/build/modern/context/cta-modal.js

@@ -2,7 +2,7 @@
 import {
   CTAModal,
   useCTAModal
-} from "../chunk-FRWNAVDM.js";
+} from "../chunk-77B4HFKT.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";
 import "../chunk-XY6WL55R.js";
@@ -10,7 +10,6 @@ import "../chunk-2UXE5PDG.js";
 import "../chunk-IQJDVFPP.js";
 import "../chunk-APD6IX5R.js";
 import "../chunk-EXGKZGML.js";
-import "../chunk-KGQG5JGW.js";
 import "../chunk-BU5JK37R.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-JIZQFTW6.js";
@@ -18,6 +17,7 @@ import "../chunk-DDOTCGGA.js";
 import "../chunk-5KHU6MM5.js";
 import "../chunk-E3PAEB7Y.js";
 import "../chunk-HVKM54BA.js";
+import "../chunk-KGQG5JGW.js";
 export {
   CTAModal,
   useCTAModal

package/build/modern/context/prompt-modal.js

@@ -2,7 +2,7 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-G7AGKII3.js";
+} from "../chunk-BHSYQCDV.js";
 import "../chunk-NMF2HYWO.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";
@@ -12,7 +12,6 @@ import "../chunk-F7EWTOML.js";
 import "../chunk-IQJDVFPP.js";
 import "../chunk-UZDVOIW5.js";
 import "../chunk-EXGKZGML.js";
-import "../chunk-KGQG5JGW.js";
 import "../chunk-BU5JK37R.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-JIZQFTW6.js";
@@ -20,6 +19,7 @@ import "../chunk-DDOTCGGA.js";
 import "../chunk-5KHU6MM5.js";
 import "../chunk-E3PAEB7Y.js";
 import "../chunk-HVKM54BA.js";
+import "../chunk-KGQG5JGW.js";
 export {
   PromptModal,
   usePromptModal

package/build/modern/context/tabs.js

@@ -3,7 +3,8 @@ import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "../chunk-RIFQSCHT.js";
+} from "../chunk-RZ7NG77U.js";
+import "../chunk-FQLMPEYX.js";
 export {
   Tabs,
   TabsContext,

package/build/modern/index.js

@@ -1,15 +1,3 @@
-import {
-  ThemeProvider,
-  useThemeContext
-} from "./chunk-EB37HRCN.js";
-import {
-  ConfirmModal,
-  useConfirmModal
-} from "./chunk-ECKJGCNH.js";
-import {
-  CTAModal,
-  useCTAModal
-} from "./chunk-FRWNAVDM.js";
 import {
   NotificationCenter,
   useNotificationCenter
@@ -17,13 +5,11 @@ import {
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-G7AGKII3.js";
+} from "./chunk-BHSYQCDV.js";
 import {
-  Tbody
-} from "./chunk-ZR37P4NZ.js";
-import {
-  Td
-} from "./chunk-3R4TIF2X.js";
+  ThemeProvider,
+  useThemeContext
+} from "./chunk-EB37HRCN.js";
 import {
   Text
 } from "./chunk-2ZNIYPDV.js";
@@ -42,6 +28,14 @@ import {
 import {
   Tooltip
 } from "./chunk-LPALHB6R.js";
+import {
+  ConfirmModal,
+  useConfirmModal
+} from "./chunk-T6U7AKKP.js";
+import {
+  CTAModal,
+  useCTAModal
+} from "./chunk-77B4HFKT.js";
 import {
   Option,
   Select
@@ -49,22 +43,31 @@ import {
 import {
   Spinner
 } from "./chunk-7SYJFI5E.js";
-import {
-  Tab
-} from "./chunk-SLF6SIPB.js";
-import {
-  TabList
-} from "./chunk-UKPF7JOB.js";
-import {
-  TabPanel
-} from "./chunk-AYIRV5CL.js";
 import {
   Table,
   Tr
 } from "./chunk-B4CVET74.js";
+import {
+  Tab,
+  TabIndicator,
+  TabList,
+  TabPanel,
+  TabsList
+} from "./chunk-N7O6D7BW.js";
+import {
+  Tabs,
+  TabsContext,
+  useTabsContext
+} from "./chunk-RZ7NG77U.js";
 import {
   Tag
 } from "./chunk-F4LTOZAN.js";
+import {
+  Tbody
+} from "./chunk-ZR37P4NZ.js";
+import {
+  Td
+} from "./chunk-3R4TIF2X.js";
 import {
   NavMenuList,
   getPosition
@@ -191,9 +194,6 @@ import {
 import {
   Droppable
 } from "./chunk-TKI2CKHH.js";
-import {
-  useModal
-} from "./chunk-KGQG5JGW.js";
 import {
   useRootColors
 } from "./chunk-RMVJK26W.js";
@@ -207,7 +207,11 @@ import {
 } from "./chunk-REO5GUNC.js";
 import {
   formatNotifyCount
-} from "./chunk-UTGEFJ3L.js";
+} from "./chunk-C5EHJUS5.js";
+import {
+  getLocalStorage,
+  setLocalStorage
+} from "./chunk-FQLMPEYX.js";
 import {
   AccordionItemGroup
 } from "./chunk-F7XWOSN3.js";
@@ -233,14 +237,6 @@ import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
 } from "./chunk-JF76VIL3.js";
-import {
-  useTabsKeyboardNavigation
-} from "./chunk-ITOIXNJS.js";
-import {
-  Tabs,
-  TabsContext,
-  useTabsContext
-} from "./chunk-RIFQSCHT.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -258,6 +254,9 @@ import {
   formatMilitaryToISO,
   useDate
 } from "./chunk-3BM6MZ4A.js";
+import {
+  useModal
+} from "./chunk-KGQG5JGW.js";
 
 // src/index.ts
 export * from "@dnd-kit/core";
@@ -340,11 +339,13 @@ export {
   Spinner,
   THEME_KEY,
   Tab,
+  TabIndicator,
   TabList,
   TabPanel,
   Table,
   Tabs,
   TabsContext,
+  TabsList,
   Tag,
   Tbody,
   Td,
@@ -362,8 +363,10 @@ export {
   formatMilitaryDate,
   formatMilitaryToISO,
   formatNotifyCount,
+  getLocalStorage,
   getPosition,
   processStatus,
+  setLocalStorage,
   trapFocus,
   useCTAModal,
   useConfirmModal,
@@ -376,7 +379,6 @@ export {
   usePromptModal,
   useRootColors,
   useTabsContext,
-  useTabsKeyboardNavigation,
   useTheme,
   useThemeContext,
   useToggle

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tabs.client'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,cAAc;","names":[]}

package/build/modern/utils/index.js

@@ -1,7 +1,13 @@
 import {
   formatNotifyCount
-} from "../chunk-UTGEFJ3L.js";
+} from "../chunk-C5EHJUS5.js";
+import {
+  getLocalStorage,
+  setLocalStorage
+} from "../chunk-FQLMPEYX.js";
 export {
-  formatNotifyCount
+  formatNotifyCount,
+  getLocalStorage,
+  setLocalStorage
 };
 //# sourceMappingURL=index.js.map

package/build/modern/utils/localStorage.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  getLocalStorage,
+  setLocalStorage
+} from "../chunk-FQLMPEYX.js";
+export {
+  getLocalStorage,
+  setLocalStorage
+};
+//# sourceMappingURL=localStorage.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.13.2-next-61259ca",
+  "version": "0.14.0-next-01a1b5e",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -27,7 +27,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.13.2-next-61259ca"
+    "@cerberus-design/styled-system": "0.14.0-next-01a1b5e"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Tabs.client.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { Tabs as ArkTabs } from '@ark-ui/react/tabs'
+import { cx } from '@cerberus/styled-system/css'
+import { useTabsContext } from '../context/tabs'
+
+/**
+ * This module provides the Tabs family.
+ * @module
+ */
+
+/**
+ * The tab list container for the Tabs group.
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export function TabsList(props: ArkTabs.ListProps) {
+  const { children, ...tabsProps } = props
+  const { styles } = useTabsContext()
+
+  return (
+    <ArkTabs.List
+      {...tabsProps}
+      className={cx(tabsProps.className, styles.list)}
+    >
+      {children}
+      <TabIndicator />
+    </ArkTabs.List>
+  )
+}
+
+/**
+ * @deprecated Use `TabsList` instead.
+ */
+export const TabList = TabsList
+
+/**
+ * The trigger for the Tabs group.
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export function Tab(props: ArkTabs.TriggerProps) {
+  const { styles } = useTabsContext()
+  return (
+    <ArkTabs.Trigger
+      {...props}
+      className={cx(props.className, styles.trigger)}
+    />
+  )
+}
+
+/**
+ * The indicator for the Tabs group which shows the active tab.
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
+ *     <TabsIndicator />
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export function TabIndicator(props: ArkTabs.IndicatorProps) {
+  const { styles } = useTabsContext()
+  return (
+    <ArkTabs.Indicator
+      {...props}
+      className={cx(props.className, styles.indicator)}
+    />
+  )
+}
+
+/**
+ * The content for the Tabs group.
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabList description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export function TabPanel(props: ArkTabs.ContentProps) {
+  const { styles } = useTabsContext()
+  return (
+    <ArkTabs.Content
+      {...props}
+      className={cx(props.className, styles.content)}
+    />
+  )
+}

package/src/context/tabs.tsx

@@ -1,17 +1,18 @@
 'use client'
 
+import { Tabs as ArkTabs } from '@ark-ui/react/tabs'
 import { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'
 import type { Pretty } from '@cerberus/styled-system/types'
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
-  useRef,
   useState,
-  type MutableRefObject,
   type PropsWithChildren,
 } from 'react'
+import { getLocalStorage, setLocalStorage } from '../utils/localStorage'
 
 /**
  * This module provides a Tabs component and a hook to access its context.
@@ -19,103 +20,103 @@ import {
  */
 
 export interface TabsContextValue {
-  /**
-   * The ref for the tabs.
-   */
-  tabs: MutableRefObject<HTMLButtonElement[]>
-  /**
-   * The id of the tabs component.
-   */
-  id: string
-  /**
-   * The active tab id.
-   */
-  active: string
   /**
    * The styles for the tabs.
    */
-  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>
-  /**
-   * Called when the active tab is updated.
-   */
-  onTabUpdate: (active: string) => void
+  styles: {
+    list: Pretty<string>
+    trigger: Pretty<string>
+    content: Pretty<string>
+    indicator: Pretty<string>
+  }
 }
 
 export const TabsContext = createContext<TabsContextValue | null>(null)
 
-export interface TabsProps {
+export interface TabsProviderBaseProps extends ArkTabs.RootProps {
   /**
    * A unique identifier for the Tabs component. Typically used when there are
-   * multiple Tabs components on the same page.
+   * multiple Tabs components on the same page and you want to uniquely cache
+   * the active tab state.
    */
-  id?: string
+  uuid?: string
   /**
-   * The default active tab id.
+   * The default tab to display when the component is first rendered.
    */
-  active?: string
+  defaultValue?: string
   /**
    * Whether to cache the active tab state in local storage.
    */
   cache?: boolean
 }
 
+export type TabsProviderProps = TabsProviderBaseProps & TabsVariantProps
+
 /**
  * The Tabs component provides a context to manage tab state.
- * @see https://cerberus.digitalu.design/react/tabs
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
  * @example
  * ```tsx
  * <Tabs cache>
- *  <TabList description="Button details">
- *    <Tab id="overview">Overview</Tab>
- *    <Tab id="guidelines">Guidelines</Tab>
- *  </TabList>
- *  <TabPanels>
- *    <TabPanel id="overview">Overview content</TabPanel>
- *    <TabPanel id="guidelines">Guidelines content</TabPanel>
- *  </TabPanels>
+ *  <TabsList>
+ *    <Tab value="overview">Overview</Tab>
+ *    <Tab value="guidelines">Guidelines</Tab>
+ *  </TabsList>
+ *  <TabPanel value="overview">Overview content</TabPanel>
+ *  <TabPanel value="guidelines">Guidelines content</TabPanel>
  * </Tabs>
  * ```
  */
-export function Tabs(
-  props: PropsWithChildren<TabsProps & TabsVariantProps>,
-): JSX.Element {
-  const { cache, active, id, palette } = props
-  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))
-  const tabsList = useRef<HTMLButtonElement[]>([])
-  const uuid = useMemo(() => {
-    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'
-  }, [id])
+export function Tabs(props: PropsWithChildren<TabsProviderProps>): JSX.Element {
+  const { cache, defaultValue, palette, uuid, ...arkProps } = props
+  const [activeTab, setActiveTab] = useState<string | undefined>(() =>
+    cache ? '' : defaultValue,
+  )
+  const styles = tabs({ palette })
 
-  const value = useMemo(
-    () => ({
-      tabs: tabsList,
-      id: uuid,
-      active: activeTab,
-      styles: tabs({ palette }),
-      onTabUpdate: setActiveTab,
-    }),
-    [activeTab, setActiveTab, palette, uuid, tabsList],
+  const cacheKey = useMemo(
+    () => (uuid ? `cerberus-tabs-${uuid}` : 'cerberus-tabs'),
+    [uuid],
   )
 
-  // Get the active tab from local storage
-  useEffect(() => {
-    if (cache) {
-      const cachedTab = window.localStorage.getItem(uuid)
-      setActiveTab(
-        cache ? cachedTab || (props.active ?? '') : props.active ?? '',
-      )
-    }
-  }, [cache, active, uuid])
+  const handleValueChange = useCallback(
+    (details: { value: string }) => {
+      if (cache) {
+        setLocalStorage(cacheKey, details.value)
+      }
+      setActiveTab(details.value)
+    },
+    [cache],
+  )
 
-  // Update the active tab in local storage
   useEffect(() => {
-    if (cache && activeTab) {
-      window.localStorage.setItem(uuid, activeTab)
+    if (cache && !activeTab) {
+      const cachedTab = getLocalStorage(cacheKey, defaultValue ?? '')
+      setActiveTab(cachedTab)
     }
-  }, [activeTab, cache])
+  }, [cache, defaultValue, activeTab])
+
+  const value = useMemo(
+    () => ({
+      active: activeTab,
+      styles,
+    }),
+    [activeTab, palette, styles],
+  )
 
   return (
-    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>
+    <TabsContext.Provider value={value}>
+      <ArkTabs.Root
+        {...arkProps}
+        aria-busy={!activeTab}
+        className={styles.root}
+        defaultValue={defaultValue}
+        onValueChange={handleValueChange}
+        value={activeTab}
+      >
+        {props.children}
+      </ArkTabs.Root>
+    </TabsContext.Provider>
   )
 }
 

package/src/index.ts

@@ -41,9 +41,7 @@ export * from './components/ProgressBar'
 export * from './components/Radio'
 export * from './components/Select'
 export * from './components/Spinner'
-export * from './components/Tab'
-export * from './components/TabList'
-export * from './components/TabPanel'
+export * from './components/Tabs.client'
 export * from './components/Table'
 export * from './components/Thead'
 export * from './components/Th'
@@ -79,7 +77,6 @@ export * from './hooks/useRootColors'
 // aria-helpers
 
 export * from './aria-helpers/nav-menu.aria'
-export * from './aria-helpers/tabs.aria'
 export * from './aria-helpers/trap-focus.aria'
 
 // utils