Segment Spotlight

1'use client'
2 
3import * as React from 'react'
4import { Slot } from 'radix-ui'
5import { motion, useReducedMotion } from 'motion/react'
6import { useControllableState } from '@radix-ui/react-use-controllable-state'
7 
8import { cn } from '@/lib/utils'
9 
10const segmentVariants = {
11  default: 'bg-foreground text-background shadow-foreground/20',
12  blue: 'bg-blue-600 text-white shadow-blue-600/25',
13  purple: 'bg-violet-600 text-white shadow-violet-600/25',
14  green: 'bg-emerald-600 text-white shadow-emerald-600/25',
15  pink: 'bg-pink-600 text-white shadow-pink-600/25',
16  teal: 'bg-teal-600 text-white shadow-teal-600/25',
17  orange: 'bg-orange-500 text-white shadow-orange-500/25',
18  red: 'bg-red-600 text-white shadow-red-600/25',
19  yellow: 'bg-yellow-400 text-zinc-950 shadow-yellow-400/25',
20} as const
21 
22type SegmentSpotlightVariant = keyof typeof segmentVariants
23type SegmentSpotlightActivationMode = 'hover' | 'click'
24 
25type SegmentSpotlightContextValue = {
26  activeValue: string | null
27  activeTargets: ReadonlySet<string>
28  activationMode: SegmentSpotlightActivationMode
29  prefersReducedMotion: boolean
30  setActiveValue: (value: string | null) => void
31  registerTrigger: (value: string, targets: string[]) => () => void
32}
33 
34const SegmentSpotlightContext = React.createContext<SegmentSpotlightContextValue | null>(null)
35 
36function useSegmentSpotlight() {
37  const context = React.useContext(SegmentSpotlightContext)
38 
39  if (!context) {
40    throw new Error('SegmentSpotlight components must be used within <SegmentSpotlight>.')
41  }
42 
43  return context
44}
45 
46type SegmentSpotlightProps = Omit<React.ComponentProps<'div'>, 'defaultValue'> & {
47  value?: string | null
48  defaultValue?: string | null
49  onValueChange?: (value: string | null) => void
50  activationMode?: SegmentSpotlightActivationMode
51}
52 
53function SegmentSpotlight({
54  value: valueProp,
55  defaultValue = null,
56  onValueChange,
57  activationMode = 'hover',
58  className,
59  children,
60  ...props
61}: SegmentSpotlightProps) {
62  const prefersReducedMotion = useReducedMotion()
63  const [targetsByValue, setTargetsByValue] = React.useState<Map<string, string[]>>(new Map())
64  const [activeValue = null, setActiveValue] = useControllableState({
65    prop: valueProp,
66    defaultProp: defaultValue,
67    onChange: onValueChange,
68  })
69 
70  const registerTrigger = React.useCallback((value: string, targets: string[]) => {
71    setTargetsByValue((current) => {
72      const next = new Map(current)
73      next.set(value, targets)
74      return next
75    })
76 
77    return () => {
78// … truncated