{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "Small label for statuses (info, success, warning, danger) or counts, with optional dot.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ui/badge.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst colors = {\n  neutral:\n    \"[--c:var(--icon)] [--c-solid:var(--neutral)] [--c-fg:var(--neutral-foreground)] [--c-subtle:var(--neutral-subtle)] [--c-subtle-fg:var(--neutral-subtle-foreground)] [--c-border:var(--neutral-border)]\",\n  blue: \"[--c:var(--blue)] [--c-solid:var(--blue)] [--c-fg:var(--blue-foreground)] [--c-subtle:var(--blue-subtle)] [--c-subtle-fg:var(--blue-subtle-foreground)] [--c-border:var(--blue-border)]\",\n  violet:\n    \"[--c:var(--violet)] [--c-solid:var(--violet)] [--c-fg:var(--violet-foreground)] [--c-subtle:var(--violet-subtle)] [--c-subtle-fg:var(--violet-subtle-foreground)] [--c-border:var(--violet-border)]\",\n  green:\n    \"[--c:var(--green)] [--c-solid:var(--green)] [--c-fg:var(--green-foreground)] [--c-subtle:var(--green-subtle)] [--c-subtle-fg:var(--green-subtle-foreground)] [--c-border:var(--green-border)]\",\n  lime: \"[--c:var(--lime)] [--c-solid:var(--lime)] [--c-fg:var(--lime-foreground)] [--c-subtle:var(--lime-subtle)] [--c-subtle-fg:var(--lime-subtle-foreground)] [--c-border:var(--lime-border)]\",\n  amber:\n    \"[--c:var(--amber)] [--c-solid:var(--amber)] [--c-fg:var(--amber-foreground)] [--c-subtle:var(--amber-subtle)] [--c-subtle-fg:var(--amber-subtle-foreground)] [--c-border:var(--amber-border)]\",\n  red: \"[--c:var(--red)] [--c-solid:var(--red)] [--c-fg:var(--red-foreground)] [--c-subtle:var(--red-subtle)] [--c-subtle-fg:var(--red-subtle-foreground)] [--c-border:var(--red-border)]\",\n} as const\n\ntype BadgeColor = keyof typeof colors\n\n/** Status colors. Prefer these for statuses so meaning stays consistent across apps. */\nconst statusColor = {\n  neutral: \"neutral\",\n  info: \"blue\",\n  success: \"green\",\n  warning: \"amber\",\n  danger: \"red\",\n} as const satisfies Record<string, BadgeColor>\n\ntype BadgeStatus = keyof typeof statusColor\n\nconst badgeVariants = cva(\n  // Dot: halfway between the solid color and the tinted text, so amber and lime stay 3:1 on white and on their fill.\n  \"[--c-dot:color-mix(in_oklab,var(--c)_50%,var(--c-subtle-fg))] group/badge inline-flex h-5.5 w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-md px-1.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:ring-3 focus-visible:ring-ring/30 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      /** soft for list statuses, solid to stand out, surface for dense tables. */\n      variant: {\n        /** Tinted fill with a hairline ring. The default for statuses in lists. */\n        soft: \"bg-(--c-subtle) text-(--c-subtle-fg) shadow-[inset_0_0_0_1px_var(--c-border)]\",\n        /** Filled. Counts and the one status that must stand out. */\n        solid: \"bg-(--c-solid) text-(--c-fg) shadow-[inset_0_1px_0_0_rgb(255_255_255/0.18)]\",\n        /** White surface, neutral text, colored dot. Quiet, for dense tables. */\n        surface: \"bg-card text-foreground shadow-raised\",\n      },\n      /** Raw palette color. Prefer `status` for statuses. */\n      color: colors,\n      size: {\n        sm: \"h-5 gap-1 px-1.5 text-[11px]\",\n        default: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"soft\",\n      color: \"neutral\",\n      size: \"default\",\n    },\n  }\n)\n\ntype BadgeProps = Omit<React.ComponentProps<\"span\">, \"color\"> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean\n    /** Semantic status. Maps to a palette color; `color` wins when both are set. */\n    status?: BadgeStatus\n    /** Leading status dot. Always shown for the surface variant. */\n    dot?: boolean\n  }\n\nfunction Badge({ className, status = \"neutral\", color, variant = \"soft\", size, dot = false, asChild = false, children, ...props }: BadgeProps) {\n  const Comp = asChild ? Slot.Root : \"span\"\n  const resolved = color ?? statusColor[status]\n  const showDot = !asChild && (dot || variant === \"surface\")\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      data-color={resolved}\n      className={cn(badgeVariants({ variant, color: resolved, size }), className)}\n      {...props}\n    >\n      {showDot && <span aria-hidden className={cn(\"size-1.5 shrink-0 rounded-full\", variant === \"solid\" ? \"bg-current/80\" : \"bg-(--c-dot)\")} />}\n      {children}\n    </Comp>\n  )\n}\n\nexport { Badge, badgeVariants, type BadgeProps, type BadgeStatus, type BadgeColor }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/badge",
  "categories": [
    "primitives",
    "data-display"
  ],
  "type": "registry:ui"
}