{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-sm-04",
  "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/button.json",
    "https://wigggle-ui.vercel.app/r/separator.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/calendar/sm/calendar-04.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport {\n  Widget,\n  WidgetContent,\n  WidgetHeader,\n  WidgetTitle,\n} from \"@/registry/default/ui/widget\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Separator } from \"@/registry/default/ui/separator\";\n\nexport default function WidgetDemo() {\n  const [date, setDate] = React.useState(new Date());\n  const { getFullYear: y, getMonth: m } = date;\n  const [year, month] = [y.call(date), m.call(date)];\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 changeMonth = (step: number) =>\n    setDate((d) => new Date(d.getFullYear(), d.getMonth() + step, 1));\n\n  const isToday = (day: number | null) =>\n    day &&\n    new Date(year, month, day).toDateString() === new Date().toDateString();\n\n  const monthName = new Intl.DateTimeFormat(\"en-US\", { month: \"short\" }).format(\n    new Date(year, month),\n  );\n  const days = Array.from(\n    { length: 7 },\n    (_, i) =>\n      new Intl.DateTimeFormat(\"en-US\", { weekday: \"short\" }).format(\n        new Date(2025, 0, i + 4),\n      )[0],\n  );\n\n  return (\n    <Widget className=\"gap-2\" design=\"mumbai\">\n      <WidgetHeader>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"size-4 p-0 hover:cursor-pointer\"\n          onClick={() => changeMonth(-1)}\n        >\n          <ChevronLeftIcon className=\"size-4\" />\n        </Button>\n        <WidgetTitle>\n          {monthName} {year}\n        </WidgetTitle>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"size-4 p-0 hover:cursor-pointer\"\n          onClick={() => changeMonth(1)}\n        >\n          <ChevronRightIcon className=\"size-4\" />\n        </Button>\n      </WidgetHeader>\n      <Separator className=\"h-0.5 rounded-full\" />\n      <WidgetContent>\n        <div className=\"grid size-full grid-cols-7 gap-1 text-center\">\n          {days.map((day, i) => (\n            <div key={`weekday-${i}-${day}`} className=\"text-xs\">\n              {day}\n            </div>\n          ))}\n          {calendarDays.map((day, i) => (\n            <div key={i} className=\"text-muted-foreground text-xs\">\n              {day && isToday(day) ? (\n                <Badge className=\"flex size-4 items-center justify-center p-2\">\n                  {day}\n                </Badge>\n              ) : (\n                day\n              )}\n            </div>\n          ))}\n        </div>\n      </WidgetContent>\n    </Widget>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "calendar"
    ]
  }
}