4e: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"] 4f: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"] 50:T20d1,"use client"; // karaui.kamisama-v0.my.id/components/blocks/bento-grid import { ArrowRight } from "lucide-react"; import { motion, useMotionValue, useReducedMotion, type Variants, } from "motion/react"; import { type MouseEvent, type ReactNode, useState } from "react"; import { EASE_OUT, EASE_OUT_CSS } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export type BentoSpan = 1 | 2 | 3 | 4; export interface BentoGridProps { children: ReactNode; /** Columns once the grid's own container is at least 32rem wide. Default 3. */ columns?: 2 | 3 | 4; /** Stagger the cards in when the grid scrolls into view. Default true. */ animateOnView?: boolean; className?: string; } // Static class maps: Tailwind only ships classes it can see written out. const GRID_COLS: Record<2 | 3 | 4, string> = { 2: "@lg:grid-cols-2", 3: "@lg:grid-cols-3", 4: "@lg:grid-cols-4", }; const COL_SPAN: Record = { 1: "", 2: "@lg:col-span-2", 3: "@lg:col-span-3", 4: "@lg:col-span-4", }; const ROW_SPAN: Record = { 1: "", 2: "@lg:row-span-2", 3: "@lg:row-span-3", 4: "@lg:row-span-4", }; const STAGGER = 0.06; /** * Responsive bento layout. The grid reads its own container width (not the * viewport), so it collapses to one column inside a narrow sidebar or card * just as it does on a phone. Cards stagger in once when scrolled into view. */ export function BentoGrid({ children, columns = 3, animateOnView = true, className, }: BentoGridProps) { return (

{children}

); } export interface BentoCardProps { title: ReactNode; description?: ReactNode; /** Small icon shown in a tile above the title. */ icon?: ReactNode; /** Decorative visual (mini chart, illustration). Lifts and zooms on hover. */ visual?: ReactNode; /** Makes the whole card a link via the CTA. */ href?: string; /** Makes the whole card a button via the CTA (ignored when `href` is set). */ onClick?: () => void; /** CTA label. Default "Learn more". Only shown with `href` or `onClick`. */ cta?: ReactNode; /** Columns spanned at wide container sizes. Default 1. */ colSpan?: BentoSpan; /** Rows spanned at wide container sizes. Default 1. */ rowSpan?: BentoSpan; /** Spotlight color (any CSS color). Default `var(--primary)`. */ spotlightColor?: string; className?: string; } const SPOT_SIZE = 280; // px diameter of the cursor spotlight /** * A bento tile. On hover-capable devices a radial spotlight follows the * cursor, lighting the border and faintly washing the surface; the visual * slot lifts slightly. With `href`/`onClick` the CTA is the real link or * button and stretches over the whole card, so the tile stays one tab stop. */ export function BentoCard({ title, description, icon, visual, href, onClick, cta = "Learn more", colSpan = 1, rowSpan = 1, spotlightColor = "var(--primary)", className, }: BentoCardProps) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); // The spotlight tracks the cursor; it is decorative, so touch devices // (phantom hover) skip it. Reduced motion keeps it: it follows the pointer // 1:1 with no travel of its own, so nothing moves that the user didn't move. const spotlight = canHover; const lift = canHover && !reduce; const [hovered, setHovered] = useState(false); // Spotlight position as transforms on the glow layers, not a re-rendered // gradient: the circles translate, so the browser only composites. const x = useMotionValue(-SPOT_SIZE); const y = useMotionValue(-SPOT_SIZE); const onMove = (event: MouseEvent) => { if (!spotlight) return; const rect = event.currentTarget.getBoundingClientRect(); x.set(event.clientX - rect.left - SPOT_SIZE / 2); y.set(event.clientY - rect.top - SPOT_SIZE / 2); }; const item: Variants = { hidden: { opacity: 0, y: reduce ? 0 : 14 }, show: { opacity: 1, y: 0, transition: { duration: 0.45, ease: EASE_OUT }, }, }; const interactive = Boolean(href || onClick); const ctaClass = // Stretched link: the CTA stays static so its ::after covers the card // (the nearest positioned ancestor), making the whole tile clickable. "mt-3 inline-flex w-fit items-center gap-1 rounded-md text-sm font-medium text-foreground outline-none after:absolute after:inset-0 after:z-30 after:rounded-[inherit] after:content-[''] focus-visible:ring-2 focus-visible:ring-primary"; const ctaInner = ( <> {cta} ); const spot = (opacityClass: string) => ( ); return ( setHovered(true)} onMouseLeave={() => setHovered(false)} className={cn( "group/bento relative isolate flex flex-col overflow-hidden rounded-2xl border border-border bg-card p-4 text-card-foreground", interactive && "cursor-pointer", COL_SPAN[colSpan], ROW_SPAN[rowSpan], className, )} > {spotlight ? ( <> {/* Surface wash */} {spot("")} {/* Border light: the same circle, masked down to a 1px ring. */} {spot("opacity-80")} ) : null} {visual ? (

{visual}

) : null}

{icon ? ( {icon} ) : null}

{title}

{description ? (

{description}

) : null} {href ? ( {ctaInner} ) : onClick ? ( ) : null}

); } 51:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4d:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/motion/bento-grid.tsx","content":"$50","type":"registry:component","target":"@components/motion/bento-grid.tsx"},{"path":"lib/ease.ts","content":"$51","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]