@hanzo/ui 5.3.28 → 5.3.29

package/dist/3d/index.js

@@ -0,0 +1,1518 @@
+"use client";
+'use strict';
+
+var React3 = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var utils = require('@hanzo/ui/lib/utils');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var framerMotion = require('framer-motion');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var button3DVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    depth,
+    tiltOnHover = false,
+    glowIntensity = 0,
+    shadowColor,
+    pressAnimation = true,
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    style,
+    ...props
+  }, ref) => {
+    const buttonRef = React3__namespace.useRef(null);
+    const [isHovered, setIsHovered] = React3__namespace.useState(false);
+    const [isPressed, setIsPressed] = React3__namespace.useState(false);
+    const [tiltTransform, setTiltTransform] = React3__namespace.useState({ x: 0, y: 0 });
+    const updateTilt = React3__namespace.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__namespace.useCallback(() => {
+      setTiltTransform({ x: 0, y: 0 });
+    }, []);
+    const handleMouseEnter = React3__namespace.useCallback(
+      (e) => {
+        setIsHovered(true);
+        onMouseEnter?.(e);
+      },
+      [onMouseEnter]
+    );
+    const handleMouseLeave = React3__namespace.useCallback(
+      (e) => {
+        setIsHovered(false);
+        resetTilt();
+        onMouseLeave?.(e);
+      },
+      [onMouseLeave, resetTilt]
+    );
+    const handleMouseMove = React3__namespace.useCallback(
+      (e) => {
+        if (tiltOnHover) {
+          updateTilt(e);
+        }
+        onMouseMove?.(e);
+      },
+      [onMouseMove, tiltOnHover, updateTilt]
+    );
+    const handleMouseDown = React3__namespace.useCallback(
+      (e) => {
+        if (pressAnimation) {
+          setIsPressed(true);
+        }
+        onMouseDown?.(e);
+      },
+      [onMouseDown, pressAnimation]
+    );
+    const handleMouseUp = React3__namespace.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onMouseUp?.(e);
+      },
+      [onMouseUp]
+    );
+    React3__namespace.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__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: buttonRef,
+        className: utils.cn(button3DVariants({ variant, size, depth }), className),
+        style: buttonStyle,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 flex items-center justify-center gap-2", children })
+      }
+    );
+  }
+);
+Button3D.displayName = "Button3D";
+var Button3DPreset = {
+  Hero: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "gradient",
+      size: "xl",
+      depth: "lg",
+      tiltOnHover: true,
+      glowIntensity: 2,
+      ...props
+    }
+  )),
+  CTA: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "neon",
+      size: "lg",
+      depth: "default",
+      tiltOnHover: true,
+      glowIntensity: 1,
+      ...props
+    }
+  )),
+  Glass: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "glass",
+      size: "default",
+      depth: "sm",
+      tiltOnHover: true,
+      ...props
+    }
+  )),
+  Minimal: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Button3D, { ref, variant: "ghost", size: "default", depth: "sm", ...props })),
+  Danger: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(({ loading = false, children, disabled, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Button3D, { ref, disabled: disabled || loading, ...props, children: [
+    loading && /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
+  ({
+    children,
+    maxTilt = 15,
+    perspective = 1e3,
+    scale = 1.05,
+    speed = 400,
+    glare = true,
+    glareMaxOpacity = 0.7,
+    className,
+    ...props
+  }, ref) => {
+    const cardRef = React3__namespace.useRef(null);
+    const glareRef = React3__namespace.useRef(null);
+    const [isHovered, setIsHovered] = React3__namespace.useState(false);
+    const [transforms, setTransforms] = React3__namespace.useState({
+      rotateX: 0,
+      rotateY: 0,
+      scale: 1,
+      glareX: 50,
+      glareY: 50,
+      glareOpacity: 0
+    });
+    const updateTransforms = React3__namespace.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__namespace.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__namespace.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__namespace.useCallback(() => {
+      setIsHovered(true);
+    }, []);
+    const handleMouseLeave = React3__namespace.useCallback(() => {
+      setIsHovered(false);
+      updateTransforms(null, null);
+    }, [updateTransforms]);
+    const handleTouchStart = React3__namespace.useCallback(() => {
+      setIsHovered(true);
+    }, []);
+    const handleTouchEnd = React3__namespace.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__namespace.useImperativeHandle(ref, () => cardRef.current);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: cardRef,
+        className: utils.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__ */ jsxRuntime.jsx("div", { className: "relative z-10", children }),
+          glare && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: glareRef,
+              className: "absolute inset-0 rounded-lg pointer-events-none z-20",
+              style: glareStyle
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Card3D.displayName = "Card3D";
+var Card3DHeader = React3__namespace.forwardRef(({ className, depth = 20, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: utils.cn("flex flex-col space-y-1.5 p-6", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DHeader.displayName = "Card3DHeader";
+var Card3DTitle = React3__namespace.forwardRef(({ className, depth = 30, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "h3",
+  {
+    ref,
+    className: utils.cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DTitle.displayName = "Card3DTitle";
+var Card3DDescription = React3__namespace.forwardRef(({ className, depth = 10, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    ref,
+    className: utils.cn("text-sm text-muted-foreground", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DDescription.displayName = "Card3DDescription";
+var Card3DContent = React3__namespace.forwardRef(({ className, depth = 25, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: utils.cn("p-6 pt-0", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DContent.displayName = "Card3DContent";
+var Card3DFooter = React3__namespace.forwardRef(({ className, depth = 15, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: utils.cn("flex items-center p-6 pt-0", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DFooter.displayName = "Card3DFooter";
+var Carousel3D = React3__namespace.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__namespace.useRef(null);
+    const [currentIndex, setCurrentIndex] = React3__namespace.useState(0);
+    const [isHovered, setIsHovered] = React3__namespace.useState(false);
+    const [isDragging, setIsDragging] = React3__namespace.useState(false);
+    const [dragStart, setDragStart] = React3__namespace.useState({ x: 0, y: 0 });
+    const [dragOffset, setDragOffset] = React3__namespace.useState(0);
+    const autoRotateRef = React3__namespace.useRef(void 0);
+    const totalItems = items.length;
+    const radius = (itemWidth + spacing) / 2 / Math.tan(Math.PI / totalItems);
+    React3__namespace.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__namespace.useCallback(() => {
+      setCurrentIndex(
+        (prev) => infinite ? (prev - 1 + totalItems) % totalItems : Math.max(0, prev - 1)
+      );
+    }, [infinite, totalItems]);
+    const goToNext = React3__namespace.useCallback(() => {
+      setCurrentIndex(
+        (prev) => infinite ? (prev + 1) % totalItems : Math.min(totalItems - 1, prev + 1)
+      );
+    }, [infinite, totalItems]);
+    const goToIndex = React3__namespace.useCallback(
+      (index) => {
+        setCurrentIndex(Math.max(0, Math.min(totalItems - 1, index)));
+      },
+      [totalItems]
+    );
+    const handleDragStart = React3__namespace.useCallback(
+      (clientX, clientY) => {
+        setIsDragging(true);
+        setDragStart({ x: clientX, y: clientY });
+        setDragOffset(0);
+      },
+      []
+    );
+    const handleDragMove = React3__namespace.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__namespace.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__namespace.useCallback(
+      (e) => {
+        e.preventDefault();
+        handleDragStart(e.clientX, e.clientY);
+      },
+      [handleDragStart]
+    );
+    const handleMouseMove = React3__namespace.useCallback(
+      (e) => {
+        handleDragMove(e.clientX, e.clientY);
+      },
+      [handleDragMove]
+    );
+    const handleMouseUp = React3__namespace.useCallback(() => {
+      handleDragEnd();
+    }, [handleDragEnd]);
+    const handleTouchStart = React3__namespace.useCallback(
+      (e) => {
+        if (e.touches.length === 1) {
+          const touch = e.touches[0];
+          handleDragStart(touch.clientX, touch.clientY);
+        }
+      },
+      [handleDragStart]
+    );
+    const handleTouchMove = React3__namespace.useCallback(
+      (e) => {
+        if (e.touches.length === 1) {
+          e.preventDefault();
+          const touch = e.touches[0];
+          handleDragMove(touch.clientX, touch.clientY);
+        }
+      },
+      [handleDragMove]
+    );
+    const handleTouchEnd = React3__namespace.useCallback(() => {
+      handleDragEnd();
+    }, [handleDragEnd]);
+    React3__namespace.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__namespace.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: utils.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "relative mx-auto",
+              style: {
+                width: `${itemWidth}px`,
+                height: `${itemHeight}px`,
+                transformStyle: "preserve-3d"
+              },
+              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: utils.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__ */ jsxRuntime.jsx("div", { className: "w-full h-full overflow-hidden rounded-lg", children: item.content })
+                  },
+                  item.id
+                );
+              }) })
+            }
+          ),
+          showControls && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: utils.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__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-5 h-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: utils.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: utils.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__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: utils.cn(
+                  "w-2 h-2 rounded-full transition-all",
+                  isHovered || isDragging ? "bg-orange-500" : "bg-green-500 animate-pulse"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: isHovered || isDragging ? "Paused" : "Auto" })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Carousel3D.displayName = "Carousel3D";
+var Carousel3DCard = React3__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: utils.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__namespace.forwardRef(({ className, alt, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "img",
+  {
+    ref,
+    className: utils.cn(
+      "w-full h-48 object-cover transition-transform duration-300",
+      "group-hover:scale-105",
+      className
+    ),
+    alt,
+    ...props
+  }
+));
+Carousel3DCardImage.displayName = "Carousel3DCardImage";
+var Carousel3DCardContent = React3__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: utils.cn("flex-1 p-4 flex flex-col justify-between", className),
+    ...props,
+    children
+  }
+));
+Carousel3DCardContent.displayName = "Carousel3DCardContent";
+var Carousel3DCardTitle = React3__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "h3",
+  {
+    ref,
+    className: utils.cn("font-semibold text-lg mb-2 line-clamp-2", className),
+    ...props,
+    children
+  }
+));
+Carousel3DCardTitle.displayName = "Carousel3DCardTitle";
+var Carousel3DCardDescription = React3__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    ref,
+    className: utils.cn("text-sm text-muted-foreground line-clamp-3 mb-4", className),
+    ...props,
+    children
+  }
+));
+Carousel3DCardDescription.displayName = "Carousel3DCardDescription";
+var Grid3D = React3__namespace.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__namespace.useRef(null);
+    const [hoveredIndex, setHoveredIndex] = React3__namespace.useState(null);
+    const [mousePosition, setMousePosition] = React3__namespace.useState({ x: 0, y: 0 });
+    const [isGridHovered, setIsGridHovered] = React3__namespace.useState(false);
+    const gridTransform = React3__namespace.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__namespace.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__namespace.useCallback(() => {
+      setIsGridHovered(true);
+    }, []);
+    const handleMouseLeave = React3__namespace.useCallback(() => {
+      setIsGridHovered(false);
+      setMousePosition({ x: 0, y: 0 });
+      setHoveredIndex(null);
+    }, []);
+    React3__namespace.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: gridRef,
+        className: utils.cn("w-fit mx-auto", className),
+        style: containerStyle,
+        onMouseMove: handleMouseMove,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: utils.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__ */ jsxRuntime.jsx("div", { className: "w-full h-full overflow-hidden rounded-lg", children: item.content }),
+                  (item.elevation || 0) > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none opacity-20", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "border border-dashed border-muted-foreground/20 rounded-lg"
+                },
+                index
+              ))
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Grid3D.displayName = "Grid3D";
+var Grid3DCard = React3__namespace.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    image,
+    badge,
+    elevation = 0,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: utils.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__ */ jsxRuntime.jsxs("div", { className: "relative h-32 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: image,
+              alt: title || "",
+              className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+            }
+          ),
+          badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 px-2 py-1 text-xs rounded-full bg-primary text-primary-foreground", children: badge })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-4 flex flex-col justify-between", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-lg mb-2 line-clamp-2 group-hover:text-primary transition-colors", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground line-clamp-3 mb-4", children: description }),
+          children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
+    ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
+    ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
+    ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
+    ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
+  ({
+    items,
+    minCellWidth = 200,
+    maxCellWidth = 300,
+    aspectRatio = 1,
+    ...props
+  }, ref) => {
+    const [dimensions, setDimensions] = React3__namespace.useState({ columns: 3, rows: 2 });
+    React3__namespace.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__ */ jsxRuntime.jsx(
+      Grid3D,
+      {
+        ref,
+        items,
+        columns: dimensions.columns,
+        rows: dimensions.rows,
+        cellWidth,
+        cellHeight,
+        ...props
+      }
+    );
+  }
+);
+Grid3DAuto.displayName = "Grid3DAuto";
+var marquee3DVariants = classVarianceAuthority.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__namespace.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__namespace.useState(0);
+    const [contentWidth, setContentWidth] = React3__namespace.useState(0);
+    const containerRef = React3__namespace.useRef(null);
+    const contentRef = React3__namespace.useRef(null);
+    React3__namespace.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__namespace.useMemo(() => {
+      if (contentWidth === 0) return 20;
+      return contentWidth / speed;
+    }, [contentWidth, speed]);
+    const actualRepeat = React3__namespace.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: utils.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__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            ref: contentRef,
+            className: utils.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__ */ jsxRuntime.jsxs(React3__namespace.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: utils.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__ */ jsxRuntime.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__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "rainbow",
+      size: "3xl",
+      speed: 30,
+      rotateX: -10,
+      gradient: true,
+      ...props
+    }
+  )),
+  Neon: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "neon",
+      size: "xl",
+      speed: 40,
+      rotateY: 5,
+      pauseOnHover: true,
+      ...props
+    }
+  )),
+  Metallic: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "metallic",
+      size: "lg",
+      speed: 35,
+      rotateX: -5,
+      rotateY: 2,
+      gradient: true,
+      gradientColor: "#c4c4c4",
+      ...props
+    }
+  )),
+  Fire: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "fire",
+      size: "2xl",
+      speed: 60,
+      rotateZ: 1,
+      gradient: true,
+      gradientColor: "#ff6600",
+      ...props
+    }
+  )),
+  Glass: React3__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(({ children, floatIntensity = 10, floatSpeed = 3, ...props }, ref) => {
+  const text = typeof children === "string" ? children : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(Marquee3D, { ref, ...props, children: text ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex space-x-1", children: text.split("").map((char, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.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__namespace.forwardRef(
+  ({ className, title, href, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils.cn("group/pin relative cursor-pointer", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "relative flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-white opacity-0 transition duration-500 group-hover/pin:opacity-50" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "transform-gpu transition duration-500 group-hover/pin:scale-95", children })
+        ]
+      }
+    );
+  }
+);
+Pin3D.displayName = "Pin3D";
+
+exports.Button3D = Button3D;
+exports.Button3DLoading = Button3DLoading;
+exports.Button3DPreset = Button3DPreset;
+exports.Card3D = Card3D;
+exports.Card3DContent = Card3DContent;
+exports.Card3DDescription = Card3DDescription;
+exports.Card3DFooter = Card3DFooter;
+exports.Card3DHeader = Card3DHeader;
+exports.Card3DTitle = Card3DTitle;
+exports.Carousel3D = Carousel3D;
+exports.Carousel3DCard = Carousel3DCard;
+exports.Carousel3DCardContent = Carousel3DCardContent;
+exports.Carousel3DCardDescription = Carousel3DCardDescription;
+exports.Carousel3DCardImage = Carousel3DCardImage;
+exports.Carousel3DCardTitle = Carousel3DCardTitle;
+exports.Grid3D = Grid3D;
+exports.Grid3DAuto = Grid3DAuto;
+exports.Grid3DCard = Grid3DCard;
+exports.Grid3DPreset = Grid3DPreset;
+exports.Marquee3D = Marquee3D;
+exports.Marquee3DFloating = Marquee3DFloating;
+exports.Marquee3DPreset = Marquee3DPreset;
+exports.Pin3D = Pin3D;
+exports.button3DVariants = button3DVariants;
+exports.marquee3DVariants = marquee3DVariants;