@hanzo/ui 5.3.38 → 5.3.39

package/dist/primitives/youtube-pip-player.js

@@ -0,0 +1,253 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Maximize, Maximize2, Minimize2, Volume2, VolumeX, X, } from 'lucide-react';
+import { cn } from '../src/utils';
+const pipPositionStyles = {
+    'bottom-right': { defaultX: (w, pipW) => w - pipW - 24, defaultY: (h, pipH) => h - pipH - 24 },
+    'bottom-left': { defaultX: () => 24, defaultY: (h, pipH) => h - pipH - 24 },
+    'top-right': { defaultX: (w, pipW) => w - pipW - 24, defaultY: () => 24 },
+    'top-left': { defaultX: () => 24, defaultY: () => 24 },
+};
+const youtubePipPlayerVariants = cva('relative bg-black rounded-[30px] overflow-hidden', {
+    variants: {
+        size: {
+            sm: 'aspect-video max-w-md',
+            md: 'aspect-video max-w-2xl',
+            lg: 'aspect-video max-w-4xl',
+            full: 'w-full aspect-video',
+            hero: 'w-full max-h-[calc(100vh-160px)]',
+        },
+    },
+    defaultVariants: {
+        size: 'hero',
+    },
+});
+const YouTubePipPlayer = React.forwardRef(({ className, size, videoId, rotationInterval = 30000, enablePip = true, defaultMuted = true, showLiveIndicator = true, enableTvEffects = true, pipPosition = 'bottom-right', onPlay, onPause, onPipEnter, onPipExit, onMuteChange, ...props }, ref) => {
+    // Normalize videoIds to array
+    const videoIds = React.useMemo(() => (Array.isArray(videoId) ? videoId : [videoId]), [videoId]);
+    // State
+    const [currentVideoIndex, setCurrentVideoIndex] = React.useState(0);
+    const [isMuted, setIsMuted] = React.useState(defaultMuted);
+    const [isPip, setIsPip] = React.useState(false);
+    const [showPip, setShowPip] = React.useState(true);
+    const [pipSize, setPipSize] = React.useState('normal');
+    const [isMobile, setIsMobile] = React.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isPipHovered, setIsPipHovered] = React.useState(false);
+    const [showStatic, setShowStatic] = React.useState(false);
+    // Dragging state
+    const [pipPos, setPipPos] = React.useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 });
+    const [hasDragged, setHasDragged] = React.useState(false);
+    // Refs
+    const containerRef = React.useRef(null);
+    const pipContainerRef = React.useRef(null);
+    // Constants
+    const PIP_WIDTH_BASE = 384;
+    const PIP_MARGIN = 24;
+    // Calculate current PIP width
+    const getCurrentPipWidth = React.useCallback(() => {
+        return pipSize === 'double' ? PIP_WIDTH_BASE * 2 : PIP_WIDTH_BASE;
+    }, [pipSize]);
+    // Get YouTube embed URL
+    const getYouTubeEmbedUrl = React.useCallback((forPip = false) => {
+        const currentId = videoIds[currentVideoIndex];
+        const muteParam = forPip && isPip ? (isMuted ? '1' : '0') : (isMuted ? '1' : '0');
+        return `https://www.youtube.com/embed/${currentId}?autoplay=1&mute=${muteParam}&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1`;
+    }, [videoIds, currentVideoIndex, isMuted, isPip]);
+    // Mobile detection
+    React.useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 768);
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    // Video rotation
+    React.useEffect(() => {
+        if (videoIds.length <= 1)
+            return;
+        const interval = setInterval(() => {
+            setCurrentVideoIndex((prev) => (prev + 1) % videoIds.length);
+        }, rotationInterval);
+        return () => clearInterval(interval);
+    }, [videoIds.length, rotationInterval]);
+    // TV static effect
+    React.useEffect(() => {
+        if (!enableTvEffects)
+            return;
+        const interval = setInterval(() => {
+            setShowStatic(true);
+            setTimeout(() => setShowStatic(false), 200);
+        }, 30000);
+        return () => clearInterval(interval);
+    }, [enableTvEffects]);
+    // Scroll-based PIP activation
+    React.useEffect(() => {
+        if (!enablePip)
+            return;
+        const handleScroll = () => {
+            if (!containerRef.current)
+                return;
+            const rect = containerRef.current.getBoundingClientRect();
+            const shouldShowPip = rect.bottom < 100;
+            const wasInPip = isPip;
+            setIsPip(shouldShowPip);
+            if (shouldShowPip !== wasInPip) {
+                if (shouldShowPip) {
+                    onPipEnter?.();
+                }
+                else {
+                    onPipExit?.();
+                }
+            }
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [enablePip, isPip, onPipEnter, onPipExit]);
+    // Initialize PIP position
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const pipWidth = getCurrentPipWidth();
+        const pipHeight = pipWidth * 9 / 16;
+        const pos = pipPositionStyles[pipPosition];
+        setPipPos({
+            x: pos.defaultX(window.innerWidth, pipWidth),
+            y: pos.defaultY(window.innerHeight, pipHeight),
+        });
+    }, [getCurrentPipWidth, pipPosition]);
+    // Update position when size changes
+    React.useEffect(() => {
+        if (pipSize === 'fullscreen' || typeof window === 'undefined')
+            return;
+        const pipWidth = getCurrentPipWidth();
+        const pipHeight = pipWidth * 9 / 16;
+        const pos = pipPositionStyles[pipPosition];
+        setPipPos({
+            x: pos.defaultX(window.innerWidth, pipWidth),
+            y: pos.defaultY(window.innerHeight, pipHeight),
+        });
+    }, [pipSize, getCurrentPipWidth, pipPosition]);
+    // Dragging handlers
+    const handleMouseDown = React.useCallback((e) => {
+        if (pipSize === 'fullscreen')
+            return;
+        setIsDragging(true);
+        setHasDragged(false);
+        setDragStart({
+            x: e.clientX - pipPos.x,
+            y: e.clientY - pipPos.y,
+        });
+    }, [pipSize, pipPos]);
+    const handleMouseMove = React.useCallback((e) => {
+        if (!isDragging || pipSize === 'fullscreen')
+            return;
+        const newX = e.clientX - dragStart.x;
+        const newY = e.clientY - dragStart.y;
+        const distanceMoved = Math.sqrt(Math.pow(newX - pipPos.x, 2) + Math.pow(newY - pipPos.y, 2));
+        if (distanceMoved > 5)
+            setHasDragged(true);
+        const pipWidth = getCurrentPipWidth();
+        const maxX = window.innerWidth - pipWidth - PIP_MARGIN;
+        const maxY = window.innerHeight - (pipWidth * 9 / 16) - PIP_MARGIN;
+        setPipPos({
+            x: Math.max(PIP_MARGIN, Math.min(newX, maxX)),
+            y: Math.max(PIP_MARGIN, Math.min(newY, maxY)),
+        });
+    }, [isDragging, pipSize, dragStart, pipPos, getCurrentPipWidth]);
+    const handleMouseUp = React.useCallback(() => {
+        if (isDragging && hasDragged) {
+            // Snap to corner
+            const pipWidth = getCurrentPipWidth();
+            const pipHeight = pipWidth * 9 / 16;
+            const pos = pipPositionStyles[pipPosition];
+            setPipPos({
+                x: pos.defaultX(window.innerWidth, pipWidth),
+                y: pos.defaultY(window.innerHeight, pipHeight),
+            });
+        }
+        setIsDragging(false);
+        setHasDragged(false);
+    }, [isDragging, hasDragged, getCurrentPipWidth, pipPosition]);
+    // Mouse event listeners for dragging
+    React.useEffect(() => {
+        if (!isDragging)
+            return;
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+    // Toggle mute
+    const toggleMute = React.useCallback((e) => {
+        e.stopPropagation();
+        const newMuted = !isMuted;
+        setIsMuted(newMuted);
+        onMuteChange?.(newMuted);
+    }, [isMuted, onMuteChange]);
+    // Cycle PIP size
+    const cyclePipSize = React.useCallback((e) => {
+        e.stopPropagation();
+        setPipSize((prev) => {
+            if (prev === 'normal')
+                return 'double';
+            if (prev === 'double')
+                return 'fullscreen';
+            return 'normal';
+        });
+    }, []);
+    // Close PIP
+    const closePip = React.useCallback((e) => {
+        e.stopPropagation();
+        setShowPip(false);
+    }, []);
+    // Request fullscreen for hero video
+    const requestFullscreen = React.useCallback((e) => {
+        e.stopPropagation();
+        if (!containerRef.current)
+            return;
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+        else {
+            containerRef.current.requestFullscreen();
+        }
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: containerRef, className: cn(youtubePipPlayerVariants({ size }), 'group transition-all duration-500', className), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), ...props, children: [enableTvEffects && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute -inset-24 bg-gradient-radial from-white/40 via-white/20 to-transparent blur-[100px] opacity-80 pointer-events-none" }), _jsx("div", { className: "absolute -inset-12 bg-gradient-radial from-white/30 via-white/15 to-transparent blur-[60px] opacity-70 pointer-events-none" }), _jsx("div", { className: "absolute -inset-2 rounded-[30px] bg-gradient-to-r from-white/80 via-white/60 to-white/80 opacity-100 blur-2xl animate-pulse pointer-events-none" }), _jsx("div", { className: "absolute inset-0 rounded-[30px] border-2 border-white/30 shadow-[0_0_60px_rgba(255,255,255,0.5)] pointer-events-none" })] })), _jsx("div", { className: "absolute inset-0 pointer-events-none z-10", children: _jsx("div", { className: "absolute inset-0 rounded-[30px] border-2 border-white/10 bg-gradient-to-b from-white/5 to-transparent", style: {
+                                boxShadow: 'inset 0 2px 20px rgba(255,255,255,0.1), inset 0 -2px 20px rgba(0,0,0,0.5)',
+                            } }) }), enableTvEffects && (_jsx("div", { className: "absolute inset-0 z-20 pointer-events-none", style: { boxShadow: 'inset 0 0 120px 60px rgba(0,0,0,0.8)' } })), showStatic && enableTvEffects && (_jsxs("div", { className: "absolute inset-0 z-40 pointer-events-none", children: [_jsx("div", { className: "h-full w-full bg-white/3 animate-pulse" }), _jsx("div", { className: "absolute inset-0 opacity-20", style: {
+                                    backgroundImage: `url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E")`,
+                                } })] })), _jsx("iframe", { className: "absolute inset-0 w-full h-full", src: getYouTubeEmbedUrl(), title: "Video", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }), enableTvEffects && (_jsx("div", { className: "absolute inset-0 pointer-events-none opacity-[0.02] z-10", children: _jsx("div", { className: "h-full w-full", style: {
+                                backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 4px)',
+                            } }) })), _jsxs("div", { className: cn('absolute bottom-6 left-6 flex items-center gap-3 z-30 transition-opacity duration-300', isHovered ? 'opacity-100' : 'opacity-0'), children: [_jsxs("button", { onClick: toggleMute, className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full hover:bg-black transition-all duration-300 border border-white/10", children: [isMuted ? _jsx(VolumeX, { className: "h-4 w-4 text-white" }) : _jsx(Volume2, { className: "h-4 w-4 text-white" }), _jsx("span", { className: "text-xs text-white/90 font-medium tracking-wider uppercase", children: isMuted ? 'Unmute' : 'Mute' })] }), _jsxs("button", { onClick: requestFullscreen, className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full hover:bg-black transition-all duration-300 border border-white/10", children: [_jsx(Maximize, { className: "h-4 w-4 text-white" }), _jsx("span", { className: "text-xs text-white/90 font-medium tracking-wider uppercase", children: "Fullscreen" })] })] }), showLiveIndicator && (_jsxs("div", { className: "absolute top-6 left-6 flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 z-30", children: [_jsx("div", { className: "w-2 h-2 bg-red-600 rounded-full animate-pulse shadow-[0_0_10px_rgba(220,38,38,0.8)]" }), _jsx("span", { className: "text-xs text-white/90 font-medium tracking-widest uppercase", children: "Live" })] }))] }), enablePip && isPip && showPip && !isMobile && (_jsx("div", { ref: pipContainerRef, className: cn('fixed z-50 transition-all ease-out group', pipSize === 'fullscreen'
+                    ? 'inset-0 bg-black/98 backdrop-blur-xl duration-500'
+                    : isDragging
+                        ? 'duration-75'
+                        : 'duration-300', isDragging
+                    ? 'cursor-grabbing scale-105 shadow-2xl'
+                    : pipSize === 'fullscreen'
+                        ? ''
+                        : 'cursor-grab hover:scale-105'), style: pipSize !== 'fullscreen'
+                    ? {
+                        left: `${pipPos.x}px`,
+                        top: `${pipPos.y}px`,
+                        filter: isDragging ? 'brightness(1.1) drop-shadow(0 20px 40px rgba(0,0,0,0.5))' : 'brightness(1)',
+                    }
+                    : {}, onMouseDown: handleMouseDown, onMouseEnter: () => setIsPipHovered(true), onMouseLeave: () => setIsPipHovered(false), children: _jsxs("div", { className: cn('relative bg-black overflow-hidden transition-all duration-500', pipSize === 'fullscreen'
+                        ? 'w-full h-full'
+                        : pipSize === 'double'
+                            ? 'aspect-video rounded-2xl'
+                            : 'w-96 aspect-video rounded-2xl'), style: pipSize === 'double' ? { width: '768px' } : {}, children: [enableTvEffects && pipSize !== 'fullscreen' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute -inset-12 rounded-full bg-gradient-radial from-white/30 via-white/10 to-transparent blur-3xl opacity-60 pointer-events-none" }), _jsx("div", { className: "absolute -inset-1 rounded-2xl bg-gradient-to-r from-white/40 via-white/20 to-white/40 opacity-75 blur-xl animate-pulse pointer-events-none" }), _jsx("div", { className: "absolute inset-0 pointer-events-none z-10", children: _jsx("div", { className: "absolute inset-0 rounded-2xl border-2 border-white/10 bg-gradient-to-b from-white/5 to-transparent", style: {
+                                            boxShadow: 'inset 0 2px 20px rgba(255,255,255,0.1), inset 0 -2px 20px rgba(0,0,0,0.5)',
+                                        } }) }), _jsx("div", { className: "absolute inset-0 pointer-events-none z-10 opacity-10", children: _jsx("div", { className: "h-full w-full animate-scan", style: {
+                                            backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px)',
+                                        } }) })] })), _jsxs("div", { className: "absolute inset-0 overflow-hidden", children: [_jsx("iframe", { className: cn('absolute top-0 left-0 w-full h-full object-cover', pipSize !== 'fullscreen' && 'rounded-2xl'), style: { aspectRatio: '16 / 9', pointerEvents: 'none' }, src: getYouTubeEmbedUrl(true), title: "Video PiP", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }), _jsx("div", { className: "absolute inset-0 z-5" })] }), _jsxs("div", { className: cn('absolute flex items-center gap-2 z-30 transition-opacity duration-300', pipSize === 'fullscreen' ? 'bottom-10 right-10' : 'bottom-3 right-3', isPipHovered ? 'opacity-100' : 'opacity-0'), children: [_jsx("button", { onClick: toggleMute, className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-black transition-all duration-300 shadow-lg hover:scale-110 border border-white/10", title: isMuted ? 'Unmute' : 'Mute', children: isMuted ? _jsx(VolumeX, { className: "h-4 w-4 text-white" }) : _jsx(Volume2, { className: "h-4 w-4 text-white" }) }), _jsx("button", { onClick: cyclePipSize, className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-black transition-all duration-300 shadow-lg hover:scale-110 border border-white/10", title: pipSize === 'fullscreen' ? 'Normal Size' : pipSize === 'double' ? 'Fullscreen' : 'Double Size', children: pipSize === 'fullscreen' ? (_jsx(Minimize2, { className: "h-4 w-4 text-white" })) : (_jsx(Maximize2, { className: "h-4 w-4 text-white" })) }), _jsx("button", { onClick: closePip, className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-red-600 transition-all duration-300 shadow-lg hover:scale-110 border border-white/10", title: "Close", children: _jsx(X, { className: "h-4 w-4 text-white" }) })] }), showLiveIndicator && pipSize !== 'fullscreen' && (_jsx("div", { className: "absolute top-3 right-3 z-20", children: _jsxs("div", { className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10", children: [_jsx("div", { className: "w-2 h-2 bg-red-600 rounded-full animate-pulse shadow-[0_0_10px_rgba(220,38,38,0.8)]" }), _jsx("span", { className: "text-[10px] text-white/80 font-medium tracking-widest uppercase", children: "Live" })] }) }))] }) }))] }));
+});
+YouTubePipPlayer.displayName = 'YouTubePipPlayer';
+export { YouTubePipPlayer, youtubePipPlayerVariants };
+export default YouTubePipPlayer;

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const button3DVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "neon" | "glass" | "gradient" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | "icon" | null | undefined;
+    depth?: "none" | "default" | "sm" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface Button3DProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button3DVariants> {
+    asChild?: boolean;
+    tiltOnHover?: boolean;
+    glowIntensity?: number;
+    shadowColor?: string;
+    pressAnimation?: boolean;
+}
+declare const Button3D: React.ForwardRefExoticComponent<Button3DProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button3DPreset: {
+    Hero: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+    CTA: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+    Glass: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+    Minimal: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+    Danger: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+};
+declare const Button3DLoading: React.ForwardRefExoticComponent<Button3DProps & {
+    loading?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Button3D, Button3DPreset, Button3DLoading, button3DVariants, type Button3DProps, };
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/3d/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,gBAAgB;;;;8EAiGrB,CAAA;AAED,UAAU,aACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,QAAA,MAAM,QAAQ,yFAiIb,CAAA;AAID,QAAA,MAAM,cAAc;;;;;;CAiEnB,CAAA;AAUD,QAAA,MAAM,eAAe;cAES,OAAO;2CAUnC,CAAA;AAGF,OAAO,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,KAAK,aAAa,GACnB,CAAA"}

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

@@ -0,0 +1,181 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@hanzo/ui/lib/utils";
+const button3DVariants = cva([
+    "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium",
+    "transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
+    "transform-gpu will-change-transform active:scale-95",
+    "before:absolute before:inset-0 before:rounded-md before:transition-all before:duration-150",
+    "after:absolute after:inset-0 after:rounded-md after:transition-all after:duration-150",
+], {
+    variants: {
+        variant: {
+            default: [
+                "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
+                "before:bg-gradient-to-t before:from-primary/80 before:to-primary before:translate-y-1 before:shadow-lg",
+                "hover:before:translate-y-0.5 active:before:translate-y-0",
+                "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+                "hover:after:opacity-100",
+            ],
+            destructive: [
+                "bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90",
+                "before:bg-gradient-to-t before:from-destructive/80 before:to-destructive before:translate-y-1 before:shadow-lg",
+                "hover:before:translate-y-0.5 active:before:translate-y-0",
+                "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+                "hover:after:opacity-100",
+            ],
+            outline: [
+                "border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
+                "before:bg-gradient-to-t before:from-muted/50 before:to-background before:translate-y-1 before:border before:border-input",
+                "hover:before:translate-y-0.5 active:before:translate-y-0",
+                "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
+                "hover:after:opacity-100",
+            ],
+            secondary: [
+                "bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80",
+                "before:bg-gradient-to-t before:from-secondary/80 before:to-secondary before:translate-y-1 before:shadow-lg",
+                "hover:before:translate-y-0.5 active:before:translate-y-0",
+                "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+                "hover:after:opacity-100",
+            ],
+            ghost: [
+                "text-foreground hover:bg-accent hover:text-accent-foreground",
+                "before:bg-gradient-to-t before:from-accent/30 before:to-accent/10 before:translate-y-1 before:opacity-0",
+                "hover:before:opacity-100 hover:before:translate-y-0.5 active:before:translate-y-0",
+                "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
+                "hover:after:opacity-50",
+            ],
+            link: [
+                "text-primary underline-offset-4 hover:underline",
+                "before:hidden after:hidden",
+            ],
+            neon: [
+                "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg",
+                "before:bg-gradient-to-t before:from-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
+                "hover:before:translate-y-0.5 active:before:translate-y-0",
+                "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
+                "hover:after:opacity-100",
+                "hover:shadow-purple-500/25 hover:shadow-2xl",
+            ],
+            glass: [
+                "bg-white/10 backdrop-blur-md border border-white/20 text-foreground shadow-lg",
+                "before:bg-gradient-to-t before:from-white/5 before:to-white/20 before:translate-y-1 before:backdrop-blur-md before:border before:border-white/20",
+                "hover:before:translate-y-0.5 active:before:translate-y-0",
+                "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
+                "hover:after:opacity-100",
+            ],
+            gradient: [
+                "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg",
+                "before:bg-gradient-to-t before:from-blue-600 before:via-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
+                "hover:before:translate-y-0.5 active:before:translate-y-0",
+                "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+                "hover:after:opacity-100",
+                "hover:bg-gradient-to-r hover:from-blue-400 hover:via-purple-400 hover:to-pink-400",
+            ],
+        },
+        size: {
+            default: "h-10 px-4 py-2",
+            sm: "h-9 rounded-md px-3",
+            lg: "h-11 rounded-md px-8",
+            xl: "h-12 rounded-lg px-10 text-base",
+            icon: "h-10 w-10",
+        },
+        depth: {
+            none: "before:translate-y-0",
+            sm: "before:translate-y-0.5 hover:before:translate-y-0 active:before:translate-y-0",
+            default: "before:translate-y-1 hover:before:translate-y-0.5 active:before:translate-y-0",
+            lg: "before:translate-y-1.5 hover:before:translate-y-0.5 active:before:translate-y-0",
+            xl: "before:translate-y-2 hover:before:translate-y-1 active:before:translate-y-0",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+        depth: "default",
+    },
+});
+const Button3D = React.forwardRef(({ className, variant, size, depth, tiltOnHover = false, glowIntensity = 0, shadowColor, pressAnimation = true, children, onMouseEnter, onMouseLeave, onMouseMove, onMouseDown, onMouseUp, style, ...props }, ref) => {
+    const buttonRef = React.useRef(null);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isPressed, setIsPressed] = React.useState(false);
+    const [tiltTransform, setTiltTransform] = React.useState({ x: 0, y: 0 });
+    const updateTilt = React.useCallback((e) => {
+        if (!tiltOnHover || !buttonRef.current)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const deltaX = (e.clientX - centerX) / (rect.width / 2);
+        const deltaY = (e.clientY - centerY) / (rect.height / 2);
+        setTiltTransform({
+            x: deltaY * -10, // Inverted for more natural feel
+            y: deltaX * 10,
+        });
+    }, [tiltOnHover]);
+    const resetTilt = React.useCallback(() => {
+        setTiltTransform({ x: 0, y: 0 });
+    }, []);
+    const handleMouseEnter = React.useCallback((e) => {
+        setIsHovered(true);
+        onMouseEnter?.(e);
+    }, [onMouseEnter]);
+    const handleMouseLeave = React.useCallback((e) => {
+        setIsHovered(false);
+        resetTilt();
+        onMouseLeave?.(e);
+    }, [onMouseLeave, resetTilt]);
+    const handleMouseMove = React.useCallback((e) => {
+        if (tiltOnHover) {
+            updateTilt(e);
+        }
+        onMouseMove?.(e);
+    }, [onMouseMove, tiltOnHover, updateTilt]);
+    const handleMouseDown = React.useCallback((e) => {
+        if (pressAnimation) {
+            setIsPressed(true);
+        }
+        onMouseDown?.(e);
+    }, [onMouseDown, pressAnimation]);
+    const handleMouseUp = React.useCallback((e) => {
+        setIsPressed(false);
+        onMouseUp?.(e);
+    }, [onMouseUp]);
+    React.useImperativeHandle(ref, () => buttonRef.current);
+    const buttonStyle = {
+        ...style,
+        transform: tiltOnHover
+            ? `perspective(1000px) rotateX(${tiltTransform.x}deg) rotateY(${tiltTransform.y}deg) ${isPressed ? "translateY(1px)" : ""}`
+            : isPressed
+                ? "translateY(1px)"
+                : undefined,
+        filter: glowIntensity > 0
+            ? `drop-shadow(0 0 ${glowIntensity * 4}px ${shadowColor || "currentColor"})`
+            : undefined,
+        transition: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
+    };
+    return (_jsx("button", { ref: buttonRef, className: cn(button3DVariants({ variant, size, depth }), className), style: buttonStyle, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...props, children: _jsx("span", { className: "relative z-10 flex items-center justify-center gap-2", children: children }) }));
+});
+Button3D.displayName = "Button3D";
+// Preset button variants for common use cases
+const Button3DPreset = {
+    Hero: React.forwardRef((props, ref) => (_jsx(Button3D, { ref: ref, variant: "gradient", size: "xl", depth: "lg", tiltOnHover: true, glowIntensity: 2, ...props }))),
+    CTA: React.forwardRef((props, ref) => (_jsx(Button3D, { ref: ref, variant: "neon", size: "lg", depth: "default", tiltOnHover: true, glowIntensity: 1, ...props }))),
+    Glass: React.forwardRef((props, ref) => (_jsx(Button3D, { ref: ref, variant: "glass", size: "default", depth: "sm", tiltOnHover: true, ...props }))),
+    Minimal: React.forwardRef((props, ref) => (_jsx(Button3D, { ref: ref, variant: "ghost", size: "default", depth: "sm", ...props }))),
+    Danger: React.forwardRef((props, ref) => (_jsx(Button3D, { ref: ref, variant: "destructive", size: "default", depth: "default", shadowColor: "rgb(239 68 68)", ...props }))),
+};
+// Assign display names
+Button3DPreset.Hero.displayName = "Button3DPreset.Hero";
+Button3DPreset.CTA.displayName = "Button3DPreset.CTA";
+Button3DPreset.Glass.displayName = "Button3DPreset.Glass";
+Button3DPreset.Minimal.displayName = "Button3DPreset.Minimal";
+Button3DPreset.Danger.displayName = "Button3DPreset.Danger";
+// Loading button with 3D spinner
+const Button3DLoading = React.forwardRef(({ loading = false, children, disabled, ...props }, ref) => {
+    return (_jsxs(Button3D, { ref: ref, disabled: disabled || loading, ...props, children: [loading && (_jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent" })), !loading && children] }));
+});
+Button3DLoading.displayName = "Button3DLoading";
+export { Button3D, Button3DPreset, Button3DLoading, button3DVariants, };

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, };