@lanaco/lnc-react-ui 4.0.198 → 4.0.200

package/dist/RadioInput.js

@@ -1,12 +1,11 @@
-import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import { forwardRef as P, useState as j } from "react";
-import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as i } from "./index-CblbdqjE.js";
-import { d as f, c as N, e as T, b as t } from "./utils-DtEfC-TX.js";
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import { forwardRef as B, useState as j } from "react";
+import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as b, c as N, e as P, b as i } from "./utils-DtEfC-TX.js";
 import { u as F } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
-  min-height: ${(e) => f(e.theme, e.size)};
-  max-height: ${(e) => f(e.theme, e.size)};
+const I = (e) => e == "left" ? "row-reverse" : "row", L = f.label`
+  min-height: ${(e) => b(e.theme, e.size)};
+  max-height: ${(e) => b(e.theme, e.size)};
   width: 100%;
   display: inline-flex;
   justify-content: start;
@@ -39,11 +38,11 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
     justify-content: center;
     align-items: center;
     transition: all 0.2s ease;
-    ${(e) => e.focused === !0 && e.disabled !== !0 && e.readOnly !== !0 ? T(e.theme) : ""};
+    ${(e) => e.focused === !0 && e.disabled !== !0 && e.readOnly !== !0 ? P(e.theme) : ""};
     & svg {
       fill: transparent;
       & .outer-circle {
-        stroke: ${(e) => t(
+        stroke: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -52,7 +51,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
 )};
       }
       & .inner-circle {
-        stroke: ${(e) => t(
+        stroke: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -63,16 +62,16 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
     }
   }
   & input:hover ~ .lnc-radio-input-label {
-    color: ${(e) => t(e.theme, "Radio", e.color, "hover", "text")};
+    color: ${(e) => i(e.theme, "Radio", e.color, "hover", "text")};
   }
 
   
   & input:checked ~ .lnc-radio-input-label {
-    color: ${(e) => t(e.theme, "Radio", e.color, "active", "text")};
+    color: ${(e) => i(e.theme, "Radio", e.color, "active", "text")};
   }
   & input:checked ~ .checkmark {
     & svg {
-      fill: ${(e) => t(
+      fill: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -81,7 +80,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
   "backgroundOpacity"
 )};
       & .outer-circle {
-        fill: ${(e) => t(
+        fill: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -90,7 +89,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
 )};
       }
       & .inner-circle {
-        fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : t(
+        fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : i(
   e.theme,
   "Radio",
   e.color,
@@ -102,12 +101,12 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
   }
 
   & input:disabled ~ .lnc-radio-input-label {
-    color: ${(e) => t(e.theme, "Radio", e.color, "disabled", "text")};
+    color: ${(e) => i(e.theme, "Radio", e.color, "disabled", "text")};
   }
   
   & input[disabled]:checked ~ .checkmark {
     & svg {
-      fill: ${(e) => t(
+      fill: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -116,7 +115,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
   "backgroundOpacity"
 )};
       & .outer-circle {
-        fill: ${(e) => t(
+        fill: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -125,7 +124,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
 )};
       }
       & .inner-circle {
-        fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : t(
+        fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : i(
   e.theme,
   "Radio",
   e.color,
@@ -139,7 +138,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
 
     & input[disabled] ~ .checkmark {
       & svg {
-        fill: ${(e) => t(
+        fill: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -148,7 +147,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
   "backgroundOpacity"
 )};
         & .outer-circle {
-          fill: ${(e) => t(
+          fill: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -157,23 +156,22 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
 )};
         }
         & .inner-circle {
-          fill: ${(e) => t(
+          fill: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
   "disabled",
   "border"
-)}
-              };
+)};
         }
       }
 
     & input:hover ~ .lnc-radio-input-label {
-      color: ${(e) => t(e.theme, "Radio", e.color, "hover", "text")};
+      color: ${(e) => i(e.theme, "Radio", e.color, "hover", "text")};
     }
     & input[hover]:checked ~ .checkmark {
       & svg {
-        fill: ${(e) => t(
+        fill: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -182,7 +180,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
   "backgroundOpacity"
 )};
         & .outer-circle {
-          fill: ${(e) => t(
+          fill: ${(e) => i(
   e.theme,
   "Radio",
   e.color,
@@ -191,81 +189,81 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
 )};
         }
         & .inner-circle {
-          fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : t(
+          fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : i(
   e.theme,
   "Radio",
   e.color,
   "disabled",
   "border"
-)}};
+)};
         }
       }
-`, K = g.label`
+    }
+`, S = f.label`
   ${(e) => e.disabled !== !0 && e.readOnly !== !0 && "cursor: pointer"};
   min-width: 0;
   flex-shrink: 1;
   min-height: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${(e) => t(e.theme, "Radio", e.color, "enabled", "text")};
-`, L = P((e, y) => {
+  color: ${(e) => i(e.theme, "Radio", e.color, "enabled", "text")};
+`, G = B((e, g) => {
   const {
-    wrapperRef: k,
-    className: w = "",
-    style: R = {},
-    color: $ = "primary",
-    innerColor: v = "white",
+    wrapperRef: R,
+    className: $ = "",
+    style: k = {},
+    color: v = "primary",
+    innerColor: w = "white",
     size: x = "small",
-    onChange: a,
-    onFocus: n,
-    onBlur: l,
-    onClick: c,
-    onKeyDown: S,
-    label: h,
-    labelPosition: C = "right",
-    spaceBetween: O,
+    onChange: n,
+    onFocus: r,
+    onBlur: o,
+    onClick: a,
+    label: s,
+    labelPosition: y = "right",
+    spaceBetween: C,
     disabled: d,
-    readOnly: s,
+    readOnly: c,
     ...z
-  } = e, [B, m] = j(!1);
-  var u = {
+  } = e, [O, h] = j(!1);
+  var m = {
     theme: F(),
     size: x,
-    color: $,
+    color: v,
     disabled: d,
-    labelPosition: C,
-    spaceBetween: O
+    labelPosition: y,
+    spaceBetween: C
   };
-  return /* @__PURE__ */ b(
-    D,
+  return /* @__PURE__ */ u(
+    L,
     {
-      ...u,
-      ref: k,
-      className: w,
-      style: R,
+      ...m,
+      ref: R,
+      className: $,
+      style: k,
       tabIndex: -1,
-      readOnly: s,
-      focused: B,
-      onClick: (o) => c == null ? void 0 : c(o),
-      innerColor: v,
+      readOnly: c,
+      focused: O,
+      onClick: (t) => a == null ? void 0 : a(t),
+      innerColor: w,
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ l(
           "input",
           {
-            ref: y,
-            disabled: d || s,
+            ref: g,
+            disabled: d || c,
             type: "radio",
-            onBlur: (o) => {
-              m(!1), l && (l == null || l(o));
+            onBlur: (t) => {
+              h(!1), o && (o == null || o(t));
             },
-            onFocus: (o) => {
-              m(!0), n && (n == null || n(o));
+            onFocus: (t) => {
+              h(!0), r && (r == null || r(t));
             },
-            onChange: (o) => a == null ? void 0 : a(o),
+            onChange: (t) => n == null ? void 0 : n(t),
             ...z
           }
         ),
-        /* @__PURE__ */ r("div", { className: "checkmark", children: /* @__PURE__ */ b(
+        /* @__PURE__ */ l("div", { className: "checkmark", children: /* @__PURE__ */ u(
           "svg",
           {
             id: "eqw1eBsfm9l1",
@@ -274,7 +272,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
             shapeRendering: "geometricPrecision",
             textRendering: "geometricPrecision",
             children: [
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ l(
                 "ellipse",
                 {
                   className: "outer-circle",
@@ -285,7 +283,7 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
                   stroke: "red"
                 }
               ),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ l(
                 "ellipse",
                 {
                   rx: "5",
@@ -298,65 +296,22 @@ const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
             ]
           }
         ) }),
-        /* @__PURE__ */ r(
-          K,
+        /* @__PURE__ */ l(
+          S,
           {
-            ...u,
+            ...m,
             className: "lnc-radio-input-label",
             disalbed: d,
-            readOnly: s,
-            title: h,
+            readOnly: c,
+            title: s,
             tabIndex: -1,
-            children: h
+            children: s
           }
         )
       ]
     }
   );
 });
-L.propTypes = {
-  id: i.any,
-  name: i.string,
-  checked: i.bool,
-  disabled: i.bool,
-  readOnly: i.bool,
-  label: i.oneOfType([i.string, i.element]),
-  labelPosition: i.oneOf(["right", "left"]),
-  tabIndex: i.number,
-  spaceBetween: i.bool,
-  //-------------------------
-  onChange: i.func,
-  onFocus: i.func,
-  onBlur: i.func,
-  onClick: i.func,
-  onKeyDown: i.func,
-  //-------------------------
-  className: i.string,
-  style: i.object,
-  size: i.oneOf(["small", "medium", "large"]),
-  color: i.oneOf([
-    "primary",
-    "secondary",
-    "success",
-    "danger",
-    "warning",
-    "information",
-    "neutral",
-    "gray"
-  ]),
-  innerColor: i.oneOf([
-    "primary",
-    "secondary",
-    "success",
-    "danger",
-    "warning",
-    "information",
-    "neutral",
-    "gray",
-    "white",
-    "transparent"
-  ])
-};
 export {
-  L as default
+  G as default
 };

package/dist/RangeSlider.cjs

@@ -1,12 +1,12 @@
-"use strict";const r=require("react/jsx-runtime"),y=require("./emotion-styled.browser.esm-BtEseadx.cjs"),n=require("./index-BpbMKBf_.cjs"),o=require("react"),t=require("./utils-RnrgDDZP.cjs"),U=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_=require("./useUpdateEffect-BtMgpgIV.cjs"),L=({theme:e,size:i})=>{var c=t.getSizeValueWithUnits(e,i);return`
-    min-height: ${c};
-    max-height: ${c};
-  `},b={small:"0.875rem",medium:"1.125rem",large:"1.375rem"},W=y.styled.div`
+"use strict";const t=require("react/jsx-runtime"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("react"),a=require("./utils-RnrgDDZP.cjs"),F=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),U=require("./useUpdateEffect-BtMgpgIV.cjs"),_=({theme:e,size:i})=>{var u=a.getSizeValueWithUnits(e,i);return`
+    min-height: ${u};
+    max-height: ${u};
+  `},g={small:"0.875rem",medium:"1.125rem",large:"1.375rem"},T=x.styled.div`
   position: relative;
-  ${e=>L(e)};
+  ${e=>_(e)};
   display: inline-flex;
   align-items: center;
-`,I=y.styled.input`
+`,E=x.styled.input`
   -webkit-appearance: none; /* Override default CSS styles */
   appearance: none;
   width: 100%; /* Full-width */
@@ -17,37 +17,37 @@
   background: ${e=>e.rangeBackground};
   transition: background 450ms ease-in;
   -webkit-appearance: none;
-  border-radius: ${e=>t.getBorderRadiusValueWithUnits(e.theme,"regular")};
+  border-radius: ${e=>a.getBorderRadiusValueWithUnits(e.theme,"regular")};
   &::-webkit-slider-thumb {
     -webkit-appearance: none; /* Override default look */
     appearance: none;
-    width: ${e=>b[e.size]}; /* Set a specific slider handle width */
-    height: ${e=>b[e.size]}; /* Slider handle height */
+    width: ${e=>g[e.size]}; /* Set a specific slider handle width */
+    height: ${e=>g[e.size]}; /* Slider handle height */
     border-radius: 50%;
-    background-color: ${e=>t.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background","backgroundOpacity")};
+    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background","backgroundOpacity")};
     cursor: pointer; /* Cursor on hover */
     border: none;
   }
   &::-moz-range-thumb {
-    width: ${e=>b[e.size]}; /* Set a specific slider handle width */
-    height: ${e=>b[e.size]}; /* Slider handle height */
+    width: ${e=>g[e.size]}; /* Set a specific slider handle width */
+    height: ${e=>g[e.size]}; /* Slider handle height */
     border-radius: 50%;
-    background-color: ${e=>t.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background","backgroundOpacity")};
+    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background","backgroundOpacity")};
     cursor: pointer; /* Cursor on hover */
     border: none;
   }
-`,X=y.styled.div`
+`,L=x.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   position: absolute;
-  ${e=>t.getComponentTypographyCss(e.theme,"Range",e.size,"enabled")};
+  ${e=>a.getComponentTypographyCss(e.theme,"Range",e.size,"enabled")};
   left: ${e=>`calc(${e.inputValue+"%"} + (${8-e.inputValue*.15}px))`};
-  top: ${e=>"calc(-"+b[e.size]+")"};
+  top: ${e=>"calc(-"+g[e.size]+")"};
   transform: translateX(-50%);
   & > .text-content {
     color: white;
-    background-color: ${e=>t.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
     border-radius: 3px;
     z-index: 2;
     padding: 2px 6px;
@@ -59,7 +59,7 @@
       & > .inner {
         width: 8px;
         height: 8px;
-        background: ${e=>t.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+        background: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
         transform: rotate(45deg);
         position: absolute;
         top: -6px;
@@ -69,4 +69,4 @@
       }
     }
   }
-`,O=o.forwardRef((e,i)=>{const{defaultValue:c,value:l=null,min:g=0,max:p=100,disabled:d,tabIndex:v=0,onChange:R=()=>{},onInput:k=()=>{},color:u="primary",size:q="small",className:E="",style:N={},...$}=e,C=o.useRef(),h=U.useTheme(),m={theme:h,size:q,color:u,className:E,style:N},w=t.getColorRgbaValue(h,"Range",u,"enabled","unfilled"),[S,M]=o.useState(t.getColorRgbaValue(h,"Range",u,d?"disabled":"enabled","background")),[P,B]=o.useState(),[F,f]=o.useState(),x=o.useCallback(a=>Math.round((a-g)/(p-g)*100),[g,p]),[s,T]=o.useState(l||c);_.useUpdateEffect(()=>{T(l)},[l]),o.useEffect(()=>{z(s||0)},[s,x,d,u]),o.useEffect(()=>{M(t.getColorRgbaValue(h,"Range",u,d?"disabled":"enabled","background"))},[u,d]);const V=a=>{z(a.target.value),k&&k(a)},z=a=>{B(`linear-gradient(to right, ${S} 0%, ${S} ${x(a)}%, ${w} ${x(a)}%, ${w} 100%)`)},j=a=>{T(a.target.value),R&&R(a)};return r.jsxs(W,{...m,children:[F&&s&&r.jsx(r.Fragment,{children:r.jsxs(X,{...m,inputValue:x(s),children:[r.jsx("div",{className:"text-content",children:s}),r.jsx("div",{className:"arrow",children:r.jsx("div",{className:"outer",children:r.jsx("div",{className:"inner"})})})]})}),l==null||l=="undefined"?r.jsx(I,{ref:i||C,id:"fader",type:"range",min:g,max:p,defaultValue:c,disabled:d,tabIndex:v,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},rangeBackground:P,onInput:V,onChange:j,...m,...$}):r.jsx(I,{ref:i||C,id:"fader",type:"range",min:g,max:p,value:s,disabled:d,tabIndex:v,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},rangeBackground:P,onInput:V,onChange:j,...m,...$})]})});O.propTypes={value:n.PropTypes.number,defaultValue:n.PropTypes.number,min:n.PropTypes.number,max:n.PropTypes.number,disabled:n.PropTypes.bool,tabIndex:n.PropTypes.number,onChange:n.PropTypes.func,onInput:n.PropTypes.func,className:n.PropTypes.string,style:n.PropTypes.object,size:n.PropTypes.oneOf(["small","medium","large"]),color:n.PropTypes.oneOf(["primary","secondary","success","danger","warning","disabled","information","neutral","gray"])};module.exports=O;
+`,W=r.forwardRef((e,i)=>{const{defaultValue:u,value:s=null,min:c=0,max:h=100,disabled:l,tabIndex:v=0,onChange:R=()=>{},onInput:k=()=>{},color:d="primary",size:q="small",className:O="",style:M={},...$}=e,C=r.useRef(),b=F.useTheme(),m={theme:b,size:q,color:d,className:O,style:M},w=a.getColorRgbaValue(b,"Range",d,"enabled","unfilled"),[S,N]=r.useState(a.getColorRgbaValue(b,"Range",d,l?"disabled":"enabled","background")),[y,P]=r.useState(),[B,p]=r.useState(),f=r.useCallback(n=>Math.round((n-c)/(h-c)*100),[c,h]),[o,V]=r.useState(s||u);U.useUpdateEffect(()=>{V(s)},[s]),r.useEffect(()=>{j(o||0)},[o,f,l,d]),r.useEffect(()=>{N(a.getColorRgbaValue(b,"Range",d,l?"disabled":"enabled","background"))},[d,l]);const z=n=>{j(n.target.value),k&&k(n)},j=n=>{P(`linear-gradient(to right, ${S} 0%, ${S} ${f(n)}%, ${w} ${f(n)}%, ${w} 100%)`)},I=n=>{V(n.target.value),R&&R(n)};return t.jsxs(T,{...m,children:[B&&o&&t.jsx(t.Fragment,{children:t.jsxs(L,{...m,inputValue:f(o),children:[t.jsx("div",{className:"text-content",children:o}),t.jsx("div",{className:"arrow",children:t.jsx("div",{className:"outer",children:t.jsx("div",{className:"inner"})})})]})}),s==null||s=="undefined"?t.jsx(E,{ref:i||C,id:"fader",type:"range",min:c,max:h,defaultValue:u,disabled:l,tabIndex:v,onMouseEnter:()=>{p(!0)},onMouseLeave:()=>{p(!1)},rangeBackground:y,onInput:z,onChange:I,...m,...$}):t.jsx(E,{ref:i||C,id:"fader",type:"range",min:c,max:h,value:o,disabled:l,tabIndex:v,onMouseEnter:()=>{p(!0)},onMouseLeave:()=>{p(!1)},rangeBackground:y,onInput:z,onChange:I,...m,...$})]})});module.exports=W;