{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar6",
  "title": "Calendar",
  "description": "Calendar built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/calendar/6/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { DropdownNavProps, DropdownProps } from \"react-day-picker\";\n\nimport { Calendar } from \"@/components/ui/calendar\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue\n} from \"@/components/ui/select\";\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value)\n      }\n    } as React.ChangeEvent<HTMLSelectElement>;\n    _e(_event);\n  };\n\n  return (\n    <div>\n      <Calendar\n        captionLayout=\"dropdown\"\n        className=\"rounded-md border p-2\"\n        classNames={{\n          month_caption: \"mx-0\"\n        }}\n        components={{\n          Dropdown: (props: DropdownProps) => {\n            return (\n              <Select\n                onValueChange={(value) => {\n                  if (props.onChange) {\n                    handleCalendarChange(value, props.onChange);\n                  }\n                }}\n                value={String(props.value)}>\n                <SelectTrigger className=\"h-8 w-fit font-medium first:grow\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent className=\"max-h-[min(26rem,var(--radix-select-content-available-height))]\">\n                  {props.options?.map((option) => (\n                    <SelectItem\n                      disabled={option.disabled}\n                      key={option.value}\n                      value={String(option.value)}>\n                      {option.label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            );\n          },\n          DropdownNav: (props: DropdownNavProps) => {\n            return <div className=\"flex w-full items-center gap-2\">{props.children}</div>;\n          }\n        }}\n        defaultMonth={new Date()}\n        hideNavigation\n        mode=\"single\"\n        onSelect={setDate}\n        selected={date}\n        startMonth={new Date(1980, 6)}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/calendar6.tsx"
    }
  ],
  "type": "registry:component"
}