@cerberus-design/react 0.16.0 → 0.17.0-next-e7f9956

package/build/legacy/components/combobox/use-stateful-collection.cjs

@@ -0,0 +1,72 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// src/components/combobox/use-stateful-collection.ts
+var use_stateful_collection_exports = {};
+__export(use_stateful_collection_exports, {
+  useStatefulCollection: () => useStatefulCollection
+});
+module.exports = __toCommonJS(use_stateful_collection_exports);
+var import_react = require("react");
+
+// src/components/select/primitives.tsx
+var import_select = require("@ark-ui/react/select");
+var import_recipes = require("@cerberus/styled-system/recipes");
+var import_css = require("@cerberus/styled-system/css");
+var import_jsx_runtime = require("react/jsx-runtime");
+function createSelectCollection(collection) {
+  return (0, import_select.createListCollection)({
+    items: collection
+  });
+}
+
+// src/components/combobox/use-stateful-collection.ts
+function useStatefulCollection(initialItems = []) {
+  const [items, setItems] = (0, import_react.useState)(initialItems);
+  const [filterValue, setFilterValue] = (0, import_react.useState)([]);
+  const collection = (0, import_react.useMemo)(() => createSelectCollection(items), [items]);
+  const handleInputChange = (0, import_react.useCallback)(
+    (details) => {
+      if (details.inputValue === "") {
+        return setItems(initialItems);
+      }
+      setItems(
+        (prev) => prev.filter(
+          (item) => item.value.includes(details.inputValue.toLowerCase())
+        )
+      );
+      setFilterValue(details.inputValue.split(""));
+    },
+    [initialItems]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      collection,
+      filterChars: filterValue,
+      handleInputChange
+    }),
+    [collection, filterValue, handleInputChange]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStatefulCollection
+});
+//# sourceMappingURL=use-stateful-collection.cjs.map

package/build/legacy/components/combobox/use-stateful-collection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/combobox/use-stateful-collection.ts","../../../../src/components/select/primitives.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useState } from 'react'\nimport type { ComboboxInputValueChangeDetails } from '@ark-ui/react/combobox'\nimport type { SelectCollectionItem } from '../select/select'\nimport { createSelectCollection } from '../select/primitives'\n\n/**\n * This module contains a custom hook that provides a stateful collection for\n * the Combobox component.\n */\n\nexport interface StatefulCollectionReturn {\n  /**\n   * The collection of items.\n   */\n  collection: ReturnType<typeof createSelectCollection>\n  /**\n   * The filter value split into an array of characters.\n   */\n  filterChars: string[]\n  /**\n   * The function to handle input changes.\n   */\n  handleInputChange: (details: ComboboxInputValueChangeDetails) => void\n}\n\n/**\n * This hook provides a stateful collection for the Combobox component.\n * It returns a collection of items and a function to handle input changes.\n * @param initialItems - The initial collection of items.\n * @return An object containing the collection and a function to handle input changes.\n */\nexport function useStatefulCollection(\n  initialItems: SelectCollectionItem[] = [],\n): StatefulCollectionReturn {\n  const [items, setItems] = useState(initialItems)\n  const [filterValue, setFilterValue] = useState<string[]>([])\n\n  const collection = useMemo(() => createSelectCollection(items), [items])\n\n  const handleInputChange = useCallback(\n    (details: ComboboxInputValueChangeDetails) => {\n      if (details.inputValue === '') {\n        return setItems(initialItems)\n      }\n      setItems((prev) =>\n        prev.filter((item) =>\n          item.value.includes(details.inputValue.toLowerCase()),\n        ),\n      )\n      setFilterValue(details.inputValue.split(''))\n    },\n    [initialItems],\n  )\n\n  return useMemo(\n    () => ({\n      collection,\n      filterChars: filterValue,\n      handleInputChange,\n    }),\n    [collection, filterValue, handleInputChange],\n  )\n}\n","import {\n  createListCollection,\n  Select,\n  type ListCollection,\n  type SelectClearTriggerProps,\n  type SelectContentProps,\n  type SelectControlProps,\n  type SelectHiddenSelectProps,\n  type SelectIndicatorProps,\n  type SelectItemGroupLabelProps,\n  type SelectItemGroupProps,\n  type SelectItemIndicatorProps,\n  type SelectItemProps,\n  type SelectItemTextProps,\n  type SelectLabelProps,\n  type SelectPositionerProps,\n  type SelectRootProps,\n  type SelectTriggerProps,\n  type SelectValueChangeDetails,\n  type SelectValueTextProps,\n} from '@ark-ui/react/select'\nimport {\n  select,\n  type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { SelectCollectionItem } from './select'\n\n/**\n * This module contains the Select primitives\n * @module 'react/select'\n */\n\n/**\n * The SelectRoot component is the context provider for the Select component.\n */\nexport function SelectRoot(\n  props: SelectRootProps<SelectCollectionItem> & SelectVariantProps,\n) {\n  const { size, ...rootProps } = props\n  const styles = select({ size })\n  return (\n    <Select.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The label that appears above the select input.\n */\nexport function SelectLabel(props: SelectLabelProps) {\n  const styles = select()\n  return (\n    <Select.Label {...props} className={cx(styles.label, props.className)} />\n  )\n}\n\n/**\n * The control that wraps the select trigger.\n */\nexport function SelectControl(props: SelectControlProps) {\n  return <Select.Control {...props} />\n}\n\n/**\n * The trigger that opens the dropdown.\n */\nexport function SelectTrigger(props: SelectTriggerProps) {\n  const styles = select()\n  return (\n    <Select.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The text that appears in the trigger.\n */\nexport function SelectValueText(props: SelectValueTextProps) {\n  return <Select.ValueText {...props} />\n}\n\n/**\n * The indicator that appears in the trigger.\n */\nexport function SelectIndicator(props: SelectIndicatorProps) {\n  const styles = select()\n  return (\n    <Select.Indicator\n      {...props}\n      className={cx(styles.indicator, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that clears the selected value.\n */\nexport function SelectClearTrigger(props: SelectClearTriggerProps) {\n  return <Select.ClearTrigger {...props} />\n}\n\n/**\n * The positioner that contains the dropdown.\n */\nexport function SelectPositioner(props: SelectPositionerProps) {\n  const styles = select()\n  return (\n    <Select.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The content of the dropdown (i.e. the container itself).\n */\nexport function SelectContent(props: SelectContentProps & SelectVariantProps) {\n  const { size, ...contentProps } = props\n  const styles = select({ size })\n  return (\n    <Select.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * The container for a group of item options.\n */\nexport function SelectItemGroup(props: SelectItemGroupProps) {\n  return <Select.ItemGroup {...props} />\n}\n\n/**\n * The label for a group of item options.\n */\nexport function SelectItemGroupLabel(props: SelectItemGroupLabelProps) {\n  const styles = select()\n  return (\n    <Select.ItemGroupLabel\n      {...props}\n      className={cx(styles.itemGroupLabel, props.className)}\n    />\n  )\n}\n\n/**\n * The container for an item in the select content.\n */\nexport function SelectItem(props: SelectItemProps) {\n  const styles = select()\n  return <Select.Item {...props} className={cx(styles.item, props.className)} />\n}\n\n/**\n * The text for an item option.\n */\nexport function SelectItemText(props: SelectItemTextProps) {\n  return <Select.ItemText {...props} />\n}\n\n/**\n * The indicator for an item option shown when it is selected.\n */\nexport function SelectItemIndicator(props: SelectItemIndicatorProps) {\n  const styles = select()\n  return (\n    <Select.ItemIndicator\n      {...props}\n      className={cx(styles.itemIndicator, props.className)}\n    />\n  )\n}\n\n/**\n * The native input for a select item.\n */\nexport function SelectHiddenSelect(props: SelectHiddenSelectProps) {\n  return <Select.HiddenSelect {...props} />\n}\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n  collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n  return createListCollection({\n    items: collection,\n  })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA+C;;;ACF/C,oBAoBO;AACP,qBAGO;AACP,iBAAmB;AAiBf;AA0JG,SAAS,uBACd,YACsC;AACtC,aAAO,oCAAqB;AAAA,IAC1B,OAAO;AAAA,EACT,CAAC;AACH;;;ADzKO,SAAS,sBACd,eAAuC,CAAC,GACd;AAC1B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAC/C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAmB,CAAC,CAAC;AAE3D,QAAM,iBAAa,sBAAQ,MAAM,uBAAuB,KAAK,GAAG,CAAC,KAAK,CAAC;AAEvE,QAAM,wBAAoB;AAAA,IACxB,CAAC,YAA6C;AAC5C,UAAI,QAAQ,eAAe,IAAI;AAC7B,eAAO,SAAS,YAAY;AAAA,MAC9B;AACA;AAAA,QAAS,CAAC,SACR,KAAK;AAAA,UAAO,CAAC,SACX,KAAK,MAAM,SAAS,QAAQ,WAAW,YAAY,CAAC;AAAA,QACtD;AAAA,MACF;AACA,qBAAe,QAAQ,WAAW,MAAM,EAAE,CAAC;AAAA,IAC7C;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,YAAY,aAAa,iBAAiB;AAAA,EAC7C;AACF;","names":[]}

package/build/legacy/components/combobox/use-stateful-collection.d.cts

@@ -0,0 +1,2 @@
+export { useStatefulCollection_alias_2 as useStatefulCollection } from '../../_tsup-dts-rollup.cjs';
+export { StatefulCollectionReturn_alias_2 as StatefulCollectionReturn } from '../../_tsup-dts-rollup.cjs';

package/build/legacy/components/{Thead.cjs → cta-dialog/context.cjs}

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -17,20 +18,16 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/Thead.tsx
-var Thead_exports = {};
-__export(Thead_exports, {
-  Thead: () => Thead
+// src/components/cta-dialog/context.tsx
+var context_exports = {};
+__export(context_exports, {
+  CTAModalContext: () => CTAModalContext
 });
-module.exports = __toCommonJS(Thead_exports);
-var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime = require("react/jsx-runtime");
-function Thead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { ...props, className: (0, import_css.cx)(props.className, (0, import_recipes.thead)()) });
-}
+module.exports = __toCommonJS(context_exports);
+var import_react = require("react");
+var CTAModalContext = (0, import_react.createContext)(null);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Thead
+  CTAModalContext
 });
-//# sourceMappingURL=Thead.cjs.map
+//# sourceMappingURL=context.cjs.map

package/build/legacy/components/cta-dialog/context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/cta-dialog/context.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, type ReactNode } from 'react'\nimport type { CTAModalActionReturn } from './utils'\n\n/**\n * This module provides the context for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n  /**\n   * The heading of the cta modal.\n   */\n  heading: string\n  /**\n   * The description of the cta modal.\n   */\n  description?: string\n  /**\n   * The icon used for the modal Avatar.\n   */\n  icon?: ReactNode\n  /**\n   * The actions for the cta modal. Requires 2 actions.\n   */\n  actions: CTAModalActionReturn\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nexport const CTAModalContext = createContext<CTAModalValue | null>(null)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA8C;AA+BvC,IAAM,sBAAkB,4BAAoC,IAAI;","names":[]}

package/build/legacy/components/cta-dialog/context.d.cts

@@ -0,0 +1,3 @@
+export { ShowCTAModalOptions } from '../../_tsup-dts-rollup.cjs';
+export { CTAModalValue } from '../../_tsup-dts-rollup.cjs';
+export { CTAModalContext } from '../../_tsup-dts-rollup.cjs';

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

@@ -0,0 +1,446 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// src/components/cta-dialog/index.ts
+var cta_dialog_exports = {};
+__export(cta_dialog_exports, {
+  CTAModal: () => CTAModal,
+  createCTAModalActions: () => createCTAModalActions,
+  useCTAModal: () => useCTAModal
+});
+module.exports = __toCommonJS(cta_dialog_exports);
+
+// src/components/cta-dialog/provider.tsx
+var import_react6 = require("react");
+var import_jsx2 = require("@cerberus/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.tsx
+var import_react2 = require("react");
+function Show(props) {
+  const { when, children, fallback } = props;
+  const condition = (0, import_react2.useMemo)(() => when ?? false, [when]);
+  return (0, import_react2.useMemo)(() => {
+    if (condition) return children;
+    return fallback ?? null;
+  }, [condition, children, fallback]);
+}
+
+// src/components/for.tsx
+function For(props) {
+  var _a;
+  if (!props.each || !props.each.length) {
+    return props.fallback || null;
+  }
+  return (_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("@cerberus/styled-system/recipes");
+var import_css = require("@cerberus/styled-system/css");
+var import_jsx_runtime2 = 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_runtime2.jsx)(
+    import_avatar.Avatar.Root,
+    {
+      ...rootProps,
+      className: (0, import_css.cx)(styles.root, rootProps.className)
+    }
+  );
+}
+function AvatarImage(props) {
+  const styles = (0, import_recipes.avatar)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)(
+    import_avatar.Avatar.Fallback,
+    {
+      ...props,
+      className: (0, import_css.cx)(styles.fallback, props.className)
+    }
+  );
+}
+
+// src/components/avatar/parts.ts
+var AvatarParts = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+};
+
+// src/components/avatar/avatar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Avatar2(props) {
+  const [imgProps, { fallback, children }, rootProps] = splitProps(
+    props,
+    ["alt", "src"],
+    ["fallback", "children"]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Show,
+    {
+      when: Boolean(children),
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AvatarParts.Fallback, { children: fallback }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AvatarParts.Image, { ...imgProps })
+      ] }),
+      children
+    }
+  ) });
+}
+
+// src/components/dialog/primitives.tsx
+var import_dialog = require("@ark-ui/react/dialog");
+var import_css2 = require("@cerberus/styled-system/css");
+var import_recipes2 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DialogRoot(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dialog.Dialog.Root, { ...props });
+}
+function DialogBackdrop(props) {
+  const styles = (0, import_recipes2.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.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_runtime4.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_runtime4.jsx)(
+    import_dialog.Dialog.Description,
+    {
+      ...props,
+      className: (0, import_css2.cx)(styles.description, props.className)
+    }
+  );
+}
+function DialogCloseTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dialog.Dialog.CloseTrigger, { ...props });
+}
+var DialogProvider = DialogRoot;
+
+// src/components/IconButton.tsx
+var import_factory = require("@ark-ui/react/factory");
+var import_css3 = require("@cerberus/styled-system/css");
+var import_recipes3 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function IconButton(props) {
+  const { ariaLabel, palette, usage, size, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.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
+        })
+      )
+    }
+  );
+}
+
+// src/components/dialog/close-icon-trigger.tsx
+var import_recipes4 = require("@cerberus/styled-system/recipes");
+var import_css4 = require("@cerberus/styled-system/css");
+var import_jsx_runtime6 = 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_runtime6.jsx)(
+    DialogCloseTrigger,
+    {
+      ...props,
+      className: (0, import_css4.cx)(styles.closeTrigger, props.className),
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        IconButton,
+        {
+          ariaLabel: "Close dialog",
+          palette: "action",
+          size: "lg",
+          usage: "ghost",
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, {})
+        }
+      )
+    }
+  );
+}
+
+// src/components/Portal.tsx
+var import_react3 = require("@ark-ui/react");
+var Portal = import_react3.Portal;
+
+// src/components/dialog/dialog.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Dialog2(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogBackdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogContent, { ...props }) })
+  ] });
+}
+
+// src/components/cta-dialog/context.tsx
+var import_react4 = require("react");
+var CTAModalContext = (0, import_react4.createContext)(null);
+
+// src/components/cta-dialog/trigger-item.tsx
+var import_css6 = require("@cerberus/styled-system/css");
+
+// src/components/button/button.tsx
+var import_factory2 = require("@ark-ui/react/factory");
+var import_react5 = require("react");
+var import_css5 = require("@cerberus/styled-system/css");
+var import_recipes5 = require("@cerberus/styled-system/recipes");
+var import_jsx = require("@cerberus/styled-system/jsx");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ButtonContext = (0, import_react5.createContext)({
+  pending: false
+});
+function Button(props) {
+  const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
+  const value = (0, import_react5.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime8.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
+        })
+      )
+    }
+  ) });
+}
+
+// src/components/cta-dialog/trigger-item.tsx
+var import_factory3 = require("@ark-ui/react/factory");
+var import_recipes6 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function TriggerItem(props) {
+  const { asChild, children, ...buttonProps } = props;
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_factory3.ark.div,
+      {
+        className: (0, import_css6.cx)(
+          (0, import_recipes6.button)({
+            shape: "rounded",
+            usage: "ghost"
+          }),
+          (0, import_css6.css)({
+            w: "1/2"
+          })
+        ),
+        asChild: true,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Button,
+    {
+      ...buttonProps,
+      className: (0, import_css6.css)({
+        w: "1/2"
+      }),
+      shape: "rounded",
+      usage: "outlined",
+      children
+    }
+  );
+}
+
+// src/components/cta-dialog/provider.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function CTAModal(props) {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [content, setContent] = (0, import_react6.useState)(null);
+  const confirmIcon = content == null ? void 0 : content.icon;
+  const { icons } = useCerberusContext();
+  const { confirmModal: FallbackIcon } = icons;
+  const handleShow = (0, import_react6.useCallback)(
+    (options) => {
+      setContent({ ...options });
+      setOpen(true);
+    },
+    [setOpen]
+  );
+  const handleActionClick = (0, import_react6.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_react6.useMemo)(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(CTAModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Dialog2, { size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogCloseIconTrigger, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Avatar2,
+            {
+              gradient: "charon-light",
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                Show,
+                {
+                  when: Boolean(confirmIcon),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FallbackIcon, { size: 24 }),
+                  children: confirmIcon
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Show,
+            {
+              when: ((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.type) === "btnAction",
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TriggerItem, { asChild: true, children: action }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
+            },
+            index
+          );
+        } }) })
+      ] })
+    ] }) })
+  ] });
+}
+function useCTAModal() {
+  const context = (0, import_react6.useContext)(CTAModalContext);
+  if (context === null) {
+    throw new Error("useCTAModal must be used within a CTAModal Provider");
+  }
+  return context;
+}
+
+// src/components/cta-dialog/utils.ts
+function createCTAModalActions(providedActions) {
+  if (providedActions.length !== 2) {
+    throw new Error("CTAModal must include 2 actions");
+  }
+  if (providedActions.every(
+    (action) => action == null ? void 0 : action.handleClick
+  )) {
+    return {
+      type: "btnAction",
+      _actions: providedActions
+    };
+  }
+  return {
+    type: "reactNode",
+    _actions: providedActions
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CTAModal,
+  createCTAModalActions,
+  useCTAModal
+});
+//# sourceMappingURL=index.cjs.map