{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "address-form",
  "type": "registry:block",
  "title": "Address form",
  "description": "A postal address fieldset with the autocomplete tokens a browser fills it from, and a searchable country select.",
  "author": "Box Kite <https://www.box-kite.dev>",
  "categories": [
    "checkout",
    "form"
  ],
  "dependencies": [
    "@box-kite/react"
  ],
  "registryDependencies": [
    "https://www.box-kite.dev/r/store-design.json"
  ],
  "files": [
    {
      "path": "registry/designs/store/address-form.tsx",
      "content": "'use client';\nimport Box from '@box-kite/react';\nimport Dropdown from '@box-kite/react/components/dropdown';\nimport Flex from '@box-kite/react/components/flex';\nimport Grid from '@box-kite/react/components/grid';\nimport { Span } from '@box-kite/react/components/semantics';\nimport Textbox from '@box-kite/react/components/textbox';\nimport FormField from './form-field';\n\nconst COUNTRIES = ['United States', 'Canada', 'United Kingdom', 'Ireland', 'Germany', 'France', 'Netherlands', 'Moldova', 'Australia'];\n\nexport interface AddressFormProps {\n  /** The fieldset's caption, and the prefix every field submits under: `shipping.city`, `billing.city`. */\n  legend?: string;\n  prefix?: string;\n}\n\n/**\n * A postal address as a `<fieldset>`: name, two street lines, city, postcode, country and a phone. Every\n * field carries the `autocomplete` token a browser fills it from, which on a phone is most of the typing.\n * Drop two into one form, with different prefixes, for a shipping and a billing address.\n */\nexport default function AddressForm({ legend = 'Shipping address', prefix = 'shipping' }: AddressFormProps) {\n  const section = prefix === 'billing' ? 'billing' : 'shipping';\n  const field = (name: string) => `${prefix}.${name}`;\n\n  return (\n    <Box tag=\"fieldset\" b={0} p={0} m={0} minWidth={0}>\n      <Box tag=\"legend\" fontSize={16} fontWeight={500} mb={5}>\n        {legend}\n      </Box>\n      <Flex d=\"column\" gap={4}>\n        <Grid gridTemplateColumns={1} sm={{ gridTemplateColumns: 2 }} gap={4}>\n          <FormField label=\"First name\">\n            {(control) => <Textbox name={field('firstName')} props={{ ...control, autoComplete: `${section} given-name` }} required />}\n          </FormField>\n          <FormField label=\"Last name\">\n            {(control) => <Textbox name={field('lastName')} props={{ ...control, autoComplete: `${section} family-name` }} required />}\n          </FormField>\n        </Grid>\n        <FormField label=\"Street address\">\n          {(control) => <Textbox name={field('line1')} props={{ ...control, autoComplete: `${section} address-line1` }} required />}\n        </FormField>\n        <FormField label=\"Apartment, suite, floor\" hint=\"Optional.\">\n          {(control) => <Textbox name={field('line2')} props={{ ...control, autoComplete: `${section} address-line2` }} />}\n        </FormField>\n        <Grid gridTemplateColumns={1} sm={{ gridTemplateColumns: 2 }} gap={4}>\n          <FormField label=\"City\">\n            {(control) => <Textbox name={field('city')} props={{ ...control, autoComplete: `${section} address-level2` }} required />}\n          </FormField>\n          <FormField label=\"Postcode\">\n            {(control) => <Textbox name={field('postcode')} props={{ ...control, autoComplete: `${section} postal-code` }} required />}\n          </FormField>\n        </Grid>\n        <Dropdown<string>\n          name={field('country')}\n          label={\n            <Span fontSize={14} fontWeight={500}>\n              Country\n            </Span>\n          }\n          labelProps={{ width: 'fit', gap: 1.5 }}\n          defaultValue={COUNTRIES[0]}\n          isSearchable\n          searchPlaceholder=\"Search countries…\"\n        >\n          {COUNTRIES.map((country) => (\n            <Dropdown.Item key={country} value={country}>\n              {country}\n            </Dropdown.Item>\n          ))}\n        </Dropdown>\n        <FormField label=\"Phone\" hint=\"Only for the courier, if they cannot find you.\">\n          {(control) => <Textbox name={field('phone')} type=\"tel\" props={{ ...control, autoComplete: `${section} tel` }} />}\n        </FormField>\n      </Flex>\n    </Box>\n  );\n}\n",
      "type": "registry:block",
      "target": "@components/box-kite/store/address-form.tsx"
    }
  ],
  "docs": "Render <AddressForm /> inside a form; a second one with prefix=\"billing\" is the billing address. Wrap it in <StoreSurface> from store-design.tsx, or render it inside one of the store pages."
}