Icon Shell

1import { Slot } from '@radix-ui/react-slot';
2import { type VariantProps, cva } from 'class-variance-authority';
3import type * as React from 'react';
4 
5import { cn } from '@/lib/utils';
6 
7import { IconSizeContext } from './icon';
8 
9const iconVariants = cva(
10  [
11    'inline-flex items-center justify-center',
12    '[&_svg]:fill-current [&_svg]:stroke-current',
13  ],
14  {
15    variants: {
16      size: {
17        sm: 'text-[16px] size-4',
18        default: 'text-[24px] size-6',
19        lg: 'text-[32px] size-8',
20      },
21      type: {
22        neutral: 'text-fill-active',
23        'neutral-inverse': 'text-fill-active-inverse',
24        custom: '',
25      },
26      variant: {
27        primary: 'opacity-88',
28        secondary: 'opacity-60',
29        disabled: 'opacity-30 cursor-not-allowed',
30      },
31      hoverable: {
32        true: [
33          'cursor-pointer',
34          'hover:opacity-88',
35          'active:opacity-88',
36          'group-hover/button:opacity-88',
37          'group-active/button:opacity-88',
38        ],
39        false: '',
40      },
41    },
42    defaultVariants: {
43      size: 'default',
44      type: 'neutral',
45      variant: 'secondary',
46      hoverable: false,
47    },
48  },
49);
50 
51type IconShellSize = NonNullable<VariantProps<typeof iconVariants>['size']>;
52type IconShellType = NonNullable<VariantProps<typeof iconVariants>['type']>;
53type IconShellOpacity = 'primary' | 'secondary';
54type ResolvedVariant = IconShellOpacity | 'disabled';
55 
56type IconShellBaseProps = Omit<React.ComponentProps<'span'>, 'disabled'> & {
57  asChild?: boolean;
58  /** sm (16px), default (24px), lg (32px). Provides size context to Icon. */
59  size?: IconShellSize;
60  /** Colour tone. Use type="custom" + className for brand/status colours. */
61  type?: IconShellType;
62  /** Disabled opacity (30%). Works in static and hoverable modes. */
63  disabled?: boolean;
64};
65 
66type IconShellStaticProps = IconShellBaseProps & {
67  hoverable?: false;
68  /** Static opacity: primary (88%) or secondary (60%). Not used with hoverable. */
69  variant?: IconShellOpacity;
70};
71 
72type IconShellHoverableProps = IconShellBaseProps & {
73  /** Icon-only button: secondary rest, primary on hover/active. Do not pass variant. */
74  hoverable: true;
75  variant?: never;
76};
77 
78type IconShellProps = IconShellStaticProps | IconShellHoverableProps;
79 
80function resolveVariant(
81  variant: IconShellOpacity | undefined,
82  hoverable: boolean,
83  isDisabled: boolean,
84): ResolvedVariant {
85  if (isDisabled) {
86    return 'disabled';
87  }
88 
89  if (hoverable) {
90// … truncated