1mpacto-react-ui 2.0.18 → 2.0.20

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/hooks/useDebounce.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=(a,r,t,l)=>{t.current!==null&&(clearTimeout(t.current),t.current=null),l.current!==null&&(clearTimeout(l.current),l.current=null),r.current!==null&&(a.current(...r.current),r.current=null)},b=(a,r)=>{const t=(r==null?void 0:r.wait)??0,l=r==null?void 0:r.maxWait,u=n.useRef(null),e=n.useRef(null),i=n.useRef(a),c=n.useRef(null);i.current=a;const f=n.useCallback(()=>{u.current!==null&&(clearTimeout(u.current),u.current=null),e.current!==null&&(clearTimeout(e.current),e.current=null),c.current=null},[]),o=n.useCallback(()=>{s(i,c,u,e)},[]),m=n.useCallback(()=>u.current!==null,[]),T=n.useCallback((...d)=>{c.current=d,u.current!==null&&clearTimeout(u.current),u.current=setTimeout(()=>{u.current=null,e.current!==null&&(clearTimeout(e.current),e.current=null),c.current!==null&&(i.current(...c.current),c.current=null)},t),l!==void 0&&e.current===null&&(e.current=setTimeout(()=>{e.current=null,s(i,c,u,e)},l))},[t,l]);return n.useEffect(()=>()=>{u.current!==null&&clearTimeout(u.current),e.current!==null&&clearTimeout(e.current)},[]),{debouncedFn:T,cancel:f,flush:o,pending:m}};exports.default=b;

package/dist/hooks/useDebounce.mjs

@@ -0,0 +1,27 @@
+import n from "react";
+const i = (a, e, t, l) => {
+  t.current !== null && (clearTimeout(t.current), t.current = null), l.current !== null && (clearTimeout(l.current), l.current = null), e.current !== null && (a.current(...e.current), e.current = null);
+}, C = (a, e) => {
+  const t = (e == null ? void 0 : e.wait) ?? 0, l = e == null ? void 0 : e.maxWait, u = n.useRef(null), r = n.useRef(null), f = n.useRef(a), c = n.useRef(null);
+  f.current = a;
+  const s = n.useCallback(() => {
+    u.current !== null && (clearTimeout(u.current), u.current = null), r.current !== null && (clearTimeout(r.current), r.current = null), c.current = null;
+  }, []), m = n.useCallback(() => {
+    i(f, c, u, r);
+  }, []), T = n.useCallback(() => u.current !== null, []), o = n.useCallback(
+    (...b) => {
+      c.current = b, u.current !== null && clearTimeout(u.current), u.current = setTimeout(() => {
+        u.current = null, r.current !== null && (clearTimeout(r.current), r.current = null), c.current !== null && (f.current(...c.current), c.current = null);
+      }, t), l !== void 0 && r.current === null && (r.current = setTimeout(() => {
+        r.current = null, i(f, c, u, r);
+      }, l));
+    },
+    [t, l]
+  );
+  return n.useEffect(() => () => {
+    u.current !== null && clearTimeout(u.current), r.current !== null && clearTimeout(r.current);
+  }, []), { debouncedFn: o, cancel: s, flush: m, pending: T };
+};
+export {
+  C as default
+};

package/dist/hooks/usePacked.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),S=require("./useDebounce.cjs"),X=(e,R=[])=>{const a=d.useRef(null),[z,M]=d.useState(0),c=d.useCallback(()=>{if(!a.current||e.columns<1)return;const n=a.current,p=Array.from(n.children);n.style.position="relative",n.style.width="100%",e.animationEnabled?n.style.transition="height 0.4s ease":n.style.transition="";const y=n.clientWidth;let g="mobile",x=-1;for(const[m,t]of Object.entries(e.breakpoints??{}))y>=t&&t>x&&(x=t,g=m);const o=Math.max(0,(y-(e.columns-1)*e.gapX)/e.columns);if(o<=0)return;const h=Array(e.columns).fill(0),H=e.orientation==="top-bottom";p.forEach(m=>{const t=m,E=parseInt(t.dataset[`${g}Cols`]||t.dataset.cols||"1",10),r=Math.min(isNaN(E)?1:E,e.columns);t.style.position="absolute",t.style.boxSizing="border-box",e.animationEnabled?t.style.transition="all 0.4s ease":t.style.transition="",t.style.width=`${r*o+(r-1)*e.gapX}px`;let u;if(t.dataset.rows){const s=parseInt(t.dataset.rows,10),i=isNaN(s)?1:s;u=i*o+(i-1)*e.gapY}else t.style.height="auto",u=t.offsetHeight;let f=0,l=1/0;for(let s=0;s<=e.columns-r;s++){const i=Math.max(...h.slice(s,s+r));i<l&&(l=i,f=s)}t.style.height=`${u}px`,t.style.left=t.style.right=t.style.top=t.style.bottom="auto";const $=f*(o+e.gapX);e.direction==="rtl"?t.style.right=`${$}px`:t.style.left=`${$}px`,H?t.style.top=`${l}px`:t.style.bottom=`${l}px`;for(let s=f;s<f+r;s++)h[s]=l+u+e.gapY});const w=Math.max(...h),v=w>0?w-e.gapY:0;n.style.height=`${v}px`,M(v)},[e.columns,e.gapX,e.gapY,e.animationEnabled,e.breakpoints,e.orientation,e.direction]),{debouncedFn:b}=S.default(c,{wait:e.debounceResize??150});return d.useLayoutEffect(()=>{const n=new ResizeObserver(b);return a.current&&n.observe(a.current),window.addEventListener("resize",b),c(),()=>{a.current&&n.unobserve(a.current),window.removeEventListener("resize",b)}},[c,...R]),{containerRef:a,containerHeight:z,recalculate:c}};exports.default=X;

package/dist/hooks/usePacked.mjs

@@ -0,0 +1,56 @@
+import m from "react";
+import k from "./useDebounce.mjs";
+const N = (e, p = []) => {
+  const a = m.useRef(null), [R, z] = m.useState(0), c = m.useCallback(() => {
+    if (!a.current || e.columns < 1) return;
+    const s = a.current, H = Array.from(s.children);
+    s.style.position = "relative", s.style.width = "100%", e.animationEnabled ? s.style.transition = "height 0.4s ease" : s.style.transition = "";
+    const b = s.clientWidth;
+    let g = "mobile", x = -1;
+    for (const [y, t] of Object.entries(e.breakpoints ?? {}))
+      b >= t && t > x && (x = t, g = y);
+    const o = Math.max(0, (b - (e.columns - 1) * e.gapX) / e.columns);
+    if (o <= 0) return;
+    const h = Array(e.columns).fill(0), X = e.orientation === "top-bottom";
+    H.forEach((y) => {
+      const t = y, E = parseInt(t.dataset[`${g}Cols`] || t.dataset.cols || "1", 10), r = Math.min(isNaN(E) ? 1 : E, e.columns);
+      t.style.position = "absolute", t.style.boxSizing = "border-box", e.animationEnabled ? t.style.transition = "all 0.4s ease" : t.style.transition = "", t.style.width = `${r * o + (r - 1) * e.gapX}px`;
+      let u;
+      if (t.dataset.rows) {
+        const n = parseInt(t.dataset.rows, 10), i = isNaN(n) ? 1 : n;
+        u = i * o + (i - 1) * e.gapY;
+      } else
+        t.style.height = "auto", u = t.offsetHeight;
+      let f = 0, l = 1 / 0;
+      for (let n = 0; n <= e.columns - r; n++) {
+        const i = Math.max(...h.slice(n, n + r));
+        i < l && (l = i, f = n);
+      }
+      t.style.height = `${u}px`, t.style.left = t.style.right = t.style.top = t.style.bottom = "auto";
+      const $ = f * (o + e.gapX);
+      e.direction === "rtl" ? t.style.right = `${$}px` : t.style.left = `${$}px`, X ? t.style.top = `${l}px` : t.style.bottom = `${l}px`;
+      for (let n = f; n < f + r; n++) h[n] = l + u + e.gapY;
+    });
+    const w = Math.max(...h), v = w > 0 ? w - e.gapY : 0;
+    s.style.height = `${v}px`, z(v);
+  }, [
+    e.columns,
+    e.gapX,
+    e.gapY,
+    e.animationEnabled,
+    e.breakpoints,
+    e.orientation,
+    e.direction
+  ]), { debouncedFn: d } = k(c, {
+    wait: e.debounceResize ?? 150
+  });
+  return m.useLayoutEffect(() => {
+    const s = new ResizeObserver(d);
+    return a.current && s.observe(a.current), window.addEventListener("resize", d), c(), () => {
+      a.current && s.unobserve(a.current), window.removeEventListener("resize", d);
+    };
+  }, [c, ...p]), { containerRef: a, containerHeight: R, recalculate: c };
+};
+export {
+  N 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"),c=require("./utils/formatBigNumber.cjs"),d=require("./utils/cookies.cjs"),m=require("./components/Alert/index.cjs"),t=require("./utils/yup.cjs"),l=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"),D=require("./components/DatePicker/DateRangePicker.cjs"),N=require("./components/DatePicker/FilterDate.cjs"),O=require("./components/Input/InputFloatingInner.cjs"),P=require("./components/Input/InputReguler.cjs"),S=require("./components/Pagination/Pagination.cjs"),I=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"),k=require("./components/Chips/Chips.cjs"),u=require("./components/RadioCheckbox/RadioCheckbox.cjs"),j=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"),ce=require("./components/Chart/GradientBarChart.cjs"),le=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"),De=require("./hooks/useStateRef.cjs"),Ne=require("./hooks/useMasonry.cjs"),Oe=require("./hooks/useOtpInput.cjs"),Pe=require("./hooks/usePacked.cjs"),Se=require("./hooks/useDebounce.cjs"),Ie=require("bignumber.js"),i=require("./config/tailwind/typography.cjs"),xe=require("@tanstack/react-table"),Me=require("react-select"),Re=require("react-number-format"),ve=require("./components/Table/Table.config.cjs"),Ae=require("react-toastify"),f=require("./hooks/useDeepCompareEffect.cjs"),Fe=require("./hooks/useMergeRefs.cjs"),Le=require("./hooks/useEventListener.cjs");function Ee(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 ke=Ee(xe);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=c.formatBigNumber;exports.removeTrailingZeros=c.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=l.BigNumber;exports.defaultConfig=l.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=D.default;exports.FilterDate=N.default;exports.InputFloatingInner=O.default;exports.InputReguler=P.default;exports.Pagination=S.default;exports.Tabs=I.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=k.default;exports.DefaultCheckedChecboxIcon=u.DefaultCheckedChecboxIcon;exports.DefaultRadioChecboxIcon=u.DefaultRadioChecboxIcon;exports.RadioCheckbox=u.default;exports.RadioCheckboxLabel=j.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=ce.default;exports.PieChart=le.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=De.default;exports.useMasonry=Ne.default;exports.useOtpInput=Oe.useOtpInput;exports.usePacked=Pe.default;exports.useDebounce=Se.default;exports.TypeBigNumber=Ie;exports.configTypography=i.default;exports.configTypographyLabaBisnis=i.configTypographyLabaBisnis;exports.configTypographyPayhere=i.configTypographyPayhere;exports.utilTable=ke;Object.defineProperty(exports,"SelectDropdownContainerComponents",{enumerable:!0,get:()=>Me.components});Object.defineProperty(exports,"PatternFormat",{enumerable:!0,get:()=>Re.PatternFormat});exports.ConfigTable=ve.ConfigTable;Object.defineProperty(exports,"AlertContainer",{enumerable:!0,get:()=>Ae.ToastContainer});exports.useDeepCompareEffect=f.useDeepCompareEffect;exports.useDeepCompareMemoize=f.useDeepCompareMemoize;exports.useMergeRefs=Fe.useMergeRefs;exports.useEventListener=Le.useEventListener;

package/dist/index.mjs

@@ -1,29 +1,29 @@
-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 a, deepMerge as t, deleteKeysImmutable as f, deleteKeysMutable as m, encryptRSAOAEP as s, extractElementStringToOriginalValue as p, formatDate as l, formatDateRange as u, formatNumber as n, groupByKey as d, isAccurateBigNumber as i, 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 P, transformLatLong as O, 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 { default as E } from "./utils/cookies.mjs";
 import { openAlert as j } from "./components/Alert/index.mjs";
 import { betweenBig as z, lessThanBig as K, maxBig as U, minBig as G, moreThanBig as q } from "./utils/yup.mjs";
 import { BigNumber as J, defaultConfig as Q } from "./config/bigNumber/index.mjs";
 import { convertBigNumbersToStrings as Y, convertNumbersToBigNumbers as Z, convertTextToJsonBigNumbers as X } from "./utils/axiosBigNumber.mjs";
 import { default as $ } from "./config/tailwind/colors.mjs";
 import { default as re } from "./config/tailwind/screen.mjs";
-import { default as te } from "./config/tailwind/nativeScreen.mjs";
+import { default as ae } from "./config/tailwind/nativeScreen.mjs";
 import { default as fe } from "./components/TPublish/TPublish.mjs";
 import { default as se } from "./components/Button/Button.mjs";
 import { default as le } from "./components/Popover/Popover.mjs";
 import { default as ne } from "./components/Calendar/Calendar.mjs";
-import { default as de } from "./components/Calendar/CalendarRange.mjs";
+import { default as ie } 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 Pe } from "./components/Tabs/Tabs.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";
+import { default as ke } from "./components/Virtualization/ListVirtualization.mjs";
 import { default as we } from "./components/SelectDropdownContainer/SelectDropdownContainer.mjs";
 import { default as Ve } from "./components/Switch/Switch.mjs";
 import { default as Ke } from "./components/ButtonIcon/ButtonIcon.mjs";
@@ -33,56 +33,59 @@ import { DefaultCheckedChecboxIcon as Qe, DefaultRadioChecboxIcon as We, default
 import { default as Xe } from "./components/RadioCheckbox/RadioCheckboxLabel.mjs";
 import { default as $e } from "./components/Breadcrumbs/Breadcrumbs.mjs";
 import { default as rr } from "./components/Sidebar/Sidebar.mjs";
-import { default as tr } from "./components/Collapse/Collapse.mjs";
+import { default as ar } from "./components/Collapse/Collapse.mjs";
 import { default as fr } from "./components/Modal/ModalDialog.mjs";
 import { default as sr } from "./components/Timeline/Timeline.mjs";
 import { default as lr } from "./components/FilterContainer/FilterContainer.mjs";
 import { default as nr } from "./components/NumberFormat/NumberFormat.mjs";
-import { default as dr } from "./components/PortalComponent/PortalComponent.mjs";
+import { default as ir } 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 Pr } from "./components/RadioCheckbox/CheckboxTable.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";
+import { default as kr } from "./components/Textarea/TextareaFloatingInner.mjs";
 import { default as wr } from "./components/Step/Step.mjs";
 import { default as Vr } from "./components/Chart/LineChart.mjs";
 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 ao } 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 Oo } from "./hooks/usePacked.mjs";
+import { default as Mo } from "./hooks/useDebounce.mjs";
+import { default as vo } from "bignumber.js";
+import { default as Lo, configTypographyLabaBisnis as ko, configTypographyPayhere as Eo } 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 jo } from "react-select";
+import { PatternFormat as zo } from "react-number-format";
+import { ConfigTable as Uo } from "./components/Table/Table.config.mjs";
+import { ToastContainer as qo } from "react-toastify";
+import { useDeepCompareEffect as Jo, useDeepCompareMemoize as Qo } from "./hooks/useDeepCompareEffect.mjs";
+import { useMergeRefs as Yo } from "./hooks/useMergeRefs.mjs";
+import { useEventListener as Xo } from "./hooks/useEventListener.mjs";
 export {
-  jo as AlertContainer,
+  qo as AlertContainer,
   Ge as Badges,
   J as BigNumber,
   $e as Breadcrumbs,
@@ -90,13 +93,13 @@ export {
   Ke as ButtonIcon,
   Gr as ButtonPopover,
   ne as Calendar,
-  de as CalendarRange,
-  Or as CheckboxTable,
+  ie as CalendarRange,
+  Pr as CheckboxTable,
   He as Chips,
-  tr as Collapse,
-  $r as CollapseV2,
+  ar as Collapse,
+  ro as CollapseV2,
   $ as ConfigColors,
-  ko as ConfigTable,
+  Uo as ConfigTable,
   ge as DatePicker,
   be as DateRangePicker,
   Qe as DefaultCheckedChecboxIcon,
@@ -104,61 +107,62 @@ 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,
+  ke as ListVirtualization,
   fr as ModalDialog,
   Ir as MonthYearPicker,
   nr as NumberFormat,
   Ie as Pagination,
-  Lo as PatternFormat,
+  zo as PatternFormat,
+  Yr as PieChart,
   le as Popover,
-  dr as PortalComponent,
+  ir as PortalComponent,
   Ye as RadioCheckbox,
   Xe as RadioCheckboxLabel,
   we as SelectDropdownContainer,
-  vo as SelectDropdownContainerComponents,
+  jo 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,
+  ao as TableSubComponent,
   Fe as TableVirtualization,
-  Oe as Tabs,
-  lo as Text,
-  Xr as TextEditor,
+  Pe as Tabs,
+  no as Text,
+  $r as TextEditor,
   Br as Textarea,
-  Er as TextareaFloatingInner,
-  fo as TextareaInnerLabel,
-  to as TimeRange,
+  kr as TextareaFloatingInner,
+  so as TextareaInnerLabel,
+  fo as TimeRange,
   sr as Timeline,
   Kr as Tooltip,
   br as TruncateComponent,
-  So as TypeBigNumber,
+  vo as TypeBigNumber,
   gr as UploadFile,
-  Cr as UploadImage,
+  Tr as UploadImage,
   Rr as UploadMultipleFile,
   z as betweenBig,
-  te as configNativeScreens,
+  ae as configNativeScreens,
   re as configScreens,
-  Ao as configTypography,
-  Mo as configTypographyLabaBisnis,
-  Po as configTypographyPayhere,
+  Lo as configTypography,
+  ko as configTypographyLabaBisnis,
+  Eo as configTypographyPayhere,
   Y as convertBigNumbersToStrings,
   Z as convertNumbersToBigNumbers,
   X as convertTextToJsonBigNumbers,
-  k as cookieStorage,
-  t as deepCompareEquals,
-  a as deepMerge,
+  E as cookieStorage,
+  a as deepCompareEquals,
+  t as deepMerge,
   Q as defaultConfig,
   f as deleteKeysImmutable,
   m as deleteKeysMutable,
@@ -168,8 +172,8 @@ export {
   l as formatDate,
   u as formatDateRange,
   n as formatNumber,
-  i as groupByKey,
-  d as isAccurateBigNumber,
+  d as groupByKey,
+  i as isAccurateBigNumber,
   x as isAccurateNumber,
   g as isObject,
   K as lessThanBig,
@@ -179,8 +183,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,
@@ -189,21 +193,23 @@ export {
   N as transformArrayOfObjectToString,
   I as transformBigNumber,
   S as transformBigNumberOpt,
-  O as transformDataHistory,
-  A as transformLatLong,
-  M as transformNumber,
-  P as transformSecondTime,
+  P as transformDataHistory,
+  O 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,
+  Mo as useDebounce,
+  Jo as useDeepCompareEffect,
+  Qo as useDeepCompareMemoize,
+  xo as useElementOrWindowMediaQuery,
+  Xo as useEventListener,
+  No as useMasonry,
+  Yo as useMergeRefs,
+  So as useOtpInput,
+  Oo as usePacked,
+  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.18",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.20",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.18",
+  "version": "2.0.20",
   "type": "module",
   "engines": {
     "node": ">=20.19.4",

package/dist/package.json.mjs

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

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

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ data, height, classNameContainer, id, options, CustomTooltip, threshold, colors, valueFormat, hideLabelBelowPercentage, }: import('../../interfaces/components/Chart').IPieChart) => import("react/jsx-runtime").JSX.Element;
+    component: ({ data, height, classNameContainer, id, options, CustomTooltip, threshold, valueFormat, hideLabelBelowPercentage, }: import('..').IPieChart) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     tags: string[];
     argTypes: {
@@ -55,19 +55,6 @@ declare const meta: {
                 };
             };
         };
-        colors: {
-            control: "object";
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
         options: {
             control: "object";
             description: string;
@@ -140,7 +127,7 @@ declare const meta: {
         };
     };
     args: {};
-    render: (args: import('../../interfaces/components/Chart').IPieChart) => import("react/jsx-runtime").JSX.Element;
+    render: (args: import('..').IPieChart) => import("react/jsx-runtime").JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

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/hooks/index.d.ts

@@ -8,5 +8,7 @@ import { useDeepCompareEffect, useDeepCompareMemoize } from './useDeepCompareEff
 import { useEventListener } from './useEventListener';
 import { default as useMasonry, IMasonryLayout } from './useMasonry';
 import { default as useOtpInput, IUseOtpInput, IUseOtpInputReturn } from './useOtpInput';
-export { useElementOrWindowMediaQuery, useCountdown, useAsyncDebounce, useCombinedResizeObserver, useStateRef, useDeepCompareEffect, useDeepCompareMemoize, useMergeRefs, useEventListener, useMasonry, useOtpInput, };
-export type { IUseOtpInput, IUseOtpInputReturn, IMasonryLayout, IUseCountdownReturn, IUseCountdown };
+import { default as usePacked, IUsePackedOptions, IUsePackedReturn, TUsePacked } from './usePacked';
+import { default as useDebounce, IUseDebounceOptions, IUseDebounceReturn, TUseDebounce } from './useDebounce';
+export { useElementOrWindowMediaQuery, useCountdown, useAsyncDebounce, useCombinedResizeObserver, useStateRef, useDeepCompareEffect, useDeepCompareMemoize, useMergeRefs, useEventListener, useMasonry, useOtpInput, usePacked, useDebounce, };
+export type { IUseOtpInput, IUseOtpInputReturn, IMasonryLayout, IUseCountdownReturn, IUseCountdown, IUsePackedOptions, IUsePackedReturn, TUsePacked, IUseDebounceOptions, IUseDebounceReturn, TUseDebounce, };

package/dist/src/hooks/useDebounce.d.ts

@@ -0,0 +1,61 @@
+/**
+ * [ID] : Interface untuk opsi konfigurasi hook useDebounce.
+ * [EN] : Interface for useDebounce hook configuration options.
+ */
+export interface IUseDebounceOptions {
+    /**
+     * [ID] : Waktu tunggu debounce dalam milidetik (default: 0).
+     * [EN] : Debounce wait time in milliseconds (default: 0).
+     */
+    wait?: number;
+    /**
+     * [ID] : Waktu maksimum sebelum fungsi wajib dipanggil, meskipun input terus-menerus (ms).
+     * [EN] : Maximum time before function must fire, even under continuous input (ms).
+     */
+    maxWait?: number;
+}
+/**
+ * [ID] : Interface untuk return value hook useDebounce.
+ * [EN] : Interface for useDebounce hook return value.
+ * @template TArgs - [ID] : Tipe tuple argumen fungsi. [EN] : Function argument tuple type.
+ */
+export interface IUseDebounceReturn<TArgs extends unknown[]> {
+    /**
+     * [ID] : Fungsi yang sudah di-debounce.
+     * [EN] : Debounced function.
+     */
+    debouncedFn: (...args: TArgs) => void;
+    /**
+     * [ID] : Fungsi untuk membatalkan debounce yang tertunda.
+     * [EN] : Function to cancel pending debounce.
+     */
+    cancel: () => void;
+    /**
+     * [ID] : Eksekusi langsung panggilan tertunda tanpa menunggu timeout.
+     * [EN] : Immediately execute pending call without waiting for timeout.
+     */
+    flush: () => void;
+    /**
+     * [ID] : Cek apakah ada panggilan tertunda.
+     * [EN] : Check whether a call is pending.
+     */
+    pending: () => boolean;
+}
+/**
+ * [ID] : Type fungsi hook useDebounce.
+ * [EN] : useDebounce hook function type.
+ * @template TArgs - [ID] : Tipe tuple argumen fungsi. [EN] : Function argument tuple type.
+ * @param fn - [ID] : Fungsi sinkron yang akan di-debounce. [EN] : Synchronous function to be debounced.
+ * @param options - [ID] : Opsi konfigurasi (opsional). [EN] : Configuration options (optional).
+ * @returns [ID] : Objek berisi fungsi debounced, cancel, flush, dan pending.
+ * [EN] : Object containing debounced function, cancel, flush, and pending.
+ */
+export type TUseDebounce = <TArgs extends unknown[]>(fn: (...args: TArgs) => void, options?: IUseDebounceOptions) => IUseDebounceReturn<TArgs>;
+/**
+ * [ID] : Hook untuk melakukan debounce pada fungsi sinkron menggunakan setTimeout.
+ * Tahan terhadap spam input berkelanjutan, dengan dukungan maxWait dan flush.
+ * [EN] : Hook to debounce a synchronous function using setTimeout.
+ * Resilient against continuous input spam, with maxWait and flush support.
+ */
+declare const useDebounce: TUseDebounce;
+export default useDebounce;

package/dist/src/hooks/usePacked.d.ts

@@ -0,0 +1,84 @@
+import { default as React } from 'react';
+/**
+ * [ID] : Interface untuk opsi konfigurasi hook usePacked.
+ * [EN] : Interface for usePacked hook configuration options.
+ */
+export interface IUsePackedOptions {
+    /**
+     * [ID] : Jumlah kolom layout.
+     * [EN] : Layout column count.
+     */
+    columns: number;
+    /**
+     * [ID] : Jarak horizontal antar item.
+     * [EN] : Horizontal gap between items.
+     */
+    gapX: number;
+    /**
+     * [ID] : Jarak vertikal antar item.
+     * [EN] : Vertical gap between items.
+     */
+    gapY: number;
+    /**
+     * [ID] : Aktifkan animasi transisi (opsional).
+     * [EN] : Enable transition animation (optional).
+     */
+    animationEnabled?: boolean;
+    /**
+     * [ID] : Map nama breakpoint ke lebar minimum (opsional).
+     * [EN] : Map of breakpoint name to minimum width (optional).
+     */
+    breakpoints?: Record<string, number>;
+    /**
+     * [ID] : Orientasi penempatan item (opsional).
+     * [EN] : Item placement orientation (optional).
+     */
+    orientation?: 'top-bottom' | 'bottom-top';
+    /**
+     * [ID] : Arah layout (opsional).
+     * [EN] : Layout direction (optional).
+     */
+    direction?: 'ltr' | 'rtl';
+    /**
+     * [ID] : Waktu debounce untuk resize event dalam milidetik (opsional, default: 150).
+     * [EN] : Debounce wait for resize event in milliseconds (optional, default: 150).
+     */
+    debounceResize?: number;
+}
+/**
+ * [ID] : Interface untuk return value hook usePacked.
+ * [EN] : Interface for usePacked hook return value.
+ */
+export interface IUsePackedReturn {
+    /**
+     * [ID] : Referensi elemen kontainer DOM.
+     * [EN] : DOM container element reference.
+     */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * [ID] : Tinggi kontainer yang dihitung.
+     * [EN] : Calculated container height.
+     */
+    containerHeight: number;
+    /**
+     * [ID] : Fungsi untuk menghitung ulang layout secara manual.
+     * [EN] : Function to manually recalculate layout.
+     */
+    recalculate: () => void;
+}
+/**
+ * [ID] : Type fungsi hook usePacked.
+ * [EN] : usePacked hook function type.
+ * @param options - [ID] : Opsi konfigurasi layout. [EN] : Layout configuration options.
+ * @param dependencies - [ID] : Daftar dependensi untuk memicu hitung ulang.
+ * [EN] : Dependency list to trigger recalculation.
+ * @returns [ID] : Referensi kontainer, tinggi kontainer, dan fungsi hitung ulang.
+ * [EN] : Container ref, container height, and recalculate function.
+ */
+export type TUsePacked = (options: IUsePackedOptions, dependencies?: React.DependencyList) => IUsePackedReturn;
+/**
+ * [ID] : Hook untuk mengatur layout packed/grid dengan penempatan item otomatis berdasarkan kolom terpendek.
+ * [EN] : Hook to manage packed/grid layout with automatic item placement based on shortest column.
+ */
+declare const usePacked: TUsePacked;
+export default usePacked;

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

@@ -687,6 +687,28 @@ export interface IPieChartThreshold {
      */
     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.
@@ -716,10 +738,10 @@ export type TPieChartCustomTooltip = React.ComponentType<{
  */
 export interface IPieChart {
     /**
-     * [ID] : Data grafik pie.
-     * [EN] : Pie chart data.
+     * [ID] : Data grafik pie menggunakan format ChartData standar (labels + datasets).
+     * [EN] : Pie chart data using standard ChartData format (labels + datasets).
      */
-    data: IPieChartDataItem[];
+    data: IPieChartData;
     /**
      * [ID] : ID grafik.
      * [EN] : Chart ID.
@@ -750,11 +772,6 @@ export interface IPieChart {
      * [EN] : Threshold configuration for grouping small data (optional).
      */
     threshold?: IPieChartThreshold;
-    /**
-     * [ID] : Array warna kustom untuk slice pie (opsional, jika tidak disediakan akan random).
-     * [EN] : Custom color array for pie slices (optional, if not provided will be random).
-     */
-    colors?: string[];
     /**
      * [ID] : Format tampilan nilai — 'percentage', 'decimal', atau 'currency' (default: 'percentage').
      * [EN] : Value display format — 'percentage', 'decimal', or 'currency' (default: 'percentage').

package/package.json

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