@underverse-ui/underverse 2.0.8 → 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
@@ -897,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",
@@ -1485,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"
@@ -1553,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",
@@ -2227,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)]"
               )
             }
@@ -2486,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
           ),
@@ -5037,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"
@@ -5070,13 +5073,13 @@ 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
     )
   };
@@ -5142,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
         ),
@@ -6411,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
         ),
@@ -6460,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: [
@@ -7171,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
         ),
@@ -7219,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: [
@@ -8110,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
         ),
@@ -8159,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: [
@@ -8740,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
         ),
@@ -8799,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: [
@@ -9490,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: [
@@ -9683,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: "*" })
     ] }),
@@ -11205,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: [
@@ -11608,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"
         ),
@@ -11851,6 +11860,7 @@ var DateTimePicker = ({
           sizeStyles7[size].label,
           formControlLabelClass,
           "text-foreground flex items-center gap-1",
+          open && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -11899,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: [
@@ -15144,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"
   };
@@ -15376,13 +15387,13 @@ 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(Fragment12, { children: [
@@ -15470,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
         ),
@@ -15489,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
         ),
@@ -17487,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
       ),
@@ -17622,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"
@@ -17739,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: [
@@ -20449,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
       ),