1mpacto-react-ui 2.0.22 → 2.0.24

package/dist/components/Chart/PieChart.mjs

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

package/dist/components/Upload/UploadImage.cjs

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),g=require("react"),$=require("../Button/Button.cjs"),n=require("./UploadImage.module.scss.cjs"),R=({className:s})=>t.jsx("svg",{viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",className:`iru-h-5 iru-w-5 iru-text-red-600 ${s??""}`,fill:"currentColor",children:t.jsx("g",{id:"x",children:t.jsx("path",{id:"Vector",fillRule:"evenodd",clipRule:"evenodd",d:`M6.19544 6.19126C6.32045 6.06628 6.48999 5.99607 6.66677 5.99607C6.84354 5.99607 7.01308 6.06628 7.1381 
-        6.19126L10.0001 9.05326L12.8621 6.19126C12.9236 6.12758 12.9972 6.0768 13.0785 6.04186C13.1598 6.00692 13.2473 
-        5.98853 13.3358 5.98776C13.4244 5.98699 13.5121 6.00386 13.5941 6.03738C13.676 6.0709 13.7504 6.1204 13.813 
-        6.18299C13.8756 6.24559 13.9251 6.32002 13.9587 6.40195C13.9922 6.48389 14.009 6.57167 14.0083 6.66019C14.0075 
-        6.74871 13.9891 6.83619 13.9542 6.91753C13.9192 6.99886 13.8684 7.07243 13.8048 7.13392L10.9428 9.99592L13.8048 
-        12.8579C13.9262 12.9837 13.9934 13.1521 13.9919 13.3269C13.9904 13.5017 13.9203 13.6689 13.7966 13.7925C13.673 
-        13.9161 13.5058 13.9862 13.331 13.9877C13.1562 13.9892 12.9878 13.922 12.8621 13.8006L10.0001 10.9386L7.1381 
-        13.8006C7.01237 13.922 6.84397 13.9892 6.66917 13.9877C6.49437 13.9862 6.32716 13.9161 6.20356 13.7925C6.07995 
-        13.6689 6.00984 13.5017 6.00832 13.3269C6.0068 13.1521 6.074 12.9837 6.19544 12.8579L9.05744 9.99592L6.19544 
-        7.13392C6.07045 7.00891 6.00024 6.83937 6.00024 6.66259C6.00024 6.48581 6.07045 6.31628 6.19544 6.19126Z`})})}),N=({className:s})=>t.jsx("svg",{viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:`iru-h-5 iru-w-5 ${s??""}`,children:t.jsx("g",{id:"upload",children:t.jsx("path",{id:"Vector",d:`M3.83337 13.3333V14.1666C3.83337 14.8297 4.09677 15.4656 4.56561 15.9344C5.03445 16.4033 5.67033 
-        16.6666 6.33337 16.6666H14.6667C15.3297 16.6666 15.9656 16.4033 16.4345 15.9344C16.9033 15.4656 17.1667 
-        14.8297 17.1667 14.1666V13.3333M13.8334 6.66665L10.5 3.33331M10.5 3.33331L7.16671 6.66665M10.5 3.33331V13.3333`,stroke:"#1976D2",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),y=({onChange:s,valueUrl:i,validateFile:p,validateFileDesc:k="Max 2MB (.jpg, .jpeg, .png, .svg)",maxSize:h=2,icon:D,desc:o,classNameContainer:L,classNameImage:c,classNameAction:w,id:l})=>{const r=g.useRef(null),m=p||["image/png","image/jpeg","image/jpg"],[a,x]=g.useState(""),[j,u]=g.useState(""),v=e=>{if(e?.length){const d=e[0],b=d.size/1024/1024;if(!m.some(f=>e[0].type?.includes(f)))u("Berkas tidak didukung, silahkan pilih file kembali.");else if(b>h){const f=`${e.length>1?"Jumlah u":"U"}kuran berkas tidak boleh melebihi ${h}MB.`;u(f)}else{if(!r?.current)return;u(""),s(d),x(URL.createObjectURL(d)),r.current.value=""}}},C=e=>{e.preventDefault(),v(e.dataTransfer.files)},M=e=>{e.preventDefault(),r?.current&&(typeof s=="function"&&s(null),x(""),r.current.value="")};return t.jsxs("div",{className:`${n.default.container} ${L}`,children:[t.jsx("input",{accept:m?.join(", "),ref:r,hidden:!0,type:"file",multiple:!1,onChange:e=>{e.target.files&&v(e.target.files)}}),a||i?t.jsx("div",{id:`${l}-exist`,className:`${n.default["image-content"]} ${c}`,onDrop:C,onDragOver:e=>e.preventDefault(),onDragLeave:e=>e.preventDefault(),children:t.jsx("img",{src:a||i,alt:"upload-image",className:`${n.default.image} ${c}`})}):t.jsxs("div",{id:l,className:`${n.default["image-content"]} ${c}`,onDrop:C,onDragOver:e=>e.preventDefault(),onDragLeave:e=>e.preventDefault(),children:[D,t.jsx("div",{className:n.default["text-desc"],children:typeof o=="function"?o():o})]}),t.jsxs("div",{className:n.default["action-content"],children:[t.jsxs("div",{className:`${n.default["button-content"]} ${w}`,children:[(a||i)&&t.jsx($.default,{id:`${l}-delete-img`,variants:"tertiary-red-600",size:"xs",startIcon:t.jsx(R,{}),onClick:e=>M(e),children:"Hapus"}),t.jsxs($.default,{id:`${l}-change-img`,variants:"tertiary-blue-700",size:"xs",onClick:()=>r.current?.click(),startIcon:t.jsx(N,{}),children:[a||i?"Ganti":"Pilih"," Gambar"]})]}),t.jsx("p",{className:n.default["text-desc"],children:k}),j&&t.jsx("p",{className:n.default["text-error"],children:j})]})]})};exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),g=require("react"),$=require("../Button/Button.cjs"),n=require("./UploadImage.module.scss.cjs"),R=({className:r})=>t.jsx("svg",{viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",className:`iru-h-5 iru-w-5 iru-text-red-600 ${r??""}`,fill:"currentColor",children:t.jsx("g",{id:"x",children:t.jsx("path",{id:"Vector",fillRule:"evenodd",clipRule:"evenodd",d:`M6.19544 6.19126C6.32045 6.06628 6.48999 5.99607 6.66677 5.99607C6.84354 5.99607 7.01308 6.06628 7.1381 \r
+        6.19126L10.0001 9.05326L12.8621 6.19126C12.9236 6.12758 12.9972 6.0768 13.0785 6.04186C13.1598 6.00692 13.2473 \r
+        5.98853 13.3358 5.98776C13.4244 5.98699 13.5121 6.00386 13.5941 6.03738C13.676 6.0709 13.7504 6.1204 13.813 \r
+        6.18299C13.8756 6.24559 13.9251 6.32002 13.9587 6.40195C13.9922 6.48389 14.009 6.57167 14.0083 6.66019C14.0075 \r
+        6.74871 13.9891 6.83619 13.9542 6.91753C13.9192 6.99886 13.8684 7.07243 13.8048 7.13392L10.9428 9.99592L13.8048 \r
+        12.8579C13.9262 12.9837 13.9934 13.1521 13.9919 13.3269C13.9904 13.5017 13.9203 13.6689 13.7966 13.7925C13.673 \r
+        13.9161 13.5058 13.9862 13.331 13.9877C13.1562 13.9892 12.9878 13.922 12.8621 13.8006L10.0001 10.9386L7.1381 \r
+        13.8006C7.01237 13.922 6.84397 13.9892 6.66917 13.9877C6.49437 13.9862 6.32716 13.9161 6.20356 13.7925C6.07995 \r
+        13.6689 6.00984 13.5017 6.00832 13.3269C6.0068 13.1521 6.074 12.9837 6.19544 12.8579L9.05744 9.99592L6.19544 \r
+        7.13392C6.07045 7.00891 6.00024 6.83937 6.00024 6.66259C6.00024 6.48581 6.07045 6.31628 6.19544 6.19126Z`})})}),N=({className:r})=>t.jsx("svg",{viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:`iru-h-5 iru-w-5 ${r??""}`,children:t.jsx("g",{id:"upload",children:t.jsx("path",{id:"Vector",d:`M3.83337 13.3333V14.1666C3.83337 14.8297 4.09677 15.4656 4.56561 15.9344C5.03445 16.4033 5.67033 \r
+        16.6666 6.33337 16.6666H14.6667C15.3297 16.6666 15.9656 16.4033 16.4345 15.9344C16.9033 15.4656 17.1667 \r
+        14.8297 17.1667 14.1666V13.3333M13.8334 6.66665L10.5 3.33331M10.5 3.33331L7.16671 6.66665M10.5 3.33331V13.3333`,stroke:"#1976D2",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),y=({onChange:r,valueUrl:i,validateFile:p,validateFileDesc:k="Max 2MB (.jpg, .jpeg, .png, .svg)",maxSize:h=2,icon:D,desc:o,classNameContainer:L,classNameImage:c,classNameAction:w,id:l})=>{const s=g.useRef(null),m=p||["image/png","image/jpeg","image/jpg"],[a,x]=g.useState(""),[j,u]=g.useState(""),v=e=>{if(e?.length){const d=e[0],b=d.size/1024/1024;if(!m.some(f=>e[0].type?.includes(f)))u("Berkas tidak didukung, silahkan pilih file kembali.");else if(b>h){const f=`${e.length>1?"Jumlah u":"U"}kuran berkas tidak boleh melebihi ${h}MB.`;u(f)}else{if(!s?.current)return;u(""),r(d),x(URL.createObjectURL(d)),s.current.value=""}}},C=e=>{e.preventDefault(),v(e.dataTransfer.files)},M=e=>{e.preventDefault(),s?.current&&(typeof r=="function"&&r(null),x(""),s.current.value="")};return t.jsxs("div",{className:`${n.default.container} ${L}`,children:[t.jsx("input",{accept:m?.join(", "),ref:s,hidden:!0,type:"file",multiple:!1,onChange:e=>{e.target.files&&v(e.target.files)}}),a||i?t.jsx("div",{id:`${l}-exist`,className:`${n.default["image-content"]} ${c}`,onDrop:C,onDragOver:e=>e.preventDefault(),onDragLeave:e=>e.preventDefault(),children:t.jsx("img",{src:a||i,alt:"upload-image",className:`${n.default.image} ${c}`})}):t.jsxs("div",{id:l,className:`${n.default["image-content"]} ${c}`,onDrop:C,onDragOver:e=>e.preventDefault(),onDragLeave:e=>e.preventDefault(),children:[D,t.jsx("div",{className:n.default["text-desc"],children:typeof o=="function"?o():o})]}),t.jsxs("div",{className:n.default["action-content"],children:[t.jsxs("div",{className:`${n.default["button-content"]} ${w}`,children:[(a||i)&&t.jsx($.default,{id:`${l}-delete-img`,variants:"tertiary-red-600",size:"xs",startIcon:t.jsx(R,{}),onClick:e=>M(e),children:"Hapus"}),t.jsxs($.default,{id:`${l}-change-img`,variants:"tertiary-blue-700",size:"xs",onClick:()=>s.current?.click(),startIcon:t.jsx(N,{}),children:[a||i?"Ganti":"Pilih"," Gambar"]})]}),t.jsx("p",{className:n.default["text-desc"],children:k}),j&&t.jsx("p",{className:n.default["text-error"],children:j})]})]})};exports.default=y;

package/dist/components/Upload/UploadImage.mjs

@@ -1,13 +1,13 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import g from "react";
 import L from "../Button/Button.mjs";
-import n from "./UploadImage.module.scss.mjs";
-const b = ({ className: r }) => /* @__PURE__ */ t(
+import r from "./UploadImage.module.scss.mjs";
+const b = ({ className: n }) => /* @__PURE__ */ t(
   "svg",
   {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    className: `iru-h-5 iru-w-5 iru-text-red-600 ${r ?? ""}`,
+    className: `iru-h-5 iru-w-5 iru-text-red-600 ${n ?? ""}`,
     fill: "currentColor",
     children: /* @__PURE__ */ t("g", { id: "x", children: /* @__PURE__ */ t(
       "path",
@@ -15,32 +15,32 @@ const b = ({ className: r }) => /* @__PURE__ */ t(
         id: "Vector",
         fillRule: "evenodd",
         clipRule: "evenodd",
-        d: `M6.19544 6.19126C6.32045 6.06628 6.48999 5.99607 6.66677 5.99607C6.84354 5.99607 7.01308 6.06628 7.1381 
-        6.19126L10.0001 9.05326L12.8621 6.19126C12.9236 6.12758 12.9972 6.0768 13.0785 6.04186C13.1598 6.00692 13.2473 
-        5.98853 13.3358 5.98776C13.4244 5.98699 13.5121 6.00386 13.5941 6.03738C13.676 6.0709 13.7504 6.1204 13.813 
-        6.18299C13.8756 6.24559 13.9251 6.32002 13.9587 6.40195C13.9922 6.48389 14.009 6.57167 14.0083 6.66019C14.0075 
-        6.74871 13.9891 6.83619 13.9542 6.91753C13.9192 6.99886 13.8684 7.07243 13.8048 7.13392L10.9428 9.99592L13.8048 
-        12.8579C13.9262 12.9837 13.9934 13.1521 13.9919 13.3269C13.9904 13.5017 13.9203 13.6689 13.7966 13.7925C13.673 
-        13.9161 13.5058 13.9862 13.331 13.9877C13.1562 13.9892 12.9878 13.922 12.8621 13.8006L10.0001 10.9386L7.1381 
-        13.8006C7.01237 13.922 6.84397 13.9892 6.66917 13.9877C6.49437 13.9862 6.32716 13.9161 6.20356 13.7925C6.07995 
-        13.6689 6.00984 13.5017 6.00832 13.3269C6.0068 13.1521 6.074 12.9837 6.19544 12.8579L9.05744 9.99592L6.19544 
+        d: `M6.19544 6.19126C6.32045 6.06628 6.48999 5.99607 6.66677 5.99607C6.84354 5.99607 7.01308 6.06628 7.1381 \r
+        6.19126L10.0001 9.05326L12.8621 6.19126C12.9236 6.12758 12.9972 6.0768 13.0785 6.04186C13.1598 6.00692 13.2473 \r
+        5.98853 13.3358 5.98776C13.4244 5.98699 13.5121 6.00386 13.5941 6.03738C13.676 6.0709 13.7504 6.1204 13.813 \r
+        6.18299C13.8756 6.24559 13.9251 6.32002 13.9587 6.40195C13.9922 6.48389 14.009 6.57167 14.0083 6.66019C14.0075 \r
+        6.74871 13.9891 6.83619 13.9542 6.91753C13.9192 6.99886 13.8684 7.07243 13.8048 7.13392L10.9428 9.99592L13.8048 \r
+        12.8579C13.9262 12.9837 13.9934 13.1521 13.9919 13.3269C13.9904 13.5017 13.9203 13.6689 13.7966 13.7925C13.673 \r
+        13.9161 13.5058 13.9862 13.331 13.9877C13.1562 13.9892 12.9878 13.922 12.8621 13.8006L10.0001 10.9386L7.1381 \r
+        13.8006C7.01237 13.922 6.84397 13.9892 6.66917 13.9877C6.49437 13.9862 6.32716 13.9161 6.20356 13.7925C6.07995 \r
+        13.6689 6.00984 13.5017 6.00832 13.3269C6.0068 13.1521 6.074 12.9837 6.19544 12.8579L9.05744 9.99592L6.19544 \r
         7.13392C6.07045 7.00891 6.00024 6.83937 6.00024 6.66259C6.00024 6.48581 6.07045 6.31628 6.19544 6.19126Z`
       }
     ) })
   }
-), y = ({ className: r }) => /* @__PURE__ */ t(
+), y = ({ className: n }) => /* @__PURE__ */ t(
   "svg",
   {
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: `iru-h-5 iru-w-5 ${r ?? ""}`,
+    className: `iru-h-5 iru-w-5 ${n ?? ""}`,
     children: /* @__PURE__ */ t("g", { id: "upload", children: /* @__PURE__ */ t(
       "path",
       {
         id: "Vector",
-        d: `M3.83337 13.3333V14.1666C3.83337 14.8297 4.09677 15.4656 4.56561 15.9344C5.03445 16.4033 5.67033 
-        16.6666 6.33337 16.6666H14.6667C15.3297 16.6666 15.9656 16.4033 16.4345 15.9344C16.9033 15.4656 17.1667 
+        d: `M3.83337 13.3333V14.1666C3.83337 14.8297 4.09677 15.4656 4.56561 15.9344C5.03445 16.4033 5.67033 \r
+        16.6666 6.33337 16.6666H14.6667C15.3297 16.6666 15.9656 16.4033 16.4345 15.9344C16.9033 15.4656 17.1667 \r
         14.8297 17.1667 14.1666V13.3333M13.8334 6.66665L10.5 3.33331M10.5 3.33331L7.16671 6.66665M10.5 3.33331V13.3333`,
         stroke: "#1976D2",
         strokeWidth: "1.5",
@@ -50,7 +50,7 @@ const b = ({ className: r }) => /* @__PURE__ */ t(
     ) })
   }
 ), z = ({
-  onChange: r,
+  onChange: n,
   valueUrl: a,
   validateFile: m,
   validateFileDesc: x = "Max 2MB (.jpg, .jpeg, .png, .svg)",
@@ -72,15 +72,15 @@ const b = ({ className: r }) => /* @__PURE__ */ t(
         u(f);
       } else {
         if (!i?.current) return;
-        u(""), r(p), v(URL.createObjectURL(p)), i.current.value = "";
+        u(""), n(p), v(URL.createObjectURL(p)), i.current.value = "";
       }
     }
   }, D = (e) => {
     e.preventDefault(), k(e.dataTransfer.files);
   }, N = (e) => {
-    e.preventDefault(), i?.current && (typeof r == "function" && r(null), v(""), i.current.value = "");
+    e.preventDefault(), i?.current && (typeof n == "function" && n(null), v(""), i.current.value = "");
   };
-  return /* @__PURE__ */ l("div", { className: `${n.container} ${M}`, children: [
+  return /* @__PURE__ */ l("div", { className: `${r.container} ${M}`, children: [
     /* @__PURE__ */ t(
       "input",
       {
@@ -98,28 +98,28 @@ const b = ({ className: r }) => /* @__PURE__ */ t(
       "div",
       {
         id: `${s}-exist`,
-        className: `${n["image-content"]} ${d}`,
+        className: `${r["image-content"]} ${d}`,
         onDrop: D,
         onDragOver: (e) => e.preventDefault(),
         onDragLeave: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ t("img", { src: o || a, alt: "upload-image", className: `${n.image} ${d}` })
+        children: /* @__PURE__ */ t("img", { src: o || a, alt: "upload-image", className: `${r.image} ${d}` })
       }
     ) : /* @__PURE__ */ l(
       "div",
       {
         id: s,
-        className: `${n["image-content"]} ${d}`,
+        className: `${r["image-content"]} ${d}`,
         onDrop: D,
         onDragOver: (e) => e.preventDefault(),
         onDragLeave: (e) => e.preventDefault(),
         children: [
           w,
-          /* @__PURE__ */ t("div", { className: n["text-desc"], children: typeof c == "function" ? c() : c })
+          /* @__PURE__ */ t("div", { className: r["text-desc"], children: typeof c == "function" ? c() : c })
         ]
       }
     ),
-    /* @__PURE__ */ l("div", { className: n["action-content"], children: [
-      /* @__PURE__ */ l("div", { className: `${n["button-content"]} ${j}`, children: [
+    /* @__PURE__ */ l("div", { className: r["action-content"], children: [
+      /* @__PURE__ */ l("div", { className: `${r["button-content"]} ${j}`, children: [
         (o || a) && /* @__PURE__ */ t(
           L,
           {
@@ -146,8 +146,8 @@ const b = ({ className: r }) => /* @__PURE__ */ t(
           }
         )
       ] }),
-      /* @__PURE__ */ t("p", { className: n["text-desc"], children: x }),
-      $ && /* @__PURE__ */ t("p", { className: n["text-error"], children: $ })
+      /* @__PURE__ */ t("p", { className: r["text-desc"], children: x }),
+      $ && /* @__PURE__ */ t("p", { className: r["text-error"], children: $ })
     ] })
   ] });
 };

package/dist/package.json.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="2.0.22",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.24",o={version:e};exports.default=o;exports.version=e;