@hanzo/ui 5.3.34 → 5.3.36

package/dist/src/3d/card.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+interface Card3DProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    maxTilt?: number;
+    perspective?: number;
+    scale?: number;
+    speed?: number;
+    glare?: boolean;
+    glareMaxOpacity?: number;
+    className?: string;
+}
+declare const Card3D: React.ForwardRefExoticComponent<Card3DProps & React.RefAttributes<HTMLDivElement>>;
+declare const Card3DHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Card3DTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLParagraphElement>>;
+declare const Card3DDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLParagraphElement>>;
+declare const Card3DContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Card3DFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Card3D, Card3DHeader, Card3DTitle, Card3DDescription, Card3DContent, Card3DFooter, };
+//# sourceMappingURL=card.d.ts.map

package/dist/src/3d/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/3d/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,MAAM,oFAyJX,CAAA;AAID,QAAA,MAAM,YAAY;YAEiC,MAAM;wCAWvD,CAAA;AAGF,QAAA,MAAM,WAAW;YAEsC,MAAM;8CAc3D,CAAA;AAGF,QAAA,MAAM,iBAAiB;YAEkC,MAAM;8CAW7D,CAAA;AAGF,QAAA,MAAM,aAAa;YAEgC,MAAM;wCAWvD,CAAA;AAGF,QAAA,MAAM,YAAY;YAEiC,MAAM;wCAWvD,CAAA;AAGF,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,GACb,CAAA"}

package/dist/src/3d/card.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@hanzo/ui/lib/utils";
+const Card3D = React.forwardRef(({ children, maxTilt = 15, perspective = 1000, scale = 1.05, speed = 400, glare = true, glareMaxOpacity = 0.7, className, ...props }, ref) => {
+    const cardRef = React.useRef(null);
+    const glareRef = React.useRef(null);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [transforms, setTransforms] = React.useState({
+        rotateX: 0,
+        rotateY: 0,
+        scale: 1,
+        glareX: 50,
+        glareY: 50,
+        glareOpacity: 0,
+    });
+    const updateTransforms = React.useCallback((point, rect) => {
+        if (!point || !rect) {
+            setTransforms({
+                rotateX: 0,
+                rotateY: 0,
+                scale: 1,
+                glareX: 50,
+                glareY: 50,
+                glareOpacity: 0,
+            });
+            return;
+        }
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const deltaX = (point.x - centerX) / (rect.width / 2);
+        const deltaY = (point.y - centerY) / (rect.height / 2);
+        const rotateX = -deltaY * maxTilt;
+        const rotateY = deltaX * maxTilt;
+        const glareX = ((point.x - rect.left) / rect.width) * 100;
+        const glareY = ((point.y - rect.top) / rect.height) * 100;
+        setTransforms({
+            rotateX,
+            rotateY,
+            scale,
+            glareX,
+            glareY,
+            glareOpacity: glare ? glareMaxOpacity : 0,
+        });
+    }, [maxTilt, scale, glare, glareMaxOpacity]);
+    const handleMouseMove = React.useCallback((e) => {
+        if (!cardRef.current)
+            return;
+        const rect = cardRef.current.getBoundingClientRect();
+        const point = { x: e.clientX, y: e.clientY };
+        updateTransforms(point, rect);
+    }, [updateTransforms]);
+    const handleTouchMove = React.useCallback((e) => {
+        if (!cardRef.current || e.touches.length === 0)
+            return;
+        e.preventDefault();
+        const rect = cardRef.current.getBoundingClientRect();
+        const touch = e.touches[0];
+        const point = { x: touch.clientX, y: touch.clientY };
+        updateTransforms(point, rect);
+    }, [updateTransforms]);
+    const handleMouseEnter = React.useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const handleMouseLeave = React.useCallback(() => {
+        setIsHovered(false);
+        updateTransforms(null, null);
+    }, [updateTransforms]);
+    const handleTouchStart = React.useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const handleTouchEnd = React.useCallback(() => {
+        setIsHovered(false);
+        updateTransforms(null, null);
+    }, [updateTransforms]);
+    const cardStyle = {
+        transform: `perspective(${perspective}px) rotateX(${transforms.rotateX}deg) rotateY(${transforms.rotateY}deg) scale(${transforms.scale})`,
+        transition: isHovered
+            ? "none"
+            : `transform ${speed}ms cubic-bezier(0.03, 0.98, 0.52, 0.99)`,
+        transformStyle: "preserve-3d",
+    };
+    const glareStyle = {
+        background: `radial-gradient(circle at ${transforms.glareX}% ${transforms.glareY}%, rgba(255,255,255,${transforms.glareOpacity}) 0%, transparent 50%)`,
+        transition: isHovered ? "none" : `opacity ${speed}ms ease-out`,
+    };
+    React.useImperativeHandle(ref, () => cardRef.current);
+    return (_jsxs("div", { ref: cardRef, className: cn("relative rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer", "transform-gpu will-change-transform", className), style: cardStyle, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, ...props, children: [_jsx("div", { className: "relative z-10", children: children }), glare && (_jsx("div", { ref: glareRef, className: "absolute inset-0 rounded-lg pointer-events-none z-20", style: glareStyle }))] }));
+});
+Card3D.displayName = "Card3D";
+// Depth layer components that work with 3D transforms
+const Card3DHeader = React.forwardRef(({ className, depth = 20, style, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), style: {
+        transform: `translateZ(${depth}px)`,
+        ...style,
+    }, ...props })));
+Card3DHeader.displayName = "Card3DHeader";
+const Card3DTitle = React.forwardRef(({ className, depth = 30, style, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), style: {
+        transform: `translateZ(${depth}px)`,
+        ...style,
+    }, ...props })));
+Card3DTitle.displayName = "Card3DTitle";
+const Card3DDescription = React.forwardRef(({ className, depth = 10, style, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-sm text-muted-foreground", className), style: {
+        transform: `translateZ(${depth}px)`,
+        ...style,
+    }, ...props })));
+Card3DDescription.displayName = "Card3DDescription";
+const Card3DContent = React.forwardRef(({ className, depth = 25, style, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), style: {
+        transform: `translateZ(${depth}px)`,
+        ...style,
+    }, ...props })));
+Card3DContent.displayName = "Card3DContent";
+const Card3DFooter = React.forwardRef(({ className, depth = 15, style, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), style: {
+        transform: `translateZ(${depth}px)`,
+        ...style,
+    }, ...props })));
+Card3DFooter.displayName = "Card3DFooter";
+export { Card3D, Card3DHeader, Card3DTitle, Card3DDescription, Card3DContent, Card3DFooter, };

package/dist/src/3d/carousel.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+interface Carousel3DItem {
+    id: string;
+    content: React.ReactNode;
+}
+interface Carousel3DProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: Carousel3DItem[];
+    itemWidth?: number;
+    itemHeight?: number;
+    spacing?: number;
+    perspective?: number;
+    rotateY?: number;
+    autoRotate?: boolean;
+    autoRotateSpeed?: number;
+    showControls?: boolean;
+    infinite?: boolean;
+    className?: string;
+}
+declare const Carousel3D: React.ForwardRefExoticComponent<Carousel3DProps & React.RefAttributes<HTMLDivElement>>;
+declare const Carousel3DCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Carousel3DCardImage: React.ForwardRefExoticComponent<React.ImgHTMLAttributes<HTMLImageElement> & React.RefAttributes<HTMLImageElement>>;
+declare const Carousel3DCardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Carousel3DCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const Carousel3DCardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { Carousel3D, Carousel3DCard, Carousel3DCardImage, Carousel3DCardContent, Carousel3DCardTitle, Carousel3DCardDescription, type Carousel3DItem, type Carousel3DProps, };
+//# sourceMappingURL=carousel.d.ts.map

package/dist/src/3d/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/3d/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,wFAsUf,CAAA;AAID,QAAA,MAAM,cAAc,6GAelB,CAAA;AAGF,QAAA,MAAM,mBAAmB,oHAcvB,CAAA;AAGF,QAAA,MAAM,qBAAqB,6GAWzB,CAAA;AAGF,QAAA,MAAM,mBAAmB,qHAWvB,CAAA;AAGF,QAAA,MAAM,yBAAyB,yHAW7B,CAAA;AAGF,OAAO,EACL,UAAU,EACV,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,yBAAyB,EACzB,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,CAAA"}

package/dist/src/3d/carousel.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "@hanzo/ui/lib/utils";
+const Carousel3D = React.forwardRef(({ items, itemWidth = 300, itemHeight = 400, spacing = 80, perspective = 1000, rotateY = 40, autoRotate = false, autoRotateSpeed = 3000, showControls = true, infinite = true, className, ...props }, ref) => {
+    const containerRef = React.useRef(null);
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 });
+    const [dragOffset, setDragOffset] = React.useState(0);
+    const autoRotateRef = React.useRef(undefined);
+    const totalItems = items.length;
+    const radius = (itemWidth + spacing) / 2 / Math.tan(Math.PI / totalItems);
+    // Auto rotation
+    React.useEffect(() => {
+        if (autoRotate && !isHovered && !isDragging) {
+            autoRotateRef.current = setInterval(() => {
+                setCurrentIndex((prev) => (prev + 1) % totalItems);
+            }, autoRotateSpeed);
+        }
+        else {
+            if (autoRotateRef.current) {
+                clearInterval(autoRotateRef.current);
+            }
+        }
+        return () => {
+            if (autoRotateRef.current) {
+                clearInterval(autoRotateRef.current);
+            }
+        };
+    }, [autoRotate, isHovered, isDragging, autoRotateSpeed, totalItems]);
+    const goToPrevious = React.useCallback(() => {
+        setCurrentIndex((prev) => infinite ? (prev - 1 + totalItems) % totalItems : Math.max(0, prev - 1));
+    }, [infinite, totalItems]);
+    const goToNext = React.useCallback(() => {
+        setCurrentIndex((prev) => infinite ? (prev + 1) % totalItems : Math.min(totalItems - 1, prev + 1));
+    }, [infinite, totalItems]);
+    const goToIndex = React.useCallback((index) => {
+        setCurrentIndex(Math.max(0, Math.min(totalItems - 1, index)));
+    }, [totalItems]);
+    // Touch and mouse drag handlers
+    const handleDragStart = React.useCallback((clientX, clientY) => {
+        setIsDragging(true);
+        setDragStart({ x: clientX, y: clientY });
+        setDragOffset(0);
+    }, []);
+    const handleDragMove = React.useCallback((clientX, clientY) => {
+        if (!isDragging)
+            return;
+        const deltaX = clientX - dragStart.x;
+        const sensitivity = 0.5;
+        const newOffset = deltaX * sensitivity;
+        setDragOffset(newOffset);
+    }, [isDragging, dragStart.x]);
+    const handleDragEnd = React.useCallback(() => {
+        if (!isDragging)
+            return;
+        const threshold = 50;
+        if (Math.abs(dragOffset) > threshold) {
+            if (dragOffset > 0) {
+                goToPrevious();
+            }
+            else {
+                goToNext();
+            }
+        }
+        setIsDragging(false);
+        setDragOffset(0);
+    }, [isDragging, dragOffset, goToPrevious, goToNext]);
+    // Mouse events
+    const handleMouseDown = React.useCallback((e) => {
+        e.preventDefault();
+        handleDragStart(e.clientX, e.clientY);
+    }, [handleDragStart]);
+    const handleMouseMove = React.useCallback((e) => {
+        handleDragMove(e.clientX, e.clientY);
+    }, [handleDragMove]);
+    const handleMouseUp = React.useCallback(() => {
+        handleDragEnd();
+    }, [handleDragEnd]);
+    // Touch events
+    const handleTouchStart = React.useCallback((e) => {
+        if (e.touches.length === 1) {
+            const touch = e.touches[0];
+            handleDragStart(touch.clientX, touch.clientY);
+        }
+    }, [handleDragStart]);
+    const handleTouchMove = React.useCallback((e) => {
+        if (e.touches.length === 1) {
+            e.preventDefault();
+            const touch = e.touches[0];
+            handleDragMove(touch.clientX, touch.clientY);
+        }
+    }, [handleDragMove]);
+    const handleTouchEnd = React.useCallback(() => {
+        handleDragEnd();
+    }, [handleDragEnd]);
+    // Keyboard navigation
+    React.useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "ArrowLeft") {
+                e.preventDefault();
+                goToPrevious();
+            }
+            else if (e.key === "ArrowRight") {
+                e.preventDefault();
+                goToNext();
+            }
+            else if (e.key >= "1" && e.key <= "9") {
+                const index = parseInt(e.key) - 1;
+                if (index < totalItems) {
+                    goToIndex(index);
+                }
+            }
+        };
+        if (containerRef.current) {
+            containerRef.current.addEventListener("keydown", handleKeyDown);
+            return () => {
+                containerRef.current?.removeEventListener("keydown", handleKeyDown);
+            };
+        }
+    }, [goToPrevious, goToNext, goToIndex, totalItems]);
+    React.useImperativeHandle(ref, () => containerRef.current);
+    const containerStyle = {
+        perspective: `${perspective}px`,
+        height: `${itemHeight + 100}px`,
+    };
+    const carouselStyle = {
+        transform: `translateZ(-${radius}px) rotateY(${-currentIndex * (360 / totalItems) + dragOffset / 5}deg)`,
+        transition: isDragging
+            ? "none"
+            : "transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)",
+        transformStyle: "preserve-3d",
+    };
+    return (_jsxs("div", { ref: containerRef, className: cn("relative w-full select-none focus:outline-none", className), style: containerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, tabIndex: 0, ...props, children: [_jsx("div", { className: "relative mx-auto", style: {
+                    width: `${itemWidth}px`,
+                    height: `${itemHeight}px`,
+                    transformStyle: "preserve-3d",
+                }, children: _jsx("div", { className: "absolute inset-0", style: carouselStyle, children: items.map((item, index) => {
+                        const angle = (index / totalItems) * 360;
+                        const isCurrent = index === currentIndex;
+                        const itemStyle = {
+                            transform: `rotateY(${angle}deg) translateZ(${radius}px)`,
+                            width: `${itemWidth}px`,
+                            height: `${itemHeight}px`,
+                            position: "absolute",
+                            backfaceVisibility: "hidden",
+                            transformStyle: "preserve-3d",
+                        };
+                        return (_jsx("div", { className: cn("rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer", "transition-all duration-300 transform-gpu will-change-transform", isCurrent && "ring-2 ring-primary ring-offset-2"), style: itemStyle, onClick: () => goToIndex(index), children: _jsx("div", { className: "w-full h-full overflow-hidden rounded-lg", children: item.content }) }, item.id));
+                    }) }) }), showControls && (_jsxs(_Fragment, { children: [_jsx("button", { className: cn("absolute left-4 top-1/2 -translate-y-1/2 z-10", "p-2 rounded-full bg-background/80 backdrop-blur-sm", "border shadow-lg hover:bg-background transition-all", "disabled:opacity-50 disabled:cursor-not-allowed"), onClick: goToPrevious, disabled: !infinite && currentIndex === 0, "aria-label": "Previous item", children: _jsx(ChevronLeft, { className: "w-5 h-5" }) }), _jsx("button", { className: cn("absolute right-4 top-1/2 -translate-y-1/2 z-10", "p-2 rounded-full bg-background/80 backdrop-blur-sm", "border shadow-lg hover:bg-background transition-all", "disabled:opacity-50 disabled:cursor-not-allowed"), onClick: goToNext, disabled: !infinite && currentIndex === totalItems - 1, "aria-label": "Next item", children: _jsx(ChevronRight, { className: "w-5 h-5" }) })] })), _jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: _jsx("div", { className: "flex space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-lg", children: items.map((_, index) => (_jsx("button", { className: cn("w-2 h-2 rounded-full transition-all", index === currentIndex
+                            ? "bg-primary scale-125"
+                            : "bg-muted-foreground/50 hover:bg-muted-foreground/75"), onClick: () => goToIndex(index), "aria-label": `Go to item ${index + 1}` }, index))) }) }), autoRotate && (_jsx("div", { className: "absolute top-4 right-4 z-10", children: _jsxs("div", { className: "flex items-center space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-sm", children: [_jsx("div", { className: cn("w-2 h-2 rounded-full transition-all", isHovered || isDragging
+                                ? "bg-orange-500"
+                                : "bg-green-500 animate-pulse") }), _jsx("span", { className: "text-xs text-muted-foreground", children: isHovered || isDragging ? "Paused" : "Auto" })] }) }))] }));
+});
+Carousel3D.displayName = "Carousel3D";
+// Card component optimized for 3D carousel
+const Carousel3DCard = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("w-full h-full flex flex-col bg-gradient-to-br from-background to-muted/20", "border rounded-lg overflow-hidden group", className), ...props, children: children })));
+Carousel3DCard.displayName = "Carousel3DCard";
+const Carousel3DCardImage = React.forwardRef(({ className, alt, ...props }, ref) => (_jsx("img", { ref: ref, className: cn("w-full h-48 object-cover transition-transform duration-300", "group-hover:scale-105", className), alt: alt, ...props })));
+Carousel3DCardImage.displayName = "Carousel3DCardImage";
+const Carousel3DCardContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex-1 p-4 flex flex-col justify-between", className), ...props, children: children })));
+Carousel3DCardContent.displayName = "Carousel3DCardContent";
+const Carousel3DCardTitle = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("font-semibold text-lg mb-2 line-clamp-2", className), ...props, children: children })));
+Carousel3DCardTitle.displayName = "Carousel3DCardTitle";
+const Carousel3DCardDescription = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-sm text-muted-foreground line-clamp-3 mb-4", className), ...props, children: children })));
+Carousel3DCardDescription.displayName = "Carousel3DCardDescription";
+export { Carousel3D, Carousel3DCard, Carousel3DCardImage, Carousel3DCardContent, Carousel3DCardTitle, Carousel3DCardDescription, };

package/dist/src/3d/grid.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+interface Grid3DItem {
+    id: string;
+    content: React.ReactNode;
+    span?: {
+        x: number;
+        y: number;
+    };
+    elevation?: number;
+}
+interface Grid3DProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: Grid3DItem[];
+    columns?: number;
+    rows?: number;
+    gap?: number;
+    perspective?: number;
+    rotateX?: number;
+    rotateY?: number;
+    cellHeight?: number;
+    cellWidth?: number;
+    isometric?: boolean;
+    tiltOnHover?: boolean;
+    staggerAnimation?: boolean;
+    animationDelay?: number;
+    elevationOnHover?: boolean;
+    maxElevation?: number;
+    className?: string;
+}
+declare const Grid3D: React.ForwardRefExoticComponent<Grid3DProps & React.RefAttributes<HTMLDivElement>>;
+declare const Grid3DCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    description?: string;
+    image?: string;
+    badge?: string;
+    elevation?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Grid3DPreset: {
+    Dashboard: React.ForwardRefExoticComponent<Omit<Grid3DProps, "items"> & React.RefAttributes<HTMLDivElement>>;
+    Isometric: React.ForwardRefExoticComponent<Omit<Grid3DProps, "items"> & React.RefAttributes<HTMLDivElement>>;
+    Gallery: React.ForwardRefExoticComponent<Omit<Grid3DProps, "items"> & React.RefAttributes<HTMLDivElement>>;
+    Compact: React.ForwardRefExoticComponent<Omit<Grid3DProps, "items"> & React.RefAttributes<HTMLDivElement>>;
+};
+declare const Grid3DAuto: React.ForwardRefExoticComponent<Omit<Grid3DProps, "columns" | "rows"> & {
+    minCellWidth?: number;
+    maxCellWidth?: number;
+    aspectRatio?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Grid3D, Grid3DCard, Grid3DPreset, Grid3DAuto, type Grid3DItem, type Grid3DProps, };
+//# sourceMappingURL=grid.d.ts.map

package/dist/src/3d/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/3d/grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChE,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,MAAM,oFAwLX,CAAA;AAID,QAAA,MAAM,UAAU;YAGJ,MAAM;kBACA,MAAM;YACZ,MAAM;YACN,MAAM;gBACF,MAAM;wCAwErB,CAAA;AAID,QAAA,MAAM,YAAY;;;;;CAkFjB,CAAA;AASD,QAAA,MAAM,UAAU;mBAGG,MAAM;mBACN,MAAM;kBACP,MAAM;wCAqCvB,CAAA;AAGD,OAAO,EACL,MAAM,EACN,UAAU,EACV,YAAY,EACZ,UAAU,EACV,KAAK,UAAU,EACf,KAAK,WAAW,GACjB,CAAA"}

package/dist/src/3d/grid.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@hanzo/ui/lib/utils";
+const Grid3D = React.forwardRef(({ items, columns = 4, rows = 3, gap = 16, perspective = 1000, rotateX = 25, rotateY = 15, cellHeight = 200, cellWidth = 200, isometric = false, tiltOnHover = true, staggerAnimation = true, animationDelay = 100, elevationOnHover = true, maxElevation = 50, className, ...props }, ref) => {
+    const gridRef = React.useRef(null);
+    const [hoveredIndex, setHoveredIndex] = React.useState(null);
+    const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 });
+    const [isGridHovered, setIsGridHovered] = React.useState(false);
+    // Calculate grid transforms based on isometric mode
+    const gridTransform = React.useMemo(() => {
+        if (isometric) {
+            return `perspective(${perspective}px) rotateX(45deg) rotateY(45deg)`;
+        }
+        return `perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+    }, [isometric, perspective, rotateX, rotateY]);
+    // Handle mouse movement for global tilt effect
+    const handleMouseMove = React.useCallback((e) => {
+        if (!tiltOnHover || !gridRef.current)
+            return;
+        const rect = gridRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const mouseX = (e.clientX - centerX) / (rect.width / 2);
+        const mouseY = (e.clientY - centerY) / (rect.height / 2);
+        setMousePosition({ x: mouseX * 10, y: mouseY * 10 });
+    }, [tiltOnHover]);
+    const handleMouseEnter = React.useCallback(() => {
+        setIsGridHovered(true);
+    }, []);
+    const handleMouseLeave = React.useCallback(() => {
+        setIsGridHovered(false);
+        setMousePosition({ x: 0, y: 0 });
+        setHoveredIndex(null);
+    }, []);
+    React.useImperativeHandle(ref, () => gridRef.current);
+    const containerStyle = {
+        perspective: `${perspective}px`,
+        transformStyle: "preserve-3d",
+    };
+    const gridStyle = {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
+        gridTemplateRows: `repeat(${rows}, ${cellHeight}px)`,
+        gap: `${gap}px`,
+        transform: tiltOnHover && isGridHovered
+            ? `${gridTransform} rotateX(${-mousePosition.y}deg) rotateY(${mousePosition.x}deg)`
+            : gridTransform,
+        transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        transformStyle: "preserve-3d",
+    };
+    // Calculate grid position for each item
+    const getGridPosition = (index) => {
+        const x = index % columns;
+        const y = Math.floor(index / columns);
+        return { x, y };
+    };
+    // Calculate stagger delay for animations
+    const getStaggerDelay = (index) => {
+        if (!staggerAnimation)
+            return 0;
+        const { x, y } = getGridPosition(index);
+        return (x + y) * animationDelay;
+    };
+    return (_jsxs("div", { ref: gridRef, className: cn("w-fit mx-auto", className), style: containerStyle, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: [_jsx("div", { style: gridStyle, children: items.map((item, index) => {
+                    const isHovered = hoveredIndex === index;
+                    const { x, y } = getGridPosition(index);
+                    const staggerDelay = getStaggerDelay(index);
+                    const itemStyle = {
+                        gridColumn: item.span ? `span ${item.span.x}` : undefined,
+                        gridRow: item.span ? `span ${item.span.y}` : undefined,
+                        transform: `translateZ(${(item.elevation || 0) +
+                            (isHovered && elevationOnHover ? maxElevation : 0)}px)`,
+                        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                        transformStyle: "preserve-3d",
+                        animationDelay: `${staggerDelay}ms`,
+                    };
+                    return (_jsxs("div", { className: cn("relative rounded-lg border bg-card text-card-foreground shadow-lg", "transform-gpu will-change-transform cursor-pointer", "transition-all duration-300 hover:shadow-xl", staggerAnimation &&
+                            "animate-in fade-in slide-in-from-bottom-4", isHovered && "ring-2 ring-primary ring-offset-2"), style: itemStyle, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), children: [_jsx("div", { className: "w-full h-full overflow-hidden rounded-lg", children: item.content }), (item.elevation || 0) > 0 && (_jsx("div", { className: "absolute inset-0 -z-10 rounded-lg bg-black/20 blur-sm", style: {
+                                    transform: `translateY(${(item.elevation || 0) / 2}px) scale(0.95)`,
+                                } }))] }, item.id));
+                }) }), isometric && (_jsx("div", { className: "absolute inset-0 pointer-events-none opacity-20", children: _jsx("div", { className: "grid border-dashed border-muted-foreground/30", style: {
+                        gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
+                        gridTemplateRows: `repeat(${rows}, ${cellHeight}px)`,
+                        gap: `${gap}px`,
+                        transform: gridTransform,
+                        transformStyle: "preserve-3d",
+                    }, children: Array.from({ length: columns * rows }).map((_, index) => (_jsx("div", { className: "border border-dashed border-muted-foreground/20 rounded-lg" }, index))) }) }))] }));
+});
+Grid3D.displayName = "Grid3D";
+// 3D Grid Card component optimized for the grid
+const Grid3DCard = React.forwardRef(({ className, title, description, image, badge, elevation = 0, children, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn("group relative w-full h-full flex flex-col bg-gradient-to-br from-background to-muted/20", "border rounded-lg overflow-hidden", className), style: {
+        transform: `translateZ(${elevation}px)`,
+        transformStyle: "preserve-3d",
+    }, ...props, children: [image && (_jsxs("div", { className: "relative h-32 overflow-hidden", children: [_jsx("img", { src: image, alt: title || "", className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" }), badge && (_jsx("div", { className: "absolute top-2 right-2 px-2 py-1 text-xs rounded-full bg-primary text-primary-foreground", children: badge }))] })), _jsxs("div", { className: "flex-1 p-4 flex flex-col justify-between", children: [title && (_jsx("h3", { className: "font-semibold text-lg mb-2 line-clamp-2 group-hover:text-primary transition-colors", children: title })), description && (_jsx("p", { className: "text-sm text-muted-foreground line-clamp-3 mb-4", children: description })), children && _jsx("div", { className: "mt-auto", children: children })] }), _jsx("div", { className: "absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-muted/50 to-muted", style: {
+                transform: "translateZ(-2px) scale(0.98)",
+                transformStyle: "preserve-3d",
+            } })] })));
+Grid3DCard.displayName = "Grid3DCard";
+// Preset grid layouts
+const Grid3DPreset = {
+    Dashboard: React.forwardRef(({ children, ...props }, ref) => (_jsx(Grid3D, { ref: ref, columns: 4, rows: 3, cellWidth: 250, cellHeight: 200, gap: 20, perspective: 1200, rotateX: 20, rotateY: 10, tiltOnHover: true, elevationOnHover: true, maxElevation: 30, items: [], ...props }))),
+    Isometric: React.forwardRef(({ children, ...props }, ref) => (_jsx(Grid3D, { ref: ref, columns: 3, rows: 3, cellWidth: 180, cellHeight: 180, gap: 16, isometric: true, perspective: 1000, staggerAnimation: true, animationDelay: 50, items: [], ...props }))),
+    Gallery: React.forwardRef(({ children, ...props }, ref) => (_jsx(Grid3D, { ref: ref, columns: 5, rows: 2, cellWidth: 200, cellHeight: 280, gap: 24, perspective: 1500, rotateX: 15, rotateY: 5, tiltOnHover: true, elevationOnHover: true, maxElevation: 40, items: [], ...props }))),
+    Compact: React.forwardRef(({ children, ...props }, ref) => (_jsx(Grid3D, { ref: ref, columns: 6, rows: 4, cellWidth: 120, cellHeight: 120, gap: 8, perspective: 800, rotateX: 30, rotateY: 20, tiltOnHover: true, staggerAnimation: true, animationDelay: 30, items: [], ...props }))),
+};
+// Assign display names
+Grid3DPreset.Dashboard.displayName = "Grid3DPreset.Dashboard";
+Grid3DPreset.Isometric.displayName = "Grid3DPreset.Isometric";
+Grid3DPreset.Gallery.displayName = "Grid3DPreset.Gallery";
+Grid3DPreset.Compact.displayName = "Grid3DPreset.Compact";
+// Auto-arranging grid that adjusts based on content
+const Grid3DAuto = React.forwardRef(({ items, minCellWidth = 200, maxCellWidth = 300, aspectRatio = 1, ...props }, ref) => {
+    const [dimensions, setDimensions] = React.useState({ columns: 3, rows: 2 });
+    React.useEffect(() => {
+        const itemCount = items.length;
+        const columns = Math.ceil(Math.sqrt(itemCount));
+        const rows = Math.ceil(itemCount / columns);
+        setDimensions({ columns, rows });
+    }, [items.length]);
+    const cellWidth = Math.min(maxCellWidth, Math.max(minCellWidth, 200));
+    const cellHeight = cellWidth / aspectRatio;
+    return (_jsx(Grid3D, { ref: ref, items: items, columns: dimensions.columns, rows: dimensions.rows, cellWidth: cellWidth, cellHeight: cellHeight, ...props }));
+});
+Grid3DAuto.displayName = "Grid3DAuto";
+export { Grid3D, Grid3DCard, Grid3DPreset, Grid3DAuto, };

package/dist/src/3d/index.d.ts

@@ -0,0 +1,7 @@
+export { Button3D, Button3DPreset, Button3DLoading, button3DVariants, type Button3DProps, } from "./button";
+export { Card3D, Card3DHeader, Card3DTitle, Card3DDescription, Card3DContent, Card3DFooter, } from "./card";
+export { Carousel3D, Carousel3DCard, Carousel3DCardImage, Carousel3DCardContent, Carousel3DCardTitle, Carousel3DCardDescription, type Carousel3DItem, type Carousel3DProps, } from "./carousel";
+export { Grid3D, Grid3DCard, Grid3DPreset, Grid3DAuto, type Grid3DItem, type Grid3DProps, } from "./grid";
+export { Marquee3D, Marquee3DPreset, Marquee3DFloating, marquee3DVariants, type Marquee3DProps, } from "./marquee";
+export { Pin3D } from "./pin";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/3d/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/3d/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,KAAK,aAAa,GACnB,MAAM,UAAU,CAAA;AAEjB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,GACb,MAAM,QAAQ,CAAA;AAEf,OAAO,EACL,UAAU,EACV,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,yBAAyB,EACzB,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,MAAM,YAAY,CAAA;AAEnB,OAAO,EACL,MAAM,EACN,UAAU,EACV,YAAY,EACZ,UAAU,EACV,KAAK,UAAU,EACf,KAAK,WAAW,GACjB,MAAM,QAAQ,CAAA;AAEf,OAAO,EACL,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,cAAc,GACpB,MAAM,WAAW,CAAA;AAElB,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA"}

package/dist/src/3d/index.js

@@ -0,0 +1,7 @@
+// 3D Components
+export { Button3D, Button3DPreset, Button3DLoading, button3DVariants, } from "./button";
+export { Card3D, Card3DHeader, Card3DTitle, Card3DDescription, Card3DContent, Card3DFooter, } from "./card";
+export { Carousel3D, Carousel3DCard, Carousel3DCardImage, Carousel3DCardContent, Carousel3DCardTitle, Carousel3DCardDescription, } from "./carousel";
+export { Grid3D, Grid3DCard, Grid3DPreset, Grid3DAuto, } from "./grid";
+export { Marquee3D, Marquee3DPreset, Marquee3DFloating, marquee3DVariants, } from "./marquee";
+export { Pin3D } from "./pin";

package/dist/src/3d/marquee.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const marquee3DVariants: (props?: ({
+    variant?: "default" | "neon" | "glass" | "rainbow" | "metallic" | "fire" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    direction?: "left" | "right" | "up" | "down" | null | undefined;
+    perspective?: "none" | "default" | "sm" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface Marquee3DProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof marquee3DVariants> {
+    children: React.ReactNode;
+    speed?: number;
+    pauseOnHover?: boolean;
+    reverse?: boolean;
+    repeat?: number;
+    gap?: number;
+    rotateX?: number;
+    rotateY?: number;
+    rotateZ?: number;
+    autoFill?: boolean;
+    gradient?: boolean;
+    gradientColor?: string;
+    gradientWidth?: number;
+}
+declare const Marquee3D: React.ForwardRefExoticComponent<Marquee3DProps & React.RefAttributes<HTMLDivElement>>;
+declare const Marquee3DPreset: {
+    Hero: React.ForwardRefExoticComponent<Omit<Marquee3DProps, "variant" | "size"> & React.RefAttributes<HTMLDivElement>>;
+    Neon: React.ForwardRefExoticComponent<Omit<Marquee3DProps, "variant" | "size"> & React.RefAttributes<HTMLDivElement>>;
+    Metallic: React.ForwardRefExoticComponent<Omit<Marquee3DProps, "variant" | "size"> & React.RefAttributes<HTMLDivElement>>;
+    Fire: React.ForwardRefExoticComponent<Omit<Marquee3DProps, "variant" | "size"> & React.RefAttributes<HTMLDivElement>>;
+    Glass: React.ForwardRefExoticComponent<Omit<Marquee3DProps, "variant" | "size"> & React.RefAttributes<HTMLDivElement>>;
+};
+declare const Marquee3DFloating: React.ForwardRefExoticComponent<Marquee3DProps & {
+    floatIntensity?: number;
+    floatSpeed?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Marquee3D, Marquee3DPreset, Marquee3DFloating, marquee3DVariants, type Marquee3DProps, };
+//# sourceMappingURL=marquee.d.ts.map

package/dist/src/3d/marquee.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../src/3d/marquee.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,iBAAiB;;;;;8EAsEtB,CAAA;AAED,UAAU,cACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,QAAA,MAAM,SAAS,uFAsLd,CAAA;AAID,QAAA,MAAM,eAAe;;;;;;CAgFpB,CAAA;AAUD,QAAA,MAAM,iBAAiB;qBAGF,MAAM;iBACV,MAAM;wCAkCrB,CAAA;AAGF,OAAO,EACL,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,cAAc,GACpB,CAAA"}