@luxfi/ui 7.4.15 → 8.1.0

package/dist/3d-grid.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+interface Grid3DItem {
+    id: string;
+    content: React.ReactNode;
+    span?: {
+        x: number;
+        y: number;
+    };
+    elevation?: number;
+}
+interface Grid3DProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: Grid3DItem[];
+    columns?: number;
+    rows?: number;
+    gap?: number;
+    perspective?: number;
+    rotateX?: number;
+    rotateY?: number;
+    cellHeight?: number;
+    cellWidth?: number;
+    isometric?: boolean;
+    tiltOnHover?: boolean;
+    staggerAnimation?: boolean;
+    animationDelay?: number;
+    elevationOnHover?: boolean;
+    maxElevation?: number;
+    className?: string;
+}
+declare const Grid3D: React.ForwardRefExoticComponent<Grid3DProps & React.RefAttributes<HTMLDivElement>>;
+declare const Grid3DCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    description?: string;
+    image?: string;
+    badge?: string;
+    elevation?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Grid3DPreset: {
+    Dashboard: React.ForwardRefExoticComponent<Omit<Grid3DProps, "items"> & React.RefAttributes<HTMLDivElement>>;
+    Isometric: React.ForwardRefExoticComponent<Omit<Grid3DProps, "items"> & React.RefAttributes<HTMLDivElement>>;
+    Gallery: React.ForwardRefExoticComponent<Omit<Grid3DProps, "items"> & React.RefAttributes<HTMLDivElement>>;
+    Compact: React.ForwardRefExoticComponent<Omit<Grid3DProps, "items"> & React.RefAttributes<HTMLDivElement>>;
+};
+declare const Grid3DAuto: React.ForwardRefExoticComponent<Omit<Grid3DProps, "rows" | "columns"> & {
+    minCellWidth?: number;
+    maxCellWidth?: number;
+    aspectRatio?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Grid3D, Grid3DCard, Grid3DPreset, Grid3DAuto, type Grid3DItem, type Grid3DProps, };
+//# sourceMappingURL=3d-grid.d.ts.map

package/dist/3d-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"3d-grid.d.ts","sourceRoot":"","sources":["../src/3d-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChE,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,MAAM,oFAwLX,CAAA;AAID,QAAA,MAAM,UAAU;YAGJ,MAAM;kBACA,MAAM;YACZ,MAAM;YACN,MAAM;gBACF,MAAM;wCAwErB,CAAA;AAID,QAAA,MAAM,YAAY;;;;;CAkFjB,CAAA;AASD,QAAA,MAAM,UAAU;mBAGG,MAAM;mBACN,MAAM;kBACP,MAAM;wCAqCvB,CAAA;AAGD,OAAO,EACL,MAAM,EACN,UAAU,EACV,YAAY,EACZ,UAAU,EACV,KAAK,UAAU,EACf,KAAK,WAAW,GACjB,CAAA"}

package/dist/3d-grid.js

@@ -0,0 +1,335 @@
+"use client";
+import * as React from 'react';
+import { Box, cn } from '@hanzo/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 = (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__ */ jsxs(
+      Box,
+      {
+        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 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(
+              Box,
+              {
+                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(Box, { className: "w-full h-full overflow-hidden rounded-lg", children: item.content }),
+                  (item.elevation || 0) > 0 && /* @__PURE__ */ jsx(
+                    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__ */ jsx(Box, { className: "absolute inset-0 pointer-events-none opacity-20", children: /* @__PURE__ */ jsx(
+            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__ */ jsx(
+                Box,
+                {
+                  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(
+    Box,
+    {
+      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(Box, { className: "relative h-32 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              tag: "img",
+              src: image,
+              alt: title || "",
+              className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+            }
+          ),
+          badge && /* @__PURE__ */ jsx(Box, { className: "absolute top-2 right-2 px-2 py-1 text-xs rounded-full bg-primary text-primary-foreground", children: badge })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { className: "flex-1 p-4 flex flex-col justify-between", children: [
+          title && /* @__PURE__ */ jsx(Box, { tag: "h3", className: "font-semibold text-lg mb-2 line-clamp-2 group-hover:text-primary transition-colors", children: title }),
+          description && /* @__PURE__ */ jsx(Box, { tag: "p", className: "text-sm text-muted-foreground line-clamp-3 mb-4", children: description }),
+          children && /* @__PURE__ */ jsx(Box, { className: "mt-auto", children })
+        ] }),
+        /* @__PURE__ */ jsx(
+          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.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 };