{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mc-calendar",
  "title": "MicroClub Calendar",
  "description": "A calendar component for MicroClub UI",
  "dependencies": [
    "react-day-picker",
    "date-fns",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ui/mc-calendar.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport { format } from 'date-fns';\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n  type OptionProps,\n  type SelectProps,\n} from 'react-day-picker';\n\nimport { cn } from '@/lib/utils';\nimport { McButton, buttonVariants } from '@/components/ui/mc-button';\nimport { McPopover, McPopoverContent, McPopoverTrigger } from '@/registry/ui/mc-popover';\n\nfunction McCalendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = 'label',\n  buttonVariant = 'secondary',\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof McButton>['variant'];\n}) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn('w-fit', defaultClassNames.root),\n        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),\n        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n        nav: cn(\n          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          'cn-calendar-dropdown-root relative flex items-center h-[34.304px] gap-[6px] px-[8.58px] pr-[4.29px] rounded-(--cell-radius) border border-(--Border,#E6E9FF) [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          'absolute inset-0 bg-popover opacity-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          'font-medium select-none',\n          captionLayout === 'label'\n            ? 'cn-calendar-caption text-sm'\n            : 'cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',\n          defaultClassNames.caption_label\n        ),\n        month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n        weekdays: cn('flex', defaultClassNames.weekdays),\n        weekday: cn(\n          'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-primary select-none',\n          defaultClassNames.weekday\n        ),\n        week: cn('mt-2 flex w-full', defaultClassNames.week),\n        week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),\n        week_number: cn(\n          'text-[0.8rem] text-muted-foreground select-none',\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',\n          props.showWeekNumber\n            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'\n            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',\n          defaultClassNames.range_start\n        ),\n        range_middle: cn('rounded-none', defaultClassNames.range_middle),\n        range_end: cn(\n          'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',\n          defaultClassNames.range_end\n        ),\n        today: cn('rounded-full bg-secondary text-secondary-foreground ', defaultClassNames.today),\n        outside: cn(\n          'text-accent-foreground aria-selected:text-muted-foreground',\n          defaultClassNames.outside\n        ),\n        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),\n        hidden: cn('invisible', defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />;\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === 'left') {\n            return <ChevronLeftIcon className={cn('cn-rtl-flip size-4', className)} {...props} />;\n          }\n\n          if (orientation === 'right') {\n            return <ChevronRightIcon className={cn('cn-rtl-flip size-4', className)} {...props} />;\n          }\n\n          return <ChevronDownIcon className={cn('size-4', className)} {...props} />;\n        },\n        DayButton: ({ ...props }) => <McCalendarDayButton locale={locale} {...props} />,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          );\n        },\n        Select: ({ className, ...props }: SelectProps) => {\n          return (\n            <select\n              className={cn(\n                'rounded-(--cell-radius) bg-popover text-popover-foreground outline-none',\n                className\n              )}\n              {...props}\n            />\n          );\n        },\n        Option: ({ className, ...props }: OptionProps) => {\n          return (\n            <option\n              className={cn(\n                'bg-popover text-popover-foreground hover:bg-secondary focus:bg-secondary',\n                className\n              )}\n              {...props}\n            />\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\nfunction McCalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <button\n      type=\"button\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[today=true]:text-secondary group-data-[today=true]:rounded-full group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 data-[range-end=true]:rounded-full data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-end=true]:border data-[range-end=true]:border-border data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-full data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-start=true]:border data-[range-start=true]:border-border data-[selected-single=true]:rounded-full data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:border data-[selected-single=true]:border-border dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McDatePicker({\n  label = 'Submission date',\n  placeholder = 'Pick a date',\n  selected,\n  onSelect,\n  className,\n  triggerClassName,\n  ...calendarProps\n}: Omit<React.ComponentProps<typeof McCalendar>, 'mode' | 'selected' | 'onSelect'> & {\n  label?: React.ReactNode;\n  placeholder?: React.ReactNode;\n  selected?: Date;\n  onSelect?: (date?: Date) => void;\n  triggerClassName?: string;\n}) {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)}>\n      {label && <span className=\"text-sm font-medium text-muted-foreground\">{label}</span>}\n\n      <McPopover open={open} onOpenChange={setOpen}>\n        <McPopoverTrigger\n          render={\n            <button\n              type=\"button\"\n              className={cn(\n                'flex h-9 w-[240px] items-center justify-between rounded-md border text-foreground border-border bg-input px-3 py-2 text-left transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/20',\n                triggerClassName\n              )}\n            >\n              <span\n                className={cn(\n                  'text-sm font-medium leading-none',\n                  selected ? 'text-foreground' : 'text-foreground'\n                )}\n              >\n                {selected ? format(selected, 'PPP') : placeholder}\n              </span>\n\n              <CalendarIcon className=\"size-4 shrink-0 text-foreground\" />\n            </button>\n          }\n        />\n\n        <McPopoverContent align=\"start\" sideOffset={12} className=\"!h-auto !w-auto !gap-0 !p-2\">\n          <McCalendar\n            {...calendarProps}\n            mode=\"single\"\n            selected={selected}\n            onSelect={(next) => {\n              onSelect?.(next);\n              if (next) setOpen(false);\n            }}\n          />\n        </McPopoverContent>\n      </McPopover>\n    </div>\n  );\n}\n\nexport { McCalendar, McCalendarDayButton, McDatePicker };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}