@cerberus-design/react 0.2.0-next-87c3df1 → 0.2.0-next-1b244ce

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

@@ -1,9 +1,11 @@
 import type { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
+import { Context } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
 import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
@@ -281,12 +283,10 @@ export { ShowProps as ShowProps_alias_1 }
  * The Tab component provides a tab element to be used in a TabList.
  * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
  * @definition [Tab docs](https://cerberus.digitalu.design/react/tabs)
- * @param id - the id of the tab (used for aria-labelledby in the panel)
- * @param controls - the id of the tab panel that the tab controls
- * @param value - the id of the tab that will be tracked as the active tab
+ * @param value - the id of the tab that will be tracked as the active tab and used for aria attributes
  * @example
  * ```tsx
- * <Tab controls="panel:overview" value="overview">
+ * <Tab value="overview">
  *  Overview
  * </Tab>
  * ```
@@ -315,18 +315,17 @@ export { TabList as TabList_alias_1 }
  * @module
  */
 declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-    description?: string;
+    description: string;
 }
 export { TabListProps }
 export { TabListProps as TabListProps_alias_1 }
 
 /**
  * The TabPanel component provides a panel element to be used in a Tabs provider.
- * @param id - the id of the tab panel which is used for the Tab's control prop
- * @param tab - the id of the tab that will be tracked as the active tab
+ * @param tab - the value of the tab that will be tracked as the active tab and used for aria attributes
  * @example
  * ```tsx
- * <TabPanel id="panel:overview" tab="overview">
+ * <TabPanel tab="overview">
  *   Overview content
  * </TabPanel>
  * ```
@@ -340,7 +339,6 @@ export { TabPanel as TabPanel_alias_1 }
  * @module
  */
 declare interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
-    id: string;
     tab: string;
 }
 export { TabPanelProps }
@@ -351,8 +349,6 @@ export { TabPanelProps as TabPanelProps_alias_1 }
  * @module
  */
 declare interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    id: string;
-    controls: string;
     value: string;
 }
 export { TabProps }
@@ -361,7 +357,7 @@ export { TabProps as TabProps_alias_1 }
 /**
  * The Tabs component provides a context to manage tab state.
  * @param active - the default active tab id,
- * @param cache - whether to cache the active tab state
+ * @param cache - whether to cache the active tab state in local storage
  * @example
  * ```tsx
  * <Tabs cache>
@@ -380,12 +376,17 @@ declare function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element;
 export { Tabs }
 export { Tabs as Tabs_alias_1 }
 
+declare const TabsContext: Context<TabsContextValue | null>;
+export { TabsContext }
+export { TabsContext as TabsContext_alias_1 }
+
 /**
  * This module provides a Tabs component and a hook to access its context.
  * @module
  */
 declare interface TabsContextValue {
     active: string;
+    tabs: MutableRefObject<HTMLButtonElement[]>;
     onTabUpdate: (active: string) => void;
 }
 export { TabsContextValue }
@@ -436,6 +437,12 @@ declare function useTabsContext(): TabsContextValue;
 export { useTabsContext }
 export { useTabsContext as useTabsContext_alias_1 }
 
+declare function useTabsKeyboardNavigation(): {
+    ref: (tab: HTMLButtonElement) => void;
+};
+export { useTabsKeyboardNavigation }
+export { useTabsKeyboardNavigation as useTabsKeyboardNavigation_alias_1 }
+
 declare function useTheme<C extends string = DefaultThemes>(defaultTheme?: CustomThemes<C>, defaultColorMode?: ColorModes): ThemeContextValue<C>;
 export { useTheme }
 export { useTheme as useTheme_alias_1 }

package/build/modern/aria-helpers/tabs.aria.d.ts

@@ -0,0 +1 @@
+export { useTabsKeyboardNavigation_alias_1 as useTabsKeyboardNavigation } from '../_tsup-dts-rollup';

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

@@ -0,0 +1,9 @@
+"use client";
+import {
+  useTabsKeyboardNavigation
+} from "../chunk-57HOQM4E.js";
+import "../chunk-HQK7SM56.js";
+export {
+  useTabsKeyboardNavigation
+};
+//# sourceMappingURL=tabs.aria.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/chunk-57HOQM4E.js

@@ -0,0 +1,65 @@
+import {
+  useTabsContext
+} from "./chunk-HQK7SM56.js";
+
+// src/aria-helpers/tabs.aria.ts
+import { useEffect, useState } from "react";
+function getNextIndex(index, length) {
+  return index === length - 1 ? 0 : index + 1;
+}
+function getPrevIndex(index, length) {
+  return index === 0 ? length - 1 : index - 1;
+}
+function useTabsKeyboardNavigation() {
+  const { tabs } = useTabsContext();
+  const [activeTab, setActiveTab] = useState(-1);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      const index = activeTab === -1 ? tabs.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
+      const nextIndex = getNextIndex(index, tabs.current.length);
+      const prevIndex = getPrevIndex(index, tabs.current.length);
+      if (index === -1)
+        return;
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          setActiveTab(prevIndex);
+          tabs.current[prevIndex].focus();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          setActiveTab(nextIndex);
+          tabs.current[nextIndex].focus();
+          break;
+        case "Home":
+          event.preventDefault();
+          setActiveTab(0);
+          tabs.current[0].focus();
+          break;
+        case "End":
+          event.preventDefault();
+          setActiveTab(tabs.current.length - 1);
+          tabs.current[tabs.current.length - 1].focus();
+          break;
+        default:
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [activeTab, tabs.current]);
+  return {
+    ref: (tab) => {
+      if (tab && !tabs.current.includes(tab)) {
+        tabs.current.push(tab);
+      }
+    }
+  };
+}
+
+export {
+  useTabsKeyboardNavigation
+};
+//# sourceMappingURL=chunk-57HOQM4E.js.map

package/build/modern/chunk-57HOQM4E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/aria-helpers/tabs.aria.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n  return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n  return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n  const { tabs } = useTabsContext()\n  const [activeTab, setActiveTab] = useState(-1)\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const index =\n        activeTab === -1\n          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n          : activeTab\n      const nextIndex = getNextIndex(index, tabs.current.length)\n      const prevIndex = getPrevIndex(index, tabs.current.length)\n\n      // If the active tab is not found, do nothing\n      if (index === -1) return\n\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault()\n          setActiveTab(prevIndex)\n          tabs.current[prevIndex].focus()\n          break\n        case 'ArrowRight':\n          event.preventDefault()\n          setActiveTab(nextIndex)\n          tabs.current[nextIndex].focus()\n          break\n        case 'Home':\n          event.preventDefault()\n          setActiveTab(0)\n          tabs.current[0].focus()\n          break\n        case 'End':\n          event.preventDefault()\n          setActiveTab(tabs.current.length - 1)\n          tabs.current[tabs.current.length - 1].focus()\n          break\n        default:\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [activeTab, tabs.current])\n\n  return {\n    ref: (tab: HTMLButtonElement) => {\n      if (tab && !tabs.current.includes(tab)) {\n        tabs.current.push(tab)\n      }\n    },\n  }\n}\n"],"mappings":";;;;;AAEA,SAAS,WAAW,gBAAgB;AAGpC,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,SAAS,IAAI,IAAI,QAAQ;AAC5C;AAEA,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC5C;AAEO,SAAS,4BAA4B;AAC1C,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAE7C,YAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,YAAM,QACJ,cAAc,KACV,KAAK,QAAQ,UAAU,CAAC,QAAQ,IAAI,iBAAiB,MAAM,IAC3D;AACN,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AACzD,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AAGzD,UAAI,UAAU;AAAI;AAElB,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,eAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,eAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,CAAC;AACd,eAAK,QAAQ,CAAC,EAAE,MAAM;AACtB;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,KAAK,QAAQ,SAAS,CAAC;AACpC,eAAK,QAAQ,KAAK,QAAQ,SAAS,CAAC,EAAE,MAAM;AAC5C;AAAA,QACF;AACE;AAAA,MACJ;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAElD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,OAAO,CAAC;AAE5B,SAAO;AAAA,IACL,KAAK,CAAC,QAA2B;AAC/B,UAAI,OAAO,CAAC,KAAK,QAAQ,SAAS,GAAG,GAAG;AACtC,aAAK,QAAQ,KAAK,GAAG;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/build/modern/{chunk-24B4KIPX.js → chunk-HQK7SM56.js}

@@ -4,24 +4,27 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var TabsContext = createContext(null);
 function Tabs(props) {
   const { cache } = props;
-  const [active, setActive] = useState(() => props.active ?? "");
+  const [active, setActive] = useState(() => cache ? "" : props.active ?? "");
+  const tabs = useRef([]);
   const value = useMemo(
     () => ({
       active,
+      tabs,
       onTabUpdate: setActive
     }),
     [active, setActive]
   );
   useEffect(() => {
-    if (cache) {
-      const cachedTab = window.localStorage.getItem("cerberus-tabs");
-      setActive(cachedTab ?? active);
+    const cachedTab = window.localStorage.getItem("cerberus-tabs");
+    if (cache && cachedTab) {
+      setActive(cachedTab);
     }
   }, [cache]);
   useEffect(() => {
@@ -40,7 +43,8 @@ function useTabsContext() {
 }
 
 export {
+  TabsContext,
   Tabs,
   useTabsContext
 };
-//# sourceMappingURL=chunk-24B4KIPX.js.map
+//# sourceMappingURL=chunk-HQK7SM56.js.map

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

@@ -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  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/modern/{chunk-X6PHIZRM.js → chunk-MJB3V6J4.js}

@@ -1,12 +1,12 @@
 import {
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
-import {
-  createNavTriggerProps
-} from "./chunk-JF76VIL3.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
+import {
+  createNavTriggerProps
+} from "./chunk-JF76VIL3.js";
 
 // src/components/NavMenuTrigger.tsx
 import {
@@ -79,4 +79,4 @@ function NavMenuTrigger(props) {
 export {
   NavMenuTrigger
 };
-//# sourceMappingURL=chunk-X6PHIZRM.js.map
+//# sourceMappingURL=chunk-MJB3V6J4.js.map

package/build/{legacy/chunk-BVILNJ6M.js → modern/chunk-ODSSU3JD.js}

@@ -25,4 +25,4 @@ function TabList(props) {
 export {
   TabList
 };
-//# sourceMappingURL=chunk-BVILNJ6M.js.map
+//# sourceMappingURL=chunk-ODSSU3JD.js.map

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

@@ -0,0 +1 @@
+{"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/{legacy/chunk-UI7OR6PG.js → modern/chunk-RCE2XXL7.js}

@@ -1,9 +1,9 @@
-import {
-  useTabsContext
-} from "./chunk-24B4KIPX.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
+import {
+  useTabsContext
+} from "./chunk-HQK7SM56.js";
 
 // src/components/TabPanel.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -19,7 +19,19 @@ function TabPanel(props) {
       ...nativeProps,
       ...isActive && { tabIndex: 0 },
       "aria-labelledby": tab,
-      className: cx(nativeProps.className, css()),
+      className: cx(
+        nativeProps.className,
+        css({
+          rounded: "md",
+          _focusVisible: {
+            boxShadow: "none",
+            outline: "3px solid",
+            outlineColor: "action.border.focus",
+            outlineOffset: "2px"
+          }
+        })
+      ),
+      id: `panel:${tab}`,
       role: "tabpanel"
     }
   ) });
@@ -28,4 +40,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-UI7OR6PG.js.map
+//# sourceMappingURL=chunk-RCE2XXL7.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TabPanel.tsx"],"sourcesContent":["'use client'\n\nimport { css, 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 } = 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(\n          nativeProps.className,\n          css({\n            rounded: 'md',\n            _focusVisible: {\n              boxShadow: 'none',\n              outline: '3px solid',\n              outlineColor: 'action.border.focus',\n              outlineOffset: '2px',\n            },\n          }),\n        )}\n        id={`panel:${tab}`}\n        role=\"tabpanel\"\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,KAAK,UAAU;AACxB,SAAS,eAAoC;AA8BvC;AAPC,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,KAAK,GAAG,YAAY,IAAI;AAChC,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,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;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF,SAAS;AAAA,UACT,eAAe;AAAA,YACb,WAAW;AAAA,YACX,SAAS;AAAA,YACT,cAAc;AAAA,YACd,eAAe;AAAA,UACjB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,IAAI,SAAS,GAAG;AAAA,MAChB,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}

package/build/modern/{chunk-AMFL3PZV.js → chunk-SWCK7V2N.js}

@@ -1,14 +1,18 @@
+import {
+  useTabsKeyboardNavigation
+} from "./chunk-57HOQM4E.js";
 import {
   useTabsContext
-} from "./chunk-24B4KIPX.js";
+} from "./chunk-HQK7SM56.js";
 
 // src/components/Tab.tsx
 import { useMemo } from "react";
 import { css, cx } from "@cerberus/styled-system/css";
 import { jsx } from "react/jsx-runtime";
 function Tab(props) {
-  const { controls, value, ...nativeProps } = props;
+  const { value, ...nativeProps } = props;
   const { active, onTabUpdate } = useTabsContext();
+  const { ref } = useTabsKeyboardNavigation();
   const isActive = useMemo(() => active === value, [active, value]);
   function handleClick(e) {
     props.onClick?.(e);
@@ -19,16 +23,20 @@ function Tab(props) {
     {
       ...nativeProps,
       ...!isActive && { tabIndex: -1 },
-      "aria-controls": controls,
+      "aria-controls": `panel:${value}`,
       "aria-selected": isActive,
+      id: value,
       className: cx(nativeProps.className, btnStyles),
       onClick: handleClick,
       role: "tab",
+      ref,
       value
     }
   );
 }
 var btnStyles = css({
+  borderTopLeftRadius: "md",
+  borderTopRightRadius: "md",
   fontSize: "sm",
   fontWeight: "600",
   h: "2.75rem",
@@ -105,4 +113,4 @@ var btnStyles = css({
 export {
   Tab
 };
-//# sourceMappingURL=chunk-AMFL3PZV.js.map
+//# sourceMappingURL=chunk-SWCK7V2N.js.map

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

@@ -0,0 +1 @@
+{"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  borderTopLeftRadius: 'md',\n  borderTopRightRadius: 'md',\n  fontSize: 'sm',\n  fontWeight: '600',\n  h: '2.75rem',\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,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,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/components/NavMenuTrigger.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   NavMenuTrigger
-} from "../chunk-X6PHIZRM.js";
+} from "../chunk-MJB3V6J4.js";
 import "../chunk-KJUCHZHV.js";
-import "../chunk-JF76VIL3.js";
 import "../chunk-R4H3352X.js";
+import "../chunk-JF76VIL3.js";
 export {
   NavMenuTrigger
 };

package/build/modern/components/Tab.js

@@ -1,8 +1,9 @@
 "use client";
 import {
   Tab
-} from "../chunk-AMFL3PZV.js";
-import "../chunk-24B4KIPX.js";
+} from "../chunk-SWCK7V2N.js";
+import "../chunk-57HOQM4E.js";
+import "../chunk-HQK7SM56.js";
 export {
   Tab
 };

package/build/modern/components/TabList.js

@@ -1,6 +1,6 @@
 import {
   TabList
-} from "../chunk-BVILNJ6M.js";
+} from "../chunk-ODSSU3JD.js";
 export {
   TabList
 };

package/build/modern/components/TabPanel.js

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

package/build/modern/context/tabs.d.ts

@@ -1,4 +1,5 @@
 export { Tabs_alias_1 as Tabs } from '../_tsup-dts-rollup';
 export { useTabsContext_alias_1 as useTabsContext } from '../_tsup-dts-rollup';
 export { TabsContextValue_alias_1 as TabsContextValue } from '../_tsup-dts-rollup';
+export { TabsContext_alias_1 as TabsContext } from '../_tsup-dts-rollup';
 export { TabsProps_alias_1 as TabsProps } from '../_tsup-dts-rollup';

package/build/modern/context/tabs.js

@@ -1,10 +1,12 @@
 "use client";
 import {
   Tabs,
+  TabsContext,
   useTabsContext
-} from "../chunk-24B4KIPX.js";
+} from "../chunk-HQK7SM56.js";
 export {
   Tabs,
+  TabsContext,
   useTabsContext
 };
 //# sourceMappingURL=tabs.js.map

package/build/modern/index.d.ts

@@ -35,6 +35,7 @@ export { NavMenuContextValue } from './_tsup-dts-rollup';
 export { Tabs } from './_tsup-dts-rollup';
 export { useTabsContext } from './_tsup-dts-rollup';
 export { TabsContextValue } from './_tsup-dts-rollup';
+export { TabsContext } from './_tsup-dts-rollup';
 export { TabsProps } from './_tsup-dts-rollup';
 export { ThemeProvider } from './_tsup-dts-rollup';
 export { useThemeContext } from './_tsup-dts-rollup';
@@ -47,4 +48,5 @@ export { MODE_KEY } from './_tsup-dts-rollup';
 export { useTheme } from './_tsup-dts-rollup';
 export { createNavTriggerProps } from './_tsup-dts-rollup';
 export { NavTriggerAriaValues } from './_tsup-dts-rollup';
+export { useTabsKeyboardNavigation } from './_tsup-dts-rollup';
 export { Positions } from './_tsup-dts-rollup';

package/build/modern/index.js

@@ -1,3 +1,9 @@
+import {
+  TabPanel
+} from "./chunk-RCE2XXL7.js";
+import {
+  Input
+} from "./chunk-LD5ZV46F.js";
 import {
   Label
 } from "./chunk-OXVNTE4A.js";
@@ -10,28 +16,32 @@ import {
 } from "./chunk-WSQTX34C.js";
 import {
   NavMenuTrigger
-} from "./chunk-X6PHIZRM.js";
+} from "./chunk-MJB3V6J4.js";
 import {
   NavMenu,
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
+import {
+  Show
+} from "./chunk-R4H3352X.js";
 import {
   Tab
-} from "./chunk-AMFL3PZV.js";
+} from "./chunk-SWCK7V2N.js";
 import {
   TabList
-} from "./chunk-BVILNJ6M.js";
-import {
-  TabPanel
-} from "./chunk-UI7OR6PG.js";
-import {
-  Tabs,
-  useTabsContext
-} from "./chunk-24B4KIPX.js";
+} from "./chunk-ODSSU3JD.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
 } from "./chunk-JF76VIL3.js";
+import {
+  useTabsKeyboardNavigation
+} from "./chunk-57HOQM4E.js";
+import {
+  Tabs,
+  TabsContext,
+  useTabsContext
+} from "./chunk-HQK7SM56.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -45,19 +55,13 @@ import {
 import {
   FieldMessage
 } from "./chunk-YVUZSAJG.js";
-import {
-  IconButton
-} from "./chunk-BPIYUAYS.js";
-import {
-  Input
-} from "./chunk-LD5ZV46F.js";
-import {
-  Show
-} from "./chunk-R4H3352X.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  IconButton
+} from "./chunk-BPIYUAYS.js";
 export {
   Button,
   Field,
@@ -76,12 +80,14 @@ export {
   TabList,
   TabPanel,
   Tabs,
+  TabsContext,
   ThemeProvider,
   createNavTriggerProps,
   getPosition,
   useFieldContext,
   useNavMenuContext,
   useTabsContext,
+  useTabsKeyboardNavigation,
   useTheme,
   useThemeContext
 };

package/package.json

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

package/src/aria-helpers/tabs.aria.ts

@@ -0,0 +1,70 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTabsContext } from '../context/tabs'
+
+function getNextIndex(index: number, length: number) {
+  return index === length - 1 ? 0 : index + 1
+}
+
+function getPrevIndex(index: number, length: number) {
+  return index === 0 ? length - 1 : index - 1
+}
+
+export function useTabsKeyboardNavigation() {
+  const { tabs } = useTabsContext()
+  const [activeTab, setActiveTab] = useState(-1)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const index =
+        activeTab === -1
+          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')
+          : activeTab
+      const nextIndex = getNextIndex(index, tabs.current.length)
+      const prevIndex = getPrevIndex(index, tabs.current.length)
+
+      // If the active tab is not found, do nothing
+      if (index === -1) return
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          event.preventDefault()
+          setActiveTab(prevIndex)
+          tabs.current[prevIndex].focus()
+          break
+        case 'ArrowRight':
+          event.preventDefault()
+          setActiveTab(nextIndex)
+          tabs.current[nextIndex].focus()
+          break
+        case 'Home':
+          event.preventDefault()
+          setActiveTab(0)
+          tabs.current[0].focus()
+          break
+        case 'End':
+          event.preventDefault()
+          setActiveTab(tabs.current.length - 1)
+          tabs.current[tabs.current.length - 1].focus()
+          break
+        default:
+          break
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [activeTab, tabs.current])
+
+  return {
+    ref: (tab: HTMLButtonElement) => {
+      if (tab && !tabs.current.includes(tab)) {
+        tabs.current.push(tab)
+      }
+    },
+  }
+}