@cerberus-design/react/build/legacy/context/prompt-modal.cjs

The Cerberus Design React component library.

"use strict";
"use client";
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 });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  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 = {};
__export(prompt_modal_exports, {
  PromptModal: () => PromptModal,
  usePromptModal: () => usePromptModal
});
module.exports = __toCommonJS(prompt_modal_exports);
var import_react6 = require("react");
var import_dialog2 = require("@ark-ui/react/dialog");
var import_jsx3 = require("styled-system/jsx");
var import_css4 = require("styled-system/css");
var import_patterns = require("styled-system/patterns");

// src/utils/index.ts
function splitProps(props, ...keyGroups) {
  const result = keyGroups.map(() => ({}));
  const rest = {};
  for (const key in props) {
    let assigned = false;
    for (let i = 0; i < keyGroups.length; i++) {
      if (keyGroups[i].includes(key)) {
        result[i][key] = props[key];
        assigned = true;
        break;
      }
    }
    if (!assigned) {
      rest[key] = props[key];
    }
  }
  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_field2 = require("@ark-ui/react/field");
var import_react3 = require("@ark-ui/react");
var import_recipes3 = 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.
     * Can be a string or a component reference.
     * @returns A new React component that applies Cerberus features to the
     * original component.
     *
     * @example
     * ```ts
     * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
     * const Button = withNoRecipe('button')
     * ```
     */
    __publicField(this, "withNoRecipe", (Component, options) => {
      const { defaultProps } = options || {};
      const El = 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)(El, { ...defaultProps, ...styles, ...nativeProps });
      };
      if (this.validateComponent(El)) {
        const ElName = typeof El === "string" ? El : El.displayName || El.name;
        CerbComponent.displayName = ElName;
      }
      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 El = Component;
      const recipe = this.recipe;
      const CerbComponent = (internalProps) => {
        const {
          css: customCss,
          className,
          ...restOfInternalProps
        } = internalProps;
        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
        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))
          }
        );
      };
      if (this.validateComponent(El)) {
        const ElName = typeof El === "string" ? El : El.displayName || El.name;
        CerbComponent.displayName = ElName;
      }
      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 El = Component;
      const recipe = this.recipe;
      const CerbComponent = (internalProps) => {
        const {
          css: customCss,
          className,
          ...restOfInternalProps
        } = internalProps;
        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
        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))
          }
        );
      };
      if (this.validateComponent(El)) {
        const ElName = typeof El === "string" ? El : El.displayName || El.name;
        CerbComponent.displayName = ElName;
      }
      return CerbComponent;
    });
    this.recipe = recipe ?? null;
  }
  hasStyles(styles) {
    if (styles) {
      return {
        className: styles
      };
    }
    return {};
  }
  validateComponent(Component) {
    if (typeof Component !== "function" && typeof Component !== "object") {
      return false;
    }
    return true;
  }
};

// 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_runtime4 = require("react/jsx-runtime");
var CerberusContext = (0, import_react.createContext)(null);
function useCerberusContext() {
  const context = (0, import_react.useContext)(CerberusContext);
  if (!context) {
    throw new Error("useCerberus must be used within a CerberusProvider");
  }
  return context;
}

// src/components/field/status-indicator.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
function FieldStatusIndicator(props) {
  const { fallback, ...nativeProps } = props;
  const fieldContext = (0, import_react2.useFieldContext)();
  const styles = (0, import_recipes2.field)();
  const { icons } = useCerberusContext();
  const { invalid: InvalidIcon } = icons;
  if (!fieldContext) return null;
  if (fieldContext.invalid) {
    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      "span",
      {
        ...nativeProps,
        "aria-hidden": "true",
        "data-invalid": true,
        className: (0, import_css3.cx)(nativeProps.className, styles.statusIndicator),
        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InvalidIcon, {})
      }
    );
  }
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    "span",
    {
      ...nativeProps,
      "aria-hidden": "true",
      "data-part": "end-indicator",
      className: (0, import_css3.cx)(nativeProps.className, styles.endIndicator),
      children: fallback
    }
  );
}

// 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_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" }
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldStatusIndicator, { fallback: endIcon })
  ] });
}

// 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_recipes4 = require("styled-system/recipes");
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 { 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 { 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 = {
  Root: AvatarRoot,
  Image: AvatarImage,
  Fallback: AvatarFallback
};

// src/components/avatar/avatar.tsx
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_runtime10.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
    Show,
    {
      when: children,
      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/text.tsx
var import_jsx2 = require("styled-system/jsx");
var import_jsx_runtime11 = require("react/jsx-runtime");
function Text(props) {
  const { as = "p", ...pandaJSXProps } = props;
  const cache = {
    h1: import_jsx2.H1,
    h2: import_jsx2.H2,
    h3: import_jsx2.H3,
    h4: import_jsx2.H4,
    h5: import_jsx2.H5,
    h6: import_jsx2.H6,
    strong: import_jsx2.Strong,
    em: import_jsx2.Em,
    small: import_jsx2.Small,
    span: import_jsx2.Span,
    p: import_jsx2.P
  };
  if (as in cache) {
    const Component = cache[as];
    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component, { ...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_recipes6 = require("styled-system/recipes");
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/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");
function Dialog2(props) {
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Portal, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogBackdrop, {}),
    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogContent, { ...props }) })
  ] });
}

// src/context/prompt-modal.tsx
var import_jsx_runtime13 = require("react/jsx-runtime");
var PromptModalContext = (0, import_react6.createContext)(null);
function PromptModal(props) {
  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_react6.useMemo)(
    () => inputValue === (content == null ? void 0 : content.key),
    [inputValue, content]
  );
  const palette = (0, import_react6.useMemo)(
    () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
    [content]
  );
  const handleChange = (0, import_react6.useCallback)((e) => {
    setInputValue(e.currentTarget.value);
  }, []);
  const handleChoice = (0, import_react6.useCallback)(
    (e) => {
      var _a;
      const target = e.currentTarget;
      if (target.value === "true") {
        (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, inputValue);
      }
      setOpen(false);
    },
    [inputValue, setOpen]
  );
  const handleShow = (0, import_react6.useCallback)(
    (options) => {
      return new Promise((resolve) => {
        setContent({ ...options, kind: options.kind || "non-destructive" });
        setOpen(true);
        resolveRef.current = resolve;
      });
    },
    [setOpen]
  );
  const value = (0, import_react6.useMemo)(
    () => ({
      show: handleShow
    }),
    [handleShow]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(PromptModalContext.Provider, { value, children: [
    props.children,
    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
      Dialog2,
      {
        size: "sm",
        style: {
          "--dialog-content-min-h": "auto"
        },
        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
          import_jsx3.VStack,
          {
            alignItems: "flex-start",
            h: "full",
            justify: "space-between",
            w: "full",
            children: [
              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                import_jsx3.HStack,
                {
                  alignSelf: "center",
                  justify: "center",
                  paddingBlockEnd: "md",
                  w: "full",
                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                    Show,
                    {
                      when: palette === "danger",
                      fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                        Avatar2,
                        {
                          gradient: "charon-light",
                          fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PromptIcon, { size: 24 })
                        }
                      ),
                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                        Avatar2,
                        {
                          gradient: "hades-dark",
                          fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PromptIcon, { size: 24 })
                        }
                      )
                    }
                  )
                }
              ),
              /* @__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_jsx3.VStack,
                {
                  alignItems: "flex-start",
                  marginBlockStart: "md",
                  marginBlockEnd: "lg",
                  w: "full",
                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(FieldRoot, { invalid: !isValid, children: [
                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                      FieldLabel,
                      {
                        className: (0, import_patterns.hstack)({
                          gap: "xs",
                          justify: "flex-start",
                          marginBlockEnd: "xs",
                          textStyle: "label-md",
                          w: "initial"
                        }),
                        children: [
                          "Type",
                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
                          "to confirm"
                        ]
                      }
                    ),
                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Input, { name: "confirm", onChange: handleChange, type: "text" })
                  ] })
                }
              ),
              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx3.HStack, { gap: "md", justify: "stretch", w: "full", children: [
                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                  Button,
                  {
                    autoFocus: true,
                    className: (0, import_css4.css)({
                      w: "1/2"
                    }),
                    disabled: !isValid,
                    name: "confirm",
                    onClick: handleChoice,
                    palette,
                    value: "true",
                    children: content == null ? void 0 : content.actionText
                  }
                ),
                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_dialog2.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.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 usePromptModal() {
  const context = (0, import_react6.useContext)(PromptModalContext);
  if (context === null) {
    throw new Error("usePromptModal must be used within a PromptModal Provider");
  }
  return context;
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  PromptModal,
  usePromptModal
});
//# sourceMappingURL=prompt-modal.cjs.map