@underverse-ui/underverse 2.0.7 → 2.0.8

package/dist/index.js

@@ -854,7 +854,7 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
 var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
 
 // src/components/Input.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var Input = forwardRef3(
   ({
     label,
@@ -877,6 +877,7 @@ var Input = forwardRef3(
     value,
     maxLength,
     rightAddon,
+    rightSection,
     borderMode,
     ...rest
   }, ref) => {
@@ -1048,7 +1049,7 @@ var Input = forwardRef3(
               radiusClass,
               // Icon padding adjustments
               LeftIcon && "pl-10",
-              (RightIcon || showPasswordToggle || clearable || loading2 || success || errMsg) && "pr-10",
+              (RightIcon || showPasswordToggle || clearable || loading2 || success || errMsg || rightSection) && "pr-10",
               // Variant styles
               variantStyles5[variant].container,
               errMsg ? variantStyles5[variant].error : variantStyles5[variant].focus,
@@ -1061,45 +1062,57 @@ var Input = forwardRef3(
             ...restInput
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
-          getStatusIcon(),
-          RightIcon && !loading2 && !success && !errMsg && /* @__PURE__ */ jsx6(RightIcon, { className: cn("text-muted-foreground", sizeStyles7[size].icon) }),
-          clearable && hasValue && !loading2 && /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                if (onClear) return onClear();
-                rest.onChange?.({ target: { value: "" } });
-              },
-              className: cn(
-                "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-md",
-                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                "active:bg-accent active:text-accent-foreground",
-                sizeStyles7[size].iconButton
-              ),
-              tabIndex: 0,
-              "aria-label": gi18n.clearInput ?? "Clear input",
-              children: /* @__PURE__ */ jsx6(X, { className: sizeStyles7[size].icon })
-            }
-          ),
-          showPasswordToggle && /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowPassword(!showPassword),
-              className: cn(
-                "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-full",
-                "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring/40",
-                "active:bg-accent/50 active:text-accent-foreground",
-                sizeStyles7[size].iconButton
-              ),
-              tabIndex: 0,
-              "aria-label": showPassword ? gi18n.hidePassword ?? "Hide password" : gi18n.showPassword ?? "Show password",
-              children: showPassword ? /* @__PURE__ */ jsx6(EyeOff, { className: sizeStyles7[size].icon }) : /* @__PURE__ */ jsx6(Eye, { className: sizeStyles7[size].icon })
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: cn(
+              "absolute z-10 flex items-center gap-1",
+              rightSection ? "inset-y-0 right-0" : "right-3 top-1/2 -translate-y-1/2"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-1", rightSection && "px-1"), children: [
+                getStatusIcon(),
+                RightIcon && !loading2 && !success && !errMsg && /* @__PURE__ */ jsx6(RightIcon, { className: cn("text-muted-foreground", sizeStyles7[size].icon) }),
+                clearable && hasValue && !loading2 && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      if (onClear) return onClear();
+                      rest.onChange?.({ target: { value: "" } });
+                    },
+                    className: cn(
+                      "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-md",
+                      "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                      "active:bg-accent active:text-accent-foreground",
+                      sizeStyles7[size].iconButton
+                    ),
+                    tabIndex: 0,
+                    "aria-label": gi18n.clearInput ?? "Clear input",
+                    children: /* @__PURE__ */ jsx6(X, { className: sizeStyles7[size].icon })
+                  }
+                ),
+                showPasswordToggle && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowPassword(!showPassword),
+                    className: cn(
+                      "flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors rounded-full",
+                      "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring/40",
+                      "active:bg-accent/50 active:text-accent-foreground",
+                      sizeStyles7[size].iconButton
+                    ),
+                    tabIndex: 0,
+                    "aria-label": showPassword ? gi18n.hidePassword ?? "Hide password" : gi18n.showPassword ?? "Show password",
+                    children: showPassword ? /* @__PURE__ */ jsx6(EyeOff, { className: sizeStyles7[size].icon }) : /* @__PURE__ */ jsx6(Eye, { className: sizeStyles7[size].icon })
+                  }
+                )
+              ] }),
+              rightSection
+            ]
+          }
+        ),
         rightAddon,
         variant === "minimal" && /* @__PURE__ */ jsx6(
           "div",
@@ -1134,27 +1147,128 @@ var Input = forwardRef3(
   }
 );
 Input.displayName = "Input";
+var searchButtonWidthStyles = {
+  xs: "w-6",
+  sm: "w-8",
+  md: "w-10",
+  lg: "w-12",
+  xl: "w-14"
+};
+var searchButtonPaddingStyles = {
+  xs: "pr-14",
+  sm: "pr-18",
+  md: "pr-20",
+  lg: "pr-24",
+  xl: "pr-28"
+};
+var searchButtonRadiusStyles = {
+  none: "rounded-r-none",
+  sm: "rounded-r-sm",
+  md: "rounded-r-md",
+  lg: "rounded-r-lg",
+  xl: "rounded-r-xl",
+  "2xl": "rounded-r-2xl",
+  "3xl": "rounded-r-3xl",
+  full: "rounded-r-full",
+  daewoo: "rounded-r",
+  infiniq: "rounded-r-full"
+};
 var SearchInput = forwardRef3(
-  ({ onSearch, searchDelay = 300, placeholder = "Search\u2026", ...props }, ref) => {
-    const [searchValue, setSearchValue] = useState3(props.value || "");
+  ({
+    mode = "default",
+    onSearch,
+    searchDelay = 300,
+    searchButtonLabel = "Search",
+    placeholder = "Search\u2026",
+    value,
+    defaultValue,
+    onChange,
+    onClear,
+    onKeyDown,
+    clearable = true,
+    size = "md",
+    className,
+    disabled,
+    loading: loading2 = false,
+    rightSection,
+    borderMode,
+    ...props
+  }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue ?? "");
+    const isControlled = value !== void 0;
+    const searchValue = isControlled ? value : uncontrolledValue;
+    const searchText = String(searchValue ?? "");
+    const globalConfig = useUnderverseUIConfig();
+    const resolvedBorderMode = borderMode ?? globalConfig.input?.borderMode ?? globalConfig.borderMode ?? "full";
+    const searchButtonRadiusClass = searchButtonRadiusStyles[resolvedBorderMode] ?? getBorderRadiusClass(resolvedBorderMode);
+    const triggerSearch = useCallback2(() => {
+      onSearch?.(searchText);
+    }, [onSearch, searchText]);
     React5.useEffect(() => {
-      if (!onSearch) return;
+      if (!onSearch || mode !== "default") return;
       const timer = setTimeout(() => {
-        onSearch(searchValue);
+        onSearch(searchText);
       }, searchDelay);
       return () => clearTimeout(timer);
-    }, [searchValue, onSearch, searchDelay]);
+    }, [mode, onSearch, searchDelay, searchText]);
+    const searchButton = mode === "button" ? /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: triggerSearch,
+        disabled: disabled || loading2,
+        className: cn(
+          "flex h-full shrink-0 cursor-pointer items-center justify-center border-l border-border bg-transparent text-foreground",
+          "transition-colors hover:bg-accent hover:text-accent-foreground",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
+          searchButtonWidthStyles[size],
+          searchButtonRadiusClass
+        ),
+        "aria-label": searchButtonLabel,
+        children: /* @__PURE__ */ jsx6(Search, { className: formControlSizeStyles[size].icon, "aria-hidden": "true" })
+      }
+    ) : null;
     return /* @__PURE__ */ jsx6(
       Input,
       {
         ref,
         type: "search",
-        leftIcon: Search,
+        leftIcon: mode === "default" ? Search : void 0,
         placeholder,
-        clearable: true,
+        clearable,
         value: searchValue,
-        onChange: (e) => setSearchValue(e.target.value),
-        onClear: () => setSearchValue(""),
+        onChange: (event) => {
+          if (!isControlled) setUncontrolledValue(event.target.value);
+          onChange?.(event);
+        },
+        onClear: () => {
+          if (!isControlled) {
+            setUncontrolledValue("");
+          } else if (!onClear && onChange) {
+            onChange({ target: { value: "" }, currentTarget: { value: "" } });
+          }
+          onClear?.();
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (mode === "button" && event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) {
+            triggerSearch();
+          }
+        },
+        size,
+        className: cn(
+          "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
+          mode === "button" && searchButtonPaddingStyles[size],
+          className
+        ),
+        disabled,
+        loading: loading2,
+        rightSection: mode === "button" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          rightSection,
+          searchButton
+        ] }) : rightSection,
+        borderMode,
         ...props
       }
     );
@@ -2996,7 +3110,7 @@ var Skeleton_default = Skeleton;
 // src/components/Progress.tsx
 import React13 from "react";
 import { Check as Check2, X as X4, Clock } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: "bg-muted-foreground",
   primary: "bg-linear-to-r from-primary via-primary/90 to-primary",
@@ -3157,7 +3271,7 @@ var CircularProgress = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx15("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: children ? children : /* @__PURE__ */ jsxs11(Fragment2, { children: [
+        /* @__PURE__ */ jsx15("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: children ? children : /* @__PURE__ */ jsxs11(Fragment3, { children: [
           getContentIcon(),
           showValue && !indeterminate && /* @__PURE__ */ jsx15("span", { className: cn("text-sm font-semibold", isComplete ? "text-success" : isError ? "text-destructive" : "text-foreground"), children: isComplete ? "\u2713" : isError ? "\u2717" : `${Math.round(percentage)}%` }),
           indeterminate && /* @__PURE__ */ jsx15(Clock, { className: "w-4 h-4 text-muted-foreground animate-pulse" })
@@ -4473,7 +4587,7 @@ import * as React19 from "react";
 import { useId as useId4 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronDown, Search as Search4, SearchX, Check as Check3, X as X8 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var getOptionLabel = (option) => {
   return typeof option === "string" ? option : option.label;
 };
@@ -4966,7 +5080,7 @@ var Combobox = ({
       className
     )
   };
-  const triggerContents = /* @__PURE__ */ jsxs18(Fragment3, { children: [
+  const triggerContents = /* @__PURE__ */ jsxs18(Fragment4, { children: [
     selectedIcon && /* @__PURE__ */ jsx22("span", { className: cn("mr-2 flex shrink-0 items-center justify-center overflow-hidden text-primary", formControlSizeStyles[size].icon), children: selectedIcon }),
     /* @__PURE__ */ jsx22("span", { className: cn(formControlValueClass, "text-left", !displayValue && "text-muted-foreground", fontBold && "font-semibold"), children: renderValue && selectedOption ? renderValue(selectedOption) : displayValue || placeholder }),
     /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1.5 ml-2 shrink-0", children: [
@@ -5814,7 +5928,7 @@ function parseDateString(str, locale = "en") {
 import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, Sparkles, X as XIcon } from "lucide-react";
 import * as React23 from "react";
 import { useId as useId5 } from "react";
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function normalizeToLocalDate(date) {
   if (!date) return null;
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
@@ -6205,7 +6319,7 @@ var DatePicker = ({
         }
       )
     ] }),
-    viewMode === "calendar" && /* @__PURE__ */ jsxs20(Fragment4, { children: [
+    viewMode === "calendar" && /* @__PURE__ */ jsxs20(Fragment5, { children: [
       /* @__PURE__ */ jsx27("div", { className: cn("grid grid-cols-7 gap-1 mb-2 px-0.5"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
         (day, idx) => /* @__PURE__ */ jsx27(
           "div",
@@ -6976,7 +7090,7 @@ var DateRangePicker = ({
         }
       )
     ] }),
-    viewMode === "calendar" && /* @__PURE__ */ jsxs20(Fragment4, { children: [
+    viewMode === "calendar" && /* @__PURE__ */ jsxs20(Fragment5, { children: [
       /* @__PURE__ */ jsx27("div", { className: cn("grid grid-cols-7 gap-1 px-0.5", size === "sm" ? "mb-1" : size === "lg" ? "mb-3" : "mb-2"), children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ jsx27(
         "div",
         {
@@ -7400,7 +7514,7 @@ function getLeapMonthOffset(a11, timeZone) {
 }
 
 // src/components/LunarDatePicker.tsx
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function toSolarDate(value) {
   if (!value) return null;
   const solar = lunarToSolar({
@@ -7904,7 +8018,7 @@ var LunarDatePicker = ({
         }
       )
     ] }),
-    viewMode === "calendar" && /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    viewMode === "calendar" && /* @__PURE__ */ jsxs21(Fragment6, { children: [
       /* @__PURE__ */ jsx28("div", { className: cn("grid grid-cols-7 gap-1 mb-2 px-0.5"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
         (day, idx) => /* @__PURE__ */ jsx28(
           "div",
@@ -8544,7 +8658,7 @@ var LunarDateRangePicker = ({
         }
       )
     ] }),
-    viewMode === "calendar" && /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    viewMode === "calendar" && /* @__PURE__ */ jsxs21(Fragment6, { children: [
       /* @__PURE__ */ jsx28("div", { className: cn("grid grid-cols-7 gap-1 px-0.5", size === "sm" ? "mb-1" : size === "lg" ? "mb-3" : "mb-2"), children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ jsx28(
         "div",
         {
@@ -9611,7 +9725,7 @@ function MonthYearPicker({
 }
 
 // src/components/Calendar.tsx
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var VIETNAM_HOLIDAYS = [
   { date: "01-01", name: "T\u1EBFt D\u01B0\u01A1ng l\u1ECBch", recurring: true },
   { date: "04-30", name: "Gi\u1EA3i ph\xF3ng mi\u1EC1n Nam", recurring: true },
@@ -10106,7 +10220,7 @@ function Calendar4({
         }
       )
     ] }),
-    display === "week" ? /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    display === "week" ? /* @__PURE__ */ jsxs23(Fragment8, { children: [
       showWeekdays && /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ jsx30("div", { className: cn(sz.head), children: w }, `w-${w}`)) }),
       /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid), children: weekDays.map((d, idx) => {
         const inMonth = true;
@@ -10262,7 +10376,7 @@ function Calendar4({
 // src/components/TimePicker.tsx
 import * as React27 from "react";
 import { Clock as Clock2, X as X10, Check as Check5, Sun, Moon, Sunset, Coffee } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var pad = (n) => n.toString().padStart(2, "0");
 var clamp2 = (n, min, max) => Math.min(max, Math.max(min, n));
 var WHEEL_ITEM_HEIGHT2 = {
@@ -11299,7 +11413,7 @@ function TimePicker({
           }
         );
       })(),
-      includeSeconds && /* @__PURE__ */ jsxs24(Fragment8, { children: [
+      includeSeconds && /* @__PURE__ */ jsxs24(Fragment9, { children: [
         /* @__PURE__ */ jsx31("div", { className: cn("flex flex-col items-center justify-center", panelSz.separatorPad, compactPanel && "pt-6"), children: /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsx31("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" }),
           /* @__PURE__ */ jsx31("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" })
@@ -13286,7 +13400,7 @@ function useVisibleSlotRange(args) {
 }
 
 // src/components/CalendarTimeline/CalendarTimeline.tsx
-import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
 function CalendarTimeline({
   resources,
   events,
@@ -14612,7 +14726,7 @@ function CalendarTimeline({
                                     ]
                                   }
                                 ),
-                                !isViewOnly && (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ jsxs31(Fragment10, { children: [
+                                !isViewOnly && (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ jsxs31(Fragment11, { children: [
                                   /* @__PURE__ */ jsx38(
                                     "div",
                                     {
@@ -14792,7 +14906,7 @@ import * as React35 from "react";
 import { useId as useId10 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader23, X as X12, Sparkles as Sparkles3 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
 var comboboxScrollClassName2 = [
   "scrollbar-thin",
   "[scrollbar-width:thin]",
@@ -15271,7 +15385,7 @@ var MultiCombobox = ({
         !!effectiveError && "border-destructive focus-visible:ring-destructive/30"
       ),
       children: [
-        /* @__PURE__ */ jsx39("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs32(Fragment11, { children: [
+        /* @__PURE__ */ jsx39("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs32(Fragment12, { children: [
           visibleTags.map((option) => {
             if (renderTag) {
               return /* @__PURE__ */ jsx39("span", { className: "inline-flex max-h-full min-w-0 shrink overflow-hidden", children: renderTag(option, () => handleRemove(option.value)) }, option.value);
@@ -15873,7 +15987,7 @@ var ToggleGroup = (props) => {
 
 // src/components/Slider.tsx
 import * as React37 from "react";
-import { Fragment as Fragment12, jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
 var SIZE_STYLES = {
   sm: {
     track: "h-1",
@@ -16131,7 +16245,7 @@ var Slider = React37.forwardRef(
                 tooltipClassName
               }
             ),
-            isRange && /* @__PURE__ */ jsxs34(Fragment12, { children: [
+            isRange && /* @__PURE__ */ jsxs34(Fragment13, { children: [
               /* @__PURE__ */ jsx41(
                 SliderTooltip,
                 {
@@ -16227,7 +16341,7 @@ var Slider = React37.forwardRef(
               }
               const minZ = activeThumb === "min" ? "z-20" : "z-10";
               const maxZ = activeThumb === "max" ? "z-20" : "z-10";
-              return /* @__PURE__ */ jsxs34(Fragment12, { children: [
+              return /* @__PURE__ */ jsxs34(Fragment13, { children: [
                 /* @__PURE__ */ jsx41(
                   "div",
                   {
@@ -16290,7 +16404,7 @@ Slider.displayName = "Slider";
 // src/components/OverlayControls.tsx
 import { Dot as Dot2, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React38 from "react";
-import { Fragment as Fragment13, jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
 function resolveKeyboardEventElement(target) {
   if (target instanceof Element) return target;
   if (target instanceof Node) return target.parentElement;
@@ -16535,7 +16649,7 @@ function OverlayControls({
   const handleSliderMouseLeave = () => {
     setPreviewData(null);
   };
-  return /* @__PURE__ */ jsxs35(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs35(Fragment14, { children: [
     keyboardFeedback && /* @__PURE__ */ jsx42(
       "div",
       {
@@ -17959,7 +18073,7 @@ import {
   Upload as Upload2
 } from "lucide-react";
 import { useCallback as useCallback16, useMemo as useMemo19, useRef as useRef19, useState as useState29 } from "react";
-import { Fragment as Fragment14, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
 var formatFileSize = (bytes) => {
   if (bytes === 0) return "0 Bytes";
   const k = 1024;
@@ -18390,7 +18504,7 @@ function FileUpload({
             ] }),
             /* @__PURE__ */ jsx45("p", { className: cn("text-muted-foreground", size === "lg" ? "text-sm" : "text-xs"), children: supportedFormatsText || t("supportedFormats") || `Max ${maxSize}MB per file \u2022 Up to ${maxFiles} files` })
           ] }),
-          variant === "compact" && /* @__PURE__ */ jsxs38(Fragment14, { children: [
+          variant === "compact" && /* @__PURE__ */ jsxs38(Fragment15, { children: [
             /* @__PURE__ */ jsx45("div", { className: cn("shrink-0 rounded-lg flex items-center justify-center", "bg-primary/10", currentSize.iconSize), children: /* @__PURE__ */ jsx45(Upload2, { className: cn("text-primary", size === "sm" ? "w-4 h-4" : "w-5 h-5") }) }),
             /* @__PURE__ */ jsxs38("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx45("p", { className: cn("font-medium truncate", currentSize.text), children: dragDropText || t("dragDropText") || "Drop files here or" }),
@@ -18457,7 +18571,7 @@ function FileUpload({
 // src/components/Carousel.tsx
 import * as React40 from "react";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight8 } from "lucide-react";
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
 function Carousel({
   children,
   autoScroll = true,
@@ -18887,7 +19001,7 @@ function Carousel({
             })
           }
         ),
-        shouldShowArrows && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsxs39(Fragment15, { children: [
+        shouldShowArrows && totalSlides > effectiveSlidesToShow && /* @__PURE__ */ jsxs39(Fragment16, { children: [
           /* @__PURE__ */ jsx46(
             Button_default,
             {
@@ -19258,7 +19372,7 @@ function FallingIcons({
 // src/components/List.tsx
 import * as React42 from "react";
 import { ChevronRight as ChevronRight9 } from "lucide-react";
-import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
 var SIZE_STYLES2 = {
   xs: { label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
   sm: { label: "text-[13px]", desc: "text-xs", icon: "h-4 w-4", avatar: "h-8 w-8" },
@@ -19427,7 +19541,7 @@ var ListItem = React42.forwardRef(
         }
       }
     } : {};
-    const inner = /* @__PURE__ */ jsxs41(Fragment16, { children: [
+    const inner = /* @__PURE__ */ jsxs41(Fragment17, { children: [
       /* @__PURE__ */ jsxs41("div", { className: cn("flex items-center gap-3 group/item relative max-md:gap-2.5", contentClassName), ...headerProps, children: [
         avatar && /* @__PURE__ */ jsx48("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx48("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
         Left && !avatar && /* @__PURE__ */ jsx48("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx48(Left, { className: cn(sz.icon) }) }),
@@ -19472,7 +19586,7 @@ var List_default = List;
 // src/components/Watermark.tsx
 import * as React43 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment17, jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
   draft: { text: "DRAFT", color: "rgba(59, 130, 246, 0.15)", rotate: -22, fontSize: 18, fontWeight: "bold" },
@@ -19751,7 +19865,7 @@ var Watermark = ({
     }
   );
   if (fullPage) {
-    return /* @__PURE__ */ jsxs42(Fragment17, { children: [
+    return /* @__PURE__ */ jsxs42(Fragment18, { children: [
       children,
       typeof window !== "undefined" ? createPortal2(overlay, document.body) : null
     ] });
@@ -20938,7 +21052,7 @@ var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
 import React47, { useId as useId13 } from "react";
-import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
   md: 768,
@@ -21095,7 +21209,7 @@ var GridItem = React47.forwardRef(
       st.opacity = 0;
       st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
     }
-    return /* @__PURE__ */ jsxs46(Fragment18, { children: [
+    return /* @__PURE__ */ jsxs46(Fragment19, { children: [
       animationDelay != null && /* @__PURE__ */ jsx53(
         "style",
         {
@@ -21125,13 +21239,13 @@ var Grid = Object.assign(GridRoot, { Item: GridItem });
 var Grid_default = Grid;
 
 // src/components/ClientOnly.tsx
-import { Fragment as Fragment19, jsx as jsx54 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx54 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const hasMounted = useHydrated();
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx54(Fragment19, { children: fallback });
+    return /* @__PURE__ */ jsx54(Fragment20, { children: fallback });
   }
-  return /* @__PURE__ */ jsx54(Fragment19, { children });
+  return /* @__PURE__ */ jsx54(Fragment20, { children });
 }
 
 // src/components/Loading.tsx
@@ -21313,7 +21427,7 @@ import React58 from "react";
 
 // src/components/DataTable/components/DataTableBody.tsx
 import React49 from "react";
-import { Fragment as Fragment20, jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
 function DataTableOverflowText({
   text,
   align
@@ -21408,7 +21522,7 @@ function DataTableBodyRows({
       t("loading"),
       "\u2026"
     ] })
-  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ jsx57(TableRow, { className: "!border-border/10", children: /* @__PURE__ */ jsx57(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : /* @__PURE__ */ jsxs49(Fragment20, { children: [
+  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ jsx57(TableRow, { className: "!border-border/10", children: /* @__PURE__ */ jsx57(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : /* @__PURE__ */ jsxs49(Fragment21, { children: [
     virtualPaddingTop > 0 && /* @__PURE__ */ jsx57(TableRow, { "aria-hidden": "true", className: "border-0 hover:bg-transparent hover:shadow-none", children: /* @__PURE__ */ jsx57(TableCell, { colSpan: leafColumns.length, className: "p-0", style: { height: virtualPaddingTop } }) }),
     rowsToRender.map(({ row, idx, virtualRow }) => {
       const isStripedRow = striped && idx % 2 === 0;
@@ -21542,7 +21656,7 @@ function groupColumnsByColorTag(leafCols, colorGroups) {
 }
 
 // src/components/DataTable/components/DataTableHeader.tsx
-import { Fragment as Fragment21, jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
 function getColumnLabel(title) {
   if (typeof title === "string" || typeof title === "number") {
     return String(title).replace(/\s+/g, " ").trim();
@@ -21786,10 +21900,10 @@ function DataTableHeader({
             !isRightAlign && !isCenterAlign && "justify-start",
             useEndIcon && "w-full"
           ),
-          children: isRightAlign ? /* @__PURE__ */ jsxs50(Fragment21, { children: [
+          children: isRightAlign ? /* @__PURE__ */ jsxs50(Fragment22, { children: [
             filterContent,
             titleContent
-          ] }) : /* @__PURE__ */ jsxs50(Fragment21, { children: [
+          ] }) : /* @__PURE__ */ jsxs50(Fragment22, { children: [
             titleContent,
             filterContent
           ] })
@@ -21812,7 +21926,7 @@ function DataTableHeader({
       t
     ]
   );
-  return /* @__PURE__ */ jsx58(Fragment21, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx58(TableRow, { className: "!border-border/10", children: row.map((headerCell, cellIndex) => {
+  return /* @__PURE__ */ jsx58(Fragment22, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx58(TableRow, { className: "!border-border/10", children: row.map((headerCell, cellIndex) => {
     const { column: col, colSpan, rowSpan, isLeaf } = headerCell;
     const prevCell = cellIndex > 0 ? row[cellIndex - 1] : null;
     const prevCol = prevCell?.column;
@@ -23455,7 +23569,7 @@ function AccessDenied({
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
 import { useRef as useRef23, useState as useState37 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment22, jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -23505,7 +23619,7 @@ function ThemeToggleHeadless({
         children: /* @__PURE__ */ jsx65(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs57(Fragment22, { children: [
+    isOpen && /* @__PURE__ */ jsxs57(Fragment23, { children: [
       typeof window !== "undefined" && createPortal3(/* @__PURE__ */ jsx65("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal3(
         /* @__PURE__ */ jsx65(
@@ -23557,7 +23671,7 @@ function ThemeToggleHeadless({
 import { useRef as useRef24, useState as useState38 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment23, jsx as jsx66, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx66, jsxs as jsxs58 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -23602,7 +23716,7 @@ function LanguageSwitcherHeadless({
         children: /* @__PURE__ */ jsx66(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs58(Fragment23, { children: [
+    isOpen && /* @__PURE__ */ jsxs58(Fragment24, { children: [
       typeof window !== "undefined" && createPortal4(/* @__PURE__ */ jsx66("div", { className: "fixed inset-0 z-[99998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal4(
         /* @__PURE__ */ jsx66(