@cerberus-design/react 0.2.0-next-ae70f9a → 0.2.0-next-87c3df1

package/build/modern/chunk-24B4KIPX.js

@@ -0,0 +1,46 @@
+// src/context/tabs.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  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 value = useMemo(
+    () => ({
+      active,
+      onTabUpdate: setActive
+    }),
+    [active, setActive]
+  );
+  useEffect(() => {
+    if (cache) {
+      const cachedTab = window.localStorage.getItem("cerberus-tabs");
+      setActive(cachedTab ?? active);
+    }
+  }, [cache]);
+  useEffect(() => {
+    if (cache) {
+      window.localStorage.setItem("cerberus-tabs", active);
+    }
+  }, [active, cache]);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: props.children });
+}
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a Tabs Provider.");
+  }
+  return context;
+}
+
+export {
+  Tabs,
+  useTabsContext
+};
+//# sourceMappingURL=chunk-24B4KIPX.js.map

package/build/modern/chunk-24B4KIPX.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  useState,\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  onTabUpdate: (active: string) => void\n}\n\nconst 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\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(() => props.active ?? '')\n\n  const value = useMemo(\n    () => ({\n      active,\n      onTabUpdate: setActive,\n    }),\n    [active, setActive],\n  )\n\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem('cerberus-tabs')\n      setActive(cachedTab ?? active)\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,OAEK;AA+DH;AAnDJ,IAAM,cAAc,cAAuC,IAAI;AAyBxD,SAAS,KAAK,OAAkD;AACrE,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,MAAM,MAAM,UAAU,EAAE;AAE7D,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,aAAa;AAAA,IACf;AAAA,IACA,CAAC,QAAQ,SAAS;AAAA,EACpB;AAEA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,eAAe;AAC7D,gBAAU,aAAa,MAAM;AAAA,IAC/B;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-AMFL3PZV.js

@@ -0,0 +1,108 @@
+import {
+  useTabsContext
+} from "./chunk-24B4KIPX.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 { active, onTabUpdate } = useTabsContext();
+  const isActive = useMemo(() => active === value, [active, value]);
+  function handleClick(e) {
+    props.onClick?.(e);
+    onTabUpdate(e.currentTarget.value);
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...nativeProps,
+      ...!isActive && { tabIndex: -1 },
+      "aria-controls": controls,
+      "aria-selected": isActive,
+      className: cx(nativeProps.className, btnStyles),
+      onClick: handleClick,
+      role: "tab",
+      value
+    }
+  );
+}
+var btnStyles = css({
+  fontSize: "sm",
+  fontWeight: "600",
+  h: "2.75rem",
+  position: "relative",
+  pxi: "4",
+  zIndex: "base",
+  _motionSafe: {
+    transition: "all 200ms ease-in-out",
+    _before: {
+      transitionProperty: "height",
+      transitionDuration: "200ms",
+      transitionTimingFunction: "ease-in-out"
+    },
+    _after: {
+      transitionProperty: "height",
+      transitionDuration: "200ms",
+      transitionTimingFunction: "ease-in-out"
+    }
+  },
+  _before: {
+    bgColor: "action.border.initial",
+    bottom: "0",
+    content: '""',
+    h: "0",
+    position: "absolute",
+    left: "0",
+    right: "0",
+    w: "full",
+    willChange: "height",
+    zIndex: "decorator"
+  },
+  _after: {
+    borderTopLeftRadius: "md",
+    borderTopRightRadius: "md",
+    bottom: "0",
+    bgColor: "neutral.surface.100",
+    content: '""',
+    left: "0",
+    position: "absolute",
+    right: "0",
+    h: "0",
+    w: "full",
+    willChange: "height",
+    zIndex: "-1"
+  },
+  _hover: {
+    _after: {
+      h: "full"
+    }
+  },
+  _focusVisible: {
+    boxShadow: "none",
+    outline: "3px solid",
+    outlineColor: "action.border.focus",
+    outlineOffset: "2px"
+  },
+  _disabled: {
+    cursor: "not-allowed",
+    opacity: "0.5"
+  },
+  _selected: {
+    color: "action.text.200",
+    _before: {
+      h: "3px"
+    },
+    _hover: {
+      _after: {
+        h: "0"
+      }
+    }
+  }
+});
+
+export {
+  Tab
+};
+//# sourceMappingURL=chunk-AMFL3PZV.js.map

package/build/modern/chunk-AMFL3PZV.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'\n\n/**\n * This module provides a Tab component.\n * @module\n */\n\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  id: string\n  controls: string\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 id - the id of the tab (used for aria-labelledby in the panel)\n * @param controls - the id of the tab panel that the tab controls\n * @param value - the id of the tab that will be tracked as the active tab\n * @example\n * ```tsx\n * <Tab controls=\"panel:overview\" value=\"overview\">\n *  Overview\n * </Tab>\n * ```\n */\nexport function Tab(props: TabProps) {\n  const { controls, value, ...nativeProps } = props\n  const { active, onTabUpdate } = useTabsContext()\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={controls}\n      aria-selected={isActive}\n      className={cx(nativeProps.className, btnStyles)}\n      onClick={handleClick}\n      role=\"tab\"\n      value={value}\n    />\n  )\n}\n\nconst btnStyles = css({\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;AAsCpB;AAXG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,UAAU,OAAO,GAAG,YAAY,IAAI;AAC5C,QAAM,EAAE,QAAQ,YAAY,IAAI,eAAe;AAC/C,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;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,GAAG,YAAY,WAAW,SAAS;AAAA,MAC9C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,YAAY,IAAI;AAAA,EACpB,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/chunk-BVILNJ6M.js

@@ -0,0 +1,28 @@
+// 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;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...nativeProps,
+      "aria-describedby": description,
+      className: cx(
+        nativeProps.className,
+        hstack({
+          borderBottom: "1px solid",
+          borderBottomColor: "action.border.100",
+          gap: "0",
+          w: "full"
+        })
+      )
+    }
+  );
+}
+
+export {
+  TabList
+};
+//# sourceMappingURL=chunk-BVILNJ6M.js.map

package/build/modern/chunk-BVILNJ6M.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/modern/chunk-UI7OR6PG.js

@@ -0,0 +1,31 @@
+import {
+  useTabsContext
+} from "./chunk-24B4KIPX.js";
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+
+// src/components/TabPanel.tsx
+import { css, 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 isActive = useMemo(() => active === tab, [active, tab]);
+  return /* @__PURE__ */ jsx(Show, { when: isActive, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...nativeProps,
+      ...isActive && { tabIndex: 0 },
+      "aria-labelledby": tab,
+      className: cx(nativeProps.className, css()),
+      role: "tabpanel"
+    }
+  ) });
+}
+
+export {
+  TabPanel
+};
+//# sourceMappingURL=chunk-UI7OR6PG.js.map

package/build/modern/chunk-UI7OR6PG.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  id: string\n  tab: string\n}\n\n/**\n * The TabPanel component provides a panel element to be used in a Tabs provider.\n * @param id - the id of the tab panel which is used for the Tab's control prop\n * @param tab - the id of the tab that will be tracked as the active tab\n * @example\n * ```tsx\n * <TabPanel id=\"panel:overview\" 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(nativeProps.className, css())}\n        role=\"tabpanel\"\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,KAAK,UAAU;AACxB,SAAS,eAAoC;AAgCvC;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,GAAG,YAAY,WAAW,IAAI,CAAC;AAAA,MAC1C,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}

package/build/modern/components/Tab.d.ts

@@ -0,0 +1,2 @@
+export { Tab_alias_1 as Tab } from '../_tsup-dts-rollup';
+export { TabProps_alias_1 as TabProps } from '../_tsup-dts-rollup';

package/build/modern/components/Tab.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  Tab
+} from "../chunk-AMFL3PZV.js";
+import "../chunk-24B4KIPX.js";
+export {
+  Tab
+};
+//# sourceMappingURL=Tab.js.map

package/build/modern/components/Tab.js.map

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

package/build/modern/components/TabList.d.ts

@@ -0,0 +1,2 @@
+export { TabList_alias_1 as TabList } from '../_tsup-dts-rollup';
+export { TabListProps_alias_1 as TabListProps } from '../_tsup-dts-rollup';

package/build/modern/components/TabList.js

@@ -0,0 +1,7 @@
+import {
+  TabList
+} from "../chunk-BVILNJ6M.js";
+export {
+  TabList
+};
+//# sourceMappingURL=TabList.js.map

package/build/modern/components/TabList.js.map

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

package/build/modern/components/TabPanel.d.ts

@@ -0,0 +1,2 @@
+export { TabPanel_alias_1 as TabPanel } from '../_tsup-dts-rollup';
+export { TabPanelProps_alias_1 as TabPanelProps } from '../_tsup-dts-rollup';

package/build/modern/components/TabPanel.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  TabPanel
+} from "../chunk-UI7OR6PG.js";
+import "../chunk-24B4KIPX.js";
+import "../chunk-R4H3352X.js";
+export {
+  TabPanel
+};
+//# sourceMappingURL=TabPanel.js.map

package/build/modern/components/TabPanel.js.map

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

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

@@ -0,0 +1,4 @@
+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 { TabsProps_alias_1 as TabsProps } from '../_tsup-dts-rollup';

package/build/modern/context/tabs.js

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

package/build/modern/context/tabs.js.map

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

package/build/modern/index.d.ts

@@ -16,6 +16,12 @@ export { NavMenuList } from './_tsup-dts-rollup';
 export { NavMenuListProps } from './_tsup-dts-rollup';
 export { NavMenuLink } from './_tsup-dts-rollup';
 export { NavMenuLinkProps } from './_tsup-dts-rollup';
+export { Tab } from './_tsup-dts-rollup';
+export { TabProps } from './_tsup-dts-rollup';
+export { TabList } from './_tsup-dts-rollup';
+export { TabListProps } from './_tsup-dts-rollup';
+export { TabPanel } from './_tsup-dts-rollup';
+export { TabPanelProps } from './_tsup-dts-rollup';
 export { Show } from './_tsup-dts-rollup';
 export { ShowProps } from './_tsup-dts-rollup';
 export { Field } from './_tsup-dts-rollup';
@@ -26,6 +32,10 @@ export { useNavMenuContext } from './_tsup-dts-rollup';
 export { NavTriggerRef } from './_tsup-dts-rollup';
 export { NavMenuRef } from './_tsup-dts-rollup';
 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 { TabsProps } from './_tsup-dts-rollup';
 export { ThemeProvider } from './_tsup-dts-rollup';
 export { useThemeContext } from './_tsup-dts-rollup';
 export { DefaultThemes } from './_tsup-dts-rollup';

package/build/modern/index.js

@@ -15,6 +15,19 @@ import {
   NavMenu,
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
+import {
+  Tab
+} from "./chunk-AMFL3PZV.js";
+import {
+  TabList
+} from "./chunk-BVILNJ6M.js";
+import {
+  TabPanel
+} from "./chunk-UI7OR6PG.js";
+import {
+  Tabs,
+  useTabsContext
+} from "./chunk-24B4KIPX.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -59,11 +72,16 @@ export {
   NavMenuTrigger,
   Show,
   THEME_KEY,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
   ThemeProvider,
   createNavTriggerProps,
   getPosition,
   useFieldContext,
   useNavMenuContext,
+  useTabsContext,
   useTheme,
   useThemeContext
 };

package/package.json

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

package/src/components/Tab.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { useMemo, type ButtonHTMLAttributes, type MouseEvent } from 'react'
+import { useTabsContext } from '../context/tabs'
+import { css, cx } from '@cerberus/styled-system/css'
+
+/**
+ * This module provides a Tab component.
+ * @module
+ */
+
+export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  id: string
+  controls: string
+  value: string
+}
+
+/**
+ * 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
+ * @example
+ * ```tsx
+ * <Tab controls="panel:overview" value="overview">
+ *  Overview
+ * </Tab>
+ * ```
+ */
+export function Tab(props: TabProps) {
+  const { controls, value, ...nativeProps } = props
+  const { active, onTabUpdate } = useTabsContext()
+  const isActive = useMemo(() => active === value, [active, value])
+
+  function handleClick(e: MouseEvent<HTMLButtonElement>) {
+    props.onClick?.(e)
+    onTabUpdate(e.currentTarget.value)
+  }
+
+  return (
+    <button
+      {...nativeProps}
+      {...(!isActive && { tabIndex: -1 })}
+      aria-controls={controls}
+      aria-selected={isActive}
+      className={cx(nativeProps.className, btnStyles)}
+      onClick={handleClick}
+      role="tab"
+      value={value}
+    />
+  )
+}
+
+const btnStyles = css({
+  fontSize: 'sm',
+  fontWeight: '600',
+  h: '2.75rem',
+  position: 'relative',
+  pxi: '4',
+  zIndex: 'base',
+  _motionSafe: {
+    transition: 'all 200ms ease-in-out',
+    _before: {
+      transitionProperty: 'height',
+      transitionDuration: '200ms',
+      transitionTimingFunction: 'ease-in-out',
+    },
+    _after: {
+      transitionProperty: 'height',
+      transitionDuration: '200ms',
+      transitionTimingFunction: 'ease-in-out',
+    },
+  },
+  _before: {
+    bgColor: 'action.border.initial',
+    bottom: '0',
+    content: '""',
+    h: '0',
+    position: 'absolute',
+    left: '0',
+    right: '0',
+    w: 'full',
+    willChange: 'height',
+    zIndex: 'decorator',
+  },
+  _after: {
+    borderTopLeftRadius: 'md',
+    borderTopRightRadius: 'md',
+    bottom: '0',
+    bgColor: 'neutral.surface.100',
+    content: '""',
+    left: '0',
+    position: 'absolute',
+    right: '0',
+    h: '0',
+    w: 'full',
+    willChange: 'height',
+    zIndex: '-1',
+  },
+  _hover: {
+    _after: {
+      h: 'full',
+    },
+  },
+  _focusVisible: {
+    boxShadow: 'none',
+    outline: '3px solid',
+    outlineColor: 'action.border.focus',
+    outlineOffset: '2px',
+  },
+  _disabled: {
+    cursor: 'not-allowed',
+    opacity: '0.5',
+  },
+  _selected: {
+    color: 'action.text.200',
+    _before: {
+      h: '3px',
+    },
+    _hover: {
+      _after: {
+        h: '0',
+      },
+    },
+  },
+})

package/src/components/TabList.tsx

@@ -0,0 +1,42 @@
+import { cx } from '@cerberus/styled-system/css'
+import { hstack } from '@cerberus/styled-system/patterns'
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+
+/**
+ * This module provides a TabList component.
+ * @module
+ */
+
+export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+  description?: string
+}
+
+/**
+ * The TabList component provides a container for tab elements.
+ * @param description - a description of what the tab list contains
+ * @example
+ * ```tsx
+ * <TabList description="Button details">
+ *  <Tab id="overview">Overview</Tab>
+ *  <Tab id="guidelines">Guidelines</Tab>
+ * </TabList>
+ * ```
+ */
+export function TabList(props: PropsWithChildren<TabListProps>) {
+  const { description, ...nativeProps } = props
+  return (
+    <div
+      {...nativeProps}
+      aria-describedby={description}
+      className={cx(
+        nativeProps.className,
+        hstack({
+          borderBottom: '1px solid',
+          borderBottomColor: 'action.border.100',
+          gap: '0',
+          w: 'full',
+        }),
+      )}
+    />
+  )
+}

package/src/components/TabPanel.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { css, cx } from '@cerberus/styled-system/css'
+import { useMemo, type HTMLAttributes } from 'react'
+import { useTabsContext } from '../context/tabs'
+import { Show } from './Show'
+
+/**
+ * This module provides a TabPanel component.
+ * @module
+ */
+
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  id: string
+  tab: string
+}
+
+/**
+ * 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
+ * @example
+ * ```tsx
+ * <TabPanel id="panel:overview" tab="overview">
+ *   Overview content
+ * </TabPanel>
+ * ```
+ */
+export function TabPanel(props: TabPanelProps) {
+  const { tab, ...nativeProps } = props
+  const { active } = useTabsContext()
+  const isActive = useMemo(() => active === tab, [active, tab])
+
+  return (
+    <Show when={isActive}>
+      <div
+        {...nativeProps}
+        {...(isActive && { tabIndex: 0 })}
+        aria-labelledby={tab}
+        className={cx(nativeProps.className, css())}
+        role="tabpanel"
+      />
+    </Show>
+  )
+}