@rubenpazch/numeric-up-picker 2.0.1 → 3.0.1
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 +3 -1
- package/dist/NumericUpPicker.d.ts.map +1 -1
- package/dist/index.cjs.js +64 -31
- package/dist/index.d.ts +4 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +64 -31
- package/package.json +3 -3
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export type NumericUpPickerSize = "small" | "medium" | "large";
|
|
1
2
|
export interface NumericUpPickerProps {
|
|
2
3
|
label?: string;
|
|
3
4
|
value: string | number;
|
|
@@ -21,6 +22,7 @@ export interface NumericUpPickerProps {
|
|
|
21
22
|
defaultToZero?: boolean;
|
|
22
23
|
clearable?: boolean;
|
|
23
24
|
onClear?: () => void;
|
|
25
|
+
size?: NumericUpPickerSize;
|
|
24
26
|
}
|
|
25
|
-
export default function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step, error, hint, warning, disabled, className, required, useMinAsDefault, alwaysNegative, integerOnly, showSign, defaultToZero, clearable, onClear, }: NumericUpPickerProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export default function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step, error, hint, warning, disabled, className, required, useMinAsDefault, alwaysNegative, integerOnly, showSign, defaultToZero, clearable, onClear, size, }: NumericUpPickerProps): import("react/jsx-runtime").JSX.Element;
|
|
26
28
|
//# sourceMappingURL=NumericUpPicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumericUpPicker.d.ts","sourceRoot":"","sources":["../src/NumericUpPicker.tsx"],"names":[],"mappings":"AAqBA,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;
|
|
1
|
+
{"version":3,"file":"NumericUpPicker.d.ts","sourceRoot":"","sources":["../src/NumericUpPicker.tsx"],"names":[],"mappings":"AAqBA,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,2CAgbtB"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -132,7 +132,7 @@ function requireReactJsxRuntime_development () {
|
|
|
132
132
|
testStringCoercion(value);
|
|
133
133
|
var JSCompiler_inline_result = !1;
|
|
134
134
|
} catch (e) {
|
|
135
|
-
JSCompiler_inline_result =
|
|
135
|
+
JSCompiler_inline_result = true;
|
|
136
136
|
}
|
|
137
137
|
if (JSCompiler_inline_result) {
|
|
138
138
|
JSCompiler_inline_result = console;
|
|
@@ -176,29 +176,29 @@ function requireReactJsxRuntime_development () {
|
|
|
176
176
|
function hasValidKey(config) {
|
|
177
177
|
if (hasOwnProperty.call(config, "key")) {
|
|
178
178
|
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
|
|
179
|
-
if (getter && getter.isReactWarning) return
|
|
179
|
+
if (getter && getter.isReactWarning) return false;
|
|
180
180
|
}
|
|
181
181
|
return void 0 !== config.key;
|
|
182
182
|
}
|
|
183
183
|
function defineKeyPropWarningGetter(props, displayName) {
|
|
184
184
|
function warnAboutAccessingKey() {
|
|
185
185
|
specialPropKeyWarningShown ||
|
|
186
|
-
((specialPropKeyWarningShown =
|
|
186
|
+
((specialPropKeyWarningShown = true),
|
|
187
187
|
console.error(
|
|
188
188
|
"%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)",
|
|
189
189
|
displayName
|
|
190
190
|
));
|
|
191
191
|
}
|
|
192
|
-
warnAboutAccessingKey.isReactWarning =
|
|
192
|
+
warnAboutAccessingKey.isReactWarning = true;
|
|
193
193
|
Object.defineProperty(props, "key", {
|
|
194
194
|
get: warnAboutAccessingKey,
|
|
195
|
-
configurable:
|
|
195
|
+
configurable: true
|
|
196
196
|
});
|
|
197
197
|
}
|
|
198
198
|
function elementRefGetterWithDeprecationWarning() {
|
|
199
199
|
var componentName = getComponentNameFromType(this.type);
|
|
200
200
|
didWarnAboutElementRef[componentName] ||
|
|
201
|
-
((didWarnAboutElementRef[componentName] =
|
|
201
|
+
((didWarnAboutElementRef[componentName] = true),
|
|
202
202
|
console.error(
|
|
203
203
|
"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."
|
|
204
204
|
));
|
|
@@ -216,33 +216,33 @@ function requireReactJsxRuntime_development () {
|
|
|
216
216
|
};
|
|
217
217
|
null !== (void 0 !== refProp ? refProp : null)
|
|
218
218
|
? Object.defineProperty(type, "ref", {
|
|
219
|
-
enumerable:
|
|
219
|
+
enumerable: false,
|
|
220
220
|
get: elementRefGetterWithDeprecationWarning
|
|
221
221
|
})
|
|
222
|
-
: Object.defineProperty(type, "ref", { enumerable:
|
|
222
|
+
: Object.defineProperty(type, "ref", { enumerable: false, value: null });
|
|
223
223
|
type._store = {};
|
|
224
224
|
Object.defineProperty(type._store, "validated", {
|
|
225
|
-
configurable:
|
|
226
|
-
enumerable:
|
|
227
|
-
writable:
|
|
225
|
+
configurable: false,
|
|
226
|
+
enumerable: false,
|
|
227
|
+
writable: true,
|
|
228
228
|
value: 0
|
|
229
229
|
});
|
|
230
230
|
Object.defineProperty(type, "_debugInfo", {
|
|
231
|
-
configurable:
|
|
232
|
-
enumerable:
|
|
233
|
-
writable:
|
|
231
|
+
configurable: false,
|
|
232
|
+
enumerable: false,
|
|
233
|
+
writable: true,
|
|
234
234
|
value: null
|
|
235
235
|
});
|
|
236
236
|
Object.defineProperty(type, "_debugStack", {
|
|
237
|
-
configurable:
|
|
238
|
-
enumerable:
|
|
239
|
-
writable:
|
|
237
|
+
configurable: false,
|
|
238
|
+
enumerable: false,
|
|
239
|
+
writable: true,
|
|
240
240
|
value: debugStack
|
|
241
241
|
});
|
|
242
242
|
Object.defineProperty(type, "_debugTask", {
|
|
243
|
-
configurable:
|
|
244
|
-
enumerable:
|
|
245
|
-
writable:
|
|
243
|
+
configurable: false,
|
|
244
|
+
enumerable: false,
|
|
245
|
+
writable: true,
|
|
246
246
|
value: debugTask
|
|
247
247
|
});
|
|
248
248
|
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
|
|
@@ -291,7 +291,7 @@ function requireReactJsxRuntime_development () {
|
|
|
291
291
|
keys,
|
|
292
292
|
children
|
|
293
293
|
),
|
|
294
|
-
(didWarnAboutKeySpread[children + isStaticChildren] =
|
|
294
|
+
(didWarnAboutKeySpread[children + isStaticChildren] = true));
|
|
295
295
|
}
|
|
296
296
|
children = null;
|
|
297
297
|
void 0 !== maybeKey &&
|
|
@@ -383,7 +383,7 @@ function requireReactJsxRuntime_development () {
|
|
|
383
383
|
type,
|
|
384
384
|
config,
|
|
385
385
|
maybeKey,
|
|
386
|
-
|
|
386
|
+
false,
|
|
387
387
|
trackActualOwner
|
|
388
388
|
? Error("react-stack-top-frame")
|
|
389
389
|
: unknownOwnerDebugStack,
|
|
@@ -397,7 +397,7 @@ function requireReactJsxRuntime_development () {
|
|
|
397
397
|
type,
|
|
398
398
|
config,
|
|
399
399
|
maybeKey,
|
|
400
|
-
|
|
400
|
+
true,
|
|
401
401
|
trackActualOwner
|
|
402
402
|
? Error("react-stack-top-frame")
|
|
403
403
|
: unknownOwnerDebugStack,
|
|
@@ -433,7 +433,7 @@ var r,s={exports:{}},o={};var t,l,n={};
|
|
|
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===$?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case y:return "SuspenseList";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===$?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case y: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 u:return "Portal";case g:return e.displayName||"Context";case f:return (e._context.displayName||"Context")+".Consumer";case j: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 C: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===x)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===C)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function l(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return H[e]||(H[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,l,n,i){var h,m=s.children;if(void 0!==m)if(l)if(M(m)){for(l=0;l<m.length;l++)c(m[l]);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(z.call(s,"key")){m=r(e);var u=Object.keys(s).filter(function(e){return "key"!==e});l=0<u.length?"{key: someKey, "+u.join(": ..., ")+": ...}":"{key: someKey}",V[m+l]||(u=0<u.length?"{"+u.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} />',l,m,u,m),V[m+l]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if(z.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 x in t={},s)"key"!==x&&(t[x]=s[x]);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,l){var n=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==n?n: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:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),n,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===C&&("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"),u=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),f=Symbol.for("react.consumer"),g=Symbol.for("react.context"),j=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),y=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),$=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,M=Array.isArray,B=console.createTask?console.createTask:function(){return null},H={},W=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,l)(),_=B(t(l)),V={};n.Fragment=x,n.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):W,o?B(t(e)):_)},n.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):W,o?B(t(e)):_)};}()),n}var i=(l||(l=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 l in o={},s)"key"!==l&&(o[l]=s[l]);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 m({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 g({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 O({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 U({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
437
|
|
|
438
438
|
// CSS to hide native number input spinners
|
|
439
439
|
const hideSpinnersStyle = `
|
|
@@ -446,10 +446,43 @@ const hideSpinnersStyle = `
|
|
|
446
446
|
-moz-appearance: textfield;
|
|
447
447
|
}
|
|
448
448
|
`;
|
|
449
|
-
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, }) {
|
|
449
|
+
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
450
|
// Track if the field has been touched (user has focused on it)
|
|
451
451
|
const [hasBeenTouched, setHasBeenTouched] = require$$0.useState(false);
|
|
452
452
|
const numValue = typeof value === "string" ? parseFloat(value) || 0 : value;
|
|
453
|
+
// Size-based styling
|
|
454
|
+
const sizeClasses = {
|
|
455
|
+
container: {
|
|
456
|
+
small: "h-8",
|
|
457
|
+
medium: "h-12",
|
|
458
|
+
large: "h-16",
|
|
459
|
+
},
|
|
460
|
+
input: {
|
|
461
|
+
small: "text-xs",
|
|
462
|
+
medium: "text-lg",
|
|
463
|
+
large: "text-2xl",
|
|
464
|
+
},
|
|
465
|
+
button: {
|
|
466
|
+
small: "w-8",
|
|
467
|
+
medium: "w-12",
|
|
468
|
+
large: "w-16",
|
|
469
|
+
},
|
|
470
|
+
icon: {
|
|
471
|
+
small: "sm",
|
|
472
|
+
medium: "md",
|
|
473
|
+
large: "lg",
|
|
474
|
+
},
|
|
475
|
+
label: {
|
|
476
|
+
small: "text-xs",
|
|
477
|
+
medium: "text-sm",
|
|
478
|
+
large: "text-base",
|
|
479
|
+
},
|
|
480
|
+
};
|
|
481
|
+
const containerSize = sizeClasses.container[size];
|
|
482
|
+
const inputSize = sizeClasses.input[size];
|
|
483
|
+
const buttonSize = sizeClasses.button[size];
|
|
484
|
+
const iconSize = sizeClasses.icon[size];
|
|
485
|
+
const labelSize = sizeClasses.label[size];
|
|
453
486
|
// Format display value with sign if showSign is true
|
|
454
487
|
const displayValue = require$$0.useMemo(() => {
|
|
455
488
|
if (!showSign ||
|
|
@@ -648,7 +681,7 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
648
681
|
if (alwaysNegative) {
|
|
649
682
|
// Clamp the absolute value within the absolute range
|
|
650
683
|
const absMin = Math.abs(max ?? -0.25); // max is the least negative (closest to 0)
|
|
651
|
-
const absMax = Math.abs(min ?? -10
|
|
684
|
+
const absMax = Math.abs(min ?? -10); // min is the most negative (farthest from 0)
|
|
652
685
|
if (numericValue < absMin) {
|
|
653
686
|
numericValue = absMin;
|
|
654
687
|
}
|
|
@@ -694,23 +727,23 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
694
727
|
(alwaysNegative
|
|
695
728
|
? max !== undefined && Math.abs(numValue) <= Math.abs(max)
|
|
696
729
|
: max !== undefined && numValue >= max);
|
|
697
|
-
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: `block
|
|
730
|
+
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: `block font-medium mb-2 ${labelSize} ${error ? "text-red-700" : "text-gray-700"}`, children: [label, required && jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-between ${containerSize} rounded-lg border-2 transition-all ${error
|
|
698
731
|
? "border-red-500 bg-red-50"
|
|
699
732
|
: disabled
|
|
700
733
|
? "border-gray-300 bg-gray-100 opacity-50 cursor-not-allowed"
|
|
701
|
-
: "border-gray-300 bg-gray-50"}`, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled || isAtMin, className: `flex-shrink-0
|
|
734
|
+
: "border-gray-300 bg-gray-50"}`, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled || isAtMin, className: `flex-shrink-0 ${buttonSize} h-full flex items-center justify-center border-r border-gray-300 transition-all ${error
|
|
702
735
|
? "text-red-500"
|
|
703
736
|
: disabled || isAtMin
|
|
704
737
|
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
705
|
-
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Decrease value", "aria-label": "Decrease", children: jsxRuntimeExports.jsx(
|
|
738
|
+
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Decrease value", "aria-label": "Decrease", children: jsxRuntimeExports.jsx(O, { 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: {
|
|
706
739
|
WebkitAppearance: "none",
|
|
707
740
|
MozAppearance: "textfield",
|
|
708
741
|
appearance: "none",
|
|
709
|
-
} }) }), 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(g, { size: "sm" }) })), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled || isAtMax, className: `flex-shrink-0
|
|
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(g, { 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
|
|
710
743
|
? "text-red-500"
|
|
711
744
|
: disabled || isAtMax
|
|
712
745
|
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
713
|
-
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Increase value", "aria-label": "Increase", children: jsxRuntimeExports.jsx(U, { size:
|
|
746
|
+
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Increase value", "aria-label": "Increase", children: jsxRuntimeExports.jsx(U, { size: iconSize }) })] }), error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx(m, { 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 }))] }));
|
|
714
747
|
}
|
|
715
748
|
|
|
716
749
|
module.exports = NumericUpPicker;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
+
type NumericUpPickerSize = "small" | "medium" | "large";
|
|
3
4
|
interface NumericUpPickerProps {
|
|
4
5
|
label?: string;
|
|
5
6
|
value: string | number;
|
|
@@ -23,7 +24,9 @@ interface NumericUpPickerProps {
|
|
|
23
24
|
defaultToZero?: boolean;
|
|
24
25
|
clearable?: boolean;
|
|
25
26
|
onClear?: () => void;
|
|
27
|
+
size?: NumericUpPickerSize;
|
|
26
28
|
}
|
|
27
|
-
declare function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step, error, hint, warning, disabled, className, required, useMinAsDefault, alwaysNegative, integerOnly, showSign, defaultToZero, clearable, onClear, }: NumericUpPickerProps): react_jsx_runtime.JSX.Element;
|
|
29
|
+
declare function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step, error, hint, warning, disabled, className, required, useMinAsDefault, alwaysNegative, integerOnly, showSign, defaultToZero, clearable, onClear, size, }: NumericUpPickerProps): react_jsx_runtime.JSX.Element;
|
|
28
30
|
|
|
29
31
|
export { NumericUpPicker as default };
|
|
32
|
+
export type { NumericUpPickerProps, NumericUpPickerSize };
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EACV,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -130,7 +130,7 @@ function requireReactJsxRuntime_development () {
|
|
|
130
130
|
testStringCoercion(value);
|
|
131
131
|
var JSCompiler_inline_result = !1;
|
|
132
132
|
} catch (e) {
|
|
133
|
-
JSCompiler_inline_result =
|
|
133
|
+
JSCompiler_inline_result = true;
|
|
134
134
|
}
|
|
135
135
|
if (JSCompiler_inline_result) {
|
|
136
136
|
JSCompiler_inline_result = console;
|
|
@@ -174,29 +174,29 @@ function requireReactJsxRuntime_development () {
|
|
|
174
174
|
function hasValidKey(config) {
|
|
175
175
|
if (hasOwnProperty.call(config, "key")) {
|
|
176
176
|
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
|
|
177
|
-
if (getter && getter.isReactWarning) return
|
|
177
|
+
if (getter && getter.isReactWarning) return false;
|
|
178
178
|
}
|
|
179
179
|
return void 0 !== config.key;
|
|
180
180
|
}
|
|
181
181
|
function defineKeyPropWarningGetter(props, displayName) {
|
|
182
182
|
function warnAboutAccessingKey() {
|
|
183
183
|
specialPropKeyWarningShown ||
|
|
184
|
-
((specialPropKeyWarningShown =
|
|
184
|
+
((specialPropKeyWarningShown = true),
|
|
185
185
|
console.error(
|
|
186
186
|
"%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)",
|
|
187
187
|
displayName
|
|
188
188
|
));
|
|
189
189
|
}
|
|
190
|
-
warnAboutAccessingKey.isReactWarning =
|
|
190
|
+
warnAboutAccessingKey.isReactWarning = true;
|
|
191
191
|
Object.defineProperty(props, "key", {
|
|
192
192
|
get: warnAboutAccessingKey,
|
|
193
|
-
configurable:
|
|
193
|
+
configurable: true
|
|
194
194
|
});
|
|
195
195
|
}
|
|
196
196
|
function elementRefGetterWithDeprecationWarning() {
|
|
197
197
|
var componentName = getComponentNameFromType(this.type);
|
|
198
198
|
didWarnAboutElementRef[componentName] ||
|
|
199
|
-
((didWarnAboutElementRef[componentName] =
|
|
199
|
+
((didWarnAboutElementRef[componentName] = true),
|
|
200
200
|
console.error(
|
|
201
201
|
"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."
|
|
202
202
|
));
|
|
@@ -214,33 +214,33 @@ function requireReactJsxRuntime_development () {
|
|
|
214
214
|
};
|
|
215
215
|
null !== (void 0 !== refProp ? refProp : null)
|
|
216
216
|
? Object.defineProperty(type, "ref", {
|
|
217
|
-
enumerable:
|
|
217
|
+
enumerable: false,
|
|
218
218
|
get: elementRefGetterWithDeprecationWarning
|
|
219
219
|
})
|
|
220
|
-
: Object.defineProperty(type, "ref", { enumerable:
|
|
220
|
+
: Object.defineProperty(type, "ref", { enumerable: false, value: null });
|
|
221
221
|
type._store = {};
|
|
222
222
|
Object.defineProperty(type._store, "validated", {
|
|
223
|
-
configurable:
|
|
224
|
-
enumerable:
|
|
225
|
-
writable:
|
|
223
|
+
configurable: false,
|
|
224
|
+
enumerable: false,
|
|
225
|
+
writable: true,
|
|
226
226
|
value: 0
|
|
227
227
|
});
|
|
228
228
|
Object.defineProperty(type, "_debugInfo", {
|
|
229
|
-
configurable:
|
|
230
|
-
enumerable:
|
|
231
|
-
writable:
|
|
229
|
+
configurable: false,
|
|
230
|
+
enumerable: false,
|
|
231
|
+
writable: true,
|
|
232
232
|
value: null
|
|
233
233
|
});
|
|
234
234
|
Object.defineProperty(type, "_debugStack", {
|
|
235
|
-
configurable:
|
|
236
|
-
enumerable:
|
|
237
|
-
writable:
|
|
235
|
+
configurable: false,
|
|
236
|
+
enumerable: false,
|
|
237
|
+
writable: true,
|
|
238
238
|
value: debugStack
|
|
239
239
|
});
|
|
240
240
|
Object.defineProperty(type, "_debugTask", {
|
|
241
|
-
configurable:
|
|
242
|
-
enumerable:
|
|
243
|
-
writable:
|
|
241
|
+
configurable: false,
|
|
242
|
+
enumerable: false,
|
|
243
|
+
writable: true,
|
|
244
244
|
value: debugTask
|
|
245
245
|
});
|
|
246
246
|
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
|
|
@@ -289,7 +289,7 @@ function requireReactJsxRuntime_development () {
|
|
|
289
289
|
keys,
|
|
290
290
|
children
|
|
291
291
|
),
|
|
292
|
-
(didWarnAboutKeySpread[children + isStaticChildren] =
|
|
292
|
+
(didWarnAboutKeySpread[children + isStaticChildren] = true));
|
|
293
293
|
}
|
|
294
294
|
children = null;
|
|
295
295
|
void 0 !== maybeKey &&
|
|
@@ -381,7 +381,7 @@ function requireReactJsxRuntime_development () {
|
|
|
381
381
|
type,
|
|
382
382
|
config,
|
|
383
383
|
maybeKey,
|
|
384
|
-
|
|
384
|
+
false,
|
|
385
385
|
trackActualOwner
|
|
386
386
|
? Error("react-stack-top-frame")
|
|
387
387
|
: unknownOwnerDebugStack,
|
|
@@ -395,7 +395,7 @@ function requireReactJsxRuntime_development () {
|
|
|
395
395
|
type,
|
|
396
396
|
config,
|
|
397
397
|
maybeKey,
|
|
398
|
-
|
|
398
|
+
true,
|
|
399
399
|
trackActualOwner
|
|
400
400
|
? Error("react-stack-top-frame")
|
|
401
401
|
: unknownOwnerDebugStack,
|
|
@@ -431,7 +431,7 @@ var r,s={exports:{}},o={};var t,l,n={};
|
|
|
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===$?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case y:return "SuspenseList";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===$?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case y: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 u:return "Portal";case g:return e.displayName||"Context";case f:return (e._context.displayName||"Context")+".Consumer";case j: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 C: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===x)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===C)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function l(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return H[e]||(H[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,l,n,i){var h,m=s.children;if(void 0!==m)if(l)if(M(m)){for(l=0;l<m.length;l++)c(m[l]);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(z.call(s,"key")){m=r(e);var u=Object.keys(s).filter(function(e){return "key"!==e});l=0<u.length?"{key: someKey, "+u.join(": ..., ")+": ...}":"{key: someKey}",V[m+l]||(u=0<u.length?"{"+u.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} />',l,m,u,m),V[m+l]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if(z.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 x in t={},s)"key"!==x&&(t[x]=s[x]);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,l){var n=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==n?n: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:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),n,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===C&&("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"),u=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),f=Symbol.for("react.consumer"),g=Symbol.for("react.context"),j=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),y=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),$=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,M=Array.isArray,B=console.createTask?console.createTask:function(){return null},H={},W=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,l)(),_=B(t(l)),V={};n.Fragment=x,n.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):W,o?B(t(e)):_)},n.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):W,o?B(t(e)):_)};}()),n}var i=(l||(l=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 l in o={},s)"key"!==l&&(o[l]=s[l]);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 m({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 g({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 O({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 U({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
435
|
|
|
436
436
|
// CSS to hide native number input spinners
|
|
437
437
|
const hideSpinnersStyle = `
|
|
@@ -444,10 +444,43 @@ const hideSpinnersStyle = `
|
|
|
444
444
|
-moz-appearance: textfield;
|
|
445
445
|
}
|
|
446
446
|
`;
|
|
447
|
-
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, }) {
|
|
447
|
+
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
448
|
// Track if the field has been touched (user has focused on it)
|
|
449
449
|
const [hasBeenTouched, setHasBeenTouched] = useState(false);
|
|
450
450
|
const numValue = typeof value === "string" ? parseFloat(value) || 0 : value;
|
|
451
|
+
// Size-based styling
|
|
452
|
+
const sizeClasses = {
|
|
453
|
+
container: {
|
|
454
|
+
small: "h-8",
|
|
455
|
+
medium: "h-12",
|
|
456
|
+
large: "h-16",
|
|
457
|
+
},
|
|
458
|
+
input: {
|
|
459
|
+
small: "text-xs",
|
|
460
|
+
medium: "text-lg",
|
|
461
|
+
large: "text-2xl",
|
|
462
|
+
},
|
|
463
|
+
button: {
|
|
464
|
+
small: "w-8",
|
|
465
|
+
medium: "w-12",
|
|
466
|
+
large: "w-16",
|
|
467
|
+
},
|
|
468
|
+
icon: {
|
|
469
|
+
small: "sm",
|
|
470
|
+
medium: "md",
|
|
471
|
+
large: "lg",
|
|
472
|
+
},
|
|
473
|
+
label: {
|
|
474
|
+
small: "text-xs",
|
|
475
|
+
medium: "text-sm",
|
|
476
|
+
large: "text-base",
|
|
477
|
+
},
|
|
478
|
+
};
|
|
479
|
+
const containerSize = sizeClasses.container[size];
|
|
480
|
+
const inputSize = sizeClasses.input[size];
|
|
481
|
+
const buttonSize = sizeClasses.button[size];
|
|
482
|
+
const iconSize = sizeClasses.icon[size];
|
|
483
|
+
const labelSize = sizeClasses.label[size];
|
|
451
484
|
// Format display value with sign if showSign is true
|
|
452
485
|
const displayValue = useMemo(() => {
|
|
453
486
|
if (!showSign ||
|
|
@@ -646,7 +679,7 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
646
679
|
if (alwaysNegative) {
|
|
647
680
|
// Clamp the absolute value within the absolute range
|
|
648
681
|
const absMin = Math.abs(max ?? -0.25); // max is the least negative (closest to 0)
|
|
649
|
-
const absMax = Math.abs(min ?? -10
|
|
682
|
+
const absMax = Math.abs(min ?? -10); // min is the most negative (farthest from 0)
|
|
650
683
|
if (numericValue < absMin) {
|
|
651
684
|
numericValue = absMin;
|
|
652
685
|
}
|
|
@@ -692,23 +725,23 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
692
725
|
(alwaysNegative
|
|
693
726
|
? max !== undefined && Math.abs(numValue) <= Math.abs(max)
|
|
694
727
|
: max !== undefined && numValue >= max);
|
|
695
|
-
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: `block
|
|
728
|
+
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: `block font-medium mb-2 ${labelSize} ${error ? "text-red-700" : "text-gray-700"}`, children: [label, required && jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-between ${containerSize} rounded-lg border-2 transition-all ${error
|
|
696
729
|
? "border-red-500 bg-red-50"
|
|
697
730
|
: disabled
|
|
698
731
|
? "border-gray-300 bg-gray-100 opacity-50 cursor-not-allowed"
|
|
699
|
-
: "border-gray-300 bg-gray-50"}`, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled || isAtMin, className: `flex-shrink-0
|
|
732
|
+
: "border-gray-300 bg-gray-50"}`, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled || isAtMin, className: `flex-shrink-0 ${buttonSize} h-full flex items-center justify-center border-r border-gray-300 transition-all ${error
|
|
700
733
|
? "text-red-500"
|
|
701
734
|
: disabled || isAtMin
|
|
702
735
|
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
703
|
-
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Decrease value", "aria-label": "Decrease", children: jsxRuntimeExports.jsx(
|
|
736
|
+
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Decrease value", "aria-label": "Decrease", children: jsxRuntimeExports.jsx(O, { 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: {
|
|
704
737
|
WebkitAppearance: "none",
|
|
705
738
|
MozAppearance: "textfield",
|
|
706
739
|
appearance: "none",
|
|
707
|
-
} }) }), 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(g, { size: "sm" }) })), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled || isAtMax, className: `flex-shrink-0
|
|
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(g, { 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
|
|
708
741
|
? "text-red-500"
|
|
709
742
|
: disabled || isAtMax
|
|
710
743
|
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
711
|
-
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Increase value", "aria-label": "Increase", children: jsxRuntimeExports.jsx(U, { size:
|
|
744
|
+
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Increase value", "aria-label": "Increase", children: jsxRuntimeExports.jsx(U, { size: iconSize }) })] }), error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx(m, { 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 }))] }));
|
|
712
745
|
}
|
|
713
746
|
|
|
714
747
|
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": "3.0.1",
|
|
4
4
|
"repository": "https://github.com/rubenpazch/lbyte-ui-library.git",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
"react-dom": "^19.0.0"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@rubenpazch/icons": "
|
|
27
|
+
"@rubenpazch/icons": "3.0.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@rubenpazch/typescript-config": "
|
|
30
|
+
"@rubenpazch/typescript-config": "3.0.0"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "rollup -c",
|