{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "wandering-eyes",
  "files": [
    {
      "path": "registry/components/loading-ui/wandering-eyes.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ntype WanderingEyesProps = React.ComponentProps<\"span\"> & {\n  eyeScale?: number;\n  gapScale?: number;\n  pupilScale?: number;\n  blinkScale?: number;\n  travelScale?: number;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction WanderingEyes({\n  className,\n  style,\n  eyeScale = 0.62,\n  gapScale = 0.09,\n  pupilScale = 0.32,\n  blinkScale = 0.375,\n  travelScale = 0.3125,\n  ...props\n}: WanderingEyesProps) {\n  const safeEyeScale = clamp(eyeScale, 0.28, 0.7);\n  const safeGapScale = clamp(gapScale, 0.04, 0.3);\n  const safePupilScale = clamp(pupilScale, 0.12, 0.45);\n  const safeBlinkScale = clamp(blinkScale, 0.15, 1);\n  const safeTravelScale = clamp(travelScale, 0.08, 0.5);\n  const eyesStyle = {\n    ...style,\n    \"--loading-ui-wandering-eyes-eye\": `${(safeEyeScale * 100).toFixed(2)}cqmin`,\n    \"--loading-ui-wandering-eyes-gap\": `${(safeGapScale * 100).toFixed(2)}cqmin`,\n    \"--loading-ui-wandering-eyes-pupil-scale\": `${safePupilScale}`,\n    \"--loading-ui-wandering-eyes-blink\": `${safeBlinkScale}`,\n    \"--loading-ui-wandering-eyes-travel-scale\": `${safeTravelScale}`,\n  } as React.CSSProperties;\n\n  return (\n    <>\n      <style>{`\n        @keyframes loading-ui-wandering-eyes-move {\n          0%,\n          10% {\n            background-position: 0 0;\n          }\n\n          13%,\n          40% {\n            background-position: calc(var(--loading-ui-wandering-eyes-eye) * var(--loading-ui-wandering-eyes-travel-scale) * -1) 0;\n          }\n\n          43%,\n          70% {\n            background-position: calc(var(--loading-ui-wandering-eyes-eye) * var(--loading-ui-wandering-eyes-travel-scale)) 0;\n          }\n\n          73%,\n          90% {\n            background-position: 0 calc(var(--loading-ui-wandering-eyes-eye) * var(--loading-ui-wandering-eyes-travel-scale));\n          }\n\n          93%,\n          100% {\n            background-position: 0 0;\n          }\n        }\n\n        @keyframes loading-ui-wandering-eyes-blink {\n          0%,\n          10%,\n          12%,\n          20%,\n          22%,\n          40%,\n          42%,\n          60%,\n          62%,\n          70%,\n          72%,\n          90%,\n          92%,\n          98%,\n          100% {\n            height: var(--loading-ui-wandering-eyes-eye);\n          }\n\n          11%,\n          21%,\n          41%,\n          61%,\n          71%,\n          91%,\n          99% {\n            height: calc(var(--loading-ui-wandering-eyes-eye) * var(--loading-ui-wandering-eyes-blink));\n          }\n        }\n      `}</style>\n      <span\n        role=\"status\"\n        className={cn(\n          \"@container-[size] relative inline-flex aspect-9/4 items-center justify-center align-middle [--eye-color:color-mix(in_srgb,currentColor_16%,transparent)] [--pupil-color:currentColor]\",\n          className,\n        )}\n        style={eyesStyle}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"inline-flex items-center justify-center gap-(--loading-ui-wandering-eyes-gap)\"\n        >\n          {Array.from({ length: 2 }, (_, index) => (\n            <span\n              key={index}\n              className=\"inline-block rounded-full\"\n              style={{\n                width: \"var(--loading-ui-wandering-eyes-eye)\",\n                height: \"var(--loading-ui-wandering-eyes-eye)\",\n                backgroundColor: \"var(--eye-color)\",\n                backgroundImage:\n                  \"radial-gradient(circle calc(var(--loading-ui-wandering-eyes-eye) * var(--loading-ui-wandering-eyes-pupil-scale)), var(--pupil-color) 100%, transparent 0)\",\n                backgroundRepeat: \"no-repeat\",\n                animation:\n                  \"loading-ui-wandering-eyes-move var(--duration, 10s) infinite, loading-ui-wandering-eyes-blink var(--duration, 10s) infinite\",\n              }}\n            />\n          ))}\n        </span>\n        <span className=\"sr-only\">Loading</span>\n      </span>\n    </>\n  );\n}\n\nexport { WanderingEyes };\n",
      "type": "registry:component",
      "target": ""
    }
  ],
  "type": "registry:component"
}