@underverse-ui/underverse 2.0.2 → 2.0.4

package/dist/index.cjs

@@ -36,17 +36,26 @@ var init_form_control_size = __esm({
   "src/constants/form-control-size.ts"() {
     "use strict";
     formControlSizeStyles = {
+      xs: {
+        control: "h-6 px-2 text-xs leading-none",
+        compactControl: "h-6 px-2 text-xs leading-none",
+        input: "h-6 px-2 text-xs leading-none",
+        label: "text-xs",
+        icon: "h-3.5 w-3.5",
+        iconButton: "h-6 w-6",
+        tag: "h-4 max-w-20 px-1.5 text-[10px] leading-none"
+      },
       sm: {
-        control: "h-8 px-3 text-sm leading-none md:h-7 md:text-xs",
-        compactControl: "h-8 px-2.5 text-sm leading-none md:h-7 md:text-xs",
-        input: "h-8 px-3 text-sm leading-none md:h-7 md:text-xs",
+        control: "h-8 px-3 text-sm leading-none",
+        compactControl: "h-8 px-2.5 text-sm leading-none",
+        input: "h-8 px-3 text-sm leading-none",
         label: "text-xs",
         icon: "h-4 w-4 md:h-3.5 md:w-3.5",
         iconButton: "h-7 w-7 md:h-6 md:w-6",
         tag: "h-5 max-w-24 px-2 text-[10px] leading-none"
       },
       md: {
-        control: "h-10 px-3 text-sm leading-none",
+        control: "h-10 px-4 text-sm leading-none",
         compactControl: "h-10 px-3 text-sm leading-none",
         input: "h-10 px-4 text-sm leading-none",
         label: "text-sm",
@@ -55,13 +64,22 @@ var init_form_control_size = __esm({
         tag: "h-6 max-w-28 px-2 text-xs leading-none"
       },
       lg: {
-        control: "h-12 px-4 text-base leading-none",
+        control: "h-12 px-6 text-base leading-none",
         compactControl: "h-12 px-4 text-base leading-none",
         input: "h-12 px-5 text-base leading-none",
         label: "text-base",
         icon: "h-5 w-5",
         iconButton: "h-10 w-10",
         tag: "h-7 max-w-32 px-2.5 text-sm leading-none"
+      },
+      xl: {
+        control: "h-14 px-8 text-base leading-none",
+        compactControl: "h-14 px-5 text-base leading-none",
+        input: "h-14 px-6 text-base leading-none",
+        label: "text-base",
+        icon: "h-5 w-5",
+        iconButton: "h-12 w-12",
+        tag: "h-8 max-w-36 px-3 text-sm leading-none"
       }
     };
     formControlFixedClass = "min-h-0 overflow-hidden";
@@ -9531,9 +9549,11 @@ var VARIANT_STYLES_BTN = {
   gradient: "bg-linear-to-r from-primary via-primary/80 to-secondary text-primary-foreground hover:opacity-90 shadow-md border-0"
 };
 var SIZE_STYLES_BTN = {
+  xs: `${formControlSizeStyles.xs.control} min-w-6`,
   sm: `${formControlSizeStyles.sm.control} min-w-8`,
-  md: `${formControlSizeStyles.md.input} min-w-10`,
-  lg: `${formControlSizeStyles.lg.input} min-w-12`,
+  md: `${formControlSizeStyles.md.control} min-w-10`,
+  lg: `${formControlSizeStyles.lg.control} min-w-12`,
+  xl: `${formControlSizeStyles.xl.control} min-w-14`,
   smx: "h-9 min-w-9 px-3.5 text-[13px] leading-none md:h-8 md:text-xs",
   icon: "w-11 h-11 p-0 rounded-full flex items-center justify-center md:w-10 md:h-10"
 };
@@ -9577,7 +9597,7 @@ var Button = (0, import_react.forwardRef)(
     const finalVariant = gradient ? "gradient" : variant;
     const variantStyle = VARIANT_STYLES_BTN[finalVariant] || VARIANT_STYLES_BTN.default;
     const sizeStyle = SIZE_STYLES_BTN[size] || SIZE_STYLES_BTN.md;
-    const iconSizeStyle = size === "sm" ? formControlSizeStyles.sm.icon : size === "lg" || size === "icon" ? formControlSizeStyles.lg.icon : formControlSizeStyles.md.icon;
+    const iconSizeStyle = size === "xs" || size === "sm" ? formControlSizeStyles.sm.icon : size === "lg" || size === "xl" || size === "icon" ? formControlSizeStyles.lg.icon : formControlSizeStyles.md.icon;
     const globalConfig = useUnderverseUIConfig();
     const resolvedBorderMode = borderMode ?? globalConfig.button?.borderMode ?? "full";
     const SpinnerIcon = Spinner ?? import_lucide_react.Activity;
@@ -10351,7 +10371,7 @@ var Input = (0, import_react4.forwardRef)(
     const charCount = typeof value === "string" ? value.length : 0;
     const errorId = errMsg && resolvedId ? `${resolvedId}-error` : void 0;
     const descId = !errMsg && (description || hint) && resolvedId ? `${resolvedId}-desc` : void 0;
-    const containerSpacing = size === "sm" ? "space-y-1.5" : "space-y-2";
+    const containerSpacing = size === "xs" || size === "sm" ? "space-y-1.5" : "space-y-2";
     const variantStyles6 = {
       default: {
         container: "bg-background border border-input hover:border-accent-foreground/20",
@@ -10510,8 +10530,8 @@ var Input = (0, import_react4.forwardRef)(
               variantStyles6[variant].container,
               errMsg ? variantStyles6[variant].error : variantStyles6[variant].focus,
               // Reduce visual weight for sm: no default drop shadows
-              size !== "sm" && variant !== "minimal" && "shadow-sm",
-              size !== "sm" && isFocused && "shadow-md",
+              size !== "xs" && size !== "sm" && variant !== "minimal" && "shadow-sm",
+              size !== "xs" && size !== "sm" && isFocused && "shadow-md",
               className
             ),
             disabled,
@@ -10706,9 +10726,11 @@ var NumberInput = (0, import_react4.forwardRef)(
     };
     const inputSize = props.size || "md";
     const stepperSizeStyles = {
+      xs: { width: "w-6", icon: { width: 7, height: 4, path: { up: "M3.5 1L6 3H1L3.5 1Z", down: "M3.5 3L1 1H6L3.5 3Z" } } },
       sm: { width: "w-7", icon: { width: 8, height: 5, path: { up: "M4 1L7 4H1L4 1Z", down: "M4 4L1 1H7L4 4Z" } } },
       md: { width: "w-9", icon: { width: 10, height: 6, path: { up: "M5 1L9 5H1L5 1Z", down: "M5 5L1 1H9L5 5Z" } } },
-      lg: { width: "w-11", icon: { width: 12, height: 7, path: { up: "M6 1L11 6H1L6 1Z", down: "M6 6L1 1H11L6 6Z" } } }
+      lg: { width: "w-11", icon: { width: 12, height: 7, path: { up: "M6 1L11 6H1L6 1Z", down: "M6 6L1 1H11L6 6Z" } } },
+      xl: { width: "w-12", icon: { width: 14, height: 8, path: { up: "M7 1L13 7H1L7 1Z", down: "M7 7L1 1H13L7 7Z" } } }
     };
     const ss = stepperSizeStyles[inputSize];
     const stepperAddon = showSteppers ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("absolute right-0 inset-y-0 flex flex-col border-l border-border/50 rounded-r-full overflow-hidden", ss.width), children: [
@@ -11714,6 +11736,13 @@ var TagInput = (0, import_react10.forwardRef)(
     const visibleTags = hiddenCount > 0 ? value.slice(0, maxVisibleTags) : value;
     const moreLabel = labels?.moreCount?.replace("{count}", String(hiddenCount)) ?? `+${hiddenCount} more`;
     const sizeStyles8 = {
+      xs: {
+        container: formControlSizeStyles.xs.control,
+        input: formControlSizeStyles.xs.label,
+        tag: formControlSizeStyles.xs.tag,
+        tagIcon: "h-2.5 w-2.5",
+        button: "h-6 text-xs px-1.5"
+      },
       sm: {
         container: formControlSizeStyles.sm.control,
         input: formControlSizeStyles.sm.label,
@@ -11734,6 +11763,13 @@ var TagInput = (0, import_react10.forwardRef)(
         tag: formControlSizeStyles.lg.tag,
         tagIcon: "h-4 w-4",
         button: "h-11 text-base px-4"
+      },
+      xl: {
+        container: formControlSizeStyles.xl.control,
+        input: formControlSizeStyles.xl.label,
+        tag: formControlSizeStyles.xl.tag,
+        tagIcon: "h-4 w-4",
+        button: "h-12 text-base px-5"
       }
     };
     const addTag = (tagValue) => {
@@ -14189,19 +14225,25 @@ var Combobox = ({
     return groups;
   }, [renderLimitedOptions, groupBy]);
   const itemSizeStyles = {
+    xs: "px-2 py-1 text-xs gap-1.5",
     sm: "px-2.5 py-1.5 text-xs gap-2",
     md: "px-3 py-2.5 text-sm gap-3",
-    lg: "px-4 py-3 text-base gap-3"
+    lg: "px-4 py-3 text-base gap-3",
+    xl: "px-5 py-3.5 text-base gap-3"
   };
   const iconSizeStyles = {
+    xs: formControlSizeStyles.xs.icon,
     sm: formControlSizeStyles.sm.icon,
     md: formControlSizeStyles.md.icon,
-    lg: formControlSizeStyles.lg.icon
+    lg: formControlSizeStyles.lg.icon,
+    xl: formControlSizeStyles.xl.icon
   };
   const checkIconSizeStyles = {
+    xs: "h-3 w-3",
     sm: "h-3.5 w-3.5",
     md: "h-4 w-4",
-    lg: "h-5 w-5"
+    lg: "h-5 w-5",
+    xl: "h-5 w-5"
   };
   const renderOptionItem = (item, index, virtualItem) => {
     const itemValue = getOptionValue(item);
@@ -14257,7 +14299,7 @@ var Combobox = ({
               ),
               renderOption ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 min-w-0", children: renderOption(item, isSelected) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "block truncate", children: itemLabel }),
-                itemDescription && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("block text-muted-foreground truncate mt-0.5", size === "sm" ? "text-[10px]" : "text-xs"), children: itemDescription })
+                itemDescription && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("block text-muted-foreground truncate mt-0.5", size === "xs" || size === "sm" ? "text-[10px]" : "text-xs"), children: itemDescription })
               ] }),
               isSelected && showSelectedIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "shrink-0 ml-auto", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.Check, { className: cn(checkIconSizeStyles[size], "text-primary") }) })
             ]
@@ -14274,13 +14316,13 @@ var Combobox = ({
       "data-state": open ? "open" : "closed",
       className: cn("w-full overflow-hidden", getPanelBorderRadiusClass(resolvedBorderMode)),
       children: [
-        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("relative border-b border-border/30", size === "sm" ? "p-2" : size === "lg" ? "p-3" : "p-2.5"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
+        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("relative border-b border-border/30", size === "xs" ? "p-1.5" : size === "sm" ? "p-2" : size === "lg" ? "p-3" : size === "xl" ? "p-3.5" : "p-2.5"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_lucide_react15.Search,
             {
               className: cn(
                 "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground/60 transition-colors peer-focus:text-primary",
-                size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4"
+                size === "xs" ? "h-3 w-3" : size === "sm" ? "h-3.5 w-3.5" : size === "lg" || size === "xl" ? "h-5 w-5" : "h-4 w-4"
               )
             }
           ),
@@ -14314,7 +14356,7 @@ var Combobox = ({
               placeholder: searchPlaceholder,
               className: cn(
                 "peer w-full rounded-xl bg-muted/40 pr-3",
-                size === "sm" ? "py-1.5 pl-8 text-xs" : size === "lg" ? "py-3 pl-10 text-base" : "py-2.5 pl-9 text-sm",
+                size === "xs" ? "py-1 pl-7 text-xs" : size === "sm" ? "py-1.5 pl-8 text-xs" : size === "lg" ? "py-3 pl-10 text-base" : size === "xl" ? "py-3.5 pl-10 text-base" : "py-2.5 pl-9 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",
@@ -14332,7 +14374,7 @@ var Combobox = ({
                 scrollVirtualListToStart();
               },
               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__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.X, { className: cn(size === "sm" ? "h-3 w-3" : size === "lg" ? "h-4 w-4" : "h-3.5 w-3.5") })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.X, { className: cn(size === "xs" ? "h-3 w-3" : size === "sm" ? "h-3 w-3" : size === "lg" || size === "xl" ? "h-4 w-4" : "h-3.5 w-3.5") })
             }
           )
         ] }) }),
@@ -14346,7 +14388,7 @@ var Combobox = ({
             "data-os-ignore": virtualized ? "" : void 0,
             className: cn("overflow-y-auto overscroll-contain", (!useOverlayScrollbar || virtualized) && comboboxScrollClassName),
             style: { maxHeight },
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(size === "xs" ? "p-1" : size === "sm" ? "p-1" : size === "lg" || size === "xl" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
               /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText })
             ] }) }) : shouldPromptForSearch ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
@@ -14403,9 +14445,11 @@ var Combobox = ({
     }
   );
   const sizeStyles8 = {
+    xs: formControlSizeStyles.xs.control,
     sm: formControlSizeStyles.sm.control,
     md: formControlSizeStyles.md.control,
-    lg: formControlSizeStyles.lg.control
+    lg: formControlSizeStyles.lg.control,
+    xl: formControlSizeStyles.xl.control
   };
   const variantStyles6 = {
     default: "border border-input bg-background hover:bg-accent/5 hover:border-primary/40",
@@ -14414,7 +14458,7 @@ var Combobox = ({
     filled: "border-0 bg-muted/50 hover:bg-muted/80"
   };
   const labelSize = formControlSizeStyles[size].label;
-  const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
+  const verticalGap = size === "xs" || size === "sm" ? "space-y-1.5" : "space-y-2";
   const dropdownBackgroundStyle = matchTriggerBackground && triggerBackgroundColor ? { backgroundColor: triggerBackgroundColor } : void 0;
   const triggerButtonBaseProps = {
     ref: triggerRef,
@@ -15323,7 +15367,7 @@ var DatePicker = ({
   placeholder,
   className,
   disabled = false,
-  size = "md",
+  size: requestedSize = "md",
   label,
   labelClassName,
   required,
@@ -15335,6 +15379,7 @@ var DatePicker = ({
   maxDate,
   borderMode
 }) => {
+  const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const t = useSmartTranslations("DatePicker");
   const tv = useSmartTranslations("ValidationInput");
   const locale = useSmartLocale();
@@ -15845,6 +15890,7 @@ var DatePicker = ({
               formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
+              formControlSizeStyles[requestedSize].control,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
                 "border-border/60 hover:border-primary/40",
                 "focus-within:ring-2 focus-within:ring-primary/50 focus-within:ring-offset-2 focus-within:ring-offset-background focus-within:border-transparent focus-within:hover:border-transparent",
@@ -15960,10 +16006,11 @@ var DateRangePicker = ({
   disablePastDates = false,
   minDate,
   maxDate,
-  size = "md",
+  size: requestedSize = "md",
   disabled = false,
   borderMode
 }) => {
+  const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const locale = useSmartLocale();
   const t = useSmartTranslations("DatePicker");
   const tv = useSmartTranslations("ValidationInput");
@@ -16601,6 +16648,7 @@ var DateRangePicker = ({
               formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
+              formControlSizeStyles[requestedSize].control,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
                 "border-border/60 hover:border-primary/40",
                 "focus-within:ring-2 focus-within:ring-primary/50 focus-within:ring-offset-2 focus-within:ring-offset-background focus-within:border-transparent focus-within:hover:border-transparent",
@@ -16985,7 +17033,7 @@ var LunarDatePicker = ({
   placeholder,
   className,
   disabled = false,
-  size = "md",
+  size: requestedSize = "md",
   label,
   labelClassName,
   required,
@@ -16997,6 +17045,7 @@ var LunarDatePicker = ({
   maxDate,
   borderMode
 }) => {
+  const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.input?.borderMode ?? globalConfig.borderMode ?? "full";
   const t = useSmartTranslations("DatePicker");
@@ -17545,6 +17594,7 @@ var LunarDatePicker = ({
               formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
+              formControlSizeStyles[requestedSize].control,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
                 "border-border/60 hover:border-primary/40",
                 "focus-within:ring-2 focus-within:ring-primary/50 focus-within:ring-offset-2 focus-within:ring-offset-background focus-within:border-transparent focus-within:hover:border-transparent",
@@ -17666,10 +17716,11 @@ var LunarDateRangePicker = ({
   disablePastDates = false,
   minDate,
   maxDate,
-  size = "md",
+  size: requestedSize = "md",
   disabled = false,
   borderMode
 }) => {
+  const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const locale = useSmartLocale();
   const t = useSmartTranslations("DatePicker");
   const tv = useSmartTranslations("ValidationInput");
@@ -18182,6 +18233,7 @@ var LunarDateRangePicker = ({
               formControlFixedClass,
               getBorderRadiusClass(borderMode ?? "full"),
               sizeStyles8[size].trigger,
+              formControlSizeStyles[requestedSize].control,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
                 "border-border/60 hover:border-primary/40",
                 "focus-within:ring-2 focus-within:ring-primary/50 focus-within:ring-offset-2 focus-within:ring-offset-background focus-within:border-transparent focus-within:hover:border-transparent",
@@ -18687,7 +18739,7 @@ function MonthYearPicker({
   onChange,
   placeholder = "Select month/year",
   disabled = false,
-  size = "md",
+  size: requestedSize = "md",
   label,
   labelClassName,
   required,
@@ -18712,6 +18764,7 @@ function MonthYearPicker({
   borderMode,
   ...rest
 }) {
+  const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.input?.borderMode ?? globalConfig.borderMode ?? "full";
   const gi18n = useGlobalI18n();
@@ -18880,6 +18933,7 @@ function MonthYearPicker({
         "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
         getBorderRadiusClass(resolvedBorderMode),
         sz.control,
+        formControlSizeStyles[requestedSize].control,
         formControlFixedClass,
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -20226,7 +20280,7 @@ function TimePicker({
   onChange,
   placeholder = "Select time",
   disabled = false,
-  size = "md",
+  size: requestedSize = "md",
   label,
   required,
   format = "24",
@@ -20255,6 +20309,7 @@ function TimePicker({
   borderMode,
   ...rest
 }) {
+  const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const tv = useSmartTranslations("ValidationInput");
   const gi18n = useGlobalI18n();
   const globalConfig = useUnderverseUIConfig();
@@ -20601,6 +20656,7 @@ function TimePicker({
         "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
         getBorderRadiusClass(resolvedBorderMode),
         sz.control,
+        formControlSizeStyles[requestedSize].control,
         formControlFixedClass,
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -21086,9 +21142,10 @@ var DateTimePicker = ({
   required,
   doneLabel,
   clearLabel,
-  size = "md",
+  size: requestedSize = "md",
   borderMode
 }) => {
+  const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.input?.borderMode ?? globalConfig.borderMode ?? "full";
   const t = useSmartTranslations("DateTimePicker");
@@ -21293,6 +21350,7 @@ var DateTimePicker = ({
               formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
+              formControlSizeStyles[requestedSize].control,
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               disabled && "opacity-50 cursor-not-allowed",
               !displayValue && "text-muted-foreground",
@@ -24515,6 +24573,13 @@ var MultiCombobox = ({
     }
   }, [maxInitialOptions, normalizedOptions.length, searchMode, virtualized]);
   const sizeStyles8 = {
+    xs: {
+      trigger: formControlSizeStyles.xs.control,
+      icon: formControlSizeStyles.xs.icon,
+      search: "px-7 py-1 text-xs",
+      item: "text-xs px-2 py-1",
+      tag: formControlSizeStyles.xs.tag
+    },
     sm: {
       trigger: formControlSizeStyles.sm.control,
       icon: formControlSizeStyles.sm.icon,
@@ -24535,6 +24600,13 @@ var MultiCombobox = ({
       search: "px-10 py-3 text-base",
       item: "text-base px-3 py-3",
       tag: formControlSizeStyles.lg.tag
+    },
+    xl: {
+      trigger: formControlSizeStyles.xl.control,
+      icon: formControlSizeStyles.xl.icon,
+      search: "px-10 py-3.5 text-base",
+      item: "text-base px-4 py-3.5",
+      tag: formControlSizeStyles.xl.tag
     }
   };
   const variantStyles6 = {
@@ -26978,6 +27050,15 @@ function CategoryTreeSelect(props) {
   }
   const selectedCount = valueArray.length;
   const triggerSizeStyles = {
+    xs: {
+      button: formControlSizeStyles.xs.control,
+      iconWrap: "p-0.5",
+      icon: formControlSizeStyles.xs.icon,
+      text: formControlSizeStyles.xs.label,
+      badge: formControlSizeStyles.xs.tag,
+      actionIcon: formControlSizeStyles.xs.icon,
+      clearIcon: "h-2.5 w-2.5"
+    },
     sm: {
       button: formControlSizeStyles.sm.control,
       iconWrap: "p-1",
@@ -27004,6 +27085,15 @@ function CategoryTreeSelect(props) {
       badge: formControlSizeStyles.lg.tag,
       actionIcon: "w-5 h-5",
       clearIcon: "h-4 w-4"
+    },
+    xl: {
+      button: formControlSizeStyles.xl.control,
+      iconWrap: "p-2",
+      icon: formControlSizeStyles.xl.icon,
+      text: formControlSizeStyles.xl.label,
+      badge: formControlSizeStyles.xl.tag,
+      actionIcon: formControlSizeStyles.xl.icon,
+      clearIcon: "h-4 w-4"
     }
   };
   const triggerVariantStyles = {
@@ -29697,9 +29787,11 @@ var Swatch = ({
   size = "md"
 }) => {
   const sizeClasses2 = {
+    xs: "h-4 w-4",
     sm: "h-5 w-5",
     md: "h-6 w-6",
-    lg: "h-8 w-8"
+    lg: "h-8 w-8",
+    xl: "h-10 w-10"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "button",
@@ -29820,11 +29912,13 @@ function ColorPicker({
   const alphaPct = Math.round(rgba.a * 100);
   const harmony = showHarmony ? getColorHarmony(rgba) : null;
   const sizeClasses2 = {
+    xs: formControlSizeStyles.xs.control,
     sm: formControlSizeStyles.sm.control,
     md: formControlSizeStyles.md.control,
-    lg: formControlSizeStyles.lg.control
+    lg: formControlSizeStyles.lg.control,
+    xl: formControlSizeStyles.xl.control
   };
-  const swatchSize = size === "sm" ? "sm" : size === "lg" ? "lg" : "md";
+  const swatchSize = size;
   const trigger = /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "button",
     {
@@ -30900,7 +30994,7 @@ function DataTableBodyRows({
     idx: virtualRow.index,
     virtualRow
   })).filter((item) => Boolean(item.row)) : displayedData.map((row, idx) => ({ row, idx, virtualRow: void 0 }));
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableRow, { className: "!border-border/10", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
     /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
       /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
       /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -30916,7 +31010,7 @@ function DataTableBodyRows({
       t("loading"),
       "\u2026"
     ] })
-  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableRow, { className: "!border-border/10", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
     virtualPaddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableRow, { "aria-hidden": "true", className: "border-0 hover:bg-transparent hover:shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { colSpan: leafColumns.length, className: "p-0", style: { height: virtualPaddingTop } }) }),
     rowsToRender.map(({ row, idx, virtualRow }) => {
       const isStripedRow = striped && idx % 2 === 0;
@@ -30925,7 +31019,11 @@ function DataTableBodyRows({
         {
           ref: virtualRow ? measureVirtualRow : void 0,
           "data-index": virtualRow?.index,
-          className: cn(densityRowClass, isStripedRow ? "bg-surface-1" : "bg-surface-0"),
+          className: cn(
+            "!border-border/10",
+            densityRowClass,
+            isStripedRow ? "bg-surface-1" : "bg-surface-0"
+          ),
           style: {
             contentVisibility: "auto",
             containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
@@ -31163,60 +31261,82 @@ function DataTableHeader({
       const sortByText = sortByLabel ?? gi18n.sortBy ?? "Sort by";
       const sortLabel = `${sortByText} ${columnLabel}`;
       const useEndIcon = (col.iconPosition ?? "end") === "end";
-      const titleContent = /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("flex items-center gap-1", useEndIcon && "flex-1 justify-between"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title }),
-        col.sortable && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-          Tooltip,
-          {
-            placement: "top",
-            content: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-xs font-medium", children: sortLabel }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-              "button",
+      const titleContent = /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+        "div",
+        {
+          "data-underverse-datatable-header-content": col.key,
+          className: cn(
+            "items-center gap-1",
+            useEndIcon && isCenterAlign ? "grid flex-1 grid-cols-[1fr_auto_1fr]" : "flex",
+            useEndIcon && !isCenterAlign && "flex-1 justify-between"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              "span",
               {
-                type: "button",
-                title: sortLabel,
                 className: cn(
-                  "p-1 rounded-lg transition-all duration-200 hover:bg-foreground/10",
-                  sort?.key === col.key ? "opacity-100 bg-foreground/10" : "opacity-60 hover:opacity-100"
+                  "font-medium whitespace-nowrap select-text",
+                  useEndIcon && isCenterAlign && "col-start-2",
+                  headerTitleClass
                 ),
-                onClick: () => {
-                  setCurPage(1);
-                  setSort((current) => {
-                    if (!current || current.key !== col.key) return { key: col.key, order: "asc" };
-                    if (current.order === "asc") return { key: col.key, order: "desc" };
-                    return null;
-                  });
-                },
-                "aria-label": sortLabel,
-                children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                    "path",
-                    {
-                      d: "M5 7.5l5-5 5 5",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                    "path",
-                    {
-                      d: "M5 12.5l5 5 5-5",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
-                    }
-                  )
-                ] })
+                children: col.title
+              }
+            ),
+            col.sortable && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              Tooltip,
+              {
+                placement: "top",
+                content: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-xs font-medium", children: sortLabel }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    title: sortLabel,
+                    className: cn(
+                      "p-1 rounded-lg transition-all duration-200 hover:bg-foreground/10",
+                      useEndIcon && isCenterAlign && "col-start-3 justify-self-end",
+                      sort?.key === col.key ? "opacity-100 bg-foreground/10" : "opacity-60 hover:opacity-100"
+                    ),
+                    onClick: () => {
+                      setCurPage(1);
+                      setSort((current) => {
+                        if (!current || current.key !== col.key) return { key: col.key, order: "asc" };
+                        if (current.order === "asc") return { key: col.key, order: "desc" };
+                        return null;
+                      });
+                    },
+                    "aria-label": sortLabel,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        "path",
+                        {
+                          d: "M5 7.5l5-5 5 5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        "path",
+                        {
+                          d: "M5 12.5l5 5 5-5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
+                        }
+                      )
+                    ] })
+                  }
+                )
               }
             )
-          }
-        )
-      ] });
+          ]
+        }
+      );
       const filterContent = col.filter ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         Popover,
         {
@@ -31297,7 +31417,7 @@ function DataTableHeader({
       t
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TableRow, { children: row.map((headerCell, cellIndex) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TableRow, { className: "!border-border/10", children: row.map((headerCell, cellIndex) => {
     const { column: col, colSpan, rowSpan, isLeaf } = headerCell;
     const prevCell = cellIndex > 0 ? row[cellIndex - 1] : null;
     const prevCol = prevCell?.column;
@@ -31375,7 +31495,8 @@ function DataTablePagination({
   setCurPage,
   pageSizeOptions,
   setCurPageSize,
-  size
+  size,
+  align
 }) {
   const totalPages = Math.ceil(totalItems / curPageSize);
   const pages = import_react35.default.useMemo(() => {
@@ -31399,60 +31520,72 @@ function DataTablePagination({
   const pageBtnClass = size === "sm" ? "h-6 min-w-6 px-1.5 rounded-full text-[11px] font-medium transition-colors" : size === "lg" ? "h-8 min-w-8 px-2.5 rounded-full text-sm font-medium transition-colors" : "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors";
   const containerTextClass = size === "sm" ? "text-[11px]" : size === "lg" ? "text-sm" : "text-xs";
   const pageSizeClass = size === "sm" ? "w-16" : size === "lg" ? "w-24" : "w-20";
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: cn("flex items-center justify-between gap-2 px-1 pt-3 text-muted-foreground", containerTextClass), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "tabular-nums", children: [
-      (curPage - 1) * curPageSize + 1,
-      "-",
-      Math.min(curPage * curPageSize, totalItems),
-      "/",
-      totalItems
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-        Button_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: cn("relative flex items-center gap-2 px-1 pt-3 text-muted-foreground", containerTextClass), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "tabular-nums", children: [
+        (curPage - 1) * curPageSize + 1,
+        "-",
+        Math.min(curPage * curPageSize, totalItems),
+        "/",
+        totalItems
+      ] }),
+      pageSizeOptions && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        Combobox,
         {
-          variant: "ghost",
-          size: controlButtonSize,
-          className: navBtnClass,
-          onClick: () => setCurPage(Math.max(1, curPage - 1)),
-          disabled: curPage === 1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
-        }
-      ),
-      pages.map(
-        (p, i) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "px-1 text-muted-foreground/60", children: "\u2026" }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-          "button",
-          {
-            onClick: () => setCurPage(p),
-            className: cn(pageBtnClass, curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"),
-            children: p
+          options: pageSizeOptions.map(String),
+          value: String(curPageSize),
+          onChange: (v) => {
+            setCurPage(1);
+            setCurPageSize(Number(v));
           },
-          p
-        )
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-        Button_default,
-        {
-          variant: "ghost",
-          size: controlButtonSize,
-          className: navBtnClass,
-          onClick: () => setCurPage(Math.min(totalPages, curPage + 1)),
-          disabled: curPage === totalPages,
-          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+          size,
+          className: pageSizeClass
         }
       )
     ] }),
-    pageSizeOptions && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-      Combobox,
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+      "div",
       {
-        options: pageSizeOptions.map(String),
-        value: String(curPageSize),
-        onChange: (v) => {
-          setCurPage(1);
-          setCurPageSize(Number(v));
-        },
-        size,
-        className: pageSizeClass
+        className: cn(
+          "flex items-center gap-0.5",
+          align === "center" && "absolute left-1/2 -translate-x-1/2",
+          align === "right" && "ml-auto"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            Button_default,
+            {
+              variant: "ghost",
+              size: controlButtonSize,
+              className: navBtnClass,
+              onClick: () => setCurPage(Math.max(1, curPage - 1)),
+              disabled: curPage === 1,
+              children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          pages.map(
+            (p, i) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "px-1 text-muted-foreground/60", children: "\u2026" }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+              "button",
+              {
+                onClick: () => setCurPage(p),
+                className: cn(pageBtnClass, curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"),
+                children: p
+              },
+              p
+            )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            Button_default,
+            {
+              variant: "ghost",
+              size: controlButtonSize,
+              className: navBtnClass,
+              onClick: () => setCurPage(Math.min(totalPages, curPage + 1)),
+              disabled: curPage === totalPages,
+              children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
+          )
+        ]
       }
     )
   ] });
@@ -32162,6 +32295,7 @@ function DataTable({
   virtualizedRows = false,
   estimatedRowHeight,
   overscan = 8,
+  paginationAlign = "right",
   enableHeaderAutoFit = true,
   labels,
   columnColorGroups,
@@ -32412,7 +32546,8 @@ function DataTable({
         setCurPage,
         pageSizeOptions,
         setCurPageSize,
-        size
+        size,
+        align: paginationAlign
       }
     )
   ] });