{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "symmetric-wave",
  "files": [
    {
      "path": "registry/components/loading-ui/symmetric-wave.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\nconst SYMMETRIC_WAVE_PHASES = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1] as const;\n\ntype SymmetricWaveProps = React.ComponentProps<\"span\"> & {\n  block?: string;\n  track?: string;\n};\n\nfunction SymmetricWave({\n  className,\n  block = \"█\",\n  track = \"░\",\n  ...props\n}: SymmetricWaveProps) {\n  return (\n    <>\n      <style>{`\n        @keyframes loading-ui-symmetric-wave-1 {\n          0%,\n          100% {\n            opacity: 1;\n          }\n\n          12.5%,\n          87.5% {\n            opacity: 0.6;\n          }\n\n          25%,\n          75% {\n            opacity: 0.3;\n          }\n\n          37.5%,\n          62.5%,\n          50% {\n            opacity: 0;\n          }\n        }\n\n        @keyframes loading-ui-symmetric-wave-2 {\n          0%,\n          100% {\n            opacity: 0.6;\n          }\n\n          12.5%,\n          87.5% {\n            opacity: 1;\n          }\n\n          25%,\n          75% {\n            opacity: 0.6;\n          }\n\n          37.5%,\n          62.5% {\n            opacity: 0.3;\n          }\n\n          50% {\n            opacity: 0;\n          }\n        }\n\n        @keyframes loading-ui-symmetric-wave-3 {\n          0%,\n          100% {\n            opacity: 0.3;\n          }\n\n          12.5%,\n          87.5% {\n            opacity: 0.6;\n          }\n\n          25%,\n          75% {\n            opacity: 1;\n          }\n\n          37.5%,\n          62.5% {\n            opacity: 0.6;\n          }\n\n          50% {\n            opacity: 0.3;\n          }\n        }\n\n        @keyframes loading-ui-symmetric-wave-4 {\n          0%,\n          100% {\n            opacity: 0;\n          }\n\n          12.5%,\n          87.5% {\n            opacity: 0.3;\n          }\n\n          25%,\n          75% {\n            opacity: 0.6;\n          }\n\n          37.5%,\n          62.5% {\n            opacity: 1;\n          }\n\n          50% {\n            opacity: 0.6;\n          }\n        }\n\n        @keyframes loading-ui-symmetric-wave-5 {\n          0%,\n          100%,\n          12.5%,\n          87.5% {\n            opacity: 0;\n          }\n\n          25%,\n          75% {\n            opacity: 0.3;\n          }\n\n          37.5%,\n          62.5% {\n            opacity: 0.6;\n          }\n\n          50% {\n            opacity: 1;\n          }\n        }\n      `}</style>\n      <span\n        role=\"status\"\n        className={cn(\n          \"relative inline-flex h-[1em] w-[10ch] overflow-hidden font-mono text-xl leading-none text-current select-none\",\n          className,\n        )}\n        {...props}\n      >\n        {SYMMETRIC_WAVE_PHASES.map((phase, index) => (\n          <span\n            key={index}\n            aria-hidden=\"true\"\n            className=\"relative flex h-full w-[1ch] items-center justify-center\"\n          >\n            <span className=\"opacity-30\">{track}</span>\n            <span\n              className=\"absolute inset-0 flex items-center justify-center\"\n              style={{\n                animation: `loading-ui-symmetric-wave-${phase} var(--duration, 2s) linear infinite`,\n              }}\n            >\n              {block}\n            </span>\n          </span>\n        ))}\n        <span className=\"sr-only\">Loading</span>\n      </span>\n    </>\n  );\n}\n\nexport { SymmetricWave };\n",
      "type": "registry:component",
      "target": ""
    }
  ],
  "type": "registry:component"
}