{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-bar",
  "title": "Segmented bar",
  "description": "A segmented progress/stat bar in the Destiny FUI style.",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/segmented-bar.tsx",
      "content": "import type { CSSProperties, HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface SegmentedBarProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"color\"> {\n  value: number;\n  max?: number;\n  /** Optional number of segments; renders dividing ticks when set. */\n  segments?: number;\n  /** Fill color (any CSS color, e.g. a token var). */\n  color?: string;\n  /** Glow the fill (Destiny stat/health bars glow in their color). */\n  glow?: boolean;\n}\n\nfunction clampPercent(value: number, max: number): number {\n  if (max <= 0) return 0;\n  return Math.max(0, Math.min(100, (value / max) * 100));\n}\n\n/** A segmented progress/stat bar in the Destiny FUI style. */\nexport function SegmentedBar({\n  value,\n  max = 100,\n  segments,\n  color = \"var(--engram-accent-2)\",\n  glow = true,\n  className,\n  style,\n  ...props\n}: SegmentedBarProps) {\n  const pct = clampPercent(value, max);\n  const fillStyle: CSSProperties = {\n    width: `${pct}%`,\n    background: color,\n    boxShadow: glow\n      ? `0 0 8px color-mix(in oklch, ${color} 50%, transparent)`\n      : undefined,\n  };\n  return (\n    <div\n      className={cn(\n        \"relative h-2 w-full overflow-hidden bg-engram-track\",\n        className,\n      )}\n      style={style}\n      {...props}\n    >\n      <div className=\"h-full\" style={fillStyle} />\n      {segments ? (\n        <div className=\"absolute inset-0 flex\">\n          {Array.from({ length: segments }, (_, i) => (\n            <div\n              // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length static ticks\n              key={i}\n              className={cn(\n                \"flex-1\",\n                i > 0 && \"border-[rgba(8,9,11,0.85)] border-l\",\n              )}\n            />\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/segmented-bar.tsx"
    }
  ],
  "meta": {
    "level": "atom"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "primitive"
  ],
  "type": "registry:component"
}