@cerberus-design/react/build/legacy/components/cta-dialog/provider.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/components/cta-dialog/provider.tsx
var provider_exports = {};
__export(provider_exports, {
  CTAModal: () => CTAModal,
  useCTAModal: () => useCTAModal
});
module.exports = __toCommonJS(provider_exports);
var import_react5 = require("react");
var import_jsx2 = require("styled-system/jsx");

// src/context/cerberus.tsx
var import_react = require("react");
var import_jsx_runtime = 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/show/show.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function Show(props) {
  const { when, children, fallback } = props;
  if (when) {
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
  }
  if (fallback) {
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
  }
  return null;
}

// src/components/for/for.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function For(props) {
  var _a;
  if (!props.each || !props.each.length) {
    return props.fallback || null;
  }
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: (_a = props.each) == null ? void 0 : _a.map(props.children) });
}

// 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/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");
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_runtime4.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_runtime4.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_runtime4.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/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,
  Image: AvatarImage,
  Fallback: AvatarFallback
};

// src/components/avatar/avatar.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
function Avatar2(props) {
  const [imgProps, { fallback, children }, rootProps] = splitProps(
    props,
    ["alt", "src"],
    ["fallback", "children"]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    Show,
    {
      when: children,
      fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarParts.Fallback, { children: fallback }),
        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarParts.Image, { ...imgProps })
      ] }),
      children
    }
  ) });
}

// src/components/dialog/primitives.tsx
var import_dialog = require("@ark-ui/react/dialog");
var import_recipes2 = require("styled-system/recipes");
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/icon-button/primitives.ts
var import_factory = require("@ark-ui/react/factory");
var import_recipes3 = require("styled-system/recipes");
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, ...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_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_runtime7.jsx)(
    DialogCloseTrigger,
    {
      ...props,
      className: (0, import_css2.cx)(styles.closeTrigger, props.className),
      asChild: true,
      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
        IconButton,
        {
          ariaLabel: "Close dialog",
          palette: "action",
          size: "lg",
          usage: "ghost",
          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {})
        }
      )
    }
  );
}

// src/components/portal/portal.tsx
var import_react2 = require("@ark-ui/react");
var Portal = import_react2.Portal;

// src/components/dialog/dialog.tsx
var import_jsx_runtime8 = 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 }) })
  ] });
}

// src/components/cta-dialog/context.tsx
var import_react3 = require("react");
var CTAModalContext = (0, import_react3.createContext)(null);

// src/components/cta-dialog/trigger-item.tsx
var import_css3 = require("styled-system/css");

// src/components/button/button.tsx
var import_react4 = require("react");
var import_jsx = require("styled-system/jsx");

// 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 { 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/cta-dialog/trigger-item.tsx
var import_factory3 = require("@ark-ui/react/factory");
var import_recipes6 = require("styled-system/recipes");
var import_jsx_runtime10 = require("react/jsx-runtime");
function TriggerItem(props) {
  const { asChild, children, ...buttonProps } = props;
  if (asChild) {
    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
      import_factory3.ark.div,
      {
        className: (0, import_css3.cx)(
          (0, import_recipes6.button)({
            shape: "rounded",
            usage: "ghost"
          }),
          (0, import_css3.css)({
            w: "1/2"
          })
        ),
        asChild: true,
        children
      }
    );
  }
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
    Button,
    {
      ...buttonProps,
      className: (0, import_css3.css)({
        w: "1/2"
      }),
      shape: "rounded",
      usage: "outlined",
      children
    }
  );
}

// src/components/cta-dialog/provider.tsx
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);
  const confirmIcon = content == null ? void 0 : content.icon;
  const { icons } = useCerberusContext();
  const { confirmModal: FallbackIcon } = icons;
  const handleShow = (0, import_react5.useCallback)(
    (options) => {
      setContent({ ...options });
      setOpen(true);
    },
    [setOpen]
  );
  const handleActionClick = (0, import_react5.useCallback)(
    (event) => {
      var _a;
      const index = Number(event.currentTarget.getAttribute("data-index"));
      const contentActions = content == null ? void 0 : content.actions;
      const action = contentActions._actions[index];
      (_a = action == null ? void 0 : action.handleClick) == null ? void 0 : _a.call(action, event);
      setOpen(false);
    },
    [content, setOpen]
  );
  const value = (0, import_react5.useMemo)(
    () => ({
      show: handleShow
    }),
    [handleShow]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(CTAModalContext.Provider, { value, children: [
    props.children,
    /* @__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,
                {
                  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_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() {
  const context = (0, import_react5.useContext)(CTAModalContext);
  if (context === null) {
    throw new Error("useCTAModal must be used within a CTAModal Provider");
  }
  return context;
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  CTAModal,
  useCTAModal
});
//# sourceMappingURL=provider.cjs.map