@cerberus-design/react 0.18.3 → 0.19.0

package/build/legacy/components/cta-dialog/index.cjs

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/cta-dialog/index.ts
 var cta_dialog_exports = {};
@@ -42,7 +44,7 @@ function useCerberusContext() {
   return context;
 }
 
-// src/components/Show.tsx
+// src/components/show/show.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
@@ -55,7 +57,7 @@ function Show(props) {
   return null;
 }
 
-// src/components/for.tsx
+// src/components/for/for.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function For(props) {
   var _a;
@@ -88,34 +90,129 @@ function splitProps(props, ...keyGroups) {
 // src/components/avatar/primitives.tsx
 var import_avatar = require("@ark-ui/react/avatar");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
 var import_css = require("styled-system/css");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function AvatarRoot(props) {
-  const { gradient, shape, size, ...rootProps } = props;
-  const styles = (0, import_recipes.avatar)({ gradient, shape, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_avatar.Avatar.Root,
-    {
-      ...rootProps,
-      className: (0, import_css.cx)(styles.root, rootProps.className)
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with the given recipe.
+     * @param Component - The React component to enhance with the recipe.
+     * @param options - Options for the recipe.
+     * @returns A new React component that applies the recipe to the original
+     * component.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with a slot recipe applied.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @param recipe - The slot recipe to apply to the component.
+     * @returns A new React component that applies Cerberus features and the
+     * specified slot recipe to the original component.
+     * @example
+     * ```typescript
+     * const { withSlotRecipe } = createCerberusPrimitive(field)
+     * const Field = withSlotRecipe(RawField, field)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function AvatarImage(props) {
-  const styles = (0, import_recipes.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css.cx)(styles.image, props.className) });
-}
-function AvatarFallback(props) {
-  const styles = (0, import_recipes.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_avatar.Avatar.Fallback,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.fallback, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
 
+// src/components/avatar/primitives.tsx
+var { withSlotRecipe } = createCerberusPrimitive(import_recipes.avatar);
+var AvatarRoot = withSlotRecipe(import_avatar.Avatar.Root, "root");
+var AvatarImage = withSlotRecipe(
+  import_avatar.Avatar.Image,
+  "image"
+);
+var AvatarFallback = withSlotRecipe(
+  import_avatar.Avatar.Fallback,
+  "fallback"
+);
+
 // src/components/avatar/parts.ts
 var AvatarParts = {
   Root: AvatarRoot,
@@ -146,127 +243,72 @@ function Avatar2(props) {
 
 // src/components/dialog/primitives.tsx
 var import_dialog = require("@ark-ui/react/dialog");
-var import_css2 = require("styled-system/css");
 var import_recipes2 = require("styled-system/recipes");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function DialogRoot(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog.Dialog.Root, { ...props });
-}
-function DialogBackdrop(props) {
-  const styles = (0, import_recipes2.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_dialog.Dialog.Backdrop,
-    {
-      ...props,
-      className: (0, import_css2.cx)(styles.backdrop, props.className)
-    }
-  );
-}
-function DialogPositioner(props) {
-  const styles = (0, import_recipes2.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_dialog.Dialog.Positioner,
-    {
-      ...props,
-      className: (0, import_css2.cx)(styles.positioner, props.className)
-    }
-  );
-}
-function DialogContent(props) {
-  const { size, ...contentProps } = props;
-  const styles = (0, import_recipes2.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_dialog.Dialog.Content,
-    {
-      ...contentProps,
-      className: (0, import_css2.cx)(styles.content, contentProps.className)
-    }
-  );
-}
-function DialogHeading(props) {
-  const styles = (0, import_recipes2.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog.Dialog.Title, { ...props, className: (0, import_css2.cx)(styles.title, props.className) });
-}
-function DialogDescription(props) {
-  const styles = (0, import_recipes2.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_dialog.Dialog.Description,
-    {
-      ...props,
-      className: (0, import_css2.cx)(styles.description, props.className)
-    }
-  );
-}
-function DialogCloseTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog.Dialog.CloseTrigger, { ...props });
-}
+var { withSlotRecipe: withSlotRecipe2, withNoRecipe } = createCerberusPrimitive(import_recipes2.dialog);
+var DialogRoot = withNoRecipe(import_dialog.Dialog.Root);
 var DialogProvider = DialogRoot;
+var DialogTrigger = withSlotRecipe2(import_dialog.Dialog.Trigger, "trigger");
+var DialogBackdrop = withSlotRecipe2(import_dialog.Dialog.Backdrop, "backdrop");
+var DialogPositioner = withSlotRecipe2(import_dialog.Dialog.Positioner, "positioner");
+var DialogContent = withSlotRecipe2(import_dialog.Dialog.Content, "content");
+var DialogHeading = withSlotRecipe2(import_dialog.Dialog.Title, "title");
+var DialogDescription = withSlotRecipe2(
+  import_dialog.Dialog.Description,
+  "description"
+);
+var DialogCloseTrigger = withNoRecipe(import_dialog.Dialog.CloseTrigger);
 
-// src/components/IconButton.tsx
+// src/components/icon-button/primitives.ts
 var import_factory = require("@ark-ui/react/factory");
-var import_css3 = require("styled-system/css");
 var import_recipes3 = require("styled-system/recipes");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var { withRecipe } = createCerberusPrimitive(import_recipes3.iconButton);
+var IconButtonRoot = withRecipe(import_factory.ark.button);
+
+// src/components/icon-button/button.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function IconButton(props) {
-  const { ariaLabel, palette, usage, size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_factory.ark.button,
-    {
-      ...nativeProps,
-      "aria-label": ariaLabel ?? "Icon Button",
-      className: (0, import_css3.cx)(
-        nativeProps.className,
-        (0, import_recipes3.iconButton)({
-          palette,
-          usage,
-          size
-        })
-      )
-    }
-  );
+  const { ariaLabel, ...rootProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButtonRoot, { ...rootProps, "aria-label": ariaLabel ?? "Icon Button" });
 }
 
 // src/components/dialog/close-icon-trigger.tsx
 var import_recipes4 = require("styled-system/recipes");
-var import_css4 = require("styled-system/css");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_css2 = require("styled-system/css");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function DialogCloseIconTrigger(props) {
   const styles = (0, import_recipes4.dialog)();
   const { icons } = useCerberusContext();
   const { close: CloseIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     DialogCloseTrigger,
     {
       ...props,
-      className: (0, import_css4.cx)(styles.closeTrigger, props.className),
+      className: (0, import_css2.cx)(styles.closeTrigger, props.className),
       asChild: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         IconButton,
         {
           ariaLabel: "Close dialog",
           palette: "action",
           size: "lg",
           usage: "ghost",
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {})
         }
       )
     }
   );
 }
 
-// src/components/Portal.tsx
+// src/components/portal/portal.tsx
 var import_react2 = require("@ark-ui/react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function Portal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react2.Portal, { ...props });
-}
+var Portal = import_react2.Portal;
 
 // src/components/dialog/dialog.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Dialog2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogBackdrop, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogContent, { ...props }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogBackdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogContent, { ...props }) })
   ] });
 }
 
@@ -275,55 +317,45 @@ var import_react3 = require("react");
 var CTAModalContext = (0, import_react3.createContext)(null);
 
 // src/components/cta-dialog/trigger-item.tsx
-var import_css6 = require("styled-system/css");
+var import_css3 = require("styled-system/css");
 
 // src/components/button/button.tsx
-var import_factory2 = require("@ark-ui/react/factory");
 var import_react4 = require("react");
-var import_css5 = require("styled-system/css");
-var import_recipes5 = require("styled-system/recipes");
 var import_jsx = require("styled-system/jsx");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// src/components/button/primitives.tsx
+var import_factory2 = require("@ark-ui/react/factory");
+var import_recipes5 = require("styled-system/recipes");
+var { withRecipe: withRecipe2 } = createCerberusPrimitive(import_recipes5.button);
+var ButtonRoot = withRecipe2(import_factory2.ark.button);
+
+// src/components/button/button.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ButtonContext = (0, import_react4.createContext)({
   pending: false
 });
 function Button(props) {
-  const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
+  const { pending = false, ...nativeProps } = props;
   const value = (0, import_react4.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_factory2.ark.button,
-    {
-      ...nativeProps,
-      disabled: pending || nativeProps.disabled,
-      className: (0, import_css5.cx)(
-        nativeProps.className,
-        (0, import_recipes5.button)({
-          palette,
-          usage,
-          shape,
-          size
-        })
-      )
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonRoot, { ...nativeProps, disabled: pending || nativeProps.disabled }) });
 }
 
 // src/components/cta-dialog/trigger-item.tsx
 var import_factory3 = require("@ark-ui/react/factory");
 var import_recipes6 = require("styled-system/recipes");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function TriggerItem(props) {
   const { asChild, children, ...buttonProps } = props;
   if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_factory3.ark.div,
       {
-        className: (0, import_css6.cx)(
+        className: (0, import_css3.cx)(
           (0, import_recipes6.button)({
             shape: "rounded",
             usage: "ghost"
           }),
-          (0, import_css6.css)({
+          (0, import_css3.css)({
             w: "1/2"
           })
         ),
@@ -332,11 +364,11 @@ function TriggerItem(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Button,
     {
       ...buttonProps,
-      className: (0, import_css6.css)({
+      className: (0, import_css3.css)({
         w: "1/2"
       }),
       shape: "rounded",
@@ -347,7 +379,7 @@ function TriggerItem(props) {
 }
 
 // src/components/cta-dialog/provider.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function CTAModal(props) {
   const [open, setOpen] = (0, import_react5.useState)(false);
   const [content, setContent] = (0, import_react5.useState)(null);
@@ -378,43 +410,52 @@ function CTAModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Dialog2, { size: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogCloseIconTrigger, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            Avatar2,
-            {
-              gradient: "charon-light",
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                Show,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      Dialog2,
+      {
+        size: "sm",
+        style: {
+          "--dialog-content-min-h": "auto"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogCloseIconTrigger, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                Avatar2,
                 {
-                  when: confirmIcon,
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FallbackIcon, { size: 24 }),
-                  children: confirmIcon
+                  gradient: "charon-light",
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    Show,
+                    {
+                      when: confirmIcon,
+                      fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FallbackIcon, { size: 24 }),
+                      children: confirmIcon
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
-          var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            Show,
-            {
-              when: ((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.type) === "btnAction",
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { asChild: true, children: action }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
-            },
-            index
-          );
-        } }) })
-      ] })
-    ] }) })
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
+              var _a;
+              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                Show,
+                {
+                  when: ((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.type) === "btnAction",
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TriggerItem, { asChild: true, children: action }),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
+                },
+                index
+              );
+            } }) })
+          ] })
+        ]
+      }
+    ) })
   ] });
 }
 function useCTAModal() {