@cerberus-design/react 0.18.3 → 0.19.0

package/build/legacy/context/confirm-modal.cjs

@@ -4,6 +4,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 });
@@ -17,6 +18,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/context/confirm-modal.tsx
 var confirm_modal_exports = {};
@@ -26,17 +28,14 @@ __export(confirm_modal_exports, {
 });
 module.exports = __toCommonJS(confirm_modal_exports);
 var import_react4 = require("react");
-var import_css4 = require("styled-system/css");
+var import_css2 = require("styled-system/css");
 var import_jsx2 = require("styled-system/jsx");
 
 // src/components/button/button.tsx
-var import_factory = require("@ark-ui/react/factory");
 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
+// src/components/show/show.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
@@ -49,30 +48,133 @@ function Show(props) {
   return null;
 }
 
-// src/components/button/button.tsx
+// src/components/button/primitives.tsx
+var import_factory = require("@ark-ui/react/factory");
+var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
+var import_css = require("styled-system/css");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+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_runtime2.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_runtime2.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_runtime2.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
+      };
+    }
+    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/button/primitives.tsx
+var { withRecipe } = createCerberusPrimitive(import_recipes.button);
+var ButtonRoot = withRecipe(import_factory.ark.button);
+
+// src/components/button/button.tsx
+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 { pending = false, ...nativeProps } = props;
   const value = (0, import_react.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_factory.ark.button,
-    {
-      ...nativeProps,
-      disabled: pending || nativeProps.disabled,
-      className: (0, import_css.cx)(
-        nativeProps.className,
-        (0, import_recipes.button)({
-          palette,
-          usage,
-          shape,
-          size
-        })
-      )
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonRoot, { ...nativeProps, disabled: pending || nativeProps.disabled }) });
 }
 
 // src/utils/index.ts
@@ -98,33 +200,16 @@ function splitProps(props, ...keyGroups) {
 // src/components/avatar/primitives.tsx
 var import_avatar = require("@ark-ui/react/avatar");
 var import_recipes2 = require("styled-system/recipes");
-var import_css2 = require("styled-system/css");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function AvatarRoot(props) {
-  const { gradient, shape, size, ...rootProps } = props;
-  const styles = (0, import_recipes2.avatar)({ gradient, shape, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_avatar.Avatar.Root,
-    {
-      ...rootProps,
-      className: (0, import_css2.cx)(styles.root, rootProps.className)
-    }
-  );
-}
-function AvatarImage(props) {
-  const styles = (0, import_recipes2.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css2.cx)(styles.image, props.className) });
-}
-function AvatarFallback(props) {
-  const styles = (0, import_recipes2.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_avatar.Avatar.Fallback,
-    {
-      ...props,
-      className: (0, import_css2.cx)(styles.fallback, props.className)
-    }
-  );
-}
+var { withSlotRecipe } = createCerberusPrimitive(import_recipes2.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 = {
@@ -156,65 +241,24 @@ function Avatar2(props) {
 
 // src/components/dialog/primitives.tsx
 var import_dialog = require("@ark-ui/react/dialog");
-var import_css3 = require("styled-system/css");
 var import_recipes3 = require("styled-system/recipes");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function DialogRoot(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog.Dialog.Root, { ...props });
-}
-function DialogBackdrop(props) {
-  const styles = (0, import_recipes3.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_dialog.Dialog.Backdrop,
-    {
-      ...props,
-      className: (0, import_css3.cx)(styles.backdrop, props.className)
-    }
-  );
-}
-function DialogPositioner(props) {
-  const styles = (0, import_recipes3.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_dialog.Dialog.Positioner,
-    {
-      ...props,
-      className: (0, import_css3.cx)(styles.positioner, props.className)
-    }
-  );
-}
-function DialogContent(props) {
-  const { size, ...contentProps } = props;
-  const styles = (0, import_recipes3.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_dialog.Dialog.Content,
-    {
-      ...contentProps,
-      className: (0, import_css3.cx)(styles.content, contentProps.className)
-    }
-  );
-}
-function DialogHeading(props) {
-  const styles = (0, import_recipes3.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog.Dialog.Title, { ...props, className: (0, import_css3.cx)(styles.title, props.className) });
-}
-function DialogDescription(props) {
-  const styles = (0, import_recipes3.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_dialog.Dialog.Description,
-    {
-      ...props,
-      className: (0, import_css3.cx)(styles.description, props.className)
-    }
-  );
-}
-function DialogCloseTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog.Dialog.CloseTrigger, { ...props });
-}
+var { withSlotRecipe: withSlotRecipe2, withNoRecipe } = createCerberusPrimitive(import_recipes3.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/context/cerberus.tsx
 var import_react2 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var CerberusContext = (0, import_react2.createContext)(null);
 function useCerberusContext() {
   const context = (0, import_react2.useContext)(CerberusContext);
@@ -224,24 +268,21 @@ function useCerberusContext() {
   return context;
 }
 
-// src/components/Portal.tsx
+// src/components/portal/portal.tsx
 var import_react3 = require("@ark-ui/react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function Portal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react3.Portal, { ...props });
-}
+var Portal = import_react3.Portal;
 
 // src/components/dialog/dialog.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Dialog2(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 }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogBackdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogContent, { ...props }) })
   ] });
 }
 
 // src/context/confirm-modal.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react4.createContext)(null);
 function ConfirmModal(props) {
   const [open, setOpen] = (0, import_react4.useState)(false);
@@ -276,78 +317,105 @@ function ConfirmModal(props) {
     },
     [setOpen, setContent]
   );
+  const handleOpenChange = (0, import_react4.useCallback)(
+    ({ open: open2 }) => {
+      var _a;
+      setOpen(open2);
+      if (!open2) {
+        (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, null);
+        resolveRef.current = null;
+      }
+    },
+    [setOpen]
+  );
   const value = (0, import_react4.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog2, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_jsx2.HStack,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogProvider, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Dialog2,
+      {
+        size: "sm",
+        style: {
+          "--dialog-content-min-h": "auto"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          import_jsx2.VStack,
           {
-            alignSelf: "center",
-            justify: "center",
-            paddingBlockEnd: "md",
+            alignItems: "flex-start",
+            gap: "md",
+            justify: "space-between",
             w: "full",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              Show,
-              {
-                when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  Avatar2,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                import_jsx2.HStack,
+                {
+                  alignSelf: "center",
+                  justify: "center",
+                  paddingBlockEnd: "md",
+                  w: "full",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    Show,
+                    {
+                      when: palette === "danger",
+                      fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        Avatar2,
+                        {
+                          gradient: "charon-light",
+                          fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmIcon, { size: 24 })
+                        }
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        Avatar2,
+                        {
+                          gradient: "hades-dark",
+                          fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmIcon, { size: 24 })
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: content == null ? void 0 : content.description, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogDescription, { children: content == null ? void 0 : content.description }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx2.HStack, { gap: "md", pt: "md", w: "full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  Button,
                   {
-                    gradient: "charon-light",
-                    fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfirmIcon, { size: 24 })
+                    autoFocus: true,
+                    className: (0, import_css2.css)({
+                      w: "1/2"
+                    }),
+                    name: "confirm",
+                    onClick: handleChoice,
+                    palette,
+                    value: "true",
+                    children: content == null ? void 0 : content.actionText
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  Avatar2,
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  Button,
                   {
-                    gradient: "hades-dark",
-                    fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfirmIcon, { size: 24 })
+                    className: (0, import_css2.css)({
+                      w: "1/2"
+                    }),
+                    name: "cancel",
+                    onClick: handleChoice,
+                    usage: "outlined",
+                    value: "false",
+                    children: content == null ? void 0 : content.cancelText
                   }
-                )
-              }
-            )
+                ) })
+              ] })
+            ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          Button,
-          {
-            autoFocus: true,
-            className: (0, import_css4.css)({
-              w: "1/2"
-            }),
-            name: "confirm",
-            onClick: handleChoice,
-            palette,
-            value: "true",
-            children: content == null ? void 0 : content.actionText
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          Button,
-          {
-            className: (0, import_css4.css)({
-              w: "1/2"
-            }),
-            name: "cancel",
-            onClick: handleChoice,
-            usage: "outlined",
-            value: "false",
-            children: content == null ? void 0 : content.cancelText
-          }
-        ) })
-      ] })
-    ] }) }) })
+        )
+      }
+    ) })
   ] });
 }
 function useConfirmModal() {