@hanzo/ui 5.3.19 → 5.3.22

package/dist/3d/grid.mjs

@@ -1 +1,337 @@
-import*as e from'react';import {cn}from'@hanzo/ui/lib/utils';import {jsxs,jsx}from'react/jsx-runtime';var _=Object.defineProperty;var H=(n,t)=>_(n,"name",{value:t,configurable:true});var v=e.forwardRef(({items:n,columns:t=4,rows:s=3,gap:c=16,perspective:i=1e3,rotateX:u=25,rotateY:l=15,cellHeight:p=200,cellWidth:m=200,isometric:g=false,tiltOnHover:f=true,staggerAnimation:b=true,animationDelay:x=100,elevationOnHover:T=true,maxElevation:L=50,className:I,...O},Y)=>{let y=e.useRef(null),[X,R]=e.useState(null),[N,$]=e.useState({x:0,y:0}),[W,S]=e.useState(false),M=e.useMemo(()=>g?`perspective(${i}px) rotateX(45deg) rotateY(45deg)`:`perspective(${i}px) rotateX(${u}deg) rotateY(${l}deg)`,[g,i,u,l]),k=e.useCallback(r=>{if(!f||!y.current)return;let a=y.current.getBoundingClientRect(),d=a.left+a.width/2,P=a.top+a.height/2,C=(r.clientX-d)/(a.width/2),w=(r.clientY-P)/(a.height/2);$({x:C*10,y:w*10});},[f]),A=e.useCallback(()=>{S(true);},[]),z=e.useCallback(()=>{S(false),$({x:0,y:0}),R(null);},[]);e.useImperativeHandle(Y,()=>y.current);let Z={perspective:`${i}px`,transformStyle:"preserve-3d"},j={display:"grid",gridTemplateColumns:`repeat(${t}, ${m}px)`,gridTemplateRows:`repeat(${s}, ${p}px)`,gap:`${c}px`,transform:f&&W?`${M} rotateX(${-N.y}deg) rotateY(${N.x}deg)`:M,transition:"transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",transformStyle:"preserve-3d"},E=H(r=>{let a=r%t,d=Math.floor(r/t);return {x:a,y:d}},"getGridPosition"),q=H(r=>{if(!b)return 0;let{x:a,y:d}=E(r);return (a+d)*x},"getStaggerDelay");return jsxs("div",{ref:y,className:cn("w-fit mx-auto",I),style:Z,onMouseMove:k,onMouseEnter:A,onMouseLeave:z,...O,children:[jsx("div",{style:j,children:n.map((r,a)=>{let d=X===a,{x:P,y:C}=E(a),w=q(a),B={gridColumn:r.span?`span ${r.span.x}`:void 0,gridRow:r.span?`span ${r.span.y}`:void 0,transform:`translateZ(${(r.elevation||0)+(d&&T?L:0)}px)`,transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",transformStyle:"preserve-3d",animationDelay:`${w}ms`};return 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",b&&"animate-in fade-in slide-in-from-bottom-4",d&&"ring-2 ring-primary ring-offset-2"),style:B,onMouseEnter:()=>R(a),onMouseLeave:()=>R(null),children:[jsx("div",{className:"w-full h-full overflow-hidden rounded-lg",children:r.content}),(r.elevation||0)>0&&jsx("div",{className:"absolute inset-0 -z-10 rounded-lg bg-black/20 blur-sm",style:{transform:`translateY(${(r.elevation||0)/2}px) scale(0.95)`}})]},r.id)})}),g&&jsx("div",{className:"absolute inset-0 pointer-events-none opacity-20",children:jsx("div",{className:"grid border-dashed border-muted-foreground/30",style:{gridTemplateColumns:`repeat(${t}, ${m}px)`,gridTemplateRows:`repeat(${s}, ${p}px)`,gap:`${c}px`,transform:M,transformStyle:"preserve-3d"},children:Array.from({length:t*s}).map((r,a)=>jsx("div",{className:"border border-dashed border-muted-foreground/20 rounded-lg"},a))})})]})});v.displayName="Grid3D";var F=e.forwardRef(({className:n,title:t,description:s,image:c,badge:i,elevation:u=0,children:l,...p},m)=>jsxs("div",{ref:m,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",n),style:{transform:`translateZ(${u}px)`,transformStyle:"preserve-3d"},...p,children:[c&&jsxs("div",{className:"relative h-32 overflow-hidden",children:[jsx("img",{src:c,alt:t||"",className:"w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"}),i&&jsx("div",{className:"absolute top-2 right-2 px-2 py-1 text-xs rounded-full bg-primary text-primary-foreground",children:i})]}),jsxs("div",{className:"flex-1 p-4 flex flex-col justify-between",children:[t&&jsx("h3",{className:"font-semibold text-lg mb-2 line-clamp-2 group-hover:text-primary transition-colors",children:t}),s&&jsx("p",{className:"text-sm text-muted-foreground line-clamp-3 mb-4",children:s}),l&&jsx("div",{className:"mt-auto",children:l})]}),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"}})]}));F.displayName="Grid3DCard";var D={Dashboard:e.forwardRef(({children:n,...t},s)=>jsx(v,{ref:s,columns:4,rows:3,cellWidth:250,cellHeight:200,gap:20,perspective:1200,rotateX:20,rotateY:10,tiltOnHover:true,elevationOnHover:true,maxElevation:30,items:[],...t})),Isometric:e.forwardRef(({children:n,...t},s)=>jsx(v,{ref:s,columns:3,rows:3,cellWidth:180,cellHeight:180,gap:16,isometric:true,perspective:1e3,staggerAnimation:true,animationDelay:50,items:[],...t})),Gallery:e.forwardRef(({children:n,...t},s)=>jsx(v,{ref:s,columns:5,rows:2,cellWidth:200,cellHeight:280,gap:24,perspective:1500,rotateX:15,rotateY:5,tiltOnHover:true,elevationOnHover:true,maxElevation:40,items:[],...t})),Compact:e.forwardRef(({children:n,...t},s)=>jsx(v,{ref:s,columns:6,rows:4,cellWidth:120,cellHeight:120,gap:8,perspective:800,rotateX:30,rotateY:20,tiltOnHover:true,staggerAnimation:true,animationDelay:30,items:[],...t}))};D.Dashboard.displayName="Grid3DPreset.Dashboard";D.Isometric.displayName="Grid3DPreset.Isometric";D.Gallery.displayName="Grid3DPreset.Gallery";D.Compact.displayName="Grid3DPreset.Compact";var J=e.forwardRef(({items:n,minCellWidth:t=200,maxCellWidth:s=300,aspectRatio:c=1,...i},u)=>{let[l,p]=e.useState({columns:3,rows:2});e.useEffect(()=>{let f=n.length,b=Math.ceil(Math.sqrt(f)),x=Math.ceil(f/b);p({columns:b,rows:x});},[n.length]);let m=Math.min(s,Math.max(t,200)),g=m/c;return jsx(v,{ref:u,items:n,columns:l.columns,rows:l.rows,cellWidth:m,cellHeight:g,...i})});J.displayName="Grid3DAuto";export{v as Grid3D,J as Grid3DAuto,F as Grid3DCard,D as Grid3DPreset};
+"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 };