@underverse-ui/underverse 1.0.92 → 1.0.94

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.92",
+  "version": "1.0.94",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [

package/dist/index.cjs

@@ -666,13 +666,13 @@ var Card = import_react2.default.forwardRef(
               "h3",
               {
                 className: cn(
-                  "min-w-0 text-base md:text-lg font-semibold leading-tight tracking-tight break-words [overflow-wrap:anywhere] transition-colors duration-200 max-md:text-sm",
+                  "min-w-0 text-base md:text-lg font-semibold leading-tight tracking-tight wrap-anywhere transition-colors duration-200 max-md:text-sm",
                   hoverable && "group-hover:text-primary"
                 ),
                 children: title
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "min-w-0 text-sm md:text-base text-muted-foreground leading-relaxed break-words [overflow-wrap:anywhere]", children: description })
+            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "min-w-0 text-sm md:text-base text-muted-foreground leading-relaxed wrap-anywhere", children: description })
           ] }),
           children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("relative", defaultPaddingX, defaultPaddingY, contentClassName), children }),
           footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2940,6 +2940,25 @@ var variantStyles2 = {
   success: "bg-success text-success-foreground border-success/20"
 };
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+function composeEventHandlers(theirHandler, ourHandler) {
+  return (event) => {
+    theirHandler?.(event);
+    ourHandler(event);
+  };
+}
+function setRefValue(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    refs.forEach((ref) => setRefValue(ref, value));
+  };
+}
 function getTransformOrigin(side) {
   switch (side) {
     case "top":
@@ -2991,7 +3010,8 @@ var Tooltip = ({
   delay = { open: 200, close: 300 },
   className,
   disabled = false,
-  variant = "default"
+  variant = "default",
+  asChild = true
 }) => {
   const [isOpen, setIsOpen] = React9.useState(false);
   const isMounted = useHydrated();
@@ -3110,37 +3130,32 @@ var Tooltip = ({
   if (disabled || !content) {
     return children;
   }
+  const childProps = children.props;
+  const childRef = children.ref ?? childProps.ref;
+  const triggerProps = {
+    ref: mergeRefs(childRef, (node) => {
+      triggerRef.current = node;
+    }),
+    "data-underverse-tooltip-trigger": triggerSelector,
+    onMouseEnter: composeEventHandlers(childProps.onMouseEnter, (e) => {
+      triggerRef.current = e.currentTarget;
+      handleMouseEnter();
+    }),
+    onMouseLeave: composeEventHandlers(childProps.onMouseLeave, (e) => {
+      triggerRef.current = e.currentTarget;
+      handleMouseLeave();
+    }),
+    onFocus: composeEventHandlers(childProps.onFocus, (e) => {
+      triggerRef.current = e.currentTarget;
+      handleFocus();
+    }),
+    onBlur: composeEventHandlers(childProps.onBlur, () => {
+      handleBlur();
+    })
+  };
+  const trigger = asChild ? React9.cloneElement(children, triggerProps) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { ...triggerProps, children });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    (() => {
-      const TriggerComponent = children.type;
-      const triggerProps = children.props;
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        TriggerComponent,
-        {
-          ...triggerProps,
-          "data-underverse-tooltip-trigger": triggerSelector,
-          onMouseEnter: (e) => {
-            triggerRef.current = e.currentTarget;
-            handleMouseEnter();
-            if (typeof triggerProps.onMouseEnter === "function") triggerProps.onMouseEnter(e);
-          },
-          onMouseLeave: (e) => {
-            triggerRef.current = e.currentTarget;
-            handleMouseLeave();
-            if (typeof triggerProps.onMouseLeave === "function") triggerProps.onMouseLeave(e);
-          },
-          onFocus: (e) => {
-            triggerRef.current = e.currentTarget;
-            handleFocus();
-            if (typeof triggerProps.onFocus === "function") triggerProps.onFocus(e);
-          },
-          onBlur: (e) => {
-            handleBlur();
-            if (typeof triggerProps.onBlur === "function") triggerProps.onBlur(e);
-          }
-        }
-      );
-    })(),
+    trigger,
     isMounted && isOpen && (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
@@ -9754,7 +9769,7 @@ function WheelColumn({
           ref: scrollRef,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
-            "select-none cursor-grab active:cursor-grabbing",
+            "select-none",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-xl",
             "[scrollbar-width:none] [-ms-overflow-style:none]",
             "[&::-webkit-scrollbar]:hidden"
@@ -9765,15 +9780,7 @@ function WheelColumn({
           tabIndex: focused ? 0 : -1,
           onKeyDown: (e) => onKeyDown(e, column),
           onFocus: () => setFocusedColumn(column),
-          onScroll: () => {
-            if (draggingRef.current) return;
-            if (inertialRef.current) return;
-            handleScroll();
-          },
-          onPointerDown,
-          onPointerMove,
-          onPointerUp: (e) => endDrag(e.pointerId),
-          onPointerCancel: (e) => endDrag(e.pointerId),
+          onScroll: handleScroll,
           children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: extendedItems.map((n, index) => {
             const dist = Math.abs(index - currentVirtual);
             const distForVisual = Math.min(dist, 2);
@@ -11236,7 +11243,7 @@ function WheelColumn2({
           ref: scrollRef,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
-            "select-none cursor-grab active:cursor-grabbing",
+            "select-none",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-xl",
             "[scrollbar-width:none] [-ms-overflow-style:none]",
             "[&::-webkit-scrollbar]:hidden"
@@ -11247,15 +11254,7 @@ function WheelColumn2({
           tabIndex: focused ? 0 : -1,
           onKeyDown: (e) => onKeyDown(e, column),
           onFocus: () => setFocusedColumn(column),
-          onScroll: () => {
-            if (draggingRef.current) return;
-            if (inertialRef.current) return;
-            handleScroll();
-          },
-          onPointerDown,
-          onPointerMove,
-          onPointerUp: (e) => endDrag(e.pointerId),
-          onPointerCancel: (e) => endDrag(e.pointerId),
+          onScroll: handleScroll,
           children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: extendedItems.map((n, index) => {
             const dist = Math.abs(index - currentVirtual);
             const distForVisual = Math.min(dist, 2);
@@ -11330,6 +11329,14 @@ function formatTime2({ h, m, s, p }, fmt, includeSeconds) {
   const base2 = `${pad(h)}:${pad(m)}`;
   return includeSeconds ? `${base2}:${pad(s)}` : base2;
 }
+function isCompleteTimeInput(input, fmt, includeSeconds) {
+  const trimmed = input.trim().toUpperCase();
+  if (!trimmed) return false;
+  if (fmt === "12") {
+    return includeSeconds ? /^\d{1,2}:\d{2}:\d{2}\s?(AM|PM)$/.test(trimmed) : /^\d{1,2}:\d{2}\s?(AM|PM)$/.test(trimmed);
+  }
+  return includeSeconds ? /^\d{1,2}:\d{2}:\d{2}$/.test(trimmed) : /^\d{1,2}:\d{2}$/.test(trimmed);
+}
 var PRESETS = {
   morning: { h: 9, m: 0, s: 0, icon: import_lucide_react18.Coffee, label: "Morning", color: "from-amber-400 to-orange-400" },
   afternoon: { h: 14, m: 0, s: 0, icon: import_lucide_react18.Sun, label: "Afternoon", color: "from-yellow-400 to-amber-400" },
@@ -11371,24 +11378,38 @@ function TimePicker({
   ...rest
 }) {
   const tv = useSmartTranslations("ValidationInput");
+  const autoId = React31.useId();
   const isControlled = value !== void 0;
   const now = /* @__PURE__ */ new Date();
   const initial = parseTime(isControlled ? value : defaultValue, format, includeSeconds) || (format === "12" ? { h: now.getHours() % 12 || 12, m: now.getMinutes(), s: now.getSeconds(), p: now.getHours() >= 12 ? "PM" : "AM" } : { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() });
   const [open, setOpen] = React31.useState(false);
   const [parts, setParts] = React31.useState(initial);
-  const [manualInput, setManualInput] = React31.useState("");
+  const [manualInput, setManualInput] = React31.useState(formatTime2(initial, format, includeSeconds));
+  const [isDirectEditing, setIsDirectEditing] = React31.useState(false);
   const [focusedColumn, setFocusedColumn] = React31.useState(null);
   const [localRequiredError, setLocalRequiredError] = React31.useState();
   const [hasCommittedValue, setHasCommittedValue] = React31.useState(Boolean(isControlled ? value : defaultValue));
   const hourScrollRef = React31.useRef(null);
   const minuteScrollRef = React31.useRef(null);
   const secondScrollRef = React31.useRef(null);
+  const periodRef = React31.useRef(null);
+  const directEditInputRef = React31.useRef(null);
+  const triggerId = `time-picker-trigger-${autoId}`;
+  const labelId = label ? `time-picker-label-${autoId}` : void 0;
   React31.useEffect(() => {
     if (isControlled) {
       const parsed = parseTime(value, format, includeSeconds);
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled, format, includeSeconds]);
+  React31.useEffect(() => {
+    setManualInput(formatTime2(parts, format, includeSeconds));
+  }, [format, includeSeconds, parts]);
+  React31.useEffect(() => {
+    if (!isDirectEditing) return;
+    directEditInputRef.current?.focus();
+    directEditInputRef.current?.select();
+  }, [isDirectEditing]);
   React31.useEffect(() => {
     if (isControlled) {
       setHasCommittedValue(Boolean(value));
@@ -11479,6 +11500,15 @@ function TimePicker({
       setLocalRequiredError(void 0);
     }
   }, [disabled, hasCommittedValue, required]);
+  const focusColumn = React31.useCallback((column) => {
+    if (!column) return;
+    const target = column === "hour" ? hourScrollRef.current : column === "minute" ? minuteScrollRef.current : column === "second" ? secondScrollRef.current : periodRef.current;
+    target?.focus({ preventScroll: true });
+  }, []);
+  React31.useEffect(() => {
+    if (variant !== "inline" && !open) return;
+    focusColumn(focusedColumn);
+  }, [focusColumn, focusedColumn, open, variant]);
   const handleKeyDown2 = (e, column) => {
     if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(e.key)) return;
     e.preventDefault();
@@ -11522,6 +11552,7 @@ function TimePicker({
     }
     tryUpdate(newParts);
   };
+  const display = formatTime2(parts, format, includeSeconds);
   const setNow = () => {
     const now2 = /* @__PURE__ */ new Date();
     const h = now2.getHours();
@@ -11547,6 +11578,7 @@ function TimePicker({
   };
   const handleManualInput = (input) => {
     setManualInput(input);
+    if (!isCompleteTimeInput(input, format, includeSeconds)) return;
     const parsed = parseTime(input, format, includeSeconds);
     if (parsed) {
       const timeStr = formatTime2(parsed, format, includeSeconds);
@@ -11555,6 +11587,53 @@ function TimePicker({
       }
     }
   };
+  const commitManualInput = React31.useCallback(
+    (input) => {
+      const trimmed = input.trim();
+      if (!trimmed) {
+        setManualInput(display);
+        return false;
+      }
+      if (!isCompleteTimeInput(trimmed, format, includeSeconds)) {
+        setManualInput(display);
+        return false;
+      }
+      const parsed = parseTime(trimmed, format, includeSeconds);
+      if (!parsed) {
+        setManualInput(display);
+        return false;
+      }
+      const timeStr = formatTime2(parsed, format, includeSeconds);
+      if (!isTimeInRange(timeStr) || isTimeDisabled(timeStr)) {
+        setManualInput(display);
+        return false;
+      }
+      const updated = tryUpdate(parsed);
+      if (!updated) {
+        setManualInput(display);
+        return false;
+      }
+      setManualInput(timeStr);
+      return true;
+    },
+    [display, format, includeSeconds, isTimeDisabled, isTimeInRange, tryUpdate]
+  );
+  const startDirectEdit = React31.useCallback(() => {
+    if (disabled) return;
+    setManualInput(display);
+    setIsDirectEditing(true);
+  }, [disabled, display]);
+  const stopDirectEdit = React31.useCallback(
+    (mode) => {
+      if (mode === "commit") {
+        commitManualInput(manualInput);
+      } else {
+        setManualInput(display);
+      }
+      setIsDirectEditing(false);
+    },
+    [commitManualInput, display, manualInput]
+  );
   const handleCustomPreset = (time) => {
     const parsed = parseTime(time, format, includeSeconds);
     if (parsed) {
@@ -11622,13 +11701,14 @@ function TimePicker({
   const shouldMatchTriggerWidth = matchTriggerWidth ?? variant !== "compact";
   const compactPanel = variant === "compact";
   const effectiveError = error ?? localRequiredError;
-  const display = formatTime2(parts, format, includeSeconds);
   const trigger = variant === "inline" ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "button",
     {
+      id: triggerId,
       type: "button",
       disabled,
       "aria-label": "Select time",
+      "aria-labelledby": labelId,
       "aria-haspopup": "dialog",
       "aria-expanded": open,
       "aria-required": required,
@@ -11665,10 +11745,10 @@ function TimePicker({
             {
               className: cn(
                 "truncate font-medium transition-colors duration-200",
-                !value && !defaultValue && "text-muted-foreground",
-                value || defaultValue ? "text-foreground" : ""
+                !hasCommittedValue && "text-muted-foreground",
+                hasCommittedValue ? "text-foreground" : ""
               ),
-              children: value || defaultValue ? display : placeholder
+              children: hasCommittedValue ? display : placeholder
             }
           )
         ] }),
@@ -11688,13 +11768,51 @@ function TimePicker({
     tryUpdate(next);
   };
   const timePickerContent = /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn(panelSz.stackGap, compactPanel && "space-y-2.5"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("flex items-center justify-center py-1", compactPanel && "py-0.5"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn(panelSz.timeText, "font-bold tabular-nums tracking-wide text-foreground underline underline-offset-8 decoration-primary/60"), children: display }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("flex items-center justify-center py-1", compactPanel && "py-0.5"), children: isDirectEditing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "input",
+      {
+        ref: directEditInputRef,
+        type: "text",
+        value: manualInput,
+        onChange: (e) => setManualInput(e.target.value),
+        onBlur: () => stopDirectEdit("commit"),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            stopDirectEdit("commit");
+          }
+          if (e.key === "Escape") {
+            e.preventDefault();
+            stopDirectEdit("cancel");
+          }
+        },
+        "aria-label": "Edit time value",
+        className: cn(
+          panelSz.timeText,
+          "min-w-0 w-36 bg-transparent border-b border-primary/60 text-center font-bold tabular-nums tracking-wide text-foreground",
+          "focus:outline-none focus:border-primary"
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: startDirectEdit,
+        className: cn(
+          panelSz.timeText,
+          "font-bold tabular-nums tracking-wide text-foreground underline underline-offset-8 decoration-primary/60",
+          "rounded-md px-2 transition-colors hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+        ),
+        "aria-label": "Edit selected time",
+        children: display
+      }
+    ) }),
     allowManualInput && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         Input_default,
         {
           placeholder: format === "12" ? "02:30 PM" : "14:30",
-          value: manualInput || display,
+          value: manualInput,
           onChange: (e) => handleManualInput(e.target.value),
           size: panelSz.inputSize,
           variant: "outlined",
@@ -11844,9 +11962,11 @@ function TimePicker({
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "div",
               {
+                ref: periodRef,
                 className: cn("flex flex-col p-1 rounded-xl bg-muted/30", panelSz.periodGap),
                 role: "radiogroup",
                 "aria-label": "Select AM or PM",
+                "aria-labelledby": labelId,
                 tabIndex: focusedColumn === "period" ? 0 : -1,
                 onKeyDown: (e) => handleKeyDown2(e, "period"),
                 onFocus: () => setFocusedColumn("period"),
@@ -11942,10 +12062,17 @@ function TimePicker({
   ] });
   if (variant === "inline") {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "w-fit max-w-full", ...rest, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: cn(sz.label, "font-semibold", disabled ? "text-muted-foreground" : "text-foreground", effectiveError && "text-destructive"), children: [
-        label,
-        required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-destructive ml-1", children: "*" })
-      ] }) }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        "label",
+        {
+          id: labelId,
+          className: cn(sz.label, "font-semibold", disabled ? "text-muted-foreground" : "text-foreground", effectiveError && "text-destructive"),
+          children: [
+            label,
+            required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+          ]
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "input",
         {
@@ -11982,6 +12109,8 @@ function TimePicker({
     label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "label",
       {
+        id: labelId,
+        htmlFor: triggerId,
         className: cn(
           sz.label,
           "font-semibold",
@@ -17123,7 +17252,7 @@ function CategoryTreeSelect(props) {
                   // View-only mode: just display the name with folder icon
                   /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex min-w-0 items-center", TREE_NODE_GAP_CLASS), children: [
                     category.icon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.FolderTree, { className: "h-4 w-4 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/40" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "min-w-0 text-sm font-medium leading-snug break-words [overflow-wrap:anywhere]", children: category.name })
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "min-w-0 text-sm font-medium leading-snug wrap-anywhere", children: category.name })
                   ] })
                 ) : (
                   // Single/Multi select mode: icon + text + badge
@@ -17133,7 +17262,7 @@ function CategoryTreeSelect(props) {
                       "span",
                       {
                         className: cn(
-                          "min-w-0 flex-1 text-sm leading-snug break-words [overflow-wrap:anywhere] transition-all duration-200",
+                          "min-w-0 flex-1 text-sm leading-snug wrap-anywhere transition-all duration-200",
                           isSelected ? "font-semibold text-primary" : "text-foreground/80",
                           !isSelectable && "text-foreground"
                         ),