@geomak/ui 5.4.0 → 5.5.1

package/dist/index.cjs

@@ -1835,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: [
@@ -2175,9 +2175,9 @@ var FIELD_SIZE = {
   lg: { control: "h-control-lg", text: "text-sm", padX: "px-3.5", gap: "gap-2.5" }
 };
 var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent focus-within:ring-[3px] focus-within:ring-focus-ring";
-var FOCUS_VISIBLE = "focus-visible:outline-none focus-visible:border-accent focus-visible:ring-[3px] focus-visible:ring-focus-ring";
+var FOCUS_ELEMENT = "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring data-[state=open]:border-accent data-[state=open]:ring-[3px] data-[state=open]:ring-focus-ring";
 var FOCUS_WITHIN_ERROR = "focus-within:border-status-error focus-within:ring-focus-ring-error";
-var FOCUS_VISIBLE_ERROR = "focus-visible:border-status-error focus-visible:ring-focus-ring-error";
+var FOCUS_ELEMENT_ERROR = "focus:border-status-error focus:ring-focus-ring-error data-[state=open]:border-status-error data-[state=open]:ring-focus-ring-error";
 function fieldShell({
   size = "md",
   hasError = false,
@@ -2196,8 +2196,8 @@ function fieldShell({
     // hover (only when interactive + no error)
     disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : hasError ? "" : "hover:border-border-strong",
     // focus
-    focusWithin ? FOCUS_WITHIN : FOCUS_VISIBLE,
-    hasError ? focusWithin ? FOCUS_WITHIN_ERROR : FOCUS_VISIBLE_ERROR : "",
+    focusWithin ? FOCUS_WITHIN : FOCUS_ELEMENT,
+    hasError ? focusWithin ? FOCUS_WITHIN_ERROR : FOCUS_ELEMENT_ERROR : "",
     // placeholder colour for native inputs
     "placeholder:text-foreground-muted"
   ].filter(Boolean).join(" ");
@@ -2232,7 +2232,9 @@ function Field({
             style: { width: horizontal ? labelWidth : void 0, ...labelStyle },
             className: [
               "text-sm font-medium text-foreground select-none",
-              horizontal ? "mt-2 flex-shrink-0" : ""
+              // In horizontal layout the label must not wrap onto
+              // multiple lines (e.g. "Report date", "Select option").
+              horizontal ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""
             ].filter(Boolean).join(" "),
             children: [
               label,
@@ -2278,14 +2280,24 @@ var SearchInput = React8__default.default.forwardRef(function SearchInput2({ val
   ) });
 });
 var SearchInput_default = SearchInput;
-function DropdownPill({ value, hasSiblings = false }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `bg-accent text-accent-fg text-sm text-ellipsis ${hasSiblings ? "w-24" : "w-max"} p-1 px-2 rounded-lg whitespace-nowrap overflow-hidden`,
-      children: value
-    }
-  );
+function Tag({ children, onRemove, removeLabel, disabled }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-border bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 max-w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }),
+    onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        "aria-label": removeLabel ?? "Remove",
+        className: "inline-flex items-center justify-center w-4 h-4 flex-shrink-0 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed",
+        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" }) })
+      }
+    )
+  ] });
 }
 function Dropdown({
   isMultiselect = false,
@@ -2302,7 +2314,6 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  showSelectedCount = false,
   size = "md"
 }) {
   const [open, setOpen] = React8.useState(false);
@@ -2330,6 +2341,17 @@ function Dropdown({
       setOpen(false);
     }
   };
+  const removeSelected = (key) => {
+    if (isMultiselect) {
+      const next = selectedItems.filter((it) => it !== key);
+      setSelectedItems(next);
+      onChange?.({ target: { value: next, id: htmlFor, name } });
+    } else {
+      setSelectedItems([]);
+      onChange?.({ target: { value: "", id: htmlFor, name } });
+    }
+  };
+  const labelFor = (key) => innerItems.find((it) => it.key === key)?.label ?? String(key);
   const onSearchChange = (e) => {
     const term = e.target.value;
     setSearchTerm(term);
@@ -2340,16 +2362,16 @@ function Dropdown({
     );
   };
   const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
+        className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`,
         children: [
           label && /* @__PURE__ */ jsxRuntime.jsx(
             "label",
             {
-              className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+              className: `text-sm font-medium select-none text-foreground ${layout === "horizontal" ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""}`,
               htmlFor,
               style: labelStyle,
               children: label
@@ -2366,7 +2388,7 @@ function Dropdown({
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between cursor-pointer select-none ${fieldShell({ size, hasError, disabled })}`,
+                className: `flex items-center justify-between gap-1 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${fieldShell({ size, hasError, disabled, sized: false })}`,
                 tabIndex: disabled ? -1 : 0,
                 onKeyDown: (e) => {
                   if (disabled) return;
@@ -2379,18 +2401,25 @@ function Dropdown({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: `${!style?.width ? "min-w-[200px]" : ""} flex items-center gap-1 overflow-hidden`,
-                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        value.slice(0, 1).map((val) => /* @__PURE__ */ jsxRuntime.jsx(
-                          DropdownPill,
-                          {
-                            hasSiblings: value.length > 1,
-                            value: innerItems.find((it) => it.key === val)?.label
-                          },
-                          String(val)
-                        )),
-                        showSelectedCount && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(DropdownPill, { value: `+${value.length - 1} more` })
-                      ] }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label })
+                      className: `${!style?.width ? "min-w-[200px]" : ""} flex flex-wrap items-center gap-1.5`,
+                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsxRuntime.jsx(
+                        Tag,
+                        {
+                          disabled,
+                          removeLabel: `Remove ${labelFor(val)}`,
+                          onRemove: () => removeSelected(val),
+                          children: labelFor(val)
+                        },
+                        String(val)
+                      )) : /* @__PURE__ */ jsxRuntime.jsx(
+                        Tag,
+                        {
+                          disabled,
+                          removeLabel: `Remove ${labelFor(value)}`,
+                          onRemove: () => removeSelected(value),
+                          children: labelFor(value)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 ml-2 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
@@ -3584,74 +3613,54 @@ function Checkbox({
   name,
   htmlFor,
   errorMessage,
-  disabled = false
+  disabled = false,
+  layout = "horizontal",
+  labelPosition = "right"
 }) {
   const isChecked = checked ?? value ?? false;
+  const labelFirst = labelPosition === "left";
+  const box = /* @__PURE__ */ jsxRuntime.jsx(
+    CheckboxPrimitive__namespace.Root,
+    {
+      id: htmlFor,
+      name,
+      checked: isChecked,
+      disabled,
+      onCheckedChange: (c) => onChange?.({ target: { checked: !!c, id: htmlFor, name } }),
+      className: [
+        "relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
+        "rounded-sm border transition-colors duration-150",
+        "border-border-strong bg-surface",
+        "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
+        // Focus halo matches the field tokens for a consistent look.
+        "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
+        "disabled:cursor-not-allowed"
+      ].join(" "),
+      "aria-label": typeof label === "string" ? label : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: "flex items-center justify-center data-[state=checked]:animate-check-pop", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 4.5L4 7.5L10 1", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    }
+  );
+  const labelEl = label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: label });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
         htmlFor,
         className: [
-          "inline-flex items-center gap-2.5",
+          "inline-flex",
+          layout === "vertical" ? "flex-col items-start gap-1.5" : "flex-row items-center gap-2.5",
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
         ].join(" "),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CheckboxPrimitive__namespace.Root,
-            {
-              id: htmlFor,
-              name,
-              checked: isChecked,
-              disabled,
-              onCheckedChange: (c) => onChange?.({ target: { checked: !!c, id: htmlFor, name } }),
-              className: [
-                // Box
-                "relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
-                "rounded-sm border transition-colors duration-150",
-                // Unchecked
-                "border-border-strong bg-surface",
-                // Checked
-                "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
-                // Focus
-                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1",
-                // Disabled
-                "disabled:cursor-not-allowed"
-              ].join(" "),
-              "aria-label": typeof label === "string" ? label : void 0,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                CheckboxPrimitive__namespace.Indicator,
-                {
-                  className: "flex items-center justify-center data-[state=checked]:animate-check-pop",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      width: "11",
-                      height: "9",
-                      viewBox: "0 0 11 9",
-                      fill: "none",
-                      "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          d: "M1 4.5L4 7.5L10 1",
-                          stroke: "white",
-                          strokeWidth: "1.8",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: label })
-        ]
+        children: labelFirst ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          labelEl,
+          box
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          box,
+          labelEl
+        ] })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-status-error pl-[26px]", children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-status-error mt-0.5", children: errorMessage })
   ] });
 }
 var DOT_SIZE = {
@@ -3757,12 +3766,12 @@ function Switch({
       id,
       checked,
       onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
-      className: "relative inline-flex h-6 w-14 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
+      className: "relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SwitchPrimitive__namespace.Thumb,
         {
-          className: "pointer-events-none inline-flex h-8 w-8 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
-          children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
+          className: "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]",
+          children: checkedIcon && uncheckedIcon ? checked ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-3 h-3", children: checkedIcon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-3 h-3", children: uncheckedIcon }) : null
         }
       )
     }
@@ -3783,8 +3792,13 @@ function AutoComplete({
   emptyText = "No results found",
   loadingText = "Searching\u2026",
   size = "md",
-  icon
+  icon,
+  errorMessage,
+  required,
+  htmlFor
 }) {
+  const errorId = React8.useId();
+  const hasError = errorMessage != null;
   const [term, setTerm] = React8.useState("");
   const [open, setOpen] = React8.useState(false);
   const [asyncItems, setAsyncItems] = React8.useState([]);
@@ -3831,78 +3845,82 @@ function AutoComplete({
     onItemClick?.(item.value);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Field,
     {
-      className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`,
-      style,
-      children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: `text-sm font-medium text-foreground select-none ${layout === "horizontal" ? "mt-2 flex-shrink-0" : ""}`, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${fieldShell({ size, disabled, focusWithin: true })}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                disabled,
-                value: term,
-                onChange: (e) => {
-                  setTerm(e.target.value);
-                  setOpen(true);
-                },
-                onFocus: () => setOpen(true),
-                type: "text",
-                name,
-                className: "min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-foreground-muted",
-                style: inputStyle,
-                placeholder: placeholder ?? "",
-                autoComplete: "off",
-                "aria-haspopup": "listbox",
-                "aria-expanded": open,
-                "aria-autocomplete": "list",
-                "aria-busy": loading || void 0
-              }
-            ),
-            loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 w-4 h-4 flex-shrink-0 flex items-center justify-center text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs", spinnerColor: "currentColor" }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 flex-shrink-0 text-foreground-muted", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) }) })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            Popover__namespace.Content,
+      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.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${fieldShell({ size, hasError, disabled, focusWithin: true })}`, style, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
             {
-              align: "start",
-              sideOffset: 4,
-              onOpenAutoFocus: (e) => e.preventDefault(),
-              className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
-              children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText })
-              ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  role: "option",
-                  tabIndex: 0,
-                  className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                  onClick: () => handleSelect(item),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleSelect(item);
-                    }
-                  },
-                  children: [
-                    item.icon,
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                      item.label,
-                      " (",
-                      item.value,
-                      ")"
-                    ] })
-                  ]
-                },
-                item.key
-              )) })
+              id: htmlFor,
+              disabled,
+              value: term,
+              onChange: (e) => {
+                setTerm(e.target.value);
+                setOpen(true);
+              },
+              onFocus: () => setOpen(true),
+              type: "text",
+              name,
+              className: "min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-foreground-muted",
+              style: inputStyle,
+              placeholder: placeholder ?? "",
+              autoComplete: "off",
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-autocomplete": "list",
+              "aria-busy": loading || void 0,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": hasError ? errorId : void 0
             }
-          ) })
-        ] }) })
-      ]
+          ),
+          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 w-4 h-4 flex-shrink-0 flex items-center justify-center text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs", spinnerColor: "currentColor" }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 flex-shrink-0 text-foreground-muted", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          Popover__namespace.Content,
+          {
+            align: "start",
+            sideOffset: 4,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText })
+            ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                role: "option",
+                tabIndex: 0,
+                className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                onClick: () => handleSelect(item),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleSelect(item);
+                  }
+                },
+                children: [
+                  item.icon,
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    item.label,
+                    " (",
+                    item.value,
+                    ")"
+                  ] })
+                ]
+              },
+              item.key
+            )) })
+          }
+        ) })
+      ] })
     }
   );
 }
@@ -4982,27 +5000,13 @@ function TagsInput({
           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",
+            tags.map((tag, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+              Tag,
               {
-                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" }) })
-                    }
-                  )
-                ]
+                disabled,
+                removeLabel: `Remove ${tag}`,
+                onRemove: () => removeTag(idx),
+                children: tag
               },
               `${tag}-${idx}`
             )),
@@ -5036,6 +5040,646 @@ function TagsInput({
     }
   );
 }
+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-y-0 left-0 overflow-hidden",
+                    style: { width: `${fillFraction * 100}%` },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block absolute inset-y-0 left-0 ${ICON_SIZE[size]} max-w-none`, 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,
@@ -5062,7 +5706,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;
@@ -5079,9 +5725,11 @@ 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;
@@ -5100,6 +5748,7 @@ exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitch = ThemeSwitch;
+exports.TimePicker = TimePicker;
 exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.TooltipProvider = TooltipProvider;