unipo-ui 1.7.0 → 1.8.0

package/dist/{chunk-UEOAVWAZ.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: [
@@ -539,6 +540,200 @@ function LogoAplikasi({ kode, name, src, ssoUrl = "https://sso.unipo.ac.id", tag
   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, {}),
@@ -1105,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, LogoAplikasi, LogoGambar, Navbar, NewsCard, NewsCardSkeleton, NewsGrid, RankedList, Section, ServiceList, ServiceStatusBadge, ServiceStatusPanel, StatusBanner, UnipoAppLogo, UnipoMark, UptimeBar, eventColor, eventsByDay, formatEventRange, glyphInisial, overallStatus, urlLogoSso, useLogoTersedia, useServiceChecks, warnaAplikasi };
-//# sourceMappingURL=chunk-UEOAVWAZ.js.map
-//# sourceMappingURL=chunk-UEOAVWAZ.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