{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-widget",
  "title": "Calendar Widgets",
  "description": "Calendar widgets for displaying dates, events, and scheduling information.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.eindev.ir/r/base-widget.json"
  ],
  "files": [
    {
      "path": "registry/widgets/calendar-widget.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronLeft, ChevronRight, Plus, Clock } from \"lucide-react\";\nimport { GlassWidgetBase } from \"./base-widget\";\n\n// Helper: returns the start-of-month Date for a given date\nfunction getMonthStart(date: Date) {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\ninterface CalendarWidgetProps {\n  date?: Date;\n  selectedDate?: Date;\n  onDateSelect?: (date: Date) => void;\n  className?: string;\n}\n\nfunction CalendarWidget({\n  date,\n  selectedDate,\n  onDateSelect,\n  className,\n}: CalendarWidgetProps) {\n  const [internalDate, setInternalDate] = React.useState<Date | null>(date ?? null);\n\n  // Always create the month state (avoid conditional hooks). Use a deterministic fallback date.\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(() =>\n    getMonthStart(date ?? new Date(0))\n  );\n\n  // On mount/client, set \"now\" if no date prop was provided.\n  React.useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    if (!date) setInternalDate(new Date());\n  }, [date]);\n\n  // When internalDate is ready, sync currentMonth.\n  React.useLayoutEffect(() => {\n    if (internalDate) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setCurrentMonth(getMonthStart(internalDate));\n    }\n  }, [internalDate]);\n\n  if (!internalDate) {\n    // Lightweight client-side loading state to avoid using `new Date()` during prerender\n    return (\n      <GlassWidgetBase className={cn(\"min-w-60 p-4\", className)} glowColor=\"purple\">\n        <div className=\"h-6 w-36 bg-white/8 rounded animate-pulse\" />\n        <div className=\"h-36 w-full mt-3 bg-white/8 rounded animate-pulse\" />\n      </GlassWidgetBase>\n    );\n  }\n\n  const selected = selectedDate ?? internalDate;\n\n  const monthName = currentMonth.toLocaleDateString(\"en-US\", { month: \"short\" });\n  const year = currentMonth.getFullYear();\n\n  const firstDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);\n  const lastDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);\n  const startPadding = firstDay.getDay();\n  const daysInMonth = lastDay.getDate();\n\n  const days = Array.from({ length: startPadding + daysInMonth }, (_, i) => {\n    if (i < startPadding) return null;\n    return i - startPadding + 1;\n  });\n\n  const prevMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));\n  };\n\n  const nextMonth = () => {\n    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));\n  };\n\n  const isSelected = (day: number) => {\n    return (\n      day === selected.getDate() &&\n      currentMonth.getMonth() === selected.getMonth() &&\n      currentMonth.getFullYear() === selected.getFullYear()\n    );\n  };\n\n  const isToday = (day: number) => {\n    const today = new Date();\n    return (\n      day === today.getDate() &&\n      currentMonth.getMonth() === today.getMonth() &&\n      currentMonth.getFullYear() === today.getFullYear()\n    );\n  };\n\n  return (\n    <GlassWidgetBase className={cn(\"min-w-60\", className)} size=\"sm\" glowColor=\"purple\">\n      {/* ...existing UI... */}\n      <div className=\"flex items-center justify-between mb-3\">\n        <button\n          onClick={prevMonth}\n          className=\"p-1.5 rounded-lg hover:bg-white/10 text-white/60 hover:text-white transition-colors\"\n          aria-label=\"Previous month\"\n        >\n          <ChevronLeft className=\"w-4 h-4\" />\n        </button>\n        <span className=\"text-white font-medium\">\n          {monthName} {year}\n        </span>\n        <button\n          onClick={nextMonth}\n          className=\"p-1.5 rounded-lg hover:bg-white/10 text-white/60 hover:text-white transition-colors\"\n          aria-label=\"Next month\"\n        >\n          <ChevronRight className=\"w-4 h-4\" />\n        </button>\n      </div>\n\n      <div className=\"grid grid-cols-7 gap-1 text-center\">\n        {[\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"].map((d, i) => (\n          <div key={i} className=\"text-xs text-white/40 py-1 font-medium\">\n            {d}\n          </div>\n        ))}\n        {days.map((day, i) => (\n          <button\n            key={i}\n            onClick={() => {\n              if (day && onDateSelect) {\n                onDateSelect(new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day));\n              }\n            }}\n            disabled={day === null}\n            className={cn(\n              \"text-xs py-1.5 rounded-full transition-all\",\n              day === null && \"invisible\",\n              day !== null && \"text-white/70 hover:bg-white/15 cursor-pointer\",\n              day !== null && isSelected(day) && \"bg-white/25 text-white font-medium shadow-sm\",\n              day !== null && isToday(day) && !isSelected(day) && \"ring-1 ring-cyan-400/50\"\n            )}\n          >\n            {day}\n          </button>\n        ))}\n      </div>\n    </GlassWidgetBase>\n  );\n}\n\ninterface CompactCalendarWidgetProps {\n  date?: Date;\n  className?: string;\n}\n\nfunction CompactCalendarWidget({ date, className }: CompactCalendarWidgetProps) {\n  const [internalDate, setInternalDate] = React.useState<Date | null>(date ?? null);\n  React.useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    if (!date) setInternalDate(new Date());\n  }, [date]);\n\n  if (!internalDate) {\n    // Render a lightweight client-side loading state to avoid using `new Date()` during prerender\n    return (\n      <GlassWidgetBase\n        className={cn(\"flex flex-col items-center justify-center min-w-30\", className)}\n        glowColor=\"purple\"\n      >\n        <div className=\"h-4 w-20 bg-white/8 rounded animate-pulse\" />\n        <div className=\"h-12 w-16 mt-2 bg-white/8 rounded animate-pulse\" />\n      </GlassWidgetBase>\n    );\n  }\n\n  const dayName = internalDate.toLocaleDateString(\"en-US\", { weekday: \"short\" });\n  const monthName = internalDate.toLocaleDateString(\"en-US\", { month: \"short\" });\n  const dayNumber = internalDate.getDate();\n\n  return (\n    <GlassWidgetBase\n      className={cn(\"flex flex-col items-center justify-center min-w-30\", className)}\n      glowColor=\"purple\"\n    >\n      <div className=\"flex items-center gap-1.5 text-base\">\n        <span className=\"text-white/60\">{dayName}</span>\n        <span className=\"text-cyan-400 font-medium\">{monthName}</span>\n      </div>\n      <div className=\"text-6xl font-light text-white tracking-tight\">{dayNumber}</div>\n    </GlassWidgetBase>\n  );\n}\n\ninterface Event {\n  id: string;\n  title: string;\n  time: string;\n  color?: string;\n}\n\ninterface EventsCalendarWidgetProps {\n  date?: Date;\n  events?: Event[];\n  className?: string;\n}\n\nfunction EventsCalendarWidget({\n  date,\n  events = [],\n  className,\n}: EventsCalendarWidgetProps) {\n  const [internalDate, setInternalDate] = React.useState<Date | null>(date ?? null);\n  React.useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    if (!date) setInternalDate(new Date());\n  }, [date]);\n\n  if (!internalDate) {\n    return (\n      <GlassWidgetBase className={cn(\"min-w-65\", className)} size=\"lg\" glowColor=\"purple\">\n        <div className=\"h-6 w-24 bg-white/8 rounded animate-pulse\" />\n        <div className=\"h-24 w-full mt-3 bg-white/8 rounded animate-pulse\" />\n      </GlassWidgetBase>\n    );\n  }\n\n  const dayName = internalDate.toLocaleDateString(\"en-US\", { weekday: \"long\" });\n  const monthName = internalDate.toLocaleDateString(\"en-US\", { month: \"long\" });\n  const dayNumber = internalDate.getDate();\n\n  return (\n    <GlassWidgetBase className={cn(\"min-w-65\", className)} size=\"lg\" glowColor=\"purple\">\n      <div className=\"flex items-start justify-between mb-4\">\n        <div>\n          <div className=\"text-white/60 text-sm\">{dayName}</div>\n          <div className=\"text-white text-2xl font-light\">\n            {monthName} {dayNumber}\n          </div>\n        </div>\n        <button className=\"p-2 rounded-lg bg-white/10 hover:bg-white/20 text-white/60 hover:text-white transition-colors\">\n          <Plus className=\"w-4 h-4\" />\n        </button>\n      </div>\n\n      {events.length > 0 ? (\n        <div className=\"space-y-2\">\n          {events.map((event) => (\n            <div\n              key={event.id}\n              className=\"flex items-center gap-3 p-2 rounded-lg bg-white/5 hover:bg-white/10 transition-colors border border-white/5\"\n            >\n              <div className={cn(\"w-1 h-8 rounded-full\", event.color || \"bg-cyan-500\")} />\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"text-white text-sm truncate\">{event.title}</div>\n                <div className=\"text-white/50 text-xs flex items-center gap-1\">\n                  <Clock className=\"w-3 h-3\" />\n                  {event.time}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      ) : (\n        <div className=\"text-center py-4 text-white/40 text-sm\">No events today</div>\n      )}\n    </GlassWidgetBase>\n  );\n}\n\nexport { CalendarWidget, CompactCalendarWidget, EventsCalendarWidget };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}