4f: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/1o6_421saitt-.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"] 50: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/1o6_421saitt-.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"] 51:T1d89,"use client"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import { motion, type PanInfo, useMotionValue, useTransform, } from "motion/react"; import { Children, cloneElement, type HTMLAttributes, type ReactElement, useCallback, useEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export type DeckProps = HTMLAttributes; export const Deck = ({ className, ...props }: DeckProps) => (

); export type DeckCardsProps = HTMLAttributes & { onSwipe?: (index: number, direction: "left" | "right") => void; onSwipeEnd?: (index: number, direction: "left" | "right") => void; threshold?: number; stackSize?: number; perspective?: number; scale?: number; currentIndex?: number; defaultCurrentIndex?: number; onCurrentIndexChange?: (index: number) => void; animateOnIndexChange?: boolean; indexChangeDirection?: "left" | "right"; }; export const DeckCards = ({ children, className, onSwipe, onSwipeEnd, threshold = 150, stackSize = 3, perspective = 1000, scale = 0.05, currentIndex: currentIndexProp, defaultCurrentIndex = 0, onCurrentIndexChange, animateOnIndexChange = true, indexChangeDirection = "left", ...props }: DeckCardsProps) => { const childrenArray = Children.toArray(children) as ReactElement[]; const [currentIndex, setCurrentIndex] = useControllableState({ prop: currentIndexProp, defaultProp: defaultCurrentIndex, onChange: onCurrentIndexChange, }); const [exitDirection, setExitDirection] = useState<"left" | "right" | null>( null ); const [displayIndex, setDisplayIndex] = useState(currentIndex); const isInternalChangeRef = useRef(false); const prevIndexRef = useRef(currentIndex); // Detect external currentIndex changes and trigger animation useEffect(() => { const prevIndex = prevIndexRef.current; // Skip initial mount and internal changes if (prevIndex === currentIndex || isInternalChangeRef.current) { isInternalChangeRef.current = false; prevIndexRef.current = currentIndex; setDisplayIndex(currentIndex); return; } // Only animate if the option is enabled and we have cards to show if (animateOnIndexChange && prevIndex < childrenArray.length) { setExitDirection(indexChangeDirection); // Update display index after animation completes setTimeout(() => { setExitDirection(null); setDisplayIndex(currentIndex); }, 300); } else { // No animation, update display index immediately setDisplayIndex(currentIndex); } prevIndexRef.current = currentIndex; }, [ currentIndex, animateOnIndexChange, indexChangeDirection, childrenArray.length, ]); const handleSwipe = useCallback( (direction: "left" | "right") => { if (displayIndex >= childrenArray.length) { return; } setExitDirection(direction); if (direction === "left") { onSwipe?.(displayIndex, "left"); } else { onSwipe?.(displayIndex, "right"); } onSwipeEnd?.(displayIndex, direction); // Move to next card after animation setTimeout(() => { isInternalChangeRef.current = true; const newIndex = displayIndex + 1; setCurrentIndex(newIndex); setDisplayIndex(newIndex); setExitDirection(null); }, 300); }, [displayIndex, childrenArray.length, onSwipe, onSwipeEnd, setCurrentIndex] ); const visibleCards = childrenArray.slice( displayIndex, displayIndex + stackSize ); if (displayIndex >= childrenArray.length) { return null; } return (

{visibleCards.map((child, index) => { const isTopCard = !index; const zIndex = stackSize - index; const scaleValue = 1 - index * scale; const yOffset = index * 4; const cardKey = `${displayIndex}-${child.key ?? index}`; if (isTopCard) { return ( {child} ); } const nextCardScale = index === 1 && exitDirection ? 1 : scaleValue; const nextCardY = index === 1 && exitDirection ? 0 : yOffset; return ( {child} ); })}

); }; type DeckCardProps = { children: ReactElement; onSwipe: (direction: "left" | "right") => void; threshold: number; style?: object; exitDirection: "left" | "right" | null; }; const DeckCard = ({ children, onSwipe, threshold, style, exitDirection, }: DeckCardProps) => { const x = useMotionValue(0); const rotate = useTransform(x, [-200, 200], [-25, 25]); const opacity = useTransform( x, [-200, -threshold, 0, threshold, 200], [0, 1, 1, 1, 0] ); const handleDragEnd = (_: unknown, info: PanInfo) => { const swipeThreshold = threshold; if (Math.abs(info.offset.x) > swipeThreshold) { const direction = info.offset.x > 0 ? "right" : "left"; onSwipe(direction); } }; let exitX = 0; if (exitDirection === "left") { exitX = -500; } else if (exitDirection === "right") { exitX = 500; } const castedChildren = children as ReactElement< HTMLAttributes >; return ( {cloneElement(castedChildren, { className: cn( "h-full w-full select-none rounded-lg shadow-lg", castedChildren.props.className ), })} ); }; export type DeckItemProps = HTMLAttributes; export const DeckItem = ({ className, ...props }: DeckItemProps) => (

); export type DeckEmptyProps = HTMLAttributes; export const DeckEmpty = ({ children, className, ...props }: HTMLAttributes) => (

{children ??

No more cards

}

); 4e:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"index.tsx","content":"$51","type":"registry:ui","target":"components/kibo-ui/deck/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]