@luxfi/ui 8.0.0 → 8.1.0

package/dist/3d-button.cjs

@@ -0,0 +1,298 @@
+"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 button3DVariants = ui.variants(
+  [
+    "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-[var(--color-link-primary)] to-[var(--color-link-primary)] text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-[var(--color-link-primary)] before:to-[var(--color-link-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/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-[var(--color-link-primary)] via-[var(--color-link-primary)] to-[var(--color-link-primary)] text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-[var(--color-link-primary)] before:via-[var(--color-link-primary)] before:to-[var(--color-link-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",
+          "hover:bg-gradient-to-r hover:from-[var(--color-link-primary)] hover:via-[var(--color-link-primary)] hover:to-[var(--color-link-primary)]"
+        ]
+      },
+      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(
+      ui.Box,
+      {
+        tag: "button",
+        ref: buttonRef,
+        className: ui.cn(button3DVariants({ variant, size, depth }), className),
+        style: buttonStyle,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "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(ui.Box, { 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.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { VariantProps } from '@hanzo/ui';
+declare const button3DVariants: (choice?: (import("@hanzo/ui").Choice<{
+    variant: {
+        default: string[];
+        destructive: string[];
+        outline: string[];
+        secondary: string[];
+        ghost: string[];
+        link: string[];
+        neon: string[];
+        glass: string[];
+        gradient: string[];
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        xl: string;
+        icon: string;
+    };
+    depth: {
+        none: string;
+        sm: string;
+        default: string;
+        lg: string;
+        xl: string;
+    };
+}> & {
+    class?: import("@hanzo/ui").ClassValue;
+    className?: import("@hanzo/ui").ClassValue;
+}) | undefined) => string;
+interface Button3DProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button3DVariants> {
+    asChild?: boolean;
+    tiltOnHover?: boolean;
+    glowIntensity?: number;
+    shadowColor?: string;
+    pressAnimation?: boolean;
+}
+declare const Button3D: React.ForwardRefExoticComponent<Button3DProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button3DPreset: {
+    Hero: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+    CTA: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+    Glass: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+    Minimal: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+    Danger: React.ForwardRefExoticComponent<Omit<Button3DProps, "variant" | "size" | "depth"> & React.RefAttributes<HTMLButtonElement>>;
+};
+declare const Button3DLoading: React.ForwardRefExoticComponent<Button3DProps & {
+    loading?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Button3D, Button3DPreset, Button3DLoading, button3DVariants, type Button3DProps, };
+//# sourceMappingURL=3d-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"3d-button.d.ts","sourceRoot":"","sources":["../src/3d-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,YAAY,EAAY,MAAM,WAAW,CAAA;AAIvD,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiGrB,CAAA;AAED,UAAU,aACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,QAAA,MAAM,QAAQ,yFAiIb,CAAA;AAID,QAAA,MAAM,cAAc;;;;;;CAiEnB,CAAA;AAUD,QAAA,MAAM,eAAe;cAES,OAAO;2CAUnC,CAAA;AAGF,OAAO,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,KAAK,aAAa,GACnB,CAAA"}

package/dist/3d-button.js

@@ -0,0 +1,273 @@
+"use client";
+import * as React from 'react';
+import { variants, Box, cn } from '@hanzo/ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var button3DVariants = variants(
+  [
+    "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-[var(--color-link-primary)] to-[var(--color-link-primary)] text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-[var(--color-link-primary)] before:to-[var(--color-link-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/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-[var(--color-link-primary)] via-[var(--color-link-primary)] to-[var(--color-link-primary)] text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-[var(--color-link-primary)] before:via-[var(--color-link-primary)] before:to-[var(--color-link-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",
+          "hover:bg-gradient-to-r hover:from-[var(--color-link-primary)] hover:via-[var(--color-link-primary)] hover:to-[var(--color-link-primary)]"
+        ]
+      },
+      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(
+      Box,
+      {
+        tag: "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(Box, { tag: "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(Box, { 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 };