@designbyadrian/react-interactive-input 2.0.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 Adrian von Gegerfelt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+<center>
+  <img src="assets/interactive-input-icon.svg" alt="" height="64" aria-hidden="true" />
+  <h1>React Interactive Input</h1>
+</center>
+
+![GitHub License](https://img.shields.io/github/license/designbyadrian/react-interactive-input?style=for-the-badge)
+
+In Blender and similar 3D applications, users can adjust values in numeric input boxes by clicking and dragging horizontally, often referred to as **scrubbing.**
+
+The user typically clicks and holds the mouse over the number, then drags left or right to decrease or increase the value smoothly. This provides quick, precise control over numeric adjustments without needing to type manually or rely on up/down arrows.
+
+This component is a React implementation of that behavior, with a few additional features and customizations.
+
+## Features
+
+- **Interactive Input**: Click and drag to adjust numeric values smoothly.
+- **Customizable**: Control the step, min, and max values for the input.
+- **Controlled Component**: Fully controlled input field with a callback for value changes.
+- **Input Masking**: Custom input component for handling negative numbers.
+- **Theming**: Easily customize styles to match your application's look and feel.
+- **Accessibility**: Built with accessibility in mind.
+
+## Try it out
+
+You can try out the component in the [Storybook](https://designbyadrian.github.io/react-interactive-input).
+
+🦄🕹️🍕
+
+## Installation
+
+To install the library, use npm or yarn:
+
+```bash
+npm install @designbyadrian/react-interactive-input
+# or
+yarn add @designbyadrian/react-interactive-input
+```
+
+## Usage
+
+```jsx
+import { InteractiveInput } from '@designbyadrian/react-interactive-input';
+
+function MyComponent() {
+  return <InteractiveInput value={42} onChange={value => console.log(value)} />;
+}
+```
+
+## Attributes
+
+The `InteractiveInput` component accepts all properties of the HTMLInputElement element, especially the following attributes:
+
+- `value`: The initial value of the input field.
+- `onChange`: A callback function that receives the new value when it changes.
+- `step`: The amount to increment or decrement the value when scrubbing.
+- `min`: The minimum value allowed.
+- `max`: The maximum value allowed.
+
+## Components
+
+The library exports two components: `InteractiveInput` and `MaskedInput`.
+
+### InteractiveInput
+
+The main component for interactive input behavior.
+
+### MaskedInput
+
+A custom input component featuring input masking specifically designed to address limitations with negative numbers in standard HTML input elements. This component ensures that negative values are properly formatted and accepted by the input field, preventing unexpected behavior or errors when handling signed numbers.
+
+You can provide your own masking function to customize the behavior of the input field.
+
+Example:
+
+```jsx
+import { MaskedInput } from '@designbyadrian/react-interactive-input';
+
+function MyComponent() {
+  return (
+    <MaskedInput
+      value="-4.2"
+      onChange={e => console.log(parseFloat(e.target.value))}
+    />
+  );
+}
+```
+
+## Running locally
+
+To run the project locally, follow these steps:
+
+1. Clone the repository:
+
+```bash
+git clone
+```
+
+2. Install the dependencies:
+
+```bash
+npm install
+# or
+yarn
+```
+
+3. Start the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+The project will be available at `http://localhost:6006`.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.

package/dist/react-interactive-input.cjs.js

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react");var ve={exports:{}},q={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Ie;function vr(){if(Ie)return q;Ie=1;var g=E,p=Symbol.for("react.element"),j=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,O=g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,D={key:!0,ref:!0,__self:!0,__source:!0};function P(h,d,x){var m,T={},c=null,R=null;x!==void 0&&(c=""+x),d.key!==void 0&&(c=""+d.key),d.ref!==void 0&&(R=d.ref);for(m in d)u.call(d,m)&&!D.hasOwnProperty(m)&&(T[m]=d[m]);if(h&&h.defaultProps)for(m in d=h.defaultProps,d)T[m]===void 0&&(T[m]=d[m]);return{$$typeof:p,type:h,key:c,ref:R,props:T,_owner:O.current}}return q.Fragment=j,q.jsx=P,q.jsxs=P,q}var B={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Ve;function mr(){return Ve||(Ve=1,process.env.NODE_ENV!=="production"&&function(){var g=E,p=Symbol.for("react.element"),j=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),O=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),P=Symbol.for("react.provider"),h=Symbol.for("react.context"),d=Symbol.for("react.forward_ref"),x=Symbol.for("react.suspense"),m=Symbol.for("react.suspense_list"),T=Symbol.for("react.memo"),c=Symbol.for("react.lazy"),R=Symbol.for("react.offscreen"),C=Symbol.iterator,A="@@iterator";function V(e){if(e===null||typeof e!="object")return null;var r=C&&e[C]||e[A];return typeof r=="function"?r:null}var F=g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function i(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];_("error",e,t)}}function _(e,r,t){{var n=F.ReactDebugCurrentFrame,s=n.getStackAddendum();s!==""&&(r+="%s",t=t.concat([s]));var l=t.map(function(o){return String(o)});l.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,l)}}var W=!1,Y=!1,J=!1,ne=!1,X=!1,K;K=Symbol.for("react.module.reference");function z(e){return!!(typeof e=="string"||typeof e=="function"||e===u||e===D||X||e===O||e===x||e===m||ne||e===R||W||Y||J||typeof e=="object"&&e!==null&&(e.$$typeof===c||e.$$typeof===T||e.$$typeof===P||e.$$typeof===h||e.$$typeof===d||e.$$typeof===K||e.getModuleId!==void 0))}function G(e,r,t){var n=e.displayName;if(n)return n;var s=r.displayName||r.name||"";return s!==""?t+"("+s+")":t}function H(e){return e.displayName||"Context"}function w(e){if(e==null)return null;if(typeof e.tag=="number"&&i("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case u:return"Fragment";case j:return"Portal";case D:return"Profiler";case O:return"StrictMode";case x:return"Suspense";case m:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case h:var r=e;return H(r)+".Consumer";case P:var t=e;return H(t._context)+".Provider";case d:return G(e,e.render,"ForwardRef");case T:var n=e.displayName||null;return n!==null?n:w(e.type)||"Memo";case c:{var s=e,l=s._payload,o=s._init;try{return w(o(l))}catch{return null}}}return null}var y=Object.assign,M=0,Z,me,ye,ge,pe,he,be;function Ee(){}Ee.__reactDisabledLog=!0;function We(){{if(M===0){Z=console.log,me=console.info,ye=console.warn,ge=console.error,pe=console.group,he=console.groupCollapsed,be=console.groupEnd;var e={configurable:!0,enumerable:!0,value:Ee,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}M++}}function Ye(){{if(M--,M===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:y({},e,{value:Z}),info:y({},e,{value:me}),warn:y({},e,{value:ye}),error:y({},e,{value:ge}),group:y({},e,{value:pe}),groupCollapsed:y({},e,{value:he}),groupEnd:y({},e,{value:be})})}M<0&&i("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var ae=F.ReactCurrentDispatcher,oe;function Q(e,r,t){{if(oe===void 0)try{throw Error()}catch(s){var n=s.stack.trim().match(/\n( *(at )?)/);oe=n&&n[1]||""}return`
+`+oe+e}}var ie=!1,ee;{var Ke=typeof WeakMap=="function"?WeakMap:Map;ee=new Ke}function Re(e,r){if(!e||ie)return"";{var t=ee.get(e);if(t!==void 0)return t}var n;ie=!0;var s=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var l;l=ae.current,ae.current=null,We();try{if(r){var o=function(){throw Error()};if(Object.defineProperty(o.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(o,[])}catch(S){n=S}Reflect.construct(e,[],o)}else{try{o.call()}catch(S){n=S}e.call(o.prototype)}}else{try{throw Error()}catch(S){n=S}e()}}catch(S){if(S&&n&&typeof S.stack=="string"){for(var a=S.stack.split(`
+`),b=n.stack.split(`
+`),f=a.length-1,v=b.length-1;f>=1&&v>=0&&a[f]!==b[v];)v--;for(;f>=1&&v>=0;f--,v--)if(a[f]!==b[v]){if(f!==1||v!==1)do if(f--,v--,v<0||a[f]!==b[v]){var k=`
+`+a[f].replace(" at new "," at ");return e.displayName&&k.includes("<anonymous>")&&(k=k.replace("<anonymous>",e.displayName)),typeof e=="function"&&ee.set(e,k),k}while(f>=1&&v>=0);break}}}finally{ie=!1,ae.current=l,Ye(),Error.prepareStackTrace=s}var $=e?e.displayName||e.name:"",I=$?Q($):"";return typeof e=="function"&&ee.set(e,I),I}function Ue(e,r,t){return Re(e,!1)}function Ne(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function re(e,r,t){if(e==null)return"";if(typeof e=="function")return Re(e,Ne(e));if(typeof e=="string")return Q(e);switch(e){case x:return Q("Suspense");case m:return Q("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case d:return Ue(e.render);case T:return re(e.type,r,t);case c:{var n=e,s=n._payload,l=n._init;try{return re(l(s),r,t)}catch{}}}return""}var U=Object.prototype.hasOwnProperty,_e={},we=F.ReactDebugCurrentFrame;function te(e){if(e){var r=e._owner,t=re(e.type,e._source,r?r.type:null);we.setExtraStackFrame(t)}else we.setExtraStackFrame(null)}function qe(e,r,t,n,s){{var l=Function.call.bind(U);for(var o in e)if(l(e,o)){var a=void 0;try{if(typeof e[o]!="function"){var b=Error((n||"React class")+": "+t+" type `"+o+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[o]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw b.name="Invariant Violation",b}a=e[o](r,o,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(f){a=f}a&&!(a instanceof Error)&&(te(s),i("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,o,typeof a),te(null)),a instanceof Error&&!(a.message in _e)&&(_e[a.message]=!0,te(s),i("Failed %s type: %s",t,a.message),te(null))}}}var Be=Array.isArray;function ue(e){return Be(e)}function Je(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function Xe(e){try{return Se(e),!1}catch{return!0}}function Se(e){return""+e}function Te(e){if(Xe(e))return i("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Je(e)),Se(e)}var N=F.ReactCurrentOwner,ze={key:!0,ref:!0,__self:!0,__source:!0},Ce,Oe,se;se={};function Ge(e){if(U.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function He(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 Ze(e,r){if(typeof e.ref=="string"&&N.current&&r&&N.current.stateNode!==r){var t=w(N.current.type);se[t]||(i('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',w(N.current.type),e.ref),se[t]=!0)}}function Qe(e,r){{var t=function(){Ce||(Ce=!0,i("%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://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function er(e,r){{var t=function(){Oe||(Oe=!0,i("%s: `ref` 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://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var rr=function(e,r,t,n,s,l,o){var a={$$typeof:p,type:e,key:r,ref:t,props:o,_owner:l};return a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(a,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(a,"_source",{configurable:!1,enumerable:!1,writable:!1,value:s}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a};function tr(e,r,t,n,s){{var l,o={},a=null,b=null;t!==void 0&&(Te(t),a=""+t),He(r)&&(Te(r.key),a=""+r.key),Ge(r)&&(b=r.ref,Ze(r,s));for(l in r)U.call(r,l)&&!ze.hasOwnProperty(l)&&(o[l]=r[l]);if(e&&e.defaultProps){var f=e.defaultProps;for(l in f)o[l]===void 0&&(o[l]=f[l])}if(a||b){var v=typeof e=="function"?e.displayName||e.name||"Unknown":e;a&&Qe(o,v),b&&er(o,v)}return rr(e,a,b,s,n,N.current,o)}}var le=F.ReactCurrentOwner,Pe=F.ReactDebugCurrentFrame;function L(e){if(e){var r=e._owner,t=re(e.type,e._source,r?r.type:null);Pe.setExtraStackFrame(t)}else Pe.setExtraStackFrame(null)}var ce;ce=!1;function fe(e){return typeof e=="object"&&e!==null&&e.$$typeof===p}function ke(){{if(le.current){var e=w(le.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function nr(e){return""}var xe={};function ar(e){{var r=ke();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
+
+Check the top-level render call using <`+t+">.")}return r}}function je(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=ar(r);if(xe[t])return;xe[t]=!0;var n="";e&&e._owner&&e._owner!==le.current&&(n=" It was passed a child from "+w(e._owner.type)+"."),L(e),i('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),L(null)}}function De(e,r){{if(typeof e!="object")return;if(ue(e))for(var t=0;t<e.length;t++){var n=e[t];fe(n)&&je(n,r)}else if(fe(e))e._store&&(e._store.validated=!0);else if(e){var s=V(e);if(typeof s=="function"&&s!==e.entries)for(var l=s.call(e),o;!(o=l.next()).done;)fe(o.value)&&je(o.value,r)}}}function or(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===d||r.$$typeof===T))t=r.propTypes;else return;if(t){var n=w(r);qe(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!ce){ce=!0;var s=w(r);i("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",s||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&i("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function ir(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){L(e),i("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),L(null);break}}e.ref!==null&&(L(e),i("Invalid attribute `ref` supplied to `React.Fragment`."),L(null))}}var Fe={};function Ae(e,r,t,n,s,l){{var o=z(e);if(!o){var a="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var b=nr();b?a+=b:a+=ke();var f;e===null?f="null":ue(e)?f="array":e!==void 0&&e.$$typeof===p?(f="<"+(w(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):f=typeof e,i("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",f,a)}var v=tr(e,r,t,s,l);if(v==null)return v;if(o){var k=r.children;if(k!==void 0)if(n)if(ue(k)){for(var $=0;$<k.length;$++)De(k[$],e);Object.freeze&&Object.freeze(k)}else i("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 De(k,e)}if(U.call(r,"key")){var I=w(e),S=Object.keys(r).filter(function(dr){return dr!=="key"}),de=S.length>0?"{key: someKey, "+S.join(": ..., ")+": ...}":"{key: someKey}";if(!Fe[I+de]){var fr=S.length>0?"{"+S.join(": ..., ")+": ...}":"{}";i(`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} />`,de,I,fr,I),Fe[I+de]=!0}}return e===u?ir(v):or(v),v}}function ur(e,r,t){return Ae(e,r,t,!0)}function sr(e,r,t){return Ae(e,r,t,!1)}var lr=sr,cr=ur;B.Fragment=u,B.jsx=lr,B.jsxs=cr}()),B}process.env.NODE_ENV==="production"?ve.exports=vr():ve.exports=mr();var Me=ve.exports;function yr(){let g="";return function(j){const u=/^-?\d*([.,]?)\d*$/,O=j.match(u);return O&&(g=O[0]),g}}const Le=g=>{const p=g.toString().split(".");return p.length>1?p[1].length:0},gr=yr(),$e=E.forwardRef(({mask:g=gr,onChange:p,step:j=1,value:u,...O},D)=>{const[P,h]=E.useState(u||""),d=D||E.useRef(null),x=c=>{const{value:R}=c.target,C=g(R);if(h(C),p){const A={...c,target:{...c.target,value:C.replace(",",".")}};p(A)}},m=(c,R)=>{const C=parseFloat(P.replace(",","."))||0,A=parseFloat(j.toString()),V=Le(+j),i=(R?C+A:C-A).toFixed(V),_=g(i);if(h(_),p){const Y={...new Event("change",{bubbles:!0}),target:{...c.target,value:_.replace(",",".")}};p(Y)}},T=c=>{c.key==="ArrowUp"?(c.preventDefault(),m(c,!0)):c.key==="ArrowDown"&&(c.preventDefault(),m(c,!1))};return E.useEffect(()=>{h(u||"")},[u]),Me.jsx("input",{...O,type:"text",ref:d,value:P,onChange:x,onKeyDown:T})});function pr({value:g,modifiers:p={altKey:1,ctrlKey:1,metaKey:1,shiftKey:.1},style:j={},...u}){const[O,D]=E.useState(String(g||0)),[P,h]=E.useState(""),[,d]=E.useState([0,0]),x=E.useRef(0),m=u.step?+u.step:1,T={cursor:"ew-resize",...j},c=i=>{var _;D(i.target.value),i.target.value!=="-"&&((_=u.onChange)==null||_.call(u,i))},R=E.useCallback(i=>{d(_=>{const{clientX:W,clientY:Y}=i,[J,ne]=_,X=J-W,K=ne-Y;let z=1;P&&(z=p[P]||1);const G=m*z,H=Le(G);let w=Math.sqrt(X*X+K*K)*G;W<J&&(w=-w);let y=x.current+w;if(u.min&&(y=Math.max(y,+u.min)),u.max&&(y=Math.min(y,+u.max)),y=+y.toFixed(H),y&&D(String(y)),y&&u.onChange){const Z={...new Event("change",{bubbles:!0}),target:{...i.target,value:y}};u.onChange(Z)}return _})},[P,u.max,u.min,m,p]),C=E.useCallback(()=>{document.removeEventListener("mousemove",R),document.removeEventListener("mouseup",C)},[R]),A=E.useCallback(i=>{let _=+O;isNaN(_)&&(_=+(u.defaultValue||u.min||0)),x.current=_,d([i.clientX,i.clientY]),document.addEventListener("mousemove",R),document.addEventListener("mouseup",C)},[R,C,g,u.min,u.defaultValue]),V=i=>{i.metaKey?h("metaKey"):i.ctrlKey?h("ctrlKey"):i.altKey?h("altKey"):i.shiftKey&&h("shiftKey")},F=()=>{h("")};return E.useEffect(()=>{D(String(g||0))},[g]),E.useEffect(()=>(document.addEventListener("keydown",V),document.addEventListener("keyup",F),()=>{document.removeEventListener("mousemove",R),document.removeEventListener("mouseup",C),document.removeEventListener("keydown",V),document.removeEventListener("keyup",F)}),[]),Me.jsx($e,{...u,style:T,onChange:c,onMouseDown:A,value:O})}exports.InteractiveInput=pr;exports.MaskedInput=$e;

package/dist/react-interactive-input.es.js

@@ -0,0 +1,757 @@
+import $e, { forwardRef as gr, useState as te, useRef as We, useEffect as me, useCallback as ve } from "react";
+var ye = { exports: {} }, N = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Me;
+function pr() {
+  if (Me) return N;
+  Me = 1;
+  var g = $e, p = Symbol.for("react.element"), k = Symbol.for("react.fragment"), u = Object.prototype.hasOwnProperty, C = g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, j = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function O(h, d, P) {
+    var m, T = {}, c = null, b = null;
+    P !== void 0 && (c = "" + P), d.key !== void 0 && (c = "" + d.key), d.ref !== void 0 && (b = d.ref);
+    for (m in d) u.call(d, m) && !j.hasOwnProperty(m) && (T[m] = d[m]);
+    if (h && h.defaultProps) for (m in d = h.defaultProps, d) T[m] === void 0 && (T[m] = d[m]);
+    return { $$typeof: p, type: h, key: c, ref: b, props: T, _owner: C.current };
+  }
+  return N.Fragment = k, N.jsx = O, N.jsxs = O, N;
+}
+var q = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Le;
+function hr() {
+  return Le || (Le = 1, process.env.NODE_ENV !== "production" && function() {
+    var g = $e, p = Symbol.for("react.element"), k = Symbol.for("react.portal"), u = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), j = Symbol.for("react.profiler"), O = Symbol.for("react.provider"), h = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), P = Symbol.for("react.suspense"), m = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), c = Symbol.for("react.lazy"), b = Symbol.for("react.offscreen"), S = Symbol.iterator, F = "@@iterator";
+    function V(e) {
+      if (e === null || typeof e != "object")
+        return null;
+      var r = S && e[S] || e[F];
+      return typeof r == "function" ? r : null;
+    }
+    var D = g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function i(e) {
+      {
+        for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
+          t[n - 1] = arguments[n];
+        R("error", e, t);
+      }
+    }
+    function R(e, r, t) {
+      {
+        var n = D.ReactDebugCurrentFrame, s = n.getStackAddendum();
+        s !== "" && (r += "%s", t = t.concat([s]));
+        var l = t.map(function(o) {
+          return String(o);
+        });
+        l.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, l);
+      }
+    }
+    var $ = !1, W = !1, B = !1, ne = !1, J = !1, Y;
+    Y = Symbol.for("react.module.reference");
+    function X(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === u || e === j || J || e === C || e === P || e === m || ne || e === b || $ || W || B || typeof e == "object" && e !== null && (e.$$typeof === c || e.$$typeof === T || e.$$typeof === O || e.$$typeof === h || e.$$typeof === d || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      e.$$typeof === Y || e.getModuleId !== void 0));
+    }
+    function z(e, r, t) {
+      var n = e.displayName;
+      if (n)
+        return n;
+      var s = r.displayName || r.name || "";
+      return s !== "" ? t + "(" + s + ")" : t;
+    }
+    function G(e) {
+      return e.displayName || "Context";
+    }
+    function _(e) {
+      if (e == null)
+        return null;
+      if (typeof e.tag == "number" && i("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+        return e.displayName || e.name || null;
+      if (typeof e == "string")
+        return e;
+      switch (e) {
+        case u:
+          return "Fragment";
+        case k:
+          return "Portal";
+        case j:
+          return "Profiler";
+        case C:
+          return "StrictMode";
+        case P:
+          return "Suspense";
+        case m:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case h:
+            var r = e;
+            return G(r) + ".Consumer";
+          case O:
+            var t = e;
+            return G(t._context) + ".Provider";
+          case d:
+            return z(e, e.render, "ForwardRef");
+          case T:
+            var n = e.displayName || null;
+            return n !== null ? n : _(e.type) || "Memo";
+          case c: {
+            var s = e, l = s._payload, o = s._init;
+            try {
+              return _(o(l));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var y = Object.assign, I = 0, H, ge, pe, he, Ee, be, Re;
+    function _e() {
+    }
+    _e.__reactDisabledLog = !0;
+    function Ue() {
+      {
+        if (I === 0) {
+          H = console.log, ge = console.info, pe = console.warn, he = console.error, Ee = console.group, be = console.groupCollapsed, Re = console.groupEnd;
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            value: _e,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: e,
+            log: e,
+            warn: e,
+            error: e,
+            group: e,
+            groupCollapsed: e,
+            groupEnd: e
+          });
+        }
+        I++;
+      }
+    }
+    function Ne() {
+      {
+        if (I--, I === 0) {
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: y({}, e, {
+              value: H
+            }),
+            info: y({}, e, {
+              value: ge
+            }),
+            warn: y({}, e, {
+              value: pe
+            }),
+            error: y({}, e, {
+              value: he
+            }),
+            group: y({}, e, {
+              value: Ee
+            }),
+            groupCollapsed: y({}, e, {
+              value: be
+            }),
+            groupEnd: y({}, e, {
+              value: Re
+            })
+          });
+        }
+        I < 0 && i("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var ae = D.ReactCurrentDispatcher, oe;
+    function Z(e, r, t) {
+      {
+        if (oe === void 0)
+          try {
+            throw Error();
+          } catch (s) {
+            var n = s.stack.trim().match(/\n( *(at )?)/);
+            oe = n && n[1] || "";
+          }
+        return `
+` + oe + e;
+      }
+    }
+    var ie = !1, Q;
+    {
+      var qe = typeof WeakMap == "function" ? WeakMap : Map;
+      Q = new qe();
+    }
+    function we(e, r) {
+      if (!e || ie)
+        return "";
+      {
+        var t = Q.get(e);
+        if (t !== void 0)
+          return t;
+      }
+      var n;
+      ie = !0;
+      var s = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var l;
+      l = ae.current, ae.current = null, Ue();
+      try {
+        if (r) {
+          var o = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(o.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(o, []);
+            } catch (w) {
+              n = w;
+            }
+            Reflect.construct(e, [], o);
+          } else {
+            try {
+              o.call();
+            } catch (w) {
+              n = w;
+            }
+            e.call(o.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (w) {
+            n = w;
+          }
+          e();
+        }
+      } catch (w) {
+        if (w && n && typeof w.stack == "string") {
+          for (var a = w.stack.split(`
+`), E = n.stack.split(`
+`), f = a.length - 1, v = E.length - 1; f >= 1 && v >= 0 && a[f] !== E[v]; )
+            v--;
+          for (; f >= 1 && v >= 0; f--, v--)
+            if (a[f] !== E[v]) {
+              if (f !== 1 || v !== 1)
+                do
+                  if (f--, v--, v < 0 || a[f] !== E[v]) {
+                    var x = `
+` + a[f].replace(" at new ", " at ");
+                    return e.displayName && x.includes("<anonymous>") && (x = x.replace("<anonymous>", e.displayName)), typeof e == "function" && Q.set(e, x), x;
+                  }
+                while (f >= 1 && v >= 0);
+              break;
+            }
+        }
+      } finally {
+        ie = !1, ae.current = l, Ne(), Error.prepareStackTrace = s;
+      }
+      var L = e ? e.displayName || e.name : "", A = L ? Z(L) : "";
+      return typeof e == "function" && Q.set(e, A), A;
+    }
+    function Be(e, r, t) {
+      return we(e, !1);
+    }
+    function Je(e) {
+      var r = e.prototype;
+      return !!(r && r.isReactComponent);
+    }
+    function ee(e, r, t) {
+      if (e == null)
+        return "";
+      if (typeof e == "function")
+        return we(e, Je(e));
+      if (typeof e == "string")
+        return Z(e);
+      switch (e) {
+        case P:
+          return Z("Suspense");
+        case m:
+          return Z("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case d:
+            return Be(e.render);
+          case T:
+            return ee(e.type, r, t);
+          case c: {
+            var n = e, s = n._payload, l = n._init;
+            try {
+              return ee(l(s), r, t);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var K = Object.prototype.hasOwnProperty, Te = {}, Se = D.ReactDebugCurrentFrame;
+    function re(e) {
+      if (e) {
+        var r = e._owner, t = ee(e.type, e._source, r ? r.type : null);
+        Se.setExtraStackFrame(t);
+      } else
+        Se.setExtraStackFrame(null);
+    }
+    function Xe(e, r, t, n, s) {
+      {
+        var l = Function.call.bind(K);
+        for (var o in e)
+          if (l(e, o)) {
+            var a = void 0;
+            try {
+              if (typeof e[o] != "function") {
+                var E = Error((n || "React class") + ": " + t + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw E.name = "Invariant Violation", E;
+              }
+              a = e[o](r, o, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (f) {
+              a = f;
+            }
+            a && !(a instanceof Error) && (re(s), i("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, o, typeof a), re(null)), a instanceof Error && !(a.message in Te) && (Te[a.message] = !0, re(s), i("Failed %s type: %s", t, a.message), re(null));
+          }
+      }
+    }
+    var ze = Array.isArray;
+    function ue(e) {
+      return ze(e);
+    }
+    function Ge(e) {
+      {
+        var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t;
+      }
+    }
+    function He(e) {
+      try {
+        return Ce(e), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Ce(e) {
+      return "" + e;
+    }
+    function Oe(e) {
+      if (He(e))
+        return i("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ge(e)), Ce(e);
+    }
+    var U = D.ReactCurrentOwner, Ze = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, xe, Pe, se;
+    se = {};
+    function Qe(e) {
+      if (K.call(e, "ref")) {
+        var r = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.ref !== void 0;
+    }
+    function er(e) {
+      if (K.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function rr(e, r) {
+      if (typeof e.ref == "string" && U.current && r && U.current.stateNode !== r) {
+        var t = _(U.current.type);
+        se[t] || (i('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', _(U.current.type), e.ref), se[t] = !0);
+      }
+    }
+    function tr(e, r) {
+      {
+        var t = function() {
+          xe || (xe = !0, i("%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://reactjs.org/link/special-props)", r));
+        };
+        t.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: t,
+          configurable: !0
+        });
+      }
+    }
+    function nr(e, r) {
+      {
+        var t = function() {
+          Pe || (Pe = !0, i("%s: `ref` 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://reactjs.org/link/special-props)", r));
+        };
+        t.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: t,
+          configurable: !0
+        });
+      }
+    }
+    var ar = function(e, r, t, n, s, l, o) {
+      var a = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: p,
+        // Built-in properties that belong on the element
+        type: e,
+        key: r,
+        ref: t,
+        props: o,
+        // Record the component responsible for creating this element.
+        _owner: l
+      };
+      return a._store = {}, Object.defineProperty(a._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(a, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: n
+      }), Object.defineProperty(a, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: s
+      }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
+    };
+    function or(e, r, t, n, s) {
+      {
+        var l, o = {}, a = null, E = null;
+        t !== void 0 && (Oe(t), a = "" + t), er(r) && (Oe(r.key), a = "" + r.key), Qe(r) && (E = r.ref, rr(r, s));
+        for (l in r)
+          K.call(r, l) && !Ze.hasOwnProperty(l) && (o[l] = r[l]);
+        if (e && e.defaultProps) {
+          var f = e.defaultProps;
+          for (l in f)
+            o[l] === void 0 && (o[l] = f[l]);
+        }
+        if (a || E) {
+          var v = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          a && tr(o, v), E && nr(o, v);
+        }
+        return ar(e, a, E, s, n, U.current, o);
+      }
+    }
+    var le = D.ReactCurrentOwner, ke = D.ReactDebugCurrentFrame;
+    function M(e) {
+      if (e) {
+        var r = e._owner, t = ee(e.type, e._source, r ? r.type : null);
+        ke.setExtraStackFrame(t);
+      } else
+        ke.setExtraStackFrame(null);
+    }
+    var ce;
+    ce = !1;
+    function fe(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === p;
+    }
+    function je() {
+      {
+        if (le.current) {
+          var e = _(le.current.type);
+          if (e)
+            return `
+
+Check the render method of \`` + e + "`.";
+        }
+        return "";
+      }
+    }
+    function ir(e) {
+      return "";
+    }
+    var De = {};
+    function ur(e) {
+      {
+        var r = je();
+        if (!r) {
+          var t = typeof e == "string" ? e : e.displayName || e.name;
+          t && (r = `
+
+Check the top-level render call using <` + t + ">.");
+        }
+        return r;
+      }
+    }
+    function Fe(e, r) {
+      {
+        if (!e._store || e._store.validated || e.key != null)
+          return;
+        e._store.validated = !0;
+        var t = ur(r);
+        if (De[t])
+          return;
+        De[t] = !0;
+        var n = "";
+        e && e._owner && e._owner !== le.current && (n = " It was passed a child from " + _(e._owner.type) + "."), M(e), i('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), M(null);
+      }
+    }
+    function Ae(e, r) {
+      {
+        if (typeof e != "object")
+          return;
+        if (ue(e))
+          for (var t = 0; t < e.length; t++) {
+            var n = e[t];
+            fe(n) && Fe(n, r);
+          }
+        else if (fe(e))
+          e._store && (e._store.validated = !0);
+        else if (e) {
+          var s = V(e);
+          if (typeof s == "function" && s !== e.entries)
+            for (var l = s.call(e), o; !(o = l.next()).done; )
+              fe(o.value) && Fe(o.value, r);
+        }
+      }
+    }
+    function sr(e) {
+      {
+        var r = e.type;
+        if (r == null || typeof r == "string")
+          return;
+        var t;
+        if (typeof r == "function")
+          t = r.propTypes;
+        else if (typeof r == "object" && (r.$$typeof === d || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        r.$$typeof === T))
+          t = r.propTypes;
+        else
+          return;
+        if (t) {
+          var n = _(r);
+          Xe(t, e.props, "prop", n, e);
+        } else if (r.PropTypes !== void 0 && !ce) {
+          ce = !0;
+          var s = _(r);
+          i("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", s || "Unknown");
+        }
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && i("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function lr(e) {
+      {
+        for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
+          var n = r[t];
+          if (n !== "children" && n !== "key") {
+            M(e), i("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), M(null);
+            break;
+          }
+        }
+        e.ref !== null && (M(e), i("Invalid attribute `ref` supplied to `React.Fragment`."), M(null));
+      }
+    }
+    var Ve = {};
+    function Ie(e, r, t, n, s, l) {
+      {
+        var o = X(e);
+        if (!o) {
+          var a = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (a += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var E = ir();
+          E ? a += E : a += je();
+          var f;
+          e === null ? f = "null" : ue(e) ? f = "array" : e !== void 0 && e.$$typeof === p ? (f = "<" + (_(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : f = typeof e, i("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", f, a);
+        }
+        var v = or(e, r, t, s, l);
+        if (v == null)
+          return v;
+        if (o) {
+          var x = r.children;
+          if (x !== void 0)
+            if (n)
+              if (ue(x)) {
+                for (var L = 0; L < x.length; L++)
+                  Ae(x[L], e);
+                Object.freeze && Object.freeze(x);
+              } else
+                i("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
+              Ae(x, e);
+        }
+        if (K.call(r, "key")) {
+          var A = _(e), w = Object.keys(r).filter(function(yr) {
+            return yr !== "key";
+          }), de = w.length > 0 ? "{key: someKey, " + w.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!Ve[A + de]) {
+            var mr = w.length > 0 ? "{" + w.join(": ..., ") + ": ...}" : "{}";
+            i(`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} />`, de, A, mr, A), Ve[A + de] = !0;
+          }
+        }
+        return e === u ? lr(v) : sr(v), v;
+      }
+    }
+    function cr(e, r, t) {
+      return Ie(e, r, t, !0);
+    }
+    function fr(e, r, t) {
+      return Ie(e, r, t, !1);
+    }
+    var dr = fr, vr = cr;
+    q.Fragment = u, q.jsx = dr, q.jsxs = vr;
+  }()), q;
+}
+process.env.NODE_ENV === "production" ? ye.exports = pr() : ye.exports = hr();
+var Ye = ye.exports;
+function Er() {
+  let g = "";
+  return function(k) {
+    const u = /^-?\d*([.,]?)\d*$/, C = k.match(u);
+    return C && (g = C[0]), g;
+  };
+}
+const Ke = (g) => {
+  const p = g.toString().split(".");
+  return p.length > 1 ? p[1].length : 0;
+}, br = Er(), Rr = gr(
+  ({ mask: g = br, onChange: p, step: k = 1, value: u, ...C }, j) => {
+    const [O, h] = te(u || ""), d = j || We(null), P = (c) => {
+      const { value: b } = c.target, S = g(b);
+      if (h(S), p) {
+        const F = {
+          ...c,
+          target: {
+            ...c.target,
+            value: S.replace(",", ".")
+          }
+        };
+        p(F);
+      }
+    }, m = (c, b) => {
+      const S = parseFloat(O.replace(",", ".")) || 0, F = parseFloat(k.toString()), V = Ke(+k), i = (b ? S + F : S - F).toFixed(V), R = g(i);
+      if (h(R), p) {
+        const W = {
+          ...new Event("change", { bubbles: !0 }),
+          target: {
+            ...c.target,
+            value: R.replace(",", ".")
+          }
+        };
+        p(W);
+      }
+    }, T = (c) => {
+      c.key === "ArrowUp" ? (c.preventDefault(), m(c, !0)) : c.key === "ArrowDown" && (c.preventDefault(), m(c, !1));
+    };
+    return me(() => {
+      h(u || "");
+    }, [u]), /* @__PURE__ */ Ye.jsx(
+      "input",
+      {
+        ...C,
+        type: "text",
+        ref: d,
+        value: O,
+        onChange: P,
+        onKeyDown: T
+      }
+    );
+  }
+);
+function wr({
+  value: g,
+  modifiers: p = {
+    altKey: 1,
+    ctrlKey: 1,
+    metaKey: 1,
+    shiftKey: 0.1
+  },
+  style: k = {},
+  ...u
+}) {
+  const [C, j] = te(String(g || 0)), [O, h] = te(""), [, d] = te([0, 0]), P = We(0), m = u.step ? +u.step : 1, T = { cursor: "ew-resize", ...k }, c = (i) => {
+    var R;
+    j(i.target.value), i.target.value !== "-" && ((R = u.onChange) == null || R.call(u, i));
+  }, b = ve(
+    (i) => {
+      d((R) => {
+        const { clientX: $, clientY: W } = i, [B, ne] = R, J = B - $, Y = ne - W;
+        let X = 1;
+        O && (X = p[O] || 1);
+        const z = m * X, G = Ke(z);
+        let _ = Math.sqrt(J * J + Y * Y) * z;
+        $ < B && (_ = -_);
+        let y = P.current + _;
+        if (u.min && (y = Math.max(y, +u.min)), u.max && (y = Math.min(y, +u.max)), y = +y.toFixed(G), y && j(String(y)), y && u.onChange) {
+          const H = {
+            ...new Event("change", { bubbles: !0 }),
+            target: {
+              ...i.target,
+              value: y
+            }
+          };
+          u.onChange(
+            H
+          );
+        }
+        return R;
+      });
+    },
+    [O, u.max, u.min, m, p]
+  ), S = ve(() => {
+    document.removeEventListener("mousemove", b), document.removeEventListener("mouseup", S);
+  }, [b]), F = ve(
+    (i) => {
+      let R = +C;
+      isNaN(R) && (R = +(u.defaultValue || u.min || 0)), P.current = R, d([i.clientX, i.clientY]), document.addEventListener("mousemove", b), document.addEventListener("mouseup", S);
+    },
+    [b, S, g, u.min, u.defaultValue]
+  ), V = (i) => {
+    i.metaKey ? h("metaKey") : i.ctrlKey ? h("ctrlKey") : i.altKey ? h("altKey") : i.shiftKey && h("shiftKey");
+  }, D = () => {
+    h("");
+  };
+  return me(() => {
+    j(String(g || 0));
+  }, [g]), me(() => (document.addEventListener("keydown", V), document.addEventListener("keyup", D), () => {
+    document.removeEventListener("mousemove", b), document.removeEventListener("mouseup", S), document.removeEventListener("keydown", V), document.removeEventListener("keyup", D);
+  }), []), /* @__PURE__ */ Ye.jsx(
+    Rr,
+    {
+      ...u,
+      style: T,
+      onChange: c,
+      onMouseDown: F,
+      value: C
+    }
+  );
+}
+export {
+  wr as InteractiveInput,
+  Rr as MaskedInput
+};

package/dist/types/InteractiveInput.d.ts

@@ -0,0 +1,16 @@
+type InputModifier = 'shiftKey' | 'altKey' | 'ctrlKey' | 'metaKey';
+export type Modifiers = {
+    [key in InputModifier]?: number;
+};
+interface InteractiveInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Modifiers to apply to the input value. Defaults to `{ shiftKey: 0.1 }`.
+     */
+    modifiers?: Modifiers;
+    value?: number;
+}
+/**
+ * Main component for the InteractiveInput
+ */
+export default function InteractiveInput({ value, modifiers, style: _style, ...props }: InteractiveInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/MaskedInput.d.ts

@@ -0,0 +1,13 @@
+import { type MaskFunction } from './masks';
+interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Masking function to apply to the input value. Defaults to `numberMask` which ensures that the input value is a valid number, including negative numbers.
+     */
+    mask?: MaskFunction;
+    value?: string;
+}
+/**
+ * A React input component featuring input masking specifically designed to address limitations with negative numbers in standard HTML input elements. This component ensures that negative values are properly formatted and accepted by the input field, preventing unexpected behavior or errors when handling signed numbers.
+ */
+declare const MaskedInput: import("react").ForwardRefExoticComponent<MaskedInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default MaskedInput;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+import InteractiveInput from './InteractiveInput';
+import MaskedInput from './MaskedInput';
+export { InteractiveInput, MaskedInput };

package/dist/types/masks.d.ts

@@ -0,0 +1,2 @@
+export type MaskFunction = (rawValue: string) => string;
+export declare function createNumberMask(): (rawValue: string) => string;

package/dist/types/utils.d.ts

@@ -0,0 +1 @@
+export declare const getDecimalPlaces: (step: number) => number;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@designbyadrian/react-interactive-input",
+  "version": "2.0.0",
+  "description": "Adjust values in numeric input boxes by clicking and dragging horizontally, just like in Blender and similar 3D applications.",
+  "keywords": [
+    "react",
+    "input",
+    "draggable",
+    "scrubb",
+    "click-and-drag input",
+    "interactive number field",
+    "blender"
+  ],
+  "author": "Adrian von Gegerfelt <adrian@designbyadrian.com>",
+  "type": "module",
+  "main": "dist/react-interactive-input.cjs.js",
+  "module": "dist/react-interactive-input.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/react-interactive-input.es.js",
+      "require": "./dist/react-interactive-input.cjs.js"
+    }
+  },
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/designbyadrian/react-interactive-input.git"
+  },
+  "bugs": {
+    "url": "https://github.com/designbyadrian/react-interactive-input/issues"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "build": "vite build && tsc --project tsconfig.json",
+    "build:types": "tsc --emitDeclarationOnly",
+    "prepublishOnly": "npm run build",
+    "deploy-storybook": "npm run build-storybook && touch ./storybook-static/.nojekyll && gh-pages -d storybook-static -t true"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "3.2.2",
+    "@storybook/addon-a11y": "^8.5.0-alpha.3",
+    "@storybook/addon-essentials": "8.5.0-alpha.3",
+    "@storybook/addon-interactions": "8.5.0-alpha.3",
+    "@storybook/addon-links": "8.5.0-alpha.3",
+    "@storybook/addon-onboarding": "8.5.0-alpha.3",
+    "@storybook/blocks": "8.5.0-alpha.3",
+    "@storybook/react": "8.5.0-alpha.3",
+    "@storybook/react-vite": "8.5.0-alpha.3",
+    "@storybook/test": "8.5.0-alpha.3",
+    "@types/react": "18.3.12",
+    "@vitejs/plugin-react": "4.3.3",
+    "eslint": "9.14.0",
+    "gh-pages": "6.2.0",
+    "storybook": "8.5.0-alpha.3",
+    "typescript": "5.6.3",
+    "vite": "5.4.10"
+  }
+}