@underverse-ui/underverse 1.0.197 → 1.0.199

package/dist/index.cjs

@@ -3112,6 +3112,39 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
 }
 var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
 
+// src/components/form-control-size.ts
+var formControlSizeStyles = {
+  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",
+    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",
+    compactControl: "h-10 px-3 text-sm leading-none",
+    input: "h-10 px-4 text-sm leading-none",
+    label: "text-sm",
+    icon: "h-4 w-4",
+    iconButton: "h-8 w-8",
+    tag: "h-6 max-w-28 px-2 text-xs leading-none"
+  },
+  lg: {
+    control: "h-12 px-4 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"
+  }
+};
+var formControlFixedClass = "min-h-0 overflow-hidden";
+var formControlValueClass = "max-h-full min-w-0 flex-1 truncate whitespace-nowrap";
+
 // src/components/Input.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Input = (0, import_react4.forwardRef)(
@@ -3175,23 +3208,7 @@ var Input = (0, import_react4.forwardRef)(
         error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
       }
     };
-    const sizeStyles8 = {
-      sm: {
-        input: "px-3 py-1.5 text-sm h-8 md:h-7 md:py-1 md:text-xs",
-        icon: "w-4 h-4",
-        button: "h-7 w-7"
-      },
-      md: {
-        input: "px-4 py-2 text-sm h-10",
-        icon: "w-5 h-5",
-        button: "h-8 w-8"
-      },
-      lg: {
-        input: "px-5 py-4 text-base h-12",
-        icon: "w-6 h-6",
-        button: "h-10 w-10"
-      }
-    };
+    const sizeStyles8 = formControlSizeStyles;
     const getErrorKey = (v) => {
       if (v.valueMissing) return "required";
       if (v.typeMismatch) return "typeMismatch";
@@ -3250,7 +3267,7 @@ var Input = (0, import_react4.forwardRef)(
             htmlFor: resolvedId,
             className: cn(
               // Label size follows input size
-              size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+              sizeStyles8[size].label,
               "font-medium transition-colors duration-200",
               // default color and highlight while any descendant focused
               disabled ? "text-muted-foreground" : cn("text-foreground group-focus-within:text-primary", success && "text-primary"),
@@ -3284,7 +3301,7 @@ var Input = (0, import_react4.forwardRef)(
           "div",
           {
             className: cn(
-              "absolute left-3 top-1/2 -translate-y-1/2 z-10",
+              "absolute left-3 top-1/2 -translate-y-1/2 z-10 flex max-h-full items-center overflow-hidden",
               "text-muted-foreground transition-colors duration-200",
               // highlight icon when input (or controls) focused
               "group-focus-within:text-primary"
@@ -3314,6 +3331,7 @@ var Input = (0, import_react4.forwardRef)(
             "aria-describedby": [errorId, descId].filter(Boolean).join(" ") || void 0,
             className: cn(
               "w-full text-foreground transition-all duration-200 ease-out",
+              formControlFixedClass,
               "placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
               "disabled:cursor-not-allowed disabled:opacity-50",
               // Size styles
@@ -3349,7 +3367,7 @@ var Input = (0, import_react4.forwardRef)(
                 "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-md",
                 "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
                 "active:bg-accent active:text-accent-foreground",
-                sizeStyles8[size].button
+                sizeStyles8[size].iconButton
               ),
               tabIndex: 0,
               "aria-label": gi18n.clearInput ?? "Clear input",
@@ -3365,7 +3383,7 @@ var Input = (0, import_react4.forwardRef)(
                 "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-full",
                 "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring/40",
                 "active:bg-accent/50 active:text-accent-foreground",
-                sizeStyles8[size].button
+                sizeStyles8[size].iconButton
               ),
               tabIndex: 0,
               "aria-label": showPassword ? gi18n.hidePassword ?? "Hide password" : gi18n.showPassword ?? "Show password",
@@ -5904,23 +5922,23 @@ var TagInput = (0, import_react10.forwardRef)(
     const moreLabel = labels?.moreCount?.replace("{count}", String(hiddenCount)) ?? `+${hiddenCount} more`;
     const sizeStyles8 = {
       sm: {
-        container: "min-h-8 p-1.5 gap-1",
-        input: "text-xs",
-        tag: "px-1.5 py-0.5 text-xs gap-1 rounded-full",
+        container: formControlSizeStyles.sm.control,
+        input: formControlSizeStyles.sm.label,
+        tag: formControlSizeStyles.sm.tag,
         tagIcon: "h-3 w-3",
         button: "h-7 text-xs px-2"
       },
       md: {
-        container: "min-h-10 p-2 gap-1.5",
-        input: "text-sm",
-        tag: "px-2 py-1 text-sm gap-1.5 rounded-full",
+        container: formControlSizeStyles.md.control,
+        input: formControlSizeStyles.md.label,
+        tag: formControlSizeStyles.md.tag,
         tagIcon: "h-3.5 w-3.5",
         button: "h-9 text-sm px-3"
       },
       lg: {
-        container: "min-h-12 p-2.5 gap-2",
-        input: "text-base",
-        tag: "px-2.5 py-1.5 text-base gap-2 rounded-full",
+        container: formControlSizeStyles.lg.control,
+        input: formControlSizeStyles.lg.label,
+        tag: formControlSizeStyles.lg.tag,
         tagIcon: "h-4 w-4",
         button: "h-11 text-base px-4"
       }
@@ -5991,7 +6009,7 @@ var TagInput = (0, import_react10.forwardRef)(
           htmlFor: inputId,
           className: cn(
             "block font-medium transition-colors duration-200",
-            size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+            formControlSizeStyles[size].label,
             disabled ? "text-muted-foreground" : isFocused ? "text-primary" : "text-foreground",
             labelClassName
           ),
@@ -6012,7 +6030,8 @@ var TagInput = (0, import_react10.forwardRef)(
         {
           onClick: handleContainerClick,
           className: cn(
-            "flex flex-wrap items-center cursor-text",
+            "flex items-center gap-1.5 cursor-text",
+            formControlFixedClass,
             "bg-background border border-input",
             "transition-all duration-200",
             "hover:border-accent-foreground/20",
@@ -6026,13 +6045,13 @@ var TagInput = (0, import_react10.forwardRef)(
               "span",
               {
                 className: cn(
-                  "inline-flex items-center",
+                  "inline-flex min-w-0 shrink-0 items-center gap-1 overflow-hidden rounded-full",
                   "bg-primary/10 text-primary font-mono",
                   "animate-in fade-in-0 zoom-in-95 duration-200",
                   sizeStyles8[size].tag
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "truncate max-w-50", children: tag }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "min-w-0 truncate", children: tag }),
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                     "button",
                     {
@@ -6066,7 +6085,7 @@ var TagInput = (0, import_react10.forwardRef)(
                   setIsExpanded(true);
                 },
                 className: cn(
-                  "inline-flex items-center cursor-pointer",
+                  "inline-flex shrink-0 items-center cursor-pointer overflow-hidden rounded-full",
                   "bg-muted text-muted-foreground hover:bg-muted/80",
                   "transition-colors duration-150",
                   "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
@@ -6085,7 +6104,7 @@ var TagInput = (0, import_react10.forwardRef)(
                   setIsExpanded(false);
                 },
                 className: cn(
-                  "inline-flex items-center cursor-pointer",
+                  "inline-flex shrink-0 items-center cursor-pointer overflow-hidden rounded-full",
                   "bg-muted/50 text-muted-foreground hover:bg-muted/80",
                   "transition-colors duration-150",
                   "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
@@ -6115,7 +6134,7 @@ var TagInput = (0, import_react10.forwardRef)(
                 placeholder: isMaxReached ? `Max ${maxTags} tags` : currentPlaceholder,
                 disabled: disabled || isMaxReached,
                 className: cn(
-                  "flex-1 min-w-30 bg-transparent outline-none",
+                  "h-full min-w-0 flex-1 bg-transparent outline-none",
                   "placeholder:text-muted-foreground",
                   "disabled:cursor-not-allowed",
                   sizeStyles8[size].input
@@ -9111,7 +9130,7 @@ var DropdownMenuSub = ({ label, icon: Icon, disabled, borderMode, children }) =>
     }
   );
 };
-var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className, borderMode }) => {
+var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className, borderMode, size = "md" }) => {
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.dropdownMenu?.borderMode ?? globalConfig.borderMode;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -9121,15 +9140,17 @@ var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", cla
         "button",
         {
           className: cn(
-            "inline-flex items-center justify-between gap-2 px-3 py-2 text-sm border bg-background border-border/60",
+            "inline-flex items-center justify-between gap-2 border bg-background border-border/60",
             resolvedBorderMode ? getBorderRadiusClass(resolvedBorderMode) : "rounded-2xl",
+            formControlFixedClass,
+            formControlSizeStyles[size].control,
             "hover:bg-accent/50",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate max-w-64 text-foreground/90", children: value || placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "opacity-70", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn(formControlValueClass, "max-w-64 text-foreground/90"), children: value || placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "shrink-0 opacity-70", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
           ]
         }
       ),
@@ -9223,7 +9244,8 @@ var Combobox = ({
   searchDebounceMs = 0,
   minSearchLength = 0,
   maxInitialOptions,
-  showSearchPromptWhenEmptyQuery = false
+  showSearchPromptWhenEmptyQuery = false,
+  matchTriggerBackground = false
 }) => {
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
@@ -9238,6 +9260,7 @@ var Combobox = ({
   const [query, setQuery] = React30.useState("");
   const [activeIndex, setActiveIndex] = React30.useState(null);
   const [localRequiredError, setLocalRequiredError] = React30.useState();
+  const [triggerBackgroundColor, setTriggerBackgroundColor] = React30.useState();
   useShadCNAnimations();
   const inputRef = React30.useRef(null);
   const optionsViewportRef = React30.useRef(null);
@@ -9279,6 +9302,12 @@ var Combobox = ({
   });
   const virtualItems = canVirtualize ? optionVirtualizer.getVirtualItems() : [];
   const triggerRef = React30.useRef(null);
+  const updateTriggerBackgroundColor = React30.useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const backgroundColor = window.getComputedStyle(trigger).backgroundColor;
+    setTriggerBackgroundColor((current) => current === backgroundColor ? current : backgroundColor);
+  }, []);
   const scrollVirtualListToIndex = React30.useCallback((index) => {
     if (!canVirtualize || renderLimitedOptions.length === 0) return;
     optionVirtualizer.scrollToIndex(index, { align: "auto" });
@@ -9333,6 +9362,19 @@ var Combobox = ({
       );
     }
   }, [maxInitialOptions, options.length, searchMode, virtualized]);
+  React30.useLayoutEffect(() => {
+    if (!open || !matchTriggerBackground) {
+      setTriggerBackgroundColor(void 0);
+      return void 0;
+    }
+    let raf = 0;
+    const tick = () => {
+      updateTriggerBackgroundColor();
+      raf = window.requestAnimationFrame(tick);
+    };
+    tick();
+    return () => window.cancelAnimationFrame(raf);
+  }, [matchTriggerBackground, open, updateTriggerBackgroundColor]);
   const selectedOption = findOptionByValue(options, value) ?? (selectedOptionProp && getOptionValue(selectedOptionProp) === value ? selectedOptionProp : void 0);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
   const selectedIcon = selectedOption ? getOptionIcon(selectedOption) : void 0;
@@ -9359,9 +9401,9 @@ var Combobox = ({
     lg: "px-4 py-3 text-base gap-3"
   };
   const iconSizeStyles = {
-    sm: "w-4 h-4",
-    md: "w-5 h-5",
-    lg: "w-6 h-6"
+    sm: formControlSizeStyles.sm.icon,
+    md: formControlSizeStyles.md.icon,
+    lg: formControlSizeStyles.lg.icon
   };
   const checkIconSizeStyles = {
     sm: "h-3.5 w-3.5",
@@ -9568,9 +9610,9 @@ var Combobox = ({
     }
   );
   const sizeStyles8 = {
-    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"
+    sm: formControlSizeStyles.sm.control,
+    md: formControlSizeStyles.md.control,
+    lg: formControlSizeStyles.lg.control
   };
   const variantStyles6 = {
     default: "border border-input bg-background hover:bg-accent/5 hover:border-primary/40",
@@ -9578,8 +9620,9 @@ var Combobox = ({
     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 labelSize = formControlSizeStyles[size].label;
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
+  const dropdownBackgroundStyle = matchTriggerBackground && triggerBackgroundColor ? { backgroundColor: triggerBackgroundColor } : void 0;
   const triggerButtonBaseProps = {
     ref: triggerRef,
     type: "button",
@@ -9603,7 +9646,8 @@ var Combobox = ({
       }
     },
     className: cn(
-      "group flex w-full items-center justify-between px-3 transition-all duration-200",
+      "group flex w-full items-center justify-between transition-all duration-200",
+      formControlFixedClass,
       radiusClass,
       sizeStyles8[size],
       variantStyles6[variant],
@@ -9615,8 +9659,8 @@ var Combobox = ({
     )
   };
   const triggerContents = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "shrink-0 w-5 h-5 mr-2 flex items-center justify-center text-primary", children: selectedIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("flex-1 truncate text-left", !displayValue && "text-muted-foreground", fontBold && "font-semibold"), children: renderValue && selectedOption ? renderValue(selectedOption) : displayValue || placeholder }),
+    selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("mr-2 flex shrink-0 items-center justify-center overflow-hidden text-primary", formControlSizeStyles[size].icon), children: selectedIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn(formControlValueClass, "text-left", !displayValue && "text-muted-foreground", fontBold && "font-semibold"), children: renderValue && selectedOption ? renderValue(selectedOption) : displayValue || placeholder }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 shrink-0", children: [
       allowClear && value && !disabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
@@ -9712,11 +9756,19 @@ var Combobox = ({
         className: "z-50",
         borderMode: resolvedBorderMode,
         contentClassName: "p-0 overflow-hidden",
+        contentProps: { style: dropdownBackgroundStyle },
         children: dropdownBody
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
       triggerButtonInline,
-      open && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("overflow-hidden border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", getPanelBorderRadiusClass(resolvedBorderMode)), children: dropdownBody }) })
+      open && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "div",
+        {
+          style: dropdownBackgroundStyle,
+          className: cn("overflow-hidden border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", getPanelBorderRadiusClass(resolvedBorderMode)),
+          children: dropdownBody
+        }
+      ) })
     ] }),
     (helperText || effectiveError) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "p",
@@ -10582,7 +10634,7 @@ var DatePicker = ({
   useShadCNAnimations();
   const sizeStyles8 = {
     sm: {
-      trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
+      trigger: formControlSizeStyles.sm.compactControl,
       dayCell: "w-7 h-7 text-xs",
       monthCell: "w-6 h-6 text-xs",
       navButton: "p-1.5",
@@ -10593,13 +10645,13 @@ var DatePicker = ({
       actionIcon: "w-2.5 h-2.5",
       contentWidth: 240,
       contentPadding: "p-4",
-      label: "text-xs",
+      label: formControlSizeStyles.sm.label,
       weekdayLabel: "text-[9px] py-1",
       headerMargin: "mb-2",
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-10",
+      trigger: formControlSizeStyles.md.control,
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -10610,13 +10662,13 @@ var DatePicker = ({
       actionIcon: "w-3.5 h-3.5",
       contentWidth: 280,
       contentPadding: "p-5",
-      label: "text-sm",
+      label: formControlSizeStyles.md.label,
       weekdayLabel: "text-[10px] py-1.5",
       headerMargin: "mb-4",
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-12",
+      trigger: formControlSizeStyles.lg.control,
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -10627,7 +10679,7 @@ var DatePicker = ({
       actionIcon: "w-4 h-4",
       contentWidth: 340,
       contentPadding: "p-6",
-      label: "text-base",
+      label: formControlSizeStyles.lg.label,
       weekdayLabel: "text-xs py-2",
       headerMargin: "mb-5",
       footerMargin: "mt-5 pt-4 gap-2.5"
@@ -10985,6 +11037,7 @@ var DatePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
@@ -10998,7 +11051,7 @@ var DatePicker = ({
               className
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2.5 flex-1 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                   "div",
                   {
@@ -11030,7 +11083,7 @@ var DatePicker = ({
                         e.stopPropagation();
                       }
                     },
-                    className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
+                    className: "h-full min-w-0 flex-1 truncate bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60"
                   }
                 )
               ] }),
@@ -11267,7 +11320,7 @@ var DateRangePicker = ({
   };
   const sizeStyles8 = {
     sm: {
-      trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
+      trigger: formControlSizeStyles.sm.compactControl,
       dayCell: "w-7 h-7 text-xs",
       monthCell: "w-6 h-6 text-xs",
       navButton: "p-1.5",
@@ -11278,13 +11331,13 @@ var DateRangePicker = ({
       actionIcon: "w-2.5 h-2.5",
       contentWidth: 240,
       contentPadding: "p-4",
-      label: "text-xs",
+      label: formControlSizeStyles.sm.label,
       weekdayLabel: "text-[9px] py-1",
       headerMargin: "mb-2",
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-10",
+      trigger: formControlSizeStyles.md.control,
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -11295,13 +11348,13 @@ var DateRangePicker = ({
       actionIcon: "w-3.5 h-3.5",
       contentWidth: 280,
       contentPadding: "p-5",
-      label: "text-sm",
+      label: formControlSizeStyles.md.label,
       weekdayLabel: "text-[10px] py-1.5",
       headerMargin: "mb-4",
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-12",
+      trigger: formControlSizeStyles.lg.control,
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -11312,7 +11365,7 @@ var DateRangePicker = ({
       actionIcon: "w-4 h-4",
       contentWidth: 340,
       contentPadding: "p-6",
-      label: "text-base",
+      label: formControlSizeStyles.lg.label,
       weekdayLabel: "text-xs py-2",
       headerMargin: "mb-5",
       footerMargin: "mt-5 pt-4 gap-2.5"
@@ -11739,6 +11792,7 @@ var DateRangePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
@@ -11751,7 +11805,7 @@ var DateRangePicker = ({
               effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("flex items-center flex-1 min-w-0", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("flex min-h-0 min-w-0 flex-1 items-center overflow-hidden", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                   "div",
                   {
@@ -11783,11 +11837,11 @@ var DateRangePicker = ({
                         e.stopPropagation();
                       }
                     },
-                    className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
+                    className: "h-full min-w-0 flex-1 truncate bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60"
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("shrink-0 transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
             ]
           }
         ),
@@ -12237,7 +12291,7 @@ var LunarDatePicker = ({
   useShadCNAnimations();
   const sizeStyles8 = {
     sm: {
-      trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
+      trigger: formControlSizeStyles.sm.compactControl,
       dayCell: "w-7 h-7 text-xs",
       monthCell: "w-6 h-6 text-xs",
       navButton: "p-1.5",
@@ -12248,13 +12302,13 @@ var LunarDatePicker = ({
       actionIcon: "w-2.5 h-2.5",
       contentWidth: 240,
       contentPadding: "p-4",
-      label: "text-xs",
+      label: formControlSizeStyles.sm.label,
       weekdayLabel: "text-[9px] py-1",
       headerMargin: "mb-2",
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-10",
+      trigger: formControlSizeStyles.md.control,
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -12265,13 +12319,13 @@ var LunarDatePicker = ({
       actionIcon: "w-3.5 h-3.5",
       contentWidth: 280,
       contentPadding: "p-5",
-      label: "text-sm",
+      label: formControlSizeStyles.md.label,
       weekdayLabel: "text-[10px] py-1.5",
       headerMargin: "mb-4",
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-12",
+      trigger: formControlSizeStyles.lg.control,
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -12282,7 +12336,7 @@ var LunarDatePicker = ({
       actionIcon: "w-4 h-4",
       contentWidth: 340,
       contentPadding: "p-6",
-      label: "text-base",
+      label: formControlSizeStyles.lg.label,
       weekdayLabel: "text-xs py-2",
       headerMargin: "mb-5",
       footerMargin: "mt-5 pt-4 gap-2.5"
@@ -12671,6 +12725,7 @@ var LunarDatePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
@@ -12684,7 +12739,7 @@ var LunarDatePicker = ({
               className
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2.5 flex-1 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   "div",
                   {
@@ -12716,7 +12771,7 @@ var LunarDatePicker = ({
                         e.stopPropagation();
                       }
                     },
-                    className: "w-full bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60 min-w-0"
+                    className: "h-full min-w-0 flex-1 truncate bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60"
                   }
                 )
               ] }),
@@ -12800,7 +12855,7 @@ var LunarDateRangePicker = ({
   const wheelDeltaRef = React35.useRef(0);
   const sizeStyles8 = {
     sm: {
-      trigger: "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1",
+      trigger: formControlSizeStyles.sm.compactControl,
       dayCell: "w-7 h-7 text-xs",
       monthCell: "w-6 h-6 text-xs",
       navButton: "p-1.5",
@@ -12811,13 +12866,13 @@ var LunarDateRangePicker = ({
       actionIcon: "w-2.5 h-2.5",
       contentWidth: 240,
       contentPadding: "p-4",
-      label: "text-xs",
+      label: formControlSizeStyles.sm.label,
       weekdayLabel: "text-[9px] py-1",
       headerMargin: "mb-2",
       footerMargin: "mt-3 pt-2 gap-1.5"
     },
     md: {
-      trigger: "px-3 py-2.5 text-sm h-10",
+      trigger: formControlSizeStyles.md.control,
       dayCell: "w-8 h-8 text-sm",
       monthCell: "w-8 h-8 text-sm",
       navButton: "p-2",
@@ -12828,13 +12883,13 @@ var LunarDateRangePicker = ({
       actionIcon: "w-3.5 h-3.5",
       contentWidth: 280,
       contentPadding: "p-5",
-      label: "text-sm",
+      label: formControlSizeStyles.md.label,
       weekdayLabel: "text-[10px] py-1.5",
       headerMargin: "mb-4",
       footerMargin: "mt-4 pt-3 gap-2"
     },
     lg: {
-      trigger: "px-4 py-3 text-base h-12",
+      trigger: formControlSizeStyles.lg.control,
       dayCell: "w-10 h-10 text-base",
       monthCell: "w-10 h-10 text-base",
       navButton: "p-2.5",
@@ -12845,7 +12900,7 @@ var LunarDateRangePicker = ({
       actionIcon: "w-4 h-4",
       contentWidth: 340,
       contentPadding: "p-6",
-      label: "text-base",
+      label: formControlSizeStyles.lg.label,
       weekdayLabel: "text-xs py-2",
       headerMargin: "mb-5",
       footerMargin: "mt-5 pt-4 gap-2.5"
@@ -13292,6 +13347,7 @@ var LunarDateRangePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
               getBorderRadiusClass(borderMode ?? "full"),
               sizeStyles8[size].trigger,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
@@ -13304,7 +13360,7 @@ var LunarDateRangePicker = ({
               effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("flex items-center flex-1 min-w-0", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("flex min-h-0 min-w-0 flex-1 items-center overflow-hidden", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   "div",
                   {
@@ -13315,9 +13371,9 @@ var LunarDateRangePicker = ({
                     children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react18.Calendar, { className: cn("transition-transform duration-300", sizeStyles8[size].calendarIcon, isOpen && "scale-110") })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("w-full truncate font-medium", !tempStart && "text-muted-foreground/60"), children: tempStart ? displayLabel : placeholder })
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("min-w-0 flex-1 truncate whitespace-nowrap font-medium", !tempStart && "text-muted-foreground/60"), children: tempStart ? displayLabel : placeholder })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("shrink-0 transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
             ]
           }
         ),
@@ -13945,9 +14001,9 @@ function MonthYearPicker({
     setOpen(false);
   };
   const sizeClasses2 = {
-    sm: { label: "text-xs", height: "h-8", padding: "px-2.5 py-1.5", text: "text-xs", icon: "w-3.5 h-3.5" },
-    md: { label: "text-sm", height: "h-10", padding: "px-3 py-2", text: "text-sm", icon: "w-4 h-4" },
-    lg: { label: "text-base", height: "h-12", padding: "px-4 py-3", text: "text-base", icon: "w-5 h-5" }
+    sm: { label: formControlSizeStyles.sm.label, control: formControlSizeStyles.sm.compactControl, icon: formControlSizeStyles.sm.icon },
+    md: { label: formControlSizeStyles.md.label, control: formControlSizeStyles.md.control, icon: formControlSizeStyles.md.icon },
+    lg: { label: formControlSizeStyles.lg.label, control: formControlSizeStyles.lg.control, icon: formControlSizeStyles.lg.icon }
   };
   const panelSizeClasses = {
     sm: { contentPadding: "p-4", stackGap: "space-y-3", displayText: "text-lg", actionText: "text-[11px]", actionPadding: "px-3 py-2" },
@@ -13975,9 +14031,8 @@ function MonthYearPicker({
       className: cn(
         "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
         getBorderRadiusClass(resolvedBorderMode),
-        sz.height,
-        sz.padding,
-        sz.text,
+        sz.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",
         "transition-all duration-300 ease-out",
@@ -13989,7 +14044,7 @@ function MonthYearPicker({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "div",
             {
@@ -14003,7 +14058,7 @@ function MonthYearPicker({
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "span",
             {
-              className: cn("min-w-0 truncate font-medium transition-colors duration-200", !hasValue && "text-muted-foreground", hasValue && "text-foreground"),
+              className: cn(formControlValueClass, "font-medium transition-colors duration-200", !hasValue && "text-muted-foreground", hasValue && "text-foreground"),
               children: hasValue ? display : placeholder
             }
           )
@@ -15661,9 +15716,9 @@ function TimePicker({
     }
   };
   const sizeClasses2 = {
-    sm: { label: "text-xs", height: "h-8", padding: "px-2.5 py-1.5", text: "text-xs", icon: "w-3.5 h-3.5" },
-    md: { label: "text-sm", height: "h-10", padding: "px-3 py-2", text: "text-sm", icon: "w-4 h-4" },
-    lg: { label: "text-base", height: "h-12", padding: "px-4 py-3", text: "text-base", icon: "w-5 h-5" }
+    sm: { label: formControlSizeStyles.sm.label, control: formControlSizeStyles.sm.compactControl, icon: formControlSizeStyles.sm.icon },
+    md: { label: formControlSizeStyles.md.label, control: formControlSizeStyles.md.control, icon: formControlSizeStyles.md.icon },
+    lg: { label: formControlSizeStyles.lg.label, control: formControlSizeStyles.lg.control, icon: formControlSizeStyles.lg.icon }
   };
   const sz = sizeClasses2[size];
   const effectivePanelSize = variant === "compact" ? size === "lg" ? "md" : "sm" : size;
@@ -15686,9 +15741,8 @@ function TimePicker({
       className: cn(
         "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
         getBorderRadiusClass(resolvedBorderMode),
-        sz.height,
-        sz.padding,
-        sz.text,
+        sz.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",
         "transition-all duration-300 ease-out",
@@ -15700,7 +15754,7 @@ function TimePicker({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "div",
             {
@@ -15715,7 +15769,8 @@ function TimePicker({
             "span",
             {
               className: cn(
-                "min-w-0 truncate font-medium transition-colors duration-200",
+                formControlValueClass,
+                "font-medium transition-colors duration-200",
                 !hasCommittedValue && "text-muted-foreground",
                 hasCommittedValue ? "text-foreground" : ""
               ),
@@ -16179,9 +16234,9 @@ var DateTimePicker = ({
   const [localRequiredError, setLocalRequiredError] = React39.useState();
   const sizeStyles8 = {
     sm: {
-      trigger: "h-8 px-2.5 py-1.5 text-sm md:h-7 md:text-xs",
-      icon: "h-3.5 w-3.5",
-      label: "text-xs",
+      trigger: formControlSizeStyles.sm.compactControl,
+      icon: formControlSizeStyles.sm.icon,
+      label: formControlSizeStyles.sm.label,
       buttonSize: "sm",
       calendarSize: "sm",
       timePickerSize: "sm",
@@ -16189,9 +16244,9 @@ var DateTimePicker = ({
       gap: "gap-2"
     },
     md: {
-      trigger: "h-10 px-3 py-2 text-sm",
-      icon: "h-4 w-4",
-      label: "text-sm",
+      trigger: formControlSizeStyles.md.control,
+      icon: formControlSizeStyles.md.icon,
+      label: formControlSizeStyles.md.label,
       buttonSize: "sm",
       calendarSize: "md",
       timePickerSize: "md",
@@ -16199,9 +16254,9 @@ var DateTimePicker = ({
       gap: "gap-3"
     },
     lg: {
-      trigger: "h-12 px-4 py-3 text-base",
-      icon: "h-5 w-5",
-      label: "text-base",
+      trigger: formControlSizeStyles.lg.control,
+      icon: formControlSizeStyles.lg.icon,
+      label: formControlSizeStyles.lg.label,
       buttonSize: "md",
       calendarSize: "lg",
       timePickerSize: "lg",
@@ -16351,6 +16406,7 @@ var DateTimePicker = ({
             "aria-invalid": !!effectiveError,
             className: cn(
               "flex w-full items-center justify-between border border-input bg-background",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles8[size].trigger,
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -16359,7 +16415,7 @@ var DateTimePicker = ({
               effectiveError && "border-destructive/60 bg-destructive/5"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: displayValue || placeholder || "Select date & time" }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: cn(formControlValueClass, "text-left"), children: displayValue || placeholder || "Select date & time" }),
               /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex shrink-0 items-center gap-2 text-muted-foreground", children: [
                 value && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                   "span",
@@ -19557,25 +19613,25 @@ var MultiCombobox = ({
   }, [maxInitialOptions, normalizedOptions.length, searchMode, virtualized]);
   const sizeStyles8 = {
     sm: {
-      trigger: "h-8 px-3 py-1.5 text-sm md:h-7 md:text-xs",
-      icon: "h-4 w-4",
+      trigger: formControlSizeStyles.sm.control,
+      icon: formControlSizeStyles.sm.icon,
       search: "px-8 py-1.5 text-xs",
       item: "text-xs px-3 py-1.5",
-      tag: "px-2 py-0.5 text-[10px]"
+      tag: formControlSizeStyles.sm.tag
     },
     md: {
-      trigger: "h-10 px-4 py-2 text-sm",
-      icon: "h-4 w-4",
+      trigger: formControlSizeStyles.md.control,
+      icon: formControlSizeStyles.md.icon,
       search: "px-10 py-2 text-sm",
       item: "text-sm px-3 py-2",
-      tag: "px-2 py-1 text-xs"
+      tag: formControlSizeStyles.md.tag
     },
     lg: {
-      trigger: "h-12 px-5 py-3 text-base",
-      icon: "h-5 w-5",
+      trigger: formControlSizeStyles.lg.control,
+      icon: formControlSizeStyles.lg.icon,
       search: "px-10 py-3 text-base",
       item: "text-base px-3 py-3",
-      tag: "px-2.5 py-1 text-sm"
+      tag: formControlSizeStyles.lg.tag
     }
   };
   const variantStyles6 = {
@@ -19586,7 +19642,7 @@ var MultiCombobox = ({
   const autoId = (0, import_react24.useId)();
   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 labelSize = formControlSizeStyles[size].label;
   const listboxId = `${resolvedId}-listbox`;
   const renderOptionItem = (item, index, virtualItem) => {
     const isSelected = value.includes(item.value);
@@ -19810,6 +19866,7 @@ var MultiCombobox = ({
       "aria-invalid": !!effectiveError,
       className: cn(
         "group flex w-full items-center gap-2 transition-all duration-200",
+        formControlFixedClass,
         getBorderRadiusClass(resolvedBorderMode),
         sizeStyles8[size].trigger,
         variantStyles6[variant],
@@ -19819,22 +19876,22 @@ var MultiCombobox = ({
         !!effectiveError && "border-destructive focus-visible:ring-destructive/30"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: cn("flex items-center gap-1.5 flex-1 overflow-hidden", size === "sm" ? "min-h-4" : size === "lg" ? "min-h-8" : "min-h-6"), children: value.length > 0 ? showTags ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: value.length > 0 ? showTags ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
           visibleTags.map((option) => {
             if (renderTag) {
-              return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(React46.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
+              return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "inline-flex max-h-full min-w-0 shrink overflow-hidden", children: renderTag(option, () => handleRemove(option.value)) }, option.value);
             }
             return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
               "span",
               {
                 className: cn(
-                  "inline-flex items-center gap-1.5 bg-primary/10 text-primary rounded-full transition-all duration-200 min-w-0",
+                  "inline-flex min-w-0 shrink-0 items-center gap-1.5 overflow-hidden rounded-full bg-primary/10 text-primary transition-all duration-200",
                   "hover:bg-primary/20",
                   sizeStyles8[size].tag
                 ),
                 children: [
                   showSelectedIcons && option.icon && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "shrink-0 w-3.5 h-3.5 flex items-center justify-center", children: option.icon }),
-                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "truncate max-w-24", children: displayFormat(option) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "min-w-0 truncate", children: displayFormat(option) }),
                   /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                     "span",
                     {
@@ -19863,7 +19920,7 @@ var MultiCombobox = ({
             );
           }),
           hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn("inline-flex items-center bg-muted text-muted-foreground rounded-lg shrink-0", sizeStyles8[size].tag), children: gi18n.moreCount ? gi18n.moreCount(hiddenCount) : `+${hiddenCount} more` })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "truncate text-sm font-medium", children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-muted-foreground", children: placeholder }) }),
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "text-muted-foreground"), children: placeholder }) }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-1.5 shrink-0", children: [
           showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "div",
@@ -21837,29 +21894,29 @@ function CategoryTreeSelect(props) {
   const selectedCount = valueArray.length;
   const triggerSizeStyles = {
     sm: {
-      button: "h-8 px-3 py-1.5 text-sm md:h-7 md:text-xs",
+      button: formControlSizeStyles.sm.control,
       iconWrap: "p-1",
-      icon: "w-3.5 h-3.5 md:w-3 md:h-3",
-      text: "text-xs md:text-[11px]",
-      badge: "px-1.5 py-0.5 text-[10px]",
-      actionIcon: "w-3.5 h-3.5",
+      icon: formControlSizeStyles.sm.icon,
+      text: formControlSizeStyles.sm.label,
+      badge: formControlSizeStyles.sm.tag,
+      actionIcon: formControlSizeStyles.sm.icon,
       clearIcon: "h-3 w-3"
     },
     md: {
-      button: "h-10 px-3 py-2.5 text-sm",
+      button: formControlSizeStyles.md.control,
       iconWrap: "p-1.5",
       icon: "w-4 h-4",
-      text: "text-sm",
-      badge: "px-2 py-0.5 text-xs",
+      text: formControlSizeStyles.md.label,
+      badge: formControlSizeStyles.md.tag,
       actionIcon: "w-4 h-4",
       clearIcon: "h-3.5 w-3.5"
     },
     lg: {
-      button: "h-12 px-4 py-3 text-base",
+      button: formControlSizeStyles.lg.control,
       iconWrap: "p-1.5",
       icon: "w-5 h-5",
-      text: "text-base",
-      badge: "px-2.5 py-1 text-sm",
+      text: formControlSizeStyles.lg.label,
+      badge: formControlSizeStyles.lg.tag,
       actionIcon: "w-5 h-5",
       clearIcon: "h-4 w-4"
     }
@@ -21981,6 +22038,7 @@ function CategoryTreeSelect(props) {
             },
             className: cn(
               "group flex w-full items-center justify-between transition-all duration-200",
+              formControlFixedClass,
               getBorderRadiusClass(resolvedBorderMode ?? "full"),
               "backdrop-blur-sm",
               triggerSizeStyles[size].button,
@@ -21991,7 +22049,7 @@ function CategoryTreeSelect(props) {
               effectiveError && "border-destructive focus-visible:ring-destructive/30"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden text-left", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                   "div",
                   {
@@ -22007,7 +22065,8 @@ function CategoryTreeSelect(props) {
                   "span",
                   {
                     className: cn(
-                      "min-w-0 flex-1 truncate font-medium transition-colors duration-200",
+                      formControlValueClass,
+                      "font-medium transition-colors duration-200",
                       triggerSizeStyles[size].text,
                       selectedCount === 0 ? "text-muted-foreground" : "text-foreground"
                     ),
@@ -22031,7 +22090,7 @@ function CategoryTreeSelect(props) {
                     children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { className: triggerSizeStyles[size].clearIcon })
                   }
                 ),
-                selectedCount > 0 && !singleSelect && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("rounded-full bg-primary/15 font-bold text-primary", triggerSizeStyles[size].badge), children: selectedCount }),
+                selectedCount > 0 && !singleSelect && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/15 font-bold text-primary", triggerSizeStyles[size].badge), children: selectedCount }),
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.ChevronDown, { className: triggerSizeStyles[size].actionIcon }) })
               ] })
             ]
@@ -24659,9 +24718,9 @@ function ColorPicker({
   const alphaPct = Math.round(rgba.a * 100);
   const harmony = showHarmony ? getColorHarmony(rgba) : null;
   const sizeClasses2 = {
-    sm: "h-8 text-xs",
-    md: "h-10 text-sm",
-    lg: "h-12 text-base"
+    sm: formControlSizeStyles.sm.control,
+    md: formControlSizeStyles.md.control,
+    lg: formControlSizeStyles.lg.control
   };
   const swatchSize = size === "sm" ? "sm" : size === "lg" ? "lg" : "md";
   const trigger = /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
@@ -24670,16 +24729,17 @@ function ColorPicker({
       type: "button",
       disabled,
       className: cn(
-        "w-full px-3 border border-input bg-background flex items-center justify-between",
+        "w-full border border-input bg-background flex items-center justify-between",
         getBorderRadiusClass(resolvedBorderMode),
         sizeClasses2[size],
+        formControlFixedClass,
         "hover:border-accent-foreground/30 transition-colors",
         disabled && "opacity-50 cursor-not-allowed",
         triggerClassName
       ),
       "aria-label": gi18n.openColorPicker ?? "Open color picker",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             "span",
             {
@@ -24687,9 +24747,9 @@ function ColorPicker({
               style: { backgroundColor: withAlpha ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` : hexForInput }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "font-mono text-muted-foreground", children: text })
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: cn(formControlValueClass, "font-mono text-muted-foreground"), children: text })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react35.Pipette, { className: cn(size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-5 h-5" : "w-4 h-4", "text-muted-foreground") })
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react35.Pipette, { className: cn(formControlSizeStyles[size].icon, "shrink-0 text-muted-foreground") })
       ]
     }
   );
@@ -37581,7 +37641,7 @@ function findDiffEnd(a, b, posA, posB) {
     posB -= size;
   }
 }
-var Fragment32 = class _Fragment {
+var Fragment31 = class _Fragment {
   /**
   @internal
   */
@@ -37873,7 +37933,7 @@ var Fragment32 = class _Fragment {
     throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
   }
 };
-Fragment32.empty = new Fragment32([], 0);
+Fragment31.empty = new Fragment31([], 0);
 var found = { index: 0, offset: 0 };
 function retIndex(index, offset) {
   found.index = index;
@@ -38098,7 +38158,7 @@ var Slice = class _Slice {
     let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
     if (typeof openStart != "number" || typeof openEnd != "number")
       throw new RangeError("Invalid input for Slice.fromJSON");
-    return new _Slice(Fragment32.fromJSON(schema, json.content), openStart, openEnd);
+    return new _Slice(Fragment31.fromJSON(schema, json.content), openStart, openEnd);
   }
   /**
   Create a slice from a fragment by taking the maximum possible
@@ -38113,7 +38173,7 @@ var Slice = class _Slice {
     return new _Slice(fragment, openStart, openEnd);
   }
 };
-Slice.empty = new Slice(Fragment32.empty, 0, 0);
+Slice.empty = new Slice(Fragment31.empty, 0, 0);
 function removeRange(content, from, to) {
   let { index, offset } = content.findIndex(from), child = content.maybeChild(index);
   let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -38211,7 +38271,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
       addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment32(content);
+  return new Fragment31(content);
 }
 function replaceTwoWay($from, $to, depth) {
   let content = [];
@@ -38221,13 +38281,13 @@ function replaceTwoWay($from, $to, depth) {
     addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment32(content);
+  return new Fragment31(content);
 }
 function prepareSliceForReplace(slice, $along) {
   let extra = $along.depth - slice.openStart, parent = $along.node(extra);
   let node = parent.copy(slice.content);
   for (let i = extra - 1; i >= 0; i--)
-    node = $along.node(i).copy(Fragment32.from(node));
+    node = $along.node(i).copy(Fragment31.from(node));
   return {
     start: node.resolveNoCache(slice.openStart + extra),
     end: node.resolveNoCache(node.content.size - slice.openEnd - extra)
@@ -38566,7 +38626,7 @@ var Node7 = class _Node {
     this.type = type;
     this.attrs = attrs;
     this.marks = marks;
-    this.content = content || Fragment32.empty;
+    this.content = content || Fragment31.empty;
   }
   /**
   The array of this node's child nodes.
@@ -38871,7 +38931,7 @@ var Node7 = class _Node {
   can optionally pass `start` and `end` indices into the
   replacement fragment.
   */
-  canReplace(from, to, replacement = Fragment32.empty, start = 0, end = replacement.childCount) {
+  canReplace(from, to, replacement = Fragment31.empty, start = 0, end = replacement.childCount) {
     let one = this.contentMatchAt(from).matchFragment(replacement, start, end);
     let two = one && one.matchFragment(this.content, to);
     if (!two || !two.validEnd)
@@ -38953,7 +39013,7 @@ var Node7 = class _Node {
         throw new RangeError("Invalid text node in JSON");
       return schema.text(json.text, marks);
     }
-    let content = Fragment32.fromJSON(schema, json.content);
+    let content = Fragment31.fromJSON(schema, json.content);
     let node = schema.nodeType(json.type).create(json.attrs, content, marks);
     node.type.checkAttrs(node.attrs);
     return node;
@@ -39049,7 +39109,7 @@ var ContentMatch = class _ContentMatch {
     function search(match, types) {
       let finished = match.matchFragment(after, startIndex);
       if (finished && (!toEnd || finished.validEnd))
-        return Fragment32.from(types.map((tp) => tp.createAndFill()));
+        return Fragment31.from(types.map((tp) => tp.createAndFill()));
       for (let i = 0; i < match.next.length; i++) {
         let { type, next } = match.next[i];
         if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -39617,7 +39677,7 @@ function mapFragment(fragment, f, parent) {
       child = f(child, parent, i);
     mapped.push(child);
   }
-  return Fragment32.fromArray(mapped);
+  return Fragment31.fromArray(mapped);
 }
 var AddMarkStep = class _AddMarkStep extends Step {
   /**
@@ -39734,7 +39794,7 @@ var AddNodeMarkStep = class _AddNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment32.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment31.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc) {
     let node = doc.nodeAt(this.pos);
@@ -39780,7 +39840,7 @@ var RemoveNodeMarkStep = class _RemoveNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment32.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment31.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc) {
     let node = doc.nodeAt(this.pos);
@@ -39981,7 +40041,7 @@ var AttrStep = class _AttrStep extends Step {
       attrs[name] = node.attrs[name];
     attrs[this.attr] = this.value;
     let updated = node.type.create(attrs, null, node.marks);
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment32.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment31.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   getMap() {
     return StepMap.empty;
@@ -40365,7 +40425,7 @@ var NodeSelection2 = class _NodeSelection extends Selection {
     return new _NodeSelection($pos);
   }
   content() {
-    return new Slice(Fragment32.from(this.node), 0, 0);
+    return new Slice(Fragment31.from(this.node), 0, 0);
   }
   eq(other) {
     return other instanceof _NodeSelection && other.anchor == this.anchor;
@@ -41093,10 +41153,10 @@ var CellSelection = class CellSelection2 extends Selection {
         }
         rowContent.push(cell);
       }
-      rows.push(table.child(row).copy(Fragment32.from(rowContent)));
+      rows.push(table.child(row).copy(Fragment31.from(rowContent)));
     }
     const fragment = this.isColSelection() && this.isRowSelection() ? table : rows;
-    return new Slice(Fragment32.from(fragment), 1, 1);
+    return new Slice(Fragment31.from(fragment), 1, 1);
   }
   replace(tr, content = Slice.empty) {
     const mapFrom = tr.steps.length, ranges = this.ranges;
@@ -41108,7 +41168,7 @@ var CellSelection = class CellSelection2 extends Selection {
     if (sel) tr.setSelection(sel);
   }
   replaceWith(tr, node) {
-    this.replace(tr, new Slice(Fragment32.from(node), 0, 0));
+    this.replace(tr, new Slice(Fragment31.from(node), 0, 0));
   }
   forEachCell(f) {
     const table = this.$anchorCell.node(-1);