{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge-phosphor",
  "type": "registry:ui",
  "title": "Badge (Phosphor)",
  "description": "A compact status label in five tones, with a matching status icon and a subtle tinted style.",
  "author": "Design From Labs <https://labs.designfrom.com>",
  "categories": [
    "data-display",
    "phosphor"
  ],
  "docs": "Installed `Badge`. Import it from `@/components/ui/badge`.\n\nTones: neutral, info, success, warning, danger. Success and warning use the badge's own variables (`--badge-success`, `--badge-warning` and their foregrounds, light and dark); every other color comes from your theme.\n\nDocs and every variant: https://labs.designfrom.com/ui/badge",
  "dependencies": [
    "class-variance-authority@^0.7",
    "@phosphor-icons/react@^2"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/badge-phosphor/badge.tsx",
      "type": "registry:ui",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { CheckCircleIcon, InfoIcon, WarningIcon, XCircleIcon } from \"@phosphor-icons/react/ssr\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * @dfl-header: v1, generated by labs.designfrom.com at build time\n * Item: badge-phosphor (Badge: Phosphor)\n * What: A compact status label in five tones, with a matching status icon\n *    and a subtle tinted style.\n * Status: ready. License: MIT. Author: Design From Labs\n *    <https://labs.designfrom.com>\n * Source: https://github.com/Design-from-labs/labs @ 803b92c1a30e (examples/badge)\n * Credits: S-003 React (MIT); S-004 shadcn/ui and its registry schema (MIT);\n *    S-005 Lucide icons (ISC); S-006 Phosphor Icons (MIT); S-008\n *    Tailwind CSS (MIT); S-018 class-variance-authority (Apache-2.0)\n * Install: npx shadcn@latest add https://labs.designfrom.com/r/badge-phosphor.json\n *   npx shadcn@latest add @designfrom/badge-phosphor\n *   npx designfrom add badge --icons phosphor\n *   npm i @designfrom/react, then import { Badge, badgeVariants } from \"@designfrom/react/badge/phosphor\";\n * Requires: class-variance-authority, @phosphor-icons/react, registry: utils\n * Docs: https://labs.designfrom.com/ui/badge (index: https://labs.designfrom.com/llms.txt)\n */\n\n// Solid style: filled tone colors from the shared token layer.\nconst badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 font-medium text-xs [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: {\n        neutral: \"border-transparent bg-secondary text-secondary-foreground\",\n        info: \"border-transparent bg-primary text-primary-foreground\",\n        success:\n          \"border-transparent bg-badge-success text-badge-success-foreground\",\n        warning:\n          \"border-transparent bg-badge-warning text-badge-warning-foreground\",\n        danger: \"border-transparent bg-destructive text-destructive-foreground\",\n      },\n    },\n    defaultVariants: {\n      tone: \"neutral\",\n    },\n  },\n);\n\n// Each status tone pairs its color with an icon, so meaning never rests on\n// color alone.\nconst toneIcons = {\n  neutral: null,\n  info: InfoIcon,\n  success: CheckCircleIcon,\n  warning: WarningIcon,\n  danger: XCircleIcon,\n} as const;\n\nexport interface BadgeProps\n  extends React.ComponentProps<\"span\">,\n    VariantProps<typeof badgeVariants> {\n  /** Shows the tone's status icon (not shown for neutral). */\n  showIcon?: boolean;\n}\n\nfunction Badge({\n  className,\n  tone = \"neutral\",\n  showIcon = true,\n  children,\n  ...props\n}: BadgeProps) {\n  const Icon = toneIcons[tone ?? \"neutral\"];\n  return (\n    <span\n      data-slot=\"badge\"\n      data-tone={tone}\n      className={cn(badgeVariants({ tone }), className)}\n      {...props}\n    >\n      {showIcon && Icon ? <Icon aria-hidden=\"true\" /> : null}\n      {children}\n    </span>\n  );\n}\n\nexport { Badge, badgeVariants };\n"
    }
  ],
  "cssVars": {
    "theme": {
      "color-badge-success": "var(--badge-success)",
      "color-badge-success-foreground": "var(--badge-success-foreground)",
      "color-badge-warning": "var(--badge-warning)",
      "color-badge-warning-foreground": "var(--badge-warning-foreground)"
    },
    "light": {
      "badge-success": "oklch(0.527 0.154 150.069)",
      "badge-success-foreground": "oklch(0.985 0 0)",
      "badge-warning": "oklch(0.769 0.188 70.08)",
      "badge-warning-foreground": "oklch(0.205 0 0)"
    },
    "dark": {
      "badge-success": "oklch(0.723 0.219 149.579)",
      "badge-success-foreground": "oklch(0.205 0 0)",
      "badge-warning": "oklch(0.828 0.189 84.429)",
      "badge-warning-foreground": "oklch(0.205 0 0)"
    }
  },
  "meta": {
    "status": "ready",
    "license": "MIT",
    "author": "Design From Labs <https://labs.designfrom.com>",
    "source": {
      "repo": "https://github.com/Design-from-labs/labs",
      "commit": "803b92c1a30e0d513e1cb1ff5ca984b2a5f9b492",
      "path": "examples/badge"
    },
    "credits": [
      "S-003",
      "S-004",
      "S-005",
      "S-006",
      "S-008",
      "S-018"
    ],
    "component": "badge",
    "kind": "component",
    "primitive": "none",
    "iconSet": "phosphor",
    "page": "https://labs.designfrom.com/ui/badge"
  }
}