@cerberus-design/react 0.1.0 → 0.1.1-next-3a4c6c1

package/build/modern/components/NavMenuLink.js

@@ -1,43 +1,7 @@
-// src/components/NavMenuLink.tsx
-import { Show } from "./Show.js";
-import { css, cx } from "@cerberus/styled-system/css.js";
-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 })
-        }
-      )
-    }
-  );
-}
+import {
+  NavMenuLink
+} from "../chunk-JA4IX7GN.js";
+import "../chunk-R4H3352X.js";
 export {
   NavMenuLink
 };

package/build/modern/components/NavMenuLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\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,YAAY;AACrB,SAAS,KAAK,UAAU;AAqBd;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":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/NavMenuList.js

@@ -1,80 +1,10 @@
 "use client";
-
-// src/components/NavMenuList.tsx
-import { useMemo } from "react";
-import { useNavMenuContext } from "../context/navMenu.js";
-import { Show } from "./Show.js";
-import { cx } from "@cerberus/styled-system/css.js";
-import { vstack } from "@cerberus/styled-system/patterns.js";
-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
-    }
-  ) });
-}
+import {
+  NavMenuList,
+  getPosition
+} from "../chunk-WSQTX34C.js";
+import "../chunk-KJUCHZHV.js";
+import "../chunk-R4H3352X.js";
 export {
   NavMenuList,
   getPosition

package/build/modern/components/NavMenuList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useNavMenuContext } from '../context/navMenu'\nimport { Show } from './Show'\nimport type { Positions } from '../types'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\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,yBAAyB;AAClC,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,cAAc;AAyFjB;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":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/NavMenuTrigger.js

@@ -1,77 +1,10 @@
 "use client";
-
-// src/components/NavMenuTrigger.tsx
 import {
-  useCallback
-} from "react";
-import { cx } from "@cerberus/styled-system/css.js";
-import { button } from "@cerberus/styled-system/recipes.js";
-import {
-  createNavTriggerProps
-} from "../aria-helpers/nav-menu.aria.js";
-import { Show } from "./Show.js";
-import { useNavMenuContext } from "../context/navMenu.js";
-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
-        }
-      )
-    }
-  );
-}
+  NavMenuTrigger
+} from "../chunk-6YEAMVRY.js";
+import "../chunk-JF76VIL3.js";
+import "../chunk-KJUCHZHV.js";
+import "../chunk-R4H3352X.js";
 export {
   NavMenuTrigger
 };

package/build/modern/components/NavMenuTrigger.js.map

@@ -1 +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 { Show } from './Show'\nimport type { ButtonProps } from './Button'\nimport { useNavMenuContext } from '../context/navMenu'\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;AACvB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,YAAY;AAErB,SAAS,yBAAyB;AAoD1B;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":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/Show.js

@@ -1,16 +1,7 @@
 "use client";
-
-// 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]);
-}
+import {
+  Show
+} from "../chunk-R4H3352X.js";
 export {
   Show
 };

package/build/modern/components/Show.js.map

@@ -1 +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":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/context/field.js

@@ -1,32 +1,8 @@
 "use client";
-
-// 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;
-}
+  Field,
+  useFieldContext
+} from "../chunk-KETL4ZJK.js";
 export {
   Field,
   useFieldContext

package/build/modern/context/field.js.map

@@ -1 +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":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/context/navMenu.js

@@ -1,50 +1,8 @@
 "use client";
-
-// src/context/navMenu.tsx
-import { css } from "@cerberus/styled-system/css.js";
 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;
-}
+  NavMenu,
+  useNavMenuContext
+} from "../chunk-KJUCHZHV.js";
 export {
   NavMenu,
   useNavMenuContext

package/build/modern/context/navMenu.js.map

@@ -1 +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":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/context/theme.js

@@ -1,25 +1,10 @@
 "use client";
-
-// src/context/theme.tsx
-import { createContext, useContext } from "react";
-import { useTheme } from "../hooks/useTheme.js";
-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;
-}
+import {
+  MODE_KEY,
+  THEME_KEY,
+  ThemeProvider,
+  useThemeContext
+} from "../chunk-SXXWC6UD.js";
 export {
   MODE_KEY,
   THEME_KEY,

package/build/modern/context/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/theme.tsx"],"sourcesContent":["'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,SAAS,eAAe,kBAA0C;AAClE,SAAS,gBAAgB;AAgCrB;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;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/hooks/useTheme.js

@@ -1,61 +1,7 @@
 "use client";
-
-// src/hooks/useTheme.ts
 import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState
-} from "react";
-import {
-  MODE_KEY,
-  THEME_KEY
-} from "../context/theme.js";
-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]
-  );
-}
+  useTheme
+} from "../chunk-SXXWC6UD.js";
 export {
   useTheme
 };

package/build/modern/hooks/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"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"],"mappings":";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAKK;AAEA,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"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/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/modern/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/modern/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.1.0",
+  "version": "0.1.1-next-3a4c6c1",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -8,8 +8,8 @@
   "main": "build/legacy/index.cjs",
   "module": "build/legacy/index.js",
   "peerDependencies": {
-    "@cerberus-design/panda-preset": "*",
-    "@cerberus-design/styled-system": "*",
+    "@cerberus/panda-preset": "npm:@jsr/cerberus__panda-preset",
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system",
     "@pandacss/dev": "*",
     "react": "*",
     "react-dom": "*"
@@ -20,8 +20,7 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.0.2",
-    "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.1.0"
+    "@cerberus-design/configs": "0.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -46,7 +45,7 @@
   "author": "developers@omnifederal.com",
   "license": "ISC",
   "scripts": {
-    "build": "tsup --experimental-dts",
+    "build": "tsup-node --experimental-dts",
     "clean": "rm -rf ./build",
     "lint:ts": "tsc --project tsconfig.lint.json --noEmit"
   },
@@ -62,12 +61,6 @@
         "default": "./build/modern/index.cjs"
       }
     },
-    "./src": {
-      "import": {
-        "types": "./src/index.d.ts",
-        "default": "./src/index.ts"
-      }
-    },
     "./package.json": "./package.json"
   },
   "typesVersions": {

package/src/components/NavMenuLink.tsx

@@ -1,6 +1,6 @@
 import type { AnchorHTMLAttributes, ElementType } from 'react'
-import { Show } from './Show'
 import { css, cx } from '@cerberus/styled-system/css'
+import { Show } from './Show'
 
 export interface NavMenuLinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/components/NavMenuList.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import { useMemo, type HTMLAttributes } from 'react'
-import { useNavMenuContext } from '../context/navMenu'
-import { Show } from './Show'
-import type { Positions } from '../types'
 import { cx } from '@cerberus/styled-system/css'
 import { vstack } from '@cerberus/styled-system/patterns'
+import { useNavMenuContext } from '../context/navMenu'
+import type { Positions } from '../types'
+import { Show } from './Show'
 
 interface GetPositionResult {
   left: string