@hanzo/ui 5.3.39 → 5.3.40

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

@@ -1,126 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,7 +0,0 @@
-// 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

@@ -1,37 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}

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

@@ -1,208 +0,0 @@
-"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 { motion } from "framer-motion";
-import { cn } from "@hanzo/ui/lib/utils";
-const marquee3DVariants = cva([
-    "relative overflow-hidden whitespace-nowrap",
-    "transform-gpu will-change-transform",
-    "[perspective:1000px]",
-], {
-    variants: {
-        variant: {
-            default: [
-                "bg-background text-foreground",
-                "[&_.marquee-content]:text-current",
-            ],
-            neon: [
-                "bg-black text-cyan-400",
-                "[&_.marquee-content]:text-cyan-400",
-                "[&_.marquee-content]:drop-shadow-[0_0_10px_currentColor]",
-                "[&_.marquee-content]:animate-pulse",
-            ],
-            rainbow: [
-                "bg-black",
-                "[&_.marquee-content]:bg-gradient-to-r [&_.marquee-content]:from-red-500 [&_.marquee-content]:via-yellow-500 [&_.marquee-content]:via-green-500 [&_.marquee-content]:via-blue-500 [&_.marquee-content]:to-purple-500",
-                "[&_.marquee-content]:bg-clip-text [&_.marquee-content]:text-transparent",
-            ],
-            metallic: [
-                "bg-slate-900",
-                "[&_.marquee-content]:bg-gradient-to-b [&_.marquee-content]:from-gray-200 [&_.marquee-content]:via-gray-400 [&_.marquee-content]:to-gray-600",
-                "[&_.marquee-content]:bg-clip-text [&_.marquee-content]:text-transparent",
-            ],
-            fire: [
-                "bg-black",
-                "[&_.marquee-content]:bg-gradient-to-t [&_.marquee-content]:from-red-600 [&_.marquee-content]:via-orange-500 [&_.marquee-content]:to-yellow-400",
-                "[&_.marquee-content]:bg-clip-text [&_.marquee-content]:text-transparent",
-                "[&_.marquee-content]:drop-shadow-[0_0_20px_#ff6600]",
-            ],
-            glass: [
-                "bg-white/10 backdrop-blur-sm",
-                "[&_.marquee-content]:text-white/90",
-                "[&_.marquee-content]:drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]",
-            ],
-        },
-        size: {
-            sm: "h-8 text-sm [&_.marquee-content]:py-1",
-            default: "h-12 text-base [&_.marquee-content]:py-2",
-            lg: "h-16 text-lg [&_.marquee-content]:py-3",
-            xl: "h-20 text-xl [&_.marquee-content]:py-4",
-            "2xl": "h-24 text-2xl [&_.marquee-content]:py-5",
-            "3xl": "h-32 text-3xl [&_.marquee-content]:py-6",
-        },
-        direction: {
-            left: "",
-            right: "",
-            up: "flex-col",
-            down: "flex-col",
-        },
-        perspective: {
-            none: "[perspective:none]",
-            sm: "[perspective:500px]",
-            default: "[perspective:1000px]",
-            lg: "[perspective:1500px]",
-            xl: "[perspective:2000px]",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default",
-        direction: "left",
-        perspective: "default",
-    },
-});
-const Marquee3D = React.forwardRef(({ className, variant, size, direction = "left", perspective, children, speed = 50, pauseOnHover = false, reverse = false, repeat = 5, gap = 0, rotateX = 0, rotateY = 0, rotateZ = 0, autoFill = false, gradient = false, gradientColor = "#ffffff", gradientWidth = 200, style, ...props }, ref) => {
-    const [containerWidth, setContainerWidth] = React.useState(0);
-    const [contentWidth, setContentWidth] = React.useState(0);
-    const containerRef = React.useRef(null);
-    const contentRef = React.useRef(null);
-    // Measure container and content dimensions
-    React.useEffect(() => {
-        const measureDimensions = () => {
-            if (containerRef.current && contentRef.current) {
-                const containerRect = containerRef.current.getBoundingClientRect();
-                const contentRect = contentRef.current.getBoundingClientRect();
-                if (direction === "left" || direction === "right") {
-                    setContainerWidth(containerRect.width);
-                    setContentWidth(contentRect.width);
-                }
-                else {
-                    setContainerWidth(containerRect.height);
-                    setContentWidth(contentRect.height);
-                }
-            }
-        };
-        measureDimensions();
-        window.addEventListener("resize", measureDimensions);
-        return () => window.removeEventListener("resize", measureDimensions);
-    }, [direction, children]);
-    // Calculate animation duration based on speed and content width
-    const duration = React.useMemo(() => {
-        if (contentWidth === 0)
-            return 20;
-        return contentWidth / speed;
-    }, [contentWidth, speed]);
-    // Calculate number of repeats needed for smooth infinite scroll
-    const actualRepeat = React.useMemo(() => {
-        if (autoFill && containerWidth > 0 && contentWidth > 0) {
-            return Math.ceil(containerWidth / contentWidth) + 2;
-        }
-        return repeat;
-    }, [autoFill, containerWidth, contentWidth, repeat]);
-    // Animation variants for different directions
-    const getAnimationProps = () => {
-        const isVertical = direction === "up" || direction === "down";
-        const distance = contentWidth + gap;
-        let animateProps = {};
-        if (direction === "left") {
-            animateProps = {
-                x: reverse ? [distance, -distance] : [-distance, distance],
-            };
-        }
-        else if (direction === "right") {
-            animateProps = {
-                x: reverse ? [-distance, distance] : [distance, -distance],
-            };
-        }
-        else if (direction === "up") {
-            animateProps = {
-                y: reverse ? [distance, -distance] : [-distance, distance],
-            };
-        }
-        else if (direction === "down") {
-            animateProps = {
-                y: reverse ? [-distance, distance] : [distance, -distance],
-            };
-        }
-        return {
-            animate: animateProps,
-            transition: {
-                duration,
-                ease: "linear",
-                repeat: Infinity,
-            },
-        };
-    };
-    // 3D transform style
-    const transform3D = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
-    // Gradient mask style
-    const gradientMask = gradient
-        ? {
-            maskImage: `linear-gradient(to right, transparent, ${gradientColor} ${gradientWidth}px, ${gradientColor} calc(100% - ${gradientWidth}px), transparent)`,
-            WebkitMaskImage: `linear-gradient(to right, transparent, ${gradientColor} ${gradientWidth}px, ${gradientColor} calc(100% - ${gradientWidth}px), transparent)`,
-        }
-        : {};
-    return (_jsx("div", { ref: containerRef, className: cn(marquee3DVariants({ variant, size, direction, perspective }), "flex items-center", direction === "up" || direction === "down" ? "flex-col" : "flex-row", className), style: {
-            ...style,
-            transform: transform3D,
-            ...gradientMask,
-        }, ...props, children: _jsx(motion.div, { ref: contentRef, className: cn("marquee-content flex shrink-0 font-bold", direction === "up" || direction === "down"
-                ? "flex-col"
-                : "flex-row", pauseOnHover && "hover:[animation-play-state:paused]"), style: {
-                gap: `${gap}px`,
-            }, ...getAnimationProps(), children: Array.from({ length: actualRepeat }).map((_, index) => (_jsxs(React.Fragment, { children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center", direction === "up" || direction === "down"
-                            ? "flex-col"
-                            : "flex-row"), style: {
-                            transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`,
-                            transformStyle: "preserve-3d",
-                        }, children: children }), index < actualRepeat - 1 && gap > 0 && (_jsx("div", { style: {
-                            width: direction === "up" || direction === "down"
-                                ? "100%"
-                                : `${gap}px`,
-                            height: direction === "up" || direction === "down"
-                                ? `${gap}px`
-                                : "100%",
-                        } }))] }, index))) }) }));
-});
-Marquee3D.displayName = "Marquee3D";
-// Preset marquee variants
-const Marquee3DPreset = {
-    Hero: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "rainbow", size: "3xl", speed: 30, rotateX: -10, gradient: true, ...props }))),
-    Neon: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "neon", size: "xl", speed: 40, rotateY: 5, pauseOnHover: true, ...props }))),
-    Metallic: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "metallic", size: "lg", speed: 35, rotateX: -5, rotateY: 2, gradient: true, gradientColor: "#c4c4c4", ...props }))),
-    Fire: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "fire", size: "2xl", speed: 60, rotateZ: 1, gradient: true, gradientColor: "#ff6600", ...props }))),
-    Glass: React.forwardRef((props, ref) => (_jsx(Marquee3D, { ref: ref, variant: "glass", size: "lg", speed: 25, rotateX: -8, pauseOnHover: true, gradient: true, gradientColor: "rgba(255,255,255,0.9)", ...props }))),
-};
-// Assign display names
-Marquee3DPreset.Hero.displayName = "Marquee3DPreset.Hero";
-Marquee3DPreset.Neon.displayName = "Marquee3DPreset.Neon";
-Marquee3DPreset.Metallic.displayName = "Marquee3DPreset.Metallic";
-Marquee3DPreset.Fire.displayName = "Marquee3DPreset.Fire";
-Marquee3DPreset.Glass.displayName = "Marquee3DPreset.Glass";
-// Marquee with floating 3D text effect
-const Marquee3DFloating = React.forwardRef(({ children, floatIntensity = 10, floatSpeed = 3, ...props }, ref) => {
-    const text = typeof children === "string" ? children : "";
-    return (_jsx(Marquee3D, { ref: ref, ...props, children: text ? (_jsx("div", { className: "flex space-x-1", children: text.split("").map((char, index) => (_jsx(motion.span, { className: "inline-block", animate: {
-                    y: [0, -floatIntensity, 0],
-                    rotateX: [0, 5, 0],
-                    rotateY: [0, 2, 0],
-                }, transition: {
-                    duration: floatSpeed,
-                    ease: "easeInOut",
-                    repeat: Infinity,
-                    delay: index * 0.1,
-                }, children: char === " " ? "\u00A0" : char }, index))) })) : (children) }));
-});
-Marquee3DFloating.displayName = "Marquee3DFloating";
-export { Marquee3D, Marquee3DPreset, Marquee3DFloating, marquee3DVariants, };

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

@@ -1,8 +0,0 @@
-import * as React from "react";
-interface Pin3DProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    href?: string;
-}
-declare const Pin3D: React.ForwardRefExoticComponent<Pin3DProps & React.RefAttributes<HTMLDivElement>>;
-export { Pin3D };
-//# sourceMappingURL=pin.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pin.d.ts","sourceRoot":"","sources":["../../../src/3d/pin.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,KAAK,mFAmBV,CAAA;AAID,OAAO,EAAE,KAAK,EAAE,CAAA"}

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

@@ -1,9 +0,0 @@
-"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 Pin3D = React.forwardRef(({ className, title, href, children, ...props }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn("group/pin relative cursor-pointer", className), ...props, children: [_jsx("div", { className: "pointer-events-none absolute inset-0 z-10 flex h-full w-full items-center justify-center opacity-0 transition duration-500 group-hover/pin:opacity-100", children: _jsx("div", { className: "relative flex h-full w-full items-center justify-center", children: _jsx("div", { className: "absolute inset-0 bg-white opacity-0 transition duration-500 group-hover/pin:opacity-50" }) }) }), _jsx("div", { className: "transform-gpu transition duration-500 group-hover/pin:scale-95", children: children })] }));
-});
-Pin3D.displayName = "Pin3D";
-export { Pin3D };

package/dist/src/avatar.d.ts

@@ -1,2 +0,0 @@
-export * from '../primitives/avatar';
-//# sourceMappingURL=avatar.d.ts.map

package/dist/src/avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/avatar.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/src/avatar.js

@@ -1 +0,0 @@
-export * from '../primitives/avatar';

package/dist/src/badge.d.ts

@@ -1,2 +0,0 @@
-export * from '../primitives/badge';
-//# sourceMappingURL=badge.d.ts.map

package/dist/src/badge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist/src/badge.js

@@ -1 +0,0 @@
-export * from '../primitives/badge';

package/dist/src/billing/components/account-members.d.ts

@@ -1,10 +0,0 @@
-import type { BillingAccountMember, BillingRole } from '../types';
-export interface AccountMembersProps {
-    members: BillingAccountMember[];
-    userRole: BillingRole;
-    onInvite?: (email: string, role: BillingRole) => Promise<void>;
-    onChangeRole?: (memberId: string, role: BillingRole) => Promise<void>;
-    onRemove?: (memberId: string) => Promise<void>;
-}
-export declare function AccountMembers({ members, userRole, onInvite, onChangeRole, onRemove }: AccountMembersProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=account-members.d.ts.map

package/dist/src/billing/components/account-members.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"account-members.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/account-members.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAEjE,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,oBAAoB,EAAE,CAAA;IAC/B,QAAQ,EAAE,WAAW,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACrE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC/C;AAiBD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CA8I1G"}

package/dist/src/billing/components/account-members.js

@@ -1,63 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-const ROLES = ['owner', 'admin', 'viewer'];
-function roleBadgeClass(role) {
-    switch (role) {
-        case 'owner':
-            return 'bg-brand/20 text-brand';
-        case 'admin':
-            return 'bg-amber-500/20 text-amber-400';
-        case 'viewer':
-            return 'bg-text-dim/20 text-text-muted';
-    }
-}
-const INPUT_CLASS = 'rounded-lg border border-border bg-bg-input px-3 py-2 text-sm text-text outline-none transition focus:border-brand';
-export function AccountMembers({ members, userRole, onInvite, onChangeRole, onRemove }) {
-    const canManage = userRole === 'owner' || userRole === 'admin';
-    const [inviteEmail, setInviteEmail] = React.useState('');
-    const [inviteRole, setInviteRole] = React.useState('viewer');
-    const [inviting, setInviting] = React.useState(false);
-    const [busyId, setBusyId] = React.useState(null);
-    const handleInvite = React.useCallback(async () => {
-        if (!inviteEmail.includes('@') || !onInvite)
-            return;
-        setInviting(true);
-        try {
-            await onInvite(inviteEmail, inviteRole);
-            setInviteEmail('');
-            setInviteRole('viewer');
-        }
-        finally {
-            setInviting(false);
-        }
-    }, [inviteEmail, inviteRole, onInvite]);
-    const handleChangeRole = React.useCallback(async (memberId, role) => {
-        if (!onChangeRole)
-            return;
-        setBusyId(memberId);
-        try {
-            await onChangeRole(memberId, role);
-        }
-        finally {
-            setBusyId(null);
-        }
-    }, [onChangeRole]);
-    const handleRemove = React.useCallback(async (memberId) => {
-        if (!onRemove)
-            return;
-        setBusyId(memberId);
-        try {
-            await onRemove(memberId);
-        }
-        finally {
-            setBusyId(null);
-        }
-    }, [onRemove]);
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card", children: [_jsxs("div", { className: "border-b border-border p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Team members" }), _jsx("p", { className: "text-sm text-text-muted", children: canManage
-                                ? 'Manage who has access to this billing account.'
-                                : 'View members of this billing account.' })] }), canManage && onInvite && (_jsxs("div", { className: "flex flex-wrap items-end gap-3 border-b border-border p-4", children: [_jsxs("div", { className: "flex-1 min-w-[200px]", children: [_jsx("label", { className: "mb-1 block text-xs font-medium text-text-muted", children: "Email address" }), _jsx("input", { type: "email", value: inviteEmail, onChange: (e) => setInviteEmail(e.target.value), placeholder: "colleague@company.com", className: `${INPUT_CLASS} w-full` })] }), _jsxs("div", { className: "w-32", children: [_jsx("label", { className: "mb-1 block text-xs font-medium text-text-muted", children: "Role" }), _jsx("select", { value: inviteRole, onChange: (e) => setInviteRole(e.target.value), className: `${INPUT_CLASS} w-full`, children: ROLES.map((r) => (_jsx("option", { value: r, children: r.charAt(0).toUpperCase() + r.slice(1) }, r))) })] }), _jsx("button", { type: "button", disabled: !inviteEmail.includes('@') || inviting, onClick: handleInvite, className: "rounded-lg bg-text px-4 py-2 text-sm font-medium text-bg transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60", children: inviting ? 'Inviting...' : 'Invite' })] })), _jsx("div", { className: "divide-y divide-border", children: members.length === 0 ? (_jsx("div", { className: "p-6 text-sm text-text-muted", children: "No members yet." })) : (members.map((member) => {
-                        const isBusy = busyId === member.id;
-                        return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-brand/20 text-sm font-bold text-brand", children: (member.name || member.email).charAt(0).toUpperCase() }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-text", children: member.name || member.email }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-muted", children: [_jsx("span", { children: member.email }), _jsx("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${roleBadgeClass(member.role)}`, children: member.role }), _jsxs("span", { children: ["Joined ", new Date(member.addedAt).toLocaleDateString('en-US')] })] })] })] }), canManage && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("select", { value: member.role, onChange: (e) => handleChangeRole(member.id, e.target.value), disabled: isBusy, className: "rounded-md border border-border bg-bg-input px-2 py-1 text-xs text-text outline-none transition focus:border-brand disabled:cursor-not-allowed disabled:opacity-60", children: ROLES.map((r) => (_jsx("option", { value: r, children: r.charAt(0).toUpperCase() + r.slice(1) }, r))) }), _jsx("button", { type: "button", disabled: isBusy, onClick: () => handleRemove(member.id), className: "rounded-md border border-rose-500/30 px-3 py-1.5 text-xs font-medium text-rose-500 transition hover:bg-rose-500/10 disabled:cursor-not-allowed disabled:opacity-60", children: isBusy ? 'Removing...' : 'Remove' })] }))] }, member.id));
-                    })) })] }) }));
-}

package/dist/src/billing/components/account-switcher.d.ts

@@ -1,9 +0,0 @@
-import type { BillingAccount } from '../types';
-export interface AccountSwitcherProps {
-    accounts: BillingAccount[];
-    activeAccountId: string | null;
-    onSwitch: (accountId: string) => void;
-    onCreate?: () => void;
-}
-export declare function AccountSwitcher({ accounts, activeAccountId, onSwitch, onCreate }: AccountSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=account-switcher.d.ts.map

package/dist/src/billing/components/account-switcher.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"account-switcher.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/account-switcher.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAe,MAAM,UAAU,CAAA;AAE3D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAyBD,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,oBAAoB,kDA8HtG"}

package/dist/src/billing/components/account-switcher.js

@@ -1,52 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-function roleBadgeClass(role) {
-    switch (role) {
-        case 'owner':
-            return 'bg-brand/20 text-brand';
-        case 'admin':
-            return 'bg-amber-500/20 text-amber-400';
-        case 'viewer':
-            return 'bg-text-dim/20 text-text-muted';
-    }
-}
-function planBadgeClass(_plan) {
-    return 'bg-text-dim/20 text-text-muted';
-}
-function formatBalance(balance, currency) {
-    return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: currency.toUpperCase(),
-        minimumFractionDigits: 2,
-    }).format(balance / 100);
-}
-export function AccountSwitcher({ accounts, activeAccountId, onSwitch, onCreate }) {
-    const [open, setOpen] = React.useState(false);
-    const ref = React.useRef(null);
-    // Close dropdown on outside click
-    React.useEffect(() => {
-        function handleClick(e) {
-            if (ref.current && !ref.current.contains(e.target)) {
-                setOpen(false);
-            }
-        }
-        if (open) {
-            document.addEventListener('mousedown', handleClick);
-            return () => document.removeEventListener('mousedown', handleClick);
-        }
-    }, [open]);
-    const active = accounts.find((a) => a.id === activeAccountId) ?? accounts[0] ?? null;
-    if (accounts.length === 0 && !onCreate)
-        return null;
-    return (_jsxs("div", { ref: ref, className: "relative mb-4", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between rounded-xl border border-border bg-bg-card px-4 py-3 text-left transition hover:bg-bg-elevated", children: [active ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-brand/20 text-sm font-bold text-brand", children: active.orgName.charAt(0).toUpperCase() }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold text-text", children: active.name }), _jsx("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${planBadgeClass(active.plan)}`, children: active.plan }), _jsx("span", { className: `rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${roleBadgeClass(active.role)}`, children: active.role })] }), _jsxs("span", { className: "text-xs text-text-muted", children: [active.orgName, " \u00B7 ", formatBalance(active.balance, active.currency)] })] })] })) : (_jsx("span", { className: "text-sm text-text-muted", children: "No billing account" })), _jsx("svg", { className: `h-4 w-4 text-text-muted transition-transform ${open ? 'rotate-180' : ''}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsxs("div", { className: "absolute left-0 right-0 z-50 mt-1 overflow-hidden rounded-xl border border-border bg-bg-card shadow-lg", children: [_jsx("div", { className: "max-h-72 overflow-y-auto divide-y divide-border", children: accounts.map((account) => {
-                            const isActive = account.id === activeAccountId;
-                            return (_jsxs("button", { type: "button", onClick: () => {
-                                    onSwitch(account.id);
-                                    setOpen(false);
-                                }, className: `flex w-full items-center gap-3 px-4 py-3 text-left transition hover:bg-bg-elevated ${isActive ? 'bg-bg-elevated' : ''}`, children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-brand/20 text-sm font-bold text-brand", children: account.orgName.charAt(0).toUpperCase() }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-text truncate", children: account.name }), _jsx("span", { className: `shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${planBadgeClass(account.plan)}`, children: account.plan }), _jsx("span", { className: `shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${roleBadgeClass(account.role)}`, children: account.role })] }), _jsxs("span", { className: "text-xs text-text-muted", children: [account.orgName, " \u00B7 ", formatBalance(account.balance, account.currency)] })] }), isActive && (_jsx("svg", { className: "h-4 w-4 shrink-0 text-brand", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }))] }, account.id));
-                        }) }), onCreate && (_jsx("div", { className: "border-t border-border p-2", children: _jsxs("button", { type: "button", onClick: () => {
-                                onCreate();
-                                setOpen(false);
-                            }, className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-text-muted transition hover:bg-bg-elevated hover:text-text", children: [_jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4v16m8-8H4" }) }), "Create billing account"] }) }))] }))] }));
-}

package/dist/src/billing/components/animated-card.d.ts

@@ -1,9 +0,0 @@
-export interface AnimatedCardProps {
-    number: string;
-    name: string;
-    expiry: string;
-    cvv: string;
-    cvvFocused: boolean;
-}
-export declare function AnimatedCard({ number, name, expiry, cvv, cvvFocused }: AnimatedCardProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=animated-card.d.ts.map

package/dist/src/billing/components/animated-card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"animated-card.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/animated-card.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,OAAO,CAAA;CACpB;AAqGD,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,iBAAiB,2CAyKxF"}