{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker-example4",
  "title": "Use cases",
  "description": "Use cases built with shadcn/ui.",
  "files": [
    {
      "path": "contents/examples/date-picker/use-cases/4/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  format,\n  subDays,\n  startOfMonth,\n  endOfMonth,\n  subMonths,\n  startOfDay,\n  endOfDay,\n  startOfYear,\n  startOfWeek\n} from \"date-fns\";\nimport { cn } from \"@/lib/utils\";\nimport type { DateRange } from \"react-day-picker\";\nimport { CalendarIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\n\nexport default function AdvancedDatePickerWithInput() {\n  const today = new Date();\n  const twentyEightDaysAgo = startOfDay(subDays(today, 27));\n\n  // Initialize with \"Last 28 days\" as default\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: twentyEightDaysAgo,\n    to: endOfDay(today)\n  });\n  const [open, setOpen] = React.useState(true);\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(new Date());\n\n  const handleQuickSelect = (from: Date, to: Date) => {\n    setDate({ from, to });\n    setCurrentMonth(from);\n  };\n\n  const handleToday = () => {\n    handleQuickSelect(startOfDay(today), endOfDay(today));\n  };\n\n  const handleYesterday = () => {\n    const yesterday = subDays(new Date(), 1);\n    handleQuickSelect(startOfDay(yesterday), endOfDay(yesterday));\n  };\n\n  const handleThisWeek = () => {\n    const today = new Date();\n    // Get the start of the current week (Sunday by default)\n    const startOfCurrentWeek = startOfWeek(today);\n    handleQuickSelect(startOfDay(startOfCurrentWeek), endOfDay(today));\n  };\n\n  const handleLast7Days = () => {\n    const today = new Date();\n    const sevenDaysAgo = subDays(today, 6); // 6 days ago + today = 7 days\n    handleQuickSelect(startOfDay(sevenDaysAgo), endOfDay(today));\n  };\n\n  const handleLast28Days = () => {\n    const today = new Date();\n    const twentyEightDaysAgo = subDays(today, 27); // 27 days ago + today = 28 days\n    handleQuickSelect(startOfDay(twentyEightDaysAgo), endOfDay(today));\n  };\n\n  const handleThisMonth = () => {\n    const today = new Date();\n    handleQuickSelect(startOfMonth(today), endOfDay(today));\n  };\n\n  const handleLastMonth = () => {\n    const today = new Date();\n    const lastMonth = subMonths(today, 1);\n    handleQuickSelect(startOfMonth(lastMonth), endOfMonth(lastMonth));\n  };\n\n  const handleThisYear = () => {\n    const today = new Date();\n    // Get January 1st of the current year\n    const startOfCurrentYear = startOfYear(today);\n    handleQuickSelect(startOfDay(startOfCurrentYear), endOfDay(today));\n  };\n\n  return (\n    <div className=\"grid gap-2\">\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id=\"date\"\n            variant={\"outline\"}\n            className={cn(\"justify-start text-left font-normal\", !date && \"text-muted-foreground\")}>\n            <CalendarIcon className=\"size-4 me-2\" />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"dd MMM yyyy\")} - {format(date.to, \"dd MMM yyyy\")}\n                </>\n              ) : (\n                format(date.from, \"dd MMM yyyy\")\n              )\n            ) : (\n              <span>Tarih aralığı seçin</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-2\">\n          <div className=\"flex\">\n            <div className=\"me-2\">\n              <ToggleGroup type=\"single\" defaultValue=\"last28Days\" className=\"w-28 flex-col\">\n                <ToggleGroupItem\n                  className=\"text-muted-foreground w-full\"\n                  value=\"today\"\n                  onClick={handleToday}\n                  asChild>\n                  <Button className=\"justify-start rounded-md\">Today</Button>\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"text-muted-foreground w-full\"\n                  value=\"yesterday\"\n                  onClick={handleYesterday}\n                  asChild>\n                  <Button className=\"justify-start rounded-md text-start\">Yesterday</Button>\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"text-muted-foreground w-full\"\n                  value=\"last7Days\"\n                  onClick={handleLast7Days}\n                  asChild>\n                  <Button className=\"justify-start rounded-md\">Last 7 days</Button>\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"text-muted-foreground w-full\"\n                  value=\"thisWeek\"\n                  onClick={handleThisWeek}\n                  asChild>\n                  <Button className=\"justify-start rounded-md\">This week</Button>\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"text-muted-foreground w-full\"\n                  value=\"last28Days\"\n                  onClick={handleLast28Days}\n                  asChild>\n                  <Button className=\"justify-start rounded-md\">Last 28 days</Button>\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"text-muted-foreground w-full\"\n                  value=\"thisMonth\"\n                  onClick={handleThisMonth}\n                  asChild>\n                  <Button className=\"justify-start rounded-md text-start\">This month</Button>\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"text-muted-foreground w-full\"\n                  value=\"lastMonth\"\n                  onClick={handleLastMonth}\n                  asChild>\n                  <Button className=\"justify-start rounded-md\">Last month</Button>\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"text-muted-foreground w-full\"\n                  value=\"thisYear\"\n                  onClick={handleThisYear}\n                  asChild>\n                  <Button className=\"justify-start rounded-md\">This year</Button>\n                </ToggleGroupItem>\n              </ToggleGroup>\n            </div>\n            <Calendar\n              className=\"border-s py-0! pe-0!\"\n              mode=\"range\"\n              month={currentMonth}\n              selected={date}\n              onSelect={(newDate) => {\n                setDate(newDate);\n                if (newDate?.from) {\n                  setCurrentMonth(newDate.from);\n                }\n                if (newDate?.from && newDate?.to) {\n                  setOpen(false);\n                }\n              }}\n              onMonthChange={setCurrentMonth}\n            />\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/date-picker-example4.tsx"
    }
  ],
  "type": "registry:block"
}