50: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"] 51: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"] 52:T4bb5,"use client" import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ComponentProps, type KeyboardEvent, type MouseEvent, } from "react" import { useControllableState } from "@radix-ui/react-use-controllable-state" import { cva } from "class-variance-authority" import { Check } from "lucide-react" import { cn } from "@/lib/utils" /* ----------------------------------------------------------------------------- * Types * -------------------------------------------------------------------------- */ export interface ChoicePollRootProps extends Omit, "defaultValue"> { /** Currently selected option(s) - controlled */ value?: string | string[] /** Default selected option(s) - uncontrolled */ defaultValue?: string | string[] /** Callback when selection changes */ onValueChange?: (value: string | string[]) => void /** Whether multiple selections are allowed */ multiple?: boolean /** Whether the poll is disabled */ disabled?: boolean /** Whether poll results should be visible after voting */ showResults?: boolean /** Vote counts per option (for showing results) */ votes?: Record /** Whether user has submitted their vote */ hasVoted?: boolean } export interface ChoicePollOptionProps extends ComponentProps<"button"> { /** Unique identifier for this option */ value: string /** Whether this specific option is disabled */ disabled?: boolean } export type ChoicePollHeaderProps = ComponentProps<"div"> export type ChoicePollTitleProps = ComponentProps<"h3"> export type ChoicePollDescriptionProps = ComponentProps<"p"> export type ChoicePollOptionsProps = ComponentProps<"div"> export type ChoicePollLabelProps = ComponentProps<"span"> export type ChoicePollIndicatorProps = ComponentProps<"span"> export type ChoicePollProgressProps = ComponentProps<"div"> export type ChoicePollPercentageProps = ComponentProps<"span"> export interface ChoicePollFooterProps extends ComponentProps<"div"> { /** Total number of votes */ totalVotes?: number } /* ----------------------------------------------------------------------------- * Context * -------------------------------------------------------------------------- */ interface ChoicePollContextValue { selected: string[] multiple: boolean disabled: boolean showResults: boolean votes: Record totalVotes: number hasVoted: boolean select: (optionId: string) => void isSelected: (optionId: string) => boolean getPercentage: (optionId: string) => number } const ChoicePollContext = createContext(null) function useChoicePollContext() { const context = useContext(ChoicePollContext) if (!context) { throw new Error("ChoicePoll components must be used within ChoicePoll.Root") } return context } interface ChoicePollOptionContextValue { optionId: string disabled: boolean isSelected: boolean percentage: number } const ChoicePollOptionContext = createContext(null) function useChoicePollOptionContext() { const context = useContext(ChoicePollOptionContext) if (!context) { throw new Error( "ChoicePoll.Option sub-components must be used within ChoicePoll.Option" ) } return context } function useAnimatedPercentage(percentage: number, shouldShowResults: boolean) { const [animatedPercentage, setAnimatedPercentage] = useState( shouldShowResults ? percentage : 0 ) useEffect(() => { if (!shouldShowResults) { setAnimatedPercentage(0) return } const frame = requestAnimationFrame(() => { setAnimatedPercentage(percentage) }) return () => cancelAnimationFrame(frame) }, [percentage, shouldShowResults]) return animatedPercentage } /* ----------------------------------------------------------------------------- * Variants * -------------------------------------------------------------------------- */ const optionVariants = cva( [ "group relative flex w-full cursor-pointer items-center gap-3 rounded-xl border p-4 text-left", "transition-all duration-200 ease-out", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", ], { variants: { state: { idle: [ "border-border bg-background hover:border-primary/50 hover:bg-accent/50", ], selected: [ "border-primary bg-primary/5 shadow-sm", "hover:border-primary hover:bg-primary/10", ], voted: ["border-border bg-muted/30 cursor-default"], }, }, defaultVariants: { state: "idle", }, } ) const indicatorVariants = cva( [ "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2", "transition-all duration-200 ease-out", ], { variants: { state: { idle: "border-muted-foreground/30 bg-background", selected: "border-primary bg-primary text-primary-foreground", voted: "border-muted-foreground/30 bg-muted", }, multiple: { true: "rounded-md", false: "rounded-full", }, }, defaultVariants: { state: "idle", multiple: false, }, } ) const progressVariants = cva( [ "absolute inset-y-0 left-0 rounded-l-xl", "transition-all duration-500 ease-out", ], { variants: { state: { idle: "bg-transparent", selected: "bg-primary/15", voted: "bg-primary/10", }, }, defaultVariants: { state: "idle", }, } ) /* ----------------------------------------------------------------------------- * Root * -------------------------------------------------------------------------- */ function ChoicePollRoot({ value: controlledValue, defaultValue, onValueChange, multiple = false, disabled = false, showResults = false, votes = {}, hasVoted = false, children, className, ...props }: ChoicePollRootProps) { const normalizeValue = (val: string | string[] | undefined): string[] => { if (!val) { return [] } return Array.isArray(val) ? val : [val] } const [selectedArray, setSelectedArray] = useControllableState({ prop: controlledValue ? normalizeValue(controlledValue) : undefined, defaultProp: normalizeValue(defaultValue), onChange: (arr) => { if (onValueChange) { onValueChange(multiple ? arr : (arr[0] ?? "")) } }, }) const selected = selectedArray ?? [] const totalVotes = useMemo( () => Object.values(votes).reduce((sum, count) => sum + count, 0), [votes] ) const select = useCallback( (optionId: string) => { if (disabled || hasVoted) { return } setSelectedArray((prev) => { const current = prev ?? [] const isCurrentlySelected = current.includes(optionId) if (multiple) { if (isCurrentlySelected) { return current.filter((id) => id !== optionId) } return [...current, optionId] } if (isCurrentlySelected) { return [] } return [optionId] }) }, [disabled, hasVoted, multiple, setSelectedArray] ) const isSelected = useCallback( (optionId: string) => selected.includes(optionId), [selected] ) const getPercentage = useCallback( (optionId: string) => { if (totalVotes === 0) { return 0 } return Math.round(((votes[optionId] ?? 0) / totalVotes) * 100) }, [votes, totalVotes] ) const contextValue = useMemo( () => ({ selected, multiple, disabled, showResults: showResults && hasVoted, votes, totalVotes, hasVoted, select, isSelected, getPercentage, }), [ selected, multiple, disabled, showResults, hasVoted, votes, totalVotes, select, isSelected, getPercentage, ] ) return (

{children}

) } /* ----------------------------------------------------------------------------- * Header * -------------------------------------------------------------------------- */ function ChoicePollHeader({ children, className, ...props }: ChoicePollHeaderProps) { return (

{children}

) } /* ----------------------------------------------------------------------------- * Title * -------------------------------------------------------------------------- */ function ChoicePollTitle({ children, className, ...props }: ChoicePollTitleProps) { return (

{children}

) } /* ----------------------------------------------------------------------------- * Description * -------------------------------------------------------------------------- */ function ChoicePollDescription({ children, className, ...props }: ChoicePollDescriptionProps) { return (

{children}

) } /* ----------------------------------------------------------------------------- * Options Container * -------------------------------------------------------------------------- */ function ChoicePollOptions({ children, className, ...props }: ChoicePollOptionsProps) { const containerRef = useRef(null) const handleKeyDown = useCallback((event: KeyboardEvent) => { const container = containerRef.current if (!container) { return } const options = Array.from( container.querySelectorAll( '[data-slot="choice-poll-option"]:not([disabled])' ) ) const currentIndex = options.indexOf( document.activeElement as HTMLButtonElement ) let nextIndex = currentIndex switch (event.key) { case "ArrowDown": case "ArrowRight": event.preventDefault() nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0 break case "ArrowUp": case "ArrowLeft": event.preventDefault() nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1 break case "Home": event.preventDefault() nextIndex = 0 break case "End": event.preventDefault() nextIndex = options.length - 1 break default: break } options[nextIndex]?.focus() }, []) return ( ) } /* ----------------------------------------------------------------------------- * Option * -------------------------------------------------------------------------- */ function ChoicePollOption({ value, disabled: optionDisabled = false, children, className, onClick, ...props }: ChoicePollOptionProps) { const { disabled: rootDisabled, hasVoted, showResults, isSelected, select, getPercentage, } = useChoicePollContext() const disabled = rootDisabled || optionDisabled const selected = isSelected(value) const percentage = getPercentage(value) const animatedPercentage = useAnimatedPercentage(percentage, showResults) const getState = (): "idle" | "selected" | "voted" => { if (hasVoted) { return "voted" } if (selected) { return "selected" } return "idle" } const state = getState() const handleClick = useCallback( (event: MouseEvent) => { onClick?.(event) if (!(event.defaultPrevented || disabled)) { select(value) } }, [onClick, disabled, select, value] ) const optionContextValue = useMemo( () => ({ optionId: value, disabled, isSelected: selected, percentage, }), [value, disabled, selected, percentage] ) return ( ) } /* ----------------------------------------------------------------------------- * Indicator (checkbox/radio visual) * -------------------------------------------------------------------------- */ function ChoicePollIndicator({ children, className, ...props }: ChoicePollIndicatorProps) { const { multiple, hasVoted } = useChoicePollContext() const { isSelected } = useChoicePollOptionContext() const getState = (): "idle" | "selected" | "voted" => { if (hasVoted) { return "voted" } if (isSelected) { return "selected" } return "idle" } const state = getState() return ( ) } /* ----------------------------------------------------------------------------- * Label * -------------------------------------------------------------------------- */ function ChoicePollLabel({ children, className, ...props }: ChoicePollLabelProps) { return ( {children} ) } /* ----------------------------------------------------------------------------- * Progress (inline progress bar) * -------------------------------------------------------------------------- */ function ChoicePollProgress({ className, ...props }: ChoicePollProgressProps) { const { showResults } = useChoicePollContext() const { percentage, isSelected } = useChoicePollOptionContext() const animatedPercentage = useAnimatedPercentage(percentage, showResults) if (!showResults) { return null } return ( ) } /* ----------------------------------------------------------------------------- * Percentage * -------------------------------------------------------------------------- */ function ChoicePollPercentage({ children, className, ...props }: ChoicePollPercentageProps) { const { showResults } = useChoicePollContext() const { percentage } = useChoicePollOptionContext() const animatedPercentage = useAnimatedPercentage(percentage, showResults) if (!showResults) { return null } return ( {children ?? `${Math.round(animatedPercentage)}%`} ) } /* ----------------------------------------------------------------------------- * Footer * -------------------------------------------------------------------------- */ function ChoicePollFooter({ children, className, totalVotes, ...props }: ChoicePollFooterProps) { const { totalVotes: contextTotalVotes, hasVoted, showResults, } = useChoicePollContext() const votes = totalVotes ?? contextTotalVotes if (!showResults && !children) { return null } return (

{children ?? ( <> {votes.toLocaleString()} {votes === 1 ? "vote" : "votes"} {hasVoted && ( You voted )} )}

) } /* ----------------------------------------------------------------------------- * Hook for external access * -------------------------------------------------------------------------- */ export function useChoicePoll() { return useChoicePollContext() } /* ----------------------------------------------------------------------------- * Export * -------------------------------------------------------------------------- */ export const ChoicePoll = { Root: ChoicePollRoot, Header: ChoicePollHeader, Title: ChoicePollTitle, Description: ChoicePollDescription, Options: ChoicePollOptions, Option: ChoicePollOption, Indicator: ChoicePollIndicator, Label: ChoicePollLabel, Progress: ChoicePollProgress, Percentage: ChoicePollPercentage, Footer: ChoicePollFooter, } export { ChoicePollRoot, ChoicePollHeader, ChoicePollTitle, ChoicePollDescription, ChoicePollOptions, ChoicePollOption, ChoicePollIndicator, ChoicePollLabel, ChoicePollProgress, ChoicePollPercentage, ChoicePollFooter, } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-use-controllable-state",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-use-controllable-state","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-use-controllable-state"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/choice-poll.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]