Checkbox

import { useState } from 'react';
import { Checkbox } from '@base-ui/react/checkbox';
import { CheckboxGroup } from '@base-ui/react/checkbox-group';

const FILES = ['Q3 report.pdf', 'Brand guidelines.fig', 'Launch plan.docx'];
const BOX =
  'flex size-5 items-center justify-center rounded-md border bg-background text-white outline-none focus-visible:ring-2 focus-visible:ring-ring data-checked:border-blue-600 data-checked:bg-blue-600 data-indeterminate:border-blue-600 data-indeterminate:bg-blue-600';
// pathLength={1} makes a dash offset of 1 hide the stroke and 0 draw all of it.
const DRAW =
  '[stroke-dasharray:1] [stroke-dashoffset:1] transition-[stroke-dashoffset] duration-180 ease-out group-data-checked:[stroke-dashoffset:0] group-data-indeterminate:hidden';

export function FileSelection() {
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <CheckboxGroup
      value={selected}
      onValueChange={setSelected}
      allValues={FILES}
      aria-label='Files'
      className='w-80 overflow-hidden rounded-xl border text-sm *:flex *:items-center *:gap-3 *:px-4 *:py-2.5 *:not-first:has-[[data-checked]]:bg-blue-500/10'
    >
      <label className='border-b bg-muted font-medium'>
        {/* `parent` ticks every file, and shows a dash when only some are ticked. */}
        <Box parent />
        {selected.length ? `${selected.length} selected` : 'Select all'}
      </label>
      {FILES.map((file) => (
        <label key={file}>
          <Box value={file} />
          {file}
        </label>
      ))}
    </CheckboxGroup>
  );
}

function Box(props: Checkbox.Root.Props) {
  return (
    <Checkbox.Root {...props} className={BOX}>
      <Checkbox.Indicator keepMounted className='group'>
        <svg
          viewBox='0 0 16 16'
          className='size-3.5 fill-none stroke-current stroke-2'
        >
          <path d='M4 8h8' className='hidden group-data-indeterminate:block' />
          <path d='m3.5 8.5 3 3 6-7' pathLength={1} className={DRAW} />
        </svg>
      </Checkbox.Indicator>
    </Checkbox.Root>
  );
}