Tag

<!-- Subtle tag -->
<span class="tag tag--subtle tag--blue">JavaScript</span>

<!-- Removable tag -->
<span class="tag tag--subtle tag--green">
  <span class="tag__label">React</span>
  <button class="tag__remove" aria-label="Remove tag: React">
    <svg aria-hidden="true" width="12" height="12"><!-- × icon --></svg>
  </button>
</span>

<!-- Selectable tag (toggle button) -->
<button
  class="tag tag--outline tag--purple"
  aria-pressed="false"
  onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true')"
>
  <span class="tag__label">Design</span>
</button>

<!-- Tag group (filter chips) -->
<div role="group" aria-label="Filter by category" class="tag-group">
  <button class="tag tag--solid tag--blue" aria-pressed="true">
    <svg aria-hidden="true"><!-- check icon --></svg>
    <span class="tag__label">All</span>
  </button>
  <button class="tag tag--outline tag--gray" aria-pressed="false">
    <span class="tag__label">Articles</span>
  </button>
  <button class="tag tag--outline tag--gray" aria-pressed="false">
    <span class="tag__label">Videos</span>
  </button>
</div>

<style>
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-md);
  padding: 4px 10px;
  border: none;
  cursor: default;
  white-space: nowrap;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.tag--subtle.tag--blue {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}
.tag--outline.tag--gray {
  background: transparent;
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
}
button.tag {
  cursor: pointer;
}
button.tag:hover {
  filter: brightness(0.95);
}
button.tag[aria-pressed="true"] {
  background: var(--color-blue-600);
  color: white;
}
.tag__remove {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
}
.tag__remove:hover {
  background: rgba(0, 0, 0, 0.1);
}
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>

interface TagProps {
  variant?: 'solid' | 'subtle' | 'outline';
  color?: 'gray' | 'blue' | 'green' | 'yellow' | 'red' | 'purple';
  size?: 'sm' | 'md' | 'lg';
  removable?: boolean;
  onRemove?: () => void;
  selected?: boolean;
  onClick?: () => void;
  disabled?: boolean;
  leftIcon?: React.ReactNode;
  maxWidth?: number | string;
  children: React.ReactNode;
}

function Tag({
  variant = 'subtle',
  color = 'gray',
  size = 'md',
  removable = false,
  onRemove,
  selected = false,
  onClick,
  disabled = false,
  leftIcon,
  maxWidth,
  children,
}: TagProps) {
  const isInteractive = !!onClick;
  const Component = isInteractive ? 'button' : 'span';

  return (
    <Component
      className={[
        'tag',
        `tag--${variant}`,
        `tag--${color}`,
        `tag--${size}`,
        selected && 'tag--selected',
        disabled && 'tag--disabled',
      ].filter(Boolean).join(' ')}
      onClick={!disabled ? onClick : undefined}
      disabled={isInteractive ? disabled : undefined}
      aria-pressed={isInteractive ? selected : undefined}
      aria-disabled={!isInteractive && disabled ? true : undefined}
      style={{ maxWidth }}
    >
      {selected && (
        <svg className="tag__check" aria-hidden="true" width="12" height="12" viewBox="0 0 12 12">
          <path d="M10 3L4.5 8.5L2 6" stroke="currentColor" strokeWidth="2" fill="none" />
        </svg>
      )}
      {leftIcon && <span className="tag__icon">{leftIcon}</span>}
      <span className="tag__label" style={maxWidth ? {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      } : undefined}>
        {children}
      </span>
      {removable && (
        <button
          className="tag__remove"
          onClick={(e) => {
            e.stopPropagation();
            onRemove?.();
          }}
          aria-label={`Remove tag: ${typeof children === 'string' ? children : ''}`}
          disabled={disabled}
          tabIndex={0}
        >
          <svg aria-hidden="true" width="12" height="12" viewBox="0 0 12 12">
            <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" strokeWidth="1.5" />
          </svg>
        </button>
      )}
    </Component>
  );
}

// Tag input component
interface TagInputProps {
  value: string[];
  onChange: (tags: string[]) => void;
  placeholder?: string;
  maxTags?: number;
}

function TagInput({ value, onChange, placeholder = 'Add tag...', maxTags }: TagInputProps) {
  const [input, setInput] = React.useState('');
  const inputRef = React.useRef<HTMLInputElement>(null);

  const addTag = (tag: string) => {
    const trimmed = tag.trim();
    if (!trimmed || value.includes(trimmed)) return;
    if (maxTags && value.length >= maxTags) return;
    onChange([...value, trimmed]);
    setInput('');
  };

  return (
    <div className="tag-input" onClick={() => inputRef.current?.focus()}>
      {value.map((tag) => (
        <Tag key={tag} size="sm" removable onRemove={() => onChange(value.filter((t) => t !== tag))}>
          {tag}
        </Tag>
      ))}
      <input
        ref={inputRef}
        className="tag-input__field"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ',') {
            e.preventDefault();
            addTag(input);
          }
          if (e.key === 'Backspace' && !input && value.length) {
            onChange(value.slice(0, -1));
          }
        }}
        placeholder={!maxTags || value.length < maxTags ? placeholder : ''}
        disabled={maxTags ? value.length >= maxTags : false}
        aria-label="Add tag"
      />
    </div>
  );
}