Chip

1'use client';
2 
3import { cva, type VariantProps } from 'class-variance-authority';
4import { CheckCircle, X } from 'lucide-react';
5import { ComponentProps, ReactNode } from 'react';
6 
7import { Label2 } from '@/components/ui/typography';
8import { cn } from '@/lib/utils';
9 
10/**
11 * Creates an onClick handler for a chip's dismiss button that stops event
12 * propagation (so the parent chip click doesn't fire) and no-ops when disabled.
13 */
14function createDismissHandler(onDismiss: () => void, disabled?: boolean) {
15  return (e: React.MouseEvent<HTMLButtonElement>) => {
16    e.stopPropagation();
17    if (!disabled) onDismiss();
18  };
19}
20 
21/*
22 * UX4G chip: border-radius 8px, padding 6px 12px, font-size 14px, font-weight 400,
23 * hover bg #FAEFFF (light purple tint), selected behaves like filled.
24 */
25const CHIP_VARIANTS = cva(
26  'inline-flex cursor-pointer items-center gap-1.5 whitespace-nowrap transition-[color,background-color,border-color,box-shadow] duration-150 ease-in-out focus-visible:outline-none focus-visible:ring-0',
27  {
28    variants: {
29      theme: {
30        primary:
31          '[--chip-bg:var(--color-primary)] [--chip-bg-tonal:var(--color-primary-100)] [--chip-border-color:var(--color-primary)] [--chip-text-color:var(--color-primary)] focus-visible:shadow-focus-primary',
32        secondary:
33          '[--chip-bg:var(--color-secondary)] [--chip-bg-tonal:var(--color-secondary-100)] [--chip-border-color:var(--color-secondary)] [--chip-text-color:var(--color-secondary)] focus-visible:shadow-focus-secondary',
34        success:
35          '[--chip-bg:var(--color-success)] [--chip-bg-tonal:var(--color-success-100)] [--chip-border-color:var(--color-success)] [--chip-text-color:var(--color-success)] focus-visible:shadow-focus-success',
36        danger:
37          '[--chip-bg:var(--color-danger)] [--chip-bg-tonal:var(--color-danger-100)] [--chip-border-color:var(--color-danger)] [--chip-text-color:var(--color-danger)] focus-visible:shadow-focus-danger',
38        warning:
39          '[--chip-bg:var(--color-warning)] [--chip-bg-tonal:var(--color-warning-100)] [--chip-border-color:var(--color-warning)] [--chip-text-color:var(--color-warning)] focus-visible:shadow-focus-warning',
40        info: '[--chip-bg:var(--color-info)] [--chip-bg-tonal:var(--color-info-100)] [--chip-border-color:var(--color-info)] [--chip-text-color:var(--color-info)]',
41        neutral:
42// … truncated