{"name":"address-form","title":"Address Form","type":"registry:ui","files":[{"path":"src/components/ui/address-form.tsx","type":"registry:ui","target":"@ui/address-form.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"./lib/utils\";\n\nexport interface AddressFormValue {\n  street: string;\n  city: string;\n  state?: string;\n  postal: string;\n  country: string;\n}\n\nexport interface AddressFormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, \"onChange\"> {\n  value?: Partial<AddressFormValue>;\n  onValueChange?: (value: Partial<AddressFormValue>) => void;\n}\n\n/** Address form layout: street, city, state, postal code grid. */\nexport function AddressForm({ value = {}, onValueChange, className, ...props }: AddressFormProps) {\n  const set = (patch: Partial<AddressFormValue>) => onValueChange?.({ ...value, ...patch });\n\n  const inputCls = \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors motion-reduce:transition-none\";\n  const labelCls = \"font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground\";\n\n  return (\n    <form className={cn(\"w-full max-w-md space-y-3\", className)} onSubmit={(e) => e.preventDefault()} {...props}>\n      <style>{`@keyframes afIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }`}</style>\n      <div className=\"space-y-1 animate-[afIn_0.25s_ease-out_both] motion-reduce:animate-none\">\n        <label htmlFor=\"af-street\" className={labelCls}>Sokak</label>\n        <input id=\"af-street\" value={value.street ?? \"\"} onChange={(e) => set({ street: e.target.value })} placeholder=\"Cadde, no\" className={inputCls} />\n      </div>\n      <div className=\"grid grid-cols-2 gap-3 animate-[afIn_0.25s_ease-out_0.06s_both] motion-reduce:animate-none\">\n        <div className=\"space-y-1\">\n          <label htmlFor=\"af-city\" className={labelCls}>City</label>\n          <input id=\"af-city\" value={value.city ?? \"\"} onChange={(e) => set({ city: e.target.value })} placeholder=\"New York\" className={inputCls} />\n        </div>\n        <div className=\"space-y-1\">\n          <label htmlFor=\"af-state\" className={labelCls}>State / Region</label>\n          <input id=\"af-state\" value={value.state ?? \"\"} onChange={(e) => set({ state: e.target.value })} placeholder=\"NY\" className={inputCls} />\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-3 animate-[afIn_0.25s_ease-out_0.12s_both] motion-reduce:animate-none\">\n        <div className=\"space-y-1\">\n          <label htmlFor=\"af-postal\" className={labelCls}>Posta kodu</label>\n          <input id=\"af-postal\" value={value.postal ?? \"\"} onChange={(e) => set({ postal: e.target.value })} placeholder=\"34000\" inputMode=\"numeric\" className={cn(inputCls, \"font-mono\")} />\n        </div>\n        <div className=\"space-y-1\">\n          <label htmlFor=\"af-country\" className={labelCls}>Country</label>\n          <input id=\"af-country\" value={value.country ?? \"United States\"} onChange={(e) => set({ country: e.target.value })} className={inputCls} />\n        </div>\n      </div>\n    </form>\n  );\n}\n"}],"registryDependencies":["https://ui.bigbullapp.com/r/utils.json"]}