@rubenpazch/numeric-picker 2.0.0 → 4.0.0

package/dist/NumericPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumericPicker.d.ts","sourceRoot":"","sources":["../src/NumericPicker.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAAY,EACZ,IAAQ,EACR,QAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,WAAoB,GACrB,EAAE,kBAAkB,2CAwHpB"}
+{"version":3,"file":"NumericPicker.d.ts","sourceRoot":"","sources":["../src/NumericPicker.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAAY,EACZ,IAAQ,EACR,QAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,WAAoB,GACrB,EAAE,kBAAkB,2CAmIpB"}

package/dist/index.cjs.js

@@ -424,18 +424,49 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
-function NumericPicker({ value, onChange, min = 0, max = 999999, step = 1, decimals = 2, currency = 'S/.', label, required = false, disabled = false, placeholder = '0.00', }) {
-    const [displayValue, setDisplayValue] = require$$0.useState(String(value || ''));
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/* Container */\n.NumericPicker-module_container__Sw8zi {\n  width: 100%;\n}\n\n/* Label */\n.NumericPicker-module_label__zRn12 {\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  color: #374151;\n  margin-bottom: 0.25rem;\n}\n\n.NumericPicker-module_required__3xCcz {\n  color: #dc2626;\n}\n\n/* Input container */\n.NumericPicker-module_inputContainer__6ExpW {\n  position: relative;\n}\n\n/* Currency symbol */\n.NumericPicker-module_currency__-sQrd {\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #4b5563;\n  font-weight: 500;\n  pointer-events: none;\n}\n\n/* Input field */\n.NumericPicker-module_input__U7-ux {\n  width: 100%;\n  padding: 0.625rem 3rem;\n  border: 2px solid #d1d5db;\n  border-radius: 0.5rem;\n  outline: none;\n  transition: all 150ms ease;\n}\n\n.NumericPicker-module_input__U7-ux:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 1px #3b82f6;\n}\n\n.NumericPicker-module_input__U7-ux:disabled {\n  background: #f9fafb;\n  color: #6b7280;\n  cursor: not-allowed;\n}\n\n/* Button container */\n.NumericPicker-module_buttonContainer__A0EZc {\n  position: absolute;\n  right: 0.25rem;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n/* Buttons */\n.NumericPicker-module_button__eqqWo {\n  padding: 0.25rem 0.5rem;\n  background: #f3f4f6;\n  border: none;\n  border-radius: 0.125rem;\n  transition: all 150ms ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.NumericPicker-module_button__eqqWo:hover:not(:disabled) {\n  background: #e5e7eb;\n}\n\n.NumericPicker-module_button__eqqWo:disabled {\n  background: #f9fafb;\n  color: #d1d5db;\n  cursor: not-allowed;\n}\n\n.NumericPicker-module_buttonIcon__Z6fRE {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n";
+var styles = {"container":"NumericPicker-module_container__Sw8zi","label":"NumericPicker-module_label__zRn12","required":"NumericPicker-module_required__3xCcz","inputContainer":"NumericPicker-module_inputContainer__6ExpW","currency":"NumericPicker-module_currency__-sQrd","input":"NumericPicker-module_input__U7-ux","buttonContainer":"NumericPicker-module_buttonContainer__A0EZc","button":"NumericPicker-module_button__eqqWo","buttonIcon":"NumericPicker-module_buttonIcon__Z6fRE"};
+styleInject(css_248z);
+
+function NumericPicker({ value, onChange, min = 0, max = 999999, step = 1, decimals = 2, currency = "S/.", label, required = false, disabled = false, placeholder = "0.00", }) {
+    const [displayValue, setDisplayValue] = require$$0.useState(String(value || ""));
     require$$0.useEffect(() => {
-        setDisplayValue(String(value || ''));
+        setDisplayValue(String(value || ""));
     }, [value]);
     const handleInputChange = (newValue) => {
         // Remove currency symbol if present
-        let cleanValue = newValue.replace(/[^\d.-]/g, '');
+        let cleanValue = newValue.replace(/[^\d.-]/g, "");
         // Validate and format
-        if (cleanValue === '' || cleanValue === '-') {
+        if (cleanValue === "" || cleanValue === "-") {
             setDisplayValue(cleanValue);
-            onChange('');
+            onChange("");
             return;
         }
         const numValue = parseFloat(cleanValue);
@@ -472,7 +503,7 @@ function NumericPicker({ value, onChange, min = 0, max = 999999, step = 1, decim
         setDisplayValue(formatted);
         onChange(formatted);
     };
-    return (jsxRuntimeExports.jsxs("div", { className: "w-full", children: [label && (jsxRuntimeExports.jsxs("label", { className: "block text-sm font-semibold text-gray-700 mb-1", children: [label, required && jsxRuntimeExports.jsx("span", { className: "text-red-600", children: " *" })] })), jsxRuntimeExports.jsxs("div", { className: "relative", children: [jsxRuntimeExports.jsx("span", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600 font-medium pointer-events-none", children: currency }), jsxRuntimeExports.jsx("input", { type: "text", value: displayValue, onChange: (e) => handleInputChange(e.target.value), disabled: disabled, placeholder: placeholder, className: "w-full pl-12 pr-12 py-2.5 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed transition" }), jsxRuntimeExports.jsxs("div", { className: "absolute right-1 top-1/2 transform -translate-y-1/2 flex flex-col gap-0.5", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: increment, disabled: disabled || parseFloat(displayValue || '0') >= max, className: "px-2 py-1 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 disabled:text-gray-300 rounded-sm transition flex items-center justify-center", title: "Increment", children: jsxRuntimeExports.jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V15a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: decrement, disabled: disabled || parseFloat(displayValue || '0') <= min, className: "px-2 py-1 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 disabled:text-gray-300 rounded-sm transition flex items-center justify-center", title: "Decrement", children: jsxRuntimeExports.jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V5a1 1 0 012 0v9.586l4.293-4.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: styles.container, "data-testid": "numeric-picker", children: [label && (jsxRuntimeExports.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports.jsx("span", { className: styles.required, children: " *" })] })), jsxRuntimeExports.jsxs("div", { className: styles.inputContainer, children: [jsxRuntimeExports.jsx("span", { className: styles.currency, "data-testid": "currency-symbol", children: currency }), jsxRuntimeExports.jsx("input", { type: "text", value: displayValue, onChange: (e) => handleInputChange(e.target.value), disabled: disabled, placeholder: placeholder, className: styles.input, "data-testid": "numeric-input" }), jsxRuntimeExports.jsxs("div", { className: styles.buttonContainer, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: increment, disabled: disabled || parseFloat(displayValue || "0") >= max, className: styles.button, title: "Increment", "data-testid": "increment-button", children: jsxRuntimeExports.jsx("svg", { className: styles.buttonIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V15a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: decrement, disabled: disabled || parseFloat(displayValue || "0") <= min, className: styles.button, title: "Decrement", "data-testid": "decrement-button", children: jsxRuntimeExports.jsx("svg", { className: styles.buttonIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V5a1 1 0 012 0v9.586l4.293-4.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] })] })] }));
 }
 
 module.exports = NumericPicker;

package/dist/index.esm.js

@@ -422,18 +422,49 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
-function NumericPicker({ value, onChange, min = 0, max = 999999, step = 1, decimals = 2, currency = 'S/.', label, required = false, disabled = false, placeholder = '0.00', }) {
-    const [displayValue, setDisplayValue] = useState(String(value || ''));
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/* Container */\n.NumericPicker-module_container__Sw8zi {\n  width: 100%;\n}\n\n/* Label */\n.NumericPicker-module_label__zRn12 {\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 600;\n  color: #374151;\n  margin-bottom: 0.25rem;\n}\n\n.NumericPicker-module_required__3xCcz {\n  color: #dc2626;\n}\n\n/* Input container */\n.NumericPicker-module_inputContainer__6ExpW {\n  position: relative;\n}\n\n/* Currency symbol */\n.NumericPicker-module_currency__-sQrd {\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #4b5563;\n  font-weight: 500;\n  pointer-events: none;\n}\n\n/* Input field */\n.NumericPicker-module_input__U7-ux {\n  width: 100%;\n  padding: 0.625rem 3rem;\n  border: 2px solid #d1d5db;\n  border-radius: 0.5rem;\n  outline: none;\n  transition: all 150ms ease;\n}\n\n.NumericPicker-module_input__U7-ux:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 1px #3b82f6;\n}\n\n.NumericPicker-module_input__U7-ux:disabled {\n  background: #f9fafb;\n  color: #6b7280;\n  cursor: not-allowed;\n}\n\n/* Button container */\n.NumericPicker-module_buttonContainer__A0EZc {\n  position: absolute;\n  right: 0.25rem;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n/* Buttons */\n.NumericPicker-module_button__eqqWo {\n  padding: 0.25rem 0.5rem;\n  background: #f3f4f6;\n  border: none;\n  border-radius: 0.125rem;\n  transition: all 150ms ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.NumericPicker-module_button__eqqWo:hover:not(:disabled) {\n  background: #e5e7eb;\n}\n\n.NumericPicker-module_button__eqqWo:disabled {\n  background: #f9fafb;\n  color: #d1d5db;\n  cursor: not-allowed;\n}\n\n.NumericPicker-module_buttonIcon__Z6fRE {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n";
+var styles = {"container":"NumericPicker-module_container__Sw8zi","label":"NumericPicker-module_label__zRn12","required":"NumericPicker-module_required__3xCcz","inputContainer":"NumericPicker-module_inputContainer__6ExpW","currency":"NumericPicker-module_currency__-sQrd","input":"NumericPicker-module_input__U7-ux","buttonContainer":"NumericPicker-module_buttonContainer__A0EZc","button":"NumericPicker-module_button__eqqWo","buttonIcon":"NumericPicker-module_buttonIcon__Z6fRE"};
+styleInject(css_248z);
+
+function NumericPicker({ value, onChange, min = 0, max = 999999, step = 1, decimals = 2, currency = "S/.", label, required = false, disabled = false, placeholder = "0.00", }) {
+    const [displayValue, setDisplayValue] = useState(String(value || ""));
     useEffect(() => {
-        setDisplayValue(String(value || ''));
+        setDisplayValue(String(value || ""));
     }, [value]);
     const handleInputChange = (newValue) => {
         // Remove currency symbol if present
-        let cleanValue = newValue.replace(/[^\d.-]/g, '');
+        let cleanValue = newValue.replace(/[^\d.-]/g, "");
         // Validate and format
-        if (cleanValue === '' || cleanValue === '-') {
+        if (cleanValue === "" || cleanValue === "-") {
             setDisplayValue(cleanValue);
-            onChange('');
+            onChange("");
             return;
         }
         const numValue = parseFloat(cleanValue);
@@ -470,7 +501,7 @@ function NumericPicker({ value, onChange, min = 0, max = 999999, step = 1, decim
         setDisplayValue(formatted);
         onChange(formatted);
     };
-    return (jsxRuntimeExports.jsxs("div", { className: "w-full", children: [label && (jsxRuntimeExports.jsxs("label", { className: "block text-sm font-semibold text-gray-700 mb-1", children: [label, required && jsxRuntimeExports.jsx("span", { className: "text-red-600", children: " *" })] })), jsxRuntimeExports.jsxs("div", { className: "relative", children: [jsxRuntimeExports.jsx("span", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600 font-medium pointer-events-none", children: currency }), jsxRuntimeExports.jsx("input", { type: "text", value: displayValue, onChange: (e) => handleInputChange(e.target.value), disabled: disabled, placeholder: placeholder, className: "w-full pl-12 pr-12 py-2.5 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed transition" }), jsxRuntimeExports.jsxs("div", { className: "absolute right-1 top-1/2 transform -translate-y-1/2 flex flex-col gap-0.5", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: increment, disabled: disabled || parseFloat(displayValue || '0') >= max, className: "px-2 py-1 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 disabled:text-gray-300 rounded-sm transition flex items-center justify-center", title: "Increment", children: jsxRuntimeExports.jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V15a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: decrement, disabled: disabled || parseFloat(displayValue || '0') <= min, className: "px-2 py-1 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 disabled:text-gray-300 rounded-sm transition flex items-center justify-center", title: "Decrement", children: jsxRuntimeExports.jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V5a1 1 0 012 0v9.586l4.293-4.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: styles.container, "data-testid": "numeric-picker", children: [label && (jsxRuntimeExports.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports.jsx("span", { className: styles.required, children: " *" })] })), jsxRuntimeExports.jsxs("div", { className: styles.inputContainer, children: [jsxRuntimeExports.jsx("span", { className: styles.currency, "data-testid": "currency-symbol", children: currency }), jsxRuntimeExports.jsx("input", { type: "text", value: displayValue, onChange: (e) => handleInputChange(e.target.value), disabled: disabled, placeholder: placeholder, className: styles.input, "data-testid": "numeric-input" }), jsxRuntimeExports.jsxs("div", { className: styles.buttonContainer, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: increment, disabled: disabled || parseFloat(displayValue || "0") >= max, className: styles.button, title: "Increment", "data-testid": "increment-button", children: jsxRuntimeExports.jsx("svg", { className: styles.buttonIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V15a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: decrement, disabled: disabled || parseFloat(displayValue || "0") <= min, className: styles.button, title: "Decrement", "data-testid": "decrement-button", children: jsxRuntimeExports.jsx("svg", { className: styles.buttonIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", d: "M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V5a1 1 0 012 0v9.586l4.293-4.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] })] })] }));
 }
 
 export { NumericPicker as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubenpazch/numeric-picker",
-  "version": "2.0.0",
+  "version": "4.0.0",
   "repository": "https://github.com/rubenpazch/lbyte-ui-library.git",
   "publishConfig": {
     "access": "public"
@@ -11,7 +11,9 @@
   "files": [
     "dist"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -24,7 +26,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@rubenpazch/typescript-config": "2.0.0"
+    "@rubenpazch/typescript-config": "3.0.0"
   },
   "scripts": {
     "build": "rollup -c",