{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-calendar-19",
  "description": "Calendar with time slots (appointment picker)",
  "dependencies": [
    "date-fns"
  ],
  "registryDependencies": [
    "@coss/calendar",
    "@coss/scroll-area",
    "@coss/toggle",
    "@coss/toggle-group"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-calendar-19.tsx",
      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\nimport { ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date>(today);\n  const [time, setTime] = useState<string | null>(null);\n\n  const timeSlots = [\n    { available: false, time: \"09:00\" },\n    { available: false, time: \"09:30\" },\n    { available: true, time: \"10:00\" },\n    { available: true, time: \"10:30\" },\n    { available: true, time: \"11:00\" },\n    { available: true, time: \"11:30\" },\n    { available: false, time: \"12:00\" },\n    { available: true, time: \"12:30\" },\n    { available: true, time: \"13:00\" },\n    { available: true, time: \"13:30\" },\n    { available: true, time: \"14:00\" },\n    { available: false, time: \"14:30\" },\n    { available: false, time: \"15:00\" },\n    { available: true, time: \"15:30\" },\n    { available: true, time: \"16:00\" },\n    { available: true, time: \"16:30\" },\n    { available: true, time: \"17:00\" },\n    { available: true, time: \"17:30\" },\n  ];\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <Calendar\n        className=\"max-sm:pb-3 sm:pe-5\"\n        disabled={[{ before: today }]}\n        mode=\"single\"\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n            setTime(null);\n          }\n        }}\n        selected={date}\n      />\n      <div className=\"relative w-full max-sm:h-48 sm:w-40\">\n        <div className=\"absolute inset-0 max-sm:border-t\">\n          <ScrollArea className=\"h-full sm:border-s\" scrollbarGutter scrollFade>\n            <div className=\"flex flex-col gap-3 py-3 sm:pt-0 sm:pb-2\">\n              <div className=\"flex shrink-0 items-center font-medium text-sm sm:h-8 sm:px-5\">\n                {format(date, \"EEEE, d\")}\n              </div>\n              <ToggleGroup\n                className=\"grid w-full gap-1.5 max-sm:grid-cols-2 sm:px-5\"\n                onValueChange={(values) => setTime(values[0] || null)}\n                value={time ? [time] : []}\n              >\n                {timeSlots.map(({ time: timeSlot, available }) => (\n                  <Toggle\n                    disabled={!available}\n                    key={timeSlot}\n                    size=\"sm\"\n                    value={timeSlot}\n                    variant=\"outline\"\n                  >\n                    {timeSlot}\n                  </Toggle>\n                ))}\n              </ToggleGroup>\n            </div>\n          </ScrollArea>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "calendar",
    "toggle",
    "toggle group",
    "scroll area"
  ],
  "type": "registry:block"
}