ppij-design-system 0.0.0-stage → 0.2.0

package/dist/components/member-card.css

@@ -0,0 +1,92 @@
+/* Member card (openspec/changes/revamp-member-card). Values follow reference/styles.css; the flip is CSS, not react-card-flip. */
+
+.mc-fit { width:100%; max-width:350px; margin:0 auto; }
+.mc-hit { all:unset; display:block; width:350px; height:221px; cursor:pointer; border-radius:16px; margin:14px 0; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
+.mc-hit:focus-visible { outline:2px solid var(--brand-red, #c8102e); outline-offset:4px; }
+.mc-tilt { width:350px; height:221px; border-radius:16px; }
+.mc-tilt > div, .mc-flip { width:350px; height:221px; }
+.mc-flip { position:relative; border-radius:16px; transform-style:preserve-3d; transition:transform .6s; }
+.mc-flip.is-flipped { transform:rotateY(180deg); }
+.mc-face-wrap { position:absolute; left:0; top:0; width:350px; height:221px; border-radius:16px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
+.mc-back-wrap { transform:rotateY(180deg); }
+@media (prefers-reduced-motion: reduce) { .mc-flip { transition:none; } }
+
+.mc-face { box-shadow:0 26px 30px -14px rgba(28,31,35,.4); position:relative; overflow:hidden; width:350px; height:221px; border-radius:16px; border:1px solid #e3e5e8; padding:20px; display:flex; flex-direction:column; justify-content:space-between; color:#1c1f23;
+  background: repeating-linear-gradient(45deg, rgba(28,31,35,.028) 0 1px, transparent 1px 6px), linear-gradient(135deg,#fff 0%,#f1f2f4 100%); }
+/* Artwork has its own clipped viewport; it cannot enter the name column or footer. */
+.mc-front { background:var(--mc-base, #fff); }
+.mc-art { position:absolute; left:64%; top:23%; width:31%; height:47%; overflow:hidden; pointer-events:none; }
+.mc-front .mc-id { position:absolute; left:20px; top:98px; width:calc(64% - 24px); gap:3px; }
+.mc-front .mc-name { height:40px; font-size:17px; line-height:20px; text-wrap:wrap; }
+.mc-front .mc-number { font-size:12px; line-height:15px; }
+.mc-front .mc-note { font-size:11px; line-height:11px; max-height:22px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
+.mc-front .mc-foot { position:absolute; left:20px; right:20px; bottom:14px; height:36px; gap:8px; }
+.mc-front .mc-col:first-child { min-width:0; flex:1; }
+.mc-front .mc-right { flex:0 0 92px; }
+.mc-front .mc-label { font-size:10px; line-height:11px; }
+.mc-front .mc-val { font-size:11.5px; line-height:12px; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
+.mc-front.mc-grace, .mc-front.mc-expired { background:#eceded; }
+.mc-grace .mc-art, .mc-expired .mc-art { filter:grayscale(1); opacity:.5; }
+.mc-front.mc-suspended { background:#fef2f2; }
+.mc-suspended .mc-art { display:none; }
+.mc-theme-grid { display:grid; gap:20px; }
+.mc-theme-group h3 { margin:0 0 8px; font-size:13px; font-weight:600; color:#1c1f23; }
+.mc-theme-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
+@media (min-width:480px) { .mc-theme-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } }
+.mc-tile { position:relative; display:grid; gap:6px; padding:6px; border:1px solid #e3e5e8; border-radius:10px; background:#fff; cursor:pointer; font:inherit; text-align:left; }
+.mc-tile:hover { border-color:#c9ccd1; }
+.mc-tile:focus-visible { outline:2px solid #c8102e; outline-offset:2px; }
+.mc-tile-on { border-color:#c8102e; box-shadow:0 0 0 1px #c8102e; }
+.mc-thumb { display:block; aspect-ratio:350/221; border-radius:6px; overflow:hidden; }
+.mc-thumb svg { display:block; width:100%; height:100%; }
+.mc-thumb-auto { display:grid; place-items:center; background:#f5f5f4; color:#5b6168; font-size:12px; font-weight:600; }
+.mc-tile-label { font-size:12px; line-height:1.35; color:#1c1f23; overflow-wrap:anywhere; }
+.mc-tile-check { position:absolute; top:12px; right:12px; width:18px; height:18px; color:#c8102e; background:#fff; border-radius:50%; padding:2px; }
+
+.mc-row { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; }
+.mc-logo { width:92px; height:63px; object-fit:contain; display:block; }
+.mc-chip { margin-top:2px; font-size:12px; font-weight:700; background:#047857; color:#fff; border-radius:6px; padding:4px 10px; }
+.mc-id { position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; margin-top:14px; }
+.mc-name { height:48px; font-size:20px; font-weight:700; line-height:1.2; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; text-wrap:balance; }
+.mc-number { font-family:ui-monospace,Menlo,monospace; font-size:15px; letter-spacing:.08em; }
+.mc-note { font-size:14px; line-height:1.4; }
+.mc-foot { align-items:flex-end; }
+.mc-col { display:flex; flex-direction:column; gap:2px; }
+.mc-right { text-align:right; }
+.mc-label { font-size:11px; letter-spacing:.04em; color:#5b6168; }
+.mc-val { font-size:14px; font-weight:600; }
+
+.mc-expiring .mc-chip { background:#fcd34d; color:#451a03; }
+.mc-grace, .mc-expired { background:linear-gradient(135deg,#eceded,#dfe1e3); color:#4a5057; }
+.mc-expired .mc-chip { background:#4a5057; }
+.mc-grace .mc-chip { background:#fcd34d; color:#451a03; }
+.mc-grace .mc-label, .mc-expired .mc-label { color:#4a5057; }
+.mc-grace .mc-logo, .mc-expired .mc-logo { filter:grayscale(1); opacity:.65; }
+.mc-suspended { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }
+.mc-suspended .mc-chip { background:#7f1d1d; }
+.mc-suspended .mc-label { color:#7f1d1d; }
+.mc-suspended .mc-logo { filter:grayscale(1); opacity:.6; }
+
+.mc-back { padding:0; justify-content:flex-start; }
+.mc-map { position:absolute; left:50%; top:66px; width:372px; height:auto; transform:translateX(-50%); opacity:.17; pointer-events:none; user-select:none; }
+.mc-stripe { position:relative; z-index:1; height:40px; margin-top:18px; background:#1c1f23; color:#fff; display:flex; align-items:center; padding:0 20px; font-size:10.5px; font-weight:600; line-height:1.35; letter-spacing:.03em; text-wrap:balance; }
+.mc-codewrap { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:0 16px 12px; text-align:center; }
+.mc-quiet { background:#fff; padding:8px 14px; border-radius:6px; line-height:0; box-shadow:0 1px 0 rgba(28,31,35,.06), 0 6px 14px -8px rgba(28,31,35,.35); }
+.mc-small { font-size:13px; }
+.mc-hint { font-size:12px; color:#5b6168; }
+.mc-suspended .mc-hint { color:#7f1d1d; }
+.mc-shine { position:absolute; left:0; top:0; right:0; bottom:0; z-index:0; pointer-events:none; border-radius:16px; }
+.mc-backnote { max-width:260px; font-size:13px; line-height:1.4; }
+
+.mc-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
+.mc-block { width:100%; max-width:350px; margin:0 auto; }
+.mc-actions { display:flex; gap:8px; margin-top:4px; }
+.mc-btn { flex:1; min-height:44px; padding:0 12px; border-radius:8px; border:1px solid #e3e5e8; background:#fff; color:#1c1f23; font:600 14px inherit; cursor:pointer; }
+.mc-btn:disabled { opacity:.6; cursor:progress; }
+.mc-btn-primary { background:#c8102e; border-color:#c8102e; color:#fff; }
+.mc-btn:focus-visible { outline:2px solid #c8102e; outline-offset:2px; }
+.mc-msg { min-height:20px; margin:8px 0 0; font-size:13px; color:#047857; text-align:center; }
+.mc-msg-err { color:#b91c1c; }
+.mc-sheet-wrap { position:fixed; left:-10000px; top:0; pointer-events:none; }
+.mc-sheet { width:398px; padding:24px 24px 44px; box-sizing:border-box; background:#f6f6f4; display:flex; flex-direction:column; gap:36px; }
+@media (min-width:768px) { .mc-block { margin:0; } }

package/dist/components/member-card.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export type MemberCardTheme = "red" | "ink";
+export interface MemberCardProps {
+    name: string;
+    memberId: string;
+    komsat: string;
+    affiliation?: string;
+    validUntil: string;
+    statusLabel: string;
+    statusVariant?: "default" | "secondary" | "destructive" | "outline";
+    validLabel?: string;
+    theme?: MemberCardTheme;
+    className?: string;
+}
+/**
+ * Presentation pattern for the PPIJ member card face.
+ * Display data arrives as props; issuing, verification, and card state
+ * logic stay in the application. The interactive card in the portal
+ * (flip, tilt, live barcode) builds on this face.
+ */
+export declare function MemberCard({ name, memberId, komsat, affiliation, validUntil, statusLabel, statusVariant, validLabel, theme, className, }: MemberCardProps): React.JSX.Element;
+export interface MemberCardBackProps {
+    memberId: string;
+    note: string;
+    barcodeLabel?: string;
+    className?: string;
+}
+/** Back face: deterministic presentation bars derived from the member id. */
+export declare function MemberCardBack({ memberId, note, barcodeLabel, className }: MemberCardBackProps): React.JSX.Element;

package/dist/components/member-card.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Badge } from "./badge";
+/**
+ * Presentation pattern for the PPIJ member card face.
+ * Display data arrives as props; issuing, verification, and card state
+ * logic stay in the application. The interactive card in the portal
+ * (flip, tilt, live barcode) builds on this face.
+ */
+export function MemberCard({ name, memberId, komsat, affiliation, validUntil, statusLabel, statusVariant = "secondary", validLabel = "Berlaku hingga", theme = "red", className, }) {
+    return (_jsxs("div", { "data-slot": "member-card", className: cn("relative flex aspect-[1.586] w-full max-w-[420px] flex-col justify-between overflow-hidden rounded-2xl p-5 text-white shadow-md", theme === "red"
+            ? "bg-gradient-to-br from-[#e11436] via-brand-red to-[#8f0c22]"
+            : "bg-gradient-to-br from-[#2a2e33] via-brand-ink to-black", className), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[11px] font-bold tracking-[0.18em]", children: "PPI JEPANG" }), _jsx("p", { className: "text-[10px] text-white/75", children: "Kartu Anggota" })] }), _jsx(Badge, { variant: statusVariant, children: statusLabel })] }), _jsxs("div", { className: "grid gap-1", children: [_jsx("p", { className: "truncate text-lg leading-tight font-bold", children: name }), _jsx("p", { className: "font-mono text-sm tracking-widest text-white/90", children: memberId }), _jsxs("div", { className: "mt-1 flex items-end justify-between gap-3 text-[11px] text-white/80", children: [_jsx("span", { className: "min-w-0", children: _jsxs("span", { className: "block truncate", children: [komsat, affiliation ? ` · ${affiliation}` : ""] }) }), _jsxs("span", { className: "shrink-0 text-right", children: [_jsx("span", { className: "block text-[9px] tracking-wider uppercase", children: validLabel }), _jsx("span", { className: "text-xs font-semibold text-white", children: validUntil })] })] })] })] }));
+}
+/** Back face: deterministic presentation bars derived from the member id. */
+export function MemberCardBack({ memberId, note, barcodeLabel = "Nomor anggota", className }) {
+    const bars = Array.from(memberId.replace(/\D/g, "") || "0").map((ch, i) => {
+        const w = (Number(ch) % 3) + 1;
+        return _jsx("span", { style: { width: w }, className: "inline-block h-full bg-brand-ink" }, i);
+    });
+    return (_jsxs("div", { "data-slot": "member-card-back", className: cn("flex aspect-[1.586] w-full max-w-[420px] flex-col justify-between overflow-hidden rounded-2xl bg-[#f1f1ec] p-5 text-brand-ink shadow-md", className), children: [_jsx("div", { className: "h-8 rounded bg-brand-ink" }), _jsxs("div", { children: [_jsx("p", { className: "mb-1 text-[10px] tracking-wider text-brand-muted uppercase", children: barcodeLabel }), _jsx("div", { className: "flex h-12 items-stretch gap-[2px] bg-white p-1.5", children: bars }), _jsx("p", { className: "mt-1 text-center font-mono text-xs tracking-[0.3em]", children: memberId })] }), _jsx("p", { className: "text-[10px] leading-snug text-brand-muted", children: note })] }));
+}

package/dist/components/month-picker.d.ts

@@ -0,0 +1,16 @@
+export interface MonthPickerProps {
+    /** Group label; the two menus are meaningless apart. */
+    label: string;
+    /** Wire value "YYYY-MM"; either part may still be empty while the member is choosing. */
+    value: string;
+    onChange: (value: string) => void;
+    locale?: "id" | "en";
+    className?: string;
+}
+/**
+ * Month and year entry (WIZ106-09), extracted from the wizard: two
+ * Selects, named months plus a year, in a 1.35fr / 1fr grid. The
+ * native month input is deliberately not used (WebKit-hostile). The
+ * composed "YYYY-MM" wire format never changes.
+ */
+export declare function MonthPicker({ label, value, onChange, locale, className }: MonthPickerProps): import("react").JSX.Element;

package/dist/components/month-picker.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+const MONTHS_ID = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
+const MONTHS_EN = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+/**
+ * Month and year entry (WIZ106-09), extracted from the wizard: two
+ * Selects, named months plus a year, in a 1.35fr / 1fr grid. The
+ * native month input is deliberately not used (WebKit-hostile). The
+ * composed "YYYY-MM" wire format never changes.
+ */
+export function MonthPicker({ label, value, onChange, locale = "id", className }) {
+    const [year = "", month = ""] = value ? value.split("-") : [];
+    const months = locale === "en" ? MONTHS_EN : MONTHS_ID;
+    const [monthWord, yearWord] = locale === "en" ? ["Month", "Year"] : ["Bulan", "Tahun"];
+    const years = Array.from({ length: new Date().getFullYear() - 1989 + 15 }, (_, i) => String(1990 + i)).reverse();
+    const compose = (y, m) => (y || m ? `${y}-${m}` : "");
+    return (_jsxs("div", { role: "group", "aria-label": label, className: cn("min-w-0 w-full", className), children: [_jsx("p", { className: "mb-2 text-sm font-medium text-brand-ink", children: label }), _jsxs("div", { className: "grid w-full grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)] gap-2", children: [_jsxs(Select, { value: month || "", onValueChange: (next) => onChange(compose(year, next)), children: [_jsx(SelectTrigger, { "aria-label": `${label}: ${monthWord}`, className: "min-h-11 w-full min-w-0 bg-card", children: _jsx(SelectValue, { placeholder: monthWord }) }), _jsx(SelectContent, { position: "popper", align: "start", avoidCollisions: false, className: "max-h-72", children: months.map((name, i) => (_jsx(SelectItem, { value: String(i + 1).padStart(2, "0"), children: name }, name))) })] }), _jsxs(Select, { value: year || "", onValueChange: (next) => onChange(compose(next, month)), children: [_jsx(SelectTrigger, { "aria-label": `${label}: ${yearWord}`, className: "min-h-11 w-full min-w-0 bg-card", children: _jsx(SelectValue, { placeholder: yearWord }) }), _jsx(SelectContent, { position: "popper", align: "start", avoidCollisions: false, className: "max-h-72", children: years.map((y) => (_jsx(SelectItem, { value: y, children: y }, y))) })] })] })] }));
+}

package/dist/components/offline-banner.d.ts

@@ -0,0 +1,14 @@
+export interface OfflineBannerProps {
+    /** Rendered only when true; the consumer owns the online check (the app uses its useOnline hook). */
+    show?: boolean;
+    /** Defaults to the app's id string; pass the en string or any label to override. */
+    label?: string;
+}
+/**
+ * Offline banner, extracted exactly from ppij-identity-sso
+ * portal/OfflineBanner.tsx: an amber strip under the header (it sits
+ * in PortalShell's banner slot) shown while the browser reports no
+ * network. Copy: "Tidak ada koneksi. Data Anda tersimpan." /
+ * "No connection. Your data is saved."
+ */
+export declare function OfflineBanner({ show, label }: OfflineBannerProps): import("react").JSX.Element | null;

package/dist/components/offline-banner.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconWifiOff } from "@tabler/icons-react";
+/**
+ * Offline banner, extracted exactly from ppij-identity-sso
+ * portal/OfflineBanner.tsx: an amber strip under the header (it sits
+ * in PortalShell's banner slot) shown while the browser reports no
+ * network. Copy: "Tidak ada koneksi. Data Anda tersimpan." /
+ * "No connection. Your data is saved."
+ */
+export function OfflineBanner({ show = true, label = "Tidak ada koneksi. Data Anda tersimpan." }) {
+    if (!show)
+        return null;
+    return (_jsx("div", { role: "status", className: "border-b border-amber-300 bg-amber-50 text-amber-900", children: _jsxs("p", { className: "mx-auto flex max-w-2xl items-center gap-2 px-4 py-2 text-sm font-semibold", children: [_jsx(IconWifiOff, { className: "size-4 shrink-0", "aria-hidden": "true" }), label] }) }));
+}

package/dist/components/page-header.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface PageHeaderProps {
+    title: string;
+    description?: string;
+    eyebrow?: string;
+    actions?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Admin page header pattern, following the portal admin convention:
+ * a 2xl bold ink title, a muted description, and actions on the right
+ * that wrap under the title on narrow screens.
+ */
+export declare function PageHeader({ title, description, eyebrow, actions, className }: PageHeaderProps): React.JSX.Element;

package/dist/components/page-header.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+/**
+ * Admin page header pattern, following the portal admin convention:
+ * a 2xl bold ink title, a muted description, and actions on the right
+ * that wrap under the title on narrow screens.
+ */
+export function PageHeader({ title, description, eyebrow, actions, className }) {
+    return (_jsxs("div", { className: cn("flex flex-wrap items-start justify-between gap-3", className), children: [_jsxs("div", { className: "min-w-0", children: [eyebrow ? (_jsx("p", { className: "mb-1 text-[11px] font-bold tracking-[0.14em] text-brand-red uppercase", children: eyebrow })) : null, _jsx("h1", { className: "text-2xl leading-tight font-bold text-brand-ink", children: title }), description ? _jsx("p", { className: "mt-1 max-w-prose text-sm text-brand-muted", children: description }) : null] }), actions ? _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null] }));
+}

package/dist/components/phone-field.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * The curated calling codes from the portal PhoneField (WIZ106-14):
+ * Japan and Indonesia pinned under "Sering dipakai", the rest under
+ * "Negara lain". Entries are [code, ISO, Indonesian name, English name].
+ */
+export declare const PHONE_COUNTRY_CODES: ReadonlyArray<readonly [code: string, iso: string, idName: string, enName: string]>;
+export interface PhoneFieldProps {
+    id?: string;
+    /** Composed value, for example "+81 90-1234-5678". Empty means no number yet. */
+    value: string;
+    onChange: (value: string) => void;
+    /** Prefix assumed when the stored value carries none: +81 for the member, +62 for the emergency contact. */
+    defaultCode?: string;
+    locale?: "id" | "en";
+    className?: string;
+}
+/**
+ * Phone entry, extracted from the wizard PhoneField: a grouped
+ * country-code Select (104px, showing "JP +81") paired with the
+ * national number input. The pair composes one stored string,
+ * "+81 90-1234-5678". Both controls are field height (44px); the
+ * label is composed by the parent like every other field.
+ */
+export declare function PhoneField({ id, value, onChange, defaultCode, locale, className }: PhoneFieldProps): React.JSX.Element;

package/dist/components/phone-field.js

@@ -0,0 +1,64 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Input } from "./input";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from "./select";
+/**
+ * The curated calling codes from the portal PhoneField (WIZ106-14):
+ * Japan and Indonesia pinned under "Sering dipakai", the rest under
+ * "Negara lain". Entries are [code, ISO, Indonesian name, English name].
+ */
+export const PHONE_COUNTRY_CODES = [
+    ["+81", "JP", "Jepang", "Japan"],
+    ["+62", "ID", "Indonesia", "Indonesia"],
+    ["+60", "MY", "Malaysia", "Malaysia"],
+    ["+65", "SG", "Singapura", "Singapore"],
+    ["+673", "BN", "Brunei", "Brunei"],
+    ["+66", "TH", "Thailand", "Thailand"],
+    ["+63", "PH", "Filipina", "Philippines"],
+    ["+84", "VN", "Vietnam", "Vietnam"],
+    ["+82", "KR", "Korea Selatan", "South Korea"],
+    ["+86", "CN", "Tiongkok", "China"],
+    ["+61", "AU", "Australia", "Australia"],
+    ["+64", "NZ", "Selandia Baru", "New Zealand"],
+    ["+1", "US", "Amerika Serikat", "United States"],
+    ["+44", "GB", "Inggris Raya", "United Kingdom"],
+    ["+31", "NL", "Belanda", "Netherlands"],
+    ["+49", "DE", "Jerman", "Germany"],
+    ["+33", "FR", "Prancis", "France"],
+    ["+966", "SA", "Arab Saudi", "Saudi Arabia"],
+    ["+971", "AE", "Uni Emirat Arab", "United Arab Emirates"],
+    ["+974", "QA", "Qatar", "Qatar"],
+    ["+968", "OM", "Oman", "Oman"],
+    ["+20", "EG", "Mesir", "Egypt"],
+    ["+90", "TR", "Turki", "Türkiye"],
+];
+/** Split by the longest matching curated code, so +673 never reads as +67 or +6. */
+function splitPhone(stored) {
+    const codes = PHONE_COUNTRY_CODES.map((c) => c[0]).sort((a, b) => b.length - a.length);
+    for (const code of codes) {
+        if (stored.startsWith(code))
+            return { code, number: stored.slice(code.length).trim() };
+    }
+    return { code: "", number: stored };
+}
+/**
+ * Phone entry, extracted from the wizard PhoneField: a grouped
+ * country-code Select (104px, showing "JP +81") paired with the
+ * national number input. The pair composes one stored string,
+ * "+81 90-1234-5678". Both controls are field height (44px); the
+ * label is composed by the parent like every other field.
+ */
+export function PhoneField({ id, value, onChange, defaultCode = "+81", locale = "id", className }) {
+    const [chosen, setChosen] = React.useState("");
+    const split = splitPhone(value);
+    const selected = split.code || chosen || defaultCode;
+    const number = split.number;
+    const en = locale === "en";
+    const compose = (code, national) => (national.trim() ? `${code} ${national}` : "");
+    const item = ([code, iso, idName, enName]) => (_jsxs(SelectItem, { value: code, textValue: `${en ? enName : idName} ${code}`, children: [iso, " ", code] }, code));
+    return (_jsxs("div", { className: cn("grid min-w-0 grid-cols-[104px_minmax(0,1fr)] gap-2", className), children: [_jsxs(Select, { value: selected, onValueChange: (code) => {
+                    setChosen(code);
+                    onChange(compose(code, number));
+                }, children: [_jsx(SelectTrigger, { "aria-label": en ? "Country code" : "Kode negara", className: "h-11 min-h-11 w-full bg-card", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { position: "popper", align: "start", avoidCollisions: false, className: "max-h-72", children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: en ? "Frequently used" : "Sering dipakai" }), PHONE_COUNTRY_CODES.slice(0, 2).map(item)] }), _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: en ? "Other countries" : "Negara lain" }), PHONE_COUNTRY_CODES.slice(2).map(item)] })] })] }), _jsx(Input, { id: id, type: "tel", inputMode: "tel", autoComplete: "tel-national", className: "h-11 min-h-11 min-w-0", value: number, onChange: (event) => onChange(compose(selected, event.target.value)) })] }));
+}

package/dist/components/pill-radio.d.ts

@@ -0,0 +1,21 @@
+export interface PillRadioOption {
+    value: string;
+    label: string;
+}
+export interface PillRadioProps {
+    options: PillRadioOption[];
+    value: string;
+    onChange: (value: string) => void;
+    ariaLabel: string;
+    className?: string;
+}
+/** The wizard pill treatment (WIZ106-16): the selected pill takes the primary tint. */
+export declare const pillRadioClass = "min-h-11 max-w-full rounded-full border border-border bg-card px-4 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[state=checked]:border-primary data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary";
+/**
+ * Pill radio group, extracted from the wizard steps (Jenis kelamin,
+ * Jenjang): one control per group, options as 44px pills that wrap,
+ * the chosen pill tinted with the primary color. Use for short,
+ * mutually exclusive choice sets where every option should stay
+ * visible; longer sets belong in a Select.
+ */
+export declare function PillRadio({ options, value, onChange, ariaLabel, className }: PillRadioProps): import("react").JSX.Element;

package/dist/components/pill-radio.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cn } from "../lib/utils";
+/** The wizard pill treatment (WIZ106-16): the selected pill takes the primary tint. */
+export const pillRadioClass = "min-h-11 max-w-full rounded-full border border-border bg-card px-4 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[state=checked]:border-primary data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary";
+/**
+ * Pill radio group, extracted from the wizard steps (Jenis kelamin,
+ * Jenjang): one control per group, options as 44px pills that wrap,
+ * the chosen pill tinted with the primary color. Use for short,
+ * mutually exclusive choice sets where every option should stay
+ * visible; longer sets belong in a Select.
+ */
+export function PillRadio({ options, value, onChange, ariaLabel, className }) {
+    return (_jsx(RadioGroupPrimitive.Root, { value: value, onValueChange: onChange, "aria-label": ariaLabel, className: cn("flex flex-wrap gap-2", className), children: options.map((option) => (_jsx(RadioGroupPrimitive.Item, { value: option.value, className: pillRadioClass, children: option.label }, option.value))) }));
+}

package/dist/components/portal-shell.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+export interface PortalNavItem {
+    label: string;
+    href: string;
+    /** Tabler icon element, shown in the phone bottom nav. */
+    icon: React.ReactNode;
+    current?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+export interface PortalLanguage {
+    label: string;
+    current?: boolean;
+    onSelect?: () => void;
+}
+export interface PortalShellProps {
+    /** Logo image source; the consuming app serves it (in the portal app: /ppij-logo.png). */
+    logoSrc: string;
+    logoAlt?: string;
+    /** The word beside the logo, separated by a thin divider. */
+    brandWord?: string;
+    homeHref?: string;
+    /** Primary navigation. Beranda is always present; Profil appears for active members, Verifikasi while a decision is pending. The shell renders what it is given. */
+    navItems: PortalNavItem[];
+    languages: PortalLanguage[];
+    languageLabel?: string;
+    accountItems: {
+        label: string;
+        href: string;
+    }[];
+    accountLabel?: string;
+    /** Slot for the Portal|Admin switch, rendered before the language control. */
+    viewSwitch?: React.ReactNode;
+    /** Slot under the header, for example the offline banner. */
+    banner?: React.ReactNode;
+    skipLabel?: string;
+    helpText?: string;
+    legalItems?: {
+        label: string;
+        href: string;
+    }[];
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * The portal chrome, extracted from the portal AppShell: sticky white
+ * top bar with the brand lockup (logo, divider, the word Portal),
+ * desktop navigation inside the bar, an icon-only language menu with
+ * the current language checked, an icon-only account menu, and a fixed
+ * bottom nav on phones whose columns follow the item count. Content
+ * sits in a max-w-5xl column with room for the bottom nav. All state
+ * (who is signed in, which nav applies) stays in the application.
+ */
+export declare function PortalShell({ logoSrc, logoAlt, brandWord, homeHref, navItems, languages, languageLabel, accountItems, accountLabel, viewSwitch, banner, skipLabel, helpText, legalItems, children, className, }: PortalShellProps): React.JSX.Element;

package/dist/components/portal-shell.js

@@ -0,0 +1,19 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { IconCheck, IconLanguage, IconUserCircle } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./dropdown-menu";
+/**
+ * The portal chrome, extracted from the portal AppShell: sticky white
+ * top bar with the brand lockup (logo, divider, the word Portal),
+ * desktop navigation inside the bar, an icon-only language menu with
+ * the current language checked, an icon-only account menu, and a fixed
+ * bottom nav on phones whose columns follow the item count. Content
+ * sits in a max-w-5xl column with room for the bottom nav. All state
+ * (who is signed in, which nav applies) stays in the application.
+ */
+export function PortalShell({ logoSrc, logoAlt = "PPI Jepang", brandWord = "Portal", homeHref = "#", navItems, languages, languageLabel = "Bahasa", accountItems, accountLabel = "Menu akun", viewSwitch, banner, skipLabel = "Lewati ke konten", helpText, legalItems = [], children, className, }) {
+    const navList = (mobile) => (_jsx("nav", { "aria-label": "Portal", className: mobile ? "fixed inset-x-0 bottom-0 z-40 border-t border-brand-border bg-card pb-[env(safe-area-inset-bottom)] md:hidden" : "hidden md:block", children: _jsx("ul", { className: mobile ? "grid" : "flex items-center gap-1", style: mobile ? { gridTemplateColumns: "repeat(" + navItems.length + ", minmax(0, 1fr))" } : undefined, children: navItems.map((item) => (_jsx("li", { children: _jsxs("a", { href: item.href, onClick: item.onClick, "aria-current": item.current ? "page" : undefined, className: mobile
+                        ? cn("flex min-h-14 w-full flex-col items-center justify-center gap-0.5 px-1 text-xs font-semibold focus-visible:outline-2 focus-visible:outline-brand-red", item.current ? "text-brand-red" : "text-brand-muted")
+                        : cn("flex min-h-11 items-center rounded-md px-3 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-brand-red", item.current ? "text-brand-red" : "text-brand-muted hover:text-brand-ink"), children: [mobile ? item.icon : null, item.label] }) }, item.label))) }) }));
+    return (_jsxs("div", { className: cn("min-h-dvh bg-brand-bg text-brand-ink", className), children: [_jsx("a", { href: "#konten", className: "sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-50 focus:rounded-md focus:bg-card focus:px-4 focus:py-3 focus:font-semibold focus:outline-2 focus:outline-brand-red", children: skipLabel }), _jsx("header", { className: "sticky top-0 z-40 border-b border-brand-border bg-card", children: _jsxs("div", { className: "mx-auto flex min-h-14 max-w-5xl flex-wrap items-center justify-between gap-x-2 gap-y-1 px-4", children: [_jsxs("a", { href: homeHref, className: "flex min-h-11 min-w-0 items-center gap-2 rounded-md text-brand-ink no-underline focus-visible:outline-2 focus-visible:outline-brand-red", children: [_jsx("img", { className: "block h-10 w-auto shrink-0", src: logoSrc, alt: logoAlt, width: 58, height: 40 }), _jsx("span", { className: "border-l border-brand-border pl-3 text-xl leading-7 font-bold whitespace-nowrap", children: brandWord })] }), navList(false), _jsxs("div", { className: "ms-auto flex min-w-0 shrink-0 items-center gap-1", children: [viewSwitch, _jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { "aria-label": languageLabel, className: "flex size-11 shrink-0 items-center justify-center rounded-md text-brand-muted hover:text-brand-ink focus-visible:outline-2 focus-visible:outline-brand-red data-[state=open]:text-brand-ink", children: _jsx(IconLanguage, { className: "size-5", stroke: 1.75, "aria-hidden": "true" }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-52", children: languages.map((language) => (_jsxs(DropdownMenuItem, { className: "min-h-11 justify-between", onSelect: language.onSelect, children: [language.label, language.current ? _jsx(IconCheck, { className: "size-4", "aria-hidden": "true" }) : null] }, language.label))) })] }), _jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { "aria-label": accountLabel, className: "flex size-11 shrink-0 items-center justify-center rounded-md text-brand-ink focus-visible:outline-2 focus-visible:outline-brand-red data-[state=open]:bg-secondary", children: _jsx(IconUserCircle, { className: "size-6", stroke: 1.75, "aria-hidden": "true" }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-56", children: accountItems.map((item) => (_jsx(DropdownMenuItem, { className: "min-h-11", asChild: true, children: _jsx("a", { href: item.href, children: item.label }) }, item.label))) })] })] })] }) }), banner, _jsxs("main", { id: "konten", className: "mx-auto max-w-5xl px-4 pt-6 pb-28 md:pb-10", children: [children, (helpText || legalItems.length > 0) && (_jsxs("footer", { className: "mx-auto mt-8 max-w-3xl border-t border-brand-border pt-4 text-sm", children: [helpText && _jsx("p", { className: "text-brand-muted", children: helpText }), legalItems.length > 0 && (_jsx("nav", { "aria-label": "Legal", className: "mt-1 flex flex-wrap items-center gap-x-5 gap-y-1", children: legalItems.map((item) => (_jsx("a", { href: item.href, className: "flex min-h-11 items-center font-normal text-brand-muted underline-offset-4 hover:text-brand-ink hover:underline focus-visible:outline-2 focus-visible:outline-brand-red", children: item.label }, item.label))) }))] }))] }), navList(true)] }));
+}

package/dist/components/postcode-field.d.ts

@@ -0,0 +1,26 @@
+export interface PostcodeCandidate {
+    label: string;
+    onSelect: () => void;
+}
+export interface PostcodeFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Runs the address lookup for the current code; the data source stays in the application. */
+    onSearch: () => void;
+    searching?: boolean;
+    searchLabel?: string;
+    /** Line under the field: a resolved address, an instruction, or an error. */
+    statusText?: string;
+    /** When a lookup returns several places, each becomes a switchable candidate button. */
+    candidates?: PostcodeCandidate[];
+    placeholder?: string;
+    className?: string;
+}
+/**
+ * Japanese postcode entry with address lookup, extracted from the
+ * wizard PostcodeField: the code input and a "Cari alamat" button on
+ * one row (both field height), a status line, and candidate buttons
+ * when the code maps to more than one place. The lookup itself is
+ * the application's; this is the presentation and the states.
+ */
+export declare function PostcodeField({ value, onChange, onSearch, searching, searchLabel, statusText, candidates, placeholder, className, }: PostcodeFieldProps): import("react").JSX.Element;

package/dist/components/postcode-field.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Input } from "./input";
+/**
+ * Japanese postcode entry with address lookup, extracted from the
+ * wizard PostcodeField: the code input and a "Cari alamat" button on
+ * one row (both field height), a status line, and candidate buttons
+ * when the code maps to more than one place. The lookup itself is
+ * the application's; this is the presentation and the states.
+ */
+export function PostcodeField({ value, onChange, onSearch, searching = false, searchLabel = "Cari alamat", statusText, candidates = [], placeholder = "700-0001", className, }) {
+    return (_jsxs("div", { className: cn("grid gap-2", className), children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Input, { value: value, onChange: (event) => onChange(event.target.value), inputMode: "numeric", autoComplete: "postal-code", placeholder: placeholder, className: "min-h-11 min-w-0 flex-1" }), _jsx(Button, { type: "button", variant: "outline", className: "min-h-11", disabled: searching, onClick: onSearch, children: searchLabel })] }), statusText && (_jsx("p", { role: "status", className: "text-sm text-brand-muted", children: statusText })), candidates.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: candidates.map((candidate) => (_jsx(Button, { type: "button", variant: "outline", className: "min-h-11", onClick: candidate.onSelect, children: candidate.label }, candidate.label))) }))] }));
+}

package/dist/components/progress.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): React.JSX.Element;
+export { Progress };

package/dist/components/progress.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "radix-ui";
+import { cn } from "../lib/utils";
+function Progress({ className, value, ...props }) {
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "h-full flex-1 bg-brand-red transition-all", style: { transform: "translateX(-" + (100 - (value || 0)) + "%)" } }) }));
+}
+export { Progress };

package/dist/components/radio-group.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/dist/components/radio-group.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cn } from "../lib/utils";
+function RadioGroup({ className, ...props }) {
+    return _jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props });
+}
+function RadioGroupItem({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn("aspect-square size-4 shrink-0 rounded-full border border-input bg-card shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary" }) }) }));
+}
+export { RadioGroup, RadioGroupItem };

package/dist/components/review-panel.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface ReviewPanelProps {
+    title: string;
+    children: React.ReactNode;
+    editable?: boolean;
+    onEdit?: () => void;
+    editLabel?: string;
+    /** Incomplete sections get the heavy destructive border and a "Belum lengkap" line. */
+    incomplete?: boolean;
+    incompleteLabel?: string;
+    className?: string;
+}
+/**
+ * One review panel, extracted from the wizard Review: a FormPanel
+ * with an h2 title, the section's data as content, and the shared
+ * "Edit bagian ini" outline action in the footer when the section
+ * may be edited. This is the panel the profile's read-first
+ * sections mirror.
+ */
+export declare function ReviewPanel({ title, children, editable, onEdit, editLabel, incomplete, incompleteLabel, className, }: ReviewPanelProps): React.JSX.Element;

package/dist/components/review-panel.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPencil } from "@tabler/icons-react";
+import { Button } from "./button";
+import { FormPanel } from "./form-panel";
+/**
+ * One review panel, extracted from the wizard Review: a FormPanel
+ * with an h2 title, the section's data as content, and the shared
+ * "Edit bagian ini" outline action in the footer when the section
+ * may be edited. This is the panel the profile's read-first
+ * sections mirror.
+ */
+export function ReviewPanel({ title, children, editable = true, onEdit, editLabel = "Edit bagian ini", incomplete = false, incompleteLabel = "Belum lengkap", className, }) {
+    return (_jsxs(FormPanel, { title: title, titleAs: "h2", className: incomplete ? "border-2 border-destructive" : className, footer: editable ? (_jsxs(Button, { type: "button", variant: "outline", onClick: onEdit, children: [_jsx(IconPencil, { size: 16, "aria-hidden": "true" }), editLabel] })) : undefined, children: [incomplete && _jsx("p", { className: "mb-3 text-sm font-semibold text-destructive", children: incompleteLabel }), children] }));
+}

package/dist/components/saving-indicator.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type SavingStatus = "idle" | "saving" | "saved" | "error";
+export interface SavingIndicatorProps {
+    status: SavingStatus;
+    locale?: "id" | "en";
+    className?: string;
+    savingText?: string;
+    savedText?: string;
+    errorText?: string;
+}
+/**
+ * Shared accessible saving indicator component.
+ * Tailwind only, respects motion-reduce, role="status", screen-reader text, aria-busy.
+ */
+export declare function SavingIndicator({ status, locale, className, savingText, savedText, errorText, }: SavingIndicatorProps): React.JSX.Element | null;

package/dist/components/saving-indicator.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCheck, IconAlertCircle } from "@tabler/icons-react";
+import { Spinner } from "./spinner";
+import { cn } from "../lib/utils";
+/**
+ * Shared accessible saving indicator component.
+ * Tailwind only, respects motion-reduce, role="status", screen-reader text, aria-busy.
+ */
+export function SavingIndicator({ status, locale = "id", className, savingText, savedText, errorText, }) {
+    if (status === "idle")
+        return null;
+    const defaultSaving = locale === "en" ? "Saving…" : "Menyimpan…";
+    const defaultSaved = locale === "en" ? "Saved" : "Tersimpan";
+    const defaultError = locale === "en" ? "Failed to save" : "Gagal menyimpan";
+    const isSaving = status === "saving";
+    const isSaved = status === "saved";
+    const isError = status === "error";
+    return (_jsxs("div", { role: "status", "aria-busy": isSaving, "data-saving-indicator": status, className: cn("inline-flex items-center gap-1.5 text-xs font-medium transition-opacity motion-reduce:transition-none", isSaving && "text-brand-muted", isSaved && "text-success", isError && "text-brand-red", className), children: [isSaving && _jsx(Spinner, { size: "xs", decorative: true }), isSaved && _jsx(IconCheck, { className: "size-3.5 text-success", "aria-hidden": "true" }), isError && _jsx(IconAlertCircle, { className: "size-3.5 text-brand-red", "aria-hidden": "true" }), _jsxs("span", { children: [isSaving && (savingText ?? defaultSaving), isSaved && (savedText ?? defaultSaved), isError && (errorText ?? defaultError)] })] }));
+}