FilterChip

import * as React from 'react';
import { FilterChip } from '@bindshq/stance-react';

const statuses = ['Signed', 'Awaiting signature', 'Expired', 'Draft'];

export function Basic() {
  const [selected, setSelected] = React.useState<string[]>(['Signed']);
  const summary =
    selected.length > 2 ? `${selected[0]} +${selected.length - 1}` : selected.join(', ');
  return (
    <FilterChip label="Status" value={summary} onClear={() => setSelected([])}>
      <fieldset style={{ border: 0, margin: 0, padding: 0, display: 'grid', gap: 8 }}>
        <legend style={{ fontWeight: 600, marginBottom: 8 }}>Contract status</legend>
        {statuses.map((s) => (
          <label key={s} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={selected.includes(s)}
              onChange={(e) =>
                setSelected((all) => (e.target.checked ? [...all, s] : all.filter((x) => x !== s)))
              }
            />
            {s}
          </label>
        ))}
      </fieldset>
    </FilterChip>
  );
}

import { FilterChip } from '@bindshq/stance-react';

export function States() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      <FilterChip label="Owner" />
      <FilterChip label="Department" value="Sales" onClear={() => {}} />
      <FilterChip label="Created" value="Last 30 days" onClear={() => {}} disabled />
    </div>
  );
}

import { Button, FilterChip } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <FilterChip size="sm" label="Template" value="Executive" onClear={() => {}}>
        <Button size="sm" variant="outline">
          Choose template
        </Button>
      </FilterChip>
      <FilterChip label="Template" value="Executive" onClear={() => {}}>
        <Button size="sm" variant="outline">
          Choose template
        </Button>
      </FilterChip>
    </div>
  );
}