{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "retro-date-picker", "title": "RetroDatePicker", "description": "A Mac OS 9 styled date picker with inline text input (MM/DD/YYYY), calendar icon trigger button, and popover calendar dropdown, composed from RetroPopover and RetroCalendar.", "dependencies": [ "date-fns", "react-day-picker" ], "registryDependencies": [ "https://nostalgia-ui.com/r/nostalgia-theme.json", "https://nostalgia-ui.com/r/retro-popover.json", "https://nostalgia-ui.com/r/retro-calendar.json" ], "files": [ { "path": "registry/new-york/ui/retro-date-picker.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format, parse, isValid } from \"date-fns\"\n\nimport { cn } from \"@/lib/utils\"\nimport { RetroCalendar } from \"@/registry/new-york/ui/retro-calendar\"\nimport {\n RetroPopover,\n RetroPopoverTrigger,\n RetroPopoverContent,\n} from \"@/registry/new-york/ui/retro-popover\"\n\n// Spread rather than a literal `asChild` attribute: the shadcn CLI rewrites\n// literal `asChild` to Base UI's `render` prop in base-* projects, which\n// breaks these Radix-based components.\nconst AS_CHILD = { asChild: true } as const\n\ninterface RetroDatePickerProps {\n /** The selected date (controlled) */\n value?: Date\n /** Callback when the date changes */\n onChange?: (date: Date | undefined) => void\n /** Placeholder text when no date is selected */\n placeholder?: string\n /** Date display format (date-fns format string) */\n displayFormat?: string\n /** Whether the date picker is disabled */\n disabled?: boolean\n /** Additional class names for the root container */\n className?: string\n}\n\nconst CalendarIcon = React.forwardRef<\n SVGSVGElement,\n React.SVGProps\n>(function CalendarIcon(props, ref) {\n return (\n \n {/* Outer frame */}\n \n {/* Top bar (header) */}\n \n {/* Calendar pins */}\n \n \n {/* Grid dots (day cells) */}\n \n \n \n \n \n \n \n )\n})\nCalendarIcon.displayName = \"CalendarIcon\"\n\nconst DATE_FORMAT = \"MM/dd/yyyy\"\n\nconst RetroDatePicker = React.forwardRef(\n function RetroDatePicker(\n {\n value,\n onChange,\n placeholder = \"MM/DD/YYYY\",\n displayFormat = DATE_FORMAT,\n disabled = false,\n className,\n },\n ref\n ) {\n const [open, setOpen] = React.useState(false)\n const [internalDate, setInternalDate] = React.useState(\n undefined\n )\n const [inputValue, setInputValue] = React.useState(\"\")\n\n const isControlled = value !== undefined\n const selectedDate = isControlled ? value : internalDate\n\n // Depend on the timestamp (not Date identity) so a parent passing a new\n // Date instance with the same value on every render doesn't clobber typing.\n const selectedTime = selectedDate?.getTime()\n\n // Sync input text with the selected date\n React.useEffect(() => {\n setInputValue(\n selectedTime !== undefined ? format(new Date(selectedTime), displayFormat) : \"\"\n )\n }, [selectedTime, displayFormat])\n\n function commitDate(date: Date | undefined) {\n if (!isControlled) {\n setInternalDate(date)\n }\n onChange?.(date)\n }\n\n function handleCalendarSelect(date: Date | undefined) {\n commitDate(date)\n setOpen(false)\n }\n\n function handleInputChange(e: React.ChangeEvent) {\n setInputValue(e.target.value)\n }\n\n function parseInput(text: string): Date | undefined {\n // Parse using the display format first, then fall back to MM/dd/yyyy\n for (const fmt of [displayFormat, DATE_FORMAT]) {\n const parsed = parse(text, fmt, new Date())\n if (isValid(parsed) && parsed.getFullYear() > 1900 && parsed.getFullYear() < 2100) {\n return parsed\n }\n }\n return undefined\n }\n\n function handleInputCommit() {\n if (inputValue.trim() === \"\") {\n if (selectedTime !== undefined) commitDate(undefined)\n return\n }\n const parsed = parseInput(inputValue.trim())\n if (parsed) {\n if (parsed.getTime() !== selectedTime) {\n commitDate(parsed)\n } else {\n // Unchanged: normalise the text back to the display format\n setInputValue(format(parsed, displayFormat))\n }\n } else {\n // Reset to last valid value\n setInputValue(selectedDate ? format(selectedDate, displayFormat) : \"\")\n }\n }\n\n function handleInputKeyDown(e: React.KeyboardEvent) {\n if (e.key === \"Enter\") {\n handleInputCommit()\n }\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n }\n)\nRetroDatePicker.displayName = \"RetroDatePicker\"\n\nexport { RetroDatePicker, CalendarIcon }\nexport type { RetroDatePickerProps }\n", "type": "registry:ui" } ], "type": "registry:ui" }