{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-button",
  "title": "RetroButton",
  "description": "A Mac OS 9 styled button with raised bevel effect, active/pressed state, and disabled styling.",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-button.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/*\n * Default-button ring. OS 9 marks the button that Return/Enter activates\n * with a thick black ring separated from the face by a platinum gap. It is\n * drawn with outer box-shadows (so it never changes the button's box) plus a\n * matching margin so it does not overlap neighbours. Class strings are\n * written out in full so Tailwind can detect them.\n */\n\nconst retroButtonVariants = cva(\n  [\n    \"inline-flex items-center justify-center whitespace-nowrap\",\n    \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n    \"cursor-pointer select-none\",\n    \"transition-none\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: [\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          \"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        ],\n        primary: [\n          \"border-[2px] 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          \"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        ],\n        secondary: [\n          \"border-y border-x-0 border-os9-black bg-os9-gray-300 text-os9-black\",\n          \"shadow-[inset_0_1px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(128,128,128,0.5)]\",\n          \"active:bg-os9-gray-800 active:text-os9-white\",\n          \"active:shadow-[inset_0_1px_0_rgba(38,38,38,0.4),inset_0_-1px_0_rgba(133,133,133,1)]\",\n        ],\n      },\n      size: {\n        default: \"h-[24px] px-4 py-0\",\n        sm: \"h-[20px] px-2 py-0 text-[10px]\",\n        lg: \"h-[30px] px-6 py-0 text-[12px]\",\n      },\n      /**\n       * Default (Return-key) button: adds the thick outer ring. Must come\n       * after \"variant\" so its shadows win the tailwind-merge.\n       */\n      isDefault: {\n        false: \"focus-visible:os9-focus-ring\",\n        true: [\n          \"m-[5px]\",\n          \"shadow-[inset_1px_1px_0_var(--os9-white),inset_-1px_-1px_0_var(--os9-gray-700),0_0_0_2px_var(--os9-gray-300),0_0_0_5px_var(--os9-black)]\",\n          \"active:shadow-[inset_1px_1px_0_var(--os9-gray-700),inset_-1px_-1px_0_var(--os9-white),0_0_0_2px_var(--os9-gray-300),0_0_0_5px_var(--os9-black)]\",\n          \"focus-visible:outline-none focus-visible:shadow-[inset_1px_1px_0_var(--os9-white),inset_-1px_-1px_0_var(--os9-gray-700),0_0_0_2px_var(--os9-focus),0_0_0_5px_var(--os9-black)]\",\n          \"focus-visible:active:shadow-[inset_1px_1px_0_var(--os9-gray-700),inset_-1px_-1px_0_var(--os9-white),0_0_0_2px_var(--os9-focus),0_0_0_5px_var(--os9-black)]\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      isDefault: false,\n    },\n  }\n)\n\ntype RetroButtonProps = React.ComponentProps<\"button\"> &\n  VariantProps<typeof retroButtonVariants> & {\n    asChild?: boolean\n  }\n\nconst RetroButton = React.forwardRef<HTMLButtonElement, RetroButtonProps>(\n  function RetroButton(\n    {\n      className,\n      variant,\n      size,\n      isDefault = false,\n      asChild = false,\n      disabled,\n      ...props\n    },\n    ref\n  ) {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(\n          retroButtonVariants({ variant, size, isDefault }),\n          disabled && [\n            \"pointer-events-none\",\n            \"text-os9-gray-600\",\n            \"border-os9-gray-600\",\n            isDefault\n              ? \"shadow-[inset_1px_1px_0_var(--os9-gray-300),inset_-1px_-1px_0_var(--os9-gray-400),0_0_0_2px_var(--os9-gray-300),0_0_0_5px_var(--os9-gray-600)]\"\n              : \"shadow-[inset_1px_1px_0_var(--os9-gray-300),inset_-1px_-1px_0_var(--os9-gray-400)]\",\n          ],\n          className\n        )}\n        ref={ref}\n        disabled={disabled}\n        data-default={isDefault ? \"\" : undefined}\n        {...props}\n      />\n    )\n  }\n)\nRetroButton.displayName = \"RetroButton\"\n\nexport { RetroButton, retroButtonVariants }\nexport type { RetroButtonProps }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}