{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "callout",
  "title": "Callout",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "An editorial guidance panel with a clear kind label, icon, title, and optional action.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/callout.tsx",
      "content": "// Ballmac UI: Callout. https://ui.ballmac.com/components/callout\nimport * as React from \"react\"\nimport { Lightbulb, BookOpen, TriangleAlert } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ntype CalloutProps = Omit<React.ComponentProps<\"aside\">, \"title\"> & {\n  /** Headline for the guidance. */\n  title: string\n  /** Guidance type, represented by both icon and text. */\n  kind?: \"tip\" | \"note\" | \"caution\"\n  /** Optional action link or button. */\n  action?: React.ReactNode\n}\n\nfunction Callout({\n  className,\n  title,\n  kind = \"tip\",\n  action,\n  children,\n  ...props\n}: CalloutProps) {\n  const Icon =\n    kind === \"tip\" ? Lightbulb : kind === \"caution\" ? TriangleAlert : BookOpen\n  return (\n    <aside\n      data-slot=\"callout\"\n      aria-label={title}\n      className={cn(\n        \"bg-card relative w-full min-w-0 overflow-hidden rounded-xl border border-border p-5 shadow-sm\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"absolute inset-y-0 start-0 w-1\",\n          kind === \"tip\" && \"bg-primary\",\n          kind === \"note\" && \"bg-chart-2\",\n          kind === \"caution\" && \"bg-chart-3\",\n        )}\n      />\n      <div className=\"flex items-start gap-3\">\n        <span\n          aria-hidden=\"true\"\n          className=\"bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-lg\"\n        >\n          <Icon className=\"size-4\" />\n        </span>\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"text-muted-foreground text-xs font-medium uppercase tracking-wide\">\n            {kind}\n          </p>\n          <h3 className=\"text-foreground mt-0.5 text-sm font-semibold\">\n            {title}\n          </h3>\n          <div\n            data-slot=\"callout-content\"\n            className=\"text-muted-foreground mt-1.5 text-sm leading-relaxed\"\n          >\n            {children}\n          </div>\n          {action && (\n            <div data-slot=\"callout-action\" className=\"mt-3\">\n              {action}\n            </div>\n          )}\n        </div>\n      </div>\n    </aside>\n  )\n}\n\nexport { Callout, type CalloutProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/callout.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "guidance",
      "tip",
      "note"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "An editorial guidance panel with a clear kind label, icon, title, and optional action.",
      "whenToUse": [
        "Add contextual guidance to docs or settings",
        "Explain a recommended next step"
      ],
      "whenNotToUse": [
        "Use alert for urgent system feedback"
      ],
      "composesWith": [
        "alert",
        "button"
      ],
      "a11y": [
        {
          "keys": "Tab",
          "action": "Focus an optional action"
        }
      ],
      "customization": [
        "kind: tip | note | caution",
        "Action slot and content"
      ]
    },
    "examples": [
      "callout-demo",
      "callout-states"
    ],
    "url": "https://ui.ballmac.com/components/callout"
  },
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}