Chips são toggles de seleção múltipla. Usados para filtros, seleção de estilo e segmentação em forms. Não confundir com Tag/Badge — chip é interativo, tag é decorativo.

Ícones soltos sem container — sem borda, sem fundo. Cor padrão: --color-text-subtle. Usados em navegação, ações secundárias e controles inline.

Botão de ação principal com ícone no lugar do label textual. Background --color-primary, ícone --color-text-on-primary, radius --radius-button (16px). Usado como CTA flutuante ou ação única de destaque.

// Button.tsx
interface ButtonProps {
  variant?: 'primary' | 'outline' | 'ghost' | 'chip';
  size?:    'sm' | 'md' | 'lg' | 'xl';
  context?: 'light' | 'dark';
  fullWidth?: boolean;
  disabled?:  boolean;
  selected?:  boolean;       // chip only
  icon?:      React.ReactNode;
  children:   React.ReactNode;
  onClick?:   () => void;
}

const sizeMap = {
  sm: 'h-8  px-3.5 text-[13px]',
  md: 'h-9  px-[18px] text-sm',
  lg: 'h-10 px-5 text-[15px]',
  xl: 'h-11 px-6 text-base',
};

const variantMap = {
  primary: 'bg-[#FF674D] text-[#FFFAEB] border-2 border-transparent',
  outline: {
    light: 'bg-transparent text-[#FF674D] border-2 border-[#FF674D]',
    dark:  'bg-transparent text-[#FFE28D] border-2 border-[#FFE28D]',
  },
  ghost: {
    light: 'bg-transparent text-[#BB9DBE] border-2 border-transparent',
    dark:  'bg-transparent text-[#FFFAEB] border-2 border-transparent opacity-70',
  },
  chip: {
    active:   'bg-[#68496B] text-[#FFFAEB] border border-transparent',
    inactive: 'bg-transparent text-[#C3A9C6] border border-[#C3A9C6]',
  },
};

const disabledClass =
  'text-[#E0D4E1] border-2 border-[#E6DBE7] bg-transparent cursor-not-allowed';

export function Button({
  variant = 'primary', size = 'xl', context = 'light',
  fullWidth = false, disabled = false, selected = false,
  icon, children, onClick,
}: ButtonProps) {
  const base = 'inline-flex items-center justify-center gap-2 rounded-[16px] font-semibold tracking-[-0.02em]';

  if (variant === 'chip') {
    return (
      <button
        className={`inline-flex items-center justify-center rounded-full px-2 py-1 text-[12px] font-bold uppercase tracking-[-0.02em] border
          ${selected ? variantMap.chip.active : variantMap.chip.inactive}`}
        aria-pressed={selected}
        disabled={disabled}
        onClick={onClick}
      >
        {children}
      </button>
    );
  }

  const vClass = disabled
    ? disabledClass
    : variant === 'primary'
      ? variantMap.primary
      : variantMap[variant][context];

  return (
    <button
      className={`${base} ${sizeMap[size]} ${vClass} ${fullWidth ? 'w-full' : ''}`}
      disabled={disabled}
      onClick={onClick}
    >
      {icon && <span className="w-[18px] h-[18px] flex-shrink-0" aria-hidden="true">{icon}</span>}
      {children}
    </button>
  );
}

// IconButton — ícone solto, sem container
export function IconButton({
  icon, label, onClick,
}: { icon: ReactNode; label: string; onClick?: () => void }) {
  return (
    <button
      className="inline-flex items-center justify-center bg-transparent border-none text-[#BB9DBE] p-1.5 rounded-md"
      aria-label={label}
      onClick={onClick}
    >
      {icon}
    </button>
  );
}

// ButtonIcon — filled com ícone (sem texto), ação de destaque
export function ButtonIcon({
  icon, label, onClick,
}: { icon: ReactNode; label: string; onClick?: () => void }) {
  return (
    <button
      className="inline-flex items-center justify-center p-4 rounded-[16px] bg-[#FE674C] text-[#FFFBEF] border-none"
      aria-label={label}
      onClick={onClick}
    >
      <span className="w-4 h-4 flex-shrink-0" aria-hidden="true">{icon}</span>
    </button>
  );
}

Ao focar: border-radius transiciona de 999px → 16px com transition: border-radius 150ms ease-out. Ao sair sem conteúdo: retorna ao pill. Com conteúdo: mantém rounded-rect.

.ti-wrapper {
  border-radius: 999px; /* default / hover / disabled */
  transition: border-radius 150ms ease-out,
              border-color  150ms ease-out;
}
.ti-wrapper:focus-within,
.ti-wrapper.is-filled {
  border-radius: 16px;
}
/* Acessibilidade — usuário prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .ti-wrapper { transition: none; }
}

<Select
  label="Tipo de atividade"
  placeholder="Selecione uma opção"
  options={[
    { value: 'running',     label: 'Corrida'     },
    { value: 'walking',     label: 'Caminhada'   },
    { value: 'cycling',     label: 'Ciclismo'    },
    { value: 'swimming',    label: 'Natação'      },
    { value: 'gym',         label: 'Musculação'  },
  ]}
  onChange={(value) => console.log(value)}
/>

<Select
  label="Atividades favoritas"
  multiple
  value={['running', 'cycling', 'swimming']}
  options={[...]}
  onChange={(values) => console.log(values)}
/>

<Select
  label="País"
  searchable
  placeholder="Selecione um país"
  options={countries}
  onChange={(value) => console.log(value)}
/>

<Checkbox id="running" label="Corrida" />
<Checkbox id="walking" label="Caminhada" defaultChecked />
<Checkbox id="cycling" label="Ciclismo" />

<RadioGroup name="activity" label="Tipo de atividade" defaultValue="walking">
  <Radio value="running"  label="Corrida"  />
  <Radio value="walking"  label="Caminhada" />
  <Radio value="cycling"  label="Ciclismo" />
</RadioGroup>

Passe o mouse ou use Tab para ver os tooltips acima.

Indeterminado: omite aria-valuenow/max. Usa aria-valuetext descrevendo o estado.