{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label-badge",
  "title": "Badge label",
  "description": "Styled label: the Badge set. 5 decorative label variations (CountLabel, StatusLabel, NewLabel, BetaLabel, TagLabel) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/label-badge.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tag } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Badge label family: 5 labels, each carrying a marker AFTER the text (a counter, a\n   status dot, a new/beta badge, a tag chip). The markers are not aria-hidden;\n   because they carry readable text they reach the screen reader too, and only the\n   status dot is decorative. The label is a REAL <label> bound with htmlFor to the\n   rendered demo input (the id comes from React.useId()).\n   The badge backgrounds use color-mix for alpha. Color comes ONLY from tokens.\n   Static - no animation, motion is not needed. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst text: Record<StyledSize, string> = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-sm\",\n  xl: \"text-base\",\n}\n\n/* Demo input yuksekligi base Button olcegine hizali. */\nconst inputHeight: Record<StyledSize, string> = {\n  sm: \"h-8\",\n  md: \"h-9\",\n  lg: \"h-10\",\n  xl: \"h-12\",\n}\n\nconst base =\n  \"inline-flex w-fit items-center gap-1.5 font-medium leading-none text-foreground select-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\nconst field = \"flex w-fit flex-col gap-1.5\"\n\nconst inputBase =\n  \"w-48 rounded-md border border-field-border bg-transparent px-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n\n/* Rozet cipi: kucuk, yuvarlak, ton zeminli. */\nconst chip =\n  \"inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none [&>svg]:size-3 [&>svg]:shrink-0 [&>i]:text-xs [&>i]:leading-none\"\n\ntype Props = Omit<React.ComponentProps<\"label\">, \"htmlFor\"> & { size?: StyledSize }\n\n/* Shared shell: the label plus the marker that follows it, then the bound demo input. */\nfunction BadgeField({\n  tone,\n  marker,\n  className,\n  size = \"md\",\n  children,\n  ...props\n}: Props & { tone: string; marker: React.ReactNode }) {\n  const id = React.useId()\n  return (\n    <span data-slot=\"styled-label\" data-tone={tone} className={field}>\n      <label htmlFor={id} className={cn(base, text[size], className)} {...props}>\n        {children ?? \"Email\"}\n        {marker}\n      </label>\n      <input\n        id={id}\n        type=\"text\"\n        placeholder=\"you@example.com\"\n        className={cn(inputBase, inputHeight[size])}\n      />\n    </span>\n  )\n}\n\n/* Count: metnin ardinda sayac cipi. count prop, varsayilan 3 (deterministik). */\nexport function CountLabel({ count = 3, ...props }: Props & { count?: number }) {\n  return (\n    <BadgeField\n      tone=\"neutral\"\n      marker={\n        <span\n          className={cn(\n            chip,\n            \"tabular-nums text-muted-foreground [background-color:color-mix(in_oklab,var(--color-foreground)_10%,transparent)]\"\n          )}\n        >\n          {count}\n        </span>\n      }\n      {...props}\n    />\n  )\n}\n\n/* Status: success tonlu nokta + durum metni. */\nexport function StatusLabel({ status = \"Live\", ...props }: Props & { status?: string }) {\n  return (\n    <BadgeField\n      tone=\"success\"\n      marker={\n        <span\n          className={cn(\n            chip,\n            \"text-success-soft-foreground [background-color:color-mix(in_oklab,var(--color-success)_16%,transparent)]\"\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"size-1.5 shrink-0 rounded-full bg-success\" />\n          {status}\n        </span>\n      }\n      {...props}\n    />\n  )\n}\n\n/* New: info tonlu NEW rozeti. */\nexport function NewLabel(props: Props) {\n  return (\n    <BadgeField\n      tone=\"info\"\n      marker={\n        <span\n          className={cn(\n            chip,\n            \"uppercase tracking-wide text-info-soft-foreground [background-color:color-mix(in_oklab,var(--color-info)_16%,transparent)]\"\n          )}\n        >\n          New\n        </span>\n      }\n      {...props}\n    />\n  )\n}\n\n/* Beta: warning tonlu BETA rozeti. */\nexport function BetaLabel(props: Props) {\n  return (\n    <BadgeField\n      tone=\"warning\"\n      marker={\n        <span\n          className={cn(\n            chip,\n            \"uppercase tracking-wide text-warning-soft-foreground [background-color:color-mix(in_oklab,var(--color-warning)_18%,transparent)]\"\n          )}\n        >\n          Beta\n        </span>\n      }\n      {...props}\n    />\n  )\n}\n\n/* Tag: ikonlu, cerceveli etiket cipi. */\nexport function TagLabel({ tag = \"internal\", ...props }: Props & { tag?: string }) {\n  return (\n    <BadgeField\n      tone=\"brand\"\n      marker={\n        <span className={cn(chip, \"border border-border text-muted-foreground\")}>\n          <Tag />\n          {tag}\n        </span>\n      }\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/label-badge.tsx"
    }
  ],
  "categories": [
    "styled",
    "label"
  ],
  "type": "registry:component"
}