@geomak/ui 5.2.0 → 5.4.0

package/dist/index.js

@@ -14,6 +14,8 @@ import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
 var Sun = ({ color = "yellow" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }) });
@@ -2132,46 +2134,112 @@ function Wizard({
     ] }) })
   ] });
 }
-var SearchInput = React8.forwardRef(function SearchInput2({
-  value,
-  onChange,
-  disabled,
+var FIELD_SIZE = {
+  sm: { control: "h-control-sm", text: "text-xs", padX: "px-2.5", gap: "gap-1.5" },
+  md: { control: "h-control-md", text: "text-sm", padX: "px-3", gap: "gap-2" },
+  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_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";
+function fieldShell({
+  size = "md",
+  hasError = false,
+  disabled = false,
+  focusWithin = false,
+  sized = true
+} = {}) {
+  const s = FIELD_SIZE[size];
+  return [
+    "w-full rounded-lg border bg-surface text-foreground",
+    "transition-[color,box-shadow,border-color] duration-150",
+    s.text,
+    sized ? `${s.control} ${s.padX}` : "",
+    // resting border
+    hasError ? "border-status-error" : "border-border",
+    // 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 : "",
+    // placeholder colour for native inputs
+    "placeholder:text-foreground-muted"
+  ].filter(Boolean).join(" ");
+}
+function Field({
   label,
   htmlFor,
-  placeholder,
-  name,
-  inputStyle,
-  style,
-  layout = "vertical"
-}, ref) {
-  return /* @__PURE__ */ jsx("div", { className: "relative flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs(
+  errorId,
+  errorMessage,
+  layout = "vertical",
+  required,
+  labelStyle,
+  labelWidth,
+  className = "",
+  children
+}) {
+  const hasError = errorMessage != null;
+  const horizontal = layout === "horizontal";
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-      style: style ?? {},
+      className: [
+        "flex",
+        horizontal ? "flex-row items-start gap-3" : "flex-col gap-1.5",
+        className
+      ].filter(Boolean).join(" "),
       children: [
-        label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", htmlFor, children: label }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              disabled,
-              value,
-              onChange,
-              type: "search",
-              enterKeyHint: "search",
-              name,
-              id: htmlFor,
-              className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
-              style: inputStyle ?? {},
-              placeholder: placeholder ?? ""
-            }
-          ),
-          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-foreground-muted", "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" }) })
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor,
+            style: { width: horizontal ? labelWidth : void 0, ...labelStyle },
+            className: [
+              "text-sm font-medium text-foreground select-none",
+              horizontal ? "mt-2 flex-shrink-0" : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "text-status-error ml-0.5", "aria-hidden": "true", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+          children,
+          hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
         ] })
       ]
     }
+  );
+}
+var SearchIcon = /* @__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" }) });
+var SearchInput = React8.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon }, ref) {
+  return /* @__PURE__ */ jsx(Field, { label, htmlFor, layout, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-center ${fieldShell({ size, disabled, focusWithin: true })}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 mr-2 text-foreground-muted", children: icon ?? SearchIcon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            disabled,
+            value,
+            onChange,
+            type: "search",
+            enterKeyHint: "search",
+            name,
+            id: htmlFor,
+            className: "min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-foreground-muted",
+            style: inputStyle,
+            placeholder: placeholder ?? ""
+          }
+        )
+      ]
+    }
   ) });
 });
 var SearchInput_default = SearchInput;
@@ -2199,7 +2267,8 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  showSelectedCount = false
+  showSelectedCount = false,
+  size = "md"
 }) {
   const [open, setOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
@@ -2262,7 +2331,7 @@ function Dropdown({
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between relative h-9 rounded-lg border border-border cursor-pointer select-none focus:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${hasError ? "border-status-error" : ""}`,
+                className: `flex items-center justify-between cursor-pointer select-none ${fieldShell({ size, hasError, disabled })}`,
                 tabIndex: disabled ? -1 : 0,
                 onKeyDown: (e) => {
                   if (disabled) return;
@@ -2275,7 +2344,7 @@ function Dropdown({
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `h-7 pl-2 ${!style?.width ? "min-w-[240px]" : ""} flex items-center gap-1 overflow-hidden`,
+                      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,
@@ -2289,7 +2358,7 @@ function Dropdown({
                       ] }) : /* @__PURE__ */ jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: `transition-transform duration-200 mr-2 ${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" }) }) })
+                  /* @__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" }) }) })
                 ]
               }
             ) }),
@@ -3213,58 +3282,61 @@ function TextInput({
   htmlFor,
   placeholder,
   name,
+  type = "text",
   inputStyle,
   style,
-  layout,
+  layout = "vertical",
+  size = "md",
   onBlur,
   errorMessage,
-  labelColor
+  required,
+  prefix,
+  suffix
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
-  return (
-    // In horizontal mode the row layout is [label, input-with-error-column].
-    // The error sits under the input ONLY, not spanning the label too.
-    // In vertical mode the whole thing is a column.
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-start gap-2"}`,
-        style: style ?? {},
-        children: [
-          label && /* @__PURE__ */ jsx(
-            "label",
-            {
-              style: { color: labelColor || void 0 },
-              className: `text-sm font-medium ${layout === "horizontal" ? "mt-2" : ""} max-content ${!labelColor && "text-foreground"}`,
-              htmlFor,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                autoComplete: "off",
-                disabled,
-                value,
-                onChange,
-                onBlur,
-                type: "text",
-                name,
-                id: htmlFor,
-                "aria-invalid": hasError || void 0,
-                "aria-describedby": hasError ? errorId : void 0,
-                className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-60 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus:border-transparent focus:ring-2 focus:ring-accent transition-colors`,
-                style: inputStyle ?? {},
-                placeholder: placeholder ?? ""
-              }
-            ),
-            hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
-          ] })
-        ]
-      }
-    )
+  const hasAdornment = prefix != null || suffix != null;
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      autoComplete: "off",
+      disabled,
+      value,
+      onChange,
+      onBlur,
+      type,
+      name,
+      id: htmlFor,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": hasError ? errorId : void 0,
+      placeholder: placeholder ?? "",
+      className: hasAdornment ? "min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-foreground-muted" : fieldShell({ size, hasError, disabled }),
+      style: inputStyle
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      className: style ? void 0 : void 0,
+      children: hasAdornment ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex items-center ${fieldShell({ size, hasError, disabled, focusWithin: true })}`,
+          style,
+          children: [
+            prefix && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 mr-2 text-foreground-muted", children: prefix }),
+            input,
+            suffix && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 ml-2 text-foreground-muted", children: suffix })
+          ]
+        }
+      ) : input
+    }
   );
 }
 function NumberInput({
@@ -3275,8 +3347,10 @@ function NumberInput({
   htmlFor,
   name,
   disabled,
-  layout = "horizontal",
+  layout = "vertical",
+  size = "md",
   errorMessage,
+  required,
   inputStyle,
   labelStyle,
   placeholder,
@@ -3317,22 +3391,21 @@ function NumberInput({
     if (Number.isNaN(parsed)) return;
     onChange?.({ target: { value: round(parsed), id: htmlFor, name } });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
-      label && /* @__PURE__ */ jsx(
-        "label",
-        {
-          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
-          style: labelStyle,
-          htmlFor,
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      labelStyle,
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
           style,
-          className: `flex items-center rounded-lg border overflow-hidden ${hasError ? "border-status-error" : "border-border"} ${disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : "bg-surface text-foreground"} focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent transition-colors`,
+          className: `flex items-center overflow-hidden pr-0 ${fieldShell({ size, hasError, disabled, focusWithin: true })}`,
           children: [
             /* @__PURE__ */ jsx(
               "input",
@@ -3349,13 +3422,13 @@ function NumberInput({
                 type: "number",
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
-                className: "bg-transparent focus:outline-none h-9 w-full px-3 disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-                style: inputStyle ?? {},
+                className: "min-w-0 flex-1 bg-transparent outline-none h-full disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:text-foreground-muted",
+                style: inputStyle,
                 placeholder: placeholder ?? "",
                 readOnly
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-border h-9", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col self-stretch border-l border-border flex-shrink-0", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -3364,7 +3437,7 @@ function NumberInput({
                   onClick: onIncrement,
                   disabled: disabled || readOnly || max !== void 0 && numeric >= max,
                   "aria-label": "Increase value",
-                  className: "flex-1 px-1.5 flex items-center justify-center hover:bg-surface-raised disabled:opacity-30 disabled:cursor-not-allowed transition-colors focus:outline-none focus-visible:bg-surface-raised",
+                  className: "flex-1 px-1.5 flex items-center justify-center text-foreground-muted hover:bg-surface-raised hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
                   children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" }) })
                 }
               ),
@@ -3376,7 +3449,7 @@ function NumberInput({
                   onClick: onDecrement,
                   disabled: disabled || readOnly || min !== void 0 && numeric <= min,
                   "aria-label": "Decrease value",
-                  className: "flex-1 px-1.5 flex items-center justify-center hover:bg-surface-raised disabled:opacity-30 disabled:cursor-not-allowed transition-colors focus:outline-none focus-visible:bg-surface-raised border-t border-border",
+                  className: "flex-1 px-1.5 flex items-center justify-center text-foreground-muted hover:bg-surface-raised hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-colors border-t border-border",
                   children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
                 }
               )
@@ -3384,10 +3457,18 @@ function NumberInput({
           ]
         }
       )
-    ] }),
-    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
-  ] });
+    }
+  );
 }
+var EyeIcon = /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 15a3 3 0 100-6 3 3 0 000 6z" }),
+  /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z", clipRule: "evenodd" })
+] });
+var EyeSlashIcon = /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" }),
+  /* @__PURE__ */ jsx("path", { d: "M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" }),
+  /* @__PURE__ */ jsx("path", { d: "M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" })
+] });
 function Password({
   value,
   onChange,
@@ -3398,32 +3479,32 @@ function Password({
   name,
   inputStyle,
   style,
-  layout,
+  layout = "vertical",
+  size = "md",
   onBlur,
   errorMessage,
-  labelColor,
-  iconColor
+  required,
+  showIcon,
+  hideIcon
 }) {
-  const [passwordVisible, setPasswordVisible] = useState(false);
+  const [visible, setVisible] = useState(false);
   const errorId = useId();
   const hasError = errorMessage != null;
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    Field,
     {
-      className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-start gap-2"}`,
-      style: style ?? {},
-      children: [
-        label && /* @__PURE__ */ jsx(
-          "label",
-          {
-            style: { color: labelColor || void 0 },
-            className: `text-sm font-medium ${layout === "horizontal" ? "mt-2" : ""} max-content ${!labelColor && "text-foreground"}`,
-            htmlFor,
-            children: label
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex items-center ${fieldShell({ size, hasError, disabled, focusWithin: true })}`,
+          style,
+          children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -3432,44 +3513,30 @@ function Password({
                 value,
                 onChange,
                 onBlur,
-                type: passwordVisible ? "text" : "password",
+                type: visible ? "text" : "password",
                 name,
                 id: htmlFor,
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
-                className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-52 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus:border-transparent focus:ring-2 focus:ring-accent transition-colors`,
-                style: inputStyle ?? {},
-                placeholder: placeholder ?? ""
+                placeholder: placeholder ?? "",
+                className: "min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-foreground-muted",
+                style: inputStyle
               }
             ),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                className: "cursor-pointer p-1 text-foreground-secondary hover:text-foreground rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                style: iconColor ? { color: iconColor } : void 0,
-                onClick: () => setPasswordVisible(!passwordVisible),
-                "aria-label": passwordVisible ? "Hide password" : "Show password",
-                children: passwordVisible ? (
-                  /* EyeSlash */
-                  /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
-                    /* @__PURE__ */ jsx("path", { d: "M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" }),
-                    /* @__PURE__ */ jsx("path", { d: "M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" }),
-                    /* @__PURE__ */ jsx("path", { d: "M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" })
-                  ] })
-                ) : (
-                  /* Eye */
-                  /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
-                    /* @__PURE__ */ jsx("path", { d: "M12 15a3 3 0 100-6 3 3 0 000 6z" }),
-                    /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z", clipRule: "evenodd" })
-                  ] })
-                )
+                disabled,
+                className: `flex-shrink-0 ml-2 ${FIELD_SIZE[size].gap} rounded text-foreground-muted hover:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:cursor-not-allowed`,
+                onClick: () => setVisible((v) => !v),
+                "aria-label": visible ? "Hide password" : "Show password",
+                children: visible ? hideIcon ?? EyeSlashIcon : showIcon ?? EyeIcon
               }
             )
-          ] }),
-          hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
-        ] })
-      ]
+          ]
+        }
+      )
     }
   );
 }
@@ -3552,6 +3619,96 @@ function Checkbox({
     errorMessage && /* @__PURE__ */ jsx("span", { className: "text-xs text-status-error pl-[26px]", children: errorMessage })
   ] });
 }
+var DOT_SIZE = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+var TEXT_SIZE = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+function RadioGroup({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  name,
+  label,
+  orientation = "vertical",
+  size = "md",
+  disabled,
+  required,
+  errorMessage
+}) {
+  const errorId = useId();
+  const groupId = useId();
+  const hasError = errorMessage != null;
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label,
+      htmlFor: groupId,
+      errorId,
+      errorMessage,
+      required,
+      children: /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Root,
+        {
+          id: groupId,
+          name,
+          value,
+          defaultValue,
+          onValueChange: onChange,
+          disabled,
+          required,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": hasError ? errorId : void 0,
+          orientation,
+          className: orientation === "horizontal" ? "flex flex-row flex-wrap gap-5" : "flex flex-col gap-3",
+          children: options.map((opt) => {
+            const itemId = `${groupId}-${opt.value}`;
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+              /* @__PURE__ */ jsx(
+                RadioGroupPrimitive.Item,
+                {
+                  id: itemId,
+                  value: opt.value,
+                  disabled: opt.disabled,
+                  className: [
+                    DOT_SIZE[size],
+                    "mt-0.5 flex-shrink-0 rounded-full border bg-surface transition-colors duration-150",
+                    "border-border-strong",
+                    "hover:border-accent",
+                    "data-[state=checked]:border-accent",
+                    "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
+                    "disabled:cursor-not-allowed disabled:opacity-50"
+                  ].join(" "),
+                  children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "block h-1/2 w-1/2 rounded-full bg-accent" }) })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  htmlFor: itemId,
+                  className: [
+                    "select-none",
+                    opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
+                    opt.description && /* @__PURE__ */ jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
+                  ]
+                }
+              )
+            ] }, opt.value);
+          })
+        }
+      )
+    }
+  );
+}
 function Switch({
   checked = false,
   onChange,
@@ -3589,7 +3746,9 @@ function AutoComplete({
   debounce = 250,
   onItemClick,
   emptyText = "No results found",
-  loadingText = "Searching\u2026"
+  loadingText = "Searching\u2026",
+  size = "md",
+  icon
 }) {
   const [term, setTerm] = useState("");
   const [open, setOpen] = useState(false);
@@ -3637,15 +3796,15 @@ function AutoComplete({
     onItemClick?.(item.value);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsx("div", { className: "relative flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-      style: style ?? {},
+      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 ml-1 max-content text-foreground", children: label }),
-        /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-          /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent transition-colors", 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",
               {
@@ -3658,8 +3817,8 @@ function AutoComplete({
                 onFocus: () => setOpen(true),
                 type: "text",
                 name,
-                className: "bg-transparent focus:outline-none pl-2 h-9 w-56 rounded-lg disabled:cursor-not-allowed",
-                style: inputStyle ?? {},
+                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",
@@ -3668,7 +3827,7 @@ function AutoComplete({
                 "aria-busy": loading || void 0
               }
             ),
-            loading ? /* @__PURE__ */ jsx("span", { className: "w-5 h-5 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("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 flex-shrink-0 text-foreground-muted", "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" }) })
+            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,
@@ -3707,10 +3866,10 @@ function AutoComplete({
               )) })
             }
           ) })
-        ] })
+        ] }) })
       ]
     }
-  ) });
+  );
 }
 function flattenVisible(items, expanded, depth = 0, out = []) {
   for (const node of items) {
@@ -3745,7 +3904,8 @@ function TreeSelect({
   items = [],
   placeholder = "Select\u2026",
   parentsSelectable = true,
-  defaultExpandedKeys = []
+  defaultExpandedKeys = [],
+  size = "md"
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -3844,7 +4004,7 @@ function TreeSelect({
             "aria-invalid": hasError || void 0,
             "aria-describedby": hasError ? errorId : void 0,
             disabled,
-            className: `flex items-center justify-between h-9 rounded-lg border ${hasError ? "border-status-error" : "border-border"} px-3 cursor-pointer select-none focus:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[240px]" : ""}`,
+            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 text-left", children: selectedNode ? selectedNode.label : /* @__PURE__ */ jsx("span", { className: "text-foreground-muted", children: placeholder }) }),
               /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 flex-shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
@@ -3971,111 +4131,162 @@ function TreeNodeRow({
     }
   );
 }
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+var UploadGlyph = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, className: "w-6 h-6", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 16V4m0 0L8 8m4-4l4 4M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" }) });
+var FileGlyph = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, className: "w-5 h-5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14 3v4a1 1 0 001 1h4M5 3h9l5 5v11a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z" }) });
 function FileInput({
   allowMultiple = false,
   onChange,
   name,
-  accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx"
+  htmlFor,
+  label,
+  accept,
+  prompt = "Click to upload or drag and drop",
+  hint,
+  maxSize,
+  errorMessage,
+  disabled,
+  required,
+  icon
 }) {
-  const fileInput = useRef(null);
+  const inputRef = useRef(null);
+  const errorId = useId();
   const [files, setFiles] = useState([]);
+  const [dragging, setDragging] = useState(false);
+  const [sizeError, setSizeError] = useState(null);
+  const effectiveError = errorMessage ?? sizeError ?? void 0;
   const openPicker = () => {
-    fileInput.current?.click();
+    if (!disabled) inputRef.current?.click();
   };
-  const handleFiles = (list) => {
+  const commit = (list) => {
+    if (maxSize != null) {
+      const tooBig = list.find((f) => f.size > maxSize);
+      if (tooBig) {
+        setSizeError(`"${tooBig.name}" exceeds the ${formatBytes(maxSize)} limit`);
+        return;
+      }
+    }
+    setSizeError(null);
     setFiles(list);
-    onChange?.({ target: { files: list } });
+    onChange?.({ target: { files: list, name, id: htmlFor ?? name } });
   };
   const onDrop = (e) => {
     e.preventDefault();
-    const fileList = [];
-    if (e.dataTransfer.items) {
-      for (let i = 0; i < e.dataTransfer.items.length; i++) {
-        if (e.dataTransfer.items[i].kind === "file") {
-          const f = e.dataTransfer.items[i].getAsFile();
-          if (f) fileList.push(f);
-        }
-      }
-    } else {
-      for (let i = 0; i < e.dataTransfer.files.length; i++) {
-        fileList.push(e.dataTransfer.files[i]);
-      }
-    }
-    handleFiles(fileList);
-  };
-  const localOnChange = (e) => {
-    handleFiles(Array.from(e.target.files ?? []));
+    setDragging(false);
+    if (disabled) return;
+    const dropped = Array.from(e.dataTransfer.files ?? []);
+    commit(allowMultiple ? dropped : dropped.slice(0, 1));
   };
-  const removeFile = (e) => {
-    e.stopPropagation();
-    setFiles([]);
-    onChange?.({ target: { files: [], name, id: name, value: "" } });
-    if (fileInput.current) fileInput.current.value = "";
+  const removeFile = (idx) => {
+    const next = files.filter((_, i) => i !== idx);
+    setFiles(next);
+    setSizeError(null);
+    onChange?.({ target: { files: next, name, id: htmlFor ?? name, value: "" } });
+    if (next.length === 0 && inputRef.current) inputRef.current.value = "";
   };
-  return (
-    // Dropzone is keyboard-activatable: role="button", focusable via
-    // tabIndex, and Space/Enter trigger the file picker. Without these
-    // a keyboard-only user could not upload a file.
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "button",
-        tabIndex: 0,
-        "aria-label": "Upload file \u2014 click or drop",
-        onClick: openPicker,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            openPicker();
-          }
-        },
-        className: "border-2 border-dashed border-border hover:border-accent w-full h-full rounded-md transition-colors duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent text-foreground-secondary hover:text-foreground",
-        onDragOver: (e) => e.preventDefault(),
-        onDrop,
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: name,
-              name,
-              onChange: localOnChange,
-              ref: fileInput,
-              hidden: true,
-              type: "file",
-              accept,
-              multiple: allowMultiple
-            }
-          ),
-          files.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-16 h-16", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M11.47 2.47a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06l-3.22-3.22V16.5a.75.75 0 01-1.5 0V4.81L8.03 8.03a.75.75 0 01-1.06-1.06l4.5-4.5zM3 15.75a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z", clipRule: "evenodd" }) }),
-            /* @__PURE__ */ jsx("div", { className: "text-sm", children: "Click or Drop a file" })
-          ] }) : /* @__PURE__ */ jsx("div", { className: "flex gap-3 items-center justify-center w-full h-full p-3", children: files.map((file, id) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "text-xs flex flex-col items-center w-20 h-24 text-center bg-surface-raised text-foreground p-4 rounded-md relative",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: removeFile,
-                    className: "bg-status-error rounded-full w-4 h-4 absolute right-[-5px] top-[-5px] cursor-pointer flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                    "aria-label": "Remove file",
-                    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: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                  }
-                ),
-                /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-10 h-10", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625z", clipRule: "evenodd" }),
-                  /* @__PURE__ */ jsx("path", { d: "M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" })
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: "text-ellipsis whitespace-nowrap overflow-hidden w-full", children: file.name })
-              ]
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage: effectiveError,
+      required,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": typeof prompt === "string" ? prompt : "Upload file",
+            "aria-disabled": disabled || void 0,
+            "aria-invalid": effectiveError != null || void 0,
+            "aria-describedby": effectiveError != null ? errorId : void 0,
+            onClick: openPicker,
+            onKeyDown: (e) => {
+              if (disabled) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                openPicker();
+              }
             },
-            `${id}${file.name}`
-          )) })
-        ]
-      }
-    )
+            onDragOver: (e) => {
+              e.preventDefault();
+              if (!disabled) setDragging(true);
+            },
+            onDragLeave: () => setDragging(false),
+            onDrop,
+            className: [
+              "group flex flex-col items-center justify-center gap-3 w-full rounded-xl border border-dashed px-6 py-8 text-center",
+              "transition-colors duration-150 focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
+              disabled ? "border-border bg-surface-raised cursor-not-allowed opacity-60" : effectiveError != null ? "border-status-error bg-surface cursor-pointer" : dragging ? "border-accent bg-surface-raised cursor-copy" : "border-border bg-surface hover:border-border-strong cursor-pointer"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: htmlFor ?? name,
+                  name,
+                  onChange: (e) => commit(Array.from(e.target.files ?? [])),
+                  ref: inputRef,
+                  hidden: true,
+                  type: "file",
+                  accept,
+                  multiple: allowMultiple,
+                  disabled
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: [
+                    "flex h-11 w-11 items-center justify-center rounded-full transition-colors duration-150",
+                    dragging ? "bg-accent text-accent-fg" : "bg-surface-raised text-foreground-secondary group-hover:text-foreground"
+                  ].join(" "),
+                  children: icon ?? UploadGlyph
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: dragging ? "Drop to upload" : prompt }),
+                hint && /* @__PURE__ */ jsx("div", { className: "text-xs text-foreground-muted", children: hint })
+              ] })
+            ]
+          }
+        ),
+        files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-col gap-2", children: files.map((file, idx) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-foreground-muted", children: FileGlyph }),
+              /* @__PURE__ */ jsxs("span", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "block text-sm text-foreground truncate", children: file.name }),
+                /* @__PURE__ */ jsx("span", { className: "block text-xs text-foreground-muted", children: formatBytes(file.size) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    removeFile(idx);
+                  },
+                  "aria-label": `Remove ${file.name}`,
+                  className: "flex-shrink-0 w-7 h-7 inline-flex items-center justify-center rounded-md text-foreground-muted hover:text-status-error hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              )
+            ]
+          },
+          `${idx}-${file.name}`
+        )) })
+      ]
+    }
   );
 }
 var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
@@ -4130,7 +4341,8 @@ function DatePicker({
   style,
   format = defaultFormat,
   weekStartsOn = 0,
-  clearable = true
+  clearable = true,
+  size = "md"
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -4233,7 +4445,7 @@ function DatePicker({
             "aria-describedby": hasError ? errorId : void 0,
             "aria-haspopup": "dialog",
             "aria-expanded": open,
-            className: `flex items-center justify-between h-9 rounded-lg border px-3 cursor-pointer select-none focus:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-accent ${hasError ? "border-status-error" : "border-border"} ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[200px]" : ""}`,
+            className: `flex items-center justify-between cursor-pointer select-none ${!style?.width ? "min-w-[200px]" : ""} ${fieldShell({ size, hasError, disabled })}`,
             children: [
               /* @__PURE__ */ jsx("span", { className: `text-sm truncate ${displayValue ? "" : "text-foreground-muted"}`, children: displayValue || placeholder }),
               /* @__PURE__ */ jsx(CalendarIcon, {})
@@ -4418,7 +4630,378 @@ function ChevronLeft() {
 function ChevronRight3() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
+var LINE_HEIGHT_PX = 21;
+function TextArea({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  label,
+  htmlFor,
+  placeholder,
+  name,
+  layout = "vertical",
+  size = "md",
+  rows = 4,
+  autoGrow = false,
+  maxRows = 12,
+  maxLength,
+  showCount = false,
+  resize,
+  errorMessage,
+  required,
+  style,
+  inputStyle
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (!autoGrow) return;
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const maxH = maxRows * LINE_HEIGHT_PX + 16;
+    el.style.height = `${Math.min(el.scrollHeight, maxH)}px`;
+    el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
+  }, [value, autoGrow, maxRows]);
+  const count = typeof value === "string" ? value.length : 0;
+  const resizeClass = (resize ?? (autoGrow ? "none" : "vertical")) === "none" ? "resize-none" : (resize ?? "vertical") === "horizontal" ? "resize-x" : (resize ?? "vertical") === "both" ? "resize" : "resize-y";
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref,
+            disabled,
+            value,
+            onChange,
+            onBlur,
+            name,
+            id: htmlFor,
+            rows,
+            maxLength,
+            placeholder: placeholder ?? "",
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            className: `${fieldShell({ size, hasError, disabled, sized: false })} px-3 py-2 leading-normal ${resizeClass}`,
+            style: { ...style, ...inputStyle }
+          }
+        ),
+        showCount && /* @__PURE__ */ jsx("div", { className: "mt-1 text-right text-xs text-foreground-muted tabular-nums", children: maxLength != null ? `${count} / ${maxLength}` : count })
+      ]
+    }
+  );
+}
+var SIZE = {
+  sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
+  md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
+  lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
+};
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  fullWidth = false,
+  disabled,
+  "aria-label": ariaLabel
+}) {
+  const sz = SIZE[size];
+  return /* @__PURE__ */ jsx(
+    ToggleGroup.Root,
+    {
+      type: "single",
+      value,
+      defaultValue,
+      onValueChange: (v) => {
+        if (v) onChange?.(v);
+      },
+      disabled,
+      "aria-label": ariaLabel,
+      className: [
+        "inline-flex items-center gap-1 rounded-lg border border-border bg-surface-raised p-1",
+        sz.h,
+        fullWidth ? "flex w-full" : "",
+        disabled ? "opacity-60 cursor-not-allowed" : ""
+      ].filter(Boolean).join(" "),
+      children: options.map((opt) => /* @__PURE__ */ jsxs(
+        ToggleGroup.Item,
+        {
+          value: opt.value,
+          disabled: opt.disabled,
+          className: [
+            "inline-flex items-center justify-center gap-1.5 rounded-md select-none whitespace-nowrap",
+            "transition-colors duration-150 h-full",
+            sz.text,
+            sz.pad,
+            fullWidth ? "flex-1" : "",
+            // Resting: muted text, transparent. Hover lifts the text.
+            "text-foreground-secondary hover:text-foreground",
+            // Active: surface-white pill + accent text + subtle shadow.
+            "data-[state=on]:bg-surface data-[state=on]:text-accent data-[state=on]:shadow-sm",
+            "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
+            "disabled:opacity-40 disabled:cursor-not-allowed"
+          ].filter(Boolean).join(" "),
+          children: [
+            opt.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: opt.icon }),
+            opt.label
+          ]
+        },
+        opt.value
+      ))
+    }
+  );
+}
+var TRACK_H = { sm: "h-1", md: "h-1.5", lg: "h-2" };
+var THUMB = { sm: "h-3.5 w-3.5", md: "h-4 w-4", lg: "h-5 w-5" };
+var toArray = (v) => v == null ? void 0 : Array.isArray(v) ? v : [v];
+function Slider({
+  value,
+  defaultValue,
+  onChange,
+  onChangeEnd,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  formatValue = (n) => String(n),
+  marks,
+  tooltip = false,
+  size = "md",
+  disabled,
+  errorMessage,
+  name,
+  htmlFor
+}) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const isRange = Array.isArray(value ?? defaultValue);
+  const [internal, setInternal] = useState(
+    () => toArray(value) ?? toArray(defaultValue) ?? [min]
+  );
+  const current = toArray(value) ?? internal;
+  const [dragging, setDragging] = useState(false);
+  const emit = (arr) => {
+    setInternal(arr);
+    const next = isRange ? [arr[0], arr[1]] : arr[0];
+    onChange?.(next);
+  };
+  const valueText = current.map(formatValue).join(" \u2013 ");
+  return /* @__PURE__ */ jsxs(Field, { label: void 0, errorId, errorMessage, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-secondary tabular-nums", children: valueText })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        id: htmlFor,
+        name,
+        value: toArray(value),
+        defaultValue: toArray(defaultValue),
+        min,
+        max,
+        step,
+        disabled,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        onValueChange: (v) => {
+          emit(v);
+          setDragging(true);
+        },
+        onValueCommit: (v) => {
+          setDragging(false);
+          onChangeEnd?.(isRange ? [v[0], v[1]] : v[0]);
+        },
+        className: "relative flex items-center select-none touch-none w-full h-5",
+        children: [
+          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: `relative grow rounded-full bg-surface-raised border border-border ${TRACK_H[size]}`, children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full rounded-full bg-accent" }) }),
+          current.map((_, i) => /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              className: `group relative block ${THUMB[size]} rounded-full border-2 border-accent bg-surface shadow-sm transition-shadow
+                            focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring
+                            disabled:cursor-not-allowed`,
+              children: tooltip && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 rounded-md bg-foreground px-1.5 py-0.5 text-xs text-background tabular-nums whitespace-nowrap transition-opacity ${dragging ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100"}`,
+                  children: formatValue(current[i])
+                }
+              )
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    marks && marks.length > 0 && /* @__PURE__ */ jsx("div", { className: "relative mt-2 h-4", children: marks.map((m) => {
+      const pct = (m.value - min) / (max - min) * 100;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute -translate-x-1/2 text-xs text-foreground-muted tabular-nums",
+          style: { left: `${pct}%` },
+          children: m.label ?? m.value
+        },
+        m.value
+      );
+    }) })
+  ] });
+}
+function TagsInput({
+  value,
+  defaultValue,
+  onChange,
+  label,
+  htmlFor,
+  name,
+  placeholder = "Add and press Enter",
+  layout = "vertical",
+  size = "md",
+  disabled,
+  errorMessage,
+  required,
+  maxTags,
+  dedupe = true,
+  validate,
+  separators = ["Enter", ","]
+}) {
+  const errorId = useId();
+  const inputRef = useRef(null);
+  const [internal, setInternal] = useState(defaultValue ?? []);
+  const [draft, setDraft] = useState("");
+  const [localError, setLocalError] = useState(null);
+  const tags = value ?? internal;
+  const hasError = errorMessage != null || localError != null;
+  const errorText = errorMessage ?? localError ?? void 0;
+  const commitTags = (next) => {
+    setInternal(next);
+    onChange?.(next);
+  };
+  const addTag = (raw) => {
+    const tag = raw.trim();
+    if (!tag) return false;
+    if (maxTags != null && tags.length >= maxTags) return false;
+    if (dedupe && tags.some((t) => t.toLowerCase() === tag.toLowerCase())) {
+      setLocalError(`"${tag}" is already added`);
+      return false;
+    }
+    if (validate) {
+      const res = validate(tag, tags);
+      if (res !== true) {
+        setLocalError(typeof res === "string" ? res : `"${tag}" is not valid`);
+        return false;
+      }
+    }
+    setLocalError(null);
+    commitTags([...tags, tag]);
+    return true;
+  };
+  const removeTag = (idx) => {
+    commitTags(tags.filter((_, i) => i !== idx));
+    setLocalError(null);
+  };
+  const onKeyDown = (e) => {
+    if (separators.includes(e.key)) {
+      e.preventDefault();
+      if (addTag(draft)) setDraft("");
+    } else if (e.key === "Backspace" && draft === "" && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+  const onPaste = (e) => {
+    const text = e.clipboardData.getData("text");
+    const parts = text.split(/[\n,;]+/).map((p) => p.trim()).filter(Boolean);
+    if (parts.length > 1) {
+      e.preventDefault();
+      let added = false;
+      for (const p of parts) added = addTag(p) || added;
+      if (added) setDraft("");
+    }
+  };
+  const atMax = maxTags != null && tags.length >= maxTags;
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage: errorText,
+      layout,
+      required,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex flex-wrap items-center gap-1.5 min-h-[36px] ${fieldShell({ size, hasError, disabled, focusWithin: true, sized: false })} px-2 py-1.5`,
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            tags.map((tag, idx) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 rounded-md bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 border border-border",
+                children: [
+                  tag,
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeTag(idx);
+                      },
+                      "aria-label": `Remove ${tag}`,
+                      className: "inline-flex items-center justify-center w-4 h-4 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+                      children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+                    }
+                  )
+                ]
+              },
+              `${tag}-${idx}`
+            )),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                id: htmlFor,
+                name,
+                disabled: disabled || atMax,
+                value: draft,
+                onChange: (e) => {
+                  setDraft(e.target.value);
+                  if (localError) setLocalError(null);
+                },
+                onKeyDown,
+                onPaste,
+                onBlur: () => {
+                  if (addTag(draft)) setDraft("");
+                },
+                placeholder: atMax ? "" : tags.length === 0 ? placeholder : "",
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
+                autoComplete: "off",
+                className: "flex-1 min-w-[6rem] bg-transparent outline-none text-sm placeholder:text-foreground-muted disabled:cursor-not-allowed"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 
-export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, FadingBase, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, useNotification };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map