@dimaan/ui 0.0.27 → 0.0.29

package/dist/index.js

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Loader2, Check, Minus, Calendar, X, ChevronLeft, ChevronRight, Upload, File as File$1, ChevronDown, Search, ChevronUp, ArrowLeft, Menu, FileQuestion, ChevronsUpDown, Inbox, RefreshCw, SearchX, Trash2, Pencil, Eye } from 'lucide-react';
 import { DirectionProvider } from '@radix-ui/react-direction';
-import { Link, useLocation, useResolvedPath, useNavigate } from 'react-router-dom';
+import { Link, useResolvedPath, useMatch, useNavigate } from 'react-router-dom';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { DayPicker } from 'react-day-picker';
 import * as RadixDialog from '@radix-ui/react-dialog';
@@ -92,21 +92,21 @@ var AlertDialogDescription = forwardRef(function AlertDialogDescription2({ class
 
 // 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 = forwardRef(function Button2({
@@ -169,10 +169,10 @@ var Button = forwardRef(function Button2({
   );
 });
 function Slot({ children }) {
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex h-4 w-4 items-center justify-center", children });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex size-4 items-center justify-center", children });
 }
 function Spinner() {
-  return /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "h-4 w-4 animate-spin", "data-testid": "button-spinner" });
+  return /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 animate-spin", "data-testid": "button-spinner" });
 }
 var ConfirmDialogContext = createContext(null);
 function ConfirmDialogProvider({ labels, children }) {
@@ -447,7 +447,7 @@ var HeaderSearch = 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,
@@ -574,6 +574,7 @@ function SidebarHeader({ className, children, ...props }) {
 function SidebarNav({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("nav", { className: cn("flex flex-1 flex-col gap-1 overflow-y-auto p-2", className), ...props, children });
 }
+var SidebarNavGroupContext = createContext(null);
 function SidebarNavGroup({
   icon,
   label,
@@ -599,19 +600,39 @@ function SidebarNavGroup({
     },
     [isControlled, onOpenChange]
   );
+  const [activeChildIds, setActiveChildIds] = useState(() => /* @__PURE__ */ new Set());
+  const reportActive = useCallback((id, isItemActive) => {
+    setActiveChildIds((prev) => {
+      if (isItemActive === prev.has(id)) return prev;
+      const next = new Set(prev);
+      if (isItemActive) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }, []);
+  const contextValue = useMemo(() => ({ reportActive }), [reportActive]);
+  const hasActiveChild = activeChildIds.size > 0;
+  const isActive = active || hasActiveChild;
+  const prevHasActiveChild = useRef(false);
+  useEffect(() => {
+    if (hasActiveChild && !prevHasActiveChild.current && !collapsed) {
+      setOpen(true);
+    }
+    prevHasActiveChild.current = hasActiveChild;
+  }, [hasActiveChild, collapsed, setOpen]);
   useEffect(() => {
     if (collapsed && open) setOpen(false);
   }, [collapsed, open, setOpen]);
   const titleAttr = collapsed && typeof label === "string" ? label : props.title ?? void 0;
   const showChildren = !collapsed;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         "aria-expanded": showChildren ? open : void 0,
         "aria-controls": showChildren ? submenuId : void 0,
-        "data-active": active ? "true" : void 0,
+        "data-active": isActive ? "true" : void 0,
         title: titleAttr,
         onClick: (e) => {
           if (showChildren) setOpen(!open);
@@ -621,13 +642,20 @@ function SidebarNavGroup({
           "group relative flex h-9 w-full 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",
+          isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
           collapsed && "justify-center px-0",
           className
         ),
         ...props,
         children: [
-          icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
+          isActive ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
+            }
+          ) : null,
+          icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -652,7 +680,7 @@ function SidebarNavGroup({
           "grid transition-[grid-template-rows] duration-200 ease-out",
           showChildren && open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
         ),
-        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 ps-7 pt-1", children }) })
+        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 ps-7 pt-1", children: /* @__PURE__ */ jsx(SidebarNavGroupContext.Provider, { value: contextValue, children }) }) })
       }
     )
   ] });
@@ -663,7 +691,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"
       )
     }
@@ -682,13 +710,20 @@ function SidebarNavItem({
   ...props
 }) {
   const { collapsed } = useDashboardLayout();
-  const location = useLocation();
   const resolved = useResolvedPath(to);
-  const isActive = forcedActive || (end ? location.pathname === resolved.pathname : location.pathname.startsWith(resolved.pathname));
+  const group = useContext(SidebarNavGroupContext);
+  const itemId = useId();
+  const routeMatch = useMatch({ path: resolved.pathname, end: end ?? false });
+  const isActive = forcedActive || routeMatch != null;
+  useEffect(() => {
+    if (!group) return;
+    group.reportActive(itemId, isActive);
+    return () => group.reportActive(itemId, false);
+  }, [group, itemId, isActive]);
   const labelContent = label ?? children;
   const titleAttr = collapsed && typeof labelContent === "string" ? labelContent : props.title;
   const getClassName = (active) => cn(
-    "group relative flex h-9 items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
+    "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",
@@ -696,7 +731,14 @@ function SidebarNavItem({
     className
   );
   const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
+    isActive ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
+      }
+    ) : null,
+    icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
     /* @__PURE__ */ jsx(
       "span",
       {
@@ -814,9 +856,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] = useState(false);
@@ -852,6 +894,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"
@@ -861,14 +911,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 = forwardRef(function Badge2({ variant = "default", size = "md", dot = false, className, children, ...props }, ref) {
+var Badge = 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__ */ 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__ */ jsx(
@@ -883,9 +935,75 @@ var Badge = forwardRef(function Badge2({ variant = "default", size = "md", dot =
     }
   );
 });
+
+// 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 = forwardRef(function Card2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, "data-slot": "card", className: cn(cardBaseClass, className), ...props });
+});
+var CardHeader = forwardRef(
+  function CardHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-header",
+        className: cn(cardHeaderClass, className),
+        ...props
+      }
+    );
+  }
+);
+var CardTitle = forwardRef(
+  function CardTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("h3", { ref, "data-slot": "card-title", className: cn(cardTitleClass, className), ...props });
+  }
+);
+var CardDescription = forwardRef(function CardDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      "data-slot": "card-description",
+      className: cn(cardDescriptionClass, className),
+      ...props
+    }
+  );
+});
+var CardContent = forwardRef(
+  function CardContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-content",
+        className: cn(cardContentClass, className),
+        ...props
+      }
+    );
+  }
+);
+var CardFooter = forwardRef(
+  function CardFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ 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 = forwardRef(function Checkbox2({
   checked,
@@ -928,7 +1046,7 @@ var Checkbox = 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
       }
@@ -938,7 +1056,7 @@ var Checkbox = 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__ */ jsx(
@@ -946,7 +1064,7 @@ var Checkbox = 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"
       }
     )
   ] });
@@ -963,20 +1081,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";
@@ -1287,6 +1405,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";
@@ -1295,6 +1416,8 @@ var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
 var PageHeader = forwardRef(function PageHeader2({
   title,
   description,
+  eyebrow,
+  titleMeta,
   breadcrumbs,
   back,
   actions,
@@ -1315,11 +1438,15 @@ var PageHeader = forwardRef(function PageHeader2({
         back ? /* @__PURE__ */ jsx(PageHeaderBack, { ...back }) : null,
         /* @__PURE__ */ jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
           /* @__PURE__ */ jsxs("div", { className: pageHeaderTitleBlockClass, children: [
-            createElement(
-              as,
-              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
-              title
-            ),
+            eyebrow ? /* @__PURE__ */ jsx("p", { "data-slot": "page-header-eyebrow", className: pageHeaderEyebrowClass, children: eyebrow }) : null,
+            /* @__PURE__ */ jsxs("div", { className: pageHeaderTitleLineClass, children: [
+              createElement(
+                as,
+                { "data-slot": "page-header-title", className: pageHeaderTitleClass },
+                title
+              ),
+              titleMeta ? /* @__PURE__ */ jsx("span", { "data-slot": "page-header-title-meta", className: pageHeaderTitleMetaClass, children: titleMeta }) : null
+            ] }),
             description ? /* @__PURE__ */ jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
           ] }),
           actions ? /* @__PURE__ */ jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
@@ -1351,7 +1478,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",
@@ -2018,7 +2145,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 = forwardRef(function Input2({
   variant = "default",
   inputSize = "md",
@@ -2052,7 +2179,7 @@ var Input = 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,
@@ -2076,7 +2203,7 @@ var Input = 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
@@ -2197,7 +2324,7 @@ function Pagination({
             disabled: isFirst,
             onClick: goPrev,
             "aria-label": labels.previousPage,
-            children: isRtl ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
+            children: isRtl ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-3.5" })
           }
         ),
         /* @__PURE__ */ jsxs("span", { className: "px-1 text-foreground", children: [
@@ -2214,7 +2341,7 @@ function Pagination({
             disabled: isLast,
             onClick: goNext,
             "aria-label": labels.nextPage,
-            children: isRtl ? /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
+            children: isRtl ? /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-3.5" })
           }
         )
       ] })
@@ -2243,23 +2370,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",
@@ -2386,7 +2513,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,
@@ -2404,9 +2531,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__ */ jsxs("tr", { children: [
@@ -2483,8 +2612,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"
@@ -2567,10 +2696,7 @@ function SkeletonRows({ rowCount, columnCount, cellClassName }) {
   return /* @__PURE__ */ jsx(Fragment, { children: rowKeys.map((rowKey) => /* @__PURE__ */ jsx("tr", { className: "border-t border-border", "data-testid": "table-skeleton-row", children: colKeys.map((colKey) => /* @__PURE__ */ jsx("td", { className: cellClassName, children: /* @__PURE__ */ 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__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className });
   return direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className });
 }
@@ -2586,13 +2712,14 @@ 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";
 
 // src/components/multi-select/multiSelectVariants.ts
 var multiSelectTriggerSizeClass = {
@@ -2610,11 +2737,13 @@ var multiSelectOptionClass = "flex w-full cursor-pointer select-none items-cente
 var multiSelectEmptyClass = "px-2 py-6 text-center text-sm text-muted-foreground";
 var DEFAULT_LABELS_LTR4 = {
   search: "Search\u2026",
-  empty: "No results"
+  empty: "No results",
+  loading: "Loading\u2026"
 };
 var DEFAULT_LABELS_RTL4 = {
   search: "\u0628\u062D\u062B\u2026",
-  empty: "\u0644\u0627 \u0646\u062A\u0627\u0626\u062C"
+  empty: "\u0644\u0627 \u0646\u062A\u0627\u0626\u062C",
+  loading: "\u062C\u0627\u0631\u064D \u0627\u0644\u062A\u062D\u0645\u064A\u0644\u2026"
 };
 function toArray(value) {
   return Array.isArray(value) ? value : [];
@@ -2624,6 +2753,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
   selectSize = "md",
   options,
   placeholder,
+  loading = false,
   value,
   defaultValue,
   onValueChange,
@@ -2704,7 +2834,10 @@ var MultiSelect = forwardRef(function MultiSelect2({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: multiSelectValueRowClass, children: selected.length === 0 ? /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: multiSelectValueRowClass, children: loading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+            labels.loading
+          ] }) : selected.length === 0 ? /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             shownValues.map((v) => /* @__PURE__ */ jsxs(Badge, { variant: "default", size: "sm", className: multiSelectChipClass, children: [
               /* @__PURE__ */ jsx("span", { className: "truncate", children: labelByValue.get(v) ?? v }),
               /* @__PURE__ */ jsx(
@@ -2739,7 +2872,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
       RadixPopover.Content,
       {
         align: "start",
@@ -2749,7 +2882,10 @@ var MultiSelect = forwardRef(function MultiSelect2({
         onOpenAutoFocus: (event) => {
           if (!searchable) event.preventDefault();
         },
-        children: [
+        children: loading ? /* @__PURE__ */ jsx("div", { className: multiSelectEmptyClass, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+          labels.loading
+        ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           searchable ? /* @__PURE__ */ jsx("div", { className: multiSelectSearchRowClass, children: /* @__PURE__ */ jsx(
             Input,
             {
@@ -2789,7 +2925,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
               option.value
             );
           }) })
-        ]
+        ] })
       }
     ) })
   ] });
@@ -2803,6 +2939,9 @@ var Select = forwardRef(function Select2({
   selectSize = "md",
   options,
   placeholder,
+  loading = false,
+  loadingText = "Loading\u2026",
+  emptyText = "No options",
   value,
   defaultValue,
   onValueChange,
@@ -2861,7 +3000,7 @@ var Select = forwardRef(function Select2({
               className
             ),
             children: [
-              /* @__PURE__ */ jsx(RadixSelect.Value, { placeholder }),
+              /* @__PURE__ */ jsx(RadixSelect.Value, { placeholder, children: loading ? /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx(SelectLoading, { text: loadingText }) }) : void 0 }),
               /* @__PURE__ */ jsx(RadixSelect.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute end-3 top-1/2 size-4 shrink-0 -translate-y-1/2 text-muted-foreground" }) })
             ]
           }
@@ -2875,7 +3014,7 @@ var Select = forwardRef(function Select2({
             className: selectContentClass,
             children: [
               /* @__PURE__ */ jsx(RadixSelect.ScrollUpButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" }) }),
-              /* @__PURE__ */ jsx(RadixSelect.Viewport, { className: selectViewportClass, children: children ?? (options ? renderOptions(options) : null) }),
+              /* @__PURE__ */ jsx(RadixSelect.Viewport, { className: selectViewportClass, children: children ?? renderViewportContent({ loading, options, loadingText, emptyText }) }),
               /* @__PURE__ */ jsx(RadixSelect.ScrollDownButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" }) })
             ]
           }
@@ -2884,6 +3023,26 @@ var Select = forwardRef(function Select2({
     }
   );
 });
+function SelectLoading({ text }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+    text
+  ] });
+}
+function renderViewportContent({
+  loading,
+  options,
+  loadingText,
+  emptyText
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: selectStatusClass, role: "presentation", children: /* @__PURE__ */ jsx(SelectLoading, { text: loadingText }) });
+  }
+  if (!options || options.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: selectStatusClass, role: "presentation", children: emptyText });
+  }
+  return renderOptions(options);
+}
 function renderOptions(options) {
   if (isGroupedOptions(options)) {
     const lastIndex = options.length - 1;
@@ -2920,10 +3079,21 @@ 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,
   debounceMs,
+  id,
   ariaLabel,
   placeholder,
   wrapperClassName,
@@ -2961,6 +3131,7 @@ function DebouncedFilterInput({
   return /* @__PURE__ */ jsx(
     Input,
     {
+      id,
       type: "search",
       "aria-label": ariaLabel,
       placeholder,
@@ -2982,7 +3153,6 @@ function ListPageFilterBar({
   labels
 }) {
   const manual = mode === "manual";
-  const active = hasActiveFilters(filters, values);
   const appliedKey = JSON.stringify(values ?? {});
   const [draft, setDraft] = useState(values ?? {});
   useEffect(() => {
@@ -3013,8 +3183,11 @@ function ListPageFilterBar({
     for (const filter of filters ?? []) {
       onChange?.(filter.key, filterDefaultValue(filter));
     }
+    if (manual) setDraft({});
   };
-  const controls = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters?.map((filter) => /* @__PURE__ */ jsx(
+  if (!filters || filters.length === 0) return null;
+  const activeCount = countActiveFilters(filters, effectiveValues);
+  const controls = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters.map((filter) => /* @__PURE__ */ jsx(
     FilterControl,
     {
       filter,
@@ -3025,26 +3198,55 @@ function ListPageFilterBar({
     },
     filter.key
   )) });
-  const resetButton = active && !disabled ? /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
-    /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
-    labels.reset
-  ] }) : null;
+  const header = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-primary/5 px-4 py-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: labels.title ?? "Filters" }),
+    activeCount > 0 ? /* @__PURE__ */ 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__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "ms-auto", onClick: reset, children: [
+      /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
+      labels.reset
+    ] }) : null
+  ] });
+  const cardClass = "overflow-hidden rounded-xl border border-border bg-card";
   if (manual) {
-    return /* @__PURE__ */ jsxs("form", { "data-slot": "list-page-filter-bar", className: "space-y-3", onSubmit: apply, children: [
-      controls,
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-        resetButton,
-        /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: disabled || !dirty, children: labels.apply ?? "Apply" })
+    return /* @__PURE__ */ jsxs("form", { "data-slot": "list-page-filter-bar", className: cardClass, onSubmit: apply, children: [
+      header,
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", children: [
+        controls,
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            size: "sm",
+            leadingIcon: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
+            className: "min-w-32",
+            disabled: disabled || !dirty,
+            children: labels.apply ?? "Apply"
+          }
+        ) })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "list-page-filter-bar", className: "space-y-3", children: [
-    controls,
-    resetButton ? /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: resetButton }) : null
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "list-page-filter-bar", className: cardClass, children: [
+    header,
+    /* @__PURE__ */ jsx("div", { className: "p-4", children: controls })
   ] });
 }
 function FilterControl({ filter, value, onChange, disabled, mode }) {
   const spanClass = FILTER_SPAN_CLASS[filter.width ?? "default"];
+  const label = filter.label ?? filter.key;
+  return /* @__PURE__ */ jsx(Field, { label, className: spanClass, children: renderFilterControl({ filter, value, onChange, disabled, mode }) });
+}
+function renderFilterControl({
+  filter,
+  value,
+  onChange,
+  disabled,
+  mode
+}) {
   const ariaLabel = typeof filter.label === "string" ? filter.label : filter.key;
   switch (filter.type) {
     case "select":
@@ -3055,7 +3257,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           value: value ?? filterDefaultValue(filter),
           onValueChange: (v) => onChange?.(filter.key, v),
           options: filter.options,
-          className: spanClass,
           disabled
         }
       );
@@ -3068,7 +3269,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           debounceMs: mode === "live" ? filter.debounceMs ?? DEFAULT_TEXT_DEBOUNCE_MS : 0,
           ariaLabel,
           placeholder: filter.placeholder,
-          wrapperClassName: spanClass,
           disabled
         }
       );
@@ -3080,7 +3280,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           placeholder: filter.placeholder,
           value: value ?? "",
           onValueChange: (v) => onChange?.(filter.key, v),
-          className: spanClass,
           disabled
         }
       );
@@ -3093,7 +3292,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           options: filter.options,
           value: value ? value.split(",").filter(Boolean) : [],
           onValueChange: (values) => onChange?.(filter.key, values.join(",")),
-          className: spanClass,
           disabled
         }
       );
@@ -3102,6 +3300,8 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
 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",
@@ -3109,7 +3309,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",
@@ -3134,6 +3336,7 @@ function ListPage({
   pagination,
   onPaginationChange,
   totalCount,
+  eyebrow,
   pageSizeOptions,
   emptyState,
   noDataState,
@@ -3154,7 +3357,17 @@ function ListPage({
   };
   const tableMode = isLoading ? "loading" : data.length === 0 && !hasActiveQuery ? "no-data" : data.length === 0 && hasActiveQuery ? "no-results" : "rows";
   return /* @__PURE__ */ jsxs("div", { "data-slot": "list-page", className: cn("space-y-6", className), children: [
-    /* @__PURE__ */ jsx(PageHeader, { title, description, bordered, actions }),
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title,
+        description,
+        eyebrow,
+        titleMeta: typeof totalCount === "number" && totalCount > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "primary", tone: "soft", size: "sm", children: totalCount }) : void 0,
+        bordered,
+        actions
+      }
+    ),
     showFilterBar ? /* @__PURE__ */ jsx(
       ListPageFilterBar,
       {
@@ -3162,7 +3375,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__ */ jsx(
@@ -3239,7 +3457,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";
@@ -3410,7 +3628,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 = forwardRef(function Switch2({
   switchSize = "md",
@@ -3491,7 +3709,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 = forwardRef(function Textarea2({
   variant = "default",
   textareaSize = "md",
@@ -3635,6 +3853,6 @@ function Tooltip({
   );
 }
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppShell, Avatar, Badge, Button, Checkbox, ConfirmDialogProvider, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DatePicker, DetailPage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, FileUpload2 as FileUpload, FormPage, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, MultiSelect, PageHeader, RadioGroup, RadioGroupItem, RowActions, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, Toaster, Tooltip, TooltipProvider, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, fileUploadBaseClass, fileUploadDropzoneClass, fileUploadFileNameClass, fileUploadFileRowClass, fileUploadFileSizeClass, fileUploadHintClass, fileUploadIconClass, fileUploadPromptClass, fileUploadRemoveClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, rowActionsBaseClass, rowActionsDestructiveClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, toastClassNames, tooltipArrowClass, tooltipContentClass, useConfirm, useDashboardLayout, useDirection };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppShell, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ConfirmDialogProvider, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DatePicker, DetailPage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, FileUpload2 as FileUpload, FormPage, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, MultiSelect, PageHeader, RadioGroup, RadioGroupItem, RowActions, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, Toaster, Tooltip, TooltipProvider, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeSoftVariantClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cardBaseClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, fileUploadBaseClass, fileUploadDropzoneClass, fileUploadFileNameClass, fileUploadFileRowClass, fileUploadFileSizeClass, fileUploadHintClass, fileUploadIconClass, fileUploadPromptClass, fileUploadRemoveClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderEyebrowClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleLineClass, pageHeaderTitleMetaClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, rowActionsBaseClass, rowActionsDestructiveClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, toastClassNames, tooltipArrowClass, tooltipContentClass, useConfirm, useDashboardLayout, useDirection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map