@luxfi/ui 8.0.0 → 8.2.0

package/dist/3d-card.cjs

@@ -0,0 +1,236 @@
+"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 Card3D = React__namespace.forwardRef(
+  ({
+    children,
+    maxTilt = 15,
+    perspective = 1e3,
+    scale = 1.05,
+    speed = 400,
+    glare = true,
+    glareMaxOpacity = 0.7,
+    className,
+    ...props
+  }, ref) => {
+    const cardRef = React__namespace.useRef(null);
+    const glareRef = React__namespace.useRef(null);
+    const [isHovered, setIsHovered] = React__namespace.useState(false);
+    const [transforms, setTransforms] = React__namespace.useState({
+      rotateX: 0,
+      rotateY: 0,
+      scale: 1,
+      glareX: 50,
+      glareY: 50,
+      glareOpacity: 0
+    });
+    const updateTransforms = React__namespace.useCallback(
+      (point, rect) => {
+        if (!point || !rect) {
+          setTransforms({
+            rotateX: 0,
+            rotateY: 0,
+            scale: 1,
+            glareX: 50,
+            glareY: 50,
+            glareOpacity: 0
+          });
+          return;
+        }
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const deltaX = (point.x - centerX) / (rect.width / 2);
+        const deltaY = (point.y - centerY) / (rect.height / 2);
+        const rotateX = -deltaY * maxTilt;
+        const rotateY = deltaX * maxTilt;
+        const glareX = (point.x - rect.left) / rect.width * 100;
+        const glareY = (point.y - rect.top) / rect.height * 100;
+        setTransforms({
+          rotateX,
+          rotateY,
+          scale,
+          glareX,
+          glareY,
+          glareOpacity: glare ? glareMaxOpacity : 0
+        });
+      },
+      [maxTilt, scale, glare, glareMaxOpacity]
+    );
+    const handleMouseMove = React__namespace.useCallback(
+      (e) => {
+        if (!cardRef.current) return;
+        const rect = cardRef.current.getBoundingClientRect();
+        const point = { x: e.clientX, y: e.clientY };
+        updateTransforms(point, rect);
+      },
+      [updateTransforms]
+    );
+    const handleTouchMove = React__namespace.useCallback(
+      (e) => {
+        if (!cardRef.current || e.touches.length === 0) return;
+        e.preventDefault();
+        const rect = cardRef.current.getBoundingClientRect();
+        const touch = e.touches[0];
+        const point = { x: touch.clientX, y: touch.clientY };
+        updateTransforms(point, rect);
+      },
+      [updateTransforms]
+    );
+    const handleMouseEnter = React__namespace.useCallback(() => {
+      setIsHovered(true);
+    }, []);
+    const handleMouseLeave = React__namespace.useCallback(() => {
+      setIsHovered(false);
+      updateTransforms(null, null);
+    }, [updateTransforms]);
+    const handleTouchStart = React__namespace.useCallback(() => {
+      setIsHovered(true);
+    }, []);
+    const handleTouchEnd = React__namespace.useCallback(() => {
+      setIsHovered(false);
+      updateTransforms(null, null);
+    }, [updateTransforms]);
+    const cardStyle = {
+      transform: `perspective(${perspective}px) rotateX(${transforms.rotateX}deg) rotateY(${transforms.rotateY}deg) scale(${transforms.scale})`,
+      transition: isHovered ? "none" : `transform ${speed}ms cubic-bezier(0.03, 0.98, 0.52, 0.99)`,
+      transformStyle: "preserve-3d"
+    };
+    const glareStyle = {
+      background: `radial-gradient(circle at ${transforms.glareX}% ${transforms.glareY}%, rgba(255,255,255,${transforms.glareOpacity}) 0%, transparent 50%)`,
+      transition: isHovered ? "none" : `opacity ${speed}ms ease-out`
+    };
+    React__namespace.useImperativeHandle(ref, () => cardRef.current);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Box,
+      {
+        ref: cardRef,
+        className: ui.cn(
+          "relative rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer",
+          "transform-gpu will-change-transform",
+          className
+        ),
+        style: cardStyle,
+        onMouseMove: handleMouseMove,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "relative z-10", children }),
+          glare && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Box,
+            {
+              ref: glareRef,
+              className: "absolute inset-0 rounded-lg pointer-events-none z-20",
+              style: glareStyle
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Card3D.displayName = "Card3D";
+var Card3DHeader = React__namespace.forwardRef(({ className, depth = 20, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
+  {
+    ref,
+    className: ui.cn("flex flex-col space-y-1.5 p-6", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DHeader.displayName = "Card3DHeader";
+var Card3DTitle = React__namespace.forwardRef(({ className, depth = 30, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
+  {
+    tag: "h3",
+    ref,
+    className: ui.cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DTitle.displayName = "Card3DTitle";
+var Card3DDescription = React__namespace.forwardRef(({ className, depth = 10, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
+  {
+    tag: "p",
+    ref,
+    className: ui.cn("text-sm text-muted-foreground", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DDescription.displayName = "Card3DDescription";
+var Card3DContent = React__namespace.forwardRef(({ className, depth = 25, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
+  {
+    ref,
+    className: ui.cn("p-6 pt-0", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DContent.displayName = "Card3DContent";
+var Card3DFooter = React__namespace.forwardRef(({ className, depth = 15, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ui.Box,
+  {
+    ref,
+    className: ui.cn("flex items-center p-6 pt-0", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DFooter.displayName = "Card3DFooter";
+
+exports.Card3D = Card3D;
+exports.Card3DContent = Card3DContent;
+exports.Card3DDescription = Card3DDescription;
+exports.Card3DFooter = Card3DFooter;
+exports.Card3DHeader = Card3DHeader;
+exports.Card3DTitle = Card3DTitle;

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+interface Card3DProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    maxTilt?: number;
+    perspective?: number;
+    scale?: number;
+    speed?: number;
+    glare?: boolean;
+    glareMaxOpacity?: number;
+    className?: string;
+}
+declare const Card3D: React.ForwardRefExoticComponent<Card3DProps & React.RefAttributes<HTMLDivElement>>;
+declare const Card3DHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Card3DTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLParagraphElement>>;
+declare const Card3DDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLParagraphElement>>;
+declare const Card3DContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Card3DFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    depth?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Card3D, Card3DHeader, Card3DTitle, Card3DDescription, Card3DContent, Card3DFooter, };
+//# sourceMappingURL=3d-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"3d-card.d.ts","sourceRoot":"","sources":["../src/3d-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,MAAM,oFAyJX,CAAA;AAID,QAAA,MAAM,YAAY;YAEiC,MAAM;wCAWvD,CAAA;AAGF,QAAA,MAAM,WAAW;YAEsC,MAAM;8CAc3D,CAAA;AAGF,QAAA,MAAM,iBAAiB;YAEkC,MAAM;8CAW7D,CAAA;AAGF,QAAA,MAAM,aAAa;YAEgC,MAAM;wCAWvD,CAAA;AAGF,QAAA,MAAM,YAAY;YAEiC,MAAM;wCAWvD,CAAA;AAGF,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,GACb,CAAA"}

package/dist/3d-card.js

@@ -0,0 +1,209 @@
+"use client";
+import * as React from 'react';
+import { Box, cn } from '@hanzo/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Card3D = React.forwardRef(
+  ({
+    children,
+    maxTilt = 15,
+    perspective = 1e3,
+    scale = 1.05,
+    speed = 400,
+    glare = true,
+    glareMaxOpacity = 0.7,
+    className,
+    ...props
+  }, ref) => {
+    const cardRef = React.useRef(null);
+    const glareRef = React.useRef(null);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [transforms, setTransforms] = React.useState({
+      rotateX: 0,
+      rotateY: 0,
+      scale: 1,
+      glareX: 50,
+      glareY: 50,
+      glareOpacity: 0
+    });
+    const updateTransforms = React.useCallback(
+      (point, rect) => {
+        if (!point || !rect) {
+          setTransforms({
+            rotateX: 0,
+            rotateY: 0,
+            scale: 1,
+            glareX: 50,
+            glareY: 50,
+            glareOpacity: 0
+          });
+          return;
+        }
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const deltaX = (point.x - centerX) / (rect.width / 2);
+        const deltaY = (point.y - centerY) / (rect.height / 2);
+        const rotateX = -deltaY * maxTilt;
+        const rotateY = deltaX * maxTilt;
+        const glareX = (point.x - rect.left) / rect.width * 100;
+        const glareY = (point.y - rect.top) / rect.height * 100;
+        setTransforms({
+          rotateX,
+          rotateY,
+          scale,
+          glareX,
+          glareY,
+          glareOpacity: glare ? glareMaxOpacity : 0
+        });
+      },
+      [maxTilt, scale, glare, glareMaxOpacity]
+    );
+    const handleMouseMove = React.useCallback(
+      (e) => {
+        if (!cardRef.current) return;
+        const rect = cardRef.current.getBoundingClientRect();
+        const point = { x: e.clientX, y: e.clientY };
+        updateTransforms(point, rect);
+      },
+      [updateTransforms]
+    );
+    const handleTouchMove = React.useCallback(
+      (e) => {
+        if (!cardRef.current || e.touches.length === 0) return;
+        e.preventDefault();
+        const rect = cardRef.current.getBoundingClientRect();
+        const touch = e.touches[0];
+        const point = { x: touch.clientX, y: touch.clientY };
+        updateTransforms(point, rect);
+      },
+      [updateTransforms]
+    );
+    const handleMouseEnter = React.useCallback(() => {
+      setIsHovered(true);
+    }, []);
+    const handleMouseLeave = React.useCallback(() => {
+      setIsHovered(false);
+      updateTransforms(null, null);
+    }, [updateTransforms]);
+    const handleTouchStart = React.useCallback(() => {
+      setIsHovered(true);
+    }, []);
+    const handleTouchEnd = React.useCallback(() => {
+      setIsHovered(false);
+      updateTransforms(null, null);
+    }, [updateTransforms]);
+    const cardStyle = {
+      transform: `perspective(${perspective}px) rotateX(${transforms.rotateX}deg) rotateY(${transforms.rotateY}deg) scale(${transforms.scale})`,
+      transition: isHovered ? "none" : `transform ${speed}ms cubic-bezier(0.03, 0.98, 0.52, 0.99)`,
+      transformStyle: "preserve-3d"
+    };
+    const glareStyle = {
+      background: `radial-gradient(circle at ${transforms.glareX}% ${transforms.glareY}%, rgba(255,255,255,${transforms.glareOpacity}) 0%, transparent 50%)`,
+      transition: isHovered ? "none" : `opacity ${speed}ms ease-out`
+    };
+    React.useImperativeHandle(ref, () => cardRef.current);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref: cardRef,
+        className: cn(
+          "relative rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer",
+          "transform-gpu will-change-transform",
+          className
+        ),
+        style: cardStyle,
+        onMouseMove: handleMouseMove,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Box, { className: "relative z-10", children }),
+          glare && /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: glareRef,
+              className: "absolute inset-0 rounded-lg pointer-events-none z-20",
+              style: glareStyle
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Card3D.displayName = "Card3D";
+var Card3DHeader = React.forwardRef(({ className, depth = 20, style, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DHeader.displayName = "Card3DHeader";
+var Card3DTitle = React.forwardRef(({ className, depth = 30, style, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    tag: "h3",
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DTitle.displayName = "Card3DTitle";
+var Card3DDescription = React.forwardRef(({ className, depth = 10, style, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    tag: "p",
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DDescription.displayName = "Card3DDescription";
+var Card3DContent = React.forwardRef(({ className, depth = 25, style, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    ref,
+    className: cn("p-6 pt-0", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DContent.displayName = "Card3DContent";
+var Card3DFooter = React.forwardRef(({ className, depth = 15, style, ...props }, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    style: {
+      transform: `translateZ(${depth}px)`,
+      ...style
+    },
+    ...props
+  }
+));
+Card3DFooter.displayName = "Card3DFooter";
+
+export { Card3D, Card3DContent, Card3DDescription, Card3DFooter, Card3DHeader, Card3DTitle };