@rubenpazch/numeric-up-picker 3.0.3 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/NumericUpPicker.d.ts.map +1 -1
- package/dist/index.cjs.js +50 -30
- package/dist/index.esm.js +50 -30
- package/package.json +5 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumericUpPicker.d.ts","sourceRoot":"","sources":["../src/NumericUpPicker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NumericUpPicker.d.ts","sourceRoot":"","sources":["../src/NumericUpPicker.tsx"],"names":[],"mappings":"AAyBA,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,GAAG,EACH,GAAG,EACH,IAAW,EACX,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAgB,EAChB,SAAc,EACd,QAAgB,EAChB,eAAuB,EACvB,cAAsB,EACtB,WAAmB,EACnB,QAAgB,EAChB,aAAqB,EACrB,SAAiB,EACjB,OAAO,EACP,IAAe,GAChB,EAAE,oBAAoB,2CA8btB"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -433,7 +433,38 @@ var r,s={exports:{}},o={};var t,n,l={};
|
|
|
433
433
|
*
|
|
434
434
|
* This source code is licensed under the MIT license found in the
|
|
435
435
|
* LICENSE file in the root directory of this source tree.
|
|
436
|
-
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case
|
|
436
|
+
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case u:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case f:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case x:return "Portal";case j:return e.displayName||"Context";case g:return (e._context.displayName||"Context")+".Consumer";case k:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case y:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=true;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===u)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===y)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return B[e]||(B[e]=true,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.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,n,l,i){var h,m=s.children;if(void 0!==m)if(n)if(z(m)){for(n=0;n<m.length;n++)c(m[n]);Object.freeze&&Object.freeze(m);}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 c(m);if($.call(s,"key")){m=r(e);var x=Object.keys(s).filter(function(e){return "key"!==e});n=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',n,m,x,m),_[m+n]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return false}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var u in t={},s)"key"!==u&&(t[u]=s[u]);else t=s;return m&&function(e,r){function s(){d||(d=true,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));}s.isReactWarning=true,Object.defineProperty(e,"key",{get:s,configurable:true});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,n){var l=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==l?l:null)?Object.defineProperty(e,"ref",{enumerable:false,get:a}):Object.defineProperty(e,"ref",{enumerable:false,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:false,enumerable:false,writable:true,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:false,enumerable:false,writable:true,value:null}),Object.defineProperty(e,"_debugStack",{configurable:false,enumerable:false,writable:true,value:t}),Object.defineProperty(e,"_debugTask",{configurable:false,enumerable:false,writable:true,value:n}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),l,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===y&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),j=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,z=Array.isArray,H=console.createTask?console.createTask:function(){return null},B={},W=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,n)(),V=H(t(n)),_={};l.Fragment=u,l.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)},l.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)};}()),l}var i=(n||(n=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var n in o={},s)"key"!==n&&(o[n]=s[n]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function p({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}function M({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}function Q({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M5 12h14"})})}function ae({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:s,"aria-label":"Plus",children:i.jsx("path",{d:"M12 4v16m8-8H4"})})}
|
|
437
|
+
|
|
438
|
+
function styleInject(css, ref) {
|
|
439
|
+
if ( ref === void 0 ) ref = {};
|
|
440
|
+
var insertAt = ref.insertAt;
|
|
441
|
+
|
|
442
|
+
if (typeof document === 'undefined') { return; }
|
|
443
|
+
|
|
444
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
445
|
+
var style = document.createElement('style');
|
|
446
|
+
style.type = 'text/css';
|
|
447
|
+
|
|
448
|
+
if (insertAt === 'top') {
|
|
449
|
+
if (head.firstChild) {
|
|
450
|
+
head.insertBefore(style, head.firstChild);
|
|
451
|
+
} else {
|
|
452
|
+
head.appendChild(style);
|
|
453
|
+
}
|
|
454
|
+
} else {
|
|
455
|
+
head.appendChild(style);
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
if (style.styleSheet) {
|
|
459
|
+
style.styleSheet.cssText = css;
|
|
460
|
+
} else {
|
|
461
|
+
style.appendChild(document.createTextNode(css));
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
var css_248z = "/* Container */\n.NumericUpPicker-module_container__ITZYH {\n display: flex;\n flex-direction: column;\n}\n\n/* Label */\n.NumericUpPicker-module_label__2t-TA {\n display: block;\n font-weight: 500;\n margin-bottom: 0.5rem;\n}\n\n.NumericUpPicker-module_labelSmall__y9vDB {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.NumericUpPicker-module_labelMedium__N0lJ7 {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.NumericUpPicker-module_labelLarge__1pHYe {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.NumericUpPicker-module_labelError__tdPcw {\n color: #b91c1c;\n}\n\n.NumericUpPicker-module_labelNormal__8Sua1 {\n color: #374151;\n}\n\n.NumericUpPicker-module_required__0FZBA {\n color: #ef4444;\n margin-left: 0.25rem;\n}\n\n/* Stepper container */\n.NumericUpPicker-module_stepper__bwlnW {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 0.5rem;\n border: 2px solid;\n transition: all 150ms ease;\n}\n\n.NumericUpPicker-module_stepperSmall__qQRh2 {\n height: 2rem;\n}\n\n.NumericUpPicker-module_stepperMedium__4n492 {\n height: 3rem;\n}\n\n.NumericUpPicker-module_stepperLarge__bUKxT {\n height: 4rem;\n}\n\n.NumericUpPicker-module_stepperNormal__Qb2-C {\n border-color: #d1d5db;\n background: #f9fafb;\n}\n\n.NumericUpPicker-module_stepperError__Dv51w {\n border-color: #ef4444;\n background: #fef2f2;\n}\n\n.NumericUpPicker-module_stepperDisabled__LO2v- {\n border-color: #d1d5db;\n background: #f3f4f6;\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Buttons */\n.NumericUpPicker-module_button__YFl3j {\n flex-shrink: 0;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n transition: all 150ms ease;\n cursor: pointer;\n}\n\n.NumericUpPicker-module_buttonSmall__TQMYu {\n width: 2rem;\n}\n\n.NumericUpPicker-module_buttonMedium__TlFYA {\n width: 3rem;\n}\n\n.NumericUpPicker-module_buttonLarge__dyHag {\n width: 4rem;\n}\n\n.NumericUpPicker-module_buttonLeft__y6wNO {\n border-right: 1px solid #d1d5db;\n}\n\n.NumericUpPicker-module_buttonRight__oShP7 {\n border-left: 1px solid #d1d5db;\n}\n\n.NumericUpPicker-module_buttonNormal__dy-xX {\n color: #4b5563;\n}\n\n.NumericUpPicker-module_buttonNormal__dy-xX:hover:not(:disabled) {\n background: #f3f4f6;\n}\n\n.NumericUpPicker-module_buttonNormal__dy-xX:active:not(:disabled) {\n background: #e5e7eb;\n}\n\n.NumericUpPicker-module_buttonError__G6Y3l {\n color: #ef4444;\n}\n\n.NumericUpPicker-module_button__YFl3j:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n color: #9ca3af;\n}\n\n/* Input */\n.NumericUpPicker-module_inputWrapper__lqjX1 {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n height: 100%;\n}\n\n.NumericUpPicker-module_input__K9pFW {\n width: 100%;\n min-width: 5.5rem;\n height: 100%;\n padding-left: 1rem;\n padding-right: 1rem;\n text-align: center;\n background: transparent;\n font-weight: 600;\n border: none;\n outline: none;\n}\n\n.NumericUpPicker-module_input__K9pFW::placeholder {\n color: #9ca3af;\n}\n\n.NumericUpPicker-module_inputSmall__xQqS4 {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.NumericUpPicker-module_inputMedium__SM-cb {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.NumericUpPicker-module_inputLarge__ZLJt6 {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.NumericUpPicker-module_inputError__hnnp3 {\n color: #b91c1c;\n}\n\n.NumericUpPicker-module_inputNormal__UviGX {\n color: #111827;\n}\n\n.NumericUpPicker-module_inputWithClear__Hq7Rw {\n padding-right: 2rem;\n}\n\n/* Hide number input spinners */\n.NumericUpPicker-module_input__K9pFW::-webkit-outer-spin-button,\n.NumericUpPicker-module_input__K9pFW::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.NumericUpPicker-module_input__K9pFW[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: none;\n}\n\n/* Clear button */\n.NumericUpPicker-module_clearButton__CrMjk {\n position: absolute;\n right: 0.25rem;\n top: 50%;\n transform: translateY(-50%);\n width: 1.25rem;\n height: 1.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background: transparent;\n border: none;\n color: #6b7280;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.NumericUpPicker-module_clearButton__CrMjk:hover {\n background: #e5e7eb;\n color: #374151;\n}\n\n.NumericUpPicker-module_clearButton__CrMjk:active {\n background: #d1d5db;\n}\n\n.NumericUpPicker-module_clearIcon__dIG2p {\n width: 0.75rem;\n height: 0.75rem;\n}\n\n/* Messages */\n.NumericUpPicker-module_message__HKibj {\n margin-top: 0.5rem;\n display: flex;\n align-items: flex-start;\n gap: 0.375rem;\n}\n\n.NumericUpPicker-module_messageIcon__-hWof {\n flex-shrink: 0;\n margin-top: 0.125rem;\n}\n\n.NumericUpPicker-module_messageText__XR328 {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.NumericUpPicker-module_errorMessage__qvue2 .NumericUpPicker-module_messageIcon__-hWof {\n color: #ef4444;\n}\n\n.NumericUpPicker-module_errorMessage__qvue2 .NumericUpPicker-module_messageText__XR328 {\n color: #dc2626;\n font-weight: 500;\n}\n\n.NumericUpPicker-module_warningMessage__BbVKH .NumericUpPicker-module_messageIcon__-hWof {\n color: #f59e0b;\n}\n\n.NumericUpPicker-module_warningMessage__BbVKH .NumericUpPicker-module_messageText__XR328 {\n color: #b45309;\n}\n\n.NumericUpPicker-module_hintMessage__SeTai .NumericUpPicker-module_messageText__XR328 {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #6b7280;\n}\n";
|
|
466
|
+
var styles = {"label":"NumericUpPicker-module_label__2t-TA","labelSmall":"NumericUpPicker-module_labelSmall__y9vDB","labelMedium":"NumericUpPicker-module_labelMedium__N0lJ7","labelLarge":"NumericUpPicker-module_labelLarge__1pHYe","labelError":"NumericUpPicker-module_labelError__tdPcw","labelNormal":"NumericUpPicker-module_labelNormal__8Sua1","required":"NumericUpPicker-module_required__0FZBA","stepper":"NumericUpPicker-module_stepper__bwlnW","stepperSmall":"NumericUpPicker-module_stepperSmall__qQRh2","stepperMedium":"NumericUpPicker-module_stepperMedium__4n492","stepperLarge":"NumericUpPicker-module_stepperLarge__bUKxT","stepperNormal":"NumericUpPicker-module_stepperNormal__Qb2-C","stepperError":"NumericUpPicker-module_stepperError__Dv51w","stepperDisabled":"NumericUpPicker-module_stepperDisabled__LO2v-","button":"NumericUpPicker-module_button__YFl3j","buttonSmall":"NumericUpPicker-module_buttonSmall__TQMYu","buttonMedium":"NumericUpPicker-module_buttonMedium__TlFYA","buttonLarge":"NumericUpPicker-module_buttonLarge__dyHag","buttonLeft":"NumericUpPicker-module_buttonLeft__y6wNO","buttonRight":"NumericUpPicker-module_buttonRight__oShP7","buttonNormal":"NumericUpPicker-module_buttonNormal__dy-xX","buttonError":"NumericUpPicker-module_buttonError__G6Y3l","inputWrapper":"NumericUpPicker-module_inputWrapper__lqjX1","input":"NumericUpPicker-module_input__K9pFW","inputSmall":"NumericUpPicker-module_inputSmall__xQqS4","inputMedium":"NumericUpPicker-module_inputMedium__SM-cb","inputLarge":"NumericUpPicker-module_inputLarge__ZLJt6","inputError":"NumericUpPicker-module_inputError__hnnp3","inputNormal":"NumericUpPicker-module_inputNormal__UviGX","inputWithClear":"NumericUpPicker-module_inputWithClear__Hq7Rw","clearButton":"NumericUpPicker-module_clearButton__CrMjk","clearIcon":"NumericUpPicker-module_clearIcon__dIG2p","message":"NumericUpPicker-module_message__HKibj","messageIcon":"NumericUpPicker-module_messageIcon__-hWof","messageText":"NumericUpPicker-module_messageText__XR328","errorMessage":"NumericUpPicker-module_errorMessage__qvue2","warningMessage":"NumericUpPicker-module_warningMessage__BbVKH","hintMessage":"NumericUpPicker-module_hintMessage__SeTai"};
|
|
467
|
+
styleInject(css_248z);
|
|
437
468
|
|
|
438
469
|
// CSS to hide native number input spinners
|
|
439
470
|
const hideSpinnersStyle = `
|
|
@@ -446,6 +477,7 @@ const hideSpinnersStyle = `
|
|
|
446
477
|
-moz-appearance: textfield;
|
|
447
478
|
}
|
|
448
479
|
`;
|
|
480
|
+
const classNames = (...classes) => classes.filter(Boolean).join(" ");
|
|
449
481
|
function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step = 0.01, error, hint, warning, disabled = false, className = "", required = false, useMinAsDefault = false, alwaysNegative = false, integerOnly = false, showSign = false, defaultToZero = false, clearable = false, onClear, size = "medium", }) {
|
|
450
482
|
// Track if the field has been touched (user has focused on it)
|
|
451
483
|
const [hasBeenTouched, setHasBeenTouched] = require$$0.useState(false);
|
|
@@ -453,19 +485,19 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
453
485
|
// Size-based styling
|
|
454
486
|
const sizeClasses = {
|
|
455
487
|
container: {
|
|
456
|
-
small:
|
|
457
|
-
medium:
|
|
458
|
-
large:
|
|
488
|
+
small: styles.stepperSmall,
|
|
489
|
+
medium: styles.stepperMedium,
|
|
490
|
+
large: styles.stepperLarge,
|
|
459
491
|
},
|
|
460
492
|
input: {
|
|
461
|
-
small:
|
|
462
|
-
medium:
|
|
463
|
-
large:
|
|
493
|
+
small: styles.inputSmall,
|
|
494
|
+
medium: styles.inputMedium,
|
|
495
|
+
large: styles.inputLarge,
|
|
464
496
|
},
|
|
465
497
|
button: {
|
|
466
|
-
small:
|
|
467
|
-
medium:
|
|
468
|
-
large:
|
|
498
|
+
small: styles.buttonSmall,
|
|
499
|
+
medium: styles.buttonMedium,
|
|
500
|
+
large: styles.buttonLarge,
|
|
469
501
|
},
|
|
470
502
|
icon: {
|
|
471
503
|
small: "sm",
|
|
@@ -473,9 +505,9 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
473
505
|
large: "lg",
|
|
474
506
|
},
|
|
475
507
|
label: {
|
|
476
|
-
small:
|
|
477
|
-
medium:
|
|
478
|
-
large:
|
|
508
|
+
small: styles.labelSmall,
|
|
509
|
+
medium: styles.labelMedium,
|
|
510
|
+
large: styles.labelLarge,
|
|
479
511
|
},
|
|
480
512
|
};
|
|
481
513
|
const containerSize = sizeClasses.container[size];
|
|
@@ -727,23 +759,11 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
727
759
|
(alwaysNegative
|
|
728
760
|
? max !== undefined && Math.abs(numValue) <= Math.abs(max)
|
|
729
761
|
: max !== undefined && numValue >= max);
|
|
730
|
-
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className:
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
? "text-red-500"
|
|
736
|
-
: disabled || isAtMin
|
|
737
|
-
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
738
|
-
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Decrease value", "aria-label": "Decrease", children: jsxRuntimeExports.jsx(Y, { size: iconSize }) }), jsxRuntimeExports.jsx("div", { className: "flex-1 flex items-center justify-center", children: jsxRuntimeExports.jsx("input", { type: "text", step: step, min: min, max: max, value: displayValue, onChange: handleDirectInput, onBlur: handleBlurWithValidation, onFocus: handleFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: `text-center bg-transparent font-semibold placeholder-gray-400 focus:outline-none border-none ${inputSize} ${error ? "text-red-700" : "text-gray-900"} w-full`, style: {
|
|
739
|
-
WebkitAppearance: "none",
|
|
740
|
-
MozAppearance: "textfield",
|
|
741
|
-
appearance: "none",
|
|
742
|
-
} }) }), clearable && !isEmpty && !disabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: handleClear, className: "flex-shrink-0 w-6 h-6 mr-2 flex items-center justify-center rounded-full transition-all hover:bg-gray-200 active:bg-gray-300 text-gray-500 hover:text-gray-700", title: "Clear value", "aria-label": "Clear", children: jsxRuntimeExports.jsx(M, { size: "sm" }) })), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled || isAtMax, className: `flex-shrink-0 ${buttonSize} h-full flex items-center justify-center border-l border-gray-300 transition-all ${error
|
|
743
|
-
? "text-red-500"
|
|
744
|
-
: disabled || isAtMax
|
|
745
|
-
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
746
|
-
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Increase value", "aria-label": "Increase", children: jsxRuntimeExports.jsx(ne, { size: iconSize }) })] }), error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx(p, { size: "sm", className: "text-red-500 flex-shrink-0 mt-0.5" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-red-600 font-medium", children: error })] })), warning && !error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx("div", { className: "w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5 flex items-center justify-center", children: jsxRuntimeExports.jsx("span", { className: "text-xs font-bold", children: "!" }) }), jsxRuntimeExports.jsx("p", { className: "text-sm text-amber-700", children: warning })] })), hint && !error && !warning && (jsxRuntimeExports.jsx("p", { className: "mt-2 text-xs text-gray-500", children: hint }))] }));
|
|
762
|
+
return (jsxRuntimeExports.jsxs("div", { className: className, "data-testid": "numeric-up-picker", children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: classNames(styles.label, labelSize, error ? styles.labelError : styles.labelNormal), children: [label, required && jsxRuntimeExports.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports.jsxs("div", { className: classNames(styles.stepper, containerSize, error && styles.stepperError, disabled && styles.stepperDisabled, !error && !disabled && styles.stepperNormal), "data-testid": "stepper-container", "data-error": !!error, "data-disabled": disabled, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled || isAtMin, className: classNames(styles.button, styles.buttonLeft, buttonSize, error ? styles.buttonError : styles.buttonNormal), title: "Decrease value", "aria-label": "Decrease", "data-testid": "decrement-button", children: jsxRuntimeExports.jsx(Q, { size: iconSize }) }), jsxRuntimeExports.jsxs("div", { className: styles.inputWrapper, children: [jsxRuntimeExports.jsx("input", { type: "text", step: step, min: min, max: max, value: displayValue, onChange: handleDirectInput, onBlur: handleBlurWithValidation, onFocus: handleFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: classNames(styles.input, inputSize, error ? styles.inputError : styles.inputNormal, clearable && !isEmpty && styles.inputWithClear), style: {
|
|
763
|
+
WebkitAppearance: "none",
|
|
764
|
+
MozAppearance: "textfield",
|
|
765
|
+
appearance: "none",
|
|
766
|
+
}, "data-testid": "numeric-up-input" }), clearable && !isEmpty && !disabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: handleClear, className: styles.clearButton, title: "Clear value", "aria-label": "Clear", "data-testid": "clear-button", children: jsxRuntimeExports.jsx(M, { size: "sm", className: styles.clearIcon }) }))] }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled || isAtMax, className: classNames(styles.button, styles.buttonRight, buttonSize, error ? styles.buttonError : styles.buttonNormal), title: "Increase value", "aria-label": "Increase", "data-testid": "increment-button", children: jsxRuntimeExports.jsx(ae, { size: iconSize }) })] }), error && (jsxRuntimeExports.jsxs("div", { className: classNames(styles.message, styles.errorMessage), children: [jsxRuntimeExports.jsx(p, { size: "sm", className: styles.messageIcon }), jsxRuntimeExports.jsx("p", { className: styles.messageText, children: error })] })), warning && !error && (jsxRuntimeExports.jsxs("div", { className: classNames(styles.message, styles.warningMessage), children: [jsxRuntimeExports.jsx("div", { className: styles.messageIcon, children: jsxRuntimeExports.jsx("span", { children: "!" }) }), jsxRuntimeExports.jsx("p", { className: styles.messageText, children: warning })] })), hint && !error && !warning && (jsxRuntimeExports.jsx("div", { className: classNames(styles.message, styles.hintMessage), children: jsxRuntimeExports.jsx("p", { className: styles.messageText, children: hint }) }))] }));
|
|
747
767
|
}
|
|
748
768
|
|
|
749
769
|
module.exports = NumericUpPicker;
|
package/dist/index.esm.js
CHANGED
|
@@ -431,7 +431,38 @@ var r,s={exports:{}},o={};var t,n,l={};
|
|
|
431
431
|
*
|
|
432
432
|
* This source code is licensed under the MIT license found in the
|
|
433
433
|
* LICENSE file in the root directory of this source tree.
|
|
434
|
-
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case
|
|
434
|
+
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case u:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case f:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case x:return "Portal";case j:return e.displayName||"Context";case g:return (e._context.displayName||"Context")+".Consumer";case k:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case y:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=true;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===u)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===y)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return B[e]||(B[e]=true,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.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,n,l,i){var h,m=s.children;if(void 0!==m)if(n)if(z(m)){for(n=0;n<m.length;n++)c(m[n]);Object.freeze&&Object.freeze(m);}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 c(m);if($.call(s,"key")){m=r(e);var x=Object.keys(s).filter(function(e){return "key"!==e});n=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',n,m,x,m),_[m+n]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return false}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var u in t={},s)"key"!==u&&(t[u]=s[u]);else t=s;return m&&function(e,r){function s(){d||(d=true,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));}s.isReactWarning=true,Object.defineProperty(e,"key",{get:s,configurable:true});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,n){var l=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==l?l:null)?Object.defineProperty(e,"ref",{enumerable:false,get:a}):Object.defineProperty(e,"ref",{enumerable:false,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:false,enumerable:false,writable:true,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:false,enumerable:false,writable:true,value:null}),Object.defineProperty(e,"_debugStack",{configurable:false,enumerable:false,writable:true,value:t}),Object.defineProperty(e,"_debugTask",{configurable:false,enumerable:false,writable:true,value:n}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),l,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===y&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),j=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,z=Array.isArray,H=console.createTask?console.createTask:function(){return null},B={},W=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,n)(),V=H(t(n)),_={};l.Fragment=u,l.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)},l.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)};}()),l}var i=(n||(n=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var n in o={},s)"key"!==n&&(o[n]=s[n]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function p({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}function M({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}function Q({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M5 12h14"})})}function ae({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:s,"aria-label":"Plus",children:i.jsx("path",{d:"M12 4v16m8-8H4"})})}
|
|
435
|
+
|
|
436
|
+
function styleInject(css, ref) {
|
|
437
|
+
if ( ref === void 0 ) ref = {};
|
|
438
|
+
var insertAt = ref.insertAt;
|
|
439
|
+
|
|
440
|
+
if (typeof document === 'undefined') { return; }
|
|
441
|
+
|
|
442
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
443
|
+
var style = document.createElement('style');
|
|
444
|
+
style.type = 'text/css';
|
|
445
|
+
|
|
446
|
+
if (insertAt === 'top') {
|
|
447
|
+
if (head.firstChild) {
|
|
448
|
+
head.insertBefore(style, head.firstChild);
|
|
449
|
+
} else {
|
|
450
|
+
head.appendChild(style);
|
|
451
|
+
}
|
|
452
|
+
} else {
|
|
453
|
+
head.appendChild(style);
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
if (style.styleSheet) {
|
|
457
|
+
style.styleSheet.cssText = css;
|
|
458
|
+
} else {
|
|
459
|
+
style.appendChild(document.createTextNode(css));
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
var css_248z = "/* Container */\n.NumericUpPicker-module_container__ITZYH {\n display: flex;\n flex-direction: column;\n}\n\n/* Label */\n.NumericUpPicker-module_label__2t-TA {\n display: block;\n font-weight: 500;\n margin-bottom: 0.5rem;\n}\n\n.NumericUpPicker-module_labelSmall__y9vDB {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.NumericUpPicker-module_labelMedium__N0lJ7 {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.NumericUpPicker-module_labelLarge__1pHYe {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.NumericUpPicker-module_labelError__tdPcw {\n color: #b91c1c;\n}\n\n.NumericUpPicker-module_labelNormal__8Sua1 {\n color: #374151;\n}\n\n.NumericUpPicker-module_required__0FZBA {\n color: #ef4444;\n margin-left: 0.25rem;\n}\n\n/* Stepper container */\n.NumericUpPicker-module_stepper__bwlnW {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 0.5rem;\n border: 2px solid;\n transition: all 150ms ease;\n}\n\n.NumericUpPicker-module_stepperSmall__qQRh2 {\n height: 2rem;\n}\n\n.NumericUpPicker-module_stepperMedium__4n492 {\n height: 3rem;\n}\n\n.NumericUpPicker-module_stepperLarge__bUKxT {\n height: 4rem;\n}\n\n.NumericUpPicker-module_stepperNormal__Qb2-C {\n border-color: #d1d5db;\n background: #f9fafb;\n}\n\n.NumericUpPicker-module_stepperError__Dv51w {\n border-color: #ef4444;\n background: #fef2f2;\n}\n\n.NumericUpPicker-module_stepperDisabled__LO2v- {\n border-color: #d1d5db;\n background: #f3f4f6;\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Buttons */\n.NumericUpPicker-module_button__YFl3j {\n flex-shrink: 0;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n transition: all 150ms ease;\n cursor: pointer;\n}\n\n.NumericUpPicker-module_buttonSmall__TQMYu {\n width: 2rem;\n}\n\n.NumericUpPicker-module_buttonMedium__TlFYA {\n width: 3rem;\n}\n\n.NumericUpPicker-module_buttonLarge__dyHag {\n width: 4rem;\n}\n\n.NumericUpPicker-module_buttonLeft__y6wNO {\n border-right: 1px solid #d1d5db;\n}\n\n.NumericUpPicker-module_buttonRight__oShP7 {\n border-left: 1px solid #d1d5db;\n}\n\n.NumericUpPicker-module_buttonNormal__dy-xX {\n color: #4b5563;\n}\n\n.NumericUpPicker-module_buttonNormal__dy-xX:hover:not(:disabled) {\n background: #f3f4f6;\n}\n\n.NumericUpPicker-module_buttonNormal__dy-xX:active:not(:disabled) {\n background: #e5e7eb;\n}\n\n.NumericUpPicker-module_buttonError__G6Y3l {\n color: #ef4444;\n}\n\n.NumericUpPicker-module_button__YFl3j:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n color: #9ca3af;\n}\n\n/* Input */\n.NumericUpPicker-module_inputWrapper__lqjX1 {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n height: 100%;\n}\n\n.NumericUpPicker-module_input__K9pFW {\n width: 100%;\n min-width: 5.5rem;\n height: 100%;\n padding-left: 1rem;\n padding-right: 1rem;\n text-align: center;\n background: transparent;\n font-weight: 600;\n border: none;\n outline: none;\n}\n\n.NumericUpPicker-module_input__K9pFW::placeholder {\n color: #9ca3af;\n}\n\n.NumericUpPicker-module_inputSmall__xQqS4 {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.NumericUpPicker-module_inputMedium__SM-cb {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.NumericUpPicker-module_inputLarge__ZLJt6 {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.NumericUpPicker-module_inputError__hnnp3 {\n color: #b91c1c;\n}\n\n.NumericUpPicker-module_inputNormal__UviGX {\n color: #111827;\n}\n\n.NumericUpPicker-module_inputWithClear__Hq7Rw {\n padding-right: 2rem;\n}\n\n/* Hide number input spinners */\n.NumericUpPicker-module_input__K9pFW::-webkit-outer-spin-button,\n.NumericUpPicker-module_input__K9pFW::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.NumericUpPicker-module_input__K9pFW[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: none;\n}\n\n/* Clear button */\n.NumericUpPicker-module_clearButton__CrMjk {\n position: absolute;\n right: 0.25rem;\n top: 50%;\n transform: translateY(-50%);\n width: 1.25rem;\n height: 1.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background: transparent;\n border: none;\n color: #6b7280;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.NumericUpPicker-module_clearButton__CrMjk:hover {\n background: #e5e7eb;\n color: #374151;\n}\n\n.NumericUpPicker-module_clearButton__CrMjk:active {\n background: #d1d5db;\n}\n\n.NumericUpPicker-module_clearIcon__dIG2p {\n width: 0.75rem;\n height: 0.75rem;\n}\n\n/* Messages */\n.NumericUpPicker-module_message__HKibj {\n margin-top: 0.5rem;\n display: flex;\n align-items: flex-start;\n gap: 0.375rem;\n}\n\n.NumericUpPicker-module_messageIcon__-hWof {\n flex-shrink: 0;\n margin-top: 0.125rem;\n}\n\n.NumericUpPicker-module_messageText__XR328 {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.NumericUpPicker-module_errorMessage__qvue2 .NumericUpPicker-module_messageIcon__-hWof {\n color: #ef4444;\n}\n\n.NumericUpPicker-module_errorMessage__qvue2 .NumericUpPicker-module_messageText__XR328 {\n color: #dc2626;\n font-weight: 500;\n}\n\n.NumericUpPicker-module_warningMessage__BbVKH .NumericUpPicker-module_messageIcon__-hWof {\n color: #f59e0b;\n}\n\n.NumericUpPicker-module_warningMessage__BbVKH .NumericUpPicker-module_messageText__XR328 {\n color: #b45309;\n}\n\n.NumericUpPicker-module_hintMessage__SeTai .NumericUpPicker-module_messageText__XR328 {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #6b7280;\n}\n";
|
|
464
|
+
var styles = {"label":"NumericUpPicker-module_label__2t-TA","labelSmall":"NumericUpPicker-module_labelSmall__y9vDB","labelMedium":"NumericUpPicker-module_labelMedium__N0lJ7","labelLarge":"NumericUpPicker-module_labelLarge__1pHYe","labelError":"NumericUpPicker-module_labelError__tdPcw","labelNormal":"NumericUpPicker-module_labelNormal__8Sua1","required":"NumericUpPicker-module_required__0FZBA","stepper":"NumericUpPicker-module_stepper__bwlnW","stepperSmall":"NumericUpPicker-module_stepperSmall__qQRh2","stepperMedium":"NumericUpPicker-module_stepperMedium__4n492","stepperLarge":"NumericUpPicker-module_stepperLarge__bUKxT","stepperNormal":"NumericUpPicker-module_stepperNormal__Qb2-C","stepperError":"NumericUpPicker-module_stepperError__Dv51w","stepperDisabled":"NumericUpPicker-module_stepperDisabled__LO2v-","button":"NumericUpPicker-module_button__YFl3j","buttonSmall":"NumericUpPicker-module_buttonSmall__TQMYu","buttonMedium":"NumericUpPicker-module_buttonMedium__TlFYA","buttonLarge":"NumericUpPicker-module_buttonLarge__dyHag","buttonLeft":"NumericUpPicker-module_buttonLeft__y6wNO","buttonRight":"NumericUpPicker-module_buttonRight__oShP7","buttonNormal":"NumericUpPicker-module_buttonNormal__dy-xX","buttonError":"NumericUpPicker-module_buttonError__G6Y3l","inputWrapper":"NumericUpPicker-module_inputWrapper__lqjX1","input":"NumericUpPicker-module_input__K9pFW","inputSmall":"NumericUpPicker-module_inputSmall__xQqS4","inputMedium":"NumericUpPicker-module_inputMedium__SM-cb","inputLarge":"NumericUpPicker-module_inputLarge__ZLJt6","inputError":"NumericUpPicker-module_inputError__hnnp3","inputNormal":"NumericUpPicker-module_inputNormal__UviGX","inputWithClear":"NumericUpPicker-module_inputWithClear__Hq7Rw","clearButton":"NumericUpPicker-module_clearButton__CrMjk","clearIcon":"NumericUpPicker-module_clearIcon__dIG2p","message":"NumericUpPicker-module_message__HKibj","messageIcon":"NumericUpPicker-module_messageIcon__-hWof","messageText":"NumericUpPicker-module_messageText__XR328","errorMessage":"NumericUpPicker-module_errorMessage__qvue2","warningMessage":"NumericUpPicker-module_warningMessage__BbVKH","hintMessage":"NumericUpPicker-module_hintMessage__SeTai"};
|
|
465
|
+
styleInject(css_248z);
|
|
435
466
|
|
|
436
467
|
// CSS to hide native number input spinners
|
|
437
468
|
const hideSpinnersStyle = `
|
|
@@ -444,6 +475,7 @@ const hideSpinnersStyle = `
|
|
|
444
475
|
-moz-appearance: textfield;
|
|
445
476
|
}
|
|
446
477
|
`;
|
|
478
|
+
const classNames = (...classes) => classes.filter(Boolean).join(" ");
|
|
447
479
|
function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step = 0.01, error, hint, warning, disabled = false, className = "", required = false, useMinAsDefault = false, alwaysNegative = false, integerOnly = false, showSign = false, defaultToZero = false, clearable = false, onClear, size = "medium", }) {
|
|
448
480
|
// Track if the field has been touched (user has focused on it)
|
|
449
481
|
const [hasBeenTouched, setHasBeenTouched] = useState(false);
|
|
@@ -451,19 +483,19 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
451
483
|
// Size-based styling
|
|
452
484
|
const sizeClasses = {
|
|
453
485
|
container: {
|
|
454
|
-
small:
|
|
455
|
-
medium:
|
|
456
|
-
large:
|
|
486
|
+
small: styles.stepperSmall,
|
|
487
|
+
medium: styles.stepperMedium,
|
|
488
|
+
large: styles.stepperLarge,
|
|
457
489
|
},
|
|
458
490
|
input: {
|
|
459
|
-
small:
|
|
460
|
-
medium:
|
|
461
|
-
large:
|
|
491
|
+
small: styles.inputSmall,
|
|
492
|
+
medium: styles.inputMedium,
|
|
493
|
+
large: styles.inputLarge,
|
|
462
494
|
},
|
|
463
495
|
button: {
|
|
464
|
-
small:
|
|
465
|
-
medium:
|
|
466
|
-
large:
|
|
496
|
+
small: styles.buttonSmall,
|
|
497
|
+
medium: styles.buttonMedium,
|
|
498
|
+
large: styles.buttonLarge,
|
|
467
499
|
},
|
|
468
500
|
icon: {
|
|
469
501
|
small: "sm",
|
|
@@ -471,9 +503,9 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
471
503
|
large: "lg",
|
|
472
504
|
},
|
|
473
505
|
label: {
|
|
474
|
-
small:
|
|
475
|
-
medium:
|
|
476
|
-
large:
|
|
506
|
+
small: styles.labelSmall,
|
|
507
|
+
medium: styles.labelMedium,
|
|
508
|
+
large: styles.labelLarge,
|
|
477
509
|
},
|
|
478
510
|
};
|
|
479
511
|
const containerSize = sizeClasses.container[size];
|
|
@@ -725,23 +757,11 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
725
757
|
(alwaysNegative
|
|
726
758
|
? max !== undefined && Math.abs(numValue) <= Math.abs(max)
|
|
727
759
|
: max !== undefined && numValue >= max);
|
|
728
|
-
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className:
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
? "text-red-500"
|
|
734
|
-
: disabled || isAtMin
|
|
735
|
-
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
736
|
-
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Decrease value", "aria-label": "Decrease", children: jsxRuntimeExports.jsx(Y, { size: iconSize }) }), jsxRuntimeExports.jsx("div", { className: "flex-1 flex items-center justify-center", children: jsxRuntimeExports.jsx("input", { type: "text", step: step, min: min, max: max, value: displayValue, onChange: handleDirectInput, onBlur: handleBlurWithValidation, onFocus: handleFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: `text-center bg-transparent font-semibold placeholder-gray-400 focus:outline-none border-none ${inputSize} ${error ? "text-red-700" : "text-gray-900"} w-full`, style: {
|
|
737
|
-
WebkitAppearance: "none",
|
|
738
|
-
MozAppearance: "textfield",
|
|
739
|
-
appearance: "none",
|
|
740
|
-
} }) }), clearable && !isEmpty && !disabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: handleClear, className: "flex-shrink-0 w-6 h-6 mr-2 flex items-center justify-center rounded-full transition-all hover:bg-gray-200 active:bg-gray-300 text-gray-500 hover:text-gray-700", title: "Clear value", "aria-label": "Clear", children: jsxRuntimeExports.jsx(M, { size: "sm" }) })), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled || isAtMax, className: `flex-shrink-0 ${buttonSize} h-full flex items-center justify-center border-l border-gray-300 transition-all ${error
|
|
741
|
-
? "text-red-500"
|
|
742
|
-
: disabled || isAtMax
|
|
743
|
-
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
744
|
-
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Increase value", "aria-label": "Increase", children: jsxRuntimeExports.jsx(ne, { size: iconSize }) })] }), error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx(p, { size: "sm", className: "text-red-500 flex-shrink-0 mt-0.5" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-red-600 font-medium", children: error })] })), warning && !error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx("div", { className: "w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5 flex items-center justify-center", children: jsxRuntimeExports.jsx("span", { className: "text-xs font-bold", children: "!" }) }), jsxRuntimeExports.jsx("p", { className: "text-sm text-amber-700", children: warning })] })), hint && !error && !warning && (jsxRuntimeExports.jsx("p", { className: "mt-2 text-xs text-gray-500", children: hint }))] }));
|
|
760
|
+
return (jsxRuntimeExports.jsxs("div", { className: className, "data-testid": "numeric-up-picker", children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: classNames(styles.label, labelSize, error ? styles.labelError : styles.labelNormal), children: [label, required && jsxRuntimeExports.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports.jsxs("div", { className: classNames(styles.stepper, containerSize, error && styles.stepperError, disabled && styles.stepperDisabled, !error && !disabled && styles.stepperNormal), "data-testid": "stepper-container", "data-error": !!error, "data-disabled": disabled, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled || isAtMin, className: classNames(styles.button, styles.buttonLeft, buttonSize, error ? styles.buttonError : styles.buttonNormal), title: "Decrease value", "aria-label": "Decrease", "data-testid": "decrement-button", children: jsxRuntimeExports.jsx(Q, { size: iconSize }) }), jsxRuntimeExports.jsxs("div", { className: styles.inputWrapper, children: [jsxRuntimeExports.jsx("input", { type: "text", step: step, min: min, max: max, value: displayValue, onChange: handleDirectInput, onBlur: handleBlurWithValidation, onFocus: handleFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: classNames(styles.input, inputSize, error ? styles.inputError : styles.inputNormal, clearable && !isEmpty && styles.inputWithClear), style: {
|
|
761
|
+
WebkitAppearance: "none",
|
|
762
|
+
MozAppearance: "textfield",
|
|
763
|
+
appearance: "none",
|
|
764
|
+
}, "data-testid": "numeric-up-input" }), clearable && !isEmpty && !disabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: handleClear, className: styles.clearButton, title: "Clear value", "aria-label": "Clear", "data-testid": "clear-button", children: jsxRuntimeExports.jsx(M, { size: "sm", className: styles.clearIcon }) }))] }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled || isAtMax, className: classNames(styles.button, styles.buttonRight, buttonSize, error ? styles.buttonError : styles.buttonNormal), title: "Increase value", "aria-label": "Increase", "data-testid": "increment-button", children: jsxRuntimeExports.jsx(ae, { size: iconSize }) })] }), error && (jsxRuntimeExports.jsxs("div", { className: classNames(styles.message, styles.errorMessage), children: [jsxRuntimeExports.jsx(p, { size: "sm", className: styles.messageIcon }), jsxRuntimeExports.jsx("p", { className: styles.messageText, children: error })] })), warning && !error && (jsxRuntimeExports.jsxs("div", { className: classNames(styles.message, styles.warningMessage), children: [jsxRuntimeExports.jsx("div", { className: styles.messageIcon, children: jsxRuntimeExports.jsx("span", { children: "!" }) }), jsxRuntimeExports.jsx("p", { className: styles.messageText, children: warning })] })), hint && !error && !warning && (jsxRuntimeExports.jsx("div", { className: classNames(styles.message, styles.hintMessage), children: jsxRuntimeExports.jsx("p", { className: styles.messageText, children: hint }) }))] }));
|
|
745
765
|
}
|
|
746
766
|
|
|
747
767
|
export { NumericUpPicker as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rubenpazch/numeric-up-picker",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"repository": "https://github.com/rubenpazch/lbyte-ui-library.git",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -11,7 +11,9 @@
|
|
|
11
11
|
"files": [
|
|
12
12
|
"dist"
|
|
13
13
|
],
|
|
14
|
-
"sideEffects":
|
|
14
|
+
"sideEffects": [
|
|
15
|
+
"**/*.css"
|
|
16
|
+
],
|
|
15
17
|
"exports": {
|
|
16
18
|
".": {
|
|
17
19
|
"import": "./dist/index.esm.js",
|
|
@@ -24,7 +26,7 @@
|
|
|
24
26
|
"react-dom": "^19.0.0"
|
|
25
27
|
},
|
|
26
28
|
"dependencies": {
|
|
27
|
-
"@rubenpazch/icons": "
|
|
29
|
+
"@rubenpazch/icons": "4.0.0"
|
|
28
30
|
},
|
|
29
31
|
"devDependencies": {
|
|
30
32
|
"@rubenpazch/typescript-config": "3.0.0"
|