@cerberus-design/react 0.18.4 → 0.19.1

package/build/legacy/context/prompt-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/prompt-modal.tsx
 var prompt_modal_exports = {};
@@ -25,10 +27,10 @@ __export(prompt_modal_exports, {
   usePromptModal: () => usePromptModal
 });
 module.exports = __toCommonJS(prompt_modal_exports);
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_dialog2 = require("@ark-ui/react/dialog");
 var import_jsx3 = require("styled-system/jsx");
-var import_css7 = require("styled-system/css");
+var import_css4 = require("styled-system/css");
 var import_patterns = require("styled-system/patterns");
 
 // src/utils/index.ts
@@ -51,19 +53,159 @@ function splitProps(props, ...keyGroups) {
   return [...result, rest];
 }
 
+// src/components/show/show.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Show(props) {
+  const { when, children, fallback } = props;
+  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/field/primitives.tsx
-var import_field = require("@ark-ui/react/field");
-var import_css3 = require("styled-system/css");
+var import_field2 = require("@ark-ui/react/field");
+var import_react3 = require("@ark-ui/react");
 var import_recipes3 = require("styled-system/recipes");
 
-// src/components/field/status-indicator.tsx
-var import_react2 = require("@ark-ui/react");
+// 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/field/start-indicator.tsx
+var import_css2 = require("styled-system/css");
 var import_recipes = require("styled-system/recipes");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FieldStartIndicator(props) {
+  const styles = (0, import_recipes.field)();
+  if (!props.children) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      ...props,
+      "data-part": "start-indicator",
+      className: (0, import_css2.cx)(props.className, styles.startIndicator)
+    }
+  );
+}
+
+// src/components/field/status-indicator.tsx
+var import_react2 = require("@ark-ui/react");
+var import_css3 = require("styled-system/css");
+var import_recipes2 = require("styled-system/recipes");
 
 // src/context/cerberus.tsx
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var CerberusContext = (0, import_react.createContext)(null);
 function useCerberusContext() {
   const context = (0, import_react.useContext)(CerberusContext);
@@ -74,168 +216,137 @@ function useCerberusContext() {
 }
 
 // src/components/field/status-indicator.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function FieldStatusIndicator(props) {
   const { fallback, ...nativeProps } = props;
-  const styles = (0, import_recipes.field)();
+  const styles = (0, import_recipes2.field)();
   const fieldContext = (0, import_react2.useFieldContext)();
   const { icons } = useCerberusContext();
   const { invalid: InvalidIcon } = icons;
   if (fieldContext.invalid) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "span",
       {
         ...nativeProps,
         "aria-hidden": "true",
         "data-invalid": true,
-        className: (0, import_css.cx)(nativeProps.className, styles.statusIndicator),
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InvalidIcon, {})
+        className: (0, import_css3.cx)(nativeProps.className, styles.statusIndicator),
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InvalidIcon, {})
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "span",
     {
       ...nativeProps,
       "aria-hidden": "true",
       "data-part": "end-indicator",
-      className: (0, import_css.cx)(nativeProps.className, styles.endIndicator),
+      className: (0, import_css3.cx)(nativeProps.className, styles.endIndicator),
       children: fallback
     }
   );
 }
 
-// src/components/field/start-indicator.tsx
-var import_css2 = require("styled-system/css");
-var import_recipes2 = require("styled-system/recipes");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function FieldStartIndicator(props) {
-  const styles = (0, import_recipes2.field)();
-  if (!props.children) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "span",
-    {
-      ...props,
-      "data-part": "start-indicator",
-      className: (0, import_css2.cx)(props.className, styles.startIndicator)
-    }
-  );
-}
-
-// src/components/field/primitives.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function FieldRoot(props) {
-  const { size, ...fieldProps } = props;
-  const styles = (0, import_recipes3.field)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_field.Field.Root,
-    {
-      ...fieldProps,
-      className: (0, import_css3.cx)(styles.root, fieldProps.className)
-    }
-  );
-}
-function FieldLabel(props) {
-  const { children, ...nativeProps } = props;
-  const styles = (0, import_recipes3.field)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_field.Field.Label, { ...nativeProps, className: (0, import_css3.cx)(styles.label, props.className), children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_field.Field.RequiredIndicator, { children: "(required)" })
-  ] });
-}
-function FieldInput(props) {
-  const { size, startIcon, endIcon, ...fieldProps } = props;
-  const styles = (0, import_recipes3.field)({ size });
+// src/components/field/input.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CerberusFieldInput(props) {
+  const [{ startIcon, endIcon }, fieldProps] = splitProps(props, [
+    "startIcon",
+    "endIcon"
+  ]);
   const hasStartIcon = Boolean(startIcon);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles.inputRoot, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldStartIndicator, { children: startIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_field.Field.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FieldInputRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldStartIndicator, { children: startIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      FieldInput,
       {
         ...fieldProps,
-        ...hasStartIcon && { "data-has": "start-indicator" },
-        className: (0, import_css3.cx)(styles.input, fieldProps.className)
+        ...hasStartIcon && { "data-has": "start-indicator" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldStatusIndicator, { fallback: endIcon })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldStatusIndicator, { fallback: endIcon })
   ] });
 }
-var Input = FieldInput;
 
-// src/components/Show.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function Show(props) {
-  const { when, children, fallback } = props;
-  if (when) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
-  }
-  if (fallback) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: fallback });
-  }
-  return null;
+// src/components/field/error-text.tsx
+var import_field = require("@ark-ui/react/field");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CerberusFieldErrorText(props) {
+  if (!props.children) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_field.Field.ErrorText, { ...props });
 }
 
+// src/components/field/primitives.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(import_recipes3.field);
+var FieldRoot = withSlotRecipe(import_field2.Field.Root, "root");
+function FieldLabelEl(props) {
+  const { children, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_field2.Field.Label, { ...nativeProps, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_field2.Field.RequiredIndicator, { children: "(required)" })
+  ] });
+}
+var FieldLabel = withSlotRecipe(FieldLabelEl, "label");
+function FieldRequiredIndicatorEl(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_field2.Field.RequiredIndicator, { ...props, children: "(required)" });
+}
+var FieldRequiredIndicator = withNoRecipe(
+  FieldRequiredIndicatorEl
+);
+var FieldInputRoot = withSlotRecipe(
+  import_react3.ark.div,
+  "inputRoot"
+);
+var FieldInput = withSlotRecipe(import_field2.Field.Input, "input");
+var FieldHelperText = withSlotRecipe(
+  import_field2.Field.HelperText,
+  "helperText"
+);
+var FieldErrorText = withSlotRecipe(
+  CerberusFieldErrorText,
+  "errorText"
+);
+var FieldTextarea = withSlotRecipe(
+  import_field2.Field.Textarea,
+  "textarea"
+);
+var Input = CerberusFieldInput;
+
 // src/components/button/button.tsx
+var import_react4 = require("react");
+var import_jsx = require("styled-system/jsx");
+
+// src/components/button/primitives.tsx
 var import_factory = require("@ark-ui/react/factory");
-var import_react3 = require("react");
-var import_css4 = require("styled-system/css");
 var import_recipes4 = require("styled-system/recipes");
-var import_jsx = require("styled-system/jsx");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ButtonContext = (0, import_react3.createContext)({
+var { withRecipe } = createCerberusPrimitive(import_recipes4.button);
+var ButtonRoot = withRecipe(import_factory.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 value = (0, import_react3.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_factory.ark.button,
-    {
-      ...nativeProps,
-      disabled: pending || nativeProps.disabled,
-      className: (0, import_css4.cx)(
-        nativeProps.className,
-        (0, import_recipes4.button)({
-          palette,
-          usage,
-          shape,
-          size
-        })
-      )
-    }
-  ) });
+  const { pending = false, ...nativeProps } = props;
+  const value = (0, import_react4.useMemo)(() => ({ pending }), [pending]);
+  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/avatar/primitives.tsx
 var import_avatar = require("@ark-ui/react/avatar");
 var import_recipes5 = require("styled-system/recipes");
-var import_css5 = require("styled-system/css");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function AvatarRoot(props) {
-  const { gradient, shape, size, ...rootProps } = props;
-  const styles = (0, import_recipes5.avatar)({ gradient, shape, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_avatar.Avatar.Root,
-    {
-      ...rootProps,
-      className: (0, import_css5.cx)(styles.root, rootProps.className)
-    }
-  );
-}
-function AvatarImage(props) {
-  const styles = (0, import_recipes5.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css5.cx)(styles.image, props.className) });
-}
-function AvatarFallback(props) {
-  const styles = (0, import_recipes5.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_avatar.Avatar.Fallback,
-    {
-      ...props,
-      className: (0, import_css5.cx)(styles.fallback, props.className)
-    }
-  );
-}
+var { withSlotRecipe: withSlotRecipe2 } = createCerberusPrimitive(import_recipes5.avatar);
+var AvatarRoot = withSlotRecipe2(import_avatar.Avatar.Root, "root");
+var AvatarImage = withSlotRecipe2(
+  import_avatar.Avatar.Image,
+  "image"
+);
+var AvatarFallback = withSlotRecipe2(
+  import_avatar.Avatar.Fallback,
+  "fallback"
+);
 
 // src/components/avatar/parts.ts
 var AvatarParts = {
@@ -245,29 +356,29 @@ var AvatarParts = {
 };
 
 // src/components/avatar/avatar.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Avatar2(props) {
   const [imgProps, { fallback, children }, rootProps] = splitProps(
     props,
     ["alt", "src"],
     ["fallback", "children"]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Show,
     {
       when: children,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarParts.Fallback, { children: fallback }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarParts.Image, { ...imgProps })
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AvatarParts.Fallback, { children: fallback }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AvatarParts.Image, { ...imgProps })
       ] }),
       children
     }
   ) });
 }
 
-// src/components/Text.tsx
+// src/components/text/text.tsx
 var import_jsx2 = require("styled-system/jsx");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
   const cache = {
@@ -285,72 +396,31 @@ function Text(props) {
   };
   if (as in cache) {
     const Component = cache[as];
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, { ...pandaJSXProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component, { ...pandaJSXProps });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.P, { ...pandaJSXProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx2.P, { ...pandaJSXProps });
 }
 
 // src/components/dialog/primitives.tsx
 var import_dialog = require("@ark-ui/react/dialog");
-var import_css6 = require("styled-system/css");
 var import_recipes6 = require("styled-system/recipes");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function DialogRoot(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_dialog.Dialog.Root, { ...props });
-}
-function DialogBackdrop(props) {
-  const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_dialog.Dialog.Backdrop,
-    {
-      ...props,
-      className: (0, import_css6.cx)(styles.backdrop, props.className)
-    }
-  );
-}
-function DialogPositioner(props) {
-  const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_dialog.Dialog.Positioner,
-    {
-      ...props,
-      className: (0, import_css6.cx)(styles.positioner, props.className)
-    }
-  );
-}
-function DialogContent(props) {
-  const { size, css: customStyles, ...contentProps } = props;
-  const styles = (0, import_recipes6.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_dialog.Dialog.Content,
-    {
-      ...contentProps,
-      className: (0, import_css6.cx)(styles.content, (0, import_css6.css)(customStyles), contentProps.className)
-    }
-  );
-}
-function DialogHeading(props) {
-  const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_dialog.Dialog.Title, { ...props, className: (0, import_css6.cx)(styles.title, props.className) });
-}
-function DialogDescription(props) {
-  const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_dialog.Dialog.Description,
-    {
-      ...props,
-      className: (0, import_css6.cx)(styles.description, props.className)
-    }
-  );
-}
+var { withSlotRecipe: withSlotRecipe3, withNoRecipe: withNoRecipe2 } = createCerberusPrimitive(import_recipes6.dialog);
+var DialogRoot = withNoRecipe2(import_dialog.Dialog.Root);
 var DialogProvider = DialogRoot;
+var DialogTrigger = withSlotRecipe3(import_dialog.Dialog.Trigger, "trigger");
+var DialogBackdrop = withSlotRecipe3(import_dialog.Dialog.Backdrop, "backdrop");
+var DialogPositioner = withSlotRecipe3(import_dialog.Dialog.Positioner, "positioner");
+var DialogContent = withSlotRecipe3(import_dialog.Dialog.Content, "content");
+var DialogHeading = withSlotRecipe3(import_dialog.Dialog.Title, "title");
+var DialogDescription = withSlotRecipe3(
+  import_dialog.Dialog.Description,
+  "description"
+);
+var DialogCloseTrigger = withNoRecipe2(import_dialog.Dialog.CloseTrigger);
 
-// src/components/Portal.tsx
-var import_react4 = require("@ark-ui/react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function Portal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react4.Portal, { ...props });
-}
+// src/components/portal/portal.tsx
+var import_react5 = require("@ark-ui/react");
+var Portal = import_react5.Portal;
 
 // src/components/dialog/dialog.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -363,29 +433,26 @@ function Dialog2(props) {
 
 // src/context/prompt-modal.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react5.createContext)(null);
+var PromptModalContext = (0, import_react6.createContext)(null);
 function PromptModal(props) {
-  const resolveRef = (0, import_react5.useRef)(null);
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [content, setContent] = (0, import_react5.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react5.useState)("");
+  const resolveRef = (0, import_react6.useRef)(null);
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [content, setContent] = (0, import_react6.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react6.useState)("");
   const { icons } = useCerberusContext();
   const { promptModal: PromptIcon } = icons;
-  const isValid = (0, import_react5.useMemo)(
+  const isValid = (0, import_react6.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react5.useMemo)(
+  const palette = (0, import_react6.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react5.useCallback)(
-    (e) => {
-      setInputValue(e.currentTarget.value);
-    },
-    [content]
-  );
-  const handleChoice = (0, import_react5.useCallback)(
+  const handleChange = (0, import_react6.useCallback)((e) => {
+    setInputValue(e.currentTarget.value);
+  }, []);
+  const handleChoice = (0, import_react6.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -396,7 +463,7 @@ function PromptModal(props) {
     },
     [inputValue, setOpen]
   );
-  const handleShow = (0, import_react5.useCallback)(
+  const handleShow = (0, import_react6.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -406,7 +473,7 @@ function PromptModal(props) {
     },
     [setOpen]
   );
-  const value = (0, import_react5.useMemo)(
+  const value = (0, import_react6.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -494,7 +561,7 @@ function PromptModal(props) {
                   Button,
                   {
                     autoFocus: true,
-                    className: (0, import_css7.css)({
+                    className: (0, import_css4.css)({
                       w: "1/2"
                     }),
                     disabled: !isValid,
@@ -508,7 +575,7 @@ function PromptModal(props) {
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_dialog2.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   Button,
                   {
-                    className: (0, import_css7.css)({
+                    className: (0, import_css4.css)({
                       w: "1/2"
                     }),
                     name: "cancel",
@@ -527,7 +594,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react5.useContext)(PromptModalContext);
+  const context = (0, import_react6.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }