Badge

1'use client'
2 
3import {
4  forwardRef,
5  type HTMLAttributes,
6  type KeyboardEvent,
7  type MouseEventHandler,
8  type ReactNode,
9} from 'react'
10import { Slot } from '@radix-ui/react-slot'
11import { cva, type VariantProps } from 'class-variance-authority'
12import { motion, useReducedMotion } from 'motion/react'
13import { cn } from '@/lib/utils'
14import { playHoverSound, playClickSound } from '@/lib/sound'
15 
16const badgeVariants = cva('inline-flex items-center squircle font-medium whitespace-nowrap', {
17  variants: {
18    variant: {
19      solid: 'border border-(--color-border) bg-(--color-surface) text-(--color-fg)',
20      muted: 'border border-(--color-border)/60 bg-(--color-surface-2) text-(--color-muted)',
21      dot: 'border border-(--color-border) bg-(--color-bg) text-(--color-muted)',
22    },
23    size: {
24      sm: 'h-5.5 px-2.5 text-[11px] gap-1',
25      md: 'h-6.5 px-3 text-[12px] gap-1.5',
26      lg: 'h-8 px-3.5 text-[13px] gap-1.5',
27    },
28    interactive: {
29      true: 'cursor-pointer transition-colors duration-(--motion-dur-fast) motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 focus-visible:ring-offset-(--color-bg)',
30      false: '',
31    },
32  },
33  defaultVariants: {
34    variant: 'solid',
35    size: 'md',
36    interactive: false,
37  },
38})
39 
40export interface BadgeProps
41  extends
42    Omit<HTMLAttributes<HTMLSpanElement>, 'color'>,
43    Omit<VariantProps<typeof badgeVariants>, 'interactive'> {
44  icon?: ReactNode
45  onDismiss?: MouseEventHandler<HTMLButtonElement>
46  dismissLabel?: string
47  pulse?: boolean
48  shimmer?: boolean
49  asChild?: boolean
50}
51 
52const dotSizeFor = (size: BadgeProps['size']) => (size === 'sm' ? 6 : size === 'lg' ? 8 : 7)
53 
54const dismissSizeFor = (size: BadgeProps['size']) =>
55  size === 'lg' ? 'size-4 [&_svg]:size-3' : 'size-3.5 [&_svg]:size-2.5'
56 
57export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
58  (
59    {
60      className,
61      variant = 'solid',
62      size = 'md',
63      icon,
64      onDismiss,
65      dismissLabel = 'Remove',
66      pulse = false,
67      shimmer = true,
68      asChild = false,
69      onClick,
70      onKeyDown,
71      children,
72      ...props
73    },
74    ref,
75  ) => {
76    const reduceMotion = useReducedMotion()
77    const isDot = variant === 'dot'
78    const isClickable = Boolean(onClick)
79    const shouldPulse = isDot && pulse && !reduceMotion
80    const shouldShimmer = variant === 'solid' && shimmer && !reduceMotion
81// … truncated