Chip

import { Chip } from '@raystack/apsara';

function Tags() {
  return <Chip>React</Chip>;
}

import { Chip } from '@raystack/apsara';

function ChipVariants() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Chip variant="outline">Outline</Chip>
      <Chip variant="filled">Filled</Chip>
    </div>
  );
}

import { Chip } from '@raystack/apsara';

function ChipSizes() {
  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <Chip size="small">Small</Chip>
      <Chip size="large">Large</Chip>
    </div>
  );
}

import { Chip } from '@raystack/apsara';

function ChipColors() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Chip color="neutral">Neutral</Chip>
      <Chip color="accent">Accent</Chip>
    </div>
  );
}

import { Chip } from '@raystack/apsara';
import { TagIcon, CheckIcon } from '@heroicons/react/24/outline';

function IconChips() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Chip 
        leadingIcon={<TagIcon style={{ width: 14, height: 14 }} />}
      >
        Leading Icon
      </Chip>
      <Chip 
        trailingIcon={<CheckIcon style={{ width: 14, height: 14 }} />}
      >
        Trailing Icon
      </Chip>
    </div>
  );
}

import { Chip } from '@raystack/apsara';
import { useState } from 'react';

function DismissibleChips() {
  const [tags, setTags] = useState(['React', 'TypeScript', 'Next.js']);

  const removeTag = (tag: string) => {
    setTags(tags.filter(t => t !== tag));
  };

  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      {tags.map(tag => (
        <Chip
          key={tag}
          isDismissible
          onDismiss={() => removeTag(tag)}
        >
          {tag}
        </Chip>
      ))}
    </div>
  );
}

import { Chip } from '@raystack/apsara';
import { useState } from 'react';

function FilterChips() {
  const [selected, setSelected] = useState<string | null>(null);

  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      {['All', 'Active', 'Pending', 'Completed'].map(status => (
        <Chip
          key={status}
          onClick={() => setSelected(status)}
          color={selected === status ? 'accent' : 'neutral'}
          variant={selected === status ? 'filled' : 'outline'}
          data-state={selected === status ? 'selected' : 'unselected'}
        >
          {status}
        </Chip>
      ))}
    </div>
  );
}

import { Chip } from '@raystack/apsara';
import { useState } from 'react';

function TagInput() {
  const [tags, setTags] = useState(['JavaScript', 'CSS']);
  const [input, setInput] = useState('');

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

  return (
    <div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '8px' }}>
        {tags.map(tag => (
          <Chip
            key={tag}
            isDismissible
            onDismiss={() => setTags(tags.filter(t => t !== tag))}
          >
            {tag}
          </Chip>
        ))}
      </div>
      <input
        value={input}
        onChange={e => setInput(e.target.value)}
        onKeyDown={e => e.key === 'Enter' && addTag()}
        placeholder="Add a tag..."
      />
    </div>
  );
}

import { Chip } from '@raystack/apsara';

function AccessibleChip() {
  return (
    <Chip
      role="status"
      ariaLabel="Selected filter: React"
      isDismissible
      onDismiss={() => console.log('Dismissed')}
    >
      React
    </Chip>
  );
}