Segmented Controls

1'use client';
2 
3import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
4import { cva } from 'class-variance-authority';
5import * as React from 'react';
6 
7import { cn } from '@/lib/utils';
8 
9type SegmentedControlsType = 'secondary-filled' | 'ghost';
10 
11type SegmentedControlsSize = 'reg' | 'sm' | 'xsm' | 'xxs';
12 
13/**
14 * State overlay gradients for the secondary-filled variant.
15 * Tailwind needs the full class name at build time, so these are defined as
16 * complete strings rather than built via interpolation (matches button/tag-toggle).
17 */
18const hoverOverlay =
19  'hover:[background-image:linear-gradient(var(--color-stateslayer-overlay-hover),var(--color-stateslayer-overlay-hover))]';
20 
21const pressedOverlay =
22  'active:[background-image:linear-gradient(var(--color-stateslayer-overlay-pressed),var(--color-stateslayer-overlay-pressed))]';
23 
24const disabledOverlay =
25  'disabled:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled),var(--color-stateslayer-overlay-disabled))]';
26 
27// Track (Root) container styling — size only controls the inter-item gap.
28const segmentedControlsVariants = cva(
29  [
30    'inline-flex items-center w-fit p-1',
31    'bg-fill-secondary-inverse border border-stroke-divider shadow-elevation-0',
32  ],
33  {
34    variants: {
35      size: {
36        reg: 'gap-1',
37        sm: 'gap-0.5',
38        xsm: 'gap-0.5',
39        xxs: 'gap-0.5',
40      },
41    },
42    defaultVariants: {
43      size: 'reg',
44    },
45  },
46);
47 
48// Individual segment styling. The selected (data-state=on) treatment lives in the
49// base layer so it overrides both type backgrounds via attribute specificity.
50const segmentedControlsItemVariants = cva(
51  [
52    'relative inline-flex items-center justify-center min-w-8 whitespace-nowrap',
53    'cursor-pointer outline-none transition-all',
54    'focus-visible:ring-1 focus-visible:ring-stroke-status-focus',
55    'disabled:cursor-not-allowed disabled:text-fg-disabled',
56    'data-[state=on]:bg-fill-active data-[state=on]:text-fg-primary-inverse',
57    // A disabled segment always reads as disabled, even when selected: the
58    // compound variant outranks the unconditional data-[state=on] styles above.
59    'disabled:data-[state=on]:text-fg-disabled',
60  ],
61  {
62    variants: {
63      type: {
64        'secondary-filled': [
65          'bg-fill-muted text-fg-primary',
66          hoverOverlay,
67          pressedOverlay,
68          disabledOverlay,
69          'disabled:data-[state=on]:bg-fill-muted',
70        ],
71        ghost: [
72// … truncated