unipo-ui 1.6.0 → 1.8.0

package/dist/{chunk-KF7SZPEH.js → chunk-2CDMQI7K.js}

@@ -1,12 +1,13 @@
 'use client';
 import { parseISODate, toISODate, monthMatrix } from './chunk-5T2FWP5A.js';
-import { Button, Skeleton, Accordion, Empty, formatTime, Tooltip, formatCompact, formatDate, Menu as Menu$1, Avatar, Dialog, formatRelative } from './chunk-OLQKRLWL.js';
+import { Button, Skeleton, Accordion, Empty, Avatar, formatTime, Tooltip, formatCompact, formatDate, Menu as Menu$2, Dialog, formatRelative } from './chunk-OLQKRLWL.js';
 import { dataFlag, cn } from './chunk-JSUHAYQ4.js';
 import * as React from 'react';
 import { NavigationMenu } from '@base-ui/react/navigation-menu';
 import { Collapsible } from '@base-ui/react/collapsible';
-import { ChevronDown, Menu, SearchX, MessageCircleQuestion, Clock, RefreshCw, ChevronLeft, ChevronRight, CalendarDays, Eye, Pin, Megaphone, ArrowUpRight, Video, MapPin, Users, ArrowRight, Search, Loader2, XCircle, Wrench, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { ChevronDown, Menu, SearchX, MessageCircleQuestion, UserRound, ChevronsUpDown, Users, Check, Sun, Moon, Monitor, LogOut, PenLine, ShieldCheck, Clock, RefreshCw, ChevronLeft, ChevronRight, CalendarDays, Eye, Pin, Megaphone, ArrowUpRight, Video, MapPin, ArrowRight, Search, KeyRound, IdCard, Loader2, XCircle, Wrench, AlertTriangle, CheckCircle2 } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Menu as Menu$1 } from '@base-ui/react/menu';
 
 function useScrolled(on, threshold = 8) {
   const [s, setS] = React.useState(false);
@@ -109,7 +110,7 @@ function Panel({ menu, renderLink }) {
 }
 function UserMenu({ user }) {
   return /* @__PURE__ */ jsx(
-    Menu$1,
+    Menu$2,
     {
       align: "end",
       trigger: /* @__PURE__ */ jsxs("button", { type: "button", className: "u-navbar-user", "aria-label": `Menu ${user.name}`, children: [
@@ -376,17 +377,39 @@ function UnipoMark({ size = 32, shape = "square", tone = "brand", color, accent,
   ] });
 }
 var MARK_SIZE = { sm: 24, md: 32, lg: 40, xl: 56 };
-function AppLogo({ name = "UNIPO", tagline, src, layout = "horizontal", shape = "square", tone = "brand", size = "md", color, glyph, className, ...props }) {
+function AppLogo({ name = "UNIPO", tagline, src, layout = "horizontal", shape = "square", tone = "brand", size = "md", color, glyph, fit, onSrcError, className, ...props }) {
   const px = MARK_SIZE[size];
-  const mark = src ? /* @__PURE__ */ jsx("img", { src, alt: "", width: px, height: px, style: { objectFit: "contain" } }) : /* @__PURE__ */ jsx(UnipoMark, { size: px, shape, tone, color, glyph, title: typeof name === "string" ? name : "UNIPO" });
-  return /* @__PURE__ */ jsxs("span", { className: cn("u-app-logo", className), "data-layout": layout, "data-size": size, "data-tone": tone, ...props, children: [
-    layout !== "wordmark" && mark,
-    layout !== "mark" && /* @__PURE__ */ jsxs("span", { className: "u-app-logo-text", children: [
+  const judul = typeof name === "string" ? name : "UNIPO";
+  const tata = layout === "full" && !src ? "horizontal" : layout;
+  if (layout === "full" && src) {
+    return /* @__PURE__ */ jsx("span", { className: cn("u-app-logo", className), "data-layout": "full", "data-size": size, "data-tone": tone, ...props, children: /* @__PURE__ */ jsx("img", { className: "u-app-logo-full", src, alt: judul, height: px, onError: onSrcError }) });
+  }
+  const mark = src ? /* @__PURE__ */ jsx(LogoGambar, { src, size: px, shape, tone, color, fit, title: judul, onGagal: onSrcError }) : /* @__PURE__ */ jsx(UnipoMark, { size: px, shape, tone, color, glyph, title: judul });
+  return /* @__PURE__ */ jsxs("span", { className: cn("u-app-logo", className), "data-layout": tata, "data-size": size, "data-tone": tone, ...props, children: [
+    tata !== "wordmark" && mark,
+    tata !== "mark" && /* @__PURE__ */ jsxs("span", { className: "u-app-logo-text", children: [
       /* @__PURE__ */ jsx("span", { className: "u-app-logo-name", children: name }),
       tagline && /* @__PURE__ */ jsx("span", { className: "u-app-logo-tagline", children: tagline })
     ] })
   ] });
 }
+function LogoGambar({ src, size = 32, shape = "square", tone = "brand", color, fit, title, onGagal, className, style, ...props }) {
+  const cara = fit ?? (color || tone === "inverse" ? "contain" : "cover");
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("u-logo-gambar", className),
+      "data-shape": shape,
+      "data-tone": tone,
+      "data-fit": cara,
+      role: "img",
+      "aria-label": title,
+      style: { width: size, height: size, ...color ? { ["--u-logo-pelat"]: color } : {}, ...style },
+      ...props,
+      children: /* @__PURE__ */ jsx("img", { src, alt: "", width: size, height: size, draggable: false, onError: onGagal })
+    }
+  );
+}
 var G = (d, extra) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("path", { d, stroke: "#fff", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
   extra
@@ -436,6 +459,281 @@ var APP_NAMES = {
 function UnipoAppLogo({ app, tagline = "Universitas Pohuwato", ...props }) {
   return /* @__PURE__ */ jsx(AppLogo, { name: APP_NAMES[app], tagline, glyph: APP_GLYPHS[app], color: props.color ?? APP_COLORS[app], ...props });
 }
+var WARNA_INISIAL = ["#244ce6", "#0f8a6a", "#d9541e", "#6d4fd1", "#0e7490", "#c2416b", "#8a5a12", "#5b6b7f"];
+function glyphInisial(nama) {
+  const kata = nama.replace(/[^\p{L}\p{N} ]/gu, " ").trim().split(/\s+/).filter(Boolean);
+  const teks = (kata.length > 1 ? kata[0][0] + kata[1][0] : (kata[0] ?? "?").slice(0, 2)).toUpperCase();
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: "16",
+      y: "16.5",
+      textAnchor: "middle",
+      dominantBaseline: "central",
+      fill: "#fff",
+      fontSize: teks.length > 1 ? 12.5 : 15,
+      fontWeight: 800,
+      fontFamily: "var(--u-font-heading, inherit)",
+      letterSpacing: "-0.02em",
+      children: teks
+    }
+  );
+}
+function warnaAplikasi(kode) {
+  if (kode in APP_COLORS) return APP_COLORS[kode];
+  let h = 0;
+  for (const c of kode) h = h * 31 + c.charCodeAt(0) >>> 0;
+  return WARNA_INISIAL[h % WARNA_INISIAL.length];
+}
+function urlLogoSso(kode, ssoUrl = "https://sso.unipo.ac.id") {
+  const id = kode.toLowerCase().replace(/-/g, "_");
+  if (!/^[a-z0-9_]{3,64}$/.test(id)) return [];
+  const dasar = ssoUrl.replace(/\/+$/, "");
+  return ["png", "webp", "jpg"].map((x) => `${dasar}/logos/${id}.${x}`);
+}
+var cacheLogo = /* @__PURE__ */ new Map();
+function useLogoTersedia(calon) {
+  const daftar = calon.filter((x) => !!x);
+  const kunci = daftar.join("|");
+  const [hasil, setHasil] = React.useState(() => cacheLogo.has(kunci) ? { kunci, src: cacheLogo.get(kunci) } : null);
+  React.useEffect(() => {
+    if (cacheLogo.has(kunci)) {
+      setHasil({ kunci, src: cacheLogo.get(kunci) });
+      return;
+    }
+    if (!daftar.length || typeof Image === "undefined") {
+      setHasil({ kunci, src: null });
+      return;
+    }
+    let batal = false;
+    const coba = (i) => {
+      if (batal) return;
+      if (i >= daftar.length) {
+        cacheLogo.set(kunci, null);
+        setHasil({ kunci, src: null });
+        return;
+      }
+      const img = new Image();
+      img.onload = () => {
+        if (batal) return;
+        cacheLogo.set(kunci, daftar[i]);
+        setHasil({ kunci, src: daftar[i] });
+      };
+      img.onerror = () => coba(i + 1);
+      img.src = daftar[i];
+    };
+    coba(0);
+    return () => {
+      batal = true;
+    };
+  }, [kunci]);
+  const ok = hasil?.kunci === kunci;
+  return { src: ok ? hasil.src : null, memuat: !ok };
+}
+function LogoAplikasi({ kode, name, src, ssoUrl = "https://sso.unipo.ac.id", tagline = "Universitas Pohuwato", color, ...props }) {
+  const calon = React.useMemo(() => [src, ...ssoUrl ? urlLogoSso(kode, ssoUrl) : []], [src, kode, ssoUrl]);
+  const logo = useLogoTersedia(calon);
+  const bawaan = kode.toLowerCase() in APP_GLYPHS ? kode.toLowerCase() : null;
+  const nama = name ?? (bawaan ? APP_NAMES[bawaan] : kode);
+  if (logo.src) return /* @__PURE__ */ jsx(AppLogo, { name: nama, tagline, src: logo.src, color, ...props });
+  const glyph = bawaan ? APP_GLYPHS[bawaan] : glyphInisial(typeof nama === "string" ? nama : kode);
+  const layout = props.layout === "full" ? "horizontal" : props.layout;
+  return /* @__PURE__ */ jsx(AppLogo, { name: nama, tagline, glyph, color: color ?? warnaAplikasi(kode.toLowerCase()), ...props, layout, "data-memuat": logo.memuat || void 0 });
+}
+var PROFIL_URL = "https://profile.unipo.ac.id";
+var SSO_URL = "https://sso.unipo.ac.id";
+function tautanAkun(profilUrl = PROFIL_URL, ssoUrl = SSO_URL, ganti = {}) {
+  const p = profilUrl.replace(/\/+$/, "");
+  const s = ssoUrl.replace(/\/+$/, "");
+  return {
+    profil: `${p}/`,
+    ubahProfil: `${p}/data-pribadi`,
+    foto: `${p}/?ubah=foto`,
+    password: `${p}/keamanan`,
+    keamanan: `${s}/akun`,
+    keluar: `${s}/logout`,
+    ...ganti
+  };
+}
+function subjudulAkun(a) {
+  return [a.username, a.peran ?? a.level].filter(Boolean).join(" \xB7 ");
+}
+var LABEL_ITEM = {
+  profil: { label: "Profil saya", ikon: /* @__PURE__ */ jsx(UserRound, {}), kunci: "profil" },
+  ubah: { label: "Ubah profil", ikon: /* @__PURE__ */ jsx(PenLine, {}), kunci: "ubahProfil" },
+  foto: { label: "Ganti foto", ikon: /* @__PURE__ */ jsx(IdCard, {}), kunci: "foto" },
+  password: { label: "Ganti password", ikon: /* @__PURE__ */ jsx(KeyRound, {}), kunci: "password" },
+  keamanan: { label: "Keamanan akun", ikon: /* @__PURE__ */ jsx(ShieldCheck, {}), kunci: "keamanan" }
+};
+var UKURAN_AVATAR = { pil: "sm", nama: "sm", avatar: "md", sidebar: "md", ikon: "xs" };
+function Kelengkapan({ persen, href, tabBaru }) {
+  const p = Math.max(0, Math.min(100, Math.round(persen)));
+  return /* @__PURE__ */ jsxs(Menu$1.LinkItem, { href, className: "u-akun-lengkap", target: tabBaru ? "_blank" : void 0, rel: tabBaru ? "noopener" : void 0, children: [
+    /* @__PURE__ */ jsxs("span", { className: "u-akun-lengkap-teks", children: [
+      /* @__PURE__ */ jsx("span", { children: "Lengkapi profil" }),
+      /* @__PURE__ */ jsxs("b", { children: [
+        p,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "u-akun-bilah", role: "progressbar", "aria-valuenow": p, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Kelengkapan profil", children: /* @__PURE__ */ jsx("span", { style: { width: `${p}%` } }) })
+  ] });
+}
+function MenuAkun({
+  pengguna,
+  varian = "pil",
+  item = ["profil", "ubah", "keamanan"],
+  profilUrl,
+  ssoUrl,
+  tautan,
+  kelengkapan,
+  peranLain,
+  onGantiPeran,
+  tema,
+  onTema,
+  menu = [],
+  onKeluar,
+  labelKeluar = "Keluar dari semua aplikasi",
+  tabBaru,
+  align,
+  side,
+  className
+}) {
+  const t = tautanAkun(profilUrl, ssoUrl, tautan);
+  const sub = subjudulAkun(pengguna);
+  const belumLengkap = kelengkapan != null && kelengkapan < 100;
+  const target = tabBaru ? { target: "_blank", rel: "noopener" } : {};
+  const avatar = /* @__PURE__ */ jsx(Avatar, { name: pengguna.nama, src: pengguna.foto, size: UKURAN_AVATAR[varian], status: pengguna.status });
+  const pemicu = varian === "avatar" ? /* @__PURE__ */ jsx("button", { type: "button", className: cn("u-akun-pemicu", className), "data-varian": "avatar", "data-cincin": belumLengkap ? "" : void 0, "aria-label": `Menu akun ${pengguna.nama}`, children: avatar }) : varian === "ikon" ? /* @__PURE__ */ jsx("button", { type: "button", className: cn("u-akun-pemicu", className), "data-varian": "ikon", "aria-label": `Menu akun ${pengguna.nama}`, children: /* @__PURE__ */ jsx(UserRound, {}) }) : /* @__PURE__ */ jsxs("button", { type: "button", className: cn("u-akun-pemicu", className), "data-varian": varian, "aria-label": `Menu akun ${pengguna.nama}`, children: [
+    avatar,
+    /* @__PURE__ */ jsxs("span", { className: "u-akun-teks", children: [
+      /* @__PURE__ */ jsx("b", { children: pengguna.nama }),
+      varian !== "pil" && sub && /* @__PURE__ */ jsx("small", { children: sub })
+    ] }),
+    varian === "sidebar" ? /* @__PURE__ */ jsx(ChevronsUpDown, { className: "u-akun-panah", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronDown, { className: "u-akun-panah", "aria-hidden": true })
+  ] });
+  const isiMenu = (it, i) => {
+    if (it.type === "separator") return /* @__PURE__ */ jsx(Menu$1.Separator, { className: "u-menu-separator" }, `x${i}`);
+    if (it.type === "label")
+      return /* @__PURE__ */ jsx("div", { className: "u-menu-label", children: it.label }, `x${i}`);
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      it.icon,
+      /* @__PURE__ */ jsx("span", { children: it.label }),
+      it.shortcut && /* @__PURE__ */ jsx("span", { className: "u-menu-shortcut", children: it.shortcut })
+    ] });
+    return it.href ? /* @__PURE__ */ jsx(Menu$1.LinkItem, { href: it.href, className: "u-menu-item", children: inner }, `x${i}`) : /* @__PURE__ */ jsx(Menu$1.Item, { className: "u-menu-item", onClick: it.onSelect, disabled: it.disabled, "data-variant": it.destructive ? "destructive" : void 0, children: inner }, `x${i}`);
+  };
+  return /* @__PURE__ */ jsxs(Menu$1.Root, { children: [
+    /* @__PURE__ */ jsx(Menu$1.Trigger, { render: pemicu }),
+    /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { className: "u-popup-positioner", align: align ?? (varian === "sidebar" ? "start" : "end"), side: side ?? (varian === "sidebar" ? "top" : "bottom"), sideOffset: 8, children: /* @__PURE__ */ jsxs(Menu$1.Popup, { className: "u-menu u-akun-menu", children: [
+      /* @__PURE__ */ jsxs("div", { className: "u-akun-kepala", children: [
+        /* @__PURE__ */ jsx(Avatar, { name: pengguna.nama, src: pengguna.foto, size: "lg" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("b", { children: pengguna.nama }),
+          sub && /* @__PURE__ */ jsx("small", { children: sub }),
+          pengguna.unit && /* @__PURE__ */ jsx("small", { children: pengguna.unit })
+        ] })
+      ] }),
+      belumLengkap && /* @__PURE__ */ jsx(Kelengkapan, { persen: kelengkapan, href: t.ubahProfil, tabBaru }),
+      /* @__PURE__ */ jsx(Menu$1.Separator, { className: "u-menu-separator" }),
+      item.map((k) => /* @__PURE__ */ jsxs(Menu$1.LinkItem, { href: t[LABEL_ITEM[k].kunci], className: "u-menu-item", ...target, children: [
+        LABEL_ITEM[k].ikon,
+        /* @__PURE__ */ jsx("span", { children: LABEL_ITEM[k].label })
+      ] }, k)),
+      peranLain && peranLain.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Menu$1.Separator, { className: "u-menu-separator" }),
+        /* @__PURE__ */ jsx("div", { className: "u-menu-label", children: "Masuk sebagai" }),
+        peranLain.map((p) => /* @__PURE__ */ jsxs(Menu$1.Item, { className: "u-menu-item", onClick: () => onGantiPeran?.(p.kode), "data-aktif": p.aktif ? "" : void 0, children: [
+          /* @__PURE__ */ jsx(Users, {}),
+          /* @__PURE__ */ jsx("span", { children: p.label }),
+          p.aktif && /* @__PURE__ */ jsx(Check, { className: "u-akun-centang", "aria-label": "Aktif" })
+        ] }, p.kode))
+      ] }),
+      tema && onTema && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Menu$1.Separator, { className: "u-menu-separator" }),
+        /* @__PURE__ */ jsx("div", { className: "u-akun-tema", role: "group", "aria-label": "Tema", children: [
+          ["terang", /* @__PURE__ */ jsx(Sun, {}, "s"), "Terang"],
+          ["gelap", /* @__PURE__ */ jsx(Moon, {}, "m"), "Gelap"],
+          ["sistem", /* @__PURE__ */ jsx(Monitor, {}, "o"), "Sistem"]
+        ].map(([v, ikon, label]) => /* @__PURE__ */ jsxs("button", { type: "button", "aria-pressed": tema === v, onClick: () => onTema(v), children: [
+          ikon,
+          label
+        ] }, v)) })
+      ] }),
+      menu.length > 0 && /* @__PURE__ */ jsx(Menu$1.Separator, { className: "u-menu-separator" }),
+      menu.map(isiMenu),
+      /* @__PURE__ */ jsx(Menu$1.Separator, { className: "u-menu-separator" }),
+      onKeluar ? /* @__PURE__ */ jsxs(Menu$1.Item, { className: "u-menu-item", "data-variant": "destructive", onClick: onKeluar, children: [
+        /* @__PURE__ */ jsx(LogOut, {}),
+        /* @__PURE__ */ jsx("span", { children: labelKeluar })
+      ] }) : /* @__PURE__ */ jsxs(Menu$1.LinkItem, { href: t.keluar, className: "u-menu-item", "data-variant": "destructive", children: [
+        /* @__PURE__ */ jsx(LogOut, {}),
+        /* @__PURE__ */ jsx("span", { children: labelKeluar })
+      ] })
+    ] }) }) })
+  ] });
+}
+function KartuAkun({ pengguna, varian = "kartu", profilUrl, ssoUrl, tautan, kelengkapan, statistik, aksi, onKeluar, tabBaru, className }) {
+  const t = tautanAkun(profilUrl, ssoUrl, tautan);
+  const sub = subjudulAkun(pengguna);
+  const target = tabBaru ? { target: "_blank", rel: "noopener" } : {};
+  const p = kelengkapan == null ? null : Math.max(0, Math.min(100, Math.round(kelengkapan)));
+  const tombol = aksi === void 0 ? /* @__PURE__ */ jsxs("div", { className: "u-akun-aksi", children: [
+    /* @__PURE__ */ jsxs("a", { className: "u-button", "data-variant": "primary", "data-size": "sm", href: t.ubahProfil, ...target, children: [
+      /* @__PURE__ */ jsx(PenLine, {}),
+      "Ubah profil"
+    ] }),
+    /* @__PURE__ */ jsxs("a", { className: "u-button", "data-variant": "outline", "data-size": "sm", href: t.keamanan, children: [
+      /* @__PURE__ */ jsx(ShieldCheck, {}),
+      "Keamanan akun"
+    ] }),
+    onKeluar && /* @__PURE__ */ jsxs("button", { type: "button", className: "u-button", "data-variant": "ghost", "data-size": "sm", onClick: onKeluar, children: [
+      /* @__PURE__ */ jsx(LogOut, {}),
+      "Keluar"
+    ] })
+  ] }) : aksi === null ? null : /* @__PURE__ */ jsx("div", { className: "u-akun-aksi", children: aksi });
+  if (varian === "baris") {
+    return /* @__PURE__ */ jsxs("a", { className: cn("u-akun-kartu", className), "data-varian": "baris", href: t.profil, ...target, children: [
+      /* @__PURE__ */ jsx(Avatar, { name: pengguna.nama, src: pengguna.foto, size: "md", status: pengguna.status }),
+      /* @__PURE__ */ jsxs("span", { className: "u-akun-teks", children: [
+        /* @__PURE__ */ jsx("b", { children: pengguna.nama }),
+        sub && /* @__PURE__ */ jsx("small", { children: sub })
+      ] }),
+      p != null && p < 100 && /* @__PURE__ */ jsxs("span", { className: "u-akun-persen", children: [
+        p,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(PenLine, { className: "u-akun-panah", "aria-hidden": true })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: cn("u-akun-kartu", className), "data-varian": varian, children: [
+    varian === "sampul" && /* @__PURE__ */ jsx("div", { className: "u-akun-sampul", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("div", { className: "u-akun-identitas", children: [
+      /* @__PURE__ */ jsx("a", { href: t.foto, className: "u-akun-foto", "aria-label": "Ganti foto profil", ...target, children: /* @__PURE__ */ jsx(Avatar, { name: pengguna.nama, src: pengguna.foto, size: varian === "kartu" ? "lg" : "xl", status: pengguna.status }) }),
+      /* @__PURE__ */ jsxs("div", { className: "u-akun-teks", children: [
+        /* @__PURE__ */ jsx("b", { children: pengguna.nama }),
+        sub && /* @__PURE__ */ jsx("small", { children: sub }),
+        pengguna.unit && /* @__PURE__ */ jsx("small", { children: pengguna.unit }),
+        pengguna.email && /* @__PURE__ */ jsx("small", { children: pengguna.email })
+      ] })
+    ] }),
+    p != null && /* @__PURE__ */ jsxs("a", { className: "u-akun-lengkap", href: t.ubahProfil, ...target, "data-penuh": p >= 100 ? "" : void 0, children: [
+      /* @__PURE__ */ jsxs("span", { className: "u-akun-lengkap-teks", children: [
+        /* @__PURE__ */ jsx("span", { children: p >= 100 ? "Profil lengkap" : "Kelengkapan profil" }),
+        /* @__PURE__ */ jsxs("b", { children: [
+          p,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "u-akun-bilah", role: "progressbar", "aria-valuenow": p, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Kelengkapan profil", children: /* @__PURE__ */ jsx("span", { style: { width: `${p}%` } }) })
+    ] }),
+    statistik && statistik.length > 0 && /* @__PURE__ */ jsx("dl", { className: "u-akun-statistik", children: statistik.map((s) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("dt", { children: s.label }),
+      /* @__PURE__ */ jsx("dd", { children: s.nilai })
+    ] }, s.label)) }),
+    tombol
+  ] });
+}
 var LABEL = { ok: "Normal", degraded: "Lambat", down: "Gangguan", maintenance: "Pemeliharaan", off: "Nonaktif", checking: "Memeriksa" };
 var ICON = {
   ok: /* @__PURE__ */ jsx(CheckCircle2, {}),
@@ -1002,6 +1300,6 @@ function Hero({ eyebrow, title, description, actions, stats, media, image, varia
   ] }) });
 }
 
-export { APP_COLORS, APP_GLYPHS, AgendaList, AnnouncementList, AppLogo, DateTile, EVENT_COLORS, EventCalendar, EventCard, EventLegend, Faq, Hero, LatencyIndicator, Navbar, NewsCard, NewsCardSkeleton, NewsGrid, RankedList, Section, ServiceList, ServiceStatusBadge, ServiceStatusPanel, StatusBanner, UnipoAppLogo, UnipoMark, UptimeBar, eventColor, eventsByDay, formatEventRange, overallStatus, useServiceChecks };
-//# sourceMappingURL=chunk-KF7SZPEH.js.map
-//# sourceMappingURL=chunk-KF7SZPEH.js.map
+export { APP_COLORS, APP_GLYPHS, AgendaList, AnnouncementList, AppLogo, DateTile, EVENT_COLORS, EventCalendar, EventCard, EventLegend, Faq, Hero, KartuAkun, LatencyIndicator, LogoAplikasi, LogoGambar, MenuAkun, Navbar, NewsCard, NewsCardSkeleton, NewsGrid, PROFIL_URL, RankedList, SSO_URL, Section, ServiceList, ServiceStatusBadge, ServiceStatusPanel, StatusBanner, UnipoAppLogo, UnipoMark, UptimeBar, eventColor, eventsByDay, formatEventRange, glyphInisial, overallStatus, subjudulAkun, tautanAkun, urlLogoSso, useLogoTersedia, useServiceChecks, warnaAplikasi };
+//# sourceMappingURL=chunk-2CDMQI7K.js.map
+//# sourceMappingURL=chunk-2CDMQI7K.js.map