@geomak/ui 5.1.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" }) }) })
                 ]
               }
             ) }),
@@ -2364,9 +2432,105 @@ function Dropdown({
         ]
       }
     ),
-    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
   ] });
 }
+var SHIMMER = [
+  "relative overflow-hidden rounded-sm bg-surface-raised",
+  'before:absolute before:inset-0 before:content-[""]',
+  "before:bg-gradient-to-r before:from-transparent before:via-white/30 before:to-transparent",
+  "before:animate-[shimmer_1.6s_linear_infinite]",
+  // Respect prefers-reduced-motion — the resting bg-surface-raised is still
+  // a perfectly legible placeholder for users who have animations off.
+  "motion-reduce:before:hidden"
+].join(" ");
+function SkeletonBox({ width, height = 16, radius, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `block ${SHIMMER} ${className}`,
+      style: {
+        width: width ?? "100%",
+        height,
+        borderRadius: radius ?? "var(--radius-md)",
+        ...style
+      }
+    }
+  );
+}
+function SkeletonText({
+  lines = 3,
+  lastLineWidth = 60,
+  lineHeight = 14,
+  gap = 8,
+  className = "",
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `flex flex-col ${className}`,
+      style: { gap, ...style },
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1;
+        const width = isLast && lines > 1 ? `${lastLineWidth}%` : "100%";
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `block ${SHIMMER}`,
+            style: { height: lineHeight, width, borderRadius: "var(--radius-sm)" }
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function SkeletonCircle({ size = 40, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `block flex-shrink-0 ${SHIMMER} ${className}`,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        ...style
+      }
+    }
+  );
+}
+function SkeletonCard({ hasAvatar = true, lines = 3, className = "", style }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `rounded-lg border border-border bg-surface p-4 ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+          hasAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { size: 36 }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(SkeletonBox, { height: 12, width: "55%" }),
+            /* @__PURE__ */ jsx(SkeletonBox, { height: 10, width: "35%" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines, lastLineWidth: 55 }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 72 }),
+          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 56 })
+        ] })
+      ]
+    }
+  );
+}
 var DEFAULT_PICKER = [
   { key: 1, value: 5, label: 5 },
   { key: 2, value: 10, label: 10 },
@@ -2552,7 +2716,9 @@ function Table({
   expandRow = DEFAULT_EXPAND,
   hasSearch = true,
   footer = null,
-  header = null
+  header = null,
+  loading = false,
+  loadingRowCount = 8
 }) {
   const searchRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState("");
@@ -2636,9 +2802,16 @@ function Table({
       )
     ] }),
     /* @__PURE__ */ jsx("div", { children: header }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", "aria-busy": loading || void 0, children: [
       /* @__PURE__ */ jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled }),
-      /* @__PURE__ */ jsx(
+      loading ? /* @__PURE__ */ jsx(
+        TableSkeletonBody,
+        {
+          columns,
+          rowCount: loadingRowCount,
+          hasExpand: !!expandRow.enabled
+        }
+      ) : /* @__PURE__ */ jsx(
         TableBody,
         {
           columns,
@@ -2651,6 +2824,23 @@ function Table({
     /* @__PURE__ */ jsx("div", { children: footer })
   ] });
 }
+function TableSkeletonBody({
+  columns,
+  rowCount,
+  hasExpand
+}) {
+  return /* @__PURE__ */ jsx("tbody", { "aria-hidden": "true", children: Array.from({ length: rowCount }).map((_, i) => /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: `border-b border-border ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
+      children: [
+        hasExpand && /* @__PURE__ */ jsx("td", { className: "p-0 align-middle w-9" }),
+        columns.map((col) => /* @__PURE__ */ jsx("td", { className: "py-3 px-3 align-middle", children: /* @__PURE__ */ jsx(SkeletonBox, { height: 12, width: `${50 + i % 4 * 12}%` }) }, col.key))
+      ]
+    },
+    i
+  )) });
+}
 function ThemeSwitch({ checked, onChange, label = "Toggle dark mode" }) {
   const id = useId();
   return /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer select-none", children: /* @__PURE__ */ jsx(
@@ -3083,162 +3273,71 @@ function ThemeProvider({
     )
   ] });
 }
-var SHIMMER = [
-  "relative overflow-hidden rounded-sm bg-surface-raised",
-  'before:absolute before:inset-0 before:content-[""]',
-  "before:bg-gradient-to-r before:from-transparent before:via-white/30 before:to-transparent",
-  "before:animate-[shimmer_1.6s_linear_infinite]",
-  // Respect prefers-reduced-motion — the resting bg-surface-raised is still
-  // a perfectly legible placeholder for users who have animations off.
-  "motion-reduce:before:hidden"
-].join(" ");
-function SkeletonBox({ width, height = 16, radius, className = "", style }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `block ${SHIMMER} ${className}`,
-      style: {
-        width: width ?? "100%",
-        height,
-        borderRadius: radius ?? "var(--radius-md)",
-        ...style
-      }
-    }
-  );
-}
-function SkeletonText({
-  lines = 3,
-  lastLineWidth = 60,
-  lineHeight = 14,
-  gap = 8,
-  className = "",
-  style
+function TextInput({
+  value,
+  onChange,
+  disabled,
+  label,
+  htmlFor,
+  placeholder,
+  name,
+  type = "text",
+  inputStyle,
+  style,
+  layout = "vertical",
+  size = "md",
+  onBlur,
+  errorMessage,
+  required,
+  prefix,
+  suffix
 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const hasAdornment = prefix != null || suffix != null;
+  const input = /* @__PURE__ */ jsx(
+    "input",
     {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `flex flex-col ${className}`,
-      style: { gap, ...style },
-      children: Array.from({ length: lines }).map((_, i) => {
-        const isLast = i === lines - 1;
-        const width = isLast && lines > 1 ? `${lastLineWidth}%` : "100%";
-        return /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `block ${SHIMMER}`,
-            style: { height: lineHeight, width, borderRadius: "var(--radius-sm)" }
-          },
-          i
-        );
-      })
+      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
     }
   );
-}
-function SkeletonCircle({ size = 40, className = "", style }) {
   return /* @__PURE__ */ jsx(
-    "span",
+    Field,
     {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `block flex-shrink-0 ${SHIMMER} ${className}`,
-      style: {
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        ...style
-      }
+      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 SkeletonCard({ hasAvatar = true, lines = 3, className = "", style }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `rounded-lg border border-border bg-surface p-4 ${className}`,
-      style,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
-          hasAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { size: 36 }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsx(SkeletonBox, { height: 12, width: "55%" }),
-            /* @__PURE__ */ jsx(SkeletonBox, { height: 10, width: "35%" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(SkeletonText, { lines, lastLineWidth: 55 }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
-          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 72 }),
-          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 56 })
-        ] })
-      ]
-    }
-  );
-}
-function TextInput({
-  value,
-  onChange,
-  disabled,
-  label,
-  htmlFor,
-  placeholder,
-  name,
-  inputStyle,
-  style,
-  layout,
-  onBlur,
-  errorMessage,
-  labelColor
-}) {
-  const errorId = useId();
-  const hasError = errorMessage != null;
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center justify-center", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-        style: style ?? {},
-        children: [
-          label && // Render <label> only when a label is provided. An empty
-          // <label htmlFor=…> announces as an unlabeled control in
-          // some screen readers.
-          /* @__PURE__ */ jsx(
-            "label",
-            {
-              style: { color: labelColor || void 0 },
-              className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
-              htmlFor,
-              children: label
-            }
-          ),
-          /* @__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 mt-1 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-center text-status-error text-xs mt-1", children: errorMessage })
-  ] });
-}
 function NumberInput({
   step = 1,
   value,
@@ -3247,8 +3346,10 @@ function NumberInput({
   htmlFor,
   name,
   disabled,
-  layout = "horizontal",
+  layout = "vertical",
+  size = "md",
   errorMessage,
+  required,
   inputStyle,
   labelStyle,
   placeholder,
@@ -3289,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",
@@ -3321,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",
                 {
@@ -3336,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" }) })
                 }
               ),
@@ -3348,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" }) })
                 }
               )
@@ -3356,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,
@@ -3370,73 +3478,66 @@ 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", { className: "relative flex flex-col items-center justify-center", style: style ?? {}, children: [
-    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
-      label && /* @__PURE__ */ jsx(
-        "label",
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: /* @__PURE__ */ jsxs(
+        "div",
         {
-          style: { color: labelColor || void 0 },
-          className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
-          htmlFor,
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            autoComplete: "off",
-            disabled,
-            value,
-            onChange,
-            onBlur,
-            type: passwordVisible ? "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 mt-1 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 ?? ""
-          }
-        ),
-        /* @__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" })
-              ] })
+          className: `flex items-center ${fieldShell({ size, hasError, disabled, focusWithin: true })}`,
+          style,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                autoComplete: "off",
+                disabled,
+                value,
+                onChange,
+                onBlur,
+                type: visible ? "text" : "password",
+                name,
+                id: htmlFor,
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
+                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",
+                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-center text-status-error text-xs mt-1", children: errorMessage })
-  ] });
+          ]
+        }
+      )
+    }
+  );
 }
 function Checkbox({
   checked,
@@ -3517,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,
@@ -3549,29 +3740,70 @@ function AutoComplete({
   inputStyle,
   style,
   layout = "vertical",
-  items = [],
+  items,
+  onSearch,
+  debounce = 250,
   onItemClick,
-  emptyText = "No results found"
+  emptyText = "No results found",
+  loadingText = "Searching\u2026",
+  size = "md",
+  icon
 }) {
   const [term, setTerm] = useState("");
   const [open, setOpen] = useState(false);
-  const foundItems = term.trim() ? items.filter(
+  const [asyncItems, setAsyncItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const isAsync = typeof onSearch === "function";
+  const debounceRef = useRef(null);
+  const requestIdRef = useRef(0);
+  const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
     ({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
   ) : [];
+  useEffect(() => {
+    if (!isAsync) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (!term.trim()) {
+      setAsyncItems([]);
+      setLoading(false);
+      return;
+    }
+    const myId = ++requestIdRef.current;
+    setLoading(true);
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const res = await onSearch(term);
+        if (myId === requestIdRef.current) {
+          setAsyncItems(res);
+        }
+      } catch {
+        if (myId === requestIdRef.current) {
+          setAsyncItems([]);
+        }
+      } finally {
+        if (myId === requestIdRef.current) {
+          setLoading(false);
+        }
+      }
+    }, debounce);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [term, isAsync, debounce, onSearch]);
+  const foundItems = isAsync ? asyncItems : staticFiltered;
   const handleSelect = (item) => {
     setTerm(`${item.label} (${item.value})`);
     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",
               {
@@ -3584,16 +3816,17 @@ 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",
                 "aria-expanded": open,
-                "aria-autocomplete": "list"
+                "aria-autocomplete": "list",
+                "aria-busy": loading || void 0
               }
             ),
-            /* @__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,
@@ -3602,43 +3835,40 @@ function AutoComplete({
               sideOffset: 4,
               onOpenAutoFocus: (e) => e.preventDefault(),
               className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
-              children: foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => (
-                // tabIndex + Enter/Space onKeyDown
-                // makes each option keyboard-activatable.
-                // Full roving-tabindex / arrow-key nav
-                // is deferred to the Phase-5 rewrite.
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    role: "option",
-                    tabIndex: 0,
-                    className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                    onClick: () => handleSelect(item),
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleSelect(item);
-                      }
-                    },
-                    children: [
-                      item.icon,
-                      /* @__PURE__ */ jsxs("span", { children: [
-                        item.label,
-                        " (",
-                        item.value,
-                        ")"
-                      ] })
-                    ]
+              children: loading ? /* @__PURE__ */ jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
+                /* @__PURE__ */ jsx(LoadingSpinner, { inline: true, size: "xs" }),
+                /* @__PURE__ */ jsx("span", { children: loadingText })
+              ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "option",
+                  tabIndex: 0,
+                  className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  onClick: () => handleSelect(item),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleSelect(item);
+                    }
                   },
-                  item.key
-                )
+                  children: [
+                    item.icon,
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      item.label,
+                      " (",
+                      item.value,
+                      ")"
+                    ] })
+                  ]
+                },
+                item.key
               )) })
             }
           ) })
-        ] })
+        ] }) })
       ]
     }
-  ) });
+  );
 }
 function flattenVisible(items, expanded, depth = 0, out = []) {
   for (const node of items) {
@@ -3673,7 +3903,8 @@ function TreeSelect({
   items = [],
   placeholder = "Select\u2026",
   parentsSelectable = true,
-  defaultExpandedKeys = []
+  defaultExpandedKeys = [],
+  size = "md"
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -3772,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" }) })
@@ -3899,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);
+    setDragging(false);
+    if (disabled) return;
+    const dropped = Array.from(e.dataTransfer.files ?? []);
+    commit(allowMultiple ? dropped : dropped.slice(0, 1));
   };
-  const localOnChange = (e) => {
-    handleFiles(Array.from(e.target.files ?? []));
+  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 = "";
   };
-  const removeFile = (e) => {
-    e.stopPropagation();
-    setFiles([]);
-    onChange?.({ target: { files: [], name, id: name, value: "" } });
-    if (fileInput.current) fileInput.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"];
@@ -4058,7 +4340,8 @@ function DatePicker({
   style,
   format = defaultFormat,
   weekStartsOn = 0,
-  clearable = true
+  clearable = true,
+  size = "md"
 }) {
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -4161,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, {})
@@ -4347,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