Chip

Cần element tương tác dạng chip?
├─ Action shortcut (smart action) → chip type="assist"
├─ Filter/toggle selection → chip type="filter"
├─ User-entered data (contact, tag) → chip type="input"
├─ Contextual suggestion → chip type="suggestion"
├─ Filled muted background → chip fill="tonal"
└─ Primary accent fill → chip fill="primary"

interface chipProps {
  /** Chip type — maps to M3 chip variants */
  type?: 'assist' | 'filter' | 'input' | 'suggestion';
  /** Fill style */
  fill?: 'outlined' | 'tonal' | 'primary';
  /** Size */
  size?: 'sm' | 'md';
  /** Label text */
  children: ReactNode;
  /** Leading icon (Lucide icon) */
  icon?: ReactNode;
  /** Avatar (for input chip) — URL or ReactNode */
  avatar?: string | ReactNode;
  /** Selected state (filter chip) */
  selected?: boolean;
  /** On select toggle (filter chip) */
  onSelect?: (selected: boolean) => void;
  /** On click (assist, suggestion) */
  onClick?: () => void;
  /** Removable — shows close icon (input chip) */
  removable?: boolean;
  /** On remove callback */
  onRemove?: () => void;
  /** Disabled state */
  disabled?: boolean;
}

<button class="chip chip-assist chip-md" type="button">
    <svg class="chip-icon"><!-- Lucide icon --></svg>
    <span class="chip-label">Add to calendar</span>
</button>

<button class="chip chip-filter chip-md" 
        type="button" 
        role="checkbox" 
        aria-checked="false">
    <span class="chip-checkmark" aria-hidden="true">
        <svg><!-- check icon --></svg>
    </span>
    <span class="chip-label">Frontend</span>
</button>

<!-- Selected state -->
<button class="chip chip-filter chip-md chip-selected" 
        type="button" 
        role="checkbox" 
        aria-checked="true">
    <span class="chip-checkmark" aria-hidden="true">
        <svg><!-- check icon, visible --></svg>
    </span>
    <span class="chip-label">Frontend</span>
</button>

<span class="chip chip-input chip-md">
    <img class="chip-avatar" src="avatar.jpg" alt="John" />
    <span class="chip-label">John Doe</span>
    <button class="chip-close" type="button" aria-label="Remove John Doe">
        <svg><!-- x icon --></svg>
    </button>
</span>

<button class="chip chip-suggestion chip-md" type="button">
    <span class="chip-label">I agree</span>
</button>

<!-- Tonal fill -->
<button class="chip chip-assist chip-md chip-tonal" type="button">
    <span class="chip-label">Tonal action</span>
</button>

<!-- Primary fill -->
<button class="chip chip-filter chip-md chip-primary chip-selected" type="button">
    <span class="chip-label">Active filter</span>
</button>

{/* Assist chips — smart actions */}
<div class="chip-group">
    <chip type="assist" icon={<Calendar />}>Add to calendar</chip>
    <chip type="assist" icon={<Share />}>Share location</chip>
    <chip type="assist" icon={<Map />}>Get directions</chip>
</div>

{/* Filter chips — selectable */}
<div class="chip-group">
    <chip type="filter" selected>Frontend</chip>
    <chip type="filter">Backend</chip>
    <chip type="filter">Design</chip>
    <chip type="filter" selected>In Progress</chip>
</div>

{/* Input chips — user data with remove */}
<div class="chip-group">
    <chip type="input" avatar="john.jpg" removable>John Doe</chip>
    <chip type="input" avatar="jane.jpg" removable>Jane Smith</chip>
</div>

{/* Suggestion chips — contextual */}
<div class="chip-group">
    <chip type="suggestion">I agree</chip>
    <chip type="suggestion">Thanks!</chip>
    <chip type="suggestion">Let me check</chip>
</div>

{/* Fill variants */}
<chip type="assist" fill="tonal" icon={<Star />}>Tonal assist</chip>
<chip type="filter" fill="primary" selected>Primary filter</chip>