@cerberus-design/react 0.15.0 → 0.16.0-next-4f6c716

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

@@ -25,55 +25,65 @@ __export(confirm_modal_exports, {
   useConfirmModal: () => useConfirmModal
 });
 module.exports = __toCommonJS(confirm_modal_exports);
-var import_react5 = require("react");
+var import_react6 = require("react");
 
-// src/components/Button.tsx
+// src/components/button/button.tsx
+var import_react2 = require("react");
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx = require("@cerberus/styled-system/jsx");
+
+// src/components/Show.tsx
+var import_react = require("react");
+function Show(props) {
+  const { when, children, fallback } = props;
+  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
+  return (0, import_react.useMemo)(() => {
+    if (condition) return children;
+    return fallback ?? null;
+  }, [condition, children, fallback]);
+}
+
+// src/components/button/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var ButtonContext = (0, import_react2.createContext)({
+  pending: false
+});
 function Button(props) {
-  const { palette, usage, shape, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
+  const value = (0, import_react2.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
       ...nativeProps,
+      disabled: pending || nativeProps.disabled,
       className: (0, import_css.cx)(
         nativeProps.className,
         (0, import_recipes.button)({
           palette,
           usage,
-          shape
+          shape,
+          size
         })
       )
     }
-  );
+  ) });
 }
 
 // src/context/confirm-modal.tsx
 var import_css4 = require("@cerberus/styled-system/css");
 
-// src/components/Show.tsx
-var import_react = require("react");
-function Show(props) {
-  const { when, children, fallback } = props;
-  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
-  return (0, import_react.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
-}
-
 // src/components/Avatar.tsx
 var import_css2 = require("@cerberus/styled-system/css");
 var import_patterns = require("@cerberus/styled-system/patterns");
 var import_recipes2 = require("@cerberus/styled-system/recipes");
 
 // src/context/cerberus.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react2.createContext)(null);
+var CerberusContext = (0, import_react3.createContext)(null);
 function useCerberusContext() {
-  const context = (0, import_react2.useContext)(CerberusContext);
+  const context = (0, import_react3.useContext)(CerberusContext);
   if (!context) {
     throw new Error("useCerberus must be used within a CerberusProvider");
   }
@@ -170,21 +180,21 @@ var iconSizeMap = {
 };
 
 // src/context/confirm-modal.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
+var import_jsx2 = require("@cerberus/styled-system/jsx");
 
 // src/components/Dialog.tsx
-var import_react4 = require("@ark-ui/react");
+var import_react5 = require("@ark-ui/react");
 var import_recipes3 = require("@cerberus/styled-system/recipes");
 
 // src/components/Portal.tsx
-var import_react3 = require("@ark-ui/react");
-var Portal = import_react3.Portal;
+var import_react4 = require("@ark-ui/react");
+var Portal = import_react4.Portal;
 
 // src/components/Dialog.tsx
 var import_css3 = require("@cerberus/styled-system/css");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function DialogProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Dialog.Root, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Dialog.Root, { ...props });
 }
 function Dialog(props) {
   const { size, ...contentProps } = props;
@@ -196,39 +206,39 @@ function Dialog(props) {
 }
 function DialogHeading(props) {
   const styles = (0, import_recipes3.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Dialog.Title, { ...props, className: (0, import_css3.cx)(props.className, styles.title) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Dialog.Title, { ...props, className: (0, import_css3.cx)(props.className, styles.title) });
 }
 function DialogDescription(props) {
   const styles = (0, import_recipes3.dialog)();
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_react4.Dialog.Description,
+    import_react5.Dialog.Description,
     {
       ...props,
       className: (0, import_css3.cx)(props.className, styles.description)
     }
   );
 }
-var DialogTrigger = import_react4.Dialog.Trigger;
-var DialogCloseTrigger = import_react4.Dialog.CloseTrigger;
-var DialogBackdrop = import_react4.Dialog.Backdrop;
-var DialogPositioner = import_react4.Dialog.Positioner;
-var DialogContent = import_react4.Dialog.Content;
+var DialogTrigger = import_react5.Dialog.Trigger;
+var DialogCloseTrigger = import_react5.Dialog.CloseTrigger;
+var DialogBackdrop = import_react5.Dialog.Backdrop;
+var DialogPositioner = import_react5.Dialog.Positioner;
+var DialogContent = import_react5.Dialog.Content;
 
 // src/context/confirm-modal.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react5.createContext)(null);
+var ConfirmModalContext = (0, import_react6.createContext)(null);
 function ConfirmModal(props) {
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [content, setContent] = (0, import_react5.useState)(null);
-  const resolveRef = (0, import_react5.useRef)(null);
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [content, setContent] = (0, import_react6.useState)(null);
+  const resolveRef = (0, import_react6.useRef)(null);
   const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
   const { icons } = useCerberusContext();
   const { confirmModal: ConfirmIcon } = icons;
-  const palette = (0, import_react5.useMemo)(
+  const palette = (0, import_react6.useMemo)(
     () => kind === "destructive" ? "danger" : "action",
     [kind]
   );
-  const handleChoice = (0, import_react5.useCallback)(
+  const handleChoice = (0, import_react6.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -240,7 +250,7 @@ function ConfirmModal(props) {
     },
     [setOpen]
   );
-  const handleShow = (0, import_react5.useCallback)(
+  const handleShow = (0, import_react6.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options });
@@ -250,7 +260,7 @@ function ConfirmModal(props) {
     },
     [setOpen, setContent]
   );
-  const value = (0, import_react5.useMemo)(
+  const value = (0, import_react6.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -258,10 +268,10 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_jsx.HStack,
+          import_jsx2.HStack,
           {
             alignSelf: "center",
             justify: "center",
@@ -296,7 +306,7 @@ function ConfirmModal(props) {
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx.HStack, { gap: "4", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Button,
           {
@@ -329,7 +339,7 @@ function ConfirmModal(props) {
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react5.useContext)(ConfirmModalContext);
+  const context = (0, import_react6.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/confirm-modal.tsx","../../../src/components/Button.tsx","../../../src/components/Show.tsx","../../../src/components/Avatar.tsx","../../../src/context/cerberus.tsx","../../../src/components/Dialog.tsx","../../../src/components/Portal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from './cerberus'\nimport {\n  Dialog,\n  DialogCloseTrigger,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/Dialog'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n  /**\n   * The heading of the confirm modal.\n   */\n  heading: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   */\n  kind?: 'destructive'\n  /**\n   * The description of the confirm modal. Can only be a string for destructive confirm modals.\n   */\n  description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'non-destructive'\n  /**\n   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n   * @example\n   * ```tsx\n   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n   */\n  description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n  | NonDestructiveConfirmModalOptions\n  | DestructiveConfirmOptions\n\nexport type ShowResult =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport type ConfirmModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const resolveRef = useRef<ShowResult>(null)\n  const kind = content?.kind ?? 'non-destructive'\n\n  const { icons } = useCerberusContext()\n  const { confirmModal: ConfirmIcon } = icons\n\n  const palette = useMemo(\n    () => (kind === 'destructive' ? 'danger' : 'action'),\n    [kind],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(true)\n      }\n      resolveRef.current?.(false)\n      setOpen(false)\n    },\n    [setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen, setContent],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <HStack\n                alignSelf=\"center\"\n                justify=\"center\"\n                paddingBlockEnd=\"md\"\n                w=\"full\"\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<ConfirmIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<ConfirmIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <HStack gap=\"4\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n              <DialogCloseTrigger asChild>\n                <Button\n                  className={css({\n                    w: '1/2',\n                  })}\n                  name=\"cancel\"\n                  onClick={handleChoice}\n                  usage=\"outlined\"\n                  value=\"false\"\n                >\n                  {content?.cancelText}\n                </Button>\n              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { icons } = useCerberusContext()\n  const { avatar: AvatarIcon } = icons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Dialog as ArkDialog,\n  type DialogContentProps as ArkDialogContentProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n} from '@ark-ui/react'\nimport {\n  dialog,\n  type DialogVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Portal } from './Portal'\nimport { cx } from '@cerberus/styled-system/css'\n\nexport type DialogProviderProps = DialogRootProps\n\n/**\n * The provider that controls the dialog components.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *  <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogProvider(props: DialogProviderProps) {\n  return <ArkDialog.Root {...props} />\n}\n\nexport interface DialogProps\n  extends Omit<ArkDialogContentProps, 'size'>,\n    DialogVariantProps {}\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Portal>\n      <DialogBackdrop className={styles.backdrop} />\n      <DialogPositioner className={styles.positioner}>\n        <DialogContent className={styles.content} {...contentProps} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n\n/**\n * The heading of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Title {...props} className={cx(props.className, styles.title)} />\n  )\n}\n\n/**\n * The description of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <DialogDescription>Dialog Description</DialogDescription>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogDescription(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Description\n      {...props}\n      className={cx(props.className, styles.description)}\n    />\n  )\n}\n\n/**\n * The trigger that opens the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogTrigger asChild>\n *  <Button>Open Dialog</Button>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = ArkDialog.Trigger\n\n/**\n * The trigger that closes the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport const DialogCloseTrigger = ArkDialog.CloseTrigger\n\n/**\n * The backdrop of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogBackdrop = ArkDialog.Backdrop\n\n/**\n * The positioner of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogPositioner = ArkDialog.Positioner\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogContent = ArkDialog.Content\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n"],"mappings":"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","names":["import_react","import_css","import_css","import_recipes","import_react","import_jsx_runtime","import_jsx_runtime","import_react","import_recipes","import_react","ArkPortal","import_css","import_jsx_runtime","ArkDialog","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/context/confirm-modal.tsx","../../../src/components/button/button.tsx","../../../src/components/Show.tsx","../../../src/components/Avatar.tsx","../../../src/context/cerberus.tsx","../../../src/components/Dialog.tsx","../../../src/components/Portal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Button } from '../components/button/button'\nimport { css } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from './cerberus'\nimport {\n  Dialog,\n  DialogCloseTrigger,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/Dialog'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n  /**\n   * The heading of the confirm modal.\n   */\n  heading: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   */\n  kind?: 'destructive'\n  /**\n   * The description of the confirm modal. Can only be a string for destructive confirm modals.\n   */\n  description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'non-destructive'\n  /**\n   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n   * @example\n   * ```tsx\n   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n   */\n  description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n  | NonDestructiveConfirmModalOptions\n  | DestructiveConfirmOptions\n\nexport type ShowResult =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport type ConfirmModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const resolveRef = useRef<ShowResult>(null)\n  const kind = content?.kind ?? 'non-destructive'\n\n  const { icons } = useCerberusContext()\n  const { confirmModal: ConfirmIcon } = icons\n\n  const palette = useMemo(\n    () => (kind === 'destructive' ? 'danger' : 'action'),\n    [kind],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(true)\n      }\n      resolveRef.current?.(false)\n      setOpen(false)\n    },\n    [setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen, setContent],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <HStack\n                alignSelf=\"center\"\n                justify=\"center\"\n                paddingBlockEnd=\"md\"\n                w=\"full\"\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<ConfirmIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<ConfirmIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <HStack gap=\"4\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n              <DialogCloseTrigger asChild>\n                <Button\n                  className={css({\n                    w: '1/2',\n                  })}\n                  name=\"cancel\"\n                  onClick={handleChoice}\n                  usage=\"outlined\"\n                  value=\"false\"\n                >\n                  {content?.cancelText}\n                </Button>\n              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n","'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { icons } = useCerberusContext()\n  const { avatar: AvatarIcon } = icons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Dialog as ArkDialog,\n  type DialogContentProps as ArkDialogContentProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n} from '@ark-ui/react'\nimport {\n  dialog,\n  type DialogVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Portal } from './Portal'\nimport { cx } from '@cerberus/styled-system/css'\n\nexport type DialogProviderProps = DialogRootProps\n\n/**\n * The provider that controls the dialog components.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *  <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogProvider(props: DialogProviderProps) {\n  return <ArkDialog.Root {...props} />\n}\n\nexport interface DialogProps\n  extends Omit<ArkDialogContentProps, 'size'>,\n    DialogVariantProps {}\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Portal>\n      <DialogBackdrop className={styles.backdrop} />\n      <DialogPositioner className={styles.positioner}>\n        <DialogContent className={styles.content} {...contentProps} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n\n/**\n * The heading of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Title {...props} className={cx(props.className, styles.title)} />\n  )\n}\n\n/**\n * The description of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <DialogDescription>Dialog Description</DialogDescription>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogDescription(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Description\n      {...props}\n      className={cx(props.className, styles.description)}\n    />\n  )\n}\n\n/**\n * The trigger that opens the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogTrigger asChild>\n *  <Button>Open Dialog</Button>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = ArkDialog.Trigger\n\n/**\n * The trigger that closes the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport const DialogCloseTrigger = ArkDialog.CloseTrigger\n\n/**\n * The backdrop of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogBackdrop = ArkDialog.Backdrop\n\n/**\n * The positioner of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogPositioner = ArkDialog.Positioner\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogContent = ArkDialog.Content\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n"],"mappings":"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","names":["import_react","import_react","import_css","import_css","import_recipes","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx","import_react","import_recipes","import_react","ArkPortal","import_css","import_jsx_runtime","ArkDialog","import_jsx_runtime"]}

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

@@ -25,39 +25,49 @@ __export(cta_modal_exports, {
   useCTAModal: () => useCTAModal
 });
 module.exports = __toCommonJS(cta_modal_exports);
-var import_react6 = require("react");
+var import_react7 = require("react");
 
-// src/components/Button.tsx
+// src/components/button/button.tsx
+var import_react2 = require("react");
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx = require("@cerberus/styled-system/jsx");
+
+// src/components/Show.tsx
+var import_react = require("react");
+function Show(props) {
+  const { when, children, fallback } = props;
+  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
+  return (0, import_react.useMemo)(() => {
+    if (condition) return children;
+    return fallback ?? null;
+  }, [condition, children, fallback]);
+}
+
+// src/components/button/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var ButtonContext = (0, import_react2.createContext)({
+  pending: false
+});
 function Button(props) {
-  const { palette, usage, shape, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
+  const value = (0, import_react2.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
       ...nativeProps,
+      disabled: pending || nativeProps.disabled,
       className: (0, import_css.cx)(
         nativeProps.className,
         (0, import_recipes.button)({
           palette,
           usage,
-          shape
+          shape,
+          size
         })
       )
     }
-  );
-}
-
-// src/components/Show.tsx
-var import_react = require("react");
-function Show(props) {
-  const { when, children, fallback } = props;
-  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
-  return (0, import_react.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
+  ) });
 }
 
 // src/components/Avatar.tsx
@@ -66,11 +76,11 @@ var import_patterns = require("@cerberus/styled-system/patterns");
 var import_recipes2 = require("@cerberus/styled-system/recipes");
 
 // src/context/cerberus.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react2.createContext)(null);
+var CerberusContext = (0, import_react3.createContext)(null);
 function useCerberusContext() {
-  const context = (0, import_react2.useContext)(CerberusContext);
+  const context = (0, import_react3.useContext)(CerberusContext);
   if (!context) {
     throw new Error("useCerberus must be used within a CerberusProvider");
   }
@@ -167,23 +177,23 @@ var iconSizeMap = {
 };
 
 // src/context/cta-modal.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
-var import_css6 = require("@cerberus/styled-system/css");
 var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_css6 = require("@cerberus/styled-system/css");
+var import_jsx3 = require("@cerberus/styled-system/jsx");
 
 // src/components/Dialog.tsx
-var import_react4 = require("@ark-ui/react");
+var import_react5 = require("@ark-ui/react");
 var import_recipes3 = require("@cerberus/styled-system/recipes");
 
 // src/components/Portal.tsx
-var import_react3 = require("@ark-ui/react");
-var Portal = import_react3.Portal;
+var import_react4 = require("@ark-ui/react");
+var Portal = import_react4.Portal;
 
 // src/components/Dialog.tsx
 var import_css3 = require("@cerberus/styled-system/css");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function DialogProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Dialog.Root, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Dialog.Root, { ...props });
 }
 function Dialog(props) {
   const { size, ...contentProps } = props;
@@ -195,26 +205,26 @@ function Dialog(props) {
 }
 function DialogHeading(props) {
   const styles = (0, import_recipes3.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Dialog.Title, { ...props, className: (0, import_css3.cx)(props.className, styles.title) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Dialog.Title, { ...props, className: (0, import_css3.cx)(props.className, styles.title) });
 }
 function DialogDescription(props) {
   const styles = (0, import_recipes3.dialog)();
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_react4.Dialog.Description,
+    import_react5.Dialog.Description,
     {
       ...props,
       className: (0, import_css3.cx)(props.className, styles.description)
     }
   );
 }
-var DialogTrigger = import_react4.Dialog.Trigger;
-var DialogCloseTrigger = import_react4.Dialog.CloseTrigger;
-var DialogBackdrop = import_react4.Dialog.Backdrop;
-var DialogPositioner = import_react4.Dialog.Positioner;
-var DialogContent = import_react4.Dialog.Content;
+var DialogTrigger = import_react5.Dialog.Trigger;
+var DialogCloseTrigger = import_react5.Dialog.CloseTrigger;
+var DialogBackdrop = import_react5.Dialog.Backdrop;
+var DialogPositioner = import_react5.Dialog.Positioner;
+var DialogContent = import_react5.Dialog.Content;
 
 // src/components/Dialog.client.tsx
-var import_react5 = require("@ark-ui/react");
+var import_react6 = require("@ark-ui/react");
 var import_recipes5 = require("@cerberus/styled-system/recipes");
 var import_css5 = require("@cerberus/styled-system/css");
 
@@ -248,7 +258,7 @@ function DialogCloseIconTrigger(props) {
   const { close: CloseIcon } = icons;
   const styles = (0, import_recipes5.dialog)();
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react5.Dialog.CloseTrigger,
+    import_react6.Dialog.CloseTrigger,
     {
       ...props,
       className: (0, import_css5.cx)(props.className, styles.closeTrigger),
@@ -269,15 +279,15 @@ function DialogCloseIconTrigger(props) {
 
 // src/context/cta-modal.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var CTAModalContext = (0, import_react6.createContext)(null);
+var CTAModalContext = (0, import_react7.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  const [content, setContent] = (0, import_react6.useState)(null);
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [content, setContent] = (0, import_react7.useState)(null);
   const confirmIcon = content == null ? void 0 : content.icon;
   const { icons } = useCerberusContext();
   const { confirmModal: FallbackIcon } = icons;
-  const handleShow = (0, import_react6.useCallback)(
+  const handleShow = (0, import_react7.useCallback)(
     (options) => {
       const maxActions = 2;
       if (options.actions.length > maxActions) {
@@ -290,7 +300,7 @@ function CTAModal(props) {
     },
     [setOpen]
   );
-  const handleActionClick = (0, import_react6.useCallback)(
+  const handleActionClick = (0, import_react7.useCallback)(
     (event) => {
       const index = event.currentTarget.getAttribute("data-index");
       const action = content == null ? void 0 : content.actions[Number(index)];
@@ -300,7 +310,7 @@ function CTAModal(props) {
     },
     [content, setOpen]
   );
-  const value = (0, import_react6.useMemo)(
+  const value = (0, import_react7.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -310,8 +320,8 @@ function CTAModal(props) {
     props.children,
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Dialog, { size: "sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogCloseIconTrigger, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx3.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx3.VStack, { gap: "lg", w: "full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Avatar,
             {
@@ -331,7 +341,7 @@ function CTAModal(props) {
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Button,
           {
             "data-index": index,
@@ -350,7 +360,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react6.useContext)(CTAModalContext);
+  const context = (0, import_react7.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }