{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"badge","type":"registry:ui","title":"Badge","description":"Badge from react-fancy","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/badge\/Badge.colors.ts","content":"\/\/ AUTO-GENERATED by scripts\/gen-badge-colors \u2014 do not edit by hand.\r\n\/\/ Literal Tailwind class strings for every color in the v4 palette so the\r\n\/\/ scanner can detect them in the published dist (template-built names are\r\n\/\/ invisible to Tailwind's JIT). Regenerate after changing the palette.\r\nimport type { Color } from \"..\/..\/utils\/types\";\r\n\r\nexport const badgeSolid: Record<Color, string> = {\r\n  slate: \"bg-slate-600 text-white dark:bg-slate-500\",\r\n  gray: \"bg-gray-600 text-white dark:bg-gray-500\",\r\n  zinc: \"bg-zinc-600 text-white dark:bg-zinc-500\",\r\n  neutral: \"bg-neutral-600 text-white dark:bg-neutral-500\",\r\n  stone: \"bg-stone-600 text-white dark:bg-stone-500\",\r\n  red: \"bg-red-600 text-white dark:bg-red-500\",\r\n  orange: \"bg-orange-600 text-white dark:bg-orange-500\",\r\n  amber: \"bg-amber-400 text-amber-950 dark:bg-amber-300 dark:text-amber-950\",\r\n  yellow: \"bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950\",\r\n  lime: \"bg-lime-400 text-lime-950 dark:bg-lime-300 dark:text-lime-950\",\r\n  green: \"bg-green-600 text-white dark:bg-green-500\",\r\n  emerald: \"bg-emerald-600 text-white dark:bg-emerald-500\",\r\n  teal: \"bg-teal-600 text-white dark:bg-teal-500\",\r\n  cyan: \"bg-cyan-600 text-white dark:bg-cyan-500\",\r\n  sky: \"bg-sky-600 text-white dark:bg-sky-500\",\r\n  blue: \"bg-blue-600 text-white dark:bg-blue-500\",\r\n  indigo: \"bg-indigo-600 text-white dark:bg-indigo-500\",\r\n  violet: \"bg-violet-600 text-white dark:bg-violet-500\",\r\n  purple: \"bg-purple-600 text-white dark:bg-purple-500\",\r\n  fuchsia: \"bg-fuchsia-600 text-white dark:bg-fuchsia-500\",\r\n  pink: \"bg-pink-600 text-white dark:bg-pink-500\",\r\n  rose: \"bg-rose-600 text-white dark:bg-rose-500\",\r\n};\r\n\r\nexport const badgeOutline: Record<Color, string> = {\r\n  slate: \"border border-slate-300 text-slate-700 dark:border-slate-600 dark:text-slate-300\",\r\n  gray: \"border border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-300\",\r\n  zinc: \"border border-zinc-300 text-zinc-700 dark:border-zinc-600 dark:text-zinc-300\",\r\n  neutral: \"border border-neutral-300 text-neutral-700 dark:border-neutral-600 dark:text-neutral-300\",\r\n  stone: \"border border-stone-300 text-stone-700 dark:border-stone-600 dark:text-stone-300\",\r\n  red: \"border border-red-300 text-red-700 dark:border-red-600 dark:text-red-300\",\r\n  orange: \"border border-orange-300 text-orange-700 dark:border-orange-600 dark:text-orange-300\",\r\n  amber: \"border border-amber-300 text-amber-700 dark:border-amber-600 dark:text-amber-300\",\r\n  yellow: \"border border-yellow-300 text-yellow-700 dark:border-yellow-600 dark:text-yellow-300\",\r\n  lime: \"border border-lime-300 text-lime-700 dark:border-lime-600 dark:text-lime-300\",\r\n  green: \"border border-green-300 text-green-700 dark:border-green-600 dark:text-green-300\",\r\n  emerald: \"border border-emerald-300 text-emerald-700 dark:border-emerald-600 dark:text-emerald-300\",\r\n  teal: \"border border-teal-300 text-teal-700 dark:border-teal-600 dark:text-teal-300\",\r\n  cyan: \"border border-cyan-300 text-cyan-700 dark:border-cyan-600 dark:text-cyan-300\",\r\n  sky: \"border border-sky-300 text-sky-700 dark:border-sky-600 dark:text-sky-300\",\r\n  blue: \"border border-blue-300 text-blue-700 dark:border-blue-600 dark:text-blue-300\",\r\n  indigo: \"border border-indigo-300 text-indigo-700 dark:border-indigo-600 dark:text-indigo-300\",\r\n  violet: \"border border-violet-300 text-violet-700 dark:border-violet-600 dark:text-violet-300\",\r\n  purple: \"border border-purple-300 text-purple-700 dark:border-purple-600 dark:text-purple-300\",\r\n  fuchsia: \"border border-fuchsia-300 text-fuchsia-700 dark:border-fuchsia-600 dark:text-fuchsia-300\",\r\n  pink: \"border border-pink-300 text-pink-700 dark:border-pink-600 dark:text-pink-300\",\r\n  rose: \"border border-rose-300 text-rose-700 dark:border-rose-600 dark:text-rose-300\",\r\n};\r\n\r\nexport const badgeSoft: Record<Color, string> = {\r\n  slate: \"bg-slate-100 text-slate-700 dark:bg-slate-900\/30 dark:text-slate-300\",\r\n  gray: \"bg-gray-100 text-gray-700 dark:bg-gray-900\/30 dark:text-gray-300\",\r\n  zinc: \"bg-zinc-100 text-zinc-700 dark:bg-zinc-900\/30 dark:text-zinc-300\",\r\n  neutral: \"bg-neutral-100 text-neutral-700 dark:bg-neutral-900\/30 dark:text-neutral-300\",\r\n  stone: \"bg-stone-100 text-stone-700 dark:bg-stone-900\/30 dark:text-stone-300\",\r\n  red: \"bg-red-100 text-red-700 dark:bg-red-900\/30 dark:text-red-300\",\r\n  orange: \"bg-orange-100 text-orange-700 dark:bg-orange-900\/30 dark:text-orange-300\",\r\n  amber: \"bg-amber-100 text-amber-700 dark:bg-amber-900\/30 dark:text-amber-300\",\r\n  yellow: \"bg-yellow-100 text-yellow-700 dark:bg-yellow-900\/30 dark:text-yellow-300\",\r\n  lime: \"bg-lime-100 text-lime-700 dark:bg-lime-900\/30 dark:text-lime-300\",\r\n  green: \"bg-green-100 text-green-700 dark:bg-green-900\/30 dark:text-green-300\",\r\n  emerald: \"bg-emerald-100 text-emerald-700 dark:bg-emerald-900\/30 dark:text-emerald-300\",\r\n  teal: \"bg-teal-100 text-teal-700 dark:bg-teal-900\/30 dark:text-teal-300\",\r\n  cyan: \"bg-cyan-100 text-cyan-700 dark:bg-cyan-900\/30 dark:text-cyan-300\",\r\n  sky: \"bg-sky-100 text-sky-700 dark:bg-sky-900\/30 dark:text-sky-300\",\r\n  blue: \"bg-blue-100 text-blue-700 dark:bg-blue-900\/30 dark:text-blue-300\",\r\n  indigo: \"bg-indigo-100 text-indigo-700 dark:bg-indigo-900\/30 dark:text-indigo-300\",\r\n  violet: \"bg-violet-100 text-violet-700 dark:bg-violet-900\/30 dark:text-violet-300\",\r\n  purple: \"bg-purple-100 text-purple-700 dark:bg-purple-900\/30 dark:text-purple-300\",\r\n  fuchsia: \"bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900\/30 dark:text-fuchsia-300\",\r\n  pink: \"bg-pink-100 text-pink-700 dark:bg-pink-900\/30 dark:text-pink-300\",\r\n  rose: \"bg-rose-100 text-rose-700 dark:bg-rose-900\/30 dark:text-rose-300\",\r\n};\r\n\r\nexport const badgeDot: Record<Color, string> = {\r\n  slate: \"bg-slate-500\",\r\n  gray: \"bg-gray-500\",\r\n  zinc: \"bg-zinc-500\",\r\n  neutral: \"bg-neutral-500\",\r\n  stone: \"bg-stone-500\",\r\n  red: \"bg-red-500\",\r\n  orange: \"bg-orange-500\",\r\n  amber: \"bg-amber-500\",\r\n  yellow: \"bg-yellow-500\",\r\n  lime: \"bg-lime-500\",\r\n  green: \"bg-green-500\",\r\n  emerald: \"bg-emerald-500\",\r\n  teal: \"bg-teal-500\",\r\n  cyan: \"bg-cyan-500\",\r\n  sky: \"bg-sky-500\",\r\n  blue: \"bg-blue-500\",\r\n  indigo: \"bg-indigo-500\",\r\n  violet: \"bg-violet-500\",\r\n  purple: \"bg-purple-500\",\r\n  fuchsia: \"bg-fuchsia-500\",\r\n  pink: \"bg-pink-500\",\r\n  rose: \"bg-rose-500\",\r\n};\r\n","type":"registry:ui","target":"components\/fancy\/badge\/Badge.colors.ts"},{"path":"components\/fancy\/badge\/Badge.tsx","content":"import { forwardRef } from \"react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport type { BadgeProps } from \".\/Badge.types\";\r\nimport { badgeSolid, badgeOutline, badgeSoft, badgeDot } from \".\/Badge.colors\";\r\n\r\ntype BadgeVariant = NonNullable<BadgeProps[\"variant\"]>;\r\ntype BadgeSize = NonNullable<BadgeProps[\"size\"]>;\r\n\r\n\/\/ Full Tailwind v4 palette \u2014 see Badge.colors.ts (generated literal class maps).\r\nconst variantMap: Record<BadgeVariant, typeof badgeSoft> = {\r\n  solid: badgeSolid,\r\n  outline: badgeOutline,\r\n  soft: badgeSoft,\r\n};\r\n\r\nconst sizeClasses: Record<BadgeSize, string> = {\r\n  sm: \"text-xs px-1.5 py-0.5\",\r\n  md: \"text-sm px-2 py-0.5\",\r\n  lg: \"text-base px-2.5 py-1\",\r\n};\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\r\n  (\r\n    {\r\n      color = \"zinc\",\r\n      variant = \"soft\",\r\n      size = \"md\",\r\n      dot = false,\r\n      className,\r\n      children,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    return (\r\n      <span\r\n        ref={ref}\r\n        data-react-fancy-badge=\"\"\r\n        className={cn(\r\n          \"inline-flex items-center gap-1.5 rounded-full font-medium\",\r\n          sizeClasses[size],\r\n          variantMap[variant][color],\r\n          className,\r\n        )}\r\n        {...props}\r\n      >\r\n        {dot && (\r\n          <span\r\n            className={cn(\r\n              \"inline-block h-1.5 w-1.5 rounded-full\",\r\n              badgeDot[color],\r\n            )}\r\n          \/>\r\n        )}\r\n        {children}\r\n      <\/span>\r\n    );\r\n  },\r\n);\r\n\r\nBadge.displayName = \"Badge\";\r\n","type":"registry:ui","target":"components\/fancy\/badge\/Badge.tsx"},{"path":"components\/fancy\/badge\/Badge.types.ts","content":"import type { HTMLAttributes } from \"react\";\r\nimport type { Color } from \"..\/..\/utils\/types\";\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  \/** Badge color \u2014 any color in the Tailwind v4 palette. *\/\r\n  color?: Color;\r\n  \/** Visual variant *\/\r\n  variant?: \"solid\" | \"outline\" | \"soft\";\r\n  \/** Badge size *\/\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  \/** Show a small dot indicator before text *\/\r\n  dot?: boolean;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/badge\/Badge.types.ts"},{"path":"components\/fancy\/badge\/index.ts","content":"export { Badge } from \".\/Badge\";\r\nexport type { BadgeProps } from \".\/Badge.types\";\r\n","type":"registry:ui","target":"components\/fancy\/badge\/index.ts"}]}