@dimaan/ui 0.0.28 → 0.0.30

package/dist/index.js

@@ -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 }) {
@@ -344,7 +344,7 @@ function DashboardMain({ className, children, ...props }) {
         // stretching the whole layout past 100%.
         "flex min-h-screen min-w-0 flex-1 flex-col transition-[margin] duration-200 ease-out",
         // On desktop, push the main column past the fixed sidebar using logical margin.
-        collapsed ? "lg:ms-[var(--sidebar-width-collapsed)]" : "lg:ms-[var(--sidebar-width)]",
+        collapsed ? "lg:ms-0" : "lg:ms-(--sidebar-width)",
         className
       ),
       ...props,
@@ -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,
@@ -513,14 +513,16 @@ function Sidebar({ className, children, ...props }) {
           "fixed inset-y-0 start-0 z-40 flex flex-col",
           // Surface
           "bg-sidebar text-sidebar-foreground border-e border-sidebar-border",
-          // Sizing — width animates between full and collapsed
-          collapsed ? "w-[var(--sidebar-width-collapsed)]" : "w-[var(--sidebar-width)]",
+          // Sizing — always full width; collapse hides it off-canvas (below).
+          "w-[var(--sidebar-width)]",
           // Motion
-          "transition-[transform,width] duration-200 ease-out",
-          // Mobile slide: hidden by default, visible when mobileOpen.
-          // Logical translate via rtl variant so it slides off the inline-start edge
-          // in both LTR and RTL.
-          mobileOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full lg:translate-x-0 lg:rtl:translate-x-0",
+          "transition-transform duration-200 ease-out",
+          // Mobile: slide in/out via mobileOpen. Logical translate (rtl variant)
+          // so it slides off the inline-start edge in both LTR and RTL.
+          mobileOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full",
+          // Desktop: collapse fully hides the sidebar off-canvas; the header
+          // trigger slides it back in and the main content reclaims the width.
+          collapsed ? "lg:-translate-x-full lg:rtl:translate-x-full" : "lg:translate-x-0 lg:rtl:translate-x-0",
           className
         ),
         ...props,
@@ -543,18 +545,8 @@ function SidebarFooter({ className, children, ...props }) {
   );
 }
 function SidebarGroup({ label, className, children, ...props }) {
-  const { collapsed } = useDashboardLayout();
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1 py-2", className), ...props, children: [
-    label ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "px-3 pb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground transition-opacity",
-          collapsed && "pointer-events-none h-0 overflow-hidden opacity-0"
-        ),
-        children: label
-      }
-    ) : null,
+    label ? /* @__PURE__ */ jsx("div", { className: "px-3 pb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: label }) : null,
     /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children })
   ] });
 }
@@ -588,7 +580,6 @@ function SidebarNavGroup({
   onClick,
   ...props
 }) {
-  const { collapsed } = useDashboardLayout();
   const submenuId = useId();
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = openProp !== void 0;
@@ -615,27 +606,23 @@ function SidebarNavGroup({
   const isActive = active || hasActiveChild;
   const prevHasActiveChild = useRef(false);
   useEffect(() => {
-    if (hasActiveChild && !prevHasActiveChild.current && !collapsed) {
+    if (hasActiveChild && !prevHasActiveChild.current) {
       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;
+  }, [hasActiveChild, setOpen]);
+  const titleAttr = props.title ?? void 0;
   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,
+        "aria-expanded": open,
+        "aria-controls": submenuId,
         "data-active": isActive ? "true" : void 0,
         title: titleAttr,
         onClick: (e) => {
-          if (showChildren) setOpen(!open);
+          setOpen(!open);
           onClick?.(e);
         },
         className: cn(
@@ -643,7 +630,6 @@ function SidebarNavGroup({
           "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
           isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
-          collapsed && "justify-center px-0",
           className
         ),
         ...props,
@@ -655,19 +641,10 @@ function SidebarNavGroup({
               className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
             }
           ) : null,
-          icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "flex-1 truncate text-start transition-[opacity,width]",
-                collapsed && "pointer-events-none w-0 opacity-0"
-              ),
-              children: label
-            }
-          ),
-          endSlot && !collapsed ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: endSlot }) : null,
-          showChildren ? /* @__PURE__ */ jsx(ChevronCaret, { open }) : null
+          icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children: label }),
+          endSlot ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: endSlot }) : null,
+          /* @__PURE__ */ jsx(ChevronCaret, { open })
         ]
       }
     ),
@@ -675,10 +652,10 @@ function SidebarNavGroup({
       "div",
       {
         id: submenuId,
-        hidden: !showChildren || !open,
+        hidden: !open,
         className: cn(
           "grid transition-[grid-template-rows] duration-200 ease-out",
-          showChildren && open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
         ),
         children: /* @__PURE__ */ 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 }) }) })
       }
@@ -691,7 +668,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"
       )
     }
@@ -709,7 +686,6 @@ function SidebarNavItem({
   end,
   ...props
 }) {
-  const { collapsed } = useDashboardLayout();
   const resolved = useResolvedPath(to);
   const group = useContext(SidebarNavGroupContext);
   const itemId = useId();
@@ -721,13 +697,12 @@ function SidebarNavItem({
     return () => group.reportActive(itemId, false);
   }, [group, itemId, isActive]);
   const labelContent = label ?? children;
-  const titleAttr = collapsed && typeof labelContent === "string" ? labelContent : props.title;
+  const titleAttr = props.title;
   const getClassName = (active) => cn(
     "group relative flex h-9 shrink-0 items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
     "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
     "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
     active && "bg-sidebar-accent text-sidebar-accent-foreground",
-    collapsed && "justify-center px-0",
     className
   );
   const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -738,18 +713,9 @@ function SidebarNavItem({
         className: "absolute inset-y-1.5 start-0 w-1 rounded-full bg-primary"
       }
     ) : null,
-    icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }) : null,
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "flex-1 truncate text-start transition-[opacity,width]",
-          collapsed && "pointer-events-none w-0 opacity-0"
-        ),
-        children: labelContent
-      }
-    ),
-    endSlot && !collapsed ? /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center", children: endSlot }) : null
+    icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children: labelContent }),
+    endSlot ? /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center", children: endSlot }) : null
   ] });
   if (render) {
     return render({
@@ -856,9 +822,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);
@@ -894,6 +860,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"
@@ -903,14 +877,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(
@@ -925,9 +901,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,
@@ -970,7 +1012,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
       }
@@ -980,7 +1022,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(
@@ -988,7 +1030,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"
       }
     )
   ] });
@@ -1005,20 +1047,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";
@@ -1329,6 +1371,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";
@@ -1337,6 +1382,8 @@ var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
 var PageHeader = forwardRef(function PageHeader2({
   title,
   description,
+  eyebrow,
+  titleMeta,
   breadcrumbs,
   back,
   actions,
@@ -1357,11 +1404,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
@@ -1393,7 +1444,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",
@@ -2060,7 +2111,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",
@@ -2094,7 +2145,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,
@@ -2118,7 +2169,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
@@ -2239,7 +2290,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: [
@@ -2256,7 +2307,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" })
           }
         )
       ] })
@@ -2285,23 +2336,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",
@@ -2428,7 +2479,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,
@@ -2446,9 +2497,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: [
@@ -2525,8 +2578,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"
@@ -2609,10 +2662,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 });
 }
@@ -2628,11 +2678,11 @@ var selectSizeClass = {
   md: "h-9 rounded-md ps-3 pe-9 text-sm",
   lg: "h-11 rounded-md ps-4 pe-10 text-base"
 };
-var selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-2 focus:ring-ring/40 focus:ring-offset-1 focus:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
+var selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-[3px] focus:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
 var selectContentClass = "z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
 var selectViewportClass = "p-1";
 var selectItemClass = "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var selectItemIndicatorClass = "absolute start-2 inline-flex h-3.5 w-3.5 items-center justify-center [&_svg]:h-3.5 [&_svg]:w-3.5";
+var selectItemIndicatorClass = "absolute start-2 inline-flex size-3.5 items-center justify-center [&_svg]:h-3.5 [&_svg]:w-3.5";
 var selectGroupLabelClass = "px-2 py-1.5 text-xs font-semibold text-muted-foreground";
 var selectSeparatorClass = "-mx-1 my-1 h-px bg-border";
 var selectStatusClass = "flex items-center justify-center gap-2 px-2 py-6 text-center text-sm text-muted-foreground";
@@ -2995,6 +3045,16 @@ function hasActiveFilters(filters, values) {
   }
   return false;
 }
+function countActiveFilters(filters, values) {
+  let count = 0;
+  for (const filter of filters ?? []) {
+    const current = values?.[filter.key];
+    if (current === void 0) continue;
+    const value = filter.type === "text" ? current.trim() : current;
+    if (value !== filterDefaultValue(filter)) count += 1;
+  }
+  return count;
+}
 function DebouncedFilterInput({
   value,
   onChange,
@@ -3059,7 +3119,6 @@ function ListPageFilterBar({
   labels
 }) {
   const manual = mode === "manual";
-  const active = hasActiveFilters(filters, values);
   const appliedKey = JSON.stringify(values ?? {});
   const [draft, setDraft] = useState(values ?? {});
   useEffect(() => {
@@ -3090,8 +3149,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,
@@ -3102,22 +3164,41 @@ 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 }) {
@@ -3185,6 +3266,8 @@ function renderFilterControl({
 var EN_LABELS2 = {
   reset: "Reset filters",
   apply: "Apply",
+  filtersTitle: "Filters",
+  filtersActive: "active",
   emptyTitle: "No results",
   emptyDescription: "Try clearing the search or adjusting the filters.",
   noDataTitle: "No data yet",
@@ -3192,7 +3275,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",
@@ -3217,6 +3302,7 @@ function ListPage({
   pagination,
   onPaginationChange,
   totalCount,
+  eyebrow,
   pageSizeOptions,
   emptyState,
   noDataState,
@@ -3237,7 +3323,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,
       {
@@ -3245,7 +3341,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(
@@ -3322,7 +3423,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";
@@ -3493,7 +3594,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",
@@ -3574,7 +3675,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",
@@ -3718,6 +3819,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