{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "booking-form",
  "type": "registry:block",
  "title": "Booking Form",
  "description": "A booking form with location, check-in, and check-out fields.",
  "dependencies": [
    "date-fns"
  ],
  "files": [
    {
      "path": "registry/alpine/forms/booking-form.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/registry/alpine/ui/button\"\nimport { Input } from \"@/registry/alpine/ui/input\"\nimport { Label } from \"@/registry/alpine/ui/label\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/alpine/ui/popover\"\nimport { Calendar } from \"@/registry/alpine/ui/calendar\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { format } from \"date-fns\"\nimport { DateRange } from \"react-day-picker\"\n\nexport function ListingBookingForm({\n  heading,\n  subheading,\n  className,\n  ...props\n}: {\n  heading: string\n  subheading: string\n  className?: string\n} & React.ComponentProps<\"form\">) {\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<DateRange>()\n\n  const dateDisplay = React.useMemo(() => {\n    if (!date?.from) {\n      return \"Select date\"\n    }\n\n    if (date.from === date.to) {\n      return format(date.from, \"MMM d, yyyy\")\n    }\n\n    if (!date.to) {\n      return format(date.from, \"MMM d, yyyy\")\n    }\n\n    return `${format(date.from, \"MMM d, yyyy\")} - ${format(date.to, \"MMM d, yyyy\")}`\n  }, [date])\n\n  return (\n    <form\n      className={cn(\n        \"shadow-lg md:shadow-2xl bg-background ring ring-border p-6 rounded-lg flex flex-col gap-4 max-w-sm\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-col gap-1\">\n        <h2 className=\"text-3xl font-bold tracking-tighter\">{heading}</h2>\n        <p className=\"text-muted-foreground text-sm\">{subheading}</p>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"location\">Location</Label>\n        <Input id=\"location\" type=\"text\" placeholder=\"United States\" />\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date\">Date</Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date\"\n              variant=\"outline\"\n              className=\"w-full justify-start text-left font-normal\"\n            >\n              <CalendarIcon />\n              {dateDisplay}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"p-0 w-auto overflow-hidden\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"guests\">Guests</Label>\n        <Input id=\"guests\" type=\"number\" placeholder=\"2\" />\n      </div>\n      <div>\n        <Button className=\"w-full\">Search</Button>\n      </div>\n    </form>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}