@invana/forms 0.0.30 → 0.0.32

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var ui = require('@invana/ui');
 var React2 = require('react');
+var ui = require('@invana/ui');
 var reactSlot = require('@radix-ui/react-slot');
 var reactHookForm = require('react-hook-form');
 var LabelPrimitive = require('@radix-ui/react-label');
@@ -94,7 +94,7 @@ var FormLabel = React2__namespace.forwardRef(({ className, ...props }, ref) => {
     Label,
     {
       ref,
-      className: ui.cn(error && "text-destructive", className),
+      className: ui.cn(className, error && "text-destructive"),
       htmlFor: formItemId,
       ...props
     }
@@ -153,8 +153,9 @@ var Input = React2__namespace.forwardRef(
       {
         type,
         className: ui.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,
@@ -164,6 +165,176 @@ var Input = React2__namespace.forwardRef(
   }
 );
 Input.displayName = "Input";
+var Textarea = React2__namespace.forwardRef(({ className, inputSize = "default", ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      className: ui.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__namespace.createContext({});
+function InputGroup({
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}) {
+  const wiring = React2__namespace.useMemo(
+    () => ({ id, "aria-describedby": describedBy, "aria-invalid": invalid }),
+    [id, describedBy, invalid]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(InputGroupControl.Provider, { value: wiring, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: ui.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 = classVarianceAuthority.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: ui.cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = classVarianceAuthority.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__ */ jsxRuntime.jsx(
+    ui.Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: ui.cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: ui.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__namespace.useContext(InputGroupControl);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      ...wiring,
+      "data-slot": "input-group-control",
+      className: ui.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__namespace.useContext(InputGroupControl);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Textarea,
+    {
+      ...wiring,
+      "data-slot": "input-group-control",
+      className: ui.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__namespace.forwardRef(
   ({ className, visible, onVisibleChange, disabled, ...props }, ref) => {
     const [internalVisible, setInternalVisible] = React2__namespace.useState(false);
@@ -202,21 +373,6 @@ var PasswordInput = React2__namespace.forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var Textarea = React2__namespace.forwardRef(({ className, inputSize = "default", ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      className: ui.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SwitchPrimitives__namespace.Root,
   {
@@ -290,8 +446,9 @@ var SelectTrigger = React2__namespace.forwardRef(({ className, children, trigger
   {
     ref,
     className: ui.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,
@@ -333,7 +490,7 @@ var SelectContent = React2__namespace.forwardRef(({ className, children, positio
   {
     ref,
     className: ui.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
     ),
@@ -403,12 +560,15 @@ var ColorSwatches = ({
 }) => {
   const [customColor, setCustomColor] = React2__namespace.useState(value || defaultValue);
   const [isCustom, setIsCustom] = React2__namespace.useState(false);
-  React2__namespace.useEffect(() => {
-    if (!value) return;
+  const [seen, setSeen] = React2__namespace.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);
@@ -488,9 +648,11 @@ var SliderNumber = ({
   className
 }) => {
   const [local, setLocal] = React2__namespace.useState(value);
-  React2__namespace.useEffect(() => {
+  const [seen, setSeen] = React2__namespace.useState(value);
+  if (value !== seen) {
+    setSeen(value);
     setLocal(value);
-  }, [value]);
+  }
   const set = (n) => {
     setLocal(n);
     onChange?.(n);
@@ -523,7 +685,7 @@ var SliderNumber = ({
 };
 var IconInput = ({ value, onChange }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       Input,
       {
@@ -531,17 +693,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",
@@ -554,10 +720,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",
@@ -570,10 +737,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",
@@ -588,7 +756,9 @@ var SIZE = {
 };
 function itemClasses(labelPosition, size, className) {
   return ui.cn(
-    labelPosition === "side" && ui.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" && ui.cn("grid grid-cols-3 items-center space-y-0", SIZE[size].sideGap),
     labelPosition === "top" && SIZE[size].stack,
     className
   );
@@ -613,17 +783,30 @@ function FieldLabel({
   className
 }) {
   if (!label && !badge) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormLabel, { className: ui.cn(SIZE[size].label, className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormLabel, { className: ui.cn(SIZE[size].label, SIZE[size].fieldLabel, className), children: [
     label,
     badge && /* @__PURE__ */ jsxRuntime.jsx(StatusPill, { badge })
   ] });
 }
+var AffixedInput = React2__namespace.forwardRef(({ unit, aside, className, ...props }, ref) => {
+  if (!unit && !aside) return /* @__PURE__ */ jsxRuntime.jsx(Input, { ref, className, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: ui.cn("bg-background dark:bg-background", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InputGroupInput, { ref, className: "h-full", ...props }),
+    /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", className: "font-mono font-normal", children: [
+      unit && /* @__PURE__ */ jsxRuntime.jsx("span", { children: unit }),
+      aside && /* @__PURE__ */ jsxRuntime.jsx("span", { children: aside })
+    ] })
+  ] });
+});
+AffixedInput.displayName = "AffixedInput";
 var InputField = ({
   label,
   description,
   placeholder,
   value,
   onChange,
+  unit,
+  aside,
   labelPosition = "side",
   size = "sm",
   labelClassName,
@@ -633,9 +816,11 @@ var InputField = ({
   /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      Input,
+      AffixedInput,
       {
         className: SIZE[size].input,
+        unit,
+        aside,
         placeholder,
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value)
@@ -920,6 +1105,8 @@ var NumberField = ({
   min,
   max,
   step,
+  unit,
+  aside,
   labelPosition = "side",
   size = "sm",
   labelClassName,
@@ -928,7 +1115,7 @@ var NumberField = ({
 }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
   /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition, size), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: min != null && max != null ? /* @__PURE__ */ jsxRuntime.jsx(
       SliderNumber,
       {
         value: typeof value === "number" ? value : 0,
@@ -937,6 +1124,19 @@ var NumberField = ({
         max,
         step
       }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      AffixedInput,
+      {
+        type: "number",
+        className: SIZE[size].input,
+        unit,
+        aside,
+        min,
+        max,
+        step,
+        value: typeof value === "number" ? value : "",
+        onChange: (e) => onChange?.(e.target.value === "" ? void 0 : Number(e.target.value))
+      }
     ) }),
     description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
     /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
@@ -960,18 +1160,6 @@ var IconField = ({
     /* @__PURE__ */ jsxRuntime.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();
 }
@@ -982,6 +1170,7 @@ 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),
@@ -998,6 +1187,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,
@@ -1049,8 +1240,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__ */ jsxRuntime.jsx("div", { className: "@container", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ui.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__ */ jsxRuntime.jsx("div", { className: f.className, children: renderField(f, parentName, control, labelPosition, size) }, f.name))
+      }
+    ) }, key);
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1079,9 +1283,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));
@@ -1097,7 +1301,8 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition, size,
         labelPosition,
         size,
         columns,
-        row.id
+        row.id,
+        fit
       );
     }),
     unassigned.length > 0 && renderGrid(
@@ -1107,7 +1312,8 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition, size,
       labelPosition,
       size,
       columns,
-      "_unassigned"
+      "_unassigned",
+      fit
     )
   ] });
 }
@@ -1119,7 +1325,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";
@@ -1140,9 +1348,14 @@ var ObjectField = ({
       control,
       labelPosition,
       size,
-      columns
+      columns,
+      fit
     ) }),
-    groupedEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    groupedEntries.length > 0 && groupAs === "section" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SIZE[size].section, children: groupedEntries.map(([group, gFields]) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: SIZE[size].stack, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Eyebrow, { children: groupConfigById.get(group)?.label ?? humanize(group) }),
+      renderRows(gFields, rowConfig, name, control, labelPosition, size, columns, fit)
+    ] }, group)) }),
+    groupedEntries.length > 0 && groupAs === "accordion" && /* @__PURE__ */ jsxRuntime.jsx(
       ui.Accordion,
       {
         type: "multiple",
@@ -1179,7 +1392,8 @@ var ObjectField = ({
               control,
               labelPosition,
               size,
-              columns
+              columns,
+              fit
             ) }) })
           ] }, group);
         })
@@ -1268,7 +1482,7 @@ function FieldGroup({ className, ...props }) {
     }
   );
 }
-classVarianceAuthority.cva(
+var fieldVariants = classVarianceAuthority.cva(
   "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
   {
     variants: {
@@ -1291,6 +1505,22 @@ classVarianceAuthority.cva(
     }
   }
 );
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: ui.cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
 function FieldContent({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1493,146 +1723,6 @@ var ParamRow = React2__namespace.forwardRef(
   )
 );
 ParamRow.displayName = "ParamRow";
-function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "input-group",
-      role: "group",
-      className: ui.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 = classVarianceAuthority.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__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "group",
-      "data-slot": "input-group-addon",
-      "data-align": align,
-      className: ui.cn(inputGroupAddonVariants({ align }), className),
-      onClick: (e) => {
-        if (e.target.closest("button")) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus();
-      },
-      ...props
-    }
-  );
-}
-var inputGroupButtonVariants = classVarianceAuthority.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__ */ jsxRuntime.jsx(
-    ui.Button,
-    {
-      type,
-      "data-size": size,
-      variant,
-      className: ui.cn(inputGroupButtonVariants({ size }), className),
-      ...props
-    }
-  );
-}
-function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: ui.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__ */ jsxRuntime.jsx(
-    Input,
-    {
-      "data-slot": "input-group-control",
-      className: ui.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__ */ jsxRuntime.jsx(
-    Textarea,
-    {
-      "data-slot": "input-group-control",
-      className: ui.cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      ),
-      ...props
-    }
-  );
-}
 
 exports.BooleanField = BooleanField;
 exports.Checkbox = Checkbox;