unipo-ui 1.9.0 → 1.11.0

package/dist/{chunk-XZDQLHF3.js → chunk-3GCVMEWH.js}

@@ -1703,7 +1703,119 @@ function BannerPemeliharaan({ start, end, message, showHoursBefore = 48, dismiss
     )
   ] });
 }
+var ANIMASI_FITUR = {
+  notifikasi: "lonceng",
+  pengumuman: "lonceng",
+  kalender: "balik",
+  agenda: "balik",
+  portal: "balik",
+  humas: "balik",
+  keu: "naik",
+  keuangan: "naik",
+  pembayaran: "naik",
+  unggah: "naik",
+  berkas: "naik",
+  pddikti: "putar",
+  sinkron: "putar",
+  integrasi: "putar",
+  pemeliharaan: "putar",
+  helpdesk: "denyut",
+  tiket: "denyut",
+  dasbor: "denyut",
+  cbt: "denyut",
+  kelulusan: "pantul",
+  prestasi: "pantul",
+  wisuda: "pantul",
+  kemahasiswaan: "pantul",
+  akses: "goyang",
+  galat: "goyang",
+  ditolak: "goyang",
+  ai: "ketik",
+  editor: "ketik",
+  arsip: "geser",
+  layanan: "geser",
+  sukses: "sukses"
+};
+function animasiFitur(fitur) {
+  return fitur && ANIMASI_FITUR[fitur] || "masuk";
+}
+var BERULANG = ["denyut", "mengambang", "putar"];
+function Animasi({ jenis = "masuk", tunda, durasi, pemicu, as = "div", ulang, className, style, children, ...rest }) {
+  const p = pemicu ?? (BERULANG.includes(jenis) ? "selalu" : "muat");
+  const ref = React4.useRef(null);
+  const [terlihat, setTerlihat] = React4.useState(p !== "terlihat");
+  React4.useEffect(() => {
+    if (p !== "terlihat" || !ref.current || typeof IntersectionObserver === "undefined") return setTerlihat(true);
+    const io = new IntersectionObserver(
+      ([e]) => {
+        if (e.isIntersecting) {
+          setTerlihat(true);
+          io.disconnect();
+        }
+      },
+      { rootMargin: "0px 0px -10% 0px" }
+    );
+    io.observe(ref.current);
+    return () => io.disconnect();
+  }, [p]);
+  const ms = tunda === void 0 ? void 0 : tunda > 20 ? tunda : tunda * 60;
+  const Tag = as;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: cn("u-anim", className),
+      "data-anim": jenis,
+      "data-pemicu": p,
+      "data-siap": terlihat || void 0,
+      style: { ...ms !== void 0 ? { ["--u-anim-tunda"]: `${ms}ms` } : {}, ...durasi ? { ["--u-anim-durasi"]: `${durasi}ms` } : {}, ...style },
+      ...rest,
+      children
+    },
+    ulang
+  );
+}
+function Bertahap({ jenis = "masuk", jeda = 60, pemicu = "muat", className, children, as = "div" }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: React4.Children.toArray(children).map((c, i) => /* @__PURE__ */ jsx(Animasi, { jenis, tunda: i * jeda + 1, pemicu, className, as, children: c }, c.key ?? i)) });
+}
+function kurangiGerak() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function AngkaBerjalan({ nilai, durasi = 900, format = (n) => formatNumber(Math.round(n)), className }) {
+  const [tampil, setTampil] = React4.useState(nilai);
+  const dari = React4.useRef(0);
+  React4.useEffect(() => {
+    if (kurangiGerak()) return setTampil(nilai);
+    const awal = dari.current;
+    const t0 = performance.now();
+    let id = 0;
+    const langkah = (t) => {
+      const p = Math.min(1, (t - t0) / durasi);
+      const e = 1 - Math.pow(1 - p, 3);
+      setTampil(awal + (nilai - awal) * e);
+      if (p < 1) id = requestAnimationFrame(langkah);
+      else dari.current = nilai;
+    };
+    id = requestAnimationFrame(langkah);
+    return () => cancelAnimationFrame(id);
+  }, [nilai, durasi]);
+  return /* @__PURE__ */ jsx("span", { className: cn("u-angka-berjalan", className), "aria-label": format(nilai), children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: format(tampil) }) });
+}
+function CentangSukses({ ukuran = 56, nada = "success", className, label = "Berhasil" }) {
+  const silang = nada === "danger";
+  return /* @__PURE__ */ jsxs("svg", { className: cn("u-centang", className), "data-nada": nada, width: ukuran, height: ukuran, viewBox: "0 0 52 52", role: "img", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("circle", { className: "u-centang-lingkar", cx: "26", cy: "26", r: "23", fill: "none", strokeWidth: "3" }),
+    silang ? /* @__PURE__ */ jsx("path", { className: "u-centang-tanda", fill: "none", strokeWidth: "4", strokeLinecap: "round", d: "M18 18 34 34M34 18 18 34" }) : /* @__PURE__ */ jsx("path", { className: "u-centang-tanda", fill: "none", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", d: "M15 27l7 7 15-16" })
+  ] });
+}
+function TitikMengetik({ label = "Sedang mengetik", className }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("u-titik-mengetik", className), role: "status", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("i", {}),
+    /* @__PURE__ */ jsx("i", {}),
+    /* @__PURE__ */ jsx("i", {})
+  ] });
+}
 
-export { ActionList, ActivityFeed, BannerPemeliharaan, BarChart, BarList, BudgetMeter, CHART_COLORS, Calendar, CodeBlock, CopyButton, CycleSteps, DashboardGrid, DataTable, DatePicker, DonutChart, Dropzone, FacetFilter, FileList, FilterBar, FormGrid, Funnel, GroupedBarChart, InlineCode, KodeLaporan, LineChart, ModePemeliharaan, Panel, SegmentBar, Sparkline, StatCard, StatGrid, Wizard, WizardReview, chartColor, filterToQuery, monthMatrix, parseISODate, requestIdDari, toISODate, tokenize, useCopy, useFilterParams };
-//# sourceMappingURL=chunk-XZDQLHF3.js.map
-//# sourceMappingURL=chunk-XZDQLHF3.js.map
+export { ANIMASI_FITUR, ActionList, ActivityFeed, AngkaBerjalan, Animasi, BannerPemeliharaan, BarChart, BarList, Bertahap, BudgetMeter, CHART_COLORS, Calendar, CentangSukses, CodeBlock, CopyButton, CycleSteps, DashboardGrid, DataTable, DatePicker, DonutChart, Dropzone, FacetFilter, FileList, FilterBar, FormGrid, Funnel, GroupedBarChart, InlineCode, KodeLaporan, LineChart, ModePemeliharaan, Panel, SegmentBar, Sparkline, StatCard, StatGrid, TitikMengetik, Wizard, WizardReview, animasiFitur, chartColor, filterToQuery, monthMatrix, parseISODate, requestIdDari, toISODate, tokenize, useCopy, useFilterParams };
+//# sourceMappingURL=chunk-3GCVMEWH.js.map
+//# sourceMappingURL=chunk-3GCVMEWH.js.map