@geomak/ui 5.3.0 → 5.5.0

package/dist/index.js

@@ -15,6 +15,7 @@ import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
 var Sun = ({ color = "yellow" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }) });
@@ -1799,8 +1800,8 @@ function CatalogCarousel({ items, buttonText, onOpen }) {
     )
   ] }) });
 }
-function Catalog({ display = "grid", items = [], buttonText, onOpen }) {
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: display === "grid" ? /* @__PURE__ */ jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsx(CatalogCarousel, { items, buttonText, onOpen }) });
+function Catalog({ display: display2 = "grid", items = [], buttonText, onOpen }) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: display2 === "grid" ? /* @__PURE__ */ jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsx(CatalogCarousel, { items, buttonText, onOpen }) });
 }
 function ContextMenu({ items, children }) {
   return /* @__PURE__ */ jsxs(ContextMenuPrimitive.Root, { children: [
@@ -4629,7 +4630,1018 @@ function ChevronLeft() {
 function ChevronRight3() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
+var LINE_HEIGHT_PX = 21;
+function TextArea({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  label,
+  htmlFor,
+  placeholder,
+  name,
+  layout = "vertical",
+  size = "md",
+  rows = 4,
+  autoGrow = false,
+  maxRows = 12,
+  maxLength,
+  showCount = false,
+  resize,
+  errorMessage,
+  required,
+  style,
+  inputStyle
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (!autoGrow) return;
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const maxH = maxRows * LINE_HEIGHT_PX + 16;
+    el.style.height = `${Math.min(el.scrollHeight, maxH)}px`;
+    el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
+  }, [value, autoGrow, maxRows]);
+  const count = typeof value === "string" ? value.length : 0;
+  const resizeClass = (resize ?? (autoGrow ? "none" : "vertical")) === "none" ? "resize-none" : (resize ?? "vertical") === "horizontal" ? "resize-x" : (resize ?? "vertical") === "both" ? "resize" : "resize-y";
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref,
+            disabled,
+            value,
+            onChange,
+            onBlur,
+            name,
+            id: htmlFor,
+            rows,
+            maxLength,
+            placeholder: placeholder ?? "",
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            className: `${fieldShell({ size, hasError, disabled, sized: false })} px-3 py-2 leading-normal ${resizeClass}`,
+            style: { ...style, ...inputStyle }
+          }
+        ),
+        showCount && /* @__PURE__ */ jsx("div", { className: "mt-1 text-right text-xs text-foreground-muted tabular-nums", children: maxLength != null ? `${count} / ${maxLength}` : count })
+      ]
+    }
+  );
+}
+var SIZE = {
+  sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
+  md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
+  lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
+};
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  fullWidth = false,
+  disabled,
+  "aria-label": ariaLabel
+}) {
+  const sz = SIZE[size];
+  return /* @__PURE__ */ jsx(
+    ToggleGroup.Root,
+    {
+      type: "single",
+      value,
+      defaultValue,
+      onValueChange: (v) => {
+        if (v) onChange?.(v);
+      },
+      disabled,
+      "aria-label": ariaLabel,
+      className: [
+        "inline-flex items-center gap-1 rounded-lg border border-border bg-surface-raised p-1",
+        sz.h,
+        fullWidth ? "flex w-full" : "",
+        disabled ? "opacity-60 cursor-not-allowed" : ""
+      ].filter(Boolean).join(" "),
+      children: options.map((opt) => /* @__PURE__ */ jsxs(
+        ToggleGroup.Item,
+        {
+          value: opt.value,
+          disabled: opt.disabled,
+          className: [
+            "inline-flex items-center justify-center gap-1.5 rounded-md select-none whitespace-nowrap",
+            "transition-colors duration-150 h-full",
+            sz.text,
+            sz.pad,
+            fullWidth ? "flex-1" : "",
+            // Resting: muted text, transparent. Hover lifts the text.
+            "text-foreground-secondary hover:text-foreground",
+            // Active: surface-white pill + accent text + subtle shadow.
+            "data-[state=on]:bg-surface data-[state=on]:text-accent data-[state=on]:shadow-sm",
+            "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
+            "disabled:opacity-40 disabled:cursor-not-allowed"
+          ].filter(Boolean).join(" "),
+          children: [
+            opt.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: opt.icon }),
+            opt.label
+          ]
+        },
+        opt.value
+      ))
+    }
+  );
+}
+var TRACK_H = { sm: "h-1", md: "h-1.5", lg: "h-2" };
+var THUMB = { sm: "h-3.5 w-3.5", md: "h-4 w-4", lg: "h-5 w-5" };
+var toArray = (v) => v == null ? void 0 : Array.isArray(v) ? v : [v];
+function Slider({
+  value,
+  defaultValue,
+  onChange,
+  onChangeEnd,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  formatValue = (n) => String(n),
+  marks,
+  tooltip = false,
+  size = "md",
+  disabled,
+  errorMessage,
+  name,
+  htmlFor
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const isRange = Array.isArray(value ?? defaultValue);
+  const [internal, setInternal] = useState(
+    () => toArray(value) ?? toArray(defaultValue) ?? [min]
+  );
+  const current = toArray(value) ?? internal;
+  const [dragging, setDragging] = useState(false);
+  const emit = (arr) => {
+    setInternal(arr);
+    const next = isRange ? [arr[0], arr[1]] : arr[0];
+    onChange?.(next);
+  };
+  const valueText = current.map(formatValue).join(" \u2013 ");
+  return /* @__PURE__ */ jsxs(Field, { label: void 0, errorId, errorMessage, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-secondary tabular-nums", children: valueText })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        id: htmlFor,
+        name,
+        value: toArray(value),
+        defaultValue: toArray(defaultValue),
+        min,
+        max,
+        step,
+        disabled,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        onValueChange: (v) => {
+          emit(v);
+          setDragging(true);
+        },
+        onValueCommit: (v) => {
+          setDragging(false);
+          onChangeEnd?.(isRange ? [v[0], v[1]] : v[0]);
+        },
+        className: "relative flex items-center select-none touch-none w-full h-5",
+        children: [
+          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: `relative grow rounded-full bg-surface-raised border border-border ${TRACK_H[size]}`, children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full rounded-full bg-accent" }) }),
+          current.map((_, i) => /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              className: `group relative block ${THUMB[size]} rounded-full border-2 border-accent bg-surface shadow-sm transition-shadow
+                            focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring
+                            disabled:cursor-not-allowed`,
+              children: tooltip && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 rounded-md bg-foreground px-1.5 py-0.5 text-xs text-background tabular-nums whitespace-nowrap transition-opacity ${dragging ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100"}`,
+                  children: formatValue(current[i])
+                }
+              )
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    marks && marks.length > 0 && /* @__PURE__ */ jsx("div", { className: "relative mt-2 h-4", children: marks.map((m) => {
+      const pct = (m.value - min) / (max - min) * 100;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute -translate-x-1/2 text-xs text-foreground-muted tabular-nums",
+          style: { left: `${pct}%` },
+          children: m.label ?? m.value
+        },
+        m.value
+      );
+    }) })
+  ] });
+}
+function TagsInput({
+  value,
+  defaultValue,
+  onChange,
+  label,
+  htmlFor,
+  name,
+  placeholder = "Add and press Enter",
+  layout = "vertical",
+  size = "md",
+  disabled,
+  errorMessage,
+  required,
+  maxTags,
+  dedupe = true,
+  validate,
+  separators = ["Enter", ","]
+}) {
+  const errorId = useId();
+  const inputRef = useRef(null);
+  const [internal, setInternal] = useState(defaultValue ?? []);
+  const [draft, setDraft] = useState("");
+  const [localError, setLocalError] = useState(null);
+  const tags = value ?? internal;
+  const hasError = errorMessage != null || localError != null;
+  const errorText = errorMessage ?? localError ?? void 0;
+  const commitTags = (next) => {
+    setInternal(next);
+    onChange?.(next);
+  };
+  const addTag = (raw) => {
+    const tag = raw.trim();
+    if (!tag) return false;
+    if (maxTags != null && tags.length >= maxTags) return false;
+    if (dedupe && tags.some((t) => t.toLowerCase() === tag.toLowerCase())) {
+      setLocalError(`"${tag}" is already added`);
+      return false;
+    }
+    if (validate) {
+      const res = validate(tag, tags);
+      if (res !== true) {
+        setLocalError(typeof res === "string" ? res : `"${tag}" is not valid`);
+        return false;
+      }
+    }
+    setLocalError(null);
+    commitTags([...tags, tag]);
+    return true;
+  };
+  const removeTag = (idx) => {
+    commitTags(tags.filter((_, i) => i !== idx));
+    setLocalError(null);
+  };
+  const onKeyDown = (e) => {
+    if (separators.includes(e.key)) {
+      e.preventDefault();
+      if (addTag(draft)) setDraft("");
+    } else if (e.key === "Backspace" && draft === "" && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+  const onPaste = (e) => {
+    const text = e.clipboardData.getData("text");
+    const parts = text.split(/[\n,;]+/).map((p) => p.trim()).filter(Boolean);
+    if (parts.length > 1) {
+      e.preventDefault();
+      let added = false;
+      for (const p of parts) added = addTag(p) || added;
+      if (added) setDraft("");
+    }
+  };
+  const atMax = maxTags != null && tags.length >= maxTags;
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage: errorText,
+      layout,
+      required,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex flex-wrap items-center gap-1.5 min-h-[36px] ${fieldShell({ size, hasError, disabled, focusWithin: true, sized: false })} px-2 py-1.5`,
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            tags.map((tag, idx) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 rounded-md bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 border border-border",
+                children: [
+                  tag,
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeTag(idx);
+                      },
+                      "aria-label": `Remove ${tag}`,
+                      className: "inline-flex items-center justify-center w-4 h-4 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+                      children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+                    }
+                  )
+                ]
+              },
+              `${tag}-${idx}`
+            )),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                id: htmlFor,
+                name,
+                disabled: disabled || atMax,
+                value: draft,
+                onChange: (e) => {
+                  setDraft(e.target.value);
+                  if (localError) setLocalError(null);
+                },
+                onKeyDown,
+                onPaste,
+                onBlur: () => {
+                  if (addTag(draft)) setDraft("");
+                },
+                placeholder: atMax ? "" : tags.length === 0 ? placeholder : "",
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
+                autoComplete: "off",
+                className: "flex-1 min-w-[6rem] bg-transparent outline-none text-sm placeholder:text-foreground-muted disabled:cursor-not-allowed"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var BOX_SIZE = {
+  sm: "h-9 w-8 text-sm",
+  md: "h-11 w-10 text-base",
+  lg: "h-14 w-12 text-lg"
+};
+function OtpInput({
+  length = 6,
+  value = "",
+  onChange,
+  onComplete,
+  label,
+  htmlFor,
+  name,
+  mode = "numeric",
+  masked = false,
+  size = "md",
+  disabled,
+  errorMessage,
+  required,
+  groupAfter
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const refs = useRef([]);
+  const chars = Array.from({ length }, (_, i) => value[i] ?? "");
+  const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
+  const emit = (next) => {
+    onChange?.(next);
+    if (next.length === length && !next.includes(" ") && [...next].every(Boolean)) {
+      onComplete?.(next);
+    }
+  };
+  const setCharAt = (idx, char) => {
+    const arr = chars.slice();
+    arr[idx] = char;
+    emit(arr.join(""));
+  };
+  const focusBox = (idx) => {
+    const el = refs.current[Math.max(0, Math.min(length - 1, idx))];
+    el?.focus();
+    el?.select();
+  };
+  const onBoxChange = (idx, raw) => {
+    const char = raw.slice(-1);
+    if (char && !pattern.test(char)) return;
+    setCharAt(idx, char);
+    if (char) focusBox(idx + 1);
+  };
+  const onKeyDown = (idx, e) => {
+    if (e.key === "Backspace") {
+      if (chars[idx]) {
+        setCharAt(idx, "");
+      } else if (idx > 0) {
+        setCharAt(idx - 1, "");
+        focusBox(idx - 1);
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focusBox(idx - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusBox(idx + 1);
+    }
+  };
+  const onPaste = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text").trim();
+    const valid = [...text].filter((c) => pattern.test(c)).slice(0, length);
+    if (valid.length === 0) return;
+    emit(valid.join(""));
+    focusBox(valid.length);
+  };
+  return /* @__PURE__ */ jsx(Field, { label, htmlFor, errorId, errorMessage, required, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          refs.current[idx] = el;
+        },
+        id: idx === 0 ? htmlFor : void 0,
+        name: idx === 0 ? name : void 0,
+        value: char,
+        disabled,
+        inputMode: mode === "numeric" ? "numeric" : "text",
+        autoComplete: idx === 0 ? "one-time-code" : "off",
+        type: masked && char ? "password" : "text",
+        maxLength: 1,
+        "aria-label": `Digit ${idx + 1}`,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        onChange: (e) => onBoxChange(idx, e.target.value),
+        onKeyDown: (e) => onKeyDown(idx, e),
+        onPaste,
+        onFocus: (e) => e.target.select(),
+        className: [
+          BOX_SIZE[size],
+          "text-center font-medium rounded-lg border bg-surface text-foreground",
+          "transition-[border-color,box-shadow] duration-150",
+          hasError ? "border-status-error" : "border-border",
+          "hover:border-border-strong",
+          "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring",
+          "disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed"
+        ].join(" ")
+      }
+    ),
+    groupAfter && (idx + 1) % groupAfter === 0 && idx < length - 1 && /* @__PURE__ */ jsx("span", { className: "w-2 text-center text-foreground-muted", "aria-hidden": "true", children: "\xB7" })
+  ] }, idx)) }) });
+}
+var ICON_SIZE = { sm: "w-4 h-4", md: "w-5 h-5", lg: "w-7 h-7" };
+var Star = (filled) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: filled ? 0 : 1.5, className: "w-full h-full", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11.48 3.5a.56.56 0 011.04 0l2.13 4.77 5.18.5a.56.56 0 01.32.97l-3.9 3.46 1.15 5.1a.56.56 0 01-.83.6L12 16.8l-4.57 2.6a.56.56 0 01-.83-.6l1.15-5.1-3.9-3.46a.56.56 0 01.32-.97l5.18-.5L11.48 3.5z" }) });
+function Rating({
+  value,
+  defaultValue = 0,
+  onChange,
+  count = 5,
+  allowHalf = false,
+  readOnly = false,
+  clearable = true,
+  label,
+  size = "md",
+  disabled,
+  icon = Star,
+  errorMessage,
+  name
+}) {
+  const errorId = useId();
+  const [internal, setInternal] = useState(defaultValue);
+  const [hover, setHover] = useState(null);
+  const current = value ?? internal;
+  const display2 = hover ?? current;
+  const interactive = !readOnly && !disabled;
+  const commit = (next) => {
+    const v = clearable && next === current ? 0 : next;
+    setInternal(v);
+    onChange?.(v);
+  };
+  const onKeyDown = (e) => {
+    if (!interactive) return;
+    const step = allowHalf ? 0.5 : 1;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      commit(Math.min(count, current + step));
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      commit(Math.max(0, current - step));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      commit(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      commit(count);
+    }
+  };
+  return /* @__PURE__ */ jsx(Field, { label, errorId, errorMessage, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: interactive ? "slider" : "img",
+      "aria-label": typeof label === "string" ? label : "Rating",
+      "aria-valuenow": interactive ? current : void 0,
+      "aria-valuemin": interactive ? 0 : void 0,
+      "aria-valuemax": interactive ? count : void 0,
+      "aria-valuetext": `${current} of ${count}`,
+      tabIndex: interactive ? 0 : -1,
+      onKeyDown,
+      onMouseLeave: () => setHover(null),
+      className: "inline-flex items-center gap-1 text-accent focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring rounded-md w-max",
+      children: [
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current }),
+        Array.from({ length: count }, (_, i) => {
+          const starValue = i + 1;
+          const fillFraction = Math.max(0, Math.min(1, display2 - i));
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `relative ${ICON_SIZE[size]} ${interactive ? "cursor-pointer" : ""} ${disabled ? "opacity-50" : ""}`,
+              onMouseMove: (e) => {
+                if (!interactive) return;
+                if (allowHalf) {
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  const half = e.clientX - rect.left < rect.width / 2;
+                  setHover(i + (half ? 0.5 : 1));
+                } else {
+                  setHover(starValue);
+                }
+              },
+              onClick: (e) => {
+                if (!interactive) return;
+                if (allowHalf) {
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  const half = e.clientX - rect.left < rect.width / 2;
+                  commit(i + (half ? 0.5 : 1));
+                } else {
+                  commit(starValue);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-0 text-foreground-muted", children: icon(false) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 overflow-hidden",
+                    style: { width: `${fillFraction * 100}%` },
+                    children: icon(true)
+                  }
+                )
+              ]
+            },
+            i
+          );
+        })
+      ]
+    }
+  ) });
+}
+var pad = (n) => n.toString().padStart(2, "0");
+function parse(value) {
+  if (!value) return null;
+  const [h, m, s] = value.split(":").map(Number);
+  if (Number.isNaN(h) || Number.isNaN(m)) return null;
+  return { h, m, s: Number.isNaN(s) ? 0 : s };
+}
+function display(value, use12, withSeconds) {
+  const p = parse(value);
+  if (!p) return "";
+  if (use12) {
+    const period = p.h >= 12 ? "PM" : "AM";
+    const h12 = p.h % 12 === 0 ? 12 : p.h % 12;
+    return `${h12}:${pad(p.m)}${withSeconds ? `:${pad(p.s)}` : ""} ${period}`;
+  }
+  return `${pad(p.h)}:${pad(p.m)}${withSeconds ? `:${pad(p.s)}` : ""}`;
+}
+function TimePicker({
+  value,
+  onChange,
+  label,
+  htmlFor,
+  name,
+  placeholder = "Select a time\u2026",
+  layout = "vertical",
+  size = "md",
+  use12Hours = false,
+  withSeconds = false,
+  minuteStep = 1,
+  disabled,
+  errorMessage,
+  required,
+  style
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = useState(false);
+  const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
+  const update = (next) => {
+    const merged = { ...parsed, ...next };
+    onChange?.(`${pad(merged.h)}:${pad(merged.m)}${withSeconds ? `:${pad(merged.s)}` : ""}`);
+  };
+  const hours = use12Hours ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+  const seconds = Array.from({ length: 60 }, (_, i) => i);
+  const selectedHourCol = use12Hours ? parsed.h % 12 === 0 ? 12 : parsed.h % 12 : parsed.h;
+  const period = parsed.h >= 12 ? "PM" : "AM";
+  const setHour12 = (h12, p) => {
+    const h24 = p === "AM" ? h12 === 12 ? 0 : h12 : h12 === 12 ? 12 : h12 + 12;
+    update({ h: h24 });
+  };
+  const Column = ({ items, selected, onPick, fmt }) => /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-y-auto max-h-48 w-14 hidden-scrollbar", role: "listbox", children: items.map((n) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected === n,
+      onClick: () => onPick(n),
+      className: `py-1.5 text-sm rounded-md text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selected === n ? "bg-accent text-accent-fg" : "text-foreground hover:bg-surface-raised"}`,
+      children: fmt ? fmt(n) : pad(n)
+    },
+    n
+  )) });
+  return /* @__PURE__ */ jsxs(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: [
+    /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          id: htmlFor,
+          type: "button",
+          disabled,
+          style,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": hasError ? errorId : void 0,
+          className: `flex items-center justify-between cursor-pointer select-none ${!style?.width ? "min-w-[160px]" : ""} ${fieldShell({ size, hasError, disabled })}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `text-sm truncate ${value ? "" : "text-foreground-muted"}`, children: display(value, use12Hours, withSeconds) || placeholder }),
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, className: "w-4 h-4 flex-shrink-0 text-foreground-muted ml-2", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2", strokeLinecap: "round" })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+        Popover.Content,
+        {
+          align: "start",
+          sideOffset: 4,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 flex gap-1 animate-in fade-in-0 zoom-in-95",
+          children: [
+            /* @__PURE__ */ jsx(
+              Column,
+              {
+                items: hours,
+                selected: selectedHourCol,
+                onPick: (h) => use12Hours ? setHour12(h, period) : update({ h }),
+                fmt: use12Hours ? (n) => String(n) : pad
+              }
+            ),
+            /* @__PURE__ */ jsx(Column, { items: minutes, selected: parsed.m, onPick: (m) => update({ m }) }),
+            withSeconds && /* @__PURE__ */ jsx(Column, { items: seconds, selected: parsed.s, onPick: (s) => update({ s }) }),
+            use12Hours && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 w-12", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setHour12(selectedHourCol, p),
+                className: `py-1.5 text-sm rounded-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${period === p ? "bg-accent text-accent-fg" : "text-foreground hover:bg-surface-raised"}`,
+                children: p
+              },
+              p
+            )) })
+          ]
+        }
+      ) })
+    ] }),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "" })
+  ] });
+}
+var MONTH_NAMES2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var WEEKDAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var startOfMonth2 = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+var addMonths2 = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+var addDays2 = (d, n) => {
+  const c = new Date(d);
+  c.setDate(c.getDate() + n);
+  return c;
+};
+var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var defaultFmt = (d) => `${d.getFullYear()}-${`${d.getMonth() + 1}`.padStart(2, "0")}-${`${d.getDate()}`.padStart(2, "0")}`;
+function buildGrid2(viewMonth, weekStartsOn) {
+  const first = startOfMonth2(viewMonth);
+  const offset = (first.getDay() - weekStartsOn + 7) % 7;
+  const gridStart = addDays2(first, -offset);
+  return Array.from({ length: 42 }, (_, i) => {
+    const d = addDays2(gridStart, i);
+    return { date: d, outside: d.getMonth() !== viewMonth.getMonth() };
+  });
+}
+function DateRangePicker({
+  value = { start: null, end: null },
+  onChange,
+  label,
+  htmlFor,
+  placeholder = "Select a date range\u2026",
+  layout = "vertical",
+  size = "md",
+  min,
+  max,
+  weekStartsOn = 0,
+  presets,
+  format = defaultFmt,
+  disabled,
+  errorMessage,
+  required,
+  style
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = useState(false);
+  const [leftMonth, setLeftMonth] = useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
+  const [pendingStart, setPendingStart] = useState(null);
+  const [hoverDate, setHoverDate] = useState(null);
+  const weekdays = useMemo(
+    () => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
+    [weekStartsOn]
+  );
+  const isDisabled = (d) => min && d < startOfDay(min) || max && d > startOfDay(max);
+  const effective = pendingStart ? { start: pendingStart, end: hoverDate } : value;
+  const inRange = (d) => {
+    const { start, end } = effective;
+    if (!start || !end) return false;
+    const [a, b] = start <= end ? [start, end] : [end, start];
+    return d >= startOfDay(a) && d <= startOfDay(b);
+  };
+  const onDayClick = (d) => {
+    if (isDisabled(d)) return;
+    if (!pendingStart) {
+      setPendingStart(d);
+      setHoverDate(d);
+      onChange?.({ start: d, end: null });
+    } else {
+      const [start, end] = pendingStart <= d ? [pendingStart, d] : [d, pendingStart];
+      onChange?.({ start, end });
+      setPendingStart(null);
+      setHoverDate(null);
+      setOpen(false);
+    }
+  };
+  const triggerText = value.start && value.end ? `${format(value.start)} \u2013 ${format(value.end)}` : value.start ? `${format(value.start)} \u2013 \u2026` : "";
+  const renderMonth = (viewMonth) => {
+    const cells = buildGrid2(viewMonth, weekStartsOn);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-center mb-2 select-none", children: [
+        MONTH_NAMES2[viewMonth.getMonth()],
+        " ",
+        viewMonth.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-y-1", children: [
+        weekdays.map((w) => /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium text-foreground-muted uppercase text-center", children: w }, w)),
+        cells.map(({ date, outside }) => {
+          const dis = isDisabled(date);
+          const isStart = effective.start && isSameDay2(date, effective.start);
+          const isEnd = effective.end && isSameDay2(date, effective.end);
+          const within = inRange(date) && !isStart && !isEnd;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: dis,
+              onMouseEnter: () => pendingStart && setHoverDate(date),
+              onClick: () => onDayClick(date),
+              className: [
+                "h-8 text-xs font-medium transition-colors",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                "disabled:opacity-30 disabled:cursor-not-allowed",
+                isStart || isEnd ? "bg-accent text-accent-fg rounded-md" : within ? "bg-surface-raised text-foreground rounded-none" : outside ? "text-foreground-muted hover:bg-surface-raised rounded-md" : "text-foreground hover:bg-surface-raised rounded-md"
+              ].join(" "),
+              children: date.getDate()
+            },
+            defaultFmt(date)
+          );
+        })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => {
+    if (!disabled) {
+      setOpen(o);
+      if (!o) {
+        setPendingStart(null);
+        setHoverDate(null);
+      }
+    }
+  }, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: htmlFor,
+        type: "button",
+        disabled,
+        style,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        className: `flex items-center justify-between cursor-pointer select-none ${!style?.width ? "min-w-[240px]" : ""} ${fieldShell({ size, hasError, disabled })}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `text-sm truncate ${triggerText ? "" : "text-foreground-muted"}`, children: triggerText || placeholder }),
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, className: "w-4 h-4 flex-shrink-0 text-foreground-muted ml-2", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+            /* @__PURE__ */ jsx("path", { d: "M3 9h18M8 3v4M16 3v4", strokeLinecap: "round" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 flex gap-3 animate-in fade-in-0 zoom-in-95",
+        children: [
+          presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 pr-3 border-r border-border min-w-[120px]", children: presets.map((p) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onChange?.(p.range());
+                setOpen(false);
+              },
+              className: "text-left text-xs px-2 py-1.5 rounded-md text-foreground-secondary hover:bg-surface-raised hover:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+              children: p.label
+            },
+            p.label
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setLeftMonth(addMonths2(leftMonth, -1)),
+                  "aria-label": "Previous month",
+                  className: "absolute -top-1 left-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+                }
+              ),
+              renderMonth(leftMonth)
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setLeftMonth(addMonths2(leftMonth, 1)),
+                  "aria-label": "Next month",
+                  className: "absolute -top-1 right-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+                }
+              ),
+              renderMonth(addMonths2(leftMonth, 1))
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+var DEFAULT_SWATCHES = [
+  "#0466c8",
+  "#1e8449",
+  "#d68910",
+  "#c0392b",
+  "#8e44ad",
+  "#16a085",
+  "#2c3e50",
+  "#7f8c8d",
+  "#e84393",
+  "#00b894",
+  "#fdcb6e",
+  "#0a1929"
+];
+var HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function ColorPicker({
+  value = "",
+  onChange,
+  label,
+  htmlFor,
+  name,
+  layout = "vertical",
+  size = "md",
+  swatches = DEFAULT_SWATCHES,
+  allowCustom = true,
+  disabled,
+  errorMessage,
+  required,
+  placeholder = "Pick a colour\u2026"
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const valid = HEX_RE.test(value);
+  const pick = (hex) => {
+    onChange?.(hex);
+    setDraft(hex);
+  };
+  const commitDraft = (raw) => {
+    const hex = raw.startsWith("#") ? raw : `#${raw}`;
+    setDraft(hex);
+    if (HEX_RE.test(hex)) onChange?.(hex);
+  };
+  return /* @__PURE__ */ jsxs(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: [
+    /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          id: htmlFor,
+          type: "button",
+          disabled,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": hasError ? errorId : void 0,
+          className: `flex items-center gap-2 cursor-pointer select-none ${fieldShell({ size, hasError, disabled })}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "h-4 w-4 flex-shrink-0 rounded border border-border",
+                style: { backgroundColor: valid ? value : "transparent" },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: `flex-1 text-left text-sm truncate ${valid ? "text-foreground" : "text-foreground-muted"}`, children: valid ? value.toLowerCase() : placeholder })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+        Popover.Content,
+        {
+          align: "start",
+          sideOffset: 4,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 w-56 animate-in fade-in-0 zoom-in-95",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-2 mb-3", children: swatches.map((sw) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  pick(sw);
+                  setOpen(false);
+                },
+                "aria-label": sw,
+                className: `h-7 w-7 rounded-md border transition-transform hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${value.toLowerCase() === sw.toLowerCase() ? "border-accent ring-2 ring-focus-ring" : "border-border"}`,
+                style: { backgroundColor: sw }
+              },
+              sw
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  value: draft,
+                  onChange: (e) => commitDraft(e.target.value),
+                  placeholder: "#0466c8",
+                  "aria-label": "Hex colour",
+                  className: `flex-1 ${fieldShell({ size: "sm" })}`
+                }
+              ),
+              allowCustom && /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: valid ? value : "#000000",
+                  onChange: (e) => pick(e.target.value),
+                  "aria-label": "Custom colour",
+                  className: "h-7 w-9 rounded-md border border-border bg-surface cursor-pointer p-0.5"
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    ] }),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: valid ? value : "" })
+  ] });
+}
 
-export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, RadioGroup, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
+export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map