achery-ui 0.6.0 → 0.6.2

package/dist/index.d.cts

@@ -583,6 +583,53 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare function Button({ variant, size, glyph, glyphPosition, kbd, loading, loadingLabel, children, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
+interface ConfirmOptions {
+    /** Modal title. */
+    title?: ReactNode;
+    /** Body message. */
+    message: ReactNode;
+    /** Label for the confirm button. @default 'Confirm' */
+    confirmLabel?: string;
+    /** Variant for the confirm button. @default 'accent' */
+    confirmVariant?: 'accent' | 'secondary' | 'ghost';
+    /** Label for the cancel button. @default 'Cancel' */
+    cancelLabel?: string;
+    /**
+     * When true, the confirm button is rendered in a destructive style
+     * (terracotta-deep background, matching the existing danger idiom).
+     * @default false
+     */
+    destructive?: boolean;
+}
+type ConfirmFn = (opts: ConfirmOptions) => Promise<boolean>;
+/** Renders a single in-theme confirm dialog. Mount once at your app root. */
+declare const ConfirmDialogProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * Returns an async `confirm(opts)` function that resolves `true` if the user
+ * clicks confirm, `false` if they cancel or close the dialog.
+ *
+ * Requires `<ConfirmDialogProvider>` to be mounted above the calling component.
+ *
+ * @example
+ * ```tsx
+ * const confirm = useConfirm()
+ *
+ * async function handleDelete() {
+ *   const ok = await confirm({
+ *     title: 'Delete task',
+ *     message: 'This cannot be undone.',
+ *     confirmLabel: 'Delete',
+ *     destructive: true,
+ *   })
+ *   if (!ok) return
+ *   await deleteTask(id)
+ * }
+ * ```
+ */
+declare const useConfirm: () => ConfirmFn;
+
 /** Props for the {@link Field} wrapper component. */
 interface FieldProps {
     /** Visible label rendered above the input. */
@@ -1901,4 +1948,4 @@ interface AvatarProps {
 }
 declare function Avatar({ initials, size, tone, loading, className }: AvatarProps): react_jsx_runtime.JSX.Element;
 
-export { AccentColor, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, type GlyphName, type GlyphProps, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, useTheme, useToast, vars };
+export { AccentColor, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, type GlyphName, type GlyphProps, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, useConfirm, useTheme, useToast, vars };

package/dist/index.d.ts

@@ -583,6 +583,53 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare function Button({ variant, size, glyph, glyphPosition, kbd, loading, loadingLabel, children, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
+interface ConfirmOptions {
+    /** Modal title. */
+    title?: ReactNode;
+    /** Body message. */
+    message: ReactNode;
+    /** Label for the confirm button. @default 'Confirm' */
+    confirmLabel?: string;
+    /** Variant for the confirm button. @default 'accent' */
+    confirmVariant?: 'accent' | 'secondary' | 'ghost';
+    /** Label for the cancel button. @default 'Cancel' */
+    cancelLabel?: string;
+    /**
+     * When true, the confirm button is rendered in a destructive style
+     * (terracotta-deep background, matching the existing danger idiom).
+     * @default false
+     */
+    destructive?: boolean;
+}
+type ConfirmFn = (opts: ConfirmOptions) => Promise<boolean>;
+/** Renders a single in-theme confirm dialog. Mount once at your app root. */
+declare const ConfirmDialogProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * Returns an async `confirm(opts)` function that resolves `true` if the user
+ * clicks confirm, `false` if they cancel or close the dialog.
+ *
+ * Requires `<ConfirmDialogProvider>` to be mounted above the calling component.
+ *
+ * @example
+ * ```tsx
+ * const confirm = useConfirm()
+ *
+ * async function handleDelete() {
+ *   const ok = await confirm({
+ *     title: 'Delete task',
+ *     message: 'This cannot be undone.',
+ *     confirmLabel: 'Delete',
+ *     destructive: true,
+ *   })
+ *   if (!ok) return
+ *   await deleteTask(id)
+ * }
+ * ```
+ */
+declare const useConfirm: () => ConfirmFn;
+
 /** Props for the {@link Field} wrapper component. */
 interface FieldProps {
     /** Visible label rendered above the input. */
@@ -1901,4 +1948,4 @@ interface AvatarProps {
 }
 declare function Avatar({ initials, size, tone, loading, className }: AvatarProps): react_jsx_runtime.JSX.Element;
 
-export { AccentColor, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, type GlyphName, type GlyphProps, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, useTheme, useToast, vars };
+export { AccentColor, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, type GlyphName, type GlyphProps, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, useConfirm, useTheme, useToast, vars };

package/dist/index.js

@@ -2,10 +2,10 @@ import { accentColorNames, accentColors } from './chunk-NDOQ2YVM.js';
 import { createContext, useState, useCallback, useEffect, useContext, useMemo, useRef, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import * as RadixToggle from '@radix-ui/react-toggle';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import * as RadixDialog from '@radix-ui/react-dialog';
 import { createPortal } from 'react-dom';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -485,6 +485,120 @@ function Button({
     }
   );
 }
+var body2 = "Modal_body__1kcb5si8";
+var bodyScrollable = "Modal_bodyScrollable__1kcb5sie";
+var closeButton = "Modal_closeButton__1kcb5si7";
+var contentSized = 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__ */ jsxs(
+    RadixDialog.Root,
+    {
+      ...open !== void 0 ? { open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange !== void 0 ? { onOpenChange } : {},
+      children: [
+        trigger2 && /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, children: trigger2 }),
+        /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+          /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: overlay }),
+          /* @__PURE__ */ jsxs(
+            RadixDialog.Content,
+            {
+              className: [contentSized({ size }), className].filter(Boolean).join(" "),
+              "aria-describedby": description2 ? "modal-description" : void 0,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: header, children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    title2 && /* @__PURE__ */ jsx(RadixDialog.Title, { className: title, children: title2 }),
+                    description2 && /* @__PURE__ */ jsx(RadixDialog.Description, { id: "modal-description", className: description, children: description2 })
+                  ] }),
+                  /* @__PURE__ */ jsx(RadixDialog.Close, { className: closeButton, "aria-label": "Close", children: /* @__PURE__ */ jsx(Glyph, { name: "cross", size: 14, "aria-hidden": "true" }) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: scrollable ? bodyScrollable : body2, children }),
+                footer3 && /* @__PURE__ */ jsx("div", { className: footer, children: footer3 })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var ConfirmContext = createContext(null);
+var EMPTY_OPTS = { message: "" };
+var NOOP_RESOLVE = (_) => {
+};
+var ConfirmDialogProvider = ({ children }) => {
+  const [state, setState] = useState({
+    open: false,
+    opts: EMPTY_OPTS,
+    resolve: NOOP_RESOLVE
+  });
+  const confirm = 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__ */ jsxs(ConfirmContext.Provider, { value: confirm, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open,
+        onOpenChange: (o) => {
+          if (!o) settle(false);
+        },
+        title: opts.title,
+        size: "sm",
+        footer: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", width: "100%" }, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => settle(false), children: cancelLabel }),
+          /* @__PURE__ */ 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__ */ jsx(Body, { variant: "small", children: opts.message }) : opts.message
+      }
+    )
+  ] });
+};
+var useConfirm = () => {
+  const fn = 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";
@@ -752,7 +866,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";
@@ -827,7 +941,7 @@ function Sidebar({
             ),
             searchConfig.kbd && /* @__PURE__ */ jsx("span", { children: searchConfig.kbd })
           ] }),
-          footer3 && /* @__PURE__ */ jsx("div", { className: footer, children: footer3 })
+          footer3 && /* @__PURE__ */ jsx("div", { className: footer2, children: footer3 })
         ] })
       ]
     }
@@ -1241,7 +1355,11 @@ function Table({
                   {
                     className: tr,
                     "data-selected": isSelected,
-                    onClick: onRowClick ? () => onRowClick(key, row) : void 0,
+                    onClick: onRowClick ? (e) => {
+                      const target = e.target;
+                      if (target.closest('a, button, input, select, textarea, [role="checkbox"], [role="button"]')) return;
+                      onRowClick(key, row);
+                    } : void 0,
                     style: onRowClick ? { cursor: "pointer" } : void 0,
                     children: columns.map((col) => /* @__PURE__ */ jsx("td", { className: col.mono ? tdMono : td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
                   },
@@ -1289,61 +1407,6 @@ function Table({
     }
   );
 }
-var body2 = "Modal_body__1kcb5si8";
-var bodyScrollable = "Modal_bodyScrollable__1kcb5sie";
-var closeButton = "Modal_closeButton__1kcb5si7";
-var contentSized = 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__ */ jsxs(
-    RadixDialog.Root,
-    {
-      ...open !== void 0 ? { open } : {},
-      ...defaultOpen !== void 0 ? { defaultOpen } : {},
-      ...onOpenChange !== void 0 ? { onOpenChange } : {},
-      children: [
-        trigger2 && /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, children: trigger2 }),
-        /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
-          /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: overlay }),
-          /* @__PURE__ */ jsxs(
-            RadixDialog.Content,
-            {
-              className: [contentSized({ size }), className].filter(Boolean).join(" "),
-              "aria-describedby": description2 ? "modal-description" : void 0,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: header, children: [
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    title2 && /* @__PURE__ */ jsx(RadixDialog.Title, { className: title, children: title2 }),
-                    description2 && /* @__PURE__ */ jsx(RadixDialog.Description, { id: "modal-description", className: description, children: description2 })
-                  ] }),
-                  /* @__PURE__ */ jsx(RadixDialog.Close, { className: closeButton, "aria-label": "Close", children: /* @__PURE__ */ jsx(Glyph, { name: "cross", size: 14, "aria-hidden": "true" }) })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: scrollable ? bodyScrollable : body2, children }),
-                footer3 && /* @__PURE__ */ jsx("div", { className: footer2, children: footer3 })
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
 
 // src/components/Toast/Toast.css.ts
 var toast = "Toast_toast__1btt01v3";
@@ -1994,6 +2057,6 @@ function TypeTag({ type, className }) {
   return /* @__PURE__ */ jsx("span", { className: [tag({ type }), className].filter(Boolean).join(" "), children: labels[type] });
 }
 
-export { AcheryProvider, AppBar, Avatar, Badge, Body, Button, Card, Checkbox, Combobox, DatePicker, Display, EntityPill, Eyebrow, Field, Glyph, Heading, Input, KpiTile, LetterStamp, Marginalia, Menu2 as Menu, Modal, Mono, ProgressBar, SearchInput, Select, Sidebar, SingleCombobox, Skeleton, Sparkline, StatePill, Table, Tabs, Textarea, ToastProvider, Toggle, Tooltip, TypeTag, useTheme, useToast, vars };
+export { AcheryProvider, AppBar, Avatar, Badge, Body, Button, Card, Checkbox, Combobox, ConfirmDialogProvider, DatePicker, Display, EntityPill, Eyebrow, Field, Glyph, Heading, Input, KpiTile, LetterStamp, Marginalia, Menu2 as Menu, Modal, Mono, ProgressBar, SearchInput, Select, Sidebar, SingleCombobox, Skeleton, Sparkline, StatePill, Table, Tabs, Textarea, ToastProvider, Toggle, Tooltip, TypeTag, useConfirm, useTheme, useToast, vars };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map