{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-spinner",
  "title": "RetroSpinner",
  "description": "Mac OS 9 styled loading indicators: RetroSpinner (animated wristwatch cursor with rotating second hand) and RetroBeachBall (spinning pinwheel wait cursor with colored segments). Both support sm/default/lg sizes via cva variants.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-spinner.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ---------------------------------------------------------------------------\n * Shared size variants\n * -------------------------------------------------------------------------*/\n\nconst spinnerSizeVariants = cva(\"inline-flex items-center justify-center\", {\n  variants: {\n    size: {\n      sm: \"h-4 w-4\",\n      default: \"h-6 w-6\",\n      lg: \"h-8 w-8\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\nconst sizePixels: Record<string, number> = {\n  sm: 16,\n  default: 24,\n  lg: 32,\n}\n\n/* ---------------------------------------------------------------------------\n * RetroSpinner — Mac OS 9 watch cursor\n *\n * An animated wristwatch: circle face with hour marks at 12/3/6/9 and a\n * rotating second-hand line. Pure SVG + CSS animation.\n * -------------------------------------------------------------------------*/\n\ninterface RetroSpinnerProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof spinnerSizeVariants> {}\n\nconst RetroSpinner = React.forwardRef<HTMLDivElement, RetroSpinnerProps>(\n  function RetroSpinner({ className, size = \"default\", ...props }, ref) {\n    const px = sizePixels[size ?? \"default\"]\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        className={cn(spinnerSizeVariants({ size }), className)}\n        {...props}\n      >\n        <svg\n          width={px}\n          height={px}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden\n        >\n          {/* Watch band top */}\n          <rect x=\"8\" y=\"0\" width=\"8\" height=\"4\" rx=\"0\" fill=\"#262626\" />\n          {/* Watch band bottom */}\n          <rect x=\"8\" y=\"20\" width=\"8\" height=\"4\" rx=\"0\" fill=\"#262626\" />\n\n          {/* Watch case (outer) */}\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"9\"\n            fill=\"#cccccc\"\n            stroke=\"#262626\"\n            strokeWidth=\"1.5\"\n          />\n          {/* Watch face */}\n          <circle cx=\"12\" cy=\"12\" r=\"7.5\" fill=\"#eeeeee\" stroke=\"#262626\" strokeWidth=\"1\" />\n\n          {/* Hour marks at 12, 3, 6, 9 */}\n          <line x1=\"12\" y1=\"5.5\" x2=\"12\" y2=\"7\" stroke=\"#262626\" strokeWidth=\"1\" />\n          <line x1=\"17\" y1=\"12\" x2=\"18.5\" y2=\"12\" stroke=\"#262626\" strokeWidth=\"1\" />\n          <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"18.5\" stroke=\"#262626\" strokeWidth=\"1\" />\n          <line x1=\"5.5\" y1=\"12\" x2=\"7\" y2=\"12\" stroke=\"#262626\" strokeWidth=\"1\" />\n\n          {/* Small minute marks at 1,2,4,5,7,8,10,11 (small dots) */}\n          <circle cx=\"14.6\" cy=\"6.2\" r=\"0.4\" fill=\"#808080\" />\n          <circle cx=\"16.8\" cy=\"8.4\" r=\"0.4\" fill=\"#808080\" />\n          <circle cx=\"16.8\" cy=\"15.6\" r=\"0.4\" fill=\"#808080\" />\n          <circle cx=\"14.6\" cy=\"17.8\" r=\"0.4\" fill=\"#808080\" />\n          <circle cx=\"9.4\" cy=\"17.8\" r=\"0.4\" fill=\"#808080\" />\n          <circle cx=\"7.2\" cy=\"15.6\" r=\"0.4\" fill=\"#808080\" />\n          <circle cx=\"7.2\" cy=\"8.4\" r=\"0.4\" fill=\"#808080\" />\n          <circle cx=\"9.4\" cy=\"6.2\" r=\"0.4\" fill=\"#808080\" />\n\n          {/* Center dot */}\n          <circle cx=\"12\" cy=\"12\" r=\"1\" fill=\"#262626\" />\n\n          {/* Hour hand (short, pointing roughly at 10) */}\n          <line\n            x1=\"12\"\n            y1=\"12\"\n            x2=\"12\"\n            y2=\"8\"\n            stroke=\"#262626\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"square\"\n          />\n\n          {/* Rotating second hand */}\n          <line\n            x1=\"12\"\n            y1=\"12\"\n            x2=\"12\"\n            y2=\"5.5\"\n            stroke=\"#262626\"\n            strokeWidth=\"0.75\"\n            strokeLinecap=\"square\"\n            className=\"retro-spinner-hand\"\n            style={{ transformOrigin: \"12px 12px\" }}\n          />\n        </svg>\n\n        <span className=\"sr-only\">Loading...</span>\n\n        {/* React 19 hoists this <style> into <head> and dedupes it by `href` */}\n        <style href=\"retro-spinner\" precedence=\"default\">{`\n          @keyframes retro-spinner-rotate {\n            from { transform: rotate(0deg); }\n            to { transform: rotate(360deg); }\n          }\n          .retro-spinner-hand {\n            animation: retro-spinner-rotate 1.2s steps(12) infinite;\n          }\n          @media (prefers-reduced-motion: reduce) {\n            .retro-spinner-hand { animation: none; }\n          }\n        `}</style>\n      </div>\n    )\n  }\n)\nRetroSpinner.displayName = \"RetroSpinner\"\n\n/* ---------------------------------------------------------------------------\n * RetroBeachBall — Mac OS 9 spinning wait cursor\n *\n * A circle divided into colored segments (pinwheel style) that rotates\n * continuously using Tailwind's animate-spin.\n * -------------------------------------------------------------------------*/\n\ninterface RetroBeachBallProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof spinnerSizeVariants> {}\n\nconst RetroBeachBall = React.forwardRef<HTMLDivElement, RetroBeachBallProps>(\n  function RetroBeachBall({ className, size = \"default\", ...props }, ref) {\n    const px = sizePixels[size ?? \"default\"]\n    const r = 10\n    const cx = 12\n    const cy = 12\n\n    // Build 6 equal pie segments (60 degrees each) for a classic pinwheel\n    const colors = [\n      \"#333399\", // azul\n      \"#cc0000\", // red\n      \"#339933\", // green\n      \"#cc9900\", // gold\n      \"#333399\", // azul\n      \"#cc0000\", // red\n    ]\n\n    const segments: React.ReactNode[] = []\n    for (let i = 0; i < 6; i++) {\n      const startAngle = (i * 60 - 90) * (Math.PI / 180)\n      const endAngle = ((i + 1) * 60 - 90) * (Math.PI / 180)\n      const x1 = cx + r * Math.cos(startAngle)\n      const y1 = cy + r * Math.sin(startAngle)\n      const x2 = cx + r * Math.cos(endAngle)\n      const y2 = cy + r * Math.sin(endAngle)\n      segments.push(\n        <path\n          key={i}\n          d={`M${cx},${cy} L${x1.toFixed(2)},${y1.toFixed(2)} A${r},${r} 0 0,1 ${x2.toFixed(2)},${y2.toFixed(2)} Z`}\n          fill={colors[i]}\n        />\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        className={cn(spinnerSizeVariants({ size }), className)}\n        {...props}\n      >\n        <svg\n          width={px}\n          height={px}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden\n          className=\"animate-spin motion-reduce:animate-none\"\n        >\n          {/* Colored segments */}\n          {segments}\n          {/* Outer ring / border */}\n          <circle\n            cx={cx}\n            cy={cy}\n            r={r}\n            fill=\"none\"\n            stroke=\"#262626\"\n            strokeWidth=\"1\"\n          />\n          {/* Small center dot */}\n          <circle cx={cx} cy={cy} r=\"1.5\" fill=\"#262626\" />\n        </svg>\n\n        <span className=\"sr-only\">Loading...</span>\n      </div>\n    )\n  }\n)\nRetroBeachBall.displayName = \"RetroBeachBall\"\n\n/* ---------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------*/\n\nexport { RetroSpinner, RetroBeachBall, spinnerSizeVariants }\nexport type { RetroSpinnerProps, RetroBeachBallProps }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}