@bricks-toolkit/toolkit 0.1.26 → 0.1.27

package/dist/{chunk-G2VVB2YP.cjs → chunk-C5CAUNLU.cjs}

@@ -5,30 +5,51 @@ var react = require('react');
 var outline = require('@heroicons/react/24/outline');
 var jsxRuntime = require('react/jsx-runtime');
 
-function parseTime(value) {
-  if (!value) return { hours: 0, minutes: 0 };
-  const numbers = value.split(":").map(Number);
-  const h = numbers[0];
-  const m = numbers[1];
-  return {
-    hours: h === void 0 || isNaN(h) ? 0 : h,
-    minutes: m === void 0 || isNaN(m) ? 0 : m
-  };
+function parseTypedTime(str) {
+  const clean = str.trim();
+  if (!clean) return null;
+  const match24 = /^(\d{2}):(\d{2})$/.exec(clean);
+  if (match24?.[1] && match24[2]) {
+    const hour = parseInt(match24[1], 10);
+    const minute = parseInt(match24[2], 10);
+    if (hour >= 0 && hour <= 23 && minute >= 0 && minute <= 59) {
+      return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+    }
+  }
+  return null;
 }
-function toTimeString(hours, minutes) {
-  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+function formatTime12(iso) {
+  if (!iso) return "";
+  const parts = iso.split(":");
+  if (parts.length < 2 || !parts[0] || !parts[1]) return iso;
+  const hour = parseInt(parts[0], 10);
+  const minute = parseInt(parts[1], 10);
+  if (isNaN(hour) || isNaN(minute)) return iso;
+  const displayHour = hour % 12 || 12;
+  const ampm = hour >= 12 ? "PM" : "AM";
+  return `${String(displayHour)}:${String(minute).padStart(2, "0")} ${ampm}`;
 }
-function formatDisplay(value, use12Hour) {
-  if (!value) return "";
-  const { hours, minutes } = parseTime(value);
-  if (use12Hour) {
-    const ampm = hours >= 12 ? "PM" : "AM";
-    const h = hours % 12 || 12;
-    return `${String(h).padStart(2, "0")}:${String(minutes).padStart(2, "0")} ${ampm}`;
+function formatDisplay(iso, use12Hour) {
+  if (!iso) return "";
+  return use12Hour ? formatTime12(iso) : iso;
+}
+function generateTimeSlots(step, use12Hour) {
+  const slots = [];
+  const limit = 24 * 60;
+  const s = step > 0 && step <= 720 ? step : 1;
+  for (let minutes = 0; minutes < limit; minutes += s) {
+    const hour = Math.floor(minutes / 60);
+    const minute = minutes % 60;
+    const value = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+    const label = use12Hour ? (() => {
+      const displayHour = hour % 12 || 12;
+      const ampm = hour >= 12 ? "PM" : "AM";
+      return `${String(displayHour)}:${String(minute).padStart(2, "0")} ${ampm}`;
+    })() : value;
+    slots.push({ label, value });
   }
-  return toTimeString(hours, minutes);
+  return slots;
 }
-var ITEM_HEIGHT = 36;
 var sizeClasses = {
   xs: "h-6 px-2 text-xs",
   sm: "h-8 px-3 text-sm",
@@ -81,104 +102,12 @@ var stateMessageClasses = {
   success: "text-success font-medium",
   warning: "text-warning font-medium"
 };
-function ScrollColumn({ items, selected, onSelect, label }) {
-  const listRef = react.useRef(null);
-  const scrollToSelected = react.useCallback(
-    (behavior = "smooth") => {
-      if (!listRef.current) return;
-      const idx = items.indexOf(selected);
-      if (idx < 0) return;
-      const top = idx * ITEM_HEIGHT - ITEM_HEIGHT * 2;
-      if (typeof listRef.current.scrollTo === "function") {
-        listRef.current.scrollTo({ top: Math.max(0, top), behavior });
-      }
-    },
-    [items, selected]
-  );
-  react.useEffect(() => {
-    scrollToSelected("instant");
-  }, []);
-  react.useEffect(() => {
-    scrollToSelected("smooth");
-  }, [scrollToSelected]);
-  const step = (dir) => {
-    const idx = items.indexOf(selected);
-    const next = items[(idx + dir + items.length) % items.length];
-    if (next) onSelect(next);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", "aria-label": label, role: "group", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          step(-1);
-        },
-        className: "p-1 rounded hover:bg-hover text-text-secondary hover:text-text transition-colors",
-        "aria-label": `Decrease ${label}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronUpIcon, { className: "w-4 h-4" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "absolute inset-x-0 rounded-lg bg-primary/10 border-y border-primary/20 pointer-events-none",
-          style: { top: ITEM_HEIGHT * 2, height: ITEM_HEIGHT }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: listRef,
-          className: "overflow-y-auto scrollbar-none",
-          style: { height: ITEM_HEIGHT * 5, width: 56 },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ITEM_HEIGHT * 2 } }),
-            items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  onSelect(item);
-                },
-                className: chunkL5VQZZVR_cjs.cn(
-                  "w-full flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150",
-                  "hover:bg-hover",
-                  selected === item ? "text-primary font-bold" : "text-text-secondary"
-                ),
-                style: { height: ITEM_HEIGHT },
-                "aria-pressed": selected === item,
-                "aria-label": `${label} ${item}`,
-                children: item
-              },
-              item
-            )),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ITEM_HEIGHT * 2 } })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          step(1);
-        },
-        className: "p-1 rounded hover:bg-hover text-text-secondary hover:text-text transition-colors",
-        "aria-label": `Increase ${label}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "w-4 h-4" })
-      }
-    )
-  ] });
-}
 function AddonIcon({ children, side, size, onClick, asButton = false, ariaLabel }) {
   const iconSize = {
-    xs: "w-3.5 h-3.5",
-    sm: "w-4 h-4",
+    xs: "w-3 h-3",
+    sm: "w-3.5 h-3.5",
     md: "w-4 h-4",
-    lg: "w-5 h-5",
+    lg: "w-4.5 h-4.5",
     xl: "w-5 h-5"
   };
   const base = chunkL5VQZZVR_cjs.cn(
@@ -192,7 +121,7 @@ function AddonIcon({ children, side, size, onClick, asButton = false, ariaLabel
       {
         type: "button",
         onClick,
-        className: chunkL5VQZZVR_cjs.cn(base, "cursor-pointer hover:text-text transition-colors"),
+        className: chunkL5VQZZVR_cjs.cn(base, "cursor-pointer hover:text-text transition-colors z-20"),
         tabIndex: -1,
         "aria-label": ariaLabel,
         children
@@ -203,7 +132,7 @@ function AddonIcon({ children, side, size, onClick, asButton = false, ariaLabel
     "span",
     {
       "aria-hidden": !ariaLabel,
-      className: chunkL5VQZZVR_cjs.cn(base, "pointer-events-none"),
+      className: chunkL5VQZZVR_cjs.cn(base, "pointer-events-none z-20"),
       "aria-label": ariaLabel,
       children
     }
@@ -256,26 +185,47 @@ var TimePicker = react.forwardRef(
     minuteStep = 1,
     use12Hour = false,
     name,
-    type,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedby
   }, ref) => {
-    const internalRef = react.useRef(null);
     const generatedId = react.useId();
     const inputId = idProp ?? generatedId;
     const helperId = `${inputId}-helper`;
     const stateMessageId = `${inputId}-state`;
     const popoverId = `${inputId}-popover`;
+    const internalRef = react.useRef(null);
+    const inputRef = react.useRef(null);
+    const dropdownRef = react.useRef(null);
+    const debounceTimerRef = react.useRef(null);
     const isControlled = value !== void 0;
     const [internalValue, setInternalValue] = react.useState(defaultValue ?? "");
     const displayValue = isControlled ? value : internalValue;
-    const { hours: selHours, minutes: selMinutes } = parseTime(displayValue);
-    const selAmpm = selHours >= 12 ? "PM" : "AM";
-    const selHours12 = selHours % 12 || 12;
-    const pickerHour = String(use12Hour ? selHours12 : selHours).padStart(2, "0");
-    const pickerMinute = String(selMinutes).padStart(2, "0");
-    const pickerAmpm = selAmpm;
     const [isOpen, setIsOpen] = react.useState(false);
+    const [typedValue, setTypedValue] = react.useState(null);
+    const displayInputValue = typedValue ?? formatDisplay(displayValue, use12Hour);
+    const timeSlots = generateTimeSlots(minuteStep, use12Hour);
+    const filteredSlots = timeSlots.filter((slot) => {
+      if (!displayInputValue) return true;
+      const typedClean = displayInputValue.replace(/[^0-9]/g, "");
+      const slotLabelClean = slot.label.replace(/[^0-9]/g, "");
+      const slotValueClean = slot.value.replace(/[^0-9]/g, "");
+      return slot.label.toLowerCase().includes(displayInputValue.toLowerCase()) || slot.value.includes(displayInputValue) || slotLabelClean.includes(typedClean) || slotValueClean.includes(typedClean);
+    });
+    react.useEffect(() => {
+      if (isOpen && dropdownRef.current) {
+        const activeItem = dropdownRef.current.querySelector('[data-active="true"]');
+        if (activeItem) {
+          activeItem.scrollIntoView({ block: "nearest" });
+        }
+      }
+    }, [isOpen]);
+    react.useEffect(() => {
+      return () => {
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+      };
+    }, []);
     react.useEffect(() => {
       if (!isOpen) return;
       function handleClick(e) {
@@ -287,45 +237,91 @@ var TimePicker = react.forwardRef(
       return () => {
         document.removeEventListener("mousedown", handleClick);
       };
-    }, [isOpen, ref]);
-    const hourItems = use12Hour ? Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0")) : Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
-    const minuteItems = Array.from(
-      { length: Math.ceil(60 / minuteStep) },
-      (_, i) => String(i * minuteStep).padStart(2, "0")
-    );
-    const applyTime = react.useCallback(
-      (h, m, ap) => {
-        let hours24 = parseInt(h, 10);
-        if (use12Hour) {
-          if (ap === "AM" && hours24 === 12) hours24 = 0;
-          if (ap === "PM" && hours24 !== 12) hours24 += 12;
-        }
-        const iso = toTimeString(hours24, parseInt(m, 10));
-        if (!isControlled) setInternalValue(iso);
-        onChange?.(iso);
-        onTimeChange?.(iso);
-      },
-      [isControlled, onChange, onTimeChange, use12Hour]
-    );
-    const handleHourSelect = (h) => {
-      applyTime(h, pickerMinute, pickerAmpm);
-    };
-    const handleMinuteSelect = (m) => {
-      applyTime(pickerHour, m, pickerAmpm);
-    };
-    const handleAmpmSelect = (ap) => {
-      const a = ap;
-      applyTime(pickerHour, pickerMinute, a);
-    };
-    const handleClear = () => {
+    }, [isOpen]);
+    const handleClear = (e) => {
+      e.stopPropagation();
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
       if (!isControlled) setInternalValue("");
       onChange?.("");
       onTimeChange?.(null);
+      setTypedValue(null);
     };
-    const toggleOpen = () => {
+    const toggleOpen = (e) => {
+      e.stopPropagation();
       if (disabled || isLoading) return;
       setIsOpen((prev) => !prev);
     };
+    const handleInputChange = (e) => {
+      let val = e.target.value;
+      val = val.replace(/[^0-9:]/g, "");
+      if (val.length > 5) {
+        val = val.slice(0, 5);
+      }
+      const currentLength = typedValue?.length ?? 0;
+      if (val.length === 2 && !val.includes(":") && val.length > currentLength) {
+        val = val + ":";
+      }
+      if (val.length === 5) {
+        const parts = val.split(":");
+        if (parts[0] && parts[1]) {
+          let hours = parseInt(parts[0], 10);
+          let minutes = parseInt(parts[1], 10);
+          if (hours > 23) hours = 23;
+          if (minutes > 59) minutes = 59;
+          val = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+        }
+      }
+      setTypedValue(val);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        const parsed = parseTypedTime(val);
+        if (parsed) {
+          if (!isControlled) setInternalValue(parsed);
+          onChange?.(parsed);
+          onTimeChange?.(parsed);
+        }
+      }, 1e3);
+    };
+    const handleKeyDown = (e) => {
+      const allowedKeys = [
+        "Backspace",
+        "Delete",
+        "ArrowLeft",
+        "ArrowRight",
+        "Tab",
+        "Escape",
+        "Enter"
+      ];
+      if (allowedKeys.includes(e.key) || e.ctrlKey || e.metaKey) {
+        return;
+      }
+      if (!/[0-9:]/.test(e.key)) {
+        e.preventDefault();
+      }
+    };
+    const handleInputBlur = () => {
+      setTimeout(() => {
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+        const finalVal = typedValue ?? displayValue;
+        const parsed = parseTypedTime(finalVal);
+        if (parsed) {
+          if (!isControlled) setInternalValue(parsed);
+          onChange?.(parsed);
+          onTimeChange?.(parsed);
+        }
+        setTypedValue(null);
+      }, 150);
+    };
+    const handleInputFocus = () => {
+      setTypedValue(displayValue);
+      if (!disabled && !isLoading) {
+        setIsOpen(true);
+      }
+    };
     const showClear = clearable && displayValue.length > 0 && !disabled && !isLoading;
     const rightPad = {
       xs: "pr-6",
@@ -378,33 +374,35 @@ var TimePicker = react.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 items-center", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "left", size, children: leftElement ?? /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "w-full h-full" }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
+                    "input",
                     {
+                      ref: inputRef,
                       id: inputId,
-                      type: type ?? "button",
-                      role: "combobox",
-                      "aria-expanded": isOpen,
-                      "aria-haspopup": "dialog",
-                      "aria-controls": popoverId,
+                      type: "text",
+                      value: displayInputValue,
+                      onChange: handleInputChange,
+                      onKeyDown: handleKeyDown,
+                      onFocus: handleInputFocus,
+                      onBlur: handleInputBlur,
+                      placeholder,
                       "aria-label": ariaLabel ?? label ?? "Time picker",
                       "aria-describedby": describedBy,
                       "aria-required": required,
                       "aria-invalid": state === "error" ? true : void 0,
                       disabled: Boolean(disabled) || Boolean(isLoading),
-                      onClick: toggleOpen,
                       name,
                       className: chunkL5VQZZVR_cjs.cn(
-                        "w-full flex items-center text-left transition-colors duration-150 cursor-pointer",
+                        "w-full flex items-center text-left transition-colors duration-150",
                         "disabled:cursor-not-allowed disabled:opacity-50",
+                        "focus:outline-none focus:ring-0",
                         sizeClasses[size],
                         variantClasses[variant],
                         stateVariantClasses[state][variant],
                         "pl-9",
-                        showClear || rightElement ? rightPad[size] : "",
+                        rightPad[size],
                         prefix !== void 0 && suffix !== void 0 ? "rounded-none" : prefix !== void 0 ? "rounded-l-none" : suffix !== void 0 ? "rounded-r-none" : "",
                         inputClassName
-                      ),
-                      children: displayValue ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text", children: formatDisplay(displayValue, use12Hour) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted", children: placeholder })
+                      )
                     }
                   ),
                   isLoading ? /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "right", size, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -446,12 +444,68 @@ var TimePicker = react.forwardRef(
                       ariaLabel: "Clear time",
                       children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-full h-full", strokeWidth: 2.5 })
                     }
-                  ) : rightElement ? /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "right", size, children: rightElement }) : null
+                  ) : rightElement ? /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "right", size, children: rightElement }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    AddonIcon,
+                    {
+                      side: "right",
+                      size,
+                      asButton: true,
+                      onClick: toggleOpen,
+                      ariaLabel: "Open time picker dropdown",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "w-full h-full text-text-secondary/70 hover:text-text transition-colors" })
+                    }
+                  )
                 ] }),
                 suffix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Addon, { side: "right", children: suffix })
               ]
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: popoverId,
+              ref: dropdownRef,
+              role: "listbox",
+              "aria-label": "Time options",
+              className: chunkL5VQZZVR_cjs.cn(
+                "absolute top-full left-0 z-50 mt-1.5 w-full max-h-60 overflow-y-auto",
+                "bg-surface/90 backdrop-blur-md border border-border/80 rounded-xl shadow-xl py-1.5",
+                "transition-all duration-200 origin-top ease-out",
+                isOpen ? "opacity-100 scale-100 pointer-events-auto translate-y-0" : "opacity-0 scale-95 pointer-events-none -translate-y-1"
+              ),
+              children: filteredSlots.length > 0 ? filteredSlots.map((slot) => {
+                const isSelected = slot.value === displayValue;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "data-active": isSelected,
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                    },
+                    onClick: () => {
+                      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+                      if (!isControlled) setInternalValue(slot.value);
+                      onChange?.(slot.value);
+                      onTimeChange?.(slot.value);
+                      setTypedValue(null);
+                      setIsOpen(false);
+                    },
+                    className: chunkL5VQZZVR_cjs.cn(
+                      "w-full text-left px-4 py-2.5 text-sm transition-all duration-normal cursor-pointer flex items-center justify-between",
+                      "hover:bg-primary/5 hover:text-primary hover:pl-5 font-medium",
+                      isSelected ? "bg-primary/10 text-primary font-bold pl-5" : "text-text-secondary"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: slot.label }),
+                      isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary animate-pulse" })
+                    ]
+                  },
+                  slot.value
+                );
+              }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-xs text-text-muted py-3", children: "No matching times found" })
+            }
+          ),
           helperText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -472,65 +526,6 @@ var TimePicker = react.forwardRef(
               ),
               children: stateMessage
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              id: popoverId,
-              role: "dialog",
-              "aria-label": "Time picker",
-              "aria-modal": "true",
-              className: chunkL5VQZZVR_cjs.cn(
-                "absolute top-full left-0 z-50 mt-1",
-                "bg-surface border border-border rounded-xl shadow-xl",
-                "transition-all duration-200 origin-top",
-                isOpen ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-95 pointer-events-none"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-text-muted uppercase tracking-widest mb-3 text-center", children: "Select Time" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ScrollColumn,
-                    {
-                      items: hourItems,
-                      selected: pickerHour,
-                      onSelect: handleHourSelect,
-                      label: "Hour"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "flex items-center self-center pb-2 text-text-muted font-bold text-lg select-none",
-                      style: { height: ITEM_HEIGHT },
-                      children: ":"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ScrollColumn,
-                    {
-                      items: minuteItems,
-                      selected: pickerMinute,
-                      onSelect: handleMinuteSelect,
-                      label: "Minute"
-                    }
-                  ),
-                  use12Hour && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px self-stretch bg-border mx-1" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ScrollColumn,
-                      {
-                        items: ["AM", "PM"],
-                        selected: pickerAmpm,
-                        onSelect: handleAmpmSelect,
-                        label: "AM/PM"
-                      }
-                    )
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 pt-3 border-t border-border text-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-primary font-mono", children: displayValue ? formatDisplay(displayValue, use12Hour) : "\u2013\u2013:\u2013\u2013" }) })
-              ] })
-            }
           )
         ]
       }