{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "Multi-variant React badge component for Tile UI.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/badge/badge.tsx",
      "type": "registry:ui",
      "target": "components/ui/badge/badge.tsx",
      "content": "import React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { getBadgeStyleKeys } from '../lib/core';\nimport type { BadgeBaseProps } from '../lib/core';\nimport styles from './badge.module.scss';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, BadgeBaseProps {}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className = '', variant = 'default', asChild = false, children, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : 'span';\n\tconst styleKeys = getBadgeStyleKeys(variant);\n\n\tconst classes = [styles[styleKeys.base], styles[styleKeys.variant], className].filter(Boolean).join(' ');\n\n\treturn (\n\t\t<Comp ref={ref} className={classes} {...props}>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n});\n\nBadge.displayName = 'Badge';\n\nexport { Badge };\nexport default Badge;\n"
    },
    {
      "path": "packages/styles/scss/components/badge.module.scss",
      "type": "registry:file",
      "target": "components/ui/badge/badge.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.badge {\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\tflex-shrink: 0;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: $spacing-1;\n\toverflow: hidden;\n\tborder-radius: $radius-full;\n\tborder: var(--tile-badge-border-width, 1px) solid transparent;\n\tpadding: var(--tile-badge-padding, 0.125rem #{$spacing-2});\n\tfont-size: $text-xs;\n\tfont-weight: $font-medium;\n\tline-height: var(--tile-badge-line-height, inherit);\n\twhite-space: nowrap;\n\ttransition:\n\t\tcolor $transition-fast,\n\t\tbox-shadow $transition-fast;\n\toutline: none;\n\n\t&:focus-visible {\n\t\tborder-color: $ring;\n\t\tbox-shadow: 0 0 0 3px color-mix(in srgb, $ring 50%, transparent);\n\t}\n\n\t&[aria-invalid='true'] {\n\t\tborder-color: $destructive;\n\t\tbox-shadow: 0 0 0 3px color-mix(in srgb, $destructive 20%, transparent);\n\t}\n\n\tsvg {\n\t\tpointer-events: none;\n\t\twidth: 0.75rem;\n\t\theight: 0.75rem;\n\t}\n\n\t// 样式变体\n\t&.variantDefault {\n\t\tbackground-color: var(--tile-badge-default-background, #{$primary});\n\t\tcolor: var(--tile-badge-default-color, #{$primary-foreground});\n\n\t\ta:hover & {\n\t\t\tbackground-color: var(--tile-badge-default-hover-background, #{$primary-hover});\n\t\t}\n\t}\n\n\t&.variantSecondary {\n\t\tbackground-color: var(--tile-badge-secondary-background, #{$secondary});\n\t\tcolor: var(--tile-badge-secondary-color, #{$secondary-foreground});\n\n\t\ta:hover & {\n\t\t\tbackground-color: var(--tile-badge-secondary-hover-background, #{$secondary-hover});\n\t\t}\n\t}\n\n\t&.variantDestructive {\n\t\tbackground-color: var(--tile-badge-destructive-background, #{$destructive});\n\t\tcolor: var(--tile-badge-destructive-color, #{$destructive-foreground});\n\n\t\ta:hover & {\n\t\t\tbackground-color: var(--tile-badge-destructive-hover-background, #{$destructive-hover});\n\t\t}\n\t}\n\n\t&.variantOutline {\n\t\tborder-width: var(--tile-badge-outline-border-width, 1px);\n\t\tborder-color: var(--tile-badge-outline-border, #{$border});\n\t\tbackground-color: var(--tile-badge-outline-background, transparent);\n\t\tcolor: $foreground;\n\n\t\ta:hover & {\n\t\t\tbackground-color: $accent;\n\t\t\tcolor: $accent-foreground;\n\t\t}\n\t}\n\n\t&.variantGhost {\n\t\ta:hover & {\n\t\t\tbackground-color: $accent;\n\t\t\tcolor: $accent-foreground;\n\t\t}\n\t}\n\n\t&.variantLink {\n\t\tcolor: $primary;\n\t\ttext-underline-offset: 4px;\n\n\t\ta:hover & {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\ta:hover & {\n\t\toutline: var(--tile-badge-link-hover-outline, none);\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/badge/index.ts",
      "type": "registry:ui",
      "target": "components/ui/badge/index.ts",
      "content": "export { Badge, type BadgeProps } from './badge';\n"
    }
  ]
}