# Tag

A flexible tag component for labeling, categorization, and status indication. Features include multiple variants, color themes, removable functionality, and size options. Perfect for displaying categories, filters, user selections, and status indicators.

## Installation

```bash
npm install @ticatec/uniface-element
```

## Import

```typescript
import Tag from "@ticatec/uniface-element/Tag";
```

## Basic Usage

```svelte
<script>
  import Tag from "@ticatec/uniface-element/Tag";
  
  function handleRemove() {
    console.log('Tag removed');
  }
</script>

<Tag text="Basic Tag" />
<Tag text="Removable Tag" removable={true} removeHandler={handleRemove} />
<Tag text="Non-removable Tag" removable={false} />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `text` | `string` | `""` | Text content of the tag |
| `size` | `"big" \| "middle" \| "small"` | `"middle"` | Size of the tag |
| `variant` | `"borderless" \| "border" \| "round"` | `"border"` | Visual variant of the tag |
| `removable` | `boolean` | `true` | Whether the tag can be removed |
| `removeHandler` | `MouseClickHandler` | `null` | Callback when remove icon is clicked |
| `color` | `string` | `null` | Color theme (1-12) |
| `style` | `string` | `""` | Additional CSS styles |
| `class` | `string` | `""` | CSS class name |

## Examples

### Basic Tags

```svelte
<script>
  import Tag from "@ticatec/uniface-element/Tag";
</script>

<div class="tag-demo">
  <h3>Basic Tags</h3>
  <div class="tag-group">
    <Tag text="Default" />
    <Tag text="Technology" />
    <Tag text="Design" />
    <Tag text="Development" />
  </div>
</div>

<style>
  .tag-demo {
    margin: 20px;
  }
  
  .tag-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
</style>
```

### Different Sizes

```svelte
<script>
  import Tag from "@ticatec/uniface-element/Tag";
</script>

<div class="size-demo">
  <h3>Tag Sizes</h3>
  
  <div class="size-section">
    <h4>Small Tags</h4>
    <div class="tag-group">
      <Tag text="Small Tag" size="small" />
      <Tag text="Category" size="small" color="1" />
      <Tag text="Label" size="small" color="2" />
    </div>
  </div>
  
  <div class="size-section">
    <h4>Medium Tags (Default)</h4>
    <div class="tag-group">
      <Tag text="Medium Tag" size="middle" />
      <Tag text="Category" size="middle" color="1" />
      <Tag text="Label" size="middle" color="2" />
    </div>
  </div>
  
  <div class="size-section">
    <h4>Large Tags</h4>
    <div class="tag-group">
      <Tag text="Large Tag" size="big" />
      <Tag text="Category" size="big" color="1" />
      <Tag text="Label" size="big" color="2" />
    </div>
  </div>
</div>

<style>
  .size-demo {
    margin: 20px;
  }
  
  .size-section {
    margin-bottom: 20px;
  }
  
  .size-section h4 {
    margin: 12px 0 8px 0;
    font-size: 14px;
    color: #666;
  }
  
  .tag-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
</style>
```

### Different Variants

```svelte
<script>
  import Tag from "@ticatec/uniface-element/Tag";
</script>

<div class="variant-demo">
  <h3>Tag Variants</h3>
  
  <div class="variant-section">
    <h4>Border Variant (Default)</h4>
    <div class="tag-group">
      <Tag text="Border Tag" variant="border" />
      <Tag text="JavaScript" variant="border" color="1" />
      <Tag text="React" variant="border" color="2" />
      <Tag text="Vue" variant="border" color="3" />
    </div>
  </div>
  
  <div class="variant-section">
    <h4>Round Variant</h4>
    <div class="tag-group">
      <Tag text="Round Tag" variant="round" />
      <Tag text="JavaScript" variant="round" color="1" />
      <Tag text="React" variant="round" color="2" />
      <Tag text="Vue" variant="round" color="3" />
    </div>
  </div>
  
  <div class="variant-section">
    <h4>Borderless Variant</h4>
    <div class="tag-group">
      <Tag text="Borderless Tag" variant="borderless" />
      <Tag text="JavaScript" variant="borderless" color="1" />
      <Tag text="React" variant="borderless" color="2" />
      <Tag text="Vue" variant="borderless" color="3" />
    </div>
  </div>
</div>

<style>
  .variant-demo {
    margin: 20px;
  }
  
  .variant-section {
    margin-bottom: 20px;
  }
  
  .variant-section h4 {
    margin: 12px 0 8px 0;
    font-size: 14px;
    color: #666;
  }
  
  .tag-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
</style>
```

### Color Themes

```svelte
<script>
  import Tag from "@ticatec/uniface-element/Tag";
  
  const colorThemes = [
    { color: "1", name: "Blue", description: "Primary actions" },
    { color: "2", name: "Green", description: "Success states" },
    { color: "3", name: "Red", description: "Error states" },
    { color: "4", name: "Yellow", description: "Warning states" },
    { color: "5", name: "Pink", description: "Highlights" },
    { color: "6", name: "Cyan", description: "Information" },
    { color: "7", name: "Orange", description: "Alerts" },
    { color: "8", name: "Amber", description: "Pending states" },
    { color: "9", name: "Indigo", description: "Navigation" },
    { color: "10", name: "Purple", description: "Creative" },
    { color: "11", name: "Lime", description: "Fresh content" },
    { color: "12", name: "Gray", description: "Neutral" }
  ];
</script>

<div class="color-demo">
  <h3>Color Themes</h3>
  
  <div class="color-grid">
    {#each colorThemes as theme}
      <div class="color-item">
        <Tag text={theme.name} color={theme.color} />
        <p class="color-description">{theme.description}</p>
      </div>
    {/each}
  </div>
  
  <h4>All Variants with Color</h4>
  <div class="variant-comparison">
    <div class="variant-row">
      <span class="variant-label">Border:</span>
      <Tag text="Technology" variant="border" color="1" />
      <Tag text="Design" variant="border" color="2" />
      <Tag text="Marketing" variant="border" color="3" />
    </div>
    
    <div class="variant-row">
      <span class="variant-label">Round:</span>
      <Tag text="Technology" variant="round" color="1" />
      <Tag text="Design" variant="round" color="2" />
      <Tag text="Marketing" variant="round" color="3" />
    </div>
    
    <div class="variant-row">
      <span class="variant-label">Borderless:</span>
      <Tag text="Technology" variant="borderless" color="1" />
      <Tag text="Design" variant="borderless" color="2" />
      <Tag text="Marketing" variant="borderless" color="3" />
    </div>
  </div>
</div>

<style>
  .color-demo {
    margin: 20px;
  }
  
  .color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }
  
  .color-item {
    text-align: center;
  }
  
  .color-description {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #666;
  }
  
  .variant-comparison h4 {
    margin: 20px 0 12px 0;
  }
  
  .variant-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
  }
  
  .variant-label {
    min-width: 80px;
    font-size: 14px;
    color: #666;
  }
</style>
```

### Removable Tags

```svelte
<script>
  import Tag from "@ticatec/uniface-element/Tag";
  
  let tags = [
    { id: 1, text: "JavaScript", color: "1" },
    { id: 2, text: "React", color: "2" },
    { id: 3, text: "Vue.js", color: "3" },
    { id: 4, text: "Angular", color: "4" },
    { id: 5, text: "Svelte", color: "5" }
  ];
  
  function removeTag(tagId) {
    tags = tags.filter(tag => tag.id !== tagId);
  }
  
  function addTag() {
    const newTagText = prompt("Enter tag name:");
    if (newTagText) {
      const newTag = {
        id: Date.now(),
        text: newTagText,
        color: String(Math.floor(Math.random() * 12) + 1)
      };
      tags = [...tags, newTag];
    }
  }
</script>

<div class="removable-demo">
  <h3>Removable Tags</h3>
  <p>Hover over tags to see the remove icon</p>
  
  <div class="tag-container">
    {#each tags as tag}
      <Tag 
        text={tag.text} 
        color={tag.color}
        removable={true}
        removeHandler={() => removeTag(tag.id)}
      />
    {/each}
    
    <button class="add-tag-btn" on:click={addTag}>+ Add Tag</button>
  </div>
  
  <div class="tag-count">
    Total tags: {tags.length}
  </div>
</div>

<style>
  .removable-demo {
    margin: 20px;
    max-width: 600px;
  }
  
  .removable-demo p {
    margin: 8px 0 16px 0;
    color: #666;
    font-size: 14px;
  }
  
  .tag-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
  }
  
  .add-tag-btn {
    padding: 4px 12px;
    border: 2px dashed #ccc;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    line-height: 20px;
  }
  
  .add-tag-btn:hover {
    border-color: #007bff;
    color: #007bff;
  }
  
  .tag-count {
    font-size: 14px;
    color: #666;
  }
</style>
```

### Status Tags

```svelte
<script>
  import Tag from "@ticatec/uniface-element/Tag";
  
  const statusItems = [
    { name: "Active Users", status: "online", color: "2", count: 1240 },
    { name: "Pending Orders", status: "pending", color: "4", count: 45 },
    { name: "Failed Requests", status: "error", color: "3", count: 12 },
    { name: "Completed Tasks", status: "success", color: "2", count: 89 },
    { name: "In Review", status: "review", color: "1", count: 23 },
    { name: "Draft Posts", status: "draft", color: "12", count: 7 }
  ];
</script>

<div class="status-demo">
  <h3>Status Indicators</h3>
  
  <div class="status-grid">
    {#each statusItems as item}
      <div class="status-item">
        <div class="status-header">
          <span class="status-name">{item.name}</span>
          <Tag text={item.status} color={item.color} size="small" variant="round" removable={false} />
        </div>
        <div class="status-count">{item.count}</div>
      </div>
    {/each}
  </div>
</div>

<style>
  .status-demo {
    margin: 20px;
  }
  
  .status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
  
  .status-item {
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
  }
  
  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .status-name {
    font-size: 14px;
    color: #333;
  }
  
  .status-count {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
</style>
```

### Tag Input Component

```svelte
<script>
  import Tag from "@ticatec/uniface-element/Tag";
  
  let inputTags = ["frontend", "javascript"];
  let inputValue = "";
  
  function addTag(event) {
    if (event.key === 'Enter' && inputValue.trim()) {
      const newTag = inputValue.trim().toLowerCase();
      if (!inputTags.includes(newTag)) {
        inputTags = [...inputTags, newTag];
      }
      inputValue = "";
    }
  }
  
  function removeInputTag(tagToRemove) {
    inputTags = inputTags.filter(tag => tag !== tagToRemove);
  }
  
  function clearAllTags() {
    inputTags = [];
  }
</script>

<div class="tag-input-demo">
  <h3>Tag Input Component</h3>
  
  <div class="tag-input-container">
    <label for="tag-input">Skills:</label>
    <div class="input-wrapper">
      <div class="tag-display">
        {#each inputTags as tag, index}
          <Tag 
            text={tag} 
            color={String((index % 12) + 1)}
            size="small"
            variant="round"
            removable={true}
            removeHandler={() => removeInputTag(tag)}
          />
        {/each}
        
        <input
          id="tag-input"
          type="text"
          bind:value={inputValue}
          on:keydown={addTag}
          placeholder={inputTags.length === 0 ? "Type and press Enter to add tags" : "Add more..."}
          class="tag-input"
        />
      </div>
      
      <div class="input-actions">
        <button on:click={clearAllTags} disabled={inputTags.length === 0}>
          Clear All
        </button>
      </div>
    </div>
    
    <div class="tag-suggestions">
      <span class="suggestions-label">Suggestions:</span>
      {#each ["react", "vue", "angular", "svelte", "typescript"] as suggestion}
        <button 
          class="suggestion-btn"
          on:click={() => {
            if (!inputTags.includes(suggestion)) {
              inputTags = [...inputTags, suggestion];
            }
          }}
          disabled={inputTags.includes(suggestion)}
        >
          {suggestion}
        </button>
      {/each}
    </div>
  </div>
  
  <div class="output">
    <h4>Current Tags:</h4>
    <pre>{JSON.stringify(inputTags, null, 2)}</pre>
  </div>
</div>

<style>
  .tag-input-demo {
    margin: 20px;
    max-width: 600px;
  }
  
  .tag-input-container {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    background: #fafafa;
  }
  
  .tag-input-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  .input-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  
  .tag-display {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 32px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
  }
  
  .tag-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 120px;
    font-size: 14px;
  }
  
  .tag-input::placeholder {
    color: #999;
  }
  
  .input-actions button {
    padding: 8px 12px;
    border: 1px solid #dc3545;
    background: white;
    color: #dc3545;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
  }
  
  .input-actions button:hover:not(:disabled) {
    background: #dc3545;
    color: white;
  }
  
  .input-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .tag-suggestions {
    margin-top: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .suggestions-label {
    font-size: 12px;
    color: #666;
    margin-right: 8px;
  }
  
  .suggestion-btn {
    padding: 4px 8px;
    border: 1px solid #007bff;
    background: white;
    color: #007bff;
    border-radius: 12px;
    cursor: pointer;
    font-size: 11px;
  }
  
  .suggestion-btn:hover:not(:disabled) {
    background: #007bff;
    color: white;
  }
  
  .suggestion-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .output {
    margin-top: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 4px;
  }
  
  .output h4 {
    margin: 0 0 8px 0;
  }
  
  .output pre {
    margin: 0;
    font-size: 12px;
  }
</style>
```

### Tag Categories

```svelte
<script>
  import Tag from "@ticatec/uniface-element/Tag";
  
  const categories = [
    {
      name: "Technologies",
      color: "1",
      tags: ["JavaScript", "TypeScript", "Python", "React", "Vue.js"]
    },
    {
      name: "Skills",
      color: "2", 
      tags: ["Frontend", "Backend", "DevOps", "UI/UX", "Testing"]
    },
    {
      name: "Interests",
      color: "3",
      tags: ["Open Source", "AI/ML", "Web3", "Mobile", "Gaming"]
    },
    {
      name: "Tools",
      color: "4",
      tags: ["VS Code", "Git", "Docker", "AWS", "Figma"]
    }
  ];
  
  let selectedTags = [];
  
  function toggleTag(tag) {
    if (selectedTags.includes(tag)) {
      selectedTags = selectedTags.filter(t => t !== tag);
    } else {
      selectedTags = [...selectedTags, tag];
    }
  }
</script>

<div class="category-demo">
  <h3>Tag Categories</h3>
  
  <div class="categories">
    {#each categories as category}
      <div class="category-section">
        <div class="category-header">
          <Tag text={category.name} color={category.color} removable={false} variant="round" />
          <span class="tag-count">({category.tags.length})</span>
        </div>
        
        <div class="category-tags">
          {#each category.tags as tag}
            <button 
              class="tag-button"
              class:selected={selectedTags.includes(tag)}
              on:click={() => toggleTag(tag)}
            >
              <Tag 
                text={tag} 
                color={selectedTags.includes(tag) ? category.color : "12"}
                size="small"
                removable={false}
              />
            </button>
          {/each}
        </div>
      </div>
    {/each}
  </div>
  
  <div class="selected-summary">
    <h4>Selected Tags ({selectedTags.length})</h4>
    <div class="selected-tags">
      {#each selectedTags as tag}
        <Tag 
          text={tag} 
          color="1"
          size="small"
          variant="round"
          removable={true}
          removeHandler={() => toggleTag(tag)}
        />
      {/each}
    </div>
  </div>
</div>

<style>
  .category-demo {
    margin: 20px;
    max-width: 800px;
  }
  
  .categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
  }
  
  .category-section {
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
  }
  
  .category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .tag-count {
    font-size: 12px;
    color: #666;
  }
  
  .category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .tag-button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
  }
  
  .tag-button:hover {
    transform: translateY(-1px);
  }
  
  .tag-button.selected {
    transform: scale(1.05);
  }
  
  .selected-summary {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
  }
  
  .selected-summary h4 {
    margin: 0 0 12px 0;
    color: #333;
  }
  
  .selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
</style>
```

## Features

- **Multiple Variants**: Border, round, and borderless styles
- **Size Options**: Small, medium, and large sizes
- **Color Themes**: 12 predefined color themes with semantic meanings
- **Removable Functionality**: Optional remove icon with hover interaction
- **Flexible Styling**: Custom CSS classes and inline styles support
- **Responsive Design**: Adapts to different screen sizes
- **Hover Effects**: Interactive remove icon on hover

## Color Theme Reference

| Color | Theme | Use Case |
|-------|-------|----------|
| 1 | Blue | Primary actions, links, navigation |
| 2 | Green | Success states, completed actions |
| 3 | Red | Error states, critical alerts |
| 4 | Yellow | Warning states, caution |
| 5 | Pink | Highlights, special features |
| 6 | Cyan | Information, tips |
| 7 | Orange | Alerts, notifications |
| 8 | Amber | Pending states, in progress |
| 9 | Indigo | Navigation, secondary actions |
| 10 | Purple | Creative content, premium features |
| 11 | Lime | Fresh content, new items |
| 12 | Gray | Neutral, default states |

## Styling

The Tag component uses CSS custom properties for theming:

```css
:root {
  --uniface-default-text-color: #374151;
  --uniface-primary-border-color: #E2E8F0;
}

/* Custom tag styles */
.uniface-tag {
  /* Container styles */
}

.uniface-tag > div {
  /* Tag content styles */
}

.uniface-tag .uniface-remove-icon {
  /* Remove icon styles */
}
```

## Accessibility

- Proper semantic HTML structure
- Keyboard navigation support for remove functionality
- High contrast color themes
- Screen reader compatible
- Focus indicators for interactive elements

## Best Practices

1. **Color Usage**: Use colors consistently across your application
2. **Removable Tags**: Always provide clear feedback when tags are removed
3. **Tag Limits**: Consider limiting the number of tags for better UX
4. **Responsive Design**: Test tag layouts on different screen sizes
5. **Semantic Meaning**: Use color themes that match their semantic meaning
6. **Performance**: For large lists, consider virtualization

## Browser Support

- Modern browsers with CSS custom properties support
- Compatible with Svelte 5+
- Hover and focus interactions
- Flexbox layout support
- Full TypeScript support

## Related Components

- `Chip` - Interactive chip component with actions
- `Badge` - Small status indicators
- `Label` - Form field labels
- `Button` - Interactive button component