@hanzo/ui 5.3.28 → 5.3.29

package/dist/3d/grid.mjs

@@ -0,0 +1,337 @@
+"use client";
+import * as React from 'react';
+import { cn } from '@hanzo/ui/lib/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var Grid3D = React.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.useRef(null);
+    const [hoveredIndex, setHoveredIndex] = React.useState(null);
+    const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 });
+    const [isGridHovered, setIsGridHovered] = React.useState(false);
+    const gridTransform = React.useMemo(() => {
+      if (isometric) {
+        return `perspective(${perspective}px) rotateX(45deg) rotateY(45deg)`;
+      }
+      return `perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+    }, [isometric, perspective, rotateX, rotateY]);
+    const handleMouseMove = React.useCallback(
+      (e) => {
+        if (!tiltOnHover || !gridRef.current) return;
+        const rect = gridRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const mouseX = (e.clientX - centerX) / (rect.width / 2);
+        const mouseY = (e.clientY - centerY) / (rect.height / 2);
+        setMousePosition({ x: mouseX * 10, y: mouseY * 10 });
+      },
+      [tiltOnHover]
+    );
+    const handleMouseEnter = React.useCallback(() => {
+      setIsGridHovered(true);
+    }, []);
+    const handleMouseLeave = React.useCallback(() => {
+      setIsGridHovered(false);
+      setMousePosition({ x: 0, y: 0 });
+      setHoveredIndex(null);
+    }, []);
+    React.useImperativeHandle(ref, () => gridRef.current);
+    const containerStyle = {
+      perspective: `${perspective}px`,
+      transformStyle: "preserve-3d"
+    };
+    const gridStyle = {
+      display: "grid",
+      gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
+      gridTemplateRows: `repeat(${rows}, ${cellHeight}px)`,
+      gap: `${gap}px`,
+      transform: tiltOnHover && isGridHovered ? `${gridTransform} rotateX(${-mousePosition.y}deg) rotateY(${mousePosition.x}deg)` : gridTransform,
+      transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+      transformStyle: "preserve-3d"
+    };
+    const getGridPosition = /* @__PURE__ */ __name((index) => {
+      const x = index % columns;
+      const y = Math.floor(index / columns);
+      return { x, y };
+    }, "getGridPosition");
+    const getStaggerDelay = /* @__PURE__ */ __name((index) => {
+      if (!staggerAnimation) return 0;
+      const { x, y } = getGridPosition(index);
+      return (x + y) * animationDelay;
+    }, "getStaggerDelay");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: gridRef,
+        className: cn("w-fit mx-auto", className),
+        style: containerStyle,
+        onMouseMove: handleMouseMove,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { style: gridStyle, children: items.map((item, index) => {
+            const isHovered = hoveredIndex === index;
+            const { x, y } = getGridPosition(index);
+            const staggerDelay = getStaggerDelay(index);
+            const itemStyle = {
+              gridColumn: item.span ? `span ${item.span.x}` : void 0,
+              gridRow: item.span ? `span ${item.span.y}` : void 0,
+              transform: `translateZ(${(item.elevation || 0) + (isHovered && elevationOnHover ? maxElevation : 0)}px)`,
+              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+              transformStyle: "preserve-3d",
+              animationDelay: `${staggerDelay}ms`
+            };
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "relative rounded-lg border bg-card text-card-foreground shadow-lg",
+                  "transform-gpu will-change-transform cursor-pointer",
+                  "transition-all duration-300 hover:shadow-xl",
+                  staggerAnimation && "animate-in fade-in slide-in-from-bottom-4",
+                  isHovered && "ring-2 ring-primary ring-offset-2"
+                ),
+                style: itemStyle,
+                onMouseEnter: () => setHoveredIndex(index),
+                onMouseLeave: () => setHoveredIndex(null),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-hidden rounded-lg", children: item.content }),
+                  (item.elevation || 0) > 0 && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute inset-0 -z-10 rounded-lg bg-black/20 blur-sm",
+                      style: {
+                        transform: `translateY(${(item.elevation || 0) / 2}px) scale(0.95)`
+                      }
+                    }
+                  )
+                ]
+              },
+              item.id
+            );
+          }) }),
+          isometric && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none opacity-20", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "grid border-dashed border-muted-foreground/30",
+              style: {
+                gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
+                gridTemplateRows: `repeat(${rows}, ${cellHeight}px)`,
+                gap: `${gap}px`,
+                transform: gridTransform,
+                transformStyle: "preserve-3d"
+              },
+              children: Array.from({ length: columns * rows }).map((_, index) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "border border-dashed border-muted-foreground/20 rounded-lg"
+                },
+                index
+              ))
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Grid3D.displayName = "Grid3D";
+var Grid3DCard = React.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    image,
+    badge,
+    elevation = 0,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "group relative w-full h-full flex flex-col bg-gradient-to-br from-background to-muted/20",
+        "border rounded-lg overflow-hidden",
+        className
+      ),
+      style: {
+        transform: `translateZ(${elevation}px)`,
+        transformStyle: "preserve-3d"
+      },
+      ...props,
+      children: [
+        image && /* @__PURE__ */ jsxs("div", { className: "relative h-32 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image,
+              alt: title || "",
+              className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+            }
+          ),
+          badge && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 px-2 py-1 text-xs rounded-full bg-primary text-primary-foreground", children: badge })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4 flex flex-col justify-between", children: [
+          title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2 line-clamp-2 group-hover:text-primary transition-colors", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground line-clamp-3 mb-4", children: description }),
+          children && /* @__PURE__ */ jsx("div", { className: "mt-auto", children })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-muted/50 to-muted",
+            style: {
+              transform: "translateZ(-2px) scale(0.98)",
+              transformStyle: "preserve-3d"
+            }
+          }
+        )
+      ]
+    }
+  )
+);
+Grid3DCard.displayName = "Grid3DCard";
+var Grid3DPreset = {
+  Dashboard: React.forwardRef(
+    ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
+      Grid3D,
+      {
+        ref,
+        columns: 4,
+        rows: 3,
+        cellWidth: 250,
+        cellHeight: 200,
+        gap: 20,
+        perspective: 1200,
+        rotateX: 20,
+        rotateY: 10,
+        tiltOnHover: true,
+        elevationOnHover: true,
+        maxElevation: 30,
+        items: [],
+        ...props
+      }
+    )
+  ),
+  Isometric: React.forwardRef(
+    ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
+      Grid3D,
+      {
+        ref,
+        columns: 3,
+        rows: 3,
+        cellWidth: 180,
+        cellHeight: 180,
+        gap: 16,
+        isometric: true,
+        perspective: 1e3,
+        staggerAnimation: true,
+        animationDelay: 50,
+        items: [],
+        ...props
+      }
+    )
+  ),
+  Gallery: React.forwardRef(
+    ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
+      Grid3D,
+      {
+        ref,
+        columns: 5,
+        rows: 2,
+        cellWidth: 200,
+        cellHeight: 280,
+        gap: 24,
+        perspective: 1500,
+        rotateX: 15,
+        rotateY: 5,
+        tiltOnHover: true,
+        elevationOnHover: true,
+        maxElevation: 40,
+        items: [],
+        ...props
+      }
+    )
+  ),
+  Compact: React.forwardRef(
+    ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
+      Grid3D,
+      {
+        ref,
+        columns: 6,
+        rows: 4,
+        cellWidth: 120,
+        cellHeight: 120,
+        gap: 8,
+        perspective: 800,
+        rotateX: 30,
+        rotateY: 20,
+        tiltOnHover: true,
+        staggerAnimation: true,
+        animationDelay: 30,
+        items: [],
+        ...props
+      }
+    )
+  )
+};
+Grid3DPreset.Dashboard.displayName = "Grid3DPreset.Dashboard";
+Grid3DPreset.Isometric.displayName = "Grid3DPreset.Isometric";
+Grid3DPreset.Gallery.displayName = "Grid3DPreset.Gallery";
+Grid3DPreset.Compact.displayName = "Grid3DPreset.Compact";
+var Grid3DAuto = React.forwardRef(
+  ({
+    items,
+    minCellWidth = 200,
+    maxCellWidth = 300,
+    aspectRatio = 1,
+    ...props
+  }, ref) => {
+    const [dimensions, setDimensions] = React.useState({ columns: 3, rows: 2 });
+    React.useEffect(() => {
+      const itemCount = items.length;
+      const columns = Math.ceil(Math.sqrt(itemCount));
+      const rows = Math.ceil(itemCount / columns);
+      setDimensions({ columns, rows });
+    }, [items.length]);
+    const cellWidth = Math.min(maxCellWidth, Math.max(minCellWidth, 200));
+    const cellHeight = cellWidth / aspectRatio;
+    return /* @__PURE__ */ jsx(
+      Grid3D,
+      {
+        ref,
+        items,
+        columns: dimensions.columns,
+        rows: dimensions.rows,
+        cellWidth,
+        cellHeight,
+        ...props
+      }
+    );
+  }
+);
+Grid3DAuto.displayName = "Grid3DAuto";
+
+export { Grid3D, Grid3DAuto, Grid3DCard, Grid3DPreset };