@underverse-ui/underverse 2.0.7 → 2.0.9

package/dist/index.js

@@ -4,19 +4,19 @@ import {
   extractImageSrcsFromHtml,
   normalizeImageUrl,
   prepareUEditorContentForSave
-} from "./chunk-XE3RJHVX.js";
+} from "./chunk-WNVGXH5Y.js";
 import {
   EmojiPicker_default
-} from "./chunk-A7XL4RDV.js";
+} from "./chunk-K5PVUTXH.js";
 import {
   getEmojiImageUrl,
   getEmojiUnifiedCode,
   setEmojiBaseUrl
-} from "./chunk-KGNYK5YF.js";
+} from "./chunk-KKASHK7A.js";
 import "./chunk-4TYW5K4J.js";
 import {
   Modal_default
-} from "./chunk-JINSMREP.js";
+} from "./chunk-7V65PWQN.js";
 import {
   DropdownMenuItem,
   DropdownMenuSeparator,
@@ -24,10 +24,6 @@ import {
   Popover,
   SelectDropdown,
   UnderverseConfigProvider,
-  formControlFixedClass,
-  formControlLabelClass,
-  formControlSizeStyles,
-  formControlValueClass,
   getAnimationStyles,
   getBorderRadiusClass,
   getPanelBorderRadiusClass,
@@ -35,7 +31,7 @@ import {
   shadcnAnimationStyles,
   useShadCNAnimations,
   useUnderverseUIConfig
-} from "./chunk-TETMVVUP.js";
+} from "./chunk-VDIAFUIE.js";
 import {
   ForceInternalTranslationsProvider,
   NextIntlAdapter,
@@ -44,6 +40,12 @@ import {
   UnderverseNextIntlProvider,
   cn,
   en_default,
+  formControlFixedClass,
+  formControlGroupOutlineClass,
+  formControlLabelClass,
+  formControlOutlineClass,
+  formControlSizeStyles,
+  formControlValueClass,
   getUnderverseDefaultTranslation,
   ja_default,
   ko_default,
@@ -55,7 +57,7 @@ import {
   useUnderverseLocale,
   useUnderverseTranslations,
   vi_default
-} from "./chunk-PLHJWXCW.js";
+} from "./chunk-CKG2QLQL.js";
 import {
   __export,
   __require
@@ -854,7 +856,7 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
 var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
 
 // src/components/Input.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var Input = forwardRef3(
   ({
     label,
@@ -877,6 +879,7 @@ var Input = forwardRef3(
     value,
     maxLength,
     rightAddon,
+    rightSection,
     borderMode,
     ...rest
   }, ref) => {
@@ -896,19 +899,19 @@ var Input = forwardRef3(
     const containerSpacing = size === "xs" || size === "sm" ? "space-y-1.5" : "space-y-2";
     const variantStyles5 = {
       default: {
-        container: "bg-background border border-input hover:border-accent-foreground/20",
-        focus: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
-        error: "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
+        container: cn("bg-background", formControlOutlineClass),
+        focus: "",
+        error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
       },
       filled: {
         container: "bg-muted/50 border border-transparent hover:bg-muted/70",
         focus: "focus-visible:outline-none focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
-        error: "bg-destructive/10 border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
+        error: "bg-destructive/10 border-destructive focus-visible:outline-none focus-visible:border-destructive"
       },
       outlined: {
         container: "bg-transparent border border-border/50 hover:border-accent-foreground/30",
         focus: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
-        error: "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent"
+        error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
       },
       minimal: {
         container: "bg-transparent border-0 border-b border-border/50 hover:border-accent-foreground/30",
@@ -1048,7 +1051,7 @@ var Input = forwardRef3(
               radiusClass,
               // Icon padding adjustments
               LeftIcon && "pl-10",
-              (RightIcon || showPasswordToggle || clearable || loading2 || success || errMsg) && "pr-10",
+              (RightIcon || showPasswordToggle || clearable || loading2 || success || errMsg || rightSection) && "pr-10",
               // Variant styles
               variantStyles5[variant].container,
               errMsg ? variantStyles5[variant].error : variantStyles5[variant].focus,
@@ -1061,45 +1064,57 @@ var Input = forwardRef3(
             ...restInput
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
-          getStatusIcon(),
-          RightIcon && !loading2 && !success && !errMsg && /* @__PURE__ */ jsx6(RightIcon, { className: cn("text-muted-foreground", sizeStyles7[size].icon) }),
-          clearable && hasValue && !loading2 && /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                if (onClear) return onClear();
-                rest.onChange?.({ target: { value: "" } });
-              },
-              className: cn(
-                "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",
-                sizeStyles7[size].iconButton
-              ),
-              tabIndex: 0,
-              "aria-label": gi18n.clearInput ?? "Clear input",
-              children: /* @__PURE__ */ jsx6(X, { className: sizeStyles7[size].icon })
-            }
-          ),
-          showPasswordToggle && /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowPassword(!showPassword),
-              className: cn(
-                "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",
-                sizeStyles7[size].iconButton
-              ),
-              tabIndex: 0,
-              "aria-label": showPassword ? gi18n.hidePassword ?? "Hide password" : gi18n.showPassword ?? "Show password",
-              children: showPassword ? /* @__PURE__ */ jsx6(EyeOff, { className: sizeStyles7[size].icon }) : /* @__PURE__ */ jsx6(Eye, { className: sizeStyles7[size].icon })
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: cn(
+              "absolute z-10 flex items-center gap-1",
+              rightSection ? "inset-y-0 right-0" : "right-3 top-1/2 -translate-y-1/2"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-1", rightSection && "px-1"), children: [
+                getStatusIcon(),
+                RightIcon && !loading2 && !success && !errMsg && /* @__PURE__ */ jsx6(RightIcon, { className: cn("text-muted-foreground", sizeStyles7[size].icon) }),
+                clearable && hasValue && !loading2 && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      if (onClear) return onClear();
+                      rest.onChange?.({ target: { value: "" } });
+                    },
+                    className: cn(
+                      "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",
+                      sizeStyles7[size].iconButton
+                    ),
+                    tabIndex: 0,
+                    "aria-label": gi18n.clearInput ?? "Clear input",
+                    children: /* @__PURE__ */ jsx6(X, { className: sizeStyles7[size].icon })
+                  }
+                ),
+                showPasswordToggle && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowPassword(!showPassword),
+                    className: cn(
+                      "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",
+                      sizeStyles7[size].iconButton
+                    ),
+                    tabIndex: 0,
+                    "aria-label": showPassword ? gi18n.hidePassword ?? "Hide password" : gi18n.showPassword ?? "Show password",
+                    children: showPassword ? /* @__PURE__ */ jsx6(EyeOff, { className: sizeStyles7[size].icon }) : /* @__PURE__ */ jsx6(Eye, { className: sizeStyles7[size].icon })
+                  }
+                )
+              ] }),
+              rightSection
+            ]
+          }
+        ),
         rightAddon,
         variant === "minimal" && /* @__PURE__ */ jsx6(
           "div",
@@ -1134,27 +1149,128 @@ var Input = forwardRef3(
   }
 );
 Input.displayName = "Input";
+var searchButtonWidthStyles = {
+  xs: "w-6",
+  sm: "w-8",
+  md: "w-10",
+  lg: "w-12",
+  xl: "w-14"
+};
+var searchButtonPaddingStyles = {
+  xs: "pr-14",
+  sm: "pr-18",
+  md: "pr-20",
+  lg: "pr-24",
+  xl: "pr-28"
+};
+var searchButtonRadiusStyles = {
+  none: "rounded-r-none",
+  sm: "rounded-r-sm",
+  md: "rounded-r-md",
+  lg: "rounded-r-lg",
+  xl: "rounded-r-xl",
+  "2xl": "rounded-r-2xl",
+  "3xl": "rounded-r-3xl",
+  full: "rounded-r-full",
+  daewoo: "rounded-r",
+  infiniq: "rounded-r-full"
+};
 var SearchInput = forwardRef3(
-  ({ onSearch, searchDelay = 300, placeholder = "Search\u2026", ...props }, ref) => {
-    const [searchValue, setSearchValue] = useState3(props.value || "");
+  ({
+    mode = "default",
+    onSearch,
+    searchDelay = 300,
+    searchButtonLabel = "Search",
+    placeholder = "Search\u2026",
+    value,
+    defaultValue,
+    onChange,
+    onClear,
+    onKeyDown,
+    clearable = true,
+    size = "md",
+    className,
+    disabled,
+    loading: loading2 = false,
+    rightSection,
+    borderMode,
+    ...props
+  }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue ?? "");
+    const isControlled = value !== void 0;
+    const searchValue = isControlled ? value : uncontrolledValue;
+    const searchText = String(searchValue ?? "");
+    const globalConfig = useUnderverseUIConfig();
+    const resolvedBorderMode = borderMode ?? globalConfig.input?.borderMode ?? globalConfig.borderMode ?? "full";
+    const searchButtonRadiusClass = searchButtonRadiusStyles[resolvedBorderMode] ?? getBorderRadiusClass(resolvedBorderMode);
+    const triggerSearch = useCallback2(() => {
+      onSearch?.(searchText);
+    }, [onSearch, searchText]);
     React5.useEffect(() => {
-      if (!onSearch) return;
+      if (!onSearch || mode !== "default") return;
       const timer = setTimeout(() => {
-        onSearch(searchValue);
+        onSearch(searchText);
       }, searchDelay);
       return () => clearTimeout(timer);
-    }, [searchValue, onSearch, searchDelay]);
+    }, [mode, onSearch, searchDelay, searchText]);
+    const searchButton = mode === "button" ? /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: triggerSearch,
+        disabled: disabled || loading2,
+        className: cn(
+          "flex h-full shrink-0 cursor-pointer items-center justify-center border-l border-border bg-transparent text-foreground",
+          "transition-colors hover:bg-accent hover:text-accent-foreground",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
+          searchButtonWidthStyles[size],
+          searchButtonRadiusClass
+        ),
+        "aria-label": searchButtonLabel,
+        children: /* @__PURE__ */ jsx6(Search, { className: formControlSizeStyles[size].icon, "aria-hidden": "true" })
+      }
+    ) : null;
     return /* @__PURE__ */ jsx6(
       Input,
       {
         ref,
         type: "search",
-        leftIcon: Search,
+        leftIcon: mode === "default" ? Search : void 0,
         placeholder,
-        clearable: true,
+        clearable,
         value: searchValue,
-        onChange: (e) => setSearchValue(e.target.value),
-        onClear: () => setSearchValue(""),
+        onChange: (event) => {
+          if (!isControlled) setUncontrolledValue(event.target.value);
+          onChange?.(event);
+        },
+        onClear: () => {
+          if (!isControlled) {
+            setUncontrolledValue("");
+          } else if (!onClear && onChange) {
+            onChange({ target: { value: "" }, currentTarget: { value: "" } });
+          }
+          onClear?.();
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (mode === "button" && event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) {
+            triggerSearch();
+          }
+        },
+        size,
+        className: cn(
+          "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
+          mode === "button" && searchButtonPaddingStyles[size],
+          className
+        ),
+        disabled,
+        loading: loading2,
+        rightSection: mode === "button" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          rightSection,
+          searchButton
+        ] }) : rightSection,
+        borderMode,
         ...props
       }
     );
@@ -1371,7 +1487,7 @@ var Textarea = forwardRef3(
       [ref]
     );
     const variantStyles5 = {
-      default: "bg-background border border-input hover:border-accent-foreground/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+      default: cn("bg-background", formControlOutlineClass),
       filled: "bg-muted/50 border border-transparent hover:bg-muted/70 focus-visible:outline-none focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
       outlined: "bg-transparent border border-border/50 hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
       minimal: "bg-transparent border-0 border-b border-border/50 hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none"
@@ -1439,7 +1555,7 @@ var Textarea = forwardRef3(
             "disabled:cursor-not-allowed disabled:opacity-50",
             sizeStyles7[size],
             variantStyles5[variant],
-            error && "border-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-transparent",
+            error && "border-destructive focus-visible:outline-none focus-visible:border-destructive",
             resizeClasses[resize],
             isFocused && "shadow-md",
             variant !== "minimal" && "shadow-sm",
@@ -2113,8 +2229,9 @@ var StickerPicker = ({
               value: search,
               onChange: (e) => setSearch(e.target.value),
               className: cn(
-                "w-full rounded-2xl border border-border/10 bg-muted/20 py-2 pl-9.5 pr-9 text-sm transition-all duration-300",
-                "placeholder:text-muted-foreground/60 focus:outline-none focus:ring-2 focus:ring-primary/15 focus:border-primary/20",
+                "w-full rounded-2xl bg-muted/20 py-2 pl-9.5 pr-9 text-sm transition-all duration-300",
+                formControlOutlineClass,
+                "placeholder:text-muted-foreground/60",
                 "focus:bg-background/90 focus:shadow-[0_0_12px_rgba(var(--color-primary-rgb),0.04)]"
               )
             }
@@ -2372,11 +2489,11 @@ var TagInput = forwardRef4(
           className: cn(
             "flex items-center gap-1.5 cursor-text",
             formControlFixedClass,
-            "bg-background border border-input",
+            "bg-background",
+            formControlGroupOutlineClass,
             "transition-all duration-200",
-            "hover:border-accent-foreground/20",
             getBorderRadiusClass(resolvedBorderMode),
-            isFocused && "ring-1 ring-ring ring-offset-1 ring-offset-background border-transparent shadow-md",
+            isFocused && "shadow-md",
             disabled && "opacity-50 cursor-not-allowed",
             sizeStyles7[size].container
           ),
@@ -2996,7 +3113,7 @@ var Skeleton_default = Skeleton;
 // src/components/Progress.tsx
 import React13 from "react";
 import { Check as Check2, X as X4, Clock } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: "bg-muted-foreground",
   primary: "bg-linear-to-r from-primary via-primary/90 to-primary",
@@ -3157,7 +3274,7 @@ var CircularProgress = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx15("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: children ? children : /* @__PURE__ */ jsxs11(Fragment2, { children: [
+        /* @__PURE__ */ jsx15("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: children ? children : /* @__PURE__ */ jsxs11(Fragment3, { children: [
           getContentIcon(),
           showValue && !indeterminate && /* @__PURE__ */ jsx15("span", { className: cn("text-sm font-semibold", isComplete ? "text-success" : isError ? "text-destructive" : "text-foreground"), children: isComplete ? "\u2713" : isError ? "\u2717" : `${Math.round(percentage)}%` }),
           indeterminate && /* @__PURE__ */ jsx15(Clock, { className: "w-4 h-4 text-muted-foreground animate-pulse" })
@@ -4473,7 +4590,7 @@ import * as React19 from "react";
 import { useId as useId4 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronDown, Search as Search4, SearchX, Check as Check3, X as X8 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var getOptionLabel = (option) => {
   return typeof option === "string" ? option : option.label;
 };
@@ -4923,7 +5040,7 @@ var Combobox = ({
     xl: formControlSizeStyles.xl.control
   };
   const variantStyles5 = {
-    default: "border border-input bg-background hover:bg-accent/5 hover:border-primary/40",
+    default: "bg-background hover:bg-accent/5",
     outline: "border-2 border-input bg-transparent hover:border-primary/60",
     ghost: "border-0 bg-transparent hover:bg-accent/50",
     filled: "border-0 bg-muted/50 hover:bg-muted/80"
@@ -4956,17 +5073,17 @@ var Combobox = ({
     className: cn(
       "group flex w-full items-center justify-between transition-all duration-200",
       formControlFixedClass,
+      formControlOutlineClass,
       radiusClass,
       sizeStyles7[size],
       variantStyles5[variant],
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      open && "border-primary",
-      !!effectiveError && "border-destructive focus-visible:ring-destructive/30",
+      open && "border-ring",
+      !!effectiveError && "border-destructive",
       className
     )
   };
-  const triggerContents = /* @__PURE__ */ jsxs18(Fragment3, { children: [
+  const triggerContents = /* @__PURE__ */ jsxs18(Fragment4, { children: [
     selectedIcon && /* @__PURE__ */ jsx22("span", { className: cn("mr-2 flex shrink-0 items-center justify-center overflow-hidden text-primary", formControlSizeStyles[size].icon), children: selectedIcon }),
     /* @__PURE__ */ jsx22("span", { className: cn(formControlValueClass, "text-left", !displayValue && "text-muted-foreground", fontBold && "font-semibold"), children: renderValue && selectedOption ? renderValue(selectedOption) : displayValue || placeholder }),
     /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1.5 ml-2 shrink-0", children: [
@@ -5028,6 +5145,7 @@ var Combobox = ({
           formControlLabelClass,
           "transition-colors duration-200",
           disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary",
+          open && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -5814,7 +5932,7 @@ function parseDateString(str, locale = "en") {
 import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, Sparkles, X as XIcon } from "lucide-react";
 import * as React23 from "react";
 import { useId as useId5 } from "react";
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function normalizeToLocalDate(date) {
   if (!date) return null;
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
@@ -6205,7 +6323,7 @@ var DatePicker = ({
         }
       )
     ] }),
-    viewMode === "calendar" && /* @__PURE__ */ jsxs20(Fragment4, { children: [
+    viewMode === "calendar" && /* @__PURE__ */ jsxs20(Fragment5, { children: [
       /* @__PURE__ */ jsx27("div", { className: cn("grid grid-cols-7 gap-1 mb-2 px-0.5"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
         (day, idx) => /* @__PURE__ */ jsx27(
           "div",
@@ -6297,6 +6415,7 @@ var DatePicker = ({
           formControlLabelClass,
           "transition-colors duration-300 cursor-pointer",
           disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary hover:text-primary",
+          isOpen && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -6346,19 +6465,19 @@ var DatePicker = ({
           {
             ref: triggerRef,
             className: cn(
-              "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              "group flex w-full items-center justify-between bg-background/80 backdrop-blur-sm",
               formControlFixedClass,
+              formControlGroupOutlineClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles7[size].trigger,
               formControlSizeStyles[requestedSize].control,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
-                "border-border/60 hover:border-primary/40",
-                "focus-within:border-primary focus-within:ring-0",
+                "focus-within:border-ring",
                 "hover:bg-accent/10"
               ],
               "transition-all duration-300 ease-out",
-              isOpen && !isFocused && "border-primary shadow-lg shadow-primary/10",
-              effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5",
+              isOpen && "border-ring shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive/60 bg-destructive/5",
               className
             ),
             children: [
@@ -6976,7 +7095,7 @@ var DateRangePicker = ({
         }
       )
     ] }),
-    viewMode === "calendar" && /* @__PURE__ */ jsxs20(Fragment4, { children: [
+    viewMode === "calendar" && /* @__PURE__ */ jsxs20(Fragment5, { children: [
       /* @__PURE__ */ jsx27("div", { className: cn("grid grid-cols-7 gap-1 px-0.5", size === "sm" ? "mb-1" : size === "lg" ? "mb-3" : "mb-2"), children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ jsx27(
         "div",
         {
@@ -7057,6 +7176,7 @@ var DateRangePicker = ({
           formControlLabelClass,
           "transition-colors duration-300",
           disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground group-focus-within:text-primary hover:text-primary cursor-pointer",
+          isOpen && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -7105,19 +7225,19 @@ var DateRangePicker = ({
           {
             ref: triggerRef,
             className: cn(
-              "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              "group flex w-full items-center justify-between bg-background/80 backdrop-blur-sm",
               formControlFixedClass,
+              formControlGroupOutlineClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles7[size].trigger,
               formControlSizeStyles[requestedSize].control,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
-                "border-border/60 hover:border-primary/40",
-                "focus-within:border-primary focus-within:ring-0",
+                "focus-within:border-ring",
                 "hover:bg-accent/10"
               ],
               "transition-all duration-300 ease-out",
-              isOpen && !isFocused && "border-primary shadow-lg shadow-primary/10",
-              effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5"
+              isOpen && "border-ring shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive/60 bg-destructive/5"
             ),
             children: [
               /* @__PURE__ */ jsxs20("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: [
@@ -7400,7 +7520,7 @@ function getLeapMonthOffset(a11, timeZone) {
 }
 
 // src/components/LunarDatePicker.tsx
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function toSolarDate(value) {
   if (!value) return null;
   const solar = lunarToSolar({
@@ -7904,7 +8024,7 @@ var LunarDatePicker = ({
         }
       )
     ] }),
-    viewMode === "calendar" && /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    viewMode === "calendar" && /* @__PURE__ */ jsxs21(Fragment6, { children: [
       /* @__PURE__ */ jsx28("div", { className: cn("grid grid-cols-7 gap-1 mb-2 px-0.5"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
         (day, idx) => /* @__PURE__ */ jsx28(
           "div",
@@ -7996,6 +8116,7 @@ var LunarDatePicker = ({
           formControlLabelClass,
           "transition-colors duration-300 cursor-pointer",
           disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary hover:text-primary",
+          isOpen && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -8045,19 +8166,19 @@ var LunarDatePicker = ({
           {
             ref: triggerRef,
             className: cn(
-              "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              "group flex w-full items-center justify-between bg-background/80 backdrop-blur-sm",
               formControlFixedClass,
+              formControlGroupOutlineClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles7[size].trigger,
               formControlSizeStyles[requestedSize].control,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
-                "border-border/60 hover:border-primary/40",
-                "focus-within:border-primary focus-within:ring-0",
+                "focus-within:border-ring",
                 "hover:bg-accent/10"
               ],
               "transition-all duration-300 ease-out",
-              isOpen && !isFocused && "border-primary shadow-lg shadow-primary/10",
-              effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5",
+              isOpen && "border-ring shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive/60 bg-destructive/5",
               className
             ),
             children: [
@@ -8544,7 +8665,7 @@ var LunarDateRangePicker = ({
         }
       )
     ] }),
-    viewMode === "calendar" && /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    viewMode === "calendar" && /* @__PURE__ */ jsxs21(Fragment6, { children: [
       /* @__PURE__ */ jsx28("div", { className: cn("grid grid-cols-7 gap-1 px-0.5", size === "sm" ? "mb-1" : size === "lg" ? "mb-3" : "mb-2"), children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ jsx28(
         "div",
         {
@@ -8626,6 +8747,7 @@ var LunarDateRangePicker = ({
           formControlLabelClass,
           "transition-colors duration-300",
           disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground group-focus-within:text-primary hover:text-primary cursor-pointer",
+          isOpen && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -8685,19 +8807,19 @@ var LunarDateRangePicker = ({
             "aria-required": required,
             "aria-invalid": !!effectiveError,
             className: cn(
-              "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              "group flex w-full items-center justify-between bg-background/80 backdrop-blur-sm",
               formControlFixedClass,
+              formControlGroupOutlineClass,
               getBorderRadiusClass(borderMode ?? "full"),
               sizeStyles7[size].trigger,
               formControlSizeStyles[requestedSize].control,
               disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
-                "border-border/60 hover:border-primary/40",
-                "focus-within:border-primary focus-within:ring-0",
+                "focus-within:border-ring",
                 "hover:bg-accent/10"
               ],
               "transition-all duration-300 ease-out text-left",
-              isOpen && "border-primary shadow-lg shadow-primary/10",
-              effectiveError && "border-destructive/60 focus-within:ring-destructive/50 bg-destructive/5"
+              isOpen && "border-ring shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive/60 bg-destructive/5"
             ),
             children: [
               /* @__PURE__ */ jsxs21("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: [
@@ -9376,18 +9498,18 @@ function MonthYearPicker({
       "aria-required": required,
       "aria-invalid": !!effectiveError,
       className: cn(
-        "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+        "group flex w-full items-center justify-between 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",
+        formControlOutlineClass,
         "disabled:opacity-50 disabled:cursor-not-allowed",
         "transition-all duration-300 ease-out",
-        effectiveError && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5",
-        success && !effectiveError && "border-success/60 focus-visible:ring-success/50 bg-success/5",
-        !effectiveError && !success && "border-border/60 hover:border-primary/40 hover:bg-accent/10",
-        open && "border-primary shadow-lg shadow-primary/10",
+        effectiveError && "border-destructive/60 bg-destructive/5",
+        success && !effectiveError && "border-success/60 bg-success/5",
+        !effectiveError && !success && "hover:bg-accent/10",
+        open && "border-ring shadow-lg shadow-primary/10",
         className
       ),
       children: [
@@ -9569,7 +9691,7 @@ function MonthYearPicker({
     ] });
   }
   return /* @__PURE__ */ jsxs22("div", { className: cn("w-full", className), ...rest, children: [
-    label && /* @__PURE__ */ jsxs22("label", { className: cn(sz.label, "block mb-1.5 text-foreground/80", formControlLabelClass, effectiveError && "text-destructive", labelClassName), children: [
+    label && /* @__PURE__ */ jsxs22("label", { className: cn(sz.label, "block mb-1.5 text-foreground/80", formControlLabelClass, open && "text-primary", effectiveError && "text-destructive", labelClassName), children: [
       label,
       required && /* @__PURE__ */ jsx29("span", { className: "text-destructive ml-0.5", children: "*" })
     ] }),
@@ -9611,7 +9733,7 @@ function MonthYearPicker({
 }
 
 // src/components/Calendar.tsx
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var VIETNAM_HOLIDAYS = [
   { date: "01-01", name: "T\u1EBFt D\u01B0\u01A1ng l\u1ECBch", recurring: true },
   { date: "04-30", name: "Gi\u1EA3i ph\xF3ng mi\u1EC1n Nam", recurring: true },
@@ -10106,7 +10228,7 @@ function Calendar4({
         }
       )
     ] }),
-    display === "week" ? /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    display === "week" ? /* @__PURE__ */ jsxs23(Fragment8, { children: [
       showWeekdays && /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ jsx30("div", { className: cn(sz.head), children: w }, `w-${w}`)) }),
       /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid), children: weekDays.map((d, idx) => {
         const inMonth = true;
@@ -10262,7 +10384,7 @@ function Calendar4({
 // src/components/TimePicker.tsx
 import * as React27 from "react";
 import { Clock as Clock2, X as X10, Check as Check5, Sun, Moon, Sunset, Coffee } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var pad = (n) => n.toString().padStart(2, "0");
 var clamp2 = (n, min, max) => Math.min(max, Math.max(min, n));
 var WHEEL_ITEM_HEIGHT2 = {
@@ -11091,18 +11213,18 @@ function TimePicker({
       "aria-required": required,
       "aria-invalid": !!effectiveError,
       className: cn(
-        "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+        "group flex w-full items-center justify-between 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",
+        formControlOutlineClass,
         "disabled:opacity-50 disabled:cursor-not-allowed",
         "transition-all duration-300 ease-out",
-        effectiveError && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5",
-        success && !effectiveError && "border-success/60 focus-visible:ring-success/50 bg-success/5",
-        !effectiveError && !success && "border-border/60 hover:border-primary/40 hover:bg-accent/10",
-        open && "border-primary shadow-lg shadow-primary/10",
+        effectiveError && "border-destructive/60 bg-destructive/5",
+        success && !effectiveError && "border-success/60 bg-success/5",
+        !effectiveError && !success && "hover:bg-accent/10",
+        open && "border-ring shadow-lg shadow-primary/10",
         className
       ),
       children: [
@@ -11299,7 +11421,7 @@ function TimePicker({
           }
         );
       })(),
-      includeSeconds && /* @__PURE__ */ jsxs24(Fragment8, { children: [
+      includeSeconds && /* @__PURE__ */ jsxs24(Fragment9, { children: [
         /* @__PURE__ */ jsx31("div", { className: cn("flex flex-col items-center justify-center", panelSz.separatorPad, compactPanel && "pt-6"), children: /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsx31("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" }),
           /* @__PURE__ */ jsx31("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" })
@@ -11494,6 +11616,7 @@ function TimePicker({
           sz.label,
           formControlLabelClass,
           disabled ? "text-muted-foreground" : "text-foreground",
+          open && "text-primary",
           effectiveError && "text-destructive",
           "cursor-pointer transition-colors hover:text-primary"
         ),
@@ -11737,6 +11860,7 @@ var DateTimePicker = ({
           sizeStyles7[size].label,
           formControlLabelClass,
           "text-foreground flex items-center gap-1",
+          open && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -11785,14 +11909,15 @@ var DateTimePicker = ({
             "aria-required": required,
             "aria-invalid": !!effectiveError,
             className: cn(
-              "flex w-full items-center justify-between border border-input bg-background",
+              "flex w-full items-center justify-between bg-background",
               formControlFixedClass,
+              formControlOutlineClass,
               getBorderRadiusClass(resolvedBorderMode),
               sizeStyles7[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",
+              open && "border-ring",
               effectiveError && "border-destructive/60 bg-destructive/5"
             ),
             children: [
@@ -13286,7 +13411,7 @@ function useVisibleSlotRange(args) {
 }
 
 // src/components/CalendarTimeline/CalendarTimeline.tsx
-import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
 function CalendarTimeline({
   resources,
   events,
@@ -14612,7 +14737,7 @@ function CalendarTimeline({
                                     ]
                                   }
                                 ),
-                                !isViewOnly && (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ jsxs31(Fragment10, { children: [
+                                !isViewOnly && (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ jsxs31(Fragment11, { children: [
                                   /* @__PURE__ */ jsx38(
                                     "div",
                                     {
@@ -14792,7 +14917,7 @@ import * as React35 from "react";
 import { useId as useId10 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader23, X as X12, Sparkles as Sparkles3 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
 var comboboxScrollClassName2 = [
   "scrollbar-thin",
   "[scrollbar-width:thin]",
@@ -15030,7 +15155,7 @@ var MultiCombobox = ({
     }
   };
   const variantStyles5 = {
-    default: "border border-input bg-background shadow-sm hover:border-primary/50",
+    default: "bg-background shadow-sm",
     outline: "border-2 border-input bg-transparent hover:border-primary",
     ghost: "border border-transparent bg-muted/50 hover:bg-muted"
   };
@@ -15262,16 +15387,16 @@ var MultiCombobox = ({
       className: cn(
         "group flex w-full items-center gap-2 transition-all duration-200",
         formControlFixedClass,
+        formControlOutlineClass,
         getBorderRadiusClass(resolvedBorderMode),
         sizeStyles7[size].trigger,
         variantStyles5[variant],
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        open && "border-primary",
-        !!effectiveError && "border-destructive focus-visible:ring-destructive/30"
+        open && "border-ring",
+        !!effectiveError && "border-destructive"
       ),
       children: [
-        /* @__PURE__ */ jsx39("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs32(Fragment11, { children: [
+        /* @__PURE__ */ jsx39("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs32(Fragment12, { children: [
           visibleTags.map((option) => {
             if (renderTag) {
               return /* @__PURE__ */ jsx39("span", { className: "inline-flex max-h-full min-w-0 shrink overflow-hidden", children: renderTag(option, () => handleRemove(option.value)) }, option.value);
@@ -15356,6 +15481,7 @@ var MultiCombobox = ({
           formControlLabelClass,
           "transition-colors duration-200",
           disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary",
+          open && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -15375,6 +15501,7 @@ var MultiCombobox = ({
           formControlLabelClass,
           "transition-colors duration-200",
           disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary",
+          open && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -15873,7 +16000,7 @@ var ToggleGroup = (props) => {
 
 // src/components/Slider.tsx
 import * as React37 from "react";
-import { Fragment as Fragment12, jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
 var SIZE_STYLES = {
   sm: {
     track: "h-1",
@@ -16131,7 +16258,7 @@ var Slider = React37.forwardRef(
                 tooltipClassName
               }
             ),
-            isRange && /* @__PURE__ */ jsxs34(Fragment12, { children: [
+            isRange && /* @__PURE__ */ jsxs34(Fragment13, { children: [
               /* @__PURE__ */ jsx41(
                 SliderTooltip,
                 {
@@ -16227,7 +16354,7 @@ var Slider = React37.forwardRef(
               }
               const minZ = activeThumb === "min" ? "z-20" : "z-10";
               const maxZ = activeThumb === "max" ? "z-20" : "z-10";
-              return /* @__PURE__ */ jsxs34(Fragment12, { children: [
+              return /* @__PURE__ */ jsxs34(Fragment13, { children: [
                 /* @__PURE__ */ jsx41(
                   "div",
                   {
@@ -16290,7 +16417,7 @@ Slider.displayName = "Slider";
 // src/components/OverlayControls.tsx
 import { Dot as Dot2, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React38 from "react";
-import { Fragment as Fragment13, jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
 function resolveKeyboardEventElement(target) {
   if (target instanceof Element) return target;
   if (target instanceof Node) return target.parentElement;
@@ -16535,7 +16662,7 @@ function OverlayControls({
   const handleSliderMouseLeave = () => {
     setPreviewData(null);
   };
-  return /* @__PURE__ */ jsxs35(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs35(Fragment14, { children: [
     keyboardFeedback && /* @__PURE__ */ jsx42(
       "div",
       {
@@ -17373,6 +17500,7 @@ function CategoryTreeSelect(props) {
       className: cn(
         size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
         disabled ? "text-muted-foreground" : "text-foreground",
+        isOpen && "text-primary",
         effectiveError && "text-destructive",
         labelClassName
       ),
@@ -17508,7 +17636,7 @@ function CategoryTreeSelect(props) {
     }
   };
   const triggerVariantStyles = {
-    default: "border border-input bg-background shadow-sm hover:border-primary/50",
+    default: "bg-background shadow-sm",
     outline: "border-2 border-input bg-transparent hover:border-primary",
     ghost: "border border-transparent bg-muted/50 hover:bg-muted",
     filled: "border border-transparent bg-muted/70 hover:bg-muted"
@@ -17625,14 +17753,14 @@ function CategoryTreeSelect(props) {
             className: cn(
               "group flex w-full items-center justify-between transition-all duration-200",
               formControlFixedClass,
+              formControlOutlineClass,
               getBorderRadiusClass(resolvedBorderMode ?? "full"),
               "backdrop-blur-sm",
               triggerSizeStyles[size].button,
               triggerVariantStyles[variant],
-              "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 cursor-not-allowed hover:transform-none hover:shadow-none",
-              isOpen && "border-primary shadow-lg shadow-primary/10",
-              effectiveError && "border-destructive focus-visible:ring-destructive/30"
+              isOpen && "border-ring shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive"
             ),
             children: [
               /* @__PURE__ */ jsxs36("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden text-left", children: [
@@ -17959,7 +18087,7 @@ import {
   Upload as Upload2
 } from "lucide-react";
 import { useCallback as useCallback16, useMemo as useMemo19, useRef as useRef19, useState as useState29 } from "react";
-import { Fragment as Fragment14, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
 var formatFileSize = (bytes) => {
   if (bytes === 0) return "0 Bytes";
   const k = 1024;
@@ -18390,7 +18518,7 @@ function FileUpload({
             ] }),
             /* @__PURE__ */ jsx45("p", { className: cn("text-muted-foreground", size === "lg" ? "text-sm" : "text-xs"), children: supportedFormatsText || t("supportedFormats") || `Max ${maxSize}MB per file \u2022 Up to ${maxFiles} files` })
           ] }),
-          variant === "compact" && /* @__PURE__ */ jsxs38(Fragment14, { children: [
+          variant === "compact" && /* @__PURE__ */ jsxs38(Fragment15, { children: [
             /* @__PURE__ */ jsx45("div", { className: cn("shrink-0 rounded-lg flex items-center justify-center", "bg-primary/10", currentSize.iconSize), children: /* @__PURE__ */ jsx45(Upload2, { className: cn("text-primary", size === "sm" ? "w-4 h-4" : "w-5 h-5") }) }),
             /* @__PURE__ */ jsxs38("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx45("p", { className: cn("font-medium truncate", currentSize.text), children: dragDropText || t("dragDropText") || "Drop files here or" }),
@@ -18457,7 +18585,7 @@ function FileUpload({
 // src/components/Carousel.tsx
 import * as React40 from "react";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight8 } from "lucide-react";
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
 function Carousel({
   children,
   autoScroll = true,
@@ -18887,7 +19015,7 @@ function Carousel({
             })
           }
         ),
-        shouldShowArrows && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsxs39(Fragment15, { children: [
+        shouldShowArrows && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsxs39(Fragment16, { children: [
           /* @__PURE__ */ jsx46(
             Button_default,
             {
@@ -19258,7 +19386,7 @@ function FallingIcons({
 // src/components/List.tsx
 import * as React42 from "react";
 import { ChevronRight as ChevronRight9 } from "lucide-react";
-import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
 var SIZE_STYLES2 = {
   xs: { label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
   sm: { label: "text-[13px]", desc: "text-xs", icon: "h-4 w-4", avatar: "h-8 w-8" },
@@ -19427,7 +19555,7 @@ var ListItem = React42.forwardRef(
         }
       }
     } : {};
-    const inner = /* @__PURE__ */ jsxs41(Fragment16, { children: [
+    const inner = /* @__PURE__ */ jsxs41(Fragment17, { children: [
       /* @__PURE__ */ jsxs41("div", { className: cn("flex items-center gap-3 group/item relative max-md:gap-2.5", contentClassName), ...headerProps, children: [
         avatar && /* @__PURE__ */ jsx48("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx48("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
         Left && !avatar && /* @__PURE__ */ jsx48("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx48(Left, { className: cn(sz.icon) }) }),
@@ -19472,7 +19600,7 @@ var List_default = List;
 // src/components/Watermark.tsx
 import * as React43 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment17, jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
   draft: { text: "DRAFT", color: "rgba(59, 130, 246, 0.15)", rotate: -22, fontSize: 18, fontWeight: "bold" },
@@ -19751,7 +19879,7 @@ var Watermark = ({
     }
   );
   if (fullPage) {
-    return /* @__PURE__ */ jsxs42(Fragment17, { children: [
+    return /* @__PURE__ */ jsxs42(Fragment18, { children: [
       children,
       typeof window !== "undefined" ? createPortal2(overlay, document.body) : null
     ] });
@@ -20335,11 +20463,13 @@ function ColorPicker({
       type: "button",
       disabled,
       className: cn(
-        "w-full border border-input bg-background flex items-center justify-between",
+        "w-full bg-background flex items-center justify-between",
+        formControlOutlineClass,
         getBorderRadiusClass(resolvedBorderMode),
         sizeClasses2[size],
         formControlFixedClass,
-        "hover:border-accent-foreground/30 transition-colors",
+        "transition-colors",
+        open && "border-ring",
         disabled && "opacity-50 cursor-not-allowed",
         triggerClassName
       ),
@@ -20938,7 +21068,7 @@ var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
 import React47, { useId as useId13 } from "react";
-import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
   md: 768,
@@ -21095,7 +21225,7 @@ var GridItem = React47.forwardRef(
       st.opacity = 0;
       st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
     }
-    return /* @__PURE__ */ jsxs46(Fragment18, { children: [
+    return /* @__PURE__ */ jsxs46(Fragment19, { children: [
       animationDelay != null && /* @__PURE__ */ jsx53(
         "style",
         {
@@ -21125,13 +21255,13 @@ var Grid = Object.assign(GridRoot, { Item: GridItem });
 var Grid_default = Grid;
 
 // src/components/ClientOnly.tsx
-import { Fragment as Fragment19, jsx as jsx54 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx54 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const hasMounted = useHydrated();
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx54(Fragment19, { children: fallback });
+    return /* @__PURE__ */ jsx54(Fragment20, { children: fallback });
   }
-  return /* @__PURE__ */ jsx54(Fragment19, { children });
+  return /* @__PURE__ */ jsx54(Fragment20, { children });
 }
 
 // src/components/Loading.tsx
@@ -21313,7 +21443,7 @@ import React58 from "react";
 
 // src/components/DataTable/components/DataTableBody.tsx
 import React49 from "react";
-import { Fragment as Fragment20, jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
 function DataTableOverflowText({
   text,
   align
@@ -21408,7 +21538,7 @@ function DataTableBodyRows({
       t("loading"),
       "\u2026"
     ] })
-  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ jsx57(TableRow, { className: "!border-border/10", children: /* @__PURE__ */ jsx57(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : /* @__PURE__ */ jsxs49(Fragment20, { children: [
+  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ jsx57(TableRow, { className: "!border-border/10", children: /* @__PURE__ */ jsx57(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : /* @__PURE__ */ jsxs49(Fragment21, { children: [
     virtualPaddingTop > 0 && /* @__PURE__ */ jsx57(TableRow, { "aria-hidden": "true", className: "border-0 hover:bg-transparent hover:shadow-none", children: /* @__PURE__ */ jsx57(TableCell, { colSpan: leafColumns.length, className: "p-0", style: { height: virtualPaddingTop } }) }),
     rowsToRender.map(({ row, idx, virtualRow }) => {
       const isStripedRow = striped && idx % 2 === 0;
@@ -21542,7 +21672,7 @@ function groupColumnsByColorTag(leafCols, colorGroups) {
 }
 
 // src/components/DataTable/components/DataTableHeader.tsx
-import { Fragment as Fragment21, jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
 function getColumnLabel(title) {
   if (typeof title === "string" || typeof title === "number") {
     return String(title).replace(/\s+/g, " ").trim();
@@ -21786,10 +21916,10 @@ function DataTableHeader({
             !isRightAlign && !isCenterAlign && "justify-start",
             useEndIcon && "w-full"
           ),
-          children: isRightAlign ? /* @__PURE__ */ jsxs50(Fragment21, { children: [
+          children: isRightAlign ? /* @__PURE__ */ jsxs50(Fragment22, { children: [
             filterContent,
             titleContent
-          ] }) : /* @__PURE__ */ jsxs50(Fragment21, { children: [
+          ] }) : /* @__PURE__ */ jsxs50(Fragment22, { children: [
             titleContent,
             filterContent
           ] })
@@ -21812,7 +21942,7 @@ function DataTableHeader({
       t
     ]
   );
-  return /* @__PURE__ */ jsx58(Fragment21, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx58(TableRow, { className: "!border-border/10", children: row.map((headerCell, cellIndex) => {
+  return /* @__PURE__ */ jsx58(Fragment22, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx58(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;
@@ -23455,7 +23585,7 @@ function AccessDenied({
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
 import { useRef as useRef23, useState as useState37 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment22, jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -23505,7 +23635,7 @@ function ThemeToggleHeadless({
         children: /* @__PURE__ */ jsx65(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs57(Fragment22, { children: [
+    isOpen && /* @__PURE__ */ jsxs57(Fragment23, { children: [
       typeof window !== "undefined" && createPortal3(/* @__PURE__ */ jsx65("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal3(
         /* @__PURE__ */ jsx65(
@@ -23557,7 +23687,7 @@ function ThemeToggleHeadless({
 import { useRef as useRef24, useState as useState38 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment23, jsx as jsx66, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx66, jsxs as jsxs58 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -23602,7 +23732,7 @@ function LanguageSwitcherHeadless({
         children: /* @__PURE__ */ jsx66(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs58(Fragment23, { children: [
+    isOpen && /* @__PURE__ */ jsxs58(Fragment24, { children: [
       typeof window !== "undefined" && createPortal4(/* @__PURE__ */ jsx66("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal4(
         /* @__PURE__ */ jsx66(