Segmented control

import { useId, useState } from 'react';
import { motion } from 'motion/react';
import { Radio } from '@base-ui/react/radio';
import { RadioGroup } from '@base-ui/react/radio-group';

const RANGES = ['Day', 'Week', 'Month'] as const;
type Range = (typeof RANGES)[number];

// Stiff and well damped: the thumb settles in about 250ms with no bounce.
const THUMB_SPRING = { type: 'spring', stiffness: 500, damping: 40 } as const;

export function ChartRangeControl() {
  const [range, setRange] = useState<Range>('Week');
  const id = useId();

  // A radio group: one choice among several, with arrow-key support.
  return (
    <RadioGroup
      value={range}
      onValueChange={setRange}
      aria-label='Chart range'
      className='inline-flex rounded-lg bg-muted p-0.5'
    >
      {RANGES.map((option) => (
        <Radio.Root
          key={option}
          value={option}
          className='relative flex h-8 cursor-default items-center rounded-md px-4 text-sm font-medium text-muted-foreground outline-none select-none focus-visible:ring-2 focus-visible:ring-ring data-checked:text-foreground'
        >
          {option === range && (
            <motion.span
              layoutId={`${id}-thumb`}
              transition={THUMB_SPRING}
              className='absolute inset-0 rounded-md bg-background shadow-sm'
            />
          )}
          <span className='relative'>{option}</span>
        </Radio.Root>
      ))}
    </RadioGroup>
  );
}