@cerberus-design/react 0.8.0 → 0.8.1

package/build/legacy/{_tsup-dts-rollup.d.ts → _tsup-dts-rollup.d.cts}

@@ -11,6 +11,7 @@ import { ButtonVariantProps } from '@cerberus/styled-system/recipes';
 import { CancelDrop } from '@dnd-kit/core';
 import { CarbonIconType } from '@cerberus/icons';
 import { ChangeEvent } from 'react';
+import { CheckboxVariantProps } from '@cerberus/styled-system/recipes';
 import { ClientRect as ClientRect_2 } from '@dnd-kit/core';
 import { closestCenter } from '@dnd-kit/core';
 import { closestCorners } from '@dnd-kit/core';
@@ -53,6 +54,7 @@ import { DroppableContainers } from '@dnd-kit/core';
 import { DroppableMeasuring } from '@dnd-kit/core';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
+import { FileStatusVariantProps } from '@cerberus/styled-system/recipes';
 import { ForwardRefExoticComponent } from 'react';
 import { getClientRect } from '@dnd-kit/core';
 import { getFirstCollision } from '@dnd-kit/core';
@@ -82,6 +84,7 @@ import { MouseSensor } from '@dnd-kit/core';
 import { MouseSensorOptions } from '@dnd-kit/core';
 import { MutableRefObject } from 'react';
 import { NotificationVariantProps } from '@cerberus/styled-system/recipes';
+import type { OptionHTMLAttributes } from 'react';
 import { Over } from '@dnd-kit/core';
 import { PointerActivationConstraint } from '@dnd-kit/core';
 import { PointerEventHandlers } from '@dnd-kit/core';
@@ -90,6 +93,7 @@ import { PointerSensorOptions } from '@dnd-kit/core';
 import { PointerSensorProps } from '@dnd-kit/core';
 import { pointerWithin } from '@dnd-kit/core';
 import type { Pretty } from '@cerberus/styled-system/types';
+import { ProgressBarVariantProps } from '@cerberus/styled-system/recipes';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus/styled-system/recipes';
 import { ReactNode } from 'react';
@@ -100,6 +104,8 @@ import { rectIntersection } from '@dnd-kit/core';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { ScreenReaderInstructions } from '@dnd-kit/core';
+import type { SelectHTMLAttributes } from 'react';
+import { SelectVariantProps } from '@cerberus/styled-system/recipes';
 import { Sensor } from '@dnd-kit/core';
 import { SensorContext } from '@dnd-kit/core';
 import { SensorDescriptor } from '@dnd-kit/core';
@@ -109,6 +115,7 @@ import { SensorOptions } from '@dnd-kit/core';
 import { SensorProps } from '@dnd-kit/core';
 import { SensorResponse } from '@dnd-kit/core';
 import { Sensors } from '@dnd-kit/core';
+import type { SVGProps } from 'react';
 import type { TableHTMLAttributes } from 'react';
 import { TabsVariantProps } from '@cerberus/styled-system/recipes';
 import { tag } from '@cerberus/styled-system/recipes';
@@ -178,6 +185,46 @@ export { ButtonProps as ButtonProps_alias_1 }
 
 export { CancelDrop }
 
+/**
+ * Checkbox component
+ * @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 [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @definition [Checkbox docs](https://cerberus.digitalu.design/react/checkbox)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <Checkbox id="legal" checked={checked.legal} onChange={handleChange} />
+ * </Field>
+ * ```
+ */
+declare function Checkbox(props: CheckboxProps): JSX_2.Element;
+export { Checkbox }
+export { Checkbox as Checkbox_alias_1 }
+
+/**
+ * This module contains substitute icons for the Checkbox component.
+ * @module
+ */
+declare interface CheckboxIconProps extends SVGProps<SVGSVGElement> {
+}
+
+/**
+ * This module contains the Checkbox component.
+ * @module
+ */
+declare type CheckboxProps = CheckboxVariantProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
+    describedBy?: string;
+    id: string;
+    mixed?: boolean;
+};
+export { CheckboxProps }
+export { CheckboxProps as CheckboxProps_alias_1 }
+
+/**
+ * Checkmark icon for Checkbox component
+ */
+export declare function CheckmarkIcon(props: CheckboxIconProps): JSX_2.Element;
+
 declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
     gradient?: never;
     palette?: never;
@@ -272,14 +319,21 @@ export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare interface DefinedIcons {
+    checkbox?: IconType;
+    close?: IconType;
     confirmModal?: IconType;
+    delete?: IconType;
     promptModal?: IconType;
     fileUploader?: IconType;
+    indeterminate?: IconType;
     infoNotification?: IconType;
     successNotification?: IconType;
     warningNotification?: IconType;
     dangerNotification?: IconType;
     invalid: IconType;
+    invalidAlt?: IconType;
+    redo?: IconType;
+    selectArrow?: IconType;
     toggleChecked?: IconType;
 }
 
@@ -448,6 +502,48 @@ declare type FieldMessageRecipe = RecipeVariantProps<typeof fieldMessage>;
 export { FieldMessageRecipe }
 export { FieldMessageRecipe as FieldMessageRecipe_alias_1 }
 
+declare interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    file: string;
+    now: number;
+    status: processStatus;
+    onClick: (status: FileStatusActions, e: MouseEvent_2<HTMLButtonElement>) => void;
+}
+export { FileBaseStatusProps }
+export { FileBaseStatusProps as FileBaseStatusProps_alias_1 }
+
+/**
+ * This component displays the status of a file.
+ * @param props - {
+ *  file: string,
+ *  now: number,
+ *  status: keyof typeof fileStatus,
+ *  action: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
+ * }.
+ * @example
+ * ```tsx
+ * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+ * ```
+ */
+declare function FileStatus(props: FileStatusProps): JSX_2.Element;
+export { FileStatus }
+export { FileStatus as FileStatus_alias_1 }
+
+declare type FileStatusActions = 'cancel' | 'retry' | 'delete';
+export { FileStatusActions }
+export { FileStatusActions as FileStatusActions_alias_1 }
+
+/**
+ * This module contains the FileStatus component.
+ * @module
+ */
+declare type FileStatusKey = (typeof processStatus)[keyof typeof processStatus];
+export { FileStatusKey }
+export { FileStatusKey as FileStatusKey_alias_1 }
+
+declare type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps;
+export { FileStatusProps }
+export { FileStatusProps as FileStatusProps_alias_1 }
+
 declare function FileUploader(props: FileUploaderProps): JSX_2.Element;
 export { FileUploader }
 export { FileUploader as FileUploader_alias_1 }
@@ -505,6 +601,21 @@ export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
 
 export declare type IconType = CarbonIconType | ElementType;
 
+/**
+ * Indeterminate icon for Checkbox component
+ */
+export declare function IndeterminateIcon(props: IndeterminateIconProps): JSX_2.Element;
+
+declare interface IndeterminateIconProps extends SVGProps<SVGSVGElement> {
+}
+
+declare type IndeterminateProgressBarProps = {
+    indeterminate: true;
+    now?: never;
+};
+export { IndeterminateProgressBarProps }
+export { IndeterminateProgressBarProps as IndeterminateProgressBarProps_alias_1 }
+
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
 export { Input as Input_alias_1 }
@@ -664,11 +775,7 @@ declare function ModalIcon(props: PropsWithChildren<ModalIconProps>): JSX_2.Elem
 export { ModalIcon }
 export { ModalIcon as ModalIcon_alias_1 }
 
-declare type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>;
-export { ModalIconBaseProps }
-export { ModalIconBaseProps as ModalIconBaseProps_alias_1 }
-
-declare type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps;
+declare type ModalIconProps = HTMLAttributes<HTMLDivElement> & ModalIconVariantProps;
 export { ModalIconProps }
 export { ModalIconProps as ModalIconProps_alias_1 }
 
@@ -781,6 +888,13 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+declare type NonIndeterminateProgressBarProps = {
+    indeterminate?: never;
+    now: number;
+};
+export { NonIndeterminateProgressBarProps }
+export { NonIndeterminateProgressBarProps as NonIndeterminateProgressBarProps_alias_1 }
+
 /**
  * The info notification component.
  * @param props - The component props.
@@ -884,6 +998,22 @@ declare interface NotifyOptions {
 export { NotifyOptions }
 export { NotifyOptions as NotifyOptions_alias_1 }
 
+/**
+ * Option component
+ * props: OptionHTMLAttributes<HTMLOptionElement>
+ * @example
+ * ```tsx
+ * <Option value="one">Option 1</Option>
+ * ```
+ */
+declare function Option_2(props: OptionProps): JSX_2.Element;
+export { Option_2 as Option }
+export { Option_2 as Option_alias_1 }
+
+declare type OptionProps = OptionHTMLAttributes<HTMLOptionElement>;
+export { OptionProps }
+export { OptionProps as OptionProps_alias_1 }
+
 export { Over }
 
 export { PointerActivationConstraint }
@@ -922,6 +1052,50 @@ declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
 
+/**
+ * A helper object to represent the status of a file.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+declare const enum processStatus {
+    TODO = "todo",
+    PROCESSING = "processing",
+    DONE = "done",
+    ERROR = "error"
+}
+export { processStatus }
+export { processStatus as processStatus_alias_1 }
+
+/**
+ * The ProgressBar component is used to display the progress of a task.
+ * @param props - HTML div element attributes
+ * @param props.now - The current value of the progress bar
+ * @param props.indeterminate - Whether the progress bar is indeterminate
+ * @example
+ * ```tsx
+ * <ProgressBar value={75} />
+ * ```
+ */
+declare function ProgressBar(props: ProgressBarProps): JSX_2.Element;
+export { ProgressBar }
+export { ProgressBar as ProgressBar_alias_1 }
+
+/**
+ * This module contains the ProgressBar component.
+ * @module
+ */
+declare interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {
+}
+export { ProgressBarBaseProps }
+export { ProgressBarBaseProps as ProgressBarBaseProps_alias_1 }
+
+declare type ProgressBarProps = ProgressBarBaseProps & ProgressBarVariantProps & (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps);
+export { ProgressBarProps }
+export { ProgressBarProps as ProgressBarProps_alias_1 }
+
 /**
  * Provides a prompt modal to the app.
  * @example
@@ -989,6 +1163,34 @@ export { rectIntersection }
 
 export { ScreenReaderInstructions }
 
+/**
+ * Select component
+ * props: SelectHTMLAttributes<HTMLSelectElement> & SelectVariantProps & { describedBy?: string }
+ * @example
+ * ```tsx
+ * <Select describedby="help:fruit" id="fruit">
+ *  <Option value="">Choose option</Option>
+ *  <Option value="one">Option 1</Option>
+ *  <Option value="two">Option 2</Option>
+ *  <Option value="three">Option 3</Option>
+ * </Select>
+ * ```
+ */
+declare function Select(props: SelectProps): JSX_2.Element;
+export { Select }
+export { Select as Select_alias_1 }
+
+/**
+ * This module contains the select components.
+ * @module
+ */
+declare type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & SelectVariantProps & {
+    id: string;
+    describedBy?: string;
+};
+export { SelectProps }
+export { SelectProps as SelectProps_alias_1 }
+
 export { Sensor }
 
 export { SensorContext }

package/build/legacy/aria-helpers/nav-menu.aria.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/aria-helpers/nav-menu.aria.ts
+var nav_menu_aria_exports = {};
+__export(nav_menu_aria_exports, {
+  createNavTriggerProps: () => createNavTriggerProps
+});
+module.exports = __toCommonJS(nav_menu_aria_exports);
+function createNavTriggerProps(values) {
+  return {
+    ["aria-controls"]: values.controls,
+    ["aria-expanded"]: values.expanded ?? false
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createNavTriggerProps
+});
+//# sourceMappingURL=nav-menu.aria.cjs.map

package/build/legacy/aria-helpers/nav-menu.aria.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/aria-helpers/nav-menu.aria.ts"],"sourcesContent":["export interface NavTriggerAriaValues {\n  controls: string\n  expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n  ['aria-controls']: string\n  ['aria-expanded']: boolean\n}\n\nexport function createNavTriggerProps(\n  values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n  return {\n    ['aria-controls']: values.controls,\n    ['aria-expanded']: values.expanded ?? false,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;","names":[]}

package/build/legacy/aria-helpers/tabs.aria.cjs

@@ -0,0 +1,100 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/aria-helpers/tabs.aria.ts
+var tabs_aria_exports = {};
+__export(tabs_aria_exports, {
+  useTabsKeyboardNavigation: () => useTabsKeyboardNavigation
+});
+module.exports = __toCommonJS(tabs_aria_exports);
+var import_react2 = require("react");
+
+// src/context/tabs.tsx
+var import_recipes = require("@cerberus/styled-system/recipes");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TabsContext = (0, import_react.createContext)(null);
+function useTabsContext() {
+  const context = (0, import_react.useContext)(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a Tabs Provider.");
+  }
+  return context;
+}
+
+// src/aria-helpers/tabs.aria.ts
+function getNextIndex(index, length) {
+  return index === length - 1 ? 0 : index + 1;
+}
+function getPrevIndex(index, length) {
+  return index === 0 ? length - 1 : index - 1;
+}
+function useTabsKeyboardNavigation() {
+  const { tabs: tabs2 } = useTabsContext();
+  const [activeTab, setActiveTab] = (0, import_react2.useState)(-1);
+  (0, import_react2.useEffect)(() => {
+    const handleKeyDown = (event) => {
+      const index = activeTab === -1 ? tabs2.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
+      const nextIndex = getNextIndex(index, tabs2.current.length);
+      const prevIndex = getPrevIndex(index, tabs2.current.length);
+      if (index === -1) return;
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          setActiveTab(prevIndex);
+          tabs2.current[prevIndex].focus();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          setActiveTab(nextIndex);
+          tabs2.current[nextIndex].focus();
+          break;
+        case "Home":
+          event.preventDefault();
+          setActiveTab(0);
+          tabs2.current[0].focus();
+          break;
+        case "End":
+          event.preventDefault();
+          setActiveTab(tabs2.current.length - 1);
+          tabs2.current[tabs2.current.length - 1].focus();
+          break;
+        default:
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [activeTab, tabs2.current]);
+  return {
+    ref: (tab) => {
+      if (tab && !tabs2.current.includes(tab)) {
+        tabs2.current.push(tab);
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTabsKeyboardNavigation
+});
+//# sourceMappingURL=tabs.aria.cjs.map

package/build/legacy/aria-helpers/tabs.aria.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/aria-helpers/tabs.aria.ts","../../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n  return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n  return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n  const { tabs } = useTabsContext()\n  const [activeTab, setActiveTab] = useState(-1)\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const index =\n        activeTab === -1\n          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n          : activeTab\n      const nextIndex = getNextIndex(index, tabs.current.length)\n      const prevIndex = getPrevIndex(index, tabs.current.length)\n\n      // If the active tab is not found, do nothing\n      if (index === -1) return\n\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault()\n          setActiveTab(prevIndex)\n          tabs.current[prevIndex].focus()\n          break\n        case 'ArrowRight':\n          event.preventDefault()\n          setActiveTab(nextIndex)\n          tabs.current[nextIndex].focus()\n          break\n        case 'Home':\n          event.preventDefault()\n          setActiveTab(0)\n          tabs.current[0].focus()\n          break\n        case 'End':\n          event.preventDefault()\n          setActiveTab(tabs.current.length - 1)\n          tabs.current[tabs.current.length - 1].focus()\n          break\n        default:\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [activeTab, tabs.current])\n\n  return {\n    ref: (tab: HTMLButtonElement) => {\n      if (tab && !tabs.current.includes(tab)) {\n        tabs.current.push(tab)\n      }\n    },\n  }\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module\n */\n\nexport interface TabsContextValue {\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  id: string\n  active: string\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  id?: string\n  active?: string\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @param id - the id of the tabs component,\n * @param active - the default active tab id,\n * @param cache - whether to cache the active tab state in local storage\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabList description=\"Button details\">\n *    <Tab id=\"overview\">Overview</Tab>\n *    <Tab id=\"guidelines\">Guidelines</Tab>\n *  </TabList>\n *  <TabPanels>\n *    <TabPanel id=\"overview\">Overview content</TabPanel>\n *    <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n *  </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\n  )\n\n  // Get the active tab from local storage\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem(uuid)\n      setActiveTab(\n        cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n      )\n    }\n  }, [cache, active, uuid])\n\n  // Update the active tab in local storage\n  useEffect(() => {\n    if (cache && activeTab) {\n      window.localStorage.setItem(uuid, activeTab)\n    }\n  }, [activeTab, 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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAAoC;;;ACApC,qBAA4C;AAE5C,mBASO;AAiFH;AAlEG,IAAM,kBAAc,4BAAuC,IAAI;AAsE/D,SAAS,iBAAmC;AACjD,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;ADnGA,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,SAAS,IAAI,IAAI,QAAQ;AAC5C;AAEA,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC5C;AAEO,SAAS,4BAA4B;AAC1C,QAAM,EAAE,MAAAC,MAAK,IAAI,eAAe;AAChC,QAAM,CAAC,WAAW,YAAY,QAAI,wBAAS,EAAE;AAE7C,+BAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,YAAM,QACJ,cAAc,KACVA,MAAK,QAAQ,UAAU,CAAC,QAAQ,IAAI,iBAAiB,MAAM,IAC3D;AACN,YAAM,YAAY,aAAa,OAAOA,MAAK,QAAQ,MAAM;AACzD,YAAM,YAAY,aAAa,OAAOA,MAAK,QAAQ,MAAM;AAGzD,UAAI,UAAU,GAAI;AAElB,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,UAAAA,MAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,UAAAA,MAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,CAAC;AACd,UAAAA,MAAK,QAAQ,CAAC,EAAE,MAAM;AACtB;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAaA,MAAK,QAAQ,SAAS,CAAC;AACpC,UAAAA,MAAK,QAAQA,MAAK,QAAQ,SAAS,CAAC,EAAE,MAAM;AAC5C;AAAA,QACF;AACE;AAAA,MACJ;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAElD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,WAAWA,MAAK,OAAO,CAAC;AAE5B,SAAO;AAAA,IACL,KAAK,CAAC,QAA2B;AAC/B,UAAI,OAAO,CAACA,MAAK,QAAQ,SAAS,GAAG,GAAG;AACtC,QAAAA,MAAK,QAAQ,KAAK,GAAG;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react","tabs"]}

package/build/legacy/aria-helpers/trap-focus.aria.cjs

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/aria-helpers/trap-focus.aria.ts
+var trap_focus_aria_exports = {};
+__export(trap_focus_aria_exports, {
+  trapFocus: () => trapFocus
+});
+module.exports = __toCommonJS(trap_focus_aria_exports);
+function trapFocus(modalRef) {
+  var _a;
+  const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+  const focusable = Array.from(
+    ((_a = modalRef.current) == null ? void 0 : _a.querySelectorAll(focusableElements)) ?? []
+  );
+  const firstFocusable = focusable[0];
+  const lastFocusable = focusable[focusable.length - 1];
+  return function handleKeyDown(event) {
+    if (event.key === "Tab") {
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          lastFocusable.focus();
+          event.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          firstFocusable.focus();
+          event.preventDefault();
+        }
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  trapFocus
+});
+//# sourceMappingURL=trap-focus.aria.cjs.map

package/build/legacy/aria-helpers/trap-focus.aria.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,UACd,UACyC;AAJ3C;AAKE,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,MACtB,cAAS,YAAT,mBAAkB,iBAAiB,uBAAsB,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/build/legacy/components/Button.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Button.tsx
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(Button_exports);
+var import_css = require("@cerberus/styled-system/css");
+var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(props) {
+  const { palette, usage, shape, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      className: (0, import_css.cx)(
+        nativeProps.className,
+        (0, import_recipes.button)({
+          palette,
+          usage,
+          shape
+        })
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});
+//# sourceMappingURL=Button.cjs.map

package/build/legacy/components/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAmB;AACnB,qBAGO;AAiBH;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}