react-tilt-button 0.0.6

package/README.md

@@ -0,0 +1,224 @@
+# React Tilt Button
+
+> A physical, 3D tactile React button component with tilt, squish, and real depth.
+
+🔗 **Live Demo:** https://react-tilt-button.vercel.app/
+
+![React Tilt Button Preview](https://react-tilt-button.vercel.app/og-image.png)
+
+Features:
+
+- Tilts on hover (left / middle / right)
+- Squishes on press
+- Has a visible “side wall” (depth)
+- Enforces physical constraints so it never breaks
+- Supports **predefined style variants**
+- Is fully configurable via props
+
+Inspired by `react-awesome-button`, but implemented as a small, dependency-free component.
+
+---
+
+## Installation
+
+```bash
+npm install react-tilt-button
+```
+
+```jsx
+import { TiltButton } from 'react-tilt-button';
+import '/node_modules/react-tilt-button/dist/react-tilt-button.css';
+```
+
+---
+
+## Basic Usage
+
+```jsx
+<TiltButton onClick={() => alert('Clicked!')}>Click me</TiltButton>
+```
+
+---
+
+## Using Variants
+
+Variants are **predefined visual styles** (material / theme presets).
+
+```jsx
+<TiltButton variant="solid">Solid</TiltButton>
+<TiltButton variant="outline">Outline</TiltButton>
+<TiltButton variant="arcade">Arcade</TiltButton>
+<TiltButton variant="carbon">Carbon</TiltButton>
+<TiltButton variant="warning">Warning</TiltButton>
+```
+
+You can still override any value manually:
+
+```jsx
+<TiltButton
+    variant='solid'
+    surfaceColor='#10b981'
+>
+    Custom Green
+</TiltButton>
+```
+
+---
+
+## Demo
+
+Try it live here:
+
+👉 **https://react-tilt-button.vercel.app/**
+
+The demo lets you:
+
+- Test all variants
+- Change geometry (depth, radius, tilt, etc.)
+- See physical constraints in action
+- Copy settings for your own usage
+
+## Full Example
+
+```jsx
+<TiltButton
+    variant='arcade'
+    width={400}
+    height={120}
+    elevation={20}
+    pressInset={10}
+    tilt={4}
+    radius={14}
+    motion={160}
+>
+    My Button
+</TiltButton>
+```
+
+---
+
+## Physical Constraints (Important)
+
+The component automatically clamps values:
+
+- `elevation` ≤ `height * 0.3`
+- `pressInset` ≤ `elevation`
+- `tilt` ≤ `elevation / 9`
+- `radius` ≤ `(height - elevation) / 4`
+
+So the button:
+
+- Never crashes
+- Never inverts
+- Never visually breaks
+
+---
+
+## Props
+
+### Core
+
+| Prop       | Type      | Default |
+| ---------- | --------- | ------- |
+| `children` | ReactNode | —       |
+| `onClick`  | function  | —       |
+| `disabled` | boolean   | `false` |
+
+---
+
+### Variant
+
+| Prop      | Type   | Default | Description                    |
+| --------- | ------ | ------- | ------------------------------ |
+| `variant` | string | `solid` | Predefined visual style preset |
+
+---
+
+### 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                |
+
+---
+
+### Colors (Optional Overrides)
+
+These override the selected variant.
+
+| Prop           |
+| -------------- |
+| `surfaceColor` |
+| `sideColor`    |
+| `textColor`    |
+
+---
+
+### Border (Optional Overrides)
+
+| Prop          |
+| ------------- |
+| `bordered`    |
+| `borderColor` |
+| `borderWidth` |
+
+---
+
+### Misc
+
+| Prop        | Description               |
+| ----------- | ------------------------- |
+| `className` | Extra classes             |
+| `style`     | Merged into inline styles |
+| `...props`  | Passed to `<button>`      |
+
+---
+
+## Behavior
+
+- Action fires on **mouse release**
+- Hover is split into left / middle / right zones
+- This is a **physical UI primitive**, not a flat semantic button
+
+---
+
+## Styling
+
+All visuals are driven by CSS variables:
+
+- `--button-raise-level`
+- `--press-inset`
+- `--button-hover-pressure`
+- `--radius`
+- `--surface-color`
+- `--side-color`
+- `--text-color`
+- `--border-color`
+- `--border-width`
+
+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

@@ -0,0 +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;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)}.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}.soft-btn__inner{display:inline-flex;align-items:center;gap:10px}.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--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}

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

@@ -0,0 +1,424 @@
+import me, { useRef as _e, useState as oe } from "react";
+var U = { exports: {} }, S = {};
+var ne;
+function pe() {
+  if (ne) return S;
+  ne = 1;
+  var u = /* @__PURE__ */ Symbol.for("react.transitional.element"), f = /* @__PURE__ */ Symbol.for("react.fragment");
+  function a(i, s, c) {
+    var d = null;
+    if (c !== void 0 && (d = "" + c), s.key !== void 0 && (d = "" + s.key), "key" in s) {
+      c = {};
+      for (var b in s)
+        b !== "key" && (c[b] = s[b]);
+    } else c = s;
+    return s = c.ref, {
+      $$typeof: u,
+      type: i,
+      key: d,
+      ref: s !== void 0 ? s : null,
+      props: c
+    };
+  }
+  return S.Fragment = f, S.jsx = a, S.jsxs = a, S;
+}
+var N = {};
+var ae;
+function Ee() {
+  return ae || (ae = 1, process.env.NODE_ENV !== "production" && (function() {
+    function u(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Q ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case C:
+          return "Fragment";
+        case T:
+          return "Profiler";
+        case J:
+          return "StrictMode";
+        case h:
+          return "Suspense";
+        case W:
+          return "SuspenseList";
+        case G:
+          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 $:
+            return e.displayName || "Context";
+          case X:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case z:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case E:
+            return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
+          case v:
+            r = e._payload, e = e._init;
+            try {
+              return u(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function f(e) {
+      return "" + e;
+    }
+    function a(e) {
+      try {
+        f(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
+        ), f(e);
+      }
+    }
+    function i(e) {
+      if (e === C) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === v)
+        return "<...>";
+      try {
+        var r = u(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var e = A.A;
+      return e === null ? null : e.getOwner();
+    }
+    function c() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (m.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 t() {
+        I || (I = !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 x() {
+      var e = u(this.type);
+      return Y[e] || (Y[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, R, w) {
+      var n = t.ref;
+      return e = {
+        $$typeof: M,
+        type: e,
+        key: r,
+        props: t,
+        _owner: o
+      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: x
+      }) : 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: R
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: w
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function P(e, r, t, o, R, w) {
+      var n = r.children;
+      if (n !== void 0)
+        if (o)
+          if (H(n)) {
+            for (o = 0; o < n.length; o++)
+              j(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 j(n);
+      if (m.call(r, "key")) {
+        n = u(e);
+        var l = Object.keys(r).filter(function(Z) {
+          return Z !== "key";
+        });
+        o = 0 < l.length ? "{key: someKey, " + l.join(": ..., ") + ": ...}" : "{key: someKey}", L[n + o] || (l = 0 < l.length ? "{" + l.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,
+          l,
+          n
+        ), L[n + o] = !0);
+      }
+      if (n = null, t !== void 0 && (a(t), n = "" + t), d(r) && (a(r.key), n = "" + r.key), "key" in r) {
+        t = {};
+        for (var O in r)
+          O !== "key" && (t[O] = r[O]);
+      } else t = r;
+      return n && b(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), _(
+        e,
+        n,
+        t,
+        s(),
+        R,
+        w
+      );
+    }
+    function j(e) {
+      g(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === v && (e._payload.status === "fulfilled" ? g(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function g(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === M;
+    }
+    var p = me, M = /* @__PURE__ */ Symbol.for("react.transitional.element"), q = /* @__PURE__ */ Symbol.for("react.portal"), C = /* @__PURE__ */ Symbol.for("react.fragment"), J = /* @__PURE__ */ Symbol.for("react.strict_mode"), T = /* @__PURE__ */ Symbol.for("react.profiler"), X = /* @__PURE__ */ Symbol.for("react.consumer"), $ = /* @__PURE__ */ Symbol.for("react.context"), z = /* @__PURE__ */ Symbol.for("react.forward_ref"), h = /* @__PURE__ */ Symbol.for("react.suspense"), W = /* @__PURE__ */ Symbol.for("react.suspense_list"), E = /* @__PURE__ */ Symbol.for("react.memo"), v = /* @__PURE__ */ Symbol.for("react.lazy"), G = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), A = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, m = Object.prototype.hasOwnProperty, H = Array.isArray, k = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    p = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var I, Y = {}, D = p.react_stack_bottom_frame.bind(
+      p,
+      c
+    )(), F = k(i(c)), L = {};
+    N.Fragment = C, N.jsx = function(e, r, t) {
+      var o = 1e4 > A.recentlyCreatedOwnerStacks++;
+      return P(
+        e,
+        r,
+        t,
+        !1,
+        o ? Error("react-stack-top-frame") : D,
+        o ? k(i(e)) : F
+      );
+    }, N.jsxs = function(e, r, t) {
+      var o = 1e4 > A.recentlyCreatedOwnerStacks++;
+      return P(
+        e,
+        r,
+        t,
+        !0,
+        o ? Error("react-stack-top-frame") : D,
+        o ? k(i(e)) : F
+      );
+    };
+  })()), N;
+}
+var se;
+function ve() {
+  return se || (se = 1, process.env.NODE_ENV === "production" ? U.exports = pe() : U.exports = Ee()), U.exports;
+}
+var V = ve();
+const le = {
+  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 B(u, f, a) {
+  return Math.max(f, Math.min(a, u));
+}
+function Te({
+  children: u,
+  onClick: f,
+  disabled: a = !1,
+  variant: i = "solid",
+  elevation: s = 14,
+  pressInset: c = 5,
+  tilt: d = 2,
+  motion: b = 160,
+  width: x = 260,
+  height: _ = 64,
+  radius: P = 14,
+  surfaceColor: j,
+  sideColor: g,
+  textColor: p,
+  bordered: M,
+  borderColor: q,
+  borderWidth: C,
+  className: J = "",
+  style: T,
+  ...X
+}) {
+  const $ = _e(null), [z, h] = oe(!1), [W, E] = oe(null), v = Math.max(0, Number(_) || 0), G = Math.max(0, Number(s) || 0), A = v * 0.3, m = B(G, 0, A), H = Math.max(0, Number(c) || 0), k = B(H, 0, m), I = Math.max(0, Number(d) || 0), Y = Number((m / 9).toFixed(2)), D = B(I, 0, Y), F = v - m, L = Math.max(0, Math.floor(F / 4)), e = Math.max(0, Number(P) || 0), r = B(e, 0, L), t = Math.max(0, Number(b) || 0), o = (y) => {
+    if (a) return;
+    const K = $.current;
+    if (!K) return;
+    const ee = K.getBoundingClientRect(), re = y.clientX - ee.left, te = ee.width || 1;
+    re < te * 0.33 ? E("left") : re > te * 0.66 ? E("right") : E("middle");
+  }, R = () => {
+    E(null), h(!1);
+  }, w = (y) => {
+    a || y.button === 0 && h(!0);
+  }, n = (y) => {
+    a || (h(!1), f && f(y));
+  }, l = le[i] || le.solid, O = j ?? l.surfaceColor, Z = g ?? l.sideColor, ce = p ?? l.textColor, ue = M ?? l.bordered, fe = q ?? l.borderColor, ie = C ?? l.borderWidth, de = {
+    ...{
+      "--button-raise-level": `${m}px`,
+      "--press-inset": `${k}px`,
+      "--button-hover-pressure": D,
+      "--transform-speed": `${t}ms`,
+      "--radius": `${r}px`,
+      "--surface-color": O,
+      "--side-color": Z,
+      "--text-color": ce,
+      "--border-color": fe,
+      "--border-width": `${ie}px`,
+      width: typeof x == "number" ? `${x}px` : x,
+      height: typeof _ == "number" ? `${_}px` : _
+    },
+    ...T && typeof T == "object" ? T : {}
+  }, be = [
+    "soft-btn",
+    z && "soft-btn--active",
+    W && `soft-btn--${W}`,
+    a && "soft-btn--disabled",
+    ue && "soft-btn--bordered",
+    J
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ V.jsx(
+    "button",
+    {
+      ...X,
+      ref: $,
+      className: be,
+      style: de,
+      onMouseMove: o,
+      onMouseLeave: R,
+      onMouseDown: w,
+      onMouseUp: n,
+      disabled: a,
+      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: u }) }) })
+    }
+  );
+}
+export {
+  Te as TiltButton,
+  le as TiltButtonVariants
+};

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

@@ -0,0 +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 g={exports:{}},C={};var re;function ue(){if(re)return C;re=1;var u=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function a(b,s,c){var m=null;if(c!==void 0&&(m=""+c),s.key!==void 0&&(m=""+s.key),"key"in s){c={};for(var p in s)p!=="key"&&(c[p]=s[p])}else c=s;return s=c.ref,{$$typeof:u,type:b,key:m,ref:s!==void 0?s:null,props:c}}return C.Fragment=f,C.jsx=a,C.jsxs=a,C}var h={};var te;function fe(){return te||(te=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ne?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case y:return"Fragment";case O:return"Profiler";case q:return"StrictMode";case S:return"Suspense";case L:return"SuspenseList";case Q: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 F:return e.displayName||"Context";case H:return(e._context.displayName||"Context")+".Consumer";case Z:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case R:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case T:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function f(e){return""+e}function a(e){try{f(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),f(e)}}function b(e){if(e===y)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===T)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function s(){var e=k.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function m(e){if(_.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(){U||(U=!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=u(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 v(e,r,t,o,x,N){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:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function I(e,r,t,o,x,N){var n=r.children;if(n!==void 0)if(o)if(K(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(_.call(r,"key")){n=u(e);var l=Object.keys(r).filter(function(ee){return ee!=="key"});o=0<l.length?"{key: someKey, "+l.join(": ..., ")+": ...}":"{key: someKey}",X[n+o]||(l=0<l.length?"{"+l.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,l,n),X[n+o]=!0)}if(n=null,t!==void 0&&(a(t),n=""+t),m(r)&&(a(r.key),n=""+r.key),"key"in r){t={};for(var P in r)P!=="key"&&(t[P]=r[P])}else t=r;return n&&p(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),v(e,n,t,s(),x,N)}function Y(e){$(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===T&&(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 E=d,D=Symbol.for("react.transitional.element"),G=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),H=Symbol.for("react.consumer"),F=Symbol.for("react.context"),Z=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),L=Symbol.for("react.suspense_list"),R=Symbol.for("react.memo"),T=Symbol.for("react.lazy"),Q=Symbol.for("react.activity"),ne=Symbol.for("react.client.reference"),k=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,_=Object.prototype.hasOwnProperty,K=Array.isArray,w=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var U,V={},B=E.react_stack_bottom_frame.bind(E,c)(),J=w(b(c)),X={};h.Fragment=y,h.jsx=function(e,r,t){var o=1e4>k.recentlyCreatedOwnerStacks++;return I(e,r,t,!1,o?Error("react-stack-top-frame"):B,o?w(b(e)):J)},h.jsxs=function(e,r,t){var o=1e4>k.recentlyCreatedOwnerStacks++;return I(e,r,t,!0,o?Error("react-stack-top-frame"):B,o?w(b(e)):J)}})()),h}var oe;function ie(){return oe||(oe=1,process.env.NODE_ENV==="production"?g.exports=ue():g.exports=fe()),g.exports}var M=ie();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 W(u,f,a){return Math.max(f,Math.min(a,u))}function de({children:u,onClick:f,disabled:a=!1,variant:b="solid",elevation:s=14,pressInset:c=5,tilt:m=2,motion:p=160,width:A=260,height:v=64,radius:I=14,surfaceColor:Y,sideColor:$,textColor:E,bordered:D,borderColor:G,borderWidth:y,className:q="",style:O,...H}){const F=d.useRef(null),[Z,S]=d.useState(!1),[L,R]=d.useState(null),T=Math.max(0,Number(v)||0),Q=Math.max(0,Number(s)||0),k=T*.3,_=W(Q,0,k),K=Math.max(0,Number(c)||0),w=W(K,0,_),U=Math.max(0,Number(m)||0),V=Number((_/9).toFixed(2)),B=W(U,0,V),J=T-_,X=Math.max(0,Math.floor(J/4)),e=Math.max(0,Number(I)||0),r=W(e,0,X),t=Math.max(0,Number(p)||0),o=j=>{if(a)return;const ae=F.current;if(!ae)return;const se=ae.getBoundingClientRect(),le=j.clientX-se.left,ce=se.width||1;le<ce*.33?R("left"):le>ce*.66?R("right"):R("middle")},x=()=>{R(null),S(!1)},N=j=>{a||j.button===0&&S(!0)},n=j=>{a||(S(!1),f&&f(j))},l=z[b]||z.solid,P=Y??l.surfaceColor,ee=$??l.sideColor,be=E??l.textColor,me=D??l.bordered,pe=G??l.borderColor,_e=y??l.borderWidth,ve={...{"--button-raise-level":`${_}px`,"--press-inset":`${w}px`,"--button-hover-pressure":B,"--transform-speed":`${t}ms`,"--radius":`${r}px`,"--surface-color":P,"--side-color":ee,"--text-color":be,"--border-color":pe,"--border-width":`${_e}px`,width:typeof A=="number"?`${A}px`:A,height:typeof v=="number"?`${v}px`:v},...O&&typeof O=="object"?O:{}},Ee=["soft-btn",Z&&"soft-btn--active",L&&`soft-btn--${L}`,a&&"soft-btn--disabled",me&&"soft-btn--bordered",q].filter(Boolean).join(" ");return M.jsx("button",{...H,ref:F,className:Ee,style:ve,onMouseMove:o,onMouseLeave:x,onMouseDown:N,onMouseUp:n,disabled:a,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:u})})})})}i.TiltButton=de,i.TiltButtonVariants=z,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,63 @@
+{
+    "name": "react-tilt-button",
+    "version": "0.0.6",
+    "description": "",
+    "license": "MIT",
+    "author": "archisvaze",
+    "keywords": [],
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "main": "./dist/react-tilt-button.umd.js",
+    "module": "./dist/react-tilt-button.es.js",
+    "exports": {
+        ".": {
+            "import": "./dist/react-tilt-button.es.js",
+            "require": "./dist/react-tilt-button.umd.js"
+        }
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "test": "vitest run",
+        "watch": "vitest",
+        "coverage": "vitest run --coverage"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "eslintConfig": {
+        "env": {
+            "browser": true,
+            "node": true,
+            "es2020": true
+        },
+        "extends": [
+            "eslint:recommended",
+            "plugin:react/recommended"
+        ],
+        "parserOptions": {
+            "sourceType": "module"
+        }
+    },
+    "devDependencies": {
+        "@vitejs/plugin-react": "^5.1.2",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "vite": "^7.3.1"
+    },
+    "peerDependencies": {
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3"
+    }
+}