@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/ProgressBar.cjs

@@ -0,0 +1,22 @@
+"use strict";const t=require("react/jsx-runtime"),m=require("react"),r=require("./index-DXnSjbfJ.cjs"),n=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),s=require("./utils-hdRGTsQ7.cjs"),b=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),h=n.newStyled.div`
+  width: 100%;
+  position: relative;
+  background-color: ${e=>s.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","unfilled")};
+  height: ${e=>e.theme.components.Progress.default.enabled.sizes[e.size]};
+  border-radius: 5px;
+  animation: progres 4s infinite linear;
+`,y=n.newStyled.div`
+  height: 100%;
+  width: ${e=>e.progressPercentage+"%"};
+  background-color: ${e=>s.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","background")};
+  position absolute;
+  border-radius: ${e=>e.progressPercentage==100?"5px":"5px 0px 0px 5px"};
+  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+`,P=n.newStyled.label`
+  ${e=>s.getComponentTypographyCss(e.theme,"Progress",e.size,"enabled")};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: ${e=>s.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","text")};
+`,c=m.forwardRef((e,f)=>{const{id:x="",showLabel:a=!1,progressPercentage:i=0,className:g="",style:d={},onChange:w=()=>{},size:l="small",color:p="primary",...u}=e,o=b.useTheme();return t.jsxs(h,{style:d,className:"lnc-ui-progress "+g,theme:o,size:l,showLabel:a,...u,children:[t.jsx(y,{progressPercentage:i,theme:o,color:p}),a&&t.jsxs(P,{theme:o,size:l,children:[i,"%"]})]})});c.propTypes={id:r.PropTypes.string,showLabel:r.PropTypes.bool,progressPercentage:r.PropTypes.number,onChange: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","disabled","information","neutral","gray"])};module.exports=c;

package/dist/ProgressBar.js

@@ -0,0 +1,92 @@
+import { jsxs as l, jsx as b } from "react/jsx-runtime";
+import p from "react";
+import { P as r } from "./index-Ds9PUTwb.js";
+import { n as s } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { b as a, a as u } from "./utils-DEke8iwo.js";
+import { u as f } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const h = s.div`
+  width: 100%;
+  position: relative;
+  background-color: ${(e) => a(
+  e.theme,
+  "Progress",
+  e.color,
+  "enabled",
+  "unfilled"
+)};
+  height: ${(e) => e.theme.components.Progress.default.enabled.sizes[e.size]};
+  border-radius: 5px;
+  animation: progres 4s infinite linear;
+`, P = s.div`
+  height: 100%;
+  width: ${(e) => e.progressPercentage + "%"};
+  background-color: ${(e) => a(
+  e.theme,
+  "Progress",
+  e.color,
+  "enabled",
+  "background"
+)};
+  position absolute;
+  border-radius: ${(e) => e.progressPercentage == 100 ? "5px" : "5px 0px 0px 5px"};
+  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+`, y = s.label`
+  ${(e) => u(e.theme, "Progress", e.size, "enabled")};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: ${(e) => a(e.theme, "Progress", e.color, "enabled", "text")};
+`, x = p.forwardRef((e, w) => {
+  const {
+    id: $ = "",
+    showLabel: t = !1,
+    progressPercentage: n = 0,
+    className: c = "",
+    style: g = {},
+    onChange: z = () => {
+    },
+    size: i = "small",
+    color: m = "primary",
+    ...d
+  } = e, o = f();
+  return /* @__PURE__ */ l(h, { style: g, className: "lnc-ui-progress " + c, theme: o, size: i, showLabel: t, ...d, children: [
+    /* @__PURE__ */ b(
+      P,
+      {
+        progressPercentage: n,
+        theme: o,
+        color: m
+      }
+    ),
+    t && /* @__PURE__ */ l(y, { theme: o, size: i, children: [
+      n,
+      "%"
+    ] })
+  ] });
+});
+x.propTypes = {
+  id: r.string,
+  showLabel: r.bool,
+  progressPercentage: r.number,
+  //-------------------------
+  onChange: r.func,
+  //-------------------------
+  className: r.string,
+  style: r.object,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "disabled",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  x as default
+};

package/dist/RadioGroup.cjs

@@ -0,0 +1,7 @@
+"use strict";const p=require("react/jsx-runtime"),n=require("react"),I=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),e=require("./index-DXnSjbfJ.cjs"),O=require("./RadioInput.cjs"),R=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),_=I.newStyled.div`
+  display: inline-flex;
+  flex-direction: ${s=>s.inline===!0?"row":"column"};
+  gap: 1.5rem;
+  width: fit-content;
+  box-sizing: border-box;
+`,t=n.forwardRef((s,l)=>{const{id:d="",name:c,value:o=null,disabled:y=!1,readOnly:u=!1,items:m=[],mapId:z="id",mapValue:S="value",radioProps:P,inline:T=!0,onChange:a=()=>{},className:f="",style:g={},size:b="small",color:h="primary",...x}=s;var v=R.useTheme();const[w,q]=n.useState(null);n.useEffect(()=>{o!==w&&q(o)},[o]);var C={color:h,theme:v,size:b,disabled:y,readOnly:u};const j=(r,i)=>{a&&a(r)};return p.jsx(_,{ref:l,id:d,inline:T,style:g,className:f,...x,children:m.map((r,i)=>p.jsx(O,{...C,label:r.label,value:r.value,...P,onChange:j,name:c},i))})});t.propTypes={id:e.PropTypes.string,name:e.PropTypes.string,value:e.PropTypes.any,disabled:e.PropTypes.bool,readOnly:e.PropTypes.bool,items:e.PropTypes.arrayOf(e.PropTypes.object),mapId:e.PropTypes.string,mapValue:e.PropTypes.string,inline:e.PropTypes.bool,onChange:e.PropTypes.func,className:e.PropTypes.string,style:e.PropTypes.object,size:e.PropTypes.oneOf(["small","medium","large"]),color:e.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"]),radioProps:e.PropTypes.any};module.exports=t;

package/dist/RadioGroup.js

@@ -0,0 +1,104 @@
+import { jsx as l } from "react/jsx-runtime";
+import P, { useState as R, useEffect as j } from "react";
+import { n as z } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { P as e } from "./index-Ds9PUTwb.js";
+import T from "./RadioInput.js";
+import { u as k } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const N = z.div`
+  display: inline-flex;
+  flex-direction: ${(r) => r.inline === !0 ? "row" : "column"};
+  gap: 1.5rem;
+  width: fit-content;
+  box-sizing: border-box;
+`, S = P.forwardRef((r, s) => {
+  const {
+    id: t = "",
+    name: d,
+    value: o = null,
+    disabled: m = !1,
+    readOnly: p = !1,
+    items: u = [],
+    mapId: V = "id",
+    mapValue: _ = "value",
+    radioProps: c,
+    inline: f = !0,
+    //----------------
+    onChange: n = () => {
+    },
+    //----------------
+    className: g = "",
+    style: y = {},
+    size: b = "small",
+    color: h = "primary",
+    ...v
+  } = r;
+  var x = k();
+  const [C, w] = R(null);
+  j(() => {
+    o !== C && w(o);
+  }, [o]);
+  var I = {
+    color: h,
+    theme: x,
+    size: b,
+    disabled: m,
+    readOnly: p
+  };
+  const O = (a, i) => {
+    n && n(a);
+  };
+  return /* @__PURE__ */ l(
+    N,
+    {
+      ref: s,
+      id: t,
+      inline: f,
+      style: y,
+      className: g,
+      ...v,
+      children: u.map((a, i) => /* @__PURE__ */ l(
+        T,
+        {
+          ...I,
+          label: a.label,
+          value: a.value,
+          ...c,
+          onChange: O,
+          name: d
+        },
+        i
+      ))
+    }
+  );
+});
+S.propTypes = {
+  id: e.string,
+  name: e.string,
+  value: e.any,
+  disabled: e.bool,
+  readOnly: e.bool,
+  items: e.arrayOf(e.object),
+  mapId: e.string,
+  mapValue: e.string,
+  inline: e.bool,
+  //----------------
+  onChange: e.func,
+  //----------------
+  className: e.string,
+  style: e.object,
+  size: e.oneOf(["small", "medium", "large"]),
+  color: e.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ]),
+  radioProps: e.any
+};
+export {
+  S as default
+};

package/dist/RadioInput.cjs

@@ -0,0 +1,117 @@
+"use strict";const i=require("react/jsx-runtime"),h=require("react"),m=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./index-DXnSjbfJ.cjs"),o=require("./utils-hdRGTsQ7.cjs"),O=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),j=e=>e=="left"?"row-reverse":"row",q=m.newStyled.label`
+  min-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
+  width: 100%;
+  display: inline-flex;
+  justify-content: start;
+  align-items: center;
+  flex-direction: ${e=>j(e.labelPosition)};
+  ${e=>e.spaceBetween===!0&&"justify-content: space-between;"}
+  gap: 0.5rem;
+  ${e=>e.disabled===!0&&"pointer-events: none;"}
+  ${e=>o.getComponentTypographyCss(e.theme,"Radio",e.size,"enabled")};
+  gap: 0.75rem;
+  cursor: pointer;
+  position: relative;
+  & input {
+    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+  & .checkmark {
+    box-sizing: border-box;
+    cursor: pointer;
+    min-height: ${e=>e.theme.components.Radio.default.enabled.sizes[e.size]};
+    min-width: ${e=>e.theme.components.Radio.default.enabled.sizes[e.size]};
+    height: ${e=>e.theme.components.Radio.default.enabled.sizes[e.size]};
+    width: ${e=>e.theme.components.Radio.default.enabled.sizes[e.size]};
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease;
+    ${e=>e.focused===!0&&e.disabled!==!0&&e.readOnly!==!0?o.getOutlineCss(e.theme):""};
+    & svg {
+      fill: transparent;
+      & .outer-circle {
+        stroke: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"enabled","border")};
+      }
+      & .inner-circle {
+        stroke: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"enabled","border")};
+      }
+    }
+  }
+  & input:hover ~ .lnc-radio-input-label {
+    color: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"hover","text")};
+  }
+
+  
+  & input:checked ~ .lnc-radio-input-label {
+    color: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"active","text")};
+  }
+  & input:checked ~ .checkmark {
+    & svg {
+      fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"active","background","backgroundOpacity")};
+      & .outer-circle {
+        fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"active","border")};
+      }
+      & .inner-circle {
+        fill: ${e=>e.innerColor==="white"||e.innerColor==="transparent"?e.innerColor:o.getColorRgbaValue(e.theme,"Radio",e.color,"active","border")}};
+      }
+    }
+  }
+
+  & input:disabled ~ .lnc-radio-input-label {
+    color: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","text")};
+  }
+  
+  & input[disabled]:checked ~ .checkmark {
+    & svg {
+      fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","background","backgroundOpacity")};
+      & .outer-circle {
+        fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")};
+      }
+      & .inner-circle {
+        fill: ${e=>e.innerColor==="white"||e.innerColor==="transparent"?e.innerColor:o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")}
+            };
+      }
+    }
+
+
+    & input[disabled] ~ .checkmark {
+      & svg {
+        fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","background","backgroundOpacity")};
+        & .outer-circle {
+          fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")};
+        }
+        & .inner-circle {
+          fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")}
+              };
+        }
+      }
+
+    & input:hover ~ .lnc-radio-input-label {
+      color: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"hover","text")};
+    }
+    & input[hover]:checked ~ .checkmark {
+      & svg {
+        fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"hover","background","backgroundOpacity")};
+        & .outer-circle {
+          fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")};
+        }
+        & .inner-circle {
+          fill: ${e=>e.innerColor==="white"||e.innerColor==="transparent"?e.innerColor:o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")}};
+        }
+      }
+`,B=m.newStyled.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=>o.getColorRgbaValue(e.theme,"Radio",e.color,"enabled","text")};
+`,f=h.forwardRef((e,y)=>{const{wrapperRef:R,className:C="",style:w={},color:k="primary",innerColor:x="white",size:$="small",onChange:a,onFocus:l,onBlur:n,onClick:c,onKeyDown:N,label:u,labelPosition:p="right",spaceBetween:v,disabled:s,readOnly:d,...P}=e,[T,b]=h.useState(!1);var g={theme:O.useTheme(),size:$,color:k,disabled:s,labelPosition:p,spaceBetween:v};const V=t=>{b(!1),n&&(n==null||n(t))},z=t=>{b(!0),l&&(l==null||l(t))};return i.jsxs(q,{...g,ref:R,className:C,style:w,tabIndex:-1,readOnly:d,focused:T,onClick:t=>c==null?void 0:c(t),innerColor:x,children:[i.jsx("input",{ref:y,disabled:s||d,type:"radio",onBlur:V,onFocus:z,onChange:t=>a==null?void 0:a(t),...P}),i.jsx("div",{className:"checkmark",children:i.jsxs("svg",{id:"eqw1eBsfm9l1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",shapeRendering:"geometricPrecision",textRendering:"geometricPrecision",children:[i.jsx("ellipse",{className:"outer-circle",rx:"9.5",ry:"9.5",transform:"translate(10 10)",fillRule:"evenodd",stroke:"red"}),i.jsx("ellipse",{rx:"5",ry:"5",transform:"translate(10 10)",className:"inner-circle",strokeWidth:"0"})]})}),i.jsx(B,{...g,className:"lnc-radio-input-label",disalbed:s,readOnly:d,title:u,tabIndex:-1,children:u})]})});f.propTypes={id:r.PropTypes.string,name:r.PropTypes.string,checked:r.PropTypes.bool,disabled:r.PropTypes.bool,readOnly:r.PropTypes.bool,label:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.element]),labelPosition:r.PropTypes.oneOf(["right","left"]),tabIndex:r.PropTypes.number,spaceBetween:r.PropTypes.bool,onChange:r.PropTypes.func,onFocus:r.PropTypes.func,onBlur:r.PropTypes.func,onClick:r.PropTypes.func,onKeyDown: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"]),innerColor:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray","white","transparent"])};module.exports=f;