@dynamic-labs-sdk/droplet 1.14.0 → 1.16.1

package/dist/index.esm.js

@@ -1,11 +1,11 @@
-import { a as Button, i as Input, n as Switch, o as buttonVariants, r as Label, s as cn, t as ToggleRow } from "./toggle-row-C-B8HtY0.esm.js";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { a as Button, c as cn, i as Input, n as Switch, o as buttonVariants, r as Label, s as Spinner, t as ToggleRow } from "./toggle-row-h0h1m_hc.esm.js";
+import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { AnimatePresence, motion, useAnimation, useReducedMotion } from "motion/react";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { Add01Icon, Alert01Icon, ArrowDown01Icon, ArrowRight01Icon, ArrowUp01Icon, Cancel01Icon, CheckmarkCircle02Icon, Copy01Icon, InformationCircleIcon, Search01Icon, Tick01Icon, WebhookIcon } from "@hugeicons/core-free-icons";
+import { Add01Icon, Alert01Icon, AlertCircleIcon, ArrowDown01Icon, ArrowLeft01Icon, ArrowRight01Icon, ArrowUp01Icon, Cancel01Icon, CheckmarkCircle02Icon, Copy01Icon, InformationCircleIcon, MoreHorizontalIcon, Search01Icon, Tick01Icon, WebhookIcon } from "@hugeicons/core-free-icons";
 import { cva } from "class-variance-authority";
 import { Slot } from "@radix-ui/react-slot";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { Content, Header, Item, Root, Trigger } from "@radix-ui/react-accordion";
 import { Action, Cancel, Content as Content$1, Description, Overlay, Portal, Root as Root$1, Title, Trigger as Trigger$1 } from "@radix-ui/react-alert-dialog";
@@ -15,21 +15,21 @@ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { Command as Command$1 } from "cmdk";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { Close, Content as Content$2, Description as Description$1, Overlay as Overlay$1, Portal as Portal$1, Root as Root$2, Title as Title$1, Trigger as Trigger$2 } from "@radix-ui/react-dialog";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { CheckboxItem, Content as Content$3, Group, Item as Item$1, ItemIndicator, Label as Label$1, Portal as Portal$2, RadioGroup as RadioGroup$1, RadioItem, Root as Root$3, Separator as Separator$1, Sub, SubContent, SubTrigger, Trigger as Trigger$3 } from "@radix-ui/react-dropdown-menu";
 import { CheckIcon as CheckIcon$1, ChevronRightIcon as ChevronRightIcon$1, CircleIcon } from "lucide-react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { Content as Content$4, Group as Group$1, Icon as Icon$1, Item as Item$2, ItemIndicator as ItemIndicator$1, ItemText, Label as Label$2, Portal as Portal$3, Root as Root$4, ScrollDownButton, ScrollUpButton, Separator as Separator$2, Trigger as Trigger$4, Value, Viewport } from "@radix-ui/react-select";
 import { Root as Root$5 } from "@radix-ui/react-separator";
 import { useTheme } from "next-themes";
-import { Toaster as Toaster$1 } from "sonner";
+import { Toaster as Toaster$1, toast } from "sonner";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { Content as Content$5, Portal as Portal$4, Provider, Root as Root$6, Trigger as Trigger$5 } from "@radix-ui/react-tooltip";
 import Link from "next/link";
 
 //#region src/components/unsaved-changes-bar/unsaved-changes-bar.tsx
-const spring$3 = {
+const spring$4 = {
 	bounce: 0,
 	duration: .35,
 	type: "spring"
@@ -67,7 +67,7 @@ const ProgressiveBlur = () => {
 	});
 };
 const popTransition = {
-	...spring$3,
+	...spring$4,
 	duration: .25
 };
 const StatusIcon = ({ state }) => {
@@ -162,11 +162,11 @@ const UnsavedChangesBar = ({ hasChanges, onSave, onReset, suppressed = false })
 			setBarState("unsaved");
 		} else if (!dismissTimer.current) setVisible(false);
 	}, [hasChanges]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AnimatePresence, { children: shouldRender && /* @__PURE__ */ jsx(motion.div, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AnimatePresence, { children: shouldRender && /* @__PURE__ */ jsx(motion.div, {
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
-		transition: spring$3,
+		transition: spring$4,
 		children: /* @__PURE__ */ jsx(ProgressiveBlur, {})
 	}, "blur") }), /* @__PURE__ */ jsx("div", {
 		className: "fixed bottom-10 left-1/2 -translate-x-1/2 z-50",
@@ -186,7 +186,7 @@ const UnsavedChangesBar = ({ hasChanges, onSave, onReset, suppressed = false })
 				scale: .95,
 				y: 20
 			},
-			transition: spring$3,
+			transition: spring$4,
 			style: { willChange: "opacity, transform" },
 			className: "flex items-center gap-1.5 rounded-xl bg-zinc-900 dark:bg-[oklch(0.940_0.008_231)] shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_8px_24px_-4px_rgba(0,0,0,0.25),0_20px_50px_-8px_rgba(0,0,0,0.20)] dark:shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_8px_20px_-4px_rgba(0,0,0,0.10),0_20px_50px_-8px_rgba(0,0,0,0.08)] pl-3 pr-1.5 py-1.5",
 			children: [
@@ -298,12 +298,12 @@ const AccordionTrigger = ({ className, children, ...props }) => {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md px-1 py-4 text-left text-sm font-medium touch-manipulation transition-[color,background-color,opacity] duration-150 ease-out outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 cursor-pointer", className),
+			className: cn("focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md px-1 py-4 text-left text-sm font-medium touch-manipulation transition-[color,background-color,opacity] duration-150 ease-out motion-reduce:transition-none outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 cursor-pointer", className),
 			...props,
 			children: [children, /* @__PURE__ */ jsx(HugeiconsIcon, {
 				icon: ArrowRight01Icon,
 				size: 16,
-				className: "text-muted-foreground/60 pointer-events-none shrink-0 transition-transform duration-200 [*[data-state=open]>&]:rotate-90"
+				className: "text-muted-foreground/60 pointer-events-none shrink-0 transition-transform duration-200 ease-out motion-reduce:transition-none [*[data-state=open]>&]:rotate-90"
 			})]
 		})
 	});
@@ -320,6 +320,86 @@ const AccordionContent = ({ className, children, ...props }) => {
 	});
 };
 
+//#endregion
+//#region src/components/ui/tray/resolveTrayLayout.tsx
+/**
+* Resolves the droplet "tray" layout for a container (Dialog/Card/Sheet/AlertDialog).
+*
+* Convention (footer-priority): a container gets exactly one muted tray — the
+* **footer** when actions are present, otherwise the **header** (e.g. Table/CodeBlock).
+* The non-tray slots form the raised white shelf. Pass an explicit `tray` to override.
+*
+* Returns the partitioned pieces so each container can assemble its own shell +
+* shelf markup with the shared `--tray-*` tokens.
+*/
+const resolveTrayLayout = ({ children, isHeader, isFooter, tray = "auto" }) => {
+	const elements = Children.toArray(children).filter(isValidElement);
+	const header = elements.find(isHeader);
+	const footer = elements.find(isFooter);
+	let edge;
+	if (tray === "auto") if (footer) edge = "footer";
+	else if (header) edge = "header";
+	else edge = "none";
+	else edge = tray;
+	let trayChild = void 0;
+	if (edge === "footer") trayChild = footer;
+	else if (edge === "header") trayChild = header;
+	const shelf = Children.toArray(children).filter((child) => {
+		if (!isValidElement(child)) return true;
+		if (edge === "footer" && isFooter(child)) return false;
+		if (edge === "header" && isHeader(child)) return false;
+		return true;
+	});
+	return {
+		edge,
+		shelf,
+		trayChild
+	};
+};
+
+//#endregion
+//#region src/components/ui/tray/renderTrayLayout.tsx
+/**
+* Builds the shared droplet "tray" markup for a container (Dialog/Card/AlertDialog/…).
+*
+* Centralizes BOTH the convention (via {@link resolveTrayLayout}) and the render —
+* the muted shell classes + the raised white shelf wrapper + the tray-slot
+* placement — so every container (and new ones like Table/CodeBlock) shares one
+* implementation and can't drift. Each container keeps its own root element
+* (portal, animations, `shadow-elevated` vs `shadow-card`) and just merges
+* `shellClassName` + renders `content`.
+*
+* Note: this composes the tray treatment; it does **not** make any container
+* depend on `Card`. Containers stay independent primitives sharing a treatment.
+*/
+const renderTrayLayout = ({ children, isHeader, isFooter, tray = "auto", shelfClassName }) => {
+	const { edge, shelf, trayChild } = resolveTrayLayout({
+		children,
+		isFooter,
+		isHeader,
+		tray
+	});
+	if (edge === "none") return {
+		content: children,
+		edge,
+		shellClassName: "bg-card"
+	};
+	const shellClassName = cn("flex flex-col bg-[var(--tray-chrome)] px-[var(--tray-inset)]", edge === "footer" ? "pt-[var(--tray-inset)]" : "pb-[var(--tray-inset)]");
+	return {
+		content: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			edge === "header" && trayChild,
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "tray-shelf",
+				className: cn("flex flex-1 flex-col overflow-hidden bg-card rounded-[var(--tray-shelf-radius)] shadow-[var(--tray-shelf-shadow)]", shelfClassName),
+				children: shelf
+			}),
+			edge === "footer" && trayChild
+		] }),
+		edge,
+		shellClassName
+	};
+};
+
 //#endregion
 //#region src/components/ui/alert-dialog/alert-dialog.tsx
 const AlertDialog = Root$1;
@@ -330,15 +410,25 @@ const AlertDialogOverlay = ({ className, ...props }) => /* @__PURE__ */ jsx(Over
 	className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--overlay-md)] backdrop-blur-[2px] will-change-[opacity] duration-200 motion-reduce:animate-none", className),
 	...props
 });
-const AlertDialogContent = ({ className, size = "default", ...props }) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(Content$1, {
-	"data-slot": "alert-dialog-content",
-	"data-size": size,
-	className: cn("bg-muted overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-[16px] border-0 shadow-none duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md will-change-[opacity,transform] motion-reduce:animate-none", className),
-	...props
-})] });
+const AlertDialogContent = ({ className, size = "default", tray = "auto", children, ...props }) => {
+	const { edge, shellClassName, content } = renderTrayLayout({
+		children,
+		isFooter: (el) => el.type === AlertDialogFooter,
+		isHeader: (el) => el.type === AlertDialogHeader,
+		tray
+	});
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(Content$1, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		"data-tray": edge,
+		className: cn("overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-[16px] border-0 shadow-[var(--shadow-elevated)] duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md will-change-[opacity,transform] motion-reduce:animate-none", shellClassName, className),
+		...props,
+		children: content
+	})] });
+};
 const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-slot": "alert-dialog-header",
-	className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 px-5 py-4 border-b bg-card text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 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),
+	className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 px-5 py-4 bg-card text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 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 }) => /* @__PURE__ */ jsx("div", {
@@ -348,7 +438,7 @@ const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div"
 });
 const AlertDialogTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(Title, {
 	"data-slot": "alert-dialog-title",
-	className: cn("text-lg font-semibold text-balance sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+	className: cn("text-[17px] font-semibold text-balance 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 }) => /* @__PURE__ */ jsx(Description, {
@@ -356,7 +446,7 @@ const AlertDialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
 	className: cn("text-muted-foreground text-sm text-pretty", className),
 	...props
 });
-const AlertDialogAction = ({ className, variant = "default", size = "default", ...props }) => /* @__PURE__ */ jsx(Button, {
+const AlertDialogAction = ({ className, variant = "destructive", size = "default", ...props }) => /* @__PURE__ */ jsx(Button, {
 	variant,
 	size,
 	asChild: true,
@@ -401,11 +491,121 @@ const AvatarFallback = ({ className, ...props }) => {
 		...props
 	});
 };
+const AvatarBadge = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-badge",
+		className: cn("bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		...props
+	});
+};
+const AvatarGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: cn("*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2", className),
+		...props
+	});
+};
+const AvatarGroupCount = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group-count",
+		className: cn("bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/ui/alert/alert.tsx
+const spring$3 = {
+	bounce: 0,
+	duration: .35,
+	type: "spring"
+};
+const alertVariants = cva("flex gap-3 rounded-xl border px-3.5 py-3 text-sm transition-[color,background-color,border-color] duration-150 motion-reduce:transition-none", {
+	defaultVariants: { variant: "neutral" },
+	variants: { variant: {
+		danger: "bg-[var(--danger-light)] text-[var(--text-danger)] border-[var(--border-danger)]/30",
+		info: "bg-[var(--brand-light)] text-[var(--text-link)] border-[var(--border-selected)]/30",
+		neutral: "bg-secondary text-secondary-foreground border-[var(--border-default)]",
+		success: "bg-[var(--success-light)] text-[var(--text-success)] border-[var(--border-success)]/30",
+		warning: "bg-[var(--warning-light)] text-[var(--text-warning)] border-[var(--border-warning)]/30"
+	} }
+});
+/** Maps each semantic variant to its Hugeicons icon. */
+const variantIcons = {
+	danger: AlertCircleIcon,
+	info: InformationCircleIcon,
+	neutral: InformationCircleIcon,
+	success: CheckmarkCircle02Icon,
+	warning: Alert01Icon
+};
+/**
+* An inline semantic callout for contextual feedback.
+*
+* Variants mirror the Badge semantic system: `neutral` (default) | `info` |
+* `success` | `warning` | `danger`. Each variant carries a matching background
+* tint, border, and leading icon drawn from the design-token set.
+*
+* - `danger` and `warning` use `role="alert"` (assertive); others use
+*   `role="status"` (polite) to avoid interrupting screen-reader flow.
+* - Use `dismissible` + `onDismiss` for user-closeable callouts.
+*
+* @example
+* <Alert variant="warning" title="Quota almost reached">
+*   You have used 90% of your monthly API calls.
+* </Alert>
+*/
+const Alert = ({ variant = "neutral", title, children, dismissible = false, onDismiss, className, ...props }) => {
+	const [dismissed, setDismissed] = useState(false);
+	const shouldReduceMotion = useReducedMotion();
+	if (dismissed) return null;
+	const Icon$2 = variantIcons[variant];
+	return /* @__PURE__ */ jsxs("div", {
+		role: variant === "danger" || variant === "warning" ? "alert" : "status",
+		"data-slot": "alert",
+		"data-variant": variant,
+		className: cn(alertVariants({ variant }), className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "shrink-0 mt-0.5 opacity-80",
+				children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+					icon: Icon$2,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [title && /* @__PURE__ */ jsx("p", {
+					className: "font-medium leading-snug mb-0.5 text-pretty",
+					children: title
+				}), /* @__PURE__ */ jsx("div", {
+					className: "leading-relaxed text-pretty",
+					children
+				})]
+			}),
+			dismissible && /* @__PURE__ */ jsx(motion.button, {
+				type: "button",
+				"aria-label": "Dismiss",
+				whileTap: shouldReduceMotion ? void 0 : { scale: .96 },
+				transition: spring$3,
+				onClick: () => {
+					setDismissed(true);
+					onDismiss?.();
+				},
+				className: "relative before:absolute before:-inset-[13px] before:content-[''] shrink-0 mt-0.5 rounded-sm p-0.5 opacity-60 hover:opacity-100 transition-[opacity] duration-150 ease-out motion-reduce:transition-none touch-manipulation cursor-pointer",
+				children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+					icon: Cancel01Icon,
+					size: 14
+				})
+			})
+		]
+	});
+};
 
 //#endregion
 //#region src/components/ui/badge/badge.tsx
-const badgeVariants = cva("inline-flex items-center justify-center rounded-[5px] border border-transparent px-1.5 py-0.5 text-xs font-medium tabular-nums w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 [&>svg]:[stroke-width:2.5] gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow,background-color] duration-150 overflow-hidden", {
-	defaultVariants: { variant: "default" },
+const badgeVariants = cva("inline-flex items-center justify-center rounded-[5px] border border-transparent px-1.5 py-0.5 text-xs font-medium tabular-nums w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 [&>svg]:[stroke-width:2.5] gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow,background-color] duration-150 motion-reduce:transition-none overflow-hidden", {
+	defaultVariants: { variant: "neutral" },
 	variants: { variant: {
 		brand: "bg-[var(--brand-light)] text-[var(--brand-accented)] dark:text-[oklch(0.650_0.085_256)] border-[var(--brand-default)]/20 dark:border-[oklch(0.450_0.070_256)]/30 [a&]:hover:bg-[var(--brand-light)]/80",
 		danger: "bg-[var(--danger-light)] text-[var(--text-danger)] border-[var(--border-danger)]/20 [a&]:hover:bg-[var(--danger-light)]/80",
@@ -413,11 +613,12 @@ const badgeVariants = cva("inline-flex items-center justify-center rounded-[5px]
 		"dashed-brand": "border-dashed border-[var(--brand-default)] text-[var(--brand-accented)] bg-transparent",
 		default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
 		destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-		ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+		ghost: "hover:bg-accent hover:text-accent-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 		"gradient-brand": "bg-gradient-to-r from-[var(--brand-default)] to-[var(--process-default)] text-white border-transparent",
 		"gradient-premium": "bg-gradient-to-r from-amber-500 to-orange-400 text-white border-transparent",
 		inactive: "bg-[var(--inactive-light)] text-muted-foreground border-[var(--border-inactive)]/40 [a&]:hover:bg-[var(--inactive-light)]/80",
-		link: "text-primary underline-offset-4 [a&]:hover:underline",
+		link: "text-primary underline-offset-4 hover:underline [a&]:hover:underline",
+		neutral: "bg-secondary text-secondary-foreground border-border [a&]:hover:bg-secondary/90",
 		outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 		process: "bg-[var(--process-light)] text-[var(--text-process)] border-[var(--border-process)]/20 [a&]:hover:bg-[var(--process-light)]/80",
 		secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
@@ -425,7 +626,17 @@ const badgeVariants = cva("inline-flex items-center justify-center rounded-[5px]
 		warning: "bg-[var(--warning-light)] text-[var(--text-warning)] border-[var(--border-warning)]/20 [a&]:hover:bg-[var(--warning-light)]/80"
 	} }
 });
-const Badge = ({ className, variant = "default", asChild = false, ...props }) => {
+/**
+* A small status/label badge.
+*
+* Semantic variants (preferred): `neutral` (grey — the default), `brand`, `success`,
+* `warning`, `danger`, `process`, `inactive`. Pick the variant by meaning.
+*
+* The shadcn-style variants (`default`, `secondary`, `outline`, `ghost`, `link`,
+* `destructive`, `dashed`, `dashed-brand`, `gradient-brand`, `gradient-premium`) are
+* kept as deprecated aliases for backwards compatibility — prefer the semantic ones.
+*/
+const Badge = ({ className, variant = "neutral", asChild = false, ...props }) => {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
 		"data-slot": "badge",
 		"data-variant": variant,
@@ -435,35 +646,154 @@ const Badge = ({ className, variant = "default", asChild = false, ...props }) =>
 };
 
 //#endregion
-//#region src/components/ui/card/card.tsx
-const Card = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	"data-slot": "card",
-	className: cn("bg-card text-card-foreground flex flex-col rounded-[16px] border-0 shadow-[var(--shadow-card)] overflow-hidden has-data-[slot=card-footer]:bg-muted/50", className),
+//#region src/components/ui/breadcrumb/breadcrumb.tsx
+/**
+* Root nav wrapper for a breadcrumb trail.
+* Renders a semantic `<nav>` with `aria-label="breadcrumb"` so assistive
+* technologies identify it as the site breadcrumb landmark.
+*/
+const Breadcrumb = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
+	"data-slot": "breadcrumb",
+	"aria-label": "breadcrumb",
+	className: cn("", className),
 	...props
 });
+/**
+* Ordered list that holds `BreadcrumbItem` children.
+* Flex-wraps so long trails reflow gracefully on narrow viewports.
+*/
+const BreadcrumbList = ({ className, ...props }) => /* @__PURE__ */ jsx("ol", {
+	"data-slot": "breadcrumb-list",
+	className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
+	...props
+});
+/**
+* A single step in the breadcrumb trail.
+* Renders as an `<li>` with inline-flex layout so icon separators stay
+* vertically centered next to link text.
+*/
+const BreadcrumbItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	"data-slot": "breadcrumb-item",
+	className: cn("inline-flex items-center gap-1.5", className),
+	...props
+});
+/**
+* A navigable breadcrumb step.
+*
+* Supports `asChild` (Radix Slot) so consumers can swap in a router `<Link>`:
+* ```tsx
+* <BreadcrumbLink asChild>
+*   <Link href='/settings'>Settings</Link>
+* </BreadcrumbLink>
+* ```
+*
+* Inherits `text-muted-foreground` from `BreadcrumbList` and upgrades to
+* `text-foreground` on hover with an `ease-out` transition.
+*/
+const BreadcrumbLink = ({ asChild = false, className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		"data-slot": "breadcrumb-link",
+		className: cn("transition-colors duration-150 ease-out hover:text-foreground motion-reduce:transition-none", className),
+		...props,
+		children
+	});
+};
+/**
+* The current page indicator — the last (non-navigable) step in the trail.
+*
+* Renders as a `<span>` with `aria-current="page"` so screen readers announce
+* it as the current location. Not styled as a link; uses `text-foreground` to
+* visually distinguish it from the ancestor links.
+*/
+const BreadcrumbPage = ({ className, children, ...props }) => /* @__PURE__ */ jsx("span", {
+	"data-slot": "breadcrumb-page",
+	"aria-current": "page",
+	className: cn("font-normal text-foreground", className),
+	...props,
+	children
+});
+/**
+* Visual divider between breadcrumb steps.
+*
+* Hidden from assistive technologies via `aria-hidden`.
+* Accepts custom `children` to replace the default chevron with any icon or character.
+*/
+const BreadcrumbSeparator = ({ className, children, ...props }) => /* @__PURE__ */ jsx("li", {
+	"data-slot": "breadcrumb-separator",
+	"aria-hidden": "true",
+	className: cn("[&>svg]:size-3.5", className),
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(HugeiconsIcon, {
+		icon: ArrowRight01Icon,
+		size: 14,
+		className: "text-muted-foreground/60",
+		"aria-hidden": "true"
+	})
+});
+/**
+* Collapsed-steps indicator for long breadcrumb trails.
+*
+* Renders a `MoreHorizontal` icon with a screen-reader-only "More" label.
+* Hidden from the accessibility tree via `aria-hidden` — the surrounding
+* visible crumbs provide sufficient context.
+*/
+const BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	"data-slot": "breadcrumb-ellipsis",
+	"aria-hidden": "true",
+	className: cn("flex size-6 items-center justify-center", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+		icon: MoreHorizontalIcon,
+		size: 14,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "More"
+	})]
+});
+
+//#endregion
+//#region src/components/ui/card/card.tsx
+const Card = ({ className, interactive = false, selected = false, tray = "none", children, ...props }) => {
+	const { edge, shellClassName, content } = renderTrayLayout({
+		children,
+		isFooter: (el) => el.type === CardFooter,
+		isHeader: (el) => el.type === CardHeader,
+		tray
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		"data-selected": selected || void 0,
+		"data-tray": edge,
+		className: cn("text-card-foreground flex flex-col rounded-[16px] border-0 shadow-[var(--shadow-card)] overflow-hidden", shellClassName, interactive && "cursor-pointer transition-[box-shadow,transform] duration-150 ease-out motion-reduce:transition-none hover:shadow-[var(--shadow-elevated)] active:scale-[0.99]", selected && "shadow-[0_0_0_2px_var(--action),var(--shadow-card)]", className),
+		...props,
+		children: content
+	});
+};
 const CardHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-slot": "card-header",
-	className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-5 py-4 border-b bg-card has-data-[slot=card-action]:grid-cols-[1fr_auto]", className),
+	className: cn("@container/card-header relative flex flex-col gap-0.5 px-4 py-3.5 bg-card border-b border-[var(--border-divider)]", className),
 	...props
 });
-const CardTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+const CardTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsx("h3", {
 	"data-slot": "card-title",
-	className: cn("text-sm leading-none font-semibold text-balance", className),
-	...props
+	className: cn("text-base leading-none font-semibold text-balance", className),
+	...props,
+	children
 });
-const CardDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+const CardDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
 	"data-slot": "card-description",
-	className: cn("text-muted-foreground text-[13px] text-pretty", className),
+	className: cn("text-muted-foreground text-sm text-pretty", className),
 	...props
 });
 const CardContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-slot": "card-content",
-	className: cn("px-5 py-3.5 bg-card", className),
+	className: cn("flex-1 px-4 py-3 bg-card", className),
 	...props
 });
 const CardFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-slot": "card-footer",
-	className: cn("flex items-center px-5 py-4 bg-muted/50", className),
+	className: cn("mt-auto flex items-center justify-end gap-2 px-4 py-3.5 border-t border-[var(--border-divider)] bg-muted", className),
 	...props
 });
 
@@ -494,14 +824,14 @@ const CheckIcon = ({ size = 14, strokeWidth = 3, className, ...props }) => /* @_
 const Checkbox = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
 		"data-slot": "checkbox",
-		className: cn("group peer dark:bg-input/30 data-[state=checked]:bg-[var(--action)] data-[state=checked]:text-white dark:data-[state=checked]:bg-[var(--action)] data-[state=indeterminate]:bg-[var(--action)] data-[state=indeterminate]:text-white relative size-4 shrink-0 touch-manipulation rounded-[4px] border-0 shadow-[0_0_0_1px_rgba(31,41,55,0.20),0_1px_2px_0_rgba(0,0,0,0.06),0_0_1px_0_rgba(0,0,0,0.02)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.15),0_1px_2px_0_rgba(0,0,0,0.20),0_0_1px_0_rgba(0,0,0,0.06)] data-[state=checked]:shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_rgba(255,255,255,0.15)_inset,0px_2px_3px_0px_rgba(31,41,55,0.30),0px_1px_1px_0px_rgba(0,0,0,0.28)] dark:data-[state=checked]:shadow-[0px_1px_1px_0px_rgba(255,255,255,0.10)_inset,0px_2px_3px_0px_rgba(0,0,0,0.50),0px_1px_1px_0px_rgba(0,0,0,0.30)] data-[state=indeterminate]:shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_rgba(255,255,255,0.15)_inset,0px_2px_3px_0px_rgba(31,41,55,0.30),0px_1px_1px_0px_rgba(0,0,0,0.28)] dark:data-[state=indeterminate]:shadow-[0px_1px_1px_0px_rgba(255,255,255,0.10)_inset,0px_2px_3px_0px_rgba(0,0,0,0.50),0px_1px_1px_0px_rgba(0,0,0,0.30)] transition-[color,box-shadow,background-color] duration-200 ease outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:shadow-[0_0_0_1px_var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer before:absolute before:-inset-[12px] before:content-['']", className),
+		className: cn("group peer dark:bg-input/30 data-[state=checked]:bg-[var(--action)] data-[state=checked]:text-white dark:data-[state=checked]:bg-[var(--action)] data-[state=indeterminate]:bg-[var(--action)] data-[state=indeterminate]:text-white relative size-4 shrink-0 touch-manipulation rounded-[4px] border-0 shadow-[var(--shadow-control)] dark:shadow-[var(--shadow-control)] hover:data-[state=unchecked]:shadow-[var(--shadow-control-hover)] dark:hover:data-[state=unchecked]:shadow-[var(--shadow-control-hover)] data-[state=checked]:shadow-[var(--shadow-control-checked)] dark:data-[state=checked]:shadow-[var(--shadow-control-checked)] data-[state=indeterminate]:shadow-[var(--shadow-control-checked)] dark:data-[state=indeterminate]:shadow-[var(--shadow-control-checked)] transition-[color,box-shadow,background-color] duration-200 ease-out motion-reduce:transition-none outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:shadow-[0_0_0_1px_var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer after:absolute after:-inset-[14px] after:content-['']", className),
 		...props,
 		children: /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, {
 			"data-slot": "checkbox-indicator",
 			className: "relative grid place-content-center text-current size-full",
 			forceMount: true,
 			children: [/* @__PURE__ */ jsx("svg", {
-				className: "size-3.5 absolute inset-0 m-auto transition-[opacity,transform,filter] duration-200 opacity-0 scale-[0.25] blur-[4px] group-data-[state=indeterminate]:opacity-100 group-data-[state=indeterminate]:scale-100 group-data-[state=indeterminate]:blur-none",
+				className: "size-3.5 absolute inset-0 m-auto transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none opacity-0 scale-[0.25] blur-[4px] group-data-[state=indeterminate]:opacity-100 group-data-[state=indeterminate]:scale-100 group-data-[state=indeterminate]:blur-none",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
@@ -513,7 +843,7 @@ const Checkbox = ({ className, ...props }) => {
 					strokeWidth: 3
 				})
 			}), /* @__PURE__ */ jsx("svg", {
-				className: "size-3.5 absolute inset-0 m-auto transition-[opacity,transform,filter] duration-200 opacity-0 scale-[0.25] blur-[4px] group-data-[state=checked]:opacity-100 group-data-[state=checked]:scale-100 group-data-[state=checked]:blur-none",
+				className: "size-3.5 absolute inset-0 m-auto transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none opacity-0 scale-[0.25] blur-[4px] group-data-[state=checked]:opacity-100 group-data-[state=checked]:scale-100 group-data-[state=checked]:blur-none",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
@@ -542,8 +872,9 @@ const CollapsibleTrigger = ({ className, ...props }) => {
 		...props
 	});
 };
-const CollapsibleContent = ({ ...props }) => /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, {
+const CollapsibleContent = ({ className, ...props }) => /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, {
 	"data-slot": "collapsible-content",
+	className: cn("overflow-hidden", "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up", "motion-reduce:animate-none", className),
 	...props
 });
 
@@ -564,22 +895,31 @@ const DialogOverlay = ({ className, ...props }) => /* @__PURE__ */ jsx(Overlay$1
 	className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--overlay-md)] backdrop-blur-[2px] will-change-[opacity] duration-200 data-[state=open]:ease-out data-[state=closed]:ease-in motion-reduce:animate-none", className),
 	...props
 });
-const DialogContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(DialogPortal, {
-	"data-slot": "dialog-portal",
-	children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(Content$2, {
-		"data-slot": "dialog-content",
-		className: cn("bg-card overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-[16px] border-0 shadow-none duration-200 data-[state=open]:ease-out data-[state=closed]:ease-in outline-none sm:max-w-md will-change-[opacity,transform] motion-reduce:animate-none", className),
-		...props,
-		children
-	})]
-});
+const DialogContent = ({ className, children, tray = "auto", ...props }) => {
+	const { edge, shellClassName, content } = renderTrayLayout({
+		children,
+		isFooter: (el) => el.type === DialogFooter,
+		isHeader: (el) => el.type === DialogHeader,
+		tray
+	});
+	return /* @__PURE__ */ jsxs(DialogPortal, {
+		"data-slot": "dialog-portal",
+		children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(Content$2, {
+			"data-slot": "dialog-content",
+			"data-tray": edge,
+			className: cn("overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-[16px] border-0 shadow-[var(--shadow-elevated)] duration-200 data-[state=open]:ease-out data-[state=closed]:ease-in outline-none sm:max-w-md will-change-[opacity,transform] motion-reduce:animate-none", shellClassName, className),
+			...props,
+			children: content
+		})]
+	});
+};
 const DialogHeader = ({ className, showCloseButton = true, children, ...props }) => /* @__PURE__ */ jsxs("div", {
 	"data-slot": "dialog-header",
-	className: cn("relative flex flex-col gap-1.5 px-5 pt-4 pb-4 border-b bg-card sm:text-left", className),
+	className: cn("relative flex flex-col gap-0.5 px-4 py-4 border-b border-[var(--border-hairline)] bg-card sm:text-left", className),
 	...props,
 	children: [children, showCloseButton && /* @__PURE__ */ jsxs(Close, {
 		"data-slot": "dialog-close",
-		className: "absolute top-3 right-3 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,background-color] duration-150 ease hover:opacity-100 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 focus:outline-hidden cursor-pointer touch-manipulation before:absolute before:-inset-[6px] before:content-[\"\"]",
+		className: "absolute top-1/2 right-2.5 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,background-color] duration-150 ease-out motion-reduce:transition-none hover:opacity-100 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 focus:outline-hidden cursor-pointer touch-manipulation before:absolute before:-inset-[8px] before:content-[\"\"]",
 		children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
 			icon: Cancel01Icon,
 			size: 14
@@ -591,12 +931,12 @@ const DialogHeader = ({ className, showCloseButton = true, children, ...props })
 });
 const DialogBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	"data-slot": "dialog-body",
-	className: cn("px-5 py-5 bg-card", className),
+	className: cn("px-4 py-[18px] bg-card", className),
 	...props
 });
 const DialogFooter = ({ className, showCloseButton = false, children, ...props }) => /* @__PURE__ */ jsxs("div", {
 	"data-slot": "dialog-footer",
-	className: cn("grid grid-cols-2 gap-2 px-5 py-4 bg-muted", className),
+	className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end px-3 py-3.5 border-t border-[var(--border-divider)] bg-muted", className),
 	...props,
 	children: [children, showCloseButton && /* @__PURE__ */ jsx(Close, {
 		asChild: true,
@@ -608,7 +948,7 @@ const DialogFooter = ({ className, showCloseButton = false, children, ...props }
 });
 const DialogTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(Title$1, {
 	"data-slot": "dialog-title",
-	className: cn("text-lg leading-none font-semibold text-balance", className),
+	className: cn("text-[17px] leading-none font-semibold text-balance", className),
 	...props
 });
 const DialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Description$1, {
@@ -617,86 +957,6 @@ const DialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Descr
 	...props
 });
 
-//#endregion
-//#region src/components/icons/animated-icon/animated-icon.tsx
-const AnimatedIcon = forwardRef(({ children, className, onMouseEnter, onMouseLeave, size = 28, ...props }, ref) => {
-	const controls = useAnimation();
-	const isControlledRef = useRef(false);
-	useImperativeHandle(ref, () => {
-		isControlledRef.current = true;
-		return {
-			startAnimation: () => controls.start("animate"),
-			stopAnimation: () => controls.start("normal")
-		};
-	});
-	const handleMouseEnter = useCallback((e) => {
-		if (isControlledRef.current) onMouseEnter?.(e);
-		else controls.start("animate").catch(() => void 0);
-	}, [controls, onMouseEnter]);
-	const handleMouseLeave = useCallback((e) => {
-		if (isControlledRef.current) onMouseLeave?.(e);
-		else controls.start("normal").catch(() => void 0);
-	}, [controls, onMouseLeave]);
-	return /* @__PURE__ */ jsx("div", {
-		"aria-hidden": "true",
-		className: cn("inline-flex items-center justify-center", className),
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		...props,
-		children: children(controls, size)
-	});
-});
-AnimatedIcon.displayName = "AnimatedIcon";
-
-//#endregion
-//#region src/components/icons/search/search.tsx
-const SearchIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(AnimatedIcon, {
-	ref,
-	...props,
-	children: (controls, size) => /* @__PURE__ */ jsxs(motion.svg, {
-		animate: controls,
-		fill: "none",
-		height: size,
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: "2",
-		transition: {
-			bounce: .3,
-			duration: 1
-		},
-		variants: {
-			animate: {
-				x: [
-					0,
-					0,
-					-3,
-					0
-				],
-				y: [
-					0,
-					-4,
-					0,
-					0
-				]
-			},
-			normal: {
-				x: 0,
-				y: 0
-			}
-		},
-		viewBox: "0 0 24 24",
-		width: size,
-		xmlns: "http://www.w3.org/2000/svg",
-		children: [/* @__PURE__ */ jsx("circle", {
-			cx: "11",
-			cy: "11",
-			r: "8"
-		}), /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })]
-	})
-}));
-SearchIcon.displayName = "SearchIcon";
-
 //#endregion
 //#region src/components/ui/command/command.tsx
 const Command = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1, {
@@ -704,23 +964,27 @@ const Command = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1, {
 	className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
 	...props
 });
-const CommandDialog = ({ title = "Command Palette", description = "Search for a command to run...", children, className, ...props }) => /* @__PURE__ */ jsxs(Dialog, {
+const CommandDialog = ({ title = "Command Palette", description = "Search for a command to run...", children, className, ...props }) => /* @__PURE__ */ jsx(Dialog, {
 	...props,
-	children: [/* @__PURE__ */ jsxs(DialogHeader, {
-		className: "sr-only",
-		children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
-	}), /* @__PURE__ */ jsx(DialogContent, {
+	children: /* @__PURE__ */ jsxs(DialogContent, {
 		className: cn("overflow-hidden p-0", className),
-		children: /* @__PURE__ */ jsx(Command, {
+		children: [/* @__PURE__ */ jsxs(DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+		}), /* @__PURE__ */ jsx(Command, {
 			className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
 			children
-		})
-	})]
+		})]
+	})
 });
 const CommandInput = ({ className, ...props }) => /* @__PURE__ */ jsxs("div", {
 	"data-slot": "command-input-wrapper",
 	className: "flex h-9 items-center gap-2 border-b px-3",
-	children: [/* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
+	children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+		icon: Search01Icon,
+		size: 16,
+		className: "shrink-0 text-muted-foreground/70"
+	}), /* @__PURE__ */ jsx(Command$1.Input, {
 		"data-slot": "command-input",
 		className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props
@@ -728,7 +992,7 @@ const CommandInput = ({ className, ...props }) => /* @__PURE__ */ jsxs("div", {
 });
 const CommandList = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1.List, {
 	"data-slot": "command-list",
-	className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+	className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto p-1", className),
 	...props
 });
 const CommandEmpty = ({ ...props }) => /* @__PURE__ */ jsx(Command$1.Empty, {
@@ -738,7 +1002,7 @@ const CommandEmpty = ({ ...props }) => /* @__PURE__ */ jsx(Command$1.Empty, {
 });
 const CommandGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1.Group, {
 	"data-slot": "command-group",
-	className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
+	className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
 	...props
 });
 const CommandSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1.Separator, {
@@ -757,6 +1021,95 @@ const CommandShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx("span",
 	...props
 });
 
+//#endregion
+//#region src/components/ui/popover/popover.tsx
+const Popover = ({ ...props }) => /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
+	"data-slot": "popover",
+	...props
+});
+const PopoverTrigger = ({ ...props }) => /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+	"data-slot": "popover-trigger",
+	...props
+});
+const PopoverContent = ({ className, align = "center", sideOffset = 8, ...props }) => {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		"data-slot": "popover-content",
+		align,
+		sideOffset,
+		className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border-0 p-4 shadow-[var(--shadow-elevated)] outline-hidden will-change-[opacity,transform] motion-reduce:animate-none", className),
+		...props
+	}) });
+};
+const PopoverAnchor = ({ ...props }) => /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
+	"data-slot": "popover-anchor",
+	...props
+});
+
+//#endregion
+//#region src/components/ui/combobox/combobox.tsx
+/**
+* Searchable single-select Combobox.
+*
+* Composes `Popover`, `Button`, and `Command` from the droplet design system.
+* The trigger is a full-width `outline` Button with a rotating chevron that
+* signals open/closed state. Selecting an item closes the popover, fires
+* `onValueChange`, and shows a check mark next to the active selection.
+*
+* @example
+* ```tsx
+* const [chain, setChain] = useState('');
+* <Combobox
+*   options={[{ value: 'eth', label: 'Ethereum' }, { value: 'sol', label: 'Solana' }]}
+*   value={chain}
+*   onValueChange={setChain}
+*   placeholder="Select a chain"
+* />
+* ```
+*/
+const Combobox = ({ options, value, onValueChange, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No results.", className, disabled = false }) => {
+	const [open, setOpen] = useState(false);
+	const selectedLabel = options.find((opt) => opt.value === value)?.label;
+	const handleSelect = (selectedValue) => {
+		onValueChange(selectedValue);
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-slot": "combobox-trigger",
+				"aria-expanded": open,
+				"aria-haspopup": "listbox",
+				disabled,
+				className: cn("flex h-8 w-full touch-manipulation items-center justify-between gap-1.5 rounded-md border-0 bg-background px-3 text-[13px] whitespace-nowrap dark:bg-input/30", "shadow-[var(--shadow-input)] hover:shadow-[var(--shadow-input-hover)]", "transition-[color,box-shadow] duration-100 ease-out motion-reduce:transition-none", "outline-none focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_var(--ring-halo)]", "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", className),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("truncate", !selectedLabel && "text-muted-foreground/60"),
+					children: selectedLabel ?? placeholder
+				}), /* @__PURE__ */ jsx(HugeiconsIcon, {
+					icon: ArrowDown01Icon,
+					size: 16,
+					className: cn("shrink-0 opacity-50 transition-transform duration-150 ease-out motion-reduce:transition-none", open && "rotate-180")
+				})]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-[var(--radix-popover-trigger-width)] p-0",
+			align: "start",
+			sideOffset: 4,
+			children: /* @__PURE__ */ jsxs(Command, {
+				className: "rounded-[inherit]",
+				children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }), options.map((opt) => /* @__PURE__ */ jsxs(CommandItem, {
+					value: opt.value,
+					onSelect: handleSelect,
+					children: [/* @__PURE__ */ jsx(CheckIcon, { className: cn("shrink-0", value === opt.value ? "opacity-100" : "opacity-0") }), opt.label]
+				}, opt.value))] })]
+			})
+		})]
+	});
+};
+
 //#endregion
 //#region src/components/ui/dropdown-menu/dropdown-menu.tsx
 const DropdownMenu = Root$3;
@@ -766,7 +1119,7 @@ const DropdownMenuSub = Sub;
 const DropdownMenuContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Portal$2, { children: /* @__PURE__ */ jsx(Content$3, {
 	ref,
 	sideOffset,
-	className: cn("z-50 min-w-32 overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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", className),
+	className: cn("z-50 min-w-32 overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-[var(--shadow-elevated)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 motion-reduce:animate-none", className),
 	...props
 }) }));
 DropdownMenuContent.displayName = Content$3.displayName;
@@ -783,7 +1136,7 @@ const DropdownMenuCheckboxItem = forwardRef(({ className, children, checked, ...
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute left-2 flex size-3.5 items-center justify-center",
-		children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon$1, { className: "size-4" }) })
+		children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon$1, { className: "size-3.5" }) })
 	}), children]
 }));
 DropdownMenuCheckboxItem.displayName = CheckboxItem.displayName;
@@ -800,6 +1153,7 @@ const DropdownMenuRadioItem = forwardRef(({ className, children, ...props }, ref
 DropdownMenuRadioItem.displayName = RadioItem.displayName;
 const DropdownMenuLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(Label$1, {
 	ref,
+	"data-slot": "dropdown-menu-label",
 	className: cn("px-2 py-1.5 text-sm font-medium", inset && "pl-8", className),
 	...props
 }));
@@ -811,6 +1165,7 @@ const DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @_
 }));
 DropdownMenuSeparator.displayName = Separator$1.displayName;
 const DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
 	className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
 	...props
 });
@@ -824,11 +1179,141 @@ const DropdownMenuSubTrigger = forwardRef(({ className, inset, children, ...prop
 DropdownMenuSubTrigger.displayName = SubTrigger.displayName;
 const DropdownMenuSubContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SubContent, {
 	ref,
-	className: cn("z-50 min-w-32 overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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", className),
+	className: cn("z-50 min-w-32 overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 motion-reduce:animate-none", className),
 	...props
 }));
 DropdownMenuSubContent.displayName = SubContent.displayName;
 
+//#endregion
+//#region src/components/ui/well/well.tsx
+const wellVariants = cva("rounded-xl", {
+	defaultVariants: {
+		gap: "sm",
+		spacing: "default",
+		variant: "inset"
+	},
+	variants: {
+		gap: {
+			default: "space-y-4",
+			lg: "space-y-5",
+			none: "",
+			sm: "space-y-3"
+		},
+		spacing: {
+			default: "p-4",
+			lg: "p-5",
+			none: "p-0",
+			sm: "p-3"
+		},
+		variant: {
+			default: "bg-muted/50",
+			inset: "bg-muted/50 border border-border",
+			outline: "border border-border"
+		}
+	}
+});
+const Well = ({ className, gap, spacing, variant, ...props }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "well",
+	"data-spacing": spacing ?? "default",
+	className: cn(wellVariants({
+		gap,
+		spacing,
+		variant
+	}), className),
+	...props
+});
+const WellReveal = ({ children, className, open }) => /* @__PURE__ */ jsx("div", {
+	className: "grid transition-[grid-template-rows] duration-[220ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+	style: { gridTemplateRows: open ? "1fr" : "0fr" },
+	"aria-hidden": !open,
+	inert: !open,
+	children: /* @__PURE__ */ jsx("div", {
+		className: "overflow-hidden",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("px-0.5 pb-0.5 [&>[data-slot=well]:not([data-spacing=none])]:p-[22px]", className),
+			children
+		})
+	})
+});
+
+//#endregion
+//#region src/components/ui/flush-card-stack/flush-card-stack.tsx
+const DETACH_GAP_PX = 12;
+/**
+* Declarative item marker for {@link FlushCardStack}. Renders nothing on its own;
+* the stack consumes its props.
+*/
+const FlushCardStackItem = (_props) => null;
+const isStackItem = (child) => isValidElement(child) && child.type === FlushCardStackItem;
+const hasReveal = (item) => Boolean(item.props.children);
+const detaches = (item) => hasReveal(item) && Boolean(item.props.open);
+/**
+* A vertical stack of settings cards that fuse into one block by default and
+* detach with a spring gap when an item's reveal is opened.
+*
+* Composed from {@link Card} + {@link WellReveal} (+ `motion`); it encapsulates
+* the `-mt-px` / `rounded-[16px]` / gap math so consumers pass only per-item
+* `open` + content:
+*
+* ```tsx
+* <FlushCardStack>
+*   <FlushCardStack.Item open={emailOn} header={<ToggleRow … />}>
+*     <Well gap='sm'>{/* checkbox rows *\/}</Well>
+*   </FlushCardStack.Item>
+*   <FlushCardStack.Item header={<ToggleRow … />} />
+* </FlushCardStack>
+* ```
+*
+* Rule: a seam (12px spring gap + facing edges rounding to `rounded-[16px]`)
+* opens between two cards when EITHER side is an open reveal item — so an open
+* middle item floats free on both sides, while an open first/last item produces a
+* single inner split. Items with no reveal, or closed reveals, always fuse.
+*/
+const FlushCardStack = ({ children, className }) => {
+	const prefersReducedMotion = useReducedMotion();
+	const items = Children.toArray(children).filter(isStackItem);
+	const lastIndex = items.length - 1;
+	const gapTransition = prefersReducedMotion ? { duration: 0 } : {
+		bounce: 0,
+		duration: .4,
+		type: "spring"
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "flush-card-stack",
+		className,
+		children: items.map((item, index) => {
+			const prev = items[index - 1];
+			const next = items[index + 1];
+			const isFirst = index === 0;
+			const isLast = index === lastIndex;
+			const splitAbove = !isFirst && (detaches(item) || detaches(prev));
+			const splitBelow = !isLast && (detaches(item) || detaches(next));
+			const roundTop = isFirst || splitAbove;
+			const roundBottom = isLast || splitBelow;
+			const gapPossible = !isLast && (hasReveal(item) || hasReveal(next));
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Card, {
+				"data-detached": detaches(item) || void 0,
+				className: cn("gap-0 py-0 transition-[border-radius] duration-300", !roundTop && "rounded-t-none -mt-px", !roundBottom && "rounded-b-none", item.props.className),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "px-5 py-4",
+					children: item.props.header
+				}), hasReveal(item) && /* @__PURE__ */ jsx(WellReveal, {
+					open: Boolean(item.props.open),
+					children: item.props.children
+				})]
+			}), gapPossible && /* @__PURE__ */ jsx(motion.div, {
+				"aria-hidden": true,
+				"data-slot": "flush-card-gap",
+				"data-open": splitBelow || void 0,
+				initial: false,
+				animate: { height: splitBelow ? DETACH_GAP_PX : 0 },
+				transition: gapTransition
+			})] }, item.key ?? index);
+		})
+	});
+};
+FlushCardStack.Item = FlushCardStackItem;
+
 //#endregion
 //#region src/components/icon-config/icon-config.tsx
 const IconConfigContext = createContext({
@@ -872,6 +1357,76 @@ const Icon = (props) => {
 	});
 };
 
+//#endregion
+//#region src/components/ui/field/field.tsx
+/**
+* A generic labeled form-field wrapper.
+*
+* Wires a `<Label>`, an arbitrary form control, an optional description, and
+* an error message together with the correct `id`/`htmlFor`/`aria-describedby`
+* associations so callers don't have to hand-assemble these.
+*
+* When there is exactly one child element, `Field` uses `cloneElement` to
+* inject:
+* - `id` — links the label's `htmlFor` to the control
+* - `aria-describedby` — references the description and/or error paragraph ids
+* - `aria-invalid` — `true` when `error` is present
+*
+* @example
+* ```tsx
+* <Field label="Email" description="We'll never share your email." required>
+*   <Input type="email" />
+* </Field>
+*
+* <Field label="Email" error="Enter a valid email address.">
+*   <Input type="email" />
+* </Field>
+* ```
+*/
+const Field = ({ label, description, error, required, htmlFor, children, className }) => {
+	const generatedId = useId();
+	const controlId = htmlFor ?? generatedId;
+	const descriptionId = `${controlId}-description`;
+	const errorId = `${controlId}-error`;
+	const describedByParts = [];
+	if (description) describedByParts.push(descriptionId);
+	if (error) describedByParts.push(errorId);
+	const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+	const childArray = Children.toArray(children);
+	const singleChild = childArray.length === 1 && isValidElement(childArray[0]) ? childArray[0] : null;
+	const enrichedChild = singleChild ? cloneElement(singleChild, {
+		"aria-describedby": singleChild.props["aria-describedby"] ?? ariaDescribedBy,
+		id: singleChild.props.id ?? controlId,
+		...error ? { "aria-invalid": true } : {}
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid gap-1.5", className),
+		children: [
+			label && /* @__PURE__ */ jsxs(Label, {
+				htmlFor: controlId,
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "ml-0.5 text-[var(--text-danger)]",
+					children: "*"
+				})]
+			}),
+			enrichedChild ?? children,
+			description && /* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "text-sm text-muted-foreground",
+				children: description
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				className: "text-sm text-[var(--text-danger)]",
+				children: error
+			})
+		]
+	});
+};
+Field.displayName = "Field";
+
 //#endregion
 //#region src/components/ui/kbd/kbd.tsx
 const Kbd = ({ className, ...props }) => {
@@ -882,30 +1437,6 @@ const Kbd = ({ className, ...props }) => {
 	});
 };
 
-//#endregion
-//#region src/components/ui/popover/popover.tsx
-const Popover = ({ ...props }) => /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
-	"data-slot": "popover",
-	...props
-});
-const PopoverTrigger = ({ ...props }) => /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
-	"data-slot": "popover-trigger",
-	...props
-});
-const PopoverContent = ({ className, align = "center", sideOffset = 4, ...props }) => {
-	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
-		"data-slot": "popover-content",
-		align,
-		sideOffset,
-		className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border-0 p-4 shadow-[var(--shadow-elevated)] outline-hidden will-change-[opacity,transform] motion-reduce:animate-none", className),
-		...props
-	}) });
-};
-const PopoverAnchor = ({ ...props }) => /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
-	"data-slot": "popover-anchor",
-	...props
-});
-
 //#endregion
 //#region src/components/ui/progress/progress.tsx
 const progressVariants = cva("h-full w-full flex-1 transition-transform duration-500 ease-out motion-reduce:transition-none", {
@@ -919,44 +1450,257 @@ const progressVariants = cva("h-full w-full flex-1 transition-transform duration
 		warning: "bg-[var(--warning-default)]"
 	} }
 });
-const Progress = ({ className, indeterminate = false, value, variant, ...props }) => /* @__PURE__ */ jsxs("div", {
-	"data-slot": "progress",
-	className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+const Progress = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, indeterminate = false, value, variant, ...props }) => {
+	const clamped = Math.min(100, Math.max(0, value ?? 0));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "progress",
+		className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("progress", {
+			"aria-label": ariaLabel ?? "Progress",
+			"aria-labelledby": ariaLabelledBy,
+			className: "sr-only",
+			max: 100,
+			value: indeterminate ? void 0 : clamped
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "progress-indicator",
+			className: cn(progressVariants({ variant }), indeterminate && "animate-progress-indeterminate motion-reduce:animate-none"),
+			style: indeterminate ? void 0 : { transform: `translateX(-${100 - clamped}%)` }
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/ui/radio-group/radio-group.tsx
+const RadioGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
+		"data-slot": "radio-group",
+		className: cn("grid gap-3", className),
+		...props
+	});
+};
+const RadioGroupItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+		"data-slot": "radio-group-item",
+		className: cn("text-[var(--action)] dark:bg-input/30 relative aspect-square size-4 shrink-0 touch-manipulation rounded-full border border-[rgba(31,41,55,0.30)] dark:border-[rgba(255,255,255,0.20)] hover:data-[state=unchecked]:border-[rgba(31,41,55,0.45)] dark:hover:data-[state=unchecked]:border-[rgba(255,255,255,0.35)] data-[state=checked]:border-[var(--action)] shadow-[var(--shadow-radio)] dark:shadow-[var(--shadow-radio)] transition-[color,box-shadow,border-color] duration-100 ease-out motion-reduce:transition-none outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-[var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer after:absolute after:-inset-[14px] after:content-['']", className),
+		...props,
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "group/indicator relative flex items-center justify-center",
+			forceMount: true,
+			children: /* @__PURE__ */ jsx("span", { className: "bg-[var(--action)] absolute top-1/2 left-1/2 size-2 rounded-full -translate-x-1/2 -translate-y-1/2 transition-[opacity,transform] duration-150 ease-out motion-reduce:transition-none group-data-[state=unchecked]/indicator:scale-0 group-data-[state=unchecked]/indicator:opacity-0" })
+		})
+	});
+};
+/**
+* Alias for `RadioGroupItem` for use in labeled-row patterns.
+*
+* A radio is inherently part of a group — it must always live inside a
+* `RadioGroup`. For a standalone on/off toggle, prefer `Checkbox` or `Switch`.
+* `Radio` is the labeled-usage alias that signals "I'm pairing this with a
+* `<Label>`" rather than constructing raw item markup.
+*/
+const Radio = RadioGroupItem;
+/**
+* A convenience labeled-radio row for use inside a `RadioGroup`.
+*
+* Renders a `RadioGroupItem` paired with an associated `<Label>` (and an
+* optional description line) so callers don't have to wire up `id`/`htmlFor`
+* by hand. The `id` is stable across renders via `React.useId` unless
+* overridden.
+*
+* @example
+* ```tsx
+* <RadioGroup value={val} onValueChange={setVal}>
+*   <RadioField value="a" label="Option A" description="First choice" />
+*   <RadioField value="b" label="Option B" />
+* </RadioGroup>
+* ```
+*/
+const RadioField = ({ value, label, description, disabled, id: idProp, className }) => {
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-start gap-3", disabled && "opacity-50", className),
+		children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+			value,
+			id,
+			disabled,
+			className: "mt-0.5"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "grid gap-0.5",
+			children: [/* @__PURE__ */ jsx(Label, {
+				htmlFor: id,
+				className: cn("cursor-pointer transition-colors duration-100 ease-out motion-reduce:transition-none", disabled && "cursor-not-allowed"),
+				children: label
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/ui/pagination/pagination.tsx
+/**
+* Root nav wrapper for a pagination control set.
+* Renders a semantic `<nav>` with the ARIA `navigation` landmark.
+*/
+const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
+	"data-slot": "pagination",
+	role: "navigation",
+	"aria-label": "pagination",
+	className: cn("mx-auto flex w-full justify-center", className),
+	...props
+});
+/**
+* Flex row that holds `PaginationItem` children.
+* Renders as a `<ul>` for correct list semantics inside the nav landmark.
+*/
+const PaginationContent = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+	"data-slot": "pagination-content",
+	className: cn("flex flex-row items-center gap-1", className),
+	...props
+});
+/**
+* A single `<li>` slot inside `PaginationContent`.
+* Acts as a structural wrapper — pair with `PaginationLink`, `PaginationPrevious`, or `PaginationNext`.
+*/
+const PaginationItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	"data-slot": "pagination-item",
+	className: cn("", className),
+	...props
+});
+/**
+* An individual page link.
+* Applies `buttonVariants` — `outline` when active, `ghost` when inactive — so focus rings,
+* `ease-out` transitions, and `motion-reduce` suppression are all inherited from Button's CVA base.
+*/
+const PaginationLink = ({ className, isActive = false, children, ...props }) => /* @__PURE__ */ jsx("a", {
+	"data-slot": "pagination-link",
+	"aria-current": isActive ? "page" : void 0,
+	className: cn(buttonVariants({
+		size: "icon-sm",
+		variant: isActive ? "outline" : "ghost"
+	}), className),
+	...props,
+	children
+});
+/**
+* Previous-page control.
+* Disabled when the consumer passes `aria-disabled="true"` or the native `disabled` attribute.
+* Touch target is expanded to 44 px via the pseudo-element already baked into `icon-sm`.
+*/
+const PaginationPrevious = ({ className, children, ...props }) => /* @__PURE__ */ jsxs("a", {
+	"data-slot": "pagination-previous",
+	"aria-label": "Go to previous page",
+	className: cn(buttonVariants({
+		size: "icon-sm",
+		variant: "ghost"
+	}), "gap-1 pl-2.5", className),
 	...props,
-	children: [/* @__PURE__ */ jsx("progress", {
-		"aria-label": "Progress",
+	children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+		icon: ArrowLeft01Icon,
+		size: 14,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ jsx("span", {
 		className: "sr-only",
-		max: 100,
-		value: indeterminate ? void 0 : value ?? 0
-	}), /* @__PURE__ */ jsx("div", {
-		"data-slot": "progress-indicator",
-		className: cn(progressVariants({ variant }), indeterminate && "animate-progress-indeterminate motion-reduce:animate-none"),
-		style: indeterminate ? void 0 : { transform: `translateX(-${100 - (value ?? 0)}%)` }
+		children: children ?? "Previous"
 	})]
 });
-
-//#endregion
-//#region src/components/ui/radio-group/radio-group.tsx
-const RadioGroup = ({ className, ...props }) => {
-	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
-		"data-slot": "radio-group",
-		className: cn("grid gap-3", className),
-		...props
-	});
-};
-const RadioGroupItem = ({ className, ...props }) => {
-	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
-		"data-slot": "radio-group-item",
-		className: cn("text-[var(--action)] dark:bg-input/30 relative aspect-square size-4 shrink-0 touch-manipulation rounded-full border border-[rgba(31,41,55,0.30)] dark:border-[rgba(255,255,255,0.20)] data-[state=checked]:border-[var(--action)] shadow-[0_1px_2px_rgba(0,0,0,0.06),0_0_1px_rgba(31,41,55,0.08)] dark:shadow-[0_1px_2px_rgba(0,0,0,0.20),0_0_1px_rgba(0,0,0,0.15)] transition-[color,box-shadow,border-color] duration-100 ease-out outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-[var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer before:absolute before:-inset-[12px] before:content-['']", className),
-		...props,
-		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
-			"data-slot": "radio-group-indicator",
-			className: "group/indicator relative flex items-center justify-center",
-			forceMount: true,
-			children: /* @__PURE__ */ jsx("span", { className: "bg-[var(--action)] absolute top-1/2 left-1/2 size-2 rounded-full -translate-x-1/2 -translate-y-1/2 transition-[opacity,transform] duration-150 ease-out group-data-[state=unchecked]/indicator:scale-0 group-data-[state=unchecked]/indicator:opacity-0" })
+/**
+* Next-page control.
+* Touch target is expanded to 44 px via the pseudo-element already baked into `icon-sm`.
+*/
+const PaginationNext = ({ className, children, ...props }) => /* @__PURE__ */ jsxs("a", {
+	"data-slot": "pagination-next",
+	"aria-label": "Go to next page",
+	className: cn(buttonVariants({
+		size: "icon-sm",
+		variant: "ghost"
+	}), "gap-1 pr-2.5", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+		icon: ArrowRight01Icon,
+		size: 14,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: children ?? "Next"
+	})]
+});
+/**
+* Ellipsis placeholder shown between non-contiguous page ranges.
+* Hidden from assistive technologies via `aria-hidden` — screen readers hear the surrounding page
+* numbers and can infer that pages are omitted.
+*/
+const PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	"data-slot": "pagination-ellipsis",
+	"aria-hidden": "true",
+	className: cn("flex size-7 items-center justify-center text-muted-foreground", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+		icon: MoreHorizontalIcon,
+		size: 14
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "More pages"
+	})]
+});
+/**
+* Pre-assembled cursor-based pagination bar.
+*
+* Renders a Previous button, an optional center label, and a Next button.
+* Each button is disabled automatically when there is no page in that direction.
+* Designed for dashboard tables and lists that use cursor/keyset pagination rather
+* than numbered pages — which is the dominant pattern in the Redcoast design system.
+*
+* @example
+* ```tsx
+* <CursorPagination
+*   hasPrevious={!!cursor.before}
+*   hasNext={!!cursor.after}
+*   onPrevious={loadPrevious}
+*   onNext={loadNext}
+*   label={`${startIndex}–${endIndex} of ${total}`}
+* />
+* ```
+*/
+const CursorPagination = ({ hasPrevious, hasNext, onPrevious, onNext, label, className }) => /* @__PURE__ */ jsxs("div", {
+	"data-slot": "cursor-pagination",
+	className: cn("flex items-center justify-between gap-2", className),
+	children: [
+		/* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "sm",
+			disabled: !hasPrevious,
+			onClick: onPrevious,
+			"aria-label": "Go to previous page",
+			children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: ArrowLeft01Icon,
+				size: 14,
+				"aria-hidden": "true"
+			}), "Previous"]
+		}),
+		label !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-muted-foreground tabular-nums",
+			children: label
+		}),
+		/* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "sm",
+			disabled: !hasNext,
+			onClick: onNext,
+			"aria-label": "Go to next page",
+			children: ["Next", /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: ArrowRight01Icon,
+				size: 14,
+				"aria-hidden": "true"
+			})]
 		})
-	});
-};
+	]
+});
 
 //#endregion
 //#region src/components/ui/scroll-area/scroll-area.tsx
@@ -968,7 +1712,7 @@ const ScrollArea = ({ className, children, ...props }) => {
 		children: [
 			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+				className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] motion-reduce:transition-none outline-none focus-visible:ring-[3px]",
 				children
 			}),
 			/* @__PURE__ */ jsx(ScrollBar, {}),
@@ -980,7 +1724,7 @@ const ScrollBar = ({ className, orientation = "vertical", ...props }) => {
 	return /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
 		"data-slot": "scroll-area-scrollbar",
 		orientation,
-		className: cn("flex touch-none touch-manipulation p-px transition-[background-color] select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+		className: cn("flex touch-none touch-manipulation p-px transition-[background-color] motion-reduce:transition-none select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
 		...props,
 		children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, {
 			"data-slot": "scroll-area-thumb",
@@ -995,14 +1739,14 @@ const SearchInput = ({ className, placeholder = "Search...", shortcut = "⌘K",
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"data-slot": "search-input",
-		className: cn("h-8 min-h-11 w-full touch-manipulation rounded-md border border-border bg-background dark:bg-input/30 md:min-h-0", "hover:border-foreground/20", "transition-[color,box-shadow,border-color] duration-100 ease-out", "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", "flex items-center gap-2 px-3", "text-sm text-muted-foreground/60 cursor-pointer", className),
+		className: cn("h-8 w-full touch-manipulation rounded-md border-0 bg-background dark:bg-input/30 shadow-[var(--shadow-input)]", "hover:shadow-[var(--shadow-input-hover)]", "transition-[color,box-shadow] duration-100 ease-out motion-reduce:transition-none", "outline-none focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_var(--ring-halo,#0072EF26)]", "flex items-center gap-2 px-2", "text-sm text-muted-foreground/60 cursor-pointer", className),
 		onClick,
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(HugeiconsIcon, {
 				icon: Search01Icon,
-				size: 14,
-				className: "shrink-0 text-muted-foreground"
+				size: 16,
+				className: "shrink-0 text-muted-foreground/70"
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "flex-1 text-left",
@@ -1030,27 +1774,27 @@ const SelectValue = ({ ...props }) => /* @__PURE__ */ jsx(Value, {
 const SelectTrigger = ({ className, size = "default", children, ...props }) => /* @__PURE__ */ jsxs(Trigger$4, {
 	"data-slot": "select-trigger",
 	"data-size": size,
-	className: cn("data-[placeholder]:text-muted-foreground/60 [&_svg:not([class*='text-'])]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 flex w-fit touch-manipulation items-center justify-between gap-1.5 rounded-md border-0 bg-transparent px-3 py-2 text-[13px] whitespace-nowrap shadow-[var(--shadow-input)] hover:shadow-[var(--shadow-input-hover)] transition-[color,box-shadow] duration-100 ease-out outline-none focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_rgba(0,114,239,0.15)] aria-invalid:shadow-[0_0_0_1px_var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:text-[13px] data-[size=sm]:px-2.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+	className: cn("data-[placeholder]:text-muted-foreground/60 [&_svg:not([class*='text-'])]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 flex w-fit touch-manipulation items-center justify-between gap-1.5 rounded-md border-0 bg-transparent px-3 py-2 text-[13px] whitespace-nowrap shadow-[var(--shadow-input)] hover:shadow-[var(--shadow-input-hover)] transition-[color,box-shadow] duration-100 ease-out outline-none focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_var(--ring-halo,#0072EF26)] aria-invalid:shadow-[0_0_0_1px_var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:text-[13px] data-[size=sm]:px-2.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[state=open]:[&>svg:last-of-type]:rotate-180", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(Icon$1, {
 		asChild: true,
 		children: /* @__PURE__ */ jsx(HugeiconsIcon, {
 			icon: ArrowDown01Icon,
 			size: 16,
-			className: "opacity-50"
+			className: "opacity-50 transition-transform duration-150 ease-out motion-reduce:transition-none"
 		})
 	})]
 });
 const SelectContent = ({ className, children, position = "popper", align = "start", ...props }) => /* @__PURE__ */ jsx(Portal$3, { children: /* @__PURE__ */ jsxs(Content$4, {
 	"data-slot": "select-content",
-	className: cn("bg-popover text-popover-foreground will-change-[opacity,transform] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border-0 shadow-[var(--shadow-elevated)]", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+	className: cn("bg-popover text-popover-foreground will-change-[opacity,transform] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 motion-reduce:animate-none relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border-0 shadow-[var(--shadow-elevated)]", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
 	position,
 	align,
 	...props,
 	children: [
 		/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
 		/* @__PURE__ */ jsx(Viewport, {
-			className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
+			className: cn("p-1", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
 			children
 		}),
 		/* @__PURE__ */ jsx(SelectScrollDownButton, {})
@@ -1063,14 +1807,14 @@ const SelectLabel = ({ className, ...props }) => /* @__PURE__ */ jsx(Label$2, {
 });
 const SelectItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(Item$2, {
 	"data-slot": "select-item",
-	className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+	className: cn("data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-medium [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		"data-slot": "select-item-indicator",
 		className: "absolute right-2 flex size-3.5 items-center justify-center",
 		children: /* @__PURE__ */ jsx(ItemIndicator$1, { children: /* @__PURE__ */ jsx(HugeiconsIcon, {
 			icon: Tick01Icon,
-			size: 16
+			size: 14
 		}) })
 	}), /* @__PURE__ */ jsx(ItemText, { children })]
 });
@@ -1085,7 +1829,8 @@ const SelectScrollUpButton = ({ className, ...props }) => /* @__PURE__ */ jsx(Sc
 	...props,
 	children: /* @__PURE__ */ jsx(HugeiconsIcon, {
 		icon: ArrowUp01Icon,
-		size: 16
+		size: 16,
+		"aria-hidden": true
 	})
 });
 const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ jsx(ScrollDownButton, {
@@ -1094,7 +1839,8 @@ const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ jsx(
 	...props,
 	children: /* @__PURE__ */ jsx(HugeiconsIcon, {
 		icon: ArrowDown01Icon,
-		size: 16
+		size: 16,
+		"aria-hidden": true
 	})
 });
 
@@ -1103,7 +1849,7 @@ const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ jsx(
 const SelectableCard = ({ badge, className, description, icon, iconSize = 20, label, selected, ...props }) => /* @__PURE__ */ jsxs("button", {
 	"data-slot": "selectable-card",
 	"data-selected": selected,
-	className: cn("group/card relative flex flex-col items-start gap-2.5 p-4 rounded-xl text-left transition-[box-shadow,background-color,scale] duration-150 touch-manipulation active:scale-[0.96] cursor-pointer w-full outline-none focus-visible:shadow-[0_0_0_1.5px_var(--action),0_0_0_4px_oklch(from_var(--action)_l_c_h_/_0.25)]", selected ? "bg-[var(--action)]/5 shadow-[0_0_0_1.5px_var(--action)]" : "shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.12)] hover:shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.20)]", className),
+	className: cn("group/card relative flex flex-col items-start gap-2.5 p-4 rounded-xl text-left transition-[box-shadow,background-color,scale] duration-150 motion-reduce:transition-none touch-manipulation active:scale-[0.96] cursor-pointer w-full outline-none focus-visible:shadow-[0_0_0_1.5px_var(--action),0_0_0_4px_oklch(from_var(--action)_l_c_h_/_0.25)]", selected ? "bg-[var(--action)]/5 shadow-[0_0_0_1.5px_var(--action)]" : "shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.12)] hover:shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.20)]", className),
 	...props,
 	children: [
 		icon && /* @__PURE__ */ jsx(HugeiconsIcon, {
@@ -1130,10 +1876,10 @@ const SelectableCard = ({ badge, className, description, icon, iconSize = 20, la
 		/* @__PURE__ */ jsx("div", {
 			className: "absolute top-4 right-4",
 			children: /* @__PURE__ */ jsx("div", {
-				className: cn("relative size-4 shrink-0 rounded-[4px] transition-[color,box-shadow,background-color] duration-200 ease", selected ? "bg-[var(--action)] text-white shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_oklch(1_0_0_/_0.07)_inset,0px_2px_3px_0px_oklch(0.278_0.03_256.85_/_0.20),0px_1px_1px_0px_oklch(0_0_0_/_0.24)]" : "shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.20),0_1px_2px_0_oklch(0_0_0_/_0.06),0_0_1px_0_oklch(0_0_0_/_0.02)] group-hover/card:shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.30),0_1px_2px_0_oklch(0_0_0_/_0.06),0_0_1px_0_oklch(0_0_0_/_0.02)]"),
+				className: cn("relative size-4 shrink-0 rounded-[4px] transition-[color,box-shadow,background-color] duration-200 ease-out motion-reduce:transition-none", selected ? "bg-[var(--action)] text-white shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_oklch(1_0_0_/_0.07)_inset,0px_2px_3px_0px_oklch(0.278_0.03_256.85_/_0.20),0px_1px_1px_0px_oklch(0_0_0_/_0.24)]" : "shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.20),0_1px_2px_0_oklch(0_0_0_/_0.06),0_0_1px_0_oklch(0_0_0_/_0.02)] group-hover/card:shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.30),0_1px_2px_0_oklch(0_0_0_/_0.06),0_0_1px_0_oklch(0_0_0_/_0.02)]"),
 				children: /* @__PURE__ */ jsx(CheckIcon, {
 					size: 14,
-					className: cn("absolute inset-0 m-auto text-current transition-[opacity,transform,filter] duration-200", selected ? "opacity-100 scale-100 blur-none" : "opacity-0 scale-[0.25] blur-[4px]")
+					className: cn("absolute inset-0 m-auto text-current transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none", selected ? "opacity-100 scale-100 blur-none" : "opacity-0 scale-[0.25] blur-[4px]")
 				})
 			})
 		})
@@ -1151,6 +1897,41 @@ const Separator = forwardRef(({ className, orientation = "horizontal", decorativ
 }));
 Separator.displayName = Root$5.displayName;
 
+//#endregion
+//#region src/components/ui/slider/slider.tsx
+/**
+* Controlled range slider built on a native `<input type="range">`.
+*
+* Zero-dependency — all styling is done with Tailwind arbitrary variants so
+* no Radix/Headless UI install is needed. The filled portion is rendered via an
+* inline CSS custom property so the gradient stays in sync with the value without
+* any JS animation loop.
+*/
+const Slider = ({ value, onValueChange, min = 0, max = 100, step = 1, disabled = false, className }) => {
+	const clamped = Math.min(max, Math.max(min, value));
+	const range = max - min;
+	const fillPercent = range === 0 ? 0 : (clamped - min) / range * 100;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "slider",
+		className: cn("relative flex w-full touch-manipulation items-center", className),
+		children: /* @__PURE__ */ jsx("input", {
+			type: "range",
+			"data-slot": "slider-input",
+			min,
+			max,
+			step,
+			value: clamped,
+			disabled,
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			"aria-valuenow": clamped,
+			onChange: (e) => onValueChange(Number(e.target.value)),
+			className: cn("w-full appearance-none bg-transparent outline-none", "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-1.5", "[&::-webkit-slider-runnable-track]:w-full", "[&::-webkit-slider-runnable-track]:rounded-full", "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--action)_var(--slider-fill,0%),var(--bg-accented)_var(--slider-fill,0%))]", "[&::-webkit-slider-runnable-track]:transition-[background-size] [&::-webkit-slider-runnable-track]:duration-150 [&::-webkit-slider-runnable-track]:ease-out", "[&::-webkit-slider-runnable-track]:motion-reduce:transition-none", "[&::-webkit-slider-thumb]:appearance-none", "[&::-webkit-slider-thumb]:size-4", "[&::-webkit-slider-thumb]:rounded-full", "[&::-webkit-slider-thumb]:bg-background", "[&::-webkit-slider-thumb]:border", "[&::-webkit-slider-thumb]:border-[var(--action)]", "[&::-webkit-slider-thumb]:shadow-[var(--shadow-control-thumb)]", "[&::-webkit-slider-thumb]:-mt-[5px]", "[&::-webkit-slider-thumb]:transition-[box-shadow] [&::-webkit-slider-thumb]:duration-150 [&::-webkit-slider-thumb]:ease-out", "[&::-webkit-slider-thumb]:motion-reduce:transition-none", "focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_var(--ring-halo),var(--shadow-control-thumb)]", "[&::-moz-range-track]:h-1.5", "[&::-moz-range-track]:w-full", "[&::-moz-range-track]:rounded-full", "[&::-moz-range-track]:bg-[var(--bg-accented)]", "[&::-moz-range-progress]:h-1.5", "[&::-moz-range-progress]:rounded-full", "[&::-moz-range-progress]:bg-[var(--action)]", "[&::-moz-range-thumb]:size-4", "[&::-moz-range-thumb]:rounded-full", "[&::-moz-range-thumb]:border", "[&::-moz-range-thumb]:border-[var(--action)]", "[&::-moz-range-thumb]:bg-background", "[&::-moz-range-thumb]:shadow-[var(--shadow-control-thumb)]", "[&::-moz-range-thumb]:transition-[box-shadow] [&::-moz-range-thumb]:duration-150 [&::-moz-range-thumb]:ease-out", "[&::-moz-range-thumb]:motion-reduce:transition-none", "focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_var(--ring-halo),var(--shadow-control-thumb)]"),
+			style: { "--slider-fill": `${fillPercent}%` }
+		})
+	});
+};
+
 //#endregion
 //#region src/components/ui/sheet/sheet.tsx
 const Sheet = ({ ...props }) => /* @__PURE__ */ jsx(SheetPrimitive.Root, {
@@ -1182,7 +1963,7 @@ const SheetContent = ({ className, children, side = "right", showCloseButton = t
 		className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 border-0 shadow-[var(--shadow-elevated)] [animation-timing-function:cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:duration-150 data-[state=open]:duration-200 will-change-[opacity,transform] motion-reduce:animate-none", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm rounded-l-xl rounded-r-md", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm rounded-r-xl rounded-l-md", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto rounded-b-md", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto rounded-t-md", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
-			className: "absolute top-3 right-3 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,background-color] duration-150 ease hover:opacity-100 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 focus:outline-hidden disabled:pointer-events-none cursor-pointer touch-manipulation before:absolute before:-inset-[6px] before:content-['']",
+			className: "absolute top-3 right-3 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,background-color] duration-150 ease-out motion-reduce:transition-none hover:opacity-100 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 focus:outline-hidden disabled:pointer-events-none cursor-pointer touch-manipulation before:absolute before:-inset-2 before:content-['']",
 			children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
 				icon: Cancel01Icon,
 				size: 14
@@ -1196,14 +1977,14 @@ const SheetContent = ({ className, children, side = "right", showCloseButton = t
 const SheetHeader = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sheet-header",
-		className: cn("flex flex-col gap-1.5 p-4", className),
+		className: cn("flex flex-col gap-0.5 px-4 py-3.5 border-b border-[var(--border-divider)]", className),
 		...props
 	});
 };
 const SheetFooter = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sheet-footer",
-		className: cn("mt-auto flex flex-col gap-2 p-4", className),
+		className: cn("mt-auto flex flex-col gap-2 px-4 py-3.5 border-t border-[var(--border-divider)] bg-muted", className),
 		...props
 	});
 };
@@ -1225,9 +2006,10 @@ const SheetDescription = ({ className, ...props }) => {
 //#endregion
 //#region src/components/ui/skeleton/skeleton.tsx
 const Skeleton = ({ className, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx("output", {
+		"aria-label": "Loading",
 		"data-slot": "skeleton",
-		className: cn("bg-accent animate-shimmer motion-reduce:animate-none rounded-md bg-[length:200%_100%] bg-gradient-to-r from-accent via-accent/50 to-accent", className),
+		className: cn("block bg-accent animate-shimmer motion-reduce:animate-none rounded-md bg-[length:200%_100%] bg-gradient-to-r from-accent via-accent/50 to-accent dark:via-accent/70", className),
 		...props
 	});
 };
@@ -1285,27 +2067,64 @@ const Toaster = ({ ...props }) => {
 };
 
 //#endregion
-//#region src/components/ui/spinner/spinner.tsx
-const Spinner = ({ className }) => /* @__PURE__ */ jsx("output", {
-	"aria-label": "Loading",
-	className: "inline-flex",
-	children: /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		className: cn("size-4 animate-spin motion-reduce:animate-none", className),
-		children: [/* @__PURE__ */ jsx("circle", {
-			className: "opacity-25",
-			cx: "12",
-			cy: "12",
-			r: "10",
-			stroke: "currentColor",
-			strokeWidth: "4"
-		}), /* @__PURE__ */ jsx("path", {
-			className: "opacity-75",
-			fill: "currentColor",
-			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-		})]
+//#region src/components/ui/stepper/stepper.tsx
+/**
+* Horizontal step indicator that renders an ordered sequence of steps with
+* connector lines between them.
+*
+* - **COMPLETED** (index < currentStep): filled action-coloured circle + white checkmark.
+* - **CURRENT** (index === currentStep): action-coloured border + step number; label is font-medium.
+* - **UPCOMING** (index > currentStep): muted border + step number.
+*
+* Connector lines between adjacent steps are action-coloured when the segment
+* is completed (both endpoints are ≤ currentStep) and divider-coloured otherwise.
+*
+* @example
+* <Stepper steps={[{ label: 'Account' }, { label: 'Details' }, { label: 'Review' }]} currentStep={1} />
+*/
+const Stepper = ({ steps, currentStep, className, ...props }) => /* @__PURE__ */ jsx("ol", {
+	"aria-label": "Progress",
+	className: cn("flex w-full items-start", className),
+	...props,
+	children: steps.map((step, index) => {
+		const isCompleted = index < currentStep;
+		const isCurrent = index === currentStep;
+		const connectorCompleted = index > 0 && index <= currentStep;
+		return /* @__PURE__ */ jsxs("li", {
+			className: cn("flex flex-1 items-start", index === steps.length - 1 && "flex-none"),
+			"aria-current": isCurrent ? "step" : void 0,
+			children: [
+				index > 0 && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: cn("mt-3.5 h-px flex-1 transition-colors duration-300 ease-out motion-reduce:transition-none", connectorCompleted ? "bg-[var(--action)]" : "bg-[var(--border-divider)]")
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							className: cn("flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-[background-color,border-color,color] duration-300 ease-out motion-reduce:transition-none select-none", isCompleted && "bg-[var(--action)] text-white", isCurrent && "border-2 border-[var(--action)] text-[var(--action)]", !isCompleted && !isCurrent && "border border-[var(--border-default)] text-muted-foreground"),
+							children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, {
+								size: 13,
+								strokeWidth: 3
+							}) : String(index + 1)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn("max-w-[6rem] text-center text-xs leading-tight transition-colors duration-300 ease-out motion-reduce:transition-none", isCurrent ? "font-medium text-foreground" : "text-muted-foreground"),
+							children: step.label
+						}),
+						step.description && /* @__PURE__ */ jsx("span", {
+							className: "max-w-[6rem] text-center text-[10px] leading-tight text-muted-foreground",
+							children: step.description
+						})
+					]
+				}),
+				index < steps.length - 1 && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: cn("mt-3.5 h-px flex-1 transition-colors duration-300 ease-out motion-reduce:transition-none", index + 1 <= currentStep ? "bg-[var(--action)]" : "bg-[var(--border-divider)]")
+				})
+			]
+		}, step.label);
 	})
 });
 
@@ -1325,7 +2144,7 @@ const Table = ({ className, ...props }) => {
 const TableHeader = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("thead", {
 		"data-slot": "table-header",
-		className: cn("[&_tr]:border-b [&_tr]:border-[var(--border-divider)] [&_tr]:hover:bg-transparent bg-[var(--bg-accented)]/50 sticky top-0 z-10", className),
+		className: cn("[&_tr]:border-b [&_tr]:border-[var(--border-divider)] [&_tr]:hover:bg-transparent bg-[var(--bg-accented)]/50 sticky top-0 z-20", className),
 		...props
 	});
 };
@@ -1350,10 +2169,11 @@ const TableRow = ({ className, ...props }) => {
 		...props
 	});
 };
-const TableHead = ({ className, ...props }) => {
+const TableHead = ({ className, scope, ...props }) => {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("text-muted-foreground h-10 px-3 text-left align-middle text-xs font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+		scope: scope ?? "col",
+		className: cn("text-muted-foreground h-10 px-3 text-left align-middle text-xs font-medium whitespace-nowrap tabular-nums [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 };
@@ -1401,24 +2221,155 @@ const TabsList = ({ className, variant = "default", ...props }) => {
 const TabsTrigger = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
 		"data-slot": "tabs-trigger",
-		className: cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap touch-manipulation transition-[color,background-color,border-color,box-shadow,opacity] duration-150 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground", "after:bg-foreground after:absolute after:opacity-0 after:transition-[opacity] group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
+		className: cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap touch-manipulation transition-[color,background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground", "after:bg-foreground after:absolute after:opacity-0 after:transition-[opacity] after:motion-reduce:transition-none group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
 		...props
 	});
 };
 const TabsContent = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(TabsPrimitive.Content, {
 		"data-slot": "tabs-content",
-		className: cn("flex-1 outline-none", className),
+		className: cn("flex-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:rounded-md", className),
 		...props
 	});
 };
 
+//#endregion
+//#region src/components/ui/toggle-group/toggle-group.tsx
+const ToggleGroupContext = createContext(null);
+const useToggleGroupContext = () => {
+	const ctx = useContext(ToggleGroupContext);
+	if (!ctx) throw new Error("ToggleGroupItem must be used inside a ToggleGroup");
+	return ctx;
+};
+/**
+* Segmented control container that manages single or multiple selection.
+* Renders a rounded pill-track styled with the muted background token.
+* Provides context and implements roving keyboard navigation across items.
+*
+* @example
+* // Single selection
+* <ToggleGroup type="single" value={view} onValueChange={setView}>
+*   <ToggleGroupItem value="day">Day</ToggleGroupItem>
+*   <ToggleGroupItem value="week">Week</ToggleGroupItem>
+* </ToggleGroup>
+*
+* @example
+* // Multiple selection
+* <ToggleGroup type="multiple" value={formats} onValueChange={setFormats}>
+*   <ToggleGroupItem value="bold">B</ToggleGroupItem>
+*   <ToggleGroupItem value="italic">I</ToggleGroupItem>
+* </ToggleGroup>
+*/
+const ToggleGroup = ({ type, value, onValueChange, disabled = false, className, children, ...props }) => {
+	const groupId = useId();
+	const containerRef = useRef(null);
+	const handleKeyDown = useCallback((e) => {
+		const container = containerRef.current;
+		if (!container) return;
+		const items = Array.from(container.querySelectorAll("button[data-slot=\"toggle-group-item\"]:not([disabled])"));
+		if (items.length === 0) return;
+		const focused = document.activeElement;
+		const idx = items.indexOf(focused);
+		let next;
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			e.preventDefault();
+			next = (idx + 1) % items.length;
+		} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			e.preventDefault();
+			next = (idx - 1 + items.length) % items.length;
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			next = 0;
+		} else if (e.key === "End") {
+			e.preventDefault();
+			next = items.length - 1;
+		} else return;
+		items[next]?.focus();
+	}, []);
+	const contextValue = useMemo(() => type === "single" ? {
+		disabled,
+		groupId,
+		onValueChange,
+		type: "single",
+		value
+	} : {
+		disabled,
+		groupId,
+		onValueChange,
+		type: "multiple",
+		value
+	}, [
+		disabled,
+		groupId,
+		onValueChange,
+		type,
+		value
+	]);
+	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			"data-slot": "toggle-group",
+			role: type === "single" ? "radiogroup" : "toolbar",
+			onKeyDown: handleKeyDown,
+			className: cn("inline-flex items-center rounded-lg bg-muted p-[3px] gap-0.5", disabled && "opacity-50 pointer-events-none", className),
+			...props,
+			children
+		})
+	});
+};
+/**
+* An individual button within a ToggleGroup.
+* Reads context to determine selection state and fires the appropriate
+* onValueChange callback on click. Mirrors the elevated/pill styling of
+* the active tab trigger (bg-background + shadow) when selected.
+*/
+const ToggleGroupItem = ({ value, disabled, className, children, onClick, ...props }) => {
+	const ctx = useToggleGroupContext();
+	const isDisabled = disabled ?? ctx.disabled;
+	const isActive = ctx.type === "single" ? ctx.value === value : ctx.value.includes(value);
+	const handleClick = (e) => {
+		if (isDisabled) return;
+		if (ctx.type === "single") {
+			if (ctx.value !== value) ctx.onValueChange(value);
+		} else {
+			const next = ctx.value.includes(value) ? ctx.value.filter((v) => v !== value) : [...ctx.value, value];
+			ctx.onValueChange(next);
+		}
+		onClick?.(e);
+	};
+	const tabIndex = isActive ? 0 : -1;
+	const sharedButtonProps = {
+		className: cn("relative inline-flex h-8 flex-1 items-center justify-center gap-1.5", "rounded-md px-3 text-sm font-medium whitespace-nowrap", "cursor-pointer", "text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground", "transition-[color,background-color,box-shadow] duration-150 ease-out motion-reduce:transition-none", "data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm", "dark:data-[state=on]:bg-input/30 dark:data-[state=on]:text-foreground dark:data-[state=on]:border dark:data-[state=on]:border-input", "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", "disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		"data-slot": "toggle-group-item",
+		"data-state": isActive ? "on" : "off",
+		disabled: isDisabled,
+		onClick: handleClick,
+		tabIndex,
+		type: "button"
+	};
+	if (ctx.type === "single") return /* @__PURE__ */ jsx("button", {
+		...sharedButtonProps,
+		role: "radio",
+		"aria-checked": isActive,
+		name: ctx.groupId,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...sharedButtonProps,
+		"aria-pressed": isActive,
+		...props,
+		children
+	});
+};
+
 //#endregion
 //#region src/components/ui/textarea/textarea.tsx
 const Textarea = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("textarea", {
 		"data-slot": "textarea",
-		className: cn("placeholder:text-muted-foreground/60 dark:bg-input/30 flex field-sizing-content min-h-16 w-full touch-manipulation rounded-md border-0 bg-background px-3 py-2 text-base shadow-[var(--shadow-input)] transition-[color,box-shadow] duration-100 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "hover:shadow-[var(--shadow-input-hover)]", "focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_rgba(0,114,239,0.15)]", "aria-invalid:shadow-[0_0_0_1px_var(--destructive),0_0_1px_0_var(--destructive)]", className),
+		className: cn("placeholder:text-muted-foreground/60 dark:bg-input/30 flex field-sizing-content min-h-20 w-full touch-manipulation rounded-md border-0 bg-background px-3 py-2 text-base shadow-[var(--shadow-input)] transition-[color,box-shadow] duration-100 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "hover:shadow-[var(--shadow-input-hover)]", "focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_var(--ring-halo,#0072EF26)]", "aria-invalid:shadow-[0_0_0_1px_var(--destructive),0_0_1px_0_var(--destructive)]", className),
 		...props
 	});
 };
@@ -1428,65 +2379,14 @@ const Textarea = ({ className, ...props }) => {
 const TooltipProvider = Provider;
 const Tooltip = Root$6;
 const TooltipTrigger = Trigger$5;
-const TooltipContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Portal$4, { children: /* @__PURE__ */ jsx(Content$5, {
+const TooltipContent = forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(Portal$4, { children: /* @__PURE__ */ jsx(Content$5, {
 	ref,
 	sideOffset,
-	className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-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", className),
+	className: cn("z-50 max-w-xs overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground animate-in fade-in-0 zoom-in-95 duration-150 ease-out data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-100 data-[state=closed]:ease-in data-[side=bottom]:slide-in-from-top-2 data-[side=bottom]:origin-top data-[side=left]:slide-in-from-right-2 data-[side=left]:origin-right data-[side=right]:slide-in-from-left-2 data-[side=right]:origin-left data-[side=top]:slide-in-from-bottom-2 data-[side=top]:origin-bottom motion-reduce:animate-none", className),
 	...props
 }) }));
 TooltipContent.displayName = Content$5.displayName;
 
-//#endregion
-//#region src/components/ui/well/well.tsx
-const wellVariants = cva("rounded-2xl", {
-	defaultVariants: {
-		gap: "sm",
-		spacing: "default",
-		variant: "inset"
-	},
-	variants: {
-		gap: {
-			default: "space-y-4",
-			lg: "space-y-5",
-			none: "",
-			sm: "space-y-3"
-		},
-		spacing: {
-			default: "p-4",
-			lg: "p-5",
-			none: "p-0",
-			sm: "p-3"
-		},
-		variant: {
-			default: "bg-muted/50",
-			inset: "bg-muted/50 border border-border",
-			outline: "border border-border"
-		}
-	}
-});
-const Well = ({ className, gap, spacing, variant, ...props }) => /* @__PURE__ */ jsx("div", {
-	"data-slot": "well",
-	"data-spacing": spacing ?? "default",
-	className: cn(wellVariants({
-		gap,
-		spacing,
-		variant
-	}), className),
-	...props
-});
-const WellReveal = ({ children, className, open }) => /* @__PURE__ */ jsx("div", {
-	className: "grid transition-[grid-template-rows] duration-[220ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
-	style: { gridTemplateRows: open ? "1fr" : "0fr" },
-	"aria-hidden": !open,
-	children: /* @__PURE__ */ jsx("div", {
-		className: "overflow-hidden",
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn("px-0.5 pb-0.5 [&>[data-slot=well]:not([data-spacing=none])]:p-[22px]", className),
-			children
-		})
-	})
-});
-
 //#endregion
 //#region src/components/asset-icon/asset-icon.tsx
 const aliases = {
@@ -1697,7 +2597,7 @@ const CodeBlock = forwardRef(({ code, title, language: _language, showLineNumber
 						}),
 						i < lines.length - 1 && "\n"
 					]
-				}, `L${i}:${line}`)) : /* @__PURE__ */ jsxs(Fragment, { children: [showTerminalPrompt && /* @__PURE__ */ jsx("span", {
+				}, `L${i}:${line}`)) : /* @__PURE__ */ jsxs(Fragment$1, { children: [showTerminalPrompt && /* @__PURE__ */ jsx("span", {
 					className: cn("select-none mr-2", s.prompt),
 					children: "$"
 				}), code] }) })
@@ -2299,7 +3199,7 @@ const ToggleCard = ({ accordionKey, title, description, inputProps, allowExpand
 											"aria-hidden": true,
 											className: "inline-block ml-1.5 size-1.5 rounded-full bg-destructive align-middle"
 										})]
-									}), Tags && Tags.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: Tags.map((t) => /* @__PURE__ */ jsx("span", {
+									}), Tags && Tags.length > 0 && /* @__PURE__ */ jsx(Fragment$1, { children: Tags.map((t) => /* @__PURE__ */ jsx("span", {
 										className: "leading-5",
 										children: t.Tag
 									}, t.id)) })]
@@ -2346,6 +3246,37 @@ const ToggleCard = ({ accordionKey, title, description, inputProps, allowExpand
 	});
 };
 
+//#endregion
+//#region src/components/icons/animated-icon/animated-icon.tsx
+const AnimatedIcon = forwardRef(({ children, className, onMouseEnter, onMouseLeave, size = 28, ...props }, ref) => {
+	const controls = useAnimation();
+	const isControlledRef = useRef(false);
+	useImperativeHandle(ref, () => {
+		isControlledRef.current = true;
+		return {
+			startAnimation: () => controls.start("animate"),
+			stopAnimation: () => controls.start("normal")
+		};
+	});
+	const handleMouseEnter = useCallback((e) => {
+		if (isControlledRef.current) onMouseEnter?.(e);
+		else controls.start("animate").catch(() => void 0);
+	}, [controls, onMouseEnter]);
+	const handleMouseLeave = useCallback((e) => {
+		if (isControlledRef.current) onMouseLeave?.(e);
+		else controls.start("normal").catch(() => void 0);
+	}, [controls, onMouseLeave]);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: cn("inline-flex items-center justify-center", className),
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		...props,
+		children: children(controls, size)
+	});
+});
+AnimatedIcon.displayName = "AnimatedIcon";
+
 //#endregion
 //#region src/components/icons/arrow-up-right/arrow-up-right.tsx
 const ArrowUpRightIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(AnimatedIcon, {
@@ -3625,6 +4556,55 @@ const RefreshCWIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(AnimatedIco
 }));
 RefreshCWIcon.displayName = "RefreshCWIcon";
 
+//#endregion
+//#region src/components/icons/search/search.tsx
+const SearchIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(AnimatedIcon, {
+	ref,
+	...props,
+	children: (controls, size) => /* @__PURE__ */ jsxs(motion.svg, {
+		animate: controls,
+		fill: "none",
+		height: size,
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		transition: {
+			bounce: .3,
+			duration: 1
+		},
+		variants: {
+			animate: {
+				x: [
+					0,
+					0,
+					-3,
+					0
+				],
+				y: [
+					0,
+					-4,
+					0,
+					0
+				]
+			},
+			normal: {
+				x: 0,
+				y: 0
+			}
+		},
+		viewBox: "0 0 24 24",
+		width: size,
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "11",
+			cy: "11",
+			r: "8"
+		}), /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })]
+	})
+}));
+SearchIcon.displayName = "SearchIcon";
+
 //#endregion
 //#region src/components/icons/settings/settings.tsx
 const SettingsIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(AnimatedIcon, {
@@ -3853,5 +4833,5 @@ const UsersIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(AnimatedIcon, {
 UsersIcon.displayName = "UsersIcon";
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AnimatedIcon, ArrowUpRightIcon, AskAIAction, AssetIcon, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartBarIncreasingIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronRightIcon, ClaudeLogo, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyButton, CopyCheckIcon, CopyIcon, CursorLogo, DangerZone, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DollarSignIcon, DomainList, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FingerprintIcon, HomeIcon, Icon, IconConfigProvider, InfoBanner, Input, Kbd, KeyIcon, Label, LayoutPanelTopIcon, LinkIcon, MetricCard, MoonIcon, OpenAILogo, PageSkeleton, PanelLeftCloseIcon, PanelLeftOpenIcon, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductPageLayout, Progress, RadioGroup, RadioGroupItem, RefreshCWIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, Separator, SettingsIcon, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, ShieldCheckIcon, Skeleton, Spinner, StatCardSkeleton, StatusBadge, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TerminalIcon, Textarea, Toaster, ToggleCard, ToggleRow, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UnsavedChangesBar, UsersIcon, VSCodeLogo, WebhooksAction, Well, WellReveal, WindsurfLogo, badgeVariants, buttonVariants, cn, useIconConfig, useUnsavedChanges, wellVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AnimatedIcon, ArrowUpRightIcon, AskAIAction, AssetIcon, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartBarIncreasingIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronRightIcon, ClaudeLogo, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyButton, CopyCheckIcon, CopyIcon, CursorLogo, CursorPagination, DangerZone, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DollarSignIcon, DomainList, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FingerprintIcon, FlushCardStack, HomeIcon, Icon, IconConfigProvider, InfoBanner, Input, Kbd, KeyIcon, Label, LayoutPanelTopIcon, LinkIcon, MetricCard, MoonIcon, OpenAILogo, PageSkeleton, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PanelLeftCloseIcon, PanelLeftOpenIcon, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductPageLayout, Progress, Radio, RadioField, RadioGroup, RadioGroupItem, RefreshCWIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, Separator, SettingsIcon, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, ShieldCheckIcon, Skeleton, Slider, Spinner, StatCardSkeleton, StatusBadge, Stepper, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TerminalIcon, Textarea, Toaster, ToggleCard, ToggleGroup, ToggleGroupItem, ToggleRow, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UnsavedChangesBar, UsersIcon, VSCodeLogo, WebhooksAction, Well, WellReveal, WindsurfLogo, badgeVariants, buttonVariants, cn, toast, useIconConfig, useUnsavedChanges, wellVariants };
 //# sourceMappingURL=index.esm.js.map