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

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,10 @@
+"use client";
+import {
+  Tab
+} from "../chunk-LAUJGQO2.js";
+import "../chunk-57HOQM4E.js";
+import "../chunk-HQK7SM56.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-ODSSU3JD.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-RCE2XXL7.js";
+import "../chunk-R4H3352X.js";
+import "../chunk-HQK7SM56.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,5 @@
+export { Tabs_alias_1 as Tabs } from '../_tsup-dts-rollup';
+export { useTabsContext_alias_1 as useTabsContext } from '../_tsup-dts-rollup';
+export { TabsContextValue_alias_1 as TabsContextValue } from '../_tsup-dts-rollup';
+export { TabsContext_alias_1 as TabsContext } from '../_tsup-dts-rollup';
+export { TabsProps_alias_1 as TabsProps } from '../_tsup-dts-rollup';

package/build/modern/context/tabs.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  Tabs,
+  TabsContext,
+  useTabsContext
+} from "../chunk-HQK7SM56.js";
+export {
+  Tabs,
+  TabsContext,
+  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,11 @@ 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 { TabsContext } 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';
@@ -37,4 +48,5 @@ export { MODE_KEY } from './_tsup-dts-rollup';
 export { useTheme } from './_tsup-dts-rollup';
 export { createNavTriggerProps } from './_tsup-dts-rollup';
 export { NavTriggerAriaValues } from './_tsup-dts-rollup';
+export { useTabsKeyboardNavigation } from './_tsup-dts-rollup';
 export { Positions } from './_tsup-dts-rollup';

package/build/modern/index.js

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

package/package.json

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

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

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

package/src/components/Tab.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+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.
+ * @module
+ */
+
+export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  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 { value, ...nativeProps } = props
+  const { active, onTabUpdate } = useTabsContext()
+  const { ref } = useTabsKeyboardNavigation()
+  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={`panel:${value}`}
+      aria-selected={isActive}
+      id={value}
+      className={cx(nativeProps.className, btnStyles)}
+      onClick={handleClick}
+      role="tab"
+      ref={ref}
+      value={value}
+    />
+  )
+}
+
+const btnStyles = css({
+  alignItems: 'center',
+  display: 'inline-flex',
+  borderTopLeftRadius: 'md',
+  borderTopRightRadius: 'md',
+  fontSize: 'sm',
+  fontWeight: '600',
+  gap: '2',
+  h: '2.75rem',
+  justifyContent: 'center',
+  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,55 @@
+'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> {
+  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()
+  const isActive = useMemo(() => active === tab, [active, tab])
+
+  return (
+    <Show when={isActive}>
+      <div
+        {...nativeProps}
+        {...(isActive && { tabIndex: 0 })}
+        aria-labelledby={tab}
+        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

@@ -0,0 +1,88 @@
+'use client'
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MutableRefObject,
+  type PropsWithChildren,
+} from 'react'
+
+/**
+ * This module provides a Tabs component and a hook to access its context.
+ * @module
+ */
+
+export interface TabsContextValue {
+  active: string
+  tabs: MutableRefObject<HTMLButtonElement[]>
+  onTabUpdate: (active: string) => void
+}
+
+export const TabsContext = createContext<TabsContextValue | null>(null)
+
+export interface TabsProps {
+  active?: string
+  cache?: boolean
+}
+
+/**
+ * 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 in local storage
+ * @example
+ * ```tsx
+ * <Tabs cache>
+ *  <TabList description="Button details">
+ *    <Tab id="overview">Overview</Tab>
+ *    <Tab id="guidelines">Guidelines</Tab>
+ *  </TabList>
+ *  <TabPanels>
+ *    <TabPanel id="overview">Overview content</TabPanel>
+ *    <TabPanel id="guidelines">Guidelines content</TabPanel>
+ *  </TabPanels>
+ * </Tabs>
+ * ```
+ */
+export function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element {
+  const { cache } = props
+  const [active, setActive] = useState(() => (cache ? '' : props.active ?? ''))
+  const tabs = useRef<HTMLButtonElement[]>([])
+
+  const value = useMemo(
+    () => ({
+      active,
+      tabs,
+      onTabUpdate: setActive,
+    }),
+    [active, setActive],
+  )
+
+  useEffect(() => {
+    const cachedTab = window.localStorage.getItem('cerberus-tabs')
+    if (cache && cachedTab) {
+      setActive(cachedTab)
+    }
+  }, [cache])
+
+  useEffect(() => {
+    if (cache) {
+      window.localStorage.setItem('cerberus-tabs', active)
+    }
+  }, [active, cache])
+
+  return (
+    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>
+  )
+}
+
+export function useTabsContext(): TabsContextValue {
+  const context = useContext(TabsContext)
+  if (!context) {
+    throw new Error('useTabsContext must be used within a Tabs Provider.')
+  }
+  return context
+}

package/src/index.ts

@@ -13,12 +13,16 @@ export * from './components/Label'
 export * from './components/NavMenuTrigger'
 export * from './components/NavMenuList'
 export * from './components/NavMenuLink'
+export * from './components/Tab'
+export * from './components/TabList'
+export * from './components/TabPanel'
 export * from './components/Show'
 
 // context
 
 export * from './context/field'
 export * from './context/navMenu'
+export * from './context/tabs'
 export * from './context/theme'
 
 // hooks
@@ -28,6 +32,7 @@ export * from './hooks/useTheme'
 // aria-helpers
 
 export * from './aria-helpers/nav-menu.aria'
+export * from './aria-helpers/tabs.aria'
 
 // shared types