@underverse-ui/underverse 2.0.7 → 2.0.9

package/dist/index.cjs

@@ -31,7 +31,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/constants/form-control-size.ts
-var formControlSizeStyles, formControlLabelClass, formControlFixedClass, formControlValueClass;
+var formControlSizeStyles, formControlLabelClass, formControlFixedClass, formControlValueClass, formControlOutlineClass, formControlGroupOutlineClass;
 var init_form_control_size = __esm({
   "src/constants/form-control-size.ts"() {
     "use strict";
@@ -85,6 +85,8 @@ var init_form_control_size = __esm({
     formControlLabelClass = "font-medium";
     formControlFixedClass = "min-h-0 overflow-hidden";
     formControlValueClass = "max-h-full min-w-0 flex-1 truncate whitespace-nowrap";
+    formControlOutlineClass = "border border-input hover:border-primary/40 focus-visible:outline-none focus-visible:border-ring";
+    formControlGroupOutlineClass = "border border-input hover:border-primary/40 focus-within:border-ring";
   }
 });
 
@@ -3528,6 +3530,7 @@ var init_EmojiPicker = __esm({
     init_emoji_ui();
     init_Tooltip();
     init_emojis();
+    init_form_control_size();
     import_jsx_runtime14 = require("react/jsx-runtime");
     CATEGORY_ICONS = {
       smileys_people: import_lucide_react4.Smile,
@@ -3667,8 +3670,9 @@ var init_EmojiPicker = __esm({
                   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)]"
                   )
                 }
@@ -4835,12 +4839,12 @@ var init_DropdownMenu = __esm({
             "button",
             {
               className: cn(
-                "inline-flex items-center justify-between gap-2 border bg-background border-border/60",
+                "inline-flex items-center justify-between gap-2 bg-background",
+                formControlOutlineClass,
                 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: [
@@ -6854,6 +6858,7 @@ var init_inputs = __esm({
     init_useSmartTranslations();
     import_lucide_react51 = require("lucide-react");
     init_url_safety();
+    init_form_control_size();
     import_jsx_runtime92 = require("react/jsx-runtime");
     LinkInput = ({
       onSubmit,
@@ -6894,7 +6899,7 @@ var init_inputs = __esm({
               placeholder: t("linkInput.placeholder"),
               "aria-invalid": Boolean(error),
               "aria-describedby": error ? errorId : void 0,
-              className: "flex-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 aria-invalid:ring-2 aria-invalid:ring-destructive/40"
+              className: `flex-1 rounded-lg bg-muted/50 px-3 py-2 text-sm ${formControlOutlineClass} aria-invalid:border-destructive`
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("button", { type: "submit", className: "p-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_lucide_react51.Check, { className: "w-4 h-4" }) }),
@@ -6929,7 +6934,7 @@ var init_inputs = __esm({
               value: url,
               onChange: (e) => setUrl(e.target.value),
               placeholder: t("imageInput.urlPlaceholder"),
-              className: "w-full mt-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
+              className: `mt-1 w-full rounded-lg bg-muted/50 px-3 py-2 text-sm ${formControlOutlineClass}`
             }
           )
         ] }),
@@ -6942,7 +6947,7 @@ var init_inputs = __esm({
               value: alt,
               onChange: (e) => setAlt(e.target.value),
               placeholder: t("imageInput.altPlaceholder"),
-              className: "w-full mt-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
+              className: `mt-1 w-full rounded-lg bg-muted/50 px-3 py-2 text-sm ${formControlOutlineClass}`
             }
           )
         ] }),
@@ -10357,6 +10362,7 @@ var Input = (0, import_react4.forwardRef)(
     value,
     maxLength,
     rightAddon,
+    rightSection,
     borderMode,
     ...rest
   }, ref) => {
@@ -10376,19 +10382,19 @@ var Input = (0, import_react4.forwardRef)(
     const containerSpacing = size === "xs" || size === "sm" ? "space-y-1.5" : "space-y-2";
     const variantStyles6 = {
       default: {
-        container: "bg-background border border-input hover:border-accent-foreground/20",
-        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",
@@ -10528,7 +10534,7 @@ var Input = (0, import_react4.forwardRef)(
               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
               variantStyles6[variant].container,
               errMsg ? variantStyles6[variant].error : variantStyles6[variant].focus,
@@ -10541,45 +10547,57 @@ var Input = (0, import_react4.forwardRef)(
             ...restInput
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
-          getStatusIcon(),
-          RightIcon && !loading2 && !success && !errMsg && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RightIcon, { className: cn("text-muted-foreground", sizeStyles8[size].icon) }),
-          clearable && hasValue && !loading2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "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",
-                sizeStyles8[size].iconButton
-              ),
-              tabIndex: 0,
-              "aria-label": gi18n.clearInput ?? "Clear input",
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.X, { className: sizeStyles8[size].icon })
-            }
-          ),
-          showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "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",
-                sizeStyles8[size].iconButton
-              ),
-              tabIndex: 0,
-              "aria-label": showPassword ? gi18n.hidePassword ?? "Hide password" : gi18n.showPassword ?? "Show password",
-              children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.EyeOff, { className: sizeStyles8[size].icon }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Eye, { className: sizeStyles8[size].icon })
-            }
-          )
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex items-center gap-1", rightSection && "px-1"), children: [
+                getStatusIcon(),
+                RightIcon && !loading2 && !success && !errMsg && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RightIcon, { className: cn("text-muted-foreground", sizeStyles8[size].icon) }),
+                clearable && hasValue && !loading2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "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",
+                      sizeStyles8[size].iconButton
+                    ),
+                    tabIndex: 0,
+                    "aria-label": gi18n.clearInput ?? "Clear input",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.X, { className: sizeStyles8[size].icon })
+                  }
+                ),
+                showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "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",
+                      sizeStyles8[size].iconButton
+                    ),
+                    tabIndex: 0,
+                    "aria-label": showPassword ? gi18n.hidePassword ?? "Hide password" : gi18n.showPassword ?? "Show password",
+                    children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.EyeOff, { className: sizeStyles8[size].icon }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Eye, { className: sizeStyles8[size].icon })
+                  }
+                )
+              ] }),
+              rightSection
+            ]
+          }
+        ),
         rightAddon,
         variant === "minimal" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
@@ -10614,27 +10632,128 @@ var Input = (0, import_react4.forwardRef)(
   }
 );
 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 = (0, import_react4.forwardRef)(
-  ({ onSearch, searchDelay = 300, placeholder = "Search\u2026", ...props }, ref) => {
-    const [searchValue, setSearchValue] = (0, import_react4.useState)(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] = (0, import_react4.useState)(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 = (0, import_react4.useCallback)(() => {
+      onSearch?.(searchText);
+    }, [onSearch, searchText]);
     import_react4.default.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__ */ (0, import_jsx_runtime11.jsx)(
+      "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__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Search, { className: formControlSizeStyles[size].icon, "aria-hidden": "true" })
+      }
+    ) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Input,
       {
         ref,
         type: "search",
-        leftIcon: import_lucide_react3.Search,
+        leftIcon: mode === "default" ? import_lucide_react3.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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          rightSection,
+          searchButton
+        ] }) : rightSection,
+        borderMode,
         ...props
       }
     );
@@ -10851,7 +10970,7 @@ var Textarea = (0, import_react4.forwardRef)(
       [ref]
     );
     const variantStyles6 = {
-      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"
@@ -10919,7 +11038,7 @@ var Textarea = (0, import_react4.forwardRef)(
             "disabled:cursor-not-allowed disabled:opacity-50",
             sizeStyles8[size],
             variantStyles6[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",
@@ -11496,6 +11615,7 @@ var StickerGridButton = ({ packId, stickerId, name, onClick, className, active =
 
 // src/components/StickerPicker.tsx
 init_Tooltip();
+init_form_control_size();
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var StickerPicker = ({
   onStickerSelect,
@@ -11602,8 +11722,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)]"
               )
             }
@@ -11866,11 +11987,11 @@ var TagInput = (0, import_react10.forwardRef)(
           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",
             sizeStyles8[size].container
           ),
@@ -14459,7 +14580,7 @@ var Combobox = ({
     xl: formControlSizeStyles.xl.control
   };
   const variantStyles6 = {
-    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"
@@ -14492,13 +14613,13 @@ var Combobox = ({
     className: cn(
       "group flex w-full items-center justify-between transition-all duration-200",
       formControlFixedClass,
+      formControlOutlineClass,
       radiusClass,
       sizeStyles8[size],
       variantStyles6[variant],
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      open && "border-primary",
-      !!effectiveError && "border-destructive focus-visible:ring-destructive/30",
+      open && "border-ring",
+      !!effectiveError && "border-destructive",
       className
     )
   };
@@ -14564,6 +14685,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
         ),
@@ -15846,6 +15968,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
         ),
@@ -15895,19 +16018,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),
               sizeStyles8[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: [
@@ -16606,6 +16729,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
         ),
@@ -16654,19 +16778,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),
               sizeStyles8[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__ */ (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: [
@@ -17552,6 +17676,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
         ),
@@ -17601,19 +17726,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),
               sizeStyles8[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: [
@@ -18182,6 +18307,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
         ),
@@ -18241,19 +18367,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"),
               sizeStyles8[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__ */ (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: [
@@ -18942,18 +19068,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: [
@@ -19135,7 +19261,7 @@ function MonthYearPicker({
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("w-full", className), ...rest, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: cn(sz.label, "block mb-1.5 text-foreground/80", formControlLabelClass, effectiveError && "text-destructive", labelClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: cn(sz.label, "block mb-1.5 text-foreground/80", formControlLabelClass, open && "text-primary", effectiveError && "text-destructive", labelClassName), children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-destructive ml-0.5", children: "*" })
     ] }),
@@ -20664,18 +20790,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: [
@@ -21067,6 +21193,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"
         ),
@@ -21314,6 +21441,7 @@ var DateTimePicker = ({
           sizeStyles8[size].label,
           formControlLabelClass,
           "text-foreground flex items-center gap-1",
+          open && "text-primary",
           effectiveError && "text-destructive",
           labelClassName
         ),
@@ -21362,14 +21490,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),
               sizeStyles8[size].trigger,
               formControlSizeStyles[requestedSize].control,
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               disabled && "opacity-50 cursor-not-allowed",
               !displayValue && "text-muted-foreground",
+              open && "border-ring",
               effectiveError && "border-destructive/60 bg-destructive/5"
             ),
             children: [
@@ -24626,7 +24755,7 @@ var MultiCombobox = ({
     }
   };
   const variantStyles6 = {
-    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"
   };
@@ -24858,13 +24987,13 @@ var MultiCombobox = ({
       className: cn(
         "group flex w-full items-center gap-2 transition-all duration-200",
         formControlFixedClass,
+        formControlOutlineClass,
         getBorderRadiusClass(resolvedBorderMode),
         sizeStyles8[size].trigger,
         variantStyles6[variant],
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        open && "border-primary",
-        !!effectiveError && "border-destructive focus-visible:ring-destructive/30"
+        open && "border-ring",
+        !!effectiveError && "border-destructive"
       ),
       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: [
@@ -24952,6 +25081,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
         ),
@@ -24971,6 +25101,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
         ),
@@ -26984,6 +27115,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
       ),
@@ -27119,7 +27251,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"
@@ -27236,14 +27368,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__ */ (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: [
@@ -29947,11 +30079,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
       ),
@@ -34266,6 +34400,7 @@ init_cn();
 init_Popover();
 var import_lucide_react45 = require("lucide-react");
 init_useSmartTranslations();
+init_form_control_size();
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var FormRadioView = ({ node, updateAttributes, editor, selected }) => {
   const t = useSmartTranslations("UEditor");
@@ -34338,7 +34473,7 @@ var FormRadioView = ({ node, updateAttributes, editor, selected }) => {
                   type: "text",
                   value: groupName,
                   onChange: (e) => updateAttributes({ name: e.target.value }),
-                  className: "w-full text-sm px-2 py-1.5 border border-border/60 rounded-lg bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+                  className: `w-full rounded-lg bg-background px-2 py-1.5 text-sm text-foreground ${formControlOutlineClass}`
                 }
               )
             ] })
@@ -38574,6 +38709,7 @@ var import_react_dom8 = require("react-dom");
 init_useSmartTranslations();
 var import_lucide_react53 = require("lucide-react");
 init_cn();
+init_form_control_size();
 init_toolbar();
 init_inputs();
 init_link_commands();
@@ -39329,7 +39465,7 @@ var BubbleMenuContent = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "flex h-9 items-center overflow-hidden rounded-md border border-border/60 bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: cn("flex h-9 items-center overflow-hidden rounded-md bg-muted/40", formControlGroupOutlineClass), children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "input",
         {
           value: formulaDraft,
@@ -39427,7 +39563,7 @@ var BubbleMenuContent = ({
       /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "space-y-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "mb-1 px-1 text-[11px] font-medium text-muted-foreground", children: t("toolbar.fontSize") }),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex h-9 items-center overflow-hidden rounded-md border border-border/60 bg-muted/40", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: cn("flex h-9 items-center overflow-hidden rounded-md bg-muted/40", formControlGroupOutlineClass), children: [
             /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               "input",
               {
@@ -40587,7 +40723,7 @@ function surrogateLow(ch) {
 function surrogateHigh(ch) {
   return ch >= 55296 && ch < 56320;
 }
-var Fragment30 = class _Fragment {
+var Fragment31 = class _Fragment {
   /**
   @internal
   */
@@ -40879,7 +41015,7 @@ var Fragment30 = class _Fragment {
     throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
   }
 };
-Fragment30.empty = new Fragment30([], 0);
+Fragment31.empty = new Fragment31([], 0);
 var found = { index: 0, offset: 0 };
 function retIndex(index, offset) {
   found.index = index;
@@ -41104,7 +41240,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(Fragment30.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
@@ -41119,7 +41255,7 @@ var Slice = class _Slice {
     return new _Slice(fragment, openStart, openEnd);
   }
 };
-Slice.empty = new Slice(Fragment30.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);
@@ -41218,7 +41354,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
       addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment30(content);
+  return new Fragment31(content);
 }
 function replaceTwoWay($from, $to, depth) {
   let content = [];
@@ -41228,13 +41364,13 @@ function replaceTwoWay($from, $to, depth) {
     addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment30(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(Fragment30.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)
@@ -41573,7 +41709,7 @@ var Node7 = class _Node {
     this.type = type;
     this.attrs = attrs;
     this.marks = marks;
-    this.content = content || Fragment30.empty;
+    this.content = content || Fragment31.empty;
   }
   /**
   The array of this node's child nodes.
@@ -41879,7 +42015,7 @@ var Node7 = class _Node {
   can optionally pass `start` and `end` indices into the
   replacement fragment.
   */
-  canReplace(from, to, replacement = Fragment30.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)
@@ -41961,7 +42097,7 @@ var Node7 = class _Node {
         throw new RangeError("Invalid text node in JSON");
       return schema.text(json.text, marks);
     }
-    let content = Fragment30.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;
@@ -42057,7 +42193,7 @@ var ContentMatch = class _ContentMatch {
     function search(match, types) {
       let finished = match.matchFragment(after, startIndex);
       if (finished && (!toEnd || finished.validEnd))
-        return Fragment30.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) {
@@ -42625,7 +42761,7 @@ function mapFragment(fragment, f, parent) {
       child = f(child, parent, i);
     mapped.push(child);
   }
-  return Fragment30.fromArray(mapped);
+  return Fragment31.fromArray(mapped);
 }
 var AddMarkStep = class _AddMarkStep extends Step {
   /**
@@ -42742,7 +42878,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(Fragment30.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);
@@ -42788,7 +42924,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(Fragment30.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);
@@ -42991,7 +43127,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(Fragment30.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;
@@ -43375,7 +43511,7 @@ var NodeSelection2 = class _NodeSelection extends Selection {
     return new _NodeSelection($pos);
   }
   content() {
-    return new Slice(Fragment30.from(this.node), 0, 0);
+    return new Slice(Fragment31.from(this.node), 0, 0);
   }
   eq(other) {
     return other instanceof _NodeSelection && other.anchor == this.anchor;
@@ -44103,10 +44239,10 @@ var CellSelection2 = class CellSelection3 extends Selection {
         }
         rowContent.push(cell);
       }
-      rows.push(table.child(row).copy(Fragment30.from(rowContent)));
+      rows.push(table.child(row).copy(Fragment31.from(rowContent)));
     }
     const fragment = this.isColSelection() && this.isRowSelection() ? table : rows;
-    return new Slice(Fragment30.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;
@@ -44118,7 +44254,7 @@ var CellSelection2 = class CellSelection3 extends Selection {
     if (sel) tr.setSelection(sel);
   }
   replaceWith(tr, node) {
-    this.replace(tr, new Slice(Fragment30.from(node), 0, 0));
+    this.replace(tr, new Slice(Fragment31.from(node), 0, 0));
   }
   forEachCell(f) {
     const table = this.$anchorCell.node(-1);
@@ -47382,6 +47518,7 @@ var import_react82 = require("@tiptap/react");
 var import_lucide_react58 = require("lucide-react");
 init_useSmartTranslations();
 init_table_dom_utils();
+init_form_control_size();
 var import_jsx_runtime102 = require("react/jsx-runtime");
 function TableFormulaBar({ editor }) {
   const t = useSmartTranslations("UEditor");
@@ -47480,7 +47617,7 @@ function TableFormulaBar({ editor }) {
               }
             },
             "aria-label": t("tableMenu.editFormula"),
-            className: "h-7 min-w-0 flex-1 rounded-md border border-border/60 bg-background px-2 font-mono text-sm text-foreground outline-none focus:border-primary/40 focus:ring-2 focus:ring-primary/15"
+            className: `h-7 min-w-0 flex-1 rounded-md bg-background px-2 font-mono text-sm text-foreground ${formControlOutlineClass}`
           }
         ),
         selectedCell.formulaState === "error" && /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(