@cerberus-design/react/build/modern/chunk-CONG7TGJ.js

The Cerberus Design React component library.

import {
  TriggerItem
} from "./chunk-3X6VM5FS.js";
import {
  CTAModalContext
} from "./chunk-4LSTU6WU.js";
import {
  For
} from "./chunk-D2TQPEZQ.js";
import {
  DialogCloseIconTrigger
} from "./chunk-2KVC3OJ3.js";
import {
  Dialog
} from "./chunk-OZTYYWIX.js";
import {
  DialogDescription,
  DialogHeading,
  DialogProvider
} from "./chunk-IRJITAGE.js";
import {
  Avatar
} from "./chunk-AOLWIMWV.js";
import {
  Show
} from "./chunk-NUXMADXV.js";
import {
  useCerberusContext
} from "./chunk-GITT5645.js";

// src/components/cta-dialog/provider.tsx
import {
  useCallback,
  useContext,
  useMemo,
  useState
} from "react";
import { HStack, VStack } from "styled-system/jsx";
import { jsx, jsxs } from "react/jsx-runtime";
function CTAModal(props) {
  const [open, setOpen] = useState(false);
  const [content, setContent] = useState(null);
  const confirmIcon = content?.icon;
  const { icons } = useCerberusContext();
  const { confirmModal: FallbackIcon } = icons;
  const handleShow = useCallback(
    (options) => {
      setContent({ ...options });
      setOpen(true);
    },
    [setOpen]
  );
  const handleActionClick = useCallback(
    (event) => {
      const index = Number(event.currentTarget.getAttribute("data-index"));
      const contentActions = content?.actions;
      const action = contentActions._actions[index];
      action?.handleClick?.(event);
      setOpen(false);
    },
    [content, setOpen]
  );
  const value = useMemo(
    () => ({
      show: handleShow
    }),
    [handleShow]
  );
  return /* @__PURE__ */ jsxs(CTAModalContext.Provider, { value, children: [
    props.children,
    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ jsxs(
      Dialog,
      {
        size: "sm",
        style: {
          "--dialog-content-min-h": "auto"
        },
        children: [
          /* @__PURE__ */ jsx(DialogCloseIconTrigger, {}),
          /* @__PURE__ */ jsxs(VStack, { gap: "xl", w: "full", children: [
            /* @__PURE__ */ jsx(VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", w: "full", children: [
              /* @__PURE__ */ jsx(
                Avatar,
                {
                  gradient: "charon-light",
                  fallback: /* @__PURE__ */ jsx(
                    Show,
                    {
                      when: confirmIcon,
                      fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
                      children: confirmIcon
                    }
                  )
                }
              ),
              /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
              /* @__PURE__ */ jsx(DialogDescription, { children: content?.description })
            ] }) }),
            /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(For, { each: content?.actions._actions, children: (action, index) => /* @__PURE__ */ jsx(
              Show,
              {
                when: content?.actions?.type === "btnAction",
                fallback: /* @__PURE__ */ jsx(TriggerItem, { asChild: true, children: action }),
                children: /* @__PURE__ */ jsx(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action?.text })
              },
              index
            ) }) })
          ] })
        ]
      }
    ) })
  ] });
}
function useCTAModal() {
  const context = useContext(CTAModalContext);
  if (context === null) {
    throw new Error("useCTAModal must be used within a CTAModal Provider");
  }
  return context;
}

export {
  CTAModal,
  useCTAModal
};
//# sourceMappingURL=chunk-CONG7TGJ.js.map