{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bullet-list",
  "title": "BulletList",
  "description": "Arrow or dot list.",
  "registryDependencies": [
    "@jbm/tokens"
  ],
  "files": [
    {
      "path": "registry/jbm/ui/bullet-list.tsx",
      "content": "import * as React from \"react\";\nimport { color, font } from \"../lib/tokens\";\n\n/** Vertical list with an arrow or dot marker. Pure; wrap each item in a motion `Pop` for staggered entry. */\nexport function BulletList({ items, marker = \"arrow\", size = 36, gap = 16, renderItem, style }: { items: string[]; marker?: \"arrow\" | \"dot\"; size?: number; gap?: number; renderItem?: (node: React.ReactNode, i: number) => React.ReactNode; style?: React.CSSProperties }) {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap, ...style }}>\n      {items.map((text, i) => {\n        const node = (\n          <div key={text} style={{ fontFamily: font.sans, fontSize: size, fontWeight: 600, color: color.ink, lineHeight: 1.25, display: \"flex\", alignItems: \"center\", gap: 16 }}>\n            {marker === \"arrow\" ? <span style={{ color: color.accent }}>→</span> : <span style={{ width: 18, height: 18, borderRadius: 9, background: color.accent, display: \"inline-block\" }} />}\n            <span>{text}</span>\n          </div>\n        );\n        return renderItem ? <React.Fragment key={text}>{renderItem(node, i)}</React.Fragment> : node;\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "src/jbm/ui/bullet-list.tsx"
    }
  ],
  "type": "registry:ui"
}