{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-calendar-16","type":"registry:block","title":"Range calendar with presets","description":"Range calendar with presets","dependencies":["date-fns","react-day-picker"],"registryDependencies":["button","calendar","card"],"files":[{"path":"c-calendar-16.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\"\nimport type { DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nexport function Pattern() {\n  const today = new Date()\n  const yesterday = {\n    from: subDays(today, 1),\n    to: subDays(today, 1),\n  }\n  const last7Days = {\n    from: subDays(today, 6),\n    to: today,\n  }\n  const last30Days = {\n    from: subDays(today, 29),\n    to: today,\n  }\n  const monthToDate = {\n    from: startOfMonth(today),\n    to: today,\n  }\n  const lastMonth = {\n    from: startOfMonth(subMonths(today, 1)),\n    to: endOfMonth(subMonths(today, 1)),\n  }\n  const yearToDate = {\n    from: startOfYear(today),\n    to: today,\n  }\n  const lastYear = {\n    from: startOfYear(subYears(today, 1)),\n    to: endOfYear(subYears(today, 1)),\n  }\n  const [month, setMonth] = useState(today)\n  const [date, setDate] = useState<DateRange | undefined>(last7Days)\n\n  return (\n    <Card className=\"p-0\">\n      <CardContent className=\"p-0\">\n        <div className=\"flex max-sm:flex-col\">\n          <div className=\"relative py-4 max-sm:order-1 max-sm:border-t sm:w-32\">\n            <div className=\"h-full sm:border-e\">\n              <div className=\"flex flex-col px-2\">\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate({\n                      from: today,\n                      to: today,\n                    })\n                    setMonth(today)\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Today\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(yesterday)\n                    setMonth(yesterday.to)\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Yesterday\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(last7Days)\n                    setMonth(last7Days.to)\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last 7 days\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(last30Days)\n                    setMonth(last30Days.to)\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last 30 days\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(monthToDate)\n                    setMonth(monthToDate.to)\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Month to date\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastMonth)\n                    setMonth(lastMonth.to)\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last month\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(yearToDate)\n                    setMonth(yearToDate.to)\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Year to date\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastYear)\n                    setMonth(lastYear.to)\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last year\n                </Button>\n              </div>\n            </div>\n          </div>\n          <Calendar\n            disabled={[{ after: today }]}\n            mode=\"range\"\n            month={month}\n            onMonthChange={setMonth}\n            onSelect={(newDate) => {\n              if (newDate) {\n                setDate(newDate)\n              }\n            }}\n            selected={date}\n          />\n        </div>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-calendar-16.tsx"}],"meta":{"order":16}}