@hanzo/ui 5.3.35 → 5.3.38

package/dist/3d/card.js

@@ -1,234 +1,2 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var utils = require('@hanzo/ui/lib/utils');
-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(
-      "div",
-      {
-        ref: cardRef,
-        className: utils.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("div", { className: "relative z-10", children }),
-          glare && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              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(
-  "div",
-  {
-    ref,
-    className: utils.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(
-  "h3",
-  {
-    ref,
-    className: utils.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(
-  "p",
-  {
-    ref,
-    className: utils.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(
-  "div",
-  {
-    ref,
-    className: utils.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(
-  "div",
-  {
-    ref,
-    className: utils.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;
+'use strict';var e=require('react'),utils=require('@hanzo/ui/lib/utils'),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 e__namespace=/*#__PURE__*/_interopNamespace(e);var A=e__namespace.forwardRef(({children:o,maxTilt:a=15,perspective:l=1e3,scale:r=1.05,speed:n=400,glare:R=true,glareMaxOpacity:h=.7,className:M,...T},D)=>{let d=e__namespace.useRef(null),y=e__namespace.useRef(null),[v,p]=e__namespace.useState(false),[u,b]=e__namespace.useState({rotateX:0,rotateY:0,scale:1,glareX:50,glareY:50,glareOpacity:0}),c=e__namespace.useCallback((s,t)=>{if(!s||!t){b({rotateX:0,rotateY:0,scale:1,glareX:50,glareY:50,glareOpacity:0});return}let m=t.left+t.width/2,g=t.top+t.height/2,X=(s.x-m)/(t.width/2),w=-((s.y-g)/(t.height/2))*a,S=X*a,k=(s.x-t.left)/t.width*100,P=(s.y-t.top)/t.height*100;b({rotateX:w,rotateY:S,scale:r,glareX:k,glareY:P,glareOpacity:R?h:0});},[a,r,R,h]),C=e__namespace.useCallback(s=>{if(!d.current)return;let t=d.current.getBoundingClientRect(),m={x:s.clientX,y:s.clientY};c(m,t);},[c]),H=e__namespace.useCallback(s=>{if(!d.current||s.touches.length===0)return;s.preventDefault();let t=d.current.getBoundingClientRect(),m=s.touches[0],g={x:m.clientX,y:m.clientY};c(g,t);},[c]),L=e__namespace.useCallback(()=>{p(true);},[]),E=e__namespace.useCallback(()=>{p(false),c(null,null);},[c]),x=e__namespace.useCallback(()=>{p(true);},[]),N=e__namespace.useCallback(()=>{p(false),c(null,null);},[c]),Y={transform:`perspective(${l}px) rotateX(${u.rotateX}deg) rotateY(${u.rotateY}deg) scale(${u.scale})`,transition:v?"none":`transform ${n}ms cubic-bezier(0.03, 0.98, 0.52, 0.99)`,transformStyle:"preserve-3d"},$={background:`radial-gradient(circle at ${u.glareX}% ${u.glareY}%, rgba(255,255,255,${u.glareOpacity}) 0%, transparent 50%)`,transition:v?"none":`opacity ${n}ms ease-out`};return e__namespace.useImperativeHandle(D,()=>d.current),jsxRuntime.jsxs("div",{ref:d,className:utils.cn("relative rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer","transform-gpu will-change-transform",M),style:Y,onMouseMove:C,onMouseEnter:L,onMouseLeave:E,onTouchStart:x,onTouchMove:H,onTouchEnd:N,...T,children:[jsxRuntime.jsx("div",{className:"relative z-10",children:o}),R&&jsxRuntime.jsx("div",{ref:y,className:"absolute inset-0 rounded-lg pointer-events-none z-20",style:$})]})});A.displayName="Card3D";var O=e__namespace.forwardRef(({className:o,depth:a=20,style:l,...r},n)=>jsxRuntime.jsx("div",{ref:n,className:utils.cn("flex flex-col space-y-1.5 p-6",o),style:{transform:`translateZ(${a}px)`,...l},...r}));O.displayName="Card3DHeader";var Z=e__namespace.forwardRef(({className:o,depth:a=30,style:l,...r},n)=>jsxRuntime.jsx("h3",{ref:n,className:utils.cn("text-2xl font-semibold leading-none tracking-tight",o),style:{transform:`translateZ(${a}px)`,...l},...r}));Z.displayName="Card3DTitle";var z=e__namespace.forwardRef(({className:o,depth:a=10,style:l,...r},n)=>jsxRuntime.jsx("p",{ref:n,className:utils.cn("text-sm text-muted-foreground",o),style:{transform:`translateZ(${a}px)`,...l},...r}));z.displayName="Card3DDescription";var B=e__namespace.forwardRef(({className:o,depth:a=25,style:l,...r},n)=>jsxRuntime.jsx("div",{ref:n,className:utils.cn("p-6 pt-0",o),style:{transform:`translateZ(${a}px)`,...l},...r}));B.displayName="Card3DContent";var F=e__namespace.forwardRef(({className:o,depth:a=15,style:l,...r},n)=>jsxRuntime.jsx("div",{ref:n,className:utils.cn("flex items-center p-6 pt-0",o),style:{transform:`translateZ(${a}px)`,...l},...r}));F.displayName="Card3DFooter";exports.Card3D=A;exports.Card3DContent=B;exports.Card3DDescription=z;exports.Card3DFooter=F;exports.Card3DHeader=O;exports.Card3DTitle=Z;

package/dist/3d/card.mjs

@@ -1,207 +1,2 @@
 "use client";
-import * as React from 'react';
-import { cn } from '@hanzo/ui/lib/utils';
-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(
-      "div",
-      {
-        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("div", { className: "relative z-10", children }),
-          glare && /* @__PURE__ */ jsx(
-            "div",
-            {
-              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(
-  "div",
-  {
-    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(
-  "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(
-  "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(
-  "div",
-  {
-    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(
-  "div",
-  {
-    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 };
+import*as e from'react';import {cn}from'@hanzo/ui/lib/utils';import {jsxs,jsx}from'react/jsx-runtime';var A=e.forwardRef(({children:o,maxTilt:a=15,perspective:l=1e3,scale:r=1.05,speed:n=400,glare:R=true,glareMaxOpacity:h=.7,className:M,...T},D)=>{let d=e.useRef(null),y=e.useRef(null),[v,p]=e.useState(false),[u,b]=e.useState({rotateX:0,rotateY:0,scale:1,glareX:50,glareY:50,glareOpacity:0}),c=e.useCallback((s,t)=>{if(!s||!t){b({rotateX:0,rotateY:0,scale:1,glareX:50,glareY:50,glareOpacity:0});return}let m=t.left+t.width/2,g=t.top+t.height/2,X=(s.x-m)/(t.width/2),w=-((s.y-g)/(t.height/2))*a,S=X*a,k=(s.x-t.left)/t.width*100,P=(s.y-t.top)/t.height*100;b({rotateX:w,rotateY:S,scale:r,glareX:k,glareY:P,glareOpacity:R?h:0});},[a,r,R,h]),C=e.useCallback(s=>{if(!d.current)return;let t=d.current.getBoundingClientRect(),m={x:s.clientX,y:s.clientY};c(m,t);},[c]),H=e.useCallback(s=>{if(!d.current||s.touches.length===0)return;s.preventDefault();let t=d.current.getBoundingClientRect(),m=s.touches[0],g={x:m.clientX,y:m.clientY};c(g,t);},[c]),L=e.useCallback(()=>{p(true);},[]),E=e.useCallback(()=>{p(false),c(null,null);},[c]),x=e.useCallback(()=>{p(true);},[]),N=e.useCallback(()=>{p(false),c(null,null);},[c]),Y={transform:`perspective(${l}px) rotateX(${u.rotateX}deg) rotateY(${u.rotateY}deg) scale(${u.scale})`,transition:v?"none":`transform ${n}ms cubic-bezier(0.03, 0.98, 0.52, 0.99)`,transformStyle:"preserve-3d"},$={background:`radial-gradient(circle at ${u.glareX}% ${u.glareY}%, rgba(255,255,255,${u.glareOpacity}) 0%, transparent 50%)`,transition:v?"none":`opacity ${n}ms ease-out`};return e.useImperativeHandle(D,()=>d.current),jsxs("div",{ref:d,className:cn("relative rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer","transform-gpu will-change-transform",M),style:Y,onMouseMove:C,onMouseEnter:L,onMouseLeave:E,onTouchStart:x,onTouchMove:H,onTouchEnd:N,...T,children:[jsx("div",{className:"relative z-10",children:o}),R&&jsx("div",{ref:y,className:"absolute inset-0 rounded-lg pointer-events-none z-20",style:$})]})});A.displayName="Card3D";var O=e.forwardRef(({className:o,depth:a=20,style:l,...r},n)=>jsx("div",{ref:n,className:cn("flex flex-col space-y-1.5 p-6",o),style:{transform:`translateZ(${a}px)`,...l},...r}));O.displayName="Card3DHeader";var Z=e.forwardRef(({className:o,depth:a=30,style:l,...r},n)=>jsx("h3",{ref:n,className:cn("text-2xl font-semibold leading-none tracking-tight",o),style:{transform:`translateZ(${a}px)`,...l},...r}));Z.displayName="Card3DTitle";var z=e.forwardRef(({className:o,depth:a=10,style:l,...r},n)=>jsx("p",{ref:n,className:cn("text-sm text-muted-foreground",o),style:{transform:`translateZ(${a}px)`,...l},...r}));z.displayName="Card3DDescription";var B=e.forwardRef(({className:o,depth:a=25,style:l,...r},n)=>jsx("div",{ref:n,className:cn("p-6 pt-0",o),style:{transform:`translateZ(${a}px)`,...l},...r}));B.displayName="Card3DContent";var F=e.forwardRef(({className:o,depth:a=15,style:l,...r},n)=>jsx("div",{ref:n,className:cn("flex items-center p-6 pt-0",o),style:{transform:`translateZ(${a}px)`,...l},...r}));F.displayName="Card3DFooter";export{A as Card3D,B as Card3DContent,z as Card3DDescription,F as Card3DFooter,O as Card3DHeader,Z as Card3DTitle};