@ashwa-io/ui 0.0.4 → 0.0.5

package/dist/components/atomic/Button/buttonLook.js

@@ -0,0 +1,18 @@
+import { BUTTON_VARIANT } from "./buttonVariant.js";
+// src/components/atomic/Button/buttonLook.ts
+const TEXT_SIZE = {
+	sm: "sm",
+	md: "default",
+	lg: "lg"
+};
+const ICON_SIZE = {
+	sm: "icon-sm",
+	md: "icon",
+	lg: "icon-lg"
+};
+/** Primitive props for an overlay trigger drawn in the public Button look. */
+const buttonLook = (variant, size, iconOnly) => ({
+	variant: BUTTON_VARIANT[variant],
+	size: (iconOnly ? ICON_SIZE : TEXT_SIZE)[size]
+});
+export { buttonLook };

package/dist/components/atomic/Tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import { OverlaySide } from "../../../lib/types.js";
+import React from "react";
+export interface TooltipProps {
+  /**
+   * Short plain text, a visual hint only: screen readers don't get it, and it needs a focusable
+   * child to appear for keyboards. Never put essential information only here.
+   */
+  content: string;
+  children: React.ReactNode;
+  side?: OverlaySide;
+  /** Lets a full-width child (e.g. `<Button fullWidth>`) fill its container. */
+  fullWidth?: boolean;
+}
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/atomic/Tooltip/Tooltip.js

@@ -0,0 +1,14 @@
+import { Tooltip as Tooltip$1, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/Tooltip/Tooltip.tsx
+const Tooltip = (props) => {
+	const { content, children, side = "top", fullWidth = false } = props;
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("span", { className: fullWidth ? "flex w-full" : "inline-flex max-w-full min-w-0" }),
+		children
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side,
+		children: content
+	})] }) });
+};
+export { Tooltip };

package/dist/components/atomic/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipProps } from "./Tooltip.js";
+export { Tooltip, type TooltipProps };

package/dist/components/molecule/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface ConfirmDialogProps {
+  open: boolean;
+  /** Cancel and Escape. */
+  onClose: () => void;
+  /** Never closes the dialog: the app closes it when its work finishes. */
+  onConfirm: () => void;
+  title: string;
+  description?: string;
+  confirmLabel: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  /** Confirm shows busy, Cancel is disabled and Escape is ignored. */
+  loading?: boolean;
+  'data-testid'?: string;
+}
+export declare const ConfirmDialog: React.FC<ConfirmDialogProps>;

package/dist/components/molecule/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,28 @@
+import { Button } from "../../atomic/Button/Button.js";
+import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../../ui/alert-dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/molecule/ConfirmDialog/ConfirmDialog.tsx
+const ConfirmDialog = (props) => {
+	const { open, onClose, onConfirm, title, description, confirmLabel, cancelLabel = "Cancel", destructive = false, loading = false, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(AlertDialog, {
+		open,
+		onOpenChange: (next) => {
+			if (!next && !loading) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(AlertDialogContent, {
+			"data-testid": testId,
+			children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }), description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				disabled: loading,
+				onClick: onClose,
+				children: cancelLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: destructive ? "destructive" : "primary",
+				loading,
+				onClick: onConfirm,
+				children: confirmLabel
+			})] })]
+		})
+	});
+};
+export { ConfirmDialog };

package/dist/components/molecule/ConfirmDialog/index.d.ts

@@ -0,0 +1,2 @@
+import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog.js";
+export { ConfirmDialog, type ConfirmDialogProps };

package/dist/components/molecule/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,28 @@
+import "../../atomic/Button/index.js";
+import { ButtonVariant } from "../../atomic/Button/buttonVariant.js";
+import { IconComponent, OverlayAlign, Size } from "../../../lib/types.js";
+import React from "react";
+export interface MenuItem {
+  label: string;
+  onSelect: () => void;
+  icon?: IconComponent;
+  /** Second line under the label. */
+  description?: string;
+  disabled?: boolean;
+  destructive?: boolean;
+}
+export interface DropdownMenuProps {
+  /** Trigger text (the trigger's aria-label when iconOnly). */
+  label: string;
+  items: MenuItem[];
+  icon?: IconComponent;
+  iconOnly?: boolean;
+  /** Trigger look. */
+  variant?: ButtonVariant;
+  size?: Size;
+  align?: OverlayAlign;
+  disabled?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  'data-testid'?: string;
+}
+export declare const DropdownMenu: React.FC<DropdownMenuProps>;

package/dist/components/molecule/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,53 @@
+import { buttonLook } from "../../atomic/Button/buttonLook.js";
+import { Button } from "../../ui/button.js";
+import { DropdownMenu as DropdownMenu$1, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+// src/components/molecule/DropdownMenu/DropdownMenu.tsx
+const DropdownMenu = (props) => {
+	const { label, items, icon: Icon, iconOnly = false, variant = "outline", size = "md", align = "end", disabled = false, onOpenChange, "data-testid": testId } = props;
+	const look = buttonLook(variant, size, iconOnly);
+	return /* @__PURE__ */ jsxs(DropdownMenu$1, {
+		onOpenChange: (open) => onOpenChange?.(open),
+		children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			disabled,
+			"aria-label": iconOnly ? label : void 0,
+			"data-testid": testId,
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: look.variant,
+				size: look.size
+			}),
+			children: [
+				Icon && /* @__PURE__ */ jsx(Icon, {
+					"data-icon": iconOnly ? void 0 : "inline-start",
+					"aria-hidden": true
+				}),
+				!iconOnly && label,
+				!iconOnly && /* @__PURE__ */ jsx(ChevronDownIcon, {
+					"data-icon": "inline-end",
+					"aria-hidden": true
+				})
+			]
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align,
+			className: "w-auto max-w-80 min-w-48",
+			children: items.map((item) => {
+				const ItemIcon = item.icon;
+				return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: item.onSelect,
+					disabled: item.disabled,
+					variant: item.destructive ? "destructive" : "default",
+					children: [ItemIcon && /* @__PURE__ */ jsx(ItemIcon, { "aria-hidden": true }), /* @__PURE__ */ jsxs("span", {
+						className: "flex flex-col",
+						children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.description && /* @__PURE__ */ jsx("span", {
+							className: cn("text-xs", !item.destructive && "text-muted-foreground"),
+							children: item.description
+						})]
+					})]
+				}, item.label);
+			})
+		})]
+	});
+};
+export { DropdownMenu };

package/dist/components/molecule/DropdownMenu/index.d.ts

@@ -0,0 +1,2 @@
+import { DropdownMenu, DropdownMenuProps, MenuItem } from "./DropdownMenu.js";
+export { DropdownMenu, type DropdownMenuProps, type MenuItem };

package/dist/components/molecule/Modal/Modal.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  /** Names the dialog (required). */
+  title: string;
+  description?: string;
+  /** Body. */
+  children: React.ReactNode;
+  /** e.g. Cancel + Save buttons, right-aligned. */
+  footer?: React.ReactNode;
+  size?: ModalSize;
+  /** Fixed height (min(40rem, 85dvh)): the body scrolls, header and footer stay put. */
+  fixedHeight?: boolean;
+  /** Body without padding, for lists and tables that run edge to edge. */
+  flush?: boolean;
+  /** false: no close button; Escape and outside clicks do nothing (blocking flows). */
+  closable?: boolean;
+  'data-testid'?: string;
+}
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/molecule/Modal/Modal.js

@@ -0,0 +1,48 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../ui/dialog.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+// src/components/molecule/Modal/Modal.tsx
+const SIZE = {
+	sm: "sm:max-w-md",
+	md: "sm:max-w-lg",
+	lg: "sm:max-w-xl",
+	xl: "sm:max-w-2xl",
+	"2xl": "sm:max-w-3xl"
+};
+const FOCUSABLE = "a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex=\"-1\"])";
+const Modal = (props) => {
+	const { open, onClose, title, description, children, footer, size = "md", fixedHeight = false, flush = false, closable = true, "data-testid": testId } = props;
+	const [needsTabStop, setNeedsTabStop] = useState(false);
+	const bodyRef = useCallback((body) => {
+		if (!body) return void 0;
+		const check = () => setNeedsTabStop(body.scrollHeight > body.clientHeight && !body.querySelector(FOCUSABLE));
+		const observer = new ResizeObserver(check);
+		observer.observe(body);
+		Array.from(body.children).forEach((child) => observer.observe(child));
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (next) => {
+			if (!next && closable) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			showCloseButton: closable,
+			"data-testid": testId,
+			className: cn("flex max-h-[85dvh] flex-col", SIZE[size], fixedHeight && "h-[min(40rem,85dvh)]"),
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+				/* @__PURE__ */ jsx("div", {
+					ref: bodyRef,
+					"data-slot": "modal-body",
+					tabIndex: needsTabStop ? 0 : void 0,
+					className: cn("min-h-0 flex-1 overflow-y-auto", flush ? "-m-4" : "-m-1 p-1"),
+					children
+				}),
+				footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+			]
+		})
+	});
+};
+export { Modal };

package/dist/components/molecule/Modal/index.d.ts

@@ -0,0 +1,2 @@
+import { Modal, ModalProps, ModalSize } from "./Modal.js";
+export { Modal, type ModalProps, type ModalSize };

package/dist/components/molecule/Popover/Popover.d.ts

@@ -0,0 +1,24 @@
+import "../../atomic/Button/index.js";
+import { ButtonVariant } from "../../atomic/Button/buttonVariant.js";
+import { IconComponent, OverlayAlign, OverlaySide, Size } from "../../../lib/types.js";
+import React from "react";
+export type PopoverWidth = 'sm' | 'md' | 'lg';
+export interface PopoverProps {
+  /** Trigger text (the trigger's aria-label when iconOnly); also names the popup. */
+  label: string;
+  icon?: IconComponent;
+  iconOnly?: boolean;
+  /** Trigger look. */
+  variant?: ButtonVariant;
+  size?: Size;
+  children: React.ReactNode;
+  /** Pass with onOpenChange to control it; otherwise it manages itself. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: OverlaySide;
+  align?: OverlayAlign;
+  width?: PopoverWidth;
+  disabled?: boolean;
+  'data-testid'?: string;
+}
+export declare const Popover: React.FC<PopoverProps>;

package/dist/components/molecule/Popover/Popover.js

@@ -0,0 +1,38 @@
+import { buttonLook } from "../../atomic/Button/buttonLook.js";
+import { Button } from "../../ui/button.js";
+import { Popover as Popover$1, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/molecule/Popover/Popover.tsx
+const WIDTH = {
+	sm: "w-56",
+	md: "w-72",
+	lg: "w-96"
+};
+const Popover = (props) => {
+	const { label, icon: Icon, iconOnly = false, variant = "outline", size = "md", children, open, onOpenChange, side = "bottom", align = "start", width = "md", disabled = false, "data-testid": testId } = props;
+	const look = buttonLook(variant, size, iconOnly);
+	return /* @__PURE__ */ jsxs(Popover$1, {
+		open,
+		onOpenChange: (next) => onOpenChange?.(next),
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			disabled,
+			"aria-label": iconOnly ? label : void 0,
+			"data-testid": testId,
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: look.variant,
+				size: look.size
+			}),
+			children: [Icon && /* @__PURE__ */ jsx(Icon, {
+				"data-icon": iconOnly ? void 0 : "inline-start",
+				"aria-hidden": true
+			}), !iconOnly && label]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side,
+			align,
+			"aria-label": label,
+			className: WIDTH[width],
+			children
+		})]
+	});
+};
+export { Popover };

package/dist/components/molecule/Popover/index.d.ts

@@ -0,0 +1,2 @@
+import { Popover, PopoverProps, PopoverWidth } from "./Popover.js";
+export { Popover, type PopoverProps, type PopoverWidth };

package/dist/components/molecule/Toaster/Toaster.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+/** Mount once at the app root. */
+export declare const Toaster: React.FC;

package/dist/components/molecule/Toaster/Toaster.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Toaster } from "sonner";
+// src/components/molecule/Toaster/Toaster.tsx
+const TOKENS = {
+	"--normal-bg": "var(--popover)",
+	"--normal-text": "var(--popover-foreground)",
+	"--normal-border": "var(--border)",
+	"--border-radius": "var(--radius)"
+};
+/** Mount once at the app root. */
+const Toaster$1 = () => /* @__PURE__ */ jsx(Toaster, {
+	position: "bottom-right",
+	style: TOKENS,
+	toastOptions: { classNames: {
+		toast: "font-sans",
+		description: "text-muted-foreground!"
+	} }
+});
+export { Toaster$1 as Toaster };

package/dist/components/molecule/Toaster/index.d.ts

@@ -0,0 +1,3 @@
+import { ToastOptions, toast } from "./toast.js";
+import { Toaster } from "./Toaster.js";
+export { type ToastOptions, Toaster, toast };

package/dist/components/molecule/Toaster/toast.d.ts

@@ -0,0 +1,13 @@
+export interface ToastOptions {
+  description?: string;
+  duration?: number;
+}
+/** Works anywhere, including outside React (axios interceptors); needs one mounted <Toaster />. */
+export declare const toast: {
+  message: (message: string, options?: ToastOptions) => string | number;
+  success: (message: string, options?: ToastOptions) => string | number;
+  error: (message: string, options?: ToastOptions) => string | number;
+  info: (message: string, options?: ToastOptions) => string | number;
+  warning: (message: string, options?: ToastOptions) => string | number;
+  dismiss: (id?: string | number) => void;
+};

package/dist/components/molecule/Toaster/toast.js

@@ -0,0 +1,18 @@
+import { toast } from "sonner";
+// src/components/molecule/Toaster/toast.ts
+const show = (notify) => (message, options) => notify(message, {
+	description: options?.description,
+	duration: options?.duration
+});
+/** Works anywhere, including outside React (axios interceptors); needs one mounted <Toaster />. */
+const toast$1 = {
+	message: show(toast.message),
+	success: show(toast.success),
+	error: show(toast.error),
+	info: show(toast.info),
+	warning: show(toast.warning),
+	dismiss: (id) => {
+		toast.dismiss(id);
+	}
+};
+export { toast$1 as toast };

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

@@ -0,0 +1,61 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+// src/components/ui/alert-dialog.tsx
+const AlertDialog$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+};
+const AlertDialogPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+};
+const AlertDialogOverlay = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+};
+const AlertDialogContent = ({ className, size = "default", ...props }) => {
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		className: cn("group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", className),
+		...props
+	})] });
+};
+const AlertDialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+		...props
+	});
+};
+const AlertDialogFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn("bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+};
+const AlertDialogTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+		...props
+	});
+};
+const AlertDialogDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className),
+		...props
+	});
+};
+export { AlertDialog$1 as AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle };

package/dist/components/ui/dialog.js

@@ -0,0 +1,78 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import "react";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/ui/dialog.tsx
+const Dialog$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+};
+const DialogPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+};
+const DialogOverlay = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: cn("data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+};
+const DialogContent = ({ className, children, showCloseButton = true, ...props }) => {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "dialog-content",
+		className: cn("bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
+			"data-slot": "dialog-close",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				className: "absolute top-2 right-2",
+				size: "icon-sm"
+			}),
+			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+};
+const DialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+};
+const DialogFooter = ({ className, showCloseButton = false, children, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		className: cn("bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+			children: "Close"
+		})]
+	});
+};
+const DialogTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: cn("font-heading text-base leading-none font-medium", className),
+		...props
+	});
+};
+const DialogDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className),
+		...props
+	});
+};
+export { Dialog$1 as Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,42 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "lucide-react";
+import "react";
+import { Menu } from "@base-ui/react/menu";
+// src/components/ui/dropdown-menu.tsx
+const DropdownMenu = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+};
+const DropdownMenuTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+};
+const DropdownMenuContent = ({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn("bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden", className),
+			...props
+		})
+	}) });
+};
+const DropdownMenuItem = ({ className, inset, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+};
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };

package/dist/components/ui/popover.js

@@ -0,0 +1,32 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Popover } from "@base-ui/react/popover";
+// src/components/ui/popover.tsx
+const Popover$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+};
+const PopoverTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+};
+const PopoverContent = ({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-slot": "popover-content",
+			className: cn("bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100", className),
+			...props
+		})
+	}) });
+};
+export { Popover$1 as Popover, PopoverContent, PopoverTrigger };

package/dist/components/ui/tooltip.js

@@ -0,0 +1,39 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/components/ui/tooltip.tsx
+const TooltipProvider = ({ delay = 0, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+};
+const Tooltip$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		...props
+	});
+};
+const TooltipTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+};
+const TooltipContent = ({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			"data-slot": "tooltip-content",
+			className: cn("bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
+		})
+	}) });
+};
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/index.d.ts

@@ -19,6 +19,8 @@ import "./components/atomic/TextArea/index.js";
 import { TextArea, TextAreaProps } from "./components/atomic/TextArea/TextArea.js";
 import "./components/atomic/TextInput/index.js";
 import { TextInput, TextInputProps, TextInputType } from "./components/atomic/TextInput/TextInput.js";
+import "./components/atomic/Tooltip/index.js";
+import { Tooltip, TooltipProps } from "./components/atomic/Tooltip/Tooltip.js";
 import "./components/atomic/IconButton/index.js";
 import { IconButton, IconButtonProps, IconButtonVariant } from "./components/atomic/IconButton/IconButton.js";
 import "./components/atomic/Select/index.js";
@@ -29,9 +31,20 @@ import "./components/atomic/Spinner/index.js";
 import { Spinner, SpinnerProps } from "./components/atomic/Spinner/Spinner.js";
 import "./components/layout/FormLayout/index.js";
 import { FormLayout, FormLayoutDirection, FormLayoutProps } from "./components/layout/FormLayout/FormLayout.js";
+import "./components/molecule/ConfirmDialog/index.js";
+import { ConfirmDialog, ConfirmDialogProps } from "./components/molecule/ConfirmDialog/ConfirmDialog.js";
+import "./components/molecule/DropdownMenu/index.js";
+import { DropdownMenu, DropdownMenuProps, MenuItem } from "./components/molecule/DropdownMenu/DropdownMenu.js";
 import "./components/molecule/FormField/index.js";
 import { FormField, FormFieldControlProps, FormFieldProps } from "./components/molecule/FormField/FormField.js";
+import "./components/molecule/Modal/index.js";
+import { Modal, ModalProps, ModalSize } from "./components/molecule/Modal/Modal.js";
+import "./components/molecule/Popover/index.js";
+import { Popover, PopoverProps, PopoverWidth } from "./components/molecule/Popover/Popover.js";
+import "./components/molecule/Toaster/index.js";
+import { ToastOptions, toast } from "./components/molecule/Toaster/toast.js";
+import { Toaster } from "./components/molecule/Toaster/Toaster.js";
 import "./components/layout/Stack/index.js";
 import { HStack, HStackProps, Stack, StackAlign, StackGap, StackJustify, StackProps, VStack, VStackProps } from "./components/layout/Stack/Stack.js";
-import { FieldBaseProps, IconComponent, Size, Tone } from "./lib/types.js";
-export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, Divider, type DividerProps, type FieldBaseProps, FormField, type FormFieldControlProps, type FormFieldProps, FormLayout, type FormLayoutDirection, type FormLayoutProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, Select, type SelectOption, type SelectProps, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextInputType, type TextProps, type TextSize, type TextTone, type TextWeight, type Tone, VStack, type VStackProps };
+import { FieldBaseProps, IconComponent, OverlayAlign, OverlaySide, Size, Tone } from "./lib/types.js";
+export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuProps, type FieldBaseProps, FormField, type FormFieldControlProps, type FormFieldProps, FormLayout, type FormLayoutDirection, type FormLayoutProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, type MenuItem, Modal, type ModalProps, type ModalSize, type OverlayAlign, type OverlaySide, Popover, type PopoverProps, type PopoverWidth, Select, type SelectOption, type SelectProps, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextInputType, type TextProps, type TextSize, type TextTone, type TextWeight, type ToastOptions, Toaster, type Tone, Tooltip, type TooltipProps, VStack, type VStackProps, toast };

package/dist/index.js

@@ -8,11 +8,18 @@ import { Switch } from "./components/atomic/Switch/Switch.js";
 import { Text } from "./components/atomic/Text/Text.js";
 import { TextArea } from "./components/atomic/TextArea/TextArea.js";
 import { TextInput } from "./components/atomic/TextInput/TextInput.js";
+import { Tooltip } from "./components/atomic/Tooltip/Tooltip.js";
 import { IconButton } from "./components/atomic/IconButton/IconButton.js";
 import { Select } from "./components/atomic/Select/Select.js";
 import { Skeleton } from "./components/atomic/Skeleton/Skeleton.js";
 import { Spinner } from "./components/atomic/Spinner/Spinner.js";
 import { FormLayout } from "./components/layout/FormLayout/FormLayout.js";
+import { ConfirmDialog } from "./components/molecule/ConfirmDialog/ConfirmDialog.js";
+import { DropdownMenu } from "./components/molecule/DropdownMenu/DropdownMenu.js";
 import { FormField } from "./components/molecule/FormField/FormField.js";
+import { Modal } from "./components/molecule/Modal/Modal.js";
+import { Popover } from "./components/molecule/Popover/Popover.js";
+import { toast } from "./components/molecule/Toaster/toast.js";
+import { Toaster } from "./components/molecule/Toaster/Toaster.js";
 import { HStack, Stack, VStack } from "./components/layout/Stack/Stack.js";
-export { Badge, Button, Checkbox, ColorInput, Divider, FormField, FormLayout, HStack, Heading, IconButton, Select, Skeleton, Spinner, Stack, Switch, Text, TextArea, TextInput, VStack };
+export { Badge, Button, Checkbox, ColorInput, ConfirmDialog, Divider, DropdownMenu, FormField, FormLayout, HStack, Heading, IconButton, Modal, Popover, Select, Skeleton, Spinner, Stack, Switch, Text, TextArea, TextInput, Toaster, Tooltip, VStack, toast };

package/dist/lib/types.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 /** Shared size scale for every public component. */
 export type Size = 'sm' | 'md' | 'lg';
 export type Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+/** Which side of the trigger an overlay opens on. */
+export type OverlaySide = 'top' | 'bottom' | 'left' | 'right';
+/** How an overlay lines up with its trigger along that side. */
+export type OverlayAlign = 'start' | 'center' | 'end';
 /** An icon component (lucide-react, svgr): the design system controls its size and colour. */
 export type IconComponent = React.ComponentType<{
   className?: string;

package/dist/theme/brandTheme.d.ts

@@ -1,4 +1,4 @@
-export declare const DEFAULT_BRAND_HEX = "#8750f6";
+export declare const DEFAULT_BRAND_HEX = "#8556ef";
 export type BrandWarning = 'adjusted' | 'near-destructive' | 'invalid';
 export interface BrandTokens {
   '--brand': string;

package/dist/theme/brandTheme.js

@@ -4,7 +4,7 @@ useMode(modeRgb);
 useMode(modeLrgb);
 useMode(modeOklab);
 useMode(modeOklch);
-const DEFAULT_BRAND_HEX = "#8750f6";
+const DEFAULT_BRAND_HEX = "#8556ef";
 const SURFACES = {
 	light: [{
 		mode: "oklch",
@@ -13,12 +13,14 @@ const SURFACES = {
 	}],
 	dark: [{
 		mode: "oklch",
-		l: .145,
-		c: 0
+		l: .141,
+		c: .005,
+		h: 285.823
 	}, {
 		mode: "oklch",
-		l: .205,
-		c: 0
+		l: .21,
+		c: .006,
+		h: 285.885
 	}]
 };
 const DIRECTION = {
@@ -48,7 +50,7 @@ const BLACK = {
 	c: 0
 };
 const MIN_UI_CONTRAST = 3;
-const MIN_TEXT_CONTRAST = 4.5;
+const MIN_TEXT_CONTRAST = 4.55;
 const LIGHTNESS_STEP = .005;
 const MAX_STEPS = 200;
 const WHITE_LABEL_MAX_STEPS = 10;
@@ -137,10 +139,10 @@ const parseBrand = (hex) => {
 };
 /** Brand tokens for light and dark from one org hex. Never throws; bad input → default. */
 const brandTheme = (hex) => {
-	const input = parseBrand(hex ?? "#8750f6");
+	const input = parseBrand(hex ?? "#8556ef");
 	if (input) return buildTheme(input);
 	return {
-		...buildTheme(parseBrand("#8750f6") ?? BLACK),
+		...buildTheme(parseBrand("#8556ef") ?? BLACK),
 		warnings: ["invalid"]
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashwa-io/ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Ashwa design system: locked React components on shadcn/ui (Base UI) and Tailwind v4, with per-org brand theming.",
   "license": "MIT",
   "type": "module",
@@ -102,6 +102,7 @@
     "class-variance-authority": "^0.7.1",
     "cn": "^0.5.2",
     "culori": "^4.0.2",
+    "sonner": "^2.0.8",
     "tw-animate-css": "^1.4.0"
   }
 }

package/src/styles/index.css

@@ -64,27 +64,27 @@
 :root {
   /* Brand group: defaults = brandTheme(DEFAULT_BRAND_HEX). Per-org values come from
      brandThemeCss(hex) in @ashwa-io/ui/theme, injected at runtime, and outrank these. */
-  --brand: oklch(0.585 0.233 293);
+  --brand: oklch(0.586 0.218 292.5);
   --brand-foreground: oklch(1 0 0);
-  --brand-text: oklch(0.585 0.233 293);
-  --brand-tint: oklch(0.965 0.018 293);
-  --brand-tint-foreground: oklch(0.565 0.233 293);
-  --brand-map: #8750f6;
+  --brand-text: oklch(0.586 0.218 292.5);
+  --brand-tint: oklch(0.965 0.018 292.5);
+  --brand-tint-foreground: oklch(0.561 0.218 292.5);
+  --brand-map: #8556ef;
 
   --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
   --primary: var(--brand);
   --primary-foreground: var(--brand-foreground);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
   /* Tailwind red-700, darker than base-nova's red-600: destructive text on its 10% tint
      (Button destructive) must reach WCAG AA 4.5:1; red-600 only reached 4:1. */
   --destructive: oklch(0.505 0.213 27.518);
@@ -93,58 +93,60 @@
   --success: oklch(0.448 0.119 151.328);
   --warning: oklch(0.473 0.137 46.201);
   --info: oklch(0.488 0.243 264.376);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
   --ring: var(--brand);
   --chart-1: var(--brand);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
   --radius: 0.5rem;
   --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
   --sidebar-primary: var(--brand);
   --sidebar-primary-foreground: var(--brand-foreground);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: var(--brand);
 }
 
 .dark {
-  --brand: oklch(0.585 0.233 293);
+  --brand: oklch(0.586 0.218 292.5);
   --brand-foreground: oklch(1 0 0);
-  --brand-text: oklch(0.625 0.223 293);
-  --brand-tint: oklch(0.3 0.04 293);
-  --brand-tint-foreground: oklch(0.685 0.183 293);
-  --brand-map: #8750f6;
+  --brand-text: oklch(0.626 0.218 292.5);
+  --brand-tint: oklch(0.3 0.04 292.5);
+  --brand-tint-foreground: oklch(0.686 0.181 292.5);
+  --brand-map: #8556ef;
 
-  --background: oklch(0.145 0 0);
+  --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.21 0.006 285.885);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
+  --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.269 0 0);
+  --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
+  /* Lighter than nigam's red-400: destructive text on its 20% tint must reach 4.5:1 on dialog
+     footers (red-400 only reached 4.2). */
+  --destructive: oklch(0.76 0.191 22.216);
   --success: oklch(0.792 0.209 151.711);
   --warning: oklch(0.828 0.189 84.429);
   --info: oklch(0.707 0.165 254.624);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
 }