achery-ui 0.6.1 → 0.6.2

package/dist/index.cjs

@@ -4,10 +4,10 @@ var chunkLJ24EJ3N_cjs = require('./chunk-LJ24EJ3N.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var createRuntimeFn = require('@vanilla-extract/recipes/createRuntimeFn');
+var RadixDialog = require('@radix-ui/react-dialog');
 var RadixToggle = require('@radix-ui/react-toggle');
 var RadixTabs = require('@radix-ui/react-tabs');
 var RadixTooltip = require('@radix-ui/react-tooltip');
-var RadixDialog = require('@radix-ui/react-dialog');
 var reactDom = require('react-dom');
 var RadixCheckbox = require('@radix-ui/react-checkbox');
 var RadixDropdownMenu = require('@radix-ui/react-dropdown-menu');
@@ -30,10 +30,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
 var RadixToggle__namespace = /*#__PURE__*/_interopNamespace(RadixToggle);
 var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
 var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
-var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
 var RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
 var RadixDropdownMenu__namespace = /*#__PURE__*/_interopNamespace(RadixDropdownMenu);
 
@@ -512,6 +512,120 @@ function Button({
     }
   );
 }
+var body2 = "Modal_body__1kcb5si8";
+var bodyScrollable = "Modal_bodyScrollable__1kcb5sie";
+var closeButton = "Modal_closeButton__1kcb5si7";
+var contentSized = createRuntimeFn.createRuntimeFn({ defaultClassName: "Modal_contentSized__1kcb5sia", variantClassNames: { size: { sm: "Modal_contentSized_size_sm__1kcb5sib", md: "Modal_contentSized_size_md__1kcb5sic", lg: "Modal_contentSized_size_lg__1kcb5sid" } }, defaultVariants: { size: "sm" }, compoundVariants: [] });
+var description = "Modal_description__1kcb5si6";
+var footer = "Modal_footer__1kcb5si9";
+var header = "Modal_header__1kcb5si4";
+var overlay = "Modal_overlay__1kcb5si2";
+var title = "Modal_title__1kcb5si5";
+function Modal({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title: title2,
+  description: description2,
+  children,
+  footer: footer3,
+  trigger: trigger2,
+  size = "sm",
+  scrollable = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadixDialog__namespace.Root,
+    {
+      ...open !== void 0 ? { open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange !== void 0 ? { onOpenChange } : {},
+      children: [
+        trigger2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild: true, children: trigger2 }),
+        /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog__namespace.Portal, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, { className: overlay }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            RadixDialog__namespace.Content,
+            {
+              className: [contentSized({ size }), className].filter(Boolean).join(" "),
+              "aria-describedby": description2 ? "modal-description" : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: header, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    title2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { className: title, children: title2 }),
+                    description2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Description, { id: "modal-description", className: description, children: description2 })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { className: closeButton, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "cross", size: 14, "aria-hidden": "true" }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: scrollable ? bodyScrollable : body2, children }),
+                footer3 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer, children: footer3 })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var ConfirmContext = react.createContext(null);
+var EMPTY_OPTS = { message: "" };
+var NOOP_RESOLVE = (_) => {
+};
+var ConfirmDialogProvider = ({ children }) => {
+  const [state, setState] = react.useState({
+    open: false,
+    opts: EMPTY_OPTS,
+    resolve: NOOP_RESOLVE
+  });
+  const confirm = react.useCallback((opts2) => {
+    return new Promise((resolve) => {
+      setState({ open: true, opts: opts2, resolve });
+    });
+  }, []);
+  const settle = (value2) => {
+    state.resolve(value2);
+    setState((s) => ({ ...s, open: false }));
+  };
+  const { open, opts } = state;
+  const confirmLabel = opts.confirmLabel ?? "Confirm";
+  const cancelLabel = opts.cancelLabel ?? "Cancel";
+  return /* @__PURE__ */ jsxRuntime.jsxs(ConfirmContext.Provider, { value: confirm, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        open,
+        onOpenChange: (o) => {
+          if (!o) settle(false);
+        },
+        title: opts.title,
+        size: "sm",
+        footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", width: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: () => settle(false), children: cancelLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: opts.confirmVariant ?? "accent",
+              size: "sm",
+              onClick: () => settle(true),
+              style: opts.destructive ? {
+                background: "var(--achery-color-rust, #8a3a22)",
+                borderColor: "var(--achery-color-rust, #8a3a22)"
+              } : void 0,
+              children: confirmLabel
+            }
+          )
+        ] }),
+        children: typeof opts.message === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Body, { variant: "small", children: opts.message }) : opts.message
+      }
+    )
+  ] });
+};
+var useConfirm = () => {
+  const fn = react.useContext(ConfirmContext);
+  if (!fn) throw new Error("useConfirm must be used within a ConfirmDialogProvider");
+  return fn;
+};
 
 // src/components/Toggle/Toggle.css.ts
 var label = "Toggle_label__trpmwc4";
@@ -779,7 +893,7 @@ var backdrop = "Sidebar_backdrop__1n0xxfc2";
 var bottomSlot = "Sidebar_bottomSlot__1n0xxfc9";
 var collapseToggle = "Sidebar_collapseToggle__1n0xxfc3";
 var countAccent = "Sidebar_countAccent__1n0xxfcc";
-var footer = "Sidebar_footer__1n0xxfc8";
+var footer2 = "Sidebar_footer__1n0xxfc8";
 var group = "Sidebar_group__1n0xxfc4";
 var groupLabel = "Sidebar_groupLabel__1n0xxfc5";
 var mobileSearch = "Sidebar_mobileSearch__1n0xxfca";
@@ -854,7 +968,7 @@ function Sidebar({
             ),
             searchConfig.kbd && /* @__PURE__ */ jsxRuntime.jsx("span", { children: searchConfig.kbd })
           ] }),
-          footer3 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer, children: footer3 })
+          footer3 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer2, children: footer3 })
         ] })
       ]
     }
@@ -1320,61 +1434,6 @@ function Table({
     }
   );
 }
-var body2 = "Modal_body__1kcb5si8";
-var bodyScrollable = "Modal_bodyScrollable__1kcb5sie";
-var closeButton = "Modal_closeButton__1kcb5si7";
-var contentSized = createRuntimeFn.createRuntimeFn({ defaultClassName: "Modal_contentSized__1kcb5sia", variantClassNames: { size: { sm: "Modal_contentSized_size_sm__1kcb5sib", md: "Modal_contentSized_size_md__1kcb5sic", lg: "Modal_contentSized_size_lg__1kcb5sid" } }, defaultVariants: { size: "sm" }, compoundVariants: [] });
-var description = "Modal_description__1kcb5si6";
-var footer2 = "Modal_footer__1kcb5si9";
-var header = "Modal_header__1kcb5si4";
-var overlay = "Modal_overlay__1kcb5si2";
-var title = "Modal_title__1kcb5si5";
-function Modal({
-  open,
-  defaultOpen,
-  onOpenChange,
-  title: title2,
-  description: description2,
-  children,
-  footer: footer3,
-  trigger: trigger2,
-  size = "sm",
-  scrollable = false,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixDialog__namespace.Root,
-    {
-      ...open !== void 0 ? { open } : {},
-      ...defaultOpen !== void 0 ? { defaultOpen } : {},
-      ...onOpenChange !== void 0 ? { onOpenChange } : {},
-      children: [
-        trigger2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild: true, children: trigger2 }),
-        /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog__namespace.Portal, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, { className: overlay }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            RadixDialog__namespace.Content,
-            {
-              className: [contentSized({ size }), className].filter(Boolean).join(" "),
-              "aria-describedby": description2 ? "modal-description" : void 0,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: header, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    title2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { className: title, children: title2 }),
-                    description2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Description, { id: "modal-description", className: description, children: description2 })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { className: closeButton, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "cross", size: 14, "aria-hidden": "true" }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: scrollable ? bodyScrollable : body2, children }),
-                footer3 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer2, children: footer3 })
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
 
 // src/components/Toast/Toast.css.ts
 var toast = "Toast_toast__1btt01v3";
@@ -2034,6 +2093,7 @@ exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Combobox = Combobox;
+exports.ConfirmDialogProvider = ConfirmDialogProvider;
 exports.DatePicker = DatePicker;
 exports.Display = Display;
 exports.EntityPill = EntityPill;
@@ -2063,6 +2123,7 @@ exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
 exports.TypeTag = TypeTag;
+exports.useConfirm = useConfirm;
 exports.useTheme = useTheme;
 exports.useToast = useToast;
 exports.vars = vars;