react-tilt-button 0.1.0 → 0.1.2

package/README.md

@@ -27,7 +27,6 @@ npm install react-tilt-button
 
 ```jsx
 import { TiltButton } from 'react-tilt-button';
-import '/node_modules/react-tilt-button/dist/react-tilt-button.css';
 ```
 
 ---

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

@@ -1,3 +1,4 @@
+(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;

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

@@ -1,3 +1,4 @@
+(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:
   let props = %s;
   <%s {...props} />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-tilt-button",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "description": "",
     "license": "MIT",
     "author": "archisvaze",
@@ -11,6 +11,7 @@
     ],
     "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",
@@ -59,5 +60,8 @@
     "peerDependencies": {
         "react": "^19.2.3",
         "react-dom": "^19.2.3"
+    },
+    "dependencies": {
+        "vite-plugin-css-injected-by-js": "^3.5.2"
     }
 }

package/dist/react-tilt-button.css

@@ -1 +0,0 @@
-.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;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}}