// src/components/ui/Chip.tsx import type { HTMLAttributes } from "react"; import { cx } from "@/lib/cx"; import Tooltip from "./Tooltip"; export interface ChipProps extends HTMLAttributes { label: string; count?: number; selected?: boolean; /** Deprecated taxonomy value; pass `replacement` to show the migration target. */ deprecated?: boolean; replacement?: string; onRemove?: () => void; } export default function Chip({ label, count, selected, deprecated, replacement, onRemove, className, ...rest }: ChipProps) { return ( {deprecated && } {label} {deprecated && replacement && ( {" → "} {replacement} )} {count !== undefined && {count}} {onRemove && ( )} ); } export interface ChipGroupProps { values: string[]; /** Chips shown before collapsing into a "+N" overflow chip. */ max?: number; } /** Single-line chip cluster for dense contexts (table cells): never wraps — * overflow collapses into a "+N" chip whose tooltip lists the rest. */ export function ChipGroup({ values, max = 2 }: ChipGroupProps) { const shown = values.slice(0, max); const rest = values.slice(max); return ( {shown.map((v) => ( ))} {rest.length > 0 && ( +{rest.length} )} ); }