@hanzo/ui 5.3.34 → 5.3.36

package/dist/3d/grid.mjs

@@ -1,337 +1,2 @@
 "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 };
+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};