@hilum/ui 3.1.1 → 3.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { tokens } from './chunk-5JX2YKJM.js';
+import { tokens } from './chunk-MAHPAP65.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React17 from 'react';
@@ -49,7 +49,7 @@ var DropdownMenuItem = React17.forwardRef(({ className, inset, destructive, ...p
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body outline-none transition-colors",
       destructive ? "text-destructive focus:bg-destructive/10 focus:text-destructive" : "text-muted-foreground focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -65,7 +65,7 @@ var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...pro
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -84,7 +84,7 @@ var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -121,7 +121,7 @@ var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, .
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
@@ -181,7 +181,10 @@ var AvatarImage = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Avatar$1.Image,
   {
     ref,
-    className: cn("aspect-square h-full w-full object-cover", className),
+    className: cn(
+      "aspect-square h-full w-full object-cover outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10",
+      className
+    ),
     ...props
   }
 ));
@@ -334,7 +337,7 @@ var buttonVariants = cva(
   [
     "inline-flex shrink-0 items-center justify-center gap-2",
     "body font-medium whitespace-nowrap",
-    "transition-all duration-150 outline-none",
+    "transition-[background-color,border-color,box-shadow,color,opacity,scale] duration-150 outline-none active:scale-[0.96]",
     "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
@@ -351,14 +354,14 @@ var buttonVariants = cva(
         link: "text-foreground underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-9 px-4 py-2 rounded-md",
+        default: "h-10 px-4 py-2 rounded-md",
         xs: "h-6 gap-1 px-2 caption rounded-md",
         sm: "h-8 gap-1.5 px-3 rounded-md",
-        lg: "h-10 px-6 rounded-md",
-        icon: "size-9 rounded-md",
+        lg: "h-11 px-6 rounded-md",
+        icon: "size-10 rounded-md",
         "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8 rounded-md",
-        "icon-lg": "size-10 rounded-md"
+        "icon-lg": "size-11 rounded-md"
       }
     },
     defaultVariants: {
@@ -398,7 +401,7 @@ function ActionPanel({
         "a",
         {
           href: link.href,
-          className: "body font-medium text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1",
+          className: "inline-flex min-h-10 items-center gap-1 body font-medium text-muted-foreground transition-colors hover:text-foreground",
           children: [
             link.label,
             " ",
@@ -410,7 +413,7 @@ function ActionPanel({
         {
           type: "button",
           onClick: link.onClick,
-          className: "body font-medium text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1",
+          className: "inline-flex min-h-10 items-center gap-1 body font-medium text-muted-foreground transition-colors hover:text-foreground",
           children: [
             link.label,
             " ",
@@ -434,8 +437,17 @@ function ActionPanel({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", layout === "inline" ? "flex-1" : ""), children: [
-          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: cn("body text-muted-foreground", layout === "stacked" ? "mt-1" : ""), children: description }),
+          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground text-balance", children: title }),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "body text-muted-foreground text-pretty",
+                layout === "stacked" ? "mt-1" : ""
+              ),
+              children: description
+            }
+          ),
           children && layout === "stacked" && /* @__PURE__ */ jsx("div", { className: "mt-4", children })
         ] }),
         layout === "stacked" ? (allActions.length > 0 || link) && /* @__PURE__ */ jsx("div", { className: "mt-4", children: renderActions() }) : /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center gap-3", children: [
@@ -534,20 +546,27 @@ var AlertDialogTitle = React17.forwardRef(({ className, ...props }, ref) => /* @
   AlertDialog.Title,
   {
     ref,
-    className: cn("body-lg font-semibold text-foreground", className),
+    className: cn("body-lg font-semibold text-balance text-foreground", className),
     ...props
   }
 ));
 AlertDialogTitle.displayName = "AlertDialogTitle";
-var AlertDialogDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialog.Description, { ref, className: cn("body text-muted-foreground", className), ...props }));
+var AlertDialogDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialog.Description,
+  {
+    ref,
+    className: cn("body text-pretty text-muted-foreground", className),
+    ...props
+  }
+));
 AlertDialogDescription.displayName = "AlertDialogDescription";
 var AlertDialogAction = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialog.Action,
   {
     ref,
     className: cn(
-      "inline-flex h-9 items-center justify-center rounded-md px-4",
-      "body font-medium whitespace-nowrap transition-all duration-150",
+      "inline-flex h-10 items-center justify-center rounded-md px-4",
+      "body font-medium whitespace-nowrap transition-[background-color,box-shadow,color,opacity,scale] duration-150 active:scale-[0.96]",
       "bg-brand-primary text-background hover:bg-brand-primary/90 active:bg-brand-primary/80",
       "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
       "disabled:pointer-events-none disabled:opacity-50",
@@ -562,8 +581,8 @@ var AlertDialogCancel = React17.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "inline-flex h-9 items-center justify-center rounded-md px-4",
-      "body font-medium whitespace-nowrap transition-all duration-150",
+      "inline-flex h-10 items-center justify-center rounded-md px-4",
+      "body font-medium whitespace-nowrap transition-[background-color,box-shadow,color,opacity,scale] duration-150 active:scale-[0.96]",
       "bg-card text-muted-foreground shadow-natural hover:bg-muted rounded-xl",
       "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
       "disabled:pointer-events-none disabled:opacity-50",
@@ -593,11 +612,18 @@ var Alert = React17.forwardRef(
 );
 Alert.displayName = "Alert";
 var AlertTitle = React17.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("mb-0.5 body font-semibold leading-tight", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("mb-0.5 body font-semibold leading-tight text-balance", className),
+      ...props
+    }
+  )
 );
 AlertTitle.displayName = "AlertTitle";
 var AlertDescription = React17.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("body opacity-90", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("body text-pretty opacity-90", className), ...props })
 );
 AlertDescription.displayName = "AlertDescription";
 var AspectRatioRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -627,7 +653,14 @@ function AvatarStack({ avatars, max, size = "md", className }) {
           "relative inline-flex shrink-0 overflow-hidden rounded-full ring-background",
           s.wrapper
         ),
-        children: avatar.src ? /* @__PURE__ */ jsx("img", { src: avatar.src, alt: avatar.name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx(
+        children: avatar.src ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: avatar.src,
+            alt: avatar.name,
+            className: "size-full object-cover outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10"
+          }
+        ) : /* @__PURE__ */ jsx(
           "span",
           {
             className: cn(
@@ -647,7 +680,8 @@ function AvatarStack({ avatars, max, size = "md", className }) {
         className: cn(
           "relative inline-flex shrink-0 items-center justify-center rounded-full ring-background bg-muted font-medium text-muted-foreground",
           s.wrapper,
-          s.text
+          s.text,
+          "tabular-nums"
         ),
         children: [
           "+",
@@ -713,7 +747,16 @@ var BreadcrumbPage = React17.forwardRef(
   )
 );
 BreadcrumbPage.displayName = "BreadcrumbPage";
-var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("text-muted-foreground", className), ...props, children: children ?? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) });
+var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("text-muted-foreground", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+  }
+);
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
@@ -744,7 +787,7 @@ function ButtonGroupItem({ active, className, children, ...props }) {
     {
       type: "button",
       className: cn(
-        "relative inline-flex items-center gap-1.5 px-3.5 py-2 body font-medium transition-colors",
+        "relative inline-flex min-h-10 items-center gap-1.5 px-3.5 py-2 body font-medium transition-colors",
         "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-inset",
         active ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted hover:text-foreground",
         className
@@ -769,20 +812,20 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         caption_label: "body font-semibold text-foreground",
         nav: "flex items-center justify-between absolute inset-x-0 top-1",
         button_previous: cn(
-          "absolute left-0 h-7 w-7 flex items-center justify-center rounded-md",
+          "absolute left-0 flex size-10 items-center justify-center rounded-md",
           "text-muted-foreground hover:bg-muted hover:text-muted-foreground transition-colors"
         ),
         button_next: cn(
-          "absolute right-0 h-7 w-7 flex items-center justify-center rounded-md",
+          "absolute right-0 flex size-10 items-center justify-center rounded-md",
           "text-muted-foreground hover:bg-muted hover:text-muted-foreground transition-colors"
         ),
         month_grid: "w-full border-collapse mt-1",
         weekdays: "flex",
-        weekday: "w-9 h-9 flex items-center justify-center label text-muted-foreground font-normal",
+        weekday: "flex size-10 items-center justify-center label text-muted-foreground font-normal",
         week: "flex w-full mt-1",
         day: "relative p-0 text-center",
         day_button: cn(
-          "h-9 w-9 flex items-center justify-center rounded-full body font-normal",
+          "flex size-10 items-center justify-center rounded-full body font-normal",
           "text-foreground hover:bg-muted transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30"
         ),
@@ -816,8 +859,8 @@ function CardHeading({ title, description, actions, children, className }) {
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
           children,
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground truncate", children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "caption text-muted-foreground mt-0.5", children: description })
+            /* @__PURE__ */ jsx("p", { className: "body truncate font-semibold text-balance text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "caption mt-0.5 text-pretty text-muted-foreground", children: description })
           ] })
         ] }),
         actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions.map(
@@ -878,7 +921,7 @@ var CardTitle = React17.forwardRef(
     {
       ref,
       "data-slot": "card-title",
-      className: cn("subheading text-foreground", className),
+      className: cn("subheading text-balance text-foreground", className),
       ...props
     }
   )
@@ -890,7 +933,7 @@ var CardDescription = React17.forwardRef(
     {
       ref,
       "data-slot": "card-description",
-      className: cn("caption text-muted-foreground", className),
+      className: cn("caption text-pretty text-muted-foreground", className),
       ...props
     }
   )
@@ -1051,7 +1094,7 @@ function CarouselPrevious({
       variant,
       size,
       className: cn(
-        "absolute h-9 w-9 rounded-full",
+        "absolute size-10 rounded-full",
         orientation === "vertical" ? "-top-12 left-1/2 -translate-x-1/2 rotate-90" : "-left-12 top-1/2 -translate-y-1/2",
         className
       ),
@@ -1078,7 +1121,7 @@ function CarouselNext({
       variant,
       size,
       className: cn(
-        "absolute h-9 w-9 rounded-full",
+        "absolute size-10 rounded-full",
         orientation === "vertical" ? "-bottom-12 left-1/2 -translate-x-1/2 rotate-90" : "-right-12 top-1/2 -translate-y-1/2",
         className
       ),
@@ -1130,7 +1173,8 @@ var CheckboxRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "peer size-4 shrink-0 rounded border border-border bg-card transition-colors",
+      "peer relative size-4 shrink-0 rounded border border-border bg-card transition-colors",
+      "after:absolute after:left-1/2 after:top-1/2 after:size-10 after:-translate-x-1/2 after:-translate-y-1/2",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=checked]:bg-brand-primary data-[state=checked]:border-brand-primary",
@@ -1171,7 +1215,7 @@ function ColorPicker({
         disabled,
         "aria-label": ariaLabel,
         className: cn(
-          "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-card",
+          "inline-flex size-10 items-center justify-center rounded-md border border-border bg-card",
           "transition-colors hover:border-border",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
           "disabled:cursor-not-allowed disabled:opacity-50",
@@ -1218,17 +1262,17 @@ function ColorPicker({
                 onKeyDown: (e) => {
                   if (e.key === "Enter") commit(e.target.value);
                 },
-                className: "flex-1 h-7 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
+                className: "h-10 flex-1 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
               }
             )
           ] }),
-          presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-8 gap-1.5", children: presets.map((p) => /* @__PURE__ */ jsx(
+          presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-4 gap-2", children: presets.map((p) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: () => onChange(p),
               "aria-label": p,
-              className: "h-5 w-5 rounded-sm border border-black/10 transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+              className: "size-10 rounded-md border border-black/10 transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
               style: { backgroundColor: p }
             },
             p
@@ -1400,7 +1444,7 @@ function Combobox({
           "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
           "aria-autocomplete": "list",
           className: cn(
-            "flex h-9 w-full rounded-lg border border-border bg-card pr-8 body text-foreground",
+            "flex h-10 w-full rounded-lg border border-border bg-card pr-10 body text-foreground",
             "placeholder:text-muted-foreground",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:border-border",
             "disabled:cursor-not-allowed disabled:opacity-50",
@@ -1425,7 +1469,7 @@ function Combobox({
           type: "button",
           tabIndex: -1,
           "aria-label": open ? "Close" : "Open",
-          className: "absolute inset-y-0 right-0 flex items-center px-2 text-muted-foreground hover:text-muted-foreground transition-colors",
+          className: "absolute inset-y-0 right-0 flex w-10 items-center justify-center text-muted-foreground hover:text-muted-foreground transition-colors",
           onClick: () => {
             if (open) {
               closeDropdown();
@@ -1448,7 +1492,7 @@ function Combobox({
           role: "option",
           "aria-selected": isSelected,
           className: cn(
-            "flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
+            "flex min-h-10 cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
             isSelected ? "bg-brand-primary text-background" : isActive ? "bg-muted text-foreground" : "text-foreground hover:bg-muted"
           ),
           onMouseDown: (e) => e.preventDefault(),
@@ -1528,7 +1572,7 @@ var DialogContent = React17.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring/20", children: [
+        /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-3 top-3 flex size-10 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,scale] hover:opacity-100 active:scale-[0.96] focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
           /* @__PURE__ */ jsx(X, { size: 16 }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
@@ -1549,12 +1593,19 @@ var DialogTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Dialog.Title,
   {
     ref,
-    className: cn("body-lg font-semibold text-foreground", className),
+    className: cn("body-lg font-semibold text-balance text-foreground", className),
     ...props
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-muted-foreground", className), ...props }));
+var DialogDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Dialog.Description,
+  {
+    ref,
+    className: cn("body text-pretty text-muted-foreground", className),
+    ...props
+  }
+));
 DialogDescription.displayName = "DialogDescription";
 function CommandPalette({
   open,
@@ -1615,7 +1666,7 @@ function CommandPalette({
         "button",
         {
           type: "button",
-          className: "flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none",
+          className: "flex min-h-10 w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none",
           onClick: () => handleSelect(item),
           children: [
             item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-card text-muted-foreground", children: item.icon }),
@@ -1654,17 +1705,23 @@ function Command({ className, children, onSelect, ...props }) {
       setVisibleCount(visibleIds.current.size);
     }
   }, []);
-  return /* @__PURE__ */ jsx(CommandCtx.Provider, { value: { query, setQuery, ...onSelect !== void 0 && { onSelect }, reportVisible }, children: /* @__PURE__ */ jsx(CommandVisibleCtx.Provider, { value: visibleCount, children: /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsx(
+    CommandCtx.Provider,
     {
-      className: cn(
-        "flex flex-col overflow-hidden rounded-xl border border-border bg-card",
-        className
-      ),
-      ...props,
-      children
+      value: { query, setQuery, ...onSelect !== void 0 && { onSelect }, reportVisible },
+      children: /* @__PURE__ */ jsx(CommandVisibleCtx.Provider, { value: visibleCount, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex flex-col overflow-hidden rounded-xl border border-border bg-card",
+            className
+          ),
+          ...props,
+          children
+        }
+      ) })
     }
-  ) }) });
+  );
 }
 var CommandInput = React17.forwardRef(({ className, ...props }, ref) => {
   const { query, setQuery } = React17.useContext(CommandCtx);
@@ -1778,7 +1835,7 @@ var CommandItem = React17.forwardRef(
         "data-cmd-item": true,
         tabIndex: disabled ? void 0 : 0,
         className: cn(
-          "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5 mx-1",
+          "relative mx-1 flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
           "body text-muted-foreground outline-none transition-colors",
           "hover:bg-muted hover:text-foreground",
           "focus:bg-muted focus:text-foreground",
@@ -1842,7 +1899,7 @@ var ContextMenuItem = React17.forwardRef(({ className, inset, destructive, ...pr
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body outline-none transition-colors",
       destructive ? "text-destructive focus:bg-destructive/10 focus:text-destructive" : "text-muted-foreground focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -1858,7 +1915,7 @@ var ContextMenuCheckboxItem = React17.forwardRef(({ className, children, ...prop
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -1877,7 +1934,7 @@ var ContextMenuRadioItem = React17.forwardRef(({ className, children, ...props }
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -1914,7 +1971,7 @@ var ContextMenuSubTrigger = React17.forwardRef(({ className, inset, children, ..
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
@@ -2021,7 +2078,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "flex h-9 w-full rounded-md border border-border bg-card px-3 py-1",
+        "flex h-10 w-full rounded-md border border-border bg-card px-3 py-1",
         "body text-foreground placeholder:text-muted-foreground",
         "transition-colors duration-150",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
@@ -2075,7 +2132,7 @@ function DataTable({
             "button",
             {
               className: cn(
-                "flex items-center gap-1 transition-colors hover:text-muted-foreground",
+                "flex min-h-10 items-center gap-1 transition-colors hover:text-muted-foreground",
                 header.column.getIsSorted() && "text-foreground"
               ),
               onClick: header.column.getToggleSortingHandler(),
@@ -2088,16 +2145,23 @@ function DataTable({
         },
         header.id
       )) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: "No results." }) }) })
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: columns.length,
+          className: "h-24 text-center text-muted-foreground",
+          children: "No results."
+        }
+      ) }) })
     ] }),
     showPagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("p", { className: "caption text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("p", { className: "caption tabular-nums text-muted-foreground", children: [
         table.getFilteredRowModel().rows.length,
         " result",
         table.getFilteredRowModel().rows.length !== 1 ? "s" : ""
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("span", { className: "caption text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { className: "caption tabular-nums text-muted-foreground", children: [
           "Page ",
           table.getState().pagination.pageIndex + 1,
           " of ",
@@ -2200,8 +2264,8 @@ function DescriptionList({
 }) {
   return /* @__PURE__ */ jsxs("div", { className, children: [
     (title || description) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      title && /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "mt-1 caption text-muted-foreground", children: description })
+      title && /* @__PURE__ */ jsx("p", { className: "body font-semibold text-balance text-foreground", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 caption text-pretty text-muted-foreground", children: description })
     ] }),
     /* @__PURE__ */ jsx("dl", { className: cn("border-t border-border", columns === 2 && "sm:grid sm:grid-cols-2"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
       "div",
@@ -2283,8 +2347,8 @@ function EmptyState({ icon, title, description, action, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 px-6 py-14 text-center", className), children: [
     icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-muted-foreground", children: icon }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "body max-w-xs text-muted-foreground", children: description })
+      /* @__PURE__ */ jsx("p", { className: "body text-balance font-semibold text-foreground", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "body max-w-xs text-pretty text-muted-foreground", children: description })
     ] }),
     action && (action.href ? /* @__PURE__ */ jsx(Button, { size: "sm", asChild: true, children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label }) }) : /* @__PURE__ */ jsx(Button, { size: "sm", onClick: action.onClick, children: action.label }))
   ] });
@@ -2360,8 +2424,8 @@ function GridListCard({
       ),
       children: [
         accent && /* @__PURE__ */ jsx("div", { className: "mb-2", children: accent }),
-        /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "caption text-muted-foreground", children: description }),
+        /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground text-balance", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "caption text-muted-foreground text-pretty", children: description }),
         (meta || trailing) && /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [
           meta && /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: meta }),
           trailing && /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: trailing })
@@ -2408,7 +2472,7 @@ function GridListAccentCard({
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-between truncate border-l border-border px-4 py-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground truncate", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground truncate text-balance", children: title }),
             meta && /* @__PURE__ */ jsx("p", { className: "caption text-muted-foreground", children: meta })
           ] }),
           trailing && /* @__PURE__ */ jsx("div", { className: "shrink-0 pl-2", children: trailing })
@@ -2469,7 +2533,7 @@ var InputGroup = React17.forwardRef(
     const hasInsetTrailing = trailingIcon || trailingAction || error;
     const hasTrailing = trailingAddon || hasInsetTrailing || trailingButton;
     const baseInput = cn(
-      "flex h-9 w-full border bg-card body text-foreground placeholder:text-muted-foreground",
+      "flex h-10 w-full border bg-card body text-foreground placeholder:text-muted-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:disabled:cursor-not-allowed disabled:opacity-50",
       error ? "border-destructive focus-visible:ring-destructive/20 focus-visible:border-destructive" : "border-border focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary"
     );
@@ -2498,7 +2562,7 @@ var InputGroup = React17.forwardRef(
               baseInput,
               // Border radius
               leadingAddon ? trailingAddon || trailingButton ? "rounded-none px-3" : pill ? "rounded-none rounded-r-full px-3" : "rounded-none rounded-r-lg px-3" : leadingIcon ? trailingAddon ? pill ? "rounded-l-full rounded-r-none pl-9 pr-3" : "rounded-l-lg rounded-r-none pl-9 pr-3" : hasInsetTrailing ? cn(radius, "pl-9 pr-9") : cn(radius, "pl-9 pr-3") : trailingAddon ? pill ? "rounded-l-full rounded-r-none px-3" : "rounded-l-lg rounded-r-none px-3" : hasInsetTrailing ? cn(radius, "pl-3 pr-9") : cn(radius, "px-3"),
-              trailingAction && "pr-14",
+              trailingAction && "pr-16",
               className
             ),
             ...props
@@ -2509,7 +2573,7 @@ var InputGroup = React17.forwardRef(
           "div",
           {
             className: cn(
-              "absolute inset-y-0 right-2 flex items-center",
+              "absolute right-2 top-1/2 flex -translate-y-1/2 items-center",
               trailingActionClassName
             ),
             children: trailingAction
@@ -2603,7 +2667,14 @@ var InputNumber = React17.forwardRef(
               ...rest
             }
           ),
-          unit && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-muted-foreground self-center pr-1.5 select-none", children: unit }),
+          unit && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "caption-xs text-muted-foreground self-center pr-1.5 select-none",
+              children: unit
+            }
+          ),
           !hideSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-border", children: [
             /* @__PURE__ */ jsx(
               "button",
@@ -2660,7 +2731,7 @@ var InputOTPSlot = React17.forwardRef(({ index, className, ...props }, ref) => {
         "relative flex h-12 w-11 items-center justify-center",
         "border-y border-r border-border body font-medium text-foreground",
         "first:rounded-l-xl first:border-l last:rounded-r-xl",
-        "transition-all",
+        "transition-[border-color,box-shadow]",
         isActive && "z-10 ring-2 ring-brand-primary/40 border-brand-primary",
         className
       ),
@@ -2732,7 +2803,7 @@ var MenubarRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "flex h-9 items-center gap-0.5 rounded-lg border border-border bg-card px-1",
+      "flex min-h-10 items-center gap-0.5 rounded-lg border border-border bg-card px-1",
       className
     ),
     ...props
@@ -2748,7 +2819,7 @@ var MenubarTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-muted-foreground select-none outline-none",
+      "flex min-h-8 cursor-default items-center rounded-md px-3 py-1 body font-medium text-muted-foreground select-none outline-none",
       "hover:bg-muted",
       "data-[state=open]:bg-muted data-[state=open]:text-foreground",
       "focus:bg-muted",
@@ -2783,7 +2854,7 @@ var MenubarItem = React17.forwardRef(({ className, inset, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -2799,7 +2870,7 @@ var MenubarCheckboxItem = React17.forwardRef(({ className, children, ...props },
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -2818,7 +2889,7 @@ var MenubarRadioItem = React17.forwardRef(({ className, children, ...props }, re
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md py-2 pl-8 pr-2.5",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -2841,21 +2912,14 @@ var MenubarLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 MenubarLabel.displayName = "MenubarLabel";
-var MenubarSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Menubar.Separator,
-  {
-    ref,
-    className: cn("mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
+var MenubarSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Menubar.Separator, { ref, className: cn("mx-1 my-1 h-px bg-muted", className), ...props }));
 MenubarSeparator.displayName = "MenubarSeparator";
 var MenubarSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   Menubar.SubTrigger,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
@@ -2895,7 +2959,7 @@ var NativeSelect = React17.forwardRef(({ className, children, ...props }, ref) =
     {
       ref,
       className: cn(
-        "peer h-9 w-full appearance-none rounded-lg border border-border bg-card pl-3 pr-8",
+        "peer h-10 w-full appearance-none rounded-lg border border-border bg-card pl-3 pr-8",
         "body text-foreground",
         "focus:outline-none focus:ring-2 focus:ring-ring/30 focus:border-border",
         "disabled:cursor-not-allowed disabled:opacity-50",
@@ -2944,7 +3008,7 @@ var NavigationMenuTrigger = React17.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
+      "group inline-flex h-10 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
       "body font-medium text-muted-foreground",
       "hover:bg-muted hover:text-foreground",
       "data-[active]:bg-muted data-[state=open]:bg-muted",
@@ -2988,7 +3052,7 @@ var NavigationMenuLink = React17.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "block select-none rounded-md px-3 py-2 body text-muted-foreground",
+      "block min-h-10 select-none rounded-md px-3 py-2 body text-muted-foreground",
       "hover:bg-muted hover:text-foreground",
       "outline-none transition-colors",
       className
@@ -3029,7 +3093,7 @@ var NavigationMenuIndicator = React17.forwardRef(({ className, ...props }, ref)
 NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
 function navigationMenuTriggerStyle() {
   return cn(
-    "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
+    "group inline-flex h-10 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
     "body font-medium text-muted-foreground",
     "hover:bg-muted hover:text-foreground",
     "data-[active]:bg-muted data-[state=open]:bg-muted",
@@ -3071,15 +3135,15 @@ function Notification({
       children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
         resolvedIcon && /* @__PURE__ */ jsx("div", { className: cn("shrink-0 mt-0.5", config.iconClass), children: resolvedIcon }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 body text-muted-foreground", children: description }),
+          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground text-balance", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 body text-muted-foreground text-pretty", children: description }),
           actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex gap-3", children: actions.map((action, i) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: action.onClick,
               className: cn(
-                "body font-semibold transition-colors",
+                "min-h-10 body font-semibold transition-colors",
                 action.variant === "ghost" ? "text-muted-foreground hover:text-muted-foreground" : "text-foreground hover:text-muted-foreground"
               ),
               children: action.label
@@ -3092,7 +3156,7 @@ function Notification({
           {
             type: "button",
             onClick: onClose,
-            className: "rounded-md text-muted-foreground hover:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+            className: "flex size-10 items-center justify-center rounded-md text-muted-foreground transition-[color,scale] hover:text-muted-foreground active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
             children: [
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" }),
               /* @__PURE__ */ jsx(X, { size: 16 })
@@ -3128,10 +3192,10 @@ function PageHeading({
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("h1", { className: "display text-foreground truncate", children: title }),
+          /* @__PURE__ */ jsx("h1", { className: "display text-balance text-foreground truncate", children: title }),
           badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) : /* @__PURE__ */ jsx(Badge, { variant: badge.variant ?? "secondary", children: badge.label }))
         ] }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 body text-muted-foreground max-w-2xl", children: description }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 body max-w-2xl text-pretty text-muted-foreground", children: description }),
         meta && meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-4", children: meta.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 caption text-muted-foreground", children: [
           m.icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: m.icon }),
           /* @__PURE__ */ jsx("span", { children: m.text })
@@ -3185,7 +3249,7 @@ var PaginationLink = ({ className, isActive, ...props }) => /* @__PURE__ */ jsx(
     "aria-current": isActive ? "page" : void 0,
     className: cn(
       buttonVariants({ variant: isActive ? "default" : "ghost", size: "icon" }),
-      "size-8 rounded-md body",
+      "size-10 rounded-md body",
       className
     ),
     ...props
@@ -3225,7 +3289,7 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
     "aria-hidden": true,
-    className: cn("flex size-8 items-center justify-center text-muted-foreground", className),
+    className: cn("flex size-10 items-center justify-center text-muted-foreground", className),
     ...props,
     children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 })
   }
@@ -3241,7 +3305,7 @@ var ProgressRoot = React17.forwardRef(({ className, value, ...props }, ref) => /
     children: /* @__PURE__ */ jsx(
       Progress.Indicator,
       {
-        className: "h-full w-full flex-1 bg-brand-primary transition-all",
+        className: "h-full w-full flex-1 bg-brand-primary transition-transform",
         style: { transform: `translateX(-${100 - (value ?? 0)}%)` }
       }
     )
@@ -3303,7 +3367,8 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
         disabled: option.disabled,
         onClick: () => !option.disabled && onValueChange?.(option.value),
         className: cn(
-          "relative flex cursor-pointer flex-col gap-1 rounded-xl border p-4 text-left transition-all",
+          "relative flex cursor-pointer flex-col gap-1 rounded-xl border p-4 text-left transition-[background-color,border-color,box-shadow,opacity,scale]",
+          "active:scale-[0.96]",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
           "disabled:cursor-not-allowed disabled:opacity-50",
           isSelected ? "border-brand-primary bg-card shadow-natural" : "border-border bg-card hover:border-border"
@@ -3323,13 +3388,13 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
                 "p",
                 {
                   className: cn(
-                    "body font-semibold",
+                    "body font-semibold text-pretty",
                     isSelected ? "text-foreground" : "text-muted-foreground"
                   ),
                   children: option.label
                 }
               ),
-              option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 caption text-muted-foreground", children: option.description })
+              option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 caption text-pretty text-muted-foreground", children: option.description })
             ] }),
             /* @__PURE__ */ jsx(
               "div",
@@ -3366,7 +3431,8 @@ var RadioGroupItem = React17.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "aspect-square size-4 rounded-full border border-border text-foreground",
+      "relative aspect-square size-4 rounded-full border border-border text-foreground",
+      "after:absolute after:left-1/2 after:top-1/2 after:size-10 after:-translate-x-1/2 after:-translate-y-1/2",
       "shadow-none transition-colors",
       "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/20",
       "disabled:cursor-not-allowed disabled:opacity-50",
@@ -3464,8 +3530,8 @@ function SectionHeading({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("h2", { className: "heading text-foreground truncate", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "mt-1 body text-muted-foreground", children: description })
+          /* @__PURE__ */ jsx("h2", { className: "heading text-balance text-foreground truncate", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 body text-pretty text-muted-foreground", children: description })
         ] }),
         actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 pt-1", children: actions.map(
           (action, i) => action.href ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: action.variant ?? "default", asChild: true, children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label }) }, i) : /* @__PURE__ */ jsx(
@@ -3491,7 +3557,7 @@ var SelectTrigger = React17.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between rounded-xl bg-card px-3 py-2",
+      "flex h-10 w-full items-center justify-between rounded-xl bg-card px-3 py-2",
       "body text-foreground shadow-natural",
       "focus:outline-none focus:ring-2 focus:ring-ring/20",
       "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -3544,7 +3610,7 @@ var SelectItem = React17.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-md px-2.5 py-1.5",
+      "relative flex min-h-10 w-full cursor-default select-none items-center rounded-md px-2.5 py-2",
       "body text-muted-foreground outline-none",
       "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -3605,7 +3671,7 @@ var sheetContentVariants = cva(
   [
     "fixed z-50 bg-card shadow-elevated p-6",
     "data-[state=open]:animate-in data-[state=closed]:animate-out",
-    "transition ease-in-out duration-300"
+    "transition-transform ease-in-out duration-300"
   ],
   {
     variants: {
@@ -3632,7 +3698,7 @@ var SheetContent = React17.forwardRef(
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring/20", children: [
+          /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-3 top-3 flex size-10 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,scale] hover:opacity-100 active:scale-[0.96] focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
             /* @__PURE__ */ jsx(X, { size: 16 }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -3654,12 +3720,19 @@ var SheetTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE
   Dialog.Title,
   {
     ref,
-    className: cn("body-lg font-semibold text-foreground", className),
+    className: cn("body-lg font-semibold text-balance text-foreground", className),
     ...props
   }
 ));
 SheetTitle.displayName = "SheetTitle";
-var SheetDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-muted-foreground", className), ...props }));
+var SheetDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Dialog.Description,
+  {
+    ref,
+    className: cn("body text-pretty text-muted-foreground", className),
+    ...props
+  }
+));
 SheetDescription.displayName = "SheetDescription";
 function TooltipProvider({
   children,
@@ -3815,8 +3888,8 @@ function SidebarTrigger({ className, onClick, ...props }) {
     {
       "data-sidebar": "trigger",
       variant: "ghost",
-      size: "sm",
-      className: cn("h-7 w-7", className),
+      size: "icon",
+      className,
       onClick: (e) => {
         onClick?.(e);
         toggleSidebar();
@@ -3840,7 +3913,7 @@ function SidebarRail({ className, ...props }) {
       onClick: toggleSidebar,
       title: "Toggle sidebar",
       className: cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-col-resize transition-all ease-linear",
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-col-resize transition-[left,right,width] ease-linear",
         "after:absolute after:inset-y-0 after:left-1/2 after:w-[2px]",
         "hover:after:bg-brand-primary/30",
         "group-data-[side=left]:-right-4 group-data-[side=right]:left-0",
@@ -3949,7 +4022,7 @@ function SidebarGroupAction({
     {
       "data-sidebar": "group-action",
       className: cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center",
+        "absolute right-2 top-2 flex size-8 items-center justify-center",
         "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         className
@@ -3989,7 +4062,7 @@ function SidebarMenuButton({
       "data-size": size,
       className: cn(
         // Base
-        "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 body-sm text-left",
+        "peer/menu-button flex min-h-10 w-full items-center gap-2 overflow-hidden rounded-md p-2 body-sm text-left",
         "outline-none ring-ring",
         "transition-[width,height,padding] duration-150",
         "hover:bg-muted hover:text-foreground",
@@ -4007,7 +4080,7 @@ function SidebarMenuButton({
         ],
         // Collapsed state
         "group-data-[state=collapsed]/sidebar-wrapper:justify-center",
-        "group-data-[state=collapsed]/sidebar-wrapper:size-9",
+        "group-data-[state=collapsed]/sidebar-wrapper:size-10",
         "group-data-[state=collapsed]/sidebar-wrapper:p-0",
         className
       ),
@@ -4045,7 +4118,7 @@ function SidebarMenuAction({
     {
       "data-sidebar": "menu-action",
       className: cn(
-        "absolute right-1 top-1/2 -translate-y-1/2 flex aspect-square w-5 items-center justify-center",
+        "absolute right-1 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center",
         "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         showOnHover && [
@@ -4139,7 +4212,7 @@ function SidebarMenuSubButton({
       "data-sidebar": "menu-sub-button",
       "data-active": isActive,
       className: cn(
-        "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2",
+        "flex min-h-8 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2",
         "body text-muted-foreground outline-none",
         "transition-colors duration-150",
         "hover:text-foreground hover:bg-muted",
@@ -4171,7 +4244,7 @@ var SliderRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ...props,
     children: [
       /* @__PURE__ */ jsx(Slider.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full bg-brand-primary" }) }),
-      /* @__PURE__ */ jsx(Slider.Thumb, { className: "block size-4 rounded-full border-2 border-brand-primary bg-card shadow-natural transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsx(Slider.Thumb, { className: "relative block size-4 rounded-full border-2 border-brand-primary bg-card shadow-natural transition-colors after:absolute after:left-1/2 after:top-1/2 after:size-10 after:-translate-x-1/2 after:-translate-y-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
 ));
@@ -4275,12 +4348,12 @@ function StatCard({ label, value, trend, icon, className }) {
       /* @__PURE__ */ jsx("p", { className: "label text-muted-foreground", children: label }),
       icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: icon })
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "heading-xl mt-2 text-foreground", children: value }),
+    /* @__PURE__ */ jsx("p", { className: "heading-xl mt-2 tabular-nums text-foreground", children: value }),
     trend && (() => {
       const Icon = TrendIcon[trend.direction];
       return /* @__PURE__ */ jsxs("div", { className: cn("mt-2 flex items-center gap-1", trendColor[trend.direction]), children: [
         /* @__PURE__ */ jsx(Icon, { size: 12 }),
-        /* @__PURE__ */ jsx("span", { className: "caption font-medium", children: trend.value })
+        /* @__PURE__ */ jsx("span", { className: "caption tabular-nums font-medium", children: trend.value })
       ] });
     })()
   ] });
@@ -4290,7 +4363,7 @@ function CirclesSteps({ steps, className }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", className, children: /* @__PURE__ */ jsx("ol", { role: "list", className: "flex items-center", children: steps.map((step, i) => {
     const isLast = i === steps.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: cn("relative", !isLast && "flex-1"), children: [
-      !isLast && /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-8 -right-px h-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      !isLast && /* @__PURE__ */ jsx("div", { className: "absolute left-10 right-0 top-5 h-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
@@ -4310,12 +4383,12 @@ function CirclesSteps({ steps, className }) {
               "span",
               {
                 className: cn(
-                  "relative z-10 flex size-8 items-center justify-center rounded-full transition-colors",
+                  "relative z-10 flex size-10 items-center justify-center rounded-full transition-colors",
                   step.status === "complete" && "bg-brand-primary group-hover:bg-brand-primary/80",
                   step.status === "current" && "border-2 border-brand-primary bg-card",
                   step.status === "upcoming" && "border-2 border-border bg-card group-hover:border-border"
                 ),
-                children: step.status === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, className: "text-background", strokeWidth: 2.5 }) : step.status === "current" ? /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-brand-primary" }) : /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-transparent group-hover:bg-muted" })
+                children: step.status === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, className: "text-background", strokeWidth: 2.5 }) : step.status === "current" ? /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-brand-primary" }) : /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-transparent group-hover:bg-muted" })
               }
             ),
             /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-center", children: [
@@ -4329,7 +4402,7 @@ function CirclesSteps({ steps, className }) {
                   children: step.name
                 }
               ),
-              step.description && /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: step.description })
+              step.description && /* @__PURE__ */ jsx("span", { className: "caption text-pretty text-muted-foreground", children: step.description })
             ] })
           ]
         }
@@ -4340,7 +4413,7 @@ function CirclesSteps({ steps, className }) {
 function BulletsSteps({ steps, className }) {
   const currentIdx = steps.findIndex((s) => s.status === "current");
   return /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center gap-4", className), "aria-label": "Progress", children: [
-    /* @__PURE__ */ jsxs("p", { className: "body font-medium text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("p", { className: "body font-medium tabular-nums text-muted-foreground", children: [
       "Step ",
       currentIdx + 1,
       " of ",
@@ -4351,11 +4424,11 @@ function BulletsSteps({ steps, className }) {
       {
         href: step.href ?? "#",
         onClick: !step.href ? (e) => e.preventDefault() : void 0,
-        className: "block",
+        className: "relative flex size-10 items-center justify-center",
         children: step.status === "complete" ? /* @__PURE__ */ jsx(
           "span",
           {
-            className: "block size-2.5 rounded-full bg-brand-primary hover:bg-brand-primary/80 transition-colors",
+            className: "block size-2.5 rounded-full bg-brand-primary transition-colors hover:bg-brand-primary/80",
             "aria-label": `${step.name}: completed`
           }
         ) : step.status === "current" ? /* @__PURE__ */ jsxs(
@@ -4372,7 +4445,7 @@ function BulletsSteps({ steps, className }) {
         ) : /* @__PURE__ */ jsx(
           "span",
           {
-            className: "block size-2.5 rounded-full bg-muted hover:bg-muted transition-colors",
+            className: "block size-2.5 rounded-full bg-muted transition-colors hover:bg-muted",
             "aria-label": `${step.name}: upcoming`
           }
         )
@@ -4388,7 +4461,7 @@ function ProgressSteps({ steps, className }) {
     /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: "h-full rounded-full bg-brand-primary transition-all duration-500",
+        className: "h-full rounded-full bg-brand-primary transition-[width] duration-500",
         style: { width: `${progress}%` }
       }
     ) }),
@@ -4398,7 +4471,7 @@ function ProgressSteps({ steps, className }) {
         "div",
         {
           className: cn(
-            "caption font-medium",
+            "caption font-medium text-pretty",
             i === 0 ? "text-left" : isLast ? "text-right" : "text-center",
             step.status === "upcoming" ? "text-muted-foreground" : "text-foreground"
           ),
@@ -4421,8 +4494,8 @@ var SwitchRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full",
-      "border-2 border-transparent transition-colors",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
+      "border-2 border-transparent transition-[background-color,border-color,box-shadow] duration-150",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=unchecked]:bg-muted data-[state=checked]:bg-brand-primary",
@@ -4433,8 +4506,8 @@ var SwitchRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE
       Switch.Thumb,
       {
         className: cn(
-          "pointer-events-none block size-4 rounded-full bg-card shadow-natural",
-          "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4"
+          "pointer-events-none block size-5 rounded-full bg-card shadow-natural",
+          "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5"
         )
       }
     )
@@ -4492,7 +4565,7 @@ var toggleVariants = cva(
   [
     "inline-flex shrink-0 items-center justify-center gap-2",
     "body font-medium whitespace-nowrap rounded-md",
-    "transition-all duration-150 outline-none",
+    "transition-[background-color,border-color,box-shadow,color,opacity,scale] duration-150 outline-none active:scale-[0.96]",
     "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
@@ -4518,11 +4591,11 @@ var toggleVariants = cva(
       },
       size: {
         sm: "h-8 gap-1.5 px-3",
-        default: "h-9 px-3",
-        lg: "h-10 px-4",
-        icon: "size-9",
+        default: "h-10 px-3",
+        lg: "h-11 px-4",
+        icon: "size-10",
         "icon-sm": "size-8",
-        "icon-lg": "size-10"
+        "icon-lg": "size-11"
       }
     },
     defaultVariants: {