ppij-design-system 0.3.0 → 0.4.0

package/README.md

@@ -0,0 +1,37 @@
+# ppij-design-system
+
+PPIJ presentation components on React 19, Tailwind CSS v4 and shadcn/ui on
+Radix, with the framework-free token layer beside them. Public, member portal,
+admin, Pemira, Keycloak and email surfaces consume this package; it holds no
+application data logic, no API clients and no secrets.
+
+```sh
+npm install ppij-design-system
+npm install github:ppij-dev/ppij-design-system   # the released tarball route
+```
+
+## Exports
+
+- `ppij-design-system` — the React components from the package root
+- `ppij-design-system/tokens.css` — the token layer, plus Tailwind's own import
+- `ppij-design-system/tokens.json` — the same values, framework free
+
+## Consumer setup
+
+Two things are the consuming app's:
+
+- **Tailwind CSS v4.** `tokens.css` opens with `@import "tailwindcss"`, so
+  install `tailwindcss` and `@tailwindcss/vite` (or the equivalent PostCSS
+  plugin) and import the token file once. The component classes are Tailwind
+  utilities; without the plugin the token import cannot resolve.
+- **The automatic JSX runtime**, as in any React 19 app
+  (`@vitejs/plugin-react`, or `esbuild: { jsx: "automatic" }`).
+
+```tsx
+import { AdminTopBar, MapCard, PanelCard, PieChart } from "ppij-design-system";
+import "ppij-design-system/tokens.css";
+import tokens from "ppij-design-system/tokens.json";
+```
+
+The component guidelines and every component story live in the Storybook Docs
+pages at https://ppij-dev.github.io/ppij-design-system/.

package/dist/components/account-sheet.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export type AccountSheetLocale = "id" | "en";
+export interface AccountSheetItem {
+    label: string;
+    /** Second line under the label, for example the destination route. */
+    sublabel?: string;
+    icon: React.ReactNode;
+    onSelect: () => void;
+    /** `danger` marks the sign-out row. */
+    tone?: "default" | "danger";
+}
+export interface AccountSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    name: string;
+    detail: string;
+    initials: string;
+    items: AccountSheetItem[];
+    /** Slot above the rows, for example the Portal | Admin switch. */
+    switchSlot?: React.ReactNode;
+    signOutLabel?: string;
+    onSignOut?: () => void;
+    locale: AccountSheetLocale;
+    /** Overrides the built-in close label for this locale. */
+    closeLabel?: string;
+    /** Accessible name of the dialog. Defaults to the locale's profile label. */
+    label?: string;
+    className?: string;
+}
+/**
+ * The account sheet: who is signed in, the context switch, the account rows and
+ * sign out, as a bottom sheet on every screen width. Escape, the backdrop and
+ * the close button dismiss it; focus starts on the close button and returns to
+ * the trigger that opened it; every row is an ordinary button of at least 44px.
+ * The rows and their destinations are the caller's.
+ */
+export declare function AccountSheet({ open, onOpenChange, name, detail, initials, items, switchSlot, signOutLabel, onSignOut, locale, closeLabel, label, className, }: AccountSheetProps): React.JSX.Element;

package/dist/components/account-sheet.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconLogout, IconX } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Dialog, DialogContent } from "./dialog";
+const labels = {
+    id: { close: "Tutup profil", dialog: "Profil pengguna" },
+    en: { close: "Close profile", dialog: "User profile" },
+};
+/**
+ * The account sheet: who is signed in, the context switch, the account rows and
+ * sign out, as a bottom sheet on every screen width. Escape, the backdrop and
+ * the close button dismiss it; focus starts on the close button and returns to
+ * the trigger that opened it; every row is an ordinary button of at least 44px.
+ * The rows and their destinations are the caller's.
+ */
+export function AccountSheet({ open, onOpenChange, name, detail, initials, items, switchSlot, signOutLabel, onSignOut, locale, closeLabel, label, className, }) {
+    const l = labels[locale];
+    const closeRef = React.useRef(null);
+    const dialogLabel = label ?? l.dialog;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "account-sheet", showCloseButton: false, "aria-label": dialogLabel, onOpenAutoFocus: (event) => {
+                event.preventDefault();
+                closeRef.current?.focus();
+            }, className: cn("bottom-0 top-auto left-1/2 w-[min(420px,calc(100vw-24px))] translate-x-[-50%] translate-y-0 gap-0 overflow-hidden rounded-b-none rounded-t-[14px] border border-b-0 bg-card p-0 pb-[max(10px,env(safe-area-inset-bottom))]", className), children: [_jsx("span", { "aria-hidden": true, className: "mx-auto mt-2.5 h-[5px] w-[38px] rounded-full bg-brand-border" }), _jsxs("div", { className: "relative flex items-center gap-2.5 border-b border-brand-border px-4 pt-2 pb-3 pr-14", children: [_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-full bg-brand-red/8 text-[13px] font-extrabold text-brand-red", children: initials }), _jsxs("span", { className: "min-w-0", children: [_jsx("b", { className: "block truncate text-sm text-brand-ink", children: name }), _jsx("small", { className: "block truncate text-[11.5px] text-brand-muted", children: detail })] }), _jsx("button", { ref: closeRef, type: "button", "aria-label": closeLabel ?? l.close, onClick: () => onOpenChange(false), className: "absolute top-1 right-1 grid size-11 place-items-center rounded-[10px] text-brand-muted transition-colors hover:bg-secondary hover:text-brand-ink focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none", children: _jsx(IconX, { "aria-hidden": true, className: "size-[18px]" }) })] }), switchSlot ? _jsx("div", { className: "grid gap-1.5 px-4 pt-2.5", children: switchSlot }) : null, _jsxs("div", { className: "px-2 pt-1 pb-2.5", children: [items.map((item) => (_jsxs("button", { type: "button", onClick: item.onSelect, className: cn("flex min-h-11 w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-[13.5px] font-semibold transition-colors hover:bg-secondary focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none", item.tone === "danger" ? "text-destructive" : "text-brand-ink"), children: [_jsx("span", { "aria-hidden": true, className: cn("shrink-0 [&_svg]:size-4", item.tone === "danger" ? "text-destructive" : "text-brand-muted"), children: item.icon }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate", children: item.label }), item.sublabel ? _jsx("small", { className: "block text-xs font-normal text-brand-muted", children: item.sublabel }) : null] })] }, item.label))), onSignOut && signOutLabel ? (_jsxs("button", { type: "button", onClick: onSignOut, className: "mt-1 flex min-h-11 w-full items-center gap-2.5 rounded-lg border-t border-brand-border px-2.5 py-2 text-left text-[13.5px] font-semibold text-destructive transition-colors hover:bg-secondary focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none", children: [_jsx(IconLogout, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: signOutLabel })] })) : null] })] }) }));
+}

package/dist/components/admin-drawer.js

@@ -31,5 +31,5 @@ const sizeClass = {
 export function AdminDrawer({ open, onOpenChange, title, description, locale, closeLabel, backLabel, density = "default", step = 1, onBack, children, footer, onCloseAutoFocus, size = "md", className, }) {
     const isDesktop = useIsDesktop();
     const showBack = step === 2 && onBack !== undefined;
-    return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, direction: isDesktop ? "right" : "bottom", children: _jsxs(DrawerContent, { "data-admin-drawer": "", "data-size": size, onCloseAutoFocus: onCloseAutoFocus, "data-step": step, "data-density": density, className: cn("min-h-0 gap-0 p-0 text-foreground", "data-[vaul-drawer-direction=bottom]:max-h-[85vh]", sizeClass[size], density === "compact" && "text-[13px] leading-5", className), children: [_jsxs(DrawerHeader, { "data-vaul-no-drag": "", className: cn("shrink-0 flex-row items-start justify-between gap-3 border-b border-border p-4 text-left", density === "compact" && "p-3"), children: [_jsxs("div", { className: "min-w-0", children: [_jsx(DrawerTitle, { className: density === "compact" ? "text-sm leading-5" : "text-base leading-6", children: title }), description ? _jsx(DrawerDescription, { className: cn("break-words", density === "compact" && "text-xs leading-5"), children: description }) : null] }), _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: density === "compact" && isDesktop ? "icon-sm" : "icon", "aria-label": (closeLabel ?? labels[locale].close), className: "shrink-0", children: _jsx(IconX, { className: "size-4" }) }) })] }), _jsx("div", { "data-admin-drawer-body": "", className: cn("min-h-0 flex-1 overflow-y-auto p-4", density === "compact" && "p-3"), children: children }), showBack || footer ? (_jsxs(DrawerFooter, { "data-vaul-no-drag": "", "data-admin-drawer-footer": "", className: cn("shrink-0 flex-row flex-wrap items-center justify-end gap-2 border-t border-border bg-card p-4", density === "compact" && "p-3"), children: [showBack ? (_jsx(Button, { type: "button", variant: "outline", size: density === "compact" ? "sm" : "default", onClick: onBack, className: "mr-auto", children: (backLabel ?? labels[locale].back) })) : null, footer] })) : null] }) }));
+    return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, direction: isDesktop ? "right" : "bottom", children: _jsxs(DrawerContent, { "data-admin-drawer": "", "data-size": size, onCloseAutoFocus: onCloseAutoFocus, "data-step": step, "data-density": density, className: cn("min-h-0 gap-0 p-0 text-foreground", "data-[vaul-drawer-direction=bottom]:max-h-[85vh]", sizeClass[size], density === "compact" && "text-[13px] leading-5", className), children: [_jsxs(DrawerHeader, { "data-vaul-no-drag": "", className: cn("shrink-0 flex-row items-start justify-between gap-3 border-b border-border p-4 text-left", density === "compact" && "p-3"), children: [_jsxs("div", { className: "min-w-0", children: [_jsx(DrawerTitle, { className: density === "compact" ? "text-sm leading-5" : "text-base leading-6", children: title }), description ? _jsx(DrawerDescription, { className: cn("break-words", density === "compact" && "text-xs leading-5"), children: description }) : null] }), _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: density === "compact" && isDesktop ? "icon-sm" : "icon", "aria-label": (closeLabel ?? labels[locale].close), className: "shrink-0 max-[600px]:size-11", children: _jsx(IconX, { className: "size-4" }) }) })] }), _jsx("div", { "data-admin-drawer-body": "", className: cn("min-h-0 flex-1 overflow-y-auto p-4", density === "compact" && "p-3"), children: children }), showBack || footer ? (_jsxs(DrawerFooter, { "data-vaul-no-drag": "", "data-admin-drawer-footer": "", className: cn("shrink-0 flex-row flex-wrap items-center justify-end gap-2 border-t border-border bg-card p-4", density === "compact" && "p-3"), children: [showBack ? (_jsx(Button, { type: "button", variant: "outline", size: density === "compact" ? "sm" : "default", onClick: onBack, className: "mr-auto", children: (backLabel ?? labels[locale].back) })) : null, footer] })) : null] }) }));
 }

package/dist/components/admin-top-bar.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+export type TopBarLocale = "id" | "en";
+export interface TopBarPathItem {
+    label: string;
+    /** Only the last path segment is a link; the title carries the current page. */
+    href?: string;
+}
+export interface AdminTopBarIdentity {
+    name: string;
+    initials: string;
+}
+export interface AdminTopBarProps {
+    /** Trail above the current page, for example Admin › Organisasi. */
+    path?: TopBarPathItem[];
+    /** The current page title; it ends the trail and is reported as the current page. */
+    title: string;
+    /** Quiet ambient facts (a date, a timezone), hidden below 1100px to keep the bar calm. */
+    meta?: React.ReactNode[];
+    /** Right-hand controls; the bar raises them to the 44px touch floor below 600px. */
+    actions?: React.ReactNode;
+    /** Renders the bell. It carries the locale accessible name. */
+    onNotificationsClick?: () => void;
+    /** Unread count beside the bell; announced with the button's name. */
+    notificationCount?: number;
+    identity?: AdminTopBarIdentity;
+    /** Makes the identity a button that opens the account sheet. */
+    onIdentityClick?: () => void;
+    /** Phone brand lock-up: the logo, its alt text and the label beside it. */
+    brand?: {
+        src: string;
+        alt: string;
+        label: string;
+    };
+    /** Slot at the very start of the bar, for example a sidebar toggle. */
+    leading?: React.ReactNode;
+    /** The shell mounts exactly one variant, so only one `<header>` landmark exists. */
+    variant: "desktop" | "phone";
+    locale: TopBarLocale;
+    className?: string;
+}
+/**
+ * The admin shell's top bar. Desktop: the breadcrumb trail, quiet facts, the
+ * bar's actions and the identity. Phone: the brand, one workspace slot in
+ * `leading` and the 44px identity target. The bar owns no route and no session;
+ * labels, links and callbacks arrive as props.
+ */
+export declare function AdminTopBar({ path, title, meta, actions, onNotificationsClick, notificationCount, identity, onIdentityClick, brand, leading, variant, locale, className, }: AdminTopBarProps): React.JSX.Element;

package/dist/components/admin-top-bar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBell, IconChevronRight } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+const labels = {
+    id: { breadcrumb: "Jejak halaman", notifications: "Notifikasi", identity: "Profil pengguna", brand: "PPI Jepang" },
+    en: { breadcrumb: "Breadcrumb", notifications: "Notifications", identity: "User profile", brand: "PPI Japan" },
+};
+/**
+ * The admin shell's top bar. Desktop: the breadcrumb trail, quiet facts, the
+ * bar's actions and the identity. Phone: the brand, one workspace slot in
+ * `leading` and the 44px identity target. The bar owns no route and no session;
+ * labels, links and callbacks arrive as props.
+ */
+export function AdminTopBar({ path = [], title, meta = [], actions, onNotificationsClick, notificationCount, identity, onIdentityClick, brand, leading, variant, locale, className, }) {
+    const l = labels[locale];
+    if (variant === "phone") {
+        return (_jsxs("header", { "data-slot": "admin-top-bar", "data-variant": "phone", className: cn("sticky top-0 z-25 flex h-15 shrink-0 items-center justify-between border-b border-brand-border bg-card px-4", className), children: [brand ? (_jsxs("span", { className: "flex min-w-0 items-center gap-2 text-[15px] font-bold text-brand-ink", children: [_jsx("img", { src: brand.src, alt: brand.alt, className: "size-[34px] shrink-0 rounded-md border border-brand-border object-contain" }), _jsx("span", { className: "truncate", children: brand.label })] })) : (_jsx("span", { className: "truncate text-[15px] font-bold text-brand-ink", children: title })), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [leading, identity ? (_jsx("button", { type: "button", onClick: onIdentityClick, "aria-label": identity.name, "aria-haspopup": onIdentityClick ? "dialog" : undefined, className: "grid size-11 shrink-0 place-items-center rounded-[10px] bg-brand-red/8 text-[13px] font-extrabold text-brand-red focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none", children: identity.initials })) : null] })] }));
+    }
+    return (_jsxs("header", { "data-slot": "admin-top-bar", "data-variant": "desktop", className: cn("flex h-17 shrink-0 items-center justify-between gap-4 border-b border-brand-border bg-card px-[clamp(24px,3vw,48px)]", className), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [leading, _jsx("nav", { "aria-label": l.breadcrumb, className: "min-w-0", children: _jsxs("ol", { className: "flex min-w-0 items-center gap-2.5 text-sm text-brand-muted", children: [path.map((item, index) => (_jsxs("li", { className: "flex min-w-0 items-center gap-2.5", children: [item.href ? (_jsx("a", { href: item.href, className: "truncate hover:text-brand-ink", children: item.label })) : (_jsx("span", { className: "truncate", children: item.label })), _jsx(IconChevronRight, { "aria-hidden": true, className: "size-4 shrink-0 text-brand-border" })] }, `${item.label}-${index}`))), _jsx("li", { className: "min-w-0", children: _jsx("strong", { "aria-current": "page", className: "block truncate font-bold text-brand-ink", children: title }) })] }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2.5 text-[13px] text-brand-muted", children: [meta.length ? (_jsx("span", { className: "hidden items-center gap-2.5 min-[1100px]:flex", children: meta.map((item, index) => (_jsx("span", { children: item }, index))) })) : null, actions || onNotificationsClick ? (_jsxs("span", { className: "flex items-center gap-1.5 max-[600px]:[&_[data-slot=button]]:min-h-11 min-[600px]:[&_[data-slot=button]]:min-h-8", children: [actions, onNotificationsClick ? (_jsxs("button", { type: "button", onClick: onNotificationsClick, "aria-label": notificationCount ? `${l.notifications}, ${notificationCount}` : l.notifications, className: "relative grid size-8 place-items-center rounded-md text-brand-muted transition-colors hover:bg-secondary hover:text-brand-ink focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none max-[600px]:size-11", children: [_jsx(IconBell, { "aria-hidden": true, className: "size-5" }), notificationCount ? (_jsx("span", { "aria-hidden": true, className: "absolute -top-0.5 -right-0.5 grid min-w-4.5 place-items-center rounded-full bg-brand-red px-1 text-[11px] leading-4.5 font-bold text-white", children: notificationCount })) : null] })) : null] })) : null, identity ? (onIdentityClick ? (_jsxs("button", { type: "button", onClick: onIdentityClick, "aria-label": identity.name, "aria-haspopup": "dialog", className: "flex items-center gap-2 rounded-full pr-1 pl-0.5 transition-colors hover:bg-secondary focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none max-[600px]:min-h-11 min-[600px]:h-8", children: [_jsx("span", { "aria-hidden": true, className: "grid size-8 place-items-center rounded-full bg-brand-red/8 text-xs font-extrabold text-brand-red", children: identity.initials }), _jsx("span", { className: "hidden max-w-40 truncate font-bold text-brand-ink min-[900px]:block", children: identity.name })] })) : (_jsxs("span", { className: "flex items-center gap-2 max-[600px]:min-h-11 min-[600px]:h-8", children: [_jsx("span", { "aria-hidden": true, className: "grid size-8 place-items-center rounded-full bg-brand-red/8 text-xs font-extrabold text-brand-red", children: identity.initials }), _jsx("span", { className: "hidden max-w-40 truncate font-bold text-brand-ink min-[900px]:block", children: identity.name })] }))) : null] })] }));
+}

package/dist/components/bar-chart.d.ts

@@ -0,0 +1,32 @@
+export interface BarChartDatum {
+    label: string;
+    value: number;
+    /** Short context for the bar, for example "12 pendaftaran". */
+    hint?: string;
+}
+export interface BarChartProps {
+    data: BarChartDatum[];
+    /** `vertical` is the monthly trend; `horizontal` the facet distribution. */
+    orientation?: "vertical" | "horizontal";
+    /** Paints the newest bar in brand red, the earlier ones in the tint. */
+    highlightLast?: boolean;
+    /** Scale ceiling; defaults to the largest value, never below 1. */
+    max?: number;
+    /** Chart height in pixels for the vertical orientation. Default 150. */
+    height?: number;
+    formatValue?: (value: number) => string;
+    /** Hairlines behind the vertical bars. */
+    gridLines?: boolean;
+    /** `table` adds a screen-reader `<table>` carrying the same numbers. */
+    fallback?: "table" | "none";
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * The bar chart: a monthly trend read top to bottom, or a facet distribution
+ * read left to right. Both orientations are divs on the token palette, so no
+ * chart library and no SVG maths is needed. Every bar carries a `title` and its
+ * label, a small value keeps a 4px visible bar, and `fallback="table"` gives a
+ * screen reader the same numbers.
+ */
+export declare function BarChart({ data, orientation, highlightLast, max, height, formatValue, gridLines, fallback, ariaLabel, className, }: BarChartProps): import("react").JSX.Element;

package/dist/components/bar-chart.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+const defaultFormat = (value) => value.toLocaleString("id-ID");
+/**
+ * The bar chart: a monthly trend read top to bottom, or a facet distribution
+ * read left to right. Both orientations are divs on the token palette, so no
+ * chart library and no SVG maths is needed. Every bar carries a `title` and its
+ * label, a small value keeps a 4px visible bar, and `fallback="table"` gives a
+ * screen reader the same numbers.
+ */
+export function BarChart({ data, orientation = "vertical", highlightLast = false, max, height = 150, formatValue = defaultFormat, gridLines = false, fallback = "none", ariaLabel, className, }) {
+    const ceiling = Math.max(max ?? 0, 1, ...data.map((item) => item.value));
+    const summary = data.length
+        ? data.map((item) => `${item.label} ${formatValue(item.value)}${item.hint ? ` (${item.hint})` : ""}`).join(", ")
+        : "Tidak ada data";
+    const table = fallback === "table" ? (_jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: ariaLabel ?? summary }), _jsx("tbody", { children: data.map((item) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: item.label }), _jsx("td", { children: formatValue(item.value) }), _jsx("td", { children: item.hint ?? "" })] }, item.label))) })] })) : null;
+    if (orientation === "horizontal") {
+        return (_jsxs("div", { "data-slot": "bar-chart", "data-orientation": "horizontal", className: cn("grid min-w-0 gap-3", className), children: [_jsx("ol", { role: "img", "aria-label": ariaLabel ?? summary, className: "grid list-none gap-2.5", children: data.map((item) => {
+                        const pct = ceiling > 0 ? (item.value / ceiling) * 100 : 0;
+                        return (_jsxs("li", { className: "grid grid-cols-[minmax(96px,150px)_minmax(0,1fr)_52px] items-center gap-2.5 text-[13px]", children: [_jsx("span", { className: "min-w-0 truncate text-brand-ink", children: item.label }), _jsx("span", { className: "h-2.5 min-w-0 overflow-hidden rounded-full bg-secondary", children: _jsx("span", { className: "block h-full rounded-full bg-brand-red", style: { width: `${pct}%` }, title: item.hint ?? `${item.label}: ${formatValue(item.value)}` }) }), _jsx("strong", { className: "text-right font-extrabold tabular-nums text-brand-ink", children: formatValue(item.value) })] }, item.label));
+                    }) }), table] }));
+    }
+    return (_jsxs("div", { "data-slot": "bar-chart", "data-orientation": "vertical", className: cn("grid min-w-0 gap-2", className), children: [_jsxs("div", { role: "img", "aria-label": ariaLabel ?? summary, className: "relative flex items-stretch gap-2", style: { height }, children: [gridLines ? (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 grid grid-rows-4", children: [0, 1, 2, 3].map((line) => (_jsx("span", { className: "border-t border-dashed border-brand-border" }, line))) })) : null, data.map((item, index) => {
+                        const pct = ceiling > 0 ? (item.value / ceiling) * 100 : 0;
+                        const last = index === data.length - 1;
+                        return (_jsxs("span", { className: "flex min-w-0 flex-1 flex-col justify-end gap-1.5", children: [_jsx("span", { className: "text-center text-[10px] font-semibold text-brand-muted tabular-nums", children: formatValue(item.value) }), _jsx("span", { className: cn("block min-h-1 w-full rounded-t-[3px]", highlightLast && last ? "bg-brand-red" : "bg-[#efbbc4]"), style: { height: `${pct}%` }, title: item.hint ?? `${item.label}: ${formatValue(item.value)}` })] }, item.label));
+                    })] }), _jsx("div", { "aria-hidden": true, className: "flex gap-2", children: data.map((item) => (_jsx("span", { className: "min-w-0 flex-1 truncate text-center text-[10px] text-brand-muted", children: item.label }, item.label))) }), table] }));
+}

package/dist/components/callout.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type CalloutTone = "info" | "success" | "warning" | "danger" | "neutral";
+export interface CalloutProps {
+    tone?: CalloutTone;
+    /** Leading Tabler icon. The component hides it from assistive technology. */
+    icon?: React.ReactNode;
+    title?: string;
+    children: React.ReactNode;
+    /** Inline control slot, for example the "Lengkapi data" Button. */
+    action?: React.ReactNode;
+    /** `compact` is the admin drawer note: a 12px body with 10px padding. */
+    density?: "default" | "compact";
+    className?: string;
+}
+/**
+ * One inline note: a colour step, an optional icon, a title and a body, plus
+ * one action. Replaces the flag, claim, read-only, sample-note, audit-note,
+ * study-prompt, section-note, drawer-stamp and drawer-note rules. Text contrast
+ * is checked per tone: the lightest is 5.7:1 against its own surface.
+ */
+export declare function Callout({ tone, icon, title, children, action, density, className }: CalloutProps): React.JSX.Element;

package/dist/components/callout.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+/** The prototype's nine inline notes: the same shape, four urgency steps and a quiet neutral. */
+const TONES = {
+    info: "bg-[#f0f4fa] text-[#4c627b]",
+    success: "bg-[#f1f5f3] text-[#35604a]",
+    warning: "bg-[#fff5e6] text-[#7c5014]",
+    danger: "border border-[#f0ccd4] bg-[#fdf2f4] text-[#8f1730]",
+    neutral: "border border-[#e6eaed] bg-[#f8fafb] text-[#56636d]",
+};
+/** `role="alert"` interrupts, so only the tone that reports a problem claims it. */
+const ROLES = {
+    info: "status",
+    success: "status",
+    warning: undefined,
+    danger: "alert",
+    neutral: undefined,
+};
+/**
+ * One inline note: a colour step, an optional icon, a title and a body, plus
+ * one action. Replaces the flag, claim, read-only, sample-note, audit-note,
+ * study-prompt, section-note, drawer-stamp and drawer-note rules. Text contrast
+ * is checked per tone: the lightest is 5.7:1 against its own surface.
+ */
+export function Callout({ tone = "info", icon, title, children, action, density = "default", className }) {
+    const compact = density === "compact";
+    return (_jsxs("div", { "data-slot": "callout", "data-tone": tone, role: ROLES[tone], className: cn("rounded-lg", compact ? "px-3 py-2.5 text-xs leading-5" : "px-3.5 py-3 text-[13px] leading-5", TONES[tone], className), children: [_jsxs("div", { className: "flex items-start gap-2.5", children: [icon ? (_jsx("span", { "aria-hidden": true, className: "mt-0.5 shrink-0 [&_svg]:size-[18px]", children: icon })) : null, _jsxs("div", { className: "min-w-0", children: [title ? _jsx("strong", { className: cn("block font-bold", compact ? "text-xs" : "text-[13px]"), children: title }) : null, _jsx("div", { className: cn("min-w-0", title && "mt-0.5 text-xs"), children: children })] })] }), action ? (_jsx("div", { className: cn("mt-2.5 flex flex-wrap items-center gap-2", icon && "min-[600px]:pl-7", "max-[600px]:[&_[data-slot=button]]:min-h-11"), children: action })) : null] }));
+}

package/dist/components/distribution-bar.d.ts

@@ -0,0 +1,25 @@
+export interface DistributionSegment {
+    label: string;
+    value: number;
+    /** Defaults to the token ramp: brand red first, then its tints, then the neutral greys. */
+    color?: string;
+}
+export interface DistributionBarProps {
+    segments: DistributionSegment[];
+    /** `sm` is the 8px figures-band bar, `md` the 12px stacked bar. A taller card bar takes `className="h-[18px]"`. */
+    size?: "sm" | "md";
+    /** `inline` is the figures-band legend, `list` the Statistik legend with counts. */
+    legend?: "list" | "inline" | "none";
+    /** Adds a labelled total row to the `list` legend. */
+    totalLabel?: string;
+    formatValue?: (value: number) => string;
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * One stacked bar: the completeness split on the dashboard figures band, the
+ * degree composition beside it and the Statistik completeness card. Every
+ * segment carries its own `title`, the legend is text rather than colour alone,
+ * and the accessible name names every segment with its count.
+ */
+export declare function DistributionBar({ segments, size, legend, totalLabel, formatValue, ariaLabel, className }: DistributionBarProps): import("react").JSX.Element;

package/dist/components/distribution-bar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+const PALETTE = ["var(--brand-red)", "#efbbc4", "#c6ccd2", "#fae6e9", "#1c1f23"];
+const defaultFormat = (value) => value.toLocaleString("id-ID");
+/**
+ * One stacked bar: the completeness split on the dashboard figures band, the
+ * degree composition beside it and the Statistik completeness card. Every
+ * segment carries its own `title`, the legend is text rather than colour alone,
+ * and the accessible name names every segment with its count.
+ */
+export function DistributionBar({ segments, size = "sm", legend = "list", totalLabel, formatValue = defaultFormat, ariaLabel, className }) {
+    const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+    const summary = segments.length
+        ? segments.map((segment) => `${segment.label} ${formatValue(segment.value)}`).join(", ")
+        : "Tidak ada data";
+    return (_jsxs("div", { "data-slot": "distribution-bar", "data-size": size, className: cn("grid min-w-0 gap-2", className), children: [_jsx("div", { role: "img", "aria-label": ariaLabel ?? summary, className: cn("flex min-w-0 gap-0.5 overflow-hidden", size === "sm" ? "h-2 rounded-full" : "h-3 rounded-md"), children: segments.map((segment, index) => {
+                    const pct = total > 0 ? (segment.value / total) * 100 : 0;
+                    const color = segment.color ?? PALETTE[index % PALETTE.length];
+                    return pct > 0 ? (_jsx("span", { className: "block h-full min-w-0", style: { width: `${pct}%`, background: color }, title: `${segment.label}: ${formatValue(segment.value)}` }, segment.label)) : null;
+                }) }), legend === "inline" ? (_jsx("p", { className: "flex min-w-0 flex-wrap gap-x-3 gap-y-1 text-[11px] text-brand-muted", children: segments.map((segment, index) => (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: { background: segment.color ?? PALETTE[index % PALETTE.length] } }), _jsxs("span", { className: "truncate", children: [segment.label, " ", _jsx("strong", { className: "font-bold text-brand-ink tabular-nums", children: formatValue(segment.value) })] })] }, segment.label))) })) : null, legend === "list" ? (_jsxs("ul", { className: "flex min-w-0 flex-wrap gap-x-[18px] gap-y-2 text-xs text-brand-muted", children: [segments.map((segment, index) => (_jsxs("li", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: { background: segment.color ?? PALETTE[index % PALETTE.length] } }), _jsx("span", { className: "truncate", children: segment.label }), _jsx("strong", { className: "font-bold text-brand-ink tabular-nums", children: formatValue(segment.value) })] }, segment.label))), totalLabel ? (_jsxs("li", { className: "flex min-w-0 items-center gap-1.5 border-t border-brand-border pt-1.5", children: [_jsx("span", { className: "truncate font-semibold text-brand-ink", children: totalLabel }), _jsx("strong", { className: "font-extrabold text-brand-ink tabular-nums", children: formatValue(total) })] })) : null] })) : null] }));
+}

package/dist/components/document-viewer.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { type FactListItem } from "./fact-list";
+export type DocumentViewerLocale = "id" | "en";
+export interface DocumentSide {
+    id: string;
+    /** Tab label, for example "Sisi depan". */
+    label: string;
+    kind: "image" | "pdf";
+    /** File name in the file row. */
+    name: string;
+    /** Quiet line under the name, for example "Berkas contoh · JPG". */
+    meta?: string;
+}
+export interface DocumentViewerProps {
+    /** The sides the document has; one or two in practice. */
+    sides: DocumentSide[];
+    /** The selected side id. */
+    value: string;
+    onChange: (id: string) => void;
+    /** The app's preview stage: the real image, the PDF viewer or a placeholder. */
+    children: React.ReactNode;
+    /** Facts under the stage, for example the document's own fields. */
+    facts?: FactListItem[];
+    loading?: boolean;
+    emptyLabel?: string;
+    locale: DocumentViewerLocale;
+    /** Accessible name of the stage region. */
+    label?: string;
+    className?: string;
+}
+/**
+ * The student-card frame: the side switcher, the file row, the app's preview
+ * stage and the document's own facts. The file itself and the preview stay
+ * app-side; this component owns the frame, the accessible names and the
+ * loading and empty states. Side tabs are 44px below 600px and 32px from
+ * 600px up, and the facts list is one column on a phone.
+ */
+export declare function DocumentViewer({ sides, value, onChange, children, facts, loading, emptyLabel, locale, label, className }: DocumentViewerProps): React.JSX.Element;

package/dist/components/document-viewer.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconFileTypePdf, IconPhoto } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { FactList } from "./fact-list";
+import { Skeleton } from "./skeleton";
+const labels = {
+    id: { preview: "Pratinjau berkas", image: "Berkas gambar", pdf: "Berkas PDF", empty: "Tidak ada dokumen untuk ditampilkan.", loading: "Memuat pratinjau dokumen" },
+    en: { preview: "File preview", image: "Image file", pdf: "PDF file", empty: "No document to show.", loading: "Loading the document preview" },
+};
+/**
+ * The student-card frame: the side switcher, the file row, the app's preview
+ * stage and the document's own facts. The file itself and the preview stay
+ * app-side; this component owns the frame, the accessible names and the
+ * loading and empty states. Side tabs are 44px below 600px and 32px from
+ * 600px up, and the facts list is one column on a phone.
+ */
+export function DocumentViewer({ sides, value, onChange, children, facts, loading = false, emptyLabel, locale, label, className }) {
+    const l = labels[locale];
+    const selected = sides.find((side) => side.id === value) ?? sides[0];
+    const stageName = label ?? l.preview;
+    if (!sides.length) {
+        return (_jsx("div", { "data-slot": "document-viewer", className: cn("grid rounded-[11px] border border-[#dce3e7] bg-card p-5 text-[13px] text-brand-muted", className), children: emptyLabel ?? l.empty }));
+    }
+    return (_jsxs("div", { "data-slot": "document-viewer", "data-loading": loading, className: cn("grid min-w-0 gap-3", className), children: [sides.length > 1 ? (_jsx("div", { role: "group", "aria-label": stageName, className: "inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-[9px] border border-[#e4e8eb] bg-card p-[3px]", children: sides.map((side) => (_jsx("button", { type: "button", "aria-pressed": side.id === selected?.id, onClick: () => onChange(side.id), className: cn("min-h-11 shrink-0 rounded-[7px] px-3 text-[13px] font-semibold transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none min-[600px]:min-h-8", side.id === selected?.id ? "bg-secondary text-brand-ink" : "text-brand-muted hover:text-brand-ink"), children: side.label }, side.id))) })) : null, _jsxs("div", { className: "overflow-hidden rounded-[11px] border border-[#dce3e7] bg-card", children: [selected ? (_jsxs("div", { className: "flex items-center gap-3 border-b border-[#e4e9ec] px-4 py-3 text-brand-red", children: [_jsx("span", { role: "img", "aria-label": selected.kind === "pdf" ? l.pdf : l.image, className: "shrink-0", children: selected.kind === "pdf" ? _jsx(IconFileTypePdf, { "aria-hidden": true, className: "size-[22px]" }) : _jsx(IconPhoto, { "aria-hidden": true, className: "size-[22px]" }) }), _jsxs("span", { className: "grid min-w-0 gap-0.5", children: [_jsx("strong", { className: "truncate text-sm text-brand-ink", children: selected.name }), selected.meta ? _jsx("span", { className: "truncate text-xs text-brand-muted", children: selected.meta }) : null] })] })) : null, _jsx("div", { role: "region", "aria-label": stageName, "aria-live": "polite", className: "grid min-h-[220px] place-items-center bg-card p-5", children: loading ? (_jsxs("div", { role: "status", "aria-busy": "true", "aria-label": l.loading, className: "grid w-full max-w-[300px] gap-3", children: [_jsx(Skeleton, { "aria-hidden": "true", className: "h-[178px] w-full rounded-lg" }), _jsx(Skeleton, { "aria-hidden": "true", className: "h-4 w-2/3" }), _jsx(Skeleton, { "aria-hidden": "true", className: "h-4 w-1/3" })] })) : (children) }), facts?.length ? _jsx(FactList, { variant: "twoColumn", items: facts, className: "border-t border-[#e4e9ec] bg-[#fbfcfc] px-4 py-3.5" }) : null] })] }));
+}

package/dist/components/expandable-text.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface ExpandableTextProps {
+    /** The text to clamp. Only a string: the clamp needs the text itself. */
+    children: string;
+    /** Lines shown before the toggle appears. Default 3. */
+    lines?: number;
+    /** Starts expanded; the component is uncontrolled. Default false. */
+    defaultExpanded?: boolean;
+    /** Toggle label while clamped. Default "Lihat selengkapnya". */
+    expandLabel?: string;
+    /** Toggle label while expanded. Default "Tampilkan lebih sedikit". */
+    collapseLabel?: string;
+    className?: string;
+}
+/**
+ * Long text clamped to a few lines with a Lihat selengkapnya toggle. The clamp
+ * is CSS, so the whole text stays in the accessibility tree and stays findable;
+ * the toggle only appears when the text actually overflows, and it reports
+ * `aria-expanded`.
+ */
+export declare function ExpandableText({ children, lines, defaultExpanded, expandLabel, collapseLabel, className }: ExpandableTextProps): React.JSX.Element;

package/dist/components/expandable-text.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+/**
+ * Long text clamped to a few lines with a Lihat selengkapnya toggle. The clamp
+ * is CSS, so the whole text stays in the accessibility tree and stays findable;
+ * the toggle only appears when the text actually overflows, and it reports
+ * `aria-expanded`.
+ */
+export function ExpandableText({ children, lines = 3, defaultExpanded = false, expandLabel = "Lihat selengkapnya", collapseLabel = "Tampilkan lebih sedikit", className }) {
+    const textRef = React.useRef(null);
+    const [expanded, setExpanded] = React.useState(defaultExpanded);
+    const [canExpand, setCanExpand] = React.useState(false);
+    // The clamp is applied while collapsed, so overflow is measurable. Expanded
+    // text is not re-measured: `canExpand` keeps its last value so the collapse
+    // direction stays available.
+    React.useEffect(() => {
+        const element = textRef.current;
+        if (!element)
+            return;
+        // Only measure while clamped: expanded text cannot overflow its clamp box.
+        if (expanded) {
+            setCanExpand(true);
+            return;
+        }
+        const measure = () => setCanExpand(element.scrollHeight > element.clientHeight + 1);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [children, lines, expanded]);
+    return (_jsxs("span", { "data-slot": "expandable-text", className: cn("grid justify-items-start gap-1", className), children: [_jsx("span", { ref: textRef, className: cn("block min-w-0 break-words", !expanded && "overflow-hidden"), style: expanded ? undefined : { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lines }, children: children }), canExpand ? (_jsx("button", { type: "button", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), className: cn("-ml-px text-left text-[13px] font-bold text-brand-red underline-offset-2 hover:underline", "min-h-8 max-[600px]:min-h-11", "focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"), children: expanded ? collapseLabel : expandLabel })) : null] }));
+}

package/dist/components/fact-list.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export interface FactListItem {
+    label: string;
+    value: React.ReactNode;
+    /** Spans the full width in the column variants, for example a long address. */
+    span?: boolean;
+    /** Quiets the value, for text that is absent or not applicable. */
+    muted?: boolean;
+}
+export type FactListVariant = "rows" | "inline" | "twoColumn";
+export interface FactListProps {
+    items: FactListItem[];
+    /**
+     * `rows` is the drawer detail: a fixed 96px term column, one fact per row,
+     * with a hairline between rows. `twoColumn` stacks term over value in two
+     * columns, for review field groups. `inline` puts the value beside its term,
+     * two facts per row, for short document facts. Both column variants collapse
+     * to one column below 600px; `rows` keeps its term column on a phone.
+     */
+    variant?: FactListVariant;
+    /** A final emphasised row, for example a coverage total. */
+    total?: {
+        label: string;
+        value: React.ReactNode;
+    };
+    /** Shown instead of the list when there is nothing to show. */
+    emptyLabel?: string;
+    className?: string;
+}
+/**
+ * Term and value rows: the drawer detail, the review field groups, the document
+ * facts, the coverage list, the role detail and the invite summary. It renders
+ * a real `<dl>`, so every term stays beside its value and a masked value keeps
+ * its own label. Presentation only; the page decides what each value says.
+ */
+export declare function FactList({ items, variant, total, emptyLabel, className }: FactListProps): React.JSX.Element | null;

package/dist/components/fact-list.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+const listClass = {
+    rows: "grid",
+    twoColumn: "grid grid-cols-2 gap-x-5 gap-y-3 max-[600px]:grid-cols-1",
+    inline: "grid grid-cols-2 gap-x-5 gap-y-2.5 max-[600px]:grid-cols-1",
+};
+const itemClass = {
+    rows: "grid min-w-0 grid-cols-[96px_minmax(0,1fr)] items-baseline gap-x-3 border-b border-brand-border py-2",
+    twoColumn: "grid min-w-0 gap-0.5",
+    inline: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-2",
+};
+const valueClass = {
+    rows: "text-[13px] font-semibold",
+    twoColumn: "text-sm font-semibold",
+    inline: "text-[13px] font-semibold",
+};
+/**
+ * Term and value rows: the drawer detail, the review field groups, the document
+ * facts, the coverage list, the role detail and the invite summary. It renders
+ * a real `<dl>`, so every term stays beside its value and a masked value keeps
+ * its own label. Presentation only; the page decides what each value says.
+ */
+export function FactList({ items, variant = "rows", total, emptyLabel, className }) {
+    if (!items.length && !total) {
+        return emptyLabel ? _jsx("p", { "data-slot": "fact-list-empty", className: cn("m-0 text-[13px] text-brand-muted", className), children: emptyLabel }) : null;
+    }
+    return (_jsxs("dl", { "data-slot": "fact-list", "data-variant": variant, className: cn("m-0", listClass[variant], className), children: [items.map((item, index) => (_jsxs("div", { className: cn(itemClass[variant], item.span && "col-span-full max-[600px]:col-span-1"), children: [_jsx("dt", { className: "text-xs text-brand-muted", children: item.label }), _jsx("dd", { className: cn("m-0 break-words", valueClass[variant], item.muted ? "text-brand-muted" : "text-brand-ink"), children: item.value })] }, `${item.label}-${index}`))), total ? (_jsxs("div", { className: "col-span-full flex items-baseline justify-between gap-3 border-t border-brand-border pt-2.5", children: [_jsx("dt", { className: "text-xs text-brand-muted", children: total.label }), _jsx("dd", { className: "m-0 text-sm font-bold text-brand-ink", children: total.value })] })) : null] }));
+}

package/dist/components/figures-band.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export interface FiguresBandGroup {
+    label: string;
+    /** The headline figure, already formatted by the page. */
+    value: string;
+    /** `warn` marks a figure that needs attention without changing its size. */
+    tone?: "default" | "warn";
+    /** The quiet lines under the value; the page states the numbers here too. */
+    sub?: React.ReactNode;
+    /** Decoration under the sub-line, for example a DistributionBar. Always hidden from assistive technology. */
+    visual?: React.ReactNode;
+    linkLabel: string;
+    onSelect: () => void;
+}
+export interface FiguresBandProps {
+    title: string;
+    description?: string;
+    groups: FiguresBandGroup[];
+    /** Columns from 1101px up. Defaults to the group count, capped at four. */
+    columns?: number;
+    className?: string;
+}
+/**
+ * The grouped figures band: one headline per question, its quiet context and a
+ * deep link, with an optional visual under each group. The dashboard's national
+ * and komsat scopes are the two instances. Presentation only: the metric choice
+ * and the numbers are the page's, and the visual slot is decoration because the
+ * sub-line already states the same figures.
+ */
+export declare function FiguresBand({ title, description, groups, columns, className }: FiguresBandProps): React.JSX.Element;
+/** The 3px separator the prototype drew between two sub-line facts. */
+export declare function FiguresBandSeparator(): React.JSX.Element;