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

package/build/legacy/utils/index.cjs

@@ -20,15 +20,34 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/utils/index.ts
 var utils_exports = {};
 __export(utils_exports, {
-  formatNotifyCount: () => formatNotifyCount
+  formatNotifyCount: () => formatNotifyCount,
+  getLocalStorage: () => getLocalStorage,
+  setLocalStorage: () => setLocalStorage
 });
 module.exports = __toCommonJS(utils_exports);
+
+// src/utils/localStorage.ts
+function getLocalStorage(key, defaultValue) {
+  const value = window.localStorage.getItem(key);
+  if (value) {
+    return value;
+  }
+  return defaultValue;
+}
+function setLocalStorage(key, value) {
+  const stringValue = typeof value === "string" ? value : JSON.stringify(value);
+  window.localStorage.setItem(key, stringValue);
+}
+
+// src/utils/index.ts
 function formatNotifyCount(count) {
   if (count > 99) return "99+";
   return count.toString();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  formatNotifyCount
+  formatNotifyCount,
+  getLocalStorage,
+  setLocalStorage
 });
 //# sourceMappingURL=index.cjs.map

package/build/legacy/utils/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeO,SAAS,kBAAkB,OAAuB;AACvD,MAAI,QAAQ,GAAI,QAAO;AACvB,SAAO,MAAM,SAAS;AACxB;","names":[]}
+{"version":3,"sources":["../../../src/utils/index.ts","../../../src/utils/localStorage.ts"],"sourcesContent":["/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\nexport * from './localStorage'\n","'use client'\n\n/**\n * A utility function to get a value from local storage.\n * @param key The key to get from local storage.\n * @param defaultValue The fallback value if the key is not found.\n * @returns key or defaultValue\n */\nexport function getLocalStorage<T extends string>(\n  key: string,\n  defaultValue: T,\n): T {\n  const value = window.localStorage.getItem(key)\n  if (value) {\n    return value as T\n  }\n  return defaultValue\n}\n\n/**\n * A utility function to set a value in local storage.\n * @param key The key to set in local storage.\n * @param value The value to set in local storage.\n */\nexport function setLocalStorage<T>(key: string, value: T): void {\n  const stringValue = typeof value === 'string' ? value : JSON.stringify(value)\n  window.localStorage.setItem(key, stringValue)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACQO,SAAS,gBACd,KACA,cACG;AACH,QAAM,QAAQ,OAAO,aAAa,QAAQ,GAAG;AAC7C,MAAI,OAAO;AACT,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAOO,SAAS,gBAAmB,KAAa,OAAgB;AAC9D,QAAM,cAAc,OAAO,UAAU,WAAW,QAAQ,KAAK,UAAU,KAAK;AAC5E,SAAO,aAAa,QAAQ,KAAK,WAAW;AAC9C;;;ADZO,SAAS,kBAAkB,OAAuB;AACvD,MAAI,QAAQ,GAAI,QAAO;AACvB,SAAO,MAAM,SAAS;AACxB;","names":[]}

package/build/legacy/utils/localStorage.cjs

@@ -0,0 +1,44 @@
+"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/utils/localStorage.ts
+var localStorage_exports = {};
+__export(localStorage_exports, {
+  getLocalStorage: () => getLocalStorage,
+  setLocalStorage: () => setLocalStorage
+});
+module.exports = __toCommonJS(localStorage_exports);
+function getLocalStorage(key, defaultValue) {
+  const value = window.localStorage.getItem(key);
+  if (value) {
+    return value;
+  }
+  return defaultValue;
+}
+function setLocalStorage(key, value) {
+  const stringValue = typeof value === "string" ? value : JSON.stringify(value);
+  window.localStorage.setItem(key, stringValue);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getLocalStorage,
+  setLocalStorage
+});
+//# sourceMappingURL=localStorage.cjs.map

package/build/legacy/utils/localStorage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/localStorage.ts"],"sourcesContent":["'use client'\n\n/**\n * A utility function to get a value from local storage.\n * @param key The key to get from local storage.\n * @param defaultValue The fallback value if the key is not found.\n * @returns key or defaultValue\n */\nexport function getLocalStorage<T extends string>(\n  key: string,\n  defaultValue: T,\n): T {\n  const value = window.localStorage.getItem(key)\n  if (value) {\n    return value as T\n  }\n  return defaultValue\n}\n\n/**\n * A utility function to set a value in local storage.\n * @param key The key to set in local storage.\n * @param value The value to set in local storage.\n */\nexport function setLocalStorage<T>(key: string, value: T): void {\n  const stringValue = typeof value === 'string' ? value : JSON.stringify(value)\n  window.localStorage.setItem(key, stringValue)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,gBACd,KACA,cACG;AACH,QAAM,QAAQ,OAAO,aAAa,QAAQ,GAAG;AAC7C,MAAI,OAAO;AACT,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAOO,SAAS,gBAAmB,KAAa,OAAgB;AAC9D,QAAM,cAAc,OAAO,UAAU,WAAW,QAAQ,KAAK,UAAU,KAAK;AAC5E,SAAO,aAAa,QAAQ,KAAK,WAAW;AAC9C;","names":[]}

package/build/modern/_tsup-dts-rollup.d.ts

@@ -102,7 +102,6 @@ import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { MouseSensor } from '@dnd-kit/core';
 import { MouseSensorOptions } from '@dnd-kit/core';
-import { MutableRefObject } from 'react';
 import { NotificationVariantProps } from '@cerberus/styled-system/recipes';
 import type { OptionHTMLAttributes } from 'react';
 import { Over } from '@dnd-kit/core';
@@ -136,6 +135,7 @@ import { SensorResponse } from '@dnd-kit/core';
 import { Sensors } from '@dnd-kit/core';
 import type { SVGProps } from 'react';
 import type { TableHTMLAttributes } from 'react';
+import { Tabs as Tabs_2 } from '@ark-ui/react/tabs';
 import { TabsVariantProps } from '@cerberus/styled-system/recipes';
 import { TagVariantProps } from '@cerberus/styled-system/recipes';
 import { TbodyVariantProps } from '@cerberus/styled-system/recipes';
@@ -1536,6 +1536,17 @@ export { getClientRect }
 
 export { getFirstCollision }
 
+/**
+ * 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
+ */
+declare function getLocalStorage<T extends string>(key: string, defaultValue: T): T;
+export { getLocalStorage }
+export { getLocalStorage as getLocalStorage_alias_1 }
+export { getLocalStorage as getLocalStorage_alias_2 }
+
 /**
  * @deprecated use the {@link Menu} family instead
  */
@@ -2614,6 +2625,16 @@ export { SensorResponse }
 
 export { Sensors }
 
+/**
+ * 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.
+ */
+declare function setLocalStorage<T>(key: string, value: T): void;
+export { setLocalStorage }
+export { setLocalStorage as setLocalStorage_alias_1 }
+export { setLocalStorage as setLocalStorage_alias_2 }
+
 /**
  * This module contains the Avatar component.
  * @module
@@ -2782,24 +2803,40 @@ export { StaticTagProps }
 export { StaticTagProps as StaticTagProps_alias_1 }
 
 /**
- * The Tab component provides a tab element to be used in a TabList.
- * @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)
- * @see https://cerberus.digitalu.design/react/tabs
- * @memberof module:Tabs
+ * 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 description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
  *  </TabList>
  *  <TabPanel tab="overview">...</TabPanel>
  * </Tabs>
  * ```
  */
-declare function Tab(props: TabProps): JSX_2.Element;
+declare function Tab(props: Tabs_2.TriggerProps): JSX_2.Element;
 export { Tab }
 export { Tab as Tab_alias_1 }
 
+/**
+ * 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>
+ * ```
+ */
+declare function TabIndicator(props: Tabs_2.IndicatorProps): JSX_2.Element;
+export { TabIndicator }
+export { TabIndicator as TabIndicator_alias_1 }
+
 /**
  * An accessible table component.
  * @definition [ARIA Table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/)
@@ -2829,95 +2866,45 @@ export { TableProps }
 export { TableProps as TableProps_alias_1 }
 
 /**
- * The TabList component provides a container for tab elements.
- * @see https://cerberus.digitalu.design/react/tabs
- * @memberof module:Tabs
- * @example
- * ```tsx
- * <TabList description="Button details">
- *  <Tab id="overview">Overview</Tab>
- *  <Tab id="guidelines">Guidelines</Tab>
- * </TabList>
- * ```
+ * @deprecated Use `TabsList` instead.
  */
-declare function TabList(props: PropsWithChildren<TabListProps>): JSX_2.Element;
+declare const TabList: typeof TabsList;
 export { TabList }
 export { TabList as TabList_alias_1 }
 
 /**
- * This module provides a TabList component.
- * @module
- */
-declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * A description of what the tab list contains. Required for accessibility.
-     */
-    description: string;
-}
-export { TabListProps }
-export { TabListProps as TabListProps_alias_1 }
-
-/**
- * The TabPanel component provides a panel element to be used in a Tabs
- * provider.
- * @see https://cerberus.digitalu.design/react/tabs
- * @memberof module:Tabs
+ * The content for the Tabs group.
+ * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
  * @example
  * ```tsx
- * <TabPanel tab="overview">
- *   Overview content
- * </TabPanel>
+ * <Tabs>
+ *   <TabList description="Profile settings">
+ *     <Tab value="overview">Overview</Tab>
+ *  </TabList>
+ *  <TabPanel tab="overview">...</TabPanel>
+ * </Tabs>
  * ```
  */
-declare function TabPanel(props: TabPanelProps): JSX_2.Element;
+declare function TabPanel(props: Tabs_2.ContentProps): JSX_2.Element;
 export { TabPanel }
 export { TabPanel as TabPanel_alias_1 }
 
-/**
- * This module provides a TabPanel component.
- * @module
- */
-declare interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The unique value of the Tab that is associated with the TabPanel.
-     */
-    tab: string;
-}
-export { TabPanelProps }
-export { TabPanelProps as TabPanelProps_alias_1 }
-
-/**
- * This module provides a Tab component.
- * @module
- */
-declare interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * The id of the tab that will be tracked as the active tab and used for aria
-     * attributes.
-     */
-    value: string;
-}
-export { TabProps }
-export { TabProps as TabProps_alias_1 }
-
 /**
  * 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>
  * ```
  */
-declare function Tabs(props: PropsWithChildren<TabsProps & TabsVariantProps>): JSX.Element;
+declare function Tabs(props: PropsWithChildren<TabsProviderProps>): JSX.Element;
 export { Tabs }
 export { Tabs as Tabs_alias_1 }
 
@@ -2930,47 +2917,62 @@ export { TabsContext as TabsContext_alias_1 }
  * @module Tabs
  */
 declare 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 { TabsContextValue }
 export { TabsContextValue as TabsContextValue_alias_1 }
 
-declare interface TabsProps {
+/**
+ * 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>
+ * ```
+ */
+declare function TabsList(props: Tabs_2.ListProps): JSX_2.Element;
+export { TabsList }
+export { TabsList as TabsList_alias_1 }
+
+declare interface TabsProviderBaseProps extends Tabs_2.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 { TabsProps }
-export { TabsProps as TabsProps_alias_1 }
+export { TabsProviderBaseProps }
+export { TabsProviderBaseProps as TabsProviderBaseProps_alias_1 }
+
+declare type TabsProviderProps = TabsProviderBaseProps & TabsVariantProps;
+export { TabsProviderProps }
+export { TabsProviderProps as TabsProviderProps_alias_1 }
 
 /**
  * The Tag component is used to display a meta descriptions.
@@ -3522,12 +3524,6 @@ declare function useTabsContext(): TabsContextValue;
 export { useTabsContext }
 export { useTabsContext as useTabsContext_alias_1 }
 
-declare function useTabsKeyboardNavigation(): {
-    ref: (tab: HTMLButtonElement) => void;
-};
-export { useTabsKeyboardNavigation }
-export { useTabsKeyboardNavigation as useTabsKeyboardNavigation_alias_1 }
-
 /**
  * Provides a hook for using the theme for a single instance of the application.
  * @see https://cerberus.digitalu.design/react/use-theme

package/build/modern/{chunk-FRWNAVDM.js → chunk-77B4HFKT.js}

@@ -19,9 +19,6 @@ import {
 import {
   Button
 } from "./chunk-EXGKZGML.js";
-import {
-  useModal
-} from "./chunk-KGQG5JGW.js";
 import {
   Avatar
 } from "./chunk-BU5JK37R.js";
@@ -34,6 +31,9 @@ import {
 import {
   $cerberusIcons
 } from "./chunk-DDOTCGGA.js";
+import {
+  useModal
+} from "./chunk-KGQG5JGW.js";
 
 // src/context/cta-modal.tsx
 import {
@@ -151,4 +151,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-FRWNAVDM.js.map
+//# sourceMappingURL=chunk-77B4HFKT.js.map

package/build/modern/{chunk-G7AGKII3.js → chunk-BHSYQCDV.js}

@@ -25,9 +25,6 @@ import {
 import {
   Button
 } from "./chunk-EXGKZGML.js";
-import {
-  useModal
-} from "./chunk-KGQG5JGW.js";
 import {
   Avatar
 } from "./chunk-BU5JK37R.js";
@@ -40,6 +37,9 @@ import {
 import {
   $cerberusIcons
 } from "./chunk-DDOTCGGA.js";
+import {
+  useModal
+} from "./chunk-KGQG5JGW.js";
 
 // src/context/prompt-modal.tsx
 import {
@@ -240,4 +240,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-G7AGKII3.js.map
+//# sourceMappingURL=chunk-BHSYQCDV.js.map

package/build/modern/{chunk-UTGEFJ3L.js → chunk-C5EHJUS5.js}

@@ -7,4 +7,4 @@ function formatNotifyCount(count) {
 export {
   formatNotifyCount
 };
-//# sourceMappingURL=chunk-UTGEFJ3L.js.map
+//# sourceMappingURL=chunk-C5EHJUS5.js.map

package/build/modern/{chunk-UTGEFJ3L.js.map → chunk-C5EHJUS5.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n"],"mappings":";AAeO,SAAS,kBAAkB,OAAuB;AACvD,MAAI,QAAQ,GAAI,QAAO;AACvB,SAAO,MAAM,SAAS;AACxB;","names":[]}
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\nexport * from './localStorage'\n"],"mappings":";AAeO,SAAS,kBAAkB,OAAuB;AACvD,MAAI,QAAQ,GAAI,QAAO;AACvB,SAAO,MAAM,SAAS;AACxB;","names":[]}

package/build/modern/chunk-FQLMPEYX.js

@@ -0,0 +1,18 @@
+// src/utils/localStorage.ts
+function getLocalStorage(key, defaultValue) {
+  const value = window.localStorage.getItem(key);
+  if (value) {
+    return value;
+  }
+  return defaultValue;
+}
+function setLocalStorage(key, value) {
+  const stringValue = typeof value === "string" ? value : JSON.stringify(value);
+  window.localStorage.setItem(key, stringValue);
+}
+
+export {
+  getLocalStorage,
+  setLocalStorage
+};
+//# sourceMappingURL=chunk-FQLMPEYX.js.map

package/build/modern/chunk-FQLMPEYX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/localStorage.ts"],"sourcesContent":["'use client'\n\n/**\n * A utility function to get a value from local storage.\n * @param key The key to get from local storage.\n * @param defaultValue The fallback value if the key is not found.\n * @returns key or defaultValue\n */\nexport function getLocalStorage<T extends string>(\n  key: string,\n  defaultValue: T,\n): T {\n  const value = window.localStorage.getItem(key)\n  if (value) {\n    return value as T\n  }\n  return defaultValue\n}\n\n/**\n * A utility function to set a value in local storage.\n * @param key The key to set in local storage.\n * @param value The value to set in local storage.\n */\nexport function setLocalStorage<T>(key: string, value: T): void {\n  const stringValue = typeof value === 'string' ? value : JSON.stringify(value)\n  window.localStorage.setItem(key, stringValue)\n}\n"],"mappings":";AAQO,SAAS,gBACd,KACA,cACG;AACH,QAAM,QAAQ,OAAO,aAAa,QAAQ,GAAG;AAC7C,MAAI,OAAO;AACT,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAOO,SAAS,gBAAmB,KAAa,OAAgB;AAC9D,QAAM,cAAc,OAAO,UAAU,WAAW,QAAQ,KAAK,UAAU,KAAK;AAC5E,SAAO,aAAa,QAAQ,KAAK,WAAW;AAC9C;","names":[]}

package/build/modern/chunk-N7O6D7BW.js

@@ -0,0 +1,63 @@
+import {
+  useTabsContext
+} from "./chunk-RZ7NG77U.js";
+
+// src/components/Tabs.client.tsx
+import { Tabs as ArkTabs } from "@ark-ui/react/tabs";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TabsList(props) {
+  const { children, ...tabsProps } = props;
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ jsxs(
+    ArkTabs.List,
+    {
+      ...tabsProps,
+      className: cx(tabsProps.className, styles.list),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TabIndicator, {})
+      ]
+    }
+  );
+}
+var TabList = TabsList;
+function Tab(props) {
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    ArkTabs.Trigger,
+    {
+      ...props,
+      className: cx(props.className, styles.trigger)
+    }
+  );
+}
+function TabIndicator(props) {
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    ArkTabs.Indicator,
+    {
+      ...props,
+      className: cx(props.className, styles.indicator)
+    }
+  );
+}
+function TabPanel(props) {
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    ArkTabs.Content,
+    {
+      ...props,
+      className: cx(props.className, styles.content)
+    }
+  );
+}
+
+export {
+  TabsList,
+  TabList,
+  Tab,
+  TabIndicator,
+  TabPanel
+};
+//# sourceMappingURL=chunk-N7O6D7BW.js.map

package/build/modern/chunk-N7O6D7BW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tabs.client.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as ArkTabs } from '@ark-ui/react/tabs'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides the Tabs family.\n * @module\n */\n\n/**\n * The tab list container for the Tabs group.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/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 TabsList(props: ArkTabs.ListProps) {\n  const { children, ...tabsProps } = props\n  const { styles } = useTabsContext()\n\n  return (\n    <ArkTabs.List\n      {...tabsProps}\n      className={cx(tabsProps.className, styles.list)}\n    >\n      {children}\n      <TabIndicator />\n    </ArkTabs.List>\n  )\n}\n\n/**\n * @deprecated Use `TabsList` instead.\n */\nexport const TabList = TabsList\n\n/**\n * The trigger for the Tabs group.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/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: ArkTabs.TriggerProps) {\n  const { styles } = useTabsContext()\n  return (\n    <ArkTabs.Trigger\n      {...props}\n      className={cx(props.className, styles.trigger)}\n    />\n  )\n}\n\n/**\n * The indicator for the Tabs group which shows the active tab.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)\n * @example\n * ```tsx\n * <Tabs>\n *   <TabList description=\"Profile settings\">\n *     <Tab value=\"overview\">Overview</Tab>\n *     <TabsIndicator />\n *  </TabList>\n *  <TabPanel tab=\"overview\">...</TabPanel>\n * </Tabs>\n * ```\n */\nexport function TabIndicator(props: ArkTabs.IndicatorProps) {\n  const { styles } = useTabsContext()\n  return (\n    <ArkTabs.Indicator\n      {...props}\n      className={cx(props.className, styles.indicator)}\n    />\n  )\n}\n\n/**\n * The content for the Tabs group.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/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 TabPanel(props: ArkTabs.ContentProps) {\n  const { styles } = useTabsContext()\n  return (\n    <ArkTabs.Content\n      {...props}\n      className={cx(props.className, styles.content)}\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,QAAQ,eAAe;AAChC,SAAS,UAAU;AA0Bf,SAKE,KALF;AALG,SAAS,SAAS,OAA0B;AACjD,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,EAAE,OAAO,IAAI,eAAe;AAElC,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,UAAU,WAAW,OAAO,IAAI;AAAA,MAE7C;AAAA;AAAA,QACD,oBAAC,gBAAa;AAAA;AAAA;AAAA,EAChB;AAEJ;AAKO,IAAM,UAAU;AAehB,SAAS,IAAI,OAA6B;AAC/C,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,OAAO;AAAA;AAAA,EAC/C;AAEJ;AAgBO,SAAS,aAAa,OAA+B;AAC1D,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,SAAS;AAAA;AAAA,EACjD;AAEJ;AAeO,SAAS,SAAS,OAA6B;AACpD,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,OAAO;AAAA;AAAA,EAC/C;AAEJ;","names":[]}

package/build/modern/chunk-RZ7NG77U.js

@@ -0,0 +1,77 @@
+import {
+  getLocalStorage,
+  setLocalStorage
+} from "./chunk-FQLMPEYX.js";
+
+// src/context/tabs.tsx
+import { Tabs as ArkTabs } from "@ark-ui/react/tabs";
+import { tabs } from "@cerberus/styled-system/recipes";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var TabsContext = createContext(null);
+function Tabs(props) {
+  const { cache, defaultValue, palette, uuid, ...arkProps } = props;
+  const [activeTab, setActiveTab] = useState(
+    () => cache ? "" : defaultValue
+  );
+  const styles = tabs({ palette });
+  const cacheKey = useMemo(
+    () => uuid ? `cerberus-tabs-${uuid}` : "cerberus-tabs",
+    [uuid]
+  );
+  const handleValueChange = useCallback(
+    (details) => {
+      if (cache) {
+        setLocalStorage(cacheKey, details.value);
+      }
+      setActiveTab(details.value);
+    },
+    [cache]
+  );
+  useEffect(() => {
+    if (cache && !activeTab) {
+      const cachedTab = getLocalStorage(cacheKey, defaultValue ?? "");
+      setActiveTab(cachedTab);
+    }
+  }, [cache, defaultValue, activeTab]);
+  const value = useMemo(
+    () => ({
+      active: activeTab,
+      styles
+    }),
+    [activeTab, palette, styles]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    ArkTabs.Root,
+    {
+      ...arkProps,
+      "aria-busy": !activeTab,
+      className: styles.root,
+      defaultValue,
+      onValueChange: handleValueChange,
+      value: activeTab,
+      children: props.children
+    }
+  ) });
+}
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a Tabs Provider.");
+  }
+  return context;
+}
+
+export {
+  TabsContext,
+  Tabs,
+  useTabsContext
+};
+//# sourceMappingURL=chunk-RZ7NG77U.js.map

package/build/modern/chunk-RZ7NG77U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as ArkTabs } from '@ark-ui/react/tabs'\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n} from 'react'\nimport { getLocalStorage, setLocalStorage } from '../utils/localStorage'\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 styles for the tabs.\n   */\n  styles: {\n    list: Pretty<string>\n    trigger: Pretty<string>\n    content: Pretty<string>\n    indicator: Pretty<string>\n  }\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProviderBaseProps extends ArkTabs.RootProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page and you want to uniquely cache\n   * the active tab state.\n   */\n  uuid?: string\n  /**\n   * The default tab to display when the component is first rendered.\n   */\n  defaultValue?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\nexport type TabsProviderProps = TabsProviderBaseProps & TabsVariantProps\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabsList>\n *    <Tab value=\"overview\">Overview</Tab>\n *    <Tab value=\"guidelines\">Guidelines</Tab>\n *  </TabsList>\n *  <TabPanel value=\"overview\">Overview content</TabPanel>\n *  <TabPanel value=\"guidelines\">Guidelines content</TabPanel>\n * </Tabs>\n * ```\n */\nexport function Tabs(props: PropsWithChildren<TabsProviderProps>): JSX.Element {\n  const { cache, defaultValue, palette, uuid, ...arkProps } = props\n  const [activeTab, setActiveTab] = useState<string | undefined>(() =>\n    cache ? '' : defaultValue,\n  )\n  const styles = tabs({ palette })\n\n  const cacheKey = useMemo(\n    () => (uuid ? `cerberus-tabs-${uuid}` : 'cerberus-tabs'),\n    [uuid],\n  )\n\n  const handleValueChange = useCallback(\n    (details: { value: string }) => {\n      if (cache) {\n        setLocalStorage(cacheKey, details.value)\n      }\n      setActiveTab(details.value)\n    },\n    [cache],\n  )\n\n  useEffect(() => {\n    if (cache && !activeTab) {\n      const cachedTab = getLocalStorage(cacheKey, defaultValue ?? '')\n      setActiveTab(cachedTab)\n    }\n  }, [cache, defaultValue, activeTab])\n\n  const value = useMemo(\n    () => ({\n      active: activeTab,\n      styles,\n    }),\n    [activeTab, palette, styles],\n  )\n\n  return (\n    <TabsContext.Provider value={value}>\n      <ArkTabs.Root\n        {...arkProps}\n        aria-busy={!activeTab}\n        className={styles.root}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        value={activeTab}\n      >\n        {props.children}\n      </ArkTabs.Root>\n    </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":";;;;;;AAEA,SAAS,QAAQ,eAAe;AAChC,SAAS,YAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA+FD;AA3EC,IAAM,cAAc,cAAuC,IAAI;AAoC/D,SAAS,KAAK,OAA0D;AAC7E,QAAM,EAAE,OAAO,cAAc,SAAS,MAAM,GAAG,SAAS,IAAI;AAC5D,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAA6B,MAC7D,QAAQ,KAAK;AAAA,EACf;AACA,QAAM,SAAS,KAAK,EAAE,QAAQ,CAAC;AAE/B,QAAM,WAAW;AAAA,IACf,MAAO,OAAO,iBAAiB,IAAI,KAAK;AAAA,IACxC,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,YAA+B;AAC9B,UAAI,OAAO;AACT,wBAAgB,UAAU,QAAQ,KAAK;AAAA,MACzC;AACA,mBAAa,QAAQ,KAAK;AAAA,IAC5B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,YAAU,MAAM;AACd,QAAI,SAAS,CAAC,WAAW;AACvB,YAAM,YAAY,gBAAgB,UAAU,gBAAgB,EAAE;AAC9D,mBAAa,SAAS;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,OAAO,cAAc,SAAS,CAAC;AAEnC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,IACF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM;AAAA,EAC7B;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OACpB;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,aAAW,CAAC;AAAA,MACZ,WAAW,OAAO;AAAA,MAClB;AAAA,MACA,eAAe;AAAA,MACf,OAAO;AAAA,MAEN,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAMO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}