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:T1ae7,"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, defineOptionResolvers, type InferType, } from "@buildnbuzz/form-react"; const API_BASE = "https://countriesnow.space/api/v0.1"; /** Response shape for the countries endpoint. */ interface CountryEntry { iso2: string; country: string; } /** Response shape for the states endpoint. */ interface StateEntry { name: string; state_code: string; } /** * 1. Define Option Resolvers using the registry helper. * * Uses the CountriesNow API (free, no API key, CORS-friendly): * - Countries: GET /api/v0.1/countries * - States: GET /api/v0.1/countries/states/q?country=X * - Cities: GET /api/v0.1/countries/state/cities/q?country=X&state=Y */ const locationResolvers = defineOptionResolvers({ listCountries: async () => { try { const response = await fetch(`${API_BASE}/countries`); if (!response.ok) { toast.error("Could not fetch countries. Please try again later."); return []; } const json = await response.json(); const countries = json.data as CountryEntry[]; return countries .map((c) => ({ label: c.country, value: c.country, })) .filter( (opt, i, arr) => arr.findIndex((o) => o.value === opt.value) === i, ) .sort((a: { label: string }, b: { label: string }) => a.label.localeCompare(b.label), ); } catch { toast.error("Could not fetch countries. Check your network connection."); return []; } }, listStates: async ({ data }) => { const country = data.country as string; if (!country) return []; const url = `${API_BASE}/countries/states/q?country=${encodeURIComponent(country)}`; try { const response = await fetch(url, { redirect: "follow" }); if (!response.ok) { toast.error(`Could not fetch states for ${country}. Please try again.`); return []; } const json = await response.json(); const states = json.data.states as StateEntry[]; return states .map((s) => ({ label: s.name, value: s.name, })) .filter( (opt, i, arr) => arr.findIndex((o) => o.value === opt.value) === i, ); } catch { toast.error("Could not fetch states. Check your network connection."); return []; } }, listCities: async ({ data }) => { const country = data.country as string; const state = data.state as string; if (!country || !state) return []; const url = `${API_BASE}/countries/state/cities/q?country=${encodeURIComponent(country)}&state=${encodeURIComponent(state)}`; try { const response = await fetch(url); if (!response.ok) { toast.error( `Could not fetch cities for ${state}, ${country}. Please try again.`, ); return []; } const json = await response.json(); const cities = json.data as string[]; return cities .map((city) => ({ label: city, value: city, })) .filter( (opt, i, arr) => arr.findIndex((o) => o.value === opt.value) === i, ); } catch { toast.error("Could not fetch cities. Check your network connection."); return []; } }, }); // 2. Define the Schema with various defaultValue patterns const locationSchema = defineSchema({ fields: [ { type: "select", name: "country", label: "Country", defaultValue: "United States", // 1. Static literal default placeholder: "Search and select a country...", required: true, options: { resolver: "listCountries" }, }, { type: "select", name: "state", label: ({ data }) => data.country ? ` State / Province in ${data.country}` : "State / Province", // 2. Inline function resolving from context defaultValue: (ctx) => (ctx.context?.defaultState ? "Florida" : ""), placeholder: ({ data }) => (data.country as string) || "Choose country first", required: true, options: { resolver: "listStates" }, dependencies: ["/country"], disabled: { $data: "/country", not: true }, ui: { emptyMessage: "No states found for this country", }, }, { type: "select", name: "city", label: { $when: { $data: "/state" }, $then: { $text: "City in ${/state}" }, $else: "City", }, placeholder: { $when: { $data: "/state" }, $then: { $text: "Choose city in ${/state}..." }, $else: "Choose state first", }, required: true, options: { resolver: "listCities" }, dependencies: ["/country", "/state"], disabled: { $data: "/state", not: true }, ui: { emptyMessage: "No cities found for this state", }, }, { type: "text", name: "address_label", label: "Mailing Label", // 4. Interpolated template string as default defaultValue: { $text: "Ship to ${/country}" }, description: "Auto-generated from your initial country selection.", }, ], }); type LocationData = InferType; /** * Example demonstrating 3-level cascading dropdowns (Country → State → City) * using the Registry-based Options API with the CountriesNow REST API. */ export default function CountryStateForm() { return ( Location Selector 3-level cascading dropdowns powered by CountriesNow API

{ const data = value as LocationData; await new Promise((resolve) => setTimeout(resolve, 800)); toast("Location Saved!", { description: (

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

), }); }} >

Save Location

); } 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/country-state-form.tsx","content":"$4d","type":"registry:component","target":"components/buzzform/examples/country-state-form.tsx"}],"className":"h-[70svh] min-h-80"}]]}]