@underverse-ui/underverse 0.1.30 → 0.1.32

package/dist/index.js

@@ -469,583 +469,557 @@ import React4, { forwardRef as forwardRef3, useId, useState as useState4 } from
 import { useTranslations } from "next-intl";
 import { Eye, EyeOff, Search, X, AlertCircle, CheckCircle, Loader2 } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var Input = forwardRef3(({
-  label,
-  error,
-  description,
-  className,
-  required,
-  variant = "default",
-  size = "md",
-  leftIcon: LeftIcon,
-  rightIcon: RightIcon,
-  clearable = false,
-  loading: loading2 = false,
-  success = false,
-  onClear,
-  hint,
-  counter = false,
-  type = "text",
-  value,
-  maxLength,
-  ...rest
-}, ref) => {
-  const [localError, setLocalError] = useState4(error);
-  const [showPassword, setShowPassword] = useState4(false);
-  const [isFocused, setIsFocused] = useState4(false);
-  const tv = useTranslations("ValidationInput");
-  const autoId = useId();
-  const needsId = !!(label || description || hint || error);
-  const resolvedId = rest.id || (needsId ? `input-${autoId}` : void 0);
-  const errMsg = error || localError;
-  const hasValue = value !== void 0 && value !== null && value !== "";
-  const charCount = typeof value === "string" ? value.length : 0;
-  const errorId = errMsg && resolvedId ? `${resolvedId}-error` : void 0;
-  const descId = !errMsg && (description || hint) && resolvedId ? `${resolvedId}-desc` : void 0;
-  const containerSpacing = size === "sm" ? "space-y-1.5" : "space-y-2";
-  const variantStyles6 = {
-    default: {
-      container: "bg-background border border-input hover:border-accent-foreground/20",
-      focus: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-      error: "border-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent"
-    },
-    filled: {
-      container: "bg-muted/50 border border-transparent hover:bg-muted/70",
-      focus: "focus-visible:outline-none focus-visible:bg-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-      error: "bg-destructive/10 border-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent"
-    },
-    outlined: {
-      container: "bg-transparent border border-border hover:border-accent-foreground/30",
-      focus: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-      error: "border-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent"
-    },
-    minimal: {
-      container: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30",
-      focus: "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none",
-      error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
-    }
-  };
-  const sizeStyles8 = {
-    sm: {
-      input: "px-3 py-1.5 text-sm h-8 md:h-7 md:py-1 md:text-xs",
-      icon: "w-4 h-4",
-      button: "h-7 w-7"
-    },
-    md: {
-      input: "px-4 py-2 text-sm h-10",
-      icon: "w-5 h-5",
-      button: "h-8 w-8"
-    },
-    lg: {
-      input: "px-5 py-4 text-base h-12",
-      icon: "w-6 h-6",
-      button: "h-10 w-10"
-    }
-  };
-  const getErrorKey = (v) => {
-    if (v.valueMissing) return "required";
-    if (v.typeMismatch) return "typeMismatch";
-    if (v.patternMismatch) return "pattern";
-    if (v.tooShort) return "tooShort";
-    if (v.tooLong) return "tooLong";
-    if (v.rangeUnderflow) return "rangeUnderflow";
-    if (v.rangeOverflow) return "rangeOverflow";
-    if (v.stepMismatch) return "stepMismatch";
-    if (v.badInput) return "badInput";
-    return "invalid";
-  };
-  const getStatusIcon = () => {
-    if (loading2) return /* @__PURE__ */ jsx5(Loader2, { className: cn("animate-spin text-muted-foreground", sizeStyles8[size].icon) });
-    if (success) return /* @__PURE__ */ jsx5(CheckCircle, { className: cn("text-success", sizeStyles8[size].icon) });
-    if (errMsg) return /* @__PURE__ */ jsx5(AlertCircle, { className: cn("text-destructive", sizeStyles8[size].icon) });
-    return null;
-  };
-  const showPasswordToggle = type === "password";
-  const actualType = showPasswordToggle && showPassword ? "text" : type;
-  const { onFocus: onFocusProp, onBlur: onBlurProp, disabled } = rest;
-  const {
-    label: _label,
-    error: _error,
-    description: _description,
-    variant: _variant,
-    size: _size,
-    leftIcon: _leftIcon,
-    rightIcon: _rightIcon,
-    clearable: _clearable,
-    loading: _loading,
-    success: _success,
-    onClear: _onClear,
-    hint: _hint,
-    counter: _counter,
-    ...restInput
-  } = rest;
-  const handleFocus = (e) => {
-    setIsFocused(true);
-    onFocusProp?.(e);
-  };
-  const handleBlur = (e) => {
-    setIsFocused(false);
-    onBlurProp?.(e);
-  };
-  const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
-  return /* @__PURE__ */ jsxs5("div", { className: cn("w-full group", containerSpacing), children: [
-    label && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs5(
-        "label",
-        {
-          className: cn(
-            // Label size follows input size
-            size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
-            "font-medium transition-colors duration-200",
-            // default color and highlight while any descendant focused
-            disabled ? "text-muted-foreground" : cn(
-              "text-foreground group-focus-within:text-primary",
-              success && "text-primary"
+var Input = forwardRef3(
+  ({
+    label,
+    error,
+    description,
+    className,
+    required,
+    variant = "default",
+    size = "md",
+    leftIcon: LeftIcon,
+    rightIcon: RightIcon,
+    clearable = false,
+    loading: loading2 = false,
+    success = false,
+    onClear,
+    hint,
+    counter = false,
+    type = "text",
+    value,
+    maxLength,
+    ...rest
+  }, ref) => {
+    const [localError, setLocalError] = useState4(error);
+    const [showPassword, setShowPassword] = useState4(false);
+    const [isFocused, setIsFocused] = useState4(false);
+    const tv = useTranslations("ValidationInput");
+    const autoId = useId();
+    const needsId = !!(label || description || hint || error);
+    const resolvedId = rest.id || (needsId ? `input-${autoId}` : void 0);
+    const errMsg = error || localError;
+    const hasValue = value !== void 0 && value !== null && value !== "";
+    const charCount = typeof value === "string" ? value.length : 0;
+    const errorId = errMsg && resolvedId ? `${resolvedId}-error` : void 0;
+    const descId = !errMsg && (description || hint) && resolvedId ? `${resolvedId}-desc` : void 0;
+    const containerSpacing = size === "sm" ? "space-y-1.5" : "space-y-2";
+    const 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"
+      },
+      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"
+      },
+      outlined: {
+        container: "bg-transparent border border-border 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"
+      },
+      minimal: {
+        container: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30",
+        focus: "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none",
+        error: "border-destructive focus-visible:outline-none focus-visible:border-destructive"
+      }
+    };
+    const sizeStyles8 = {
+      sm: {
+        input: "px-3 py-1.5 text-sm h-8 md:h-7 md:py-1 md:text-xs",
+        icon: "w-4 h-4",
+        button: "h-7 w-7"
+      },
+      md: {
+        input: "px-4 py-2 text-sm h-10",
+        icon: "w-5 h-5",
+        button: "h-8 w-8"
+      },
+      lg: {
+        input: "px-5 py-4 text-base h-12",
+        icon: "w-6 h-6",
+        button: "h-10 w-10"
+      }
+    };
+    const getErrorKey = (v) => {
+      if (v.valueMissing) return "required";
+      if (v.typeMismatch) return "typeMismatch";
+      if (v.patternMismatch) return "pattern";
+      if (v.tooShort) return "tooShort";
+      if (v.tooLong) return "tooLong";
+      if (v.rangeUnderflow) return "rangeUnderflow";
+      if (v.rangeOverflow) return "rangeOverflow";
+      if (v.stepMismatch) return "stepMismatch";
+      if (v.badInput) return "badInput";
+      return "invalid";
+    };
+    const getStatusIcon = () => {
+      if (loading2) return /* @__PURE__ */ jsx5(Loader2, { className: cn("animate-spin text-muted-foreground", sizeStyles8[size].icon) });
+      if (success) return /* @__PURE__ */ jsx5(CheckCircle, { className: cn("text-success", sizeStyles8[size].icon) });
+      if (errMsg) return /* @__PURE__ */ jsx5(AlertCircle, { className: cn("text-destructive", sizeStyles8[size].icon) });
+      return null;
+    };
+    const showPasswordToggle = type === "password";
+    const actualType = showPasswordToggle && showPassword ? "text" : type;
+    const { onFocus: onFocusProp, onBlur: onBlurProp, disabled } = rest;
+    const {
+      label: _label,
+      error: _error,
+      description: _description,
+      variant: _variant,
+      size: _size,
+      leftIcon: _leftIcon,
+      rightIcon: _rightIcon,
+      clearable: _clearable,
+      loading: _loading,
+      success: _success,
+      onClear: _onClear,
+      hint: _hint,
+      counter: _counter,
+      ...restInput
+    } = rest;
+    const handleFocus = (e) => {
+      setIsFocused(true);
+      onFocusProp?.(e);
+    };
+    const handleBlur = (e) => {
+      setIsFocused(false);
+      onBlurProp?.(e);
+    };
+    const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
+    return /* @__PURE__ */ jsxs5("div", { className: cn("w-full group", containerSpacing), children: [
+      label && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs5(
+          "label",
+          {
+            className: cn(
+              // Label size follows input size
+              size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+              "font-medium transition-colors duration-200",
+              // default color and highlight while any descendant focused
+              disabled ? "text-muted-foreground" : cn("text-foreground group-focus-within:text-primary", success && "text-primary"),
+              errMsg && "text-destructive"
             ),
-            errMsg && "text-destructive"
-          ),
-          children: [
-            label,
-            required && /* @__PURE__ */ jsx5("span", { className: "text-destructive ml-1", children: "*" })
-          ]
-        }
-      ),
-      counter && maxLength && /* @__PURE__ */ jsxs5("span", { className: cn(
-        "text-xs transition-colors duration-200",
-        charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
-        charCount >= maxLength && "text-destructive"
-      ), children: [
-        charCount,
-        "/",
-        maxLength
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "relative group", children: [
-      LeftIcon && /* @__PURE__ */ jsx5("div", { className: cn(
-        "absolute left-3 top-1/2 -translate-y-1/2 z-10",
-        "text-muted-foreground transition-colors duration-200",
-        // highlight icon when input (or controls) focused
-        "group-focus-within:text-primary"
-      ), children: /* @__PURE__ */ jsx5(LeftIcon, { className: sizeStyles8[size].icon }) }),
-      /* @__PURE__ */ jsx5(
-        "input",
-        {
-          ref,
-          type: actualType,
-          ...value !== void 0 ? { value } : {},
-          maxLength,
-          required,
-          id: resolvedId,
-          autoComplete: type === "password" ? "current-password" : type === "email" ? "email" : rest.autoComplete,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          onInvalid: (e) => {
-            e.preventDefault();
-            const key = getErrorKey(e.currentTarget.validity);
-            setLocalError(tv(key));
-          },
-          onInput: () => setLocalError(void 0),
-          "aria-invalid": !!errMsg,
-          "aria-describedby": [errorId, descId].filter(Boolean).join(" ") || void 0,
-          className: cn(
-            "w-full text-foreground transition-all duration-200 ease-out",
-            "placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            // Size styles
-            sizeStyles8[size].input,
-            radiusClass,
-            // Icon padding adjustments
-            LeftIcon && "pl-10",
-            (RightIcon || showPasswordToggle || clearable || loading2 || success || errMsg) && "pr-10",
-            // Variant styles
-            variantStyles6[variant].container,
-            errMsg ? variantStyles6[variant].error : variantStyles6[variant].focus,
-            // Reduce visual weight for sm: no default drop shadows
-            size !== "sm" && variant !== "minimal" && "shadow-sm",
-            size !== "sm" && isFocused && "shadow-md",
-            className
-          ),
-          disabled,
-          ...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__ */ jsx5(RightIcon, { className: cn("text-muted-foreground", sizeStyles8[size].icon) }),
-        clearable && hasValue && !loading2 && /* @__PURE__ */ jsx5(
-          "button",
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx5("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        counter && maxLength && /* @__PURE__ */ jsxs5(
+          "span",
+          {
+            className: cn(
+              "text-xs transition-colors duration-200",
+              charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
+              charCount >= maxLength && "text-destructive"
+            ),
+            children: [
+              charCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "relative group", children: [
+        LeftIcon && /* @__PURE__ */ jsx5(
+          "div",
           {
-            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-sm",
-              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-              "active:bg-accent active:text-accent-foreground",
-              sizeStyles8[size].button
+              "absolute left-3 top-1/2 -translate-y-1/2 z-10",
+              "text-muted-foreground transition-colors duration-200",
+              // highlight icon when input (or controls) focused
+              "group-focus-within:text-primary"
             ),
-            tabIndex: 0,
-            "aria-label": "Clear input",
-            children: /* @__PURE__ */ jsx5(X, { className: sizeStyles8[size].icon })
+            children: /* @__PURE__ */ jsx5(LeftIcon, { className: sizeStyles8[size].icon })
           }
         ),
-        showPasswordToggle && /* @__PURE__ */ jsx5(
-          "button",
+        /* @__PURE__ */ jsx5(
+          "input",
           {
-            type: "button",
-            onClick: () => setShowPassword(!showPassword),
+            ref,
+            type: actualType,
+            ...value !== void 0 ? { value } : {},
+            maxLength,
+            required,
+            id: resolvedId,
+            autoComplete: type === "password" ? "current-password" : type === "email" ? "email" : rest.autoComplete,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onInvalid: (e) => {
+              e.preventDefault();
+              const key = getErrorKey(e.currentTarget.validity);
+              setLocalError(tv(key));
+            },
+            onInput: () => setLocalError(void 0),
+            "aria-invalid": !!errMsg,
+            "aria-describedby": [errorId, descId].filter(Boolean).join(" ") || void 0,
             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].button
+              "w-full text-foreground transition-all duration-200 ease-out",
+              "placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              // Size styles
+              sizeStyles8[size].input,
+              radiusClass,
+              // Icon padding adjustments
+              LeftIcon && "pl-10",
+              (RightIcon || showPasswordToggle || clearable || loading2 || success || errMsg) && "pr-10",
+              // Variant styles
+              variantStyles6[variant].container,
+              errMsg ? variantStyles6[variant].error : variantStyles6[variant].focus,
+              // Reduce visual weight for sm: no default drop shadows
+              size !== "sm" && variant !== "minimal" && "shadow-sm",
+              size !== "sm" && isFocused && "shadow-md",
+              className
             ),
-            tabIndex: 0,
-            "aria-label": showPassword ? "Hide password" : "Show password",
-            children: showPassword ? /* @__PURE__ */ jsx5(EyeOff, { className: sizeStyles8[size].icon }) : /* @__PURE__ */ jsx5(Eye, { className: sizeStyles8[size].icon })
+            disabled,
+            ...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__ */ jsx5(RightIcon, { className: cn("text-muted-foreground", sizeStyles8[size].icon) }),
+          clearable && hasValue && !loading2 && /* @__PURE__ */ jsx5(
+            "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-sm",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                "active:bg-accent active:text-accent-foreground",
+                sizeStyles8[size].button
+              ),
+              tabIndex: 0,
+              "aria-label": "Clear input",
+              children: /* @__PURE__ */ jsx5(X, { className: sizeStyles8[size].icon })
+            }
+          ),
+          showPasswordToggle && /* @__PURE__ */ jsx5(
+            "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].button
+              ),
+              tabIndex: 0,
+              "aria-label": showPassword ? "Hide password" : "Show password",
+              children: showPassword ? /* @__PURE__ */ jsx5(EyeOff, { className: sizeStyles8[size].icon }) : /* @__PURE__ */ jsx5(Eye, { className: sizeStyles8[size].icon })
+            }
+          )
+        ] }),
+        variant === "minimal" && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: cn(
+              "absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-primary/60 transition-all duration-300",
+              // default hidden
+              "w-0 opacity-0",
+              // expand underline when focused within input container
+              "group-focus-within:w-full group-focus-within:opacity-100"
+            )
           }
         )
       ] }),
-      variant === "minimal" && /* @__PURE__ */ jsx5(
-        "div",
+      errMsg && /* @__PURE__ */ jsxs5("div", { id: errorId, className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
+        /* @__PURE__ */ jsx5(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+        /* @__PURE__ */ jsx5("span", { children: errMsg })
+      ] }),
+      (description || hint) && !errMsg && /* @__PURE__ */ jsx5(
+        "p",
         {
+          id: descId,
           className: cn(
-            "absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-primary/60 transition-all duration-300",
-            // default hidden
-            "w-0 opacity-0",
-            // expand underline when focused within input container
-            "group-focus-within:w-full group-focus-within:opacity-100"
-          )
+            "text-xs transition-colors duration-200",
+            // follow focus state of the whole field area
+            "text-muted-foreground group-focus-within:text-primary/70"
+          ),
+          children: hint || description
         }
       )
-    ] }),
-    errMsg && /* @__PURE__ */ jsxs5("div", { id: errorId, className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
-      /* @__PURE__ */ jsx5(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
-      /* @__PURE__ */ jsx5("span", { children: errMsg })
-    ] }),
-    (description || hint) && !errMsg && /* @__PURE__ */ jsx5("p", { id: descId, className: cn(
-      "text-xs transition-colors duration-200",
-      // follow focus state of the whole field area
-      "text-muted-foreground group-focus-within:text-primary/70"
-    ), children: hint || description })
-  ] });
-});
+    ] });
+  }
+);
 Input.displayName = "Input";
-var SearchInput = forwardRef3(({
-  onSearch,
-  searchDelay = 300,
-  placeholder = "Search...",
-  ...props
-}, ref) => {
-  const [searchValue, setSearchValue] = useState4(props.value || "");
-  React4.useEffect(() => {
-    if (!onSearch) return;
-    const timer = setTimeout(() => {
-      onSearch(searchValue);
-    }, searchDelay);
-    return () => clearTimeout(timer);
-  }, [searchValue, onSearch, searchDelay]);
-  return /* @__PURE__ */ jsx5(
-    Input,
-    {
-      ref,
-      type: "search",
-      leftIcon: Search,
-      placeholder,
-      clearable: true,
-      value: searchValue,
-      onChange: (e) => setSearchValue(e.target.value),
-      onClear: () => setSearchValue(""),
-      ...props
-    }
-  );
-});
-SearchInput.displayName = "SearchInput";
-var PasswordInput = forwardRef3(({
-  showStrength = false,
-  strengthLabels = ["Weak", "Fair", "Good", "Strong"],
-  ...props
-}, ref) => {
-  const getPasswordStrength = (password) => {
-    let score = 0;
-    if (password.length >= 8) score++;
-    if (/[a-z]/.test(password)) score++;
-    if (/[A-Z]/.test(password)) score++;
-    if (/[0-9]/.test(password)) score++;
-    if (/[^A-Za-z0-9]/.test(password)) score++;
-    return Math.min(score, 4);
-  };
-  const strength = showStrength && typeof props.value === "string" ? getPasswordStrength(props.value) : 0;
-  const strengthColors = ["bg-destructive", "bg-warning", "bg-warning", "bg-success"];
-  const strengthLabel = strengthLabels[strength - 1];
-  return /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx5(Input, { ref, type: "password", ...props }),
-    showStrength && props.value && /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx5("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx5(
-        "div",
-        {
-          className: cn(
-            "h-1 flex-1 rounded-full transition-colors duration-300",
-            level <= strength ? strengthColors[strength - 1] : "bg-muted"
-          )
-        },
-        level
-      )) }),
-      strengthLabel && /* @__PURE__ */ jsx5("p", { className: cn(
-        "text-xs font-medium",
-        strength <= 1 ? "text-destructive" : strength <= 2 ? "text-warning" : strength <= 3 ? "text-warning" : "text-success"
-      ), children: strengthLabel })
-    ] })
-  ] });
-});
-PasswordInput.displayName = "PasswordInput";
-var NumberInput = forwardRef3(({
-  min,
-  max,
-  step = 1,
-  showSteppers = true,
-  onIncrement,
-  onDecrement,
-  formatThousands = false,
-  locale = "vi-VN",
-  value,
-  onChange,
-  ...props
-}, ref) => {
-  const toNumber = (v) => {
-    if (v === "" || v === void 0 || v === null) return 0;
-    const n = Number(v);
-    return Number.isFinite(n) ? n : 0;
-  };
-  const format = React4.useCallback(
-    (n) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(n),
-    [locale]
-  );
-  const parse = (s) => {
-    const digits = (s || "").replace(/\D+/g, "");
-    return digits ? Number(digits) : NaN;
-  };
-  const [displayValue, setDisplayValue] = React4.useState(
-    formatThousands ? value !== void 0 && value !== null && value !== "" ? format(toNumber(value)) : "" : String(value ?? "")
-  );
-  const currentValue = toNumber(value);
-  React4.useEffect(() => {
-    if (formatThousands) {
-      const next = value === "" || value === void 0 || value === null ? "" : format(toNumber(value));
-      setDisplayValue((prev) => prev === next ? prev : next);
-    } else {
-      const next = String(value ?? "");
-      setDisplayValue((prev) => prev === next ? prev : next);
-    }
-  }, [value, formatThousands, locale, format]);
-  const handleIncrement = () => {
-    if (onIncrement) {
-      onIncrement();
-    } else if (onChange) {
-      const newValue = Math.min(currentValue + step, max ?? Infinity);
-      if (formatThousands) setDisplayValue(format(newValue));
-      onChange({ target: { value: newValue.toString() } });
-    }
-  };
-  const handleDecrement = () => {
-    if (onDecrement) {
-      onDecrement();
-    } else if (onChange) {
-      const newValue = Math.max(currentValue - step, min ?? -Infinity);
-      if (formatThousands) setDisplayValue(format(newValue));
-      onChange({ target: { value: newValue.toString() } });
-    }
-  };
-  return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx5(
+var SearchInput = forwardRef3(
+  ({ onSearch, searchDelay = 300, placeholder = "Search...", ...props }, ref) => {
+    const [searchValue, setSearchValue] = useState4(props.value || "");
+    React4.useEffect(() => {
+      if (!onSearch) return;
+      const timer = setTimeout(() => {
+        onSearch(searchValue);
+      }, searchDelay);
+      return () => clearTimeout(timer);
+    }, [searchValue, onSearch, searchDelay]);
+    return /* @__PURE__ */ jsx5(
       Input,
       {
         ref,
-        type: formatThousands ? "text" : "number",
-        min,
-        max,
-        step,
-        rightIcon: showSteppers ? void 0 : props.rightIcon,
-        value: displayValue,
-        onChange: (e) => {
-          if (!onChange) return;
-          if (!formatThousands) return onChange(e);
-          const raw = e.target.value;
-          const parsed = parse(raw);
-          if (Number.isNaN(parsed)) {
-            setDisplayValue("");
-            onChange({ target: { value: "" } });
-          } else {
-            const bounded = Math.min(Math.max(parsed, min ?? -Infinity), max ?? Infinity);
-            setDisplayValue(format(bounded));
-            onChange({ target: { value: bounded.toString() } });
+        type: "search",
+        leftIcon: Search,
+        placeholder,
+        clearable: true,
+        value: searchValue,
+        onChange: (e) => setSearchValue(e.target.value),
+        onClear: () => setSearchValue(""),
+        ...props
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+var PasswordInput = forwardRef3(
+  ({ showStrength = false, strengthLabels = ["Weak", "Fair", "Good", "Strong"], ...props }, ref) => {
+    const getPasswordStrength = (password) => {
+      let score = 0;
+      if (password.length >= 8) score++;
+      if (/[a-z]/.test(password)) score++;
+      if (/[A-Z]/.test(password)) score++;
+      if (/[0-9]/.test(password)) score++;
+      if (/[^A-Za-z0-9]/.test(password)) score++;
+      return Math.min(score, 4);
+    };
+    const strength = showStrength && typeof props.value === "string" ? getPasswordStrength(props.value) : 0;
+    const strengthColors = ["bg-destructive", "bg-warning", "bg-warning", "bg-success"];
+    const strengthLabel = strengthLabels[strength - 1];
+    return /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx5(Input, { ref, type: "password", ...props }),
+      showStrength && props.value && /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx5("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: cn(
+              "h-1 flex-1 rounded-full transition-colors duration-300",
+              level <= strength ? strengthColors[strength - 1] : "bg-muted"
+            )
+          },
+          level
+        )) }),
+        strengthLabel && /* @__PURE__ */ jsx5(
+          "p",
+          {
+            className: cn(
+              "text-xs font-medium",
+              strength <= 1 ? "text-destructive" : strength <= 2 ? "text-warning" : strength <= 3 ? "text-warning" : "text-success"
+            ),
+            children: strengthLabel
           }
-        },
-        ...props,
-        className: cn(
-          showSteppers && [
-            "pr-12",
-            // Hide native browser steppers
-            "[&::-webkit-outer-spin-button]:appearance-none",
-            "[&::-webkit-inner-spin-button]:appearance-none",
-            "[&::-webkit-inner-spin-button]:m-0",
-            "appearance-none"
-          ],
-          props.className
         )
+      ] })
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var NumberInput = forwardRef3(
+  ({ min, max, step = 1, showSteppers = true, onIncrement, onDecrement, formatThousands = false, locale = "vi-VN", value, onChange, ...props }, ref) => {
+    const toNumber = (v) => {
+      if (v === "" || v === void 0 || v === null) return 0;
+      const n = Number(v);
+      return Number.isFinite(n) ? n : 0;
+    };
+    const format = React4.useCallback((n) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(n), [locale]);
+    const parse = (s) => {
+      const digits = (s || "").replace(/\D+/g, "");
+      return digits ? Number(digits) : NaN;
+    };
+    const [displayValue, setDisplayValue] = React4.useState(
+      formatThousands ? value !== void 0 && value !== null && value !== "" ? format(toNumber(value)) : "" : String(value ?? "")
+    );
+    const currentValue = toNumber(value);
+    React4.useEffect(() => {
+      if (formatThousands) {
+        const next = value === "" || value === void 0 || value === null ? "" : format(toNumber(value));
+        setDisplayValue((prev) => prev === next ? prev : next);
+      } else {
+        const next = String(value ?? "");
+        setDisplayValue((prev) => prev === next ? prev : next);
+      }
+    }, [value, formatThousands, locale, format]);
+    const handleIncrement = () => {
+      if (onIncrement) {
+        onIncrement();
+      } else if (onChange) {
+        const newValue = Math.min(currentValue + step, max ?? Infinity);
+        if (formatThousands) setDisplayValue(format(newValue));
+        onChange({ target: { value: newValue.toString() } });
       }
-    ),
-    showSteppers && /* @__PURE__ */ jsxs5("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex flex-col gap-0.5", children: [
+    };
+    const handleDecrement = () => {
+      if (onDecrement) {
+        onDecrement();
+      } else if (onChange) {
+        const newValue = Math.max(currentValue - step, min ?? -Infinity);
+        if (formatThousands) setDisplayValue(format(newValue));
+        onChange({ target: { value: newValue.toString() } });
+      }
+    };
+    return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
       /* @__PURE__ */ jsx5(
-        "button",
+        Input,
         {
-          type: "button",
-          onClick: handleIncrement,
-          disabled: max !== void 0 && currentValue >= max,
-          className: cn(
-            "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
-            "hover:bg-accent focus:outline-none focus:bg-accent",
-            "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-            "text-muted-foreground hover:text-foreground"
-          ),
-          "aria-label": "Increase value",
-          children: /* @__PURE__ */ jsx5(
-            "svg",
-            {
-              width: "8",
-              height: "8",
-              viewBox: "0 0 8 8",
-              fill: "none",
-              className: "flex-shrink-0",
-              children: /* @__PURE__ */ jsx5(
-                "path",
-                {
-                  d: "M4 2L6 6H2L4 2Z",
-                  fill: "currentColor"
-                }
-              )
+          ref,
+          type: formatThousands ? "text" : "number",
+          min,
+          max,
+          step,
+          rightIcon: showSteppers ? void 0 : props.rightIcon,
+          value: displayValue,
+          onChange: (e) => {
+            if (!onChange) return;
+            if (!formatThousands) return onChange(e);
+            const raw = e.target.value;
+            const parsed = parse(raw);
+            if (Number.isNaN(parsed)) {
+              setDisplayValue("");
+              onChange({ target: { value: "" } });
+            } else {
+              const bounded = Math.min(Math.max(parsed, min ?? -Infinity), max ?? Infinity);
+              setDisplayValue(format(bounded));
+              onChange({ target: { value: bounded.toString() } });
             }
+          },
+          ...props,
+          className: cn(
+            showSteppers && [
+              "pr-12",
+              // Hide native browser steppers
+              "[&::-webkit-outer-spin-button]:appearance-none",
+              "[&::-webkit-inner-spin-button]:appearance-none",
+              "[&::-webkit-inner-spin-button]:m-0",
+              "appearance-none"
+            ],
+            props.className
           )
         }
       ),
+      showSteppers && /* @__PURE__ */ jsxs5("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: handleIncrement,
+            disabled: max !== void 0 && currentValue >= max,
+            className: cn(
+              "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
+              "hover:bg-accent focus:outline-none focus:bg-accent",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+              "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-label": "Increase value",
+            children: /* @__PURE__ */ jsx5("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "flex-shrink-0", children: /* @__PURE__ */ jsx5("path", { d: "M4 2L6 6H2L4 2Z", fill: "currentColor" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: handleDecrement,
+            disabled: min !== void 0 && currentValue <= min,
+            className: cn(
+              "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
+              "hover:bg-accent focus:outline-none focus:bg-accent",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+              "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-label": "Decrease value",
+            children: /* @__PURE__ */ jsx5("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "flex-shrink-0", children: /* @__PURE__ */ jsx5("path", { d: "M4 6L2 2H6L4 6Z", fill: "currentColor" }) })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+var Textarea = forwardRef3(
+  ({ label, error, description, variant = "default", resize = "vertical", counter = false, className, required, value, maxLength, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState4(false);
+    const charCount = typeof value === "string" ? value.length : 0;
+    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",
+      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 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 hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none"
+    };
+    const resizeClasses = {
+      none: "resize-none",
+      vertical: "resize-y",
+      horizontal: "resize-x",
+      both: "resize"
+    };
+    return /* @__PURE__ */ jsxs5("div", { className: "w-full space-y-2", children: [
+      label && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs5(
+          "label",
+          {
+            className: cn(
+              "text-sm font-medium transition-colors duration-200",
+              isFocused ? "text-primary" : "text-foreground",
+              error && "text-destructive"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx5("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        counter && maxLength && /* @__PURE__ */ jsxs5(
+          "span",
+          {
+            className: cn(
+              "text-xs transition-colors duration-200",
+              charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
+              charCount >= maxLength && "text-destructive"
+            ),
+            children: [
+              charCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx5(
-        "button",
+        "textarea",
         {
-          type: "button",
-          onClick: handleDecrement,
-          disabled: min !== void 0 && currentValue <= min,
+          ref,
+          value,
+          maxLength,
+          required,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
           className: cn(
-            "flex items-center justify-center w-4 h-4 rounded-sm transition-colors",
-            "hover:bg-accent focus:outline-none focus:bg-accent",
-            "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-            "text-muted-foreground hover:text-foreground"
+            "w-full rounded-lg px-4 py-3 text-sm text-foreground transition-all duration-200",
+            "placeholder:text-muted-foreground focus:outline-none min-h-[80px]",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            variantStyles6[variant],
+            // DÒNG NÀY ĐÃ ĐƯỢC CẬP NHẬT:
+            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",
+            resizeClasses[resize],
+            isFocused && "shadow-md",
+            variant !== "minimal" && "shadow-sm",
+            className
           ),
-          "aria-label": "Decrease value",
-          children: /* @__PURE__ */ jsx5(
-            "svg",
-            {
-              width: "8",
-              height: "8",
-              viewBox: "0 0 8 8",
-              fill: "none",
-              className: "flex-shrink-0",
-              children: /* @__PURE__ */ jsx5(
-                "path",
-                {
-                  d: "M4 6L2 2H6L4 6Z",
-                  fill: "currentColor"
-                }
-              )
-            }
-          )
+          ...props
         }
-      )
-    ] })
-  ] });
-});
-NumberInput.displayName = "NumberInput";
-var Textarea = forwardRef3(({
-  label,
-  error,
-  description,
-  variant = "default",
-  resize = "vertical",
-  counter = false,
-  className,
-  required,
-  value,
-  maxLength,
-  ...props
-}, ref) => {
-  const [isFocused, setIsFocused] = useState4(false);
-  const charCount = typeof value === "string" ? value.length : 0;
-  const variantStyles6 = {
-    default: "bg-background border border-input hover:border-accent-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-    filled: "bg-muted/50 border border-transparent hover:bg-muted/70 focus-visible:outline-none focus-visible:bg-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-    outlined: "bg-transparent border border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-    minimal: "bg-transparent border-0 border-b border-border hover:border-accent-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 rounded-none"
-  };
-  const resizeClasses = {
-    none: "resize-none",
-    vertical: "resize-y",
-    horizontal: "resize-x",
-    both: "resize"
-  };
-  return /* @__PURE__ */ jsxs5("div", { className: "w-full space-y-2", children: [
-    label && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs5("label", { className: cn(
-        "text-sm font-medium transition-colors duration-200",
-        isFocused ? "text-primary" : "text-foreground",
-        error && "text-destructive"
-      ), children: [
-        label,
-        required && /* @__PURE__ */ jsx5("span", { className: "text-destructive ml-1", children: "*" })
+      ),
+      error && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
+        /* @__PURE__ */ jsx5(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+        /* @__PURE__ */ jsx5("span", { children: error })
       ] }),
-      counter && maxLength && /* @__PURE__ */ jsxs5("span", { className: cn(
-        "text-xs transition-colors duration-200",
-        charCount > maxLength * 0.9 ? "text-warning" : "text-muted-foreground",
-        charCount >= maxLength && "text-destructive"
-      ), children: [
-        charCount,
-        "/",
-        maxLength
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx5(
-      "textarea",
-      {
-        ref,
-        value,
-        maxLength,
-        required,
-        onFocus: () => setIsFocused(true),
-        onBlur: () => setIsFocused(false),
-        className: cn(
-          "w-full rounded-lg px-4 py-3 text-sm text-foreground transition-all duration-200",
-          "placeholder:text-muted-foreground focus:outline-none min-h-[80px]",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          variantStyles6[variant],
-          error && "border-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:border-transparent",
-          resizeClasses[resize],
-          isFocused && "shadow-md",
-          variant !== "minimal" && "shadow-sm",
-          className
-        ),
-        ...props
-      }
-    ),
-    error && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
-      /* @__PURE__ */ jsx5(AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
-      /* @__PURE__ */ jsx5("span", { children: error })
-    ] }),
-    description && !error && /* @__PURE__ */ jsx5("p", { className: cn(
-      "text-xs transition-colors duration-200",
-      isFocused ? "text-primary/70" : "text-muted-foreground"
-    ), children: description })
-  ] });
-});
+      description && !error && /* @__PURE__ */ jsx5("p", { className: cn("text-xs transition-colors duration-200", isFocused ? "text-primary/70" : "text-muted-foreground"), children: description })
+    ] });
+  }
+);
 Textarea.displayName = "Textarea";
 var Input_default = Input;
 
@@ -6038,8 +6012,10 @@ function OverlayControls({
           break;
         case "f":
         case "F":
-          e.preventDefault();
-          onToggleFullscreen?.();
+          if (!e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+            onToggleFullscreen?.();
+          }
           break;
         case "m":
         case "M":