@cerberus-design/react 0.13.2 → 0.14.0

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/hooks/useDate.ts

@@ -129,6 +129,18 @@ export function formatMilitaryDate(input: string): string {
   return [day, month, year].filter(Boolean).join(' ')
 }
 
+/**
+ * Formats a date string to US Military format.
+ * @param date The date string to format (i.e., '2024-01-01')
+ * @returns The formatted date string in US Military format (DD MMM YYYY)
+ */
+export function formatISOToMilitary(date: string): string {
+  const [year, month, day] = date.split('-')
+  const monthIndex = parseInt(month, 10) - 1
+  const monthStr = MONTHS[monthIndex]
+  return `${day} ${monthStr} ${year}`
+}
+
 /**
  * Date formatting options
  * @example

package/src/index.ts

@@ -5,11 +5,15 @@
 
 // components
 
+export * from './components/Accordion'
+export * from './components/AccordionItemGroup'
 export * from './components/Admonition'
 export * from './components/Avatar'
 export * from './components/Button'
 export * from './components/Checkbox'
 export * from './components/CircularProgress'
+export * from './components/DatePicker.client'
+export * from './components/DatePicker.server'
 export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
@@ -37,15 +41,14 @@ 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'
 export * from './components/Td'
 export * from './components/Tbody'
 export * from './components/Tag'
+export * from './components/Text'
 export * from './components/Textarea'
 export * from './components/Toggle'
 export * from './components/Tooltip'
@@ -74,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

package/src/utils/index.ts

@@ -17,3 +17,5 @@ export function formatNotifyCount(count: number): string {
   if (count > 99) return '99+'
   return count.toString()
 }
+
+export * from './localStorage'

package/src/utils/localStorage.ts

@@ -0,0 +1,28 @@
+'use client'
+
+/**
+ * A utility function to get a value from local storage.
+ * @param key The key to get from local storage.
+ * @param defaultValue The fallback value if the key is not found.
+ * @returns key or defaultValue
+ */
+export function getLocalStorage<T extends string>(
+  key: string,
+  defaultValue: T,
+): T {
+  const value = window.localStorage.getItem(key)
+  if (value) {
+    return value as T
+  }
+  return defaultValue
+}
+
+/**
+ * A utility function to set a value in local storage.
+ * @param key The key to set in local storage.
+ * @param value The value to set in local storage.
+ */
+export function setLocalStorage<T>(key: string, value: T): void {
+  const stringValue = typeof value === 'string' ? value : JSON.stringify(value)
+  window.localStorage.setItem(key, stringValue)
+}

package/build/legacy/aria-helpers/tabs.aria.cjs

@@ -1,100 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/aria-helpers/tabs.aria.ts
-var tabs_aria_exports = {};
-__export(tabs_aria_exports, {
-  useTabsKeyboardNavigation: () => useTabsKeyboardNavigation
-});
-module.exports = __toCommonJS(tabs_aria_exports);
-var import_react2 = require("react");
-
-// src/context/tabs.tsx
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var TabsContext = (0, import_react.createContext)(null);
-function useTabsContext() {
-  const context = (0, import_react.useContext)(TabsContext);
-  if (!context) {
-    throw new Error("useTabsContext must be used within a Tabs Provider.");
-  }
-  return context;
-}
-
-// src/aria-helpers/tabs.aria.ts
-function getNextIndex(index, length) {
-  return index === length - 1 ? 0 : index + 1;
-}
-function getPrevIndex(index, length) {
-  return index === 0 ? length - 1 : index - 1;
-}
-function useTabsKeyboardNavigation() {
-  const { tabs: tabs2 } = useTabsContext();
-  const [activeTab, setActiveTab] = (0, import_react2.useState)(-1);
-  (0, import_react2.useEffect)(() => {
-    const handleKeyDown = (event) => {
-      const index = activeTab === -1 ? tabs2.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
-      const nextIndex = getNextIndex(index, tabs2.current.length);
-      const prevIndex = getPrevIndex(index, tabs2.current.length);
-      if (index === -1) return;
-      switch (event.key) {
-        case "ArrowLeft":
-          event.preventDefault();
-          setActiveTab(prevIndex);
-          tabs2.current[prevIndex].focus();
-          break;
-        case "ArrowRight":
-          event.preventDefault();
-          setActiveTab(nextIndex);
-          tabs2.current[nextIndex].focus();
-          break;
-        case "Home":
-          event.preventDefault();
-          setActiveTab(0);
-          tabs2.current[0].focus();
-          break;
-        case "End":
-          event.preventDefault();
-          setActiveTab(tabs2.current.length - 1);
-          tabs2.current[tabs2.current.length - 1].focus();
-          break;
-        default:
-          break;
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [activeTab, tabs2.current]);
-  return {
-    ref: (tab) => {
-      if (tab && !tabs2.current.includes(tab)) {
-        tabs2.current.push(tab);
-      }
-    }
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useTabsKeyboardNavigation
-});
-//# sourceMappingURL=tabs.aria.cjs.map

package/build/legacy/aria-helpers/tabs.aria.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/aria-helpers/tabs.aria.ts","../../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n  return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n  return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n  const { tabs } = useTabsContext()\n  const [activeTab, setActiveTab] = useState(-1)\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const index =\n        activeTab === -1\n          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n          : activeTab\n      const nextIndex = getNextIndex(index, tabs.current.length)\n      const prevIndex = getPrevIndex(index, tabs.current.length)\n\n      // If the active tab is not found, do nothing\n      if (index === -1) return\n\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault()\n          setActiveTab(prevIndex)\n          tabs.current[prevIndex].focus()\n          break\n        case 'ArrowRight':\n          event.preventDefault()\n          setActiveTab(nextIndex)\n          tabs.current[nextIndex].focus()\n          break\n        case 'Home':\n          event.preventDefault()\n          setActiveTab(0)\n          tabs.current[0].focus()\n          break\n        case 'End':\n          event.preventDefault()\n          setActiveTab(tabs.current.length - 1)\n          tabs.current[tabs.current.length - 1].focus()\n          break\n        default:\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [activeTab, tabs.current])\n\n  return {\n    ref: (tab: HTMLButtonElement) => {\n      if (tab && !tabs.current.includes(tab)) {\n        tabs.current.push(tab)\n      }\n    },\n  }\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The ref for the tabs.\n   */\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  /**\n   * The id of the tabs component.\n   */\n  id: string\n  /**\n   * The active tab id.\n   */\n  active: string\n  /**\n   * The styles for the tabs.\n   */\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  /**\n   * Called when the active tab is updated.\n   */\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page.\n   */\n  id?: string\n  /**\n   * The default active tab id.\n   */\n  active?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @see https://cerberus.digitalu.design/react/tabs\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabList description=\"Button details\">\n *    <Tab id=\"overview\">Overview</Tab>\n *    <Tab id=\"guidelines\">Guidelines</Tab>\n *  </TabList>\n *  <TabPanels>\n *    <TabPanel id=\"overview\">Overview content</TabPanel>\n *    <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n *  </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\n  )\n\n  // Get the active tab from local storage\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem(uuid)\n      setActiveTab(\n        cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n      )\n    }\n  }, [cache, active, uuid])\n\n  // Update the active tab in local storage\n  useEffect(() => {\n    if (cache && activeTab) {\n      window.localStorage.setItem(uuid, activeTab)\n    }\n  }, [activeTab, cache])\n\n  return (\n    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>\n  )\n}\n\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\n */\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAAoC;;;ACApC,qBAA4C;AAE5C,mBASO;AAwGH;AA1EG,IAAM,kBAAc,4BAAuC,IAAI;AAkF/D,SAAS,iBAAmC;AACjD,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;AD9HA,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,SAAS,IAAI,IAAI,QAAQ;AAC5C;AAEA,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC5C;AAEO,SAAS,4BAA4B;AAC1C,QAAM,EAAE,MAAAC,MAAK,IAAI,eAAe;AAChC,QAAM,CAAC,WAAW,YAAY,QAAI,wBAAS,EAAE;AAE7C,+BAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,YAAM,QACJ,cAAc,KACVA,MAAK,QAAQ,UAAU,CAAC,QAAQ,IAAI,iBAAiB,MAAM,IAC3D;AACN,YAAM,YAAY,aAAa,OAAOA,MAAK,QAAQ,MAAM;AACzD,YAAM,YAAY,aAAa,OAAOA,MAAK,QAAQ,MAAM;AAGzD,UAAI,UAAU,GAAI;AAElB,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,UAAAA,MAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,UAAAA,MAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,CAAC;AACd,UAAAA,MAAK,QAAQ,CAAC,EAAE,MAAM;AACtB;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAaA,MAAK,QAAQ,SAAS,CAAC;AACpC,UAAAA,MAAK,QAAQA,MAAK,QAAQ,SAAS,CAAC,EAAE,MAAM;AAC5C;AAAA,QACF;AACE;AAAA,MACJ;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAElD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,WAAWA,MAAK,OAAO,CAAC;AAE5B,SAAO;AAAA,IACL,KAAK,CAAC,QAA2B;AAC/B,UAAI,OAAO,CAACA,MAAK,QAAQ,SAAS,GAAG,GAAG;AACtC,QAAAA,MAAK,QAAQ,KAAK,GAAG;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","tabs"]}

package/build/legacy/components/Tab.cjs

@@ -1,135 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Tab.tsx
-var Tab_exports = {};
-__export(Tab_exports, {
-  Tab: () => Tab
-});
-module.exports = __toCommonJS(Tab_exports);
-var import_react3 = require("react");
-
-// src/context/tabs.tsx
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var TabsContext = (0, import_react.createContext)(null);
-function useTabsContext() {
-  const context = (0, import_react.useContext)(TabsContext);
-  if (!context) {
-    throw new Error("useTabsContext must be used within a Tabs Provider.");
-  }
-  return context;
-}
-
-// src/components/Tab.tsx
-var import_css = require("@cerberus/styled-system/css");
-
-// src/aria-helpers/tabs.aria.ts
-var import_react2 = require("react");
-function getNextIndex(index, length) {
-  return index === length - 1 ? 0 : index + 1;
-}
-function getPrevIndex(index, length) {
-  return index === 0 ? length - 1 : index - 1;
-}
-function useTabsKeyboardNavigation() {
-  const { tabs: tabs2 } = useTabsContext();
-  const [activeTab, setActiveTab] = (0, import_react2.useState)(-1);
-  (0, import_react2.useEffect)(() => {
-    const handleKeyDown = (event) => {
-      const index = activeTab === -1 ? tabs2.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
-      const nextIndex = getNextIndex(index, tabs2.current.length);
-      const prevIndex = getPrevIndex(index, tabs2.current.length);
-      if (index === -1) return;
-      switch (event.key) {
-        case "ArrowLeft":
-          event.preventDefault();
-          setActiveTab(prevIndex);
-          tabs2.current[prevIndex].focus();
-          break;
-        case "ArrowRight":
-          event.preventDefault();
-          setActiveTab(nextIndex);
-          tabs2.current[nextIndex].focus();
-          break;
-        case "Home":
-          event.preventDefault();
-          setActiveTab(0);
-          tabs2.current[0].focus();
-          break;
-        case "End":
-          event.preventDefault();
-          setActiveTab(tabs2.current.length - 1);
-          tabs2.current[tabs2.current.length - 1].focus();
-          break;
-        default:
-          break;
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [activeTab, tabs2.current]);
-  return {
-    ref: (tab) => {
-      if (tab && !tabs2.current.includes(tab)) {
-        tabs2.current.push(tab);
-      }
-    }
-  };
-}
-
-// src/components/Tab.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Tab(props) {
-  const { value, ...nativeProps } = props;
-  const { active, onTabUpdate, styles } = useTabsContext();
-  const [isPending, startTransition] = (0, import_react3.useTransition)();
-  const { ref } = useTabsKeyboardNavigation();
-  const isActive = (0, import_react3.useMemo)(() => active === value, [active, value]);
-  function handleClick(e) {
-    var _a;
-    (_a = props.onClick) == null ? void 0 : _a.call(props, e);
-    startTransition(() => onTabUpdate(e.currentTarget.value));
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "button",
-    {
-      ...nativeProps,
-      ...!isActive && { tabIndex: -1 },
-      "aria-controls": `panel:${value}`,
-      "aria-busy": isPending,
-      "aria-selected": isActive,
-      id: `tab:${value}`,
-      className: (0, import_css.cx)(nativeProps.className, styles.tab),
-      onClick: handleClick,
-      role: "tab",
-      ref,
-      value
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Tab
-});
-//# sourceMappingURL=Tab.cjs.map

package/build/legacy/components/Tab.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Tab.tsx","../../../src/context/tabs.tsx","../../../src/aria-helpers/tabs.aria.ts"],"sourcesContent":["'use client'\n\nimport {\n  useMemo,\n  useTransition,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'\n\n/**\n * This module provides a Tab component.\n * @module\n */\n\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The id of the tab that will be tracked as the active tab and used for aria\n   * attributes.\n   */\n  value: string\n}\n\n/**\n * The Tab component provides a tab element to be used in a TabList.\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @see https://cerberus.digitalu.design/react/tabs\n * @memberof module:Tabs\n * @example\n * ```tsx\n * <Tabs>\n *  <TabList description=\"Profile settings\">\n *   <Tab value=\"overview\">Overview</Tab>\n *  </TabList>\n *  <TabPanel tab=\"overview\">...</TabPanel>\n * </Tabs>\n * ```\n */\nexport function Tab(props: TabProps) {\n  const { value, ...nativeProps } = props\n  const { active, onTabUpdate, styles } = useTabsContext()\n  const [isPending, startTransition] = useTransition()\n  const { ref } = useTabsKeyboardNavigation()\n  const isActive = useMemo(() => active === value, [active, value])\n\n  function handleClick(e: MouseEvent<HTMLButtonElement>) {\n    props.onClick?.(e)\n    startTransition(() => onTabUpdate(e.currentTarget.value))\n  }\n\n  return (\n    <button\n      {...nativeProps}\n      {...(!isActive && { tabIndex: -1 })}\n      aria-controls={`panel:${value}`}\n      aria-busy={isPending}\n      aria-selected={isActive}\n      id={`tab:${value}`}\n      className={cx(nativeProps.className, styles.tab)}\n      onClick={handleClick}\n      role=\"tab\"\n      ref={ref}\n      value={value}\n    />\n  )\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The ref for the tabs.\n   */\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  /**\n   * The id of the tabs component.\n   */\n  id: string\n  /**\n   * The active tab id.\n   */\n  active: string\n  /**\n   * The styles for the tabs.\n   */\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  /**\n   * Called when the active tab is updated.\n   */\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page.\n   */\n  id?: string\n  /**\n   * The default active tab id.\n   */\n  active?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @see https://cerberus.digitalu.design/react/tabs\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabList description=\"Button details\">\n *    <Tab id=\"overview\">Overview</Tab>\n *    <Tab id=\"guidelines\">Guidelines</Tab>\n *  </TabList>\n *  <TabPanels>\n *    <TabPanel id=\"overview\">Overview content</TabPanel>\n *    <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n *  </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\n  )\n\n  // Get the active tab from local storage\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem(uuid)\n      setActiveTab(\n        cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n      )\n    }\n  }, [cache, active, uuid])\n\n  // Update the active tab in local storage\n  useEffect(() => {\n    if (cache && activeTab) {\n      window.localStorage.setItem(uuid, activeTab)\n    }\n  }, [activeTab, cache])\n\n  return (\n    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>\n  )\n}\n\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\n */\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n  return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n  return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n  const { tabs } = useTabsContext()\n  const [activeTab, setActiveTab] = useState(-1)\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const index =\n        activeTab === -1\n          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n          : activeTab\n      const nextIndex = getNextIndex(index, tabs.current.length)\n      const prevIndex = getPrevIndex(index, tabs.current.length)\n\n      // If the active tab is not found, do nothing\n      if (index === -1) return\n\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault()\n          setActiveTab(prevIndex)\n          tabs.current[prevIndex].focus()\n          break\n        case 'ArrowRight':\n          event.preventDefault()\n          setActiveTab(nextIndex)\n          tabs.current[nextIndex].focus()\n          break\n        case 'Home':\n          event.preventDefault()\n          setActiveTab(0)\n          tabs.current[0].focus()\n          break\n        case 'End':\n          event.preventDefault()\n          setActiveTab(tabs.current.length - 1)\n          tabs.current[tabs.current.length - 1].focus()\n          break\n        default:\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [activeTab, tabs.current])\n\n  return {\n    ref: (tab: HTMLButtonElement) => {\n      if (tab && !tabs.current.includes(tab)) {\n        tabs.current.push(tab)\n      }\n    },\n  }\n}\n"],"mappings":"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","names":["import_react","import_react","tabs","import_jsx_runtime"]}

package/build/legacy/components/TabList.cjs

@@ -1,69 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/TabList.tsx
-var TabList_exports = {};
-__export(TabList_exports, {
-  TabList: () => TabList
-});
-module.exports = __toCommonJS(TabList_exports);
-var import_css = require("@cerberus/styled-system/css");
-var import_patterns = require("@cerberus/styled-system/patterns");
-
-// src/context/tabs.tsx
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var TabsContext = (0, import_react.createContext)(null);
-function useTabsContext() {
-  const context = (0, import_react.useContext)(TabsContext);
-  if (!context) {
-    throw new Error("useTabsContext must be used within a Tabs Provider.");
-  }
-  return context;
-}
-
-// src/components/TabList.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function TabList(props) {
-  const { description, ...nativeProps } = props;
-  const { id, styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      ...nativeProps,
-      "aria-label": description,
-      className: (0, import_css.cx)(
-        nativeProps.className,
-        (0, import_patterns.hstack)({
-          gap: "0"
-        }),
-        styles.tabList
-      ),
-      id: id ?? nativeProps.id,
-      role: "tablist"
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  TabList
-});
-//# sourceMappingURL=TabList.cjs.map

package/build/legacy/components/TabList.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/TabList.tsx","../../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A description of what the tab list contains. Required for accessibility.\n   */\n  description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @see https://cerberus.digitalu.design/react/tabs\n * @memberof module:Tabs\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n *  <Tab id=\"overview\">Overview</Tab>\n *  <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n  const { description, ...nativeProps } = props\n  const { id, styles } = useTabsContext()\n\n  return (\n    <div\n      {...nativeProps}\n      aria-label={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          gap: '0',\n        }),\n        styles.tabList,\n      )}\n      id={id ?? nativeProps.id}\n      role=\"tablist\"\n    />\n  )\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The ref for the tabs.\n   */\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  /**\n   * The id of the tabs component.\n   */\n  id: string\n  /**\n   * The active tab id.\n   */\n  active: string\n  /**\n   * The styles for the tabs.\n   */\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  /**\n   * Called when the active tab is updated.\n   */\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page.\n   */\n  id?: string\n  /**\n   * The default active tab id.\n   */\n  active?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @see https://cerberus.digitalu.design/react/tabs\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabList description=\"Button details\">\n *    <Tab id=\"overview\">Overview</Tab>\n *    <Tab id=\"guidelines\">Guidelines</Tab>\n *  </TabList>\n *  <TabPanels>\n *    <TabPanel id=\"overview\">Overview content</TabPanel>\n *    <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n *  </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\n  )\n\n  // Get the active tab from local storage\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem(uuid)\n      setActiveTab(\n        cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n      )\n    }\n  }, [cache, active, uuid])\n\n  // Update the active tab in local storage\n  useEffect(() => {\n    if (cache && activeTab) {\n      window.localStorage.setItem(uuid, activeTab)\n    }\n  }, [activeTab, cache])\n\n  return (\n    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>\n  )\n}\n\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\n */\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAAuB;;;ACDvB,qBAA4C;AAE5C,mBASO;AAwGH;AA1EG,IAAM,kBAAc,4BAAuC,IAAI;AAkF/D,SAAS,iBAAmC;AACjD,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;AD/FI,IAAAA,sBAAA;AALG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,IAAI,OAAO,IAAI,eAAe;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,wBAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,IAAI,MAAM,YAAY;AAAA,MACtB,MAAK;AAAA;AAAA,EACP;AAEJ;","names":["import_jsx_runtime"]}