{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "chip",
  "title": "Chip",
  "type": "registry:primitives",
  "description": "Interactive pill tags with optional remove buttons for active filters, multi-select inputs, and categories.",
  "dependencies": [
    "lucide-react"
  ],
  "usage": "import { Chip } from \"@etherealui/react\"\n\nexport function ChipDemo() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <Chip active onRemove={() => {}}>Status: Active</Chip>\n      <Chip onRemove={() => {}}>Plan: Enterprise</Chip>\n      <Chip>Region: US-East</Chip>\n    </div>\n  )\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/badge.tsx",
      "target": "components/ui/chip.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition-colors select-none\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-zinc-100 text-zinc-700 border border-zinc-200/80 dark:bg-zinc-800 dark:text-zinc-200 dark:border-zinc-700/80\",\n        blue:\n          \"bg-blue-50 text-blue-700 border border-blue-200/80 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/30\",\n        glow:\n          \"bg-blue-50 text-blue-700 border border-blue-200/80 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/30\",\n        emerald:\n          \"bg-emerald-50 text-emerald-700 border border-emerald-200/80 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-500/30\",\n        amber:\n          \"bg-amber-50 text-amber-700 border border-amber-200/80 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-500/30\",\n        rose:\n          \"bg-rose-50 text-rose-700 border border-rose-200/80 dark:bg-rose-500/15 dark:text-rose-300 dark:border-rose-500/30\",\n        outline:\n          \"bg-transparent text-zinc-600 border border-zinc-200 dark:text-zinc-400 dark:border-zinc-800\",\n        mono:\n          \"bg-zinc-100 text-zinc-700 border border-zinc-200 dark:bg-zinc-900 dark:text-zinc-300 dark:border-zinc-800 font-mono text-[11px]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst dotColorMap: Record<string, string> = {\n  default: \"bg-zinc-400\",\n  blue: \"bg-blue-500\",\n  glow: \"bg-blue-500\",\n  emerald: \"bg-emerald-500\",\n  amber: \"bg-amber-500\",\n  rose: \"bg-rose-500\",\n  outline: \"bg-zinc-400\",\n  mono: \"bg-blue-500\",\n}\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {\n  dot?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant = \"default\", dot = false, children, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={cn(badgeVariants({ variant, className }))}\n        {...props}\n      >\n        {dot && (\n          <span\n            className={cn(\n              \"h-1.5 w-1.5 rounded-full shrink-0\",\n              dotColorMap[variant || \"default\"]\n            )}\n          />\n        )}\n        {children}\n      </span>\n    )\n  }\n)\nBadge.displayName = \"Badge\"\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n  onRemove?: () => void\n  active?: boolean\n}\n\nconst Chip = React.forwardRef<HTMLSpanElement, ChipProps>(\n  ({ className, children, onRemove, active = false, ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors\",\n        active\n          ? \"border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/15 dark:text-blue-300\"\n          : \"border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          className=\"rounded-full p-0.5 text-zinc-400 hover:bg-zinc-200/60 hover:text-zinc-700 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 cursor-pointer\"\n        >\n          <X className=\"h-3 w-3\" />\n        </button>\n      )}\n    </span>\n  )\n)\nChip.displayName = \"Chip\"\n\nexport { Badge, Chip, badgeVariants }\n"
    }
  ]
}