"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;
