@cerberus-design/react 0.6.1-next-79cd0cd → 0.6.1-next-fb37218

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

@@ -13,6 +13,7 @@ import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { label } from '@cerberus/styled-system/recipes';
 import { MutableRefObject } from 'react';
+import type { Pretty } from '@cerberus-design/styled-system/types';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus-design/styled-system/recipes';
 import { ReactNode } from 'react';
@@ -20,6 +21,7 @@ import { RecipeVariantProps } from '@cerberus/styled-system/css';
 import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus-design/styled-system/types';
 import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
 import { RefObject } from 'react';
+import { TabsVariantProps } from '@cerberus-design/styled-system/recipes';
 import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 import { ToggleVariantProps } from '@cerberus-design/styled-system/recipes';
@@ -442,6 +444,7 @@ export { TabProps as TabProps_alias_1 }
 
 /**
  * The Tabs component provides a context to manage tab state.
+ * @param id - the id of the tabs component,
  * @param active - the default active tab id,
  * @param cache - whether to cache the active tab state in local storage
  * @example
@@ -458,7 +461,7 @@ export { TabProps as TabProps_alias_1 }
  * </Tabs>
  * ```
  */
-declare function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element;
+declare function Tabs(props: PropsWithChildren<TabsProps & TabsVariantProps>): JSX.Element;
 export { Tabs }
 export { Tabs as Tabs_alias_1 }
 
@@ -474,6 +477,7 @@ declare interface TabsContextValue {
     tabs: MutableRefObject<HTMLButtonElement[]>;
     id: string;
     active: string;
+    styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>;
     onTabUpdate: (active: string) => void;
 }
 export { TabsContextValue }

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

@@ -1,8 +1,8 @@
 "use client";
 import {
   useTabsKeyboardNavigation
-} from "../chunk-S7HBD2A7.js";
-import "../chunk-DQOYTLGB.js";
+} from "../chunk-KFUXGX33.js";
+import "../chunk-7KJIZIAU.js";
 export {
   useTabsKeyboardNavigation
 };

package/build/legacy/{chunk-YJCWUN33.js → chunk-67S42J4B.js}

@@ -3,15 +3,15 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 
 // src/components/TabPanel.tsx
-import { css, cx } from "@cerberus/styled-system/css";
+import { cx } from "@cerberus/styled-system/css";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 function TabPanel(props) {
   const { tab, ...nativeProps } = props;
-  const { active } = useTabsContext();
+  const { active, styles } = useTabsContext();
   const isActive = useMemo(() => active === tab, [active, tab]);
   return /* @__PURE__ */ jsx(Show, { when: isActive, children: /* @__PURE__ */ jsx(
     "div",
@@ -19,18 +19,7 @@ function TabPanel(props) {
       ...nativeProps,
       ...isActive && { tabIndex: 0 },
       "aria-labelledby": tab,
-      className: cx(
-        nativeProps.className,
-        css({
-          rounded: "md",
-          _focusVisible: {
-            boxShadow: "none",
-            outline: "3px solid",
-            outlineColor: "action.border.focus",
-            outlineOffset: "2px"
-          }
-        })
-      ),
+      className: cx(nativeProps.className, styles.tabPanel),
       id: `panel:${tab}`,
       role: "tabpanel"
     }
@@ -40,4 +29,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-YJCWUN33.js.map
+//# sourceMappingURL=chunk-67S42J4B.js.map

package/build/legacy/chunk-67S42J4B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TabPanel.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { Show } from './Show'\n\n/**\n * This module provides a TabPanel component.\n * @module\n */\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  tab: string\n}\n\n/**\n * The TabPanel component provides a panel element to be used in a Tabs provider.\n * @param tab - the value of the tab that will be tracked as the active tab and used for aria attributes\n * @example\n * ```tsx\n * <TabPanel tab=\"overview\">\n *   Overview content\n * </TabPanel>\n * ```\n */\nexport function TabPanel(props: TabPanelProps) {\n  const { tab, ...nativeProps } = props\n  const { active, styles } = useTabsContext()\n  const isActive = useMemo(() => active === tab, [active, tab])\n\n  return (\n    <Show when={isActive}>\n      <div\n        {...nativeProps}\n        {...(isActive && { tabIndex: 0 })}\n        aria-labelledby={tab}\n        className={cx(nativeProps.className, styles.tabPanel)}\n        id={`panel:${tab}`}\n        role=\"tabpanel\"\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,eAAoC;AA8BvC;AAPC,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,KAAK,GAAG,YAAY,IAAI;AAChC,QAAM,EAAE,QAAQ,OAAO,IAAI,eAAe;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,KAAK,CAAC,QAAQ,GAAG,CAAC;AAE5D,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,EAAE;AAAA,MAC/B,mBAAiB;AAAA,MACjB,WAAW,GAAG,YAAY,WAAW,OAAO,QAAQ;AAAA,MACpD,IAAI,SAAS,GAAG;AAAA,MAChB,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}

package/build/{modern/chunk-DQOYTLGB.js → legacy/chunk-7KJIZIAU.js}

@@ -1,4 +1,7 @@
 // src/context/tabs.tsx
+import {
+  tabs
+} from "@cerberus-design/styled-system/recipes";
 import {
   createContext,
   useContext,
@@ -10,20 +13,21 @@ import {
 import { jsx } from "react/jsx-runtime";
 var TabsContext = createContext(null);
 function Tabs(props) {
-  const { cache, active, id } = props;
+  const { cache, active, id, palette } = props;
   const [activeTab, setActiveTab] = useState(() => cache ? "" : active ?? "");
-  const tabs = useRef([]);
+  const tabsList = useRef([]);
   const uuid = useMemo(() => {
     return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
   }, [id]);
   const value = useMemo(
     () => ({
-      tabs,
+      tabs: tabsList,
       id: uuid,
       active: activeTab,
+      styles: tabs({ palette }),
       onTabUpdate: setActiveTab
     }),
-    [activeTab, setActiveTab, uuid, tabs]
+    [activeTab, setActiveTab, palette, uuid, tabsList]
   );
   useEffect(() => {
     if (cache) {
@@ -53,4 +57,4 @@ export {
   Tabs,
   useTabsContext
 };
-//# sourceMappingURL=chunk-DQOYTLGB.js.map
+//# sourceMappingURL=chunk-7KJIZIAU.js.map

package/build/legacy/chunk-7KJIZIAU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport {\n  tabs,\n  type TabsVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport type { Pretty } from '@cerberus-design/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\n */\n\nexport interface TabsContextValue {\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  id: string\n  active: string\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  id?: string\n  active?: string\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @param id - the id of the tabs component,\n * @param active - the default active tab id,\n * @param cache - whether to cache the active tab state in local storage\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\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;AAAA,EACE;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAiFH;AAlEG,IAAM,cAAc,cAAuC,IAAI;AA2B/D,SAAS,KACd,OACa;AACb,QAAM,EAAE,OAAO,QAAQ,IAAI,QAAQ,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,WAAW,OAA4B,CAAC,CAAC;AAC/C,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ,KAAK,EAAE,QAAQ,CAAC;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,SAAS,MAAM,QAAQ;AAAA,EACnD;AAGA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,IAAI;AAClD;AAAA,QACE,QAAQ,cAAc,MAAM,UAAU,MAAM,MAAM,UAAU;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,IAAI,CAAC;AAGxB,YAAU,MAAM;AACd,QAAI,SAAS,WAAW;AACtB,aAAO,aAAa,QAAQ,MAAM,SAAS;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAe,gBAAM,UAAS;AAExD;AAEO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/legacy/chunk-JI4YTPEJ.js

@@ -0,0 +1,47 @@
+import {
+  useTabsKeyboardNavigation
+} from "./chunk-KFUXGX33.js";
+import {
+  useTabsContext
+} from "./chunk-7KJIZIAU.js";
+
+// src/components/Tab.tsx
+import {
+  useMemo,
+  useTransition
+} from "react";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function Tab(props) {
+  const { value, ...nativeProps } = props;
+  const { active, onTabUpdate, styles } = useTabsContext();
+  const [isPending, startTransition] = useTransition();
+  const { ref } = useTabsKeyboardNavigation();
+  const isActive = 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__ */ jsx(
+    "button",
+    {
+      ...nativeProps,
+      ...!isActive && { tabIndex: -1 },
+      "aria-controls": `panel:${value}`,
+      "aria-busy": isPending,
+      "aria-selected": isActive,
+      id: value,
+      className: cx(nativeProps.className, styles.tab),
+      onClick: handleClick,
+      role: "tab",
+      ref,
+      value
+    }
+  );
+}
+
+export {
+  Tab
+};
+//# sourceMappingURL=chunk-JI4YTPEJ.js.map

package/build/legacy/chunk-JI4YTPEJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tab.tsx"],"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 */\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\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 * @definition [Tab docs](https://cerberus.digitalu.design/react/tabs)\n * @param value - the id of the tab that will be tracked as the active tab and used for aria attributes\n * @example\n * ```tsx\n * <Tab value=\"overview\">\n *  Overview\n * </Tab>\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={value}\n      className={cx(nativeProps.className, styles.tab)}\n      onClick={handleClick}\n      role=\"tab\"\n      ref={ref}\n      value={value}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,UAAU;AAoCf;AAbG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,aAAa,OAAO,IAAI,eAAe;AACvD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,EAAE,IAAI,IAAI,0BAA0B;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,OAAO,CAAC,QAAQ,KAAK,CAAC;AAEhE,WAAS,YAAY,GAAkC;AAvCzD;AAwCI,gBAAM,YAAN,+BAAgB;AAChB,oBAAgB,MAAM,YAAY,EAAE,cAAc,KAAK,CAAC;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,CAAC,YAAY,EAAE,UAAU,GAAG;AAAA,MACjC,iBAAe,SAAS,KAAK;AAAA,MAC7B,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,GAAG;AAAA,MAC/C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/{chunk-S7HBD2A7.js → chunk-KFUXGX33.js}

@@ -1,6 +1,6 @@
 import {
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 
 // src/aria-helpers/tabs.aria.ts
 import { useEffect, useState } from "react";
@@ -61,4 +61,4 @@ function useTabsKeyboardNavigation() {
 export {
   useTabsKeyboardNavigation
 };
-//# sourceMappingURL=chunk-S7HBD2A7.js.map
+//# sourceMappingURL=chunk-KFUXGX33.js.map

package/build/legacy/{chunk-5GSXIYD3.js → chunk-X2JMXTBH.js}

@@ -1,6 +1,6 @@
 import {
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 
 // src/components/TabList.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -8,7 +8,7 @@ import { hstack } from "@cerberus/styled-system/patterns";
 import { jsx } from "react/jsx-runtime";
 function TabList(props) {
   const { description, ...nativeProps } = props;
-  const { id } = useTabsContext();
+  const { id, styles } = useTabsContext();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -17,11 +17,9 @@ function TabList(props) {
       className: cx(
         nativeProps.className,
         hstack({
-          borderBottom: "1px solid",
-          borderBottomColor: "action.border.100",
-          gap: "0",
-          w: "full"
-        })
+          gap: "0"
+        }),
+        styles.tabList
       ),
       id: id ?? nativeProps.id
     }
@@ -31,4 +29,4 @@ function TabList(props) {
 export {
   TabList
 };
-//# sourceMappingURL=chunk-5GSXIYD3.js.map
+//# sourceMappingURL=chunk-X2JMXTBH.js.map

package/build/{modern/chunk-5GSXIYD3.js.map → legacy/chunk-X2JMXTBH.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/TabList.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  description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\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 } = useTabsContext()\n\n  return (\n    <div\n      {...nativeProps}\n      aria-describedby={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          borderBottom: '1px solid',\n          borderBottomColor: 'action.border.100',\n          gap: '0',\n          w: 'full',\n        }),\n      )}\n      id={id ?? nativeProps.id}\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AA6BnB;AALG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,GAAG,IAAI,eAAe;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,cAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,KAAK;AAAA,UACL,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,MACA,IAAI,MAAM,YAAY;AAAA;AAAA,EACxB;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/TabList.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  description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\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-describedby={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          gap: '0',\n        }),\n        styles.tabList,\n      )}\n      id={id ?? nativeProps.id}\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AA6BnB;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,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,IAAI,MAAM,YAAY;AAAA;AAAA,EACxB;AAEJ;","names":[]}

package/build/legacy/components/Tab.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Tab
-} from "../chunk-YA2UV2AB.js";
-import "../chunk-S7HBD2A7.js";
-import "../chunk-DQOYTLGB.js";
+} from "../chunk-JI4YTPEJ.js";
+import "../chunk-KFUXGX33.js";
+import "../chunk-7KJIZIAU.js";
 export {
   Tab
 };

package/build/legacy/components/TabList.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   TabList
-} from "../chunk-5GSXIYD3.js";
-import "../chunk-DQOYTLGB.js";
+} from "../chunk-X2JMXTBH.js";
+import "../chunk-7KJIZIAU.js";
 export {
   TabList
 };

package/build/legacy/components/TabPanel.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   TabPanel
-} from "../chunk-YJCWUN33.js";
+} from "../chunk-67S42J4B.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-DQOYTLGB.js";
+import "../chunk-7KJIZIAU.js";
 export {
   TabPanel
 };

package/build/legacy/context/tabs.js

@@ -3,7 +3,7 @@ import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "../chunk-DQOYTLGB.js";
+} from "../chunk-7KJIZIAU.js";
 export {
   Tabs,
   TabsContext,

package/build/legacy/index.js

@@ -3,13 +3,13 @@ import {
 } from "./chunk-WE3JNSNO.js";
 import {
   Tab
-} from "./chunk-YA2UV2AB.js";
+} from "./chunk-JI4YTPEJ.js";
 import {
   TabList
-} from "./chunk-5GSXIYD3.js";
+} from "./chunk-X2JMXTBH.js";
 import {
   TabPanel
-} from "./chunk-YJCWUN33.js";
+} from "./chunk-67S42J4B.js";
 import {
   Tag
 } from "./chunk-5XNLWIZO.js";
@@ -61,12 +61,12 @@ import {
 } from "./chunk-JF76VIL3.js";
 import {
   useTabsKeyboardNavigation
-} from "./chunk-S7HBD2A7.js";
+} from "./chunk-KFUXGX33.js";
 import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 import {
   $cerberusIcons,
   defineIcons

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

@@ -13,6 +13,7 @@ import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { label } from '@cerberus/styled-system/recipes';
 import { MutableRefObject } from 'react';
+import type { Pretty } from '@cerberus-design/styled-system/types';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus-design/styled-system/recipes';
 import { ReactNode } from 'react';
@@ -20,6 +21,7 @@ import { RecipeVariantProps } from '@cerberus/styled-system/css';
 import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus-design/styled-system/types';
 import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
 import { RefObject } from 'react';
+import { TabsVariantProps } from '@cerberus-design/styled-system/recipes';
 import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 import { ToggleVariantProps } from '@cerberus-design/styled-system/recipes';
@@ -442,6 +444,7 @@ export { TabProps as TabProps_alias_1 }
 
 /**
  * The Tabs component provides a context to manage tab state.
+ * @param id - the id of the tabs component,
  * @param active - the default active tab id,
  * @param cache - whether to cache the active tab state in local storage
  * @example
@@ -458,7 +461,7 @@ export { TabProps as TabProps_alias_1 }
  * </Tabs>
  * ```
  */
-declare function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element;
+declare function Tabs(props: PropsWithChildren<TabsProps & TabsVariantProps>): JSX.Element;
 export { Tabs }
 export { Tabs as Tabs_alias_1 }
 
@@ -474,6 +477,7 @@ declare interface TabsContextValue {
     tabs: MutableRefObject<HTMLButtonElement[]>;
     id: string;
     active: string;
+    styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>;
     onTabUpdate: (active: string) => void;
 }
 export { TabsContextValue }

package/build/modern/aria-helpers/tabs.aria.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   useTabsKeyboardNavigation
-} from "../chunk-S7HBD2A7.js";
-import "../chunk-DQOYTLGB.js";
+} from "../chunk-KFUXGX33.js";
+import "../chunk-7KJIZIAU.js";
 export {
   useTabsKeyboardNavigation
 };

package/build/modern/{chunk-YJCWUN33.js → chunk-67S42J4B.js}

@@ -3,15 +3,15 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 
 // src/components/TabPanel.tsx
-import { css, cx } from "@cerberus/styled-system/css";
+import { cx } from "@cerberus/styled-system/css";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 function TabPanel(props) {
   const { tab, ...nativeProps } = props;
-  const { active } = useTabsContext();
+  const { active, styles } = useTabsContext();
   const isActive = useMemo(() => active === tab, [active, tab]);
   return /* @__PURE__ */ jsx(Show, { when: isActive, children: /* @__PURE__ */ jsx(
     "div",
@@ -19,18 +19,7 @@ function TabPanel(props) {
       ...nativeProps,
       ...isActive && { tabIndex: 0 },
       "aria-labelledby": tab,
-      className: cx(
-        nativeProps.className,
-        css({
-          rounded: "md",
-          _focusVisible: {
-            boxShadow: "none",
-            outline: "3px solid",
-            outlineColor: "action.border.focus",
-            outlineOffset: "2px"
-          }
-        })
-      ),
+      className: cx(nativeProps.className, styles.tabPanel),
       id: `panel:${tab}`,
       role: "tabpanel"
     }
@@ -40,4 +29,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-YJCWUN33.js.map
+//# sourceMappingURL=chunk-67S42J4B.js.map

package/build/modern/chunk-67S42J4B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TabPanel.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { Show } from './Show'\n\n/**\n * This module provides a TabPanel component.\n * @module\n */\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  tab: string\n}\n\n/**\n * The TabPanel component provides a panel element to be used in a Tabs provider.\n * @param tab - the value of the tab that will be tracked as the active tab and used for aria attributes\n * @example\n * ```tsx\n * <TabPanel tab=\"overview\">\n *   Overview content\n * </TabPanel>\n * ```\n */\nexport function TabPanel(props: TabPanelProps) {\n  const { tab, ...nativeProps } = props\n  const { active, styles } = useTabsContext()\n  const isActive = useMemo(() => active === tab, [active, tab])\n\n  return (\n    <Show when={isActive}>\n      <div\n        {...nativeProps}\n        {...(isActive && { tabIndex: 0 })}\n        aria-labelledby={tab}\n        className={cx(nativeProps.className, styles.tabPanel)}\n        id={`panel:${tab}`}\n        role=\"tabpanel\"\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,eAAoC;AA8BvC;AAPC,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,KAAK,GAAG,YAAY,IAAI;AAChC,QAAM,EAAE,QAAQ,OAAO,IAAI,eAAe;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,KAAK,CAAC,QAAQ,GAAG,CAAC;AAE5D,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,EAAE;AAAA,MAC/B,mBAAiB;AAAA,MACjB,WAAW,GAAG,YAAY,WAAW,OAAO,QAAQ;AAAA,MACpD,IAAI,SAAS,GAAG;AAAA,MAChB,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}

package/build/{legacy/chunk-DQOYTLGB.js → modern/chunk-7KJIZIAU.js}

@@ -1,4 +1,7 @@
 // src/context/tabs.tsx
+import {
+  tabs
+} from "@cerberus-design/styled-system/recipes";
 import {
   createContext,
   useContext,
@@ -10,20 +13,21 @@ import {
 import { jsx } from "react/jsx-runtime";
 var TabsContext = createContext(null);
 function Tabs(props) {
-  const { cache, active, id } = props;
+  const { cache, active, id, palette } = props;
   const [activeTab, setActiveTab] = useState(() => cache ? "" : active ?? "");
-  const tabs = useRef([]);
+  const tabsList = useRef([]);
   const uuid = useMemo(() => {
     return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
   }, [id]);
   const value = useMemo(
     () => ({
-      tabs,
+      tabs: tabsList,
       id: uuid,
       active: activeTab,
+      styles: tabs({ palette }),
       onTabUpdate: setActiveTab
     }),
-    [activeTab, setActiveTab, uuid, tabs]
+    [activeTab, setActiveTab, palette, uuid, tabsList]
   );
   useEffect(() => {
     if (cache) {
@@ -53,4 +57,4 @@ export {
   Tabs,
   useTabsContext
 };
-//# sourceMappingURL=chunk-DQOYTLGB.js.map
+//# sourceMappingURL=chunk-7KJIZIAU.js.map

package/build/modern/chunk-7KJIZIAU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport {\n  tabs,\n  type TabsVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport type { Pretty } from '@cerberus-design/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\n */\n\nexport interface TabsContextValue {\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  id: string\n  active: string\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  id?: string\n  active?: string\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @param id - the id of the tabs component,\n * @param active - the default active tab id,\n * @param cache - whether to cache the active tab state in local storage\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\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;AAAA,EACE;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAiFH;AAlEG,IAAM,cAAc,cAAuC,IAAI;AA2B/D,SAAS,KACd,OACa;AACb,QAAM,EAAE,OAAO,QAAQ,IAAI,QAAQ,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,WAAW,OAA4B,CAAC,CAAC;AAC/C,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ,KAAK,EAAE,QAAQ,CAAC;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,SAAS,MAAM,QAAQ;AAAA,EACnD;AAGA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,IAAI;AAClD;AAAA,QACE,QAAQ,cAAc,MAAM,UAAU,MAAM,MAAM,UAAU;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,IAAI,CAAC;AAGxB,YAAU,MAAM;AACd,QAAI,SAAS,WAAW;AACtB,aAAO,aAAa,QAAQ,MAAM,SAAS;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAe,gBAAM,UAAS;AAExD;AAEO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-HBEEHHON.js

@@ -0,0 +1,46 @@
+import {
+  useTabsKeyboardNavigation
+} from "./chunk-KFUXGX33.js";
+import {
+  useTabsContext
+} from "./chunk-7KJIZIAU.js";
+
+// src/components/Tab.tsx
+import {
+  useMemo,
+  useTransition
+} from "react";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function Tab(props) {
+  const { value, ...nativeProps } = props;
+  const { active, onTabUpdate, styles } = useTabsContext();
+  const [isPending, startTransition] = useTransition();
+  const { ref } = useTabsKeyboardNavigation();
+  const isActive = useMemo(() => active === value, [active, value]);
+  function handleClick(e) {
+    props.onClick?.(e);
+    startTransition(() => onTabUpdate(e.currentTarget.value));
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...nativeProps,
+      ...!isActive && { tabIndex: -1 },
+      "aria-controls": `panel:${value}`,
+      "aria-busy": isPending,
+      "aria-selected": isActive,
+      id: value,
+      className: cx(nativeProps.className, styles.tab),
+      onClick: handleClick,
+      role: "tab",
+      ref,
+      value
+    }
+  );
+}
+
+export {
+  Tab
+};
+//# sourceMappingURL=chunk-HBEEHHON.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tab.tsx"],"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 */\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\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 * @definition [Tab docs](https://cerberus.digitalu.design/react/tabs)\n * @param value - the id of the tab that will be tracked as the active tab and used for aria attributes\n * @example\n * ```tsx\n * <Tab value=\"overview\">\n *  Overview\n * </Tab>\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={value}\n      className={cx(nativeProps.className, styles.tab)}\n      onClick={handleClick}\n      role=\"tab\"\n      ref={ref}\n      value={value}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,UAAU;AAoCf;AAbG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,aAAa,OAAO,IAAI,eAAe;AACvD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,EAAE,IAAI,IAAI,0BAA0B;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,OAAO,CAAC,QAAQ,KAAK,CAAC;AAEhE,WAAS,YAAY,GAAkC;AACrD,UAAM,UAAU,CAAC;AACjB,oBAAgB,MAAM,YAAY,EAAE,cAAc,KAAK,CAAC;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,CAAC,YAAY,EAAE,UAAU,GAAG;AAAA,MACjC,iBAAe,SAAS,KAAK;AAAA,MAC7B,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,GAAG;AAAA,MAC/C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-S7HBD2A7.js → chunk-KFUXGX33.js}

@@ -1,6 +1,6 @@
 import {
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 
 // src/aria-helpers/tabs.aria.ts
 import { useEffect, useState } from "react";
@@ -61,4 +61,4 @@ function useTabsKeyboardNavigation() {
 export {
   useTabsKeyboardNavigation
 };
-//# sourceMappingURL=chunk-S7HBD2A7.js.map
+//# sourceMappingURL=chunk-KFUXGX33.js.map

package/build/modern/{chunk-5GSXIYD3.js → chunk-X2JMXTBH.js}

@@ -1,6 +1,6 @@
 import {
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 
 // src/components/TabList.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -8,7 +8,7 @@ import { hstack } from "@cerberus/styled-system/patterns";
 import { jsx } from "react/jsx-runtime";
 function TabList(props) {
   const { description, ...nativeProps } = props;
-  const { id } = useTabsContext();
+  const { id, styles } = useTabsContext();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -17,11 +17,9 @@ function TabList(props) {
       className: cx(
         nativeProps.className,
         hstack({
-          borderBottom: "1px solid",
-          borderBottomColor: "action.border.100",
-          gap: "0",
-          w: "full"
-        })
+          gap: "0"
+        }),
+        styles.tabList
       ),
       id: id ?? nativeProps.id
     }
@@ -31,4 +29,4 @@ function TabList(props) {
 export {
   TabList
 };
-//# sourceMappingURL=chunk-5GSXIYD3.js.map
+//# sourceMappingURL=chunk-X2JMXTBH.js.map

package/build/{legacy/chunk-5GSXIYD3.js.map → modern/chunk-X2JMXTBH.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/TabList.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  description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\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 } = useTabsContext()\n\n  return (\n    <div\n      {...nativeProps}\n      aria-describedby={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          borderBottom: '1px solid',\n          borderBottomColor: 'action.border.100',\n          gap: '0',\n          w: 'full',\n        }),\n      )}\n      id={id ?? nativeProps.id}\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AA6BnB;AALG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,GAAG,IAAI,eAAe;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,cAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,KAAK;AAAA,UACL,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,MACA,IAAI,MAAM,YAAY;AAAA;AAAA,EACxB;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/TabList.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  description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\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-describedby={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          gap: '0',\n        }),\n        styles.tabList,\n      )}\n      id={id ?? nativeProps.id}\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AA6BnB;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,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,IAAI,MAAM,YAAY;AAAA;AAAA,EACxB;AAEJ;","names":[]}

package/build/modern/components/Tab.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Tab
-} from "../chunk-SUP7U42W.js";
-import "../chunk-S7HBD2A7.js";
-import "../chunk-DQOYTLGB.js";
+} from "../chunk-HBEEHHON.js";
+import "../chunk-KFUXGX33.js";
+import "../chunk-7KJIZIAU.js";
 export {
   Tab
 };