@invana/forms 0.0.31 → 0.0.33

package/dist/index.js

@@ -1,6 +1,6 @@
-import { cn, Accordion, AccordionItem, AccordionTrigger, Badge, AccordionContent, Card, CardContent, Separator, Button } from '@invana/ui';
 import * as React2 from 'react';
 import { useMemo } from 'react';
+import { cn, Eyebrow, Accordion, AccordionItem, AccordionTrigger, Badge, AccordionContent, Button, Card, CardContent, Separator } from '@invana/ui';
 import { Slot } from '@radix-ui/react-slot';
 import { useFormContext, Controller, FormProvider } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -67,7 +67,7 @@ var FormLabel = React2.forwardRef(({ className, ...props }, ref) => {
     Label,
     {
       ref,
-      className: cn(error && "text-destructive", className),
+      className: cn(className, error && "text-destructive"),
       htmlFor: formItemId,
       ...props
     }
@@ -126,8 +126,9 @@ var Input = React2.forwardRef(
       {
         type,
         className: cn(
-          inputSize === "sm" ? "h-[26px] px-2 py-0" : "h-10 px-3 py-2",
-          "flex w-full rounded-control border border-input bg-background text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "py-0",
+          inputSize === "sm" ? "h-control-sm px-2" : inputSize === "lg" ? "h-control-lg px-3" : "h-control-md px-2.5",
+          "flex w-full rounded-control border border-input bg-background text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
           className
         ),
         ref,
@@ -137,6 +138,176 @@ var Input = React2.forwardRef(
   }
 );
 Input.displayName = "Input";
+var Textarea = React2.forwardRef(({ className, inputSize = "default", ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        inputSize === "sm" ? "min-h-[52px] px-2 py-1" : "min-h-[80px] px-3 py-2",
+        "flex w-full rounded-control border border-input bg-background text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+var InputGroupControl = React2.createContext({});
+function InputGroup({
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}) {
+  const wiring = React2.useMemo(
+    () => ({ id, "aria-describedby": describedBy, "aria-invalid": invalid }),
+    [id, describedBy, invalid]
+  );
+  return /* @__PURE__ */ jsx(InputGroupControl.Provider, { value: wiring, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-control border outline-none transition-[color,box-shadow]",
+        "h-control-md has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+var inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-control [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = cva(
+  "flex items-center gap-2 shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-control-xs gap-1 rounded-control px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-control-sm gap-1.5 rounded-control px-2.5 has-[>svg]:px-2.5",
+        "icon-xs": "size-control-xs rounded-control p-0 has-[>svg]:p-0",
+        "icon-sm": "size-control-sm p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-muted-foreground flex items-center gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  const wiring = React2.useContext(InputGroupControl);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...wiring,
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  const wiring = React2.useContext(InputGroupControl);
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ...wiring,
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var PasswordInput = React2.forwardRef(
   ({ className, visible, onVisibleChange, disabled, ...props }, ref) => {
     const [internalVisible, setInternalVisible] = React2.useState(false);
@@ -175,21 +346,6 @@ var PasswordInput = React2.forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var Textarea = React2.forwardRef(({ className, inputSize = "default", ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      className: cn(
-        inputSize === "sm" ? "min-h-[52px] px-2 py-1" : "min-h-[80px] px-3 py-2",
-        "flex w-full rounded-control border border-input bg-background text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ref,
-      ...props
-    }
-  );
-});
-Textarea.displayName = "Textarea";
 var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
@@ -263,8 +419,9 @@ var SelectTrigger = React2.forwardRef(({ className, children, triggerSize = "def
   {
     ref,
     className: cn(
-      triggerSize === "sm" ? "h-[26px] px-2 py-0" : "h-9 px-3 py-2",
-      "flex w-full items-center justify-between whitespace-nowrap rounded-control border border-input bg-transparent  shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "py-0",
+      triggerSize === "sm" ? "h-control-sm px-2" : triggerSize === "lg" ? "h-control-lg px-3" : "h-control-md px-2.5",
+      "flex w-full items-center justify-between whitespace-nowrap rounded-control border border-input bg-transparent  shadow-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -306,7 +463,7 @@ var SelectContent = React2.forwardRef(({ className, children, position = "popper
   {
     ref,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-surface border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -376,12 +533,15 @@ var ColorSwatches = ({
 }) => {
   const [customColor, setCustomColor] = React2.useState(value || defaultValue);
   const [isCustom, setIsCustom] = React2.useState(false);
-  React2.useEffect(() => {
-    if (!value) return;
+  const [seen, setSeen] = React2.useState({
+    presetColors
+  });
+  if (value && (value !== seen.value || presetColors !== seen.presetColors)) {
+    setSeen({ value, presetColors });
     const isPreset = presetColors.some((c) => c.value === value);
     setIsCustom(!isPreset);
     if (!isPreset) setCustomColor(value);
-  }, [value, presetColors]);
+  }
   const select = (newColor, custom = false) => {
     setIsCustom(custom);
     if (custom) setCustomColor(newColor);
@@ -458,12 +618,15 @@ var SliderNumber = ({
   min = 0,
   max = 100,
   step = 1,
+  disabled,
   className
 }) => {
   const [local, setLocal] = React2.useState(value);
-  React2.useEffect(() => {
+  const [seen, setSeen] = React2.useState(value);
+  if (value !== seen) {
+    setSeen(value);
     setLocal(value);
-  }, [value]);
+  }
   const set = (n) => {
     setLocal(n);
     onChange?.(n);
@@ -477,6 +640,7 @@ var SliderNumber = ({
         min,
         max,
         step,
+        disabled,
         className: "flex-1"
       }
     ),
@@ -489,14 +653,15 @@ var SliderNumber = ({
         className: "h-8 w-16",
         min,
         max,
-        step
+        step,
+        disabled
       }
     )
   ] });
 };
 var IconInput = ({ value, onChange }) => {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-control border bg-muted", children: value ? value.slice(0, 2) : "\u2013" }),
+    /* @__PURE__ */ jsx("div", { className: "flex size-control-md shrink-0 items-center justify-center rounded-control border bg-muted", children: value ? value.slice(0, 2) : "\u2013" }),
     /* @__PURE__ */ jsx(
       Input,
       {
@@ -504,17 +669,21 @@ var IconInput = ({ value, onChange }) => {
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value),
         placeholder: "icon name",
-        className: "h-8"
+        className: "h-control-md"
       }
     )
   ] });
 };
 var SIZE = {
+  // The dense tier — an ask in a conversation, an inspector. Controls are the
+  // scale's `sm` (26px), the text stays at the 13px floor; the field label is
+  // muted and regular so the values, not the labels, carry the weight.
   xs: {
-    input: "h-9",
-    select: "h-9",
+    input: "h-control-sm py-0",
+    select: "h-control-sm py-0",
     textarea: "",
     label: "text-base",
+    fieldLabel: "font-normal text-muted-foreground",
     desc: "text-base",
     gap: "gap-x-3 gap-y-2.5",
     section: "space-y-3",
@@ -527,10 +696,11 @@ var SIZE = {
     radio: "h-4 w-4"
   },
   sm: {
-    input: "h-9",
-    select: "h-9",
+    input: "h-control-md",
+    select: "h-control-md",
     textarea: "",
     label: "text-base",
+    fieldLabel: "",
     desc: "text-base",
     gap: "gap-x-3 gap-y-2",
     section: "space-y-3",
@@ -543,10 +713,11 @@ var SIZE = {
     radio: "h-4 w-4"
   },
   md: {
-    input: "",
-    select: "",
+    input: "h-control-lg px-3",
+    select: "h-control-lg px-3",
     textarea: "",
     label: "text-base",
+    fieldLabel: "",
     desc: "text-base",
     gap: "gap-4",
     section: "space-y-4",
@@ -561,7 +732,9 @@ var SIZE = {
 };
 function itemClasses(labelPosition, size, className) {
   return cn(
-    labelPosition === "side" && cn("grid grid-cols-3 items-center", SIZE[size].sideGap),
+    // `space-y-0` undoes FormItem's own stacking, whose margin would push the
+    // control below its label in a row.
+    labelPosition === "side" && cn("grid grid-cols-3 items-center space-y-0", SIZE[size].sideGap),
     labelPosition === "top" && SIZE[size].stack,
     className
   );
@@ -583,33 +756,57 @@ function FieldLabel({
   label,
   badge,
   size,
+  disabled,
   className
 }) {
   if (!label && !badge) return null;
-  return /* @__PURE__ */ jsxs(FormLabel, { className: cn(SIZE[size].label, className), children: [
-    label,
-    badge && /* @__PURE__ */ jsx(StatusPill, { badge })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    FormLabel,
+    {
+      className: cn(SIZE[size].label, SIZE[size].fieldLabel, disabled && "opacity-70", className),
+      children: [
+        label,
+        badge && /* @__PURE__ */ jsx(StatusPill, { badge })
+      ]
+    }
+  );
 }
+var AffixedInput = React2.forwardRef(({ unit, aside, className, ...props }, ref) => {
+  if (!unit && !aside) return /* @__PURE__ */ jsx(Input, { ref, className, ...props });
+  return /* @__PURE__ */ jsxs(InputGroup, { className: cn("bg-background dark:bg-background", className), children: [
+    /* @__PURE__ */ jsx(InputGroupInput, { ref, className: "h-full", ...props }),
+    /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", className: "font-mono font-normal", children: [
+      unit && /* @__PURE__ */ jsx("span", { children: unit }),
+      aside && /* @__PURE__ */ jsx("span", { children: aside })
+    ] })
+  ] });
+});
+AffixedInput.displayName = "AffixedInput";
 var InputField = ({
   label,
   description,
   placeholder,
   value,
   onChange,
+  unit,
+  aside,
   labelPosition = "side",
   size = "sm",
   labelClassName,
   badge,
-  className
+  className,
+  disabled
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
-  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-      Input,
+      AffixedInput,
       {
         className: SIZE[size].input,
+        unit,
+        aside,
         placeholder,
+        disabled,
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value)
       }
@@ -628,15 +825,17 @@ var PasswordField = ({
   size = "sm",
   labelClassName,
   badge,
-  className
+  className,
+  disabled
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
-  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       PasswordInput,
       {
         className: SIZE[size].input,
         placeholder,
+        disabled,
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value)
       }
@@ -656,9 +855,10 @@ var TextareaField = ({
   size = "sm",
   labelClassName,
   badge,
-  className
+  className,
+  disabled
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
-  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       Textarea,
@@ -666,6 +866,7 @@ var TextareaField = ({
         className: SIZE[size].textarea || void 0,
         rows,
         placeholder,
+        disabled,
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value)
       }
@@ -685,13 +886,14 @@ var SelectField = ({
   size = "sm",
   labelClassName,
   badge,
-  className
+  className,
+  disabled
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
-  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
-    /* @__PURE__ */ jsxs(Select, { value: value ?? "", onValueChange: onChange, children: [
+    /* @__PURE__ */ jsxs(Select, { value: value ?? "", onValueChange: onChange, disabled, children: [
       /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { className: SIZE[size].select, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }) }),
-      /* @__PURE__ */ jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
+      /* @__PURE__ */ jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value)) })
     ] }),
     description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
     /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
@@ -708,37 +910,53 @@ var BooleanField = ({
   labelClassName,
   badge,
   className,
-  boxed = false
+  boxed = false,
+  disabled
 }) => {
   const boxClass = boxed ? "rounded-md border p-2" : "";
   if (control === "checkbox") {
-    return /* @__PURE__ */ jsxs(FormItem, { className: cn("flex items-center gap-2 space-y-0", className), children: [
-      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          className: SIZE[size].check,
-          checked: !!value,
-          onCheckedChange: onChange
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        FieldLabel,
-        {
-          label,
-          badge,
-          size,
-          className: cn(
-            "!mt-0 cursor-pointer font-normal leading-none",
-            labelClassName
-          )
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxs(
+      FormItem,
+      {
+        className: cn(
+          "flex gap-2 space-y-0",
+          description ? "items-start" : "items-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              className: SIZE[size].check,
+              checked: !!value,
+              disabled,
+              onCheckedChange: onChange
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(
+              FieldLabel,
+              {
+                label,
+                badge,
+                size,
+                disabled,
+                className: cn(
+                  "!mt-0 cursor-pointer font-normal leading-none",
+                  labelClassName
+                )
+              }
+            ),
+            description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description })
+          ] })
+        ]
+      }
+    );
   }
   if (labelPosition === "side") {
     return /* @__PURE__ */ jsxs(FormItem, { className: cn("flex items-center justify-between", boxClass), children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+        /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
         description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description })
       ] }),
       /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
@@ -746,19 +964,21 @@ var BooleanField = ({
         {
           className: SIZE[size].switch || void 0,
           checked: !!value,
+          disabled,
           onCheckedChange: onChange
         }
       ) })
     ] });
   }
   return /* @__PURE__ */ jsxs(FormItem, { className: SIZE[size].stack, children: [
-    /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+    /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", boxClass), children: [
       /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
         Switch,
         {
           className: SIZE[size].switch || void 0,
           checked: !!value,
+          disabled,
           onCheckedChange: onChange
         }
       ) }),
@@ -777,33 +997,46 @@ var RadioField = ({
   orientation = "vertical",
   labelClassName,
   badge,
-  className
+  className,
+  disabled
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
-  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       RadioGroup,
       {
         value: value ?? "",
         onValueChange: onChange,
+        disabled,
         className: orientation === "horizontal" ? "flex flex-row items-center gap-x-4" : cn("flex flex-col", SIZE[size].stack),
-        children: options.map((o) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: "flex cursor-pointer items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsx(
-                RadioGroupItem,
-                {
-                  value: o.value,
-                  className: cn("shrink-0", SIZE[size].radio)
-                }
+        children: options.map((o) => {
+          const off = disabled || o.disabled;
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: cn(
+                "flex gap-2",
+                o.description ? "items-start" : "items-center",
+                off ? "cursor-not-allowed" : "cursor-pointer"
               ),
-              /* @__PURE__ */ jsx("span", { className: cn("leading-none", SIZE[size].label), children: o.label })
-            ]
-          },
-          o.value
-        ))
+              children: [
+                /* @__PURE__ */ jsx(
+                  RadioGroupItem,
+                  {
+                    value: o.value,
+                    disabled: o.disabled,
+                    className: cn("shrink-0", SIZE[size].radio)
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: cn("flex flex-col gap-1", off && "opacity-50"), children: [
+                  /* @__PURE__ */ jsx("span", { className: cn(o.description ? "leading-4" : "leading-none", SIZE[size].label), children: o.label }),
+                  o.description && /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", SIZE[size].desc), children: o.description })
+                ] })
+              ]
+            },
+            o.value
+          );
+        })
       }
     ) }),
     description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
@@ -821,12 +1054,13 @@ var CheckboxGroupField = ({
   orientation = "vertical",
   labelClassName,
   badge,
-  className
+  className,
+  disabled
 }) => {
   const selected = Array.isArray(value) ? value : [];
   const toggle = (v, checked) => onChange?.(checked ? [...selected, v] : selected.filter((x) => x !== v));
   return /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
-    /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+    /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
     /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
       /* @__PURE__ */ jsx(
         "div",
@@ -842,6 +1076,7 @@ var CheckboxGroupField = ({
                   {
                     className: cn("shrink-0", SIZE[size].check),
                     checked: selected.includes(o.value),
+                    disabled: disabled || o.disabled,
                     onCheckedChange: (c) => toggle(o.value, c === true)
                   }
                 ),
@@ -868,9 +1103,10 @@ var ColorField = ({
   size = "sm",
   labelClassName,
   badge,
-  className
+  className,
+  disabled
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
-  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       ColorSwatches,
@@ -893,22 +1129,40 @@ var NumberField = ({
   min,
   max,
   step,
+  unit,
+  aside,
   labelPosition = "side",
   size = "sm",
   labelClassName,
   badge,
-  className
+  className,
+  disabled
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
-  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
-    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(FormControl, { children: min != null && max != null ? /* @__PURE__ */ jsx(
       SliderNumber,
       {
         value: typeof value === "number" ? value : 0,
         onChange,
         min,
         max,
-        step
+        step,
+        disabled
+      }
+    ) : /* @__PURE__ */ jsx(
+      AffixedInput,
+      {
+        type: "number",
+        className: SIZE[size].input,
+        unit,
+        aside,
+        min,
+        max,
+        step,
+        disabled,
+        value: typeof value === "number" ? value : "",
+        onChange: (e) => onChange?.(e.target.value === "" ? void 0 : Number(e.target.value))
       }
     ) }),
     description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
@@ -924,27 +1178,16 @@ var IconField = ({
   size = "sm",
   labelClassName,
   badge,
-  className
+  className,
+  disabled
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
-  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, disabled, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(IconInput, { value, onChange }) }),
     description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
     /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
-var Field = {
-  Input: InputField,
-  Password: PasswordField,
-  Textarea: TextareaField,
-  Boolean: BooleanField,
-  Radio: RadioField,
-  CheckboxGroup: CheckboxGroupField,
-  Color: ColorField,
-  Number: NumberField,
-  Select: SelectField,
-  Icon: IconField
-};
 function humanize(name) {
   return name.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim();
 }
@@ -955,11 +1198,13 @@ function renderField(field, parentName, control, labelPosition, size) {
       control,
       name: `${parentName}.${field.name}`,
       defaultValue: field.defaultValue,
+      rules: field.rules,
       render: ({ field: rhf }) => {
         const common = {
           label: field.label ?? humanize(field.name),
           description: field.description,
           options: field.options,
+          disabled: field.disabled,
           min: field.min,
           max: field.max,
           step: field.step,
@@ -971,6 +1216,8 @@ function renderField(field, parentName, control, labelPosition, size) {
           boxed: field.boxed,
           labelClassName: field.labelClassName,
           badge: field.badge,
+          unit: field.unit,
+          aside: field.aside,
           labelPosition,
           size,
           value: rhf.value,
@@ -1022,8 +1269,21 @@ function renderField(field, parentName, control, labelPosition, size) {
     field.name
   );
 }
-function renderGrid(fields, parentName, control, labelPosition, size, columns, key) {
+function renderGrid(fields, parentName, control, labelPosition, size, columns, key, fit = "viewport") {
   const customCols = columns !== 2;
+  if (fit === "container") {
+    return /* @__PURE__ */ jsx("div", { className: "@container", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-1",
+          SIZE[size].gap,
+          columns > 1 && "@min-[280px]:grid-cols-2 @min-[280px]:[&>*:last-child:nth-child(odd)]:col-span-2"
+        ),
+        children: fields.map((f) => /* @__PURE__ */ jsx("div", { className: f.className, children: renderField(f, parentName, control, labelPosition, size) }, f.name))
+      }
+    ) }, key);
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1052,9 +1312,9 @@ function renderGrid(fields, parentName, control, labelPosition, size, columns, k
     key
   );
 }
-function renderRows(fields, rowConfig, parentName, control, labelPosition, size, columns) {
+function renderRows(fields, rowConfig, parentName, control, labelPosition, size, columns, fit = "viewport") {
   if (!rowConfig || rowConfig.length === 0) {
-    return renderGrid(fields, parentName, control, labelPosition, size, columns);
+    return renderGrid(fields, parentName, control, labelPosition, size, columns, void 0, fit);
   }
   const used = new Set(rowConfig.flatMap((r) => r.fields));
   const unassigned = fields.filter((f) => !used.has(f.name));
@@ -1070,7 +1330,8 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition, size,
         labelPosition,
         size,
         columns,
-        row.id
+        row.id,
+        fit
       );
     }),
     unassigned.length > 0 && renderGrid(
@@ -1080,7 +1341,8 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition, size,
       labelPosition,
       size,
       columns,
-      "_unassigned"
+      "_unassigned",
+      fit
     )
   ] });
 }
@@ -1092,7 +1354,9 @@ var ObjectField = ({
   groupConfig,
   labelPosition = "side",
   size = "sm",
-  columns = 2
+  columns = 2,
+  fit = "viewport",
+  groupAs = "accordion"
 }) => {
   const grouped = fields.reduce((acc, f) => {
     const key = f.group ?? "_ungrouped";
@@ -1105,60 +1369,70 @@ var ObjectField = ({
   const groupConfigById = new Map(
     (groupConfig ?? []).map((g) => [g.id, g])
   );
-  return /* @__PURE__ */ jsxs("div", { className: SIZE[size].outer, children: [
-    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: SIZE[size].section, children: renderRows(
-      ungrouped,
-      rowConfig,
-      name,
-      control,
-      labelPosition,
-      size,
-      columns
-    ) }),
-    groupedEntries.length > 0 && /* @__PURE__ */ jsx(
-      Accordion,
-      {
-        type: "multiple",
-        defaultValue: groupedEntries.map(([k]) => k),
-        className: "w-full",
-        children: groupedEntries.map(([group, gFields]) => {
-          const gc = groupConfigById.get(group);
-          return /* @__PURE__ */ jsxs(AccordionItem, { value: group, className: "border-b", children: [
-            /* @__PURE__ */ jsx(
-              AccordionTrigger,
-              {
-                className: cn(
-                  "font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline",
-                  SIZE[size].trigger
-                ),
-                children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                  gc?.label ?? humanize(group),
-                  (gc?.showCount ?? true) && /* @__PURE__ */ jsx(
-                    Badge,
-                    {
-                      variant: "secondary",
-                      className: "px-1.5 py-0 text-base font-normal tabular-nums",
-                      children: gFields.length
-                    }
+  return (
+    // A container has no width of its own, so one fitted to it takes its
+    // parent's: in a row beside a button it would otherwise shrink to nothing.
+    /* @__PURE__ */ jsxs("div", { className: cn(SIZE[size].outer, fit === "container" && "w-full min-w-0"), children: [
+      ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: SIZE[size].section, children: renderRows(
+        ungrouped,
+        rowConfig,
+        name,
+        control,
+        labelPosition,
+        size,
+        columns,
+        fit
+      ) }),
+      groupedEntries.length > 0 && groupAs === "section" && /* @__PURE__ */ jsx("div", { className: SIZE[size].section, children: groupedEntries.map(([group, gFields]) => /* @__PURE__ */ jsxs("section", { className: SIZE[size].stack, children: [
+        /* @__PURE__ */ jsx(Eyebrow, { children: groupConfigById.get(group)?.label ?? humanize(group) }),
+        renderRows(gFields, rowConfig, name, control, labelPosition, size, columns, fit)
+      ] }, group)) }),
+      groupedEntries.length > 0 && groupAs === "accordion" && /* @__PURE__ */ jsx(
+        Accordion,
+        {
+          type: "multiple",
+          defaultValue: groupedEntries.map(([k]) => k),
+          className: "w-full",
+          children: groupedEntries.map(([group, gFields]) => {
+            const gc = groupConfigById.get(group);
+            return /* @__PURE__ */ jsxs(AccordionItem, { value: group, className: "border-b", children: [
+              /* @__PURE__ */ jsx(
+                AccordionTrigger,
+                {
+                  className: cn(
+                    "font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline",
+                    SIZE[size].trigger
                   ),
-                  gc?.badges?.map((b, i) => /* @__PURE__ */ jsx(StatusPill, { badge: b }, i))
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx(AccordionContent, { className: "pb-3 pt-1", children: /* @__PURE__ */ jsx("div", { className: SIZE[size].section, children: renderRows(
-              gFields,
-              rowConfig,
-              name,
-              control,
-              labelPosition,
-              size,
-              columns
-            ) }) })
-          ] }, group);
-        })
-      }
-    )
-  ] });
+                  children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                    gc?.label ?? humanize(group),
+                    (gc?.showCount ?? true) && /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "secondary",
+                        className: "px-1.5 py-0 text-base font-normal tabular-nums",
+                        children: gFields.length
+                      }
+                    ),
+                    gc?.badges?.map((b, i) => /* @__PURE__ */ jsx(StatusPill, { badge: b }, i))
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(AccordionContent, { className: "pb-3 pt-1", children: /* @__PURE__ */ jsx("div", { className: SIZE[size].section, children: renderRows(
+                gFields,
+                rowConfig,
+                name,
+                control,
+                labelPosition,
+                size,
+                columns,
+                fit
+              ) }) })
+            ] }, group);
+          })
+        }
+      )
+    ] })
+  );
 };
 var FormField2 = Object.assign(FormField, {
   ObjectField,
@@ -1241,7 +1515,7 @@ function FieldGroup({ className, ...props }) {
     }
   );
 }
-cva(
+var fieldVariants = cva(
   "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
   {
     variants: {
@@ -1264,6 +1538,22 @@ cva(
     }
   }
 );
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
 function FieldContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -1466,146 +1756,6 @@ var ParamRow = React2.forwardRef(
   )
 );
 ParamRow.displayName = "ParamRow";
-function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "input-group",
-      role: "group",
-      className: cn(
-        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-control border outline-none transition-[color,box-shadow]",
-        "h-9 has-[>textarea]:h-auto",
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-control [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
-      }
-    },
-    defaultVariants: {
-      align: "inline-start"
-    }
-  }
-);
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "group",
-      "data-slot": "input-group-addon",
-      "data-align": align,
-      className: cn(inputGroupAddonVariants({ align }), className),
-      onClick: (e) => {
-        if (e.target.closest("button")) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus();
-      },
-      ...props
-    }
-  );
-}
-var inputGroupButtonVariants = cva(
-  "flex items-center gap-2 shadow-none",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-control px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "h-8 gap-1.5 rounded-control px-2.5 has-[>svg]:px-2.5",
-        "icon-xs": "size-6 rounded-control p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
-      }
-    },
-    defaultVariants: {
-      size: "xs"
-    }
-  }
-);
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      type,
-      "data-size": size,
-      variant,
-      className: cn(inputGroupButtonVariants({ size }), className),
-      ...props
-    }
-  );
-}
-function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "text-muted-foreground flex items-center gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function InputGroupInput({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      "data-slot": "input-group-control",
-      className: cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function InputGroupTextarea({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Textarea,
-    {
-      "data-slot": "input-group-control",
-      className: cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      ),
-      ...props
-    }
-  );
-}
 
 export { BooleanField, Checkbox, CheckboxGroupField, ColorField, ColorSwatches, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel2 as FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField2 as FormField, FormItem, FormLabel, FormMessage, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, NumberField, ObjectField, PARAM_SOURCES, ParamRow, PasswordField, PasswordInput, RadioField, RadioGroup, RadioGroupItem, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
 //# sourceMappingURL=index.js.map