51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T28c9,'use client' import * as React from 'react' import { Slot } from 'radix-ui' import { motion, useReducedMotion } from 'motion/react' import { useControllableState } from '@radix-ui/react-use-controllable-state' import { cn } from '@/lib/utils' const segmentVariants = { default: 'bg-foreground text-background shadow-foreground/20', blue: 'bg-blue-600 text-white shadow-blue-600/25', purple: 'bg-violet-600 text-white shadow-violet-600/25', green: 'bg-emerald-600 text-white shadow-emerald-600/25', pink: 'bg-pink-600 text-white shadow-pink-600/25', teal: 'bg-teal-600 text-white shadow-teal-600/25', orange: 'bg-orange-500 text-white shadow-orange-500/25', red: 'bg-red-600 text-white shadow-red-600/25', yellow: 'bg-yellow-400 text-zinc-950 shadow-yellow-400/25', } as const type SegmentSpotlightVariant = keyof typeof segmentVariants type SegmentSpotlightActivationMode = 'hover' | 'click' type SegmentSpotlightContextValue = { activeValue: string | null activeTargets: ReadonlySet activationMode: SegmentSpotlightActivationMode prefersReducedMotion: boolean setActiveValue: (value: string | null) => void registerTrigger: (value: string, targets: string[]) => () => void } const SegmentSpotlightContext = React.createContext(null) function useSegmentSpotlight() { const context = React.useContext(SegmentSpotlightContext) if (!context) { throw new Error('SegmentSpotlight components must be used within .') } return context } type SegmentSpotlightProps = Omit, 'defaultValue'> & { value?: string | null defaultValue?: string | null onValueChange?: (value: string | null) => void activationMode?: SegmentSpotlightActivationMode } function SegmentSpotlight({ value: valueProp, defaultValue = null, onValueChange, activationMode = 'hover', className, children, ...props }: SegmentSpotlightProps) { const prefersReducedMotion = useReducedMotion() const [targetsByValue, setTargetsByValue] = React.useState>(new Map()) const [activeValue = null, setActiveValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue, onChange: onValueChange, }) const registerTrigger = React.useCallback((value: string, targets: string[]) => { setTargetsByValue((current) => { const next = new Map(current) next.set(value, targets) return next }) return () => { setTargetsByValue((current) => { const next = new Map(current) next.delete(value) return next }) } }, []) const activeTargets = React.useMemo( () => new Set(activeValue ? (targetsByValue.get(activeValue) ?? []) : []), [activeValue, targetsByValue], ) return (

{children}

) } function SegmentSpotlightViewport({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function SegmentSpotlightGrid({ className, ...props }: React.ComponentProps<'div'>) { return (

) } type SegmentSpotlightSegmentProps = Omit, 'children'> & { value: string variant?: SegmentSpotlightVariant children?: React.ReactNode } function SegmentSpotlightSegment({ value, variant = 'default', className, children, initial, animate, transition, ...props }: SegmentSpotlightSegmentProps) { const context = useSegmentSpotlight() const hasActiveValue = context.activeValue !== null const isActive = hasActiveValue && context.activeTargets.has(value) const isMuted = hasActiveValue && !isActive return ( {children} ) } function SegmentSpotlightToolbar({ className, onPointerLeave, onBlur, initial, animate, transition, ...props }: React.ComponentProps) { const context = useSegmentSpotlight() function handlePointerLeave(event: React.PointerEvent) { onPointerLeave?.(event) if ( !event.defaultPrevented && context.activationMode === 'hover' && event.pointerType === 'mouse' ) { context.setActiveValue(null) } } function handleBlur(event: React.FocusEvent) { onBlur?.(event) if (!event.defaultPrevented && !event.currentTarget.contains(event.relatedTarget)) { context.setActiveValue(null) } } return (