{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar",
  "title": "Integrated Calendar",
  "description": "Calendar with three-view month/year navigation (days / months / years), replacing the native dropdowns with button-grid panels.",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react"
  ],
  "registryDependencies": [
    "calendar",
    "button"
  ],
  "files": [
    {
      "path": "registry/ui/calendar.tsx",
      "content": "\"use client\";\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { ClassValue } from \"clsx\";\nimport type { Locale as DateFnsLocale } from \"date-fns\";\nimport { addMonths, format } from \"date-fns\";\nimport type React from \"react\";\nimport {\n  createContext,\n  type HTMLAttributes,\n  type TableHTMLAttributes,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport type { CalendarMonth } from \"react-day-picker\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar as CalendarPrimitive } from \"@/components/ui/calendar\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CalendarView = \"days\" | \"months\" | \"years\";\n\nconst MONTH_INDICES = Array.from({ length: 12 }, (_, i) => i);\nconst DECADE_SIZE = 10;\n\nfunction toMonthIndex(date: Date) {\n  return date.getFullYear() * 12 + date.getMonth();\n}\n\ntype CalendarPrimitiveProps = React.ComponentProps<typeof CalendarPrimitive>;\n\nexport type CalendarProps = CalendarPrimitiveProps & {\n  defaultView?: CalendarView;\n  monthsClassName?: ClassValue;\n  yearsClassName?: ClassValue;\n  /** Reset all per-month views to \"days\". Bump this value to trigger a reset. */\n  resetViewsKey?: number;\n};\n\ntype CaptionCtxValue = {\n  locale: CalendarPrimitiveProps[\"locale\"];\n  views: Record<number, CalendarView>;\n  setViewForIndex: (index: number, view: CalendarView) => void;\n  startYear: number;\n  endYear: number;\n  startMonth?: Date;\n  endMonth?: Date;\n  currentMonth: Date;\n  handleMonthChange: (date: Date) => void;\n  monthsClassName?: ClassValue;\n  yearsClassName?: ClassValue;\n};\n\nconst CaptionCtx = createContext<CaptionCtxValue | null>(null);\nconst MonthIndexCtx = createContext<number>(0);\n\nfunction NavButton({\n  \"aria-label\": ariaLabel,\n  direction,\n  disabled,\n  onClick,\n}: {\n  \"aria-label\": string;\n  direction: \"left\" | \"right\";\n  disabled?: boolean;\n  onClick: () => void;\n}) {\n  return (\n    <Button\n      aria-label={ariaLabel}\n      disabled={disabled}\n      onClick={onClick}\n      size=\"icon-sm\"\n      variant=\"ghost\"\n    >\n      <HugeiconsIcon\n        className=\"size-4\"\n        icon={direction === \"left\" ? ArrowLeftIcon : ArrowRightIcon}\n        strokeWidth={2}\n      />\n    </Button>\n  );\n}\n\ntype MonthSlotProps = {\n  calendarMonth: CalendarMonth;\n  displayIndex: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nfunction MonthSlot({\n  calendarMonth: _calendarMonth,\n  displayIndex,\n  children,\n  ...rest\n}: MonthSlotProps) {\n  return (\n    <MonthIndexCtx.Provider value={displayIndex}>\n      <div data-slot=\"easy-month\" {...rest}>\n        {children}\n      </div>\n    </MonthIndexCtx.Provider>\n  );\n}\n\ntype MonthCaptionProps = {\n  calendarMonth: CalendarMonth;\n  displayIndex: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nfunction MonthCaption({ calendarMonth, displayIndex }: MonthCaptionProps) {\n  const ctx = useContext(CaptionCtx)!;\n  const view = ctx.views[displayIndex] ?? \"days\";\n  const setView = (v: CalendarView) => ctx.setViewForIndex(displayIndex, v);\n  const fmtLocale = { locale: ctx.locale as DateFnsLocale };\n\n  const yr = calendarMonth.date.getFullYear();\n  const mo = calendarMonth.date.getMonth();\n  const decadeStart = Math.floor(yr / DECADE_SIZE) * DECADE_SIZE;\n\n  const changeYear = (delta: number) => {\n    const next = yr + delta;\n    if (next < ctx.startYear || next > ctx.endYear) {\n      return;\n    }\n    let nextPanelMonth = new Date(next, mo, 1);\n    if (\n      ctx.startMonth &&\n      toMonthIndex(nextPanelMonth) < toMonthIndex(ctx.startMonth)\n    ) {\n      nextPanelMonth = ctx.startMonth;\n    }\n    if (\n      ctx.endMonth &&\n      toMonthIndex(nextPanelMonth) > toMonthIndex(ctx.endMonth)\n    ) {\n      nextPanelMonth = ctx.endMonth;\n    }\n    ctx.handleMonthChange(\n      new Date(\n        nextPanelMonth.getFullYear(),\n        nextPanelMonth.getMonth() - displayIndex,\n        1\n      )\n    );\n  };\n\n  const changeDecade = (delta: number) => {\n    ctx.handleMonthChange(\n      new Date(yr + delta * DECADE_SIZE, mo - displayIndex, 1)\n    );\n  };\n\n  let content: React.ReactNode;\n  if (view === \"months\") {\n    content = (\n      <>\n        <NavButton\n          aria-label=\"Previous year\"\n          direction=\"left\"\n          disabled={yr <= ctx.startYear}\n          onClick={() => changeYear(-1)}\n        />\n        <Button\n          className=\"font-medium text-sm\"\n          onClick={() => setView(\"years\")}\n          size=\"sm\"\n          variant=\"ghost\"\n        >\n          {format(new Date(yr, 0, 1), \"yyyy\", fmtLocale)}\n        </Button>\n        <NavButton\n          aria-label=\"Next year\"\n          direction=\"right\"\n          disabled={yr >= ctx.endYear}\n          onClick={() => changeYear(1)}\n        />\n      </>\n    );\n  } else if (view === \"years\") {\n    content = (\n      <>\n        <NavButton\n          aria-label=\"Previous decade\"\n          direction=\"left\"\n          disabled={decadeStart - DECADE_SIZE < ctx.startYear}\n          onClick={() => changeDecade(-1)}\n        />\n        <span className=\"select-none font-medium text-sm\">\n          {decadeStart} – {decadeStart + DECADE_SIZE - 1}\n        </span>\n        <NavButton\n          aria-label=\"Next decade\"\n          direction=\"right\"\n          disabled={decadeStart + DECADE_SIZE * 2 > ctx.endYear}\n          onClick={() => changeDecade(1)}\n        />\n      </>\n    );\n  } else {\n    content = (\n      <>\n        <Button\n          className=\"font-medium text-sm\"\n          onClick={() => setView(\"months\")}\n          size=\"sm\"\n          variant=\"ghost\"\n        >\n          {format(calendarMonth.date, \"MMMM\", fmtLocale)}\n        </Button>\n        <Button\n          className=\"font-medium text-sm\"\n          onClick={() => setView(\"years\")}\n          size=\"sm\"\n          variant=\"ghost\"\n        >\n          {format(calendarMonth.date, \"yyyy\", fmtLocale)}\n        </Button>\n      </>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        \"relative z-10 flex h-(--cell-size) w-full items-center [&_button]:pointer-events-auto\",\n        view === \"days\"\n          ? \"pointer-events-none justify-center gap-0.5 px-(--cell-size)\"\n          : \"justify-between\"\n      )}\n      data-slot=\"easy-month-caption\"\n      data-view={view}\n    >\n      {content}\n    </div>\n  );\n}\n\nfunction MonthGrid({\n  children,\n  className,\n  ...rest\n}: TableHTMLAttributes<HTMLTableElement>) {\n  const ctx = useContext(CaptionCtx)!;\n  const displayIndex = useContext(MonthIndexCtx);\n  const view = ctx.views[displayIndex] ?? \"days\";\n\n  if (view === \"days\") {\n    return (\n      <table className={className} {...rest}>\n        {children}\n      </table>\n    );\n  }\n\n  const monthDate = addMonths(ctx.currentMonth, displayIndex);\n  const yr = monthDate.getFullYear();\n  const mo = monthDate.getMonth();\n  const decadeStart = Math.floor(yr / DECADE_SIZE) * DECADE_SIZE;\n  const fmtLocale = { locale: ctx.locale as DateFnsLocale };\n\n  const setView = (v: CalendarView) => ctx.setViewForIndex(displayIndex, v);\n  const isMonthDisabled = (m: number) => {\n    const value = toMonthIndex(new Date(yr, m, 1));\n    const min = ctx.startMonth && toMonthIndex(ctx.startMonth);\n    const max = ctx.endMonth && toMonthIndex(ctx.endMonth);\n\n    if (min !== undefined && value < min) {\n      return true;\n    }\n    if (max !== undefined && value > max) {\n      return true;\n    }\n    return false;\n  };\n  const selectMonth = (m: number) => {\n    if (isMonthDisabled(m)) {\n      return;\n    }\n    ctx.handleMonthChange(new Date(yr, m - displayIndex, 1));\n    setView(\"days\");\n  };\n  const selectYear = (y: number) => {\n    ctx.handleMonthChange(new Date(y, mo - displayIndex, 1));\n    setView(\"months\");\n  };\n\n  if (view === \"months\") {\n    return (\n      <div\n        aria-label=\"Choose month\"\n        className={cn(\n          \"grid w-full flex-1 grid-cols-3 content-center gap-2 px-1\",\n          ctx.monthsClassName\n        )}\n        data-slot=\"easy-month-panel\"\n        role=\"listbox\"\n      >\n        {MONTH_INDICES.map((m) => {\n          const label = format(new Date(yr, m, 1), \"MMM\", fmtLocale);\n          const isCurrent = m === mo;\n          const isDisabled = isMonthDisabled(m);\n          return (\n            <Button\n              aria-selected={isCurrent}\n              className=\"h-8\"\n              disabled={isDisabled}\n              key={m}\n              onClick={() => selectMonth(m)}\n              role=\"option\"\n              size=\"sm\"\n              variant={isCurrent ? \"default\" : \"ghost\"}\n            >\n              {label}\n            </Button>\n          );\n        })}\n      </div>\n    );\n  }\n\n  const decadeYears = Array.from(\n    { length: DECADE_SIZE + 2 },\n    (_, i) => decadeStart - 1 + i\n  );\n\n  return (\n    <div\n      aria-label=\"Choose year\"\n      className={cn(\n        \"grid w-full flex-1 grid-cols-3 content-center gap-2 px-1\",\n        ctx.yearsClassName\n      )}\n      data-slot=\"easy-year-panel\"\n      role=\"listbox\"\n    >\n      {decadeYears.map((y) => {\n        const isOutside = y < decadeStart || y > decadeStart + DECADE_SIZE - 1;\n        const isCurrent = y === yr;\n        const isDisabled = y < ctx.startYear || y > ctx.endYear;\n        return (\n          <Button\n            aria-selected={isCurrent}\n            className={cn(\"h-8\", isOutside && \"text-muted-foreground\")}\n            disabled={isDisabled}\n            key={y}\n            onClick={() => selectYear(y)}\n            role=\"option\"\n            size=\"sm\"\n            variant={isCurrent ? \"default\" : \"ghost\"}\n          >\n            {y}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n\nconst calendarComponents = {\n  Month: MonthSlot,\n  MonthCaption,\n  MonthGrid,\n};\n\nexport const Calendar = (props: CalendarProps) => {\n  const {\n    className,\n    monthsClassName,\n    yearsClassName,\n    defaultView,\n    resetViewsKey,\n    locale,\n    startMonth,\n    endMonth,\n    month: controlledMonth,\n    defaultMonth,\n    onMonthChange,\n    style,\n    ...rest\n  } = props;\n\n  const [views, setViews] = useState<Record<number, CalendarView>>(\n    defaultView ? { 0: defaultView } : {}\n  );\n  const setViewForIndex = (index: number, view: CalendarView) => {\n    setViews((prev) => ({ ...prev, [index]: view }));\n  };\n\n  useEffect(() => {\n    if (resetViewsKey) {\n      setViews({});\n    }\n  }, [resetViewsKey]);\n\n  const [internalMonth, setInternalMonth] = useState(\n    controlledMonth ?? defaultMonth ?? new Date()\n  );\n  const currentMonth = controlledMonth ?? internalMonth;\n  const handleMonthChange = (next: Date) => {\n    if (controlledMonth === undefined) {\n      setInternalMonth(next);\n    }\n    onMonthChange?.(next);\n  };\n\n  const [nowYear] = useState(() => new Date().getFullYear());\n  const startYear = startMonth?.getFullYear() ?? nowYear - 100;\n  const endYear = endMonth?.getFullYear() ?? nowYear + 100;\n\n  const anyPanelOpen = Object.values(views).some((v) => v && v !== \"days\");\n\n  return (\n    <CaptionCtx.Provider\n      value={{\n        currentMonth,\n        endYear,\n        endMonth,\n        handleMonthChange,\n        locale,\n        monthsClassName,\n        setViewForIndex,\n        startMonth,\n        startYear,\n        views,\n        yearsClassName,\n      }}\n    >\n      <CalendarPrimitive\n        {...(rest as CalendarPrimitiveProps)}\n        captionLayout=\"label\"\n        className={cn(\n          \"[&_[data-slot=easy-month]]:min-h-[calc(var(--cell-size)*10+0.5rem)] [&_[data-slot=easy-month]]:w-[calc(var(--cell-size)*7)]\",\n          className\n        )}\n        components={calendarComponents}\n        endMonth={endMonth}\n        fixedWeeks\n        hideNavigation={anyPanelOpen}\n        locale={locale}\n        month={currentMonth}\n        onMonthChange={handleMonthChange}\n        startMonth={startMonth}\n        style={{ \"--cell-size\": \"32px\", ...style } as React.CSSProperties}\n      />\n    </CaptionCtx.Provider>\n  );\n};\n\nexport default Calendar;\n",
      "type": "registry:component",
      "target": "components/easy/calendar.tsx"
    }
  ],
  "type": "registry:component"
}