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:T1623,"use client" import { useEffect, useLayoutEffect, useRef, useState, type ComponentProps, } from "react" import { arc } from "motion" import { motion, useAnimate } from "motion/react" import { cn } from "@/lib/utils" const MotionLink = motion.create("a") const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect export type BounceSidebarItem = | string | { label: string; href?: string; depth?: number } | { label: string; heading: true } export type BounceSidebarProps = Omit, "onChange"> & { items: BounceSidebarItem[] value?: number defaultValue?: number onChange?: (index: number) => void dotColor?: string } export function BounceSidebar({ items, value, defaultValue = 0, onChange, dotColor = "#FC4C01", className, ...props }: BounceSidebarProps) { const [internalValue, setInternalValue] = useState(defaultValue) const activeIndex = value ?? internalValue const [dot, animate] = useAnimate() const itemRefs = useRef<(HTMLLIElement | null)[]>([]) const prevY = useRef(null) const [dotSize, setDotSize] = useState(6) const [ready, setReady] = useState(false) useEffect(() => { const init = () => { const dpr = window.devicePixelRatio || 1 setDotSize(Math.round(6 * dpr) / dpr) } init() }, []) useIsomorphicLayoutEffect(() => { let cancelled = false const snap = () => { const el = itemRefs.current[activeIndex] if (cancelled || !el || !dot.current) return const dpr = window.devicePixelRatio || 1 const size = Math.round(6 * dpr) / dpr const toY = Math.round((el.offsetTop + el.offsetHeight / 2 - size / 2) * dpr) / dpr animate(dot.current, { x: 0, y: toY }, { duration: 0 }) prevY.current = toY setReady(true) } snap() const raf = requestAnimationFrame(snap) document.fonts?.ready.then(snap) return () => { cancelled = true cancelAnimationFrame(raf) } }, []) useEffect(() => { const el = itemRefs.current[activeIndex] if (!el || !dot.current) return const dpr = window.devicePixelRatio || 1 const toY = Math.round((el.offsetTop + el.offsetHeight / 2 - dotSize / 2) * dpr) / dpr if (prevY.current === null) { animate(dot.current, { x: 0, y: toY }, { duration: 0 }) prevY.current = toY return } const fromY = prevY.current const delta = toY - fromY prevY.current = toY if (delta === 0) return const distance = Math.abs(delta) const path = arc({ // Peak horizontal sway ≈ strength × distance; capping it at 8px keeps // the dot (8px inset, 6px wide) fully inside the container even on // narrow rails instead of clipping out of view mid-arc. strength: Math.min(0.8, 8 / distance), direction: delta > 0 ? "ccw" : "cw", }) animate( dot.current, { x: 0, y: toY }, { duration: 0.25, ease: "easeOut", path } ) }, [activeIndex, animate, dot, dotSize]) const select = (index: number) => { if (value === undefined) setInternalValue(index) onChange?.(index) } return (

{items.map((item, index) => { const label = typeof item === "string" ? item : item.label if (typeof item !== "string" && "heading" in item) { return (

{ itemRefs.current[index] = el }} role="presentation" data-slot="bounce-sidebar-heading" style={{ color: dotColor }} className="px-1 pt-7 pb-1 text-[11px] font-semibold tracking-[0.14em] uppercase first:pt-0" > {label}

) } const href = typeof item === "string" ? undefined : item.href const depth = typeof item !== "string" && "depth" in item ? (item.depth ?? 0) : 0 const isActive = index === activeIndex const itemClassName = cn( "flex w-full cursor-pointer items-center rounded-lg p-1 text-start text-sm transition-colors duration-200", isActive ? "text-foreground" : "text-foreground/50", depth === 1 && "ps-4", depth === 2 && "ps-8" ) return (

{ itemRefs.current[index] = el }} > {href ? ( select(index)} className={itemClassName} > {label} ) : ( select(index)} className={itemClassName} > {label} )}

) })}

) } 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","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@persianlabsui","registryDependencies":["utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/bounce-sidebar.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]