@cerberus-design/react 0.2.0-next-ec538ca → 0.2.0-next-1b244ce

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)
+      }
+    },
+  }
+}

package/src/components/Tab.tsx

@@ -3,6 +3,7 @@
 import { useMemo, type ButtonHTMLAttributes, type MouseEvent } from 'react'
 import { useTabsContext } from '../context/tabs'
 import { css, cx } from '@cerberus/styled-system/css'
+import { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'
 
 /**
  * This module provides a Tab component.
@@ -10,13 +11,25 @@ import { css, cx } from '@cerberus/styled-system/css'
  */
 
 export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  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 value - the id of the tab that will be tracked as the active tab and used for aria attributes
+ * @example
+ * ```tsx
+ * <Tab value="overview">
+ *  Overview
+ * </Tab>
+ * ```
+ */
 export function Tab(props: TabProps) {
-  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: MouseEvent<HTMLButtonElement>) {
@@ -28,12 +41,90 @@ export function Tab(props: TabProps) {
     <button
       {...nativeProps}
       {...(!isActive && { tabIndex: -1 })}
-      aria-controls={controls}
+      aria-controls={`panel:${value}`}
       aria-selected={isActive}
-      className={cx(nativeProps.className, css())}
+      id={value}
+      className={cx(nativeProps.className, btnStyles)}
       onClick={handleClick}
       role="tab"
+      ref={ref}
       value={value}
     />
   )
 }
+
+const btnStyles = css({
+  borderTopLeftRadius: 'md',
+  borderTopRightRadius: 'md',
+  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

@@ -8,7 +8,7 @@ import type { HTMLAttributes, PropsWithChildren } from 'react'
  */
 
 export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-  description?: string
+  description: string
 }
 
 /**
@@ -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,25 @@ 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> {
   tab: string
 }
 
+/**
+ * The TabPanel component provides a panel element to be used in a Tabs provider.
+ * @param tab - the value of the tab that will be tracked as the active tab and used for aria attributes
+ * @example
+ * ```tsx
+ * <TabPanel tab="overview">
+ *   Overview content
+ * </TabPanel>
+ * ```
+ */
 export function TabPanel(props: TabPanelProps) {
   const { tab, ...nativeProps } = props
   const { active } = useTabsContext()
@@ -20,7 +35,19 @@ export function TabPanel(props: TabPanelProps) {
         {...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"
       />
     </Show>

package/src/context/tabs.tsx

@@ -5,7 +5,9 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
+  type MutableRefObject,
   type PropsWithChildren,
 } from 'react'
 
@@ -16,10 +18,11 @@ import {
 
 export interface TabsContextValue {
   active: string
+  tabs: MutableRefObject<HTMLButtonElement[]>
   onTabUpdate: (active: string) => void
 }
 
-const TabsContext = createContext<TabsContextValue | null>(null)
+export const TabsContext = createContext<TabsContextValue | null>(null)
 
 export interface TabsProps {
   active?: string
@@ -29,7 +32,7 @@ export interface TabsProps {
 /**
  * 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>
@@ -46,20 +49,22 @@ export interface TabsProps {
  */
 export function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element {
   const { cache } = props
-  const [active, setActive] = useState(() => props.active ?? '')
+  const [active, setActive] = useState(() => (cache ? '' : props.active ?? ''))
+  const tabs = useRef<HTMLButtonElement[]>([])
 
   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])
 

package/src/index.ts

@@ -32,6 +32,7 @@ export * from './hooks/useTheme'
 // aria-helpers
 
 export * from './aria-helpers/nav-menu.aria'
+export * from './aria-helpers/tabs.aria'
 
 // shared types
 

package/build/legacy/chunk-24B4KIPX.js.map

@@ -1 +0,0 @@
-{"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/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-NWDAYAVH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/TabList.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  description?: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n *  <Tab id=\"overview\">Overview</Tab>\n *  <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n  const { description, ...nativeProps } = props\n  return (\n    <div\n      {...nativeProps}\n      aria-describedby={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          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":[]}

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-24B4KIPX.js.map

@@ -1 +0,0 @@
-{"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-NWDAYAVH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/TabList.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  description?: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n *  <Tab id=\"overview\">Overview</Tab>\n *  <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n  const { description, ...nativeProps } = props\n  return (\n    <div\n      {...nativeProps}\n      aria-describedby={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          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":[]}

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":[]}