@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/alert/alert-icons.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/alert/alert-icons.tsx
+function Icon({ children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+}
+const InfoIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01" })]
+});
+const SuccessIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })]
+});
+const WarningIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }), /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })]
+});
+const DangerIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), /* @__PURE__ */ jsx("path", { d: "m15 9-6 6M9 9l6 6" })]
+});
+const MegaphoneIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "m3 11 18-5v12L3 14v-3z" }), /* @__PURE__ */ jsx("path", { d: "M11.6 16.8a3 3 0 1 1-5.8-1.6" })]
+});
+/** The default icon for each tone. */
+const toneIcons = {
+	neutral: () => /* @__PURE__ */ jsx(InfoIcon, {}),
+	primary: () => /* @__PURE__ */ jsx(MegaphoneIcon, {}),
+	info: () => /* @__PURE__ */ jsx(InfoIcon, {}),
+	success: () => /* @__PURE__ */ jsx(SuccessIcon, {}),
+	warning: () => /* @__PURE__ */ jsx(WarningIcon, {}),
+	danger: () => /* @__PURE__ */ jsx(DangerIcon, {})
+};
+//#endregion
+export { DangerIcon, InfoIcon, MegaphoneIcon, SuccessIcon, WarningIcon, toneIcons };

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,19 @@
+import { AlertVariants } from "./alert.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/alert/alert.d.ts
+export interface AlertProps extends Omit<ComponentProps<'div'>, 'title'>, AlertVariants {
+  title?: ReactNode;
+  /** Replaces the tone's default icon. `false` hides it. */
+  icon?: ReactNode | false;
+  /** Buttons or links shown at the end. */
+  action?: ReactNode;
+  /** Shows a close button that calls this. */
+  onDismiss?: () => void;
+  dismissLabel?: string;
+}
+/**
+ * An inline message about the content around it. Danger and warning alerts are announced
+ * immediately (`role="alert"`); other tones politely (`role="status"`).
+ */
+export declare function Alert(inProps: AlertProps): import("react").JSX.Element;
+//#endregion

package/dist/components/alert/alert.js

@@ -0,0 +1,64 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { XIcon } from "../../internal/icons.js";
+import { IconButton } from "../button/button.js";
+import { alertStyles } from "./alert.styles.js";
+import { toneIcons } from "./alert-icons.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/alert/alert.tsx
+/**
+* An inline message about the content around it. Danger and warning alerts are announced
+* immediately (`role="alert"`); other tones politely (`role="status"`).
+*/
+function Alert(inProps) {
+	const [props, slots] = useComponentConfig("Alert", inProps);
+	const { tone, variant, title, icon, action, onDismiss, dismissLabel = "Dismiss", className, children, ...rest } = props;
+	const resolvedTone = tone ?? "neutral";
+	const s = alertStyles({
+		tone,
+		variant
+	});
+	const iconNode = icon === false ? null : icon ?? toneIcons[resolvedTone]();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "alert",
+		"data-tone": resolvedTone,
+		role: resolvedTone === "danger" || resolvedTone === "warning" ? "alert" : "status",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [
+			iconNode && /* @__PURE__ */ jsx("span", {
+				"data-slot": "alert-icon",
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: iconNode
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "alert-content",
+				className: s.content({ class: slots.content }),
+				children: [title && /* @__PURE__ */ jsx("p", {
+					"data-slot": "alert-title",
+					className: s.title({ class: slots.title }),
+					children: title
+				}), children && /* @__PURE__ */ jsx("div", {
+					"data-slot": "alert-description",
+					className: s.description({ class: slots.description }),
+					children
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				"data-slot": "alert-action",
+				className: s.action({ class: slots.action }),
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ jsx(IconButton, {
+				size: "sm",
+				icon: /* @__PURE__ */ jsx(XIcon, {}),
+				"aria-label": dismissLabel,
+				onClick: onDismiss,
+				className: s.dismiss({ class: slots.dismiss })
+			})
+		]
+	});
+}
+//#endregion
+export { Alert };

package/dist/components/alert/alert.styles.d.ts

@@ -0,0 +1,107 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/alert/alert.styles.d.ts
+export declare const alertStyles: import("tailwind-variants").TVReturnType<{
+  tone: {
+    neutral: {
+      icon: string;
+    };
+    info: {
+      icon: string;
+    };
+    success: {
+      icon: string;
+    };
+    warning: {
+      icon: string;
+    };
+    danger: {
+      icon: string;
+    };
+  };
+  variant: {
+    soft: {};
+    outline: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+  content: string;
+  title: string;
+  description: string;
+  action: string;
+  dismiss: string;
+}, undefined, {
+  tone: {
+    neutral: {
+      icon: string;
+    };
+    info: {
+      icon: string;
+    };
+    success: {
+      icon: string;
+    };
+    warning: {
+      icon: string;
+    };
+    danger: {
+      icon: string;
+    };
+  };
+  variant: {
+    soft: {};
+    outline: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+  content: string;
+  title: string;
+  description: string;
+  action: string;
+  dismiss: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    neutral: {
+      icon: string;
+    };
+    info: {
+      icon: string;
+    };
+    success: {
+      icon: string;
+    };
+    warning: {
+      icon: string;
+    };
+    danger: {
+      icon: string;
+    };
+  };
+  variant: {
+    soft: {};
+    outline: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  icon: string;
+  content: string;
+  title: string;
+  description: string;
+  action: string;
+  dismiss: string;
+}>>;
+export type AlertVariants = VariantProps<typeof alertStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Alert: StylesEntry<typeof alertStyles>;
+  }
+}
+//#endregion

package/dist/components/alert/alert.styles.js

@@ -0,0 +1,86 @@
+"use client";
+import { themedBorder } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/alert/alert.styles.ts
+const alertStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: ["relative flex w-full items-start gap-3 rounded-md px-4 py-3 text-small", themedBorder],
+		icon: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+		content: "grid min-w-0 flex-1 gap-0.5",
+		title: "font-medium text-foreground",
+		description: "text-muted-foreground [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-2",
+		action: "flex shrink-0 items-center gap-2 self-center",
+		dismiss: "-my-1 -mr-2 shrink-0"
+	},
+	variants: {
+		tone: {
+			neutral: { icon: "text-muted-foreground" },
+			info: { icon: "text-[color-mix(in_oklab,var(--color-info)_80%,var(--color-foreground))]" },
+			success: { icon: "text-[color-mix(in_oklab,var(--color-success)_80%,var(--color-foreground))]" },
+			warning: { icon: "text-[color-mix(in_oklab,var(--color-warning)_80%,var(--color-foreground))]" },
+			danger: { icon: "text-[color-mix(in_oklab,var(--color-danger)_80%,var(--color-foreground))]" }
+		},
+		variant: {
+			soft: {},
+			outline: { root: "bg-surface" }
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "soft",
+			tone: "neutral",
+			class: { root: "border-border bg-muted" }
+		},
+		{
+			variant: "soft",
+			tone: "info",
+			class: { root: "border-info/25 bg-info/8" }
+		},
+		{
+			variant: "soft",
+			tone: "success",
+			class: { root: "border-success/25 bg-success/8" }
+		},
+		{
+			variant: "soft",
+			tone: "warning",
+			class: { root: "border-warning/30 bg-warning/10" }
+		},
+		{
+			variant: "soft",
+			tone: "danger",
+			class: { root: "border-danger/25 bg-danger/8" }
+		},
+		{
+			variant: "outline",
+			tone: "neutral",
+			class: { root: "border-border-strong" }
+		},
+		{
+			variant: "outline",
+			tone: "info",
+			class: { root: "border-info/50" }
+		},
+		{
+			variant: "outline",
+			tone: "success",
+			class: { root: "border-success/50" }
+		},
+		{
+			variant: "outline",
+			tone: "warning",
+			class: { root: "border-warning/60" }
+		},
+		{
+			variant: "outline",
+			tone: "danger",
+			class: { root: "border-danger/50" }
+		}
+	],
+	defaultVariants: {
+		tone: "neutral",
+		variant: "soft"
+	}
+});
+//#endregion
+export { alertStyles };

package/dist/components/alert/index.d.ts

@@ -0,0 +1,3 @@
+import { AlertVariants, alertStyles } from "./alert.styles.js";
+import { Alert, AlertProps } from "./alert.js";
+export { Alert, type AlertProps, type AlertVariants, alertStyles };

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,29 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { AlertDialog } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/alert-dialog/alert-dialog.d.ts
+/**
+ * A modal that interrupts to ask for a decision, e.g. confirming a destructive action.
+ * Unlike Dialog it can't be dismissed by clicking outside. For a one-line confirm, use `useConfirm()`.
+ */
+declare const AlertDialog$1: import("react").FC<AlertDialog.AlertDialogProps>;
+export declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<AlertDialog.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface AlertDialogContentProps extends ComponentProps<typeof AlertDialog.Content> {
+  overlayClassName?: string;
+}
+export declare function AlertDialogContent(inProps: AlertDialogContentProps): import("react").JSX.Element;
+export declare function AlertDialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function AlertDialogTitle({ className, ...props }: ComponentProps<typeof AlertDialog.Title>): import("react").JSX.Element;
+export declare function AlertDialogDescription({ className, ...props }: ComponentProps<typeof AlertDialog.Description>): import("react").JSX.Element;
+export declare function AlertDialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export interface AlertDialogActionProps extends Omit<ButtonProps, 'variant' | 'asChild'> {
+  /** `danger` for destructive actions. */
+  tone?: 'default' | 'danger';
+}
+/** The confirming button. Closes the dialog. */
+export declare function AlertDialogAction({ tone, ...props }: AlertDialogActionProps): import("react").JSX.Element;
+/** The dismissing button. Receives focus when the dialog opens, so Enter never confirms by accident. */
+export declare function AlertDialogCancel(props: Omit<ButtonProps, 'variant' | 'asChild'>): import("react").JSX.Element;
+//#endregion
+export { AlertDialog$1 as AlertDialog };

package/dist/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,89 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { Button } from "../button/button.js";
+import { alertDialogStyles } from "./alert-dialog.styles.js";
+import { AlertDialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/alert-dialog/alert-dialog.tsx
+function useParts() {
+	const [, slots] = useComponentConfig("AlertDialog", {});
+	return {
+		s: alertDialogStyles(),
+		slots
+	};
+}
+/**
+* A modal that interrupts to ask for a decision, e.g. confirming a destructive action.
+* Unlike Dialog it can't be dismissed by clicking outside. For a one-line confirm, use `useConfirm()`.
+*/
+const AlertDialog$1 = AlertDialog.Root;
+const AlertDialogTrigger = AlertDialog.Trigger;
+function AlertDialogContent(inProps) {
+	const [props, slots] = useComponentConfig("AlertDialog", inProps);
+	const { overlayClassName, className, ...rest } = props;
+	const s = alertDialogStyles();
+	return /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Overlay, {
+		"data-slot": "alert-dialog-overlay",
+		className: s.overlay({ class: [slots.overlay, overlayClassName] })
+	}), /* @__PURE__ */ jsx(AlertDialog.Content, {
+		"data-slot": "alert-dialog-content",
+		className: s.content({ class: [slots.content, className] }),
+		...rest
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: s.title({ class: [slots.title, className] }),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: s.description({ class: [slots.description, className] }),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+/** The confirming button. Closes the dialog. */
+function AlertDialogAction({ tone = "default", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Action, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-slot": "alert-dialog-action",
+			variant: tone === "danger" ? "danger" : "primary",
+			...props
+		})
+	});
+}
+/** The dismissing button. Receives focus when the dialog opens, so Enter never confirms by accident. */
+function AlertDialogCancel(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Cancel, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-slot": "alert-dialog-cancel",
+			variant: "outline",
+			...props
+		})
+	});
+}
+//#endregion
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/alert-dialog/alert-dialog.styles.d.ts

@@ -0,0 +1,63 @@
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/alert-dialog/alert-dialog.styles.d.ts
+export declare const alertDialogStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      footer?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      overlay?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      footer?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      overlay?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  overlay: string[];
+  content: string[];
+  header: string;
+  title: string;
+  description: string;
+  footer: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      footer?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      overlay?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  overlay: string[];
+  content: string[];
+  header: string;
+  title: string;
+  description: string;
+  footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  overlay: string[];
+  content: string[];
+  header: string;
+  title: string;
+  description: string;
+  footer: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    AlertDialog: StylesEntry<typeof alertDialogStyles>;
+  }
+}
+//#endregion

package/dist/components/alert-dialog/alert-dialog.styles.js

@@ -0,0 +1,19 @@
+"use client";
+import { dialogMotion, overlayMotion, themedBorder } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/alert-dialog/alert-dialog.styles.ts
+const alertDialogStyles = /* @__PURE__ */ tv({ slots: {
+	overlay: ["fixed inset-0 z-50 bg-overlay", overlayMotion],
+	content: [
+		"fixed top-1/2 left-1/2 z-50 grid w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-5",
+		"rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none",
+		dialogMotion,
+		themedBorder
+	],
+	header: "flex flex-col gap-1.5",
+	title: "font-display text-h4 text-foreground",
+	description: "text-small text-muted-foreground",
+	footer: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+} });
+//#endregion
+export { alertDialogStyles };

package/dist/components/alert-dialog/confirm-dialog.js

@@ -0,0 +1,22 @@
+"use client";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "./alert-dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/alert-dialog/confirm-dialog.tsx
+/** The dialog behind `useConfirm()`. Loaded lazily by ConfirmProvider. */
+function ConfirmDialog({ open, options, onSettle }) {
+	const danger = options.tone === "danger";
+	return /* @__PURE__ */ jsx(AlertDialog, {
+		open,
+		onOpenChange: (next) => !next && onSettle(false),
+		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: options.title }), options.description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: options.description })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
+			onClick: () => onSettle(false),
+			children: options.cancelLabel ?? "Cancel"
+		}), /* @__PURE__ */ jsx(AlertDialogAction, {
+			tone: options.tone,
+			onClick: () => onSettle(true),
+			children: options.confirmLabel ?? (danger ? "Delete" : "Confirm")
+		})] })] })
+	});
+}
+//#endregion
+export { ConfirmDialog };

package/dist/components/alert-dialog/confirm.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+//#region src/components/alert-dialog/confirm.d.ts
+export interface ConfirmOptions {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Default "Confirm", or "Delete" when `tone` is `danger`. */
+  confirmLabel?: ReactNode;
+  cancelLabel?: ReactNode;
+  tone?: 'default' | 'danger';
+}
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+/**
+ * Enables `useConfirm()` for everything inside. Renders one shared AlertDialog.
+ * Mount once near the root (inside GlyphProvider).
+ */
+export declare function ConfirmProvider({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Ask the user to confirm, in one line:
+ *
+ * ```tsx
+ * const confirm = useConfirm()
+ * if (await confirm({ title: 'Delete project?', tone: 'danger' })) await deleteProject()
+ * ```
+ *
+ * Resolves `true` when confirmed, `false` when cancelled or dismissed with Escape.
+ */
+export declare function useConfirm(): ConfirmFn;
+//#endregion

package/dist/components/alert-dialog/confirm.js

@@ -0,0 +1,62 @@
+"use client";
+import { Suspense, createContext, lazy, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/alert-dialog/confirm.tsx
+const ConfirmContext = createContext(null);
+const ConfirmDialog = lazy(() => import("./confirm-dialog.js").then((m) => ({ default: m.ConfirmDialog })));
+/**
+* Enables `useConfirm()` for everything inside. Renders one shared AlertDialog.
+* Mount once near the root (inside GlyphProvider).
+*/
+function ConfirmProvider({ children }) {
+	const [pending, setPending] = useState(null);
+	const [open, setOpen] = useState(false);
+	const pendingRef = useRef(null);
+	const settle = useCallback((value) => {
+		pendingRef.current?.resolve(value);
+		pendingRef.current = null;
+		setOpen(false);
+	}, []);
+	const confirm = useCallback((options) => {
+		pendingRef.current?.resolve(false);
+		return new Promise((resolve) => {
+			const next = {
+				options,
+				resolve
+			};
+			pendingRef.current = next;
+			setPending(next);
+			setOpen(true);
+		});
+	}, []);
+	const value = useMemo(() => confirm, [confirm]);
+	const options = pending?.options;
+	return /* @__PURE__ */ jsxs(ConfirmContext.Provider, {
+		value,
+		children: [children, options && /* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(ConfirmDialog, {
+				open,
+				options,
+				onSettle: settle
+			})
+		})]
+	});
+}
+/**
+* Ask the user to confirm, in one line:
+*
+* ```tsx
+* const confirm = useConfirm()
+* if (await confirm({ title: 'Delete project?', tone: 'danger' })) await deleteProject()
+* ```
+*
+* Resolves `true` when confirmed, `false` when cancelled or dismissed with Escape.
+*/
+function useConfirm() {
+	const confirm = useContext(ConfirmContext);
+	if (!confirm) throw new Error("useConfirm must be used inside <ConfirmProvider> (or <GlyphProvider>).");
+	return confirm;
+}
+//#endregion
+export { ConfirmProvider, useConfirm };

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogCancel, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog.js";
+import { alertDialogStyles } from "./alert-dialog.styles.js";
+import { ConfirmFn, ConfirmOptions, ConfirmProvider, useConfirm } from "./confirm.js";
+export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type ConfirmFn, type ConfirmOptions, ConfirmProvider, alertDialogStyles, useConfirm };