1mpacto-react-ui 2.0.17 → 2.0.19

package/dist/components/Chart/PieChart.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("react/jsx-runtime"),j=require("chart.js"),h=require("react"),E=require("react-chartjs-2"),w=require("../../utils/common.cjs"),T=require("../PortalComponent/PortalComponent.cjs");j.Chart.register(j.ArcElement,j.Tooltip);const I=(t,l,n)=>{const r=l>0?t/l*100:0;switch(n){case"decimal":return w.formatNumber(t,"decimal");case"currency":return w.formatNumber(t,"currency");case"percentage":default:return`${Math.round(r)}%`}},O=()=>{const t=Math.floor(Math.random()*360),l=60+Math.floor(Math.random()*30),n=45+Math.floor(Math.random()*20);return((o,a,c)=>{a/=100,c/=100;const s=a*Math.min(c,1-c),d=u=>{const i=(u+o/30)%12,e=c-s*Math.max(Math.min(i-3,9-i,1),-1);return Math.round(255*e).toString(16).padStart(2,"0")};return`#${d(0)}${d(8)}${d(4)}`})(t,l,n)},A=(t,l)=>Array.isArray(t)?t[l]||O():typeof t=="string"?t:O(),B=t=>{const l=t.labels??[],n=t.datasets[0];return n?(n.data??[]).map((o,a)=>({label:l[a]??"",value:o,backgroundColor:A(n.backgroundColor,a)})):[]},R=(t,l)=>{if(!l)return{labels:t.map(e=>e.label),values:t.map(e=>e.value),colors:t.map(e=>e.backgroundColor||O()),mergedMap:{}};const{mode:n,value:r,otherLabel:o="Other",otherBackgroundColor:a="#B0BEC5"}=l,c=t.reduce((e,p)=>e+p.value,0),s=[],d=[];let u=0;t.forEach(e=>{(n==="percentage"?e.value/c*100<r:e.value<r)?(u+=e.value,d.push(e)):s.push({label:e.label,value:e.value,color:e.backgroundColor||O()})});const i={};return u>0&&(s.push({label:o,value:u,color:a}),i[s.length-1]=d),{labels:s.map(e=>e.label),values:s.map(e=>e.value),colors:s.map(e=>e.color),mergedMap:i}},F=(t,l,n)=>({chart:r,tooltip:o})=>{var g,f,b,m,v,x,y,M,S,k;const a={};if(o.opacity===0){t(P=>({...P,style:{...P.style,opacity:0,pointerEvents:"none"}}));return}if(!o.dataPoints||o.dataPoints.length===0)return;a.opacity="1",a.position="absolute",a.pointerEvents="none";const c=r.canvas.getBoundingClientRect();a.left=c.left+window.pageXOffset+o.caretX+"px",a.top=c.top+window.pageYOffset+o.caretY+"px";const s=o.dataPoints[0].dataIndex,d=((f=(g=o.dataPoints)==null?void 0:g[0])==null?void 0:f.label)??"",u=((m=(b=o.dataPoints)==null?void 0:b[0])==null?void 0:m.raw)??0,i=((y=(x=(v=o.dataPoints)==null?void 0:v[0])==null?void 0:x.dataset.backgroundColor)==null?void 0:y[s])??"",e=((k=(S=(M=o.dataPoints)==null?void 0:M[0])==null?void 0:S.dataset.data)==null?void 0:k.reduce((P,q)=>P+q,0))||1,p=e>0?u/e*100:0;t({label:d,value:u,percentage:p,formattedValue:I(u,e,l),backgroundColor:typeof i=="string"?i:"#000",mergedItems:n[s]??[],style:a,dataPoints:o.dataPoints})},V=(t,l)=>({id:"pieLabelPlugin",afterDraw(n){const{ctx:r}=n,o=n.getDatasetMeta(0),a=n.data.datasets[0].data.reduce((c,s)=>c+s,0);o.data.forEach((c,s)=>{var f;const u=n.data.datasets[0].data[s]??0;if((a>0?u/a*100:0)<l)return;const{x:e,y:p}=c.tooltipPosition(!1),g=(f=n.data.labels)==null?void 0:f[s];r.save(),r.textAlign="center",r.textBaseline="middle",r.fillStyle="#FFFFFF",r.font="bold 10px Inter, sans-serif",r.fillText(g,e||0,(p||0)-6),r.fillText(I(u,a,t),e||0,(p||0)+8),r.restore()})}}),$={responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1},tooltip:{enabled:!0}},elements:{arc:{hoverOffset:8,borderWidth:0}}},D=({data:t,height:l,classNameContainer:n,id:r,options:o,CustomTooltip:a,threshold:c,valueFormat:s,hideLabelBelowPercentage:d=5})=>{const[u,i]=h.useState({style:{opacity:0,position:"absolute",left:0,top:0},label:"",value:0,percentage:0,formattedValue:"",backgroundColor:"",mergedItems:[],dataPoints:[]}),e=h.useMemo(()=>B(t),[t]),{labels:p,values:g,colors:f,mergedMap:b}=h.useMemo(()=>R(e,c),[e,c]),m=h.useMemo(()=>({labels:p,datasets:[{...t.datasets[0],data:g,backgroundColor:f,hoverOffset:8,borderWidth:0}]}),[p,g,f,t.datasets]),v=h.useMemo(()=>{const x={plugins:{tooltip:{enabled:!a,external:a?({chart:y,tooltip:M})=>F(i,s,b)({chart:y,tooltip:M}):void 0}}};return w.mergeObjects($,x,o??{})},[o,a,s,b]);return C.jsxs("div",{id:r,className:n,style:{height:l||"300px"},children:[a&&C.jsx(T.default,{selector:"body",children:C.jsx(a,{...u})}),C.jsx(E.Pie,{data:m,options:v,plugins:[V(s,d)]})]})};exports.default=D;

package/dist/components/Chart/PieChart.mjs

@@ -0,0 +1,172 @@
+import { jsxs as A, jsx as O } from "react/jsx-runtime";
+import { Chart as B, ArcElement as T, Tooltip as F } from "chart.js";
+import h from "react";
+import { Pie as R } from "react-chartjs-2";
+import { mergeObjects as V, formatNumber as I } from "../../utils/common.mjs";
+import $ from "../PortalComponent/PortalComponent.mjs";
+B.register(T, F);
+const E = (t, l, n) => {
+  const r = l > 0 ? t / l * 100 : 0;
+  switch (n) {
+    case "decimal":
+      return I(t, "decimal");
+    case "currency":
+      return I(t, "currency");
+    case "percentage":
+    default:
+      return `${Math.round(r)}%`;
+  }
+}, P = () => {
+  const t = Math.floor(Math.random() * 360), l = 60 + Math.floor(Math.random() * 30), n = 45 + Math.floor(Math.random() * 20);
+  return ((o, a, c) => {
+    a /= 100, c /= 100;
+    const s = a * Math.min(c, 1 - c), u = (d) => {
+      const i = (d + o / 30) % 12, e = c - s * Math.max(Math.min(i - 3, 9 - i, 1), -1);
+      return Math.round(255 * e).toString(16).padStart(2, "0");
+    };
+    return `#${u(0)}${u(8)}${u(4)}`;
+  })(t, l, n);
+}, j = (t, l) => Array.isArray(t) ? t[l] || P() : typeof t == "string" ? t : P(), D = (t) => {
+  const l = t.labels ?? [], n = t.datasets[0];
+  return n ? (n.data ?? []).map((o, a) => ({
+    label: l[a] ?? "",
+    value: o,
+    backgroundColor: j(n.backgroundColor, a)
+  })) : [];
+}, L = (t, l) => {
+  if (!l)
+    return {
+      labels: t.map((e) => e.label),
+      values: t.map((e) => e.value),
+      colors: t.map((e) => e.backgroundColor || P()),
+      mergedMap: {}
+    };
+  const { mode: n, value: r, otherLabel: o = "Other", otherBackgroundColor: a = "#B0BEC5" } = l, c = t.reduce((e, p) => e + p.value, 0), s = [], u = [];
+  let d = 0;
+  t.forEach((e) => {
+    (n === "percentage" ? e.value / c * 100 < r : e.value < r) ? (d += e.value, u.push(e)) : s.push({
+      label: e.label,
+      value: e.value,
+      color: e.backgroundColor || P()
+    });
+  });
+  const i = {};
+  return d > 0 && (s.push({ label: o, value: d, color: a }), i[s.length - 1] = u), {
+    labels: s.map((e) => e.label),
+    values: s.map((e) => e.value),
+    colors: s.map((e) => e.color),
+    mergedMap: i
+  };
+}, G = (t, l, n) => ({ chart: r, tooltip: o }) => {
+  var m, f, g, b, v, C, y, x, w, k;
+  const a = {};
+  if (o.opacity === 0) {
+    t((M) => ({ ...M, style: { ...M.style, opacity: 0, pointerEvents: "none" } }));
+    return;
+  }
+  if (!o.dataPoints || o.dataPoints.length === 0) return;
+  a.opacity = "1", a.position = "absolute", a.pointerEvents = "none";
+  const c = r.canvas.getBoundingClientRect();
+  a.left = c.left + window.pageXOffset + o.caretX + "px", a.top = c.top + window.pageYOffset + o.caretY + "px";
+  const s = o.dataPoints[0].dataIndex, u = ((f = (m = o.dataPoints) == null ? void 0 : m[0]) == null ? void 0 : f.label) ?? "", d = ((b = (g = o.dataPoints) == null ? void 0 : g[0]) == null ? void 0 : b.raw) ?? 0, i = ((y = (C = (v = o.dataPoints) == null ? void 0 : v[0]) == null ? void 0 : C.dataset.backgroundColor) == null ? void 0 : y[s]) ?? "", e = ((k = (w = (x = o.dataPoints) == null ? void 0 : x[0]) == null ? void 0 : w.dataset.data) == null ? void 0 : k.reduce((M, S) => M + S, 0)) || 1, p = e > 0 ? d / e * 100 : 0;
+  t({
+    label: u,
+    value: d,
+    percentage: p,
+    formattedValue: E(d, e, l),
+    backgroundColor: typeof i == "string" ? i : "#000",
+    mergedItems: n[s] ?? [],
+    style: a,
+    dataPoints: o.dataPoints
+  });
+}, H = (t, l) => ({
+  id: "pieLabelPlugin",
+  afterDraw(n) {
+    const { ctx: r } = n, o = n.getDatasetMeta(0), a = n.data.datasets[0].data.reduce((c, s) => c + s, 0);
+    o.data.forEach((c, s) => {
+      var f;
+      const d = n.data.datasets[0].data[s] ?? 0;
+      if ((a > 0 ? d / a * 100 : 0) < l) return;
+      const { x: e, y: p } = c.tooltipPosition(!1), m = (f = n.data.labels) == null ? void 0 : f[s];
+      r.save(), r.textAlign = "center", r.textBaseline = "middle", r.fillStyle = "#FFFFFF", r.font = "bold 10px Inter, sans-serif", r.fillText(m, e || 0, (p || 0) - 6), r.fillText(E(d, a, t), e || 0, (p || 0) + 8), r.restore();
+    });
+  }
+}), N = {
+  responsive: !0,
+  maintainAspectRatio: !1,
+  plugins: {
+    legend: {
+      display: !1
+    },
+    tooltip: {
+      enabled: !0
+    }
+  },
+  elements: {
+    arc: {
+      hoverOffset: 8,
+      borderWidth: 0
+    }
+  }
+}, K = ({
+  data: t,
+  height: l,
+  classNameContainer: n,
+  id: r,
+  options: o,
+  CustomTooltip: a,
+  threshold: c,
+  valueFormat: s,
+  hideLabelBelowPercentage: u = 5
+}) => {
+  const [d, i] = h.useState({
+    style: { opacity: 0, position: "absolute", left: 0, top: 0 },
+    label: "",
+    value: 0,
+    percentage: 0,
+    formattedValue: "",
+    backgroundColor: "",
+    mergedItems: [],
+    dataPoints: []
+  }), e = h.useMemo(() => D(t), [t]), {
+    labels: p,
+    values: m,
+    colors: f,
+    mergedMap: g
+  } = h.useMemo(() => L(e, c), [e, c]), b = h.useMemo(
+    () => ({
+      labels: p,
+      datasets: [
+        {
+          ...t.datasets[0],
+          data: m,
+          backgroundColor: f,
+          hoverOffset: 8,
+          borderWidth: 0
+        }
+      ]
+    }),
+    [p, m, f, t.datasets]
+  ), v = h.useMemo(() => V(N, {
+    plugins: {
+      tooltip: {
+        enabled: !a,
+        external: a ? ({ chart: y, tooltip: x }) => G(i, s, g)({ chart: y, tooltip: x }) : void 0
+      }
+    }
+  }, o ?? {}), [o, a, s, g]);
+  return /* @__PURE__ */ A("div", { id: r, className: n, style: { height: l || "300px" }, children: [
+    a && /* @__PURE__ */ O($, { selector: "body", children: /* @__PURE__ */ O(a, { ...d }) }),
+    /* @__PURE__ */ O(
+      R,
+      {
+        data: b,
+        options: v,
+        plugins: [H(s, u)]
+      }
+    )
+  ] });
+};
+export {
+  K as default
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./utils/common.cjs"),l=require("./utils/formatBigNumber.cjs"),d=require("./utils/cookies.cjs"),m=require("./components/Alert/index.cjs"),t=require("./utils/yup.cjs"),c=require("./config/bigNumber/index.cjs"),n=require("./utils/axiosBigNumber.cjs"),b=require("./config/tailwind/colors.cjs"),g=require("./config/tailwind/screen.cjs"),p=require("./config/tailwind/nativeScreen.cjs"),q=require("./components/TPublish/TPublish.cjs"),T=require("./components/Button/Button.cjs"),C=require("./components/Popover/Popover.cjs"),y=require("./components/Calendar/Calendar.cjs"),B=require("./components/Calendar/CalendarRange.cjs"),h=require("./components/DatePicker/DatePicker.cjs"),N=require("./components/DatePicker/DateRangePicker.cjs"),D=require("./components/DatePicker/FilterDate.cjs"),O=require("./components/Input/InputFloatingInner.cjs"),S=require("./components/Input/InputReguler.cjs"),I=require("./components/Pagination/Pagination.cjs"),P=require("./components/Tabs/Tabs.cjs"),x=require("./components/Tabs/TabPanel.cjs"),M=require("./components/Table/Table.cjs"),R=require("./components/Virtualization/TableVirtualization.cjs"),v=require("./components/Virtualization/ListVirtualization.cjs"),A=require("./components/SelectDropdownContainer/SelectDropdownContainer.cjs"),F=require("./components/Switch/Switch.cjs"),L=require("./components/ButtonIcon/ButtonIcon.cjs"),E=require("./components/Badges/Badges.cjs"),j=require("./components/Chips/Chips.cjs"),u=require("./components/RadioCheckbox/RadioCheckbox.cjs"),k=require("./components/RadioCheckbox/RadioCheckboxLabel.cjs"),w=require("./components/Breadcrumbs/Breadcrumbs.cjs"),V=require("./components/Sidebar/Sidebar.cjs"),z=require("./components/Collapse/Collapse.cjs"),K=require("./components/Modal/ModalDialog.cjs"),U=require("./components/Timeline/Timeline.cjs"),G=require("./components/FilterContainer/FilterContainer.cjs"),_=require("./components/NumberFormat/NumberFormat.cjs"),H=require("./components/PortalComponent/PortalComponent.cjs"),J=require("./components/Upload/UploadFile.cjs"),Q=require("./components/TruncateComponent/TruncateComponent.cjs"),W=require("./components/Upload/UploadImage.cjs"),Y=require("./components/Textarea/Textarea.cjs"),Z=require("./components/Chart/DoughnutChart.cjs"),$=require("./components/DatePicker/MonthYearPicker.cjs"),X=require("./components/RadioCheckbox/CheckboxTable.cjs"),ee=require("./components/Input/InputNative.cjs"),re=require("./components/Upload/UploadMultipleFile.cjs"),te=require("./components/ErrorMessage/ErrorMessage.cjs"),ae=require("./components/Textarea/TextareaFloatingInner.cjs"),oe=require("./components/Step/Step.cjs"),ne=require("./components/Chart/LineChart.cjs"),ue=require("./components/Tooltip/Tooltip.cjs"),ie=require("./components/ButtonPopover/ButtonPopover.cjs"),se=require("./components/Chart/GradientLineChart.cjs"),le=require("./components/Chart/GradientBarChart.cjs"),ce=require("./components/Step/StepIndicator.cjs"),fe=require("./components/TextEditor/TextEditor.cjs"),de=require("./components/Collapse/CollapseV2.cjs"),me=require("./components/Table/TableSubMobile.cjs"),be=require("./components/TimeRange/TimeRange.cjs"),ge=require("./components/Textarea/TextareaInnerLabel.cjs"),pe=require("./components/Input/InputInnerLabel.cjs"),qe=require("./components/Text/Text.cjs"),Te=require("./hooks/useElementOrWindowMediaQuery.cjs"),Ce=require("./hooks/useCountdown.cjs"),ye=require("./hooks/useAsyncDebounce.cjs"),Be=require("./hooks/useCombinedResizeObserver.cjs"),he=require("./hooks/useStateRef.cjs"),Ne=require("./hooks/useMasonry.cjs"),De=require("./hooks/useOtpInput.cjs"),Oe=require("bignumber.js"),i=require("./config/tailwind/typography.cjs"),Se=require("@tanstack/react-table"),Ie=require("react-select"),Pe=require("react-number-format"),xe=require("./components/Table/Table.config.cjs"),Me=require("react-toastify"),f=require("./hooks/useDeepCompareEffect.cjs"),Re=require("./hooks/useMergeRefs.cjs"),ve=require("./hooks/useEventListener.cjs");function Ae(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(o,a,s.get?s:{enumerable:!0,get:()=>r[a]})}}return o.default=r,Object.freeze(o)}const Fe=Ae(Se);exports.deepCompareEquals=e.deepCompareEquals;exports.deepMerge=e.deepMerge;exports.deleteKeysImmutable=e.deleteKeysImmutable;exports.deleteKeysMutable=e.deleteKeysMutable;exports.encryptRSAOAEP=e.encryptRSAOAEP;exports.extractElementStringToOriginalValue=e.extractElementStringToOriginalValue;exports.formatDate=e.formatDate;exports.formatDateRange=e.formatDateRange;exports.formatNumber=e.formatNumber;exports.groupByKey=e.groupByKey;exports.isAccurateBigNumber=e.isAccurateBigNumber;exports.isAccurateNumber=e.isAccurateNumber;exports.isObject=e.isObject;exports.parseBigDecimal=e.parseBigDecimal;exports.parseDecimal=e.parseDecimal;exports.parseFileName=e.parseFileName;exports.removeKeyObjectEmptyValue=e.removeKeyObjectEmptyValue;exports.setDigit=e.setDigit;exports.transformArrayMapping=e.transformArrayMapping;exports.transformArrayMappingObjectFC=e.transformArrayMappingObjectFC;exports.transformArrayOfObjectToArray=e.transformArrayOfObjectToArray;exports.transformArrayOfObjectToString=e.transformArrayOfObjectToString;exports.transformBigNumber=e.transformBigNumber;exports.transformBigNumberOpt=e.transformBigNumberOpt;exports.transformDataHistory=e.transformDataHistory;exports.transformLatLong=e.transformLatLong;exports.transformNumber=e.transformNumber;exports.transformSecondTime=e.transformSecondTime;exports.transfromIsNan=e.transfromIsNan;exports.formatBigNumber=l.formatBigNumber;exports.removeTrailingZeros=l.removeTrailingZeros;exports.cookieStorage=d.default;exports.openAlert=m.openAlert;exports.betweenBig=t.betweenBig;exports.lessThanBig=t.lessThanBig;exports.maxBig=t.maxBig;exports.minBig=t.minBig;exports.moreThanBig=t.moreThanBig;exports.BigNumber=c.BigNumber;exports.defaultConfig=c.defaultConfig;exports.convertBigNumbersToStrings=n.convertBigNumbersToStrings;exports.convertNumbersToBigNumbers=n.convertNumbersToBigNumbers;exports.convertTextToJsonBigNumbers=n.convertTextToJsonBigNumbers;exports.ConfigColors=b.default;exports.configScreens=g.default;exports.configNativeScreens=p.default;exports.TPublish=q.default;exports.Button=T.default;exports.Popover=C.default;exports.Calendar=y.default;exports.CalendarRange=B.default;exports.DatePicker=h.default;exports.DateRangePicker=N.default;exports.FilterDate=D.default;exports.InputFloatingInner=O.default;exports.InputReguler=S.default;exports.Pagination=I.default;exports.Tabs=P.default;exports.TabPanel=x.default;exports.Table=M.default;exports.TableVirtualization=R.default;exports.ListVirtualization=v.default;exports.SelectDropdownContainer=A.default;exports.Switch=F.default;exports.ButtonIcon=L.default;exports.Badges=E.default;exports.Chips=j.default;exports.DefaultCheckedChecboxIcon=u.DefaultCheckedChecboxIcon;exports.DefaultRadioChecboxIcon=u.DefaultRadioChecboxIcon;exports.RadioCheckbox=u.default;exports.RadioCheckboxLabel=k.default;exports.Breadcrumbs=w.default;exports.Sidebar=V.default;exports.Collapse=z.default;exports.ModalDialog=K.default;exports.Timeline=U.default;exports.FilterContainer=G.default;exports.NumberFormat=_.default;exports.PortalComponent=H.default;exports.UploadFile=J.default;exports.TruncateComponent=Q.default;exports.UploadImage=W.default;exports.Textarea=Y.default;exports.DoughnutChart=Z.default;exports.MonthYearPicker=$.default;exports.CheckboxTable=X.default;exports.InputNative=ee.default;exports.UploadMultipleFile=re.default;exports.ErrorMessage=te.default;exports.TextareaFloatingInner=ae.default;exports.Step=oe.default;exports.LineChart=ne.default;exports.Tooltip=ue.default;exports.ButtonPopover=ie.default;exports.GradientLineChart=se.default;exports.GradientBarChart=le.default;exports.StepIndicator=ce.default;exports.TextEditor=fe.default;exports.CollapseV2=de.default;exports.TableSubComponent=me.default;exports.TimeRange=be.default;exports.TextareaInnerLabel=ge.default;exports.InputInnerLabel=pe.default;exports.Text=qe.default;exports.useElementOrWindowMediaQuery=Te.default;exports.useCountdown=Ce.default;exports.useAsyncDebounce=ye.default;exports.useCombinedResizeObserver=Be.default;exports.useStateRef=he.default;exports.useMasonry=Ne.default;exports.useOtpInput=De.useOtpInput;exports.TypeBigNumber=Oe;exports.configTypography=i.default;exports.configTypographyLabaBisnis=i.configTypographyLabaBisnis;exports.configTypographyPayhere=i.configTypographyPayhere;exports.utilTable=Fe;Object.defineProperty(exports,"SelectDropdownContainerComponents",{enumerable:!0,get:()=>Ie.components});Object.defineProperty(exports,"PatternFormat",{enumerable:!0,get:()=>Pe.PatternFormat});exports.ConfigTable=xe.ConfigTable;Object.defineProperty(exports,"AlertContainer",{enumerable:!0,get:()=>Me.ToastContainer});exports.useDeepCompareEffect=f.useDeepCompareEffect;exports.useDeepCompareMemoize=f.useDeepCompareMemoize;exports.useMergeRefs=Re.useMergeRefs;exports.useEventListener=ve.useEventListener;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./utils/common.cjs"),l=require("./utils/formatBigNumber.cjs"),d=require("./utils/cookies.cjs"),m=require("./components/Alert/index.cjs"),t=require("./utils/yup.cjs"),c=require("./config/bigNumber/index.cjs"),n=require("./utils/axiosBigNumber.cjs"),b=require("./config/tailwind/colors.cjs"),g=require("./config/tailwind/screen.cjs"),p=require("./config/tailwind/nativeScreen.cjs"),q=require("./components/TPublish/TPublish.cjs"),T=require("./components/Button/Button.cjs"),C=require("./components/Popover/Popover.cjs"),y=require("./components/Calendar/Calendar.cjs"),B=require("./components/Calendar/CalendarRange.cjs"),h=require("./components/DatePicker/DatePicker.cjs"),N=require("./components/DatePicker/DateRangePicker.cjs"),D=require("./components/DatePicker/FilterDate.cjs"),O=require("./components/Input/InputFloatingInner.cjs"),S=require("./components/Input/InputReguler.cjs"),I=require("./components/Pagination/Pagination.cjs"),P=require("./components/Tabs/Tabs.cjs"),x=require("./components/Tabs/TabPanel.cjs"),M=require("./components/Table/Table.cjs"),R=require("./components/Virtualization/TableVirtualization.cjs"),v=require("./components/Virtualization/ListVirtualization.cjs"),A=require("./components/SelectDropdownContainer/SelectDropdownContainer.cjs"),F=require("./components/Switch/Switch.cjs"),L=require("./components/ButtonIcon/ButtonIcon.cjs"),E=require("./components/Badges/Badges.cjs"),j=require("./components/Chips/Chips.cjs"),u=require("./components/RadioCheckbox/RadioCheckbox.cjs"),k=require("./components/RadioCheckbox/RadioCheckboxLabel.cjs"),w=require("./components/Breadcrumbs/Breadcrumbs.cjs"),V=require("./components/Sidebar/Sidebar.cjs"),z=require("./components/Collapse/Collapse.cjs"),K=require("./components/Modal/ModalDialog.cjs"),U=require("./components/Timeline/Timeline.cjs"),G=require("./components/FilterContainer/FilterContainer.cjs"),_=require("./components/NumberFormat/NumberFormat.cjs"),H=require("./components/PortalComponent/PortalComponent.cjs"),J=require("./components/Upload/UploadFile.cjs"),Q=require("./components/TruncateComponent/TruncateComponent.cjs"),W=require("./components/Upload/UploadImage.cjs"),Y=require("./components/Textarea/Textarea.cjs"),Z=require("./components/Chart/DoughnutChart.cjs"),$=require("./components/DatePicker/MonthYearPicker.cjs"),X=require("./components/RadioCheckbox/CheckboxTable.cjs"),ee=require("./components/Input/InputNative.cjs"),re=require("./components/Upload/UploadMultipleFile.cjs"),te=require("./components/ErrorMessage/ErrorMessage.cjs"),ae=require("./components/Textarea/TextareaFloatingInner.cjs"),oe=require("./components/Step/Step.cjs"),ne=require("./components/Chart/LineChart.cjs"),ue=require("./components/Tooltip/Tooltip.cjs"),ie=require("./components/ButtonPopover/ButtonPopover.cjs"),se=require("./components/Chart/GradientLineChart.cjs"),le=require("./components/Chart/GradientBarChart.cjs"),ce=require("./components/Chart/PieChart.cjs"),fe=require("./components/Step/StepIndicator.cjs"),de=require("./components/TextEditor/TextEditor.cjs"),me=require("./components/Collapse/CollapseV2.cjs"),be=require("./components/Table/TableSubMobile.cjs"),ge=require("./components/TimeRange/TimeRange.cjs"),pe=require("./components/Textarea/TextareaInnerLabel.cjs"),qe=require("./components/Input/InputInnerLabel.cjs"),Te=require("./components/Text/Text.cjs"),Ce=require("./hooks/useElementOrWindowMediaQuery.cjs"),ye=require("./hooks/useCountdown.cjs"),Be=require("./hooks/useAsyncDebounce.cjs"),he=require("./hooks/useCombinedResizeObserver.cjs"),Ne=require("./hooks/useStateRef.cjs"),De=require("./hooks/useMasonry.cjs"),Oe=require("./hooks/useOtpInput.cjs"),Se=require("bignumber.js"),i=require("./config/tailwind/typography.cjs"),Ie=require("@tanstack/react-table"),Pe=require("react-select"),xe=require("react-number-format"),Me=require("./components/Table/Table.config.cjs"),Re=require("react-toastify"),f=require("./hooks/useDeepCompareEffect.cjs"),ve=require("./hooks/useMergeRefs.cjs"),Ae=require("./hooks/useEventListener.cjs");function Fe(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(o,a,s.get?s:{enumerable:!0,get:()=>r[a]})}}return o.default=r,Object.freeze(o)}const Le=Fe(Ie);exports.deepCompareEquals=e.deepCompareEquals;exports.deepMerge=e.deepMerge;exports.deleteKeysImmutable=e.deleteKeysImmutable;exports.deleteKeysMutable=e.deleteKeysMutable;exports.encryptRSAOAEP=e.encryptRSAOAEP;exports.extractElementStringToOriginalValue=e.extractElementStringToOriginalValue;exports.formatDate=e.formatDate;exports.formatDateRange=e.formatDateRange;exports.formatNumber=e.formatNumber;exports.groupByKey=e.groupByKey;exports.isAccurateBigNumber=e.isAccurateBigNumber;exports.isAccurateNumber=e.isAccurateNumber;exports.isObject=e.isObject;exports.parseBigDecimal=e.parseBigDecimal;exports.parseDecimal=e.parseDecimal;exports.parseFileName=e.parseFileName;exports.removeKeyObjectEmptyValue=e.removeKeyObjectEmptyValue;exports.setDigit=e.setDigit;exports.transformArrayMapping=e.transformArrayMapping;exports.transformArrayMappingObjectFC=e.transformArrayMappingObjectFC;exports.transformArrayOfObjectToArray=e.transformArrayOfObjectToArray;exports.transformArrayOfObjectToString=e.transformArrayOfObjectToString;exports.transformBigNumber=e.transformBigNumber;exports.transformBigNumberOpt=e.transformBigNumberOpt;exports.transformDataHistory=e.transformDataHistory;exports.transformLatLong=e.transformLatLong;exports.transformNumber=e.transformNumber;exports.transformSecondTime=e.transformSecondTime;exports.transfromIsNan=e.transfromIsNan;exports.formatBigNumber=l.formatBigNumber;exports.removeTrailingZeros=l.removeTrailingZeros;exports.cookieStorage=d.default;exports.openAlert=m.openAlert;exports.betweenBig=t.betweenBig;exports.lessThanBig=t.lessThanBig;exports.maxBig=t.maxBig;exports.minBig=t.minBig;exports.moreThanBig=t.moreThanBig;exports.BigNumber=c.BigNumber;exports.defaultConfig=c.defaultConfig;exports.convertBigNumbersToStrings=n.convertBigNumbersToStrings;exports.convertNumbersToBigNumbers=n.convertNumbersToBigNumbers;exports.convertTextToJsonBigNumbers=n.convertTextToJsonBigNumbers;exports.ConfigColors=b.default;exports.configScreens=g.default;exports.configNativeScreens=p.default;exports.TPublish=q.default;exports.Button=T.default;exports.Popover=C.default;exports.Calendar=y.default;exports.CalendarRange=B.default;exports.DatePicker=h.default;exports.DateRangePicker=N.default;exports.FilterDate=D.default;exports.InputFloatingInner=O.default;exports.InputReguler=S.default;exports.Pagination=I.default;exports.Tabs=P.default;exports.TabPanel=x.default;exports.Table=M.default;exports.TableVirtualization=R.default;exports.ListVirtualization=v.default;exports.SelectDropdownContainer=A.default;exports.Switch=F.default;exports.ButtonIcon=L.default;exports.Badges=E.default;exports.Chips=j.default;exports.DefaultCheckedChecboxIcon=u.DefaultCheckedChecboxIcon;exports.DefaultRadioChecboxIcon=u.DefaultRadioChecboxIcon;exports.RadioCheckbox=u.default;exports.RadioCheckboxLabel=k.default;exports.Breadcrumbs=w.default;exports.Sidebar=V.default;exports.Collapse=z.default;exports.ModalDialog=K.default;exports.Timeline=U.default;exports.FilterContainer=G.default;exports.NumberFormat=_.default;exports.PortalComponent=H.default;exports.UploadFile=J.default;exports.TruncateComponent=Q.default;exports.UploadImage=W.default;exports.Textarea=Y.default;exports.DoughnutChart=Z.default;exports.MonthYearPicker=$.default;exports.CheckboxTable=X.default;exports.InputNative=ee.default;exports.UploadMultipleFile=re.default;exports.ErrorMessage=te.default;exports.TextareaFloatingInner=ae.default;exports.Step=oe.default;exports.LineChart=ne.default;exports.Tooltip=ue.default;exports.ButtonPopover=ie.default;exports.GradientLineChart=se.default;exports.GradientBarChart=le.default;exports.PieChart=ce.default;exports.StepIndicator=fe.default;exports.TextEditor=de.default;exports.CollapseV2=me.default;exports.TableSubComponent=be.default;exports.TimeRange=ge.default;exports.TextareaInnerLabel=pe.default;exports.InputInnerLabel=qe.default;exports.Text=Te.default;exports.useElementOrWindowMediaQuery=Ce.default;exports.useCountdown=ye.default;exports.useAsyncDebounce=Be.default;exports.useCombinedResizeObserver=he.default;exports.useStateRef=Ne.default;exports.useMasonry=De.default;exports.useOtpInput=Oe.useOtpInput;exports.TypeBigNumber=Se;exports.configTypography=i.default;exports.configTypographyLabaBisnis=i.configTypographyLabaBisnis;exports.configTypographyPayhere=i.configTypographyPayhere;exports.utilTable=Le;Object.defineProperty(exports,"SelectDropdownContainerComponents",{enumerable:!0,get:()=>Pe.components});Object.defineProperty(exports,"PatternFormat",{enumerable:!0,get:()=>xe.PatternFormat});exports.ConfigTable=Me.ConfigTable;Object.defineProperty(exports,"AlertContainer",{enumerable:!0,get:()=>Re.ToastContainer});exports.useDeepCompareEffect=f.useDeepCompareEffect;exports.useDeepCompareMemoize=f.useDeepCompareMemoize;exports.useMergeRefs=ve.useMergeRefs;exports.useEventListener=Ae.useEventListener;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { deepCompareEquals as t, deepMerge as a, deleteKeysImmutable as f, deleteKeysMutable as m, encryptRSAOAEP as s, extractElementStringToOriginalValue as p, formatDate as l, formatDateRange as u, formatNumber as n, groupByKey as i, isAccurateBigNumber as d, isAccurateNumber as x, isObject as g, parseBigDecimal as c, parseDecimal as b, parseFileName as T, removeKeyObjectEmptyValue as C, setDigit as y, transformArrayMapping as B, transformArrayMappingObjectFC as h, transformArrayOfObjectToArray as D, transformArrayOfObjectToString as N, transformBigNumber as I, transformBigNumberOpt as S, transformDataHistory as O, transformLatLong as A, transformNumber as M, transformSecondTime as P, transfromIsNan as R } from "./utils/common.mjs";
+import { deepCompareEquals as t, deepMerge as a, deleteKeysImmutable as f, deleteKeysMutable as m, encryptRSAOAEP as s, extractElementStringToOriginalValue as p, formatDate as l, formatDateRange as u, formatNumber as n, groupByKey as i, isAccurateBigNumber as d, isAccurateNumber as x, isObject as g, parseBigDecimal as c, parseDecimal as b, parseFileName as C, removeKeyObjectEmptyValue as T, setDigit as y, transformArrayMapping as B, transformArrayMappingObjectFC as h, transformArrayOfObjectToArray as D, transformArrayOfObjectToString as N, transformBigNumber as I, transformBigNumberOpt as S, transformDataHistory as O, transformLatLong as P, transformNumber as A, transformSecondTime as M, transfromIsNan as R } from "./utils/common.mjs";
 import { formatBigNumber as F, removeTrailingZeros as L } from "./utils/formatBigNumber.mjs";
 import { default as k } from "./utils/cookies.mjs";
 import { openAlert as j } from "./components/Alert/index.mjs";
@@ -15,12 +15,12 @@ import { default as ne } from "./components/Calendar/Calendar.mjs";
 import { default as de } from "./components/Calendar/CalendarRange.mjs";
 import { default as ge } from "./components/DatePicker/DatePicker.mjs";
 import { default as be } from "./components/DatePicker/DateRangePicker.mjs";
-import { default as Ce } from "./components/DatePicker/FilterDate.mjs";
+import { default as Te } from "./components/DatePicker/FilterDate.mjs";
 import { default as Be } from "./components/Input/InputFloatingInner.mjs";
 import { default as De } from "./components/Input/InputReguler.mjs";
 import { default as Ie } from "./components/Pagination/Pagination.mjs";
 import { default as Oe } from "./components/Tabs/Tabs.mjs";
-import { default as Me } from "./components/Tabs/TabPanel.mjs";
+import { default as Ae } from "./components/Tabs/TabPanel.mjs";
 import { default as Re } from "./components/Table/Table.mjs";
 import { default as Fe } from "./components/Virtualization/TableVirtualization.mjs";
 import { default as Ee } from "./components/Virtualization/ListVirtualization.mjs";
@@ -41,12 +41,12 @@ import { default as nr } from "./components/NumberFormat/NumberFormat.mjs";
 import { default as dr } from "./components/PortalComponent/PortalComponent.mjs";
 import { default as gr } from "./components/Upload/UploadFile.mjs";
 import { default as br } from "./components/TruncateComponent/TruncateComponent.mjs";
-import { default as Cr } from "./components/Upload/UploadImage.mjs";
+import { default as Tr } from "./components/Upload/UploadImage.mjs";
 import { default as Br } from "./components/Textarea/Textarea.mjs";
 import { default as Dr } from "./components/Chart/DoughnutChart.mjs";
 import { default as Ir } from "./components/DatePicker/MonthYearPicker.mjs";
 import { default as Or } from "./components/RadioCheckbox/CheckboxTable.mjs";
-import { default as Mr } from "./components/Input/InputNative.mjs";
+import { default as Ar } from "./components/Input/InputNative.mjs";
 import { default as Rr } from "./components/Upload/UploadMultipleFile.mjs";
 import { default as Fr } from "./components/ErrorMessage/ErrorMessage.mjs";
 import { default as Er } from "./components/Textarea/TextareaFloatingInner.mjs";
@@ -56,33 +56,34 @@ import { default as Kr } from "./components/Tooltip/Tooltip.mjs";
 import { default as Gr } from "./components/ButtonPopover/ButtonPopover.mjs";
 import { default as Hr } from "./components/Chart/GradientLineChart.mjs";
 import { default as Qr } from "./components/Chart/GradientBarChart.mjs";
-import { default as Yr } from "./components/Step/StepIndicator.mjs";
-import { default as Xr } from "./components/TextEditor/TextEditor.mjs";
-import { default as $r } from "./components/Collapse/CollapseV2.mjs";
-import { default as ro } from "./components/Table/TableSubMobile.mjs";
-import { default as to } from "./components/TimeRange/TimeRange.mjs";
-import { default as fo } from "./components/Textarea/TextareaInnerLabel.mjs";
-import { default as so } from "./components/Input/InputInnerLabel.mjs";
-import { default as lo } from "./components/Text/Text.mjs";
-import { default as no } from "./hooks/useElementOrWindowMediaQuery.mjs";
-import { default as xo } from "./hooks/useCountdown.mjs";
-import { default as co } from "./hooks/useAsyncDebounce.mjs";
-import { default as To } from "./hooks/useCombinedResizeObserver.mjs";
-import { default as yo } from "./hooks/useStateRef.mjs";
-import { default as ho } from "./hooks/useMasonry.mjs";
-import { useOtpInput as No } from "./hooks/useOtpInput.mjs";
-import { default as So } from "bignumber.js";
-import { default as Ao, configTypographyLabaBisnis as Mo, configTypographyPayhere as Po } from "./config/tailwind/typography.mjs";
+import { default as Yr } from "./components/Chart/PieChart.mjs";
+import { default as Xr } from "./components/Step/StepIndicator.mjs";
+import { default as $r } from "./components/TextEditor/TextEditor.mjs";
+import { default as ro } from "./components/Collapse/CollapseV2.mjs";
+import { default as to } from "./components/Table/TableSubMobile.mjs";
+import { default as fo } from "./components/TimeRange/TimeRange.mjs";
+import { default as so } from "./components/Textarea/TextareaInnerLabel.mjs";
+import { default as lo } from "./components/Input/InputInnerLabel.mjs";
+import { default as no } from "./components/Text/Text.mjs";
+import { default as xo } from "./hooks/useElementOrWindowMediaQuery.mjs";
+import { default as co } from "./hooks/useCountdown.mjs";
+import { default as Co } from "./hooks/useAsyncDebounce.mjs";
+import { default as yo } from "./hooks/useCombinedResizeObserver.mjs";
+import { default as ho } from "./hooks/useStateRef.mjs";
+import { default as No } from "./hooks/useMasonry.mjs";
+import { useOtpInput as So } from "./hooks/useOtpInput.mjs";
+import { default as Po } from "bignumber.js";
+import { default as Mo, configTypographyLabaBisnis as Ro, configTypographyPayhere as vo } from "./config/tailwind/typography.mjs";
 import * as e from "@tanstack/react-table";
-import { components as vo } from "react-select";
-import { PatternFormat as Lo } from "react-number-format";
-import { ConfigTable as ko } from "./components/Table/Table.config.mjs";
-import { ToastContainer as jo } from "react-toastify";
-import { useDeepCompareEffect as zo, useDeepCompareMemoize as Ko } from "./hooks/useDeepCompareEffect.mjs";
-import { useMergeRefs as Go } from "./hooks/useMergeRefs.mjs";
-import { useEventListener as Ho } from "./hooks/useEventListener.mjs";
+import { components as Lo } from "react-select";
+import { PatternFormat as ko } from "react-number-format";
+import { ConfigTable as jo } from "./components/Table/Table.config.mjs";
+import { ToastContainer as zo } from "react-toastify";
+import { useDeepCompareEffect as Uo, useDeepCompareMemoize as Go } from "./hooks/useDeepCompareEffect.mjs";
+import { useMergeRefs as Ho } from "./hooks/useMergeRefs.mjs";
+import { useEventListener as Qo } from "./hooks/useEventListener.mjs";
 export {
-  jo as AlertContainer,
+  zo as AlertContainer,
   Ge as Badges,
   J as BigNumber,
   $e as Breadcrumbs,
@@ -94,9 +95,9 @@ export {
   Or as CheckboxTable,
   He as Chips,
   tr as Collapse,
-  $r as CollapseV2,
+  ro as CollapseV2,
   $ as ConfigColors,
-  ko as ConfigTable,
+  jo as ConfigTable,
   ge as DatePicker,
   be as DateRangePicker,
   Qe as DefaultCheckedChecboxIcon,
@@ -104,12 +105,12 @@ export {
   Dr as DoughnutChart,
   Fr as ErrorMessage,
   lr as FilterContainer,
-  Ce as FilterDate,
+  Te as FilterDate,
   Qr as GradientBarChart,
   Hr as GradientLineChart,
   Be as InputFloatingInner,
-  so as InputInnerLabel,
-  Mr as InputNative,
+  lo as InputInnerLabel,
+  Ar as InputNative,
   De as InputReguler,
   Vr as LineChart,
   Ee as ListVirtualization,
@@ -117,42 +118,43 @@ export {
   Ir as MonthYearPicker,
   nr as NumberFormat,
   Ie as Pagination,
-  Lo as PatternFormat,
+  ko as PatternFormat,
+  Yr as PieChart,
   le as Popover,
   dr as PortalComponent,
   Ye as RadioCheckbox,
   Xe as RadioCheckboxLabel,
   we as SelectDropdownContainer,
-  vo as SelectDropdownContainerComponents,
+  Lo as SelectDropdownContainerComponents,
   rr as Sidebar,
   wr as Step,
-  Yr as StepIndicator,
+  Xr as StepIndicator,
   Ve as Switch,
   fe as TPublish,
-  Me as TabPanel,
+  Ae as TabPanel,
   Re as Table,
-  ro as TableSubComponent,
+  to as TableSubComponent,
   Fe as TableVirtualization,
   Oe as Tabs,
-  lo as Text,
-  Xr as TextEditor,
+  no as Text,
+  $r as TextEditor,
   Br as Textarea,
   Er as TextareaFloatingInner,
-  fo as TextareaInnerLabel,
-  to as TimeRange,
+  so as TextareaInnerLabel,
+  fo as TimeRange,
   sr as Timeline,
   Kr as Tooltip,
   br as TruncateComponent,
-  So as TypeBigNumber,
+  Po as TypeBigNumber,
   gr as UploadFile,
-  Cr as UploadImage,
+  Tr as UploadImage,
   Rr as UploadMultipleFile,
   z as betweenBig,
   te as configNativeScreens,
   re as configScreens,
-  Ao as configTypography,
-  Mo as configTypographyLabaBisnis,
-  Po as configTypographyPayhere,
+  Mo as configTypography,
+  Ro as configTypographyLabaBisnis,
+  vo as configTypographyPayhere,
   Y as convertBigNumbersToStrings,
   Z as convertNumbersToBigNumbers,
   X as convertTextToJsonBigNumbers,
@@ -179,8 +181,8 @@ export {
   j as openAlert,
   c as parseBigDecimal,
   b as parseDecimal,
-  T as parseFileName,
-  C as removeKeyObjectEmptyValue,
+  C as parseFileName,
+  T as removeKeyObjectEmptyValue,
   L as removeTrailingZeros,
   y as setDigit,
   B as transformArrayMapping,
@@ -190,20 +192,20 @@ export {
   I as transformBigNumber,
   S as transformBigNumberOpt,
   O as transformDataHistory,
-  A as transformLatLong,
-  M as transformNumber,
-  P as transformSecondTime,
+  P as transformLatLong,
+  A as transformNumber,
+  M as transformSecondTime,
   R as transfromIsNan,
-  co as useAsyncDebounce,
-  To as useCombinedResizeObserver,
-  xo as useCountdown,
-  zo as useDeepCompareEffect,
-  Ko as useDeepCompareMemoize,
-  no as useElementOrWindowMediaQuery,
-  Ho as useEventListener,
-  ho as useMasonry,
-  Go as useMergeRefs,
-  No as useOtpInput,
-  yo as useStateRef,
+  Co as useAsyncDebounce,
+  yo as useCombinedResizeObserver,
+  co as useCountdown,
+  Uo as useDeepCompareEffect,
+  Go as useDeepCompareMemoize,
+  xo as useElementOrWindowMediaQuery,
+  Qo as useEventListener,
+  No as useMasonry,
+  Ho as useMergeRefs,
+  So as useOtpInput,
+  ho as useStateRef,
   e as utilTable
 };

package/dist/package.json.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="2.0.17",o={version:e};exports.default=o;exports.version=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="2.0.19",o={version:e};exports.default=o;exports.version=e;

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "1mpacto-react-ui",
   "private": false,
-  "version": "2.0.17",
+  "version": "2.0.19",
   "type": "module",
   "engines": {
     "node": ">=20.19.4",

package/dist/package.json.mjs

@@ -1,4 +1,4 @@
-const o = "2.0.17", s = {
+const o = "2.0.19", s = {
   version: o
 };
 export {

package/dist/src/components/Chart/PieChart.d.ts

@@ -0,0 +1,3 @@
+import { IPieChart } from '../../interfaces/components/Chart';
+declare const PieChart: ({ data, height, classNameContainer, id, options, CustomTooltip, threshold, valueFormat, hideLabelBelowPercentage, }: IPieChart) => import("react/jsx-runtime").JSX.Element;
+export default PieChart;

package/dist/src/components/Chart/PieChart.stories.d.ts

@@ -0,0 +1,134 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ data, height, classNameContainer, id, options, CustomTooltip, threshold, valueFormat, hideLabelBelowPercentage, }: import('..').IPieChart) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    tags: string[];
+    argTypes: {
+        id: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        data: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        height: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        classNameContainer: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        options: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        threshold: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        valueFormat: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        hideLabelBelowPercentage: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        CustomTooltip: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {};
+    render: (args: import('..').IPieChart) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/components/index.d.ts

@@ -58,7 +58,7 @@ import { ITableVirtualization } from '../interfaces/components/Virtualization/Ta
 import { default as DoughnutChart } from './Chart/DoughnutChart';
 import { default as MonthYearPicker } from './DatePicker/MonthYearPicker';
 import { default as CheckboxTable } from './RadioCheckbox/CheckboxTable';
-import { IDataInnerLabelDoughnutChart, IDataDoughnutChart, IDataLineChart, TGradientLineChartCustomTooltip, IGradientLineChart, IGradientLineChartDataSet, IGradientLineChartData, TGradientBarChartCustomTooltip, IGradientBarChart, IGradientBarChartDataSet, IGradientBarChartData, IDataGradientBarChartCustomTooltip, IDataGradientLineChartCustomTooltip } from '../interfaces/components/Chart';
+import { IDataInnerLabelDoughnutChart, IDataDoughnutChart, IDataLineChart, TGradientLineChartCustomTooltip, IGradientLineChart, IGradientLineChartDataSet, IGradientLineChartData, TGradientBarChartCustomTooltip, IGradientBarChart, IGradientBarChartDataSet, IGradientBarChartData, IDataGradientBarChartCustomTooltip, IDataGradientLineChartCustomTooltip, IPieChart, IPieChartDataSet, IPieChartData, TPieChartCustomTooltip, IDataPieChartCustomTooltip, IPieChartThreshold } from '../interfaces/components/Chart';
 import { default as InputNative } from './Input/InputNative';
 import { default as UploadMultipleFile } from './Upload/UploadMultipleFile';
 import { IUploadMultipleFileValue } from '../interfaces/components/UploadFile';
@@ -72,6 +72,7 @@ import { default as ButtonPopover } from './ButtonPopover/ButtonPopover';
 import { IRefButtonPopover } from '../interfaces/components/ButtonPopover';
 import { default as GradientLineChart } from './Chart/GradientLineChart';
 import { default as GradientBarChart } from './Chart/GradientBarChart';
+import { default as PieChart } from './Chart/PieChart';
 import { default as StepIndicator } from './Step/StepIndicator';
 import { default as TextEditor } from './TextEditor/TextEditor';
 import { ITextEditorProps } from '../interfaces/components/TextEditor';
@@ -84,5 +85,5 @@ import { default as Text } from './Text/Text';
 import * as utilTable from '@tanstack/react-table';
 import type * as SelectDropdownContainerType from 'react-select';
 import type * as FilterContainerType from '../interfaces/components/FilterContainer';
-export { TPublish, Button, Popover, Calendar, CalendarRange, DatePicker, DateRangePicker, FilterDate, InputFloatingInner, InputReguler, Pagination, Tabs, TabPanel, Table, TableVirtualization, ListVirtualization, SelectDropdownContainer, utilTable, Switch, ButtonIcon, Badges, Chips, RadioCheckbox, RadioCheckboxLabel, Breadcrumbs, Sidebar, Collapse, ModalDialog, SelectDropdownContainerComponents, Timeline, FilterContainer, NumberFormat, PatternFormat, DefaultCheckedChecboxIcon, DefaultRadioChecboxIcon, ConfigTable, PortalComponent, AlertContainer, UploadFile, TruncateComponent, UploadImage, Textarea, DoughnutChart, MonthYearPicker, CheckboxTable, InputNative, UploadMultipleFile, ErrorMessage, TextareaFloatingInner, Step, LineChart, Tooltip, ButtonPopover, GradientLineChart, GradientBarChart, StepIndicator, TextEditor, CollapseV2, TableSubComponent, TimeRange, TextareaInnerLabel, InputInnerLabel, Text, };
-export type { ITableColumnDef, IRefPopover, IRefTableVirtualization, IRefListVirtualization, IRefSelectDropdownContainer, IChildrenSelectDropdownContainer, ISidebarModule, SelectDropdownContainerType, FilterContainerType, IInputReguler, IInputFloatingInner, ITableConfig, TButtonVariants, TButtonSize, ITabsList, TTypeEventTabs, ITextarea, IListVirtualization, ITableVirtualization, IRefSidebar, IChildrenIconCompany, ICloneElementSidebar, IDataDoughnutChart, IDataInnerLabelDoughnutChart, ISelectDropdownContainer, IDatePicker, IPopover, IInputNative, IUploadMultipleFileValue, IDataStepList, IDataLineChart, IChips, IRefButtonPopover, TGradientLineChartCustomTooltip, IGradientLineChart, IGradientLineChartDataSet, IGradientLineChartData, TGradientBarChartCustomTooltip, IGradientBarChart, IGradientBarChartDataSet, IGradientBarChartData, IFilterDateButtonList, TKeyFilterDateButtonListType, IDataGradientBarChartCustomTooltip, IDataGradientLineChartCustomTooltip, ITextEditorProps, ICollapse, ITableColumnBreakpoint, TTableRenderSubComponent, TTableHandlerRowClick, TKeyLocale, ITimeRangeListTime, ITimeRange, TTimeRangeValue, IButton, TButtonIconVariants, TButtonIconSize, IButtonIcon, ISidebar, };
+export { TPublish, Button, Popover, Calendar, CalendarRange, DatePicker, DateRangePicker, FilterDate, InputFloatingInner, InputReguler, Pagination, Tabs, TabPanel, Table, TableVirtualization, ListVirtualization, SelectDropdownContainer, utilTable, Switch, ButtonIcon, Badges, Chips, RadioCheckbox, RadioCheckboxLabel, Breadcrumbs, Sidebar, Collapse, ModalDialog, SelectDropdownContainerComponents, Timeline, FilterContainer, NumberFormat, PatternFormat, DefaultCheckedChecboxIcon, DefaultRadioChecboxIcon, ConfigTable, PortalComponent, AlertContainer, UploadFile, TruncateComponent, UploadImage, Textarea, DoughnutChart, MonthYearPicker, CheckboxTable, InputNative, UploadMultipleFile, ErrorMessage, TextareaFloatingInner, Step, LineChart, Tooltip, ButtonPopover, GradientLineChart, GradientBarChart, PieChart, StepIndicator, TextEditor, CollapseV2, TableSubComponent, TimeRange, TextareaInnerLabel, InputInnerLabel, Text, };
+export type { ITableColumnDef, IRefPopover, IRefTableVirtualization, IRefListVirtualization, IRefSelectDropdownContainer, IChildrenSelectDropdownContainer, ISidebarModule, SelectDropdownContainerType, FilterContainerType, IInputReguler, IInputFloatingInner, ITableConfig, TButtonVariants, TButtonSize, ITabsList, TTypeEventTabs, ITextarea, IListVirtualization, ITableVirtualization, IRefSidebar, IChildrenIconCompany, ICloneElementSidebar, IDataDoughnutChart, IDataInnerLabelDoughnutChart, ISelectDropdownContainer, IDatePicker, IPopover, IInputNative, IUploadMultipleFileValue, IDataStepList, IDataLineChart, IChips, IRefButtonPopover, TGradientLineChartCustomTooltip, IGradientLineChart, IGradientLineChartDataSet, IGradientLineChartData, TGradientBarChartCustomTooltip, IGradientBarChart, IGradientBarChartDataSet, IGradientBarChartData, IFilterDateButtonList, TKeyFilterDateButtonListType, IDataGradientBarChartCustomTooltip, IDataGradientLineChartCustomTooltip, IPieChart, IPieChartDataSet, IPieChartData, TPieChartCustomTooltip, IDataPieChartCustomTooltip, IPieChartThreshold, ITextEditorProps, ICollapse, ITableColumnBreakpoint, TTableRenderSubComponent, TTableHandlerRowClick, TKeyLocale, ITimeRangeListTime, ITimeRange, TTimeRangeValue, IButton, TButtonIconVariants, TButtonIconSize, IButtonIcon, ISidebar, };

package/dist/src/interfaces/components/Chart/index.d.ts

@@ -206,7 +206,15 @@ export interface ILineChart {
      */
     height?: number;
 }
+/**
+ * [ID] : Tipe skala untuk grafik garis gradien.
+ * [EN] : Scale type for gradient line chart.
+ */
 type TGradientLineChartScales = Record<string, Scale<CoreScaleOptions>>;
+/**
+ * [ID] : Target gradien — latar belakang atau border.
+ * [EN] : Gradient target — background or border.
+ */
 type TGradientLineChartGradientFor = 'background' | 'border';
 /**
  * [ID] : Parameter untuk mengatur gradien grafik garis.
@@ -280,10 +288,15 @@ export interface TGetGradientLineParams {
  * [EN] : Custom tooltip component type for gradient line chart.
  */
 export type TGradientLineChartCustomTooltip = React.ComponentType<{
+    /** [ID] : Label tooltip. [EN] : Tooltip label. */
     label: string;
+    /** [ID] : Nama dataset. [EN] : Dataset name. */
     dataset: string;
+    /** [ID] : Nilai tooltip. [EN] : Tooltip value. */
     value: number;
+    /** [ID] : Gaya CSS tooltip. [EN] : Tooltip CSS style. */
     style: React.CSSProperties;
+    /** [ID] : Titik data tooltip. [EN] : Tooltip data points. */
     dataPoints: TooltipItem<'line'>[];
 }>;
 /**
@@ -400,7 +413,15 @@ export interface IDataGradientLineChartCustomTooltip {
      */
     dataPoints: TooltipItem<'line'>[];
 }
+/**
+ * [ID] : Tipe skala untuk grafik batang gradien.
+ * [EN] : Scale type for gradient bar chart.
+ */
 type TGradientBarChartScales = Record<string, Scale<CoreScaleOptions>>;
+/**
+ * [ID] : Target gradien — latar belakang atau border.
+ * [EN] : Gradient target — background or border.
+ */
 type TGradientBarChartGradientFor = 'background' | 'border';
 /**
  * [ID] : Parameter untuk mengatur gradien grafik batang.
@@ -474,10 +495,15 @@ export interface TGetGradientBarParams {
  * [EN] : Custom tooltip component type for gradient bar chart.
  */
 export type TGradientBarChartCustomTooltip = React.ComponentType<{
+    /** [ID] : Label tooltip. [EN] : Tooltip label. */
     label: string;
+    /** [ID] : Nama dataset. [EN] : Dataset name. */
     dataset: string;
+    /** [ID] : Nilai tooltip. [EN] : Tooltip value. */
     value: number;
+    /** [ID] : Gaya CSS tooltip. [EN] : Tooltip CSS style. */
     style: React.CSSProperties;
+    /** [ID] : Titik data tooltip. [EN] : Tooltip data points. */
     dataPoints: TooltipItem<'bar'>[];
 }>;
 /**
@@ -609,4 +635,198 @@ export interface IDataGradientBarChartCustomTooltip {
      */
     dataPoints: TooltipItem<'bar'>[];
 }
+/**
+ * [ID] : Item data individual untuk grafik pie.
+ * [EN] : Individual data item for pie chart.
+ */
+export interface IPieChartDataItem {
+    /**
+     * [ID] : Label data.
+     * [EN] : Data label.
+     */
+    label: string;
+    /**
+     * [ID] : Nilai data.
+     * [EN] : Data value.
+     */
+    value: number;
+    /**
+     * [ID] : Warna latar belakang (opsional, jika tidak disediakan akan digenerate random).
+     * [EN] : Background color (optional, if not provided will be randomly generated).
+     */
+    backgroundColor?: string;
+    /**
+     * [ID] : Properti dinamis lainnya.
+     * [EN] : Other dynamic properties.
+     */
+    [key: string]: unknown;
+}
+/**
+ * [ID] : Konfigurasi threshold untuk pengelompokan data kecil ke slice "Other".
+ * [EN] : Threshold configuration for grouping small data into "Other" slice.
+ */
+export interface IPieChartThreshold {
+    /**
+     * [ID] : Mode threshold — 'percentage' untuk persentase dari total, 'value' untuk nilai absolut.
+     * [EN] : Threshold mode — 'percentage' for percentage of total, 'value' for absolute value.
+     */
+    mode: 'percentage' | 'value';
+    /**
+     * [ID] : Nilai threshold. Data di bawah nilai ini akan digabung ke "Other".
+     * [EN] : Threshold value. Data below this value will be grouped into "Other".
+     */
+    value: number;
+    /**
+     * [ID] : Label untuk slice "Other" (default: "Other").
+     * [EN] : Label for "Other" slice (default: "Other").
+     */
+    otherLabel?: string;
+    /**
+     * [ID] : Warna latar belakang untuk slice "Other" (opsional).
+     * [EN] : Background color for "Other" slice (optional).
+     */
+    otherBackgroundColor?: string;
+}
+/**
+ * [ID] : Interface untuk dataset grafik pie, menextend ChartDataset<'pie'>.
+ * [EN] : Interface for pie chart dataset, extends ChartDataset<'pie'>.
+ */
+export interface IPieChartDataSet extends ChartDataset<'pie'> {
+    /**
+     * [ID] : background untuk slice pie chart
+     * [EN] : background for slice pie chart
+     */
+    backgroundColor: string[];
+}
+/**
+ * [ID] : Interface untuk data grafik pie menggunakan format ChartData standar.
+ * [EN] : Interface for pie chart data using standard ChartData format.
+ */
+export interface IPieChartData extends Omit<ChartData<'pie'>, 'datasets'> {
+    /**
+     * [ID] : Kumpulan dataset.
+     * [EN] : Collection of datasets.
+     */
+    datasets: IPieChartDataSet[];
+}
+/**
+ * [ID] : Tipe komponen tooltip kustom untuk grafik pie.
+ * [EN] : Custom tooltip component type for pie chart.
+ */
+export type TPieChartCustomTooltip = React.ComponentType<{
+    /** [ID] : Label tooltip. [EN] : Tooltip label. */
+    label: string;
+    /** [ID] : Nilai mentah tooltip. [EN] : Raw tooltip value. */
+    value: number;
+    /** [ID] : Persentase tooltip. [EN] : Tooltip percentage. */
+    percentage: number;
+    /** [ID] : Nilai yang sudah diformat. [EN] : Formatted value. */
+    formattedValue: string;
+    /** [ID] : Warna latar belakang slice. [EN] : Slice background color. */
+    backgroundColor: string;
+    /** [ID] : Item yang digabung ke slice ini (hanya pada "Other"). */
+    /** [EN] : Items merged into this slice (only on "Other"). */
+    mergedItems: IPieChartDataItem[];
+    /** [ID] : Gaya CSS tooltip. [EN] : Tooltip CSS style. */
+    style: React.CSSProperties;
+    /** [ID] : Titik data tooltip. [EN] : Tooltip data points. */
+    dataPoints: TooltipItem<'pie'>[];
+}>;
+/**
+ * [ID] : Interface untuk komponen grafik pie.
+ * [EN] : Interface for pie chart component.
+ */
+export interface IPieChart {
+    /**
+     * [ID] : Data grafik pie menggunakan format ChartData standar (labels + datasets).
+     * [EN] : Pie chart data using standard ChartData format (labels + datasets).
+     */
+    data: IPieChartData;
+    /**
+     * [ID] : ID grafik.
+     * [EN] : Chart ID.
+     */
+    id: string;
+    /**
+     * [ID] : Opsi grafik (opsional).
+     * [EN] : Chart options (optional).
+     */
+    options?: ChartOptions<'pie'>;
+    /**
+     * [ID] : Nama kelas CSS kontainer (opsional).
+     * [EN] : Container CSS class name (optional).
+     */
+    classNameContainer?: string;
+    /**
+     * [ID] : Tinggi grafik (opsional).
+     * [EN] : Chart height (optional).
+     */
+    height?: number;
+    /**
+     * [ID] : Tooltip kustom (opsional).
+     * [EN] : Custom tooltip (optional).
+     */
+    CustomTooltip?: TPieChartCustomTooltip;
+    /**
+     * [ID] : Konfigurasi threshold untuk pengelompokan data kecil (opsional).
+     * [EN] : Threshold configuration for grouping small data (optional).
+     */
+    threshold?: IPieChartThreshold;
+    /**
+     * [ID] : Format tampilan nilai — 'percentage', 'decimal', atau 'currency' (default: 'percentage').
+     * [EN] : Value display format — 'percentage', 'decimal', or 'currency' (default: 'percentage').
+     */
+    valueFormat?: 'percentage' | 'decimal' | 'currency';
+    /**
+     * [ID] : Persentase minimum untuk menampilkan label pada slice (default: 5). Slice di bawah nilai ini disembunyikan.
+     * [EN] : Minimum percentage to show label on slice (default: 5). Slices below this value are hidden.
+     */
+    hideLabelBelowPercentage?: number;
+}
+/**
+ * [ID] : Interface untuk data tooltip kustom grafik pie.
+ * [EN] : Interface for pie chart custom tooltip data.
+ */
+export interface IDataPieChartCustomTooltip {
+    /**
+     * [ID] : Gaya CSS.
+     * [EN] : CSS style.
+     */
+    style: React.CSSProperties;
+    /**
+     * [ID] : Label tooltip.
+     * [EN] : Tooltip label.
+     */
+    label: string;
+    /**
+     * [ID] : Nilai tooltip.
+     * [EN] : Tooltip value.
+     */
+    value: number;
+    /**
+     * [ID] : Persentase tooltip.
+     * [EN] : Tooltip percentage.
+     */
+    percentage: number;
+    /**
+     * [ID] : Nilai yang sudah diformat sesuai valueFormat.
+     * [EN] : Formatted value according to valueFormat.
+     */
+    formattedValue: string;
+    /**
+     * [ID] : Warna latar belakang tooltip.
+     * [EN] : Tooltip background color.
+     */
+    backgroundColor: string;
+    /**
+     * [ID] : Item-item yang digabung ke slice ini (hanya ada pada slice "Other" hasil threshold).
+     * [EN] : Items merged into this slice (only present on "Other" slice from threshold).
+     */
+    mergedItems: IPieChartDataItem[];
+    /**
+     * [ID] : Titik data tooltip.
+     * [EN] : Tooltip data points.
+     */
+    dataPoints: TooltipItem<'pie'>[];
+}
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "1mpacto-react-ui",
   "private": false,
-  "version": "2.0.17",
+  "version": "2.0.19",
   "type": "module",
   "engines": {
     "node": ">=20.19.4",