# Chip

## Description

Small, compact elements used for tags, filters, categories, and interactive selections. Supports multiple visual styles, sizes, icons, and dismissible functionality for versatile use cases.

## Aliases

- Tag
- Badge
- Label
- Token
- Filter Chip

## Props Breakdown

**Extends:** `HTMLAttributes<HTMLDivElement>` (excluding `style`)

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `type` | `'Bright' \| 'BrightOutline' \| 'Subdued' \| 'SubduedOutline'` | `'Bright'` | No | Visual style variant of the chip |
| `style` | `'A' \| 'B' \| 'C' \| 'D' \| 'E' \| 'F'` | `'A'` | No | Color scheme of the chip |
| `size` | `'Small' \| 'Medium' \| 'Large'` | `'Medium'` | No | Size variant of the chip |
| `corner` | `'Rounded' \| 'Squared'` | `'Rounded'` | No | Corner style of the chip |
| `isDisabled` | `boolean` | `false` | No | Whether the chip is disabled |
| `isDismissible` | `boolean` | `false` | No | Whether the chip can be dismissed/removed |
| `leadingIcon` | `ReactNode` | - | No | Icon displayed before the chip content |
| `trailingIcon` | `ReactNode` | - | No | Icon displayed after the chip content |
| `closeIcon` | `ReactNode` | - | No | Custom close icon for dismissible chips |
| `onClick` | `(event?: MouseEvent<HTMLDivElement>) => void` | - | No | Click event handler |
| `onClose` | `(event?: MouseEvent<HTMLElement>) => void` | - | No | Close event handler for dismissible chips |
| `className` | `string` | - | No | Additional CSS class names |
| `children` | `ReactNode` | - | No | Content of the chip |

Plus all standard HTML div attributes (id, role, aria-*, data-*, etc.) except `style`.

## Examples

### Basic Usage
```tsx
import { Chip } from '@delightui/components';

function BasicExample() {
  return (
    <div className="chip-examples">
      <Chip>JavaScript</Chip>
      <Chip>React</Chip>
      <Chip>TypeScript</Chip>
    </div>
  );
}
```

### Chip Types
```tsx
function TypesExample() {
  return (
    <div className="chip-types">
      <Chip type="Bright">Bright</Chip>
      <Chip type="BrightOutline">Bright Outline</Chip>
      <Chip type="Subdued">Subdued</Chip>
      <Chip type="SubduedOutline">Subdued Outline</Chip>
    </div>
  );
}
```

### Chip Styles (Colors)
```tsx
function StylesExample() {
  return (
    <div className="chip-styles">
      <Chip style="A">Style A</Chip>
      <Chip style="B">Style B</Chip>
      <Chip style="C">Style C</Chip>
      <Chip style="D">Style D</Chip>
      <Chip style="E">Style E</Chip>
      <Chip style="F">Style F</Chip>
    </div>
  );
}
```

### Chip Sizes
```tsx
function SizesExample() {
  return (
    <div className="chip-sizes">
      <Chip size="Small">Small</Chip>
      <Chip size="Medium">Medium</Chip>
      <Chip size="Large">Large</Chip>
    </div>
  );
}
```

### Corner Styles
```tsx
function CornersExample() {
  return (
    <div className="chip-corners">
      <Chip corner="Rounded">Rounded</Chip>
      <Chip corner="Squared">Squared</Chip>
    </div>
  );
}
```

### With Icons
```tsx
import { 
  TagIcon, 
  UserIcon, 
  CalendarIcon,
  HeartIcon
} from '@heroicons/react/24/outline';

function IconsExample() {
  return (
    <div className="chip-icons">
      <Chip leadingIcon={<TagIcon />}>
        Category
      </Chip>
      
      <Chip trailingIcon={<UserIcon />}>
        User
      </Chip>
      
      <Chip 
        leadingIcon={<CalendarIcon />}
        trailingIcon={<HeartIcon />}
      >
        Event
      </Chip>
    </div>
  );
}
```

### Dismissible Chips
```tsx
import { XMarkIcon } from '@heroicons/react/24/outline';

function DismissibleExample() {
  const [tags, setTags] = useState([
    { id: 1, label: 'React' },
    { id: 2, label: 'JavaScript' },
    { id: 3, label: 'TypeScript' },
    { id: 4, label: 'CSS' }
  ]);

  const removeTag = (tagId) => {
    setTags(tags.filter(tag => tag.id !== tagId));
  };

  return (
    <div className="dismissible-chips">
      {tags.map(tag => (
        <Chip
          key={tag.id}
          isDismissible={true}
          onClose={() => removeTag(tag.id)}
          closeIcon={<XMarkIcon />}
        >
          {tag.label}
        </Chip>
      ))}
    </div>
  );
}
```

### Interactive Filter Chips
```tsx
function FilterChipsExample() {
  const [selectedFilters, setSelectedFilters] = useState(['all']);
  
  const filters = [
    { id: 'all', label: 'All Items' },
    { id: 'active', label: 'Active' },
    { id: 'completed', label: 'Completed' },
    { id: 'pending', label: 'Pending' }
  ];

  const toggleFilter = (filterId) => {
    if (filterId === 'all') {
      setSelectedFilters(['all']);
    } else {
      setSelectedFilters(prev => {
        const newFilters = prev.filter(f => f !== 'all');
        return prev.includes(filterId)
          ? newFilters.filter(f => f !== filterId)
          : [...newFilters, filterId];
      });
    }
  };

  return (
    <div className="filter-chips">
      {filters.map(filter => (
        <Chip
          key={filter.id}
          type={selectedFilters.includes(filter.id) ? 'Bright' : 'SubduedOutline'}
          onClick={() => toggleFilter(filter.id)}
          style={selectedFilters.includes(filter.id) ? 'A' : 'B'}
        >
          {filter.label}
        </Chip>
      ))}
    </div>
  );
}
```

### Status Chips
```tsx
import { 
  CheckCircleIcon, 
  ExclamationCircleIcon, 
  ClockIcon,
  XCircleIcon 
} from '@heroicons/react/24/solid';

function StatusChipsExample() {
  const statusItems = [
    { 
      status: 'success', 
      label: 'Completed', 
      icon: <CheckCircleIcon />,
      style: 'C' 
    },
    { 
      status: 'warning', 
      label: 'Pending', 
      icon: <ClockIcon />,
      style: 'E' 
    },
    { 
      status: 'error', 
      label: 'Failed', 
      icon: <XCircleIcon />,
      style: 'D' 
    },
    { 
      status: 'info', 
      label: 'In Progress', 
      icon: <ExclamationCircleIcon />,
      style: 'B' 
    }
  ];

  return (
    <div className="status-chips">
      {statusItems.map(item => (
        <Chip
          key={item.status}
          leadingIcon={item.icon}
          style={item.style}
          type="Bright"
        >
          {item.label}
        </Chip>
      ))}
    </div>
  );
}
```

### Tag Input System
```tsx
import { Input, Button } from '@delightui/components';

function TagInputExample() {
  const [tags, setTags] = useState(['React', 'JavaScript']);
  const [inputValue, setInputValue] = useState('');

  const addTag = () => {
    if (inputValue.trim() && !tags.includes(inputValue.trim())) {
      setTags([...tags, inputValue.trim()]);
      setInputValue('');
    }
  };

  const removeTag = (tagToRemove) => {
    setTags(tags.filter(tag => tag !== tagToRemove));
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      addTag();
    }
  };

  return (
    <div className="tag-input-system">
      <div className="tags-container">
        {tags.map(tag => (
          <Chip
            key={tag}
            isDismissible={true}
            onClose={() => removeTag(tag)}
            type="BrightOutline"
            style="A"
          >
            {tag}
          </Chip>
        ))}
      </div>
      
      <div className="tag-input">
        <Input
          value={inputValue}
          onValueChange={setInputValue}
          onKeyPress={handleKeyPress}
          placeholder="Add a tag..."
        />
        <Button onClick={addTag}>Add</Button>
      </div>
    </div>
  );
}
```

### Disabled States
```tsx
function DisabledExample() {
  return (
    <div className="disabled-chips">
      <Chip isDisabled>Disabled Chip</Chip>
      
      <Chip 
        isDisabled
        leadingIcon={<TagIcon />}
      >
        Disabled with Icon
      </Chip>
      
      <Chip 
        isDisabled
        isDismissible={true}
      >
        Disabled Dismissible
      </Chip>
    </div>
  );
}
```

### Complex Combination
```tsx
function ComplexExample() {
  return (
    <div className="complex-chips">
      <Chip
        type="Bright"
        style="A"
        size="Large"
        corner="Rounded"
        leadingIcon={<UserIcon />}
        trailingIcon={<HeartIcon />}
        onClick={() => console.log('Chip clicked')}
      >
        Featured User
      </Chip>

      <Chip
        type="SubduedOutline"
        style="D"
        size="Small"
        corner="Squared"
        isDismissible={true}
        onClose={() => console.log('Chip dismissed')}
        leadingIcon={<TagIcon />}
      >
        Remove Me
      </Chip>
    </div>
  );
}
```