{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "callout",
  "title": "Callout",
  "description": "Sentence in an accent, ink or note pill.",
  "registryDependencies": [
    "@jbm/tokens"
  ],
  "files": [
    {
      "path": "registry/jbm/ui/callout.tsx",
      "content": "import * as React from \"react\";\nimport { color, font } from \"../lib/tokens\";\n\n/** A short sentence in a filled pill: `accent` (vermilion), `ink`, or `outline` with accent2 for footnotes. */\nexport function Callout({ children, variant = \"accent\", size = 30, maxWidth, style }: { children: React.ReactNode; variant?: \"accent\" | \"ink\" | \"note\"; size?: number; maxWidth?: number; style?: React.CSSProperties }) {\n  const v = {\n    accent: { background: color.accent, color: color.bg, border: `2px solid ${color.accent}`, fontFamily: font.sans, padding: \"14px 22px\", borderRadius: 16 },\n    ink: { background: color.ink, color: color.bg, border: `2px solid ${color.ink}`, fontFamily: font.mono, padding: \"8px 14px\", borderRadius: 10 },\n    note: { background: \"transparent\", color: color.accent2, border: `2px solid ${color.accent2}`, fontFamily: font.mono, padding: \"10px 18px\", borderRadius: 12 },\n  }[variant];\n  return <div style={{ fontSize: size, display: \"inline-block\", lineHeight: 1.3, maxWidth, ...v, ...style }}>{children}</div>;\n}\n",
      "type": "registry:ui",
      "target": "src/jbm/ui/callout.tsx"
    }
  ],
  "type": "registry:ui"
}