@underverse-ui/underverse 0.1.38 → 0.2.0

package/dist/index.cjs

@@ -5333,19 +5333,24 @@ var import_jsx_runtime29 = require("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") {
@@ -5381,6 +5386,16 @@ function TimePicker({
   showNow = false,
   showPresets = false,
   allowManualInput = false,
+  customPresets = [],
+  minTime,
+  maxTime,
+  disabledTimes,
+  error,
+  success,
+  helperText,
+  animate = true,
+  onOpen,
+  onClose,
   className,
   ...rest
 }) {
@@ -5390,14 +5405,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();
@@ -5427,6 +5546,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);
@@ -5448,23 +5577,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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Clock, { className: cn(sz.icon, "text-muted-foreground") }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Clock, { className: cn(sz.icon, error ? "text-destructive" : success ? "text-green-500" : "text-muted-foreground") }),
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("truncate", !value && !defaultValue && "text-muted-foreground"), children: value || defaultValue ? display : placeholder })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("ml-2 transition-transform", open && "rotate-180"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("ml-2 transition-transform duration-200", open && "rotate-180"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
       ]
     }
   );
@@ -5484,111 +5620,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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-[60px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Hour" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin", children: hours.map((h) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          "button",
+    customPresets && customPresets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-2 gap-2", children: customPresets.map((preset, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-[70px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Hour" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "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__ */ (0, import_jsx_runtime29.jsx)(
+                "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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-[60px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Min" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin", children: minutes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          "button",
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-px bg-border/50 self-stretch my-8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-[70px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Min" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "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__ */ (0, import_jsx_runtime29.jsx)(
+                "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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-[60px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Sec" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin", children: seconds.map((s) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          "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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-px bg-border/50 self-stretch my-8" }),
+      includeSeconds && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-w-[70px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Sec" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "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__ */ (0, import_jsx_runtime29.jsx)(
+                  "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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-px bg-border/50 self-stretch my-8" })
       ] }),
       format === "12" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-20", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Period" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-1.5", children: ["AM", "PM"].map((p) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          "button",
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Period" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "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__ */ (0, import_jsx_runtime29.jsx)(
+                "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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between gap-2 pt-2 border-t border-border", children: [
+    (showNow || clearable) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between gap-2 pt-3 border-t border-border", children: [
       showNow && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "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__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Clock, { className: "w-3 h-3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Clock, { className: "w-3.5 h-3.5" }),
             "Now"
           ]
         }
@@ -5598,14 +5840,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__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.X, { className: "w-3 h-3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.X, { className: "w-3.5 h-3.5" }),
             "Clear"
           ]
         }
@@ -5622,23 +5868,47 @@ function TimePicker({
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-full", ...rest, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground"), onClick: () => !disabled && setOpen(true), children: [
-      label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1", children: "*" })
-    ] }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      "label",
+      {
+        className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground", "cursor-pointer"),
+        onClick: () => !disabled && handleOpenChange(true),
+        children: [
+          label,
+          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("mt-1.5 flex items-start gap-1.5", sz.label), children: [
+      error && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1.5 text-destructive", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.X, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: error })
+      ] }),
+      success && !error && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1.5 text-green-600", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Check, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: "Valid time selected" })
+      ] }),
+      helperText && !error && !success && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-muted-foreground", children: helperText })
+    ] })
   ] });
 }
 
@@ -8225,41 +8495,50 @@ var ListItem = React31.forwardRef(
         setInternalExpanded(newExpanded);
       }
     };
+    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__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("flex items-center gap-3", padding, "group/item relative"), children: [
-        avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
-        Left && !avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Left, { className: cn(sz.icon) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
-            badge && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
-          ] }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
-          children && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mt-1", children })
-        ] }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
-        collapsible ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          "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();
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        "div",
+        {
+          className: cn("flex items-center gap-3", padding, "group/item relative"),
+          ...headerProps,
+          children: [
+            avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
+            Left && !avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Left, { className: cn(sz.icon) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+                label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
+                badge && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
+              ] }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
+              children && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mt-1", children })
+            ] }),
+            action && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
+            collapsible ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              "span",
+              {
+                className: cn(
+                  "text-muted-foreground shrink-0 transition-transform cursor-pointer select-none",
+                  sz.icon,
+                  isExpanded && "rotate-90"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react22.ChevronRight, { className: cn(sz.icon) })
               }
-            },
-            className: cn("text-muted-foreground shrink-0 transition-transform cursor-pointer select-none", sz.icon, isExpanded && "rotate-90"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react22.ChevronRight, { className: cn(sz.icon) })
-          }
-        ) : Right && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Right, { className: cn(sz.icon) }) })
-      ] }),
+            ) : Right && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Right, { className: cn(sz.icon) }) })
+          ]
+        }
+      ),
       collapsible && isExpanded && expandContent && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("border-t border-border/50 bg-muted/20", padding, "pt-3"), children: expandContent })
     ] });
     const baseCls = cn(
@@ -8272,14 +8551,24 @@ var ListItem = React31.forwardRef(
       const A = as === "a" ? "a" : "a";
       return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(A, { ref, href, className: cn(baseCls, "block"), ...rest, children: inner });
     }
-    if (as === "button" || collapsible) {
+    if (as === "button" && !collapsible) {
       return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           ref,
           type: "button",
           className: cn(baseCls, "text-left block w-full"),
-          onClick: collapsible ? toggleExpanded : void 0,
+          ...rest,
+          children: inner
+        }
+      );
+    }
+    if (collapsible) {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        "div",
+        {
+          ref,
+          className: cn(baseCls, "text-left block w-full"),
           ...rest,
           children: inner
         }
@@ -8333,16 +8622,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();
@@ -8424,9 +8724,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,
@@ -8450,13 +8760,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)";
@@ -8464,6 +8801,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,
@@ -8478,17 +8816,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;
@@ -8498,13 +8838,29 @@ 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__ */ (0, import_jsx_runtime40.jsx)(
     "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) {