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:T1461,"use client" import { cn } from "@/lib/utils" import { motion, useMotionValue, useSpring, useTransform, type Transition } from "framer-motion" import React, { ReactNode, useRef, useState } from "react" import { Spotlight } from "./spotlight" import { BorderBeam } from "./border-beam" const SPRING_TACTILE: Transition = { type: "spring", stiffness: 400, damping: 25, mass: 1, } const SPRING_ENTRANCE: Transition = { type: "spring", stiffness: 260, damping: 20, } export interface BentoCardProps { className?: string children?: ReactNode title?: ReactNode description?: ReactNode icon?: ReactNode background?: ReactNode colSpan?: number rowSpan?: number tilt?: boolean spotlight?: boolean borderAnim?: boolean } const itemVariants = { hidden: { opacity: 0, y: 12, scale: 0.98 }, visible: { opacity: 1, y: 0, scale: 1, transition: SPRING_ENTRANCE }, hover: { scale: 1.01, y: -4, transition: SPRING_TACTILE } } export function BentoCard({ className, children, title, description, icon, background, colSpan = 1, rowSpan = 1, tilt = false, spotlight = true, borderAnim = true, }: BentoCardProps) { const ref = useRef(null) const [isHovered, setIsHovered] = useState(false) const spotlightX = useMotionValue(0) const spotlightY = useMotionValue(0) const tiltX = useMotionValue(0) const tiltY = useMotionValue(0) // Smooth springs for tilt const smoothTiltX = useSpring(tiltX, { stiffness: 300, damping: 30 }) const smoothTiltY = useSpring(tiltY, { stiffness: 300, damping: 30 }) const rotateX = useTransform(smoothTiltY, [-150, 150], [5, -5]) const rotateY = useTransform(smoothTiltX, [-150, 150], [-5, 5]) function handleMouseMove(e: React.MouseEvent) { if (!ref.current) return const rect = ref.current.getBoundingClientRect() // For Spotlight (relative to top left) spotlightX.set(e.clientX - rect.left) spotlightY.set(e.clientY - rect.top) // For Tilt (relative to center) if (tilt) { const centerX = rect.width / 2 const centerY = rect.height / 2 tiltX.set(e.clientX - rect.left - centerX) tiltY.set(e.clientY - rect.top - centerY) } } function handleMouseEnter() { setIsHovered(true) } function handleMouseLeave() { setIsHovered(false) if (tilt) { tiltX.set(0) tiltY.set(0) } } // Calculate CSS grid spans const colSpanClass = { 1: "md:col-span-1", 2: "md:col-span-2", 3: "md:col-span-3", 4: "md:col-span-4", }[colSpan] || "md:col-span-1" const rowSpanClass = { 1: "row-span-1", 2: "row-span-2", 3: "row-span-3", }[rowSpan] || "row-span-1" return ( {/* Spotlight Effect */} {spotlight && ( )} {/* Border Beam */} {borderAnim && } {/* Background Effect */} {background && (

{background}

)} {/* Content Container */}

{/* Render children first if it's the main visual */}

{children}

{/* Header / Footer text area */} {(title || description || icon) && (

{icon && (

{icon}

)}

{title && (

{title}

)} {description && (

{description}

)}

) } 53:T54f,"use client" import { cn } from "@/lib/utils" import { motion } from "framer-motion" import React from "react" export interface BorderBeamProps { className?: string duration?: number borderWidth?: number colorFrom?: string colorTo?: string isHovered?: boolean } export function BorderBeam({ className, duration = 8, borderWidth = 1.5, colorFrom = "rgba(163, 163, 163, 0)", colorTo = "rgba(163, 163, 163, 0.4)", isHovered = false, }: BorderBeamProps) { return (

) } 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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"app/registry/bento-grid/bento-grid.tsx","content":"import { cn } from \"@/lib/utils\"\nimport { motion } from \"framer-motion\"\nimport React, { ReactNode } from \"react\"\n\nexport interface BentoGridProps {\n className?: string\n children?: ReactNode\n}\n\nconst containerVariants = {\n hidden: {},\n visible: {\n transition: {\n staggerChildren: 0.1,\n },\n },\n}\n\nexport function BentoGrid({ className, children }: BentoGridProps) {\n return (\n \n {children}\n \n )\n}\n","type":"registry:component","target":"components/spectrumui/bento-grid.tsx"},{"path":"app/registry/bento-grid/bento-card.tsx","content":"$52","type":"registry:component","target":"components/spectrumui/bento-card.tsx"},{"path":"app/registry/bento-grid/spotlight.tsx","content":"\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { motion, MotionValue, useMotionTemplate } from \"framer-motion\"\nimport React from \"react\"\n\nexport interface SpotlightProps {\n className?: string\n mouseX: MotionValue\n mouseY: MotionValue\n isHovered: boolean\n color?: string\n}\n\nexport function Spotlight({\n className,\n mouseX,\n mouseY,\n isHovered,\n color = \"rgba(255, 255, 255, 0.06)\",\n}: SpotlightProps) {\n const background = useMotionTemplate`\n radial-gradient(\n 350px circle at ${mouseX}px ${mouseY}px,\n ${color},\n transparent 80%\n )\n `\n\n return (\n \n )\n}\n","type":"registry:component","target":"components/spectrumui/spotlight.tsx"},{"path":"app/registry/bento-grid/border-beam.tsx","content":"$53","type":"registry:component","target":"components/spectrumui/border-beam.tsx"}],"className":"h-[70svh] min-h-80"}]]}]