@hanzo/ui 5.3.35 → 5.3.36

package/dist/3d/index.mjs

@@ -1,1472 +1,2 @@
 "use client";
-import * as React3 from 'react';
-import { cva } from 'class-variance-authority';
-import { cn } from '@hanzo/ui/lib/utils';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { motion } from 'framer-motion';
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var 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"
-    }
-  }
-);
-var Button3D = React3.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    depth,
-    tiltOnHover = false,
-    glowIntensity = 0,
-    shadowColor,
-    pressAnimation = true,
-    children,
-    onMouseEnter,
-    onMouseLeave,
-    onMouseMove,
-    onMouseDown,
-    onMouseUp,
-    style,
-    ...props
-  }, ref) => {
-    const buttonRef = React3.useRef(null);
-    const [isHovered, setIsHovered] = React3.useState(false);
-    const [isPressed, setIsPressed] = React3.useState(false);
-    const [tiltTransform, setTiltTransform] = React3.useState({ x: 0, y: 0 });
-    const updateTilt = React3.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 = React3.useCallback(() => {
-      setTiltTransform({ x: 0, y: 0 });
-    }, []);
-    const handleMouseEnter = React3.useCallback(
-      (e) => {
-        setIsHovered(true);
-        onMouseEnter?.(e);
-      },
-      [onMouseEnter]
-    );
-    const handleMouseLeave = React3.useCallback(
-      (e) => {
-        setIsHovered(false);
-        resetTilt();
-        onMouseLeave?.(e);
-      },
-      [onMouseLeave, resetTilt]
-    );
-    const handleMouseMove = React3.useCallback(
-      (e) => {
-        if (tiltOnHover) {
-          updateTilt(e);
-        }
-        onMouseMove?.(e);
-      },
-      [onMouseMove, tiltOnHover, updateTilt]
-    );
-    const handleMouseDown = React3.useCallback(
-      (e) => {
-        if (pressAnimation) {
-          setIsPressed(true);
-        }
-        onMouseDown?.(e);
-      },
-      [onMouseDown, pressAnimation]
-    );
-    const handleMouseUp = React3.useCallback(
-      (e) => {
-        setIsPressed(false);
-        onMouseUp?.(e);
-      },
-      [onMouseUp]
-    );
-    React3.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)" : void 0,
-      filter: glowIntensity > 0 ? `drop-shadow(0 0 ${glowIntensity * 4}px ${shadowColor || "currentColor"})` : void 0,
-      transition: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)"
-    };
-    return /* @__PURE__ */ 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: /* @__PURE__ */ jsx("span", { className: "relative z-10 flex items-center justify-center gap-2", children })
-      }
-    );
-  }
-);
-Button3D.displayName = "Button3D";
-var Button3DPreset = {
-  Hero: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-    Button3D,
-    {
-      ref,
-      variant: "gradient",
-      size: "xl",
-      depth: "lg",
-      tiltOnHover: true,
-      glowIntensity: 2,
-      ...props
-    }
-  )),
-  CTA: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-    Button3D,
-    {
-      ref,
-      variant: "neon",
-      size: "lg",
-      depth: "default",
-      tiltOnHover: true,
-      glowIntensity: 1,
-      ...props
-    }
-  )),
-  Glass: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-    Button3D,
-    {
-      ref,
-      variant: "glass",
-      size: "default",
-      depth: "sm",
-      tiltOnHover: true,
-      ...props
-    }
-  )),
-  Minimal: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(Button3D, { ref, variant: "ghost", size: "default", depth: "sm", ...props })),
-  Danger: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-    Button3D,
-    {
-      ref,
-      variant: "destructive",
-      size: "default",
-      depth: "default",
-      shadowColor: "rgb(239 68 68)",
-      ...props
-    }
-  ))
-};
-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";
-var Button3DLoading = React3.forwardRef(({ loading = false, children, disabled, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs(Button3D, { ref, disabled: disabled || loading, ...props, children: [
-    loading && /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent" }),
-    !loading && children
-  ] });
-});
-Button3DLoading.displayName = "Button3DLoading";
-var Card3D = React3.forwardRef(
-  ({
-    children,
-    maxTilt = 15,
-    perspective = 1e3,
-    scale = 1.05,
-    speed = 400,
-    glare = true,
-    glareMaxOpacity = 0.7,
-    className,
-    ...props
-  }, ref) => {
-    const cardRef = React3.useRef(null);
-    const glareRef = React3.useRef(null);
-    const [isHovered, setIsHovered] = React3.useState(false);
-    const [transforms, setTransforms] = React3.useState({
-      rotateX: 0,
-      rotateY: 0,
-      scale: 1,
-      glareX: 50,
-      glareY: 50,
-      glareOpacity: 0
-    });
-    const updateTransforms = React3.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 = React3.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 = React3.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 = React3.useCallback(() => {
-      setIsHovered(true);
-    }, []);
-    const handleMouseLeave = React3.useCallback(() => {
-      setIsHovered(false);
-      updateTransforms(null, null);
-    }, [updateTransforms]);
-    const handleTouchStart = React3.useCallback(() => {
-      setIsHovered(true);
-    }, []);
-    const handleTouchEnd = React3.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`
-    };
-    React3.useImperativeHandle(ref, () => cardRef.current);
-    return /* @__PURE__ */ 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: [
-          /* @__PURE__ */ jsx("div", { className: "relative z-10", children }),
-          glare && /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: glareRef,
-              className: "absolute inset-0 rounded-lg pointer-events-none z-20",
-              style: glareStyle
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Card3D.displayName = "Card3D";
-var Card3DHeader = React3.forwardRef(({ className, depth = 20, style, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    style: {
-      transform: `translateZ(${depth}px)`,
-      ...style
-    },
-    ...props
-  }
-));
-Card3DHeader.displayName = "Card3DHeader";
-var Card3DTitle = React3.forwardRef(({ className, depth = 30, style, ...props }, ref) => /* @__PURE__ */ jsx(
-  "h3",
-  {
-    ref,
-    className: cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    ),
-    style: {
-      transform: `translateZ(${depth}px)`,
-      ...style
-    },
-    ...props
-  }
-));
-Card3DTitle.displayName = "Card3DTitle";
-var Card3DDescription = React3.forwardRef(({ className, depth = 10, style, ...props }, ref) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    style: {
-      transform: `translateZ(${depth}px)`,
-      ...style
-    },
-    ...props
-  }
-));
-Card3DDescription.displayName = "Card3DDescription";
-var Card3DContent = React3.forwardRef(({ className, depth = 25, style, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("p-6 pt-0", className),
-    style: {
-      transform: `translateZ(${depth}px)`,
-      ...style
-    },
-    ...props
-  }
-));
-Card3DContent.displayName = "Card3DContent";
-var Card3DFooter = React3.forwardRef(({ className, depth = 15, style, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    style: {
-      transform: `translateZ(${depth}px)`,
-      ...style
-    },
-    ...props
-  }
-));
-Card3DFooter.displayName = "Card3DFooter";
-var Carousel3D = React3.forwardRef(
-  ({
-    items,
-    itemWidth = 300,
-    itemHeight = 400,
-    spacing = 80,
-    perspective = 1e3,
-    rotateY = 40,
-    autoRotate = false,
-    autoRotateSpeed = 3e3,
-    showControls = true,
-    infinite = true,
-    className,
-    ...props
-  }, ref) => {
-    const containerRef = React3.useRef(null);
-    const [currentIndex, setCurrentIndex] = React3.useState(0);
-    const [isHovered, setIsHovered] = React3.useState(false);
-    const [isDragging, setIsDragging] = React3.useState(false);
-    const [dragStart, setDragStart] = React3.useState({ x: 0, y: 0 });
-    const [dragOffset, setDragOffset] = React3.useState(0);
-    const autoRotateRef = React3.useRef(void 0);
-    const totalItems = items.length;
-    const radius = (itemWidth + spacing) / 2 / Math.tan(Math.PI / totalItems);
-    React3.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 = React3.useCallback(() => {
-      setCurrentIndex(
-        (prev) => infinite ? (prev - 1 + totalItems) % totalItems : Math.max(0, prev - 1)
-      );
-    }, [infinite, totalItems]);
-    const goToNext = React3.useCallback(() => {
-      setCurrentIndex(
-        (prev) => infinite ? (prev + 1) % totalItems : Math.min(totalItems - 1, prev + 1)
-      );
-    }, [infinite, totalItems]);
-    const goToIndex = React3.useCallback(
-      (index) => {
-        setCurrentIndex(Math.max(0, Math.min(totalItems - 1, index)));
-      },
-      [totalItems]
-    );
-    const handleDragStart = React3.useCallback(
-      (clientX, clientY) => {
-        setIsDragging(true);
-        setDragStart({ x: clientX, y: clientY });
-        setDragOffset(0);
-      },
-      []
-    );
-    const handleDragMove = React3.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 = React3.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]);
-    const handleMouseDown = React3.useCallback(
-      (e) => {
-        e.preventDefault();
-        handleDragStart(e.clientX, e.clientY);
-      },
-      [handleDragStart]
-    );
-    const handleMouseMove = React3.useCallback(
-      (e) => {
-        handleDragMove(e.clientX, e.clientY);
-      },
-      [handleDragMove]
-    );
-    const handleMouseUp = React3.useCallback(() => {
-      handleDragEnd();
-    }, [handleDragEnd]);
-    const handleTouchStart = React3.useCallback(
-      (e) => {
-        if (e.touches.length === 1) {
-          const touch = e.touches[0];
-          handleDragStart(touch.clientX, touch.clientY);
-        }
-      },
-      [handleDragStart]
-    );
-    const handleTouchMove = React3.useCallback(
-      (e) => {
-        if (e.touches.length === 1) {
-          e.preventDefault();
-          const touch = e.touches[0];
-          handleDragMove(touch.clientX, touch.clientY);
-        }
-      },
-      [handleDragMove]
-    );
-    const handleTouchEnd = React3.useCallback(() => {
-      handleDragEnd();
-    }, [handleDragEnd]);
-    React3.useEffect(() => {
-      const handleKeyDown = /* @__PURE__ */ __name((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);
-          }
-        }
-      }, "handleKeyDown");
-      if (containerRef.current) {
-        containerRef.current.addEventListener("keydown", handleKeyDown);
-        return () => {
-          containerRef.current?.removeEventListener("keydown", handleKeyDown);
-        };
-      }
-    }, [goToPrevious, goToNext, goToIndex, totalItems]);
-    React3.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 /* @__PURE__ */ 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: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "relative mx-auto",
-              style: {
-                width: `${itemWidth}px`,
-                height: `${itemHeight}px`,
-                transformStyle: "preserve-3d"
-              },
-              children: /* @__PURE__ */ 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 /* @__PURE__ */ 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: /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-hidden rounded-lg", children: item.content })
-                  },
-                  item.id
-                );
-              }) })
-            }
-          ),
-          showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ 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: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" })
-              }
-            ),
-            /* @__PURE__ */ 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: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: /* @__PURE__ */ jsx("div", { className: "flex space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-lg", children: items.map((_, index) => /* @__PURE__ */ 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 && /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-sm", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "w-2 h-2 rounded-full transition-all",
-                  isHovered || isDragging ? "bg-orange-500" : "bg-green-500 animate-pulse"
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: isHovered || isDragging ? "Paused" : "Auto" })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-Carousel3D.displayName = "Carousel3D";
-var Carousel3DCard = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    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
-  }
-));
-Carousel3DCard.displayName = "Carousel3DCard";
-var Carousel3DCardImage = React3.forwardRef(({ className, alt, ...props }, ref) => /* @__PURE__ */ jsx(
-  "img",
-  {
-    ref,
-    className: cn(
-      "w-full h-48 object-cover transition-transform duration-300",
-      "group-hover:scale-105",
-      className
-    ),
-    alt,
-    ...props
-  }
-));
-Carousel3DCardImage.displayName = "Carousel3DCardImage";
-var Carousel3DCardContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex-1 p-4 flex flex-col justify-between", className),
-    ...props,
-    children
-  }
-));
-Carousel3DCardContent.displayName = "Carousel3DCardContent";
-var Carousel3DCardTitle = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  "h3",
-  {
-    ref,
-    className: cn("font-semibold text-lg mb-2 line-clamp-2", className),
-    ...props,
-    children
-  }
-));
-Carousel3DCardTitle.displayName = "Carousel3DCardTitle";
-var Carousel3DCardDescription = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground line-clamp-3 mb-4", className),
-    ...props,
-    children
-  }
-));
-Carousel3DCardDescription.displayName = "Carousel3DCardDescription";
-var Grid3D = React3.forwardRef(
-  ({
-    items,
-    columns = 4,
-    rows = 3,
-    gap = 16,
-    perspective = 1e3,
-    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 = React3.useRef(null);
-    const [hoveredIndex, setHoveredIndex] = React3.useState(null);
-    const [mousePosition, setMousePosition] = React3.useState({ x: 0, y: 0 });
-    const [isGridHovered, setIsGridHovered] = React3.useState(false);
-    const gridTransform = React3.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]);
-    const handleMouseMove = React3.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 = React3.useCallback(() => {
-      setIsGridHovered(true);
-    }, []);
-    const handleMouseLeave = React3.useCallback(() => {
-      setIsGridHovered(false);
-      setMousePosition({ x: 0, y: 0 });
-      setHoveredIndex(null);
-    }, []);
-    React3.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"
-    };
-    const getGridPosition = /* @__PURE__ */ __name((index) => {
-      const x = index % columns;
-      const y = Math.floor(index / columns);
-      return { x, y };
-    }, "getGridPosition");
-    const getStaggerDelay = /* @__PURE__ */ __name((index) => {
-      if (!staggerAnimation) return 0;
-      const { x, y } = getGridPosition(index);
-      return (x + y) * animationDelay;
-    }, "getStaggerDelay");
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: gridRef,
-        className: cn("w-fit mx-auto", className),
-        style: containerStyle,
-        onMouseMove: handleMouseMove,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        ...props,
-        children: [
-          /* @__PURE__ */ 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}` : void 0,
-              gridRow: item.span ? `span ${item.span.y}` : void 0,
-              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 /* @__PURE__ */ 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: [
-                  /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-hidden rounded-lg", children: item.content }),
-                  (item.elevation || 0) > 0 && /* @__PURE__ */ 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 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none opacity-20", children: /* @__PURE__ */ 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) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "border border-dashed border-muted-foreground/20 rounded-lg"
-                },
-                index
-              ))
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-Grid3D.displayName = "Grid3D";
-var Grid3DCard = React3.forwardRef(
-  ({
-    className,
-    title,
-    description,
-    image,
-    badge,
-    elevation = 0,
-    children,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      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 && /* @__PURE__ */ jsxs("div", { className: "relative h-32 overflow-hidden", children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: image,
-              alt: title || "",
-              className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
-            }
-          ),
-          badge && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 px-2 py-1 text-xs rounded-full bg-primary text-primary-foreground", children: badge })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4 flex flex-col justify-between", children: [
-          title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2 line-clamp-2 group-hover:text-primary transition-colors", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground line-clamp-3 mb-4", children: description }),
-          children && /* @__PURE__ */ jsx("div", { className: "mt-auto", children })
-        ] }),
-        /* @__PURE__ */ 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";
-var Grid3DPreset = {
-  Dashboard: React3.forwardRef(
-    ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
-      Grid3D,
-      {
-        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: React3.forwardRef(
-    ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
-      Grid3D,
-      {
-        ref,
-        columns: 3,
-        rows: 3,
-        cellWidth: 180,
-        cellHeight: 180,
-        gap: 16,
-        isometric: true,
-        perspective: 1e3,
-        staggerAnimation: true,
-        animationDelay: 50,
-        items: [],
-        ...props
-      }
-    )
-  ),
-  Gallery: React3.forwardRef(
-    ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
-      Grid3D,
-      {
-        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: React3.forwardRef(
-    ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
-      Grid3D,
-      {
-        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
-      }
-    )
-  )
-};
-Grid3DPreset.Dashboard.displayName = "Grid3DPreset.Dashboard";
-Grid3DPreset.Isometric.displayName = "Grid3DPreset.Isometric";
-Grid3DPreset.Gallery.displayName = "Grid3DPreset.Gallery";
-Grid3DPreset.Compact.displayName = "Grid3DPreset.Compact";
-var Grid3DAuto = React3.forwardRef(
-  ({
-    items,
-    minCellWidth = 200,
-    maxCellWidth = 300,
-    aspectRatio = 1,
-    ...props
-  }, ref) => {
-    const [dimensions, setDimensions] = React3.useState({ columns: 3, rows: 2 });
-    React3.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 /* @__PURE__ */ jsx(
-      Grid3D,
-      {
-        ref,
-        items,
-        columns: dimensions.columns,
-        rows: dimensions.rows,
-        cellWidth,
-        cellHeight,
-        ...props
-      }
-    );
-  }
-);
-Grid3DAuto.displayName = "Grid3DAuto";
-var 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"
-    }
-  }
-);
-var Marquee3D = React3.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] = React3.useState(0);
-    const [contentWidth, setContentWidth] = React3.useState(0);
-    const containerRef = React3.useRef(null);
-    const contentRef = React3.useRef(null);
-    React3.useEffect(() => {
-      const measureDimensions = /* @__PURE__ */ __name(() => {
-        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");
-      measureDimensions();
-      window.addEventListener("resize", measureDimensions);
-      return () => window.removeEventListener("resize", measureDimensions);
-    }, [direction, children]);
-    const duration = React3.useMemo(() => {
-      if (contentWidth === 0) return 20;
-      return contentWidth / speed;
-    }, [contentWidth, speed]);
-    const actualRepeat = React3.useMemo(() => {
-      if (autoFill && containerWidth > 0 && contentWidth > 0) {
-        return Math.ceil(containerWidth / contentWidth) + 2;
-      }
-      return repeat;
-    }, [autoFill, containerWidth, contentWidth, repeat]);
-    const getAnimationProps = /* @__PURE__ */ __name(() => {
-      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
-        }
-      };
-    }, "getAnimationProps");
-    const transform3D = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
-    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 /* @__PURE__ */ 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: /* @__PURE__ */ 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) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
-              /* @__PURE__ */ 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
-                }
-              ),
-              index < actualRepeat - 1 && gap > 0 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    width: direction === "up" || direction === "down" ? "100%" : `${gap}px`,
-                    height: direction === "up" || direction === "down" ? `${gap}px` : "100%"
-                  }
-                }
-              )
-            ] }, index))
-          }
-        )
-      }
-    );
-  }
-);
-Marquee3D.displayName = "Marquee3D";
-var Marquee3DPreset = {
-  Hero: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-    Marquee3D,
-    {
-      ref,
-      variant: "rainbow",
-      size: "3xl",
-      speed: 30,
-      rotateX: -10,
-      gradient: true,
-      ...props
-    }
-  )),
-  Neon: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-    Marquee3D,
-    {
-      ref,
-      variant: "neon",
-      size: "xl",
-      speed: 40,
-      rotateY: 5,
-      pauseOnHover: true,
-      ...props
-    }
-  )),
-  Metallic: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-    Marquee3D,
-    {
-      ref,
-      variant: "metallic",
-      size: "lg",
-      speed: 35,
-      rotateX: -5,
-      rotateY: 2,
-      gradient: true,
-      gradientColor: "#c4c4c4",
-      ...props
-    }
-  )),
-  Fire: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-    Marquee3D,
-    {
-      ref,
-      variant: "fire",
-      size: "2xl",
-      speed: 60,
-      rotateZ: 1,
-      gradient: true,
-      gradientColor: "#ff6600",
-      ...props
-    }
-  )),
-  Glass: React3.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-    Marquee3D,
-    {
-      ref,
-      variant: "glass",
-      size: "lg",
-      speed: 25,
-      rotateX: -8,
-      pauseOnHover: true,
-      gradient: true,
-      gradientColor: "rgba(255,255,255,0.9)",
-      ...props
-    }
-  ))
-};
-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";
-var Marquee3DFloating = React3.forwardRef(({ children, floatIntensity = 10, floatSpeed = 3, ...props }, ref) => {
-  const text = typeof children === "string" ? children : "";
-  return /* @__PURE__ */ jsx(Marquee3D, { ref, ...props, children: text ? /* @__PURE__ */ jsx("div", { className: "flex space-x-1", children: text.split("").map((char, index) => /* @__PURE__ */ 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 === " " ? "\xA0" : char
-    },
-    index
-  )) }) : children });
-});
-Marquee3DFloating.displayName = "Marquee3DFloating";
-var Pin3D = React3.forwardRef(
-  ({ className, title, href, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn("group/pin relative cursor-pointer", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ 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: /* @__PURE__ */ jsx("div", { className: "relative flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white opacity-0 transition duration-500 group-hover/pin:opacity-50" }) }) }),
-          /* @__PURE__ */ jsx("div", { className: "transform-gpu transition duration-500 group-hover/pin:scale-95", children })
-        ]
-      }
-    );
-  }
-);
-Pin3D.displayName = "Pin3D";
-
-export { Button3D, Button3DLoading, Button3DPreset, Card3D, Card3DContent, Card3DDescription, Card3DFooter, Card3DHeader, Card3DTitle, Carousel3D, Carousel3DCard, Carousel3DCardContent, Carousel3DCardDescription, Carousel3DCardImage, Carousel3DCardTitle, Grid3D, Grid3DAuto, Grid3DCard, Grid3DPreset, Marquee3D, Marquee3DFloating, Marquee3DPreset, Pin3D, button3DVariants, marquee3DVariants };
+import*as i from'react';import {cva}from'class-variance-authority';import {cn}from'@hanzo/ui/lib/utils';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {ChevronLeft,ChevronRight}from'lucide-react';import {motion}from'framer-motion';var Be=Object.defineProperty;var F=(t,e)=>Be(t,"name",{value:e,configurable:true});var be=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"}}),W=i.forwardRef(({className:t,variant:e,size:o,depth:r,tiltOnHover:s=false,glowIntensity:h=0,shadowColor:g,pressAnimation:x=true,children:H,onMouseEnter:D,onMouseLeave:p,onMouseMove:S,onMouseDown:I,onMouseUp:T,style:M,...B},y)=>{let P=i.useRef(null),[w,O]=i.useState(false),[z,_]=i.useState(false),[q,N]=i.useState({x:0,y:0}),k=i.useCallback(d=>{if(!s||!P.current)return;let a=P.current.getBoundingClientRect(),c=a.left+a.width/2,X=a.top+a.height/2,Q=(d.clientX-c)/(a.width/2),ee=(d.clientY-X)/(a.height/2);N({x:ee*-10,y:Q*10});},[s]),n=i.useCallback(()=>{N({x:0,y:0});},[]),u=i.useCallback(d=>{O(true),D?.(d);},[D]),E=i.useCallback(d=>{O(false),n(),p?.(d);},[p,n]),$=i.useCallback(d=>{s&&k(d),S?.(d);},[S,s,k]),G=i.useCallback(d=>{x&&_(true),I?.(d);},[I,x]),V=i.useCallback(d=>{_(false),T?.(d);},[T]);i.useImperativeHandle(y,()=>P.current);let Y={...M,transform:s?`perspective(1000px) rotateX(${q.x}deg) rotateY(${q.y}deg) ${z?"translateY(1px)":""}`:z?"translateY(1px)":void 0,filter:h>0?`drop-shadow(0 0 ${h*4}px ${g||"currentColor"})`:void 0,transition:"all 150ms cubic-bezier(0.4, 0, 0.2, 1)"};return jsx("button",{ref:P,className:cn(be({variant:e,size:o,depth:r}),t),style:Y,onMouseEnter:u,onMouseLeave:E,onMouseMove:$,onMouseDown:G,onMouseUp:V,...B,children:jsx("span",{className:"relative z-10 flex items-center justify-center gap-2",children:H})})});W.displayName="Button3D";var te={Hero:i.forwardRef((t,e)=>jsx(W,{ref:e,variant:"gradient",size:"xl",depth:"lg",tiltOnHover:true,glowIntensity:2,...t})),CTA:i.forwardRef((t,e)=>jsx(W,{ref:e,variant:"neon",size:"lg",depth:"default",tiltOnHover:true,glowIntensity:1,...t})),Glass:i.forwardRef((t,e)=>jsx(W,{ref:e,variant:"glass",size:"default",depth:"sm",tiltOnHover:true,...t})),Minimal:i.forwardRef((t,e)=>jsx(W,{ref:e,variant:"ghost",size:"default",depth:"sm",...t})),Danger:i.forwardRef((t,e)=>jsx(W,{ref:e,variant:"destructive",size:"default",depth:"default",shadowColor:"rgb(239 68 68)",...t}))};te.Hero.displayName="Button3DPreset.Hero";te.CTA.displayName="Button3DPreset.CTA";te.Glass.displayName="Button3DPreset.Glass";te.Minimal.displayName="Button3DPreset.Minimal";te.Danger.displayName="Button3DPreset.Danger";var ge=i.forwardRef(({loading:t=false,children:e,disabled:o,...r},s)=>jsxs(W,{ref:s,disabled:o||t,...r,children:[t&&jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent"}),!t&&e]}));ge.displayName="Button3DLoading";var ve=i.forwardRef(({children:t,maxTilt:e=15,perspective:o=1e3,scale:r=1.05,speed:s=400,glare:h=true,glareMaxOpacity:g=.7,className:x,...H},D)=>{let p=i.useRef(null),S=i.useRef(null),[I,T]=i.useState(false),[M,B]=i.useState({rotateX:0,rotateY:0,scale:1,glareX:50,glareY:50,glareOpacity:0}),y=i.useCallback((n,u)=>{if(!n||!u){B({rotateX:0,rotateY:0,scale:1,glareX:50,glareY:50,glareOpacity:0});return}let E=u.left+u.width/2,$=u.top+u.height/2,G=(n.x-E)/(u.width/2),Y=-((n.y-$)/(u.height/2))*e,d=G*e,a=(n.x-u.left)/u.width*100,c=(n.y-u.top)/u.height*100;B({rotateX:Y,rotateY:d,scale:r,glareX:a,glareY:c,glareOpacity:h?g:0});},[e,r,h,g]),P=i.useCallback(n=>{if(!p.current)return;let u=p.current.getBoundingClientRect(),E={x:n.clientX,y:n.clientY};y(E,u);},[y]),w=i.useCallback(n=>{if(!p.current||n.touches.length===0)return;n.preventDefault();let u=p.current.getBoundingClientRect(),E=n.touches[0],$={x:E.clientX,y:E.clientY};y($,u);},[y]),O=i.useCallback(()=>{T(true);},[]),z=i.useCallback(()=>{T(false),y(null,null);},[y]),_=i.useCallback(()=>{T(true);},[]),q=i.useCallback(()=>{T(false),y(null,null);},[y]),N={transform:`perspective(${o}px) rotateX(${M.rotateX}deg) rotateY(${M.rotateY}deg) scale(${M.scale})`,transition:I?"none":`transform ${s}ms cubic-bezier(0.03, 0.98, 0.52, 0.99)`,transformStyle:"preserve-3d"},k={background:`radial-gradient(circle at ${M.glareX}% ${M.glareY}%, rgba(255,255,255,${M.glareOpacity}) 0%, transparent 50%)`,transition:I?"none":`opacity ${s}ms ease-out`};return i.useImperativeHandle(D,()=>p.current),jsxs("div",{ref:p,className:cn("relative rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer","transform-gpu will-change-transform",x),style:N,onMouseMove:P,onMouseEnter:O,onMouseLeave:z,onTouchStart:_,onTouchMove:w,onTouchEnd:q,...H,children:[jsx("div",{className:"relative z-10",children:t}),h&&jsx("div",{ref:S,className:"absolute inset-0 rounded-lg pointer-events-none z-20",style:k})]})});ve.displayName="Card3D";var he=i.forwardRef(({className:t,depth:e=20,style:o,...r},s)=>jsx("div",{ref:s,className:cn("flex flex-col space-y-1.5 p-6",t),style:{transform:`translateZ(${e}px)`,...o},...r}));he.displayName="Card3DHeader";var ye=i.forwardRef(({className:t,depth:e=30,style:o,...r},s)=>jsx("h3",{ref:s,className:cn("text-2xl font-semibold leading-none tracking-tight",t),style:{transform:`translateZ(${e}px)`,...o},...r}));ye.displayName="Card3DTitle";var Re=i.forwardRef(({className:t,depth:e=10,style:o,...r},s)=>jsx("p",{ref:s,className:cn("text-sm text-muted-foreground",t),style:{transform:`translateZ(${e}px)`,...o},...r}));Re.displayName="Card3DDescription";var De=i.forwardRef(({className:t,depth:e=25,style:o,...r},s)=>jsx("div",{ref:s,className:cn("p-6 pt-0",t),style:{transform:`translateZ(${e}px)`,...o},...r}));De.displayName="Card3DContent";var xe=i.forwardRef(({className:t,depth:e=15,style:o,...r},s)=>jsx("div",{ref:s,className:cn("flex items-center p-6 pt-0",t),style:{transform:`translateZ(${e}px)`,...o},...r}));xe.displayName="Card3DFooter";var Me=i.forwardRef(({items:t,itemWidth:e=300,itemHeight:o=400,spacing:r=80,perspective:s=1e3,rotateY:h=40,autoRotate:g=false,autoRotateSpeed:x=3e3,showControls:H=true,infinite:D=true,className:p,...S},I)=>{let T=i.useRef(null),[M,B]=i.useState(0),[y,P]=i.useState(false),[w,O]=i.useState(false),[z,_]=i.useState({x:0,y:0}),[q,N]=i.useState(0),k=i.useRef(void 0),n=t.length,u=(e+r)/2/Math.tan(Math.PI/n);i.useEffect(()=>(g&&!y&&!w?k.current=setInterval(()=>{B(l=>(l+1)%n);},x):k.current&&clearInterval(k.current),()=>{k.current&&clearInterval(k.current);}),[g,y,w,x,n]);let E=i.useCallback(()=>{B(l=>D?(l-1+n)%n:Math.max(0,l-1));},[D,n]),$=i.useCallback(()=>{B(l=>D?(l+1)%n:Math.min(n-1,l+1));},[D,n]),G=i.useCallback(l=>{B(Math.max(0,Math.min(n-1,l)));},[n]),V=i.useCallback((l,f)=>{O(true),_({x:l,y:f}),N(0);},[]),Y=i.useCallback((l,f)=>{if(!w)return;let de=(l-z.x)*.5;N(de);},[w,z.x]),d=i.useCallback(()=>{if(!w)return;Math.abs(q)>50&&(q>0?E():$()),O(false),N(0);},[w,q,E,$]),a=i.useCallback(l=>{l.preventDefault(),V(l.clientX,l.clientY);},[V]),c=i.useCallback(l=>{Y(l.clientX,l.clientY);},[Y]),X=i.useCallback(()=>{d();},[d]),Q=i.useCallback(l=>{if(l.touches.length===1){let f=l.touches[0];V(f.clientX,f.clientY);}},[V]),ee=i.useCallback(l=>{if(l.touches.length===1){l.preventDefault();let f=l.touches[0];Y(f.clientX,f.clientY);}},[Y]),oe=i.useCallback(()=>{d();},[d]);i.useEffect(()=>{let l=F(f=>{if(f.key==="ArrowLeft")f.preventDefault(),E();else if(f.key==="ArrowRight")f.preventDefault(),$();else if(f.key>="1"&&f.key<="9"){let ne=parseInt(f.key)-1;ne<n&&G(ne);}},"handleKeyDown");if(T.current)return T.current.addEventListener("keydown",l),()=>{T.current?.removeEventListener("keydown",l);}},[E,$,G,n]),i.useImperativeHandle(I,()=>T.current);let ce={perspective:`${s}px`,height:`${o+100}px`},Ie={transform:`translateZ(-${u}px) rotateY(${-M*(360/n)+q/5}deg)`,transition:w?"none":"transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)",transformStyle:"preserve-3d"};return jsxs("div",{ref:T,className:cn("relative w-full select-none focus:outline-none",p),style:ce,onMouseEnter:()=>P(true),onMouseLeave:()=>P(false),onMouseDown:a,onMouseMove:c,onMouseUp:X,onTouchStart:Q,onTouchMove:ee,onTouchEnd:oe,tabIndex:0,...S,children:[jsx("div",{className:"relative mx-auto",style:{width:`${e}px`,height:`${o}px`,transformStyle:"preserve-3d"},children:jsx("div",{className:"absolute inset-0",style:Ie,children:t.map((l,f)=>{let ne=f/n*360,pe=f===M,de={transform:`rotateY(${ne}deg) translateZ(${u}px)`,width:`${e}px`,height:`${o}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",pe&&"ring-2 ring-primary ring-offset-2"),style:de,onClick:()=>G(f),children:jsx("div",{className:"w-full h-full overflow-hidden rounded-lg",children:l.content})},l.id)})})}),H&&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:E,disabled:!D&&M===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:$,disabled:!D&&M===n-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:t.map((l,f)=>jsx("button",{className:cn("w-2 h-2 rounded-full transition-all",f===M?"bg-primary scale-125":"bg-muted-foreground/50 hover:bg-muted-foreground/75"),onClick:()=>G(f),"aria-label":`Go to item ${f+1}`},f))})}),g&&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",y||w?"bg-orange-500":"bg-green-500 animate-pulse")}),jsx("span",{className:"text-xs text-muted-foreground",children:y||w?"Paused":"Auto"})]})})]})});Me.displayName="Carousel3D";var we=i.forwardRef(({className:t,children:e,...o},r)=>jsx("div",{ref:r,className:cn("w-full h-full flex flex-col bg-gradient-to-br from-background to-muted/20","border rounded-lg overflow-hidden group",t),...o,children:e}));we.displayName="Carousel3DCard";var Ce=i.forwardRef(({className:t,alt:e,...o},r)=>jsx("img",{ref:r,className:cn("w-full h-48 object-cover transition-transform duration-300","group-hover:scale-105",t),alt:e,...o}));Ce.displayName="Carousel3DCardImage";var He=i.forwardRef(({className:t,children:e,...o},r)=>jsx("div",{ref:r,className:cn("flex-1 p-4 flex flex-col justify-between",t),...o,children:e}));He.displayName="Carousel3DCardContent";var Te=i.forwardRef(({className:t,children:e,...o},r)=>jsx("h3",{ref:r,className:cn("font-semibold text-lg mb-2 line-clamp-2",t),...o,children:e}));Te.displayName="Carousel3DCardTitle";var Ne=i.forwardRef(({className:t,children:e,...o},r)=>jsx("p",{ref:r,className:cn("text-sm text-muted-foreground line-clamp-3 mb-4",t),...o,children:e}));Ne.displayName="Carousel3DCardDescription";var J=i.forwardRef(({items:t,columns:e=4,rows:o=3,gap:r=16,perspective:s=1e3,rotateX:h=25,rotateY:g=15,cellHeight:x=200,cellWidth:H=200,isometric:D=false,tiltOnHover:p=true,staggerAnimation:S=true,animationDelay:I=100,elevationOnHover:T=true,maxElevation:M=50,className:B,...y},P)=>{let w=i.useRef(null),[O,z]=i.useState(null),[_,q]=i.useState({x:0,y:0}),[N,k]=i.useState(false),n=i.useMemo(()=>D?`perspective(${s}px) rotateX(45deg) rotateY(45deg)`:`perspective(${s}px) rotateX(${h}deg) rotateY(${g}deg)`,[D,s,h,g]),u=i.useCallback(a=>{if(!p||!w.current)return;let c=w.current.getBoundingClientRect(),X=c.left+c.width/2,Q=c.top+c.height/2,ee=(a.clientX-X)/(c.width/2),oe=(a.clientY-Q)/(c.height/2);q({x:ee*10,y:oe*10});},[p]),E=i.useCallback(()=>{k(true);},[]),$=i.useCallback(()=>{k(false),q({x:0,y:0}),z(null);},[]);i.useImperativeHandle(P,()=>w.current);let G={perspective:`${s}px`,transformStyle:"preserve-3d"},V={display:"grid",gridTemplateColumns:`repeat(${e}, ${H}px)`,gridTemplateRows:`repeat(${o}, ${x}px)`,gap:`${r}px`,transform:p&&N?`${n} rotateX(${-_.y}deg) rotateY(${_.x}deg)`:n,transition:"transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",transformStyle:"preserve-3d"},Y=F(a=>{let c=a%e,X=Math.floor(a/e);return {x:c,y:X}},"getGridPosition"),d=F(a=>{if(!S)return 0;let{x:c,y:X}=Y(a);return (c+X)*I},"getStaggerDelay");return jsxs("div",{ref:w,className:cn("w-fit mx-auto",B),style:G,onMouseMove:u,onMouseEnter:E,onMouseLeave:$,...y,children:[jsx("div",{style:V,children:t.map((a,c)=>{let X=O===c,{x:Q,y:ee}=Y(c),oe=d(c),ce={gridColumn:a.span?`span ${a.span.x}`:void 0,gridRow:a.span?`span ${a.span.y}`:void 0,transform:`translateZ(${(a.elevation||0)+(X&&T?M:0)}px)`,transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",transformStyle:"preserve-3d",animationDelay:`${oe}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",S&&"animate-in fade-in slide-in-from-bottom-4",X&&"ring-2 ring-primary ring-offset-2"),style:ce,onMouseEnter:()=>z(c),onMouseLeave:()=>z(null),children:[jsx("div",{className:"w-full h-full overflow-hidden rounded-lg",children:a.content}),(a.elevation||0)>0&&jsx("div",{className:"absolute inset-0 -z-10 rounded-lg bg-black/20 blur-sm",style:{transform:`translateY(${(a.elevation||0)/2}px) scale(0.95)`}})]},a.id)})}),D&&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(${e}, ${H}px)`,gridTemplateRows:`repeat(${o}, ${x}px)`,gap:`${r}px`,transform:n,transformStyle:"preserve-3d"},children:Array.from({length:e*o}).map((a,c)=>jsx("div",{className:"border border-dashed border-muted-foreground/20 rounded-lg"},c))})})]})});J.displayName="Grid3D";var Ee=i.forwardRef(({className:t,title:e,description:o,image:r,badge:s,elevation:h=0,children:g,...x},H)=>jsxs("div",{ref:H,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",t),style:{transform:`translateZ(${h}px)`,transformStyle:"preserve-3d"},...x,children:[r&&jsxs("div",{className:"relative h-32 overflow-hidden",children:[jsx("img",{src:r,alt:e||"",className:"w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"}),s&&jsx("div",{className:"absolute top-2 right-2 px-2 py-1 text-xs rounded-full bg-primary text-primary-foreground",children:s})]}),jsxs("div",{className:"flex-1 p-4 flex flex-col justify-between",children:[e&&jsx("h3",{className:"font-semibold text-lg mb-2 line-clamp-2 group-hover:text-primary transition-colors",children:e}),o&&jsx("p",{className:"text-sm text-muted-foreground line-clamp-3 mb-4",children:o}),g&&jsx("div",{className:"mt-auto",children:g})]}),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"}})]}));Ee.displayName="Grid3DCard";var le={Dashboard:i.forwardRef(({children:t,...e},o)=>jsx(J,{ref:o,columns:4,rows:3,cellWidth:250,cellHeight:200,gap:20,perspective:1200,rotateX:20,rotateY:10,tiltOnHover:true,elevationOnHover:true,maxElevation:30,items:[],...e})),Isometric:i.forwardRef(({children:t,...e},o)=>jsx(J,{ref:o,columns:3,rows:3,cellWidth:180,cellHeight:180,gap:16,isometric:true,perspective:1e3,staggerAnimation:true,animationDelay:50,items:[],...e})),Gallery:i.forwardRef(({children:t,...e},o)=>jsx(J,{ref:o,columns:5,rows:2,cellWidth:200,cellHeight:280,gap:24,perspective:1500,rotateX:15,rotateY:5,tiltOnHover:true,elevationOnHover:true,maxElevation:40,items:[],...e})),Compact:i.forwardRef(({children:t,...e},o)=>jsx(J,{ref:o,columns:6,rows:4,cellWidth:120,cellHeight:120,gap:8,perspective:800,rotateX:30,rotateY:20,tiltOnHover:true,staggerAnimation:true,animationDelay:30,items:[],...e}))};le.Dashboard.displayName="Grid3DPreset.Dashboard";le.Isometric.displayName="Grid3DPreset.Isometric";le.Gallery.displayName="Grid3DPreset.Gallery";le.Compact.displayName="Grid3DPreset.Compact";var Le=i.forwardRef(({items:t,minCellWidth:e=200,maxCellWidth:o=300,aspectRatio:r=1,...s},h)=>{let[g,x]=i.useState({columns:3,rows:2});i.useEffect(()=>{let p=t.length,S=Math.ceil(Math.sqrt(p)),I=Math.ceil(p/S);x({columns:S,rows:I});},[t.length]);let H=Math.min(o,Math.max(e,200)),D=H/r;return jsx(J,{ref:h,items:t,columns:g.columns,rows:g.rows,cellWidth:H,cellHeight:D,...s})});Le.displayName="Grid3DAuto";var ke=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"}}),U=i.forwardRef(({className:t,variant:e,size:o,direction:r="left",perspective:s,children:h,speed:g=50,pauseOnHover:x=false,reverse:H=false,repeat:D=5,gap:p=0,rotateX:S=0,rotateY:I=0,rotateZ:T=0,autoFill:M=false,gradient:B=false,gradientColor:y="#ffffff",gradientWidth:P=200,style:w,...O},z)=>{let[_,q]=i.useState(0),[N,k]=i.useState(0),n=i.useRef(null),u=i.useRef(null);i.useEffect(()=>{let d=F(()=>{if(n.current&&u.current){let a=n.current.getBoundingClientRect(),c=u.current.getBoundingClientRect();r==="left"||r==="right"?(q(a.width),k(c.width)):(q(a.height),k(c.height));}},"measureDimensions");return d(),window.addEventListener("resize",d),()=>window.removeEventListener("resize",d)},[r,h]);let E=i.useMemo(()=>N===0?20:N/g,[N,g]),$=i.useMemo(()=>M&&_>0&&N>0?Math.ceil(_/N)+2:D,[M,_,N,D]),G=F(()=>{let a=N+p,c={};return r==="left"?c={x:H?[a,-a]:[-a,a]}:r==="right"?c={x:H?[-a,a]:[a,-a]}:r==="up"?c={y:H?[a,-a]:[-a,a]}:r==="down"&&(c={y:H?[-a,a]:[a,-a]}),{animate:c,transition:{duration:E,ease:"linear",repeat:1/0}}},"getAnimationProps"),V=`perspective(1000px) rotateX(${S}deg) rotateY(${I}deg) rotateZ(${T}deg)`,Y=B?{maskImage:`linear-gradient(to right, transparent, ${y} ${P}px, ${y} calc(100% - ${P}px), transparent)`,WebkitMaskImage:`linear-gradient(to right, transparent, ${y} ${P}px, ${y} calc(100% - ${P}px), transparent)`}:{};return jsx("div",{ref:n,className:cn(ke({variant:e,size:o,direction:r,perspective:s}),"flex items-center",r==="up"||r==="down"?"flex-col":"flex-row",t),style:{...w,transform:V,...Y},...O,children:jsx(motion.div,{ref:u,className:cn("marquee-content flex shrink-0 font-bold",r==="up"||r==="down"?"flex-col":"flex-row",x&&"hover:[animation-play-state:paused]"),style:{gap:`${p}px`},...G(),children:Array.from({length:$}).map((d,a)=>jsxs(i.Fragment,{children:[jsx("div",{className:cn("flex shrink-0 items-center justify-center",r==="up"||r==="down"?"flex-col":"flex-row"),style:{transform:`rotateX(${S}deg) rotateY(${I}deg) rotateZ(${T}deg)`,transformStyle:"preserve-3d"},children:h}),a<$-1&&p>0&&jsx("div",{style:{width:r==="up"||r==="down"?"100%":`${p}px`,height:r==="up"||r==="down"?`${p}px`:"100%"}})]},a))})})});U.displayName="Marquee3D";var ae={Hero:i.forwardRef((t,e)=>jsx(U,{ref:e,variant:"rainbow",size:"3xl",speed:30,rotateX:-10,gradient:true,...t})),Neon:i.forwardRef((t,e)=>jsx(U,{ref:e,variant:"neon",size:"xl",speed:40,rotateY:5,pauseOnHover:true,...t})),Metallic:i.forwardRef((t,e)=>jsx(U,{ref:e,variant:"metallic",size:"lg",speed:35,rotateX:-5,rotateY:2,gradient:true,gradientColor:"#c4c4c4",...t})),Fire:i.forwardRef((t,e)=>jsx(U,{ref:e,variant:"fire",size:"2xl",speed:60,rotateZ:1,gradient:true,gradientColor:"#ff6600",...t})),Glass:i.forwardRef((t,e)=>jsx(U,{ref:e,variant:"glass",size:"lg",speed:25,rotateX:-8,pauseOnHover:true,gradient:true,gradientColor:"rgba(255,255,255,0.9)",...t}))};ae.Hero.displayName="Marquee3DPreset.Hero";ae.Neon.displayName="Marquee3DPreset.Neon";ae.Metallic.displayName="Marquee3DPreset.Metallic";ae.Fire.displayName="Marquee3DPreset.Fire";ae.Glass.displayName="Marquee3DPreset.Glass";var $e=i.forwardRef(({children:t,floatIntensity:e=10,floatSpeed:o=3,...r},s)=>{let h=typeof t=="string"?t:"";return jsx(U,{ref:s,...r,children:h?jsx("div",{className:"flex space-x-1",children:h.split("").map((g,x)=>jsx(motion.span,{className:"inline-block",animate:{y:[0,-e,0],rotateX:[0,5,0],rotateY:[0,2,0]},transition:{duration:o,ease:"easeInOut",repeat:1/0,delay:x*.1},children:g===" "?"\xA0":g},x))}):t})});$e.displayName="Marquee3DFloating";var qe=i.forwardRef(({className:t,title:e,href:o,children:r,...s},h)=>jsxs("div",{ref:h,className:cn("group/pin relative cursor-pointer",t),...s,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:r})]}));qe.displayName="Pin3D";export{W as Button3D,ge as Button3DLoading,te as Button3DPreset,ve as Card3D,De as Card3DContent,Re as Card3DDescription,xe as Card3DFooter,he as Card3DHeader,ye as Card3DTitle,Me as Carousel3D,we as Carousel3DCard,He as Carousel3DCardContent,Ne as Carousel3DCardDescription,Ce as Carousel3DCardImage,Te as Carousel3DCardTitle,J as Grid3D,Le as Grid3DAuto,Ee as Grid3DCard,le as Grid3DPreset,U as Marquee3D,$e as Marquee3DFloating,ae as Marquee3DPreset,qe as Pin3D,be as button3DVariants,ke as marquee3DVariants};