@invana/forms 0.0.32 → 0.0.34

package/dist/index.d.cts

@@ -60,6 +60,17 @@ type ColorPreset = {
  * component's variants and defaults to `secondary` (neutral grey). Use
  * `default` for the solid accent ("on") pill.
  */
+/**
+ * One choice of a `select`, `radio` or multi-select `checkbox` field. A
+ * `description` is drawn as a muted line under a radio's label; `disabled`
+ * shows the choice but stops it being picked (radio and select).
+ */
+type FieldOption = {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+};
 type FieldBadge = {
     label: string;
     variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'soft';
@@ -70,10 +81,12 @@ type FieldConfig = {
     label?: string;
     description?: string;
     placeholder?: string;
-    options?: {
-        label: string;
-        value: string;
-    }[];
+    options?: FieldOption[];
+    /**
+     * Shows the field and its value but stops it being changed. The value is
+     * still submitted. A `color` or `icon` field dims its label only.
+     */
+    disabled?: boolean;
     /**
      * Bounds of a `number` field. With both, it is a slider beside its number;
      * without, a typed number input that can carry a `unit` and an `aside`.
@@ -208,10 +221,9 @@ interface BaseFieldProps {
     placeholder?: string;
     value?: AnyValue;
     onChange?: (value: AnyValue) => void;
-    options?: {
-        label: string;
-        value: string;
-    }[];
+    options?: FieldOption[];
+    /** Shows the value but stops it being changed. */
+    disabled?: boolean;
     min?: number;
     max?: number;
     step?: number;
@@ -310,6 +322,7 @@ interface SliderNumberProps {
     min?: number;
     max?: number;
     step?: number;
+    disabled?: boolean;
     className?: string;
 }
 declare const SliderNumber: React$1.FC<SliderNumberProps>;
@@ -471,4 +484,4 @@ declare function InputGroupText({ className, ...props }: React$1.ComponentProps<
 declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
 
-export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputSize, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PARAM_SOURCES, ParamRow, type ParamRowProps, type ParamSource, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
+export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOption, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputSize, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PARAM_SOURCES, ParamRow, type ParamRowProps, type ParamSource, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };

package/dist/index.d.ts

@@ -60,6 +60,17 @@ type ColorPreset = {
  * component's variants and defaults to `secondary` (neutral grey). Use
  * `default` for the solid accent ("on") pill.
  */
+/**
+ * One choice of a `select`, `radio` or multi-select `checkbox` field. A
+ * `description` is drawn as a muted line under a radio's label; `disabled`
+ * shows the choice but stops it being picked (radio and select).
+ */
+type FieldOption = {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+};
 type FieldBadge = {
     label: string;
     variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'soft';
@@ -70,10 +81,12 @@ type FieldConfig = {
     label?: string;
     description?: string;
     placeholder?: string;
-    options?: {
-        label: string;
-        value: string;
-    }[];
+    options?: FieldOption[];
+    /**
+     * Shows the field and its value but stops it being changed. The value is
+     * still submitted. A `color` or `icon` field dims its label only.
+     */
+    disabled?: boolean;
     /**
      * Bounds of a `number` field. With both, it is a slider beside its number;
      * without, a typed number input that can carry a `unit` and an `aside`.
@@ -208,10 +221,9 @@ interface BaseFieldProps {
     placeholder?: string;
     value?: AnyValue;
     onChange?: (value: AnyValue) => void;
-    options?: {
-        label: string;
-        value: string;
-    }[];
+    options?: FieldOption[];
+    /** Shows the value but stops it being changed. */
+    disabled?: boolean;
     min?: number;
     max?: number;
     step?: number;
@@ -310,6 +322,7 @@ interface SliderNumberProps {
     min?: number;
     max?: number;
     step?: number;
+    disabled?: boolean;
     className?: string;
 }
 declare const SliderNumber: React$1.FC<SliderNumberProps>;
@@ -471,4 +484,4 @@ declare function InputGroupText({ className, ...props }: React$1.ComponentProps<
 declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
 
-export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputSize, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PARAM_SOURCES, ParamRow, type ParamRowProps, type ParamSource, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
+export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOption, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputSize, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PARAM_SOURCES, ParamRow, type ParamRowProps, type ParamSource, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };

package/dist/index.js

@@ -618,6 +618,7 @@ var SliderNumber = ({
   min = 0,
   max = 100,
   step = 1,
+  disabled,
   className
 }) => {
   const [local, setLocal] = React2.useState(value);
@@ -639,6 +640,7 @@ var SliderNumber = ({
         min,
         max,
         step,
+        disabled,
         className: "flex-1"
       }
     ),
@@ -651,7 +653,8 @@ var SliderNumber = ({
         className: "h-8 w-16",
         min,
         max,
-        step
+        step,
+        disabled
       }
     )
   ] });
@@ -753,13 +756,20 @@ function FieldLabel({
   label,
   badge,
   size,
+  disabled,
   className
 }) {
   if (!label && !badge) return null;
-  return /* @__PURE__ */ jsxs(FormLabel, { className: cn(SIZE[size].label, SIZE[size].fieldLabel, 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 });
@@ -784,9 +794,10 @@ var InputField = ({
   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(
       AffixedInput,
@@ -795,6 +806,7 @@ var InputField = ({
         unit,
         aside,
         placeholder,
+        disabled,
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value)
       }
@@ -813,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)
       }
@@ -841,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,
@@ -851,6 +866,7 @@ var TextareaField = ({
         className: SIZE[size].textarea || void 0,
         rows,
         placeholder,
+        disabled,
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value)
       }
@@ -870,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 })
@@ -893,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(
@@ -931,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
         }
       ) }),
@@ -962,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 }),
@@ -1006,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",
@@ -1027,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)
                   }
                 ),
@@ -1053,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,
@@ -1084,9 +1135,10 @@ var NumberField = ({
   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: min != null && max != null ? /* @__PURE__ */ jsx(
       SliderNumber,
@@ -1095,7 +1147,8 @@ var NumberField = ({
         onChange,
         min,
         max,
-        step
+        step,
+        disabled
       }
     ) : /* @__PURE__ */ jsx(
       AffixedInput,
@@ -1107,6 +1160,7 @@ var NumberField = ({
         min,
         max,
         step,
+        disabled,
         value: typeof value === "number" ? value : "",
         onChange: (e) => onChange?.(e.target.value === "" ? void 0 : Number(e.target.value))
       }
@@ -1124,9 +1178,10 @@ 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 }),
@@ -1149,6 +1204,7 @@ function renderField(field, parentName, control, labelPosition, size) {
           label: field.label ?? humanize(field.name),
           description: field.description,
           options: field.options,
+          disabled: field.disabled,
           min: field.min,
           max: field.max,
           step: field.step,
@@ -1313,66 +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,
-      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
-                ),
-                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,
-              fit
-            ) }) })
-          ] }, 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,