{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-range",
  "title": "Calendar range picker",
  "description": "A stateful two-month range calendar for booking a span of days, with clear and reserve actions.",
  "dependencies": [
    "react-day-picker"
  ],
  "registryDependencies": [
    "card",
    "calendar",
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/calendar-range.tsx",
      "content": "'use client'\nimport { useState } from 'react'\nimport type { DateRange } from 'react-day-picker'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'\nimport { Calendar } from '@/components/ui/calendar'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\n\n/** A stateful two-month range calendar for booking a span of days, with clear and reserve actions. */\nexport function CalendarRange() {\n  const [range, setRange] = useState<DateRange | undefined>({\n    from: new Date(2026, 6, 20),\n    to: new Date(2026, 6, 24),\n  })\n  return (\n    <Card className=\"w-fit\">\n      <CardHeader>\n        <div className=\"flex items-center justify-between gap-4\">\n          <CardTitle>Book a session</CardTitle>\n          <Badge variant=\"secondary\">5 days selected</Badge>\n        </div>\n        <CardDescription>Pick the days you want with the product team.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Calendar\n          mode=\"range\"\n          numberOfMonths={2}\n          selected={range}\n          onSelect={setRange}\n          defaultMonth={new Date(2026, 6)}\n          className=\"rounded-lg border border-border\"\n        />\n      </CardContent>\n      <CardFooter className=\"justify-between\">\n        <span className=\"text-sm text-muted-foreground\">July 20 – 24, 2026</span>\n        <div className=\"flex gap-2\">\n          <Button variant=\"ghost\" size=\"sm\">\n            Clear\n          </Button>\n          <Button size=\"sm\">Reserve</Button>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/calendar-range.tsx"
    }
  ],
  "meta": {
    "intent": [
      "scheduling",
      "form"
    ],
    "use_when": "You need to book a span of days with a two-month range picker and confirm/clear actions.",
    "not_for": "the user is picking a single day to view, not a multi-day span to reserve → calendar-page; the range is just one field within a larger purchase flow, not the whole card → checkout"
  },
  "docs": "A stateful two-month range calendar for booking a span of days, with clear and reserve actions. Do: Keep the Clear action available whenever a range is selected, separate from Reserve. Don't: Force a user to re-click through the whole range to correct a mis-click — that's what Clear is for. Do: Disable Reserve until both a start and end date are selected. Don't: Let a half-made range (just a start date) submit as if it were a valid booking. Use calendar-page when the user is picking a single day to view, not a multi-day span to reserve. Use checkout when the range is just one field within a larger purchase flow, not the whole card.",
  "categories": [
    "scheduling",
    "form"
  ],
  "type": "registry:block"
}