ppij-design-system 0.2.0 → 0.4.0

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;

package/dist/components/figures-band.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconArrowRight } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+/** One column below 600px, two at 601-1100px, then the band's own count from 1101px up. */
+const columnClass = {
+    1: "grid-cols-1",
+    2: "min-[601px]:grid-cols-2",
+    3: "min-[601px]:grid-cols-2 min-[1101px]:grid-cols-3",
+    4: "min-[601px]:grid-cols-2 min-[1101px]:grid-cols-4",
+};
+/**
+ * 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 function FiguresBand({ title, description, groups, columns, className }) {
+    const columnCount = Math.min(Math.max(columns ?? groups.length, 1), 4);
+    return (_jsxs("section", { "data-slot": "figures-band", "aria-label": title, className: cn("rounded-xl border border-brand-border bg-card px-[22px] pt-5 pb-2 max-[600px]:px-4", className), children: [_jsxs("div", { className: "mb-1 flex flex-wrap items-baseline justify-between gap-3.5", children: [_jsx("h2", { className: "m-0 text-lg font-bold tracking-tight text-brand-ink", children: title }), description ? _jsx("p", { className: "m-0 text-xs text-brand-muted", children: description }) : null] }), _jsx("div", { className: cn("grid grid-cols-1", columnClass[columnCount], 
+                // Separators are scoped by width so only one of them ever applies:
+                // a left hairline in the four-up row, a top hairline once the groups wrap.
+                "[&>button:not(:first-child)]:border-brand-border", "min-[1101px]:[&>button:not(:first-child)]:border-l", "max-[1100px]:[&>button:not(:first-child)]:border-t", "min-[601px]:max-[1100px]:[&>button:nth-child(2)]:border-t-0"), children: groups.map((group) => (_jsxs("button", { type: "button", onClick: group.onSelect, className: "grid min-h-11 content-start gap-[7px] px-[18px] pt-4 pb-[18px] text-left transition-colors hover:bg-brand-red/3 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none max-[600px]:min-h-11 max-[600px]:px-0.5 max-[600px]:py-3.5 min-[600px]:min-h-8", children: [_jsx("span", { className: "text-xs font-bold text-brand-muted", children: group.label }), _jsx("span", { className: cn("text-[30px] leading-[1.1] font-extrabold tracking-tight", group.tone === "warn" ? "text-[#a66d20]" : "text-brand-ink"), children: group.value }), group.sub ? _jsx("span", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-brand-muted", children: group.sub }) : null, group.visual ? (_jsx("span", { "aria-hidden": true, className: "min-w-0 pt-0.5", children: group.visual })) : null, _jsxs("span", { className: "mt-0.5 inline-flex items-center gap-1.5 text-xs font-bold text-brand-red", children: [group.linkLabel, _jsx(IconArrowRight, { "aria-hidden": true, className: "size-3.5" })] })] }, group.label))) })] }));
+}
+/** The 3px separator the prototype drew between two sub-line facts. */
+export function FiguresBandSeparator() {
+    return _jsx("span", { "aria-hidden": true, className: "inline-block size-[3px] shrink-0 rounded-full bg-brand-border" });
+}

package/dist/components/filter-chips.d.ts

@@ -0,0 +1,23 @@
+export interface FilterChip {
+    label: string;
+    value: string;
+    /** Per-value count, for example how many rows the value contains. */
+    count?: number;
+    onRemove: () => void;
+}
+export interface FilterChipsProps {
+    chips: FilterChip[];
+    onClearAll?: () => void;
+    clearAllLabel?: string;
+    /** Names the row for assistive technology; each chip's accessible name starts with it. */
+    label?: string;
+    className?: string;
+}
+/**
+ * The removable active-filter row: the Statistik warehouse chips, the member
+ * directory row, the invitation list and the management lists. Every chip
+ * removes its own filter and states what it removes, the counts arrive as
+ * props, and clear-all is a separate control so a single mis-tap cannot wipe
+ * the row.
+ */
+export declare function FilterChips({ chips, onClearAll, clearAllLabel, label, className }: FilterChipsProps): import("react").JSX.Element | null;

package/dist/components/filter-chips.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconX } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+/**
+ * The removable active-filter row: the Statistik warehouse chips, the member
+ * directory row, the invitation list and the management lists. Every chip
+ * removes its own filter and states what it removes, the counts arrive as
+ * props, and clear-all is a separate control so a single mis-tap cannot wipe
+ * the row.
+ */
+export function FilterChips({ chips, onClearAll, clearAllLabel = "Hapus semua filter", label = "Filter aktif", className }) {
+    if (!chips.length && !onClearAll)
+        return null;
+    return (_jsxs("div", { "data-slot": "filter-chips", className: cn("flex min-w-0 flex-wrap items-center gap-2", className), children: [_jsx("ul", { "aria-label": label, className: "flex min-w-0 flex-wrap items-center gap-2", children: chips.map((chip) => (_jsx("li", { className: "min-w-0", children: _jsxs("button", { type: "button", onClick: chip.onRemove, "aria-label": chip.count === undefined ? `${label}: ${chip.label}` : `${label}: ${chip.label} (${chip.count})`, className: "flex max-w-full items-center gap-1.5 rounded-full border border-[#ecd7db] bg-[#fdf5f6] px-3 py-1.5 text-xs font-semibold text-brand-ink transition-colors hover:bg-brand-red/5 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none max-[600px]:min-h-11 min-[600px]:min-h-8", children: [_jsxs("span", { className: "min-w-0 truncate", children: [chip.label, chip.count === undefined ? null : _jsx("strong", { className: "ml-1 font-extrabold text-brand-red", children: chip.count })] }), _jsx(IconX, { "aria-hidden": true, className: "size-3.5 shrink-0 text-brand-muted" })] }) }, `${chip.value}-${chip.label}`))) }), onClearAll ? (_jsxs("button", { type: "button", onClick: onClearAll, "aria-label": clearAllLabel, className: "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-bold text-brand-muted transition-colors hover:text-brand-ink focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none max-[600px]:min-h-11 min-[600px]:min-h-8", children: [_jsx(IconX, { "aria-hidden": true, className: "size-3.5" }), clearAllLabel] })) : null] }));
+}

package/dist/components/filter-menu.d.ts

@@ -0,0 +1,24 @@
+export interface FilterMenuOption {
+    value: string;
+    label: string;
+}
+export interface FilterMenuProps {
+    label: string;
+    /** The selected value; the empty string is "all". */
+    value: string;
+    options: FilterMenuOption[];
+    /** The row that clears the filter, for example "Semua jenis". */
+    allLabel: string;
+    onChange: (value: string) => void;
+    /** Keeps the caption for assistive technology but drops it from the layout. */
+    hideLabel?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * The non-searchable single-select with checkmarks: the verifikasi kind,
+ * ownership, feedback target and reason filters. The trigger names the control
+ * and the current value, the menu is a radio group so the selected row reports
+ * `aria-checked`, and the checkmark is decoration on top of that.
+ */
+export declare function FilterMenu({ label, value, options, allLabel, onChange, hideLabel, disabled, className }: FilterMenuProps): import("react").JSX.Element;

package/dist/components/filter-menu.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu";
+/**
+ * The non-searchable single-select with checkmarks: the verifikasi kind,
+ * ownership, feedback target and reason filters. The trigger names the control
+ * and the current value, the menu is a radio group so the selected row reports
+ * `aria-checked`, and the checkmark is decoration on top of that.
+ */
+export function FilterMenu({ label, value, options, allLabel, onChange, hideLabel = false, disabled = false, className }) {
+    const selectedLabel = options.find((option) => option.value === value)?.label ?? allLabel;
+    return (_jsxs("div", { "data-slot": "filter-menu", "data-hide-label": hideLabel, className: cn("grid min-w-0 gap-1.5", className), children: [_jsx("span", { className: cn("text-[13px] font-semibold text-brand-muted", hideLabel && "sr-only"), children: label }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", disabled: disabled, "aria-label": `${label}: ${selectedLabel}`, className: "flex w-max max-w-full min-h-11 justify-start gap-2.5 px-3 text-[13px] min-[600px]:h-8 min-[600px]:min-h-8", children: [_jsx("span", { className: "truncate", children: selectedLabel }), _jsx(IconChevronDown, { "aria-hidden": true, className: "size-4 shrink-0 text-brand-muted" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-[190px] bg-card", children: _jsxs(DropdownMenuRadioGroup, { value: value, onValueChange: onChange, children: [_jsxs(DropdownMenuRadioItem, { value: "", className: "min-h-11 gap-1.5 min-[600px]:min-h-8", children: [_jsx(IconCheck, { "aria-hidden": true, className: cn("size-4 text-brand-red", value === "" ? undefined : "invisible") }), allLabel] }), options.map((option) => (_jsxs(DropdownMenuRadioItem, { value: option.value, className: "min-h-11 gap-1.5 min-[600px]:min-h-8", children: [_jsx(IconCheck, { "aria-hidden": true, className: cn("size-4 text-brand-red", value === option.value ? undefined : "invisible") }), option.label] }, option.value)))] }) })] })] }));
+}

package/dist/components/form-grid.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export interface FormFieldProps {
+    label: string;
+    /** Quiet help line under the control. */
+    hint?: string;
+    /** Validation message; renders `role="alert"` and marks the control invalid. */
+    error?: string;
+    /** Spans every column of the surrounding `FormGrid`. */
+    wide?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * One labelled field of a `FormGrid`. The label wraps the control, so the
+ * association needs no id. When `error` is set, the message carries
+ * `role="alert"` and the component marks the control with `aria-invalid` and
+ * `aria-describedby` pointing at that message; props the caller sets on the
+ * control win.
+ */
+export declare function FormField({ label, hint, error, wide, children, className }: FormFieldProps): React.JSX.Element;
+export interface FormGridProps {
+    /** Two columns from 600px up; always one column below. Default 2. */
+    columns?: 1 | 2;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * The two-column admin form grid: wide rows span both columns and every field
+ * is one column on a phone. Controls inside pick up the sizing band — 32px from
+ * 600px up, never under 44px below — so a page does not restate it.
+ */
+export declare function FormGrid({ columns, children, className }: FormGridProps): React.JSX.Element;

package/dist/components/form-grid.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+/**
+ * One labelled field of a `FormGrid`. The label wraps the control, so the
+ * association needs no id. When `error` is set, the message carries
+ * `role="alert"` and the component marks the control with `aria-invalid` and
+ * `aria-describedby` pointing at that message; props the caller sets on the
+ * control win.
+ */
+export function FormField({ label, hint, error, wide = false, children, className }) {
+    const errorId = React.useId();
+    const childProps = (React.isValidElement(children) ? children.props : {});
+    const control = error && React.isValidElement(children)
+        ? React.cloneElement(children, {
+            ...(childProps["aria-invalid"] === undefined ? { "aria-invalid": true } : {}),
+            ...(childProps["aria-describedby"] === undefined ? { "aria-describedby": errorId } : {}),
+        })
+        : children;
+    return (_jsxs("label", { className: cn("grid min-w-0 gap-1.5 text-xs font-semibold text-brand-muted", wide && "col-span-full max-[600px]:col-span-1", className), children: [_jsx("span", { children: label }), control, hint ? _jsx("span", { className: "text-xs font-normal text-brand-muted", children: hint }) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "text-xs font-semibold text-destructive", children: error })) : null] }));
+}
+/**
+ * The two-column admin form grid: wide rows span both columns and every field
+ * is one column on a phone. Controls inside pick up the sizing band — 32px from
+ * 600px up, never under 44px below — so a page does not restate it.
+ */
+export function FormGrid({ columns = 2, children, className }) {
+    return (_jsx("div", { "data-slot": "form-grid", "data-columns": columns, className: cn("grid items-start gap-x-3.5 gap-y-4", columns === 2 ? "grid-cols-2 max-[600px]:grid-cols-1" : "grid-cols-1", "min-[600px]:[&_input]:h-8 min-[600px]:[&_select]:h-8 min-[600px]:[&_[data-slot=select-trigger]]:h-8", "max-[600px]:[&_input]:min-h-11 max-[600px]:[&_select]:min-h-11 max-[600px]:[&_textarea]:min-h-11 max-[600px]:[&_[data-slot=select-trigger]]:min-h-11", "max-[600px]:[&_input]:text-base max-[600px]:[&_select]:text-base", className), children: children }));
+}

package/dist/components/identity-chip.d.ts

@@ -0,0 +1,18 @@
+export interface IdentityChipProps {
+    name: string;
+    /** Second line, for example the role or the unit. */
+    detail: string;
+    /** Two letters, shown in the avatar square. */
+    initials: string;
+    onClick: () => void;
+    /** Sidebar rail state: a 44px square that keeps the person's name as its accessible name. */
+    collapsed?: boolean;
+    className?: string;
+}
+/**
+ * The sidebar footer identity: who is signed in and which role they hold, as
+ * one button that opens the account sheet. The collapsed rail keeps a 44px
+ * square target and the person's name as the accessible name, never the
+ * initials alone.
+ */
+export declare function IdentityChip({ name, detail, initials, onClick, collapsed, className }: IdentityChipProps): import("react").JSX.Element;

package/dist/components/identity-chip.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconChevronRight } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+/**
+ * The sidebar footer identity: who is signed in and which role they hold, as
+ * one button that opens the account sheet. The collapsed rail keeps a 44px
+ * square target and the person's name as the accessible name, never the
+ * initials alone.
+ */
+export function IdentityChip({ name, detail, initials, onClick, collapsed = false, className }) {
+    return (_jsxs("button", { "data-slot": "identity-chip", "data-collapsed": collapsed, type: "button", onClick: onClick, "aria-label": name, "aria-haspopup": "dialog", className: cn("flex items-center rounded-[10px] border border-brand-border bg-card text-left transition-colors hover:bg-secondary/50 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none", collapsed ? "mx-auto size-11 shrink-0 justify-center p-1.5" : "mx-2 mb-2.5 min-h-11 w-[calc(100%-16px)] gap-2.5 p-2.5 min-[600px]:h-8 min-[600px]:min-h-8 min-[600px]:py-0", className), children: [_jsx("span", { "aria-hidden": true, className: "grid size-7 shrink-0 place-items-center rounded-lg bg-brand-red/8 text-xs leading-none font-extrabold text-brand-red", children: initials }), collapsed ? null : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] leading-4 font-bold text-brand-ink", children: name }), _jsx("span", { className: "block truncate text-xs leading-3.5 text-brand-muted", children: detail })] }), _jsx(IconChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-brand-muted" })] }))] }));
+}

package/dist/components/input.d.ts

@@ -1,3 +1,14 @@
 import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+/** The admin compact field text: 13px from 600px up, 16px below so iOS does not zoom on focus. */
+export type InputTextSize = "compact";
+export type InputProps = React.ComponentProps<"input"> & {
+    /**
+     * Compact admin text: 13px from 600px up and 16px below, which is the size an
+     * admin page would otherwise reach with its own `font-size` rule. Pair it with
+     * `data-size="sm"` for the 32px toolbar field; the 44px phone floor below
+     * 600px is part of the compact band.
+     */
+    textSize?: InputTextSize;
+};
+declare function Input({ className, type, textSize, ...props }: InputProps): React.JSX.Element;
 export { Input };

package/dist/components/input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils";
-function Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-9 w-full min-w-0 data-[size=sm]:h-8 data-[size=lg]:h-11 rounded-md border border-input bg-card px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }));
+function Input({ className, type, textSize, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", "data-text-size": textSize, className: cn("h-9 w-full min-w-0 data-[size=sm]:h-8 data-[size=lg]:h-11 rounded-md border border-input bg-card px-3 py-1 shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30", textSize === "compact" ? "text-base min-[600px]:text-[13px] max-[600px]:min-h-11" : "text-base md:text-sm", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }
 export { Input };

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+export type ListRowTone = "default" | "danger" | "muted";
+export interface ListRowProps {
+    /** Leading slot: an Avatar, an icon chip, a checkbox. */
+    leading?: React.ReactNode;
+    title: string;
+    subtitle?: string;
+    /** Quiet middle column, for example a date or a unit. */
+    meta?: React.ReactNode;
+    /** Right-hand slot: a Badge, a Button, a chevron. */
+    trailing?: React.ReactNode;
+    /** Badge rendered after the title. */
+    badge?: React.ReactNode;
+    tone?: ListRowTone;
+    /** Makes the whole row one button. */
+    onSelect?: () => void;
+    /** Makes the whole row one link; wins over `onSelect`. */
+    href?: string;
+    /** Highlights the row and reports it as current or pressed. */
+    selected?: boolean;
+    className?: string;
+}
+/**
+ * The one selectable row shape behind the priority list, the recent list, the
+ * management and invitation lists, the coverage list and the phone member card.
+ * It renders a real `<a>` or `<button>` so the whole row is a single tab stop;
+ * every child control inside `trailing` stays its own control.
+ */
+export declare function ListRow({ leading, title, subtitle, meta, trailing, badge, tone, onSelect, href, selected, className, }: ListRowProps): React.JSX.Element;

package/dist/components/list-row.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+const toneClass = {
+    default: "text-brand-ink",
+    danger: "text-destructive",
+    muted: "text-brand-muted",
+};
+/**
+ * The one selectable row shape behind the priority list, the recent list, the
+ * management and invitation lists, the coverage list and the phone member card.
+ * It renders a real `<a>` or `<button>` so the whole row is a single tab stop;
+ * every child control inside `trailing` stays its own control.
+ */
+export function ListRow({ leading, title, subtitle, meta, trailing, badge, tone = "default", onSelect, href, selected = false, className, }) {
+    const body = (_jsxs(_Fragment, { children: [leading ? _jsx("span", { className: "flex shrink-0 items-center", children: leading }) : null, _jsxs("span", { className: "grid min-w-0 gap-1", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("strong", { className: cn("block text-sm leading-snug font-semibold break-words", toneClass[tone]), children: title }), badge] }), subtitle ? _jsx("small", { className: "block text-xs leading-snug break-words text-brand-muted", children: subtitle }) : null] }), meta ? _jsx("span", { className: "hidden text-xs text-brand-muted min-[600px]:block", children: meta }) : null, trailing ? _jsx("span", { className: "flex shrink-0 items-center justify-end gap-2", children: trailing }) : null] }));
+    const classes = cn("grid w-full items-center gap-x-3 gap-y-1 border-t border-brand-border px-1 py-3 text-left", "max-[600px]:min-h-11", (onSelect || href) && "transition-colors hover:bg-secondary/50 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none", selected && "bg-secondary/60", className);
+    // Only the slots that exist get a track, so the title keeps the flexible
+    // column whether or not the row has a leading slot or a meta column.
+    const columns = [leading ? "auto" : null, "minmax(0,1fr)", meta ? "auto" : null, "auto"].filter(Boolean).join(" ");
+    if (href) {
+        return (_jsx("a", { "data-slot": "list-row", href: href, "aria-current": selected ? "true" : undefined, className: classes, style: { gridTemplateColumns: columns }, children: body }));
+    }
+    if (onSelect) {
+        return (_jsx("button", { "data-slot": "list-row", type: "button", onClick: onSelect, "aria-pressed": selected, className: classes, style: { gridTemplateColumns: columns }, children: body }));
+    }
+    return (_jsx("div", { "data-slot": "list-row", className: classes, style: { gridTemplateColumns: columns }, children: body }));
+}

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { type StatStripItem } from "./stat-strip";
+export interface MapCardChip {
+    label: string;
+    onClear: () => void;
+}
+export interface MapCardProps {
+    title: string;
+    description?: string;
+    /** The app's map canvas. The package imports no map library and no geography. */
+    children: React.ReactNode;
+    /** The selection summary body, rendered as an overlay, an inline bar or a sheet. */
+    panel: React.ReactNode;
+    /** Accessible name of the panel. Defaults to "Ringkasan peta". */
+    panelLabel?: string;
+    /** The stat strip under the map: three items in practice. */
+    footer?: StatStripItem[];
+    /** The clear-selection chip, shown when a unit is selected. */
+    chip?: MapCardChip;
+    onExpandChange?: (expanded: boolean) => void;
+    /** Controlled fullscreen state; uncontrolled when omitted. */
+    expanded?: boolean;
+    expandLabel?: string;
+    collapseLabel?: string;
+    /** The one-line summary the snap-sheet handle reads while collapsed. */
+    sheetSummary?: string;
+    /** Quiet note about units with no coordinates yet. */
+    unmappedNote?: React.ReactNode;
+    loading?: boolean;
+    /** The app's own loading state for the map canvas. */
+    loadingFallback?: React.ReactNode;
+    className?: string;
+}
+/**
+ * The map card frame: the approved height steps (420px at 900px and wider,
+ * 320px at 601-899px, 240px at 600px and below), the selection panel as an
+ * overlay on desktop, an inline bar on tablet and a snap sheet in fullscreen on
+ * a phone, plus the stat strip footer. The map itself, the geography and the
+ * metrics are the app's; `children` is the canvas.
+ *
+ * Escape closes fullscreen and returns focus to the expand toggle, the toggle
+ * and the panel controls are 44px below 600px and 32px from 600px up, and the
+ * panel comes before the footer in DOM order.
+ */
+export declare function MapCard({ title, description, children, panel, panelLabel, footer, chip, onExpandChange, expanded, expandLabel, collapseLabel, sheetSummary, unmappedNote, loading, loadingFallback, className, }: MapCardProps): React.JSX.Element;

package/dist/components/map-card.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconChevronDown, IconChevronUp, IconMaximize, IconMinimize, IconX } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+import { StatStrip } from "./stat-strip";
+/**
+ * The map card frame: the approved height steps (420px at 900px and wider,
+ * 320px at 601-899px, 240px at 600px and below), the selection panel as an
+ * overlay on desktop, an inline bar on tablet and a snap sheet in fullscreen on
+ * a phone, plus the stat strip footer. The map itself, the geography and the
+ * metrics are the app's; `children` is the canvas.
+ *
+ * Escape closes fullscreen and returns focus to the expand toggle, the toggle
+ * and the panel controls are 44px below 600px and 32px from 600px up, and the
+ * panel comes before the footer in DOM order.
+ */
+export function MapCard({ title, description, children, panel, panelLabel = "Ringkasan peta", footer, chip, onExpandChange, expanded, expandLabel = "Perbesar peta", collapseLabel = "Tutup layar penuh", sheetSummary, unmappedNote, loading = false, loadingFallback, className, }) {
+    const [internalExpanded, setInternalExpanded] = React.useState(false);
+    const [sheetOpen, setSheetOpen] = React.useState(false);
+    const toggleRef = React.useRef(null);
+    const controlled = expanded !== undefined;
+    const isExpanded = controlled ? expanded : internalExpanded;
+    const setExpanded = React.useCallback((next) => {
+        if (!controlled)
+            setInternalExpanded(next);
+        if (!next)
+            setSheetOpen(false);
+        onExpandChange?.(next);
+    }, [controlled, onExpandChange]);
+    // Escape closes fullscreen and puts focus back on the toggle that opened it.
+    React.useEffect(() => {
+        if (!isExpanded)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            setExpanded(false);
+            toggleRef.current?.focus();
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [isExpanded, setExpanded]);
+    return (_jsxs("section", { "data-slot": "map-card", "data-expanded": isExpanded, "aria-label": title, className: cn("relative rounded-xl border border-brand-border bg-card p-5 max-[600px]:p-4", isExpanded && "fixed inset-0 z-50 flex flex-col overflow-y-auto rounded-none border-0", className), children: [_jsxs("header", { className: "mb-3.5 flex flex-wrap items-start justify-between gap-3.5", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "mb-1 text-lg font-bold tracking-tight text-brand-ink", children: title }), description ? _jsx("p", { className: "m-0 text-[13px] leading-snug text-brand-muted", children: description }) : null] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [chip ? (_jsxs("button", { type: "button", onClick: chip.onClear, "aria-label": `Hapus pilihan: ${chip.label}`, className: "flex max-w-[16rem] items-center gap-1.5 rounded-full border border-brand-red bg-card px-3 py-1.5 text-xs font-bold text-brand-ink transition-colors hover:bg-brand-red/5 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none max-[600px]:min-h-11 min-[600px]:min-h-8", children: [_jsx("span", { className: "truncate", children: chip.label }), _jsx(IconX, { "aria-hidden": true, className: "size-3.5 shrink-0 text-brand-muted" })] })) : null, _jsxs("button", { ref: toggleRef, type: "button", "aria-expanded": isExpanded, onClick: () => setExpanded(!isExpanded), className: "flex items-center gap-1.5 rounded-lg border border-brand-border bg-card px-3 text-[13px] font-bold text-brand-ink 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]:min-h-8", children: [isExpanded ? _jsx(IconMinimize, { "aria-hidden": true, className: "size-4" }) : _jsx(IconMaximize, { "aria-hidden": true, className: "size-4" }), isExpanded ? collapseLabel : expandLabel] })] })] }), _jsxs("div", { "data-slot": "map-canvas", className: cn("relative z-0 h-60 overflow-hidden rounded-[9px] border border-brand-border bg-[#e8edf2] min-[601px]:h-80 min-[900px]:h-[420px]", isExpanded && "h-auto min-h-0 flex-1"), children: [children, loading && loadingFallback ? (_jsx("div", { role: "status", "aria-label": "Memuat peta", className: "absolute inset-0 flex flex-col gap-3 bg-card p-4", children: loadingFallback })) : null, loading && !loadingFallback ? (_jsxs("div", { role: "status", "aria-busy": "true", "aria-label": "Memuat peta", className: "absolute inset-0 grid content-start gap-3 bg-card p-4", children: [_jsx(Skeleton, { "aria-hidden": "true", className: "h-5 w-44" }), _jsx(Skeleton, { "aria-hidden": "true", className: "h-full w-full" })] })) : null, _jsx("div", { "data-slot": "map-panel-overlay", className: "absolute top-2.5 right-2.5 hidden w-[230px] rounded-[10px] border border-brand-border bg-card p-3.5 shadow-lg min-[900px]:block", "aria-label": panelLabel, children: panel })] }), !isExpanded ? (_jsx("aside", { "data-slot": "map-panel-inline", "aria-label": panelLabel, className: "mt-3 flex min-w-0 flex-wrap items-center gap-x-6 gap-y-2 rounded-[10px] border border-brand-border px-4 py-3 min-[900px]:hidden", children: panel })) : null, isExpanded ? (_jsxs("div", { "data-slot": "map-sheet", className: "absolute inset-x-0 bottom-0 z-[1001] hidden rounded-t-[14px] border-t border-brand-border bg-card shadow-[0_-8px_24px_rgba(15,24,39,.14)] max-[899px]:block", children: [_jsxs("button", { type: "button", "aria-expanded": sheetOpen, onClick: () => setSheetOpen((value) => !value), className: "flex w-full min-h-11 flex-col items-center gap-2 px-4 pt-2.5 pb-2 text-[13px] font-bold text-brand-ink focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none", children: [_jsx("span", { "aria-hidden": true, className: "h-[5px] w-9 rounded-full bg-brand-border" }), _jsxs("span", { className: "flex w-full items-center justify-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate", children: sheetSummary ?? title }), sheetOpen ? _jsx(IconChevronDown, { "aria-hidden": true, className: "size-4" }) : _jsx(IconChevronUp, { "aria-hidden": true, className: "size-4" })] })] }), sheetOpen ? _jsx("div", { className: "min-w-0 px-4 pb-4", children: panel }) : null] })) : null, footer?.length ? _jsx(StatStrip, { items: footer, size: "compact", label: panelLabel }) : null, unmappedNote ? _jsx("p", { className: "mt-2.5 text-xs text-brand-muted", children: unmappedNote }) : null] }));
+}

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

@@ -32,6 +32,11 @@ export interface MemberCardBlockProps {
     validUntil?: string | null;
     graceUntil?: string | null;
     suspendReason?: string | null;
+    /**
+     * AD/ART category line under the member number ("Anggota Luar Biasa"). The page passes it for
+     * LUAR_BIASA members only and null (or nothing) for everyone else, so the card shows no line.
+     */
+    categoryLine?: string | null;
     state: MemberCardState;
     /** The PPIJ logo shown on the front (the app serves /ppij-logo.png). */
     logoSrc: string;

package/dist/components/member-card-block.js

@@ -150,7 +150,7 @@ function Front(p) {
     const l = LABELS[p.locale];
     const state = p.state;
     const ended = state === "expired" || state === "expired_grace";
-    return (_jsxs("div", { className: `mc-face mc-front ${CARD_CLASS[state]}`, "data-theme": p.theme?.id, style: { "--mc-base": p.theme?.base }, children: [p.theme && !p.artworkFailed ? (_jsx("svg", { className: "mc-art", viewBox: p.theme.viewBox, preserveAspectRatio: "xMidYMid meet", "aria-hidden": "true", focusable: "false", children: _jsx("image", { href: p.theme.asset, width: p.theme.width, height: p.theme.height, onError: p.onArtworkError }) })) : null, _jsx("div", { className: "mc-shine", "aria-hidden": "true", style: p.shineStyle }), _jsxs("div", { className: "mc-row", children: [_jsx("img", { className: "mc-logo", src: p.logoSrc, alt: l.brand, width: 92, height: 63 }), _jsx("span", { className: "mc-chip", children: chipText(state, p, l) })] }), _jsxs("div", { className: "mc-id", children: [_jsx("span", { className: "mc-name", children: p.name }), state === "suspended" ? (_jsx("span", { className: "mc-note", children: p.suspendReason ?? "" })) : (_jsx("span", { className: "mc-number", children: p.number })), state === "change_pending" ? _jsx("span", { className: "mc-note", children: l.pending }) : null] }), _jsxs("div", { className: "mc-row mc-foot", children: [_jsxs("div", { className: "mc-col", children: [_jsx("span", { className: "mc-label", children: l.unitLabel }), _jsx("span", { className: "mc-val", children: unitLine(p) })] }), state !== "suspended" && p.validUntil ? (_jsxs("div", { className: "mc-col mc-right", children: [_jsx("span", { className: "mc-label", children: ended ? l.endedLabel : l.validLabel }), _jsx("span", { className: "mc-val", children: shortDate(p.validUntil, p.locale, true) })] })) : null] })] }));
+    return (_jsxs("div", { className: `mc-face mc-front ${CARD_CLASS[state]}`, "data-theme": p.theme?.id, style: { "--mc-base": p.theme?.base }, children: [p.theme && !p.artworkFailed ? (_jsx("svg", { className: "mc-art", viewBox: p.theme.viewBox, preserveAspectRatio: "xMidYMid meet", "aria-hidden": "true", focusable: "false", children: _jsx("image", { href: p.theme.asset, width: p.theme.width, height: p.theme.height, onError: p.onArtworkError }) })) : null, _jsx("div", { className: "mc-shine", "aria-hidden": "true", style: p.shineStyle }), _jsxs("div", { className: "mc-row", children: [_jsx("img", { className: "mc-logo", src: p.logoSrc, alt: l.brand, width: 92, height: 63 }), _jsx("span", { className: "mc-chip", children: chipText(state, p, l) })] }), _jsxs("div", { className: "mc-id", children: [_jsx("span", { className: "mc-name", children: p.name }), state === "suspended" ? (_jsx("span", { className: "mc-note", children: p.suspendReason ?? "" })) : (_jsx("span", { className: "mc-number", children: p.number })), p.categoryLine ? _jsx("span", { className: "mc-category", children: p.categoryLine }) : null, state === "change_pending" ? _jsx("span", { className: "mc-note", children: l.pending }) : null] }), _jsxs("div", { className: "mc-row mc-foot", children: [_jsxs("div", { className: "mc-col", children: [_jsx("span", { className: "mc-label", children: l.unitLabel }), _jsx("span", { className: "mc-val", children: unitLine(p) })] }), state !== "suspended" && p.validUntil ? (_jsxs("div", { className: "mc-col mc-right", children: [_jsx("span", { className: "mc-label", children: ended ? l.endedLabel : l.validLabel }), _jsx("span", { className: "mc-val", children: shortDate(p.validUntil, p.locale, true) })] })) : null] })] }));
 }
 /** Back face: motto, barcode of the membership number, printed number, hint and decorative map. */
 function Back(p) {

package/dist/components/member-card.css

@@ -19,6 +19,8 @@
 .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; }
+/* AD/ART category line, Luar Biasa members only (Anggota Biasa shows no line). */
+.mc-category { font-size:11px; line-height:14px; font-weight:600; letter-spacing:.06em; opacity:.94; }
 .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; }

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+export type PanelCardHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type PanelCardPadding = "page" | "panel" | "none";
+export interface PanelCardProps {
+    title?: string;
+    description?: string;
+    /** Header control slot, for example a Button or an IconButton. */
+    action?: React.ReactNode;
+    /** Quiet status next to the title, for example a Badge. */
+    badge?: React.ReactNode;
+    /** Leading Tabler icon; the component sets its size and colour. */
+    icon?: React.ReactNode;
+    /** `panel` is the standard card, `page` the white page island, `none` for a bare body. */
+    padding?: PanelCardPadding;
+    /** `compact` is the admin scale: a 14px title and 12px description with 16px padding. */
+    density?: "default" | "compact";
+    /** Heading level of the title; the page owns the document outline. Default 2. */
+    headingLevel?: PanelCardHeadingLevel;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * The white island that every admin page is built from: one title, one quiet
+ * description, one header action and a body. Replaces `.work-panel`,
+ * `.recent-section`, `.side-card`, `.stat-card`, `.figures-band` and the three
+ * page islands. Presentation only; the caller owns the content and the action.
+ */
+export declare function PanelCard({ title, description, action, badge, icon, padding, density, headingLevel, children, className, }: PanelCardProps): React.JSX.Element;

package/dist/components/panel-card.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+/** The prototype's islands: `panel` is the standard 22px card, `page` the 28px page island. */
+const paddingClass = {
+    panel: "p-[22px] max-[700px]:p-[17px]",
+    page: "p-7 max-[900px]:p-5 max-[600px]:p-4",
+    none: "p-0",
+};
+const compactPaddingClass = {
+    panel: "p-4",
+    page: "p-5 max-[600px]:p-4",
+    none: "p-0",
+};
+/**
+ * The white island that every admin page is built from: one title, one quiet
+ * description, one header action and a body. Replaces `.work-panel`,
+ * `.recent-section`, `.side-card`, `.stat-card`, `.figures-band` and the three
+ * page islands. Presentation only; the caller owns the content and the action.
+ */
+export function PanelCard({ title, description, action, badge, icon, padding = "panel", density = "default", headingLevel = 2, children, className, }) {
+    const Heading = `h${headingLevel}`;
+    const compact = density === "compact";
+    const hasHead = Boolean(title || description || badge || icon || action);
+    return (_jsxs("div", { "data-slot": "panel-card", "data-padding": padding, "data-density": density, className: cn("min-w-0 rounded-xl border border-brand-border bg-card text-brand-ink", compact ? compactPaddingClass[padding] : paddingClass[padding], className), children: [hasHead ? (_jsxs("div", { className: cn("flex flex-wrap items-start justify-between gap-x-4 gap-y-3", compact ? "mb-3" : "mb-4"), children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2.5", children: [icon ? (_jsx("span", { "aria-hidden": true, className: "mt-0.5 shrink-0 text-brand-red [&_svg]:size-5", children: icon })) : null, _jsxs("div", { className: "min-w-0", children: [title || badge ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [title ? _jsx(Heading, { className: cn("leading-snug font-bold tracking-tight", compact ? "text-sm" : "text-lg"), children: title }) : null, badge] })) : null, description ? _jsx("p", { className: cn("mt-1 text-brand-muted", compact ? "text-xs" : "text-[13px]"), children: description }) : null] })] }), action ? (_jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2 max-[600px]:[&_[data-slot=button]]:min-h-11", children: action })) : null] })) : null, children] }));
+}

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+export interface PieChartDatum {
+    label: string;
+    value: number;
+    /** Defaults to the token ramp: brand red and its tints, then the neutral greys. */
+    color?: string;
+}
+export interface PieChartProps {
+    data: PieChartDatum[];
+    /** Outer diameter in pixels. Default 168. */
+    size?: number;
+    donut?: boolean;
+    /** Quiet line inside or under the chart, for example "Total". */
+    centerLabel?: string;
+    /** The figure the centre states, already formatted by the page. */
+    centerValue?: string;
+    /** `list` is the default legend; `none` leaves the chart alone. */
+    legend?: "list" | "none";
+    /** `table` adds a screen-reader `<table>` carrying the same numbers. */
+    fallback?: "table" | "none";
+    /** Slices beyond this collapse into one "Lainnya" slice. Default 5. */
+    maxSlices?: number;
+    formatValue?: (value: number) => string;
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * A pie or donut chart drawn by hand: one SVG path per slice, no dependency.
+ * The owner's two charts for Statistik (Jenis kelamin and Anggota Biasa vs Luar
+ * Biasa) are this component. Every slice is named in the legend beside its
+ * count and its percentage, so colour is never the only carrier, and
+ * `fallback="table"` puts the same numbers in a table for a screen reader.
+ */
+export declare function PieChart({ data, size, donut, centerLabel, centerValue, legend, fallback, maxSlices, formatValue, ariaLabel, className, }: PieChartProps): React.JSX.Element;