{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-md-02",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/badge.json",
    "https://wigggle-ui.vercel.app/r/label.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/calendar/md/calendar-02.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nimport {\n  Widget,\n  WidgetContent,\n  WidgetHeader,\n  WidgetTitle,\n} from \"@/registry/default/ui/widget\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function WidgetDemo() {\n  const [date, setDate] = React.useState(() => new Date());\n  const today = new Date();\n\n  const year = date.getFullYear();\n  const month = date.getMonth();\n\n  const monthName = new Intl.DateTimeFormat(\"en-US\", {\n    month: \"short\",\n  }).format(date);\n\n  const weekdayNames = [\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"];\n\n  const calendarDays = React.useMemo(() => {\n    const firstDay = new Date(year, month, 1).getDay();\n    const daysInMonth = new Date(year, month + 1, 0).getDate();\n    return [\n      ...Array(firstDay).fill(null),\n      ...Array.from({ length: daysInMonth }, (_, i) => i + 1),\n    ];\n  }, [year, month]);\n\n  const isToday = (d: number | null) =>\n    d &&\n    today.getFullYear() === year &&\n    today.getMonth() === month &&\n    today.getDate() === d;\n\n  const changeMonth = (step: number) =>\n    setDate((d) => new Date(d.getFullYear(), d.getMonth() + step, 1));\n\n  const events = [\n    { title: \"Scrum\", time: \"9 AM\" },\n    { title: \"Design Roundup\", time: \"11 AM\" },\n    { title: \"Launch\", time: \"7 PM\" },\n  ];\n\n  return (\n    <Widget design=\"mumbai\" size=\"md\">\n      <WidgetContent className=\"items-center justify-between gap-4\">\n        <div className=\"flex h-full w-full flex-col items-center justify-center gap-2\">\n          <div className=\"flex w-full items-center justify-between\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"size-4 p-0\"\n              onClick={() => changeMonth(-1)}\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n            </Button>\n            <WidgetTitle>\n              {monthName} {year}\n            </WidgetTitle>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"size-4 p-0\"\n              onClick={() => changeMonth(1)}\n            >\n              <ChevronRight className=\"h-4 w-4\" />\n            </Button>\n          </div>\n\n          <div className=\"grid size-full grid-cols-7 gap-1 text-center\">\n            {weekdayNames.map((d, i) => (\n              <div key={i} className=\"text-xs\">\n                {d}\n              </div>\n            ))}\n            {calendarDays.map((d, i) => (\n              <div key={i} className=\"text-muted-foreground text-xs\">\n                {isToday(d) ? (\n                  <Badge className=\"flex size-4 items-center justify-center p-2\">\n                    {d}\n                  </Badge>\n                ) : (\n                  (d ?? <>&nbsp;</>)\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"flex h-full w-full flex-col items-center justify-start\">\n          <WidgetHeader className=\"text-destructive text-base\">\n            {today.toLocaleDateString(\"en-US\", { weekday: \"long\" })}\n          </WidgetHeader>\n          <div className=\"w-full flex-col items-end justify-end\">\n            <Label className=\"mx-auto w-max text-3xl\">\n              {today.getDate().toString().padStart(2, \"0\")}\n            </Label>\n            <div className=\"mt-2 space-y-2\">\n              {events.map((event, i) => (\n                <Badge\n                  key={i}\n                  variant=\"secondary\"\n                  className=\"flex w-full items-center justify-between gap-2 px-2 py-1 text-xs\"\n                >\n                  {event.title}\n                  <span className=\"text-muted-foreground\">{event.time}</span>\n                </Badge>\n              ))}\n            </div>\n          </div>\n        </div>\n      </WidgetContent>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "calendar"
    ],
    "size": "md"
  }
}