4c: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"] 4d: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"] 4e:T156c,"use client"; import { toast } from "sonner"; import { defineSchema, type InferType, useDataField } from "@buildnbuzz/form-react"; import { Form, FormContent, FormFields, FormSubmit, FormActions, } from "@/registry/shadcn/form"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; // 1. Define our custom field component. // It uses `useDataField` to easily hook into the headless form state. function ColorPickerField() { const { fieldApi, isDisabled, isReadOnly, isRequired, label, description, errors, isInvalid, descriptionId, errorId, handleChange, handleBlur, } = useDataField(); const value = (fieldApi.state.value as string) || "#000000"; return ( {label && ( {label} {isRequired ? * : null} )}

handleChange(e.target.value)} onBlur={handleBlur} disabled={isDisabled} readOnly={isReadOnly} aria-invalid={isInvalid} className="h-8 w-8 shrink-0 cursor-pointer border-0 p-0 rounded-md overflow-hidden shadow-none [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-moz-color-swatch]:border-none" /> handleChange(e.target.value)} onBlur={handleBlur} disabled={isDisabled} readOnly={isReadOnly} aria-invalid={isInvalid} placeholder="#000000" className="flex-1 font-mono uppercase" />

{description && !isInvalid && ( {description} )} {isInvalid && } ); } // 2. Define the schema, mixing standard fields, layout "ui" fields, // and our custom "color-picker" field. const customSchema = defineSchema({ fields: [ { type: "ui", content: (

Theme Builder

Configure your application's appearance by selecting custom colors below.

), }, { type: "text", name: "themeName", label: "Theme Name", placeholder: "e.g., Midnight Blue", required: true, }, { type: "ui", content:

Brand Colors

, }, { type: "color-picker", name: "primaryColor", label: "Primary Color", description: "Main color used for buttons and primary actions.", defaultValue: "#0f172a", required: true, }, { type: "color-picker", name: "secondaryColor", label: "Secondary Color", description: "Color used for secondary elements and subtle backgrounds.", defaultValue: "#f1f5f9", }, { type: "color-picker", name: "accentColor", label: "Accent Color", description: "Color used for active states and highlights.", defaultValue: "#3b82f6", }, ], }); export default function UiAndCustomFieldsExample() { const handleSubmit = async ({ value }: { value: unknown }) => { // value is inferred properly. Custom fields without explicitly defined type interfaces // fall back to `unknown`. Layout fields don't show up here at all. const data = value as InferType; toast("Saved Custom Form", { description: (

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

), }); }; return ( UI Layout & Custom Fields Mixing inline UI components with completely custom registered fields. {/* We pass our custom fields inside the `registries.fields` prop to register them */} ); } 4b:["$","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,["$","$L4c",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/ui","card","field","input","sonner"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/shadcn/examples/ui-and-custom-fields-form.tsx","content":"$4e","type":"registry:component","target":"components/buzzform/examples/ui-and-custom-fields-form.tsx"}],"className":"h-[70svh] min-h-80"}]]}]