@geomak/ui 5.2.0 → 5.3.0

package/dist/index.js

@@ -14,6 +14,7 @@ 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';
 
 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 +2133,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 +2266,8 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  showSelectedCount = false
+  showSelectedCount = false,
+  size = "md"
 }) {
   const [open, setOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
@@ -2262,7 +2330,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 +2343,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 +2357,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 +3281,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 +3346,10 @@ function NumberInput({
   htmlFor,
   name,
   disabled,
-  layout = "horizontal",
+  layout = "vertical",
+  size = "md",
   errorMessage,
+  required,
   inputStyle,
   labelStyle,
   placeholder,
@@ -3317,22 +3390,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 +3421,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 +3436,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 +3448,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 +3456,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 +3478,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 +3512,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 +3618,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 +3745,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 +3795,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 +3816,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 +3826,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 +3865,10 @@ function AutoComplete({
               )) })
             }
           ) })
-        ] })
+        ] }) })
       ]
     }
-  ) });
+  );
 }
 function flattenVisible(items, expanded, depth = 0, out = []) {
   for (const node of items) {
@@ -3745,7 +3903,8 @@ function TreeSelect({
   items = [],
   placeholder = "Select\u2026",
   parentsSelectable = true,
-  defaultExpandedKeys = []
+  defaultExpandedKeys = [],
+  size = "md"
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -3844,7 +4003,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 +4130,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 +4340,8 @@ function DatePicker({
   style,
   format = defaultFormat,
   weekStartsOn = 0,
-  clearable = true
+  clearable = true,
+  size = "md"
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -4233,7 +4444,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, {})
@@ -4419,6 +4630,6 @@ 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" }) });
 }
 
-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, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map