@cerberus-design/react 0.22.0 → 0.24.0

package/dist/context/confirm-modal.js

@@ -62,86 +62,95 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(
-      Dialog,
+    /* @__PURE__ */ jsx(
+      DialogProvider,
       {
-        size: "sm",
-        style: {
-          "--dialog-content-min-h": "auto"
-        },
-        children: /* @__PURE__ */ jsxs(
-          VStack,
+        lazyMount: true,
+        open,
+        onOpenChange: handleOpenChange,
+        unmountOnExit: true,
+        children: /* @__PURE__ */ jsx(
+          Dialog,
           {
-            alignItems: "flex-start",
-            gap: "md",
-            justify: "space-between",
-            w: "full",
-            children: [
-              /* @__PURE__ */ jsx(Show, { when: showAvatar, children: /* @__PURE__ */ jsx(
-                HStack,
-                {
-                  alignSelf: "center",
-                  justify: "center",
-                  paddingBlockEnd: "md",
-                  w: "full",
-                  children: /* @__PURE__ */ jsx(
-                    Show,
+            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(Show, { when: showAvatar, children: /* @__PURE__ */ jsx(
+                    HStack,
                     {
-                      when: palette === "danger",
-                      fallback: /* @__PURE__ */ jsx(
-                        Avatar,
-                        {
-                          gradient: "charon-light",
-                          fallback: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 })
-                        }
-                      ),
+                      alignSelf: "center",
+                      justify: "center",
+                      paddingBlockEnd: "md",
+                      w: "full",
                       children: /* @__PURE__ */ jsx(
-                        Avatar,
+                        Show,
                         {
-                          gradient: "hades-dark",
-                          fallback: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 })
+                          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
-                  }
-                ) })
-              ] })
-            ]
+                  ) }),
+                  /* @__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() {

package/dist/context/prompt-modal.cjs

@@ -9,14 +9,16 @@ 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 = require('../components/button/button.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.25.0_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.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) {
@@ -65,116 +67,137 @@ function PromptModal(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ jsxRuntime.jsx(
-      dialog.Dialog,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.DialogProvider,
       {
-        size: "sm",
-        style: {
-          "--dialog-content-min-h": "auto"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          jsx.VStack,
+        lazyMount: true,
+        open,
+        onOpenChange: (e) => setOpen(e.open),
+        unmountOnExit: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          dialog.Dialog,
           {
-            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,
+            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,
                     {
-                      when: palette === "danger",
-                      fallback: /* @__PURE__ */ jsxRuntime.jsx(
-                        avatar.Avatar,
-                        {
-                          gradient: "charon-light",
-                          fallback: /* @__PURE__ */ jsxRuntime.jsx(PromptIcon, { size: 24 })
-                        }
-                      ),
+                      alignSelf: "center",
+                      justify: "center",
+                      paddingBlockEnd: "md",
+                      w: "full",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
-                        avatar.Avatar,
+                        show.Show,
                         {
-                          gradient: "hades-dark",
-                          fallback: /* @__PURE__ */ jsxRuntime.jsx(PromptIcon, { size: 24 })
+                          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,
+                  ),
+                  /* @__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,
                       {
-                        className: patterns.hstack({
-                          gap: "xs",
-                          justify: "flex-start",
-                          marginBlockEnd: "xs",
-                          textStyle: "label-md",
-                          w: "initial"
+                        autoFocus: true,
+                        className: css.css({
+                          w: "1/2"
                         }),
-                        children: [
-                          "Type",
-                          /* @__PURE__ */ jsxRuntime.jsx(text.Text, { as: "strong", textTransform: "uppercase", children: content?.key }),
-                          "to confirm"
-                        ]
+                        disabled: !isValid,
+                        name: "confirm",
+                        onClick: handleChoice,
+                        palette,
+                        value: "true",
+                        children: content?.actionText
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx(primitives$1.Input, { name: "confirm", onChange: handleChange, type: "text" })
+                    /* @__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
+                      }
+                    ) })
                   ] })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "md", justify: "stretch", w: "full", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  button.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.Button,
-                  {
-                    className: css.css({
-                      w: "1/2"
-                    }),
-                    name: "cancel",
-                    onClick: handleChoice,
-                    usage: "outlined",
-                    value: "false",
-                    children: content?.cancelText
-                  }
-                ) })
-              ] })
-            ]
+                ]
+              }
+            )
           }
         )
       }
-    ) })
+    )
   ] });
 }
 function usePromptModal() {