@dimaan/ui 0.0.28 → 0.0.30

package/dist/index.cjs

@@ -120,21 +120,21 @@ var AlertDialogDescription = react.forwardRef(function AlertDialogDescription2({
 
 // src/components/button/buttonVariants.ts
 var buttonVariantClass = {
-  primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 focus-visible:ring-primary/40",
+  primary: "bg-primary text-primary-foreground shadow-[var(--shadow-btn)] hover:bg-primary/95 hover:-translate-y-px hover:shadow-[var(--shadow-btn-hover)] active:translate-y-0 active:shadow-[var(--shadow-btn-active)] focus-visible:ring-primary/40",
   secondary: "bg-muted text-foreground hover:bg-muted/80 focus-visible:ring-muted-foreground/30",
   outline: "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/40",
   ghost: "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/40",
-  destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/40",
-  success: "bg-success text-success-foreground shadow-sm hover:bg-success/90 focus-visible:ring-success/40",
-  warning: "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90 focus-visible:ring-warning/40",
+  destructive: "bg-destructive text-destructive-foreground shadow-[var(--shadow-solid)] hover:bg-destructive/95 hover:-translate-y-px hover:shadow-[var(--shadow-solid-hover)] active:translate-y-0 active:shadow-[var(--shadow-solid-active)] focus-visible:ring-destructive/40",
+  success: "bg-success text-success-foreground shadow-[var(--shadow-solid)] hover:bg-success/95 hover:-translate-y-px hover:shadow-[var(--shadow-solid-hover)] active:translate-y-0 active:shadow-[var(--shadow-solid-active)] focus-visible:ring-success/40",
+  warning: "bg-warning text-warning-foreground shadow-[var(--shadow-solid)] hover:bg-warning/95 hover:-translate-y-px hover:shadow-[var(--shadow-solid-hover)] active:translate-y-0 active:shadow-[var(--shadow-solid-active)] focus-visible:ring-warning/40",
   link: "text-primary underline-offset-4 hover:underline focus-visible:ring-primary/40 px-0 shadow-none"
 };
 var buttonSizeClass = {
-  sm: "h-8 gap-1.5 rounded-md px-3 text-sm",
-  md: "h-9 gap-2 rounded-md px-4 text-sm",
-  lg: "h-11 gap-2.5 rounded-md px-6 text-base",
-  icon: "h-9 w-9 shrink-0 rounded-md p-0",
-  "icon-sm": "h-8 w-8 shrink-0 rounded-md p-0"
+  sm: "h-8 gap-1.5 rounded-[10px] px-3 text-sm",
+  md: "h-9 gap-2 rounded-[10px] px-4 text-sm",
+  lg: "h-11 gap-2.5 rounded-[10px] px-6 text-base",
+  icon: "size-9 shrink-0 rounded-[10px] p-0",
+  "icon-sm": "size-8 shrink-0 rounded-[10px] p-0"
 };
 var buttonBaseClass = "group/button relative inline-flex items-center justify-center font-medium select-none whitespace-nowrap outline-none transition-[background-color,color,box-shadow,opacity,transform] active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 var Button = react.forwardRef(function Button2({
@@ -197,10 +197,10 @@ var Button = react.forwardRef(function Button2({
   );
 });
 function Slot({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "inline-flex h-4 w-4 items-center justify-center", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "inline-flex size-4 items-center justify-center", children });
 }
 function Spinner() {
-  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { "aria-hidden": "true", className: "h-4 w-4 animate-spin", "data-testid": "button-spinner" });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { "aria-hidden": "true", className: "size-4 animate-spin", "data-testid": "button-spinner" });
 }
 var ConfirmDialogContext = react.createContext(null);
 function ConfirmDialogProvider({ labels, children }) {
@@ -372,7 +372,7 @@ function DashboardMain({ className, children, ...props }) {
         // stretching the whole layout past 100%.
         "flex min-h-screen min-w-0 flex-1 flex-col transition-[margin] duration-200 ease-out",
         // On desktop, push the main column past the fixed sidebar using logical margin.
-        collapsed ? "lg:ms-[var(--sidebar-width-collapsed)]" : "lg:ms-[var(--sidebar-width)]",
+        collapsed ? "lg:ms-0" : "lg:ms-(--sidebar-width)",
         className
       ),
       ...props,
@@ -475,7 +475,7 @@ var HeaderSearch = react.forwardRef(
           "span",
           {
             "aria-hidden": "true",
-            className: "pointer-events-none absolute start-3 flex h-4 w-4 items-center justify-center text-muted-foreground",
+            className: "pointer-events-none absolute start-3 flex size-4 items-center justify-center text-muted-foreground",
             children: icon
           }
         ) : null,
@@ -541,14 +541,16 @@ function Sidebar({ className, children, ...props }) {
           "fixed inset-y-0 start-0 z-40 flex flex-col",
           // Surface
           "bg-sidebar text-sidebar-foreground border-e border-sidebar-border",
-          // Sizing — width animates between full and collapsed
-          collapsed ? "w-[var(--sidebar-width-collapsed)]" : "w-[var(--sidebar-width)]",
+          // Sizing — always full width; collapse hides it off-canvas (below).
+          "w-[var(--sidebar-width)]",
           // Motion
-          "transition-[transform,width] duration-200 ease-out",
-          // Mobile slide: hidden by default, visible when mobileOpen.
-          // Logical translate via rtl variant so it slides off the inline-start edge
-          // in both LTR and RTL.
-          mobileOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full lg:translate-x-0 lg:rtl:translate-x-0",
+          "transition-transform duration-200 ease-out",
+          // Mobile: slide in/out via mobileOpen. Logical translate (rtl variant)
+          // so it slides off the inline-start edge in both LTR and RTL.
+          mobileOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full",
+          // Desktop: collapse fully hides the sidebar off-canvas; the header
+          // trigger slides it back in and the main content reclaims the width.
+          collapsed ? "lg:-translate-x-full lg:rtl:translate-x-full" : "lg:translate-x-0 lg:rtl:translate-x-0",
           className
         ),
         ...props,
@@ -571,18 +573,8 @@ function SidebarFooter({ className, children, ...props }) {
   );
 }
 function SidebarGroup({ label, className, children, ...props }) {
-  const { collapsed } = useDashboardLayout();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1 py-2", className), ...props, children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "px-3 pb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground transition-opacity",
-          collapsed && "pointer-events-none h-0 overflow-hidden opacity-0"
-        ),
-        children: label
-      }
-    ) : null,
+    label ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children })
   ] });
 }
@@ -616,7 +608,6 @@ function SidebarNavGroup({
   onClick,
   ...props
 }) {
-  const { collapsed } = useDashboardLayout();
   const submenuId = react.useId();
   const [internalOpen, setInternalOpen] = react.useState(defaultOpen);
   const isControlled = openProp !== void 0;
@@ -643,27 +634,23 @@ function SidebarNavGroup({
   const isActive = active || hasActiveChild;
   const prevHasActiveChild = react.useRef(false);
   react.useEffect(() => {
-    if (hasActiveChild && !prevHasActiveChild.current && !collapsed) {
+    if (hasActiveChild && !prevHasActiveChild.current) {
       setOpen(true);
     }
     prevHasActiveChild.current = hasActiveChild;
-  }, [hasActiveChild, collapsed, setOpen]);
-  react.useEffect(() => {
-    if (collapsed && open) setOpen(false);
-  }, [collapsed, open, setOpen]);
-  const titleAttr = collapsed && typeof label === "string" ? label : props.title ?? void 0;
-  const showChildren = !collapsed;
+  }, [hasActiveChild, setOpen]);
+  const titleAttr = props.title ?? void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
-        "aria-expanded": showChildren ? open : void 0,
-        "aria-controls": showChildren ? submenuId : void 0,
+        "aria-expanded": open,
+        "aria-controls": submenuId,
         "data-active": isActive ? "true" : void 0,
         title: titleAttr,
         onClick: (e) => {
-          if (showChildren) setOpen(!open);
+          setOpen(!open);
           onClick?.(e);
         },
         className: cn(
@@ -671,7 +658,6 @@ function SidebarNavGroup({
           "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
           isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
-          collapsed && "justify-center px-0",
           className
         ),
         ...props,
@@ -683,19 +669,10 @@ function SidebarNavGroup({
               className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
             }
           ) : null,
-          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "flex-1 truncate text-start transition-[opacity,width]",
-                collapsed && "pointer-events-none w-0 opacity-0"
-              ),
-              children: label
-            }
-          ),
-          endSlot && !collapsed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: endSlot }) : null,
-          showChildren ? /* @__PURE__ */ jsxRuntime.jsx(ChevronCaret, { open }) : null
+          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-start", children: label }),
+          endSlot ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: endSlot }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronCaret, { open })
         ]
       }
     ),
@@ -703,10 +680,10 @@ function SidebarNavGroup({
       "div",
       {
         id: submenuId,
-        hidden: !showChildren || !open,
+        hidden: !open,
         className: cn(
           "grid transition-[grid-template-rows] duration-200 ease-out",
-          showChildren && open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5 ps-7 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(SidebarNavGroupContext.Provider, { value: contextValue, children }) }) })
       }
@@ -719,7 +696,7 @@ function ChevronCaret({ open }) {
     {
       "aria-hidden": "true",
       className: cn(
-        "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-200",
+        "size-3.5 shrink-0 text-muted-foreground transition-transform duration-200",
         open && "rotate-180"
       )
     }
@@ -737,7 +714,6 @@ function SidebarNavItem({
   end,
   ...props
 }) {
-  const { collapsed } = useDashboardLayout();
   const resolved = reactRouterDom.useResolvedPath(to);
   const group = react.useContext(SidebarNavGroupContext);
   const itemId = react.useId();
@@ -749,13 +725,12 @@ function SidebarNavItem({
     return () => group.reportActive(itemId, false);
   }, [group, itemId, isActive]);
   const labelContent = label ?? children;
-  const titleAttr = collapsed && typeof labelContent === "string" ? labelContent : props.title;
+  const titleAttr = props.title;
   const getClassName = (active) => cn(
     "group relative flex h-9 shrink-0 items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
     "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
     "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
     active && "bg-sidebar-accent text-sidebar-accent-foreground",
-    collapsed && "justify-center px-0",
     className
   );
   const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -766,18 +741,9 @@ function SidebarNavItem({
         className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
       }
     ) : null,
-    icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn(
-          "flex-1 truncate text-start transition-[opacity,width]",
-          collapsed && "pointer-events-none w-0 opacity-0"
-        ),
-        children: labelContent
-      }
-    ),
-    endSlot && !collapsed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ms-auto flex shrink-0 items-center", children: endSlot }) : null
+    icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-start", children: labelContent }),
+    endSlot ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ms-auto flex shrink-0 items-center", children: endSlot }) : null
   ] });
   if (render) {
     return render({
@@ -884,9 +850,9 @@ function AppShell({
   ) });
 }
 var sizeClass = {
-  sm: "h-7 w-7 text-xs",
-  md: "h-9 w-9 text-sm",
-  lg: "h-11 w-11 text-base"
+  sm: "size-7 text-xs",
+  md: "size-9 text-sm",
+  lg: "size-11 text-base"
 };
 function Avatar({ src, alt = "", fallback, size = "md", className, ...props }) {
   const [errored, setErrored] = react.useState(false);
@@ -922,6 +888,14 @@ var badgeVariantClass = {
   destructive: "bg-destructive text-destructive-foreground border-transparent",
   outline: "border-border bg-transparent text-foreground"
 };
+var badgeSoftVariantClass = {
+  default: "bg-muted text-muted-foreground border-transparent",
+  primary: "bg-primary/15 text-primary-soft-foreground border-transparent",
+  success: "bg-success/15 text-success-soft-foreground border-transparent",
+  warning: "bg-warning/15 text-warning-soft-foreground border-transparent",
+  destructive: "bg-destructive/15 text-destructive-soft-foreground border-transparent",
+  outline: "border-border bg-transparent text-foreground"
+};
 var badgeSizeClass = {
   sm: "h-5 gap-1 px-2 text-[11px]",
   md: "h-6 gap-1.5 px-2.5 text-xs"
@@ -931,14 +905,16 @@ var badgeDotSizeClass = {
   md: "size-2"
 };
 var badgeBaseClass = "inline-flex shrink-0 items-center rounded-full border font-medium leading-none whitespace-nowrap select-none transition-colors";
-var Badge = react.forwardRef(function Badge2({ variant = "default", size = "md", dot = false, className, children, ...props }, ref) {
+var Badge = react.forwardRef(function Badge2({ variant = "default", size = "md", tone = "solid", dot = false, className, children, ...props }, ref) {
+  const variantClass = tone === "soft" ? badgeSoftVariantClass[variant] : badgeVariantClass[variant];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       ref,
       "data-slot": "badge",
       "data-variant": variant,
-      className: cn(badgeBaseClass, badgeVariantClass[variant], badgeSizeClass[size], className),
+      "data-tone": tone,
+      className: cn(badgeBaseClass, variantClass, badgeSizeClass[size], className),
       ...props,
       children: [
         dot ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -953,9 +929,75 @@ var Badge = react.forwardRef(function Badge2({ variant = "default", size = "md",
     }
   );
 });
+
+// src/components/card/cardVariants.ts
+var cardBaseClass = "rounded-xl border border-border bg-card text-card-foreground shadow-[var(--shadow-card)]";
+var cardHeaderClass = "flex flex-col gap-1.5 p-6";
+var cardTitleClass = "text-lg font-semibold leading-none tracking-tight text-foreground";
+var cardDescriptionClass = "text-sm text-muted-foreground";
+var cardContentClass = "p-6 pt-0";
+var cardFooterClass = "flex items-center gap-2 p-6 pt-0";
+var Card = react.forwardRef(function Card2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-slot": "card", className: cn(cardBaseClass, className), ...props });
+});
+var CardHeader = react.forwardRef(
+  function CardHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-header",
+        className: cn(cardHeaderClass, className),
+        ...props
+      }
+    );
+  }
+);
+var CardTitle = react.forwardRef(
+  function CardTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, "data-slot": "card-title", className: cn(cardTitleClass, className), ...props });
+  }
+);
+var CardDescription = react.forwardRef(function CardDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      "data-slot": "card-description",
+      className: cn(cardDescriptionClass, className),
+      ...props
+    }
+  );
+});
+var CardContent = react.forwardRef(
+  function CardContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-content",
+        className: cn(cardContentClass, className),
+        ...props
+      }
+    );
+  }
+);
+var CardFooter = react.forwardRef(
+  function CardFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-footer",
+        className: cn(cardFooterClass, className),
+        ...props
+      }
+    );
+  }
+);
 var sizeClass2 = {
-  sm: "h-3.5 w-3.5",
-  md: "h-4 w-4"
+  sm: "size-3.5",
+  md: "size-4"
 };
 var Checkbox = react.forwardRef(function Checkbox2({
   checked,
@@ -998,7 +1040,7 @@ var Checkbox = react.forwardRef(function Checkbox2({
           "indeterminate:border-primary indeterminate:bg-primary",
           "hover:border-ring",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+          "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-primary-glow"
         ),
         ...rest
       }
@@ -1008,7 +1050,7 @@ var Checkbox = react.forwardRef(function Checkbox2({
       {
         "aria-hidden": "true",
         strokeWidth: 3,
-        className: "pointer-events-none absolute inset-0 m-auto h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-0"
+        className: "pointer-events-none absolute inset-0 m-auto size-3 text-primary-foreground opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-0"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1016,7 +1058,7 @@ var Checkbox = react.forwardRef(function Checkbox2({
       {
         "aria-hidden": "true",
         strokeWidth: 3,
-        className: "pointer-events-none absolute inset-0 m-auto h-3 w-3 text-primary-foreground opacity-0 peer-indeterminate:opacity-100"
+        className: "pointer-events-none absolute inset-0 m-auto size-3 text-primary-foreground opacity-0 peer-indeterminate:opacity-100"
       }
     )
   ] });
@@ -1033,20 +1075,20 @@ var datePickerTriggerSizeClass = {
   md: "h-9 rounded-md ps-3 pe-9 text-sm gap-2",
   lg: "h-11 rounded-md ps-4 pe-10 text-base gap-2"
 };
-var datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
+var datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
 var datePickerPlaceholderClass = "truncate text-muted-foreground";
 var datePickerValueClass = "truncate text-foreground";
 var datePickerContentClass = "z-50 overflow-hidden rounded-md border border-border bg-popover p-3 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";
 var datePickerCalendarClass = "text-sm";
 var datePickerCaptionClass = "flex items-center justify-between gap-2 pb-2 text-sm font-semibold";
-var datePickerNavButtonClass = "inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
+var datePickerNavButtonClass = "inline-flex size-7 items-center justify-center rounded-md border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
 var datePickerDayWrapperClass = "p-0 text-center";
-var datePickerDayBaseClass = "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-foreground font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+var datePickerDayBaseClass = "inline-flex size-8 items-center justify-center rounded-md text-sm text-foreground font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
 var datePickerSelectedClass = "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary [&_button]:hover:text-primary-foreground";
 var datePickerTodayClass = "[&_button]:font-semibold [&_button]:ring-1 [&_button]:ring-inset [&_button]:ring-ring/40";
 var datePickerOutsideClass = "[&_button]:text-muted-foreground [&_button]:opacity-60";
 var datePickerDisabledClass = "[&_button]:pointer-events-none [&_button]:opacity-40";
-var datePickerWeekdayClass = "h-8 w-8 text-center text-xs font-medium text-muted-foreground";
+var datePickerWeekdayClass = "size-8 text-center text-xs font-medium text-muted-foreground";
 var datePickerWeekClass = "flex w-full";
 var datePickerWeekdaysClass = "flex w-full";
 var datePickerMonthGridClass = "w-full border-collapse";
@@ -1357,6 +1399,9 @@ var pageHeaderBorderedClass = "border-b border-border pb-4";
 var pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
 var pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
 var pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
+var pageHeaderEyebrowClass = "text-xs font-semibold uppercase tracking-wide text-primary";
+var pageHeaderTitleLineClass = "flex flex-wrap items-center gap-x-2.5 gap-y-1";
+var pageHeaderTitleMetaClass = "shrink-0";
 var pageHeaderDescriptionClass = "text-sm text-muted-foreground";
 var pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
 var pageHeaderBackClass = "inline-flex items-center gap-1.5 self-start text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-md";
@@ -1365,6 +1410,8 @@ var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
 var PageHeader = react.forwardRef(function PageHeader2({
   title,
   description,
+  eyebrow,
+  titleMeta,
   breadcrumbs,
   back,
   actions,
@@ -1385,11 +1432,15 @@ var PageHeader = react.forwardRef(function PageHeader2({
         back ? /* @__PURE__ */ jsxRuntime.jsx(PageHeaderBack, { ...back }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTitleBlockClass, children: [
-            react.createElement(
-              as,
-              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
-              title
-            ),
+            eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-slot": "page-header-eyebrow", className: pageHeaderEyebrowClass, children: eyebrow }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTitleLineClass, children: [
+              react.createElement(
+                as,
+                { "data-slot": "page-header-title", className: pageHeaderTitleClass },
+                title
+              ),
+              titleMeta ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "page-header-title-meta", className: pageHeaderTitleMetaClass, children: titleMeta }) : null
+            ] }),
             description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
           ] }),
           actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
@@ -1421,7 +1472,7 @@ function PageHeaderBack({ label = "Back", to, onClick, render }) {
 var detailPageBaseClass = "flex w-full flex-col gap-6";
 var detailPageBodyClass = "flex flex-col gap-6";
 var detailPageSkeletonRowClass = "h-5 w-full animate-pulse rounded-md bg-muted";
-var detailPageEmptyClass = "rounded-md border border-border bg-card";
+var detailPageEmptyClass = "rounded-xl border border-border bg-card";
 var DEFAULT_LABELS_LTR = {
   back: "Back",
   notFoundTitle: "Not found",
@@ -2088,7 +2139,7 @@ var inputSizeClass = {
   md: "h-9 rounded-md px-3 text-sm gap-2",
   lg: "h-11 rounded-md px-4 text-base gap-2.5"
 };
-var inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+var inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 var Input = react.forwardRef(function Input2({
   variant = "default",
   inputSize = "md",
@@ -2122,7 +2173,7 @@ var Input = react.forwardRef(function Input2({
           "span",
           {
             "aria-hidden": "true",
-            className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
+            className: "inline-flex size-4 items-center justify-center text-muted-foreground",
             children: leadingIcon
           }
         ) : null,
@@ -2146,7 +2197,7 @@ var Input = react.forwardRef(function Input2({
           "span",
           {
             "aria-hidden": "true",
-            className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
+            className: "inline-flex size-4 items-center justify-center text-muted-foreground",
             children: trailingIcon
           }
         ) : null
@@ -2267,7 +2318,7 @@ function Pagination({
             disabled: isFirst,
             onClick: goPrev,
             "aria-label": labels.previousPage,
-            children: isRtl ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
+            children: isRtl ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { "aria-hidden": "true", className: "size-3.5" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 text-foreground", children: [
@@ -2284,7 +2335,7 @@ function Pagination({
             disabled: isLast,
             onClick: goNext,
             "aria-label": labels.nextPage,
-            children: isRtl ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
+            children: isRtl ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "size-3.5" })
           }
         )
       ] })
@@ -2313,23 +2364,23 @@ function Toolbar({ count, onClear, renderLabel, clearLabel, children }) {
 var tableSizeClass = {
   sm: {
     row: "",
-    cell: "px-3 py-1.5 text-xs",
+    cell: "px-3 py-1.5 text-xs tabular-nums",
     head: "whitespace-nowrap px-3 py-2 text-xs font-medium"
   },
   md: {
     row: "",
-    cell: "px-4 py-2.5 text-sm",
+    cell: "px-4 py-2.5 text-sm tabular-nums",
     head: "whitespace-nowrap px-4 py-2.5 text-xs font-medium uppercase tracking-wide"
   },
   lg: {
     row: "",
-    cell: "px-5 py-3.5 text-sm",
+    cell: "px-5 py-3.5 text-sm tabular-nums",
     head: "whitespace-nowrap px-5 py-3 text-sm font-medium"
   }
 };
 var tableBaseClass = "w-full caption-bottom border-collapse";
-var selectedRowClass = "bg-muted/40";
-var sortIconClass = "inline-flex h-3 w-3 shrink-0 items-center justify-center";
+var selectedRowClass = "bg-primary/10";
+var sortIconClass = "inline-flex size-3 shrink-0 items-center justify-center";
 var alignClass = {
   start: "text-start",
   center: "text-center",
@@ -2456,7 +2507,7 @@ function Table(props) {
       "div",
       {
         className: cn(
-          "overflow-x-auto rounded-md border border-border bg-background",
+          "overflow-x-auto rounded-xl border border-border bg-card shadow-[var(--shadow-card)]",
           maxHeight !== void 0 && "overflow-y-auto"
         ),
         style: maxHeight !== void 0 ? { maxHeight } : void 0,
@@ -2474,9 +2525,11 @@ function Table(props) {
                 "thead",
                 {
                   className: cn(
-                    // Opaque (not bg-muted/40) so a sticky header fully hides the rows
-                    // scrolling underneath it.
-                    "bg-muted text-muted-foreground",
+                    // Clean opaque header (so a sticky header fully hides the rows
+                    // scrolling underneath it) with a hairline bottom rule drawn via an
+                    // inset shadow — it stays attached to the sticky header instead of
+                    // collapsing into the first row's border.
+                    "bg-card text-muted-foreground shadow-[inset_0_-1px_0_var(--color-border)]",
                     maxHeight !== void 0 && "sticky top-0 z-10"
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
@@ -2553,8 +2606,8 @@ function Table(props) {
                     "data-selected": isSelected ? "true" : void 0,
                     "aria-selected": enableRowSelection ? isSelected : void 0,
                     className: cn(
-                      "border-t border-border transition-colors",
-                      "hover:bg-accent",
+                      "border-t border-border/60 first:border-t-0 transition-colors",
+                      "hover:bg-primary/5",
                       striped && rowIndex % 2 === 1 && "bg-muted/20",
                       isSelected && selectedRowClass,
                       onRowClick && "cursor-pointer"
@@ -2637,10 +2690,7 @@ function SkeletonRows({ rowCount, columnCount, cellClassName }) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rowKeys.map((rowKey) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-t border-border", "data-testid": "table-skeleton-row", children: colKeys.map((colKey) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: cellClassName, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-3 w-full animate-pulse rounded bg-muted" }) }, `${rowKey}-${colKey}`)) }, rowKey)) });
 }
 function SortIndicator({ active, direction }) {
-  const className = cn(
-    "h-3.5 w-3.5 shrink-0",
-    active ? "text-foreground" : "text-muted-foreground"
-  );
+  const className = cn("size-3.5 shrink-0", active ? "text-foreground" : "text-muted-foreground");
   if (!active) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { "aria-hidden": "true", className });
   return direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className });
 }
@@ -2656,11 +2706,11 @@ var selectSizeClass = {
   md: "h-9 rounded-md ps-3 pe-9 text-sm",
   lg: "h-11 rounded-md ps-4 pe-10 text-base"
 };
-var selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-2 focus:ring-ring/40 focus:ring-offset-1 focus:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
+var selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-[3px] focus:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
 var selectContentClass = "z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) overflow-hidden rounded-md border border-border bg-popover 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";
 var selectViewportClass = "p-1";
 var selectItemClass = "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var selectItemIndicatorClass = "absolute start-2 inline-flex h-3.5 w-3.5 items-center justify-center [&_svg]:h-3.5 [&_svg]:w-3.5";
+var selectItemIndicatorClass = "absolute start-2 inline-flex size-3.5 items-center justify-center [&_svg]:h-3.5 [&_svg]:w-3.5";
 var selectGroupLabelClass = "px-2 py-1.5 text-xs font-semibold text-muted-foreground";
 var selectSeparatorClass = "-mx-1 my-1 h-px bg-border";
 var selectStatusClass = "flex items-center justify-center gap-2 px-2 py-6 text-center text-sm text-muted-foreground";
@@ -3023,6 +3073,16 @@ function hasActiveFilters(filters, values) {
   }
   return false;
 }
+function countActiveFilters(filters, values) {
+  let count = 0;
+  for (const filter of filters ?? []) {
+    const current = values?.[filter.key];
+    if (current === void 0) continue;
+    const value = filter.type === "text" ? current.trim() : current;
+    if (value !== filterDefaultValue(filter)) count += 1;
+  }
+  return count;
+}
 function DebouncedFilterInput({
   value,
   onChange,
@@ -3087,7 +3147,6 @@ function ListPageFilterBar({
   labels
 }) {
   const manual = mode === "manual";
-  const active = hasActiveFilters(filters, values);
   const appliedKey = JSON.stringify(values ?? {});
   const [draft, setDraft] = react.useState(values ?? {});
   react.useEffect(() => {
@@ -3118,8 +3177,11 @@ function ListPageFilterBar({
     for (const filter of filters ?? []) {
       onChange?.(filter.key, filterDefaultValue(filter));
     }
+    if (manual) setDraft({});
   };
-  const controls = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters?.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
+  if (!filters || filters.length === 0) return null;
+  const activeCount = countActiveFilters(filters, effectiveValues);
+  const controls = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
     FilterControl,
     {
       filter,
@@ -3130,22 +3192,41 @@ function ListPageFilterBar({
     },
     filter.key
   )) });
-  const resetButton = active && !disabled ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-4" }),
-    labels.reset
-  ] }) : null;
+  const header = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-primary/5 px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground", children: labels.title ?? "Filters" }),
+    activeCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary", children: [
+      activeCount,
+      " ",
+      labels.activeLabel ?? "active"
+    ] }) : null,
+    activeCount > 0 && !disabled ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "ms-auto", onClick: reset, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-4" }),
+      labels.reset
+    ] }) : null
+  ] });
+  const cardClass = "overflow-hidden rounded-xl border border-border bg-card";
   if (manual) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("form", { "data-slot": "list-page-filter-bar", className: "space-y-3", onSubmit: apply, children: [
-      controls,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-        resetButton,
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", disabled: disabled || !dirty, children: labels.apply ?? "Apply" })
+    return /* @__PURE__ */ jsxRuntime.jsxs("form", { "data-slot": "list-page-filter-bar", className: cardClass, onSubmit: apply, children: [
+      header,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 p-4", children: [
+        controls,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "submit",
+            size: "sm",
+            leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4" }),
+            className: "min-w-32",
+            disabled: disabled || !dirty,
+            children: labels.apply ?? "Apply"
+          }
+        ) })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page-filter-bar", className: "space-y-3", children: [
-    controls,
-    resetButton ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: resetButton }) : null
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page-filter-bar", className: cardClass, children: [
+    header,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: controls })
   ] });
 }
 function FilterControl({ filter, value, onChange, disabled, mode }) {
@@ -3213,6 +3294,8 @@ function renderFilterControl({
 var EN_LABELS2 = {
   reset: "Reset filters",
   apply: "Apply",
+  filtersTitle: "Filters",
+  filtersActive: "active",
   emptyTitle: "No results",
   emptyDescription: "Try clearing the search or adjusting the filters.",
   noDataTitle: "No data yet",
@@ -3220,7 +3303,9 @@ var EN_LABELS2 = {
 };
 var AR_LABELS2 = {
   reset: "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u0641\u0644\u0627\u062A\u0631",
-  apply: "\u062A\u0637\u0628\u064A\u0642",
+  apply: "\u0639\u0631\u0636 \u0627\u0644\u0646\u062A\u0627\u0626\u062C",
+  filtersTitle: "\u0627\u0644\u062A\u0635\u0641\u064A\u0629",
+  filtersActive: "\u0645\u0641\u0639\u0651\u0644",
   emptyTitle: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0646\u062A\u0627\u0626\u062C",
   emptyDescription: "\u062C\u0631\u0651\u0628 \u0645\u0633\u062D \u0627\u0644\u0628\u062D\u062B \u0623\u0648 \u062A\u0639\u062F\u064A\u0644 \u0627\u0644\u0641\u0644\u0627\u062A\u0631.",
   noDataTitle: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0628\u064A\u0627\u0646\u0627\u062A \u0628\u0639\u062F",
@@ -3245,6 +3330,7 @@ function ListPage({
   pagination,
   onPaginationChange,
   totalCount,
+  eyebrow,
   pageSizeOptions,
   emptyState,
   noDataState,
@@ -3265,7 +3351,17 @@ function ListPage({
   };
   const tableMode = isLoading ? "loading" : data.length === 0 && !hasActiveQuery ? "no-data" : data.length === 0 && hasActiveQuery ? "no-results" : "rows";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page", className: cn("space-y-6", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { title, description, bordered, actions }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PageHeader,
+      {
+        title,
+        description,
+        eyebrow,
+        titleMeta: typeof totalCount === "number" && totalCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "primary", tone: "soft", size: "sm", children: totalCount }) : void 0,
+        bordered,
+        actions
+      }
+    ),
     showFilterBar ? /* @__PURE__ */ jsxRuntime.jsx(
       ListPageFilterBar,
       {
@@ -3273,7 +3369,12 @@ function ListPage({
         values: filterValues,
         onChange: onFilterChange,
         mode: filterMode,
-        labels: { reset: labels.reset, apply: labels.apply }
+        labels: {
+          reset: labels.reset,
+          apply: labels.apply,
+          title: labels.filtersTitle,
+          activeLabel: labels.filtersActive
+        }
       }
     ) : null,
     tableMode === "loading" || tableMode === "rows" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3350,7 +3451,7 @@ var radioLabelSizeClass = {
   md: "text-sm",
   lg: "text-base"
 };
-var radioItemBaseClass = "aspect-square shrink-0 rounded-full border border-input bg-background text-primary outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 data-[state=checked]:border-primary";
+var radioItemBaseClass = "aspect-square shrink-0 rounded-full border border-input bg-background text-primary outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-primary-glow hover:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 data-[state=checked]:border-primary";
 var radioIndicatorBaseClass = "flex h-full w-full items-center justify-center";
 var radioIndicatorDotClass = "rounded-full bg-primary";
 var radioOptionRowClass = "flex cursor-pointer items-start gap-2 has-[button:disabled]:cursor-not-allowed";
@@ -3521,7 +3622,7 @@ var switchThumbClass = {
   md: "size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
   lg: "size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"
 };
-var switchTrackBaseClass = "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive/40";
+var switchTrackBaseClass = "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-primary-glow disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary aria-[invalid=true]:ring-[3px] aria-[invalid=true]:ring-destructive/40";
 var switchThumbBaseClass = "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform";
 var Switch = react.forwardRef(function Switch2({
   switchSize = "md",
@@ -3602,7 +3703,7 @@ var textareaResizeClass = {
   horizontal: "resize-x",
   both: "resize"
 };
-var textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+var textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
 var Textarea = react.forwardRef(function Textarea2({
   variant = "default",
   textareaSize = "md",
@@ -3765,6 +3866,12 @@ exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Button = Button;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
 exports.ConfirmDialogProvider = ConfirmDialogProvider;
 exports.DashboardContent = DashboardContent;
@@ -3826,10 +3933,17 @@ exports.TooltipProvider = TooltipProvider;
 exports.badgeBaseClass = badgeBaseClass;
 exports.badgeDotSizeClass = badgeDotSizeClass;
 exports.badgeSizeClass = badgeSizeClass;
+exports.badgeSoftVariantClass = badgeSoftVariantClass;
 exports.badgeVariantClass = badgeVariantClass;
 exports.buttonBaseClass = buttonBaseClass;
 exports.buttonSizeClass = buttonSizeClass;
 exports.buttonVariantClass = buttonVariantClass;
+exports.cardBaseClass = cardBaseClass;
+exports.cardContentClass = cardContentClass;
+exports.cardDescriptionClass = cardDescriptionClass;
+exports.cardFooterClass = cardFooterClass;
+exports.cardHeaderClass = cardHeaderClass;
+exports.cardTitleClass = cardTitleClass;
 exports.cn = cn;
 exports.datePickerCalendarClass = datePickerCalendarClass;
 exports.datePickerCaptionClass = datePickerCaptionClass;
@@ -3910,8 +4024,11 @@ exports.pageHeaderBaseClass = pageHeaderBaseClass;
 exports.pageHeaderBorderedClass = pageHeaderBorderedClass;
 exports.pageHeaderBreadcrumbsClass = pageHeaderBreadcrumbsClass;
 exports.pageHeaderDescriptionClass = pageHeaderDescriptionClass;
+exports.pageHeaderEyebrowClass = pageHeaderEyebrowClass;
 exports.pageHeaderTitleBlockClass = pageHeaderTitleBlockClass;
 exports.pageHeaderTitleClass = pageHeaderTitleClass;
+exports.pageHeaderTitleLineClass = pageHeaderTitleLineClass;
+exports.pageHeaderTitleMetaClass = pageHeaderTitleMetaClass;
 exports.pageHeaderTitleRowClass = pageHeaderTitleRowClass;
 exports.radioGroupBaseClass = radioGroupBaseClass;
 exports.radioGroupOrientationClass = radioGroupOrientationClass;