@underverse-ui/underverse 0.2.59 → 0.2.61

package/dist/index.js

@@ -267,7 +267,7 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs2("span", { className: cn(baseClasses, "rounded-lg gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
+  return /* @__PURE__ */ jsxs2("span", { className: cn(baseClasses, "rounded-full gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
     Icon && /* @__PURE__ */ jsx2(
       Icon,
       {
@@ -1957,7 +1957,7 @@ function SmartImage({
   alt,
   className,
   ratioClass,
-  roundedClass = "rounded-xl",
+  roundedClass = "rounded-2xl md:rounded-3xl",
   fill = true,
   width,
   height,
@@ -2147,10 +2147,10 @@ var Avatar_default = Avatar;
 import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var Skeleton = ({ className, width, height, variant = "rectangular", animation = "pulse", lines = 1 }) => {
   const variantClasses2 = {
-    rectangular: "rounded-md",
+    rectangular: "rounded-2xl md:rounded-3xl",
     circular: "rounded-full",
-    rounded: "rounded-lg",
-    text: "rounded"
+    rounded: "rounded-2xl md:rounded-3xl",
+    text: "rounded-xl"
   };
   const animationClasses = {
     pulse: "animate-pulse",
@@ -2199,9 +2199,9 @@ var SkeletonText = ({ lines = 3, className, width = "100%" }) => {
 };
 var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, className, children }) => {
   if (children) {
-    return /* @__PURE__ */ jsx13("div", { className: cn("p-4 space-y-4 rounded-lg bg-card outline-none focus:outline-none", className), children });
+    return /* @__PURE__ */ jsx13("div", { className: cn("p-4 space-y-4 rounded-2xl md:rounded-3xl bg-card outline-none focus:outline-none", className), children });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: cn("p-4 space-y-4 rounded-2xl bg-card outline-none focus:outline-none", className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn("p-4 space-y-4 rounded-2xl md:rounded-3xl bg-card outline-none focus:outline-none", className), children: [
     showAvatar && /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-3", children: [
       /* @__PURE__ */ jsx13(SkeletonAvatar, {}),
       /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
@@ -2209,7 +2209,7 @@ var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, class
         /* @__PURE__ */ jsx13(Skeleton, { className: "h-3 w-16" })
       ] })
     ] }),
-    showImage && /* @__PURE__ */ jsx13(Skeleton, { className: "h-48 w-full rounded-xl" }),
+    showImage && /* @__PURE__ */ jsx13(Skeleton, { className: "h-48 w-full rounded-2xl md:rounded-3xl" }),
     /* @__PURE__ */ jsx13(SkeletonText, { lines: textLines }),
     /* @__PURE__ */ jsxs10("div", { className: "flex space-x-2", children: [
       /* @__PURE__ */ jsx13(SkeletonButton, { size: "sm" }),
@@ -2218,7 +2218,7 @@ var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, class
   ] });
 };
 var SkeletonPost = ({ className }) => {
-  return /* @__PURE__ */ jsxs10("div", { className: cn("p-6 space-y-4 rounded-3xl bg-card outline-none focus:outline-none", className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn("p-6 space-y-4 rounded-2xl md:rounded-3xl bg-card outline-none focus:outline-none", className), children: [
     /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-3", children: [
       /* @__PURE__ */ jsx13(SkeletonAvatar, { size: "lg" }),
       /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
@@ -2250,7 +2250,7 @@ var SkeletonMessage = ({ own = false, showAvatar = true, className }) => {
   ] });
 };
 var SkeletonList = ({ items = 5, itemHeight = 60, showAvatar = true, className }) => {
-  return /* @__PURE__ */ jsx13("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-3 p-3 rounded-xl", children: [
+  return /* @__PURE__ */ jsx13("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-3 p-3 rounded-2xl md:rounded-3xl", children: [
     showAvatar && /* @__PURE__ */ jsx13(SkeletonAvatar, {}),
     /* @__PURE__ */ jsxs10("div", { className: "flex-1 space-y-2", children: [
       /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 w-3/4" }),
@@ -4338,7 +4338,7 @@ var sizeStyles6 = {
     content: "mt-3 p-3"
   },
   md: {
-    tab: "py-2 px-4 text-sm",
+    tab: "py-2.5 px-4 text-sm",
     content: "mt-4 p-4"
   },
   lg: {
@@ -4348,33 +4348,33 @@ var sizeStyles6 = {
 };
 var variantStyles5 = {
   default: {
-    container: "border-b border-border",
-    tab: "border-b-2 border-transparent hover:border-border/60",
-    activeTab: "border-primary text-primary",
+    container: "border-b border-border/60 bg-muted/30 p-1 rounded-t-2xl",
+    tab: "rounded-full border-b-2 border-transparent hover:bg-accent/40",
+    activeTab: "border-primary bg-background text-primary shadow-sm",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   },
   pills: {
-    container: "bg-muted p-1 rounded-lg",
-    tab: "rounded-md transition-all duration-200",
-    activeTab: "bg-background text-foreground shadow-sm",
+    container: "bg-muted/50 backdrop-blur-sm p-1.5 rounded-2xl border border-border/40",
+    tab: "rounded-full transition-all duration-200",
+    activeTab: "bg-background text-foreground shadow-md border border-border/50",
     inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-background/50"
   },
   underline: {
-    container: "relative border-b border-border",
-    tab: "relative transition-colors duration-200 pb-3 border-b-2 border-transparent hover:border-border/60",
-    activeTab: "text-primary border-primary font-medium",
+    container: "relative border-b border-border/60",
+    tab: "relative transition-colors duration-200 pb-3 border-b-2 border-transparent hover:border-primary/30",
+    activeTab: "text-primary border-primary font-semibold",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   },
   card: {
-    container: "space-y-1",
+    container: "space-y-1.5 bg-muted/20 p-2 rounded-2xl border border-border/30",
     tab: "rounded-xl border border-transparent transition-all duration-200",
-    activeTab: "bg-primary text-primary-foreground border-primary",
-    inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-accent/50 hover:border-border hover:shadow-sm"
+    activeTab: "bg-primary text-primary-foreground border-primary shadow-md",
+    inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-accent/50 hover:border-border/50"
   },
   "underline-card": {
-    container: "border-b border-border bg-card rounded-t-2xl",
-    tab: "relative transition-all duration-200 pb-3 px-4 border-b-2 border-transparent hover:border-primary/50 hover:bg-accent/30",
-    activeTab: "text-primary border-primary font-medium bg-accent/20",
+    container: "border-b border-border/60 bg-card/80 backdrop-blur-sm rounded-t-2xl p-1",
+    tab: "relative transition-all duration-200 pb-3 px-4 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
+    activeTab: "text-primary border-primary font-semibold bg-accent/30",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
 };
@@ -4494,7 +4494,8 @@ var Tabs = ({
         id: `${baseId}-panel-${tabs.findIndex((t) => t.value === active)}`,
         "aria-labelledby": `${baseId}-tab-${tabs.findIndex((t) => t.value === active)}`,
         className: cn(
-          "bg-card rounded-xl border border-border shadow-sm text-card-foreground transition-all duration-200",
+          "bg-card rounded-2xl md:rounded-3xl border border-border/60 shadow-sm text-card-foreground transition-all duration-200",
+          "backdrop-blur-sm",
           sizeStyles6[size].content,
           orientation === "vertical" && "flex-1"
         ),
@@ -4657,20 +4658,42 @@ var DropdownMenu = ({
     }
   );
 };
-var DropdownMenuItem = ({ children, onClick, disabled, destructive, className }) => /* @__PURE__ */ jsx24(
+var DropdownMenuItem = ({
+  children,
+  label,
+  description,
+  icon: Icon,
+  onClick,
+  disabled,
+  destructive,
+  active,
+  shortcut,
+  className
+}) => /* @__PURE__ */ jsxs21(
   "button",
   {
     onClick,
     disabled,
+    onMouseDown: (e) => e.preventDefault(),
     className: cn(
-      "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors",
+      "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors group",
       "hover:bg-accent hover:text-accent-foreground",
       "focus:bg-accent focus:text-accent-foreground focus:outline-none",
       "disabled:opacity-50 disabled:cursor-not-allowed",
       destructive && "text-destructive hover:bg-destructive/10 focus:bg-destructive/10",
+      active && "bg-primary/10 text-primary",
       className
     ),
-    children
+    children: [
+      Icon && /* @__PURE__ */ jsx24(Icon, { className: cn("w-4 h-4 shrink-0", active ? "text-primary" : "opacity-60 group-hover:opacity-100") }),
+      /* @__PURE__ */ jsxs21("div", { className: "flex-1 text-left", children: [
+        label && /* @__PURE__ */ jsx24("div", { className: cn("font-medium", description && "leading-tight"), children: label }),
+        description && /* @__PURE__ */ jsx24("div", { className: "text-xs text-muted-foreground", children: description }),
+        children
+      ] }),
+      shortcut && /* @__PURE__ */ jsx24("span", { className: "ml-2 text-xs text-muted-foreground opacity-60", children: shortcut }),
+      active && /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4 text-primary shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx24("polyline", { points: "20 6 9 17 4 12" }) })
+    ]
   }
 );
 var DropdownMenuSeparator = ({ className }) => /* @__PURE__ */ jsx24("div", { className: cn("h-px bg-border my-1", className) });
@@ -4707,7 +4730,7 @@ import { ChevronLeft, ChevronRight as ChevronRight2, ChevronsLeft, ChevronsRight
 // ../../components/ui/Combobox.tsx
 import * as React20 from "react";
 import { useId as useId3 } from "react";
-import { ChevronDown, Search as Search3, SearchX, Check as Check3, X as X8, Loader2 as Loader23 } from "lucide-react";
+import { ChevronDown, Search as Search3, SearchX, Check as Check3, X as X8 } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var getOptionLabel = (option) => {
   return typeof option === "string" ? option : option.label;
@@ -4715,6 +4738,15 @@ var getOptionLabel = (option) => {
 var getOptionValue = (option) => {
   return typeof option === "string" ? option : option.value;
 };
+var getOptionIcon = (option) => {
+  return typeof option === "string" ? void 0 : option.icon;
+};
+var getOptionDescription = (option) => {
+  return typeof option === "string" ? void 0 : option.description;
+};
+var getOptionDisabled = (option) => {
+  return typeof option === "string" ? false : option.disabled ?? false;
+};
 var findOptionByValue = (options, value) => {
   return options.find((opt) => getOptionValue(opt) === value);
 };
@@ -4729,13 +4761,21 @@ var Combobox = ({
   className,
   disabled = false,
   size = "md",
+  variant = "default",
   allowClear = false,
   usePortal = true,
   label,
   required,
   fontBold = false,
   loading: loading2 = false,
-  loadingText = "Loading..."
+  loadingText = "Loading...",
+  showSelectedIcon = true,
+  maxHeight = 280,
+  groupBy,
+  renderOption,
+  renderValue,
+  error,
+  helperText
 }) => {
   const [open, setOpen] = React20.useState(false);
   const [query, setQuery] = React20.useState("");
@@ -4753,6 +4793,7 @@ var Combobox = ({
   );
   const triggerRef = React20.useRef(null);
   const handleSelect = (option) => {
+    if (getOptionDisabled(option)) return;
     const val = getOptionValue(option);
     if (val !== void 0 && val !== null) {
       onChange(val);
@@ -4777,9 +4818,66 @@ var Combobox = ({
   }, [open, enableSearch]);
   const selectedOption = findOptionByValue(options, value);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
+  const selectedIcon = selectedOption ? getOptionIcon(selectedOption) : void 0;
+  const groupedOptions = React20.useMemo(() => {
+    if (!groupBy) return null;
+    const groups = {};
+    filteredOptions.forEach((opt) => {
+      const group = groupBy(opt);
+      if (!groups[group]) groups[group] = [];
+      groups[group].push(opt);
+    });
+    return groups;
+  }, [filteredOptions, groupBy]);
+  const renderOptionItem = (item, index) => {
+    const itemValue = getOptionValue(item);
+    const itemLabel = getOptionLabel(item);
+    const itemIcon = getOptionIcon(item);
+    const itemDescription = getOptionDescription(item);
+    const itemDisabled = getOptionDisabled(item);
+    const isSelected = itemValue === value;
+    const isEven = index % 2 === 0;
+    return /* @__PURE__ */ jsxs22(
+      "li",
+      {
+        ref: (node) => {
+          listRef.current[index] = node;
+        },
+        id: `combobox-item-${index}`,
+        role: "option",
+        tabIndex: -1,
+        "aria-selected": isSelected,
+        "aria-disabled": itemDisabled,
+        onClick: () => !itemDisabled && handleSelect(item),
+        style: {
+          animationDelay: open ? `${Math.min(index * 15, 150)}ms` : "0ms"
+        },
+        className: cn(
+          "dropdown-item group flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm",
+          "outline-none focus:outline-none focus-visible:outline-none",
+          "transition-all duration-150",
+          isEven && "bg-muted/40",
+          !itemDisabled && "hover:bg-accent/70 hover:shadow-sm",
+          !itemDisabled && "focus:bg-accent/80 focus:text-accent-foreground",
+          index === activeIndex && !itemDisabled && "bg-accent/60",
+          isSelected && "bg-primary/10 text-primary font-medium",
+          itemDisabled && "opacity-50 cursor-not-allowed"
+        ),
+        children: [
+          itemIcon && /* @__PURE__ */ jsx25("span", { className: cn("shrink-0 w-5 h-5 flex items-center justify-center", isSelected ? "text-primary" : "text-muted-foreground"), children: itemIcon }),
+          renderOption ? /* @__PURE__ */ jsx25("div", { className: "flex-1 min-w-0", children: renderOption(item, isSelected) }) : /* @__PURE__ */ jsxs22("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx25("span", { className: "block truncate", children: itemLabel }),
+            itemDescription && /* @__PURE__ */ jsx25("span", { className: "block text-xs text-muted-foreground truncate mt-0.5", children: itemDescription })
+          ] }),
+          isSelected && showSelectedIcon && /* @__PURE__ */ jsx25("span", { className: "shrink-0 ml-auto", children: /* @__PURE__ */ jsx25(Check3, { className: "h-4 w-4 text-primary" }) })
+        ]
+      },
+      `${itemValue}-${index}`
+    );
+  };
   const dropdownBody = /* @__PURE__ */ jsxs22("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", role: "listbox", id: `${resolvedId}-listbox`, className: "w-full", children: [
-    enableSearch && /* @__PURE__ */ jsxs22("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
-      /* @__PURE__ */ jsx25(Search3, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
+    enableSearch && /* @__PURE__ */ jsx25("div", { className: "relative p-2.5 border-b border-border/30", children: /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx25(Search3, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 transition-colors peer-focus:text-primary" }),
       /* @__PURE__ */ jsx25(
         "input",
         {
@@ -4804,7 +4902,7 @@ var Combobox = ({
               });
             } else if (e.key === "Enter") {
               e.preventDefault();
-              if (activeIndex !== null && filteredOptions[activeIndex]) {
+              if (activeIndex !== null && filteredOptions[activeIndex] && !getOptionDisabled(filteredOptions[activeIndex])) {
                 handleSelect(filteredOptions[activeIndex]);
               }
             } else if (e.key === "Escape") {
@@ -4813,63 +4911,75 @@ var Combobox = ({
             }
           },
           placeholder: searchPlaceholder,
-          className: "w-full rounded-full bg-background/50 py-2 pl-8 pr-3 text-sm border-0 focus:outline-none focus:bg-background/80 transition-colors placeholder:text-muted-foreground/60",
+          className: cn(
+            "peer w-full rounded-xl bg-muted/40 py-2.5 pl-9 pr-3 text-sm",
+            "border border-transparent",
+            "focus:outline-none focus:bg-background focus:border-primary/30 focus:ring-2 focus:ring-primary/10",
+            "transition-all duration-200",
+            "placeholder:text-muted-foreground/50"
+          ),
           "aria-autocomplete": "list",
           "aria-activedescendant": activeIndex != null ? `combobox-item-${activeIndex}` : void 0
         }
+      ),
+      query && /* @__PURE__ */ jsx25(
+        "button",
+        {
+          type: "button",
+          onClick: () => setQuery(""),
+          className: "absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx25(X8, { className: "h-3.5 w-3.5" })
+        }
       )
-    ] }),
-    /* @__PURE__ */ jsx25("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx25("ul", { className: "p-1 space-y-1", children: loading2 ? /* @__PURE__ */ jsx25("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-      /* @__PURE__ */ jsx25(Loader23, { className: "h-6 w-6 animate-spin text-primary" }),
-      /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: loadingText || "Loading\u2026" })
-    ] }) }) : filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
-      const itemValue = getOptionValue(item);
-      const itemLabel = getOptionLabel(item);
-      const isSelected = itemValue === value;
-      return /* @__PURE__ */ jsxs22(
-        "li",
+    ] }) }),
+    /* @__PURE__ */ jsx25("div", { className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ jsx25("div", { className: "p-1.5", children: loading2 ? /* @__PURE__ */ jsx25("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+      /* @__PURE__ */ jsx25("div", { className: "relative", children: /* @__PURE__ */ jsx25("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
+      /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: loadingText })
+    ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
+      // Render grouped options with global index tracking
+      (() => {
+        let globalIndex = 0;
+        return Object.entries(groupedOptions).map(([group, items]) => /* @__PURE__ */ jsxs22("div", { className: cn(globalIndex > 0 && "mt-2 pt-2 border-t border-border/30"), children: [
+          /* @__PURE__ */ jsx25("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group }),
+          /* @__PURE__ */ jsx25("ul", { className: "space-y-0.5", children: items.map((item) => {
+            const index = globalIndex++;
+            return renderOptionItem(item, index);
+          }) })
+        ] }, group));
+      })()
+    ) : (
+      // Render flat options
+      /* @__PURE__ */ jsx25("ul", { className: "space-y-0.5", children: filteredOptions.map((item, index) => renderOptionItem(item, index)) })
+    ) : /* @__PURE__ */ jsx25("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+      /* @__PURE__ */ jsx25("div", { className: "w-12 h-12 rounded-full bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ jsx25(SearchX, { className: "h-6 w-6 text-muted-foreground/60" }) }),
+      /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx25("span", { className: "block text-sm font-medium text-foreground", children: emptyText }),
+        query && /* @__PURE__ */ jsx25("span", { className: "block text-xs text-muted-foreground", children: "Try a different search term" })
+      ] }),
+      query && /* @__PURE__ */ jsx25(
+        "button",
         {
-          ref: (node) => {
-            listRef.current[index] = node;
-          },
-          id: `combobox-item-${index}`,
-          role: "option",
-          tabIndex: -1,
-          "aria-selected": isSelected,
-          onClick: () => handleSelect(item),
-          style: {
-            animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
-          },
-          className: cn(
-            "dropdown-item group flex cursor-pointer items-center justify-between rounded-lg px-2.5 py-1.5 text-sm",
-            "outline-none focus:outline-none focus-visible:outline-none",
-            "hover:bg-accent hover:text-accent-foreground",
-            "focus:bg-accent focus:text-accent-foreground",
-            "data-disabled:pointer-events-none data-disabled:opacity-50",
-            index === activeIndex && "bg-accent text-accent-foreground",
-            isSelected && "bg-accent text-accent-foreground"
-          ),
-          children: [
-            /* @__PURE__ */ jsx25("span", { className: "truncate", children: itemLabel }),
-            isSelected && /* @__PURE__ */ jsx25(Check3, { className: "h-4 w-4 text-primary" })
-          ]
-        },
-        `${itemValue}-${index}`
-      );
-    }) : /* @__PURE__ */ jsx25("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-      /* @__PURE__ */ jsx25(SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
-      /* @__PURE__ */ jsx25("span", { className: "text-sm", children: emptyText }),
-      query && /* @__PURE__ */ jsx25("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear" })
+          type: "button",
+          onClick: () => setQuery(""),
+          className: "px-3 py-1.5 text-xs font-medium text-primary bg-primary/10 rounded-full hover:bg-primary/20 transition-colors",
+          children: "Clear search"
+        }
+      )
     ] }) }) }) })
   ] });
   const sizeStyles8 = {
-    // Keep consistent with Input size heights
     sm: "h-8 py-1.5 text-sm md:h-7 md:text-xs",
     md: "h-10 py-2 text-sm",
     lg: "h-12 py-3 text-base"
   };
+  const variantStyles6 = {
+    default: "border border-input bg-background hover:bg-accent/5 hover:border-primary/40",
+    outline: "border-2 border-input bg-transparent hover:border-primary/60",
+    ghost: "border-0 bg-transparent hover:bg-accent/50",
+    filled: "border-0 bg-muted/50 hover:bg-muted/80"
+  };
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
-  const radiusClass = size === "sm" ? "rounded-full" : "rounded-full";
+  const radiusClass = size === "sm" ? "rounded-lg" : "rounded-xl";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
   const triggerButtonBaseProps = {
     ref: triggerRef,
@@ -4879,6 +4989,7 @@ var Combobox = ({
     "aria-haspopup": "listbox",
     "aria-expanded": open,
     "aria-controls": `${resolvedId}-listbox`,
+    "aria-invalid": !!error,
     id: resolvedId,
     "aria-labelledby": labelId,
     onKeyDown: (e) => {
@@ -4892,18 +5003,21 @@ var Combobox = ({
       }
     },
     className: cn(
-      "flex w-full items-center justify-between border border-input bg-background px-3",
+      "group flex w-full items-center justify-between px-3 transition-all duration-200",
       radiusClass,
       sizeStyles8[size],
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      variantStyles6[variant],
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      "hover:bg-accent/5 transition-colors hover:border-primary/40 focus:border-primary",
+      open && "ring-2 ring-primary/20 border-primary",
+      !!error && "border-destructive focus-visible:ring-destructive/30",
       className
     )
   };
   const triggerContents = /* @__PURE__ */ jsxs22(Fragment5, { children: [
-    /* @__PURE__ */ jsx25("span", { className: cn("truncate", !displayValue && "text-muted-foreground", fontBold && "font-bold"), children: displayValue || placeholder }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 ml-2", children: [
+    selectedIcon && /* @__PURE__ */ jsx25("span", { className: "shrink-0 w-5 h-5 mr-2 flex items-center justify-center text-primary", children: selectedIcon }),
+    /* @__PURE__ */ jsx25("span", { className: cn("flex-1 truncate text-left", !displayValue && "text-muted-foreground", fontBold && "font-semibold"), children: renderValue && selectedOption ? renderValue(selectedOption) : displayValue || placeholder }),
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1.5 ml-2 shrink-0", children: [
       allowClear && value && !disabled && /* @__PURE__ */ jsx25(
         "div",
         {
@@ -4912,11 +5026,23 @@ var Combobox = ({
           "aria-label": "Clear selection",
           onClick: handleClear,
           onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && handleClear(e),
-          className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
-          children: /* @__PURE__ */ jsx25(X8, { className: "h-3 w-3" })
+          className: cn(
+            "opacity-0 group-hover:opacity-100 transition-all duration-200",
+            "p-1 rounded-lg hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+          ),
+          children: /* @__PURE__ */ jsx25(X8, { className: "h-3.5 w-3.5" })
         }
       ),
-      /* @__PURE__ */ jsx25(ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-all duration-200", open && "rotate-180 scale-110 text-primary") })
+      /* @__PURE__ */ jsx25(
+        ChevronDown,
+        {
+          className: cn(
+            "h-4 w-4 text-muted-foreground transition-all duration-300 ease-out",
+            open && "rotate-180 text-primary",
+            !open && "group-hover:text-foreground"
+          )
+        }
+      )
     ] })
   ] });
   const triggerButtonForPopover = /* @__PURE__ */ jsx25("button", { ...triggerButtonBaseProps, children: triggerContents });
@@ -4963,7 +5089,18 @@ var Combobox = ({
       }
     ) : /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
       triggerButtonInline,
-      open && /* @__PURE__ */ jsx25("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ jsx25("div", { className: "rounded-2xl border bg-popover text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", children: dropdownBody }) })
+      open && /* @__PURE__ */ jsx25("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ jsx25("div", { className: "rounded-2xl border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", children: dropdownBody }) })
+    ] }),
+    (helperText || error) && /* @__PURE__ */ jsxs22("p", { className: cn("text-xs transition-colors duration-200 flex items-center gap-1.5", error ? "text-destructive" : "text-muted-foreground"), children: [
+      error && /* @__PURE__ */ jsx25("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-3.5 h-3.5 shrink-0", children: /* @__PURE__ */ jsx25(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
+          clipRule: "evenodd"
+        }
+      ) }),
+      error || helperText
     ] })
   ] });
 };
@@ -5136,17 +5273,23 @@ var Pagination = ({
             }
           )
         ] }),
-        pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsx26(
-          Combobox,
-          {
-            options: pageSizeOptionsStrings,
-            value: pageSize?.toString() || "10",
-            onChange: handlePageSizeChange,
-            size: "sm",
-            className: "w-14",
-            disabled
-          }
-        ) : /* @__PURE__ */ jsx26("div", {})
+        pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs23("span", { className: "text-xs text-muted-foreground/70 hidden sm:inline", children: [
+            t("itemsPerPage"),
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx26(
+            Combobox,
+            {
+              options: pageSizeOptionsStrings,
+              value: pageSize?.toString() || "10",
+              onChange: handlePageSizeChange,
+              size: "sm",
+              className: "w-20 sm:w-24",
+              disabled
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx26("div", {})
       ]
     }
   );
@@ -5372,7 +5515,12 @@ var ScrollArea = forwardRef7(
       "div",
       {
         ref,
-        className: cn("relative overflow-hidden", variantClasses[variant], outlined && "rounded-xl border border-border/60", className),
+        className: cn(
+          "relative overflow-hidden rounded-2xl md:rounded-3xl",
+          variantClasses[variant],
+          outlined && "border border-border/60",
+          className
+        ),
         ...props,
         children: /* @__PURE__ */ jsx28("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
       }
@@ -5384,7 +5532,7 @@ ScrollArea.displayName = "ScrollArea";
 // ../../components/ui/DatePicker.tsx
 import * as React23 from "react";
 import { useId as useId4 } from "react";
-import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, X as XIcon, Sparkles } from "lucide-react";
+import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, X as XIcon, Sparkles as Sparkles2 } from "lucide-react";
 
 // ../../lib/utils/date.ts
 function formatDateShort(date) {
@@ -5605,7 +5753,7 @@ var DatePicker = ({
             "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10"
           ),
           children: [
-            /* @__PURE__ */ jsx29(Sparkles, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx29(Sparkles2, { className: "w-3.5 h-3.5" }),
             todayLabel || t("today")
           ]
         }
@@ -7292,14 +7440,15 @@ var DateTimePicker = ({
 // ../../components/ui/MultiCombobox.tsx
 import * as React27 from "react";
 import { useId as useId5 } from "react";
-import { ChevronDown as ChevronDown2, Search as Search4, Check as Check5, SearchX as SearchX2, Loader2 as Loader24 } from "lucide-react";
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { ChevronDown as ChevronDown2, Search as Search4, Check as Check5, SearchX as SearchX2, Loader2 as Loader24, X as X11, Sparkles as Sparkles3 } from "lucide-react";
+import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var MultiCombobox = ({
   id,
   options,
   value,
   onChange,
-  placeholder = "Search...",
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
   maxSelected,
   disabledOptions = [],
   showTags = true,
@@ -7307,13 +7456,22 @@ var MultiCombobox = ({
   className,
   disabled = false,
   size = "md",
+  variant = "default",
   label,
   title,
   required,
   displayFormat = (option) => option.label,
   loading: loading2 = false,
   loadingText = "Loading...",
-  emptyText = "No results found"
+  emptyText = "No results found",
+  showSelectedIcons = true,
+  maxHeight = 280,
+  groupBy,
+  renderOption,
+  renderTag,
+  error,
+  helperText,
+  maxTagsVisible = 3
 }) => {
   const [query, setQuery] = React27.useState("");
   const [open, setOpen] = React27.useState(false);
@@ -7323,16 +7481,31 @@ var MultiCombobox = ({
   const triggerRef = React27.useRef(null);
   useShadCNAnimations();
   const normalizedOptions = React27.useMemo(
-    () => options.map((o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label }),
+    () => options.map(
+      (o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label, icon: o.icon, description: o.description, disabled: o.disabled, group: o.group }
+    ),
     [options]
   );
   const enableSearch = normalizedOptions.length > 10;
   const filtered = React27.useMemo(
-    () => enableSearch ? normalizedOptions.filter((opt) => opt.label.toLowerCase().includes(query.toLowerCase())) : normalizedOptions,
+    () => enableSearch ? normalizedOptions.filter(
+      (opt) => opt.label.toLowerCase().includes(query.toLowerCase()) || opt.description?.toLowerCase().includes(query.toLowerCase())
+    ) : normalizedOptions,
     [normalizedOptions, query, enableSearch]
   );
+  const groupedOptions = React27.useMemo(() => {
+    if (!groupBy) return null;
+    const groups = /* @__PURE__ */ new Map();
+    filtered.forEach((opt) => {
+      const group = groupBy(opt);
+      if (!groups.has(group)) groups.set(group, []);
+      groups.get(group).push(opt);
+    });
+    return groups;
+  }, [filtered, groupBy]);
   const toggleSelect = (optionValue) => {
-    if (disabledOptions.includes(optionValue)) return;
+    const option = normalizedOptions.find((o) => o.value === optionValue);
+    if (option?.disabled || disabledOptions.includes(optionValue)) return;
     if (value.includes(optionValue)) {
       onChange(value.filter((v) => v !== optionValue));
     } else {
@@ -7374,39 +7547,123 @@ var MultiCombobox = ({
     md: {
       trigger: "h-10 px-4 py-2 text-sm",
       icon: "h-4 w-4",
-      search: "px-8 py-2 text-sm",
+      search: "px-10 py-2 text-sm",
       item: "text-sm px-3 py-2",
       tag: "px-2 py-1 text-xs"
     },
     lg: {
       trigger: "h-12 px-5 py-3 text-base",
       icon: "h-5 w-5",
-      search: "px-8 py-3 text-base",
+      search: "px-10 py-3 text-base",
       item: "text-base px-3 py-3",
       tag: "px-2.5 py-1 text-sm"
     }
   };
+  const variantStyles6 = {
+    default: "border border-input bg-background shadow-sm hover:border-primary/50",
+    outline: "border-2 border-input bg-transparent hover:border-primary",
+    ghost: "border border-transparent bg-muted/50 hover:bg-muted"
+  };
   const autoId = useId5();
   const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
   const listboxId = `${resolvedId}-listbox`;
-  const dropdownBody = /* @__PURE__ */ jsxs28("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", className: "w-full", children: [
-    showClear && value.length > 0 && /* @__PURE__ */ jsx33("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ jsx33(
-      "button",
+  const renderOptionItem = (item, index) => {
+    const isSelected = value.includes(item.value);
+    const isDisabled = item.disabled || disabledOptions.includes(item.value);
+    const optionIcon = item.icon;
+    const optionDesc = item.description;
+    const isEven = index % 2 === 0;
+    if (renderOption) {
+      return /* @__PURE__ */ jsx33(
+        "li",
+        {
+          ref: (node) => {
+            listRef.current[index] = node;
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!isDisabled) toggleSelect(item.value);
+            inputRef.current?.focus();
+          },
+          style: { animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms" },
+          className: cn("dropdown-item", isEven && "bg-muted/25", isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"),
+          children: renderOption(item, isSelected)
+        },
+        item.value
+      );
+    }
+    return /* @__PURE__ */ jsxs28(
+      "li",
       {
-        type: "button",
+        ref: (node) => {
+          listRef.current[index] = node;
+        },
         onClick: (e) => {
           e.preventDefault();
           e.stopPropagation();
-          handleClearAll();
+          if (!isDisabled) toggleSelect(item.value);
+          inputRef.current?.focus();
         },
-        className: "text-xs text-muted-foreground hover:underline cursor-pointer",
-        children: "Clear all"
-      }
-    ) }),
-    enableSearch && /* @__PURE__ */ jsxs28("div", { className: "relative border-b border-border/60", children: [
-      /* @__PURE__ */ jsx33(Search4, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
+        style: { animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms" },
+        className: cn(
+          "dropdown-item flex cursor-pointer items-center gap-3 rounded-lg transition-all duration-200",
+          sizeStyles8[size].item,
+          isEven && "bg-muted/25",
+          "hover:bg-accent/70 hover:shadow-sm",
+          index === activeIndex && "bg-accent/60",
+          isSelected && "bg-primary/10 text-primary font-medium",
+          isDisabled && "opacity-40 cursor-not-allowed pointer-events-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsx33(
+            "span",
+            {
+              className: cn(
+                "shrink-0 w-5 h-5 flex items-center justify-center rounded-md border-2 transition-all duration-200",
+                isSelected ? "bg-primary border-primary text-primary-foreground" : "border-muted-foreground/30 bg-transparent"
+              ),
+              children: isSelected && /* @__PURE__ */ jsx33(Check5, { className: "w-3 h-3" })
+            }
+          ),
+          optionIcon && /* @__PURE__ */ jsx33("span", { className: "shrink-0 w-5 h-5 flex items-center justify-center text-muted-foreground", children: optionIcon }),
+          /* @__PURE__ */ jsxs28("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx33("div", { className: cn("truncate", isSelected && "font-medium text-primary"), children: item.label }),
+            optionDesc && /* @__PURE__ */ jsx33("div", { className: "text-xs text-muted-foreground truncate mt-0.5", children: optionDesc })
+          ] })
+        ]
+      },
+      item.value
+    );
+  };
+  const dropdownBody = /* @__PURE__ */ jsxs28("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", className: "w-full", children: [
+    value.length > 0 && /* @__PURE__ */ jsxs28("div", { className: "px-3 py-2 border-b border-border/40 flex items-center justify-between bg-muted/30", children: [
+      /* @__PURE__ */ jsxs28("span", { className: "text-xs font-medium text-muted-foreground", children: [
+        value.length,
+        " selected",
+        maxSelected && ` / ${maxSelected} max`
+      ] }),
+      showClear && /* @__PURE__ */ jsxs28(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleClearAll();
+          },
+          className: "text-xs text-muted-foreground hover:text-destructive transition-colors cursor-pointer flex items-center gap-1",
+          children: [
+            /* @__PURE__ */ jsx33(X11, { className: "w-3 h-3" }),
+            "Clear all"
+          ]
+        }
+      )
+    ] }),
+    enableSearch && /* @__PURE__ */ jsxs28("div", { className: "relative border-b border-border/40", children: [
+      /* @__PURE__ */ jsx33(Search4, { className: cn("absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", sizeStyles8[size].icon) }),
       /* @__PURE__ */ jsx33(
         "input",
         {
@@ -7417,8 +7674,17 @@ var MultiCombobox = ({
             setActiveIndex(null);
           },
           onKeyDown: handleKeyDown,
-          placeholder,
-          className: cn("w-full rounded-t-xl bg-transparent focus:outline-none cursor-text", sizeStyles8[size].search)
+          placeholder: searchPlaceholder,
+          className: cn("w-full bg-transparent focus:outline-none cursor-text placeholder:text-muted-foreground/60", sizeStyles8[size].search)
+        }
+      ),
+      query && /* @__PURE__ */ jsx33(
+        "button",
+        {
+          type: "button",
+          onClick: () => setQuery(""),
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx33(X11, { className: "w-4 h-4" })
         }
       )
     ] }),
@@ -7427,50 +7693,41 @@ var MultiCombobox = ({
       {
         id: listboxId,
         role: "listbox",
-        className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"),
-        children: loading2 ? /* @__PURE__ */ jsx33("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-          /* @__PURE__ */ jsx33(Loader24, { className: "h-6 w-6 animate-spin text-primary" }),
-          /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: loadingText })
-        ] }) }) : filtered.length ? filtered.map((item, index) => {
-          const isSelected = value.includes(item.value);
-          const isDisabled = disabledOptions.includes(item.value);
-          return /* @__PURE__ */ jsxs28(
-            "li",
-            {
-              ref: (node) => {
-                listRef.current[index] = node;
-              },
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                toggleSelect(item.value);
-                inputRef.current?.focus();
-              },
-              style: {
-                animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
-              },
-              className: cn(
-                "dropdown-item flex cursor-pointer items-center justify-between rounded-lg transition-colors",
-                sizeStyles8[size].item,
-                "hover:bg-accent hover:text-accent-foreground",
-                index === activeIndex && "bg-accent text-accent-foreground",
-                isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"
-              ),
-              children: [
-                item.label,
-                isSelected && /* @__PURE__ */ jsx33(Check5, { className: sizeStyles8[size].icon })
-              ]
-            },
-            item.value
-          );
-        }) : /* @__PURE__ */ jsx33("li", { className: cn("px-3 py-8 text-center text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-          /* @__PURE__ */ jsx33(SearchX2, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
-          /* @__PURE__ */ jsx33("span", { children: emptyText }),
-          query && /* @__PURE__ */ jsx33("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
+        "aria-multiselectable": "true",
+        style: { maxHeight },
+        className: cn("overflow-y-auto p-1.5", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"),
+        children: loading2 ? /* @__PURE__ */ jsx33("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx33(Loader24, { className: "h-8 w-8 animate-spin text-primary" }),
+            /* @__PURE__ */ jsx33(Sparkles3, { className: "h-4 w-4 text-primary/60 absolute -top-1 -right-1 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground font-medium", children: loadingText })
+        ] }) }) : filtered.length ? groupedOptions ? (
+          // Render grouped options
+          Array.from(groupedOptions.entries()).map(([group, items]) => /* @__PURE__ */ jsxs28("li", { className: "mb-2", children: [
+            /* @__PURE__ */ jsx33("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider sticky top-0 bg-popover/95 backdrop-blur-sm", children: group }),
+            /* @__PURE__ */ jsx33("ul", { children: items.map((item) => renderOptionItem(item, filtered.indexOf(item))) })
+          ] }, group))
+        ) : (
+          // Render flat options
+          filtered.map((item, index) => renderOptionItem(item, index))
+        ) : /* @__PURE__ */ jsx33("li", { className: cn("px-3 py-8 text-center text-muted-foreground"), children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ jsx33(SearchX2, { className: "h-10 w-10 opacity-30 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs28("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx33("span", { className: "font-medium block", children: emptyText }),
+            query && /* @__PURE__ */ jsx33("span", { className: "text-xs opacity-60", children: "Try a different search term" })
+          ] }),
+          query && /* @__PURE__ */ jsxs28("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx33(X11, { className: "w-3 h-3" }),
+            "Clear search"
+          ] })
         ] }) })
       }
     )
   ] });
+  const selectedOptions = value.map((v) => normalizedOptions.find((o) => o.value === v)).filter(Boolean);
+  const visibleTags = maxTagsVisible ? selectedOptions.slice(0, maxTagsVisible) : selectedOptions;
+  const hiddenCount = maxTagsVisible ? Math.max(0, selectedOptions.length - maxTagsVisible) : 0;
   const triggerButton = /* @__PURE__ */ jsxs28(
     "button",
     {
@@ -7483,50 +7740,99 @@ var MultiCombobox = ({
       "aria-haspopup": "listbox",
       "aria-expanded": open,
       "aria-controls": listboxId,
+      "aria-invalid": !!error,
       className: cn(
-        "flex w-full items-center gap-2 rounded-2xl border border-input bg-background shadow-sm min-h-10",
+        "group flex w-full items-center gap-2 rounded-2xl min-h-10 transition-all duration-200",
         "px-3 py-2",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        "disabled:cursor-not-allowed disabled:opacity-50"
+        variantStyles6[variant],
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        open && "ring-2 ring-primary/20 border-primary",
+        !!error && "border-destructive focus-visible:ring-destructive/30"
       ),
       children: [
-        /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1 flex-wrap min-h-6 flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
-          const option = normalizedOptions.find((o) => o.value === itemValue);
-          return /* @__PURE__ */ jsxs28("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded-lg px-2 py-1 text-xs", children: [
-            /* @__PURE__ */ jsx33("span", { className: "truncate max-w-30", children: option ? displayFormat(option) : itemValue }),
-            /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1.5 flex-wrap min-h-6 flex-1", children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs28(Fragment10, { children: [
+          visibleTags.map((option) => {
+            if (renderTag) {
+              return /* @__PURE__ */ jsx33(React27.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
+            }
+            return /* @__PURE__ */ jsxs28(
               "span",
               {
-                role: "button",
-                tabIndex: 0,
-                "aria-label": `Remove ${option ? displayFormat(option) : itemValue}`,
-                onClick: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleRemove(itemValue);
-                },
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleRemove(itemValue);
-                  }
-                },
-                className: "hover:text-destructive transition-colors cursor-pointer select-none",
-                children: "\xD7"
-              }
-            )
-          ] }, itemValue);
-        }) : /* @__PURE__ */ jsxs28("span", { className: "truncate text-sm", children: [
+                className: cn(
+                  "inline-flex items-center gap-1.5 bg-primary/10 text-primary rounded-lg transition-all duration-200",
+                  "hover:bg-primary/20",
+                  sizeStyles8[size].tag
+                ),
+                children: [
+                  showSelectedIcons && option.icon && /* @__PURE__ */ jsx33("span", { className: "shrink-0 w-3.5 h-3.5 flex items-center justify-center", children: option.icon }),
+                  /* @__PURE__ */ jsx33("span", { className: "truncate max-w-24", children: displayFormat(option) }),
+                  /* @__PURE__ */ jsx33(
+                    "span",
+                    {
+                      role: "button",
+                      tabIndex: 0,
+                      "aria-label": `Remove ${displayFormat(option)}`,
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleRemove(option.value);
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleRemove(option.value);
+                        }
+                      },
+                      className: "hover:text-destructive transition-colors cursor-pointer select-none hover:bg-destructive/10 rounded-full p-0.5",
+                      children: /* @__PURE__ */ jsx33(X11, { className: "w-3 h-3" })
+                    }
+                  )
+                ]
+              },
+              option.value
+            );
+          }),
+          hiddenCount > 0 && /* @__PURE__ */ jsxs28("span", { className: cn("inline-flex items-center bg-muted text-muted-foreground rounded-lg", sizeStyles8[size].tag), children: [
+            "+",
+            hiddenCount,
+            " more"
+          ] })
+        ] }) : /* @__PURE__ */ jsxs28("span", { className: "truncate text-sm font-medium", children: [
           value.length,
+          " item",
+          value.length > 1 ? "s" : "",
           " selected"
-        ] }) : /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
-        /* @__PURE__ */ jsx33(
-          ChevronDown2,
-          {
-            className: cn("opacity-50 transition-all duration-200", sizeStyles8[size].icon, open && "rotate-180 scale-110 text-primary opacity-100")
-          }
-        )
+        ] }) : /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: placeholder }) }),
+        /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          showClear && value.length > 0 && /* @__PURE__ */ jsx33(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "Clear all",
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleClearAll();
+              },
+              onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && handleClearAll(),
+              className: "opacity-0 group-hover:opacity-100 transition-all duration-200 p-1 rounded-lg hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
+              children: /* @__PURE__ */ jsx33(X11, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx33(
+            ChevronDown2,
+            {
+              className: cn(
+                "h-4 w-4 text-muted-foreground transition-all duration-300 ease-out",
+                open && "rotate-180 text-primary",
+                !open && "group-hover:text-foreground"
+              )
+            }
+          )
+        ] })
       ]
     }
   );
@@ -7573,7 +7879,18 @@ var MultiCombobox = ({
         contentClassName: "p-0",
         children: dropdownBody
       }
-    )
+    ),
+    (helperText || error) && /* @__PURE__ */ jsxs28("p", { className: cn("text-xs transition-colors duration-200 flex items-center gap-1.5", error ? "text-destructive" : "text-muted-foreground"), children: [
+      error && /* @__PURE__ */ jsx33("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-3.5 h-3.5 shrink-0", children: /* @__PURE__ */ jsx33(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
+          clipRule: "evenodd"
+        }
+      ) }),
+      error || helperText
+    ] })
   ] });
 };
 
@@ -7984,7 +8301,7 @@ Slider.displayName = "Slider";
 // ../../components/ui/OverlayControls.tsx
 import { Dot, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React30 from "react";
-import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 function OverlayControls({
   mode,
   value,
@@ -8207,7 +8524,7 @@ function OverlayControls({
   const handleSliderMouseLeave = () => {
     setPreviewData(null);
   };
-  return /* @__PURE__ */ jsxs31(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs31(Fragment11, { children: [
     keyboardFeedback && /* @__PURE__ */ jsx36(
       "div",
       {
@@ -8417,7 +8734,7 @@ function OverlayControls({
 // ../../components/ui/CategoryTreeSelect.tsx
 import { useState as useState26, useEffect as useEffect16 } from "react";
 import { ChevronRight as ChevronRight5, ChevronDown as ChevronDown3, Check as Check6, FolderTree, Layers } from "lucide-react";
-import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 var defaultLabels = {
   emptyText: "No categories",
   selectedText: (count) => `${count} selected`
@@ -8500,26 +8817,23 @@ function CategoryTreeSelect(props) {
     const hasChildren = children.length > 0;
     const isExpanded = expandedNodes.has(category.id);
     const isSelected = valueArray.includes(category.id);
+    const isParent = level === 0;
     return /* @__PURE__ */ jsxs32("div", { className: "animate-in fade-in-50 duration-200", style: { animationDelay: `${level * 30}ms` }, children: [
       /* @__PURE__ */ jsxs32(
         "div",
         {
           className: cn(
-            "relative flex items-center gap-2.5 px-3 py-2.5 rounded-xl transition-all duration-200",
+            "relative flex items-center gap-2.5 px-3 py-2.5 transition-all duration-200",
+            "border-l-4 border-l-transparent",
+            // Parent level styling
+            isParent && "bg-muted/25 font-medium",
             !viewOnly && "cursor-pointer",
             !viewOnly && !isSelected && "hover:bg-accent/60 hover:shadow-sm",
             // Selected state
-            !viewOnly && isSelected && "bg-linear-to-r from-primary/15 via-primary/10 to-primary/5 shadow-sm"
+            !viewOnly && isSelected && "bg-accent/30 border-l-primary shadow-sm"
           ),
           style: { paddingLeft: `${level * 1.25 + 0.75}rem` },
           children: [
-            !viewOnly && isSelected && /* @__PURE__ */ jsx37(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "absolute left-0 top-2 bottom-2 w-1 rounded-full bg-linear-to-b from-primary to-primary/70 shadow-sm shadow-primary/30"
-              }
-            ),
             hasChildren ? /* @__PURE__ */ jsx37(
               "button",
               {
@@ -8659,7 +8973,7 @@ function CategoryTreeSelect(props) {
         ]
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ jsxs32(Fragment10, { children: [
+    isOpen && !disabled && /* @__PURE__ */ jsxs32(Fragment12, { children: [
       /* @__PURE__ */ jsx37("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
       /* @__PURE__ */ jsx37(
         "div",
@@ -8680,7 +8994,7 @@ function CategoryTreeSelect(props) {
 
 // ../../components/ui/ImageUpload.tsx
 import { useState as useState27, useRef as useRef12, useCallback as useCallback9 } from "react";
-import { Upload, X as X11, Image as ImageIcon, Loader2 as Loader25, Check as Check7 } from "lucide-react";
+import { Upload, X as X12, Image as ImageIcon, Loader2 as Loader25, Check as Check7 } from "lucide-react";
 import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 function ImageUpload({
   onUpload,
@@ -8820,7 +9134,7 @@ function ImageUpload({
       "div",
       {
         className: cn(
-          "relative border-2 border-dashed rounded-xl p-8 text-center transition-all duration-200",
+          "relative border-2 border-dashed rounded-2xl md:rounded-3xl p-8 text-center transition-all duration-200",
           isDragging && !disabled ? "border-primary bg-primary/5 scale-[1.02]" : "border-border hover:border-primary/50",
           disabled && "opacity-50 cursor-not-allowed",
           uploading && "pointer-events-none"
@@ -8829,7 +9143,7 @@ function ImageUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          uploading && /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-xl", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3", children: [
+          uploading && /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-2xl md:rounded-3xl", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsx38(Loader25, { className: "w-6 h-6 animate-spin text-primary" }),
             /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
@@ -8858,7 +9172,7 @@ function ImageUpload({
     ),
     showPreview && uploadedImages.length > 0 && /* @__PURE__ */ jsxs33("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx38("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
-      /* @__PURE__ */ jsx38("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ jsxs33("div", { className: "relative group bg-card border border-border rounded-xl p-3", children: [
+      /* @__PURE__ */ jsx38("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ jsxs33("div", { className: "relative group bg-card border border-border rounded-2xl md:rounded-3xl p-3", children: [
         /* @__PURE__ */ jsx38(
           Button_default,
           {
@@ -8866,7 +9180,7 @@ function ImageUpload({
             size: "icon",
             className: "absolute -top-2 -right-2 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity z-10",
             onClick: () => handleRemoveImage(image.id),
-            children: /* @__PURE__ */ jsx38(X11, { className: "w-3 h-3" })
+            children: /* @__PURE__ */ jsx38(X12, { className: "w-3 h-3" })
           }
         ),
         /* @__PURE__ */ jsxs33("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-lg", previewSizes[previewSize]), children: [
@@ -8903,7 +9217,7 @@ function ImageUpload({
 // ../../components/ui/Carousel.tsx
 import * as React32 from "react";
 import { ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight6 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 function Carousel({
   children,
   autoScroll = true,
@@ -9065,7 +9379,10 @@ function Carousel({
     "div",
     {
       ref: carouselRef,
-      className: cn("relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-2xl", className),
+      className: cn(
+        "relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-2xl md:rounded-3xl",
+        className
+      ),
       onMouseEnter: () => setIsPaused(true),
       onMouseLeave: () => setIsPaused(false),
       role: "region",
@@ -9112,7 +9429,7 @@ function Carousel({
             ))
           }
         ),
-        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs34(Fragment11, { children: [
+        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs34(Fragment13, { children: [
           /* @__PURE__ */ jsx39(
             Button_default,
             {
@@ -9474,7 +9791,7 @@ function FallingIcons({
 // ../../components/ui/List.tsx
 import * as React34 from "react";
 import { ChevronRight as ChevronRight7 } from "lucide-react";
-import { Fragment as Fragment12, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var SIZE_STYLES2 = {
   xs: { label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
   sm: { label: "text-[13px]", desc: "text-[12px]", icon: "h-4 w-4", avatar: "h-8 w-8" },
@@ -9522,12 +9839,12 @@ var ListRoot = React34.forwardRef(
     const hasChildren = childCount > 0;
     const variantClasses2 = {
       plain: "",
-      outlined: "rounded-xl md:rounded-2xl bg-card text-card-foreground border border-border shadow-sm",
-      soft: "rounded-xl bg-muted/40 border border-border/60",
-      bordered: "border border-border rounded-xl",
-      card: "rounded-xl bg-card shadow-md border border-border",
+      outlined: "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm",
+      soft: "rounded-2xl md:rounded-3xl bg-muted/40 border border-border/60",
+      bordered: "border border-border rounded-2xl md:rounded-3xl",
+      card: "rounded-2xl md:rounded-3xl bg-card shadow-md border border-border",
       flush: "",
-      striped: "rounded-xl border border-border overflow-hidden"
+      striped: "rounded-2xl md:rounded-3xl border border-border overflow-hidden"
     };
     if (loading2) {
       return /* @__PURE__ */ jsx41(
@@ -9626,7 +9943,7 @@ var ListItem = React34.forwardRef(
         }
       }
     } : {};
-    const inner = /* @__PURE__ */ jsxs36(Fragment12, { children: [
+    const inner = /* @__PURE__ */ jsxs36(Fragment14, { children: [
       /* @__PURE__ */ jsxs36("div", { className: cn("flex items-center gap-3", contentClassName, "group/item relative"), ...headerProps, children: [
         avatar && /* @__PURE__ */ jsx41("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx41("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
         Left && !avatar && /* @__PURE__ */ jsx41("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx41(Left, { className: cn(sz.icon) }) }),
@@ -9671,7 +9988,7 @@ var List_default = List;
 // ../../components/ui/Watermark.tsx
 import * as React35 from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment13, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
   draft: { text: "DRAFT", color: "rgba(59, 130, 246, 0.15)", rotate: -22, fontSize: 18, fontWeight: "bold" },
@@ -9950,7 +10267,7 @@ var Watermark = ({
     }
   );
   if (fullPage) {
-    return /* @__PURE__ */ jsxs37(Fragment13, { children: [
+    return /* @__PURE__ */ jsxs37(Fragment15, { children: [
       children,
       typeof window !== "undefined" ? createPortal5(overlay, document.body) : null
     ] });
@@ -10240,7 +10557,7 @@ var Timeline_default = Timeline;
 
 // ../../components/ui/ColorPicker.tsx
 import * as React37 from "react";
-import { Pipette, X as X12, Copy, Check as Check8, Palette, History } from "lucide-react";
+import { Pipette, X as X13, Copy, Check as Check8, Palette, History } from "lucide-react";
 import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
 var clamp3 = (n, min, max) => Math.max(min, Math.min(max, n));
 function hexToRgb(hex) {
@@ -10609,7 +10926,7 @@ function ColorPicker({
               onClick: clear,
               className: "ml-auto h-9 px-2 rounded-lg border border-border text-xs hover:bg-destructive/10 transition-colors flex items-center gap-1",
               children: [
-                /* @__PURE__ */ jsx44(X12, { className: "w-3.5 h-3.5" }),
+                /* @__PURE__ */ jsx44(X13, { className: "w-3.5 h-3.5" }),
                 variant === "full" && "Clear"
               ]
             }
@@ -10762,7 +11079,7 @@ function ColorPicker({
 
 // ../../components/ui/Grid.tsx
 import React38, { useId as useId7 } from "react";
-import { Fragment as Fragment14, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
   md: 768,
@@ -10790,14 +11107,14 @@ function joinAreas(areas) {
 }
 function getVariantClasses(variant = "default", outlined) {
   if (outlined) {
-    return "rounded-xl md:rounded-2xl bg-card text-card-foreground border border-border shadow-sm";
+    return "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm";
   }
   const variants = {
     default: "",
-    bordered: "border border-border rounded-xl",
-    card: "rounded-xl md:rounded-2xl bg-card text-card-foreground border border-border shadow-sm",
-    flat: "bg-muted/30 rounded-xl",
-    glass: "bg-background/80 backdrop-blur-sm border border-border/50 rounded-xl shadow-lg"
+    bordered: "border border-border rounded-2xl md:rounded-3xl",
+    card: "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm",
+    flat: "bg-muted/30 rounded-2xl md:rounded-3xl",
+    glass: "bg-background/80 backdrop-blur-sm border border-border/50 rounded-2xl md:rounded-3xl shadow-lg"
   };
   return variants[variant] || "";
 }
@@ -10919,7 +11236,7 @@ var GridItem = React38.forwardRef(
       st.opacity = 0;
       st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
     }
-    return /* @__PURE__ */ jsxs40(Fragment14, { children: [
+    return /* @__PURE__ */ jsxs40(Fragment16, { children: [
       animationDelay != null && /* @__PURE__ */ jsx45(
         "style",
         {
@@ -10932,7 +11249,11 @@ var GridItem = React38.forwardRef(
         "div",
         {
           ref,
-          className: cn(hoverable && "transition-all duration-200 hover:scale-[1.02] hover:shadow-md cursor-pointer", className),
+          className: cn(
+            "rounded-2xl md:rounded-3xl",
+            hoverable && "transition-all duration-200 hover:scale-[1.02] hover:shadow-md cursor-pointer",
+            className
+          ),
           style: st,
           ...rest
         }
@@ -10950,7 +11271,7 @@ import { useMemo as useMemo7, useState as useState34, useRef as useRef14 } from
 // ../../components/ui/ChartTooltip.tsx
 import { useEffect as useEffect20, useState as useState33 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, secondaryValue, items, containerRef }) {
   const [isMounted, setIsMounted] = useState33(false);
   const [position, setPosition] = useState33(null);
@@ -10997,7 +11318,7 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
                   ":"
                 ] }),
                 /* @__PURE__ */ jsx46("span", { className: "font-semibold ml-auto", children: item.value })
-              ] }, i)) }) : /* @__PURE__ */ jsxs41(Fragment15, { children: [
+              ] }, i)) }) : /* @__PURE__ */ jsxs41(Fragment17, { children: [
                 /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
                   color && /* @__PURE__ */ jsx46("div", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: color } }),
                   /* @__PURE__ */ jsx46("span", { className: "font-semibold", children: value })
@@ -11024,7 +11345,7 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
 }
 
 // ../../components/ui/LineChart.tsx
-import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 function LineChart({
   data,
   width = 400,
@@ -11089,7 +11410,7 @@ function LineChart({
     }
     return lines;
   }, [minValue, maxValue, chartHeight, padding.top]);
-  return /* @__PURE__ */ jsxs42(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment18, { children: [
     /* @__PURE__ */ jsxs42("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
       showGrid && /* @__PURE__ */ jsx47("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsxs42("g", { children: [
         /* @__PURE__ */ jsx47("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
@@ -11198,7 +11519,7 @@ function LineChart({
 
 // ../../components/ui/BarChart.tsx
 import { useMemo as useMemo8, useState as useState35, useRef as useRef15 } from "react";
-import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 function BarChart({
   data,
   width = 400,
@@ -11267,12 +11588,12 @@ function BarChart({
     }
     return { maxValue: max, bars: barsData, gridLines: lines };
   }, [data, chartWidth, chartHeight, horizontal, barGap, padding, width, height]);
-  return /* @__PURE__ */ jsxs43(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs43(Fragment19, { children: [
     /* @__PURE__ */ jsxs43("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
-      showGrid && /* @__PURE__ */ jsx48("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx48("g", { children: horizontal ? /* @__PURE__ */ jsxs43(Fragment17, { children: [
+      showGrid && /* @__PURE__ */ jsx48("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx48("g", { children: horizontal ? /* @__PURE__ */ jsxs43(Fragment19, { children: [
         /* @__PURE__ */ jsx48("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ jsx48("text", { x: line.x, y: height - 8, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
-      ] }) : /* @__PURE__ */ jsxs43(Fragment17, { children: [
+      ] }) : /* @__PURE__ */ jsxs43(Fragment19, { children: [
         /* @__PURE__ */ jsx48("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ jsx48("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
       ] }) }, i)) }),
@@ -12310,16 +12631,16 @@ function GaugeChart({
 
 // ../../components/ui/ClientOnly.tsx
 import { useEffect as useEffect21, useState as useState39 } from "react";
-import { Fragment as Fragment18, jsx as jsx54 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx54 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const [hasMounted, setHasMounted] = useState39(false);
   useEffect21(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx54(Fragment18, { children: fallback });
+    return /* @__PURE__ */ jsx54(Fragment20, { children: fallback });
   }
-  return /* @__PURE__ */ jsx54(Fragment18, { children });
+  return /* @__PURE__ */ jsx54(Fragment20, { children });
 }
 
 // ../../components/ui/Loading.tsx
@@ -12465,7 +12786,7 @@ TableCaption.displayName = "TableCaption";
 // ../../components/ui/DataTable.tsx
 import { Filter as FilterIcon } from "lucide-react";
 import React48 from "react";
-import { Fragment as Fragment19, jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
 function useDebounced(value, delay = 300) {
   const [debounced, setDebounced] = React48.useState(value);
   React48.useEffect(() => {
@@ -12723,10 +13044,10 @@ function DataTable({
               isCenterAlign && "justify-center",
               !isRightAlign && !isCenterAlign && "justify-between"
             ),
-            children: isRightAlign ? /* @__PURE__ */ jsxs51(Fragment19, { children: [
+            children: isRightAlign ? /* @__PURE__ */ jsxs51(Fragment21, { children: [
               filterContent,
               titleContent
-            ] }) : /* @__PURE__ */ jsxs51(Fragment19, { children: [
+            ] }) : /* @__PURE__ */ jsxs51(Fragment21, { children: [
               titleContent,
               filterContent
             ] })
@@ -12908,7 +13229,17 @@ function DataTable({
         totalItems
       ] }),
       /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx57(Button_default, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => setCurPage(Math.max(1, curPage - 1)), disabled: curPage === 1, children: /* @__PURE__ */ jsx57("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+        /* @__PURE__ */ jsx57(
+          Button_default,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 w-7 p-0 rounded-full",
+            onClick: () => setCurPage(Math.max(1, curPage - 1)),
+            disabled: curPage === 1,
+            children: /* @__PURE__ */ jsx57("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+          }
+        ),
         (() => {
           const totalPages = Math.ceil(totalItems / curPageSize);
           const pages = [];
@@ -12929,7 +13260,7 @@ function DataTable({
               {
                 onClick: () => setCurPage(p),
                 className: cn(
-                  "h-7 min-w-7 px-1.5 rounded-lg text-xs font-medium transition-colors",
+                  "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors",
                   curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"
                 ),
                 children: p
@@ -12943,7 +13274,7 @@ function DataTable({
           {
             variant: "ghost",
             size: "sm",
-            className: "h-7 w-7 p-0",
+            className: "h-7 w-7 p-0 rounded-full",
             onClick: () => setCurPage(Math.min(Math.ceil(totalItems / curPageSize), curPage + 1)),
             disabled: curPage === Math.ceil(totalItems / curPageSize),
             children: /* @__PURE__ */ jsx57("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
@@ -12960,7 +13291,7 @@ function DataTable({
             setCurPageSize(Number(v));
           },
           size: "sm",
-          className: "w-14 h-7"
+          className: "w-20"
         }
       )
     ] })
@@ -13283,7 +13614,7 @@ function AccessDenied({
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
 import { useEffect as useEffect23, useRef as useRef19, useState as useState40 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-import { Fragment as Fragment20, jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -13334,7 +13665,7 @@ function ThemeToggleHeadless({
         children: /* @__PURE__ */ jsx62(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs56(Fragment20, { children: [
+    isOpen && /* @__PURE__ */ jsxs56(Fragment22, { children: [
       typeof window !== "undefined" && createPortal7(/* @__PURE__ */ jsx62("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal7(
         /* @__PURE__ */ jsx62(
@@ -13386,7 +13717,7 @@ function ThemeToggleHeadless({
 import { useRef as useRef20, useState as useState41 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment21, jsx as jsx63, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx63, jsxs as jsxs57 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -13431,7 +13762,7 @@ function LanguageSwitcherHeadless({
         children: /* @__PURE__ */ jsx63(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs57(Fragment21, { children: [
+    isOpen && /* @__PURE__ */ jsxs57(Fragment23, { children: [
       typeof window !== "undefined" && createPortal8(/* @__PURE__ */ jsx63("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal8(
         /* @__PURE__ */ jsx63(