react-tilt-button 0.0.7 → 0.0.8

package/README.md

@@ -164,7 +164,6 @@ These override the selected variant.
 
 | Prop          |
 | ------------- |
-| `bordered`    |
 | `borderColor` |
 | `borderWidth` |
 
@@ -188,13 +187,13 @@ It automatically shifts based on hover position (left / middle / right) and fade
 
 ```jsx
 <TiltButton
-    glareColor="#ffffff"
+    glareColor='#ffffff'
     glareOpacity={0.12}
     glareWidth={60}
 >
     Shiny Button
 </TiltButton>
-
+```
 
 ---
 
@@ -236,21 +235,3 @@ All visuals are driven by CSS variables:
 So you can theme it externally if needed.
 
 ---
-
-## Philosophy
-
-This is not a flat UI button.
-
-It is a **physical, tactile UI primitive** that behaves like an object:
-
-- It has depth
-- It deforms
-- It squishes
-- It reacts to pressure
-
----
-
-## License
-
-Use it. Ship it. Modify it.
-```

package/dist/react-tilt-button.css

@@ -1 +1 @@
-.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;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-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);border-radius:var(--radius);z-index:1}.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}.soft-btn__inner{display:inline-flex;align-items:center;gap:10px;z-index:4}.soft-btn--bordered .soft-btn__content{box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.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__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{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--active .soft-btn__content:after{opacity:1;background:rgba(var(--glare-rgb),var(--glare-alpha));background-position:50% 50%}
+.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__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;gap:10px;z-index:4}.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__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{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--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}}

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

@@ -1,80 +1,80 @@
-import Ee, { useRef as ve, useState as ne } from "react";
-var U = { exports: {} }, y = {};
+import ve, { useRef as Re, useState as ne } from "react";
+var J = { exports: {} }, N = {};
 var ae;
-function Re() {
-  if (ae) return y;
+function Ce() {
+  if (ae) return N;
   ae = 1;
-  var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), a = /* @__PURE__ */ Symbol.for("react.fragment");
-  function l(f, c, u) {
-    var d = null;
-    if (u !== void 0 && (d = "" + u), c.key !== void 0 && (d = "" + c.key), "key" in c) {
+  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) {
       u = {};
-      for (var b in c)
-        b !== "key" && (u[b] = c[b]);
-    } else u = c;
-    return c = u.ref, {
-      $$typeof: s,
-      type: f,
-      key: d,
-      ref: c !== void 0 ? c : null,
+      for (var R in i)
+        R !== "key" && (u[R] = i[R]);
+    } else u = i;
+    return i = u.ref, {
+      $$typeof: c,
+      type: d,
+      key: v,
+      ref: i !== void 0 ? i : null,
       props: u
     };
   }
-  return y.Fragment = a, y.jsx = l, y.jsxs = l, y;
+  return N.Fragment = s, N.jsx = l, N.jsxs = l, N;
 }
-var S = {};
+var j = {};
 var se;
-function Ce() {
+function xe() {
   return se || (se = 1, process.env.NODE_ENV !== "production" && (function() {
-    function s(e) {
+    function c(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === v ? null : e.displayName || e.name || null;
+        return e.$$typeof === F ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case h:
+        case y:
           return "Fragment";
-        case X:
+        case Z:
           return "Profiler";
-        case J:
-          return "StrictMode";
         case H:
+          return "StrictMode";
+        case T:
           return "Suspense";
-        case $:
+        case Y:
           return "SuspenseList";
-        case I:
+        case k:
           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 q:
-            return "Portal";
           case G:
+            return "Portal";
+          case w:
             return e.displayName || "Context";
-          case z:
+          case Q:
             return (e._context.displayName || "Context") + ".Consumer";
-          case A:
+          case K:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case Z:
-            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
-          case m:
+          case D:
+            return r = e.displayName || null, r !== null ? r : c(e.type) || "Memo";
+          case h:
             r = e._payload, e = e._init;
             try {
-              return s(e(r));
+              return c(e(r));
             } catch {
             }
         }
       return null;
     }
-    function a(e) {
+    function s(e) {
       return "" + e;
     }
     function l(e) {
       try {
-        a(e);
+        s(e);
         var r = !1;
       } catch {
         r = !0;
@@ -86,37 +86,37 @@ function Ce() {
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           o
-        ), a(e);
+        ), s(e);
       }
     }
-    function f(e) {
-      if (e === h) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === m)
+    function d(e) {
+      if (e === y) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === h)
         return "<...>";
       try {
-        var r = s(e);
+        var r = c(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function c() {
-      var e = R.A;
+    function i() {
+      var e = O.A;
       return e === null ? null : e.getOwner();
     }
     function u() {
       return Error("react-stack-top-frame");
     }
-    function d(e) {
-      if (W.call(e, "key")) {
+    function v(e) {
+      if (ee.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function b(e, r) {
+    function R(e, r) {
       function t() {
-        p || (p = !0, console.error(
+        L || (L = !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
         ));
@@ -126,23 +126,23 @@ function Ce() {
         configurable: !0
       });
     }
-    function T() {
-      var e = s(this.type);
-      return Y[e] || (Y[e] = !0, console.error(
+    function A() {
+      var e = c(this.type);
+      return U[e] || (U[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 _(e, r, t, o, C, w) {
+    function C(e, r, t, o, P, g) {
       var n = t.ref;
       return e = {
-        $$typeof: M,
+        $$typeof: W,
         type: e,
         key: r,
         props: t,
         _owner: o
       }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: T
+        get: A
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -157,33 +157,33 @@ function Ce() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: C
+        value: P
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: w
+        value: g
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function N(e, r, t, o, C, w) {
+    function I(e, r, t, o, P, g) {
       var n = r.children;
       if (n !== void 0)
         if (o)
-          if (K(n)) {
+          if (re(n)) {
             for (o = 0; o < n.length; o++)
-              P(n[o]);
+              $(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 P(n);
-      if (W.call(r, "key")) {
-        n = s(e);
-        var i = Object.keys(r).filter(function(Q) {
-          return Q !== "key";
+        else $(n);
+      if (ee.call(r, "key")) {
+        n = c(e);
+        var m = Object.keys(r).filter(function(te) {
+          return te !== "key";
         });
-        o = 0 < i.length ? "{key: someKey, " + i.join(": ..., ") + ": ...}" : "{key: someKey}", L[n + o] || (i = 0 < i.length ? "{" + i.join(": ..., ") + ": ...}" : "{}", console.error(
+        o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", B[n + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -192,79 +192,78 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           o,
           n,
-          i,
+          m,
           n
-        ), L[n + o] = !0);
+        ), B[n + o] = !0);
       }
-      if (n = null, t !== void 0 && (l(t), n = "" + t), d(r) && (l(r.key), n = "" + r.key), "key" in r) {
+      if (n = null, t !== void 0 && (l(t), n = "" + t), v(r) && (l(r.key), n = "" + r.key), "key" in r) {
         t = {};
-        for (var k in r)
-          k !== "key" && (t[k] = r[k]);
+        for (var p in r)
+          p !== "key" && (t[p] = r[p]);
       } else t = r;
-      return n && b(
+      return n && R(
         t,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), _(
+      ), C(
         e,
         n,
         t,
-        c(),
-        C,
-        w
+        i(),
+        P,
+        g
       );
     }
-    function P(e) {
-      j(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === m && (e._payload.status === "fulfilled" ? j(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function $(e) {
+      M(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === h && (e._payload.status === "fulfilled" ? M(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function j(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === M;
+    function M(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === W;
     }
-    var E = Ee, M = /* @__PURE__ */ Symbol.for("react.transitional.element"), q = /* @__PURE__ */ Symbol.for("react.portal"), h = /* @__PURE__ */ Symbol.for("react.fragment"), J = /* @__PURE__ */ Symbol.for("react.strict_mode"), X = /* @__PURE__ */ Symbol.for("react.profiler"), z = /* @__PURE__ */ Symbol.for("react.consumer"), G = /* @__PURE__ */ Symbol.for("react.context"), A = /* @__PURE__ */ Symbol.for("react.forward_ref"), H = /* @__PURE__ */ Symbol.for("react.suspense"), $ = /* @__PURE__ */ Symbol.for("react.suspense_list"), Z = /* @__PURE__ */ Symbol.for("react.memo"), m = /* @__PURE__ */ Symbol.for("react.lazy"), I = /* @__PURE__ */ Symbol.for("react.activity"), v = /* @__PURE__ */ Symbol.for("react.client.reference"), R = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, K = Array.isArray, g = console.createTask ? console.createTask : function() {
+    var x = ve, W = /* @__PURE__ */ Symbol.for("react.transitional.element"), G = /* @__PURE__ */ Symbol.for("react.portal"), y = /* @__PURE__ */ Symbol.for("react.fragment"), H = /* @__PURE__ */ Symbol.for("react.strict_mode"), Z = /* @__PURE__ */ Symbol.for("react.profiler"), Q = /* @__PURE__ */ Symbol.for("react.consumer"), w = /* @__PURE__ */ Symbol.for("react.context"), K = /* @__PURE__ */ Symbol.for("react.forward_ref"), T = /* @__PURE__ */ Symbol.for("react.suspense"), Y = /* @__PURE__ */ Symbol.for("react.suspense_list"), D = /* @__PURE__ */ Symbol.for("react.memo"), h = /* @__PURE__ */ Symbol.for("react.lazy"), k = /* @__PURE__ */ Symbol.for("react.activity"), F = /* @__PURE__ */ Symbol.for("react.client.reference"), O = 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() {
       return null;
     };
-    E = {
+    x = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var p, Y = {}, D = E.react_stack_bottom_frame.bind(
-      E,
+    var L, U = {}, V = x.react_stack_bottom_frame.bind(
+      x,
       u
-    )(), F = g(f(u)), L = {};
-    S.Fragment = h, S.jsx = function(e, r, t) {
-      var o = 1e4 > R.recentlyCreatedOwnerStacks++;
-      return N(
+    )(), q = b(d(u)), B = {};
+    j.Fragment = y, j.jsx = function(e, r, t) {
+      var o = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return I(
         e,
         r,
         t,
         !1,
-        o ? Error("react-stack-top-frame") : D,
-        o ? g(f(e)) : F
+        o ? Error("react-stack-top-frame") : V,
+        o ? b(d(e)) : q
       );
-    }, S.jsxs = function(e, r, t) {
-      var o = 1e4 > R.recentlyCreatedOwnerStacks++;
-      return N(
+    }, j.jsxs = function(e, r, t) {
+      var o = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return I(
         e,
         r,
         t,
         !0,
-        o ? Error("react-stack-top-frame") : D,
-        o ? g(f(e)) : F
+        o ? Error("react-stack-top-frame") : V,
+        o ? b(d(e)) : q
       );
     };
-  })()), S;
+  })()), j;
 }
 var le;
-function xe() {
-  return le || (le = 1, process.env.NODE_ENV === "production" ? U.exports = Re() : U.exports = Ce()), U.exports;
+function Te() {
+  return le || (le = 1, process.env.NODE_ENV === "production" ? J.exports = Ce() : J.exports = xe()), J.exports;
 }
-var V = xe();
+var X = Te();
 const ce = {
   solid: {
     surfaceColor: "#3b82f6",
     sideColor: "#1d4ed8",
     textColor: "#ffffff",
-    bordered: !1,
     borderColor: "transparent",
     borderWidth: 0
   },
@@ -272,7 +271,6 @@ const ce = {
     surfaceColor: "#ffffff",
     sideColor: "#2563eb",
     textColor: "#2563eb",
-    bordered: !0,
     borderColor: "#2563eb",
     borderWidth: 3
   },
@@ -280,7 +278,6 @@ const ce = {
     surfaceColor: "#181818",
     sideColor: "#494949",
     textColor: "#e5e7eb",
-    bordered: !0,
     borderColor: "#5e5e5e",
     borderWidth: 3
   },
@@ -288,7 +285,6 @@ const ce = {
     surfaceColor: "#22b8c7",
     sideColor: "#e5dd4a",
     textColor: "#fef08a",
-    bordered: !0,
     borderColor: "#fef08a",
     borderWidth: 3
   },
@@ -296,7 +292,6 @@ const ce = {
     surfaceColor: "#f472b6",
     sideColor: "#db2777",
     textColor: "#ffffff",
-    bordered: !1,
     borderColor: "transparent",
     borderWidth: 0
   },
@@ -304,7 +299,6 @@ const ce = {
     surfaceColor: "#2a2a37",
     sideColor: "#8b5e3c",
     textColor: "#c4a484",
-    bordered: !0,
     borderColor: "#8b5f39",
     borderWidth: 4
   },
@@ -312,7 +306,6 @@ const ce = {
     surfaceColor: "#2c2c39",
     sideColor: "#b22b3b",
     textColor: "#fff7ed",
-    bordered: !0,
     borderColor: "#d9445b",
     borderWidth: 4
   },
@@ -320,7 +313,6 @@ const ce = {
     surfaceColor: "#cbd5e1",
     sideColor: "#64748b",
     textColor: "#020617",
-    bordered: !0,
     borderColor: "#475569",
     borderWidth: 2
   },
@@ -328,7 +320,6 @@ const ce = {
     surfaceColor: "#ffcf10",
     sideColor: "#d29000",
     textColor: "#422006",
-    bordered: !0,
     borderColor: "#fff0a8",
     borderWidth: 2
   },
@@ -336,104 +327,115 @@ const ce = {
     surfaceColor: "#cec3fd",
     sideColor: "#b489ff",
     textColor: "#2e1065",
-    bordered: !1,
     borderColor: "#a36eff",
     borderWidth: 4
   }
 };
-function B(s, a, l) {
-  return Math.max(a, Math.min(l, s));
+function z(c, s, l) {
+  return Math.max(s, Math.min(l, c));
 }
-function we({
-  children: s,
-  onClick: a,
+function ye({
+  children: c,
+  onClick: s,
   disabled: l = !1,
-  variant: f = "solid",
-  elevation: c = 14,
+  variant: d = "solid",
+  elevation: i = 14,
   pressInset: u = 5,
-  tilt: d = 2,
-  motion: b = 160,
-  width: T = 260,
-  height: _ = 64,
-  radius: N = 14,
-  surfaceColor: P,
-  sideColor: j,
-  textColor: E,
-  bordered: M,
-  borderColor: q,
-  borderWidth: h,
-  glareColor: J = "#ffffff",
-  glareOpacity: X = 0,
-  glareWidth: z = 0,
-  className: G = "",
-  style: A,
-  ...H
+  tilt: v = 2,
+  motion: R = 160,
+  width: A = 260,
+  height: C = 64,
+  radius: I = 14,
+  surfaceColor: $,
+  sideColor: M,
+  textColor: x,
+  borderColor: W,
+  borderWidth: G,
+  glareColor: y = "#ffffff",
+  glareOpacity: H = 0,
+  glareWidth: Z = 0,
+  className: Q = "",
+  style: w,
+  ...K
 }) {
-  const $ = ve(null), [Z, m] = ne(!1), [I, v] = ne(null), R = Math.max(0, Number(_) || 0), W = Math.max(0, Number(c) || 0), g = R * 0.3, p = B(W, 0, g), Y = Math.max(0, Number(u) || 0), D = B(Y, 0, p), F = Math.max(0, Number(d) || 0), L = Number((p / 9).toFixed(2)), e = B(F, 0, L), r = R - p, t = Math.max(0, Math.floor(r / 4)), o = Math.max(0, Number(N) || 0), C = B(o, 0, t), w = Math.max(0, Number(b) || 0), n = (O) => {
-    if (l) return;
-    const ee = $.current;
-    if (!ee) return;
-    const re = ee.getBoundingClientRect(), te = O.clientX - re.left, oe = re.width || 1;
-    te < oe * 0.33 ? v("left") : te > oe * 0.66 ? v("right") : v("middle");
-  }, i = () => {
-    v(null), m(!1);
-  }, k = (O) => {
-    l || O.button === 0 && m(!0);
-  }, Q = (O) => {
-    l || (m(!1), a && a(O));
-  }, x = ce[f] || ce.solid, ue = P ?? x.surfaceColor, fe = j ?? x.sideColor, ie = E ?? x.textColor, de = M ?? x.bordered, be = q ?? x.borderColor, me = h ?? x.borderWidth, pe = {
+  const T = Re(null), [Y, D] = ne(!1), [h, k] = ne(null), F = Math.max(0, Number(C) || 0), O = Math.max(0, Number(i) || 0), re = F * 0.3, b = z(O, 0, re), L = Math.max(0, Number(u) || 0), U = z(L, 0, b), V = Math.max(0, Number(v) || 0), q = Number((b / 9).toFixed(2)), B = z(V, 0, q), e = F - b, r = Math.max(0, Math.floor(e / 4)), t = Math.max(0, Number(I) || 0), o = z(t, 0, r), P = Math.max(0, Number(R) || 0);
+  function g(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 n = (a) => {
+    if (l || a.button !== 0 && a.pointerType === "mouse") return;
+    const f = T.current;
+    if (!f) return;
+    f.setPointerCapture(a.pointerId);
+    const _ = g(a, f);
+    k((E) => E === _ ? E : _), D(!0);
+  }, m = (a) => {
+    if (l || a.pointerType !== "mouse") return;
+    const f = T.current;
+    if (!f) return;
+    const _ = g(a, f);
+    k((E) => E === _ ? E : _);
+  }, p = (a) => {
+    const f = T.current;
+    try {
+      f?.hasPointerCapture(a.pointerId) && f.releasePointerCapture(a.pointerId);
+    } catch {
+    }
+    D(!1), k(null), l && Y && p(a);
+  }, te = (a) => {
+    l || (p(a), s && s(a));
+  }, ie = (a) => {
+    l || p(a);
+  }, ue = (a) => {
+    p(a);
+  }, S = ce[d] || ce.solid, fe = $ ?? S.surfaceColor, de = M ?? S.sideColor, be = x ?? S.textColor, me = W ?? S.borderColor, pe = G ?? S.borderWidth ?? 0, _e = {
     ...{
-      "--button-raise-level": `${p}px`,
-      "--press-inset": `${D}px`,
-      "--button-hover-pressure": e,
-      "--transform-speed": `${w}ms`,
-      "--radius": `${C}px`,
-      "--surface-color": ue,
-      "--side-color": fe,
-      "--text-color": ie,
-      "--border-color": be,
-      "--border-width": `${me}px`,
-      "--glare-rgb": Te(J),
-      "--glare-alpha": X,
-      "--glare-width": z,
-      width: typeof T == "number" ? `${T}px` : T,
-      height: typeof _ == "number" ? `${_}px` : _
+      "--button-raise-level": `${b}px`,
+      "--press-inset": `${U}px`,
+      "--button-hover-pressure": B,
+      "--transform-speed": `${P}ms`,
+      "--radius": `${o}px`,
+      "--surface-color": fe,
+      "--side-color": de,
+      "--text-color": be,
+      "--border-color": me,
+      "--border-width": `${pe}px`,
+      "--glare-rgb": he(y),
+      "--glare-alpha": H,
+      "--glare-width": Z,
+      width: typeof A == "number" ? `${A}px` : A,
+      height: typeof C == "number" ? `${C}px` : C
     },
-    ...A && typeof A == "object" ? A : {}
-  }, _e = [
-    "soft-btn",
-    Z && "soft-btn--active",
-    I && `soft-btn--${I}`,
-    l && "soft-btn--disabled",
-    de && "soft-btn--bordered",
-    G
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ V.jsx(
+    ...w && typeof w == "object" ? w : {}
+  }, Ee = ["soft-btn", Y && "soft-btn--active", h && `soft-btn--${h}`, l && "soft-btn--disabled", Q].filter(Boolean).join(" ");
+  return /* @__PURE__ */ X.jsx(
     "button",
     {
-      ...H,
-      ref: $,
-      className: _e,
-      style: pe,
-      onMouseMove: n,
-      onMouseLeave: i,
-      onMouseDown: k,
-      onMouseUp: Q,
+      ...K,
+      ref: T,
+      className: Ee,
+      style: _e,
+      onPointerDown: n,
+      onPointerMove: m,
+      onPointerUp: te,
+      onPointerLeave: ie,
+      onPointerCancel: ue,
       disabled: l,
-      children: /* @__PURE__ */ V.jsx("span", { className: "soft-btn__wrapper", children: /* @__PURE__ */ V.jsx("span", { className: "soft-btn__content", children: /* @__PURE__ */ V.jsx("span", { className: "soft-btn__inner", children: s }) }) })
+      children: /* @__PURE__ */ X.jsx("span", { className: "soft-btn__wrapper", children: /* @__PURE__ */ X.jsx("span", { className: "soft-btn__content", children: /* @__PURE__ */ X.jsx("span", { className: "soft-btn__inner", children: c }) }) })
     }
   );
 }
-function Te(s) {
-  if (!s || typeof s != "string")
+function he(c) {
+  if (!c || typeof c != "string")
     return "255,255,255";
-  let a = s.replace("#", "");
-  if (a.length === 3 && (a = a.split("").map((u) => u + u).join("")), a.length !== 6)
+  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(a.slice(0, 2), 16), f = parseInt(a.slice(2, 4), 16), c = parseInt(a.slice(4, 6), 16);
-  return `${l},${f},${c}`;
+  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}`;
 }
 export {
-  we as TiltButton,
+  ye as TiltButton,
   ce as TiltButtonVariants
 };

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

@@ -1,6 +1,6 @@
-(function(i,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],d):(i=typeof globalThis<"u"?globalThis:i||self,d(i["react-tilt-button"]={},i.React))})(this,(function(i,d){"use strict";var P={exports:{}},g={};var te;function fe(){if(te)return g;te=1;var s=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function l(f,c,u){var m=null;if(u!==void 0&&(m=""+u),c.key!==void 0&&(m=""+c.key),"key"in c){u={};for(var p in c)p!=="key"&&(u[p]=c[p])}else u=c;return c=u.ref,{$$typeof:s,type:f,key:m,ref:c!==void 0?c:null,props:u}}return g.Fragment=a,g.jsx=l,g.jsxs=l,g}var y={};var oe;function ie(){return oe||(oe=1,process.env.NODE_ENV!=="production"&&(function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===T?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case H:return"Profiler";case q:return"StrictMode";case K:return"Suspense";case F:return"SuspenseList";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 G:return"Portal";case Q:return e.displayName||"Context";case Z:return(e._context.displayName||"Context")+".Consumer";case O:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ee:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case _:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function a(e){return""+e}function l(e){try{a(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),a(e)}}function f(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===_)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=C.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function m(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 p(e,r){function t(){v||(v=!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 A(){var e=s(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 E(e,r,t,o,x,k){var n=t.ref;return e={$$typeof:D,type:e,key:r,props:t,_owner:o},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:A}):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:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:k}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function W(e,r,t,o,x,k){var n=r.children;if(n!==void 0)if(o)if(ae(n)){for(o=0;o<n.length;o++)Y(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 Y(n);if(U.call(r,"key")){n=s(e);var b=Object.keys(r).filter(function(re){return re!=="key"});o=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",X[n+o]||(b=0<b.length?"{"+b.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(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 W={exports:{}},S={};var se;function fe(){if(se)return S;se=1;var c=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function l(d,i,f){var C=null;if(f!==void 0&&(C=""+f),i.key!==void 0&&(C=""+i.key),"key"in i){f={};for(var T in i)T!=="key"&&(f[T]=i[T])}else f=i;return i=f.ref,{$$typeof:c,type:d,key:C,ref:i!==void 0?i:null,props:f}}return S.Fragment=s,S.jsx=l,S.jsxs=l,S}var w={};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===J?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case ee:return"Profiler";case K:return"StrictMode";case P:return"Suspense";case V:return"SuspenseList";case N: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 Q:return"Portal";case j: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 B: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===k)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=I.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function C(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 T(e,r){function t(){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))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function O(){var e=c(this.type);return z[e]||(z[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,g,A){var n=t.ref;return e={$$typeof:U,type:e,key:r,props:t,_owner:o},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:O}):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:g}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function D(e,r,t,o,g,A){var n=r.children;if(n!==void 0)if(o)if(ne(n)){for(o=0;o<n.length;o++)F(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 F(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}",H[n+o]||(_=0<_.length?"{"+_.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,b,n),X[n+o]=!0)}if(n=null,t!==void 0&&(l(t),n=""+t),m(r)&&(l(r.key),n=""+r.key),"key"in r){t={};for(var j in r)j!=="key"&&(t[j]=r[j])}else t=r;return n&&p(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),E(e,n,t,c(),x,k)}function Y(e){$(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===_&&(e._payload.status==="fulfilled"?$(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function $(e){return typeof e=="object"&&e!==null&&e.$$typeof===D}var R=d,D=Symbol.for("react.transitional.element"),G=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),H=Symbol.for("react.profiler"),Z=Symbol.for("react.consumer"),Q=Symbol.for("react.context"),O=Symbol.for("react.forward_ref"),K=Symbol.for("react.suspense"),F=Symbol.for("react.suspense_list"),ee=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),L=Symbol.for("react.activity"),T=Symbol.for("react.client.reference"),C=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U=Object.prototype.hasOwnProperty,ae=Array.isArray,S=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var v,V={},B=R.react_stack_bottom_frame.bind(R,u)(),J=S(f(u)),X={};y.Fragment=w,y.jsx=function(e,r,t){var o=1e4>C.recentlyCreatedOwnerStacks++;return W(e,r,t,!1,o?Error("react-stack-top-frame"):B,o?S(f(e)):J)},y.jsxs=function(e,r,t){var o=1e4>C.recentlyCreatedOwnerStacks++;return W(e,r,t,!0,o?Error("react-stack-top-frame"):B,o?S(f(e)):J)}})()),y}var ne;function de(){return ne||(ne=1,process.env.NODE_ENV==="production"?P.exports=fe():P.exports=ie()),P.exports}var M=de();const z={solid:{surfaceColor:"#3b82f6",sideColor:"#1d4ed8",textColor:"#ffffff",bordered:!1,borderColor:"transparent",borderWidth:0},outline:{surfaceColor:"#ffffff",sideColor:"#2563eb",textColor:"#2563eb",bordered:!0,borderColor:"#2563eb",borderWidth:3},dark:{surfaceColor:"#181818",sideColor:"#494949",textColor:"#e5e7eb",bordered:!0,borderColor:"#5e5e5e",borderWidth:3},arcade:{surfaceColor:"#22b8c7",sideColor:"#e5dd4a",textColor:"#fef08a",bordered:!0,borderColor:"#fef08a",borderWidth:3},gum:{surfaceColor:"#f472b6",sideColor:"#db2777",textColor:"#ffffff",bordered:!1,borderColor:"transparent",borderWidth:0},carbon:{surfaceColor:"#2a2a37",sideColor:"#8b5e3c",textColor:"#c4a484",bordered:!0,borderColor:"#8b5f39",borderWidth:4},warning:{surfaceColor:"#2c2c39",sideColor:"#b22b3b",textColor:"#fff7ed",bordered:!0,borderColor:"#d9445b",borderWidth:4},steel:{surfaceColor:"#cbd5e1",sideColor:"#64748b",textColor:"#020617",bordered:!0,borderColor:"#475569",borderWidth:2},gold:{surfaceColor:"#ffcf10",sideColor:"#d29000",textColor:"#422006",bordered:!0,borderColor:"#fff0a8",borderWidth:2},lavender:{surfaceColor:"#cec3fd",sideColor:"#b489ff",textColor:"#2e1065",bordered:!1,borderColor:"#a36eff",borderWidth:4}};function I(s,a,l){return Math.max(a,Math.min(l,s))}function be({children:s,onClick:a,disabled:l=!1,variant:f="solid",elevation:c=14,pressInset:u=5,tilt:m=2,motion:p=160,width:A=260,height:E=64,radius:W=14,surfaceColor:Y,sideColor:$,textColor:R,bordered:D,borderColor:G,borderWidth:w,glareColor:q="#ffffff",glareOpacity:H=0,glareWidth:Z=0,className:Q="",style:O,...K}){const F=d.useRef(null),[ee,_]=d.useState(!1),[L,T]=d.useState(null),C=Math.max(0,Number(E)||0),U=Math.max(0,Number(c)||0),S=C*.3,v=I(U,0,S),V=Math.max(0,Number(u)||0),B=I(V,0,v),J=Math.max(0,Number(m)||0),X=Number((v/9).toFixed(2)),e=I(J,0,X),r=C-v,t=Math.max(0,Math.floor(r/4)),o=Math.max(0,Number(W)||0),x=I(o,0,t),k=Math.max(0,Number(p)||0),n=N=>{if(l)return;const se=F.current;if(!se)return;const le=se.getBoundingClientRect(),ce=N.clientX-le.left,ue=le.width||1;ce<ue*.33?T("left"):ce>ue*.66?T("right"):T("middle")},b=()=>{T(null),_(!1)},j=N=>{l||N.button===0&&_(!0)},re=N=>{l||(_(!1),a&&a(N))},h=z[f]||z.solid,pe=Y??h.surfaceColor,_e=$??h.sideColor,ve=R??h.textColor,Ee=D??h.bordered,Re=G??h.borderColor,Te=w??h.borderWidth,Ce={...{"--button-raise-level":`${v}px`,"--press-inset":`${B}px`,"--button-hover-pressure":e,"--transform-speed":`${k}ms`,"--radius":`${x}px`,"--surface-color":pe,"--side-color":_e,"--text-color":ve,"--border-color":Re,"--border-width":`${Te}px`,"--glare-rgb":me(q),"--glare-alpha":H,"--glare-width":Z,width:typeof A=="number"?`${A}px`:A,height:typeof E=="number"?`${E}px`:E},...O&&typeof O=="object"?O:{}},xe=["soft-btn",ee&&"soft-btn--active",L&&`soft-btn--${L}`,l&&"soft-btn--disabled",Ee&&"soft-btn--bordered",Q].filter(Boolean).join(" ");return M.jsx("button",{...K,ref:F,className:xe,style:Ce,onMouseMove:n,onMouseLeave:b,onMouseDown:j,onMouseUp:re,disabled:l,children:M.jsx("span",{className:"soft-btn__wrapper",children:M.jsx("span",{className:"soft-btn__content",children:M.jsx("span",{className:"soft-btn__inner",children:s})})})})}function me(s){if(!s||typeof s!="string")return"255,255,255";let a=s.replace("#","");if(a.length===3&&(a=a.split("").map(u=>u+u).join("")),a.length!==6)return"255,255,255";const l=parseInt(a.slice(0,2),16),f=parseInt(a.slice(2,4),16),c=parseInt(a.slice(4,6),16);return`${l},${f},${c}`}i.TiltButton=be,i.TiltButtonVariants=z,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,o,n,_,n),H[n+o]=!0)}if(n=null,t!==void 0&&(l(t),n=""+t),C(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&&T(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),x(e,n,t,i(),g,A)}function F(e){L(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?L(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function L(e){return typeof e=="object"&&e!==null&&e.$$typeof===U}var h=m,U=Symbol.for("react.transitional.element"),Q=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),K=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),j=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),P=Symbol.for("react.suspense"),V=Symbol.for("react.suspense_list"),B=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),J=Symbol.for("react.client.reference"),I=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 X,z={},G=h.react_stack_bottom_frame.bind(h,f)(),q=p(d(f)),H={};w.Fragment=k,w.jsx=function(e,r,t){var o=1e4>I.recentlyCreatedOwnerStacks++;return D(e,r,t,!1,o?Error("react-stack-top-frame"):G,o?p(d(e)):q)},w.jsxs=function(e,r,t){var o=1e4>I.recentlyCreatedOwnerStacks++;return D(e,r,t,!0,o?Error("react-stack-top-frame"):G,o?p(d(e)):q)}})()),w}var ce;function de(){return ce||(ce=1,process.env.NODE_ENV==="production"?W.exports=fe():W.exports=ue()),W.exports}var Y=de();const Z={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 $(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:C=2,motion:T=160,width:O=260,height:x=64,radius:D=14,surfaceColor:F,sideColor:L,textColor:h,borderColor:U,borderWidth:Q,glareColor:k="#ffffff",glareOpacity:K=0,glareWidth:ee=0,className:re="",style:j,...te}){const P=m.useRef(null),[V,B]=m.useState(!1),[y,N]=m.useState(null),J=Math.max(0,Number(x)||0),I=Math.max(0,Number(i)||0),ne=J*.3,p=$(I,0,ne),X=Math.max(0,Number(f)||0),z=$(X,0,p),G=Math.max(0,Number(C)||0),q=Number((p/9).toFixed(2)),H=$(G,0,q),e=J-p,r=Math.max(0,Math.floor(e/4)),t=Math.max(0,Number(D)||0),o=$(t,0,r),g=Math.max(0,Number(T)||0);function A(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=P.current;if(!u)return;u.setPointerCapture(a.pointerId);const E=A(a,u);N(R=>R===E?R:E),B(!0)},_=a=>{if(l||a.pointerType!=="mouse")return;const u=P.current;if(!u)return;const E=A(a,u);N(R=>R===E?R:E)},v=a=>{const u=P.current;try{u?.hasPointerCapture(a.pointerId)&&u.releasePointerCapture(a.pointerId)}catch{}B(!1),N(null),l&&V&&v(a)},ae=a=>{l||(v(a),s&&s(a))},pe=a=>{l||v(a)},_e=a=>{v(a)},M=Z[d]||Z.solid,ve=F??M.surfaceColor,Ee=L??M.sideColor,Re=h??M.textColor,Ce=U??M.borderColor,Te=Q??M.borderWidth??0,xe={...{"--button-raise-level":`${p}px`,"--press-inset":`${z}px`,"--button-hover-pressure":H,"--transform-speed":`${g}ms`,"--radius":`${o}px`,"--surface-color":ve,"--side-color":Ee,"--text-color":Re,"--border-color":Ce,"--border-width":`${Te}px`,"--glare-rgb":me(k),"--glare-alpha":K,"--glare-width":ee,width:typeof O=="number"?`${O}px`:O,height:typeof x=="number"?`${x}px`:x},...j&&typeof j=="object"?j:{}},he=["soft-btn",V&&"soft-btn--active",y&&`soft-btn--${y}`,l&&"soft-btn--disabled",re].filter(Boolean).join(" ");return Y.jsx("button",{...te,ref:P,className:he,style:xe,onPointerDown:n,onPointerMove:_,onPointerUp:ae,onPointerLeave:pe,onPointerCancel:_e,disabled:l,children:Y.jsx("span",{className:"soft-btn__wrapper",children:Y.jsx("span",{className:"soft-btn__content",children:Y.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=Z,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-tilt-button",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "description": "",
     "license": "MIT",
     "author": "archisvaze",