{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"badge","type":"registry:ui","title":"Badge","description":"A short pill of status text in five treatments and two sizes, with native span attributes passed through","author":"fancy-ui <https://fancy-ui.rama.app>","categories":["data-display"],"registryDependencies":["https://fancy-ui.rama.app/r/utils.json"],"files":[{"path":"react/src/components/badge/Badge.tsx","content":"\"use client\";\n\nimport type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils\";\n\nexport type BadgeVariant = \"default\" | \"secondary\" | \"outline\" | \"destructive\" | \"success\";\nexport type BadgeSize = \"sm\" | \"md\";\n\n/**\n * `BadgeProps` plus every native attribute and listener of the `<span>` it\n * renders. Own props win.\n */\nexport interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n\t/** Visual treatment. Always pair it with a visible word: colour is never the message. */\n\tvariant?: BadgeVariant;\n\t/** Compact (`sm`) or regular (`md`). */\n\tsize?: BadgeSize;\n\t/** The label. */\n\tchildren?: ReactNode;\n\t/** Additional CSS classes. */\n\tclassName?: string;\n}\n\n// Every variant carries a border (transparent where it has no outline) so\n// they all share one height.\nconst VARIANT_CLASSES: Record<BadgeVariant, string> = {\n\tdefault: \"border-transparent bg-primary text-primary-foreground\",\n\tsecondary: \"border-transparent bg-secondary text-secondary-foreground\",\n\toutline: \"border-border text-foreground\",\n\tdestructive: \"border-destructive/35 bg-destructive/10 text-destructive\",\n\tsuccess: \"border-emerald-500/30 bg-emerald-500/10 text-emerald-800 dark:text-emerald-300\",\n};\n\nconst SIZE_CLASSES: Record<BadgeSize, string> = {\n\tsm: \"px-1.5 py-px text-[0.6875rem] leading-4\",\n\tmd: \"px-2 py-0.5 text-xs leading-4\",\n};\n\nexport function Badge({\n\tvariant = \"default\",\n\tsize = \"md\",\n\tchildren,\n\tclassName,\n\t...restProps\n}: BadgeProps) {\n\treturn (\n\t\t<span\n\t\t\t{...restProps}\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex items-center gap-1 rounded-full border font-medium whitespace-nowrap\",\n\t\t\t\tSIZE_CLASSES[size],\n\t\t\t\tVARIANT_CLASSES[variant],\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n","type":"registry:ui","target":"@ui/fancy/components/badge/Badge.tsx"},{"path":"react/src/components/badge/index.ts","content":"\"use client\";\n\nexport { Badge } from \"./Badge\";\nexport type { BadgeProps, BadgeVariant, BadgeSize } from \"./Badge\";\n","type":"registry:ui","target":"@ui/fancy/components/badge/index.ts"}],"meta":{"license":"MIT","package":"fancy-ui-react","version":"0.7.0","source":"https://fancy-ui.rama.app/docs/components/badge?framework=react"}}