react-tilt-button 0.1.2 → 0.1.3

package/README.md

@@ -135,15 +135,16 @@ So the button:
 
 ### Geometry
 
-| Prop         | Type             | Default | Notes                          |
-| ------------ | ---------------- | ------- | ------------------------------ |
-| `width`      | number \| string | `260`   | No max                         |
-| `height`     | number \| string | `64`    | No max                         |
-| `elevation`  | number           | `14`    | Clamped to `height * 0.3`      |
-| `pressInset` | number           | `5`     | Clamped to `<= elevation`      |
-| `tilt`       | number           | `2`     | Clamped to `<= elevation / 9`  |
-| `radius`     | number           | `14`    | Clamped to `<= faceHeight / 4` |
-| `motion`     | number (ms)      | `160`   | Animation speed                |
+| Prop         | Type             | Default | Notes                                                 |
+| ------------ | ---------------- | ------- | ----------------------------------------------------- |
+| `width`      | number \| string | `260`   | No max                                                |
+| `height`     | number \| string | `64`    | No max                                                |
+| `elevation`  | number           | `14`    | Clamped to `height * 0.3`                             |
+| `pressInset` | number           | `5`     | Clamped to `<= elevation`                             |
+| `tilt`       | number           | `2`     | Clamped to `<= elevation / 9`                         |
+| `pressTilt`  | boolean          | `true`  | When `true`, the button keeps its skew while pressing |
+| `radius`     | number           | `14`    | Clamped to `<= faceHeight / 4`                        |
+| `motion`     | number (ms)      | `160`   | Animation speed                                       |
 
 ---
 

package/dist/react-tilt-button.es.js

@@ -1,62 +1,62 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.soft-btn{--button-raise-level: 14px;--press-inset: 5px;--button-hover-pressure: 2;--transform-speed: .16s;--radius: 14px;--surface-color: #f3f4f6;--side-color: #d1d5db;--text-color: #111827;--border-color: rgba(0, 0, 0, .35);--border-width: 2px;--glare-rgb: 255, 255, 255;--glare-alpha: 0;--glare-width: 0;--edge-aa: 0px;position:relative;border:none;background:transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}.soft-btn__wrapper{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}.soft-btn__wrapper:before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(100% - var(--button-raise-level));background:var(--side-color);border-radius:var(--radius);z-index:1}.soft-btn--active .soft-btn__wrapper:before{border-radius:var(--radius)}.soft-btn__content{position:relative;width:100%;height:calc(100% - var(--button-raise-level));background:var(--surface-color);color:var(--text-color);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;transform:translateY(0);transition:transform var(--transform-speed) ease-out;will-change:transform;backface-visibility:hidden;transform-origin:center;z-index:2;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),0 0 var(--edge-aa) #00000073}.soft-btn__inner{display:inline-flex;align-items:center;justify-content:center;gap:10px;z-index:4;width:100%;height:100%}.soft-btn--middle .soft-btn__content{transform:translateY(calc(1px * var(--button-hover-pressure)))}.soft-btn--left .soft-btn__content{transform:skewY(calc(-1deg * var(--button-hover-pressure)))}.soft-btn--right .soft-btn__content{transform:skewY(calc(1deg * var(--button-hover-pressure)))}.soft-btn--left,.soft-btn--right{--edge-aa: 1px}.soft-btn--active .soft-btn__content{transform:translateY(var(--press-inset));transition:transform calc(var(--transform-speed) * .8) ease-out}.soft-btn--disabled{opacity:.6;pointer-events:none}.soft-btn--disabled .soft-btn__content:after{opacity:0}.soft-btn__content:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(var(--glare-rgb),0) calc(50% - var(--glare-width) * 1%),rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% - var(--glare-width) * .5%),rgba(var(--glare-rgb),var(--glare-alpha)) 50%,rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% + var(--glare-width) * .5%),rgba(var(--glare-rgb),0) calc(50% + var(--glare-width) * 1%));background-size:200% 100%;background-position:50% 50%;opacity:0;transition:opacity .16s ease,background-position var(--transform-speed) ease;z-index:3}.soft-btn--right .soft-btn__content:after{opacity:1;background-position:0% 50%}.soft-btn--middle .soft-btn__content:after{opacity:1;background-position:50% 50%}.soft-btn--left .soft-btn__content:after{opacity:1;background-position:100% 50%}.soft-btn--active .soft-btn__content:after{opacity:1;background:rgba(var(--glare-rgb),var(--glare-alpha));background-position:50% 50%}@supports (-moz-appearance: none){.soft-btn--left,.soft-btn--right{--edge-aa: 1.25px}}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import ve, { useRef as Re, useState as ne } from "react";
-var X = { exports: {} }, I = {};
-var ae;
-function Ce() {
-  if (ae) return I;
-  ae = 1;
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.soft-btn{--button-raise-level: 14px;--press-inset: 5px;--press-compensated: 0px;--button-hover-pressure: 2;--transform-speed: .16s;--radius: 14px;--surface-color: #f3f4f6;--side-color: #d1d5db;--text-color: #111827;--border-color: rgba(0, 0, 0, .35);--border-width: 2px;--glare-rgb: 255, 255, 255;--glare-alpha: 0;--glare-width: 0;--edge-aa: 0px;position:relative;border:none;background:transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}.soft-btn__wrapper{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}.soft-btn__wrapper:before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(100% - var(--button-raise-level));background:var(--side-color);border-radius:var(--radius);z-index:1}.soft-btn--active .soft-btn__wrapper:before{border-radius:var(--radius)}.soft-btn__content{position:relative;width:100%;height:calc(100% - var(--button-raise-level));background:var(--surface-color);color:var(--text-color);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;transform:translateY(0);transition:transform var(--transform-speed) ease-out;will-change:transform;backface-visibility:hidden;transform-origin:center;z-index:2;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),0 0 var(--edge-aa) #00000073}.soft-btn__inner{display:inline-flex;align-items:center;justify-content:center;gap:10px;z-index:4;width:100%;height:100%}.soft-btn--middle .soft-btn__content{transform:translateY(calc(1px * var(--button-hover-pressure)))}.soft-btn--left .soft-btn__content{transform:skewY(calc(-1deg * var(--button-hover-pressure)))}.soft-btn--right .soft-btn__content{transform:skewY(calc(1deg * var(--button-hover-pressure)))}.soft-btn--left,.soft-btn--right{--edge-aa: 1px}.soft-btn--active .soft-btn__content{transform:translateY(var(--press-inset));transition:transform calc(var(--transform-speed) * .8) ease-out}.soft-btn--press-tilt.soft-btn--active.soft-btn--left .soft-btn__content{transform:skewY(calc(-1deg * var(--button-hover-pressure))) translateY(var(--press-compensated))}.soft-btn--press-tilt.soft-btn--active.soft-btn--right .soft-btn__content{transform:skewY(calc(1deg * var(--button-hover-pressure))) translateY(var(--press-compensated))}.soft-btn--disabled{opacity:.6;pointer-events:none}.soft-btn--disabled .soft-btn__content:after{opacity:0}.soft-btn__content:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(var(--glare-rgb),0) calc(50% - var(--glare-width) * 1%),rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% - var(--glare-width) * .5%),rgba(var(--glare-rgb),var(--glare-alpha)) 50%,rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% + var(--glare-width) * .5%),rgba(var(--glare-rgb),0) calc(50% + var(--glare-width) * 1%));background-size:200% 100%;background-position:50% 50%;opacity:0;transition:opacity .16s ease,background-position var(--transform-speed) ease;z-index:3}.soft-btn--right .soft-btn__content:after{opacity:1;background-position:0% 50%}.soft-btn--middle .soft-btn__content:after{opacity:1;background-position:50% 50%}.soft-btn--left .soft-btn__content:after{opacity:1;background-position:100% 50%}.soft-btn--active .soft-btn__content:after{opacity:1;background:rgba(var(--glare-rgb),var(--glare-alpha));background-position:50% 50%}@supports (-moz-appearance: none){.soft-btn--left,.soft-btn--right{--edge-aa: 1.25px}}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import Pe, { useRef as ge, useState as se } from "react";
+var X = { exports: {} }, M = {};
+var le;
+function ye() {
+  if (le) return M;
+  le = 1;
   var c = /* @__PURE__ */ Symbol.for("react.transitional.element"), s = /* @__PURE__ */ Symbol.for("react.fragment");
   function l(d, i, u) {
-    var v = null;
-    if (u !== void 0 && (v = "" + u), i.key !== void 0 && (v = "" + i.key), "key" in i) {
+    var _ = null;
+    if (u !== void 0 && (_ = "" + u), i.key !== void 0 && (_ = "" + i.key), "key" in i) {
       u = {};
-      for (var R in i)
-        R !== "key" && (u[R] = i[R]);
+      for (var E in i)
+        E !== "key" && (u[E] = i[E]);
     } else u = i;
     return i = u.ref, {
       $$typeof: c,
       type: d,
-      key: v,
+      key: _,
       ref: i !== void 0 ? i : null,
       props: u
     };
   }
-  return I.Fragment = s, I.jsx = l, I.jsxs = l, I;
+  return M.Fragment = s, M.jsx = l, M.jsxs = l, M;
 }
 var $ = {};
-var se;
-function xe() {
-  return se || (se = 1, process.env.NODE_ENV !== "production" && (function() {
+var ce;
+function Ae() {
+  return ce || (ce = 1, process.env.NODE_ENV !== "production" && (function() {
     function c(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === L ? null : e.displayName || e.name || null;
+        return e.$$typeof === k ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case k:
+        case R:
           return "Fragment";
-        case Z:
+        case Q:
           return "Profiler";
-        case H:
+        case Z:
           return "StrictMode";
-        case h:
+        case re:
           return "Suspense";
-        case D:
+        case C:
           return "SuspenseList";
-        case S:
+        case L:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case w:
+          case A:
             return "Portal";
-          case O:
+          case ee:
             return e.displayName || "Context";
-          case Q:
-            return (e._context.displayName || "Context") + ".Consumer";
           case K:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case w:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case F:
@@ -91,7 +91,7 @@ function xe() {
       }
     }
     function d(e) {
-      if (e === k) return "<>";
+      if (e === R) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === P)
         return "<...>";
       try {
@@ -102,22 +102,22 @@ function xe() {
       }
     }
     function i() {
-      var e = N.A;
+      var e = g.A;
       return e === null ? null : e.getOwner();
     }
     function u() {
       return Error("react-stack-top-frame");
     }
-    function v(e) {
-      if (ee.call(e, "key")) {
+    function _(e) {
+      if (U.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function R(e, r) {
+    function E(e, r) {
       function t() {
-        U || (U = !0, console.error(
+        x || (x = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
@@ -127,23 +127,23 @@ function xe() {
         configurable: !0
       });
     }
-    function A() {
+    function H() {
       var e = c(this.type);
       return V[e] || (V[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function C(e, r, t, o, g, y) {
+    function T(e, r, t, o, y, N) {
       var n = t.ref;
       return e = {
-        $$typeof: T,
+        $$typeof: D,
         type: e,
         key: r,
         props: t,
         _owner: o
       }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: A
+        get: H
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -158,19 +158,19 @@ function xe() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: g
+        value: y
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: y
+        value: N
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function M(e, r, t, o, g, y) {
+    function v(e, r, t, o, y, N) {
       var n = r.children;
       if (n !== void 0)
         if (o)
-          if (re(n)) {
+          if (oe(n)) {
             for (o = 0; o < n.length; o++)
               W(n[o]);
             Object.freeze && Object.freeze(n);
@@ -179,12 +179,12 @@ function xe() {
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
         else W(n);
-      if (ee.call(r, "key")) {
+      if (U.call(r, "key")) {
         n = c(e);
-        var m = Object.keys(r).filter(function(te) {
+        var b = Object.keys(r).filter(function(te) {
           return te !== "key";
         });
-        o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", J[n + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
+        o = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", q[n + o] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -193,74 +193,74 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           o,
           n,
-          m,
+          b,
           n
-        ), J[n + o] = !0);
+        ), q[n + o] = !0);
       }
-      if (n = null, t !== void 0 && (l(t), n = "" + t), v(r) && (l(r.key), n = "" + r.key), "key" in r) {
+      if (n = null, t !== void 0 && (l(t), n = "" + t), _(r) && (l(r.key), n = "" + r.key), "key" in r) {
         t = {};
-        for (var p in r)
-          p !== "key" && (t[p] = r[p]);
+        for (var j in r)
+          j !== "key" && (t[j] = r[j]);
       } else t = r;
-      return n && R(
+      return n && E(
         t,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), C(
+      ), T(
         e,
         n,
         t,
         i(),
-        g,
-        y
+        y,
+        N
       );
     }
     function W(e) {
       Y(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (e._payload.status === "fulfilled" ? Y(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
     function Y(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === T;
+      return typeof e == "object" && e !== null && e.$$typeof === D;
     }
-    var x = ve, T = /* @__PURE__ */ Symbol.for("react.transitional.element"), w = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), H = /* @__PURE__ */ Symbol.for("react.strict_mode"), Z = /* @__PURE__ */ Symbol.for("react.profiler"), Q = /* @__PURE__ */ Symbol.for("react.consumer"), O = /* @__PURE__ */ Symbol.for("react.context"), K = /* @__PURE__ */ Symbol.for("react.forward_ref"), h = /* @__PURE__ */ Symbol.for("react.suspense"), D = /* @__PURE__ */ Symbol.for("react.suspense_list"), F = /* @__PURE__ */ Symbol.for("react.memo"), P = /* @__PURE__ */ Symbol.for("react.lazy"), S = /* @__PURE__ */ Symbol.for("react.activity"), L = /* @__PURE__ */ Symbol.for("react.client.reference"), N = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ee = Object.prototype.hasOwnProperty, re = Array.isArray, b = console.createTask ? console.createTask : function() {
+    var h = Pe, D = /* @__PURE__ */ Symbol.for("react.transitional.element"), A = /* @__PURE__ */ Symbol.for("react.portal"), R = /* @__PURE__ */ Symbol.for("react.fragment"), Z = /* @__PURE__ */ Symbol.for("react.strict_mode"), Q = /* @__PURE__ */ Symbol.for("react.profiler"), K = /* @__PURE__ */ Symbol.for("react.consumer"), ee = /* @__PURE__ */ Symbol.for("react.context"), w = /* @__PURE__ */ Symbol.for("react.forward_ref"), re = /* @__PURE__ */ Symbol.for("react.suspense"), C = /* @__PURE__ */ Symbol.for("react.suspense_list"), F = /* @__PURE__ */ Symbol.for("react.memo"), P = /* @__PURE__ */ Symbol.for("react.lazy"), L = /* @__PURE__ */ Symbol.for("react.activity"), k = /* @__PURE__ */ Symbol.for("react.client.reference"), g = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, oe = Array.isArray, O = console.createTask ? console.createTask : function() {
       return null;
     };
-    x = {
+    h = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var U, V = {}, q = x.react_stack_bottom_frame.bind(
-      x,
+    var x, V = {}, S = h.react_stack_bottom_frame.bind(
+      h,
       u
-    )(), B = b(d(u)), J = {};
-    $.Fragment = k, $.jsx = function(e, r, t) {
-      var o = 1e4 > N.recentlyCreatedOwnerStacks++;
-      return M(
+    )(), B = O(d(u)), q = {};
+    $.Fragment = R, $.jsx = function(e, r, t) {
+      var o = 1e4 > g.recentlyCreatedOwnerStacks++;
+      return v(
         e,
         r,
         t,
         !1,
-        o ? Error("react-stack-top-frame") : q,
-        o ? b(d(e)) : B
+        o ? Error("react-stack-top-frame") : S,
+        o ? O(d(e)) : B
       );
     }, $.jsxs = function(e, r, t) {
-      var o = 1e4 > N.recentlyCreatedOwnerStacks++;
-      return M(
+      var o = 1e4 > g.recentlyCreatedOwnerStacks++;
+      return v(
         e,
         r,
         t,
         !0,
-        o ? Error("react-stack-top-frame") : q,
-        o ? b(d(e)) : B
+        o ? Error("react-stack-top-frame") : S,
+        o ? O(d(e)) : B
       );
     };
   })()), $;
 }
-var le;
-function Te() {
-  return le || (le = 1, process.env.NODE_ENV === "production" ? X.exports = Ce() : X.exports = xe()), X.exports;
+var ie;
+function we() {
+  return ie || (ie = 1, process.env.NODE_ENV === "production" ? X.exports = ye() : X.exports = Ae()), X.exports;
 }
-var z = Te();
-const ce = {
+var z = we();
+const ue = {
   solid: {
     surfaceColor: "#3b82f6",
     sideColor: "#1d4ed8",
@@ -335,99 +335,108 @@ const ce = {
 function G(c, s, l) {
   return Math.max(s, Math.min(l, c));
 }
-function Ae({
+function je({
   children: c,
   onClick: s,
   disabled: l = !1,
   variant: d = "solid",
   elevation: i = 14,
   pressInset: u = 5,
-  tilt: v = 2,
-  motion: R = 160,
-  width: A = 260,
-  height: C = 64,
-  radius: M = 14,
-  surfaceColor: W,
-  sideColor: Y,
-  textColor: x,
-  borderColor: T,
-  borderWidth: w,
-  glareColor: k = "#ffffff",
-  glareOpacity: H = 0,
-  glareWidth: Z = 0,
-  className: Q = "",
-  style: O,
-  ...K
+  tilt: _ = 2,
+  pressTilt: E = !0,
+  motion: H = 160,
+  width: T = 260,
+  height: v = 64,
+  radius: W = 14,
+  surfaceColor: Y,
+  sideColor: h,
+  textColor: D,
+  borderColor: A,
+  borderWidth: R,
+  glareColor: Z = "#ffffff",
+  glareOpacity: Q = 0,
+  glareWidth: K = 0,
+  className: ee = "",
+  style: w,
+  ...re
 }) {
-  const h = Re(null), [D, F] = ne(!1), [P, S] = ne(null), L = Math.max(0, Number(C) || 0), N = Math.max(0, Number(i) || 0), re = L * 0.3, b = G(N, 0, re), U = Math.max(0, Number(u) || 0), V = G(U, 0, b), q = Math.max(0, Number(v) || 0), B = Number((b / 9).toFixed(2)), J = G(q, 0, B), e = L - b, r = Math.max(0, Math.floor(e / 4)), t = Math.max(0, Number(M) || 0), o = G(t, 0, r), g = Math.max(0, Number(R) || 0);
-  function y(a, f) {
-    const _ = f.getBoundingClientRect(), E = a.clientX - _.left, oe = _.width || 1;
-    return E < oe * 0.33 ? "left" : E > oe * 0.66 ? "right" : "middle";
+  const C = ge(null), [F, P] = se(!1), [L, k] = se(null), g = Math.max(0, Number(v) || 0), U = Math.max(0, Number(i) || 0), O = g * 0.3, x = G(U, 0, O), V = Math.max(0, Number(u) || 0), S = G(V, 0, x), B = Math.max(0, Number(_) || 0), q = Number((x / 9).toFixed(2)), e = G(B, 0, q), t = C.current?.getBoundingClientRect()?.width || Number(T) || 0, o = e * Math.PI / 180, y = t / 2 * Math.tan(o), N = Math.max(0, S - y), n = g - x, b = Math.max(0, Math.floor(n / 4)), j = Math.max(0, Number(W) || 0), te = G(j, 0, b), fe = Math.max(0, Number(H) || 0);
+  function ne(a, f) {
+    const m = f.getBoundingClientRect(), p = a.clientX - m.left, ae = m.width || 1;
+    return p < ae * 0.33 ? "left" : p > ae * 0.66 ? "right" : "middle";
   }
-  const n = (a) => {
+  const de = (a) => {
     if (l || a.button !== 0 && a.pointerType === "mouse") return;
-    const f = h.current;
+    const f = C.current;
     if (!f) return;
     f.setPointerCapture(a.pointerId);
-    const _ = y(a, f);
-    S((E) => E === _ ? E : _), F(!0);
-  }, m = (a) => {
+    const m = ne(a, f);
+    k((p) => p === m ? p : m), P(!0);
+  }, be = (a) => {
     if (l || a.pointerType !== "mouse") return;
-    const f = h.current;
+    const f = C.current;
     if (!f) return;
-    const _ = y(a, f);
-    S((E) => E === _ ? E : _);
-  }, p = (a) => {
-    const f = h.current;
+    const m = ne(a, f);
+    k((p) => p === m ? p : m);
+  }, J = (a) => {
+    const f = C.current;
     try {
       f?.hasPointerCapture(a.pointerId) && f.releasePointerCapture(a.pointerId);
     } catch {
     }
-    F(!1), S(null), l && D && p(a);
-  }, te = (a) => {
-    l || (p(a), s && s(a));
-  }, ie = (a) => {
-    l || p(a);
-  }, ue = (a) => {
-    p(a);
-  }, j = ce[d] || ce.solid, fe = W ?? j.surfaceColor, de = Y ?? j.sideColor, be = x ?? j.textColor, me = typeof T == "string" && T.trim() !== "" ? T : j.borderColor || "transparent", pe = typeof w == "number" && w >= 0 ? w : j.borderWidth ?? 0, _e = {
+    P(!1), k(null), l && F && J(a);
+  }, me = (a) => {
+    l || (J(a), s && s(a));
+  }, pe = (a) => {
+    l || J(a);
+  }, _e = (a) => {
+    J(a);
+  }, I = ue[d] || ue.solid, Ee = Y ?? I.surfaceColor, ve = h ?? I.sideColor, Re = D ?? I.textColor, Ce = typeof A == "string" && A.trim() !== "" ? A : I.borderColor || "transparent", xe = typeof R == "number" && R >= 0 ? R : I.borderWidth ?? 0, Te = {
     ...{
-      "--button-raise-level": `${b}px`,
-      "--press-inset": `${V}px`,
-      "--button-hover-pressure": J,
-      "--transform-speed": `${g}ms`,
-      "--radius": `${o}px`,
-      "--surface-color": fe,
-      "--side-color": de,
-      "--text-color": be,
-      "--border-color": me,
-      "--border-width": `${pe}px`,
-      "--glare-rgb": he(k),
-      "--glare-alpha": H,
-      "--glare-width": Z,
-      width: typeof A == "number" ? `${A}px` : A,
-      height: typeof C == "number" ? `${C}px` : C
+      "--button-raise-level": `${x}px`,
+      "--press-inset": `${S}px`,
+      "--press-compensated": `${N}px`,
+      "--button-hover-pressure": e,
+      "--transform-speed": `${fe}ms`,
+      "--radius": `${te}px`,
+      "--surface-color": Ee,
+      "--side-color": ve,
+      "--text-color": Re,
+      "--border-color": Ce,
+      "--border-width": `${xe}px`,
+      "--glare-rgb": ke(Z),
+      "--glare-alpha": Q,
+      "--glare-width": K,
+      width: typeof T == "number" ? `${T}px` : T,
+      height: typeof v == "number" ? `${v}px` : v
     },
-    ...O && typeof O == "object" ? O : {}
-  }, Ee = ["soft-btn", D && "soft-btn--active", P && `soft-btn--${P}`, l && "soft-btn--disabled", Q].filter(Boolean).join(" ");
+    ...w && typeof w == "object" ? w : {}
+  }, he = [
+    "soft-btn",
+    F && "soft-btn--active",
+    L && `soft-btn--${L}`,
+    l && "soft-btn--disabled",
+    E && "soft-btn--press-tilt",
+    ee
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ z.jsx(
     "button",
     {
-      ...K,
-      ref: h,
-      className: Ee,
-      style: _e,
-      onPointerDown: n,
-      onPointerMove: m,
-      onPointerUp: te,
-      onPointerLeave: ie,
-      onPointerCancel: ue,
+      ...re,
+      ref: C,
+      className: he,
+      style: Te,
+      onPointerDown: de,
+      onPointerMove: be,
+      onPointerUp: me,
+      onPointerLeave: pe,
+      onPointerCancel: _e,
       disabled: l,
       children: /* @__PURE__ */ z.jsx("span", { className: "soft-btn__wrapper", children: /* @__PURE__ */ z.jsx("span", { className: "soft-btn__content", children: /* @__PURE__ */ z.jsx("span", { className: "soft-btn__inner", children: c }) }) })
     }
   );
 }
-function he(c) {
+function ke(c) {
   if (!c || typeof c != "string")
     return "255,255,255";
   let s = c.replace("#", "");
@@ -437,6 +446,6 @@ function he(c) {
   return `${l},${d},${i}`;
 }
 export {
-  Ae as TiltButton,
-  ce as TiltButtonVariants
+  je as TiltButton,
+  ue as TiltButtonVariants
 };

package/dist/react-tilt-button.umd.js

@@ -1,7 +1,7 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.soft-btn{--button-raise-level: 14px;--press-inset: 5px;--button-hover-pressure: 2;--transform-speed: .16s;--radius: 14px;--surface-color: #f3f4f6;--side-color: #d1d5db;--text-color: #111827;--border-color: rgba(0, 0, 0, .35);--border-width: 2px;--glare-rgb: 255, 255, 255;--glare-alpha: 0;--glare-width: 0;--edge-aa: 0px;position:relative;border:none;background:transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}.soft-btn__wrapper{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}.soft-btn__wrapper:before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(100% - var(--button-raise-level));background:var(--side-color);border-radius:var(--radius);z-index:1}.soft-btn--active .soft-btn__wrapper:before{border-radius:var(--radius)}.soft-btn__content{position:relative;width:100%;height:calc(100% - var(--button-raise-level));background:var(--surface-color);color:var(--text-color);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;transform:translateY(0);transition:transform var(--transform-speed) ease-out;will-change:transform;backface-visibility:hidden;transform-origin:center;z-index:2;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),0 0 var(--edge-aa) #00000073}.soft-btn__inner{display:inline-flex;align-items:center;justify-content:center;gap:10px;z-index:4;width:100%;height:100%}.soft-btn--middle .soft-btn__content{transform:translateY(calc(1px * var(--button-hover-pressure)))}.soft-btn--left .soft-btn__content{transform:skewY(calc(-1deg * var(--button-hover-pressure)))}.soft-btn--right .soft-btn__content{transform:skewY(calc(1deg * var(--button-hover-pressure)))}.soft-btn--left,.soft-btn--right{--edge-aa: 1px}.soft-btn--active .soft-btn__content{transform:translateY(var(--press-inset));transition:transform calc(var(--transform-speed) * .8) ease-out}.soft-btn--disabled{opacity:.6;pointer-events:none}.soft-btn--disabled .soft-btn__content:after{opacity:0}.soft-btn__content:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(var(--glare-rgb),0) calc(50% - var(--glare-width) * 1%),rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% - var(--glare-width) * .5%),rgba(var(--glare-rgb),var(--glare-alpha)) 50%,rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% + var(--glare-width) * .5%),rgba(var(--glare-rgb),0) calc(50% + var(--glare-width) * 1%));background-size:200% 100%;background-position:50% 50%;opacity:0;transition:opacity .16s ease,background-position var(--transform-speed) ease;z-index:3}.soft-btn--right .soft-btn__content:after{opacity:1;background-position:0% 50%}.soft-btn--middle .soft-btn__content:after{opacity:1;background-position:50% 50%}.soft-btn--left .soft-btn__content:after{opacity:1;background-position:100% 50%}.soft-btn--active .soft-btn__content:after{opacity:1;background:rgba(var(--glare-rgb),var(--glare-alpha));background-position:50% 50%}@supports (-moz-appearance: none){.soft-btn--left,.soft-btn--right{--edge-aa: 1.25px}}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-(function(b,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(b=typeof globalThis<"u"?globalThis:b||self,m(b["react-tilt-button"]={},b.React))})(this,(function(b,m){"use strict";var $={exports:{}},w={};var se;function fe(){if(se)return w;se=1;var c=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function l(d,i,f){var T=null;if(f!==void 0&&(T=""+f),i.key!==void 0&&(T=""+i.key),"key"in i){f={};for(var C in i)C!=="key"&&(f[C]=i[C])}else f=i;return i=f.ref,{$$typeof:c,type:d,key:T,ref:i!==void 0?i:null,props:f}}return w.Fragment=s,w.jsx=l,w.jsxs=l,w}var O={};var le;function ue(){return le||(le=1,process.env.NODE_ENV!=="production"&&(function(){function c(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===X?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case N:return"Fragment";case ee:return"Profiler";case K:return"StrictMode";case y:return"Suspense";case B:return"SuspenseList";case M:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case j:return"Portal";case I:return e.displayName||"Context";case re:return(e._context.displayName||"Context")+".Consumer";case te:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case J:return r=e.displayName||null,r!==null?r:c(e.type)||"Memo";case g:r=e._payload,e=e._init;try{return c(e(r))}catch{}}return null}function s(e){return""+e}function l(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),s(e)}}function d(e){if(e===N)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===g)return"<...>";try{var r=c(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=W.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function T(e){if(oe.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function C(e,r){function t(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function k(){var e=c(this.type);return G[e]||(G[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function x(e,r,t,o,A,S){var n=t.ref;return e={$$typeof:P,type:e,key:r,props:t,_owner:o},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:k}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function L(e,r,t,o,A,S){var n=r.children;if(n!==void 0)if(o)if(ne(n)){for(o=0;o<n.length;o++)U(n[o]);Object.freeze&&Object.freeze(n)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else U(n);if(oe.call(r,"key")){n=c(e);var _=Object.keys(r).filter(function(ae){return ae!=="key"});o=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",Z[n+o]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.soft-btn{--button-raise-level: 14px;--press-inset: 5px;--press-compensated: 0px;--button-hover-pressure: 2;--transform-speed: .16s;--radius: 14px;--surface-color: #f3f4f6;--side-color: #d1d5db;--text-color: #111827;--border-color: rgba(0, 0, 0, .35);--border-width: 2px;--glare-rgb: 255, 255, 255;--glare-alpha: 0;--glare-width: 0;--edge-aa: 0px;position:relative;border:none;background:transparent;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}.soft-btn__wrapper{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}.soft-btn__wrapper:before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(100% - var(--button-raise-level));background:var(--side-color);border-radius:var(--radius);z-index:1}.soft-btn--active .soft-btn__wrapper:before{border-radius:var(--radius)}.soft-btn__content{position:relative;width:100%;height:calc(100% - var(--button-raise-level));background:var(--surface-color);color:var(--text-color);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;transform:translateY(0);transition:transform var(--transform-speed) ease-out;will-change:transform;backface-visibility:hidden;transform-origin:center;z-index:2;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),0 0 var(--edge-aa) #00000073}.soft-btn__inner{display:inline-flex;align-items:center;justify-content:center;gap:10px;z-index:4;width:100%;height:100%}.soft-btn--middle .soft-btn__content{transform:translateY(calc(1px * var(--button-hover-pressure)))}.soft-btn--left .soft-btn__content{transform:skewY(calc(-1deg * var(--button-hover-pressure)))}.soft-btn--right .soft-btn__content{transform:skewY(calc(1deg * var(--button-hover-pressure)))}.soft-btn--left,.soft-btn--right{--edge-aa: 1px}.soft-btn--active .soft-btn__content{transform:translateY(var(--press-inset));transition:transform calc(var(--transform-speed) * .8) ease-out}.soft-btn--press-tilt.soft-btn--active.soft-btn--left .soft-btn__content{transform:skewY(calc(-1deg * var(--button-hover-pressure))) translateY(var(--press-compensated))}.soft-btn--press-tilt.soft-btn--active.soft-btn--right .soft-btn__content{transform:skewY(calc(1deg * var(--button-hover-pressure))) translateY(var(--press-compensated))}.soft-btn--disabled{opacity:.6;pointer-events:none}.soft-btn--disabled .soft-btn__content:after{opacity:0}.soft-btn__content:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(var(--glare-rgb),0) calc(50% - var(--glare-width) * 1%),rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% - var(--glare-width) * .5%),rgba(var(--glare-rgb),var(--glare-alpha)) 50%,rgba(var(--glare-rgb),calc(var(--glare-alpha) * .5)) calc(50% + var(--glare-width) * .5%),rgba(var(--glare-rgb),0) calc(50% + var(--glare-width) * 1%));background-size:200% 100%;background-position:50% 50%;opacity:0;transition:opacity .16s ease,background-position var(--transform-speed) ease;z-index:3}.soft-btn--right .soft-btn__content:after{opacity:1;background-position:0% 50%}.soft-btn--middle .soft-btn__content:after{opacity:1;background-position:50% 50%}.soft-btn--left .soft-btn__content:after{opacity:1;background-position:100% 50%}.soft-btn--active .soft-btn__content:after{opacity:1;background:rgba(var(--glare-rgb),var(--glare-alpha));background-position:50% 50%}@supports (-moz-appearance: none){.soft-btn--left,.soft-btn--right{--edge-aa: 1.25px}}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(b,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(b=typeof globalThis<"u"?globalThis:b||self,m(b["react-tilt-button"]={},b.React))})(this,(function(b,m){"use strict";var D={exports:{}},w={};var se;function de(){if(se)return w;se=1;var c=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function l(d,i,u){var E=null;if(u!==void 0&&(E=""+u),i.key!==void 0&&(E=""+i.key),"key"in i){u={};for(var R in i)R!=="key"&&(u[R]=i[R])}else u=i;return i=u.ref,{$$typeof:c,type:d,key:E,ref:i!==void 0?i:null,props:u}}return w.Fragment=s,w.jsx=l,w.jsxs=l,w}var O={};var le;function be(){return le||(le=1,process.env.NODE_ENV!=="production"&&(function(){function c(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===j?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case re:return"Profiler";case ee:return"StrictMode";case ne:return"Suspense";case x:return"SuspenseList";case X:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case k:return"Portal";case oe:return e.displayName||"Context";case te:return(e._context.displayName||"Context")+".Consumer";case N:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case J:return r=e.displayName||null,r!==null?r:c(e.type)||"Memo";case y:r=e._payload,e=e._init;try{return c(e(r))}catch{}}return null}function s(e){return""+e}function l(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),s(e)}}function d(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===y)return"<...>";try{var r=c(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=A.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function E(e){if(z.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function t(){h||(h=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function K(){var e=c(this.type);return G[e]||(G[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function P(e,r,t,o,S,W){var n=t.ref;return e={$$typeof:B,type:e,key:r,props:t,_owner:o},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:K}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,t,o,S,W){var n=r.children;if(n!==void 0)if(o)if(ie(n)){for(o=0;o<n.length;o++)U(n[o]);Object.freeze&&Object.freeze(n)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else U(n);if(z.call(r,"key")){n=c(e);var p=Object.keys(r).filter(function(ae){return ae!=="key"});o=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",H[n+o]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,n,_,n),Z[n+o]=!0)}if(n=null,t!==void 0&&(l(t),n=""+t),T(r)&&(l(r.key),n=""+r.key),"key"in r){t={};for(var v in r)v!=="key"&&(t[v]=r[v])}else t=r;return n&&C(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),x(e,n,t,i(),A,S)}function U(e){V(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===g&&(e._payload.status==="fulfilled"?V(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function V(e){return typeof e=="object"&&e!==null&&e.$$typeof===P}var h=m,P=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),K=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),I=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),y=Symbol.for("react.suspense"),B=Symbol.for("react.suspense_list"),J=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),M=Symbol.for("react.activity"),X=Symbol.for("react.client.reference"),W=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,oe=Object.prototype.hasOwnProperty,ne=Array.isArray,p=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var z,G={},q=h.react_stack_bottom_frame.bind(h,f)(),H=p(d(f)),Z={};O.Fragment=N,O.jsx=function(e,r,t){var o=1e4>W.recentlyCreatedOwnerStacks++;return L(e,r,t,!1,o?Error("react-stack-top-frame"):q,o?p(d(e)):H)},O.jsxs=function(e,r,t){var o=1e4>W.recentlyCreatedOwnerStacks++;return L(e,r,t,!0,o?Error("react-stack-top-frame"):q,o?p(d(e)):H)}})()),O}var ce;function de(){return ce||(ce=1,process.env.NODE_ENV==="production"?$.exports=fe():$.exports=ue()),$.exports}var D=de();const Q={solid:{surfaceColor:"#3b82f6",sideColor:"#1d4ed8",textColor:"#ffffff",borderColor:"transparent",borderWidth:0},outline:{surfaceColor:"#ffffff",sideColor:"#2563eb",textColor:"#2563eb",borderColor:"#2563eb",borderWidth:3},dark:{surfaceColor:"#181818",sideColor:"#494949",textColor:"#e5e7eb",borderColor:"#5e5e5e",borderWidth:3},arcade:{surfaceColor:"#22b8c7",sideColor:"#e5dd4a",textColor:"#fef08a",borderColor:"#fef08a",borderWidth:3},gum:{surfaceColor:"#f472b6",sideColor:"#db2777",textColor:"#ffffff",borderColor:"transparent",borderWidth:0},carbon:{surfaceColor:"#2a2a37",sideColor:"#8b5e3c",textColor:"#c4a484",borderColor:"#8b5f39",borderWidth:4},warning:{surfaceColor:"#2c2c39",sideColor:"#b22b3b",textColor:"#fff7ed",borderColor:"#d9445b",borderWidth:4},steel:{surfaceColor:"#cbd5e1",sideColor:"#64748b",textColor:"#020617",borderColor:"#475569",borderWidth:2},gold:{surfaceColor:"#ffcf10",sideColor:"#d29000",textColor:"#422006",borderColor:"#fff0a8",borderWidth:2},lavender:{surfaceColor:"#cec3fd",sideColor:"#b489ff",textColor:"#2e1065",borderColor:"#a36eff",borderWidth:4}};function F(c,s,l){return Math.max(s,Math.min(l,c))}function be({children:c,onClick:s,disabled:l=!1,variant:d="solid",elevation:i=14,pressInset:f=5,tilt:T=2,motion:C=160,width:k=260,height:x=64,radius:L=14,surfaceColor:U,sideColor:V,textColor:h,borderColor:P,borderWidth:j,glareColor:N="#ffffff",glareOpacity:K=0,glareWidth:ee=0,className:re="",style:I,...te}){const y=m.useRef(null),[B,J]=m.useState(!1),[g,M]=m.useState(null),X=Math.max(0,Number(x)||0),W=Math.max(0,Number(i)||0),ne=X*.3,p=F(W,0,ne),z=Math.max(0,Number(f)||0),G=F(z,0,p),q=Math.max(0,Number(T)||0),H=Number((p/9).toFixed(2)),Z=F(q,0,H),e=X-p,r=Math.max(0,Math.floor(e/4)),t=Math.max(0,Number(L)||0),o=F(t,0,r),A=Math.max(0,Number(C)||0);function S(a,u){const E=u.getBoundingClientRect(),R=a.clientX-E.left,ie=E.width||1;return R<ie*.33?"left":R>ie*.66?"right":"middle"}const n=a=>{if(l||a.button!==0&&a.pointerType==="mouse")return;const u=y.current;if(!u)return;u.setPointerCapture(a.pointerId);const E=S(a,u);M(R=>R===E?R:E),J(!0)},_=a=>{if(l||a.pointerType!=="mouse")return;const u=y.current;if(!u)return;const E=S(a,u);M(R=>R===E?R:E)},v=a=>{const u=y.current;try{u?.hasPointerCapture(a.pointerId)&&u.releasePointerCapture(a.pointerId)}catch{}J(!1),M(null),l&&B&&v(a)},ae=a=>{l||(v(a),s&&s(a))},pe=a=>{l||v(a)},_e=a=>{v(a)},Y=Q[d]||Q.solid,ve=U??Y.surfaceColor,Ee=V??Y.sideColor,Re=h??Y.textColor,Te=typeof P=="string"&&P.trim()!==""?P:Y.borderColor||"transparent",Ce=typeof j=="number"&&j>=0?j:Y.borderWidth??0,xe={...{"--button-raise-level":`${p}px`,"--press-inset":`${G}px`,"--button-hover-pressure":Z,"--transform-speed":`${A}ms`,"--radius":`${o}px`,"--surface-color":ve,"--side-color":Ee,"--text-color":Re,"--border-color":Te,"--border-width":`${Ce}px`,"--glare-rgb":me(N),"--glare-alpha":K,"--glare-width":ee,width:typeof k=="number"?`${k}px`:k,height:typeof x=="number"?`${x}px`:x},...I&&typeof I=="object"?I:{}},he=["soft-btn",B&&"soft-btn--active",g&&`soft-btn--${g}`,l&&"soft-btn--disabled",re].filter(Boolean).join(" ");return D.jsx("button",{...te,ref:y,className:he,style:xe,onPointerDown:n,onPointerMove:_,onPointerUp:ae,onPointerLeave:pe,onPointerCancel:_e,disabled:l,children:D.jsx("span",{className:"soft-btn__wrapper",children:D.jsx("span",{className:"soft-btn__content",children:D.jsx("span",{className:"soft-btn__inner",children:c})})})})}function me(c){if(!c||typeof c!="string")return"255,255,255";let s=c.replace("#","");if(s.length===3&&(s=s.split("").map(f=>f+f).join("")),s.length!==6)return"255,255,255";const l=parseInt(s.slice(0,2),16),d=parseInt(s.slice(2,4),16),i=parseInt(s.slice(4,6),16);return`${l},${d},${i}`}b.TiltButton=be,b.TiltButtonVariants=Q,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,o,n,p,n),H[n+o]=!0)}if(n=null,t!==void 0&&(l(t),n=""+t),E(r)&&(l(r.key),n=""+r.key),"key"in r){t={};for(var $ in r)$!=="key"&&(t[$]=r[$])}else t=r;return n&&R(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),P(e,n,t,i(),S,W)}function U(e){V(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?V(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function V(e){return typeof e=="object"&&e!==null&&e.$$typeof===B}var g=m,B=Symbol.for("react.transitional.element"),k=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),ee=Symbol.for("react.strict_mode"),re=Symbol.for("react.profiler"),te=Symbol.for("react.consumer"),oe=Symbol.for("react.context"),N=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),J=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),X=Symbol.for("react.activity"),j=Symbol.for("react.client.reference"),A=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,ie=Array.isArray,M=console.createTask?console.createTask:function(){return null};g={react_stack_bottom_frame:function(e){return e()}};var h,G={},I=g.react_stack_bottom_frame.bind(g,u)(),q=M(d(u)),H={};O.Fragment=C,O.jsx=function(e,r,t){var o=1e4>A.recentlyCreatedOwnerStacks++;return T(e,r,t,!1,o?Error("react-stack-top-frame"):I,o?M(d(e)):q)},O.jsxs=function(e,r,t){var o=1e4>A.recentlyCreatedOwnerStacks++;return T(e,r,t,!0,o?Error("react-stack-top-frame"):I,o?M(d(e)):q)}})()),O}var ce;function me(){return ce||(ce=1,process.env.NODE_ENV==="production"?D.exports=de():D.exports=be()),D.exports}var F=me();const Q={solid:{surfaceColor:"#3b82f6",sideColor:"#1d4ed8",textColor:"#ffffff",borderColor:"transparent",borderWidth:0},outline:{surfaceColor:"#ffffff",sideColor:"#2563eb",textColor:"#2563eb",borderColor:"#2563eb",borderWidth:3},dark:{surfaceColor:"#181818",sideColor:"#494949",textColor:"#e5e7eb",borderColor:"#5e5e5e",borderWidth:3},arcade:{surfaceColor:"#22b8c7",sideColor:"#e5dd4a",textColor:"#fef08a",borderColor:"#fef08a",borderWidth:3},gum:{surfaceColor:"#f472b6",sideColor:"#db2777",textColor:"#ffffff",borderColor:"transparent",borderWidth:0},carbon:{surfaceColor:"#2a2a37",sideColor:"#8b5e3c",textColor:"#c4a484",borderColor:"#8b5f39",borderWidth:4},warning:{surfaceColor:"#2c2c39",sideColor:"#b22b3b",textColor:"#fff7ed",borderColor:"#d9445b",borderWidth:4},steel:{surfaceColor:"#cbd5e1",sideColor:"#64748b",textColor:"#020617",borderColor:"#475569",borderWidth:2},gold:{surfaceColor:"#ffcf10",sideColor:"#d29000",textColor:"#422006",borderColor:"#fff0a8",borderWidth:2},lavender:{surfaceColor:"#cec3fd",sideColor:"#b489ff",textColor:"#2e1065",borderColor:"#a36eff",borderWidth:4}};function L(c,s,l){return Math.max(s,Math.min(l,c))}function pe({children:c,onClick:s,disabled:l=!1,variant:d="solid",elevation:i=14,pressInset:u=5,tilt:E=2,pressTilt:R=!0,motion:K=160,width:P=260,height:T=64,radius:U=14,surfaceColor:V,sideColor:g,textColor:B,borderColor:k,borderWidth:C,glareColor:ee="#ffffff",glareOpacity:re=0,glareWidth:te=0,className:oe="",style:N,...ne}){const x=m.useRef(null),[J,y]=m.useState(!1),[X,j]=m.useState(null),A=Math.max(0,Number(T)||0),z=Math.max(0,Number(i)||0),M=A*.3,h=L(z,0,M),G=Math.max(0,Number(u)||0),I=L(G,0,h),q=Math.max(0,Number(E)||0),H=Number((h/9).toFixed(2)),e=L(q,0,H),t=x.current?.getBoundingClientRect()?.width||Number(P)||0,o=e*Math.PI/180,S=t/2*Math.tan(o),W=Math.max(0,I-S),n=A-h,p=Math.max(0,Math.floor(n/4)),$=Math.max(0,Number(U)||0),ae=L($,0,p),ve=Math.max(0,Number(K)||0);function ue(a,f){const _=f.getBoundingClientRect(),v=a.clientX-_.left,fe=_.width||1;return v<fe*.33?"left":v>fe*.66?"right":"middle"}const Ee=a=>{if(l||a.button!==0&&a.pointerType==="mouse")return;const f=x.current;if(!f)return;f.setPointerCapture(a.pointerId);const _=ue(a,f);j(v=>v===_?v:_),y(!0)},Re=a=>{if(l||a.pointerType!=="mouse")return;const f=x.current;if(!f)return;const _=ue(a,f);j(v=>v===_?v:_)},Z=a=>{const f=x.current;try{f?.hasPointerCapture(a.pointerId)&&f.releasePointerCapture(a.pointerId)}catch{}y(!1),j(null),l&&J&&Z(a)},Te=a=>{l||(Z(a),s&&s(a))},Ce=a=>{l||Z(a)},xe=a=>{Z(a)},Y=Q[d]||Q.solid,he=V??Y.surfaceColor,Pe=g??Y.sideColor,ge=B??Y.textColor,ye=typeof k=="string"&&k.trim()!==""?k:Y.borderColor||"transparent",Ae=typeof C=="number"&&C>=0?C:Y.borderWidth??0,Se={...{"--button-raise-level":`${h}px`,"--press-inset":`${I}px`,"--press-compensated":`${W}px`,"--button-hover-pressure":e,"--transform-speed":`${ve}ms`,"--radius":`${ae}px`,"--surface-color":he,"--side-color":Pe,"--text-color":ge,"--border-color":ye,"--border-width":`${Ae}px`,"--glare-rgb":_e(ee),"--glare-alpha":re,"--glare-width":te,width:typeof P=="number"?`${P}px`:P,height:typeof T=="number"?`${T}px`:T},...N&&typeof N=="object"?N:{}},we=["soft-btn",J&&"soft-btn--active",X&&`soft-btn--${X}`,l&&"soft-btn--disabled",R&&"soft-btn--press-tilt",oe].filter(Boolean).join(" ");return F.jsx("button",{...ne,ref:x,className:we,style:Se,onPointerDown:Ee,onPointerMove:Re,onPointerUp:Te,onPointerLeave:Ce,onPointerCancel:xe,disabled:l,children:F.jsx("span",{className:"soft-btn__wrapper",children:F.jsx("span",{className:"soft-btn__content",children:F.jsx("span",{className:"soft-btn__inner",children:c})})})})}function _e(c){if(!c||typeof c!="string")return"255,255,255";let s=c.replace("#","");if(s.length===3&&(s=s.split("").map(u=>u+u).join("")),s.length!==6)return"255,255,255";const l=parseInt(s.slice(0,2),16),d=parseInt(s.slice(2,4),16),i=parseInt(s.slice(4,6),16);return`${l},${d},${i}`}b.TiltButton=pe,b.TiltButtonVariants=Q,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-tilt-button",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "description": "",
     "license": "MIT",
     "author": "archisvaze",
@@ -11,7 +11,6 @@
     ],
     "main": "./dist/react-tilt-button.umd.js",
     "module": "./dist/react-tilt-button.es.js",
-    "style": "./dist/react-tilt-button.css",
     "exports": {
         ".": {
             "import": "./dist/react-tilt-button.es.js",