@invana/forms 0.0.11 → 0.0.13

package/dist/index.js

@@ -1,4 +1,4 @@
-import { cn, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Separator, Button } from '@invana/ui';
+import { cn, Accordion, AccordionItem, AccordionTrigger, Badge, AccordionContent, Card, CardContent, Separator, Button } from '@invana/ui';
 import * as React2 from 'react';
 import { useMemo } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -6,12 +6,12 @@ import { useFormContext, Controller, FormProvider } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { EyeOff, Eye, ChevronDown, ChevronUp, Check, Circle } from 'lucide-react';
+import { EyeOff, Eye, Check, Circle, ChevronDown, ChevronUp } from 'lucide-react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
 // src/form-field.tsx
 var labelVariants = cva(
@@ -208,6 +208,51 @@ var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
+var Checkbox = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-md border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+var RadioGroup = React2.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid gap-2", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+var RadioGroupItem = React2.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -462,18 +507,86 @@ var IconInput = ({ value, onChange }) => {
   ] });
 };
 var SIZE = {
-  sm: { input: "h-8 text-sm", select: "h-8", label: "text-xs", desc: "text-xs" },
-  md: { input: "", select: "", label: "", desc: "" }
+  xs: {
+    input: "h-9",
+    select: "h-9",
+    textarea: "",
+    label: "text-base",
+    desc: "text-base",
+    gap: "gap-x-3 gap-y-2.5",
+    section: "space-y-3",
+    outer: "space-y-4",
+    stack: "space-y-2",
+    sideGap: "gap-x-2",
+    trigger: "py-1.5 text-base",
+    switch: "scale-90 origin-right",
+    check: "h-4 w-4",
+    radio: "h-4 w-4"
+  },
+  sm: {
+    input: "h-9",
+    select: "h-9",
+    textarea: "",
+    label: "text-base",
+    desc: "text-base",
+    gap: "gap-x-3 gap-y-2",
+    section: "space-y-3",
+    outer: "space-y-4",
+    stack: "space-y-1.5",
+    sideGap: "gap-x-2",
+    trigger: "py-1.5 text-base",
+    switch: "scale-90 origin-right",
+    check: "h-4 w-4",
+    radio: "h-4 w-4"
+  },
+  md: {
+    input: "",
+    select: "",
+    textarea: "",
+    label: "text-base",
+    desc: "text-base",
+    gap: "gap-4",
+    section: "space-y-4",
+    outer: "space-y-6",
+    stack: "space-y-2",
+    sideGap: "gap-2",
+    trigger: "py-1.5 text-base",
+    switch: "",
+    check: "h-4 w-4",
+    radio: "h-4 w-4"
+  }
 };
-function itemClasses(labelPosition, className) {
+function itemClasses(labelPosition, size, className) {
   return cn(
-    labelPosition === "side" && "grid grid-cols-3 items-center gap-2",
-    labelPosition === "top" && "space-y-2",
+    labelPosition === "side" && cn("grid grid-cols-3 items-center", SIZE[size].sideGap),
+    labelPosition === "top" && SIZE[size].stack,
     className
   );
 }
-function inputWrapper(labelPosition) {
-  return cn(labelPosition === "side" && "col-span-2", "space-y-1");
+function inputWrapper(labelPosition, size) {
+  return cn(labelPosition === "side" && "col-span-2", SIZE[size].stack);
+}
+function StatusPill({ badge }) {
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: badge.variant ?? "secondary",
+      className: "rounded-full px-1.5 py-0 text-base font-medium",
+      children: badge.label
+    }
+  );
+}
+function FieldLabel({
+  label,
+  badge,
+  size,
+  className
+}) {
+  if (!label && !badge) return null;
+  return /* @__PURE__ */ jsxs(FormLabel, { className: cn(SIZE[size].label, className), children: [
+    label,
+    badge && /* @__PURE__ */ jsx(StatusPill, { badge })
+  ] });
 }
 var InputField = ({
   label,
@@ -483,10 +596,12 @@ var InputField = ({
   onChange,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       Input,
       {
@@ -508,10 +623,12 @@ var PasswordField = ({
   onChange,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       PasswordInput,
       {
@@ -534,14 +651,16 @@ var TextareaField = ({
   rows,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       Textarea,
       {
-        className: size === "sm" ? "text-sm" : void 0,
+        className: SIZE[size].textarea || void 0,
         rows,
         placeholder,
         value: value ?? "",
@@ -561,10 +680,12 @@ var SelectField = ({
   placeholder = "Select type",
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsxs(Select, { value: value ?? "", onValueChange: onChange, 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)) })
@@ -579,25 +700,160 @@ var BooleanField = ({
   value,
   onChange,
   labelPosition = "side",
-  size = "sm"
+  size = "sm",
+  control = "switch",
+  labelClassName,
+  badge,
+  className,
+  boxed = false
 }) => {
+  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
+          )
+        }
+      )
+    ] });
+  }
   if (labelPosition === "side") {
-    return /* @__PURE__ */ jsxs(FormItem, { className: "flex items-center justify-between rounded-md border p-2", children: [
+    return /* @__PURE__ */ jsxs(FormItem, { className: cn("flex items-center justify-between", boxClass), children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
+        /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
         description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description })
       ] }),
-      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Switch, { checked: !!value, onCheckedChange: onChange }) })
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+        Switch,
+        {
+          className: SIZE[size].switch || void 0,
+          checked: !!value,
+          onCheckedChange: onChange
+        }
+      ) })
     ] });
   }
-  return /* @__PURE__ */ jsxs(FormItem, { className: "space-y-2", children: [
-    label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-md border p-2", children: [
-      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Switch, { checked: !!value, onCheckedChange: onChange }) }),
+  return /* @__PURE__ */ jsxs(FormItem, { className: SIZE[size].stack, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, 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,
+          onCheckedChange: onChange
+        }
+      ) }),
       description && /* @__PURE__ */ jsx(FormDescription, { className: cn("ml-2", SIZE[size].desc), children: description })
     ] })
   ] });
 };
+var RadioField = ({
+  label,
+  description,
+  options = [],
+  value,
+  onChange,
+  labelPosition = "side",
+  size = "sm",
+  orientation = "vertical",
+  labelClassName,
+  badge,
+  className
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        value: value ?? "",
+        onValueChange: onChange,
+        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)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn("leading-none", SIZE[size].label), children: o.label })
+            ]
+          },
+          o.value
+        ))
+      }
+    ) }),
+    description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
+  ] })
+] });
+var CheckboxGroupField = ({
+  label,
+  description,
+  options = [],
+  value,
+  onChange,
+  labelPosition = "side",
+  size = "sm",
+  orientation = "vertical",
+  labelClassName,
+  badge,
+  className
+}) => {
+  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__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          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(
+                  Checkbox,
+                  {
+                    className: cn("shrink-0", SIZE[size].check),
+                    checked: selected.includes(o.value),
+                    onCheckedChange: (c) => toggle(o.value, c === true)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: cn("leading-none", SIZE[size].label), children: o.label })
+              ]
+            },
+            o.value
+          ))
+        }
+      ),
+      description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+      /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
+    ] })
+  ] });
+};
 var ColorField = ({
   label,
   description,
@@ -607,10 +863,12 @@ var ColorField = ({
   defaultValue,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       ColorSwatches,
       {
@@ -634,10 +892,12 @@ var NumberField = ({
   step,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
       SliderNumber,
       {
@@ -659,10 +919,12 @@ var IconField = ({
   onChange,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
+  /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, 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 })
@@ -673,6 +935,8 @@ var Field = {
   Password: PasswordField,
   Textarea: TextareaField,
   Boolean: BooleanField,
+  Radio: RadioField,
+  CheckboxGroup: CheckboxGroupField,
   Color: ColorField,
   Number: NumberField,
   Select: SelectField,
@@ -681,11 +945,6 @@ var Field = {
 function humanize(name) {
   return name.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim();
 }
-function chunk(arr, size) {
-  const out = [];
-  for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
-  return out;
-}
 function renderField(field, parentName, control, labelPosition, size) {
   return /* @__PURE__ */ jsx(
     FormField,
@@ -704,6 +963,11 @@ function renderField(field, parentName, control, labelPosition, size) {
           presetColors: field.presetColors,
           defaultValue: field.defaultValue,
           rows: field.rows,
+          control: field.control,
+          orientation: field.orientation,
+          boxed: field.boxed,
+          labelClassName: field.labelClassName,
+          badge: field.badge,
           labelPosition,
           size,
           value: rhf.value,
@@ -720,6 +984,10 @@ function renderField(field, parentName, control, labelPosition, size) {
             );
           case "boolean":
             return /* @__PURE__ */ jsx(BooleanField, { ...common });
+          case "radio":
+            return /* @__PURE__ */ jsx(RadioField, { ...common });
+          case "checkbox":
+            return /* @__PURE__ */ jsx(CheckboxGroupField, { ...common });
           case "color":
             return /* @__PURE__ */ jsx(ColorField, { ...common });
           case "number":
@@ -751,26 +1019,66 @@ function renderField(field, parentName, control, labelPosition, size) {
     field.name
   );
 }
-function renderRows(fields, rowConfig, parentName, control, labelPosition, size) {
+function renderGrid(fields, parentName, control, labelPosition, size, columns, key) {
+  const customCols = columns !== 2;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1",
+        SIZE[size].gap,
+        customCols ? "md:[grid-template-columns:repeat(var(--ff-cols),minmax(0,1fr))]" : "md:grid-cols-2"
+      ),
+      style: customCols ? { "--ff-cols": columns } : void 0,
+      children: fields.map((f) => {
+        const span = f.colSpan && f.colSpan > 1 ? f.colSpan : void 0;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              span && "md:[grid-column:span_var(--ff-span)/span_var(--ff-span)]",
+              f.className
+            ),
+            style: span ? { "--ff-span": span } : void 0,
+            children: renderField(f, parentName, control, labelPosition, size)
+          },
+          f.name
+        );
+      })
+    },
+    key
+  );
+}
+function renderRows(fields, rowConfig, parentName, control, labelPosition, size, columns) {
   if (!rowConfig || rowConfig.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: chunk(fields, 2).map((row, i) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition, size)) }, i)) });
+    return renderGrid(fields, parentName, control, labelPosition, size, columns);
   }
   const used = new Set(rowConfig.flatMap((r) => r.fields));
   const unassigned = fields.filter((f) => !used.has(f.name));
   const byName = new Map(fields.map((f) => [f.name, f]));
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: SIZE[size].section, children: [
     rowConfig.map((row) => {
       const rowFields = row.fields.map((n) => byName.get(n)).filter((f) => !!f);
-      return chunk(rowFields, 2).map((cnk, idx) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "grid grid-cols-1 gap-4 md:grid-cols-2",
-          children: cnk.map((f) => renderField(f, parentName, control, labelPosition, size))
-        },
-        `${row.id}-${idx}`
-      ));
+      if (rowFields.length === 0) return null;
+      return renderGrid(
+        rowFields,
+        parentName,
+        control,
+        labelPosition,
+        size,
+        columns,
+        row.id
+      );
     }),
-    unassigned.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: chunk(unassigned, 2).map((row, i) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: row.map((f) => renderField(f, parentName, control, labelPosition, size)) }, `u-${i}`)) })
+    unassigned.length > 0 && renderGrid(
+      unassigned,
+      parentName,
+      control,
+      labelPosition,
+      size,
+      columns,
+      "_unassigned"
+    )
   ] });
 }
 var ObjectField = ({
@@ -778,8 +1086,10 @@ var ObjectField = ({
   name,
   fields,
   rowConfig,
+  groupConfig,
   labelPosition = "side",
-  size = "sm"
+  size = "sm",
+  columns = 2
 }) => {
   const grouped = fields.reduce((acc, f) => {
     const key = f.group ?? "_ungrouped";
@@ -789,21 +1099,60 @@ var ObjectField = ({
   const ungrouped = grouped["_ungrouped"] ?? [];
   delete grouped["_ungrouped"];
   const groupedEntries = Object.entries(grouped);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(ungrouped, rowConfig, name, control, labelPosition, size) }),
+  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 space-y-2",
-        children: groupedEntries.map(([group, gFields]) => /* @__PURE__ */ jsxs(AccordionItem, { value: group, className: "rounded-md border", children: [
-          /* @__PURE__ */ jsxs(AccordionTrigger, { className: "px-3 text-sm font-medium hover:no-underline", children: [
-            humanize(group),
-            " Settings"
-          ] }),
-          /* @__PURE__ */ jsx(AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderRows(gFields, rowConfig, name, control, labelPosition, size) }) })
-        ] }, group))
+        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: "rounded-full 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
+            ) }) })
+          ] }, group);
+        })
       }
     )
   ] });
@@ -814,56 +1163,35 @@ var FormField2 = Object.assign(FormField, {
   Password: PasswordField,
   Textarea: TextareaField,
   Boolean: BooleanField,
+  Radio: RadioField,
+  CheckboxGroup: CheckboxGroupField,
   Color: ColorField,
   Number: NumberField,
   Select: SelectField,
   Icon: IconField
 });
-var Checkbox = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-md border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      CheckboxPrimitive.Indicator,
-      {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
-      }
-    )
-  }
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-var RadioGroup = React2.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Root,
-    {
-      className: cn("grid gap-2", className),
-      ...props,
-      ref
-    }
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React2.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Item,
+function SettingsPanel({
+  form,
+  title,
+  className,
+  contentClassName,
+  children,
+  ...objectField
+}) {
+  return /* @__PURE__ */ jsx(Card, { className, children: /* @__PURE__ */ jsxs(
+    CardContent,
     {
-      ref,
-      className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+      className: cn("max-h-[80vh] overflow-y-auto p-4", contentClassName),
+      children: [
+        title && /* @__PURE__ */ jsx("h2", { className: "mb-3 text-base font-semibold uppercase tracking-wide text-muted-foreground", children: title }),
+        /* @__PURE__ */ jsxs(Form, { ...form, children: [
+          /* @__PURE__ */ jsx(ObjectField, { control: form.control, ...objectField }),
+          children
+        ] })
+      ]
     }
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+  ) });
+}
 function FieldSet({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "fieldset",
@@ -947,7 +1275,7 @@ function FieldContent({ className, ...props }) {
     }
   );
 }
-function FieldLabel({
+function FieldLabel2({
   className,
   ...props
 }) {
@@ -1197,6 +1525,6 @@ function InputGroupTextarea({
   );
 }
 
-export { BooleanField, Checkbox, ColorField, ColorSwatches, Field, FieldContent, FieldDescription, FieldError, FieldGroup, 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, PasswordField, PasswordInput, RadioGroup, RadioGroupItem, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
+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, 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
 //# sourceMappingURL=index.js.map