shadcn/app/public/registry/styles/default/mini-calendar.json

{
  "name": "mini-calendar",
  "description": "Compact calendar widget",
  "dependencies": [
    "react-day-picker",
    "date-fns"
  ],
  "files": [
    {
      "name": "mini-calendar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport interface MiniCalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  selected?: Date\n  onSelect?: (date: Date) => void\n  month?: Date\n  onMonthChange?: (date: Date) => void\n}\n\nconst MiniCalendar = React.forwardRef<HTMLDivElement, MiniCalendarProps>(\n  (\n    {\n      className,\n      selected,\n      onSelect,\n      month: monthProp,\n      onMonthChange,\n      ...props\n    },\n    ref\n  ) => {\n    const [month, setMonth] = React.useState(monthProp || new Date())\n\n    const daysInMonth = new Date(\n      month.getFullYear(),\n      month.getMonth() + 1,\n      0\n    ).getDate()\n    const firstDayOfMonth = new Date(\n      month.getFullYear(),\n      month.getMonth(),\n      1\n    ).getDay()\n\n    const days = Array.from({ length: daysInMonth }, (_, i) => i + 1)\n    const weekDays = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]\n\n    const previousMonth = () => {\n      const newMonth = new Date(month.getFullYear(), month.getMonth() - 1)\n      setMonth(newMonth)\n      onMonthChange?.(newMonth)\n    }\n\n    const nextMonth = () => {\n      const newMonth = new Date(month.getFullYear(), month.getMonth() + 1)\n      setMonth(newMonth)\n      onMonthChange?.(newMonth)\n    }\n\n    const handleDayClick = (day: number) => {\n      const date = new Date(month.getFullYear(), month.getMonth(), day)\n      onSelect?.(date)\n    }\n\n    const isSelected = (day: number) => {\n      if (!selected) return false\n      return (\n        selected.getDate() === day &&\n        selected.getMonth() === month.getMonth() &&\n        selected.getFullYear() === month.getFullYear()\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"w-64 rounded-lg border p-3\", className)}\n        {...props}\n      >\n        <div className=\"mb-2 flex items-center justify-between\">\n          <Button variant=\"ghost\" size=\"icon\" onClick={previousMonth}>\n            <ChevronLeft className=\"h-4 w-4\" />\n          </Button>\n          <div className=\"text-sm font-medium\">\n            {month.toLocaleString(\"default\", {\n              month: \"long\",\n              year: \"numeric\",\n            })}\n          </div>\n          <Button variant=\"ghost\" size=\"icon\" onClick={nextMonth}>\n            <ChevronRight className=\"h-4 w-4\" />\n          </Button>\n        </div>\n        <div className=\"grid grid-cols-7 gap-1 text-center text-xs\">\n          {weekDays.map((day) => (\n            <div key={day} className=\"p-1 font-medium text-muted-foreground\">\n              {day}\n            </div>\n          ))}\n          {Array.from({ length: firstDayOfMonth }).map((_, i) => (\n            <div key={`empty-${i}`} />\n          ))}\n          {days.map((day) => (\n            <button\n              key={day}\n              onClick={() => handleDayClick(day)}\n              className={cn(\n                \"aspect-square rounded p-1 text-sm transition-colors hover:bg-accent\",\n                isSelected(day) &&\n                  \"bg-primary text-primary-foreground hover:bg-primary/90\"\n              )}\n            >\n              {day}\n            </button>\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\nMiniCalendar.displayName = \"MiniCalendar\"\n\nexport { MiniCalendar }\n"
    }
  ],
  "type": "components:ui"
}