Segmented control

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

const SizesExample = () => {
  const [mode, setMode] = useState<'sequential' | 'parallel'>('sequential');
  const [view, setView] = useState<'day' | 'week' | 'month'>('week');
  return (
    <div className="flex flex-col items-start gap-4">
      <SegmentedControl
        label="Backup calls"
        onChange={setMode}
        options={[
          { label: 'One after another', value: 'sequential' },
          { label: 'All at once', value: 'parallel' },
        ]}
        value={mode}
      />
      <SegmentedControl
        label="Agenda view"
        onChange={setView}
        options={[
          { label: 'Day', value: 'day' },
          { label: 'Week', value: 'week' },
          { label: 'Month', value: 'month' },
        ]}
        size="sm"
        value={view}
      />
    </div>
  );
};

<SizesExample />

import { SegmentedControl } from '@arbol-ai/ui';

<SegmentedControl
  defaultValue="balanced"
  isDisabled
  label="Reasoning effort"
  options={[
    { label: 'Fast', value: 'fast' },
    { label: 'Balanced', value: 'balanced' },
    { label: 'Thorough', value: 'thorough' },
  ]}
/>