Tag Toggle

1'use client';
2 
3import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
4import type { VariantProps } from 'class-variance-authority';
5 
6import {
7  tagBaseStyles,
8  tagSizeVariants,
9  wrapTagText,
10} from '@/components/ui/tag';
11import { cn } from '@/lib/utils';
12 
13type TagToggleVariant = 'default' | 'outline';
14 
15type TagToggleSize = 'xs' | 'sm' | 'default' | 'lg';
16 
17const hoverOverlay =
18  'hover:[background-image:linear-gradient(var(--color-stateslayer-overlay-hover),var(--color-stateslayer-overlay-hover))] disabled:hover:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled),var(--color-stateslayer-overlay-disabled))]!';
19 
20const pressedOverlay =
21  'active:[background-image:linear-gradient(var(--color-stateslayer-overlay-pressed),var(--color-stateslayer-overlay-pressed))] disabled:active:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled),var(--color-stateslayer-overlay-disabled))]!';
22 
23const disabledOverlay =
24  'disabled:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled),var(--color-stateslayer-overlay-disabled))]';
25 
26const nonPillPadding = {
27  xs: '!pl-1 !pr-2',
28  sm: '!pl-1 !pr-2',
29  default: '!pl-1 !pr-2',
30  lg: '!px-2',
31} as const;
32 
33const pillPadding = {
34  xs: '!pl-1 !pr-2',
35  sm: '!pl-2 !pr-3',
36  default: '!pl-2 !pr-3',
37  lg: '!pl-2 !pr-3',
38} as const;
39 
40function tagToggleClasses({
41  variant = 'default',
42  size = 'default',
43  pill,
44  className,
45}: {
46  variant?: TagToggleVariant;
47  size?: TagToggleSize;
48  pill?: VariantProps<typeof tagSizeVariants>['pill'];
49  className?: string;
50} = {}) {
51  return cn(
52    tagSizeVariants({ size, pill }),
53 
54    'gap-1',
55    pill !== true && nonPillPadding[size],
56    pill === true && pillPadding[size],
57 
58    ...tagBaseStyles('disabled'),
59    'cursor-pointer group',
60    'disabled:text-fg-disabled',
61 
62    variant === 'default' && [
63      'bg-fill-muted text-fg-primary',
64      hoverOverlay,
65      pressedOverlay,
66      disabledOverlay,
67      'focus-visible:bg-fill-muted',
68      'data-pressed:bg-fill-active data-pressed:text-fg-primary-inverse',
69      'data-pressed:**:data-[slot=icon]:text-fill-active-inverse',
70      'data-pressed:focus-visible:bg-fill-active',
71    ],
72 
73    variant === 'outline' && [
74      'border border-stroke-tertiary text-fg-primary',
75      hoverOverlay,
76      pressedOverlay,
77      disabledOverlay,
78      'data-pressed:border-stroke-active!',
79    ],
80 
81    className,
82  );
83}
84 
85function TagToggle({
86  className,
87  variant = 'default',
88// … truncated