{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-native-select",
  "title": "RetroNativeSelect",
  "description": "A native <select> styled as a Mac OS 9 pop-up menu button with raised bevel and double-arrow box. Default and sm sizes, plus RetroNativeSelectOption and RetroNativeSelectOptGroup.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-native-select.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroNativeSelect                                                  */\n/*                                                                     */\n/*  A real <select> dressed as an OS9 pop-up menu button: raised bevel */\n/*  body with the double-arrow box on the right. The arrow box is a    */\n/*  decorative sibling so the native control keeps full a11y/keyboard. */\n/* ------------------------------------------------------------------ */\n\nconst retroNativeSelectVariants = cva(\n  [\n    \"peer w-full min-w-0 appearance-none\",\n    \"border border-os9-black bg-os9-gray-300 text-os9-black\",\n    \"shadow-[inset_1px_1px_0_var(--os9-white),inset_-1px_-1px_0_var(--os9-gray-700)]\",\n    \"cursor-pointer select-none outline-none transition-none\",\n    \"focus-visible:os9-focus-ring\",\n    \"active:bg-os9-gray-800 active:text-os9-white\",\n    \"active:shadow-[inset_1px_1px_0_var(--os9-gray-700),inset_-1px_-1px_0_var(--os9-white)]\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-os9-gray-600 disabled:border-os9-gray-600\",\n    \"aria-invalid:border-[#cc0000]\",\n  ],\n  {\n    variants: {\n      size: {\n        default: [\n          \"h-[20px] pl-2 pr-[26px]\",\n          \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n        ],\n        sm: [\n          \"h-[16px] pl-[6px] pr-[20px]\",\n          \"font-[family-name:var(--os9-font-sans)] text-[10px] leading-none\",\n        ],\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\ntype RetroNativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> &\n  VariantProps<typeof retroNativeSelectVariants>\n\nconst RetroNativeSelect = React.forwardRef<\n  HTMLSelectElement,\n  RetroNativeSelectProps\n>(function RetroNativeSelect({ className, size = \"default\", ...props }, ref) {\n  const small = size === \"sm\"\n  return (\n    <div\n      data-slot=\"native-select-wrapper\"\n      className={cn(\"group/native-select relative w-fit\", className)}\n    >\n      <select\n        ref={ref}\n        data-slot=\"native-select\"\n        data-size={size}\n        className={retroNativeSelectVariants({ size })}\n        {...props}\n      />\n      {/* Arrow box: left divider + stacked up/down triangles */}\n      <span\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center\",\n          \"border-l border-os9-black text-os9-black\",\n          \"peer-active:text-os9-white peer-disabled:border-os9-gray-600 peer-disabled:text-os9-gray-600\",\n          small ? \"w-[16px]\" : \"w-[20px]\"\n        )}\n      >\n        <span className=\"flex flex-col items-center gap-[1px]\">\n          <svg\n            width={small ? 6 : 8}\n            height={small ? 3 : 4}\n            viewBox=\"0 0 8 4\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M4 0L8 4H0L4 0Z\" fill=\"currentColor\" />\n          </svg>\n          <svg\n            width={small ? 6 : 8}\n            height={small ? 3 : 4}\n            viewBox=\"0 0 8 4\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M4 4L0 0H8L4 4Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n      </span>\n    </div>\n  )\n})\nRetroNativeSelect.displayName = \"RetroNativeSelect\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroNativeSelectOption / OptGroup                                 */\n/* ------------------------------------------------------------------ */\n\nconst RetroNativeSelectOption = React.forwardRef<\n  HTMLOptionElement,\n  React.ComponentProps<\"option\">\n>(function RetroNativeSelectOption({ className, ...props }, ref) {\n  return (\n    <option\n      ref={ref}\n      data-slot=\"native-select-option\"\n      className={cn(\"bg-os9-white text-os9-black\", className)}\n      {...props}\n    />\n  )\n})\nRetroNativeSelectOption.displayName = \"RetroNativeSelectOption\"\n\nconst RetroNativeSelectOptGroup = React.forwardRef<\n  HTMLOptGroupElement,\n  React.ComponentProps<\"optgroup\">\n>(function RetroNativeSelectOptGroup({ className, ...props }, ref) {\n  return (\n    <optgroup\n      ref={ref}\n      data-slot=\"native-select-optgroup\"\n      className={cn(\"bg-os9-white text-os9-gray-700\", className)}\n      {...props}\n    />\n  )\n})\nRetroNativeSelectOptGroup.displayName = \"RetroNativeSelectOptGroup\"\n\nexport {\n  RetroNativeSelect,\n  RetroNativeSelectOption,\n  RetroNativeSelectOptGroup,\n  retroNativeSelectVariants,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}