Tag Select

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { cn } from '@/lib/utils'
5import { Check, X } from 'lucide-react'
6import { useEffect, useState } from 'react'
7import { demoTags } from './demo/selection'
8 
9/**
10 * Represents an individual tag option.
11 * @interface Tag
12 * @property {string} id - Unique identifier for the tag
13 * @property {string} label - Display text for the tag
14 * @property {"default" | "blue" | "green" | "red" | "yellow" | "purple"} [color] - Optional color theme
15 */
16export interface Tag {
17  id?: string
18  label?: string
19  color?: 'default' | 'blue' | 'green' | 'red' | 'yellow' | 'purple'
20}
21 
22/**
23 * ═══════════════════════════════════════════════════════════════════════════
24 * TagSelectProps
25 * ═══════════════════════════════════════════════════════════════════════════
26 *
27 * Props for the TagSelect component, which provides tag-based filtering with
28 * single or multiple selection modes and validation support.
29 */
30export interface TagSelectProps {
31  data?: {
32    /** Array of tags to display for selection. */
33    tags?: Tag[]
34  }
35  actions?: {
36    /** Called when the user clicks the validate button with the selected tag IDs. */
37    onValidate?: (tagIds: string[]) => void
38  }
39  appearance?: {
40    /**
41     * Selection mode: single allows one tag, multiple allows many.
42     * @default "multiple"
43     */
44    mode?: 'single' | 'multiple'
45    /**
46     * Whether to show the clear selection button.
47     * @default true
48     */
49    showClear?: boolean
50    /**
51     * Whether to show the validate button.
52     * @default true
53     */
54    showValidate?: boolean
55    /**
56     * Custom label for the validate button.
57     * @default "Validate selection"
58     */
59    validateLabel?: string
60  }
61  control?: {
62    /** Array of pre-selected tag IDs for controlled mode. */
63    selectedTagIds?: string[]
64  }
65}
66 
67 
68// ChatGPT-compliant: all tags use neutral system colors
69const tagClasses = {
70  selected: 'bg-foreground text-background border-foreground',
71  unselected: 'bg-background text-foreground border-border hover:bg-muted'
72}
73 
74/**
75 * A tag selection component with single or multiple selection modes.
76// … truncated