{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-calendar-21",
  "description": "Range calendar with date presets",
  "dependencies": [
    "date-fns"
  ],
  "registryDependencies": [
    "@coss/calendar",
    "@coss/button"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-calendar-21.tsx",
      "content": "\"use client\";\n\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\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    <div className=\"flex max-sm:flex-col\">\n      <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n        <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\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      <Calendar\n        className=\"max-sm:pb-3 sm:ps-5\"\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  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "calendar",
    "button"
  ],
  "type": "registry:block"
}