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:T1e35,"use client"; import * as React from "react"; import { motion, useReducedMotion } from "framer-motion"; import { cn } from "@/lib/utils"; export type BadgeImage = { src: string; alt: string }; export interface ImagesBadgeProps { images: BadgeImage[]; /** Images shown in collapsed state. @default 3 */ maxVisible?: number; /** Additional images revealed on hover. @default 2 */ revealCount?: number; /** Optional text label after the stack. */ label?: string; size?: "sm" | "md" | "lg"; /** Image shape. @default "rounded" */ shape?: "circle" | "rounded" | "square"; className?: string; imageClassName?: string; onClick?: () => void; } // ── Size tokens ─────────────────────────────────────────────────────────────── const CFG = { sm: { px: 32, gap: 8, pill: "h-9 pl-2 pr-3.5 gap-2 text-[11px]", cnt: "text-[9px]" }, md: { px: 42, gap: 10, pill: "h-11 pl-2.5 pr-4 gap-2.5 text-xs", cnt: "text-[10px]" }, lg: { px: 56, gap: 12, pill: "h-14 pl-3 pr-5 gap-3 text-sm", cnt: "text-[12px]" }, } as const; const SHAPE: Record = { circle: "rounded-full", rounded: "rounded-[10px]", square: "rounded-[4px]", }; const SPRING = { type: "spring" as const, stiffness: 280, damping: 24 }; // ── Rotation table — gives each card a unique hand-placed feel ──────────────── // Index 0 = back of stack (lowest z), higher index = front const REST_ROT = [-14, -7, -2, 5, 11, -9, 3, -5] as const; const HOVER_ROT = [ -8, -4, -1, 2, 6, -6, 2, -3] as const; // ── Arc Y-offset in the spread state (outer cards drop, center stays high) ──── function arcY(i: number, total: number): number { if (total <= 1) return 0; const mid = (total - 1) / 2; const t = (i - mid) / mid; // -1 … 0 … +1 return t * t * (CFG.md.px * 0.22); // parabola: 0 at centre, ~9px at edges } // ── Component ───────────────────────────────────────────────────────────────── export function ImagesBadge({ images, maxVisible = 3, revealCount = 2, label, size = "md", shape = "rounded", className, imageClassName, onClick, }: ImagesBadgeProps) { const [hovered, setHovered] = React.useState(false); const reduced = useReducedMotion(); const { px, gap, pill, cnt } = CFG[size]; const rendered = images.slice(0, maxVisible + revealCount); const overflow = Math.max(0, images.length - maxVisible - revealCount); const slots: Array = overflow > 0 ? [...rendered, null] : rendered; const total = slots.length; // ── Collapsed geometry ─────────────────────────────────────────────────── // Images heavily overlapped; only maxVisible worth of width consumed const peekPx = Math.round(px * 0.32); // how much of each card peeks out const collapsedW = px + (Math.min(maxVisible, total) - 1) * peekPx; // ── Spread geometry ────────────────────────────────────────────────────── const spreadW = total * px + (total - 1) * gap; // x position in spread state (left-aligned) const spreadX = (i: number) => i * (px + gap); // x position in collapsed state — visible cards peek from right; hidden cards hide behind const collapsedX = (i: number) => { if (i >= maxVisible) return (maxVisible - 1) * peekPx; // stack behind last visible return i * peekPx; }; return ( setHovered(true)} onHoverEnd={() => setHovered(false)} onClick={onClick} whileHover={reduced ? undefined : { y: -2, scale: 1.015 }} transition={SPRING} role={onClick ? "button" : undefined} tabIndex={onClick ? 0 : undefined} onKeyDown={onClick ? (e) => { if (e.key === "Enter" || e.key === " ") onClick(); } : undefined} > {/* ── Image strip ──────────────────────────────────────── */} {slots.map((slot, i) => { const isHidden = i >= maxVisible && slot !== null; const isOverflow = slot === null; const tx = hovered ? spreadX(i) : collapsedX(i); const ty = hovered ? arcY(i, total) : 0; const rotate = reduced ? 0 : hovered ? (HOVER_ROT[i] ?? 0) : (REST_ROT[i] ?? 0); const opacity = isHidden ? (hovered ? 1 : 0) : 1; const scale = isHidden ? (hovered ? 1 : 0.6) : 1; // Front-most card has highest z when collapsed; all equal when spread const zIdx = hovered ? i + 1 : (total - i); return ( {isOverflow ? ( +{overflow} ) : ( {slot!.alt}

)} ); })} {/* ── Label ─────────────────────────────────────────────── */} {label && ( {label} )} ); } 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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}],["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"react"}]]}]}]]}],["$","$L50",null,{"namespace":"@nexus-labs","registryDependencies":["https://www.nexus-ui.com/api/registry/nexus-font","utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"next-ui/images-badge/images-badge.tsx","content":"$52","type":"registry:component","target":"components/images-badge/images-badge.tsx"},{"path":"next-ui/images-badge/index.ts","content":"export { ImagesBadge } from \"./images-badge\";\nexport type { ImagesBadgeProps, BadgeImage } from \"./images-badge\";\n","type":"registry:lib","target":"components/images-badge/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]