{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "A small printed plate with an indicator lamp, for status in tables, lists and headings. Five tones; a lamp is lit while its condition holds and dark when it doesn't. Lamps burn steady and never blink.",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/badge.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cn } from \"cn\"\n\ntype BadgeProps = useRender.ComponentProps<\"span\"> & {\n  /** The colour of the lamp's glass. The label says what it means; colour only backs it up. */\n  tone?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\"\n  /** Whether the lamp is on. Off still shows the tone's glass, dark. Lamps never blink. */\n  lit?: boolean\n}\n\n/**\n * A status plate: a small printed label with an indicator lamp. Steady,\n * inline, and small enough for table rows and headings.\n */\nfunction Badge({ className, render, tone = \"neutral\", lit = true, ...props }: BadgeProps) {\n  return useRender({\n    defaultTagName: \"span\",\n    render,\n    props: mergeProps<\"span\">(\n      {\n        \"data-slot\": \"badge\",\n        \"data-tone\": tone,\n        \"data-lit\": lit ? \"\" : undefined,\n        className: cn(\n          \"inline-flex h-5 max-w-full shrink-0 items-center gap-1.5 rounded-(--bevel-radius-xs) bg-(--badge-plate) px-1.5 align-middle text-(length:--bevel-fine) leading-none font-semibold tracking-(--bevel-tracking-print) whitespace-nowrap text-(--badge-foreground) uppercase shadow-(--badge-plate-edge)\",\n          \"forced-colors:border forced-colors:border-[CanvasText]\",\n          \"[&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0\",\n          className\n        ),\n      } as React.ComponentProps<\"span\">,\n      props\n    ),\n  })\n}\n\n/** The indicator lamp. Lit or dark with the badge; decorative, since the label carries the status. */\nfunction BadgeLamp({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"badge-lamp\"\n      className={cn(\"relative size-1.5 shrink-0 rounded-full bg-(--badge-lamp-off) shadow-(--bevel-depth-pressed)\", className)}\n      {...props}\n    >\n      <span className=\"bevel-led absolute inset-0 rounded-full opacity-0 transition-opacity duration-(--bevel-duration-small) ease-(--bevel-ease-out) in-data-lit:opacity-100 motion-reduce:transition-none\" />\n    </span>\n  )\n}\n\nexport { Badge, BadgeLamp }\nexport type { BadgeProps }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--badge-plate-color": "oklch(0.955 0.004 250)",
      "--badge-plate-foreground": "oklch(0.38 0.012 250)",
      "--badge-neutral": "oklch(0.86 0.02 90)",
      "--badge-info": "oklch(0.7 0.14 245)",
      "--badge-success": "oklch(0.74 0.17 150)",
      "--badge-warning": "oklch(0.8 0.16 75)",
      "--badge-danger": "oklch(0.63 0.22 27)"
    },
    ".dark": {
      "--badge-plate-color": "oklch(0.27 0.008 250)",
      "--badge-plate-foreground": "oklch(0.86 0.01 250)"
    },
    "[data-slot=\"badge\"]": {
      "--badge-plate": "var(--badge-plate-color)",
      "--badge-foreground": "var(--badge-plate-foreground)",
      "--badge-plate-edge": "inset 0 1px 0 var(--bevel-highlight), inset 0 0 0 1px oklch(0 0 0 / 0.08)",
      "--badge-lamp": "var(--badge-neutral)",
      "--bevel-led": "var(--badge-lamp)",
      "--badge-lamp-off": "color-mix(in oklch, var(--badge-lamp), black 55%)"
    },
    "[data-slot=\"badge\"][data-tone=\"neutral\"]": {
      "--badge-lamp": "var(--badge-neutral)"
    },
    "[data-slot=\"badge\"][data-tone=\"info\"]": {
      "--badge-lamp": "var(--badge-info)"
    },
    "[data-slot=\"badge\"][data-tone=\"success\"]": {
      "--badge-lamp": "var(--badge-success)"
    },
    "[data-slot=\"badge\"][data-tone=\"warning\"]": {
      "--badge-lamp": "var(--badge-warning)"
    },
    "[data-slot=\"badge\"][data-tone=\"danger\"]": {
      "--badge-lamp": "var(--badge-danger)"
    }
  },
  "categories": [
    "essentials"
  ],
  "type": "registry:ui"
}