@lanaco/lnc-react-ui 4.0.100 → 4.0.102

package/dist/Button.cjs

@@ -1,4 +1,4 @@
-"use strict";const l=require("react/jsx-runtime"),w=require("react"),o=require("./index-BPVoEhTF.cjs"),C=require("./index-DAOBjHnD.cjs"),r=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./utils-BWzf4vLl.cjs"),V=require("./Icon.cjs"),W=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),B={small:{regular:"1rem",icon:"0.75rem",justIcon:"0.5rem"},medium:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"},large:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"}},f=e=>`
+"use strict";const n=require("react/jsx-runtime"),w=require("react"),o=require("./index-BPVoEhTF.cjs"),C=require("./index-DAOBjHnD.cjs"),c=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./utils-BWzf4vLl.cjs"),z=require("./Icon.cjs"),W=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),B={small:{regular:"1rem",icon:"0.75rem",justIcon:"0.5rem"},medium:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"},large:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"}},f=e=>`
         outline: none;
         display: inline-flex;
         flex-direction: row;
@@ -13,11 +13,11 @@
         
         padding-left: ${e.hasLeadingIcon?B[e.size].icon:B[e.size].regular};
         padding-right: ${e.hasTrailingIcon?B[e.size].icon:B[e.size].regular};
-    `,D=r.styled.span`
+    `,D=c.styled.span`
   padding-right: ${e=>e.size==="small"?"0.25rem":"0.5rem"};
-`,E=r.styled.span`
+`,N=c.styled.span`
   padding-left: ${e=>e.size==="small"?"0.25rem":"0.5rem"};
-`,z=r.styled.button`
+`,I=c.styled.button`
   ${e=>f(e)}
 
   ${e=>t.getComponentTypographyCss(e.theme,"ButtonFilled",e.size,"enabled")};
@@ -50,7 +50,7 @@
     background-color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","background")};
     color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","text")};
   }
-`,L=r.styled.button`
+`,E=c.styled.button`
   ${e=>f(e)}
 
   min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
@@ -86,7 +86,7 @@
     cursor: default;
     background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted","gray","disabled","background")};
   }
-`,I=r.styled.button`
+`,O=c.styled.button`
   ${e=>f(e)}
 
   ${e=>t.getComponentTypographyCss(e.theme,"ButtonTinted",e.size,"enabled")};
@@ -121,7 +121,7 @@
     cursor: default;
     background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic","gray","disabled","background","backgroundOpacity")};
   }
-`,_=r.styled(I)`
+`,L=c.styled(O)`
   border: 1px solid
     ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","border","borderOpacity")};
-`,O=w.forwardRef((e,c)=>{const{text:k="",iconStyle:T="solid",leadingIcon:x=null,trailingIcon:R=null,borderRadius:v="regular",btnType:n="filled",disabled:P=!1,tabIndex:d=0,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,onLeadingIconClick:N,onTrailingIconClick:K,size:$="small",color:j="primary",className:F="",style:S={},children:U,...m}=e,h={theme:W.useTheme(),color:j,size:$,style:S,disabled:P,borderRadius:v,btnType:n,className:"lnc-ui-button "+F},a=!C.isEmpty(x),i=!C.isEmpty(R),q=!C.isEmpty(k),y=()=>l.jsxs(l.Fragment,{children:[a&&l.jsx(D,{size:$,children:l.jsx(V,{icon:x,sizeInUnits:"1.125rem",iconStyle:T})}),k,U,i&&l.jsx(E,{size:$,children:l.jsx(V,{icon:R,sizeInUnits:"1.125rem",iconStyle:T})})]});return n==="filled"?l.jsx(z,{ref:c,"data-type":"filled",...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,tabIndex:d,btnType:n,...m,children:y()}):n==="tinted"?l.jsx(L,{ref:c,"data-type":"tinted",...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,tabIndex:d,btnType:n,...m,children:y()}):n==="outline"?l.jsx(_,{ref:c,"data-type":"outline",...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,tabIndex:d,btnType:n,...m,children:y()}):n==="basic"?l.jsx(I,{ref:c,"data-type":"basic",...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,tabIndex:d,btnType:n,...m,children:y()}):l.jsx(z,{ref:c,"data-type":"filled",size:$,...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,hasText:q,tabIndex:d,btnType:n,...m,children:y()})});O.propTypes={text:o.PropTypes.string,iconStyle:o.PropTypes.oneOf(["regular","solid"]),leadingIcon:o.PropTypes.string,trailingIcon:o.PropTypes.string,borderRadius:o.PropTypes.oneOf(["slight","regular","edged","curved","none"]),btnType:o.PropTypes.oneOf(["filled","tinted","outline","basic"]),disabled:o.PropTypes.bool,tabIndex:o.PropTypes.number,onBlur:o.PropTypes.func,onFocus:o.PropTypes.func,onClick:o.PropTypes.func,onKeyDown:o.PropTypes.func,className:o.PropTypes.string,style:o.PropTypes.object,color:o.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:o.PropTypes.oneOf(["small","medium","large"])};module.exports=O;
+`,v=w.forwardRef((e,d)=>{const{text:k="",iconStyle:T="solid",leadingIcon:x=null,trailingIcon:R=null,borderRadius:j="regular",btnType:l="filled",disabled:F=!1,tabIndex:u=0,onFocus:s,onBlur:g,onClick:b,onKeyDown:m,onLeadingIconClick:_,onTrailingIconClick:K,size:$="small",color:V="primary",className:P="",style:S={},children:U,...h}=e,a={theme:W.useTheme(),color:V,size:$,style:S,disabled:F,borderRadius:j,btnType:l,className:"lnc-ui-button "+P},i=!C.isEmpty(x),r=!C.isEmpty(R),q=!C.isEmpty(k),y=()=>n.jsxs(n.Fragment,{children:[i&&n.jsx(D,{size:$,children:n.jsx(z,{icon:x,sizeInUnits:"1.125rem",iconStyle:T})}),k,U,r&&n.jsx(N,{size:$,children:n.jsx(z,{icon:R,sizeInUnits:"1.125rem",iconStyle:T})})]});return l==="filled"?n.jsx(I,{ref:d,"data-type":"filled",...a,className:`${a==null?void 0:a.className} ${V}-${l}-lnc-btn`,hasLeadingIcon:i,hasTrailingIcon:r,onFocus:s,onBlur:g,onClick:b,onKeyDown:m,tabIndex:u,btnType:l,...h,children:y()}):l==="tinted"?n.jsx(E,{ref:d,"data-type":"tinted",...a,hasLeadingIcon:i,hasTrailingIcon:r,onFocus:s,onBlur:g,onClick:b,onKeyDown:m,tabIndex:u,btnType:l,...h,children:y()}):l==="outline"?n.jsx(L,{ref:d,"data-type":"outline",...a,hasLeadingIcon:i,hasTrailingIcon:r,onFocus:s,onBlur:g,onClick:b,onKeyDown:m,tabIndex:u,btnType:l,...h,children:y()}):l==="basic"?n.jsx(O,{ref:d,"data-type":"basic",...a,hasLeadingIcon:i,hasTrailingIcon:r,onFocus:s,onBlur:g,onClick:b,onKeyDown:m,tabIndex:u,btnType:l,...h,children:y()}):n.jsx(I,{ref:d,"data-type":"filled",size:$,...a,hasLeadingIcon:i,hasTrailingIcon:r,onFocus:s,onBlur:g,onClick:b,onKeyDown:m,hasText:q,tabIndex:u,btnType:l,...h,children:y()})});v.propTypes={text:o.PropTypes.string,iconStyle:o.PropTypes.oneOf(["regular","solid"]),leadingIcon:o.PropTypes.string,trailingIcon:o.PropTypes.string,borderRadius:o.PropTypes.oneOf(["slight","regular","edged","curved","none"]),btnType:o.PropTypes.oneOf(["filled","tinted","outline","basic"]),disabled:o.PropTypes.bool,tabIndex:o.PropTypes.number,onBlur:o.PropTypes.func,onFocus:o.PropTypes.func,onClick:o.PropTypes.func,onKeyDown:o.PropTypes.func,className:o.PropTypes.string,style:o.PropTypes.object,color:o.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:o.PropTypes.oneOf(["small","medium","large"])};module.exports=v;

package/dist/Button.js

@@ -1,10 +1,10 @@
-import { jsx as i, jsxs as K, Fragment as W } from "react/jsx-runtime";
-import { forwardRef as E } from "react";
+import { jsx as i, jsxs as W, Fragment as E } from "react/jsx-runtime";
+import { forwardRef as P } from "react";
 import { P as o } from "./index-S5Cd7WrG.js";
 import { i as y } from "./index-BlxaTV-D.js";
-import { s as r } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { c as x, b as t, d as c, h as T, e as z, a as q } from "./utils-BXCGNjIy.js";
-import j from "./Icon.js";
+import { s as d } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { c as x, b as t, d as r, h as T, e as z, a as q } from "./utils-BXCGNjIy.js";
+import w from "./Icon.js";
 import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const k = {
   small: {
@@ -40,11 +40,11 @@ const k = {
         
         padding-left: ${e.hasLeadingIcon ? k[e.size].icon : k[e.size].regular};
         padding-right: ${e.hasTrailingIcon ? k[e.size].icon : k[e.size].regular};
-    `, G = r.span`
+    `, G = d.span`
   padding-right: ${(e) => e.size === "small" ? "0.25rem" : "0.5rem"};
-`, H = r.span`
+`, H = d.span`
   padding-left: ${(e) => e.size === "small" ? "0.25rem" : "0.5rem"};
-`, w = r.button`
+`, R = d.button`
   ${(e) => I(e)}
 
   ${(e) => x(
@@ -69,8 +69,8 @@ const k = {
   "text"
 )};
 
-  min-height: ${(e) => c(e.theme, e.size)};
-  max-height: ${(e) => c(e.theme, e.size)};
+  min-height: ${(e) => r(e.theme, e.size)};
+  max-height: ${(e) => r(e.theme, e.size)};
 
   &:disabled {
     ${(e) => e.disabled === !0 && T(e.theme)};
@@ -142,11 +142,11 @@ const k = {
   "text"
 )};
   }
-`, J = r.button`
+`, J = d.button`
   ${(e) => I(e)}
 
-  min-height: ${(e) => c(e.theme, e.size)};
-  max-height: ${(e) => c(e.theme, e.size)};
+  min-height: ${(e) => r(e.theme, e.size)};
+  max-height: ${(e) => r(e.theme, e.size)};
   ${(e) => x(
   e.theme,
   "ButtonTinted",
@@ -241,7 +241,7 @@ const k = {
   "background"
 )};
   }
-`, R = r.button`
+`, N = d.button`
   ${(e) => I(e)}
 
   ${(e) => x(
@@ -268,8 +268,8 @@ const k = {
   "backgroundOpacity"
 )};
 
-  min-height: ${(e) => c(e.theme, e.size)};
-  max-height: ${(e) => c(e.theme, e.size)};
+  min-height: ${(e) => r(e.theme, e.size)};
+  max-height: ${(e) => r(e.theme, e.size)};
 
   &:hover {
     background-color: ${(e) => t(
@@ -340,7 +340,7 @@ const k = {
   "backgroundOpacity"
 )};
   }
-`, M = r(R)`
+`, M = d(N)`
   border: 1px solid
     ${(e) => t(
   e.theme,
@@ -350,7 +350,7 @@ const k = {
   "border",
   "borderOpacity"
 )};
-`, Q = E((e, d) => {
+`, Q = P((e, u) => {
   const {
     text: v = "",
     iconStyle: O = "solid",
@@ -359,33 +359,33 @@ const k = {
     borderRadius: L = "regular",
     btnType: n = "filled",
     disabled: S = !1,
-    tabIndex: u = 0,
+    tabIndex: s = 0,
     //----------------
-    onFocus: s,
-    onBlur: m,
-    onClick: b,
-    onKeyDown: g,
+    onFocus: m,
+    onBlur: b,
+    onClick: g,
+    onKeyDown: h,
     onLeadingIconClick: X,
     onTrailingIconClick: Y,
     //----------------
     size: B = "small",
-    color: U = "primary",
-    className: D = "",
-    style: N = {},
-    children: P,
-    ...h
-  } = e, f = {
+    color: j = "primary",
+    className: U = "",
+    style: D = {},
+    children: V,
+    ...$
+  } = e, a = {
     theme: A(),
-    color: U,
+    color: j,
     size: B,
-    style: N,
+    style: D,
     disabled: S,
     borderRadius: L,
     btnType: n,
-    className: "lnc-ui-button " + D
-  }, a = !y(F), l = !y(C), V = !y(v), $ = () => /* @__PURE__ */ K(W, { children: [
-    a && /* @__PURE__ */ i(G, { size: B, children: /* @__PURE__ */ i(
-      j,
+    className: "lnc-ui-button " + U
+  }, l = !y(F), c = !y(C), K = !y(v), f = () => /* @__PURE__ */ W(E, { children: [
+    l && /* @__PURE__ */ i(G, { size: B, children: /* @__PURE__ */ i(
+      w,
       {
         icon: F,
         sizeInUnits: "1.125rem",
@@ -393,9 +393,9 @@ const k = {
       }
     ) }),
     v,
-    P,
-    l && /* @__PURE__ */ i(H, { size: B, children: /* @__PURE__ */ i(
-      j,
+    V,
+    c && /* @__PURE__ */ i(H, { size: B, children: /* @__PURE__ */ i(
+      w,
       {
         icon: C,
         sizeInUnits: "1.125rem",
@@ -404,91 +404,92 @@ const k = {
     ) })
   ] });
   return n === "filled" ? /* @__PURE__ */ i(
-    w,
+    R,
     {
-      ref: d,
+      ref: u,
       "data-type": "filled",
-      ...f,
-      hasLeadingIcon: a,
-      hasTrailingIcon: l,
-      onFocus: s,
-      onBlur: m,
-      onClick: b,
-      onKeyDown: g,
-      tabIndex: u,
+      ...a,
+      className: `${a == null ? void 0 : a.className} ${j}-${n}-lnc-btn`,
+      hasLeadingIcon: l,
+      hasTrailingIcon: c,
+      onFocus: m,
+      onBlur: b,
+      onClick: g,
+      onKeyDown: h,
+      tabIndex: s,
       btnType: n,
-      ...h,
-      children: $()
+      ...$,
+      children: f()
     }
   ) : n === "tinted" ? /* @__PURE__ */ i(
     J,
     {
-      ref: d,
+      ref: u,
       "data-type": "tinted",
-      ...f,
-      hasLeadingIcon: a,
-      hasTrailingIcon: l,
-      onFocus: s,
-      onBlur: m,
-      onClick: b,
-      onKeyDown: g,
-      tabIndex: u,
+      ...a,
+      hasLeadingIcon: l,
+      hasTrailingIcon: c,
+      onFocus: m,
+      onBlur: b,
+      onClick: g,
+      onKeyDown: h,
+      tabIndex: s,
       btnType: n,
-      ...h,
-      children: $()
+      ...$,
+      children: f()
     }
   ) : n === "outline" ? /* @__PURE__ */ i(
     M,
     {
-      ref: d,
+      ref: u,
       "data-type": "outline",
-      ...f,
-      hasLeadingIcon: a,
-      hasTrailingIcon: l,
-      onFocus: s,
-      onBlur: m,
-      onClick: b,
-      onKeyDown: g,
-      tabIndex: u,
+      ...a,
+      hasLeadingIcon: l,
+      hasTrailingIcon: c,
+      onFocus: m,
+      onBlur: b,
+      onClick: g,
+      onKeyDown: h,
+      tabIndex: s,
       btnType: n,
-      ...h,
-      children: $()
+      ...$,
+      children: f()
     }
   ) : n === "basic" ? /* @__PURE__ */ i(
-    R,
+    N,
     {
-      ref: d,
+      ref: u,
       "data-type": "basic",
-      ...f,
-      hasLeadingIcon: a,
-      hasTrailingIcon: l,
-      onFocus: s,
-      onBlur: m,
-      onClick: b,
-      onKeyDown: g,
-      tabIndex: u,
+      ...a,
+      hasLeadingIcon: l,
+      hasTrailingIcon: c,
+      onFocus: m,
+      onBlur: b,
+      onClick: g,
+      onKeyDown: h,
+      tabIndex: s,
       btnType: n,
-      ...h,
-      children: $()
+      ...$,
+      children: f()
     }
   ) : /* @__PURE__ */ i(
-    w,
+    R,
     {
-      ref: d,
+      ref: u,
       "data-type": "filled",
       size: B,
-      ...f,
-      hasLeadingIcon: a,
-      hasTrailingIcon: l,
-      onFocus: s,
-      onBlur: m,
-      onClick: b,
-      onKeyDown: g,
-      hasText: V,
-      tabIndex: u,
+      ...a,
+      hasLeadingIcon: l,
+      hasTrailingIcon: c,
+      onFocus: m,
+      onBlur: b,
+      onClick: g,
+      onKeyDown: h,
+      hasText: K,
+      tabIndex: s,
       btnType: n,
-      ...h,
-      children: $()
+      ...$,
+      children: f()
     }
   );
 });

package/dist/NumberInput.cjs

@@ -1,20 +1,20 @@
-"use strict";const c=require("react/jsx-runtime"),r=require("./index-BPVoEhTF.cjs"),l=require("react"),K=require("./index-DaiUAQVF.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./utils-BWzf4vLl.cjs"),X=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),H=p.styled.div`
+"use strict";const c=require("react/jsx-runtime"),t=require("./index-BPVoEhTF.cjs"),s=require("react"),L=require("./index-DaiUAQVF.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./utils-BWzf4vLl.cjs"),Q=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),Y=p.styled.div`
   display: flex;
   align-items: center;
 
-  min-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
-  max-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
-  background-color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
+  min-height: ${e=>a.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>a.getSizeValueWithUnits(e.theme,e.size)};
+  background-color: ${e=>a.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
   border: 1px solid
-    ${e=>o.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
-  border-radius: ${e=>o.getBorderRadiusValueWithUnits(e.theme,"regular")};
+    ${e=>a.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
+  border-radius: ${e=>a.getBorderRadiusValueWithUnits(e.theme,"regular")};
 
-  ${e=>e.focused&&e.readOnly!==!0?o.getOutlineCss(e.theme):""}
-  ${e=>e.disabled===!0?o.getDisabledStateCss(e.theme):""}
-`,R=p.styled.span`
+  ${e=>e.focused&&e.readOnly!==!0?a.getOutlineCss(e.theme):""}
+  ${e=>e.disabled===!0?a.getDisabledStateCss(e.theme):""}
+`,O=p.styled.span`
   padding: 0 12px;
-  color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
-`,J=p.styled(R)``,L=p.styled.input`
+  color: ${e=>a.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
+`,Z=p.styled(O)``,v=p.styled.input`
   background: none;
   border: none;
   outline: none;
@@ -22,16 +22,16 @@
   padding-bottom: 0.625rem;
   width: 100%;
 
-  ${e=>o.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
-  min-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
-  max-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
-  color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
-  caret-color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
+  ${e=>a.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
+  min-height: ${e=>a.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>a.getSizeValueWithUnits(e.theme,e.size)};
+  color: ${e=>a.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
+  caret-color: ${e=>a.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
   padding-right: ${e=>e.suffix?"0":"0.75rem"};
   padding-left: ${e=>e.prefix?"0":"0.75rem"};
 
   &::placeholder {
-    color: ${e=>o.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
+    color: ${e=>a.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
   }
 
   &:read-only {
@@ -39,7 +39,7 @@
   }
 
   &:disabled {
-    ${e=>o.getDisabledStateCss(e.theme)}
+    ${e=>a.getDisabledStateCss(e.theme)}
     background: none;
   }
-`,z=l.forwardRef((e,k)=>{const{disabled:T,readOnly:x,debounceTime:N=0,step:O=1,min:E=Number.MIN_SAFE_INTEGER,max:_=Number.MAX_SAFE_INTEGER,prefix:m,suffix:y,placeholder:q,value:n,defaultValue:P,onChange:s,onBlur:g,onFocus:b,onKeyDown:h,className:j="",style:w={},size:$="small",color:u="primary",...F}=e,i=X.useTheme(),d=l.useRef(n||P||""),[W,V]=l.useState(n||P||""),[f,C]=l.useState(!1);l.useEffect(()=>{n!=null&&(d.current=n,V(d.current))},[n]);const U=l.useCallback(K.debounce((t,a)=>D(t,a),N),[s]),D=(t,a)=>{s&&(s==null||s(t,a))},A=t=>{d.current=t.target.value,V(d.current),U(t,t.target.value)},B=t=>{C(!0),b==null||b(t)},G=t=>{C(!1),g==null||g(t)},M=t=>{var a,S,I;((S=(a=t==null?void 0:t.target)==null?void 0:a.value)==null?void 0:S.length)>0&&(t.key==="+"||t.key==="-")&&t.preventDefault(),((I=t==null?void 0:t.target)==null?void 0:I.value)===""&&(t.key==="+"||t.key==="-")&&(t.target.value=t.key),h==null||h(t)};return c.jsxs(H,{style:w,className:j,theme:i,color:u,size:$,focused:f,disabled:T,readOnly:x,children:[m&&c.jsx(R,{theme:i,color:u,focused:f,className:"lnc-input-prefix",children:m}),c.jsx(L,{ref:k,type:"number",theme:i,color:u,size:$,placeholder:q,prefix:m,suffix:y,disabled:T,readOnly:x,step:O,min:E,max:_,value:W,onFocus:B,onBlur:G,onChange:A,onKeyDown:M,...F}),y&&c.jsx(J,{theme:i,color:u,focused:f,className:"lnc-input-suffix",children:y})]})});z.propTypes={id:r.PropTypes.any,value:r.PropTypes.any,defaultValue:r.PropTypes.any,disabled:r.PropTypes.bool,readOnly:r.PropTypes.bool,debounceTime:r.PropTypes.number,step:r.PropTypes.number,min:r.PropTypes.number,max:r.PropTypes.number,prefix:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.element]),suffix:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.element]),placeholder:r.PropTypes.string,tabIndex:r.PropTypes.number,onChange:r.PropTypes.func,onBlur:r.PropTypes.func,onFocus:r.PropTypes.func,className:r.PropTypes.string,style:r.PropTypes.object,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=z;
+`,E=s.forwardRef((e,_)=>{const{disabled:x,readOnly:P,debounceTime:q=0,step:j=1,min:w=Number.MIN_SAFE_INTEGER,max:D=Number.MAX_SAFE_INTEGER,prefix:m,suffix:y,placeholder:F,value:l,defaultValue:$,onChange:n,onBlur:g,onFocus:b,onKeyDown:f,maxDecimalPlaces:V,className:W="",style:U={},size:C="small",color:u="primary",...A}=e,i=Q.useTheme(),d=s.useRef(l||$||""),[B,S]=s.useState(l||$||""),[h,I]=s.useState(!1);s.useEffect(()=>{l!=null&&(d.current=l,S(d.current))},[l]);const G=s.useCallback(L.debounce((r,o)=>M(r,o),q),[n]),M=(r,o)=>{n&&(n==null||n(r,o))},K=r=>{d.current=r.target.value,S(d.current),G(r,r.target.value)},X=r=>{I(!0),b==null||b(r)},H=r=>{I(!1),g==null||g(r)},J=r=>{var o,R,z,k,N;if(((R=(o=r==null?void 0:r.target)==null?void 0:o.value)==null?void 0:R.length)>0&&(r.key==="+"||r.key==="-")&&r.preventDefault(),((z=r==null?void 0:r.target)==null?void 0:z.value)===""&&(r.key==="+"||r.key==="-")&&(r.target.value=r.key),(k=r==null?void 0:r.target)!=null&&k.value.includes(".")&&V){const T=(N=r==null?void 0:r.target)==null?void 0:N.value.split(".")[1];(T==null?void 0:T.length)>=V&&r.preventDefault()}f==null||f(r)};return c.jsxs(Y,{style:U,className:W,theme:i,color:u,size:C,focused:h,disabled:x,readOnly:P,children:[m&&c.jsx(O,{theme:i,color:u,focused:h,className:"lnc-input-prefix",children:m}),c.jsx(v,{ref:_,type:"number",theme:i,color:u,size:C,placeholder:F,prefix:m,suffix:y,disabled:x,readOnly:P,step:j,min:w,max:D,value:B,onFocus:X,onBlur:H,onChange:K,onKeyDown:J,...A}),y&&c.jsx(Z,{theme:i,color:u,focused:h,className:"lnc-input-suffix",children:y})]})});E.propTypes={id:t.PropTypes.any,value:t.PropTypes.any,defaultValue:t.PropTypes.any,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,debounceTime:t.PropTypes.number,step:t.PropTypes.number,min:t.PropTypes.number,max:t.PropTypes.number,prefix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),suffix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),placeholder:t.PropTypes.string,tabIndex:t.PropTypes.number,onChange:t.PropTypes.func,onBlur:t.PropTypes.func,onFocus:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=E;

package/dist/NumberInput.js

@@ -1,17 +1,17 @@
-import { jsxs as K, jsx as p } from "react/jsx-runtime";
-import { P as t } from "./index-S5Cd7WrG.js";
-import { forwardRef as M, useRef as U, useState as V, useEffect as X, useCallback as q } from "react";
-import { d as H } from "./index-CkWvbrVT.js";
+import { jsxs as q, jsx as x } from "react/jsx-runtime";
+import { P as r } from "./index-S5Cd7WrG.js";
+import { forwardRef as H, useRef as J, useState as R, useEffect as L, useCallback as Q } from "react";
+import { d as Y } from "./index-CkWvbrVT.js";
 import { s as c } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { d as s, b as l, a as J, e as L, h as O, c as Q } from "./utils-BXCGNjIy.js";
-import { u as Y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const Z = c.div`
+import { d, b as n, a as Z, e as v, h as D, c as ee } from "./utils-BXCGNjIy.js";
+import { u as ae } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+const re = c.div`
   display: flex;
   align-items: center;
 
-  min-height: ${(e) => s(e.theme, e.size)};
-  max-height: ${(e) => s(e.theme, e.size)};
-  background-color: ${(e) => l(
+  min-height: ${(e) => d(e.theme, e.size)};
+  max-height: ${(e) => d(e.theme, e.size)};
+  background-color: ${(e) => n(
   e.theme,
   "Input",
   e.color,
@@ -19,27 +19,27 @@ const Z = c.div`
   "background"
 )};
   border: 1px solid
-    ${(e) => l(
+    ${(e) => n(
   e.theme,
   "Input",
   e.focused === !0 ? "primary" : e.color,
   e.disabled === !0 ? "disabled" : "enabled",
   "border"
 )};
-  border-radius: ${(e) => J(e.theme, "regular")};
+  border-radius: ${(e) => Z(e.theme, "regular")};
 
-  ${(e) => e.focused && e.readOnly !== !0 ? L(e.theme) : ""}
-  ${(e) => e.disabled === !0 ? O(e.theme) : ""}
-`, z = c.span`
+  ${(e) => e.focused && e.readOnly !== !0 ? v(e.theme) : ""}
+  ${(e) => e.disabled === !0 ? D(e.theme) : ""}
+`, F = c.span`
   padding: 0 12px;
-  color: ${(e) => l(
+  color: ${(e) => n(
   e.theme,
   "Input",
   e.focused === !0 ? "primary" : e.color,
   "enabled",
   "prefix"
 )};
-`, v = c(z)``, ee = c.input`
+`, te = c(F)``, le = c.input`
   background: none;
   border: none;
   outline: none;
@@ -47,22 +47,22 @@ const Z = c.div`
   padding-bottom: 0.625rem;
   width: 100%;
 
-  ${(e) => Q(e.theme, "Input", e.size, "enabled")}
-  min-height: ${(e) => s(e.theme, e.size)};
-  max-height: ${(e) => s(e.theme, e.size)};
-  color: ${(e) => l(
+  ${(e) => ee(e.theme, "Input", e.size, "enabled")}
+  min-height: ${(e) => d(e.theme, e.size)};
+  max-height: ${(e) => d(e.theme, e.size)};
+  color: ${(e) => n(
   e.theme,
   "Input",
   e.focused === !0 ? "primary" : e.color,
   "enabled",
   "text"
 )};
-  caret-color: ${(e) => l(e.theme, "Input", e.color, "enabled", "caret")};
+  caret-color: ${(e) => n(e.theme, "Input", e.color, "enabled", "caret")};
   padding-right: ${(e) => e.suffix ? "0" : "0.75rem"};
   padding-left: ${(e) => e.prefix ? "0" : "0.75rem"};
 
   &::placeholder {
-    color: ${(e) => l(
+    color: ${(e) => n(
   e.theme,
   "Input",
   e.color,
@@ -76,103 +76,108 @@ const Z = c.div`
   }
 
   &:disabled {
-    ${(e) => O(e.theme)}
+    ${(e) => D(e.theme)}
     background: none;
   }
-`, ae = M((e, E) => {
+`, ne = H((e, w) => {
   const {
-    disabled: x,
-    readOnly: $,
-    debounceTime: R = 0,
-    step: F = 1,
-    min: w = Number.MIN_SAFE_INTEGER,
-    max: B = Number.MAX_SAFE_INTEGER,
+    disabled: $,
+    readOnly: I,
+    debounceTime: B = 0,
+    step: P = 1,
+    min: _ = Number.MIN_SAFE_INTEGER,
+    max: j = Number.MAX_SAFE_INTEGER,
     prefix: m,
     suffix: f,
-    placeholder: D,
-    value: n,
-    defaultValue: I,
+    placeholder: A,
+    value: t,
+    defaultValue: C,
     //----------------
-    onChange: o,
+    onChange: u,
     onBlur: h,
-    onFocus: b,
-    onKeyDown: g,
+    onFocus: g,
+    onKeyDown: b,
+    maxDecimalPlaces: k,
     //----------------
-    className: _ = "",
-    style: j = {},
-    size: C = "small",
-    color: u = "primary",
-    ...A
-  } = e, d = Y(), i = U(n || I || ""), [P, k] = V(n || I || ""), [y, N] = V(!1);
-  X(() => {
-    n != null && (i.current = n, k(i.current));
-  }, [n]);
-  const W = q(
-    H((a, r) => G(a, r), R),
-    [o]
-  ), G = (a, r) => {
-    o && (o == null || o(a, r));
+    className: W = "",
+    style: G = {},
+    size: N = "small",
+    color: o = "primary",
+    ...K
+  } = e, i = ae(), s = J(t || C || ""), [M, S] = R(t || C || ""), [y, T] = R(!1);
+  L(() => {
+    t != null && (s.current = t, S(s.current));
+  }, [t]);
+  const U = Q(
+    Y((a, l) => X(a, l), B),
+    [u]
+  ), X = (a, l) => {
+    u && (u == null || u(a, l));
   };
-  return /* @__PURE__ */ K(
-    Z,
+  return /* @__PURE__ */ q(
+    re,
     {
-      style: j,
-      className: _,
-      theme: d,
-      color: u,
-      size: C,
+      style: G,
+      className: W,
+      theme: i,
+      color: o,
+      size: N,
       focused: y,
-      disabled: x,
-      readOnly: $,
+      disabled: $,
+      readOnly: I,
       children: [
-        m && /* @__PURE__ */ p(
-          z,
+        m && /* @__PURE__ */ x(
+          F,
           {
-            theme: d,
-            color: u,
+            theme: i,
+            color: o,
             focused: y,
             className: "lnc-input-prefix",
             children: m
           }
         ),
-        /* @__PURE__ */ p(
-          ee,
+        /* @__PURE__ */ x(
+          le,
           {
-            ref: E,
+            ref: w,
             type: "number",
-            theme: d,
-            color: u,
-            size: C,
-            placeholder: D,
+            theme: i,
+            color: o,
+            size: N,
+            placeholder: A,
             prefix: m,
             suffix: f,
-            disabled: x,
-            readOnly: $,
-            step: F,
-            min: w,
-            max: B,
-            value: P,
+            disabled: $,
+            readOnly: I,
+            step: P,
+            min: _,
+            max: j,
+            value: M,
             onFocus: (a) => {
-              N(!0), b == null || b(a);
+              T(!0), g == null || g(a);
             },
             onBlur: (a) => {
-              N(!1), h == null || h(a);
+              T(!1), h == null || h(a);
             },
             onChange: (a) => {
-              i.current = a.target.value, k(i.current), W(a, a.target.value);
+              s.current = a.target.value, S(s.current), U(a, a.target.value);
             },
             onKeyDown: (a) => {
-              var r, S, T;
-              ((S = (r = a == null ? void 0 : a.target) == null ? void 0 : r.value) == null ? void 0 : S.length) > 0 && (a.key === "+" || a.key === "-") && a.preventDefault(), ((T = a == null ? void 0 : a.target) == null ? void 0 : T.value) === "" && (a.key === "+" || a.key === "-") && (a.target.value = a.key), g == null || g(a);
+              var l, V, O, z, E;
+              if (((V = (l = a == null ? void 0 : a.target) == null ? void 0 : l.value) == null ? void 0 : V.length) > 0 && (a.key === "+" || a.key === "-") && a.preventDefault(), ((O = a == null ? void 0 : a.target) == null ? void 0 : O.value) === "" && (a.key === "+" || a.key === "-") && (a.target.value = a.key), (z = a == null ? void 0 : a.target) != null && z.value.includes(".") && k) {
+                const p = (E = a == null ? void 0 : a.target) == null ? void 0 : E.value.split(".")[1];
+                (p == null ? void 0 : p.length) >= k && a.preventDefault();
+              }
+              b == null || b(a);
             },
-            ...A
+            ...K
           }
         ),
-        f && /* @__PURE__ */ p(
-          v,
+        f && /* @__PURE__ */ x(
+          te,
           {
-            theme: d,
-            color: u,
+            theme: i,
+            color: o,
             focused: y,
             className: "lnc-input-suffix",
             children: f
@@ -182,55 +187,55 @@ const Z = c.div`
     }
   );
 });
-ae.propTypes = {
-  id: t.any,
-  value: t.any,
-  defaultValue: t.any,
-  disabled: t.bool,
-  readOnly: t.bool,
+ne.propTypes = {
+  id: r.any,
+  value: r.any,
+  defaultValue: r.any,
+  disabled: r.bool,
+  readOnly: r.bool,
   /**
    * Time in miliseconds before onChange event fires after it has been triggered.
    */
-  debounceTime: t.number,
+  debounceTime: r.number,
   /**
    * The amount that is added to the current value in the input if its incremented using the arrows/spinners.
    */
-  step: t.number,
+  step: r.number,
   /**
    * Minimum number value user can input.
    */
-  min: t.number,
+  min: r.number,
   /**
    * Maximum number value user can input.
    */
-  max: t.number,
+  max: r.number,
   /**
    * Reserved space before input. Intented to be used with plain text or `Icon` component.
    */
-  prefix: t.oneOfType([t.string, t.element]),
+  prefix: r.oneOfType([r.string, r.element]),
   /**
    * Reserved space after input. Intented to be used with plain text or `Icon` component.
    */
-  suffix: t.oneOfType([t.string, t.element]),
-  placeholder: t.string,
-  tabIndex: t.number,
+  suffix: r.oneOfType([r.string, r.element]),
+  placeholder: r.string,
+  tabIndex: r.number,
   /**
    * `(event, value) => void`
    */
-  onChange: t.func,
+  onChange: r.func,
   /**
    * `(event) => void`
    */
-  onBlur: t.func,
+  onBlur: r.func,
   /**
    * `(event) => void`
    */
-  onFocus: t.func,
+  onFocus: r.func,
   //----------------
-  className: t.string,
-  style: t.object,
-  size: t.oneOf(["small", "medium", "large"]),
-  color: t.oneOf([
+  className: r.string,
+  style: r.object,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
     "primary",
     "secondary",
     "success",
@@ -242,5 +247,5 @@ ae.propTypes = {
   ])
 };
 export {
-  ae as default
+  ne as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.100",
+  "version": "4.0.102",
   "description": "React component library",
   "type": "module",
   "keywords": [