Repeatable group

import { RepeatableGroup } from "@/components/blocks/repeatable-group-block";
import type {
  GroupInstance,
  RepeatableField,
} from "@/components/blocks/repeatable-group-block";

import * as React from "react";
import { RepeatableGroup } from "@/components/blocks/repeatable-group-block";
import type {
  GroupInstance,
  RepeatableField,
} from "@/components/blocks/repeatable-group-block";

const fields: RepeatableField[] = [
  { key: "name",  label: "Full Name", type: "text",  required: true },
  { key: "email", label: "Email",     type: "email", required: true },
  {
    key: "role",
    label: "Role",
    type: "select",
    required: true,
    options: [
      { label: "Admin",  value: "admin"  },
      { label: "Editor", value: "editor" },
      { label: "Viewer", value: "viewer" },
    ],
  },
  { key: "primary", label: "Primary contact", type: "checkbox" },
];

export function Example() {
  const [contacts, setContacts] = React.useState<GroupInstance[]>([
    { name: "", email: "", role: "", primary: false },
  ]);

  return (
    <RepeatableGroup
      label="Team Member"
      caption="Add team members with their contact details"
      required
      fields={fields}
      minInstances={1}
      maxInstances={5}
      value={contacts}
      onChange={setContacts}
      titleField="name"
    />
  );
}

RepeatableGroup
├── Header (label / caption / required indicator)
├── GroupInstance[] (collapsible cards, one per repeated entry)
│   └── Fields rendered from RepeatableField[]
└── Add button (capped by maxInstances; selectable mode dedupes options across instances)