@rubenpazch/numeric-up-picker 3.0.0 → 3.0.2
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 +40 -7
- package/dist/index.d.ts +4 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +40 -7
- package/package.json +2 -2
|
@@ -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
|
@@ -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 f:return e.displayName||"Context";case g: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"),g=Symbol.for("react.consumer"),f=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 f({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 ||
|
|
@@ -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(
|
|
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(f, { 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
|
@@ -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 f:return e.displayName||"Context";case g: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"),g=Symbol.for("react.consumer"),f=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 f({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 ||
|
|
@@ -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(
|
|
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(f, { 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.0.
|
|
3
|
+
"version": "3.0.2",
|
|
4
4
|
"repository": "https://github.com/rubenpazch/lbyte-ui-library.git",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"react-dom": "^19.0.0"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@rubenpazch/icons": "3.0.
|
|
27
|
+
"@rubenpazch/icons": "3.0.2"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@rubenpazch/typescript-config": "3.0.0"
|