Filter chip

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

export default function Example() {
  return (
    <FilterChip
      label="Status"
      value="active"
      onRemove={() => console.log('Filter removed')}
    />
  );
}

import { FilterChip } from '@raystack/apsara';
import { FilterType } from '@raystack/apsara/types';

{/* Text filter */}
<FilterChip
  label="Name"
  columnType={FilterType.string}
  onValueChange={(value, operation) => console.log(value, operation)}
/>

{/* Select filter */}
<FilterChip
  label="Priority"
  columnType={FilterType.select}
  options={[
    { label: 'Low', value: 'low' },
    { label: 'Medium', value: 'medium' },
    { label: 'High', value: 'high' }
  ]}
  onValueChange={(value) => console.log(value)}
/>

{/* Multiselect filter */}
<FilterChip
  label="Tags"
  columnType={FilterType.multiselect}
  options={[
    { label: 'Bug', value: 'bug' },
    { label: 'Feature', value: 'feature' },
    { label: 'Enhancement', value: 'enhancement' }
  ]}
  onValueChange={(value) => console.log(value)}
/>

{/* Date filter */}
<FilterChip
  label="Created"
  columnType={FilterType.date}
  onValueChange={(date) => console.log(date)}
/>

<FilterChip
  label="Amount"
  operations={[
    { label: 'equals', value: 'eq' },
    { label: 'greater than', value: 'gt' },
    { label: 'less than', value: 'lt' }
  ]}
  onOperationChange={(operation) => console.log(operation)}
  onValueChange={(value) => console.log(value)}
/>

import { FilterChip } from '@raystack/apsara';
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';

<FilterChip
  label="Search"
  leadingIcon={<MagnifyingGlassIcon />}
  onValueChange={(value) => console.log(value)}
/>

<FilterChip
  variant="text"
  label="Filter"
  onValueChange={(value) => console.log(value)}
/>