@geomak/ui 5.3.0 → 5.5.0

package/dist/index.cjs

@@ -16,6 +16,7 @@ var Popover = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var SliderPrimitive = require('@radix-ui/react-slider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -49,6 +50,7 @@ var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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" }) });
@@ -1833,8 +1835,8 @@ function CatalogCarousel({ items, buttonText, onOpen }) {
     )
   ] }) });
 }
-function Catalog({ display = "grid", items = [], buttonText, onOpen }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: display === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsxRuntime.jsx(CatalogCarousel, { items, buttonText, onOpen }) });
+function Catalog({ display: display2 = "grid", items = [], buttonText, onOpen }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: display2 === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsxRuntime.jsx(CatalogCarousel, { items, buttonText, onOpen }) });
 }
 function ContextMenu({ items, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuPrimitive__namespace.Root, { children: [
@@ -4663,6 +4665,1017 @@ function ChevronLeft() {
 function ChevronRight3() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.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 = React8.useId();
+  const hasError = errorMessage != null;
+  const ref = React8.useRef(null);
+  React8.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__ */ jsxRuntime.jsxs(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    ToggleGroup__namespace.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__ */ jsxRuntime.jsxs(
+        ToggleGroup__namespace.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__ */ jsxRuntime.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 = React8.useId();
+  const hasError = errorMessage != null;
+  const isRange = Array.isArray(value ?? defaultValue);
+  const [internal, setInternal] = React8.useState(
+    () => toArray(value) ?? toArray(defaultValue) ?? [min]
+  );
+  const current = toArray(value) ?? internal;
+  const [dragging, setDragging] = React8.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__ */ jsxRuntime.jsxs(Field, { label: void 0, errorId, errorMessage, children: [
+    (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: label }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground-secondary tabular-nums", children: valueText })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      SliderPrimitive__namespace.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__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: `relative grow rounded-full bg-surface-raised border border-border ${TRACK_H[size]}`, children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full rounded-full bg-accent" }) }),
+          current.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            SliderPrimitive__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "relative mt-2 h-4", children: marks.map((m) => {
+      const pct = (m.value - min) / (max - min) * 100;
+      return /* @__PURE__ */ jsxRuntime.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 = React8.useId();
+  const inputRef = React8.useRef(null);
+  const [internal, setInternal] = React8.useState(defaultValue ?? []);
+  const [draft, setDraft] = React8.useState("");
+  const [localError, setLocalError] = React8.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__ */ jsxRuntime.jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage: errorText,
+      layout,
+      required,
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+                    }
+                  )
+                ]
+              },
+              `${tag}-${idx}`
+            )),
+            /* @__PURE__ */ jsxRuntime.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 = React8.useId();
+  const hasError = errorMessage != null;
+  const refs = React8.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__ */ jsxRuntime.jsx(Field, { label, htmlFor, errorId, errorMessage, required, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = React8.useId();
+  const [internal, setInternal] = React8.useState(defaultValue);
+  const [hover, setHover] = React8.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__ */ jsxRuntime.jsx(Field, { label, errorId, errorMessage, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 text-foreground-muted", children: icon(false) }),
+                /* @__PURE__ */ jsxRuntime.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 = React8.useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = React8.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__ */ jsxRuntime.jsx("div", { className: "flex flex-col overflow-y-auto max-h-48 w-14 hidden-scrollbar", role: "listbox", children: items.map((n) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: `text-sm truncate ${value ? "" : "text-foreground-muted"}`, children: display(value, use12Hours, withSeconds) || placeholder }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7v5l3 2", strokeLinecap: "round" })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Popover__namespace.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__ */ jsxRuntime.jsx(
+              Column,
+              {
+                items: hours,
+                selected: selectedHourCol,
+                onPick: (h) => use12Hours ? setHour12(h, period) : update({ h }),
+                fmt: use12Hours ? (n) => String(n) : pad
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Column, { items: minutes, selected: parsed.m, onPick: (m) => update({ m }) }),
+            withSeconds && /* @__PURE__ */ jsxRuntime.jsx(Column, { items: seconds, selected: parsed.s, onPick: (s) => update({ s }) }),
+            use12Hours && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 w-12", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = React8.useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = React8.useState(false);
+  const [leftMonth, setLeftMonth] = React8.useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
+  const [pendingStart, setPendingStart] = React8.useState(null);
+  const [hoverDate, setHoverDate] = React8.useState(null);
+  const weekdays = React8.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__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-center mb-2 select-none", children: [
+        MONTH_NAMES2[viewMonth.getMonth()],
+        " ",
+        viewMonth.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-y-1", children: [
+        weekdays.map((w) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => {
+    if (!disabled) {
+      setOpen(o);
+      if (!o) {
+        setPendingStart(null);
+        setHoverDate(null);
+      }
+    }
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: `text-sm truncate ${triggerText ? "" : "text-foreground-muted"}`, children: triggerText || placeholder }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9h18M8 3v4M16 3v4", strokeLinecap: "round" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Popover__namespace.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__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 pr-3 border-r border-border min-w-[120px]", children: presets.map((p) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+                }
+              ),
+              renderMonth(leftMonth)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.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 = React8.useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = React8.useState(false);
+  const [draft, setDraft] = React8.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__ */ jsxRuntime.jsxs(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "h-4 w-4 flex-shrink-0 rounded border border-border",
+                style: { backgroundColor: valid ? value : "transparent" },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex-1 text-left text-sm truncate ${valid ? "text-foreground" : "text-foreground-muted"}`, children: valid ? value.toLowerCase() : placeholder })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Popover__namespace.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__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-2 mb-3", children: swatches.map((sw) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  value: draft,
+                  onChange: (e) => commitDraft(e.target.value),
+                  placeholder: "#0466c8",
+                  "aria-label": "Hex colour",
+                  className: `flex-1 ${fieldShell({ size: "sm" })}`
+                }
+              ),
+              allowCustom && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: valid ? value : "" })
+  ] });
+}
 
 Object.defineProperty(exports, "COLORS", {
   enumerable: true,
@@ -4689,7 +5702,9 @@ exports.Catalog = Catalog;
 exports.CatalogCarousel = CatalogCarousel;
 exports.CatalogGrid = CatalogGrid;
 exports.Checkbox = Checkbox;
+exports.ColorPicker = ColorPicker;
 exports.ContextMenu = ContextMenu;
+exports.DateRangePicker = DateRangePicker;
 exports.Drawer = Drawer;
 exports.Dropdown = Dropdown;
 exports.FadingBase = FadingBase;
@@ -4706,23 +5721,30 @@ exports.Modal = Modal;
 exports.NotificationProvider = NotificationProvider;
 exports.NumberInput = NumberInput;
 exports.OpaqueGridCard = OpaqueGridCard;
+exports.OtpInput = OtpInput;
 exports.Password = Password;
 exports.Portal = Portal;
 exports.RadioGroup = RadioGroup;
+exports.Rating = Rating;
 exports.ScalableContainer = ScalableContainer;
 exports.SearchInput = SearchInput_default;
+exports.SegmentedControl = SegmentedControl;
 exports.Sidebar = Sidebar;
 exports.SkeletonBox = SkeletonBox;
 exports.SkeletonCard = SkeletonCard;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonText = SkeletonText;
+exports.Slider = Slider;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
+exports.TagsInput = TagsInput;
 exports.Temporal = DatePicker;
+exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitch = ThemeSwitch;
+exports.TimePicker = TimePicker;
 exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.TooltipProvider = TooltipProvider;