Filter chips

import { useState } from 'react';
import { FilterChips } from '@arbol-ai/ui';

const StatusExample = () => {
  const [status, setStatus] = useState<'confirmed' | 'pending' | 'cancelled' | null>(null);
  return (
    <FilterChips
      label="Appointment status"
      onChange={setStatus}
      options={[
        { label: 'Confirmed', value: 'confirmed', count: 42 },
        { label: 'Pending', value: 'pending', count: 7 },
        { label: 'Cancelled', value: 'cancelled', count: 3 },
      ]}
      value={status}
    />
  );
};

<StatusExample />

import { useState } from 'react';
import { FilterToggle } from '@arbol-ai/ui';

const InactiveExample = () => {
  const [showInactive, setShowInactive] = useState(false);
  return <FilterToggle count={5} isSelected={showInactive} label="Inactive" onChange={setShowInactive} />;
};

<InactiveExample />