@hanzo/ui 5.3.19 → 5.3.22

package/dist/3d/button.js

@@ -1 +1,298 @@
-'use strict';var e=require('react'),classVarianceAuthority=require('class-variance-authority'),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 G=classVarianceAuthority.cva(["relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium","transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none","transform-gpu will-change-transform active:scale-95","before:absolute before:inset-0 before:rounded-md before:transition-all before:duration-150","after:absolute after:inset-0 after:rounded-md after:transition-all after:duration-150"],{variants:{variant:{default:["bg-primary text-primary-foreground shadow-md hover:bg-primary/90","before:bg-gradient-to-t before:from-primary/80 before:to-primary before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0","hover:after:opacity-100"],destructive:["bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90","before:bg-gradient-to-t before:from-destructive/80 before:to-destructive before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0","hover:after:opacity-100"],outline:["border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground","before:bg-gradient-to-t before:from-muted/50 before:to-background before:translate-y-1 before:border before:border-input","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0","hover:after:opacity-100"],secondary:["bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80","before:bg-gradient-to-t before:from-secondary/80 before:to-secondary before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0","hover:after:opacity-100"],ghost:["text-foreground hover:bg-accent hover:text-accent-foreground","before:bg-gradient-to-t before:from-accent/30 before:to-accent/10 before:translate-y-1 before:opacity-0","hover:before:opacity-100 hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0","hover:after:opacity-50"],link:["text-primary underline-offset-4 hover:underline","before:hidden after:hidden"],neon:["bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg","before:bg-gradient-to-t before:from-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0","hover:after:opacity-100","hover:shadow-purple-500/25 hover:shadow-2xl"],glass:["bg-white/10 backdrop-blur-md border border-white/20 text-foreground shadow-lg","before:bg-gradient-to-t before:from-white/5 before:to-white/20 before:translate-y-1 before:backdrop-blur-md before:border before:border-white/20","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0","hover:after:opacity-100"],gradient:["bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg","before:bg-gradient-to-t before:from-blue-600 before:via-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0","hover:after:opacity-100","hover:bg-gradient-to-r hover:from-blue-400 hover:via-purple-400 hover:to-pink-400"]},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",xl:"h-12 rounded-lg px-10 text-base",icon:"h-10 w-10"},depth:{none:"before:translate-y-0",sm:"before:translate-y-0.5 hover:before:translate-y-0 active:before:translate-y-0",default:"before:translate-y-1 hover:before:translate-y-0.5 active:before:translate-y-0",lg:"before:translate-y-1.5 hover:before:translate-y-0.5 active:before:translate-y-0",xl:"before:translate-y-2 hover:before:translate-y-1 active:before:translate-y-0"}},defaultVariants:{variant:"default",size:"default",depth:"default"}}),s=e__namespace.forwardRef(({className:t,variant:r,size:d,depth:b,tiltOnHover:n=false,glowIntensity:u=0,shadowColor:T,pressAnimation:c=true,children:E,onMouseEnter:p,onMouseLeave:h,onMouseMove:g,onMouseDown:m,onMouseUp:v,style:H,...P},L)=>{let l=e__namespace.useRef(null),[q,y]=e__namespace.useState(false),[w,R]=e__namespace.useState(false),[B,x]=e__namespace.useState({x:0,y:0}),M=e__namespace.useCallback(a=>{if(!n||!l.current)return;let i=l.current.getBoundingClientRect(),I=i.left+i.width/2,O=i.top+i.height/2,V=(a.clientX-I)/(i.width/2),$=(a.clientY-O)/(i.height/2);x({x:$*-10,y:V*10});},[n]),D=e__namespace.useCallback(()=>{x({x:0,y:0});},[]),k=e__namespace.useCallback(a=>{y(true),p?.(a);},[p]),C=e__namespace.useCallback(a=>{y(false),D(),h?.(a);},[h,D]),z=e__namespace.useCallback(a=>{n&&M(a),g?.(a);},[g,n,M]),N=e__namespace.useCallback(a=>{c&&R(true),m?.(a);},[m,c]),S=e__namespace.useCallback(a=>{R(false),v?.(a);},[v]);e__namespace.useImperativeHandle(L,()=>l.current);let Y={...H,transform:n?`perspective(1000px) rotateX(${B.x}deg) rotateY(${B.y}deg) ${w?"translateY(1px)":""}`:w?"translateY(1px)":void 0,filter:u>0?`drop-shadow(0 0 ${u*4}px ${T||"currentColor"})`:void 0,transition:"all 150ms cubic-bezier(0.4, 0, 0.2, 1)"};return jsxRuntime.jsx("button",{ref:l,className:utils.cn(G({variant:r,size:d,depth:b}),t),style:Y,onMouseEnter:k,onMouseLeave:C,onMouseMove:z,onMouseDown:N,onMouseUp:S,...P,children:jsxRuntime.jsx("span",{className:"relative z-10 flex items-center justify-center gap-2",children:E})})});s.displayName="Button3D";var f={Hero:e__namespace.forwardRef((t,r)=>jsxRuntime.jsx(s,{ref:r,variant:"gradient",size:"xl",depth:"lg",tiltOnHover:true,glowIntensity:2,...t})),CTA:e__namespace.forwardRef((t,r)=>jsxRuntime.jsx(s,{ref:r,variant:"neon",size:"lg",depth:"default",tiltOnHover:true,glowIntensity:1,...t})),Glass:e__namespace.forwardRef((t,r)=>jsxRuntime.jsx(s,{ref:r,variant:"glass",size:"default",depth:"sm",tiltOnHover:true,...t})),Minimal:e__namespace.forwardRef((t,r)=>jsxRuntime.jsx(s,{ref:r,variant:"ghost",size:"default",depth:"sm",...t})),Danger:e__namespace.forwardRef((t,r)=>jsxRuntime.jsx(s,{ref:r,variant:"destructive",size:"default",depth:"default",shadowColor:"rgb(239 68 68)",...t}))};f.Hero.displayName="Button3DPreset.Hero";f.CTA.displayName="Button3DPreset.CTA";f.Glass.displayName="Button3DPreset.Glass";f.Minimal.displayName="Button3DPreset.Minimal";f.Danger.displayName="Button3DPreset.Danger";var j=e__namespace.forwardRef(({loading:t=false,children:r,disabled:d,...b},n)=>jsxRuntime.jsxs(s,{ref:n,disabled:d||t,...b,children:[t&&jsxRuntime.jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent"}),!t&&r]}));j.displayName="Button3DLoading";exports.Button3D=s;exports.Button3DLoading=j;exports.Button3DPreset=f;exports.button3DVariants=G;
+"use client";
+'use strict';
+
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+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 button3DVariants = classVarianceAuthority.cva(
+  [
+    "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium",
+    "transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
+    "transform-gpu will-change-transform active:scale-95",
+    "before:absolute before:inset-0 before:rounded-md before:transition-all before:duration-150",
+    "after:absolute after:inset-0 after:rounded-md after:transition-all after:duration-150"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
+          "before:bg-gradient-to-t before:from-primary/80 before:to-primary before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        destructive: [
+          "bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90",
+          "before:bg-gradient-to-t before:from-destructive/80 before:to-destructive before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        outline: [
+          "border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "before:bg-gradient-to-t before:from-muted/50 before:to-background before:translate-y-1 before:border before:border-input",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        secondary: [
+          "bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80",
+          "before:bg-gradient-to-t before:from-secondary/80 before:to-secondary before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        ghost: [
+          "text-foreground hover:bg-accent hover:text-accent-foreground",
+          "before:bg-gradient-to-t before:from-accent/30 before:to-accent/10 before:translate-y-1 before:opacity-0",
+          "hover:before:opacity-100 hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
+          "hover:after:opacity-50"
+        ],
+        link: [
+          "text-primary underline-offset-4 hover:underline",
+          "before:hidden after:hidden"
+        ],
+        neon: [
+          "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100",
+          "hover:shadow-purple-500/25 hover:shadow-2xl"
+        ],
+        glass: [
+          "bg-white/10 backdrop-blur-md border border-white/20 text-foreground shadow-lg",
+          "before:bg-gradient-to-t before:from-white/5 before:to-white/20 before:translate-y-1 before:backdrop-blur-md before:border before:border-white/20",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        gradient: [
+          "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-blue-600 before:via-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100",
+          "hover:bg-gradient-to-r hover:from-blue-400 hover:via-purple-400 hover:to-pink-400"
+        ]
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        xl: "h-12 rounded-lg px-10 text-base",
+        icon: "h-10 w-10"
+      },
+      depth: {
+        none: "before:translate-y-0",
+        sm: "before:translate-y-0.5 hover:before:translate-y-0 active:before:translate-y-0",
+        default: "before:translate-y-1 hover:before:translate-y-0.5 active:before:translate-y-0",
+        lg: "before:translate-y-1.5 hover:before:translate-y-0.5 active:before:translate-y-0",
+        xl: "before:translate-y-2 hover:before:translate-y-1 active:before:translate-y-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      depth: "default"
+    }
+  }
+);
+var Button3D = React__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    depth,
+    tiltOnHover = false,
+    glowIntensity = 0,
+    shadowColor,
+    pressAnimation = true,
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    style,
+    ...props
+  }, ref) => {
+    const buttonRef = React__namespace.useRef(null);
+    const [isHovered, setIsHovered] = React__namespace.useState(false);
+    const [isPressed, setIsPressed] = React__namespace.useState(false);
+    const [tiltTransform, setTiltTransform] = React__namespace.useState({ x: 0, y: 0 });
+    const updateTilt = React__namespace.useCallback(
+      (e) => {
+        if (!tiltOnHover || !buttonRef.current) return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const deltaX = (e.clientX - centerX) / (rect.width / 2);
+        const deltaY = (e.clientY - centerY) / (rect.height / 2);
+        setTiltTransform({
+          x: deltaY * -10,
+          // Inverted for more natural feel
+          y: deltaX * 10
+        });
+      },
+      [tiltOnHover]
+    );
+    const resetTilt = React__namespace.useCallback(() => {
+      setTiltTransform({ x: 0, y: 0 });
+    }, []);
+    const handleMouseEnter = React__namespace.useCallback(
+      (e) => {
+        setIsHovered(true);
+        onMouseEnter?.(e);
+      },
+      [onMouseEnter]
+    );
+    const handleMouseLeave = React__namespace.useCallback(
+      (e) => {
+        setIsHovered(false);
+        resetTilt();
+        onMouseLeave?.(e);
+      },
+      [onMouseLeave, resetTilt]
+    );
+    const handleMouseMove = React__namespace.useCallback(
+      (e) => {
+        if (tiltOnHover) {
+          updateTilt(e);
+        }
+        onMouseMove?.(e);
+      },
+      [onMouseMove, tiltOnHover, updateTilt]
+    );
+    const handleMouseDown = React__namespace.useCallback(
+      (e) => {
+        if (pressAnimation) {
+          setIsPressed(true);
+        }
+        onMouseDown?.(e);
+      },
+      [onMouseDown, pressAnimation]
+    );
+    const handleMouseUp = React__namespace.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onMouseUp?.(e);
+      },
+      [onMouseUp]
+    );
+    React__namespace.useImperativeHandle(ref, () => buttonRef.current);
+    const buttonStyle = {
+      ...style,
+      transform: tiltOnHover ? `perspective(1000px) rotateX(${tiltTransform.x}deg) rotateY(${tiltTransform.y}deg) ${isPressed ? "translateY(1px)" : ""}` : isPressed ? "translateY(1px)" : void 0,
+      filter: glowIntensity > 0 ? `drop-shadow(0 0 ${glowIntensity * 4}px ${shadowColor || "currentColor"})` : void 0,
+      transition: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: buttonRef,
+        className: utils.cn(button3DVariants({ variant, size, depth }), className),
+        style: buttonStyle,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 flex items-center justify-center gap-2", children })
+      }
+    );
+  }
+);
+Button3D.displayName = "Button3D";
+var Button3DPreset = {
+  Hero: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "gradient",
+      size: "xl",
+      depth: "lg",
+      tiltOnHover: true,
+      glowIntensity: 2,
+      ...props
+    }
+  )),
+  CTA: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "neon",
+      size: "lg",
+      depth: "default",
+      tiltOnHover: true,
+      glowIntensity: 1,
+      ...props
+    }
+  )),
+  Glass: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "glass",
+      size: "default",
+      depth: "sm",
+      tiltOnHover: true,
+      ...props
+    }
+  )),
+  Minimal: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Button3D, { ref, variant: "ghost", size: "default", depth: "sm", ...props })),
+  Danger: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "destructive",
+      size: "default",
+      depth: "default",
+      shadowColor: "rgb(239 68 68)",
+      ...props
+    }
+  ))
+};
+Button3DPreset.Hero.displayName = "Button3DPreset.Hero";
+Button3DPreset.CTA.displayName = "Button3DPreset.CTA";
+Button3DPreset.Glass.displayName = "Button3DPreset.Glass";
+Button3DPreset.Minimal.displayName = "Button3DPreset.Minimal";
+Button3DPreset.Danger.displayName = "Button3DPreset.Danger";
+var Button3DLoading = React__namespace.forwardRef(({ loading = false, children, disabled, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Button3D, { ref, disabled: disabled || loading, ...props, children: [
+    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent" }),
+    !loading && children
+  ] });
+});
+Button3DLoading.displayName = "Button3DLoading";
+
+exports.Button3D = Button3D;
+exports.Button3DLoading = Button3DLoading;
+exports.Button3DPreset = Button3DPreset;
+exports.button3DVariants = button3DVariants;

package/dist/3d/button.mjs

@@ -1 +1,273 @@
-import*as e from'react';import {cva}from'class-variance-authority';import {cn}from'@hanzo/ui/lib/utils';import {jsx,jsxs}from'react/jsx-runtime';var G=cva(["relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium","transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none","transform-gpu will-change-transform active:scale-95","before:absolute before:inset-0 before:rounded-md before:transition-all before:duration-150","after:absolute after:inset-0 after:rounded-md after:transition-all after:duration-150"],{variants:{variant:{default:["bg-primary text-primary-foreground shadow-md hover:bg-primary/90","before:bg-gradient-to-t before:from-primary/80 before:to-primary before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0","hover:after:opacity-100"],destructive:["bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90","before:bg-gradient-to-t before:from-destructive/80 before:to-destructive before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0","hover:after:opacity-100"],outline:["border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground","before:bg-gradient-to-t before:from-muted/50 before:to-background before:translate-y-1 before:border before:border-input","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0","hover:after:opacity-100"],secondary:["bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80","before:bg-gradient-to-t before:from-secondary/80 before:to-secondary before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0","hover:after:opacity-100"],ghost:["text-foreground hover:bg-accent hover:text-accent-foreground","before:bg-gradient-to-t before:from-accent/30 before:to-accent/10 before:translate-y-1 before:opacity-0","hover:before:opacity-100 hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0","hover:after:opacity-50"],link:["text-primary underline-offset-4 hover:underline","before:hidden after:hidden"],neon:["bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg","before:bg-gradient-to-t before:from-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0","hover:after:opacity-100","hover:shadow-purple-500/25 hover:shadow-2xl"],glass:["bg-white/10 backdrop-blur-md border border-white/20 text-foreground shadow-lg","before:bg-gradient-to-t before:from-white/5 before:to-white/20 before:translate-y-1 before:backdrop-blur-md before:border before:border-white/20","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0","hover:after:opacity-100"],gradient:["bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg","before:bg-gradient-to-t before:from-blue-600 before:via-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg","hover:before:translate-y-0.5 active:before:translate-y-0","after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0","hover:after:opacity-100","hover:bg-gradient-to-r hover:from-blue-400 hover:via-purple-400 hover:to-pink-400"]},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",xl:"h-12 rounded-lg px-10 text-base",icon:"h-10 w-10"},depth:{none:"before:translate-y-0",sm:"before:translate-y-0.5 hover:before:translate-y-0 active:before:translate-y-0",default:"before:translate-y-1 hover:before:translate-y-0.5 active:before:translate-y-0",lg:"before:translate-y-1.5 hover:before:translate-y-0.5 active:before:translate-y-0",xl:"before:translate-y-2 hover:before:translate-y-1 active:before:translate-y-0"}},defaultVariants:{variant:"default",size:"default",depth:"default"}}),s=e.forwardRef(({className:t,variant:r,size:d,depth:b,tiltOnHover:n=false,glowIntensity:u=0,shadowColor:T,pressAnimation:c=true,children:E,onMouseEnter:p,onMouseLeave:h,onMouseMove:g,onMouseDown:m,onMouseUp:v,style:H,...P},L)=>{let l=e.useRef(null),[q,y]=e.useState(false),[w,R]=e.useState(false),[B,x]=e.useState({x:0,y:0}),M=e.useCallback(a=>{if(!n||!l.current)return;let i=l.current.getBoundingClientRect(),I=i.left+i.width/2,O=i.top+i.height/2,V=(a.clientX-I)/(i.width/2),$=(a.clientY-O)/(i.height/2);x({x:$*-10,y:V*10});},[n]),D=e.useCallback(()=>{x({x:0,y:0});},[]),k=e.useCallback(a=>{y(true),p?.(a);},[p]),C=e.useCallback(a=>{y(false),D(),h?.(a);},[h,D]),z=e.useCallback(a=>{n&&M(a),g?.(a);},[g,n,M]),N=e.useCallback(a=>{c&&R(true),m?.(a);},[m,c]),S=e.useCallback(a=>{R(false),v?.(a);},[v]);e.useImperativeHandle(L,()=>l.current);let Y={...H,transform:n?`perspective(1000px) rotateX(${B.x}deg) rotateY(${B.y}deg) ${w?"translateY(1px)":""}`:w?"translateY(1px)":void 0,filter:u>0?`drop-shadow(0 0 ${u*4}px ${T||"currentColor"})`:void 0,transition:"all 150ms cubic-bezier(0.4, 0, 0.2, 1)"};return jsx("button",{ref:l,className:cn(G({variant:r,size:d,depth:b}),t),style:Y,onMouseEnter:k,onMouseLeave:C,onMouseMove:z,onMouseDown:N,onMouseUp:S,...P,children:jsx("span",{className:"relative z-10 flex items-center justify-center gap-2",children:E})})});s.displayName="Button3D";var f={Hero:e.forwardRef((t,r)=>jsx(s,{ref:r,variant:"gradient",size:"xl",depth:"lg",tiltOnHover:true,glowIntensity:2,...t})),CTA:e.forwardRef((t,r)=>jsx(s,{ref:r,variant:"neon",size:"lg",depth:"default",tiltOnHover:true,glowIntensity:1,...t})),Glass:e.forwardRef((t,r)=>jsx(s,{ref:r,variant:"glass",size:"default",depth:"sm",tiltOnHover:true,...t})),Minimal:e.forwardRef((t,r)=>jsx(s,{ref:r,variant:"ghost",size:"default",depth:"sm",...t})),Danger:e.forwardRef((t,r)=>jsx(s,{ref:r,variant:"destructive",size:"default",depth:"default",shadowColor:"rgb(239 68 68)",...t}))};f.Hero.displayName="Button3DPreset.Hero";f.CTA.displayName="Button3DPreset.CTA";f.Glass.displayName="Button3DPreset.Glass";f.Minimal.displayName="Button3DPreset.Minimal";f.Danger.displayName="Button3DPreset.Danger";var j=e.forwardRef(({loading:t=false,children:r,disabled:d,...b},n)=>jsxs(s,{ref:n,disabled:d||t,...b,children:[t&&jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent"}),!t&&r]}));j.displayName="Button3DLoading";export{s as Button3D,j as Button3DLoading,f as Button3DPreset,G as button3DVariants};
+"use client";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '@hanzo/ui/lib/utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var button3DVariants = cva(
+  [
+    "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium",
+    "transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
+    "transform-gpu will-change-transform active:scale-95",
+    "before:absolute before:inset-0 before:rounded-md before:transition-all before:duration-150",
+    "after:absolute after:inset-0 after:rounded-md after:transition-all after:duration-150"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
+          "before:bg-gradient-to-t before:from-primary/80 before:to-primary before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        destructive: [
+          "bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90",
+          "before:bg-gradient-to-t before:from-destructive/80 before:to-destructive before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        outline: [
+          "border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "before:bg-gradient-to-t before:from-muted/50 before:to-background before:translate-y-1 before:border before:border-input",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        secondary: [
+          "bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80",
+          "before:bg-gradient-to-t before:from-secondary/80 before:to-secondary before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        ghost: [
+          "text-foreground hover:bg-accent hover:text-accent-foreground",
+          "before:bg-gradient-to-t before:from-accent/30 before:to-accent/10 before:translate-y-1 before:opacity-0",
+          "hover:before:opacity-100 hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
+          "hover:after:opacity-50"
+        ],
+        link: [
+          "text-primary underline-offset-4 hover:underline",
+          "before:hidden after:hidden"
+        ],
+        neon: [
+          "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100",
+          "hover:shadow-purple-500/25 hover:shadow-2xl"
+        ],
+        glass: [
+          "bg-white/10 backdrop-blur-md border border-white/20 text-foreground shadow-lg",
+          "before:bg-gradient-to-t before:from-white/5 before:to-white/20 before:translate-y-1 before:backdrop-blur-md before:border before:border-white/20",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        gradient: [
+          "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-blue-600 before:via-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100",
+          "hover:bg-gradient-to-r hover:from-blue-400 hover:via-purple-400 hover:to-pink-400"
+        ]
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        xl: "h-12 rounded-lg px-10 text-base",
+        icon: "h-10 w-10"
+      },
+      depth: {
+        none: "before:translate-y-0",
+        sm: "before:translate-y-0.5 hover:before:translate-y-0 active:before:translate-y-0",
+        default: "before:translate-y-1 hover:before:translate-y-0.5 active:before:translate-y-0",
+        lg: "before:translate-y-1.5 hover:before:translate-y-0.5 active:before:translate-y-0",
+        xl: "before:translate-y-2 hover:before:translate-y-1 active:before:translate-y-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      depth: "default"
+    }
+  }
+);
+var Button3D = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    depth,
+    tiltOnHover = false,
+    glowIntensity = 0,
+    shadowColor,
+    pressAnimation = true,
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    style,
+    ...props
+  }, ref) => {
+    const buttonRef = React.useRef(null);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isPressed, setIsPressed] = React.useState(false);
+    const [tiltTransform, setTiltTransform] = React.useState({ x: 0, y: 0 });
+    const updateTilt = React.useCallback(
+      (e) => {
+        if (!tiltOnHover || !buttonRef.current) return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const deltaX = (e.clientX - centerX) / (rect.width / 2);
+        const deltaY = (e.clientY - centerY) / (rect.height / 2);
+        setTiltTransform({
+          x: deltaY * -10,
+          // Inverted for more natural feel
+          y: deltaX * 10
+        });
+      },
+      [tiltOnHover]
+    );
+    const resetTilt = React.useCallback(() => {
+      setTiltTransform({ x: 0, y: 0 });
+    }, []);
+    const handleMouseEnter = React.useCallback(
+      (e) => {
+        setIsHovered(true);
+        onMouseEnter?.(e);
+      },
+      [onMouseEnter]
+    );
+    const handleMouseLeave = React.useCallback(
+      (e) => {
+        setIsHovered(false);
+        resetTilt();
+        onMouseLeave?.(e);
+      },
+      [onMouseLeave, resetTilt]
+    );
+    const handleMouseMove = React.useCallback(
+      (e) => {
+        if (tiltOnHover) {
+          updateTilt(e);
+        }
+        onMouseMove?.(e);
+      },
+      [onMouseMove, tiltOnHover, updateTilt]
+    );
+    const handleMouseDown = React.useCallback(
+      (e) => {
+        if (pressAnimation) {
+          setIsPressed(true);
+        }
+        onMouseDown?.(e);
+      },
+      [onMouseDown, pressAnimation]
+    );
+    const handleMouseUp = React.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onMouseUp?.(e);
+      },
+      [onMouseUp]
+    );
+    React.useImperativeHandle(ref, () => buttonRef.current);
+    const buttonStyle = {
+      ...style,
+      transform: tiltOnHover ? `perspective(1000px) rotateX(${tiltTransform.x}deg) rotateY(${tiltTransform.y}deg) ${isPressed ? "translateY(1px)" : ""}` : isPressed ? "translateY(1px)" : void 0,
+      filter: glowIntensity > 0 ? `drop-shadow(0 0 ${glowIntensity * 4}px ${shadowColor || "currentColor"})` : void 0,
+      transition: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: buttonRef,
+        className: cn(button3DVariants({ variant, size, depth }), className),
+        style: buttonStyle,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "relative z-10 flex items-center justify-center gap-2", children })
+      }
+    );
+  }
+);
+Button3D.displayName = "Button3D";
+var Button3DPreset = {
+  Hero: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+    Button3D,
+    {
+      ref,
+      variant: "gradient",
+      size: "xl",
+      depth: "lg",
+      tiltOnHover: true,
+      glowIntensity: 2,
+      ...props
+    }
+  )),
+  CTA: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+    Button3D,
+    {
+      ref,
+      variant: "neon",
+      size: "lg",
+      depth: "default",
+      tiltOnHover: true,
+      glowIntensity: 1,
+      ...props
+    }
+  )),
+  Glass: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+    Button3D,
+    {
+      ref,
+      variant: "glass",
+      size: "default",
+      depth: "sm",
+      tiltOnHover: true,
+      ...props
+    }
+  )),
+  Minimal: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Button3D, { ref, variant: "ghost", size: "default", depth: "sm", ...props })),
+  Danger: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+    Button3D,
+    {
+      ref,
+      variant: "destructive",
+      size: "default",
+      depth: "default",
+      shadowColor: "rgb(239 68 68)",
+      ...props
+    }
+  ))
+};
+Button3DPreset.Hero.displayName = "Button3DPreset.Hero";
+Button3DPreset.CTA.displayName = "Button3DPreset.CTA";
+Button3DPreset.Glass.displayName = "Button3DPreset.Glass";
+Button3DPreset.Minimal.displayName = "Button3DPreset.Minimal";
+Button3DPreset.Danger.displayName = "Button3DPreset.Danger";
+var Button3DLoading = React.forwardRef(({ loading = false, children, disabled, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(Button3D, { ref, disabled: disabled || loading, ...props, children: [
+    loading && /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent" }),
+    !loading && children
+  ] });
+});
+Button3DLoading.displayName = "Button3DLoading";
+
+export { Button3D, Button3DLoading, Button3DPreset, button3DVariants };