{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-date-picker-7",
  "description": "Multiple dates picker",
  "dependencies": [
    "date-fns",
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/badge",
    "@coss/button",
    "@coss/calendar",
    "@coss/popover"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-date-picker-7.tsx",
      "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [dates, setDates] = useState<Date[] | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon className=\"shrink-0\" />\n        <span className=\"flex flex-wrap gap-1\">\n          {dates && dates.length > 0 ? (\n            <>\n              {dates.slice(0, 3).map((date) => (\n                <Badge key={date.toISOString()} variant=\"secondary\">\n                  {format(date, \"MMM d\")}\n                </Badge>\n              ))}\n              {dates.length > 3 && (\n                <Badge variant=\"secondary\">+{dates.length - 3}</Badge>\n              )}\n            </>\n          ) : (\n            <span>Pick dates</span>\n          )}\n        </span>\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar mode=\"multiple\" onSelect={setDates} selected={dates} />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "date picker",
    "calendar",
    "popover",
    "button",
    "badge"
  ],
  "type": "registry:block"
}