@underverse-ui/underverse 0.1.38 → 0.2.0

package/dist/index.js

@@ -5173,24 +5173,29 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
 
 // ../../components/ui/TimePicker.tsx
 import * as React22 from "react";
-import { Clock as Clock2, X as X8 } from "lucide-react";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Clock as Clock2, X as X8, Check as Check4 } from "lucide-react";
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 var pad = (n) => n.toString().padStart(2, "0");
 function parseTime(input, fmt = "24", includeSeconds) {
   if (!input) return null;
-  const s = input.trim().toUpperCase();
-  const ampm = s.endsWith("AM") || s.endsWith("PM");
-  const clean = s.replace(/\s*(AM|PM)\s*$/, "");
-  const segs = clean.split(":");
-  const h = Number(segs[0]);
-  const m = Number(segs[1] ?? 0);
-  const sec = Number(segs[2] ?? 0);
-  if (Number.isNaN(h) || Number.isNaN(m) || Number.isNaN(sec)) return null;
-  if (fmt === "12" || ampm) {
-    const p = s.endsWith("PM") ? "PM" : "AM";
-    return { h: Math.max(1, Math.min(12, h)), m: Math.max(0, Math.min(59, m)), s: Math.max(0, Math.min(59, sec)), p };
-  }
-  return { h: Math.max(0, Math.min(23, h)), m: Math.max(0, Math.min(59, m)), s: Math.max(0, Math.min(59, sec)) };
+  try {
+    const s = input.trim().toUpperCase();
+    const ampm = s.endsWith("AM") || s.endsWith("PM");
+    const clean = s.replace(/\s*(AM|PM)\s*$/, "");
+    const segs = clean.split(":");
+    const h = Number(segs[0]);
+    const m = Number(segs[1] ?? 0);
+    const sec = Number(segs[2] ?? 0);
+    if (Number.isNaN(h) || Number.isNaN(m) || Number.isNaN(sec)) return null;
+    if (fmt === "12" || ampm) {
+      const p = s.endsWith("PM") ? "PM" : "AM";
+      return { h: Math.max(1, Math.min(12, h)), m: Math.max(0, Math.min(59, m)), s: Math.max(0, Math.min(59, sec)), p };
+    }
+    return { h: Math.max(0, Math.min(23, h)), m: Math.max(0, Math.min(59, m)), s: Math.max(0, Math.min(59, sec)) };
+  } catch (error) {
+    console.error("Error parsing time:", error);
+    return null;
+  }
 }
 function formatTime2({ h, m, s, p }, fmt, includeSeconds) {
   if (fmt === "12") {
@@ -5226,6 +5231,16 @@ function TimePicker({
   showNow = false,
   showPresets = false,
   allowManualInput = false,
+  customPresets = [],
+  minTime,
+  maxTime,
+  disabledTimes,
+  error,
+  success,
+  helperText,
+  animate = true,
+  onOpen,
+  onClose,
   className,
   ...rest
 }) {
@@ -5235,14 +5250,118 @@ function TimePicker({
   const [open, setOpen] = React22.useState(false);
   const [parts, setParts] = React22.useState(initial);
   const [manualInput, setManualInput] = React22.useState("");
+  const [focusedColumn, setFocusedColumn] = React22.useState(null);
+  const hourScrollRef = React22.useRef(null);
+  const minuteScrollRef = React22.useRef(null);
+  const secondScrollRef = React22.useRef(null);
   React22.useEffect(() => {
     if (isControlled) {
       const parsed = parseTime(value, format, includeSeconds);
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled, format, includeSeconds]);
+  React22.useEffect(() => {
+    if (!open) return;
+    const scrollToSelected = (ref, targetValue, step) => {
+      if (!ref.current) return;
+      const buttons = ref.current.querySelectorAll("button");
+      const targetIndex = Math.floor(targetValue / step);
+      const targetButton = buttons[targetIndex];
+      if (targetButton) {
+        targetButton.scrollIntoView({ behavior: animate ? "smooth" : "auto", block: "center" });
+      }
+    };
+    setTimeout(() => {
+      scrollToSelected(hourScrollRef, parts.h, 1);
+      scrollToSelected(minuteScrollRef, parts.m, minuteStep);
+      if (includeSeconds) scrollToSelected(secondScrollRef, parts.s, secondStep);
+    }, 50);
+  }, [open, parts.h, parts.m, parts.s, minuteStep, secondStep, includeSeconds, animate]);
+  const isTimeDisabled = React22.useCallback((timeStr) => {
+    if (!disabledTimes) return false;
+    if (typeof disabledTimes === "function") return disabledTimes(timeStr);
+    return disabledTimes.includes(timeStr);
+  }, [disabledTimes]);
+  const isTimeInRange = React22.useCallback((timeStr) => {
+    if (!minTime && !maxTime) return true;
+    const parsed = parseTime(timeStr, format, includeSeconds);
+    if (!parsed) return true;
+    if (minTime) {
+      const min = parseTime(minTime, format, includeSeconds);
+      if (min) {
+        const currentMinutes = parsed.h * 60 + parsed.m;
+        const minMinutes = min.h * 60 + min.m;
+        if (currentMinutes < minMinutes) return false;
+      }
+    }
+    if (maxTime) {
+      const max = parseTime(maxTime, format, includeSeconds);
+      if (max) {
+        const currentMinutes = parsed.h * 60 + parsed.m;
+        const maxMinutes = max.h * 60 + max.m;
+        if (currentMinutes > maxMinutes) return false;
+      }
+    }
+    return true;
+  }, [minTime, maxTime, format, includeSeconds]);
   const emit = (next) => {
-    onChange?.(next ? formatTime2(next, format, includeSeconds) : void 0);
+    const timeStr = next ? formatTime2(next, format, includeSeconds) : void 0;
+    if (timeStr && !isTimeInRange(timeStr)) return;
+    if (timeStr && isTimeDisabled(timeStr)) return;
+    onChange?.(timeStr);
+  };
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+    if (newOpen) {
+      onOpen?.();
+    } else {
+      onClose?.();
+      setFocusedColumn(null);
+    }
+  };
+  const handleKeyDown = (e, column) => {
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(e.key)) return;
+    e.preventDefault();
+    let newParts = { ...parts };
+    switch (column) {
+      case "hour":
+        if (e.key === "ArrowUp") newParts.h = format === "24" ? (parts.h + 1) % 24 : parts.h % 12 + 1;
+        if (e.key === "ArrowDown") newParts.h = format === "24" ? (parts.h - 1 + 24) % 24 : (parts.h - 2 + 12) % 12 + 1;
+        if (e.key === "Home") newParts.h = format === "24" ? 0 : 1;
+        if (e.key === "End") newParts.h = format === "24" ? 23 : 12;
+        if (e.key === "PageUp") newParts.h = format === "24" ? (parts.h + 6) % 24 : parts.h % 12 + 3;
+        if (e.key === "PageDown") newParts.h = format === "24" ? (parts.h - 6 + 24) % 24 : (parts.h - 4 + 12) % 12 + 1;
+        if (e.key === "ArrowRight") setFocusedColumn("minute");
+        break;
+      case "minute":
+        if (e.key === "ArrowUp") newParts.m = (parts.m + minuteStep) % 60;
+        if (e.key === "ArrowDown") newParts.m = (parts.m - minuteStep + 60) % 60;
+        if (e.key === "Home") newParts.m = 0;
+        if (e.key === "End") newParts.m = 59 - 59 % minuteStep;
+        if (e.key === "PageUp") newParts.m = (parts.m + minuteStep * 3) % 60;
+        if (e.key === "PageDown") newParts.m = (parts.m - minuteStep * 3 + 60) % 60;
+        if (e.key === "ArrowLeft") setFocusedColumn("hour");
+        if (e.key === "ArrowRight") setFocusedColumn(includeSeconds ? "second" : format === "12" ? "period" : null);
+        break;
+      case "second":
+        if (e.key === "ArrowUp") newParts.s = (parts.s + secondStep) % 60;
+        if (e.key === "ArrowDown") newParts.s = (parts.s - secondStep + 60) % 60;
+        if (e.key === "Home") newParts.s = 0;
+        if (e.key === "End") newParts.s = 59 - 59 % secondStep;
+        if (e.key === "PageUp") newParts.s = (parts.s + secondStep * 3) % 60;
+        if (e.key === "PageDown") newParts.s = (parts.s - secondStep * 3 + 60) % 60;
+        if (e.key === "ArrowLeft") setFocusedColumn("minute");
+        if (e.key === "ArrowRight" && format === "12") setFocusedColumn("period");
+        break;
+      case "period":
+        if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Home" || e.key === "End") {
+          newParts.p = newParts.p === "AM" ? "PM" : "AM";
+        }
+        if (e.key === "ArrowLeft") setFocusedColumn(includeSeconds ? "second" : "minute");
+        break;
+    }
+    setParts(newParts);
+    emit(newParts);
   };
   const setNow = () => {
     const now2 = /* @__PURE__ */ new Date();
@@ -5272,6 +5391,16 @@ function TimePicker({
   const handleManualInput = (input) => {
     setManualInput(input);
     const parsed = parseTime(input, format, includeSeconds);
+    if (parsed) {
+      const timeStr = formatTime2(parsed, format, includeSeconds);
+      if (isTimeInRange(timeStr) && !isTimeDisabled(timeStr)) {
+        setParts(parsed);
+        emit(parsed);
+      }
+    }
+  };
+  const handleCustomPreset = (time) => {
+    const parsed = parseTime(time, format, includeSeconds);
     if (parsed) {
       setParts(parsed);
       emit(parsed);
@@ -5293,23 +5422,30 @@ function TimePicker({
     {
       type: "button",
       disabled,
+      "aria-label": "Select time",
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
       className: cn(
-        "flex w-full items-center justify-between border border-input bg-background",
+        "flex w-full items-center justify-between border bg-background",
         sz.height,
         sz.padding,
         sz.text,
         radiusClass,
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:opacity-50 disabled:cursor-not-allowed",
-        "hover:bg-accent/5 transition-colors",
+        "transition-all duration-200",
+        error && "border-destructive focus-visible:ring-destructive",
+        success && "border-green-500 focus-visible:ring-green-500",
+        !error && !success && "border-input hover:bg-accent/5",
+        animate && !disabled && "hover:shadow-md",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx29(Clock2, { className: cn(sz.icon, "text-muted-foreground") }),
+          /* @__PURE__ */ jsx29(Clock2, { className: cn(sz.icon, error ? "text-destructive" : success ? "text-green-500" : "text-muted-foreground") }),
           /* @__PURE__ */ jsx29("span", { className: cn("truncate", !value && !defaultValue && "text-muted-foreground"), children: value || defaultValue ? display : placeholder })
         ] }),
-        /* @__PURE__ */ jsx29("span", { className: cn("ml-2 transition-transform", open && "rotate-180"), children: /* @__PURE__ */ jsx29("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx29("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
+        /* @__PURE__ */ jsx29("span", { className: cn("ml-2 transition-transform duration-200", open && "rotate-180"), children: /* @__PURE__ */ jsx29("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx29("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
       ]
     }
   );
@@ -5329,111 +5465,217 @@ function TimePicker({
       "button",
       {
         type: "button",
-        className: "px-2 py-1.5 text-xs rounded-md border border-border hover:bg-accent/10 capitalize transition-colors",
+        className: cn(
+          "px-2 py-1.5 text-xs rounded-md border border-border hover:bg-accent/10 capitalize transition-all",
+          animate && "hover:scale-105 active:scale-95"
+        ),
         onClick: () => setPreset(preset),
+        "aria-label": `Set time to ${preset}`,
         children: preset
       },
       preset
     )) }),
-    /* @__PURE__ */ jsxs24("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-w-[60px]", children: [
-        /* @__PURE__ */ jsx29("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Hour" }),
-        /* @__PURE__ */ jsx29("div", { className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin", children: hours.map((h) => /* @__PURE__ */ jsx29(
-          "button",
+    customPresets && customPresets.length > 0 && /* @__PURE__ */ jsx29("div", { className: "grid grid-cols-2 gap-2", children: customPresets.map((preset, idx) => /* @__PURE__ */ jsx29(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "px-2 py-1.5 text-xs rounded-md border border-border hover:bg-accent/10 transition-all",
+          animate && "hover:scale-105 active:scale-95"
+        ),
+        onClick: () => handleCustomPreset(preset.time),
+        "aria-label": `Set time to ${preset.label}`,
+        children: preset.label
+      },
+      idx
+    )) }),
+    /* @__PURE__ */ jsxs24("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-w-[70px]", children: [
+        /* @__PURE__ */ jsx29("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Hour" }),
+        /* @__PURE__ */ jsx29(
+          "div",
           {
-            type: "button",
-            className: cn(
-              "w-full text-center px-2 py-1.5 rounded-md hover:bg-accent transition-colors text-sm",
-              (format === "24" && parts.h === h || format === "12" && (parts.h % 12 || 12) === (h % 12 || 12)) && "bg-primary text-primary-foreground font-semibold"
-            ),
-            onClick: () => {
-              const nextH = format === "24" ? h : (parts.p === "PM" ? h % 12 + 12 : h % 12) % 24;
-              const next = { ...parts, h: format === "24" ? h : nextH === 0 && parts.p === "AM" ? 0 : nextH || (parts.p === "PM" ? 12 : 0) };
-              setParts(next);
-              emit(next);
-            },
-            children: pad(h)
-          },
-          h
-        )) })
+            ref: hourScrollRef,
+            className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin scroll-smooth",
+            role: "listbox",
+            "aria-label": "Select hour",
+            tabIndex: focusedColumn === "hour" ? 0 : -1,
+            onKeyDown: (e) => handleKeyDown(e, "hour"),
+            onFocus: () => setFocusedColumn("hour"),
+            children: hours.map((h) => {
+              const isSelected = format === "24" && parts.h === h || format === "12" && (parts.h % 12 || 12) === (h % 12 || 12);
+              return /* @__PURE__ */ jsx29(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  className: cn(
+                    "w-full text-center px-3 py-2 rounded-md transition-all text-sm font-medium",
+                    "hover:bg-accent hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                    isSelected && "bg-primary text-primary-foreground shadow-md",
+                    !isSelected && "text-foreground/80",
+                    animate && "transition-transform duration-150"
+                  ),
+                  onClick: () => {
+                    const nextH = format === "24" ? h : (parts.p === "PM" ? h % 12 + 12 : h % 12) % 24;
+                    const next = { ...parts, h: format === "24" ? h : nextH === 0 && parts.p === "AM" ? 0 : nextH || (parts.p === "PM" ? 12 : 0) };
+                    setParts(next);
+                    emit(next);
+                  },
+                  children: pad(h)
+                },
+                h
+              );
+            })
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-w-[60px]", children: [
-        /* @__PURE__ */ jsx29("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Min" }),
-        /* @__PURE__ */ jsx29("div", { className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin", children: minutes.map((m) => /* @__PURE__ */ jsx29(
-          "button",
+      /* @__PURE__ */ jsx29("div", { className: "w-px bg-border/50 self-stretch my-8" }),
+      /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-w-[70px]", children: [
+        /* @__PURE__ */ jsx29("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Min" }),
+        /* @__PURE__ */ jsx29(
+          "div",
           {
-            type: "button",
-            className: cn(
-              "w-full text-center px-2 py-1.5 rounded-md hover:bg-accent transition-colors text-sm",
-              parts.m === m && "bg-primary text-primary-foreground font-semibold"
-            ),
-            onClick: () => {
-              const next = { ...parts, m };
-              setParts(next);
-              emit(next);
-            },
-            children: pad(m)
-          },
-          m
-        )) })
+            ref: minuteScrollRef,
+            className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin scroll-smooth",
+            role: "listbox",
+            "aria-label": "Select minute",
+            tabIndex: focusedColumn === "minute" ? 0 : -1,
+            onKeyDown: (e) => handleKeyDown(e, "minute"),
+            onFocus: () => setFocusedColumn("minute"),
+            children: minutes.map((m) => {
+              const isSelected = parts.m === m;
+              return /* @__PURE__ */ jsx29(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  className: cn(
+                    "w-full text-center px-3 py-2 rounded-md transition-all text-sm font-medium",
+                    "hover:bg-accent hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                    isSelected && "bg-primary text-primary-foreground shadow-md",
+                    !isSelected && "text-foreground/80",
+                    animate && "transition-transform duration-150"
+                  ),
+                  onClick: () => {
+                    const next = { ...parts, m };
+                    setParts(next);
+                    emit(next);
+                  },
+                  children: pad(m)
+                },
+                m
+              );
+            })
+          }
+        )
       ] }),
-      includeSeconds && /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-w-[60px]", children: [
-        /* @__PURE__ */ jsx29("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Sec" }),
-        /* @__PURE__ */ jsx29("div", { className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin", children: seconds.map((s) => /* @__PURE__ */ jsx29(
-          "button",
-          {
-            type: "button",
-            className: cn(
-              "w-full text-center px-2 py-1.5 rounded-md hover:bg-accent transition-colors text-sm",
-              parts.s === s && "bg-primary text-primary-foreground font-semibold"
-            ),
-            onClick: () => {
-              const next = { ...parts, s };
-              setParts(next);
-              emit(next);
-            },
-            children: pad(s)
-          },
-          s
-        )) })
+      /* @__PURE__ */ jsx29("div", { className: "w-px bg-border/50 self-stretch my-8" }),
+      includeSeconds && /* @__PURE__ */ jsxs24(Fragment7, { children: [
+        /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-w-[70px]", children: [
+          /* @__PURE__ */ jsx29("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Sec" }),
+          /* @__PURE__ */ jsx29(
+            "div",
+            {
+              ref: secondScrollRef,
+              className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin scroll-smooth",
+              role: "listbox",
+              "aria-label": "Select second",
+              tabIndex: focusedColumn === "second" ? 0 : -1,
+              onKeyDown: (e) => handleKeyDown(e, "second"),
+              onFocus: () => setFocusedColumn("second"),
+              children: seconds.map((s) => {
+                const isSelected = parts.s === s;
+                return /* @__PURE__ */ jsx29(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected,
+                    className: cn(
+                      "w-full text-center px-3 py-2 rounded-md transition-all text-sm font-medium",
+                      "hover:bg-accent hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                      isSelected && "bg-primary text-primary-foreground shadow-md",
+                      !isSelected && "text-foreground/80",
+                      animate && "transition-transform duration-150"
+                    ),
+                    onClick: () => {
+                      const next = { ...parts, s };
+                      setParts(next);
+                      emit(next);
+                    },
+                    children: pad(s)
+                  },
+                  s
+                );
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx29("div", { className: "w-px bg-border/50 self-stretch my-8" })
       ] }),
       format === "12" && /* @__PURE__ */ jsxs24("div", { className: "w-20", children: [
-        /* @__PURE__ */ jsx29("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Period" }),
-        /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-1.5", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx29(
-          "button",
+        /* @__PURE__ */ jsx29("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Period" }),
+        /* @__PURE__ */ jsx29(
+          "div",
           {
-            type: "button",
-            className: cn(
-              "px-3 py-2 rounded-md hover:bg-accent transition-colors text-sm font-medium",
-              parts.p === p && "bg-primary text-primary-foreground"
-            ),
-            onClick: () => {
-              const pVal = p;
-              let hour = parts.h;
-              if (pVal === "AM" && hour >= 12) hour -= 12;
-              if (pVal === "PM" && hour < 12) hour += 12;
-              const next = { ...parts, p: pVal, h: hour };
-              setParts(next);
-              emit(next);
-            },
-            children: p
-          },
-          p
-        )) })
+            className: "flex flex-col gap-2",
+            role: "radiogroup",
+            "aria-label": "Select AM or PM",
+            tabIndex: focusedColumn === "period" ? 0 : -1,
+            onKeyDown: (e) => handleKeyDown(e, "period"),
+            onFocus: () => setFocusedColumn("period"),
+            children: ["AM", "PM"].map((p) => {
+              const isSelected = parts.p === p;
+              return /* @__PURE__ */ jsx29(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": isSelected,
+                  className: cn(
+                    "px-4 py-3 rounded-md transition-all text-sm font-semibold",
+                    "hover:bg-accent hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                    isSelected && "bg-primary text-primary-foreground shadow-md",
+                    !isSelected && "text-foreground/80 border border-border",
+                    animate && "transition-transform duration-150"
+                  ),
+                  onClick: () => {
+                    const pVal = p;
+                    let hour = parts.h;
+                    if (pVal === "AM" && hour >= 12) hour -= 12;
+                    if (pVal === "PM" && hour < 12) hour += 12;
+                    const next = { ...parts, p: pVal, h: hour };
+                    setParts(next);
+                    emit(next);
+                  },
+                  children: p
+                },
+                p
+              );
+            })
+          }
+        )
       ] })
     ] }),
-    (showNow || clearable) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between gap-2 pt-2 border-t border-border", children: [
+    (showNow || clearable) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between gap-2 pt-3 border-t border-border", children: [
       showNow && /* @__PURE__ */ jsxs24(
         "button",
         {
           type: "button",
-          className: "px-3 py-1.5 text-xs rounded-md border border-border hover:bg-accent/10 transition-colors flex items-center gap-1.5",
+          className: cn(
+            "px-3 py-2 text-xs rounded-md border border-border hover:bg-accent/10 transition-all flex items-center gap-2 font-medium",
+            animate && "hover:scale-105 active:scale-95"
+          ),
           onClick: () => {
             setNow();
-            if (variant === "compact") setOpen(false);
+            if (variant === "compact") handleOpenChange(false);
           },
+          "aria-label": "Set current time",
           children: [
-            /* @__PURE__ */ jsx29(Clock2, { className: "w-3 h-3" }),
+            /* @__PURE__ */ jsx29(Clock2, { className: "w-3.5 h-3.5" }),
             "Now"
           ]
         }
@@ -5443,14 +5685,18 @@ function TimePicker({
         "button",
         {
           type: "button",
-          className: "px-3 py-1.5 text-xs rounded-md border border-border hover:bg-destructive/10 transition-colors flex items-center gap-1.5",
+          className: cn(
+            "px-3 py-2 text-xs rounded-md border border-border hover:bg-destructive/10 hover:text-destructive transition-all flex items-center gap-2 font-medium",
+            animate && "hover:scale-105 active:scale-95"
+          ),
           onClick: () => {
             setParts(initial);
             emit(void 0);
-            setOpen(false);
+            handleOpenChange(false);
           },
+          "aria-label": "Clear selected time",
           children: [
-            /* @__PURE__ */ jsx29(X8, { className: "w-3 h-3" }),
+            /* @__PURE__ */ jsx29(X8, { className: "w-3.5 h-3.5" }),
             "Clear"
           ]
         }
@@ -5467,30 +5713,54 @@ function TimePicker({
     ] });
   }
   return /* @__PURE__ */ jsxs24("div", { className: "w-full", ...rest, children: [
-    label && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ jsxs24("label", { className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground"), onClick: () => !disabled && setOpen(true), children: [
-      label,
-      required && /* @__PURE__ */ jsx29("span", { className: "text-destructive ml-1", children: "*" })
-    ] }) }),
+    label && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ jsxs24(
+      "label",
+      {
+        className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground", "cursor-pointer"),
+        onClick: () => !disabled && handleOpenChange(true),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx29("span", { className: "text-destructive ml-1", children: "*" })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsx29(
       Popover,
       {
         trigger,
         open,
-        onOpenChange: (o) => setOpen(o),
+        onOpenChange: handleOpenChange,
         placement: "bottom-start",
         matchTriggerWidth: variant === "compact",
         contentWidth,
-        contentClassName: cn("p-3 rounded-lg border border-border bg-popover shadow-lg backdrop-blur-sm bg-popover/95"),
+        contentClassName: cn(
+          "p-4 rounded-lg border bg-popover shadow-xl backdrop-blur-md",
+          error && "border-destructive",
+          success && "border-green-500",
+          !error && !success && "border-border",
+          animate && "animate-in fade-in-0 zoom-in-95 duration-200"
+        ),
         children: timePickerContent
       }
-    )
+    ),
+    (error || success || helperText) && /* @__PURE__ */ jsxs24("div", { className: cn("mt-1.5 flex items-start gap-1.5", sz.label), children: [
+      error && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1.5 text-destructive", children: [
+        /* @__PURE__ */ jsx29(X8, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsx29("span", { children: error })
+      ] }),
+      success && !error && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1.5 text-green-600", children: [
+        /* @__PURE__ */ jsx29(Check4, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsx29("span", { children: "Valid time selected" })
+      ] }),
+      helperText && !error && !success && /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: helperText })
+    ] })
   ] });
 }
 
 // ../../components/ui/Calendar.tsx
 import * as React23 from "react";
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function startOfMonth(d) {
   return new Date(d.getFullYear(), d.getMonth(), 1);
 }
@@ -5734,7 +6004,7 @@ function Calendar2({
       /* @__PURE__ */ jsx30("div", { className: "text-sm font-semibold", children: display === "week" ? `${labels?.month ? labels.month(weekDays[0]) : weekDays[0].toLocaleDateString("en-US", { month: "short" })} ${weekDays[0].getDate()} \u2013 ${labels?.month ? labels.month(weekDays[6]) : weekDays[6].toLocaleDateString("en-US", { month: "short" })} ${weekDays[6].getDate()}` : labels?.month ? labels.month(view) : view.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
       /* @__PURE__ */ jsx30("button", { onClick: () => goByView(1), disabled: nextDisabled, className: cn("p-1 rounded-md hover:bg-accent", nextDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"), "aria-label": labels?.next || (display === "week" ? "Next week" : "Next month"), children: /* @__PURE__ */ jsx30(ChevronRight4, { className: "h-4 w-4" }) })
     ] }),
-    display === "week" ? /* @__PURE__ */ jsxs25(Fragment8, { children: [
+    display === "week" ? /* @__PURE__ */ jsxs25(Fragment9, { 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;
@@ -6547,7 +6817,7 @@ Slider.displayName = "Slider";
 // ../../components/ui/OverlayControls.tsx
 import { Dot, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React27 from "react";
-import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 function OverlayControls({
   mode,
   value,
@@ -6770,7 +7040,7 @@ function OverlayControls({
   const handleSliderMouseLeave = () => {
     setPreviewData(null);
   };
-  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment10, { children: [
     keyboardFeedback && /* @__PURE__ */ jsx34(
       "div",
       {
@@ -6980,7 +7250,7 @@ function OverlayControls({
 // ../../components/ui/CategoryTreeSelect.tsx
 import { useState as useState24 } from "react";
 import { ChevronRight as ChevronRight5, ChevronDown as ChevronDown3, Check as Check6 } from "lucide-react";
-import { Fragment as Fragment10, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1ECDn danh m\u1EE5c", disabled }) {
   const [isOpen, setIsOpen] = useState24(false);
   const [expandedNodes, setExpandedNodes] = useState24(/* @__PURE__ */ new Set());
@@ -7103,7 +7373,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
         ]
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ jsxs30(Fragment10, { children: [
+    isOpen && !disabled && /* @__PURE__ */ jsxs30(Fragment11, { children: [
       /* @__PURE__ */ jsx35("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
       /* @__PURE__ */ jsx35(
         "div",
@@ -7121,7 +7391,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
 }
 
 // ../../components/ui/ImageUpload.tsx
-import { useState as useState25, useRef as useRef9, useCallback as useCallback8 } from "react";
+import { useState as useState25, useRef as useRef10, useCallback as useCallback9 } from "react";
 import { Upload, X as X9, Image as ImageIcon, Loader2 as Loader22, Check as Check7 } from "lucide-react";
 import { useTranslations as useTranslations6 } from "next-intl";
 import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
@@ -7143,7 +7413,7 @@ function ImageUpload({
   const [isDragging, setIsDragging] = useState25(false);
   const [uploading, setUploading] = useState25(false);
   const [uploadedImages, setUploadedImages] = useState25([]);
-  const fileInputRef = useRef9(null);
+  const fileInputRef = useRef10(null);
   const { addToast } = useToast();
   const t = useTranslations6("OCR.imageUpload");
   const previewSizes = {
@@ -7151,17 +7421,17 @@ function ImageUpload({
     md: "w-24 h-24",
     lg: "w-32 h-32"
   };
-  const handleDragOver = useCallback8((e) => {
+  const handleDragOver = useCallback9((e) => {
     e.preventDefault();
     if (!disabled) {
       setIsDragging(true);
     }
   }, [disabled]);
-  const handleDragLeave = useCallback8((e) => {
+  const handleDragLeave = useCallback9((e) => {
     e.preventDefault();
     setIsDragging(false);
   }, []);
-  const handleFiles = useCallback8(async (files) => {
+  const handleFiles = useCallback9(async (files) => {
     if (files.length === 0) return;
     const validFiles = files.filter((file) => {
       if (file.size > maxSize * 1024 * 1024) {
@@ -7225,14 +7495,14 @@ function ImageUpload({
       setUploading(false);
     }
   }, [maxSize, addToast, onUpload]);
-  const handleDrop = useCallback8((e) => {
+  const handleDrop = useCallback9((e) => {
     e.preventDefault();
     setIsDragging(false);
     if (disabled) return;
     const files = Array.from(e.dataTransfer.files);
     handleFiles(files);
   }, [disabled, handleFiles]);
-  const handleFileSelect = useCallback8((e) => {
+  const handleFileSelect = useCallback9((e) => {
     const files = Array.from(e.target.files || []);
     handleFiles(files);
     if (fileInputRef.current) {
@@ -7351,7 +7621,7 @@ function ImageUpload({
 // ../../components/ui/Carousel.tsx
 import * as React29 from "react";
 import { ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight6 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 function Carousel({
   children,
   autoScroll = true,
@@ -7560,7 +7830,7 @@ function Carousel({
             ))
           }
         ),
-        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs32(Fragment11, { children: [
+        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs32(Fragment12, { children: [
           /* @__PURE__ */ jsx37(
             Button_default,
             {
@@ -7940,7 +8210,7 @@ function FallingIcons({
 // ../../components/ui/List.tsx
 import * as React31 from "react";
 import { ChevronRight as ChevronRight7 } from "lucide-react";
-import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 var SIZE_STYLES2 = {
   xs: { itemPad: "px-2 py-1.5", densePad: "px-2 py-1", label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
   sm: { itemPad: "px-3 py-2", densePad: "px-3 py-1.5", label: "text-[13px]", desc: "text-[12px]", icon: "h-4 w-4", avatar: "h-8 w-8" },
@@ -8070,41 +8340,50 @@ var ListItem = React31.forwardRef(
         setInternalExpanded(newExpanded);
       }
     };
-    const inner = /* @__PURE__ */ jsxs34(Fragment12, { children: [
-      /* @__PURE__ */ jsxs34("div", { className: cn("flex items-center gap-3", padding, "group/item relative"), children: [
-        avatar && /* @__PURE__ */ jsx39("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx39("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
-        Left && !avatar && /* @__PURE__ */ jsx39("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx39(Left, { className: cn(sz.icon) }) }),
-        /* @__PURE__ */ jsxs34("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
-            label && /* @__PURE__ */ jsx39("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
-            badge && /* @__PURE__ */ jsx39("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
-          ] }),
-          description && /* @__PURE__ */ jsx39("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
-          children && /* @__PURE__ */ jsx39("div", { className: "mt-1", children })
-        ] }),
-        action && /* @__PURE__ */ jsx39("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
-        collapsible ? /* @__PURE__ */ jsx39(
-          "span",
-          {
-            role: "button",
-            "aria-label": "Toggle",
-            tabIndex: 0,
-            onClick: (e) => {
-              e.stopPropagation();
-              toggleExpanded();
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                e.stopPropagation();
-                toggleExpanded();
+    const headerProps = collapsible ? {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onClick: disabled ? void 0 : () => toggleExpanded(),
+      onKeyDown: (e) => {
+        if (disabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggleExpanded();
+        }
+      }
+    } : {};
+    const inner = /* @__PURE__ */ jsxs34(Fragment13, { children: [
+      /* @__PURE__ */ jsxs34(
+        "div",
+        {
+          className: cn("flex items-center gap-3", padding, "group/item relative"),
+          ...headerProps,
+          children: [
+            avatar && /* @__PURE__ */ jsx39("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx39("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
+            Left && !avatar && /* @__PURE__ */ jsx39("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx39(Left, { className: cn(sz.icon) }) }),
+            /* @__PURE__ */ jsxs34("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
+                label && /* @__PURE__ */ jsx39("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
+                badge && /* @__PURE__ */ jsx39("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
+              ] }),
+              description && /* @__PURE__ */ jsx39("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
+              children && /* @__PURE__ */ jsx39("div", { className: "mt-1", children })
+            ] }),
+            action && /* @__PURE__ */ jsx39("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
+            collapsible ? /* @__PURE__ */ jsx39(
+              "span",
+              {
+                className: cn(
+                  "text-muted-foreground shrink-0 transition-transform cursor-pointer select-none",
+                  sz.icon,
+                  isExpanded && "rotate-90"
+                ),
+                children: /* @__PURE__ */ jsx39(ChevronRight7, { className: cn(sz.icon) })
               }
-            },
-            className: cn("text-muted-foreground shrink-0 transition-transform cursor-pointer select-none", sz.icon, isExpanded && "rotate-90"),
-            children: /* @__PURE__ */ jsx39(ChevronRight7, { className: cn(sz.icon) })
-          }
-        ) : Right && /* @__PURE__ */ jsx39("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx39(Right, { className: cn(sz.icon) }) })
-      ] }),
+            ) : Right && /* @__PURE__ */ jsx39("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx39(Right, { className: cn(sz.icon) }) })
+          ]
+        }
+      ),
       collapsible && isExpanded && expandContent && /* @__PURE__ */ jsx39("div", { className: cn("border-t border-border/50 bg-muted/20", padding, "pt-3"), children: expandContent })
     ] });
     const baseCls = cn(
@@ -8117,14 +8396,24 @@ var ListItem = React31.forwardRef(
       const A = as === "a" ? "a" : "a";
       return /* @__PURE__ */ jsx39(A, { ref, href, className: cn(baseCls, "block"), ...rest, children: inner });
     }
-    if (as === "button" || collapsible) {
+    if (as === "button" && !collapsible) {
       return /* @__PURE__ */ jsx39(
         "button",
         {
           ref,
           type: "button",
           className: cn(baseCls, "text-left block w-full"),
-          onClick: collapsible ? toggleExpanded : void 0,
+          ...rest,
+          children: inner
+        }
+      );
+    }
+    if (collapsible) {
+      return /* @__PURE__ */ jsx39(
+        "div",
+        {
+          ref,
+          className: cn(baseCls, "text-left block w-full"),
           ...rest,
           children: inner
         }
@@ -8141,7 +8430,7 @@ var List_default = List;
 // ../../components/ui/Watermark.tsx
 import * as React32 from "react";
 import { createPortal as createPortal9 } from "react-dom";
-import { Fragment as Fragment13, jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs35 } 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" },
@@ -8178,16 +8467,27 @@ function useWatermarkDataURL(opts) {
     const drawText = () => {
       ctx.clearRect(0, 0, tileW, tileH);
       ctx.save();
-      ctx.translate(tileW / 2, tileH / 2);
+      if (pattern === "grid") {
+        ctx.translate(width / 2, height / 2);
+      } else {
+        ctx.translate(tileW / 2, tileH / 2);
+      }
       if (pattern === "diagonal") {
         ctx.rotate(rotate * Math.PI / 180);
-      } else if (pattern === "straight") {
+      } else if (pattern === "straight" || pattern === "grid") {
       }
       if (text) {
         const textLines = Array.isArray(text) ? text : [text];
         ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
+        if (opts.textShadow) {
+          const shadowCol = opts.shadowColor || "rgba(255, 255, 255, 0.5)";
+          ctx.shadowColor = shadowCol;
+          ctx.shadowBlur = 8;
+          ctx.shadowOffsetX = 0;
+          ctx.shadowOffsetY = 0;
+        }
         if (gradient) {
           const splitStops = (input) => {
             const s = input.trim();
@@ -8269,9 +8569,19 @@ function useWatermarkDataURL(opts) {
     return () => {
       cancelled = true;
     };
-  }, [opts.text, opts.image, opts.width, opts.height, opts.gapX, opts.gapY, opts.rotate, opts.fontSize, opts.fontFamily, opts.fontWeight, opts.fontStyle, opts.color, opts.gradient, opts.pattern]);
+  }, [opts.text, opts.image, opts.width, opts.height, opts.gapX, opts.gapY, opts.rotate, opts.fontSize, opts.fontFamily, opts.fontWeight, opts.fontStyle, opts.color, opts.gradient, opts.pattern, opts.textShadow, opts.shadowColor]);
   return url;
 }
+var getAnimationClass = (variant, visible) => {
+  if (variant === "none") return "";
+  const animations = {
+    fade: visible ? "animate-in fade-in duration-300" : "animate-out fade-out duration-300",
+    slide: visible ? "animate-in slide-in-from-top duration-500" : "animate-out slide-out-to-top duration-500",
+    scale: visible ? "animate-in zoom-in duration-300" : "animate-out zoom-out duration-300",
+    pulse: visible ? "animate-pulse" : "opacity-0"
+  };
+  return animations[variant] || "";
+};
 var Watermark = ({
   text: textProp,
   image,
@@ -8295,13 +8605,40 @@ var Watermark = ({
   pattern = "diagonal",
   interactive = false,
   animate = false,
+  animationVariant = "fade",
+  blur = false,
+  blurAmount = 4,
+  textShadow = false,
+  shadowColor,
+  darkMode = false,
   overlayClassName,
+  ariaLabel,
   className,
   style,
   children,
   ...rest
 }) => {
   const [visible, setVisible] = React32.useState(true);
+  const [isDark, setIsDark] = React32.useState(false);
+  React32.useEffect(() => {
+    if (!darkMode) return;
+    const checkDarkMode = () => {
+      const isDarkMode = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", checkDarkMode);
+    return () => {
+      observer.disconnect();
+      mediaQuery.removeEventListener("change", checkDarkMode);
+    };
+  }, [darkMode]);
   const presetConfig = preset ? PRESETS2[preset] : null;
   const text = textProp ?? presetConfig?.text;
   const color = colorProp ?? presetConfig?.color ?? "rgba(0,0,0,0.15)";
@@ -8309,6 +8646,7 @@ var Watermark = ({
   const fontSize = fontSizeProp ?? presetConfig?.fontSize ?? 14;
   const fontWeight = fontWeightProp ?? presetConfig?.fontWeight ?? "normal";
   const fontStyle = fontStyleProp ?? "normal";
+  const finalOpacity = darkMode && isDark ? opacity * 1.3 : opacity;
   const dataURL = useWatermarkDataURL({
     text,
     image,
@@ -8323,17 +8661,19 @@ var Watermark = ({
     fontStyle,
     color,
     gradient,
-    pattern
+    pattern,
+    textShadow,
+    shadowColor
   });
   const overlayStyle = {
     position: fullPage ? "fixed" : "absolute",
     top: 0,
     left: 0,
     zIndex,
-    opacity: visible ? opacity : 0,
+    opacity: visible ? finalOpacity : 0,
     backgroundRepeat: "repeat",
     backgroundPosition: `${offsetLeft}px ${offsetTop}px`,
-    transition: animate ? "opacity 0.3s ease" : void 0
+    transition: animate && animationVariant === "fade" ? "opacity 0.3s ease" : void 0
   };
   if (fullPage) {
     overlayStyle.right = 0;
@@ -8343,17 +8683,33 @@ var Watermark = ({
     overlayStyle.height = "100%";
   }
   if (dataURL) overlayStyle.backgroundImage = `url(${dataURL})`;
+  const animationClass = animate ? getAnimationClass(animationVariant, visible) : "";
+  const blurClass = blur ? `backdrop-blur-[${blurAmount}px]` : "";
   const overlay = /* @__PURE__ */ jsx40(
     "div",
     {
-      "aria-hidden": true,
-      className: cn("pointer-events-none", overlayClassName),
+      role: interactive ? "button" : void 0,
+      "aria-label": ariaLabel || (interactive ? "Toggle watermark visibility" : "Watermark overlay"),
+      "aria-hidden": !interactive,
+      tabIndex: interactive ? 0 : void 0,
+      className: cn(
+        interactive ? "cursor-pointer" : "pointer-events-none",
+        blurClass,
+        animationClass,
+        overlayClassName
+      ),
       style: overlayStyle,
-      onClick: interactive ? () => setVisible(!visible) : void 0
+      onClick: interactive ? () => setVisible(!visible) : void 0,
+      onKeyDown: interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setVisible(!visible);
+        }
+      } : void 0
     }
   );
   if (fullPage) {
-    return /* @__PURE__ */ jsxs35(Fragment13, { children: [
+    return /* @__PURE__ */ jsxs35(Fragment14, { children: [
       children,
       typeof window !== "undefined" ? createPortal9(overlay, document.body) : null
     ] });
@@ -9064,7 +9420,7 @@ function ColorPicker({
 
 // ../../components/ui/Grid.tsx
 import React35, { useId as useId6 } from "react";
-import { Fragment as Fragment14, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
   md: 768,
@@ -9226,7 +9582,7 @@ var GridItem = React35.forwardRef(
       st.opacity = 0;
       st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
     }
-    return /* @__PURE__ */ jsxs38(Fragment14, { children: [
+    return /* @__PURE__ */ jsxs38(Fragment15, { children: [
       animationDelay != null && /* @__PURE__ */ jsx43(
         "style",
         {
@@ -9256,16 +9612,16 @@ var Grid_default = Grid;
 
 // ../../components/ui/ClientOnly.tsx
 import { useEffect as useEffect18, useState as useState31 } from "react";
-import { Fragment as Fragment15, jsx as jsx44 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx44 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const [hasMounted, setHasMounted] = useState31(false);
   useEffect18(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx44(Fragment15, { children: fallback });
+    return /* @__PURE__ */ jsx44(Fragment16, { children: fallback });
   }
-  return /* @__PURE__ */ jsx44(Fragment15, { children });
+  return /* @__PURE__ */ jsx44(Fragment16, { children });
 }
 
 // ../../components/ui/Loading.tsx
@@ -12042,9 +12398,9 @@ function AccessDenied({
 
 // ../../components/ui/ThemeToggleHeadless.tsx
 import { Moon, Sun, Monitor } from "lucide-react";
-import { useEffect as useEffect20, useRef as useRef11, useState as useState32 } from "react";
+import { useEffect as useEffect20, useRef as useRef12, useState as useState32 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
-import { Fragment as Fragment16, jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -12053,7 +12409,7 @@ function ThemeToggleHeadless({
 }) {
   const [isOpen, setIsOpen] = useState32(false);
   const [mounted, setMounted] = useState32(false);
-  const triggerRef = useRef11(null);
+  const triggerRef = useRef12(null);
   const [dropdownPosition, setDropdownPosition] = useState32(null);
   useEffect20(() => setMounted(true), []);
   const themes = [
@@ -12095,7 +12451,7 @@ function ThemeToggleHeadless({
         children: /* @__PURE__ */ jsx52(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs46(Fragment16, { children: [
+    isOpen && /* @__PURE__ */ jsxs46(Fragment17, { children: [
       typeof window !== "undefined" && createPortal10(/* @__PURE__ */ jsx52("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal10(
         /* @__PURE__ */ jsx52(
@@ -12144,10 +12500,10 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-import { useRef as useRef12, useState as useState33 } from "react";
+import { useRef as useRef13, useState as useState33 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment17, jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -12157,7 +12513,7 @@ function LanguageSwitcherHeadless({
 }) {
   const [isOpen, setIsOpen] = useState33(false);
   const [dropdownPosition, setDropdownPosition] = useState33(null);
-  const triggerButtonRef = useRef12(null);
+  const triggerButtonRef = useRef13(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();
@@ -12192,7 +12548,7 @@ function LanguageSwitcherHeadless({
         children: /* @__PURE__ */ jsx53(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs47(Fragment17, { children: [
+    isOpen && /* @__PURE__ */ jsxs47(Fragment18, { children: [
       typeof window !== "undefined" && createPortal11(/* @__PURE__ */ jsx53("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal11(
         /* @__PURE__ */ jsx53(