@umbra.ui/core 0.1.0

package/src/components/inputs/Tags/README.md

@@ -0,0 +1,897 @@
+# Tags Components
+
+A comprehensive tag management system built with Vue 3 Composition API and TypeScript. The Tags components provide a powerful interface for creating, selecting, and managing tags with advanced features like real-time search, keyboard navigation, custom styling, and multiple overflow modes.
+
+## Installation/Import
+
+```typescript
+import { TagBar, TagPicker, TagCreation } from "@umbra-ui/core";
+import type { TagItem, TagStyleConfig } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+- @umbra-ui/core (for IconButton and ColorPicker components)
+- @umbra-ui/colors (for color schemes)
+- @floating-ui/vue (for positioning)
+- gsap (for animations)
+- tinycolor2 (for color manipulation)
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { TagBar } from "@umbra-ui/core";
+import type { TagItem } from "@umbra-ui/core";
+
+const allTags = ref<TagItem[]>([
+  { id: "1", title: "Vue.js" },
+  { id: "2", title: "TypeScript" },
+  { id: "3", title: "Frontend" },
+]);
+
+const selectedTags = ref<TagItem[]>([]);
+const query = ref("");
+const matchIndex = ref(-1);
+
+const handleTagSelect = (tag: TagItem) => {
+  selectedTags.value.push(tag);
+};
+
+const handleTagRemove = (tag: TagItem) => {
+  const index = selectedTags.value.findIndex((t) => t.id === tag.id);
+  if (index > -1) {
+    selectedTags.value.splice(index, 1);
+  }
+};
+
+const handleTagCreate = (title: string) => {
+  const newTag: TagItem = {
+    id: Date.now().toString(),
+    title: title.trim(),
+  };
+  allTags.value.push(newTag);
+  selectedTags.value.push(newTag);
+};
+</script>
+
+<template>
+  <div>
+    <TagBar
+      :all-tags="allTags"
+      :selected-tags="selectedTags"
+      v-model:query="query"
+      v-model:match-index="matchIndex"
+      placeholder="Add tags..."
+      overflow="fixed"
+      :allow-editing="true"
+      @tag-select="handleTagSelect"
+      @tag-remove="handleTagRemove"
+      @tag-create="handleTagCreate"
+    />
+  </div>
+</template>
+```
+
+## Components
+
+### TagBar
+
+The main tag management component with input field and tag display.
+
+#### Props
+
+| Prop Name      | Type                          | Required | Default      | Description                                  |
+| -------------- | ----------------------------- | -------- | ------------ | -------------------------------------------- |
+| `allTags`      | `TagItem[]`                   | No       | `[]`         | Array of all available tags                  |
+| `selectedTags` | `TagItem[]`                   | No       | `[]`         | Array of currently selected tags             |
+| `query`        | `string`                      | No       | `""`         | Current search query                         |
+| `matchIndex`   | `number`                      | No       | `-1`         | Index of currently highlighted match         |
+| `placeholder`  | `string`                      | No       | `"ADD TAGS"` | Placeholder text for the input field         |
+| `overflow`     | `"full" \| "fixed" \| "list"` | No       | `"fixed"`    | How tags overflow when they exceed container |
+| `allowEditing` | `boolean`                     | No       | `true`       | Whether tags can be edited/removed           |
+
+#### Events
+
+| Event Name          | Payload Type | Description                              |
+| ------------------- | ------------ | ---------------------------------------- |
+| `update:query`      | `string`     | Emitted when the search query changes    |
+| `update:matchIndex` | `number`     | Emitted when the match index changes     |
+| `tag-create`        | `string`     | Emitted when a new tag should be created |
+| `tag-select`        | `TagItem`    | Emitted when a tag is selected           |
+| `tag-remove`        | `TagItem`    | Emitted when a tag is removed            |
+| `tag-reorder`       | `TagItem[]`  | Emitted when tags are reordered          |
+
+### TagPicker
+
+The dropdown picker component for selecting tags (used internally by TagBar).
+
+#### Props
+
+| Prop Name      | Type        | Required | Description                          |
+| -------------- | ----------- | -------- | ------------------------------------ |
+| `allTags`      | `TagItem[]` | Yes      | Array of all available tags          |
+| `selectedTags` | `TagItem[]` | Yes      | Array of currently selected tags     |
+| `query`        | `string`    | Yes      | Current search query                 |
+| `matchIndex`   | `number`    | Yes      | Index of currently highlighted match |
+| `canCreateTag` | `boolean`   | No       | Whether a new tag can be created     |
+
+#### Events
+
+| Event Name          | Payload Type | Description                              |
+| ------------------- | ------------ | ---------------------------------------- |
+| `tag-select`        | `TagItem`    | Emitted when a tag is selected           |
+| `tag-create`        | `string`     | Emitted when a new tag should be created |
+| `update:query`      | `string`     | Emitted when the search query changes    |
+| `update:matchIndex` | `number`     | Emitted when the match index changes     |
+| `quit`              | `void`       | Emitted when the picker should be closed |
+
+### TagCreation
+
+A component for creating new tags with color selection.
+
+#### Props
+
+| Prop Name        | Type       | Required | Default | Description                                 |
+| ---------------- | ---------- | -------- | ------- | ------------------------------------------- |
+| `containerID`    | `string`   | Yes      | -       | Unique ID for the container                 |
+| `initialColor`   | `Color`    | No       | Gray    | Initial color for the new tag               |
+| `existingTitles` | `string[]` | No       | `[]`    | Array of existing tag titles for validation |
+
+#### Events
+
+| Event Name | Payload Type    | Description                                  |
+| ---------- | --------------- | -------------------------------------------- |
+| `onCreate` | `string, Color` | Emitted when a tag is created (title, color) |
+
+## TagItem Interface
+
+```typescript
+interface TagItem {
+  id: string;
+  title: string;
+  style?: TagStyleConfig;
+}
+```
+
+## TagStyleConfig Interface
+
+```typescript
+interface TagStyleConfig {
+  // Direct CSS properties for full control
+  backgroundColor?: string;
+  color?: string;
+  border?: string;
+  borderRadius?: string;
+  padding?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  boxShadow?: string;
+
+  // Optional hover state
+  hover?: {
+    backgroundColor?: string;
+    color?: string;
+    border?: string;
+    transform?: string;
+    boxShadow?: string;
+  };
+
+  // Helper properties for convenience
+  size?: "sm" | "md" | "lg";
+  colorScheme?: string; // Radix color name or hex
+}
+```
+
+## CSS Customization
+
+The Tags components use CSS custom properties for theming and customization:
+
+### TagBar Variables
+
+```css
+/* TagBar Container */
+--tagbar-bg: var(--tagbar-background);
+--tagbar-border: var(--tagbar-border-color);
+--tagbar-text: var(--tagbar-text-color);
+
+/* TagBar Field */
+--tagbar-field-bg: var(--tagbar-field-background);
+--tagbar-field-text: var(--tagbar-field-text-color);
+
+/* TagBar List */
+--tagbar-list-border: var(--tagbar-list-border-color);
+```
+
+### TagPicker Variables
+
+```css
+/* TagPicker Container */
+--tagpicker-container-bg: var(--tagpicker-container-background);
+--tagpicker-container-shadow: var(--tagpicker-container-shadow-color);
+--tagpicker-container-inset-shadow: var(
+  --tagpicker-container-inset-shadow-color
+);
+
+/* TagPicker Subheader */
+--tagpicker-subheader-bg: var(--tagpicker-subheader-background);
+--tagpicker-subheader-border: var(--tagpicker-subheader-border-color);
+--tagpicker-subheader-text: var(--tagpicker-subheader-text-color);
+--tagpicker-subheader-label: var(--tagpicker-subheader-label-color);
+
+/* TagPicker Tags */
+--tagpicker-tag-border: var(--tagpicker-tag-border-color);
+--tagpicker-tag-text: var(--tagpicker-tag-text-color);
+--tagpicker-tag-hover-bg: var(--tagpicker-tag-hover-background);
+--tagpicker-tag-selected-bg: var(--tagpicker-tag-selected-background);
+
+/* TagPicker Create */
+--tagpicker-create-bg: var(--tagpicker-create-background);
+--tagpicker-create-hover-bg: var(--tagpicker-create-hover-background);
+--tagpicker-create-selected-bg: var(--tagpicker-create-selected-background);
+--tagpicker-create-border: var(--tagpicker-create-border-color);
+--tagpicker-create-text: var(--tagpicker-create-text-color);
+--tagpicker-create-error-text: var(--tagpicker-create-error-text-color);
+
+/* TagPicker Empty State */
+--tagpicker-empty-text: var(--tagpicker-empty-text-color);
+```
+
+## Key Features
+
+### Tag Management
+
+- **Real-time Search**: Filter tags as you type with instant results
+- **Keyboard Navigation**: Full keyboard support with arrow keys and Enter
+- **Tag Creation**: Create new tags on-the-fly with custom colors
+- **Tag Removal**: Click tags to remove them from selection
+- **Duplicate Prevention**: Prevents adding duplicate tags
+
+### Overflow Modes
+
+- **Full**: Horizontal scroll with hidden scrollbar
+- **Fixed**: Tags wrap to multiple lines
+- **List**: Each tag on its own row with borders
+
+### Styling System
+
+- **Custom Styles**: Full CSS property control for each tag
+- **Color Schemes**: Support for Radix colors and custom hex colors
+- **Size Presets**: Small, medium, and large size options
+- **Hover Effects**: Customizable hover states
+- **Theme Support**: Light and dark mode compatibility
+
+### User Experience
+
+- **Smooth Animations**: GSAP-powered transitions and animations
+- **Floating Positioning**: Smart positioning using Floating UI
+- **Responsive Design**: Adapts to different screen sizes
+- **Accessibility**: Full keyboard navigation and screen reader support
+
+## Examples
+
+### Basic Tag Management
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { TagBar } from "@umbra-ui/core";
+import type { TagItem } from "@umbra-ui/core";
+
+const allTags = ref<TagItem[]>([
+  { id: "1", title: "JavaScript" },
+  { id: "2", title: "Vue.js" },
+  { id: "3", title: "TypeScript" },
+  { id: "4", title: "Frontend" },
+  { id: "5", title: "Backend" },
+  { id: "6", title: "Full Stack" },
+]);
+
+const selectedTags = ref<TagItem[]>([]);
+const query = ref("");
+const matchIndex = ref(-1);
+
+const handleTagSelect = (tag: TagItem) => {
+  selectedTags.value.push(tag);
+};
+
+const handleTagRemove = (tag: TagItem) => {
+  const index = selectedTags.value.findIndex((t) => t.id === tag.id);
+  if (index > -1) {
+    selectedTags.value.splice(index, 1);
+  }
+};
+
+const handleTagCreate = (title: string) => {
+  const newTag: TagItem = {
+    id: Date.now().toString(),
+    title: title.trim(),
+  };
+  allTags.value.push(newTag);
+  selectedTags.value.push(newTag);
+};
+</script>
+
+<template>
+  <div class="basic-tags">
+    <h3>Basic Tag Management</h3>
+
+    <TagBar
+      :all-tags="allTags"
+      :selected-tags="selectedTags"
+      v-model:query="query"
+      v-model:match-index="matchIndex"
+      placeholder="Add skills..."
+      overflow="fixed"
+      :allow-editing="true"
+      @tag-select="handleTagSelect"
+      @tag-remove="handleTagRemove"
+      @tag-create="handleTagCreate"
+    />
+
+    <div v-if="selectedTags.length > 0" class="selected-tags">
+      <h4>Selected Tags ({{ selectedTags.length }})</h4>
+      <ul>
+        <li v-for="tag in selectedTags" :key="tag.id">
+          {{ tag.title }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style module>
+.basic-tags {
+  max-width: 600px;
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+}
+
+.selected-tags {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 0.25rem;
+}
+
+.selected-tags h4 {
+  margin: 0 0 0.5rem 0;
+  color: #333;
+}
+
+.selected-tags ul {
+  margin: 0;
+  padding-left: 1.5rem;
+}
+
+.selected-tags li {
+  margin-bottom: 0.25rem;
+  color: #666;
+}
+</style>
+```
+
+### Styled Tags with Custom Colors
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { TagBar, createStyledTag } from "@umbra-ui/core";
+import type { TagItem, TagStyleConfig } from "@umbra-ui/core";
+
+const allTags = ref<TagItem[]>([
+  createStyledTag("1", "Frontend", { colorScheme: "blue", size: "md" }),
+  createStyledTag("2", "Backend", { colorScheme: "green", size: "md" }),
+  createStyledTag("3", "Database", { colorScheme: "orange", size: "md" }),
+  createStyledTag("4", "DevOps", { colorScheme: "purple", size: "md" }),
+  createStyledTag("5", "UI/UX", { colorScheme: "pink", size: "md" }),
+  createStyledTag("6", "Mobile", { colorScheme: "cyan", size: "md" }),
+]);
+
+const selectedTags = ref<TagItem[]>([]);
+const query = ref("");
+const matchIndex = ref(-1);
+
+const handleTagSelect = (tag: TagItem) => {
+  selectedTags.value.push(tag);
+};
+
+const handleTagRemove = (tag: TagItem) => {
+  const index = selectedTags.value.findIndex((t) => t.id === tag.id);
+  if (index > -1) {
+    selectedTags.value.splice(index, 1);
+  }
+};
+
+const handleTagCreate = (title: string) => {
+  const newTag = createStyledTag(Date.now().toString(), title.trim(), {
+    colorScheme: "gray",
+    size: "md",
+  });
+  allTags.value.push(newTag);
+  selectedTags.value.push(newTag);
+};
+</script>
+
+<template>
+  <div class="styled-tags">
+    <h3>Styled Tags with Custom Colors</h3>
+
+    <TagBar
+      :all-tags="allTags"
+      :selected-tags="selectedTags"
+      v-model:query="query"
+      v-model:match-index="matchIndex"
+      placeholder="Add technology tags..."
+      overflow="full"
+      :allow-editing="true"
+      @tag-select="handleTagSelect"
+      @tag-remove="handleTagRemove"
+      @tag-create="handleTagCreate"
+    />
+
+    <div class="tag-info">
+      <p>Available tags: {{ allTags.length }}</p>
+      <p>Selected tags: {{ selectedTags.length }}</p>
+    </div>
+  </div>
+</template>
+
+<style module>
+.styled-tags {
+  max-width: 600px;
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+}
+
+.tag-info {
+  margin-top: 1rem;
+  display: flex;
+  gap: 2rem;
+  color: #666;
+  font-size: 0.875rem;
+}
+</style>
+```
+
+### Form Integration
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { TagBar } from "@umbra-ui/core";
+import type { TagItem } from "@umbra-ui/core";
+
+interface ProjectForm {
+  title: string;
+  description: string;
+  tags: TagItem[];
+}
+
+const form = ref<ProjectForm>({
+  title: "",
+  description: "",
+  tags: [],
+});
+
+const allTags = ref<TagItem[]>([
+  { id: "1", title: "Web Development" },
+  { id: "2", title: "Mobile App" },
+  { id: "3", title: "API" },
+  { id: "4", title: "Database" },
+  { id: "5", title: "UI/UX" },
+  { id: "6", title: "Testing" },
+]);
+
+const query = ref("");
+const matchIndex = ref(-1);
+
+const isFormValid = computed(() => {
+  return (
+    form.value.title && form.value.description && form.value.tags.length > 0
+  );
+});
+
+const handleTagSelect = (tag: TagItem) => {
+  form.value.tags.push(tag);
+};
+
+const handleTagRemove = (tag: TagItem) => {
+  const index = form.value.tags.findIndex((t) => t.id === tag.id);
+  if (index > -1) {
+    form.value.tags.splice(index, 1);
+  }
+};
+
+const handleTagCreate = (title: string) => {
+  const newTag: TagItem = {
+    id: Date.now().toString(),
+    title: title.trim(),
+  };
+  allTags.value.push(newTag);
+  form.value.tags.push(newTag);
+};
+
+const handleSubmit = () => {
+  if (isFormValid.value) {
+    console.log("Project created:", form.value);
+    // Handle form submission
+  }
+};
+</script>
+
+<template>
+  <div class="form-integration">
+    <h3>Create New Project</h3>
+
+    <form @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label>Project Title *</label>
+        <input
+          v-model="form.title"
+          type="text"
+          placeholder="Enter project title"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label>Description *</label>
+        <textarea
+          v-model="form.description"
+          placeholder="Enter project description"
+          rows="4"
+          required
+        ></textarea>
+      </div>
+
+      <div class="form-group">
+        <label>Tags *</label>
+        <TagBar
+          :all-tags="allTags"
+          :selected-tags="form.tags"
+          v-model:query="query"
+          v-model:match-index="matchIndex"
+          placeholder="Add project tags..."
+          overflow="fixed"
+          :allow-editing="true"
+          @tag-select="handleTagSelect"
+          @tag-remove="handleTagRemove"
+          @tag-create="handleTagCreate"
+        />
+        <p class="help-text">Add at least one tag to categorize your project</p>
+      </div>
+
+      <button type="submit" :disabled="!isFormValid" class="submit-button">
+        Create Project
+      </button>
+    </form>
+  </div>
+</template>
+
+<style module>
+.form-integration {
+  max-width: 600px;
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #ddd;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.help-text {
+  margin-top: 0.5rem;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.submit-button {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.submit-button:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+.submit-button:disabled {
+  background-color: #6c757d;
+  cursor: not-allowed;
+}
+</style>
+```
+
+### Different Overflow Modes
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { TagBar } from "@umbra-ui/core";
+import type { TagItem } from "@umbra-ui/core";
+
+const allTags = ref<TagItem[]>([
+  { id: "1", title: "JavaScript" },
+  { id: "2", title: "TypeScript" },
+  { id: "3", title: "Vue.js" },
+  { id: "4", title: "React" },
+  { id: "5", title: "Angular" },
+  { id: "6", title: "Node.js" },
+  { id: "7", title: "Python" },
+  { id: "8", title: "Java" },
+  { id: "9", title: "C#" },
+  { id: "10", title: "Go" },
+]);
+
+const selectedTags = ref<TagItem[]>([
+  { id: "1", title: "JavaScript" },
+  { id: "2", title: "TypeScript" },
+  { id: "3", title: "Vue.js" },
+  { id: "4", title: "React" },
+  { id: "5", title: "Node.js" },
+]);
+
+const query = ref("");
+const matchIndex = ref(-1);
+
+const handleTagSelect = (tag: TagItem) => {
+  selectedTags.value.push(tag);
+};
+
+const handleTagRemove = (tag: TagItem) => {
+  const index = selectedTags.value.findIndex((t) => t.id === tag.id);
+  if (index > -1) {
+    selectedTags.value.splice(index, 1);
+  }
+};
+
+const handleTagCreate = (title: string) => {
+  const newTag: TagItem = {
+    id: Date.now().toString(),
+    title: title.trim(),
+  };
+  allTags.value.push(newTag);
+  selectedTags.value.push(newTag);
+};
+</script>
+
+<template>
+  <div class="overflow-modes">
+    <h3>Different Overflow Modes</h3>
+
+    <div class="mode-section">
+      <h4>Full Mode (Horizontal Scroll)</h4>
+      <TagBar
+        :all-tags="allTags"
+        :selected-tags="selectedTags"
+        v-model:query="query"
+        v-model:match-index="matchIndex"
+        placeholder="Add tags..."
+        overflow="full"
+        :allow-editing="true"
+        @tag-select="handleTagSelect"
+        @tag-remove="handleTagRemove"
+        @tag-create="handleTagCreate"
+      />
+    </div>
+
+    <div class="mode-section">
+      <h4>Fixed Mode (Wrap Tags)</h4>
+      <TagBar
+        :all-tags="allTags"
+        :selected-tags="selectedTags"
+        v-model:query="query"
+        v-model:match-index="matchIndex"
+        placeholder="Add tags..."
+        overflow="fixed"
+        :allow-editing="true"
+        @tag-select="handleTagSelect"
+        @tag-remove="handleTagRemove"
+        @tag-create="handleTagCreate"
+      />
+    </div>
+
+    <div class="mode-section">
+      <h4>List Mode (Vertical List)</h4>
+      <TagBar
+        :all-tags="allTags"
+        :selected-tags="selectedTags"
+        v-model:query="query"
+        v-model:match-index="matchIndex"
+        placeholder="Add tags..."
+        overflow="list"
+        :allow-editing="true"
+        @tag-select="handleTagSelect"
+        @tag-remove="handleTagRemove"
+        @tag-create="handleTagCreate"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.overflow-modes {
+  max-width: 800px;
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+}
+
+.mode-section {
+  margin-bottom: 2rem;
+  padding: 1rem;
+  border: 1px solid #f0f0f0;
+  border-radius: 0.25rem;
+}
+
+.mode-section h4 {
+  margin: 0 0 1rem 0;
+  color: #333;
+}
+</style>
+```
+
+### Custom Styling
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { TagBar, createStyledTag } from "@umbra-ui/core";
+import type { TagItem, TagStyleConfig } from "@umbra-ui/core";
+
+const customStyle: TagStyleConfig = {
+  backgroundColor: "#e3f2fd",
+  color: "#1976d2",
+  border: "2px solid #2196f3",
+  borderRadius: "20px",
+  padding: "0.5rem 1rem",
+  fontSize: "0.875rem",
+  fontWeight: "600",
+  hover: {
+    backgroundColor: "#bbdefb",
+    transform: "scale(1.05)",
+  },
+};
+
+const allTags = ref<TagItem[]>([
+  createStyledTag("1", "Custom Style", customStyle),
+  createStyledTag("2", "Another Tag", customStyle),
+  createStyledTag("3", "Styled Tag", customStyle),
+]);
+
+const selectedTags = ref<TagItem[]>([]);
+const query = ref("");
+const matchIndex = ref(-1);
+
+const handleTagSelect = (tag: TagItem) => {
+  selectedTags.value.push(tag);
+};
+
+const handleTagRemove = (tag: TagItem) => {
+  const index = selectedTags.value.findIndex((t) => t.id === tag.id);
+  if (index > -1) {
+    selectedTags.value.splice(index, 1);
+  }
+};
+
+const handleTagCreate = (title: string) => {
+  const newTag = createStyledTag(
+    Date.now().toString(),
+    title.trim(),
+    customStyle
+  );
+  allTags.value.push(newTag);
+  selectedTags.value.push(newTag);
+};
+</script>
+
+<template>
+  <div class="custom-styling">
+    <h3>Custom Styled Tags</h3>
+
+    <TagBar
+      :all-tags="allTags"
+      :selected-tags="selectedTags"
+      v-model:query="query"
+      v-model:match-index="matchIndex"
+      placeholder="Add custom tags..."
+      overflow="fixed"
+      :allow-editing="true"
+      @tag-select="handleTagSelect"
+      @tag-remove="handleTagRemove"
+      @tag-create="handleTagCreate"
+    />
+
+    <div class="style-info">
+      <h4>Custom Style Properties:</h4>
+      <ul>
+        <li>Background: Light blue with transparency</li>
+        <li>Border: 2px solid blue</li>
+        <li>Border radius: 20px (pill shape)</li>
+        <li>Hover: Scale effect and darker background</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style module>
+.custom-styling {
+  max-width: 600px;
+  padding: 2rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+}
+
+.style-info {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 0.25rem;
+}
+
+.style-info h4 {
+  margin: 0 0 0.5rem 0;
+  color: #333;
+}
+
+.style-info ul {
+  margin: 0;
+  padding-left: 1.5rem;
+}
+
+.style-info li {
+  margin-bottom: 0.25rem;
+  color: #666;
+}
+</style>
+```
+
+## Technical Notes
+
+- Tags components provide a comprehensive tag management system with advanced features
+- Real-time search filters tags as you type with instant results
+- Keyboard navigation includes arrow keys, Enter, and Escape for full control
+- Multiple overflow modes handle different layout requirements
+- Custom styling system supports both Radix colors and custom CSS properties
+- Floating UI provides smart positioning for the tag picker
+- GSAP animations create smooth transitions and visual feedback
+- ResizeObserver tracks container changes for responsive behavior
+- TypeScript interfaces ensure type safety for all tag operations
+- Accessibility features include keyboard navigation and screen reader support
+- Color picker integration allows custom tag colors during creation