{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "Embossed label-maker tape.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/badge.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nconst tapes = {\n  black: [\"#1d1d1f\", \"#f4f4f4\"],\n  red: [\"#c0262d\", \"#fff4f2\"],\n  blue: [\"#1f4fa3\", \"#f2f6ff\"],\n  green: [\"#256b3a\", \"#f2fff5\"],\n  yellow: [\"#f2c230\", \"#1d1a10\"],\n  ink: [\"var(--pen)\", \"var(--pen-ink)\"],\n} as const;\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Embossed label-maker tape color. */\n  tape?: keyof typeof tapes;\n}\n\n/** Embossed label-maker tape. */\nexport function Badge({ tape = \"black\", className = \"\", style, ...props }: BadgeProps) {\n  const [bg, fg] = tapes[tape];\n  return (\n    <span\n      className={`inline-flex h-[22px] items-center gap-1 whitespace-nowrap px-2.5 text-[11px] font-bold uppercase leading-none tracking-[0.16em] ${className}`}\n      style={{\n        background: `linear-gradient(180deg, rgb(255 255 255 / .16), transparent 45%, rgb(0 0 0 / .12)), ${bg}`,\n        color: fg,\n        clipPath: \"polygon(4px 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 4px 100%, 0 50%)\",\n        // raised letters pressed into the tape\n        textShadow: \"0 1px 0 rgb(0 0 0 / .45), 0 -1px 0 rgb(255 255 255 / .18)\",\n        fontFamily: \"ui-sans-serif, system-ui, sans-serif\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n"
    }
  ]
}