{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "Product state label: new, sale, bundle, low stock, verified. Optional live dot.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "ui"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "ui/badge.tsx",
      "content": "import { cn } from \"@/components/storekit/lib/cn\"\n\n/* Small label for product state: new, sale, bundle, low stock, verified. */\n\ntype Tone = \"neutral\" | \"accent\" | \"sale\" | \"success\" | \"ink\" | \"outline\"\n\nconst tones: Record<Tone, string> = {\n  neutral: \"bg-sk-surface text-sk-ink\",\n  accent: \"bg-sk-accent text-sk-accent-ink\",\n  sale: \"bg-sk-sale/[0.12] text-sk-sale\",\n  success: \"bg-sk-savings/[0.12] text-sk-savings\",\n  ink: \"bg-sk-ink text-sk-paper\",\n  outline: \"border border-sk-line text-sk-muted\",\n}\n\nexport function Badge({\n  tone = \"neutral\",\n  dot,\n  className,\n  children,\n}: {\n  tone?: Tone\n  dot?: boolean\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-sk-chip px-2 py-0.5 text-[11px] font-semibold uppercase leading-5 tracking-[0.06em]\",\n        tones[tone],\n        className\n      )}\n    >\n      {dot ? <span className=\"relative flex h-1.5 w-1.5\"><span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-60\" /><span className=\"relative inline-flex h-1.5 w-1.5 rounded-full bg-current\" /></span> : null}\n      {children}\n    </span>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/storekit/ui/badge.tsx"
    }
  ],
  "meta": {
    "section": "ui",
    "previewHeight": 160
  }
}