{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"equalizer-bars","type":"registry:ui","title":"Equalizer bars","description":"The small bouncing bars that mark what is playing in a list of tracks. Each bar keeps its own tempo so they never line up, and pausing settles them low and still.","dependencies":["clsx","tailwind-merge"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/equalizer-bars.tsx","type":"registry:ui","target":"components/ui/equalizer-bars.tsx","content":"\"use client\";\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./equalizer-bars.css\";\n\nexport type EqualizerBarsProps = Omit<ComponentProps<\"span\">, \"children\"> & {\n  /** Bars bounce while true and settle low when false. */\n  playing?: boolean;\n  bars?: 3 | 4 | 5;\n  /** Read instead of \"Playing\" or \"Paused\". Pass an empty string when the row already says it. */\n  label?: string;\n};\n\n/**\n * The small bouncing bars that mark what is playing in a list of tracks. Each bar keeps its own tempo so they never\n * line up; pausing settles them low and still. Under reduced motion the bars stand at rest heights.\n */\nexport function EqualizerBars({ playing = true, bars = 4, label, className, ...props }: EqualizerBarsProps) {\n  const name = label ?? (playing ? \"Playing\" : \"Paused\");\n  return (\n    <span\n      data-slot=\"equalizer-bars\"\n      data-playing={playing ? \"\" : undefined}\n      className={cn(\"inline-flex h-3.5 items-end gap-[2px]\", className)}\n      {...(name ? { role: \"img\", \"aria-label\": name } : { \"aria-hidden\": true })}\n      {...props}\n    >\n      {Array.from({ length: bars }, (_, i) => (\n        <i key={i} style={{ \"--eq-i\": i } as CSSProperties} />\n      ))}\n    </span>\n  );\n}\n"},{"path":"ui/lib/cn.ts","type":"registry:ui","target":"components/ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"},{"path":"ui/equalizer-bars.css","type":"registry:file","target":"components/ui/equalizer-bars.css","content":"/* equalizer-bars.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  /* Equalizer bars: each bar its own tempo, so they never line up; paused bars settle low. */\n  [data-slot=\"equalizer-bars\"] { color: var(--accent); }\n  [data-slot=\"equalizer-bars\"] i { width: 3px; height: 100%; border-radius: 999px; background: currentColor; transform-origin: bottom; scale: 1 0.3; transition: scale var(--duration-deliberate) var(--ease-out); }\n  [data-slot=\"equalizer-bars\"][data-playing] i { animation: eq-bounce calc(0.62s + var(--eq-i) * 0.17s) var(--ease-in-out) calc(var(--eq-i) * -0.29s) infinite alternate; }\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"equalizer-bars\"][data-playing] i { animation: none; }\n    [data-slot=\"equalizer-bars\"][data-playing] i:nth-child(odd) { scale: 1 0.7; }\n    [data-slot=\"equalizer-bars\"][data-playing] i:nth-child(even) { scale: 1 0.45; }\n  }\n  @keyframes eq-bounce { 0% { scale: 1 0.25; } 35% { scale: 1 0.9; } 60% { scale: 1 0.45; } 100% { scale: 1 1; } }\n}\n"}],"categories":["motion"],"meta":{"tier":"free","license":"MIT","family":"changing-values","docs":"/docs/components/equalizer-bars"}}