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

The Cerberus Design React component library.

import {
  Dialog
} from "./chunk-OZTYYWIX.js";
import {
  DialogCloseTrigger,
  DialogDescription,
  DialogHeading,
  DialogProvider
} from "./chunk-IRJITAGE.js";
import {
  Button
} from "./chunk-JIEN2PM7.js";
import {
  Avatar
} from "./chunk-AOLWIMWV.js";
import {
  Show
} from "./chunk-NUXMADXV.js";
import {
  useCerberusContext
} from "./chunk-GITT5645.js";

// src/context/confirm-modal.tsx
import {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useRef,
  useState
} from "react";
import { css } from "styled-system/css";
import { HStack, VStack } from "styled-system/jsx";
import { jsx, jsxs } from "react/jsx-runtime";
var ConfirmModalContext = createContext(null);
function ConfirmModal(props) {
  const [open, setOpen] = useState(false);
  const [content, setContent] = useState(null);
  const resolveRef = useRef(null);
  const kind = content?.kind ?? "non-destructive";
  const { icons } = useCerberusContext();
  const { confirmModal: ConfirmIcon } = icons;
  const palette = useMemo(
    () => kind === "destructive" ? "danger" : "action",
    [kind]
  );
  const handleChoice = useCallback(
    (e) => {
      const target = e.currentTarget;
      if (target.value === "true") {
        resolveRef.current?.(true);
      }
      resolveRef.current?.(false);
      setOpen(false);
    },
    [setOpen]
  );
  const handleShow = useCallback(
    (options) => {
      return new Promise((resolve) => {
        setContent({ ...options });
        setOpen(true);
        resolveRef.current = resolve;
      });
    },
    [setOpen, setContent]
  );
  const handleOpenChange = useCallback(
    ({ open: open2 }) => {
      setOpen(open2);
      if (!open2) {
        resolveRef.current?.(null);
        resolveRef.current = null;
      }
    },
    [setOpen]
  );
  const value = useMemo(
    () => ({
      show: handleShow
    }),
    [handleShow]
  );
  return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
    props.children,
    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(
      Dialog,
      {
        size: "sm",
        style: {
          "--dialog-content-min-h": "auto"
        },
        children: /* @__PURE__ */ jsxs(
          VStack,
          {
            alignItems: "flex-start",
            gap: "md",
            justify: "space-between",
            w: "full",
            children: [
              /* @__PURE__ */ jsx(
                HStack,
                {
                  alignSelf: "center",
                  justify: "center",
                  paddingBlockEnd: "md",
                  w: "full",
                  children: /* @__PURE__ */ jsx(
                    Show,
                    {
                      when: palette === "danger",
                      fallback: /* @__PURE__ */ jsx(
                        Avatar,
                        {
                          gradient: "charon-light",
                          fallback: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 })
                        }
                      ),
                      children: /* @__PURE__ */ jsx(
                        Avatar,
                        {
                          gradient: "hades-dark",
                          fallback: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 })
                        }
                      )
                    }
                  )
                }
              ),
              /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
              /* @__PURE__ */ jsx(Show, { when: content?.description, children: /* @__PURE__ */ jsx(DialogDescription, { children: content?.description }) }),
              /* @__PURE__ */ jsxs(HStack, { gap: "md", pt: "md", w: "full", children: [
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    autoFocus: true,
                    className: css({
                      w: "1/2"
                    }),
                    name: "confirm",
                    onClick: handleChoice,
                    palette,
                    value: "true",
                    children: content?.actionText
                  }
                ),
                /* @__PURE__ */ jsx(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                  Button,
                  {
                    className: css({
                      w: "1/2"
                    }),
                    name: "cancel",
                    onClick: handleChoice,
                    usage: "outlined",
                    value: "false",
                    children: content?.cancelText
                  }
                ) })
              ] })
            ]
          }
        )
      }
    ) })
  ] });
}
function useConfirmModal() {
  const context = useContext(ConfirmModalContext);
  if (context === null) {
    throw new Error(
      "useConfirmModal must be used within a ConfirmModal Provider"
    );
  }
  return context;
}

export {
  ConfirmModal,
  useConfirmModal
};
//# sourceMappingURL=chunk-OYTEXDS6.js.map