@invana/forms 0.0.12 → 0.0.14

package/dist/index.cjs

@@ -9,10 +9,10 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var SwitchPrimitives = require('@radix-ui/react-switch');
-var SelectPrimitive = require('@radix-ui/react-select');
-var SliderPrimitive = require('@radix-ui/react-slider');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var SelectPrimitive = require('@radix-ui/react-select');
+var SliderPrimitive = require('@radix-ui/react-slider');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -35,10 +35,10 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
-var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
-var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
 // src/form-field.tsx
 var labelVariants = classVarianceAuthority.cva(
@@ -235,6 +235,51 @@ var Switch = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
+var Checkbox = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CheckboxPrimitive__namespace.Root,
+  {
+    ref,
+    className: ui.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__ */ jsxRuntime.jsx(
+      CheckboxPrimitive__namespace.Indicator,
+      {
+        className: ui.cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
+var RadioGroup = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.Root,
+    {
+      className: ui.cn("grid gap-2", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
+var RadioGroupItem = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.Item,
+    {
+      ref,
+      className: ui.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__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
 var Select = SelectPrimitive__namespace.Root;
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
@@ -489,18 +534,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 ui.cn(
-    labelPosition === "side" && "grid grid-cols-3 items-center gap-2",
-    labelPosition === "top" && "space-y-2",
+    labelPosition === "side" && ui.cn("grid grid-cols-3 items-center", SIZE[size].sideGap),
+    labelPosition === "top" && SIZE[size].stack,
     className
   );
 }
-function inputWrapper(labelPosition) {
-  return ui.cn(labelPosition === "side" && "col-span-2", "space-y-1");
+function inputWrapper(labelPosition, size) {
+  return ui.cn(labelPosition === "side" && "col-span-2", SIZE[size].stack);
+}
+function StatusPill({ badge }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.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__ */ jsxRuntime.jsxs(FormLabel, { className: ui.cn(SIZE[size].label, className), children: [
+    label,
+    badge && /* @__PURE__ */ jsxRuntime.jsx(StatusPill, { badge })
+  ] });
 }
 var InputField = ({
   label,
@@ -510,10 +623,12 @@ var InputField = ({
   onChange,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__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(
       Input,
       {
@@ -535,10 +650,12 @@ var PasswordField = ({
   onChange,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__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(
       PasswordInput,
       {
@@ -561,14 +678,16 @@ var TextareaField = ({
   rows,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__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(
       Textarea,
       {
-        className: size === "sm" ? "text-sm" : void 0,
+        className: SIZE[size].textarea || void 0,
         rows,
         placeholder,
         value: value ?? "",
@@ -588,10 +707,12 @@ var SelectField = ({
   placeholder = "Select type",
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__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.jsxs(Select, { value: value ?? "", onValueChange: onChange, children: [
       /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: SIZE[size].select, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
@@ -606,25 +727,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__ */ jsxRuntime.jsxs(FormItem, { className: ui.cn("flex items-center gap-2 space-y-0", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          className: SIZE[size].check,
+          checked: !!value,
+          onCheckedChange: onChange
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FieldLabel,
+        {
+          label,
+          badge,
+          size,
+          className: ui.cn(
+            "!mt-0 cursor-pointer font-normal leading-none",
+            labelClassName
+          )
+        }
+      )
+    ] });
+  }
   if (labelPosition === "side") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "flex items-center justify-between rounded-md border p-2", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: ui.cn("flex items-center justify-between", boxClass), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
         description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: !!value, onCheckedChange: onChange }) })
+      /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Switch,
+        {
+          className: SIZE[size].switch || void 0,
+          checked: !!value,
+          onCheckedChange: onChange
+        }
+      ) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "space-y-2", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between rounded-md border p-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: !!value, onCheckedChange: onChange }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: SIZE[size].stack, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label, badge, size, className: labelClassName }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("flex items-center justify-between", boxClass), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Switch,
+        {
+          className: SIZE[size].switch || void 0,
+          checked: !!value,
+          onCheckedChange: onChange
+        }
+      ) }),
       description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: ui.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__ */ 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(
+      RadioGroup,
+      {
+        value: value ?? "",
+        onValueChange: onChange,
+        className: orientation === "horizontal" ? "flex flex-row items-center gap-x-4" : ui.cn("flex flex-col", SIZE[size].stack),
+        children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: "flex cursor-pointer items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RadioGroupItem,
+                {
+                  value: o.value,
+                  className: ui.cn("shrink-0", SIZE[size].radio)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ui.cn("leading-none", SIZE[size].label), children: o.label })
+            ]
+          },
+          o.value
+        ))
+      }
+    ) }),
+    description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+    /* @__PURE__ */ jsxRuntime.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__ */ 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(
+        "div",
+        {
+          className: orientation === "horizontal" ? "flex flex-row items-center gap-x-4" : ui.cn("flex flex-col", SIZE[size].stack),
+          children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              className: "flex cursor-pointer items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox,
+                  {
+                    className: ui.cn("shrink-0", SIZE[size].check),
+                    checked: selected.includes(o.value),
+                    onCheckedChange: (c) => toggle(o.value, c === true)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: ui.cn("leading-none", SIZE[size].label), children: o.label })
+              ]
+            },
+            o.value
+          ))
+        }
+      ),
+      description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
+    ] })
+  ] });
+};
 var ColorField = ({
   label,
   description,
@@ -634,10 +890,12 @@ var ColorField = ({
   defaultValue,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__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(
       ColorSwatches,
       {
@@ -661,10 +919,12 @@ var NumberField = ({
   step,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__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(
       SliderNumber,
       {
@@ -686,10 +946,12 @@ var IconField = ({
   onChange,
   labelPosition = "side",
   size = "sm",
+  labelClassName,
+  badge,
   className
-}) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: itemClasses(labelPosition, className), children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: SIZE[size].label, children: label }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapper(labelPosition), children: [
+}) => /* @__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(IconInput, { value, onChange }) }),
     description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { className: SIZE[size].desc, children: description }),
     /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: SIZE[size].desc })
@@ -700,6 +962,8 @@ var Field = {
   Password: PasswordField,
   Textarea: TextareaField,
   Boolean: BooleanField,
+  Radio: RadioField,
+  CheckboxGroup: CheckboxGroupField,
   Color: ColorField,
   Number: NumberField,
   Select: SelectField,
@@ -726,6 +990,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,
@@ -742,6 +1011,10 @@ function renderField(field, parentName, control, labelPosition, size) {
             );
           case "boolean":
             return /* @__PURE__ */ jsxRuntime.jsx(BooleanField, { ...common });
+          case "radio":
+            return /* @__PURE__ */ jsxRuntime.jsx(RadioField, { ...common });
+          case "checkbox":
+            return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupField, { ...common });
           case "color":
             return /* @__PURE__ */ jsxRuntime.jsx(ColorField, { ...common });
           case "number":
@@ -779,7 +1052,8 @@ function renderGrid(fields, parentName, control, labelPosition, size, columns, k
     "div",
     {
       className: ui.cn(
-        "grid grid-cols-1 gap-4",
+        "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,
@@ -809,7 +1083,7 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition, size,
   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__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SIZE[size].section, children: [
     rowConfig.map((row) => {
       const rowFields = row.fields.map((n) => byName.get(n)).filter((f) => !!f);
       if (rowFields.length === 0) return null;
@@ -839,6 +1113,7 @@ var ObjectField = ({
   name,
   fields,
   rowConfig,
+  groupConfig,
   labelPosition = "side",
   size = "sm",
   columns = 2
@@ -851,8 +1126,11 @@ var ObjectField = ({
   const ungrouped = grouped["_ungrouped"] ?? [];
   delete grouped["_ungrouped"];
   const groupedEntries = Object.entries(grouped);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-    ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(
+  const groupConfigById = new Map(
+    (groupConfig ?? []).map((g) => [g.id, g])
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SIZE[size].outer, children: [
+    ungrouped.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SIZE[size].section, children: renderRows(
       ungrouped,
       rowConfig,
       name,
@@ -866,22 +1144,42 @@ var ObjectField = ({
       {
         type: "multiple",
         defaultValue: groupedEntries.map(([k]) => k),
-        className: "w-full space-y-2",
-        children: groupedEntries.map(([group, gFields]) => /* @__PURE__ */ jsxRuntime.jsxs(ui.AccordionItem, { value: group, className: "rounded-md border", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.AccordionTrigger, { className: "px-3 text-sm font-medium hover:no-underline", children: [
-            humanize(group),
-            " Settings"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderRows(
-            gFields,
-            rowConfig,
-            name,
-            control,
-            labelPosition,
-            size,
-            columns
-          ) }) })
-        ] }, group))
+        className: "w-full",
+        children: groupedEntries.map(([group, gFields]) => {
+          const gc = groupConfigById.get(group);
+          return /* @__PURE__ */ jsxRuntime.jsxs(ui.AccordionItem, { value: group, className: "border-b", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.AccordionTrigger,
+              {
+                className: ui.cn(
+                  "font-semibold uppercase tracking-wide text-muted-foreground hover:no-underline",
+                  SIZE[size].trigger
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+                  gc?.label ?? humanize(group),
+                  (gc?.showCount ?? true) && /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.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__ */ jsxRuntime.jsx(StatusPill, { badge: b }, i))
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.AccordionContent, { className: "pb-3 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: SIZE[size].section, children: renderRows(
+              gFields,
+              rowConfig,
+              name,
+              control,
+              labelPosition,
+              size,
+              columns
+            ) }) })
+          ] }, group);
+        })
       }
     )
   ] });
@@ -892,56 +1190,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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  CheckboxPrimitive__namespace.Root,
-  {
-    ref,
-    className: ui.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__ */ jsxRuntime.jsx(
-      CheckboxPrimitive__namespace.Indicator,
-      {
-        className: ui.cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
-      }
-    )
-  }
-));
-Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
-var RadioGroup = React2__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadioGroupPrimitive__namespace.Root,
-    {
-      className: ui.cn("grid gap-2", className),
-      ...props,
-      ref
-    }
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
-var RadioGroupItem = React2__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadioGroupPrimitive__namespace.Item,
+function SettingsPanel({
+  form,
+  title,
+  className,
+  contentClassName,
+  children,
+  ...objectField
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.CardContent,
     {
-      ref,
-      className: ui.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__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+      className: ui.cn("max-h-[80vh] overflow-y-auto p-4", contentClassName),
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-3 text-base font-semibold uppercase tracking-wide text-muted-foreground", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Form, { ...form, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ObjectField, { control: form.control, ...objectField }),
+          children
+        ] })
+      ]
     }
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
+  ) });
+}
 function FieldSet({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "fieldset",
@@ -1025,7 +1302,7 @@ function FieldContent({ className, ...props }) {
     }
   );
 }
-function FieldLabel({
+function FieldLabel2({
   className,
   ...props
 }) {
@@ -1277,6 +1554,7 @@ function InputGroupTextarea({
 
 exports.BooleanField = BooleanField;
 exports.Checkbox = Checkbox;
+exports.CheckboxGroupField = CheckboxGroupField;
 exports.ColorField = ColorField;
 exports.ColorSwatches = ColorSwatches;
 exports.Field = Field;
@@ -1284,7 +1562,7 @@ exports.FieldContent = FieldContent;
 exports.FieldDescription = FieldDescription;
 exports.FieldError = FieldError;
 exports.FieldGroup = FieldGroup;
-exports.FieldLabel = FieldLabel;
+exports.FieldLabel = FieldLabel2;
 exports.FieldLegend = FieldLegend;
 exports.FieldSeparator = FieldSeparator;
 exports.FieldSet = FieldSet;
@@ -1311,6 +1589,7 @@ exports.NumberField = NumberField;
 exports.ObjectField = ObjectField;
 exports.PasswordField = PasswordField;
 exports.PasswordInput = PasswordInput;
+exports.RadioField = RadioField;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.Select = Select;
@@ -1324,6 +1603,7 @@ exports.SelectScrollUpButton = SelectScrollUpButton;
 exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
+exports.SettingsPanel = SettingsPanel;
 exports.Slider = Slider;
 exports.SliderNumber = SliderNumber;
 exports.Switch = Switch;