npm - @cerberus-design/react - Versions diffs - 0.3.1-next-f5a8b6a → 0.3.2 - Mend

@cerberus-design/react 0.3.1-next-f5a8b6a → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

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

@@ -385,14 +385,16 @@ export { TabsContext as TabsContext_alias_1 }
  * @module
  */
 declare interface TabsContextValue {
-    active: string;
     tabs: MutableRefObject<HTMLButtonElement[]>;
+    id: string;
+    active: string;
     onTabUpdate: (active: string) => void;
 }
 export { TabsContextValue }
 export { TabsContextValue as TabsContextValue_alias_1 }
 declare interface TabsProps {
+    id?: string;
     active?: string;
     cache?: boolean;
 }

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

@@ -1,8 +1,8 @@
 "use client";
 import {
   useTabsKeyboardNavigation
-} from "../chunk-57HOQM4E.js";
-import "../chunk-HQK7SM56.js";
+} from "../chunk-BT2B5C7M.js";
+import "../chunk-DQOYTLGB.js";
 export {
   useTabsKeyboardNavigation
 };

package/build/{modern/chunk-ODSSU3JD.js → legacy/chunk-5GSXIYD3.js} RENAMED Viewed

@@ -1,9 +1,14 @@
+import {
+  useTabsContext
+} from "./chunk-DQOYTLGB.js";
 // src/components/TabList.tsx
 import { cx } from "@cerberus/styled-system/css";
 import { hstack } from "@cerberus/styled-system/patterns";
 import { jsx } from "react/jsx-runtime";
 function TabList(props) {
   const { description, ...nativeProps } = props;
+  const { id } = useTabsContext();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -17,7 +22,8 @@ function TabList(props) {
           gap: "0",
           w: "full"
         })
-      )
+      ),
+      id: id ?? nativeProps.id
     }
   );
 }
@@ -25,4 +31,4 @@ function TabList(props) {
 export {
   TabList
 };
-//# sourceMappingURL=chunk-ODSSU3JD.js.map
+//# sourceMappingURL=chunk-5GSXIYD3.js.map

package/build/legacy/chunk-5GSXIYD3.js.map ADDED Viewed

@@ -0,0 +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":[]}

package/build/legacy/{chunk-57HOQM4E.js → chunk-BT2B5C7M.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   useTabsContext
-} from "./chunk-HQK7SM56.js";
+} from "./chunk-DQOYTLGB.js";
 // src/aria-helpers/tabs.aria.ts
 import { useEffect, useState } from "react";
@@ -62,4 +62,4 @@ function useTabsKeyboardNavigation() {
 export {
   useTabsKeyboardNavigation
 };
-//# sourceMappingURL=chunk-57HOQM4E.js.map
+//# sourceMappingURL=chunk-BT2B5C7M.js.map

package/build/legacy/{chunk-HQK7SM56.js → chunk-DQOYTLGB.js} RENAMED Viewed

@@ -10,28 +10,34 @@ import {
 import { jsx } from "react/jsx-runtime";
 var TabsContext = createContext(null);
 function Tabs(props) {
-  const { cache } = props;
-  const [active, setActive] = useState(() => cache ? "" : props.active ?? "");
+  const { cache, active, id } = props;
+  const [activeTab, setActiveTab] = useState(() => cache ? "" : active ?? "");
   const tabs = useRef([]);
+  const uuid = useMemo(() => {
+    return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
+  }, [id]);
   const value = useMemo(
     () => ({
-      active,
       tabs,
-      onTabUpdate: setActive
+      id: uuid,
+      active: activeTab,
+      onTabUpdate: setActiveTab
     }),
-    [active, setActive]
+    [activeTab, setActiveTab, uuid, tabs]
   );
   useEffect(() => {
-    const cachedTab = window.localStorage.getItem("cerberus-tabs");
-    if (cache && cachedTab) {
-      setActive(cachedTab);
+    if (cache) {
+      const cachedTab = window.localStorage.getItem(uuid);
+      setActiveTab(
+        cache ? cachedTab || (props.active ?? "") : props.active ?? ""
+      );
     }
-  }, [cache]);
+  }, [cache, active, uuid]);
   useEffect(() => {
-    if (cache) {
-      window.localStorage.setItem("cerberus-tabs", active);
+    if (cache && activeTab) {
+      window.localStorage.setItem(uuid, activeTab);
     }
-  }, [active, cache]);
+  }, [activeTab, cache]);
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: props.children });
 }
 function useTabsContext() {
@@ -47,4 +53,4 @@ export {
   Tabs,
   useTabsContext
 };
-//# sourceMappingURL=chunk-HQK7SM56.js.map
+//# sourceMappingURL=chunk-DQOYTLGB.js.map

package/build/legacy/chunk-DQOYTLGB.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\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 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 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(props: PropsWithChildren<TabsProps>): JSX.Element {\n const { cache, active, id } = props\n const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n const tabs = useRef<HTMLButtonElement[]>([])\n const uuid = useMemo(() => {\n return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n }, [id])\n\n const value = useMemo(\n () => ({\n tabs,\n id: uuid,\n active: activeTab,\n onTabUpdate: setActiveTab,\n }),\n [activeTab, setActiveTab, uuid, tabs],\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,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AA4EH;AA9DG,IAAM,cAAc,cAAuC,IAAI;AA0B/D,SAAS,KAAK,OAAkD;AACrE,QAAM,EAAE,OAAO,QAAQ,GAAG,IAAI;AAC9B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,OAAO,OAA4B,CAAC,CAAC;AAC3C,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,MAAM,IAAI;AAAA,EACtC;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-36QCFAIS.js → chunk-MYRKQVDI.js} RENAMED Viewed

@@ -1,23 +1,27 @@
 import {
   useTabsKeyboardNavigation
-} from "./chunk-57HOQM4E.js";
+} from "./chunk-BT2B5C7M.js";
 import {
   useTabsContext
-} from "./chunk-HQK7SM56.js";
+} from "./chunk-DQOYTLGB.js";
 // src/components/Tab.tsx
-import { useMemo } from "react";
+import {
+  useMemo,
+  useTransition
+} from "react";
 import { css, cx } from "@cerberus/styled-system/css";
 import { jsx } from "react/jsx-runtime";
 function Tab(props) {
   const { value, ...nativeProps } = props;
   const { active, onTabUpdate } = 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);
-    onTabUpdate(e.currentTarget.value);
+    startTransition(() => onTabUpdate(e.currentTarget.value));
   }
   return /* @__PURE__ */ jsx(
     "button",
@@ -25,6 +29,7 @@ function Tab(props) {
       ...nativeProps,
       ...!isActive && { tabIndex: -1 },
       "aria-controls": `panel:${value}`,
+      "aria-busy": isPending,
       "aria-selected": isActive,
       id: value,
       className: cx(nativeProps.className, btnStyles),
@@ -118,4 +123,4 @@ var btnStyles = css({
 export {
   Tab
 };
-//# sourceMappingURL=chunk-36QCFAIS.js.map
+//# sourceMappingURL=chunk-MYRKQVDI.js.map

package/build/legacy/chunk-MYRKQVDI.js.map ADDED Viewed

@@ -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 { css, 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 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 } = 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, btnStyles)}\n onClick={handleClick}\n role=\"tab\"\n ref={ref}\n value={value}\n />\n )\n}\n\nconst btnStyles = css({\n alignItems: 'center',\n display: 'inline-flex',\n borderTopLeftRadius: 'md',\n borderTopRightRadius: 'md',\n fontSize: 'sm',\n fontWeight: '600',\n gap: '2',\n h: '2.75rem',\n justifyContent: 'center',\n position: 'relative',\n pxi: '4',\n zIndex: 'base',\n _motionSafe: {\n transition: 'all 200ms ease-in-out',\n _before: {\n transitionProperty: 'height',\n transitionDuration: '200ms',\n transitionTimingFunction: 'ease-in-out',\n },\n _after: {\n transitionProperty: 'height',\n transitionDuration: '200ms',\n transitionTimingFunction: 'ease-in-out',\n },\n },\n _before: {\n bgColor: 'action.border.initial',\n bottom: '0',\n content: '\"\"',\n h: '0',\n position: 'absolute',\n left: '0',\n right: '0',\n w: 'full',\n willChange: 'height',\n zIndex: 'decorator',\n },\n _after: {\n borderTopLeftRadius: 'md',\n borderTopRightRadius: 'md',\n bottom: '0',\n bgColor: 'neutral.surface.100',\n content: '\"\"',\n left: '0',\n position: 'absolute',\n right: '0',\n h: '0',\n w: 'full',\n willChange: 'height',\n zIndex: '-1',\n },\n _hover: {\n _after: {\n h: 'full',\n },\n },\n _focusVisible: {\n boxShadow: 'none',\n outline: '3px solid',\n outlineColor: 'action.border.focus',\n outlineOffset: '2px',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n _selected: {\n color: 'action.text.200',\n _before: {\n h: '3px',\n },\n _hover: {\n _after: {\n h: '0',\n },\n },\n },\n})\n"],"mappings":";;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,KAAK,UAAU;AAqCpB;AAbG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,YAAY,IAAI,eAAe;AAC/C,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;AAxCzD;AAyCI,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,SAAS;AAAA,MAC9C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,YAAY,IAAI;AAAA,EACpB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,GAAG;AAAA,EACH,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,IACA,QAAQ;AAAA,MACN,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,IACH,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/build/{modern/chunk-RCE2XXL7.js → legacy/chunk-SVZU6LPF.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import {
 } from "./chunk-R4H3352X.js";
 import {
   useTabsContext
-} from "./chunk-HQK7SM56.js";
+} from "./chunk-DQOYTLGB.js";
 // src/components/TabPanel.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -40,4 +40,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-RCE2XXL7.js.map
+//# sourceMappingURL=chunk-SVZU6LPF.js.map

package/build/legacy/components/Tab.js CHANGED Viewed

@@ -1,9 +1,9 @@
 "use client";
 import {
   Tab
-} from "../chunk-36QCFAIS.js";
-import "../chunk-57HOQM4E.js";
-import "../chunk-HQK7SM56.js";
+} from "../chunk-MYRKQVDI.js";
+import "../chunk-BT2B5C7M.js";
+import "../chunk-DQOYTLGB.js";
 export {
   Tab
 };

package/build/legacy/components/TabList.js CHANGED Viewed

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

package/build/legacy/components/TabPanel.js CHANGED Viewed

@@ -1,9 +1,9 @@
 "use client";
 import {
   TabPanel
-} from "../chunk-RCE2XXL7.js";
+} from "../chunk-SVZU6LPF.js";
 import "../chunk-R4H3352X.js";
-import "../chunk-HQK7SM56.js";
+import "../chunk-DQOYTLGB.js";
 export {
   TabPanel
 };

package/build/legacy/context/tabs.js CHANGED Viewed

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

package/build/legacy/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {
   TabPanel
-} from "./chunk-RCE2XXL7.js";
+} from "./chunk-SVZU6LPF.js";
 import {
   Input
 } from "./chunk-LD5ZV46F.js";
@@ -26,22 +26,22 @@ import {
 } from "./chunk-R4H3352X.js";
 import {
   Tab
-} from "./chunk-36QCFAIS.js";
+} from "./chunk-MYRKQVDI.js";
 import {
   TabList
-} from "./chunk-ODSSU3JD.js";
+} from "./chunk-5GSXIYD3.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
 } from "./chunk-JF76VIL3.js";
 import {
   useTabsKeyboardNavigation
-} from "./chunk-57HOQM4E.js";
+} from "./chunk-BT2B5C7M.js";
 import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "./chunk-HQK7SM56.js";
+} from "./chunk-DQOYTLGB.js";
 import {
   MODE_KEY,
   THEME_KEY,

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

@@ -385,14 +385,16 @@ export { TabsContext as TabsContext_alias_1 }
  * @module
  */
 declare interface TabsContextValue {
-    active: string;
     tabs: MutableRefObject<HTMLButtonElement[]>;
+    id: string;
+    active: string;
     onTabUpdate: (active: string) => void;
 }
 export { TabsContextValue }
 export { TabsContextValue as TabsContextValue_alias_1 }
 declare interface TabsProps {
+    id?: string;
     active?: string;
     cache?: boolean;
 }

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

@@ -1,8 +1,8 @@
 "use client";
 import {
   useTabsKeyboardNavigation
-} from "../chunk-57HOQM4E.js";
-import "../chunk-HQK7SM56.js";
+} from "../chunk-BT2B5C7M.js";
+import "../chunk-DQOYTLGB.js";
 export {
   useTabsKeyboardNavigation
 };

package/build/{legacy/chunk-ODSSU3JD.js → modern/chunk-5GSXIYD3.js} RENAMED Viewed

@@ -1,9 +1,14 @@
+import {
+  useTabsContext
+} from "./chunk-DQOYTLGB.js";
 // src/components/TabList.tsx
 import { cx } from "@cerberus/styled-system/css";
 import { hstack } from "@cerberus/styled-system/patterns";
 import { jsx } from "react/jsx-runtime";
 function TabList(props) {
   const { description, ...nativeProps } = props;
+  const { id } = useTabsContext();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -17,7 +22,8 @@ function TabList(props) {
           gap: "0",
           w: "full"
         })
-      )
+      ),
+      id: id ?? nativeProps.id
     }
   );
 }
@@ -25,4 +31,4 @@ function TabList(props) {
 export {
   TabList
 };
-//# sourceMappingURL=chunk-ODSSU3JD.js.map
+//# sourceMappingURL=chunk-5GSXIYD3.js.map

package/build/modern/chunk-5GSXIYD3.js.map ADDED Viewed

@@ -0,0 +1 @@

package/build/modern/{chunk-57HOQM4E.js → chunk-BT2B5C7M.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   useTabsContext
-} from "./chunk-HQK7SM56.js";
+} from "./chunk-DQOYTLGB.js";
 // src/aria-helpers/tabs.aria.ts
 import { useEffect, useState } from "react";
@@ -62,4 +62,4 @@ function useTabsKeyboardNavigation() {
 export {
   useTabsKeyboardNavigation
 };
-//# sourceMappingURL=chunk-57HOQM4E.js.map
+//# sourceMappingURL=chunk-BT2B5C7M.js.map

package/build/modern/{chunk-HQK7SM56.js → chunk-DQOYTLGB.js} RENAMED Viewed

@@ -10,28 +10,34 @@ import {
 import { jsx } from "react/jsx-runtime";
 var TabsContext = createContext(null);
 function Tabs(props) {
-  const { cache } = props;
-  const [active, setActive] = useState(() => cache ? "" : props.active ?? "");
+  const { cache, active, id } = props;
+  const [activeTab, setActiveTab] = useState(() => cache ? "" : active ?? "");
   const tabs = useRef([]);
+  const uuid = useMemo(() => {
+    return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
+  }, [id]);
   const value = useMemo(
     () => ({
-      active,
       tabs,
-      onTabUpdate: setActive
+      id: uuid,
+      active: activeTab,
+      onTabUpdate: setActiveTab
     }),
-    [active, setActive]
+    [activeTab, setActiveTab, uuid, tabs]
   );
   useEffect(() => {
-    const cachedTab = window.localStorage.getItem("cerberus-tabs");
-    if (cache && cachedTab) {
-      setActive(cachedTab);
+    if (cache) {
+      const cachedTab = window.localStorage.getItem(uuid);
+      setActiveTab(
+        cache ? cachedTab || (props.active ?? "") : props.active ?? ""
+      );
     }
-  }, [cache]);
+  }, [cache, active, uuid]);
   useEffect(() => {
-    if (cache) {
-      window.localStorage.setItem("cerberus-tabs", active);
+    if (cache && activeTab) {
+      window.localStorage.setItem(uuid, activeTab);
     }
-  }, [active, cache]);
+  }, [activeTab, cache]);
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: props.children });
 }
 function useTabsContext() {
@@ -47,4 +53,4 @@ export {
   Tabs,
   useTabsContext
 };
-//# sourceMappingURL=chunk-HQK7SM56.js.map
+//# sourceMappingURL=chunk-DQOYTLGB.js.map

package/build/modern/chunk-DQOYTLGB.js.map ADDED Viewed

@@ -0,0 +1 @@

package/build/modern/{chunk-LAUJGQO2.js → chunk-IQP6HSC4.js} RENAMED Viewed

@@ -1,22 +1,26 @@
 import {
   useTabsKeyboardNavigation
-} from "./chunk-57HOQM4E.js";
+} from "./chunk-BT2B5C7M.js";
 import {
   useTabsContext
-} from "./chunk-HQK7SM56.js";
+} from "./chunk-DQOYTLGB.js";
 // src/components/Tab.tsx
-import { useMemo } from "react";
+import {
+  useMemo,
+  useTransition
+} from "react";
 import { css, cx } from "@cerberus/styled-system/css";
 import { jsx } from "react/jsx-runtime";
 function Tab(props) {
   const { value, ...nativeProps } = props;
   const { active, onTabUpdate } = useTabsContext();
+  const [isPending, startTransition] = useTransition();
   const { ref } = useTabsKeyboardNavigation();
   const isActive = useMemo(() => active === value, [active, value]);
   function handleClick(e) {
     props.onClick?.(e);
-    onTabUpdate(e.currentTarget.value);
+    startTransition(() => onTabUpdate(e.currentTarget.value));
   }
   return /* @__PURE__ */ jsx(
     "button",
@@ -24,6 +28,7 @@ function Tab(props) {
       ...nativeProps,
       ...!isActive && { tabIndex: -1 },
       "aria-controls": `panel:${value}`,
+      "aria-busy": isPending,
       "aria-selected": isActive,
       id: value,
       className: cx(nativeProps.className, btnStyles),
@@ -117,4 +122,4 @@ var btnStyles = css({
 export {
   Tab
 };
-//# sourceMappingURL=chunk-LAUJGQO2.js.map
+//# sourceMappingURL=chunk-IQP6HSC4.js.map

package/build/modern/chunk-IQP6HSC4.js.map ADDED Viewed

@@ -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 { css, 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 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 } = 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, btnStyles)}\n onClick={handleClick}\n role=\"tab\"\n ref={ref}\n value={value}\n />\n )\n}\n\nconst btnStyles = css({\n alignItems: 'center',\n display: 'inline-flex',\n borderTopLeftRadius: 'md',\n borderTopRightRadius: 'md',\n fontSize: 'sm',\n fontWeight: '600',\n gap: '2',\n h: '2.75rem',\n justifyContent: 'center',\n position: 'relative',\n pxi: '4',\n zIndex: 'base',\n _motionSafe: {\n transition: 'all 200ms ease-in-out',\n _before: {\n transitionProperty: 'height',\n transitionDuration: '200ms',\n transitionTimingFunction: 'ease-in-out',\n },\n _after: {\n transitionProperty: 'height',\n transitionDuration: '200ms',\n transitionTimingFunction: 'ease-in-out',\n },\n },\n _before: {\n bgColor: 'action.border.initial',\n bottom: '0',\n content: '\"\"',\n h: '0',\n position: 'absolute',\n left: '0',\n right: '0',\n w: 'full',\n willChange: 'height',\n zIndex: 'decorator',\n },\n _after: {\n borderTopLeftRadius: 'md',\n borderTopRightRadius: 'md',\n bottom: '0',\n bgColor: 'neutral.surface.100',\n content: '\"\"',\n left: '0',\n position: 'absolute',\n right: '0',\n h: '0',\n w: 'full',\n willChange: 'height',\n zIndex: '-1',\n },\n _hover: {\n _after: {\n h: 'full',\n },\n },\n _focusVisible: {\n boxShadow: 'none',\n outline: '3px solid',\n outlineColor: 'action.border.focus',\n outlineOffset: '2px',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n _selected: {\n color: 'action.text.200',\n _before: {\n h: '3px',\n },\n _hover: {\n _after: {\n h: '0',\n },\n },\n },\n})\n"],"mappings":";;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,KAAK,UAAU;AAqCpB;AAbG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,YAAY,IAAI,eAAe;AAC/C,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,SAAS;AAAA,MAC9C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,YAAY,IAAI;AAAA,EACpB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,GAAG;AAAA,EACH,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,IACA,QAAQ;AAAA,MACN,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,IACH,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/build/{legacy/chunk-RCE2XXL7.js → modern/chunk-SVZU6LPF.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import {
 } from "./chunk-R4H3352X.js";
 import {
   useTabsContext
-} from "./chunk-HQK7SM56.js";
+} from "./chunk-DQOYTLGB.js";
 // src/components/TabPanel.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -40,4 +40,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-RCE2XXL7.js.map
+//# sourceMappingURL=chunk-SVZU6LPF.js.map

package/build/modern/components/Tab.js CHANGED Viewed

@@ -1,9 +1,9 @@
 "use client";
 import {
   Tab
-} from "../chunk-LAUJGQO2.js";
-import "../chunk-57HOQM4E.js";
-import "../chunk-HQK7SM56.js";
+} from "../chunk-IQP6HSC4.js";
+import "../chunk-BT2B5C7M.js";
+import "../chunk-DQOYTLGB.js";
 export {
   Tab
 };

package/build/modern/components/TabList.js CHANGED Viewed

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

package/build/modern/components/TabPanel.js CHANGED Viewed

@@ -1,9 +1,9 @@
 "use client";
 import {
   TabPanel
-} from "../chunk-RCE2XXL7.js";
+} from "../chunk-SVZU6LPF.js";
 import "../chunk-R4H3352X.js";
-import "../chunk-HQK7SM56.js";
+import "../chunk-DQOYTLGB.js";
 export {
   TabPanel
 };

package/build/modern/context/tabs.js CHANGED Viewed

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

package/build/modern/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {
   TabPanel
-} from "./chunk-RCE2XXL7.js";
+} from "./chunk-SVZU6LPF.js";
 import {
   Input
 } from "./chunk-LD5ZV46F.js";
@@ -26,22 +26,22 @@ import {
 } from "./chunk-R4H3352X.js";
 import {
   Tab
-} from "./chunk-LAUJGQO2.js";
+} from "./chunk-IQP6HSC4.js";
 import {
   TabList
-} from "./chunk-ODSSU3JD.js";
+} from "./chunk-5GSXIYD3.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
 } from "./chunk-JF76VIL3.js";
 import {
   useTabsKeyboardNavigation
-} from "./chunk-57HOQM4E.js";
+} from "./chunk-BT2B5C7M.js";
 import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "./chunk-HQK7SM56.js";
+} from "./chunk-DQOYTLGB.js";
 import {
   MODE_KEY,
   THEME_KEY,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.3.1-next-f5a8b6a",
+  "version": "0.3.2",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,

package/src/components/Tab.tsx CHANGED Viewed

@@ -1,6 +1,11 @@
 'use client'
-import { useMemo, type ButtonHTMLAttributes, type MouseEvent } from 'react'
+import {
+  useMemo,
+  useTransition,
+  type ButtonHTMLAttributes,
+  type MouseEvent,
+} from 'react'
 import { useTabsContext } from '../context/tabs'
 import { css, cx } from '@cerberus/styled-system/css'
 import { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'
@@ -29,12 +34,13 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export function Tab(props: TabProps) {
   const { value, ...nativeProps } = props
   const { active, onTabUpdate } = useTabsContext()
+  const [isPending, startTransition] = useTransition()
   const { ref } = useTabsKeyboardNavigation()
   const isActive = useMemo(() => active === value, [active, value])
   function handleClick(e: MouseEvent<HTMLButtonElement>) {
     props.onClick?.(e)
-    onTabUpdate(e.currentTarget.value)
+    startTransition(() => onTabUpdate(e.currentTarget.value))
   }
   return (
@@ -42,6 +48,7 @@ export function Tab(props: TabProps) {
       {...nativeProps}
       {...(!isActive && { tabIndex: -1 })}
       aria-controls={`panel:${value}`}
+      aria-busy={isPending}
       aria-selected={isActive}
       id={value}
       className={cx(nativeProps.className, btnStyles)}

package/src/components/TabList.tsx CHANGED Viewed

@@ -1,6 +1,9 @@
+'use client'
 import { cx } from '@cerberus/styled-system/css'
 import { hstack } from '@cerberus/styled-system/patterns'
 import type { HTMLAttributes, PropsWithChildren } from 'react'
+import { useTabsContext } from '../context/tabs'
 /**
  * This module provides a TabList component.
@@ -24,6 +27,8 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
  */
 export function TabList(props: PropsWithChildren<TabListProps>) {
   const { description, ...nativeProps } = props
+  const { id } = useTabsContext()
   return (
     <div
       {...nativeProps}
@@ -37,6 +42,7 @@ export function TabList(props: PropsWithChildren<TabListProps>) {
           w: 'full',
         }),
       )}
+      id={id ?? nativeProps.id}
     />
   )
 }

package/src/context/tabs.tsx CHANGED Viewed

@@ -17,14 +17,16 @@ import {
  */
 export interface TabsContextValue {
-  active: string
   tabs: MutableRefObject<HTMLButtonElement[]>
+  id: string
+  active: string
   onTabUpdate: (active: string) => void
 }
 export const TabsContext = createContext<TabsContextValue | null>(null)
 export interface TabsProps {
+  id?: string
   active?: string
   cache?: boolean
 }
@@ -48,31 +50,39 @@ export interface TabsProps {
  * ```
  */
 export function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element {
-  const { cache } = props
-  const [active, setActive] = useState(() => (cache ? '' : props.active ?? ''))
+  const { cache, active, id } = props
+  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))
   const tabs = useRef<HTMLButtonElement[]>([])
+  const uuid = useMemo(() => {
+    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'
+  }, [id])
   const value = useMemo(
     () => ({
-      active,
       tabs,
-      onTabUpdate: setActive,
+      id: uuid,
+      active: activeTab,
+      onTabUpdate: setActiveTab,
     }),
-    [active, setActive],
+    [activeTab, setActiveTab, uuid, tabs],
   )
+  // Get the active tab from local storage
   useEffect(() => {
-    const cachedTab = window.localStorage.getItem('cerberus-tabs')
-    if (cache && cachedTab) {
-      setActive(cachedTab)
+    if (cache) {
+      const cachedTab = window.localStorage.getItem(uuid)
+      setActiveTab(
+        cache ? cachedTab || (props.active ?? '') : props.active ?? '',
+      )
     }
-  }, [cache])
+  }, [cache, active, uuid])
+  // Update the active tab in local storage
   useEffect(() => {
-    if (cache) {
-      window.localStorage.setItem('cerberus-tabs', active)
+    if (cache && activeTab) {
+      window.localStorage.setItem(uuid, activeTab)
     }
-  }, [active, cache])
+  }, [activeTab, cache])
   return (
     <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>

package/build/legacy/chunk-36QCFAIS.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/components/Tab.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type ButtonHTMLAttributes, type MouseEvent } from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { css, 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 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 } = useTabsContext()\n const { ref } = useTabsKeyboardNavigation()\n const isActive = useMemo(() => active === value, [active, value])\n\n function handleClick(e: MouseEvent<HTMLButtonElement>) {\n props.onClick?.(e)\n onTabUpdate(e.currentTarget.value)\n }\n\n return (\n <button\n {...nativeProps}\n {...(!isActive && { tabIndex: -1 })}\n aria-controls={`panel:${value}`}\n aria-selected={isActive}\n id={value}\n className={cx(nativeProps.className, btnStyles)}\n onClick={handleClick}\n role=\"tab\"\n ref={ref}\n value={value}\n />\n )\n}\n\nconst btnStyles = css({\n alignItems: 'center',\n display: 'inline-flex',\n borderTopLeftRadius: 'md',\n borderTopRightRadius: 'md',\n fontSize: 'sm',\n fontWeight: '600',\n gap: '2',\n h: '2.75rem',\n justifyContent: 'center',\n position: 'relative',\n pxi: '4',\n zIndex: 'base',\n _motionSafe: {\n transition: 'all 200ms ease-in-out',\n _before: {\n transitionProperty: 'height',\n transitionDuration: '200ms',\n transitionTimingFunction: 'ease-in-out',\n },\n _after: {\n transitionProperty: 'height',\n transitionDuration: '200ms',\n transitionTimingFunction: 'ease-in-out',\n },\n },\n _before: {\n bgColor: 'action.border.initial',\n bottom: '0',\n content: '\"\"',\n h: '0',\n position: 'absolute',\n left: '0',\n right: '0',\n w: 'full',\n willChange: 'height',\n zIndex: 'decorator',\n },\n _after: {\n borderTopLeftRadius: 'md',\n borderTopRightRadius: 'md',\n bottom: '0',\n bgColor: 'neutral.surface.100',\n content: '\"\"',\n left: '0',\n position: 'absolute',\n right: '0',\n h: '0',\n w: 'full',\n willChange: 'height',\n zIndex: '-1',\n },\n _hover: {\n _after: {\n h: 'full',\n },\n },\n _focusVisible: {\n boxShadow: 'none',\n outline: '3px solid',\n outlineColor: 'action.border.focus',\n outlineOffset: '2px',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n _selected: {\n color: 'action.text.200',\n _before: {\n h: '3px',\n },\n _hover: {\n _after: {\n h: '0',\n },\n },\n },\n})\n"],"mappings":";;;;;;;;AAEA,SAAS,eAA2D;AAEpE,SAAS,KAAK,UAAU;AAoCpB;AAZG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,YAAY,IAAI,eAAe;AAC/C,QAAM,EAAE,IAAI,IAAI,0BAA0B;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,OAAO,CAAC,QAAQ,KAAK,CAAC;AAEhE,WAAS,YAAY,GAAkC;AAlCzD;AAmCI,gBAAM,YAAN,+BAAgB;AAChB,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,CAAC,YAAY,EAAE,UAAU,GAAG;AAAA,MACjC,iBAAe,SAAS,KAAK;AAAA,MAC7B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,SAAS;AAAA,MAC9C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,YAAY,IAAI;AAAA,EACpB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,GAAG;AAAA,EACH,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,IACA,QAAQ;AAAA,MACN,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,IACH,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/build/legacy/chunk-HQK7SM56.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\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 active: string\n tabs: MutableRefObject<HTMLButtonElement[]>\n onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n active?: string\n cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\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(props: PropsWithChildren<TabsProps>): JSX.Element {\n const { cache } = props\n const [active, setActive] = useState(() => (cache ? '' : props.active ?? ''))\n const tabs = useRef<HTMLButtonElement[]>([])\n\n const value = useMemo(\n () => ({\n active,\n tabs,\n onTabUpdate: setActive,\n }),\n [active, setActive],\n )\n\n useEffect(() => {\n const cachedTab = window.localStorage.getItem('cerberus-tabs')\n if (cache && cachedTab) {\n setActive(cachedTab)\n }\n }, [cache])\n\n useEffect(() => {\n if (cache) {\n window.localStorage.setItem('cerberus-tabs', active)\n }\n }, [active, 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,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAkEH;AArDG,IAAM,cAAc,cAAuC,IAAI;AAyB/D,SAAS,KAAK,OAAkD;AACrE,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,MAAO,QAAQ,KAAK,MAAM,UAAU,EAAG;AAC5E,QAAM,OAAO,OAA4B,CAAC,CAAC;AAE3C,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAa;AAAA,IACf;AAAA,IACA,CAAC,QAAQ,SAAS;AAAA,EACpB;AAEA,YAAU,MAAM;AACd,UAAM,YAAY,OAAO,aAAa,QAAQ,eAAe;AAC7D,QAAI,SAAS,WAAW;AACtB,gBAAU,SAAS;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,QAAI,OAAO;AACT,aAAO,aAAa,QAAQ,iBAAiB,MAAM;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,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-ODSSU3JD.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/components/TabList.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\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 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 />\n )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AA0BnB;AAHG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,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;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-HQK7SM56.js.map DELETED Viewed

@@ -1 +0,0 @@

package/build/modern/chunk-LAUJGQO2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/components/Tab.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type ButtonHTMLAttributes, type MouseEvent } from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { css, 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 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 } = useTabsContext()\n const { ref } = useTabsKeyboardNavigation()\n const isActive = useMemo(() => active === value, [active, value])\n\n function handleClick(e: MouseEvent<HTMLButtonElement>) {\n props.onClick?.(e)\n onTabUpdate(e.currentTarget.value)\n }\n\n return (\n <button\n {...nativeProps}\n {...(!isActive && { tabIndex: -1 })}\n aria-controls={`panel:${value}`}\n aria-selected={isActive}\n id={value}\n className={cx(nativeProps.className, btnStyles)}\n onClick={handleClick}\n role=\"tab\"\n ref={ref}\n value={value}\n />\n )\n}\n\nconst btnStyles = css({\n alignItems: 'center',\n display: 'inline-flex',\n borderTopLeftRadius: 'md',\n borderTopRightRadius: 'md',\n fontSize: 'sm',\n fontWeight: '600',\n gap: '2',\n h: '2.75rem',\n justifyContent: 'center',\n position: 'relative',\n pxi: '4',\n zIndex: 'base',\n _motionSafe: {\n transition: 'all 200ms ease-in-out',\n _before: {\n transitionProperty: 'height',\n transitionDuration: '200ms',\n transitionTimingFunction: 'ease-in-out',\n },\n _after: {\n transitionProperty: 'height',\n transitionDuration: '200ms',\n transitionTimingFunction: 'ease-in-out',\n },\n },\n _before: {\n bgColor: 'action.border.initial',\n bottom: '0',\n content: '\"\"',\n h: '0',\n position: 'absolute',\n left: '0',\n right: '0',\n w: 'full',\n willChange: 'height',\n zIndex: 'decorator',\n },\n _after: {\n borderTopLeftRadius: 'md',\n borderTopRightRadius: 'md',\n bottom: '0',\n bgColor: 'neutral.surface.100',\n content: '\"\"',\n left: '0',\n position: 'absolute',\n right: '0',\n h: '0',\n w: 'full',\n willChange: 'height',\n zIndex: '-1',\n },\n _hover: {\n _after: {\n h: 'full',\n },\n },\n _focusVisible: {\n boxShadow: 'none',\n outline: '3px solid',\n outlineColor: 'action.border.focus',\n outlineOffset: '2px',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n _selected: {\n color: 'action.text.200',\n _before: {\n h: '3px',\n },\n _hover: {\n _after: {\n h: '0',\n },\n },\n },\n})\n"],"mappings":";;;;;;;;AAEA,SAAS,eAA2D;AAEpE,SAAS,KAAK,UAAU;AAoCpB;AAZG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,YAAY,IAAI,eAAe;AAC/C,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,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,CAAC,YAAY,EAAE,UAAU,GAAG;AAAA,MACjC,iBAAe,SAAS,KAAK;AAAA,MAC7B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,SAAS;AAAA,MAC9C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,YAAY,IAAI;AAAA,EACpB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,GAAG;AAAA,EACH,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,IACA,QAAQ;AAAA,MACN,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,IACH,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/build/modern/chunk-ODSSU3JD.js.map DELETED Viewed

@@ -1 +0,0 @@

/package/build/legacy/{chunk-57HOQM4E.js.map → chunk-BT2B5C7M.js.map} RENAMED Viewed

File without changes

/package/build/legacy/{chunk-RCE2XXL7.js.map → chunk-SVZU6LPF.js.map} RENAMED Viewed

File without changes

/package/build/modern/{chunk-57HOQM4E.js.map → chunk-BT2B5C7M.js.map} RENAMED Viewed

File without changes

/package/build/modern/{chunk-RCE2XXL7.js.map → chunk-SVZU6LPF.js.map} RENAMED Viewed

File without changes