@geomak/ui 5.4.0 → 5.5.1

package/dist/index.js

@@ -1800,8 +1800,8 @@ function CatalogCarousel({ items, buttonText, onOpen }) {
     )
   ] }) });
 }
-function Catalog({ display = "grid", items = [], buttonText, onOpen }) {
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: display === "grid" ? /* @__PURE__ */ jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsx(CatalogCarousel, { items, buttonText, onOpen }) });
+function Catalog({ display: display2 = "grid", items = [], buttonText, onOpen }) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: display2 === "grid" ? /* @__PURE__ */ jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsx(CatalogCarousel, { items, buttonText, onOpen }) });
 }
 function ContextMenu({ items, children }) {
   return /* @__PURE__ */ jsxs(ContextMenuPrimitive.Root, { children: [
@@ -2140,9 +2140,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,
@@ -2161,8 +2161,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(" ");
@@ -2197,7 +2197,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,
@@ -2243,14 +2245,24 @@ var SearchInput = React8.forwardRef(function SearchInput2({ value, onChange, dis
   ) });
 });
 var SearchInput_default = SearchInput;
-function DropdownPill({ value, hasSiblings = false }) {
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "truncate", children }),
+    onRemove && /* @__PURE__ */ 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__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
 }
 function Dropdown({
   isMultiselect = false,
@@ -2267,7 +2279,6 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  showSelectedCount = false,
   size = "md"
 }) {
   const [open, setOpen] = useState(false);
@@ -2295,6 +2306,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);
@@ -2305,16 +2327,16 @@ function Dropdown({
     );
   };
   const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
-  return /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ 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__ */ 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
@@ -2331,7 +2353,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;
@@ -2344,18 +2366,25 @@ function Dropdown({
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `${!style?.width ? "min-w-[200px]" : ""} flex items-center gap-1 overflow-hidden`,
-                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        value.slice(0, 1).map((val) => /* @__PURE__ */ jsx(
-                          DropdownPill,
-                          {
-                            hasSiblings: value.length > 1,
-                            value: innerItems.find((it) => it.key === val)?.label
-                          },
-                          String(val)
-                        )),
-                        showSelectedCount && value.length > 1 && /* @__PURE__ */ jsx(DropdownPill, { value: `+${value.length - 1} more` })
-                      ] }) : /* @__PURE__ */ 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__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsx(
+                        Tag,
+                        {
+                          disabled,
+                          removeLabel: `Remove ${labelFor(val)}`,
+                          onRemove: () => removeSelected(val),
+                          children: labelFor(val)
+                        },
+                        String(val)
+                      )) : /* @__PURE__ */ jsx(
+                        Tag,
+                        {
+                          disabled,
+                          removeLabel: `Remove ${labelFor(value)}`,
+                          onRemove: () => removeSelected(value),
+                          children: labelFor(value)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
@@ -3549,74 +3578,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__ */ jsx(
+    CheckboxPrimitive.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__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center data-[state=checked]:animate-check-pop", children: /* @__PURE__ */ jsx("svg", { width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 4.5L4 7.5L10 1", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    }
+  );
+  const labelEl = label && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: label });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ 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__ */ jsx(
-            CheckboxPrimitive.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__ */ jsx(
-                CheckboxPrimitive.Indicator,
-                {
-                  className: "flex items-center justify-center data-[state=checked]:animate-check-pop",
-                  children: /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      width: "11",
-                      height: "9",
-                      viewBox: "0 0 11 9",
-                      fill: "none",
-                      "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M1 4.5L4 7.5L10 1",
-                          stroke: "white",
-                          strokeWidth: "1.8",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          label && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: label })
-        ]
+        children: labelFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          labelEl,
+          box
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          box,
+          labelEl
+        ] })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsx("span", { className: "text-xs text-status-error pl-[26px]", children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsx("span", { className: "text-xs text-status-error mt-0.5", children: errorMessage })
   ] });
 }
 var DOT_SIZE = {
@@ -3722,12 +3731,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__ */ jsx(
         SwitchPrimitive.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__ */ jsx("span", { className: "flex items-center justify-center w-3 h-3", children: checkedIcon }) : /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-3 h-3", children: uncheckedIcon }) : null
         }
       )
     }
@@ -3748,8 +3757,13 @@ function AutoComplete({
   emptyText = "No results found",
   loadingText = "Searching\u2026",
   size = "md",
-  icon
+  icon,
+  errorMessage,
+  required,
+  htmlFor
 }) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
   const [term, setTerm] = useState("");
   const [open, setOpen] = useState(false);
   const [asyncItems, setAsyncItems] = useState([]);
@@ -3796,78 +3810,82 @@ function AutoComplete({
     onItemClick?.(item.value);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    Field,
     {
-      className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`,
-      style,
-      children: [
-        label && /* @__PURE__ */ jsx("label", { className: `text-sm font-medium text-foreground select-none ${layout === "horizontal" ? "mt-2 flex-shrink-0" : ""}`, children: label }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col min-w-0 flex-1", children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-          /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: `flex items-center ${fieldShell({ size, disabled, focusWithin: true })}`, children: [
-            /* @__PURE__ */ 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__ */ jsx("span", { className: "ml-2 w-4 h-4 flex-shrink-0 flex items-center justify-center text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs", spinnerColor: "currentColor" }) }) : /* @__PURE__ */ jsx("span", { className: "ml-2 flex-shrink-0 text-foreground-muted", children: icon ?? /* @__PURE__ */ 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__ */ 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__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-            Popover.Content,
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: `flex items-center ${fieldShell({ size, hasError, disabled, focusWithin: true })}`, style, children: [
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
-                /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs" }),
-                /* @__PURE__ */ jsx("span", { children: loadingText })
-              ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "ml-2 w-4 h-4 flex-shrink-0 flex items-center justify-center text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs", spinnerColor: "currentColor" }) }) : /* @__PURE__ */ jsx("span", { className: "ml-2 flex-shrink-0 text-foreground-muted", children: icon ?? /* @__PURE__ */ 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__ */ 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__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+          Popover.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__ */ jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
+              /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs" }),
+              /* @__PURE__ */ jsx("span", { children: loadingText })
+            ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ 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__ */ jsxs("span", { children: [
+                    item.label,
+                    " (",
+                    item.value,
+                    ")"
+                  ] })
+                ]
+              },
+              item.key
+            )) })
+          }
+        ) })
+      ] })
     }
   );
 }
@@ -4947,27 +4965,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__ */ jsxs(
-              "span",
+            tags.map((tag, idx) => /* @__PURE__ */ 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__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      disabled,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        removeTag(idx);
-                      },
-                      "aria-label": `Remove ${tag}`,
-                      className: "inline-flex items-center justify-center w-4 h-4 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent",
-                      children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-                    }
-                  )
-                ]
+                disabled,
+                removeLabel: `Remove ${tag}`,
+                onRemove: () => removeTag(idx),
+                children: tag
               },
               `${tag}-${idx}`
             )),
@@ -5001,7 +5005,647 @@ 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 = useId();
+  const hasError = errorMessage != null;
+  const refs = useRef([]);
+  const chars = Array.from({ length }, (_, i) => value[i] ?? "");
+  const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
+  const emit = (next) => {
+    onChange?.(next);
+    if (next.length === length && !next.includes(" ") && [...next].every(Boolean)) {
+      onComplete?.(next);
+    }
+  };
+  const setCharAt = (idx, char) => {
+    const arr = chars.slice();
+    arr[idx] = char;
+    emit(arr.join(""));
+  };
+  const focusBox = (idx) => {
+    const el = refs.current[Math.max(0, Math.min(length - 1, idx))];
+    el?.focus();
+    el?.select();
+  };
+  const onBoxChange = (idx, raw) => {
+    const char = raw.slice(-1);
+    if (char && !pattern.test(char)) return;
+    setCharAt(idx, char);
+    if (char) focusBox(idx + 1);
+  };
+  const onKeyDown = (idx, e) => {
+    if (e.key === "Backspace") {
+      if (chars[idx]) {
+        setCharAt(idx, "");
+      } else if (idx > 0) {
+        setCharAt(idx - 1, "");
+        focusBox(idx - 1);
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focusBox(idx - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusBox(idx + 1);
+    }
+  };
+  const onPaste = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text").trim();
+    const valid = [...text].filter((c) => pattern.test(c)).slice(0, length);
+    if (valid.length === 0) return;
+    emit(valid.join(""));
+    focusBox(valid.length);
+  };
+  return /* @__PURE__ */ jsx(Field, { label, htmlFor, errorId, errorMessage, required, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          refs.current[idx] = el;
+        },
+        id: idx === 0 ? htmlFor : void 0,
+        name: idx === 0 ? name : void 0,
+        value: char,
+        disabled,
+        inputMode: mode === "numeric" ? "numeric" : "text",
+        autoComplete: idx === 0 ? "one-time-code" : "off",
+        type: masked && char ? "password" : "text",
+        maxLength: 1,
+        "aria-label": `Digit ${idx + 1}`,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        onChange: (e) => onBoxChange(idx, e.target.value),
+        onKeyDown: (e) => onKeyDown(idx, e),
+        onPaste,
+        onFocus: (e) => e.target.select(),
+        className: [
+          BOX_SIZE[size],
+          "text-center font-medium rounded-lg border bg-surface text-foreground",
+          "transition-[border-color,box-shadow] duration-150",
+          hasError ? "border-status-error" : "border-border",
+          "hover:border-border-strong",
+          "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring",
+          "disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed"
+        ].join(" ")
+      }
+    ),
+    groupAfter && (idx + 1) % groupAfter === 0 && idx < length - 1 && /* @__PURE__ */ jsx("span", { className: "w-2 text-center text-foreground-muted", "aria-hidden": "true", children: "\xB7" })
+  ] }, idx)) }) });
+}
+var ICON_SIZE = { sm: "w-4 h-4", md: "w-5 h-5", lg: "w-7 h-7" };
+var Star = (filled) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: filled ? 0 : 1.5, className: "w-full h-full", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11.48 3.5a.56.56 0 011.04 0l2.13 4.77 5.18.5a.56.56 0 01.32.97l-3.9 3.46 1.15 5.1a.56.56 0 01-.83.6L12 16.8l-4.57 2.6a.56.56 0 01-.83-.6l1.15-5.1-3.9-3.46a.56.56 0 01.32-.97l5.18-.5L11.48 3.5z" }) });
+function Rating({
+  value,
+  defaultValue = 0,
+  onChange,
+  count = 5,
+  allowHalf = false,
+  readOnly = false,
+  clearable = true,
+  label,
+  size = "md",
+  disabled,
+  icon = Star,
+  errorMessage,
+  name
+}) {
+  const errorId = useId();
+  const [internal, setInternal] = useState(defaultValue);
+  const [hover, setHover] = useState(null);
+  const current = value ?? internal;
+  const display2 = hover ?? current;
+  const interactive = !readOnly && !disabled;
+  const commit = (next) => {
+    const v = clearable && next === current ? 0 : next;
+    setInternal(v);
+    onChange?.(v);
+  };
+  const onKeyDown = (e) => {
+    if (!interactive) return;
+    const step = allowHalf ? 0.5 : 1;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      commit(Math.min(count, current + step));
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      commit(Math.max(0, current - step));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      commit(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      commit(count);
+    }
+  };
+  return /* @__PURE__ */ jsx(Field, { label, errorId, errorMessage, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: interactive ? "slider" : "img",
+      "aria-label": typeof label === "string" ? label : "Rating",
+      "aria-valuenow": interactive ? current : void 0,
+      "aria-valuemin": interactive ? 0 : void 0,
+      "aria-valuemax": interactive ? count : void 0,
+      "aria-valuetext": `${current} of ${count}`,
+      tabIndex: interactive ? 0 : -1,
+      onKeyDown,
+      onMouseLeave: () => setHover(null),
+      className: "inline-flex items-center gap-1 text-accent focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring rounded-md w-max",
+      children: [
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current }),
+        Array.from({ length: count }, (_, i) => {
+          const starValue = i + 1;
+          const fillFraction = Math.max(0, Math.min(1, display2 - i));
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `relative ${ICON_SIZE[size]} ${interactive ? "cursor-pointer" : ""} ${disabled ? "opacity-50" : ""}`,
+              onMouseMove: (e) => {
+                if (!interactive) return;
+                if (allowHalf) {
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  const half = e.clientX - rect.left < rect.width / 2;
+                  setHover(i + (half ? 0.5 : 1));
+                } else {
+                  setHover(starValue);
+                }
+              },
+              onClick: (e) => {
+                if (!interactive) return;
+                if (allowHalf) {
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  const half = e.clientX - rect.left < rect.width / 2;
+                  commit(i + (half ? 0.5 : 1));
+                } else {
+                  commit(starValue);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-0 text-foreground-muted", children: icon(false) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute inset-y-0 left-0 overflow-hidden",
+                    style: { width: `${fillFraction * 100}%` },
+                    children: /* @__PURE__ */ 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 = useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = useState(false);
+  const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
+  const update = (next) => {
+    const merged = { ...parsed, ...next };
+    onChange?.(`${pad(merged.h)}:${pad(merged.m)}${withSeconds ? `:${pad(merged.s)}` : ""}`);
+  };
+  const hours = use12Hours ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+  const seconds = Array.from({ length: 60 }, (_, i) => i);
+  const selectedHourCol = use12Hours ? parsed.h % 12 === 0 ? 12 : parsed.h % 12 : parsed.h;
+  const period = parsed.h >= 12 ? "PM" : "AM";
+  const setHour12 = (h12, p) => {
+    const h24 = p === "AM" ? h12 === 12 ? 0 : h12 : h12 === 12 ? 12 : h12 + 12;
+    update({ h: h24 });
+  };
+  const Column = ({ items, selected, onPick, fmt }) => /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-y-auto max-h-48 w-14 hidden-scrollbar", role: "listbox", children: items.map((n) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected === n,
+      onClick: () => onPick(n),
+      className: `py-1.5 text-sm rounded-md text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selected === n ? "bg-accent text-accent-fg" : "text-foreground hover:bg-surface-raised"}`,
+      children: fmt ? fmt(n) : pad(n)
+    },
+    n
+  )) });
+  return /* @__PURE__ */ jsxs(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: [
+    /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          id: htmlFor,
+          type: "button",
+          disabled,
+          style,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": hasError ? errorId : void 0,
+          className: `flex items-center justify-between cursor-pointer select-none ${!style?.width ? "min-w-[160px]" : ""} ${fieldShell({ size, hasError, disabled })}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `text-sm truncate ${value ? "" : "text-foreground-muted"}`, children: display(value, use12Hours, withSeconds) || placeholder }),
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, className: "w-4 h-4 flex-shrink-0 text-foreground-muted ml-2", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2", strokeLinecap: "round" })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+        Popover.Content,
+        {
+          align: "start",
+          sideOffset: 4,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 flex gap-1 animate-in fade-in-0 zoom-in-95",
+          children: [
+            /* @__PURE__ */ jsx(
+              Column,
+              {
+                items: hours,
+                selected: selectedHourCol,
+                onPick: (h) => use12Hours ? setHour12(h, period) : update({ h }),
+                fmt: use12Hours ? (n) => String(n) : pad
+              }
+            ),
+            /* @__PURE__ */ jsx(Column, { items: minutes, selected: parsed.m, onPick: (m) => update({ m }) }),
+            withSeconds && /* @__PURE__ */ jsx(Column, { items: seconds, selected: parsed.s, onPick: (s) => update({ s }) }),
+            use12Hours && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 w-12", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setHour12(selectedHourCol, p),
+                className: `py-1.5 text-sm rounded-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${period === p ? "bg-accent text-accent-fg" : "text-foreground hover:bg-surface-raised"}`,
+                children: p
+              },
+              p
+            )) })
+          ]
+        }
+      ) })
+    ] }),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "" })
+  ] });
+}
+var MONTH_NAMES2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var WEEKDAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var startOfMonth2 = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+var addMonths2 = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+var addDays2 = (d, n) => {
+  const c = new Date(d);
+  c.setDate(c.getDate() + n);
+  return c;
+};
+var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var defaultFmt = (d) => `${d.getFullYear()}-${`${d.getMonth() + 1}`.padStart(2, "0")}-${`${d.getDate()}`.padStart(2, "0")}`;
+function buildGrid2(viewMonth, weekStartsOn) {
+  const first = startOfMonth2(viewMonth);
+  const offset = (first.getDay() - weekStartsOn + 7) % 7;
+  const gridStart = addDays2(first, -offset);
+  return Array.from({ length: 42 }, (_, i) => {
+    const d = addDays2(gridStart, i);
+    return { date: d, outside: d.getMonth() !== viewMonth.getMonth() };
+  });
+}
+function DateRangePicker({
+  value = { start: null, end: null },
+  onChange,
+  label,
+  htmlFor,
+  placeholder = "Select a date range\u2026",
+  layout = "vertical",
+  size = "md",
+  min,
+  max,
+  weekStartsOn = 0,
+  presets,
+  format = defaultFmt,
+  disabled,
+  errorMessage,
+  required,
+  style
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = useState(false);
+  const [leftMonth, setLeftMonth] = useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
+  const [pendingStart, setPendingStart] = useState(null);
+  const [hoverDate, setHoverDate] = useState(null);
+  const weekdays = useMemo(
+    () => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
+    [weekStartsOn]
+  );
+  const isDisabled = (d) => min && d < startOfDay(min) || max && d > startOfDay(max);
+  const effective = pendingStart ? { start: pendingStart, end: hoverDate } : value;
+  const inRange = (d) => {
+    const { start, end } = effective;
+    if (!start || !end) return false;
+    const [a, b] = start <= end ? [start, end] : [end, start];
+    return d >= startOfDay(a) && d <= startOfDay(b);
+  };
+  const onDayClick = (d) => {
+    if (isDisabled(d)) return;
+    if (!pendingStart) {
+      setPendingStart(d);
+      setHoverDate(d);
+      onChange?.({ start: d, end: null });
+    } else {
+      const [start, end] = pendingStart <= d ? [pendingStart, d] : [d, pendingStart];
+      onChange?.({ start, end });
+      setPendingStart(null);
+      setHoverDate(null);
+      setOpen(false);
+    }
+  };
+  const triggerText = value.start && value.end ? `${format(value.start)} \u2013 ${format(value.end)}` : value.start ? `${format(value.start)} \u2013 \u2026` : "";
+  const renderMonth = (viewMonth) => {
+    const cells = buildGrid2(viewMonth, weekStartsOn);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-center mb-2 select-none", children: [
+        MONTH_NAMES2[viewMonth.getMonth()],
+        " ",
+        viewMonth.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-y-1", children: [
+        weekdays.map((w) => /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium text-foreground-muted uppercase text-center", children: w }, w)),
+        cells.map(({ date, outside }) => {
+          const dis = isDisabled(date);
+          const isStart = effective.start && isSameDay2(date, effective.start);
+          const isEnd = effective.end && isSameDay2(date, effective.end);
+          const within = inRange(date) && !isStart && !isEnd;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: dis,
+              onMouseEnter: () => pendingStart && setHoverDate(date),
+              onClick: () => onDayClick(date),
+              className: [
+                "h-8 text-xs font-medium transition-colors",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                "disabled:opacity-30 disabled:cursor-not-allowed",
+                isStart || isEnd ? "bg-accent text-accent-fg rounded-md" : within ? "bg-surface-raised text-foreground rounded-none" : outside ? "text-foreground-muted hover:bg-surface-raised rounded-md" : "text-foreground hover:bg-surface-raised rounded-md"
+              ].join(" "),
+              children: date.getDate()
+            },
+            defaultFmt(date)
+          );
+        })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => {
+    if (!disabled) {
+      setOpen(o);
+      if (!o) {
+        setPendingStart(null);
+        setHoverDate(null);
+      }
+    }
+  }, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: htmlFor,
+        type: "button",
+        disabled,
+        style,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        className: `flex items-center justify-between cursor-pointer select-none ${!style?.width ? "min-w-[240px]" : ""} ${fieldShell({ size, hasError, disabled })}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `text-sm truncate ${triggerText ? "" : "text-foreground-muted"}`, children: triggerText || placeholder }),
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, className: "w-4 h-4 flex-shrink-0 text-foreground-muted ml-2", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+            /* @__PURE__ */ jsx("path", { d: "M3 9h18M8 3v4M16 3v4", strokeLinecap: "round" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 flex gap-3 animate-in fade-in-0 zoom-in-95",
+        children: [
+          presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 pr-3 border-r border-border min-w-[120px]", children: presets.map((p) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onChange?.(p.range());
+                setOpen(false);
+              },
+              className: "text-left text-xs px-2 py-1.5 rounded-md text-foreground-secondary hover:bg-surface-raised hover:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+              children: p.label
+            },
+            p.label
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setLeftMonth(addMonths2(leftMonth, -1)),
+                  "aria-label": "Previous month",
+                  className: "absolute -top-1 left-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+                }
+              ),
+              renderMonth(leftMonth)
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setLeftMonth(addMonths2(leftMonth, 1)),
+                  "aria-label": "Next month",
+                  className: "absolute -top-1 right-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+                }
+              ),
+              renderMonth(addMonths2(leftMonth, 1))
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+var DEFAULT_SWATCHES = [
+  "#0466c8",
+  "#1e8449",
+  "#d68910",
+  "#c0392b",
+  "#8e44ad",
+  "#16a085",
+  "#2c3e50",
+  "#7f8c8d",
+  "#e84393",
+  "#00b894",
+  "#fdcb6e",
+  "#0a1929"
+];
+var HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function ColorPicker({
+  value = "",
+  onChange,
+  label,
+  htmlFor,
+  name,
+  layout = "vertical",
+  size = "md",
+  swatches = DEFAULT_SWATCHES,
+  allowCustom = true,
+  disabled,
+  errorMessage,
+  required,
+  placeholder = "Pick a colour\u2026"
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const valid = HEX_RE.test(value);
+  const pick = (hex) => {
+    onChange?.(hex);
+    setDraft(hex);
+  };
+  const commitDraft = (raw) => {
+    const hex = raw.startsWith("#") ? raw : `#${raw}`;
+    setDraft(hex);
+    if (HEX_RE.test(hex)) onChange?.(hex);
+  };
+  return /* @__PURE__ */ jsxs(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: [
+    /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          id: htmlFor,
+          type: "button",
+          disabled,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": hasError ? errorId : void 0,
+          className: `flex items-center gap-2 cursor-pointer select-none ${fieldShell({ size, hasError, disabled })}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "h-4 w-4 flex-shrink-0 rounded border border-border",
+                style: { backgroundColor: valid ? value : "transparent" },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: `flex-1 text-left text-sm truncate ${valid ? "text-foreground" : "text-foreground-muted"}`, children: valid ? value.toLowerCase() : placeholder })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+        Popover.Content,
+        {
+          align: "start",
+          sideOffset: 4,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 w-56 animate-in fade-in-0 zoom-in-95",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-2 mb-3", children: swatches.map((sw) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  pick(sw);
+                  setOpen(false);
+                },
+                "aria-label": sw,
+                className: `h-7 w-7 rounded-md border transition-transform hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${value.toLowerCase() === sw.toLowerCase() ? "border-accent ring-2 ring-focus-ring" : "border-border"}`,
+                style: { backgroundColor: sw }
+              },
+              sw
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  value: draft,
+                  onChange: (e) => commitDraft(e.target.value),
+                  placeholder: "#0466c8",
+                  "aria-label": "Hex colour",
+                  className: `flex-1 ${fieldShell({ size: "sm" })}`
+                }
+              ),
+              allowCustom && /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: valid ? value : "#000000",
+                  onChange: (e) => pick(e.target.value),
+                  "aria-label": "Custom colour",
+                  className: "h-7 w-9 rounded-md border border-border bg-surface cursor-pointer p-0.5"
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    ] }),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: valid ? value : "" })
+  ] });
+}
 
-export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, RadioGroup, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
+export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map