{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "micro-bars",
  "title": "Micro Bars",
  "description": "Thin bar glyph off a shared baseline, with column, pill and mirror variants and optional recency fade.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/micro-bars.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst bars = cva(\"flex items-end\", {\n  variants: {\n    tone: {\n      ink: \"text-ink dark:text-white\",\n      current: \"text-current\",\n      volt: \"text-volt\",\n      flare: \"text-flare\",\n      muted: \"text-current opacity-40\",\n    },\n    gap: { tight: \"gap-[2px]\", normal: \"gap-[3px]\", loose: \"gap-[5px]\" },\n  },\n  defaultVariants: { tone: \"ink\", gap: \"normal\" },\n})\n\nexport interface MicroBarsProps\n  extends Omit<React.ComponentProps<\"div\">, \"values\">,\n    VariantProps<typeof bars> {\n  values: number[]\n  /**\n   * `column` is the Payment History glyph — thin bars off a shared baseline.\n   * `pill` rounds the caps. `mirror` grows from the centre line, which reads\n   * as variance rather than magnitude.\n   */\n  variant?: \"column\" | \"pill\" | \"mirror\"\n  height?: number\n  barWidth?: number\n  /** Fades bars toward the left so the series reads as history, not a ranking. */\n  recencyFade?: boolean\n  max?: number\n}\n\nexport function MicroBars({\n  values,\n  variant = \"column\",\n  height = 32,\n  barWidth = 3,\n  recencyFade = false,\n  max,\n  tone,\n  gap,\n  className,\n  style,\n  ...props\n}: MicroBarsProps) {\n  const hi = max ?? Math.max(...values, 1)\n\n  return (\n    <div\n      data-slot=\"micro-bars\"\n      role=\"img\"\n      className={cn(bars({ tone, gap }), variant === \"mirror\" && \"items-center\", className)}\n      style={{ height, ...style }}\n      {...props}\n    >\n      {values.map((v, i) => {\n        const h = Math.max((Math.abs(v) / hi) * height, barWidth)\n        return (\n          <span\n            key={i}\n            className={cn(\n              \"block shrink-0 bg-current\",\n              variant === \"pill\" ? \"rounded-full\" : \"rounded-[1px]\",\n            )}\n            style={{\n              width: barWidth,\n              height: variant === \"mirror\" ? h : h,\n              opacity: recencyFade ? 0.3 + (0.7 * (i + 1)) / values.length : 1,\n            }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}