{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/badge/Badge.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { BadgeVariants } from './badge.variants'\n\n  export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n    variant?: BadgeVariants['variant']\n    /** Allow the label to wrap onto multiple lines instead of clipping. */\n    wrap?: BadgeVariants['wrap']\n    /** Render your own element with the badge's props and styles instead of\n     *  emitting a <span> — the Svelte counterpart of React's `asChild`. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    /** The rendered <span>, via `bind:ref`. Stays null in `child` mode — use\n     *  `bind:this` on your own element there. */\n    ref?: HTMLSpanElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { badgeVariants } from './badge.variants'\n\n  let {\n    class: className,\n    variant,\n    wrap,\n    child,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: BadgeProps = $props()\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'badge',\n    class: cn(badgeVariants({ variant, wrap }), className),\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <span bind:this={ref} {...mergedProps}>{@render children?.()}</span>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/badge/Badge.svelte"
    },
    {
      "path": "packages/registry-svelte/components/badge/badge.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const badgeVariants = cva(\n  // text-overflow/ellipsis cannot apply to a flex container's anonymous text,\n  // so truncation is opt-in via a child span (`<Badge><span class=\"truncate\">\n  // …</span></Badge>`); min-w-0 lets that span shrink inside the flex root.\n  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit max-w-full whitespace-nowrap shrink-0 [&>svg]:size-3 [&>svg]:shrink-0 [&>span]:min-w-0 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors duration-200 overflow-hidden',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',\n        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',\n        destructive:\n          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n        success: 'border-transparent bg-success/10 text-success dark:text-success [a&]:hover:bg-success/20',\n        warning: 'border-transparent bg-warning/10 text-warning dark:text-warning [a&]:hover:bg-warning/20',\n        info: 'border-transparent bg-info/10 text-info dark:text-info [a&]:hover:bg-info/20',\n      },\n      // Allow multi-line labels. rounded-lg + extra leading keeps a wrapped\n      // badge readable instead of a cramped two-line stadium pill.\n      wrap: {\n        true: 'whitespace-normal rounded-lg py-1 leading-snug',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/badge/badge.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/badge/index.ts",
      "content": "export { default as Badge, type BadgeProps } from './Badge.svelte'\nexport { badgeVariants, type BadgeVariants } from './badge.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/badge/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Small inline label for status, counts, or tags — sits beside other content, not as a standalone control. Seven variants: `default`, `secondary`, `destructive`, `outline`, `success`, `warning`, `info`.",
  "categories": [
    "data-display"
  ]
}