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:T48aa,"use client" import { createContext, useCallback, useContext, useMemo, useRef, 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 FeaturePollRootProps 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 to show results after voting */ showResults?: boolean /** Vote counts per option (for showing results) */ votes?: Record /** Whether user has submitted their vote */ hasVoted?: boolean } export interface FeaturePollOptionProps extends ComponentProps<"button"> { /** Unique identifier for this option */ value: string /** Whether this specific option is disabled */ disabled?: boolean } export type FeaturePollHeaderProps = ComponentProps<"div"> export type FeaturePollTitleProps = ComponentProps<"h3"> export type FeaturePollDescriptionProps = ComponentProps<"p"> export type FeaturePollOptionsProps = ComponentProps<"div"> export type FeaturePollLabelProps = ComponentProps<"span"> export type FeaturePollIndicatorProps = ComponentProps<"span"> export type FeaturePollProgressProps = ComponentProps<"div"> export type FeaturePollPercentageProps = ComponentProps<"span"> export interface FeaturePollFooterProps extends ComponentProps<"div"> { /** Total number of votes */ totalVotes?: number } /* ----------------------------------------------------------------------------- * Context * -------------------------------------------------------------------------- */ interface FeaturePollContextValue { 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 FeaturePollContext = createContext(null) function useFeaturePollContext() { const context = useContext(FeaturePollContext) if (!context) { throw new Error( "FeaturePoll components must be used within FeaturePoll.Root" ) } return context } interface FeaturePollOptionContextValue { optionId: string disabled: boolean isSelected: boolean percentage: number } const FeaturePollOptionContext = createContext(null) function useFeaturePollOptionContext() { const context = useContext(FeaturePollOptionContext) if (!context) { throw new Error( "FeaturePoll.Option sub-components must be used within FeaturePoll.Option" ) } return context } /* ----------------------------------------------------------------------------- * 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/10", voted: "bg-muted/50", }, }, defaultVariants: { state: "idle", }, } ) /* ----------------------------------------------------------------------------- * Root * -------------------------------------------------------------------------- */ function FeaturePollRoot({ value: controlledValue, defaultValue, onValueChange, multiple = false, disabled = false, showResults = false, votes = {}, hasVoted = false, children, className, ...props }: FeaturePollRootProps) { 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 FeaturePollHeader({ children, className, ...props }: FeaturePollHeaderProps) { return (

{children}

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

{children}

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

{children}

) } /* ----------------------------------------------------------------------------- * Options Container * -------------------------------------------------------------------------- */ function FeaturePollOptions({ children, className, ...props }: FeaturePollOptionsProps) { const containerRef = useRef(null) const handleKeyDown = useCallback((event: KeyboardEvent) => { const container = containerRef.current if (!container) { return } const options = Array.from( container.querySelectorAll( '[data-slot="feature-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 FeaturePollOption({ value, disabled: optionDisabled = false, children, className, onClick, ...props }: FeaturePollOptionProps) { const { disabled: rootDisabled, hasVoted, showResults, isSelected, select, getPercentage, } = useFeaturePollContext() const disabled = rootDisabled || optionDisabled const selected = isSelected(value) const percentage = getPercentage(value) 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 FeaturePollIndicator({ children, className, ...props }: FeaturePollIndicatorProps) { const { multiple, hasVoted } = useFeaturePollContext() const { isSelected } = useFeaturePollOptionContext() const getState = (): "idle" | "selected" | "voted" => { if (hasVoted) { return "voted" } if (isSelected) { return "selected" } return "idle" } const state = getState() return ( ) } /* ----------------------------------------------------------------------------- * Label * -------------------------------------------------------------------------- */ function FeaturePollLabel({ children, className, ...props }: FeaturePollLabelProps) { return ( {children} ) } /* ----------------------------------------------------------------------------- * Progress (inline progress bar) * -------------------------------------------------------------------------- */ function FeaturePollProgress({ className, ...props }: FeaturePollProgressProps) { const { showResults } = useFeaturePollContext() const { percentage, isSelected } = useFeaturePollOptionContext() if (!showResults) { return null } return ( ) } /* ----------------------------------------------------------------------------- * Percentage * -------------------------------------------------------------------------- */ function FeaturePollPercentage({ children, className, ...props }: FeaturePollPercentageProps) { const { showResults } = useFeaturePollContext() const { percentage } = useFeaturePollOptionContext() if (!showResults) { return null } return ( {children ?? `${percentage}%`} ) } /* ----------------------------------------------------------------------------- * Footer * -------------------------------------------------------------------------- */ function FeaturePollFooter({ children, className, totalVotes, ...props }: FeaturePollFooterProps) { const { totalVotes: contextTotalVotes, hasVoted } = useFeaturePollContext() const votes = totalVotes ?? contextTotalVotes return (

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

) } /* ----------------------------------------------------------------------------- * Hook for external access * -------------------------------------------------------------------------- */ export function useFeaturePoll() { return useFeaturePollContext() } /* ----------------------------------------------------------------------------- * Export * -------------------------------------------------------------------------- */ export const FeaturePoll = { Root: FeaturePollRoot, Header: FeaturePollHeader, Title: FeaturePollTitle, Description: FeaturePollDescription, Options: FeaturePollOptions, Option: FeaturePollOption, Indicator: FeaturePollIndicator, Label: FeaturePollLabel, Progress: FeaturePollProgress, Percentage: FeaturePollPercentage, Footer: FeaturePollFooter, } export { FeaturePollRoot, FeaturePollHeader, FeaturePollTitle, FeaturePollDescription, FeaturePollOptions, FeaturePollOption, FeaturePollIndicator, FeaturePollLabel, FeaturePollProgress, FeaturePollPercentage, FeaturePollFooter, } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/feature-poll.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]