4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T126d,"use client"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Form, FormContent, FormFields, FormSubmit, } from "@/registry/shadcn/form"; import { toast } from "sonner"; import { defineSchema, type InferType } from "@buildnbuzz/form-react"; const categoryOptions = [ { value: "technical", label: "Technical Issue", description: "Software bugs, errors, or crashes", }, { value: "billing", label: "Billing & Payments", description: "Invoices, refunds, or payment methods", }, { value: "account", label: "Account", description: "Password, profile, or security settings", }, { value: "feature", label: "Feature Request", description: "Suggest new features or improvements", }, ]; const priorityOptions = [ { value: "low", label: "Low", description: "No impact on work" }, { value: "medium", label: "Medium", description: "Some features affected" }, { value: "high", label: "High", description: "Major functionality impacted" }, { value: "urgent", label: "Urgent", description: "Complete blocker" }, ]; const subcategories: Record> = { technical: [ { value: "bug", label: "Software Bug" }, { value: "crash", label: "System Crash" }, { value: "performance", label: "Performance Issue" }, ], billing: [ { value: "refund", label: "Refund Request" }, { value: "subscription", label: "Subscription Issue" }, { value: "invoice", label: "Invoice Query" }, ], account: [ { value: "password", label: "Password Reset" }, { value: "security", label: "Security Breach" }, { value: "profile", label: "Profile Update" }, ], feature: [ { value: "ui", label: "UI Improvement" }, { value: "new-feature", label: "New Functionality" }, { value: "api", label: "API Integration" }, ], }; const teamMembers = [ { value: "alice", label: "Alice Johnson" }, { value: "bob", label: "Bob Smith" }, { value: "carol", label: "Carol Williams" }, { value: "david", label: "David Brown" }, { value: "emma", label: "Emma Davis" }, ]; // Support ticket form showcasing dynamic options const ticketSchema = defineSchema({ fields: [ { type: "select", name: "category", label: "Category", required: true, options: categoryOptions, placeholder: "Choose a category...", }, { type: "select", name: "subcategory", label: "Subcategory", required: true, options: async ({ data }) => { const cat = data.category as string; // Simulate network latency await new Promise((resolve) => setTimeout(resolve, 600)); return subcategories[cat] || []; }, dependencies: ["/category"], description: "Available subcategories based on your chosen category", disabled: { $data: "/category", not: true }, ui: { emptyMessage: "Select a category first", }, }, { type: "select", name: "priority", label: "Priority", required: true, options: priorityOptions, placeholder: "Set priority...", }, { type: "select", name: "assignees", label: "Assign To", hasMany: true, options: teamMembers, placeholder: "Select team members...", description: "Optionally assign to team members", ui: { isClearable: true, maxVisibleChips: 2, }, }, ], }); type TicketSchema = InferType; export default function SupportTicketForm() { return ( Submit Support Ticket Dynamic dropdowns with dependent options and multi-select

{ const data = value as TicketSchema; await new Promise((resolve) => setTimeout(resolve, 1000)); toast("Ticket Submitted!", { description: (

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

), }); }} >

Submit Ticket

); } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4b",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/select","card","sonner"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/shadcn/examples/support-ticket-form.tsx","content":"$4d","type":"registry:component","target":"components/buzzform/examples/support-ticket-form.tsx"}],"className":"h-[70svh] min-h-80"}]]}]