52: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"] 53: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"] 54:T25d4,'use client' import { useEffect, useRef, useState } from 'react' import { useControllableState } from '@radix-ui/react-use-controllable-state' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { cn } from '@/lib/utils' import { Check, ChevronDown, CircleX, Copy } from 'lucide-react' export type PackageManagerId = 'npm' | 'pnpm' | 'yarn' | 'bun' export type PackageManagerCommands = Partial> export type PackageManagerCommandProps = { commands: PackageManagerCommands value?: PackageManagerId defaultValue?: PackageManagerId onValueChange?: (value: PackageManagerId) => void className?: string commandClassName?: string align?: 'start' | 'center' | 'end' copyLabel?: string resetDelay?: number onCopySuccess?: (command: string, packageManager: PackageManagerId) => void onCopyError?: (error: Error) => void } type PackageManagerMeta = { id: PackageManagerId name: string Icon: (props: React.SVGProps) => React.ReactNode } function NpmIcon(props: React.SVGProps) { return ( ) } function PnpmIcon(props: React.SVGProps) { return ( ) } function YarnIcon(props: React.SVGProps) { return ( ) } function BunIcon(props: React.SVGProps) { return ( ) } const PACKAGE_MANAGERS: readonly PackageManagerMeta[] = [ { id: 'npm', name: 'npm', Icon: NpmIcon }, { id: 'pnpm', name: 'pnpm', Icon: PnpmIcon }, { id: 'yarn', name: 'yarn', Icon: YarnIcon }, { id: 'bun', name: 'bun', Icon: BunIcon }, ] export function getAvailablePackageManagers(commands: PackageManagerCommands) { return PACKAGE_MANAGERS.filter((manager) => Boolean(commands[manager.id])) } export function PackageManagerCommand({ commands, value: valueProp, defaultValue = 'npm', onValueChange, className, commandClassName, align = 'end', copyLabel, resetDelay = 1600, onCopySuccess, onCopyError, }: PackageManagerCommandProps) { const availablePackageManagers = getAvailablePackageManagers(commands) const fallbackPackageManager = availablePackageManagers[0] ?? PACKAGE_MANAGERS[0] const [selectedValue = fallbackPackageManager.id, setSelectedValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue, onChange: onValueChange, }) const selectedPackageManager = availablePackageManagers.find((item) => item.id === selectedValue) ?? fallbackPackageManager const selectedPm = selectedPackageManager.id const command = commands[selectedPm] ?? '' const SelectedIcon = selectedPackageManager.Icon const [copyState, setCopyState] = useState<'idle' | 'done' | 'error'>('idle') const resetTimeoutRef = useRef | null>(null) async function handleCopy() { if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current) try { await navigator.clipboard.writeText(command) setCopyState('done') onCopySuccess?.(command, selectedPm) } catch (error) { const copyError = error instanceof Error ? error : new Error('Copy failed') setCopyState('error') onCopyError?.(copyError) } resetTimeoutRef.current = setTimeout(() => { setCopyState('idle') resetTimeoutRef.current = null }, resetDelay) } useEffect(() => { return () => { if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current) } }, []) if (availablePackageManagers.length === 0) return null const copyActionLabel = copyState === 'done' ? `${selectedPackageManager.name} install command copied` : copyState === 'error' ? `Unable to copy ${selectedPackageManager.name} install command` : (copyLabel ?? `Copy ${selectedPackageManager.name} install command`) return (

{availablePackageManagers.map((pm) => { const PmIcon = pm.Icon const isSelected = pm.id === selectedPm return ( setSelectedValue(pm.id)} > {pm.name} {isSelected ? : null} ) })}

) } 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@navui","registryDependencies":["button","dropdown-menu"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/package-manager-command/package-manager-command.tsx","content":"$54","type":"registry:ui","target":"@components/package-manager-command.tsx"}],"className":"h-[70svh] min-h-80"}]]}]