"use client"; import { defineSchema, type InferType } from "@buildnbuzz/form-react"; import { toast } from "sonner"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Form, FormContent, FormFields, FormSubmit, } from "@/registry/shadcn/form"; const settingsSchema = defineSchema({ fields: [ { type: "text", name: "username", label: "Username", placeholder: "johndoe", required: true, }, { type: "collapsible", label: "Advanced Settings", collapsed: true, ui: { variant: "bordered", description: "Additional options that are hidden by default.", }, fields: [ { type: "switch", name: "publicProfile", label: "Public Profile", defaultValue: true, }, { type: "switch", name: "showEmail", label: "Show Email Address", defaultValue: false, }, { type: "select", name: "timezone", label: "Timezone", options: ["UTC", "EST", "PST", "GMT"], defaultValue: "UTC", }, ], }, { type: "collapsible", label: "Danger Zone", collapsed: true, ui: { variant: "card", description: "Irreversible actions for your account.", }, fields: [ { type: "checkbox", name: "confirmDelete", label: "I understand that deleting my account is permanent", }, ], }, ], }); type SettingsSchema = InferType; export default function CollapsibleSettingsForm() { return ( Profile Settings Expandable sections for organizing advanced options

{ const data = value as SettingsSchema; await new Promise((r) => setTimeout(r, 1000)); toast("Settings saved!", { description: (

                  {JSON.stringify(data, null, 2)}

), }); }} > Save Changes

); }