{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "retro-select", "title": "RetroSelect", "description": "A Mac OS 9 styled select dropdown with raised bevel trigger, up/down chevron arrows, and azul-highlighted menu items, built on UI SDK Select.", "dependencies": [ "@ui-sdk/core@0.1.0-beta.1", "@ui-sdk/react@0.1.0-beta.1" ], "registryDependencies": [ "https://nostalgia-ui.com/r/nostalgia-theme.json", "https://nostalgia-ui.com/r/retro-motion.json" ], "files": [ { "path": "registry/new-york/ui/retro-select.tsx", "content": "\"use client\"\n\n/*\n * RetroSelect: a Mac OS 9 pop-up menu on UI SDK.\n *\n * Crafted moment: the gliding azul highlight (modern flair). One highlight\n * layer slides between options, so pointer and keyboard moves read as one\n * motion, and the option's ink flips to white as it arrives, exactly like\n * the menus. Classic flair (and reduced motion) snaps row to row.\n */\n\nimport * as React from \"react\"\nimport {\n Select as SelectPrimitive,\n SelectContent as SelectContentPrimitive,\n SelectGroup as SelectGroupPrimitive,\n SelectGroupLabel as SelectGroupLabelPrimitive,\n SelectItem as SelectItemPrimitive,\n SelectItemIcon as SelectItemIconPrimitive,\n SelectItemIndicator as SelectItemIndicatorPrimitive,\n SelectSeparator as SelectSeparatorPrimitive,\n SelectTrigger as SelectTriggerPrimitive,\n SelectValue as SelectValuePrimitive,\n SelectValueIcon as SelectValueIconPrimitive,\n type SelectProps as SelectPrimitiveProps,\n} from \"@ui-sdk/react/select\"\n\nimport { cn } from \"@/lib/utils\"\nimport { popupClass, useGlide } from \"@/registry/new-york/lib/retro-motion\"\n\n/* string class names and plain children, as shadcn-style parts take */\ntype WithClassName

= Omit & {\n className?: string\n children?: React.ReactNode\n}\n\n/* ------------------------------------------------------------------ */\n/* Glide CSS */\n/* ------------------------------------------------------------------ */\n\n/* Unlayered, so it beats the option utilities without !important.\n * React hoists it and dedupes it by href. */\nconst SELECT_CSS = `\n.os9-select:not([data-glide-off]) [role=\"option\"][data-highlighted] {\n background-color: transparent;\n}\n.os9-select[data-glide-off] > [data-glide-layer] {\n opacity: 0 !important;\n transition: none !important;\n}\n.os9-select [role=\"option\"] { transition: color 0s linear 60ms; }\n.os9-select[data-glide-off] [role=\"option\"] { transition: none; }\n`\n\n/* ------------------------------------------------------------------ */\n/* Root */\n/* ------------------------------------------------------------------ */\n\ntype RetroSelectProps = Omit<\n SelectPrimitiveProps,\n \"value\" | \"defaultValue\" | \"onValueChange\" | \"multiple\"\n> & {\n /** The selected value. `\"\"` selects nothing. */\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n}\n\n/* Keeps the string API: \"\" (or nothing) means no selection. */\nfunction RetroSelect({ value, defaultValue, onValueChange, ...props }: RetroSelectProps) {\n return (\n \n {...(value !== undefined\n ? { value: value === \"\" ? null : value }\n : { defaultValue: defaultValue === \"\" || defaultValue === undefined ? null : defaultValue })}\n onValueChange={(next) => onValueChange?.(next ?? \"\")}\n {...props}\n />\n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Trigger & value */\n/* ------------------------------------------------------------------ */\n\nfunction RetroSelectTrigger({\n className,\n children,\n ...props\n}: WithClassName>) {\n return (\n \n {children}\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/* The selected option's label, led by its RetroSelectItemIcon when it has one. */\nfunction RetroSelectValue({\n className,\n ...props\n}: WithClassName>) {\n return (\n <>\n \n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Content */\n/* ------------------------------------------------------------------ */\n\ntype RetroSelectContentProps = WithClassName> & {\n /** `\"item-aligned\"` places the selected option over the trigger, like a classic pop-up menu. */\n position?: \"popper\" | \"item-aligned\"\n}\n\n/* OS 9 menus appear at once; modern flair adds a 100ms fade and a 2px drop.\n * Box properties carry `!` so UI SDK's popup reset can't strip them in apps\n * that haven't declared `@layer ui-sdk;` first. */\nfunction RetroSelectContent({\n className,\n children,\n position = \"popper\",\n side = \"bottom\",\n align = \"start\",\n sideOffset = 1,\n ref,\n ...props\n}: RetroSelectContentProps) {\n const glideRef = useGlide(ref)\n return (\n \n \n \n {children}\n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Items */\n/* ------------------------------------------------------------------ */\n\nfunction RetroSelectItem({\n className,\n children,\n ...props\n}: WithClassName>>) {\n return (\n \n \n \n \n \n \n \n \n {children}\n \n )\n}\n\n/* An icon or swatch before an option's label; the trigger shows it too. */\nfunction RetroSelectItemIcon({\n className,\n ...props\n}: WithClassName>) {\n return (\n \n )\n}\n\nfunction RetroSelectGroup({\n className,\n ...props\n}: WithClassName>) {\n return \n}\n\nfunction RetroSelectLabel({\n className,\n ...props\n}: WithClassName>) {\n return (\n \n )\n}\n\nfunction RetroSelectSeparator({\n className,\n ...props\n}: WithClassName>) {\n return (\n \n )\n}\n\nexport {\n RetroSelect,\n RetroSelectGroup,\n RetroSelectValue,\n RetroSelectTrigger,\n RetroSelectContent,\n RetroSelectItem,\n RetroSelectItemIcon,\n RetroSelectSeparator,\n RetroSelectLabel,\n}\nexport type { RetroSelectProps, RetroSelectContentProps }\n", "type": "registry:ui" } ], "type": "registry:ui" }