@dimaan/ui 0.0.27 → 0.0.29

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 }) {
@@ -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,
@@ -602,6 +602,7 @@ function SidebarHeader({ className, children, ...props }) {
 function SidebarNav({ className, children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("flex flex-1 flex-col gap-1 overflow-y-auto p-2", className), ...props, children });
 }
+var SidebarNavGroupContext = react.createContext(null);
 function SidebarNavGroup({
   icon,
   label,
@@ -627,19 +628,39 @@ function SidebarNavGroup({
     },
     [isControlled, onOpenChange]
   );
+  const [activeChildIds, setActiveChildIds] = react.useState(() => /* @__PURE__ */ new Set());
+  const reportActive = react.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 = react.useMemo(() => ({ reportActive }), [reportActive]);
+  const hasActiveChild = activeChildIds.size > 0;
+  const isActive = active || hasActiveChild;
+  const prevHasActiveChild = react.useRef(false);
+  react.useEffect(() => {
+    if (hasActiveChild && !prevHasActiveChild.current && !collapsed) {
+      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;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+  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,
-        "data-active": active ? "true" : void 0,
+        "data-active": isActive ? "true" : void 0,
         title: titleAttr,
         onClick: (e) => {
           if (showChildren) setOpen(!open);
@@ -649,13 +670,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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
+          isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              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 size-5 shrink-0 items-center justify-center", children: icon }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
@@ -680,7 +708,7 @@ function SidebarNavGroup({
           "grid transition-[grid-template-rows] duration-200 ease-out",
           showChildren && 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 }) })
+        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 }) }) })
       }
     )
   ] });
@@ -691,7 +719,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"
       )
     }
@@ -710,13 +738,20 @@ function SidebarNavItem({
   ...props
 }) {
   const { collapsed } = useDashboardLayout();
-  const location = reactRouterDom.useLocation();
   const resolved = reactRouterDom.useResolvedPath(to);
-  const isActive = forcedActive || (end ? location.pathname === resolved.pathname : location.pathname.startsWith(resolved.pathname));
+  const group = react.useContext(SidebarNavGroupContext);
+  const itemId = react.useId();
+  const routeMatch = reactRouterDom.useMatch({ path: resolved.pathname, end: end ?? false });
+  const isActive = forcedActive || routeMatch != null;
+  react.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",
@@ -724,7 +759,14 @@ function SidebarNavItem({
     className
   );
   const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
+    isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        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 size-5 shrink-0 items-center justify-center", children: icon }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -842,9 +884,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);
@@ -880,6 +922,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"
@@ -889,14 +939,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(
@@ -911,9 +963,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,
@@ -956,7 +1074,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
       }
@@ -966,7 +1084,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(
@@ -974,7 +1092,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"
       }
     )
   ] });
@@ -991,20 +1109,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";
@@ -1315,6 +1433,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";
@@ -1323,6 +1444,8 @@ var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
 var PageHeader = react.forwardRef(function PageHeader2({
   title,
   description,
+  eyebrow,
+  titleMeta,
   breadcrumbs,
   back,
   actions,
@@ -1343,11 +1466,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
@@ -1379,7 +1506,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",
@@ -2046,7 +2173,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",
@@ -2080,7 +2207,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,
@@ -2104,7 +2231,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
@@ -2225,7 +2352,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: [
@@ -2242,7 +2369,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" })
           }
         )
       ] })
@@ -2271,23 +2398,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",
@@ -2414,7 +2541,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,
@@ -2432,9 +2559,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: [
@@ -2511,8 +2640,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"
@@ -2595,10 +2724,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 });
 }
@@ -2614,13 +2740,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 = {
@@ -2638,11 +2765,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 : [];
@@ -2652,6 +2781,7 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
   selectSize = "md",
   options,
   placeholder,
+  loading = false,
   value,
   defaultValue,
   onValueChange,
@@ -2732,7 +2862,10 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: multiSelectValueRowClass, children: selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: multiSelectValueRowClass, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+            labels.loading
+          ] }) : selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             shownValues.map((v) => /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", size: "sm", className: multiSelectChipClass, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: labelByValue.get(v) ?? v }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -2767,7 +2900,7 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       RadixPopover__namespace.Content,
       {
         align: "start",
@@ -2777,7 +2910,10 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
         onOpenAutoFocus: (event) => {
           if (!searchable) event.preventDefault();
         },
-        children: [
+        children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: multiSelectEmptyClass, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+          labels.loading
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           searchable ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: multiSelectSearchRowClass, children: /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
@@ -2817,7 +2953,7 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
               option.value
             );
           }) })
-        ]
+        ] })
       }
     ) })
   ] });
@@ -2831,6 +2967,9 @@ var Select = react.forwardRef(function Select2({
   selectSize = "md",
   options,
   placeholder,
+  loading = false,
+  loadingText = "Loading\u2026",
+  emptyText = "No options",
   value,
   defaultValue,
   onValueChange,
@@ -2889,7 +3028,7 @@ var Select = react.forwardRef(function Select2({
               className
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Value, { placeholder }),
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Value, { placeholder, children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(SelectLoading, { text: loadingText }) }) : void 0 }),
               /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute end-3 top-1/2 size-4 shrink-0 -translate-y-1/2 text-muted-foreground" }) })
             ]
           }
@@ -2903,7 +3042,7 @@ var Select = react.forwardRef(function Select2({
             className: selectContentClass,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ScrollUpButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { className: selectViewportClass, children: children ?? (options ? renderOptions(options) : null) }),
+              /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { className: selectViewportClass, children: children ?? renderViewportContent({ loading, options, loadingText, emptyText }) }),
               /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ScrollDownButton, { className: "flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" }) })
             ]
           }
@@ -2912,6 +3051,26 @@ var Select = react.forwardRef(function Select2({
     }
   );
 });
+function SelectLoading({ text }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin" }),
+    text
+  ] });
+}
+function renderViewportContent({
+  loading,
+  options,
+  loadingText,
+  emptyText
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: selectStatusClass, role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(SelectLoading, { text: loadingText }) });
+  }
+  if (!options || options.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: selectStatusClass, role: "presentation", children: emptyText });
+  }
+  return renderOptions(options);
+}
 function renderOptions(options) {
   if (isGroupedOptions(options)) {
     const lastIndex = options.length - 1;
@@ -2948,10 +3107,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,
@@ -2989,6 +3159,7 @@ function DebouncedFilterInput({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
+      id,
       type: "search",
       "aria-label": ariaLabel,
       placeholder,
@@ -3010,7 +3181,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(() => {
@@ -3041,8 +3211,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,
@@ -3053,26 +3226,55 @@ 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 }) {
   const spanClass = FILTER_SPAN_CLASS[filter.width ?? "default"];
+  const label = filter.label ?? filter.key;
+  return /* @__PURE__ */ jsxRuntime.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":
@@ -3083,7 +3285,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           value: value ?? filterDefaultValue(filter),
           onValueChange: (v) => onChange?.(filter.key, v),
           options: filter.options,
-          className: spanClass,
           disabled
         }
       );
@@ -3096,7 +3297,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
         }
       );
@@ -3108,7 +3308,6 @@ function FilterControl({ filter, value, onChange, disabled, mode }) {
           placeholder: filter.placeholder,
           value: value ?? "",
           onValueChange: (v) => onChange?.(filter.key, v),
-          className: spanClass,
           disabled
         }
       );
@@ -3121,7 +3320,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
         }
       );
@@ -3130,6 +3328,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",
@@ -3137,7 +3337,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",
@@ -3162,6 +3364,7 @@ function ListPage({
   pagination,
   onPaginationChange,
   totalCount,
+  eyebrow,
   pageSizeOptions,
   emptyState,
   noDataState,
@@ -3182,7 +3385,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,
       {
@@ -3190,7 +3403,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(
@@ -3267,7 +3485,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";
@@ -3438,7 +3656,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",
@@ -3519,7 +3737,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",
@@ -3682,6 +3900,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;
@@ -3743,10 +3967,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;
@@ -3827,8 +4058,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;