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:Ta2e,"use client"; import { useMemo, useRef, useState } from "react"; import type { MouseEvent, ReactNode } from "react"; import { cn } from "../../utils"; import { createInternalContext } from "../../internals/dom/context"; /** What a `` reads from its enclosing ``. */ export interface Card3DContextValue { /** Whether the pointer is currently over the container. */ isMouseEntered: boolean; } const Card3DContext = createInternalContext("Card3DContext"); /** Provider half of the container/item link. Rendered by ``. */ export const Card3DProvider = Card3DContext.Provider; /** Reads the container's hover state. Throws outside a ``. */ export const useCard3D = Card3DContext.useRequired; export interface CardContainerProps { /** Additional CSS classes for the tilting 3d container. */ className?: string; /** Additional CSS classes for the outer perspective wrapper. */ containerClass?: string; /** The card content — typically a `` holding ``s. */ children?: ReactNode; } export function CardContainer({ className = "", containerClass = "", children, }: CardContainerProps) { const containerRef = useRef(null); const [isMouseEntered, setIsMouseEntered] = useState(false); const contextValue = useMemo(() => ({ isMouseEntered }), [isMouseEntered]); function handleMouseMove(e: MouseEvent) { const container = containerRef.current; if (!container) return; const { left, top, width, height } = container.getBoundingClientRect(); const x = (e.clientX - left - width / 2) / 25; const y = (e.clientY - top - height / 2) / 25; container.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`; } function handleMouseEnter() { setIsMouseEntered(true); } function handleMouseLeave() { const container = containerRef.current; if (!container) return; setIsMouseEntered(false); container.style.transform = `rotateY(0deg) rotateX(0deg)`; } return (

{children}

); } 53:T683,"use client"; import { createElement } from "react"; import type { ElementType, ReactNode } from "react"; import { cn } from "../../utils"; import { useCard3D } from "./CardContainer"; export interface CardItemProps { /** Element to render. */ as?: ElementType; /** Additional CSS classes. */ className?: string; /** X offset, in pixels, applied while the container is hovered. */ translateX?: number | string; /** Y offset, in pixels, applied while the container is hovered. */ translateY?: number | string; /** Z offset, in pixels, applied while the container is hovered. */ translateZ?: number | string; /** X rotation, in degrees, applied while the container is hovered. */ rotateX?: number | string; /** Y rotation, in degrees, applied while the container is hovered. */ rotateY?: number | string; /** Z rotation, in degrees, applied while the container is hovered. */ rotateZ?: number | string; /** The layer's content. */ children?: ReactNode; } export function CardItem({ as = "div", className = "", translateX = 0, translateY = 0, translateZ = 0, rotateX = 0, rotateY = 0, rotateZ = 0, children, }: CardItemProps) { const { isMouseEntered } = useCard3D(); const transform = isMouseEntered ? `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)` : `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`; return createElement( as, { className: cn("w-fit motion-safe:transition motion-safe:duration-500 ease-in-out", className), style: { transform }, }, children ); } 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":[null,["$","$L50",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/card-3d/CardBody.tsx","content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils\";\n\nexport interface CardBodyProps {\n\t/** Additional CSS classes. */\n\tclassName?: string;\n\t/** The card's layers — typically ``s. */\n\tchildren?: ReactNode;\n}\n\nexport function CardBody({ className = \"\", children }: CardBodyProps) {\n\treturn (\n\t\t

\n\t\t\t{children}\n\t\t

\n\t);\n}\n","type":"registry:ui","target":"@ui/fancy/components/card-3d/CardBody.tsx"},{"path":"react/src/components/card-3d/CardContainer.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/card-3d/CardContainer.tsx"},{"path":"react/src/components/card-3d/CardItem.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/card-3d/CardItem.tsx"},{"path":"react/src/components/card-3d/index.ts","content":"\"use client\";\n\nexport { CardContainer } from \"./CardContainer\";\nexport type { CardContainerProps } from \"./CardContainer\";\nexport { CardBody } from \"./CardBody\";\nexport type { CardBodyProps } from \"./CardBody\";\nexport { CardItem } from \"./CardItem\";\nexport type { CardItemProps } from \"./CardItem\";\n","type":"registry:ui","target":"@ui/fancy/components/card-3d/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]