@cerberus-design/react 0.1.1 → 0.1.2-next-606dce0

package/build/legacy/index.js

@@ -1,14 +1,58 @@
-// src/index.ts
-export * from "./components/Button.js";
-export * from "./components/IconButton.js";
-export * from "./components/NavMenuTrigger.js";
-export * from "./components/NavMenuList.js";
-export * from "./components/NavMenuLink.js";
-export * from "./components/Show.js";
-export * from "./context/field.js";
-export * from "./context/navMenu.js";
-export * from "./context/theme.js";
-export * from "./hooks/useTheme.js";
-export * from "./aria-helpers/nav-menu.aria.js";
-export * from "./types.js";
+import {
+  NavMenuTrigger
+} from "./chunk-6YEAMVRY.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-KETL4ZJK.js";
+import "./chunk-55J6XMHW.js";
+import {
+  createNavTriggerProps
+} from "./chunk-JF76VIL3.js";
+import {
+  MODE_KEY,
+  THEME_KEY,
+  ThemeProvider,
+  useTheme,
+  useThemeContext
+} from "./chunk-SXXWC6UD.js";
+import {
+  Button
+} from "./chunk-XFWARXLU.js";
+import {
+  IconButton
+} from "./chunk-BPIYUAYS.js";
+import {
+  NavMenuLink
+} from "./chunk-JA4IX7GN.js";
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-WSQTX34C.js";
+import {
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+export {
+  Button,
+  Field,
+  IconButton,
+  MODE_KEY,
+  NavMenu,
+  NavMenuLink,
+  NavMenuList,
+  NavMenuTrigger,
+  Show,
+  THEME_KEY,
+  ThemeProvider,
+  createNavTriggerProps,
+  getPosition,
+  useFieldContext,
+  useNavMenuContext,
+  useTheme,
+  useThemeContext
+};
 //# sourceMappingURL=index.js.map

package/build/legacy/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Button'\nexport * from './components/IconButton'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\n\n// shared types\n\nexport * from './types'\n"],"mappings":";AAOA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAId,cAAc;AAId,cAAc;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/types.js

@@ -1 +1,2 @@
+import "./chunk-55J6XMHW.js";
 //# sourceMappingURL=types.js.map

package/build/modern/aria-helpers/nav-menu.aria.js

@@ -1,10 +1,6 @@
-// src/aria-helpers/nav-menu.aria.ts
-function createNavTriggerProps(values) {
-  return {
-    ["aria-controls"]: values.controls,
-    ["aria-expanded"]: values.expanded ?? false
-  };
-}
+import {
+  createNavTriggerProps
+} from "../chunk-JF76VIL3.js";
 export {
   createNavTriggerProps
 };

package/build/modern/aria-helpers/nav-menu.aria.js.map

@@ -1 +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":";AAUO,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/chunk-55J6XMHW.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-55J6XMHW.js.map

package/build/modern/chunk-6YEAMVRY.js

@@ -0,0 +1,82 @@
+import {
+  createNavTriggerProps
+} from "./chunk-JF76VIL3.js";
+import {
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+
+// src/components/NavMenuTrigger.tsx
+import {
+  useCallback
+} from "react";
+import { cx } from "@cerberus/styled-system/css";
+import { button } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function NavMenuTrigger(props) {
+  const {
+    as,
+    palette,
+    usage,
+    shape,
+    controls,
+    expanded: propsExpanded,
+    onClick,
+    ...nativeProps
+  } = props;
+  const { triggerRef, onToggle, expanded } = useNavMenuContext();
+  const ariaProps = createNavTriggerProps({
+    controls,
+    expanded: propsExpanded ?? expanded
+  });
+  const hasAs = Boolean(as);
+  const AsSub = as;
+  const handleClick = useCallback(
+    (e) => {
+      if (onClick)
+        return onClick(e);
+      onToggle();
+    },
+    [onClick, onToggle]
+  );
+  return /* @__PURE__ */ jsx(
+    Show,
+    {
+      when: hasAs,
+      fallback: /* @__PURE__ */ jsx(
+        "button",
+        {
+          ...nativeProps,
+          ...ariaProps,
+          className: cx(
+            nativeProps.className,
+            button({
+              palette,
+              usage,
+              shape
+            })
+          ),
+          onClick: handleClick,
+          ref: triggerRef,
+          children: props.children
+        }
+      ),
+      children: hasAs && /* @__PURE__ */ jsx(
+        AsSub,
+        {
+          ...nativeProps,
+          ...ariaProps,
+          onClick: handleClick,
+          ref: triggerRef
+        }
+      )
+    }
+  );
+}
+
+export {
+  NavMenuTrigger
+};
+//# sourceMappingURL=chunk-6YEAMVRY.js.map

package/build/modern/chunk-6YEAMVRY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type MouseEvent,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\nimport {\n  createNavTriggerProps,\n  type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { ButtonProps } from './Button'\nimport { Show } from './Show'\n\nexport interface NavMenuTriggerProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonProps,\n    NavTriggerAriaValues {\n  as?: ElementType\n}\n\n/**\n * A component that allows the user to trigger a navigation menu.\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n * @example\n * ```tsx\n * <NavMenu>\n *   <NavMenuTrigger controls=\"nav-menu-list\">\n *     Menu\n *   </NavMenuTrigger>\n * </NavMenu>\n * ```\n */\nexport function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {\n  const {\n    as,\n    palette,\n    usage,\n    shape,\n    controls,\n    expanded: propsExpanded,\n    onClick,\n    ...nativeProps\n  } = props\n  const { triggerRef, onToggle, expanded } = useNavMenuContext()\n  const ariaProps = createNavTriggerProps({\n    controls,\n    expanded: propsExpanded ?? expanded,\n  })\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      if (onClick) return onClick(e)\n      onToggle()\n    },\n    [onClick, onToggle],\n  )\n\n  return (\n    <Show\n      when={hasAs}\n      fallback={\n        <button\n          {...nativeProps}\n          {...ariaProps}\n          className={cx(\n            nativeProps.className,\n            button({\n              palette,\n              usage,\n              shape,\n            }),\n          )}\n          onClick={handleClick}\n          ref={triggerRef}\n        >\n          {props.children}\n        </button>\n      }\n    >\n      {hasAs && (\n        <AsSub\n          {...nativeProps}\n          {...ariaProps}\n          onClick={handleClick}\n          ref={triggerRef}\n        />\n      )}\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AA2Df;AA/BD,SAAS,eAAe,OAAyC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,YAAY,UAAU,SAAS,IAAI,kBAAkB;AAC7D,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC7B,CAAC;AACD,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI;AAAS,eAAO,QAAQ,CAAC;AAC7B,eAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,KAAK;AAAA,UAEJ,gBAAM;AAAA;AAAA,MACT;AAAA,MAGD,mBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/build/modern/chunk-BPIYUAYS.js

@@ -0,0 +1,26 @@
+// src/components/IconButton.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { iconButton } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function IconButton(props) {
+  const { ariaLabel, palette, usage, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...nativeProps,
+      "aria-label": ariaLabel ?? "Icon Button",
+      className: cx(
+        nativeProps.className,
+        iconButton({
+          palette,
+          usage
+        })
+      )
+    }
+  );
+}
+
+export {
+  IconButton
+};
+//# sourceMappingURL=chunk-BPIYUAYS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: IconButtonUsage\n  shape?: 'circle'\n}\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAwBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-JA4IX7GN.js

@@ -0,0 +1,48 @@
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+
+// src/components/NavMenuLink.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function NavMenuLink(props) {
+  const { as, ...nativeProps } = props;
+  const hasAs = Boolean(as);
+  const AsSub = as;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: css({
+        w: "full"
+      }),
+      children: /* @__PURE__ */ jsx(
+        Show,
+        {
+          when: hasAs,
+          fallback: /* @__PURE__ */ jsx(
+            "a",
+            {
+              ...nativeProps,
+              className: cx(
+                nativeProps.className,
+                css({
+                  color: "action.navigation.initial",
+                  textStyle: "link",
+                  _hover: {
+                    color: "action.navigation.hover"
+                  }
+                })
+              )
+            }
+          ),
+          children: hasAs && /* @__PURE__ */ jsx(AsSub, { ...nativeProps })
+        }
+      )
+    }
+  );
+}
+
+export {
+  NavMenuLink
+};
+//# sourceMappingURL=chunk-JA4IX7GN.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\nexport interface NavMenuLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  as?: ElementType\n}\n\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n  const { as, ...nativeProps } = props\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  return (\n    <li\n      className={css({\n        w: 'full',\n      })}\n    >\n      <Show\n        when={hasAs}\n        fallback={\n          <a\n            {...nativeProps}\n            className={cx(\n              nativeProps.className,\n              css({\n                color: 'action.navigation.initial',\n                textStyle: 'link',\n                _hover: {\n                  color: 'action.navigation.hover',\n                },\n              }),\n            )}\n          />\n        }\n      >\n        {hasAs && <AsSub {...nativeProps} />}\n      </Show>\n    </li>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,KAAK,UAAU;AAsBd;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,oBAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-JF76VIL3.js

@@ -0,0 +1,12 @@
+// src/aria-helpers/nav-menu.aria.ts
+function createNavTriggerProps(values) {
+  return {
+    ["aria-controls"]: values.controls,
+    ["aria-expanded"]: values.expanded ?? false
+  };
+}
+
+export {
+  createNavTriggerProps
+};
+//# sourceMappingURL=chunk-JF76VIL3.js.map

package/build/modern/chunk-JF76VIL3.js.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":";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/modern/chunk-KETL4ZJK.js

@@ -0,0 +1,33 @@
+// src/context/field.tsx
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var FieldContext = createContext(null);
+function Field(props) {
+  const value = useMemo(
+    () => ({
+      disabled: props.disabled,
+      readonly: props.readonly,
+      required: props.required,
+      invalid: props.invalid
+    }),
+    [props.disabled, props.readonly, props.required, props.invalid]
+  );
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: props.children });
+}
+function useFieldContext() {
+  const context = useContext(FieldContext);
+  if (!context) {
+    throw new Error("useFieldContext must be used within a Field Provider.");
+  }
+  return context;
+}
+
+export {
+  Field,
+  useFieldContext
+};
+//# sourceMappingURL=chunk-KETL4ZJK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\nexport interface FieldContextValue {\n  disabled?: boolean\n  readonly?: boolean\n  required?: boolean\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readonly: props.readonly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readonly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAyBH;AAhBJ,IAAM,eAAe,cAAwC,IAAI;AAE1D,SAAS,MACd,OACa;AACb,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,SAAS,MAAM;AAAA,IACjB;AAAA,IACA,CAAC,MAAM,UAAU,MAAM,UAAU,MAAM,UAAU,MAAM,OAAO;AAAA,EAChE;AAEA,SACE,oBAAC,aAAa,UAAb,EAAsB,OACpB,gBAAM,UACT;AAEJ;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-KJUCHZHV.js

@@ -0,0 +1,51 @@
+// src/context/navMenu.tsx
+import { css } from "@cerberus/styled-system/css";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var NavMenuContext = createContext(null);
+function NavMenu(props) {
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const [expanded, setExpanded] = useState(false);
+  const handleToggle = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+  const value = useMemo(
+    () => ({
+      triggerRef,
+      menuRef,
+      expanded,
+      onToggle: handleToggle
+    }),
+    [expanded, handleToggle]
+  );
+  return /* @__PURE__ */ jsx(NavMenuContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: css({
+        position: "relative"
+      }),
+      children: props.children
+    }
+  ) });
+}
+function useNavMenuContext() {
+  const context = useContext(NavMenuContext);
+  if (!context) {
+    throw new Error("useNavMenuContext must be used within a NavMenu.");
+  }
+  return context;
+}
+
+export {
+  NavMenu,
+  useNavMenuContext
+};
+//# sourceMappingURL=chunk-KJUCHZHV.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n  triggerRef: NavTriggerRef | null\n  menuRef: NavMenuRef | null\n  expanded: boolean\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLUListElement>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n"],"mappings":";AAEA,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAmCD;AAvBN,IAAM,iBAAiB,cAA0C,IAAI;AAE9D,SAAS,QAAQ,OAAuC;AAC7D,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,UAAU,OAAyB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,eAAe,YAAY,MAAM;AACrC,gBAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OACvB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAEO,SAAS,oBAAyC;AACvD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-R4H3352X.js

@@ -0,0 +1,16 @@
+// src/components/Show.tsx
+import { useMemo } from "react";
+function Show(props) {
+  const { when, children, fallback } = props;
+  const condition = useMemo(() => when ?? false, [when]);
+  return useMemo(() => {
+    if (condition)
+      return children;
+    return fallback ?? null;
+  }, [condition, children, fallback]);
+}
+
+export {
+  Show
+};
+//# sourceMappingURL=chunk-R4H3352X.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";AAEA,SAAS,eAAuD;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,YAAY,QAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,SAAO,QAAQ,MAAM;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}

package/build/modern/chunk-SXXWC6UD.js

@@ -0,0 +1,83 @@
+// src/hooks/useTheme.ts
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState
+} from "react";
+
+// src/context/theme.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var THEME_KEY = "cerberus-theme";
+var MODE_KEY = "cerberus-mode";
+var ThemeContext = createContext(
+  null
+);
+function ThemeProvider(props) {
+  const state = useTheme();
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: state, children: props.children });
+}
+function useThemeContext() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/hooks/useTheme.ts
+function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
+  const [theme, setTheme] = useState(defaultTheme);
+  const [colorMode, setColorMode] = useState(defaultColorMode);
+  const handleThemeChange = useCallback((newTheme) => {
+    setTheme(newTheme);
+    localStorage.setItem(THEME_KEY, newTheme);
+  }, []);
+  const handleColorModeChange = useCallback(() => {
+    setColorMode((prev) => {
+      const newMode = prev === "light" ? "dark" : "light";
+      localStorage.setItem(MODE_KEY, newMode);
+      return newMode;
+    });
+  }, []);
+  useLayoutEffect(() => {
+    const theme2 = localStorage.getItem(THEME_KEY);
+    if (theme2) {
+      setTheme(theme2);
+    }
+  }, []);
+  useLayoutEffect(() => {
+    const mode = localStorage.getItem(MODE_KEY);
+    if (mode) {
+      setColorMode(mode);
+    }
+  }, []);
+  useEffect(() => {
+    const root = document.documentElement;
+    root.dataset.theme = theme;
+  }, [theme]);
+  useEffect(() => {
+    const root = document.documentElement;
+    root.dataset.colorMode = colorMode;
+  }, [colorMode]);
+  return useMemo(
+    () => ({
+      theme,
+      mode: colorMode,
+      updateTheme: handleThemeChange,
+      updateMode: handleColorModeChange
+    }),
+    [theme, colorMode, handleThemeChange, handleColorModeChange]
+  );
+}
+
+export {
+  useTheme,
+  THEME_KEY,
+  MODE_KEY,
+  ThemeProvider,
+  useThemeContext
+};
+//# sourceMappingURL=chunk-SXXWC6UD.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useTheme.ts","../../src/context/theme.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  MODE_KEY,\n  THEME_KEY,\n  type ColorModes,\n  type CustomThemes,\n  type DefaultThemes,\n  type ThemeContextValue,\n} from '../context/theme'\n\nexport function useTheme<C extends string = DefaultThemes>(\n  defaultTheme: CustomThemes<C> = 'cerberus',\n  defaultColorMode: ColorModes = 'light',\n): ThemeContextValue<C> {\n  const [theme, setTheme] = useState<CustomThemes<C>>(defaultTheme)\n  const [colorMode, setColorMode] = useState<ColorModes>(defaultColorMode)\n\n  const handleThemeChange = useCallback((newTheme: CustomThemes<C>) => {\n    setTheme(newTheme)\n    localStorage.setItem(THEME_KEY, newTheme)\n  }, [])\n\n  const handleColorModeChange = useCallback(() => {\n    setColorMode((prev) => {\n      const newMode = prev === 'light' ? 'dark' : 'light'\n      localStorage.setItem(MODE_KEY, newMode)\n      return newMode\n    })\n  }, [])\n\n  useLayoutEffect(() => {\n    const theme = localStorage.getItem(THEME_KEY)\n    if (theme) {\n      setTheme(theme as CustomThemes<C>)\n    }\n  }, [])\n\n  useLayoutEffect(() => {\n    const mode = localStorage.getItem(MODE_KEY)\n    if (mode) {\n      setColorMode(mode as ColorModes)\n    }\n  }, [])\n\n  useEffect(() => {\n    const root = document.documentElement\n    root.dataset.theme = theme\n  }, [theme])\n\n  useEffect(() => {\n    const root = document.documentElement\n    root.dataset.colorMode = colorMode\n  }, [colorMode])\n\n  return useMemo(\n    () => ({\n      theme,\n      mode: colorMode,\n      updateTheme: handleThemeChange,\n      updateMode: handleColorModeChange,\n    }),\n    [theme, colorMode, handleThemeChange, handleColorModeChange],\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport { useTheme } from '../hooks/useTheme'\n\nexport type DefaultThemes = 'cerberus'\nexport type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K\nexport type ColorModes = 'light' | 'dark'\n\nexport interface ThemeContextValue<T extends string = DefaultThemes> {\n  theme: CustomThemes<T>\n  mode: ColorModes\n  updateTheme: (theme: T) => void\n  updateMode: () => void\n}\n\nexport const THEME_KEY = 'cerberus-theme'\nexport const MODE_KEY = 'cerberus-mode'\n\nconst ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(\n  null,\n)\n\n/**\n * A context provider that allows the user to set the theme and mode of the application.\n * @example\n * ```tsx\n * <ThemeProvider>\n *  <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element {\n  const state = useTheme()\n  return (\n    <ThemeContext.Provider value={state}>\n      {props.children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useThemeContext(): ThemeContextValue<DefaultThemes> {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACNP,SAAS,eAAe,kBAA0C;AAiC9D;AAnBG,IAAM,YAAY;AAClB,IAAM,WAAW;AAExB,IAAM,eAAe;AAAA,EACnB;AACF;AAWO,SAAS,cAAc,OAAgD;AAC5E,QAAM,QAAQ,SAAS;AACvB,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAC3B,gBAAM,UACT;AAEJ;AAEO,SAAS,kBAAoD;AAClE,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;AD7BO,SAAS,SACd,eAAgC,YAChC,mBAA+B,SACT;AACtB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA0B,YAAY;AAChE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAqB,gBAAgB;AAEvE,QAAM,oBAAoB,YAAY,CAAC,aAA8B;AACnE,aAAS,QAAQ;AACjB,iBAAa,QAAQ,WAAW,QAAQ;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAwB,YAAY,MAAM;AAC9C,iBAAa,CAAC,SAAS;AACrB,YAAM,UAAU,SAAS,UAAU,SAAS;AAC5C,mBAAa,QAAQ,UAAU,OAAO;AACtC,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AACpB,UAAMA,SAAQ,aAAa,QAAQ,SAAS;AAC5C,QAAIA,QAAO;AACT,eAASA,MAAwB;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AACpB,UAAM,OAAO,aAAa,QAAQ,QAAQ;AAC1C,QAAI,MAAM;AACR,mBAAa,IAAkB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,QAAQ;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,YAAY;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd;AAAA,IACA,CAAC,OAAO,WAAW,mBAAmB,qBAAqB;AAAA,EAC7D;AACF;","names":["theme"]}

package/build/modern/chunk-WSQTX34C.js

@@ -0,0 +1,86 @@
+import {
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+
+// src/components/NavMenuList.tsx
+import { useMemo } from "react";
+import { cx } from "@cerberus/styled-system/css";
+import { vstack } from "@cerberus/styled-system/patterns";
+import { jsx } from "react/jsx-runtime";
+function getPosition(position) {
+  const defaultPositions = {
+    left: "auto",
+    right: "auto",
+    top: "auto",
+    bottom: "auto"
+  };
+  switch (position) {
+    case "right":
+      return { ...defaultPositions, top: "0%", left: "105%" };
+    case "left":
+      return { ...defaultPositions, top: "0%", right: "105%" };
+    case "bottom":
+      return { ...defaultPositions, top: "110%" };
+    case "top":
+      return { ...defaultPositions, bottom: "110%" };
+    default:
+      return defaultPositions;
+  }
+}
+var navListStyles = vstack({
+  alignItems: "flex-start",
+  bgColor: "neutral.surface.100",
+  boxShadow: "lg",
+  gap: "2",
+  opacity: "0",
+  p: "4",
+  position: "absolute",
+  rounded: "md",
+  zIndex: "dropdown",
+  _motionSafe: {
+    animationName: "zoomIn",
+    animationDelay: "100ms",
+    animationDuration: "150ms",
+    animationFillMode: "both",
+    animationTimingFunction: "ease-in-out"
+  },
+  _positionBottom: {
+    transformOrigin: "top left"
+  },
+  _positionTop: {
+    transformOrigin: "bottom left"
+  },
+  _positionLeft: {
+    transformOrigin: "top right"
+  },
+  _positionRight: {
+    transformOrigin: "top left"
+  }
+});
+function NavMenuList(props) {
+  const { position, ...nativeProps } = props;
+  const { menuRef, expanded } = useNavMenuContext();
+  const locationStyles = useMemo(
+    () => getPosition(position ?? "bottom"),
+    [position]
+  );
+  return /* @__PURE__ */ jsx(Show, { when: expanded, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...nativeProps,
+      "data-position": position ?? "bottom",
+      className: cx(nativeProps.className, navListStyles),
+      ref: menuRef,
+      style: locationStyles
+    }
+  ) });
+}
+
+export {
+  getPosition,
+  NavMenuList
+};
+//# sourceMappingURL=chunk-WSQTX34C.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\ninterface GetPositionResult {\n  left: string\n  right: string\n  top: string\n  bottom: string\n}\n\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'neutral.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  id: string\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n *\n * @example\n * ```tsx\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *  <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB;AAhFC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AAoBM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/build/modern/chunk-XFWARXLU.js

@@ -0,0 +1,26 @@
+// src/components/Button.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { button } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function Button(props) {
+  const { palette, usage, shape, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        button({
+          palette,
+          usage,
+          shape
+        })
+      )
+    }
+  );
+}
+
+export {
+  Button
+};
+//# sourceMappingURL=chunk-XFWARXLU.js.map

package/build/modern/chunk-XFWARXLU.js.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 { button } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  palette?: 'action' | 'danger'\n  usage?: 'filled' | 'outline' | 'text'\n  shape?: 'sharp' | 'rounded'\n}\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":";AACA,SAAS,UAAU;AACnB,SAAS,cAAc;AAoBnB;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}