@cerberus-design/react
Version:
The Cerberus Design React component library.
213 lines (208 loc) • 8.78 kB
JavaScript
'use client';
'use strict';
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const jsx = require('styled-system/jsx');
const css = require('styled-system/css');
const patterns = require('styled-system/patterns');
const primitives$1 = require('../components/field/primitives.cjs');
const button$1 = require('../components/button/button.cjs');
const parts = require('../components/clipboard/parts.cjs');
const show = require('../components/show/show.cjs');
const avatar = require('../components/avatar/avatar.cjs');
const text = require('../components/text/text.cjs');
const primitives = require('../components/dialog/primitives.cjs');
const dialog = require('../components/dialog/dialog.cjs');
const cerberus = require('./cerberus.cjs');
const dialogCloseTrigger = require('../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.cjs');
const button = require('../components/icon-button/button.cjs');
const PromptModalContext = React.createContext(null);
function PromptModal(props) {
const resolveRef = React.useRef(null);
const [open, setOpen] = React.useState(false);
const [content, setContent] = React.useState(null);
const [inputValue, setInputValue] = React.useState("");
const { icons } = cerberus.useCerberusContext();
const { promptModal: PromptIcon } = icons;
const isValid = React.useMemo(
() => inputValue === content?.key,
[inputValue, content]
);
const palette = React.useMemo(
() => content?.kind === "destructive" ? "danger" : "action",
[content]
);
const handleChange = React.useCallback((e) => {
setInputValue(e.currentTarget.value);
}, []);
const handleChoice = React.useCallback(
(e) => {
const target = e.currentTarget;
if (target.value === "true") {
resolveRef.current?.(inputValue);
}
setOpen(false);
},
[inputValue, setOpen]
);
const handleShow = React.useCallback(
(options) => {
return new Promise((resolve) => {
setContent({ ...options, kind: options.kind || "non-destructive" });
setOpen(true);
resolveRef.current = resolve;
});
},
[setOpen]
);
const value = React.useMemo(
() => ({
show: handleShow
}),
[handleShow]
);
return /* @__PURE__ */ jsxRuntime.jsxs(PromptModalContext.Provider, { value, children: [
props.children,
/* @__PURE__ */ jsxRuntime.jsx(
primitives.DialogProvider,
{
lazyMount: true,
open,
onOpenChange: (e) => setOpen(e.open),
unmountOnExit: true,
children: /* @__PURE__ */ jsxRuntime.jsx(
dialog.Dialog,
{
size: "sm",
style: {
"--dialog-content-min-h": "auto"
},
children: /* @__PURE__ */ jsxRuntime.jsxs(
jsx.VStack,
{
alignItems: "flex-start",
h: "full",
justify: "space-between",
w: "full",
children: [
/* @__PURE__ */ jsxRuntime.jsx(
jsx.HStack,
{
alignSelf: "center",
justify: "center",
paddingBlockEnd: "md",
w: "full",
children: /* @__PURE__ */ jsxRuntime.jsx(
show.Show,
{
when: palette === "danger",
fallback: /* @__PURE__ */ jsxRuntime.jsx(
avatar.Avatar,
{
gradient: "charon-light",
fallback: /* @__PURE__ */ jsxRuntime.jsx(PromptIcon, { size: 24 })
}
),
children: /* @__PURE__ */ jsxRuntime.jsx(
avatar.Avatar,
{
gradient: "hades-dark",
fallback: /* @__PURE__ */ jsxRuntime.jsx(PromptIcon, { size: 24 })
}
)
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsx(primitives.DialogHeading, { children: content?.heading }),
/* @__PURE__ */ jsxRuntime.jsx(primitives.DialogDescription, { children: content?.description }),
/* @__PURE__ */ jsxRuntime.jsx(
jsx.VStack,
{
alignItems: "flex-start",
marginBlockStart: "md",
marginBlockEnd: "lg",
w: "full",
children: /* @__PURE__ */ jsxRuntime.jsxs(primitives$1.FieldRoot, { invalid: !isValid, children: [
/* @__PURE__ */ jsxRuntime.jsxs(
primitives$1.FieldLabel,
{
className: patterns.hstack({
gap: "xs",
justify: "flex-start",
marginBlockEnd: "xs",
textStyle: "label-md",
w: "initial"
}),
children: [
"Type",
/* @__PURE__ */ jsxRuntime.jsx(parts.Clipboard.Root, { value: content?.key || "", children: /* @__PURE__ */ jsxRuntime.jsx(parts.Clipboard.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "xs", w: "full", children: [
/* @__PURE__ */ jsxRuntime.jsx(parts.Clipboard.Label, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(text.Text, { as: "strong", userSelect: "text", children: content?.key }) }),
/* @__PURE__ */ jsxRuntime.jsx(parts.Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
button.IconButton,
{
clipboard: true,
shape: "square",
size: "sm",
rounded: "xs",
children: /* @__PURE__ */ jsxRuntime.jsx(parts.Clipboard.Indicator, {})
}
) })
] }) }) }),
"to confirm"
]
}
),
/* @__PURE__ */ jsxRuntime.jsx(primitives$1.Input, { name: "confirm", onChange: handleChange, type: "text" })
] })
}
),
/* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "md", justify: "stretch", w: "full", children: [
/* @__PURE__ */ jsxRuntime.jsx(
button$1.Button,
{
autoFocus: true,
className: css.css({
w: "1/2"
}),
disabled: !isValid,
name: "confirm",
onClick: handleChoice,
palette,
value: "true",
children: content?.actionText
}
),
/* @__PURE__ */ jsxRuntime.jsx(dialogCloseTrigger.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
button$1.Button,
{
className: css.css({
w: "1/2"
}),
name: "cancel",
onClick: handleChoice,
usage: "outlined",
value: "false",
children: content?.cancelText
}
) })
] })
]
}
)
}
)
}
)
] });
}
function usePromptModal() {
const context = React.useContext(PromptModalContext);
if (context === null) {
throw new Error("usePromptModal must be used within a PromptModal Provider");
}
return context;
}
exports.PromptModal = PromptModal;
exports.usePromptModal = usePromptModal;