@cerberus-design/react 0.17.1 → 0.18.0

package/build/legacy/components/avatar/parts.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/avatar/parts.ts","../../../../src/components/avatar/primitives.tsx"],"sourcesContent":["import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n  /**\n   * The context provider of the Avatar.\n   */\n  Root: ElementType\n  /**\n   * The image of the Avatar.\n   */\n  Image: ElementType\n  /**\n   * The fallback content to display when the image fails to load.\n   */\n  Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n  Root: AvatarRoot,\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n}\n","import {\n  Avatar,\n  type AvatarFallbackProps,\n  type AvatarImageProps,\n  type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n  const { gradient, shape, size, ...rootProps } = props\n  const styles = avatar({ gradient, shape, size })\n  return (\n    <Avatar.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n  )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Fallback\n      {...props}\n      className={cx(styles.fallback, props.className)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAKO;AACP,qBAGO;AACP,iBAAmB;AAcf;AAJG,SAAS,WAAW,OAA6C;AACtE,QAAM,EAAE,UAAU,OAAO,MAAM,GAAG,UAAU,IAAI;AAChD,QAAM,aAAS,uBAAO,EAAE,UAAU,OAAO,KAAK,CAAC;AAC/C,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,YAAY,OAAyB;AACnD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;;;ADpBO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;","names":[]}
+{"version":3,"sources":["../../../../src/components/avatar/parts.ts","../../../../src/components/avatar/primitives.tsx"],"sourcesContent":["import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n  /**\n   * The context provider of the Avatar.\n   */\n  Root: ElementType\n  /**\n   * The image of the Avatar.\n   */\n  Image: ElementType\n  /**\n   * The fallback content to display when the image fails to load.\n   */\n  Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n  Root: AvatarRoot,\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n}\n","import {\n  Avatar,\n  type AvatarFallbackProps,\n  type AvatarImageProps,\n  type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport { avatar, type AvatarVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n  const { gradient, shape, size, ...rootProps } = props\n  const styles = avatar({ gradient, shape, size })\n  return (\n    <Avatar.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n  )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Fallback\n      {...props}\n      className={cx(styles.fallback, props.className)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAKO;AACP,qBAAgD;AAChD,iBAAmB;AAcf;AAJG,SAAS,WAAW,OAA6C;AACtE,QAAM,EAAE,UAAU,OAAO,MAAM,GAAG,UAAU,IAAI;AAChD,QAAM,aAAS,uBAAO,EAAE,UAAU,OAAO,KAAK,CAAC;AAC/C,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,YAAY,OAAyB;AACnD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;;;ADjBO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;","names":[]}

package/build/legacy/components/avatar/primitives.cjs

@@ -26,8 +26,8 @@ __export(primitives_exports, {
 });
 module.exports = __toCommonJS(primitives_exports);
 var import_avatar = require("@ark-ui/react/avatar");
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_css = require("@cerberus/styled-system/css");
+var import_recipes = require("styled-system/recipes");
+var import_css = require("styled-system/css");
 var import_jsx_runtime = require("react/jsx-runtime");
 function AvatarRoot(props) {
   const { gradient, shape, size, ...rootProps } = props;

package/build/legacy/components/avatar/primitives.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/avatar/primitives.tsx"],"sourcesContent":["import {\n  Avatar,\n  type AvatarFallbackProps,\n  type AvatarImageProps,\n  type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n  const { gradient, shape, size, ...rootProps } = props\n  const styles = avatar({ gradient, shape, size })\n  return (\n    <Avatar.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n  )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Fallback\n      {...props}\n      className={cx(styles.fallback, props.className)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKO;AACP,qBAGO;AACP,iBAAmB;AAcf;AAJG,SAAS,WAAW,OAA6C;AACtE,QAAM,EAAE,UAAU,OAAO,MAAM,GAAG,UAAU,IAAI;AAChD,QAAM,aAAS,uBAAO,EAAE,UAAU,OAAO,KAAK,CAAC;AAC/C,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,YAAY,OAAyB;AACnD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/avatar/primitives.tsx"],"sourcesContent":["import {\n  Avatar,\n  type AvatarFallbackProps,\n  type AvatarImageProps,\n  type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport { avatar, type AvatarVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n  const { gradient, shape, size, ...rootProps } = props\n  const styles = avatar({ gradient, shape, size })\n  return (\n    <Avatar.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n  )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Fallback\n      {...props}\n      className={cx(styles.fallback, props.className)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKO;AACP,qBAAgD;AAChD,iBAAmB;AAcf;AAJG,SAAS,WAAW,OAA6C;AACtE,QAAM,EAAE,UAAU,OAAO,MAAM,GAAG,UAAU,IAAI;AAChD,QAAM,aAAS,uBAAO,EAAE,UAAU,OAAO,KAAK,CAAC;AAC/C,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,YAAY,OAAyB;AACnD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;","names":[]}

package/build/legacy/components/button/button.cjs

@@ -26,36 +26,39 @@ __export(button_exports, {
 });
 module.exports = __toCommonJS(button_exports);
 var import_factory = require("@ark-ui/react/factory");
-var import_react2 = require("react");
-var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_jsx = require("@cerberus/styled-system/jsx");
+var import_react = require("react");
+var import_css = require("styled-system/css");
+var import_recipes = require("styled-system/recipes");
+var import_jsx = require("styled-system/jsx");
 
 // src/components/Show.tsx
-var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
-  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
-  return (0, import_react.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
+  if (when) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  if (fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+  }
+  return null;
 }
 
 // src/components/Spinner.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "svg",
     {
       "aria-busy": "true",
+      "data-scope": "spinner",
+      "data-part": "root",
       role: "status",
       xmlns: "http://www.w3.org/2000/svg",
       height: props.size,
       width: props.size,
       viewBox: "0 0 24 24",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "g",
         {
           fill: "none",
@@ -64,14 +67,14 @@ function Spinner(props) {
           strokeLinejoin: "round",
           strokeWidth: 2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "path",
               {
                 strokeDasharray: 16,
                 strokeDashoffset: 16,
                 d: "M12 3c4.97 0 9 4.03 9 9",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "animate",
                     {
                       fill: "freeze",
@@ -80,7 +83,7 @@ function Spinner(props) {
                       values: "16;0"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "animateTransform",
                     {
                       attributeName: "transform",
@@ -93,14 +96,14 @@ function Spinner(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "path",
               {
                 strokeDasharray: 64,
                 strokeDashoffset: 64,
                 strokeOpacity: 0.3,
                 d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "animate",
                   {
                     fill: "freeze",
@@ -119,14 +122,14 @@ function Spinner(props) {
 }
 
 // src/components/button/button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ButtonContext = (0, import_react2.createContext)({
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ButtonContext = (0, import_react.createContext)({
   pending: false
 });
 function Button(props) {
   const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
-  const value = (0, import_react2.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const value = (0, import_react.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_factory.ark.button,
     {
       ...nativeProps,
@@ -144,8 +147,8 @@ function Button(props) {
   ) });
 }
 function ButtonIcon(props) {
-  const { pending } = (0, import_react2.useContext)(ButtonContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: pending, fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Box, { w: "4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}) }) });
+  const { pending } = (0, import_react.useContext)(ButtonContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: pending, fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.children }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx.Box, { w: "4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, {}) }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx"],"sourcesContent":["'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\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","import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,qBAAuC;AACvC,IAAAA,gBAKO;AACP,iBAAmB;AACnB,qBAGO;AACP,iBAAoB;;;ACZpB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACQQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFnCM,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC,mBAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,QAAI,0BAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;","names":["import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx"],"sourcesContent":["'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from 'styled-system/css'\nimport { button, type ButtonVariantProps } from 'styled-system/recipes'\nimport { Box } from 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport interface SpinnerProps {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      data-scope=\"spinner\"\n      data-part=\"root\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,qBAAuC;AACvC,mBAKO;AACP,iBAAmB;AACnB,qBAAgD;AAChD,iBAAoB;;;ACqBT;AAJJ,SAAS,KAAQ,OAAwC;AAC9D,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AAErC,MAAI,MAAM;AACR,WAAO,2EAAG,UAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,WAAO,2EAAG,oBAAS;AAAA,EACrB;AAEA,SAAO;AACT;;;ACKQ,IAAAA,sBAAA;AAnBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAW;AAAA,MACX,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFrCM,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,4BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,sBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC,mBAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,QAAI,yBAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;","names":["import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/components/button/index.cjs

@@ -28,36 +28,39 @@ module.exports = __toCommonJS(button_exports);
 
 // src/components/button/button.tsx
 var import_factory = require("@ark-ui/react/factory");
-var import_react2 = require("react");
-var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_jsx = require("@cerberus/styled-system/jsx");
+var import_react = require("react");
+var import_css = require("styled-system/css");
+var import_recipes = require("styled-system/recipes");
+var import_jsx = require("styled-system/jsx");
 
 // src/components/Show.tsx
-var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
-  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
-  return (0, import_react.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
+  if (when) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  if (fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+  }
+  return null;
 }
 
 // src/components/Spinner.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "svg",
     {
       "aria-busy": "true",
+      "data-scope": "spinner",
+      "data-part": "root",
       role: "status",
       xmlns: "http://www.w3.org/2000/svg",
       height: props.size,
       width: props.size,
       viewBox: "0 0 24 24",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "g",
         {
           fill: "none",
@@ -66,14 +69,14 @@ function Spinner(props) {
           strokeLinejoin: "round",
           strokeWidth: 2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "path",
               {
                 strokeDasharray: 16,
                 strokeDashoffset: 16,
                 d: "M12 3c4.97 0 9 4.03 9 9",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "animate",
                     {
                       fill: "freeze",
@@ -82,7 +85,7 @@ function Spinner(props) {
                       values: "16;0"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "animateTransform",
                     {
                       attributeName: "transform",
@@ -95,14 +98,14 @@ function Spinner(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "path",
               {
                 strokeDasharray: 64,
                 strokeDashoffset: 64,
                 strokeOpacity: 0.3,
                 d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "animate",
                   {
                     fill: "freeze",
@@ -121,14 +124,14 @@ function Spinner(props) {
 }
 
 // src/components/button/button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ButtonContext = (0, import_react2.createContext)({
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ButtonContext = (0, import_react.createContext)({
   pending: false
 });
 function Button(props) {
   const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
-  const value = (0, import_react2.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const value = (0, import_react.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_factory.ark.button,
     {
       ...nativeProps,
@@ -146,8 +149,8 @@ function Button(props) {
   ) });
 }
 function ButtonIcon(props) {
-  const { pending } = (0, import_react2.useContext)(ButtonContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: pending, fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Box, { w: "4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}) }) });
+  const { pending } = (0, import_react.useContext)(ButtonContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: pending, fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.children }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx.Box, { w: "4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, {}) }) });
 }
 
 // src/components/button/parts.ts

package/build/legacy/components/button/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/button/index.ts","../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx","../../../../src/components/button/parts.ts"],"sourcesContent":["export * from './button'\nexport * from './parts'\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\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","import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n","import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n  /**\n   * The context provider of the button.\n   */\n  Root: ElementType\n  /**\n   * The icon of the button.\n   */\n  Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n  Root: Button,\n  Icon: ButtonIcon,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,qBAAuC;AACvC,IAAAA,gBAKO;AACP,iBAAmB;AACnB,qBAGO;AACP,iBAAoB;;;ACZpB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACQQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFnCM,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC,mBAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,QAAI,0BAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;;;AGhDO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":["import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/button/index.ts","../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx","../../../../src/components/button/parts.ts"],"sourcesContent":["export * from './button'\nexport * from './parts'\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from 'styled-system/css'\nimport { button, type ButtonVariantProps } from 'styled-system/recipes'\nimport { Box } from 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport interface SpinnerProps {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      data-scope=\"spinner\"\n      data-part=\"root\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n","import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n  /**\n   * The context provider of the button.\n   */\n  Root: ElementType\n  /**\n   * The icon of the button.\n   */\n  Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n  Root: Button,\n  Icon: ButtonIcon,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,qBAAuC;AACvC,mBAKO;AACP,iBAAmB;AACnB,qBAAgD;AAChD,iBAAoB;;;ACqBT;AAJJ,SAAS,KAAQ,OAAwC;AAC9D,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AAErC,MAAI,MAAM;AACR,WAAO,2EAAG,UAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,WAAO,2EAAG,oBAAS;AAAA,EACrB;AAEA,SAAO;AACT;;;ACKQ,IAAAA,sBAAA;AAnBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAW;AAAA,MACX,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFrCM,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,4BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,sBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC,mBAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,QAAI,yBAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;;;AG7CO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":["import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/components/button/parts.cjs

@@ -26,36 +26,39 @@ module.exports = __toCommonJS(parts_exports);
 
 // src/components/button/button.tsx
 var import_factory = require("@ark-ui/react/factory");
-var import_react2 = require("react");
-var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_jsx = require("@cerberus/styled-system/jsx");
+var import_react = require("react");
+var import_css = require("styled-system/css");
+var import_recipes = require("styled-system/recipes");
+var import_jsx = require("styled-system/jsx");
 
 // src/components/Show.tsx
-var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
-  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
-  return (0, import_react.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
+  if (when) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  if (fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+  }
+  return null;
 }
 
 // src/components/Spinner.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "svg",
     {
       "aria-busy": "true",
+      "data-scope": "spinner",
+      "data-part": "root",
       role: "status",
       xmlns: "http://www.w3.org/2000/svg",
       height: props.size,
       width: props.size,
       viewBox: "0 0 24 24",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "g",
         {
           fill: "none",
@@ -64,14 +67,14 @@ function Spinner(props) {
           strokeLinejoin: "round",
           strokeWidth: 2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "path",
               {
                 strokeDasharray: 16,
                 strokeDashoffset: 16,
                 d: "M12 3c4.97 0 9 4.03 9 9",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "animate",
                     {
                       fill: "freeze",
@@ -80,7 +83,7 @@ function Spinner(props) {
                       values: "16;0"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "animateTransform",
                     {
                       attributeName: "transform",
@@ -93,14 +96,14 @@ function Spinner(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "path",
               {
                 strokeDasharray: 64,
                 strokeDashoffset: 64,
                 strokeOpacity: 0.3,
                 d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "animate",
                   {
                     fill: "freeze",
@@ -119,14 +122,14 @@ function Spinner(props) {
 }
 
 // src/components/button/button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ButtonContext = (0, import_react2.createContext)({
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ButtonContext = (0, import_react.createContext)({
   pending: false
 });
 function Button(props) {
   const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
-  const value = (0, import_react2.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const value = (0, import_react.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_factory.ark.button,
     {
       ...nativeProps,
@@ -144,8 +147,8 @@ function Button(props) {
   ) });
 }
 function ButtonIcon(props) {
-  const { pending } = (0, import_react2.useContext)(ButtonContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: pending, fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Box, { w: "4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}) }) });
+  const { pending } = (0, import_react.useContext)(ButtonContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: pending, fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.children }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx.Box, { w: "4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, {}) }) });
 }
 
 // src/components/button/parts.ts

package/build/legacy/components/button/parts.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/button/parts.ts","../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx"],"sourcesContent":["import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n  /**\n   * The context provider of the button.\n   */\n  Root: ElementType\n  /**\n   * The icon of the button.\n   */\n  Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n  Root: Button,\n  Icon: ButtonIcon,\n}\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\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","import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,qBAAuC;AACvC,IAAAA,gBAKO;AACP,iBAAmB;AACnB,qBAGO;AACP,iBAAoB;;;ACZpB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACQQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFnCM,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,6BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC,mBAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,QAAI,0BAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;;;ADhDO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":["import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/button/parts.ts","../../../../src/components/button/button.tsx","../../../../src/components/Show.tsx","../../../../src/components/Spinner.tsx"],"sourcesContent":["import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n  /**\n   * The context provider of the button.\n   */\n  Root: ElementType\n  /**\n   * The icon of the button.\n   */\n  Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n  Root: Button,\n  Icon: ButtonIcon,\n}\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from 'styled-system/css'\nimport { button, type ButtonVariantProps } from 'styled-system/recipes'\nimport { Box } from 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport interface SpinnerProps {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      data-scope=\"spinner\"\n      data-part=\"root\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,qBAAuC;AACvC,mBAKO;AACP,iBAAmB;AACnB,qBAAgD;AAChD,iBAAoB;;;ACqBT;AAJJ,SAAS,KAAQ,OAAwC;AAC9D,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AAErC,MAAI,MAAM;AACR,WAAO,2EAAG,UAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,WAAO,2EAAG,oBAAS;AAAA,EACrB;AAEA,SAAO;AACT;;;ACKQ,IAAAA,sBAAA;AAnBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAW;AAAA,MACX,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFrCM,IAAAC,sBAAA;AAnBN,IAAM,oBAAgB,4BAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,YAAQ,sBAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,6CAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC,mBAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,QAAI,yBAAW,aAAa;AAC5C,SACE,6CAAC,QAAK,MAAM,SAAS,UAAU,6EAAG,gBAAM,UAAS,GAC/C,uDAAC,kBAAI,GAAE,KACL,uDAAC,WAAQ,GACX,GACF;AAEJ;;;AD7CO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":["import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/components/checkbox/checkbox-icon.cjs

@@ -39,8 +39,8 @@ function useCerberusContext() {
 
 // src/components/checkbox/primitives.tsx
 var import_react2 = require("@ark-ui/react");
-var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
+var import_css = require("styled-system/css");
+var import_recipes = require("styled-system/recipes");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function CheckboxRoot(props) {
   const styles = (0, import_recipes.checkbox)();
@@ -97,22 +97,24 @@ var CheckboxParts = {
 };
 
 // src/components/Show.tsx
-var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
-  const condition = (0, import_react3.useMemo)(() => when ?? false, [when]);
-  return (0, import_react3.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
+  if (when) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
+  }
+  if (fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
+  }
+  return null;
 }
 
 // src/components/checkbox/checkbox-icon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function CheckboxIcon(props) {
   const { icons } = useCerberusContext();
   const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckboxParts.Indicator, { indeterminate: props.indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: props.indeterminate, fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IndeterminateIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxParts.Indicator, { indeterminate: props.indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: props.indeterminate, fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, {}), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IndeterminateIcon, {}) }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {