@lanaco/lnc-react-ui 4.0.18 → 4.0.20

package/dist/ProgressBar.cjs

@@ -1,22 +1,30 @@
-"use strict";const t=require("react/jsx-runtime"),m=require("react"),r=require("./index-BIlhCoy2.cjs"),n=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),s=require("./utils-DTAPpJXU.cjs"),b=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),h=n.newStyled.div`
+"use strict";const a=require("react/jsx-runtime"),i=require("react"),r=require("./index-BIlhCoy2.cjs"),l=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),o=require("./utils-DTAPpJXU.cjs"),P=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),f=l.newStyled.div`
   width: 100%;
   position: relative;
-  background-color: ${e=>s.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","unfilled")};
+  background-color: ${e=>o.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`
+`,x=l.newStyled.div`
+  position: relative;
   height: 100%;
   width: ${e=>e.progressPercentage+"%"};
-  background-color: ${e=>s.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","background")};
-  position absolute;
+  background-color: ${e=>o.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")};
+
+  & .progress-icon {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(50%, -50%);
+  }
+`,w=l.newStyled.label`
+  ${e=>o.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;
+  color: ${e=>o.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","text")};
+`,d=i.forwardRef((e,T)=>{const{id:$="",showLabel:c=!1,progressPercentage:t=0,className:m="",style:u={},onChange:C=()=>{},size:g="small",color:b="primary",progressBarEndComponent:s,...h}=e,n=P.useTheme(),y=()=>{var p;if(i.isValidElement(s))return i.cloneElement(s,{className:`progress-icon ${(p=s==null?void 0:s.props)==null?void 0:p.className}`})};return a.jsxs(f,{style:u,className:"lnc-ui-progress "+m,theme:n,size:g,showLabel:c,progressPercentage:t,...h,children:[a.jsx(x,{progressPercentage:t,theme:n,color:b,children:s!==null&&y()}),c&&a.jsxs(w,{theme:n,size:g,children:[t,"%"]})]})});d.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"]),progressBarEndComponent:r.PropTypes.any};module.exports=d;

package/dist/ProgressBar.js

@@ -1,13 +1,13 @@
-import { jsxs as l, jsx as p } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
+import { jsxs as g, jsx as h } from "react/jsx-runtime";
+import { forwardRef as f, isValidElement as P, cloneElement as y } from "react";
 import { P as r } from "./index-BYnWp42a.js";
-import { n as s } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { a, g as h } from "./utils-C52T57HO.js";
-import { u } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
-const f = s.div`
+import { n as t } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { a as n, g as x } from "./utils-C52T57HO.js";
+import { u as w } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
+const $ = t.div`
   width: 100%;
   position: relative;
-  background-color: ${(e) => a(
+  background-color: ${(e) => n(
   e.theme,
   "Progress",
   e.color,
@@ -17,66 +17,83 @@ const f = s.div`
   height: ${(e) => e.theme.components.Progress.default.enabled.sizes[e.size]};
   border-radius: 5px;
   animation: progres 4s infinite linear;
-`, P = s.div`
+`, z = t.div`
+  position: relative;
   height: 100%;
   width: ${(e) => e.progressPercentage + "%"};
-  background-color: ${(e) => a(
+  background-color: ${(e) => n(
   e.theme,
   "Progress",
   e.color,
   "enabled",
   "background"
 )};
-  position absolute;
+  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) => h(e.theme, "Progress", e.size, "enabled")};
+
+  & .progress-icon {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(50%, -50%);
+  }
+`, C = t.label`
+  ${(e) => x(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 = b((e, w) => {
+  color: ${(e) => n(e.theme, "Progress", e.color, "enabled", "text")};
+`, N = f((e, v) => {
   const {
-    id: $ = "",
-    showLabel: t = !1,
-    progressPercentage: n = 0,
-    className: c = "",
-    style: g = {},
-    onChange: z = () => {
+    id: T = "",
+    showLabel: i = !1,
+    progressPercentage: s = 0,
+    className: m = "",
+    style: d = {},
+    onChange: j = () => {
     },
-    size: i = "small",
-    color: m = "primary",
-    ...d
-  } = e, o = u();
-  return /* @__PURE__ */ l(
-    f,
+    size: l = "small",
+    color: p = "primary",
+    progressBarEndComponent: o,
+    ...b
+  } = e, a = w(), u = () => {
+    var c;
+    if (P(o))
+      return y(o, {
+        className: `progress-icon ${(c = o == null ? void 0 : o.props) == null ? void 0 : c.className}`
+      });
+  };
+  return /* @__PURE__ */ g(
+    $,
     {
-      style: g,
-      className: "lnc-ui-progress " + c,
-      theme: o,
-      size: i,
-      showLabel: t,
-      ...d,
+      style: d,
+      className: "lnc-ui-progress " + m,
+      theme: a,
+      size: l,
+      showLabel: i,
+      progressPercentage: s,
+      ...b,
       children: [
-        /* @__PURE__ */ p(
-          P,
+        /* @__PURE__ */ h(
+          z,
           {
-            progressPercentage: n,
-            theme: o,
-            color: m
+            progressPercentage: s,
+            theme: a,
+            color: p,
+            children: o !== null && u()
           }
         ),
-        t && /* @__PURE__ */ l(y, { theme: o, size: i, children: [
-          n,
+        i && /* @__PURE__ */ g(C, { theme: a, size: l, children: [
+          s,
           "%"
         ] })
       ]
     }
   );
 });
-x.propTypes = {
+N.propTypes = {
   id: r.string,
   showLabel: r.bool,
   progressPercentage: r.number,
@@ -96,8 +113,9 @@ x.propTypes = {
     "information",
     "neutral",
     "gray"
-  ])
+  ]),
+  progressBarEndComponent: r.any
 };
 export {
-  x as default
+  N as default
 };

package/dist/Tabs.cjs

@@ -4,4 +4,4 @@
   justify-content: ${s=>s.fullWidth?"space-evenly":"none"};
   gap: ${s=>s.type=="pill"?"10px":"0"};
   box-sizing: border-box;
-`,p=r.forwardRef((s,d)=>{const{type:l="regular",fullWidth:t=!1,className:m="",style:u={},color:i="primary",size:c="small",children:a,...y}=s,h=q.useTheme(),[f,b]=r.useState(),g={theme:h,color:i,size:c,style:u,className:"lnc-ui-tabs "+m},T=n=>{b(n)},x=r.Children.map(a,(n,o)=>r.cloneElement(n,{type:l,first:o==0,last:o==r.Children.toArray(a).length-1,fullWidth:t,index:o,itemClick:T,activeIndex:f,color:i,size:c,fullWidth:t}));return P.jsx(w,{ref:d,type:l,fullWidth:t,...g,...y,children:x})});p.propTypes={type:e.PropTypes.oneOf(["regular","pill","underline"]),fullWidth:e.PropTypes.bool,className:e.PropTypes.string,style:e.PropTypes.object,color:e.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:e.PropTypes.oneOf(["small","medium","large"])};module.exports=p;
+`,p=r.forwardRef((s,d)=>{const{type:o="regular",fullWidth:l=!1,className:m="",style:u={},color:i="primary",size:c="small",children:a,...y}=s,h=q.useTheme(),[f,b]=r.useState(),g={theme:h,color:i,size:c,style:u,className:"lnc-ui-tabs "+m},T=t=>{b(t)},x=r.Children.map(a,(t,n)=>r.cloneElement(t,{type:o,first:n==0,last:n==r.Children.toArray(a).length-1,fullWidth:l,index:n,itemClick:T,activeIndex:f,color:i,size:c}));return P.jsx(w,{ref:d,type:o,fullWidth:l,...g,...y,children:x})});p.propTypes={type:e.PropTypes.oneOf(["regular","pill","underline"]),fullWidth:e.PropTypes.bool,className:e.PropTypes.string,style:e.PropTypes.object,color:e.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:e.PropTypes.oneOf(["small","medium","large"])};module.exports=p;

package/dist/Tabs.js

@@ -11,8 +11,8 @@ const w = W.div`
   box-sizing: border-box;
 `, z = j((t, m) => {
   const {
-    type: o = "regular",
-    fullWidth: r = !1,
+    type: l = "regular",
+    fullWidth: o = !1,
     //----------------
     className: p = "",
     style: d = {},
@@ -26,29 +26,28 @@ const w = W.div`
     size: a,
     style: d,
     className: "lnc-ui-tabs " + p
-  }, b = (s) => {
-    h(s);
+  }, b = (r) => {
+    h(r);
   }, x = c.map(
     i,
-    (s, l) => P(s, {
-      type: o,
-      first: l == 0,
-      last: l == c.toArray(i).length - 1,
-      fullWidth: r,
-      index: l,
+    (r, s) => P(r, {
+      type: l,
+      first: s == 0,
+      last: s == c.toArray(i).length - 1,
+      fullWidth: o,
+      index: s,
       itemClick: b,
       activeIndex: y,
       color: n,
-      size: a,
-      fullWidth: r
+      size: a
     })
   );
   return /* @__PURE__ */ T(
     w,
     {
       ref: m,
-      type: o,
-      fullWidth: r,
+      type: l,
+      fullWidth: o,
       ...g,
       ...f,
       children: x

package/package.json

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