) } `,__src__:"src/demo/address-input-state-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { AddressInput } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/address-input"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { AutocompleteOption } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/autocomplete"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { Switch } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/switch"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { TextInput } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/text-input"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"AddressInputDemo"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [address, setAddress] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"AutocompleteOption"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" | undefined>({ value: "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:", label: "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" })"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [disabled, setDisabled] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"true"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [readonly, setReadonly] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"false"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [error, setError] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [help, setHelp] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"w-full"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"AddressInput"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" apiKey"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"||"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Address"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{address}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setAddress}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" disabled"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{disabled}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" readonly"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{readonly}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" error"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{error}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" help"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{help}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"p-4 border rounded-[--radius] mt-4 space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"flex gap-2"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Switch"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{disabled} onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setDisabled} label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Disabled"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Switch"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{readonly} onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setReadonly} label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Readonly"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"flex gap-2"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{error} onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setError} label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Error"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{help} onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setHelp} label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Help/Description"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,l.jsxs)(e.h3,{id:"uncontrolled",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#uncontrolled",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Uncontrolled"]}),` `,(0,l.jsx)(s,{name:"address-input-uncontrolled-demo",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { AddressInput } from "@/components/ui/address-input" import { Button } from "@/components/ui/button" import * as React from "react" export function AddressInputUncontrolledDemo() { return (

{ e.preventDefault() alert(JSON.stringify(e.currentTarget.elements["address"].value, null, 2)) }} className="space-y-2 w-full" > ) } `,__src__:"src/demo/address-input-uncontrolled-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { AddressInput } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/address-input"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { Button } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/button"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"AddressInputUncontrolledDemo"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"form"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" action"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"#"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" method"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"get"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" onSubmit"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{e "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" e."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"preventDefault"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"()"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"alert"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"(JSON."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"stringify"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"(e.currentTarget.elements["}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"address"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"].value, "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"))"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" }}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"space-y-2 w-full"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"AddressInput"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Address"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" name"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"address"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" apiKey"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"||"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"submit"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">Submit"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"api-reference",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#api-reference",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"API Reference"]}),` `,(0,l.jsxs)(r,{name:"address-input",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:"No styles",__src__:"src/workshop/address-input/address-input.tsx",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"No styles"})})})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`type AddressInputProps = Omit & { /** * Custom autocompletion request */ autocompletionRequest?: GoogleMapsAutocompletionRequest /** * Additional options to pass to the Google Maps API Loader */ loaderOptions?: Partial /** * List of allowed countries * * e.g. \`["us", "ci"]\` */ allowedCountries?: string | string[] /** * Callback triggered when the value changes */ onValueChange?: (value: AutocompleteOption | undefined) => void /** * Message to display when there are no results */ emptyMessage?: string /** * Field placeholder */ placeholder?: string /** * Google Maps API key * * Optionally, you could remove this parameter and get the key from an environment variable * @see https://developers.google.com/maps/documentation/javascript/get-api-key */ apiKey: string /** * Default value when uncontrolled * * e.g: \`{ value: null, label: "Abidjan, C\xF4te d'Ivoire" }\` */ defaultValue?: AutocompleteOption }`,__src__:"src/workshop/address-input/address-input.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"AddressInputProps"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" = "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Omit"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"AutocompleteProps"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"options"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" | "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"onInputChange"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" | "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"onChange"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" | "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"defaultValue"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"> & {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * Custom autocompletion request"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" */"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" autocompletionRequest?: "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"GoogleMapsAutocompletionRequest"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * Additional options to pass to the Google Maps API Loader"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" */"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" loaderOptions?: "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Partial"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"LoaderOptions"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * List of allowed countries"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" *"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:' * e.g. `["us", "ci"]`'})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" */"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" allowedCountries?: string | string[]"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * Callback triggered when the value changes"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" */"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"?: (value: "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"AutocompleteOption"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" | undefined) "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" void"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * Message to display when there are no results"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" */"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" emptyMessage?: string"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * Field placeholder"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" */"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" placeholder?: string"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * Google Maps API key"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" *"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * Optionally, you could remove this parameter and get the key from an environment variable"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"@see"}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:" https://developers.google.com/maps/documentation/javascript/get-api-key"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" */"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" apiKey: string"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * Default value when uncontrolled"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" *"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:' * e.g: `{ value: null, label: "Abidjan, C\xF4te d\'Ivoire" }`'})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" */"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" defaultValue?: "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"AutocompleteOption"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"}"})})]})})})]})]})}function f(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(d,n)})):d(n)}var B=f;function p(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(_);})(); ;return Component;

Address Input

Installation

Usage

Allow custom addresses

State

Uncontrolled

API Reference

Types

Anatomy