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

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

@@ -277,6 +277,20 @@ declare interface ShowProps {
 export { ShowProps }
 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
+ * @example
+ * ```tsx
+ * <Tab controls="panel:overview" value="overview">
+ *  Overview
+ * </Tab>
+ * ```
+ */
 declare function Tab(props: TabProps): JSX_2.Element;
 export { Tab }
 export { Tab as Tab_alias_1 }
@@ -306,11 +320,27 @@ declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
 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
+ * @example
+ * ```tsx
+ * <TabPanel id="panel:overview" tab="overview">
+ *   Overview content
+ * </TabPanel>
+ * ```
+ */
 declare function TabPanel(props: TabPanelProps): JSX_2.Element;
 export { TabPanel }
 export { TabPanel as TabPanel_alias_1 }
 
+/**
+ * This module provides a TabPanel component.
+ * @module
+ */
 declare interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    id: string;
     tab: string;
 }
 export { TabPanelProps }
@@ -321,6 +351,7 @@ export { TabPanelProps as TabPanelProps_alias_1 }
  * @module
  */
 declare interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    id: string;
     controls: string;
     value: string;
 }

package/build/legacy/chunk-6DXQW4WK.js

@@ -0,0 +1,109 @@
+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) {
+    var _a;
+    (_a = props.onClick) == null ? void 0 : _a.call(props, 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-6DXQW4WK.js.map

package/build/legacy/chunk-6DXQW4WK.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;AApCzD;AAqCI,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;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/legacy/{chunk-NWDAYAVH.js → chunk-BVILNJ6M.js}

@@ -12,7 +12,10 @@ function TabList(props) {
       className: cx(
         nativeProps.className,
         hstack({
-          gap: "0"
+          borderBottom: "1px solid",
+          borderBottomColor: "action.border.100",
+          gap: "0",
+          w: "full"
         })
       )
     }
@@ -22,4 +25,4 @@ function TabList(props) {
 export {
   TabList
 };
-//# sourceMappingURL=chunk-NWDAYAVH.js.map
+//# sourceMappingURL=chunk-BVILNJ6M.js.map

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

@@ -1 +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          gap: '0',\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,KAAK;AAAA,QACP,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"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-XVDQL4L6.js → chunk-UI7OR6PG.js}

@@ -28,4 +28,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-XVDQL4L6.js.map
+//# sourceMappingURL=chunk-UI7OR6PG.js.map

package/build/legacy/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/legacy/components/Tab.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Tab
-} from "../chunk-NVA4SWUI.js";
+} from "../chunk-6DXQW4WK.js";
 import "../chunk-24B4KIPX.js";
 export {
   Tab

package/build/legacy/components/TabList.js

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

package/build/legacy/components/TabPanel.js

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

package/build/legacy/index.js

@@ -17,13 +17,13 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Tab
-} from "./chunk-NVA4SWUI.js";
+} from "./chunk-6DXQW4WK.js";
 import {
   TabList
-} from "./chunk-NWDAYAVH.js";
+} from "./chunk-BVILNJ6M.js";
 import {
   TabPanel
-} from "./chunk-XVDQL4L6.js";
+} from "./chunk-UI7OR6PG.js";
 import {
   Tabs,
   useTabsContext

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

@@ -277,6 +277,20 @@ declare interface ShowProps {
 export { ShowProps }
 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
+ * @example
+ * ```tsx
+ * <Tab controls="panel:overview" value="overview">
+ *  Overview
+ * </Tab>
+ * ```
+ */
 declare function Tab(props: TabProps): JSX_2.Element;
 export { Tab }
 export { Tab as Tab_alias_1 }
@@ -306,11 +320,27 @@ declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
 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
+ * @example
+ * ```tsx
+ * <TabPanel id="panel:overview" tab="overview">
+ *   Overview content
+ * </TabPanel>
+ * ```
+ */
 declare function TabPanel(props: TabPanelProps): JSX_2.Element;
 export { TabPanel }
 export { TabPanel as TabPanel_alias_1 }
 
+/**
+ * This module provides a TabPanel component.
+ * @module
+ */
 declare interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    id: string;
     tab: string;
 }
 export { TabPanelProps }
@@ -321,6 +351,7 @@ export { TabPanelProps as TabPanelProps_alias_1 }
  * @module
  */
 declare interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    id: string;
     controls: string;
     value: string;
 }

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-NWDAYAVH.js → chunk-BVILNJ6M.js}

@@ -12,7 +12,10 @@ function TabList(props) {
       className: cx(
         nativeProps.className,
         hstack({
-          gap: "0"
+          borderBottom: "1px solid",
+          borderBottomColor: "action.border.100",
+          gap: "0",
+          w: "full"
         })
       )
     }
@@ -22,4 +25,4 @@ function TabList(props) {
 export {
   TabList
 };
-//# sourceMappingURL=chunk-NWDAYAVH.js.map
+//# sourceMappingURL=chunk-BVILNJ6M.js.map

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

@@ -1 +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          gap: '0',\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,KAAK;AAAA,QACP,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"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-XVDQL4L6.js → chunk-UI7OR6PG.js}

@@ -28,4 +28,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-XVDQL4L6.js.map
+//# 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.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Tab
-} from "../chunk-X5PQA2JN.js";
+} from "../chunk-AMFL3PZV.js";
 import "../chunk-24B4KIPX.js";
 export {
   Tab

package/build/modern/components/TabList.js

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

package/build/modern/components/TabPanel.js

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

package/build/modern/index.js

@@ -17,13 +17,13 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Tab
-} from "./chunk-X5PQA2JN.js";
+} from "./chunk-AMFL3PZV.js";
 import {
   TabList
-} from "./chunk-NWDAYAVH.js";
+} from "./chunk-BVILNJ6M.js";
 import {
   TabPanel
-} from "./chunk-XVDQL4L6.js";
+} from "./chunk-UI7OR6PG.js";
 import {
   Tabs,
   useTabsContext

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.2.0-next-ec538ca",
+  "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

@@ -10,10 +10,25 @@ import { css, cx } from '@cerberus/styled-system/css'
  */
 
 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()
@@ -30,10 +45,84 @@ export function Tab(props: TabProps) {
       {...(!isActive && { tabIndex: -1 })}
       aria-controls={controls}
       aria-selected={isActive}
-      className={cx(nativeProps.className, css())}
+      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

@@ -31,7 +31,10 @@ export function TabList(props: PropsWithChildren<TabListProps>) {
       className={cx(
         nativeProps.className,
         hstack({
+          borderBottom: '1px solid',
+          borderBottomColor: 'action.border.100',
           gap: '0',
+          w: 'full',
         }),
       )}
     />

package/src/components/TabPanel.tsx

@@ -5,10 +5,27 @@ 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()

package/build/legacy/chunk-NVA4SWUI.js

@@ -1,36 +0,0 @@
-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) {
-    var _a;
-    (_a = props.onClick) == null ? void 0 : _a.call(props, e);
-    onTabUpdate(e.currentTarget.value);
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...nativeProps,
-      ...!isActive && { tabIndex: -1 },
-      "aria-controls": controls,
-      "aria-selected": isActive,
-      className: cx(nativeProps.className, css()),
-      onClick: handleClick,
-      role: "tab",
-      value
-    }
-  );
-}
-
-export {
-  Tab
-};
-//# sourceMappingURL=chunk-NVA4SWUI.js.map

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

@@ -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'\n\n/**\n * This module provides a Tab component.\n * @module\n */\n\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  controls: string\n  value: string\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, css())}\n      onClick={handleClick}\n      role=\"tab\"\n      value={value}\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,eAA2D;AAEpE,SAAS,KAAK,UAAU;AAuBpB;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;AArBzD;AAsBI,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;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,GAAG,YAAY,WAAW,IAAI,CAAC;AAAA,MAC1C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"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\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  tab: string\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;AAevC;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/chunk-X5PQA2JN.js

@@ -1,35 +0,0 @@
-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, css()),
-      onClick: handleClick,
-      role: "tab",
-      value
-    }
-  );
-}
-
-export {
-  Tab
-};
-//# sourceMappingURL=chunk-X5PQA2JN.js.map

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

@@ -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'\n\n/**\n * This module provides a Tab component.\n * @module\n */\n\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  controls: string\n  value: string\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, css())}\n      onClick={handleClick}\n      role=\"tab\"\n      value={value}\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,eAA2D;AAEpE,SAAS,KAAK,UAAU;AAuBpB;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,IAAI,CAAC;AAAA,MAC1C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"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\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  tab: string\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;AAevC;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":[]}