@luxfi/ui 8.0.0 → 8.2.0

package/dist/3d-carousel.js

@@ -0,0 +1,348 @@
+"use client";
+import * as React from 'react';
+import { Box, cn, css } from '@hanzo/ui';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var Carousel3D = React.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 = React.useRef(null);
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 });
+    const [dragOffset, setDragOffset] = React.useState(0);
+    const autoRotateRef = React.useRef(void 0);
+    const totalItems = items.length;
+    const radius = (itemWidth + spacing) / 2 / Math.tan(Math.PI / totalItems);
+    React.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 = React.useCallback(() => {
+      setCurrentIndex(
+        (prev) => infinite ? (prev - 1 + totalItems) % totalItems : Math.max(0, prev - 1)
+      );
+    }, [infinite, totalItems]);
+    const goToNext = React.useCallback(() => {
+      setCurrentIndex(
+        (prev) => infinite ? (prev + 1) % totalItems : Math.min(totalItems - 1, prev + 1)
+      );
+    }, [infinite, totalItems]);
+    const goToIndex = React.useCallback(
+      (index) => {
+        setCurrentIndex(Math.max(0, Math.min(totalItems - 1, index)));
+      },
+      [totalItems]
+    );
+    const handleDragStart = React.useCallback(
+      (clientX, clientY) => {
+        setIsDragging(true);
+        setDragStart({ x: clientX, y: clientY });
+        setDragOffset(0);
+      },
+      []
+    );
+    const handleDragMove = React.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 = React.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 = React.useCallback(
+      (e) => {
+        e.preventDefault();
+        handleDragStart(e.clientX, e.clientY);
+      },
+      [handleDragStart]
+    );
+    const handleMouseMove = React.useCallback(
+      (e) => {
+        handleDragMove(e.clientX, e.clientY);
+      },
+      [handleDragMove]
+    );
+    const handleMouseUp = React.useCallback(() => {
+      handleDragEnd();
+    }, [handleDragEnd]);
+    const handleTouchStart = React.useCallback(
+      (e) => {
+        if (e.touches.length === 1) {
+          const touch = e.touches[0];
+          handleDragStart(touch.clientX, touch.clientY);
+        }
+      },
+      [handleDragStart]
+    );
+    const handleTouchMove = React.useCallback(
+      (e) => {
+        if (e.touches.length === 1) {
+          e.preventDefault();
+          const touch = e.touches[0];
+          handleDragMove(touch.clientX, touch.clientY);
+        }
+      },
+      [handleDragMove]
+    );
+    const handleTouchEnd = React.useCallback(() => {
+      handleDragEnd();
+    }, [handleDragEnd]);
+    React.useEffect(() => {
+      const handleKeyDown = (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);
+          }
+        }
+      };
+      if (containerRef.current) {
+        containerRef.current.addEventListener("keydown", handleKeyDown);
+        return () => {
+          containerRef.current?.removeEventListener("keydown", handleKeyDown);
+        };
+      }
+    }, [goToPrevious, goToNext, goToIndex, totalItems]);
+    React.useImperativeHandle(ref, () => containerRef.current);
+    const containerStyle = {
+      perspective: `${perspective}px`,
+      height: `${itemHeight + 100}px`
+    };
+    const carouselStyle = {
+      transform: `translateZ(-${radius}px) rotateY(${-currentIndex * (360 / totalItems) + dragOffset / 5}deg)`,
+      transition: isDragging ? "none" : "transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)",
+      transformStyle: "preserve-3d"
+    };
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref: containerRef,
+        className: cn(
+          "relative w-full select-none focus:outline-none",
+          className
+        ),
+        style: containerStyle,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onMouseDown: handleMouseDown,
+        onMouseMove: handleMouseMove,
+        onMouseUp: handleMouseUp,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        tabIndex: 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "relative mx-auto",
+              style: {
+                width: `${itemWidth}px`,
+                height: `${itemHeight}px`,
+                transformStyle: "preserve-3d"
+              },
+              children: /* @__PURE__ */ jsx(Box, { className: "absolute inset-0", style: carouselStyle, children: items.map((item, index) => {
+                const angle = index / totalItems * 360;
+                const isCurrent = index === currentIndex;
+                const itemStyle = {
+                  transform: `rotateY(${angle}deg) translateZ(${radius}px)`,
+                  width: `${itemWidth}px`,
+                  height: `${itemHeight}px`,
+                  position: "absolute",
+                  backfaceVisibility: "hidden",
+                  transformStyle: "preserve-3d"
+                };
+                return /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    className: cn(
+                      "rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer",
+                      "transition-all duration-300 transform-gpu will-change-transform",
+                      isCurrent && "ring-2 ring-primary ring-offset-2"
+                    ),
+                    style: itemStyle,
+                    onClick: () => goToIndex(index),
+                    children: /* @__PURE__ */ jsx(Box, { className: "w-full h-full overflow-hidden rounded-lg", children: item.content })
+                  },
+                  item.id
+                );
+              }) })
+            }
+          ),
+          showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                tag: "button",
+                className: cn(
+                  "absolute left-4 top-1/2 -translate-y-1/2 z-10",
+                  "p-2 rounded-full bg-background/80 backdrop-blur-sm",
+                  "border shadow-lg hover:bg-background transition-all",
+                  "disabled:opacity-50 disabled:cursor-not-allowed"
+                ),
+                onClick: goToPrevious,
+                disabled: !infinite && currentIndex === 0,
+                "aria-label": "Previous item",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { style: css("w-5 h-5") })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                tag: "button",
+                className: cn(
+                  "absolute right-4 top-1/2 -translate-y-1/2 z-10",
+                  "p-2 rounded-full bg-background/80 backdrop-blur-sm",
+                  "border shadow-lg hover:bg-background transition-all",
+                  "disabled:opacity-50 disabled:cursor-not-allowed"
+                ),
+                onClick: goToNext,
+                disabled: !infinite && currentIndex === totalItems - 1,
+                "aria-label": "Next item",
+                children: /* @__PURE__ */ jsx(ChevronRight, { style: css("w-5 h-5") })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Box, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: /* @__PURE__ */ jsx(Box, { className: "flex space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-lg", children: items.map((_, index) => /* @__PURE__ */ jsx(
+            Box,
+            {
+              tag: "button",
+              className: cn(
+                "w-2 h-2 rounded-full transition-all",
+                index === currentIndex ? "bg-primary scale-125" : "bg-muted-foreground/50 hover:bg-muted-foreground/75"
+              ),
+              onClick: () => goToIndex(index),
+              "aria-label": `Go to item ${index + 1}`
+            },
+            index
+          )) }) }),
+          autoRotate && /* @__PURE__ */ jsx(Box, { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-sm", children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: cn(
+                  "w-2 h-2 rounded-full transition-all",
+                  isHovered || isDragging ? "bg-[var(--lux-state-notice)]" : "bg-[var(--lux-state-success)] animate-pulse"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { tag: "span", className: "text-xs text-muted-foreground", children: isHovered || isDragging ? "Paused" : "Auto" })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Carousel3D.displayName = "Carousel3D";
+var Carousel3DCard = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    ref,
+    className: cn(
+      "w-full h-full flex flex-col bg-gradient-to-br from-background to-muted/20",
+      "border rounded-lg overflow-hidden group",
+      className
+    ),
+    ...props,
+    children
+  }
+));
+Carousel3DCard.displayName = "Carousel3DCard";
+var Carousel3DCardImage = React.forwardRef(({ className, alt, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    tag: "img",
+    ref,
+    className: cn(
+      "w-full h-48 object-cover transition-transform duration-300",
+      "group-hover:scale-105",
+      className
+    ),
+    alt,
+    ...props
+  }
+));
+Carousel3DCardImage.displayName = "Carousel3DCardImage";
+var Carousel3DCardContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    ref,
+    className: cn("flex-1 p-4 flex flex-col justify-between", className),
+    ...props,
+    children
+  }
+));
+Carousel3DCardContent.displayName = "Carousel3DCardContent";
+var Carousel3DCardTitle = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    tag: "h3",
+    ref,
+    className: cn("font-semibold text-lg mb-2 line-clamp-2", className),
+    ...props,
+    children
+  }
+));
+Carousel3DCardTitle.displayName = "Carousel3DCardTitle";
+var Carousel3DCardDescription = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    tag: "p",
+    ref,
+    className: cn("text-sm text-muted-foreground line-clamp-3 mb-4", className),
+    ...props,
+    children
+  }
+));
+Carousel3DCardDescription.displayName = "Carousel3DCardDescription";
+
+export { Carousel3D, Carousel3DCard, Carousel3DCardContent, Carousel3DCardDescription, Carousel3DCardImage, Carousel3DCardTitle };

package/dist/3d-grid.cjs

@@ -0,0 +1,360 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var Grid3D = React__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 = React__namespace.useRef(null);
+    const [hoveredIndex, setHoveredIndex] = React__namespace.useState(null);
+    const [mousePosition, setMousePosition] = React__namespace.useState({ x: 0, y: 0 });
+    const [isGridHovered, setIsGridHovered] = React__namespace.useState(false);
+    const gridTransform = React__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 = React__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 = React__namespace.useCallback(() => {
+      setIsGridHovered(true);
+    }, []);
+    const handleMouseLeave = React__namespace.useCallback(() => {
+      setIsGridHovered(false);
+      setMousePosition({ x: 0, y: 0 });
+      setHoveredIndex(null);
+    }, []);
+    React__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 = (index) => {
+      const x = index % columns;
+      const y = Math.floor(index / columns);
+      return { x, y };
+    };
+    const getStaggerDelay = (index) => {
+      if (!staggerAnimation) return 0;
+      const { x, y } = getGridPosition(index);
+      return (x + y) * animationDelay;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Box,
+      {
+        ref: gridRef,
+        className: ui.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 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(
+              ui.Box,
+              {
+                className: ui.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(ui.Box, { className: "w-full h-full overflow-hidden rounded-lg", children: item.content }),
+                  (item.elevation || 0) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Box,
+                    {
+                      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(ui.Box, { className: "absolute inset-0 pointer-events-none opacity-20", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Box,
+            {
+              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(
+                ui.Box,
+                {
+                  className: "border border-dashed border-muted-foreground/20 rounded-lg"
+                },
+                index
+              ))
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Grid3D.displayName = "Grid3D";
+var Grid3DCard = React__namespace.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    image,
+    badge,
+    elevation = 0,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Box,
+    {
+      ref,
+      className: ui.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(ui.Box, { className: "relative h-32 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Box,
+            {
+              tag: "img",
+              src: image,
+              alt: title || "",
+              className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+            }
+          ),
+          badge && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "absolute top-2 right-2 px-2 py-1 text-xs rounded-full bg-primary text-primary-foreground", children: badge })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex-1 p-4 flex flex-col justify-between", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "h3", className: "font-semibold text-lg mb-2 line-clamp-2 group-hover:text-primary transition-colors", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "p", className: "text-sm text-muted-foreground line-clamp-3 mb-4", children: description }),
+          children && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "mt-auto", children })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Box,
+          {
+            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: React__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: React__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: React__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: React__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 = React__namespace.forwardRef(
+  ({
+    items,
+    minCellWidth = 200,
+    maxCellWidth = 300,
+    aspectRatio = 1,
+    ...props
+  }, ref) => {
+    const [dimensions, setDimensions] = React__namespace.useState({ columns: 3, rows: 2 });
+    React__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";
+
+exports.Grid3D = Grid3D;
+exports.Grid3DAuto = Grid3DAuto;
+exports.Grid3DCard = Grid3DCard;
+exports.Grid3DPreset = Grid3DPreset;