ppij-design-system 0.2.0 → 0.4.0

package/dist/components/pie-chart.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+/** The approved token ramp: brand red first, then its tints, then the neutral greys. */
+const PALETTE = ["var(--brand-red)", "#efbbc4", "#fae6e9", "#c6ccd2", "#1c1f23"];
+const OTHER_LABEL = "Lainnya";
+const defaultFormat = (value) => value.toLocaleString("id-ID");
+/** One slice every 0.1% apart, with the rounding residual given back to the largest slice. */
+function withPercentages(slices) {
+    const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+    if (total <= 0)
+        return slices.map((slice) => ({ ...slice, pct: 0 }));
+    const rounded = slices.map((slice) => Math.round((slice.value / total) * 1000) / 10);
+    const residual = Math.round((100 - rounded.reduce((sum, pct) => sum + pct, 0)) * 10) / 10;
+    if (residual !== 0) {
+        const largest = rounded.indexOf(Math.max(...rounded));
+        rounded[largest] = Math.round((rounded[largest] + residual) * 10) / 10;
+    }
+    return slices.map((slice, index) => ({ ...slice, pct: rounded[index] }));
+}
+/** Keeps the largest slices and folds the rest into one "Lainnya" slice. */
+function withMaxSlices(data, maxSlices) {
+    const positive = data.filter((slice) => slice.value > 0);
+    if (positive.length <= maxSlices)
+        return positive;
+    const sorted = [...positive].sort((a, b) => b.value - a.value);
+    const kept = sorted.slice(0, maxSlices - 1);
+    const rest = sorted.slice(maxSlices - 1);
+    return [...kept, { label: OTHER_LABEL, value: rest.reduce((sum, slice) => sum + slice.value, 0), color: PALETTE[3] }];
+}
+/**
+ * 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 function PieChart({ data, size = 168, donut = false, centerLabel, centerValue, legend = "list", fallback = "none", maxSlices = 5, formatValue = defaultFormat, ariaLabel, className, }) {
+    const slices = React.useMemo(() => withPercentages(withMaxSlices(data, maxSlices)), [data, maxSlices]);
+    const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+    const cx = size / 2;
+    const cy = size / 2;
+    const rOuter = size / 2 - 1;
+    const rInner = donut ? rOuter * 0.58 : 0;
+    const polar = (radius, deg) => {
+        const radians = ((deg - 90) * Math.PI) / 180;
+        return [cx + radius * Math.cos(radians), cy + radius * Math.sin(radians)];
+    };
+    /** One closed ring segment: outer arc, inner arc, back to the start. */
+    const ringSeg = (start, end) => {
+        const large = end - start > 180 ? 1 : 0;
+        const [x1, y1] = polar(rOuter, start);
+        const [x2, y2] = polar(rOuter, end);
+        const outer = `M ${x1} ${y1} A ${rOuter} ${rOuter} 0 ${large} 1 ${x2} ${y2}`;
+        if (rInner <= 0)
+            return `${outer} L ${cx} ${cy} Z`;
+        const [x3, y3] = polar(rInner, end);
+        const [x4, y4] = polar(rInner, start);
+        return `${outer} L ${x3} ${y3} A ${rInner} ${rInner} 0 ${large} 0 ${x4} ${y4} Z`;
+    };
+    let cursor = 0;
+    const arcs = slices.map((slice, index) => {
+        const sweep = (slice.pct / 100) * 360;
+        const start = cursor;
+        const end = cursor + sweep;
+        cursor = end;
+        // A full circle degenerates into one arc, so it is drawn as two halves.
+        const path = sweep >= 359.9 ? `${ringSeg(0, 180)} ${ringSeg(180, 360)}` : ringSeg(start, end);
+        return { ...slice, path, color: slice.color ?? PALETTE[index % PALETTE.length] };
+    });
+    const summary = arcs.length
+        ? arcs.map((arc) => `${arc.label} ${formatValue(arc.value)} (${arc.pct}%)`).join(", ")
+        : "Tidak ada data";
+    return (_jsxs("div", { "data-slot": "pie-chart", "data-size": size, className: cn("grid min-w-0 gap-3", className), children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-center gap-4", children: [_jsxs("svg", { role: "img", "aria-label": ariaLabel ?? summary, width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "shrink-0", children: [arcs.map((arc) => (_jsx("path", { d: arc.path, fill: arc.color, stroke: "var(--card)", strokeWidth: 1, vectorEffect: "non-scaling-stroke", fillRule: "evenodd", children: _jsx("title", { children: `${arc.label}: ${formatValue(arc.value)} (${arc.pct}%)` }) }, arc.label))), donut && (centerValue || centerLabel) ? (_jsxs(_Fragment, { children: [_jsx("text", { x: cx, y: centerLabel ? cy - 2 : cy + 4, textAnchor: "middle", className: "fill-brand-ink text-[18px] font-extrabold", children: centerValue }), centerLabel ? (_jsx("text", { x: cx, y: cy + 14, textAnchor: "middle", className: "fill-brand-muted text-[11px]", children: centerLabel })) : null] })) : null] }), legend === "list" ? (_jsxs("ul", { className: "grid min-w-0 gap-1.5 text-[13px]", children: [arcs.map((arc) => (_jsxs("li", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: { background: arc.color } }), _jsx("span", { className: "min-w-0 flex-1 truncate text-brand-ink", children: arc.label }), _jsx("span", { className: "shrink-0 font-semibold text-brand-ink tabular-nums", children: formatValue(arc.value) }), _jsxs("span", { className: "w-11 shrink-0 text-right text-brand-muted tabular-nums", children: [arc.pct, "%"] })] }, arc.label))), arcs.length && (centerLabel || total) ? (_jsxs("li", { className: "mt-0.5 flex items-center gap-2 border-t border-brand-border pt-1.5 text-brand-muted", children: [_jsx("span", { className: "min-w-0 flex-1", children: centerLabel ?? "Total" }), _jsx("span", { className: "shrink-0 font-bold text-brand-ink tabular-nums", children: formatValue(total) }), _jsx("span", { className: "w-11 shrink-0" })] })) : null] })) : null] }), fallback === "table" ? (_jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: ariaLabel ?? summary }), _jsx("tbody", { children: arcs.map((arc) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: arc.label }), _jsx("td", { children: formatValue(arc.value) }), _jsxs("td", { children: [arc.pct, "%"] })] }, arc.label))) })] })) : null] }));
+}

package/dist/components/reveal-value.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface RevealValueProps {
+    /** Shown while the value is hidden, for example "••••••••". */
+    masked: React.ReactNode;
+    /** Shown after the reveal, for example "PPIJ-2026-000123". */
+    clear: React.ReactNode;
+    revealed: boolean;
+    onReveal: () => void;
+    onHide: () => void;
+    /** Toggle label while hidden. Default "Tampilkan". */
+    showLabel?: string;
+    /** Toggle label while revealed. Default "Sembunyikan". */
+    hideLabel?: string;
+    /** Hides the toggle text; the accessible name stays. */
+    iconOnly?: boolean;
+    /** Announced in place of the mask glyphs; the reveal itself stays app-side and audited. */
+    maskedLabel?: string;
+    className?: string;
+}
+/**
+ * A masked value with the Tampilkan/Sembunyikan toggle. The masked state is
+ * announced as hidden instead of spelling out dots, the toggle is a real button,
+ * and the revealed value is announced on its own so the rest of the row is not
+ * read again. The audited reveal is the caller's callback.
+ */
+export declare function RevealValue({ masked, clear, revealed, onReveal, onHide, showLabel, hideLabel, iconOnly, maskedLabel, className, }: RevealValueProps): React.JSX.Element;

package/dist/components/reveal-value.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+/**
+ * A masked value with the Tampilkan/Sembunyikan toggle. The masked state is
+ * announced as hidden instead of spelling out dots, the toggle is a real button,
+ * and the revealed value is announced on its own so the rest of the row is not
+ * read again. The audited reveal is the caller's callback.
+ */
+export function RevealValue({ masked, clear, revealed, onReveal, onHide, showLabel = "Tampilkan", hideLabel = "Sembunyikan", iconOnly = false, maskedLabel = "Nilai tersembunyi", className, }) {
+    return (_jsxs("span", { "data-slot": "reveal-value", className: cn("inline-flex min-w-0 flex-wrap items-center gap-x-2.5 gap-y-1.5", className), children: [_jsx("span", { "aria-live": "polite", className: cn("min-w-0 break-words text-[13px] font-semibold", revealed ? "text-brand-ink" : "tracking-[.1em] text-brand-muted"), children: revealed ? (clear) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: maskedLabel }), _jsx("span", { "aria-hidden": true, children: masked })] })) }), _jsxs("button", { type: "button", onClick: revealed ? onHide : onReveal, className: cn("inline-flex shrink-0 items-center gap-1 rounded-full border border-brand-border bg-card px-2.5 py-0.5 text-[11px] font-bold text-brand-red transition-colors hover:bg-brand-red/5", "min-h-8 max-[600px]:min-h-11 max-[600px]:px-3 max-[600px]:text-xs", "focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"), children: [revealed ? _jsx(IconEyeOff, { className: "size-3.5", "aria-hidden": true }) : _jsx(IconEye, { className: "size-3.5", "aria-hidden": true }), _jsx("span", { className: iconOnly ? "sr-only" : undefined, children: revealed ? hideLabel : showLabel })] })] }));
+}

package/dist/components/searchable-multi-select.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+export interface SearchableMultiSelectProps {
+    /** Names the control; also the accessible name of the trigger. */
+    label: string;
+    values: string[];
+    options: string[];
+    /** Single mode replaces the selection; multiple mode adds and removes. */
+    onChange: (values: string[]) => void;
+    /** Trigger label when nothing is selected, for example "Semua komsat". */
+    allLabel: string;
+    /** Hides the caption and drops the trigger to the compact band, for a toolbar. */
+    compact?: boolean;
+    single?: boolean;
+    /** The "all" row that clears the selection. Defaults to `!single`. */
+    showAllOption?: boolean;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    /** Forces the caption on or off; by default it shows unless `compact`. */
+    visibleLabel?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * One searchable select for every unit and facet picker in the admin: the
+ * member directory, the invitation form, the management lists and the
+ * verifikasi filters. It merges the three local copies that had drifted.
+ *
+ * The trigger reads `allLabel`, the single value, or "N dipilih". Search
+ * matches with `toLocaleLowerCase("id")`, takes focus when the menu opens and
+ * resets when it closes; `Escape`, `Tab` and `ArrowDown` pass through to Radix
+ * and every other key is stopped so the highlight does not move. Checkbox items
+ * keep the menu open, and the "all" row clears the selection.
+ */
+export declare function SearchableMultiSelect({ label, values, options, onChange, allLabel, compact, single, showAllOption, searchPlaceholder, emptyLabel, visibleLabel, disabled, className, }: SearchableMultiSelectProps): React.JSX.Element;

package/dist/components/searchable-multi-select.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconChevronDown } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "./dropdown-menu";
+import { Input } from "./input";
+/**
+ * One searchable select for every unit and facet picker in the admin: the
+ * member directory, the invitation form, the management lists and the
+ * verifikasi filters. It merges the three local copies that had drifted.
+ *
+ * The trigger reads `allLabel`, the single value, or "N dipilih". Search
+ * matches with `toLocaleLowerCase("id")`, takes focus when the menu opens and
+ * resets when it closes; `Escape`, `Tab` and `ArrowDown` pass through to Radix
+ * and every other key is stopped so the highlight does not move. Checkbox items
+ * keep the menu open, and the "all" row clears the selection.
+ */
+export function SearchableMultiSelect({ label, values, options, onChange, allLabel, compact = false, single = false, showAllOption, searchPlaceholder, emptyLabel, visibleLabel, disabled = false, className, }) {
+    const [query, setQuery] = React.useState("");
+    const searchRef = React.useRef(null);
+    const showAll = showAllOption ?? !single;
+    const showCaption = visibleLabel ?? !compact;
+    const matches = options.filter((option) => option.toLocaleLowerCase("id").includes(query.trim().toLocaleLowerCase("id")));
+    const selectedLabel = values.length === 0 ? allLabel : values.length === 1 ? values[0] : `${values.length} dipilih`;
+    const placeholder = searchPlaceholder ?? `Cari ${label.toLocaleLowerCase("id")}`;
+    return (_jsxs("div", { "data-slot": "searchable-multi-select", "data-compact": compact, className: cn("grid min-w-0 gap-2", className), children: [_jsx("span", { className: cn("text-[13px] font-semibold text-brand-muted", showCaption ? undefined : "sr-only"), children: label }), _jsxs(DropdownMenu, { onOpenChange: (open) => {
+                    if (open)
+                        window.requestAnimationFrame(() => searchRef.current?.focus());
+                    else
+                        setQuery("");
+                }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", disabled: disabled, "aria-label": `${label}: ${selectedLabel}`, className: "flex min-h-11 w-full min-w-0 justify-between 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" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-[max(230px,var(--radix-dropdown-menu-trigger-width))] max-w-[min(330px,calc(100vw-32px))] bg-card", children: [_jsx("div", { className: "p-[7px]", children: _jsx(Input, { ref: searchRef, "data-size": "sm", textSize: "compact", value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                                        if (!["Escape", "Tab", "ArrowDown"].includes(event.key))
+                                            event.stopPropagation();
+                                    }, placeholder: placeholder, "aria-label": placeholder }) }), _jsxs("div", { className: "max-h-[min(280px,42vh)] overflow-y-auto px-1 pb-1", children: [showAll ? (_jsx(DropdownMenuCheckboxItem, { checked: values.length === 0, onCheckedChange: () => onChange([]), onSelect: (event) => event.preventDefault(), className: "min-h-11 text-[13px] min-[600px]:min-h-[38px]", children: allLabel })) : null, matches.length ? (matches.map((option) => (_jsx(DropdownMenuCheckboxItem, { checked: values.includes(option), onCheckedChange: (checked) => onChange(single ? (checked ? [option] : []) : checked ? [...values, option] : values.filter((value) => value !== option)), onSelect: single ? undefined : (event) => event.preventDefault(), className: "min-h-11 text-[13px] min-[600px]:min-h-[38px]", children: option }, option)))) : (_jsx("p", { className: "px-2.5 py-2.5 text-[13px] text-brand-muted", children: emptyLabel ?? "Tidak ada pilihan yang cocok." }))] })] })] })] }));
+}

package/dist/components/stat-strip.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface StatStripItem {
+    value: React.ReactNode;
+    label: string;
+    /** One quiet line under the label, for example a period or a source. */
+    hint?: string;
+}
+export interface StatStripProps {
+    items: StatStripItem[];
+    /** Columns from 600px up; the strip wraps to two columns on a phone. Default 3. */
+    columns?: number;
+    /**
+     * `default` is the Statistik totals band: a white card with 22px values and
+     * 11px labels. `compact` is the quiet in-card strip behind the map footer:
+     * a top hairline with 21px values and 12px labels.
+     */
+    size?: "default" | "compact";
+    /** Accessible name of the strip. Without it the strip claims no landmark. */
+    label?: string;
+    className?: string;
+}
+/**
+ * A value-over-label strip: the Statistik totals band and the map card footer.
+ * Presentation only; the page computes and formats every number, and a value
+ * that is a percentage always carries its label beside it.
+ */
+export declare function StatStrip({ items, columns, size, label, className }: StatStripProps): React.JSX.Element;

package/dist/components/stat-strip.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+const columnClass = {
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-2 min-[600px]:grid-cols-4",
+    5: "grid-cols-2 min-[601px]:grid-cols-3 min-[1101px]:grid-cols-5",
+    6: "grid-cols-2 min-[601px]:grid-cols-3 min-[1101px]:grid-cols-6",
+};
+/** A wrapped grid keeps a row-end hairline unless the item ends the row. */
+const wrapClass = {
+    4: "max-[600px]:[&>div]:border-r-0",
+    5: "max-[1100px]:[&>div:nth-child(3n)]:border-r-0 max-[600px]:[&>div]:border-r-0",
+    6: "max-[1100px]:[&>div:nth-child(3n)]:border-r-0 max-[600px]:[&>div]:border-r-0",
+};
+/**
+ * A value-over-label strip: the Statistik totals band and the map card footer.
+ * Presentation only; the page computes and formats every number, and a value
+ * that is a percentage always carries its label beside it.
+ */
+export function StatStrip({ items, columns = 3, size = "default", label, className }) {
+    const compact = size === "compact";
+    const grid = cn("grid gap-y-3", columnClass[columns] ?? "grid-cols-3", "max-[600px]:[&>div]:px-2.5", "[&>div]:border-r [&>div]:border-brand-border [&>div:last-child]:border-r-0", wrapClass[columns]);
+    return (_jsx("dl", { "data-slot": "stat-strip", "data-size": size, ...(label ? { role: "group", "aria-label": label } : {}), className: cn(grid, compact ? "mt-4 border-t border-brand-border pt-3.5" : "rounded-xl border border-brand-border bg-card px-1.5 py-4", "[&>div]:min-w-0", compact ? "[&>div]:px-[18px] [&>div:first-child]:pl-0 [&>div:last-child]:pr-0" : "[&>div]:px-4 [&>div:first-child]:pl-2.5 [&>div:last-child]:pr-1.5", className), style: columnClass[columns] ? undefined : { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: items.map((item) => (_jsxs("div", { className: "flex min-w-0 flex-col-reverse", children: [_jsxs("dt", { className: cn("text-brand-muted", compact ? "text-xs" : "text-[11px]"), children: [item.label, item.hint ? _jsx("span", { className: "mt-0.5 block text-xs text-brand-muted", children: item.hint }) : null] }), _jsx("dd", { className: cn("font-bold tracking-tight text-brand-ink max-[600px]:text-[18px]", compact ? "text-[21px]" : "text-[22px]"), children: item.value })] }, item.label))) }));
+}

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

@@ -11,6 +11,11 @@ export interface StatusCardProps {
     tone?: StatusCardTone;
     /** Compact: one row, title and action only (the active and expiring states on Beranda). */
     compact?: boolean;
+    /**
+     * Admin density: 14px title, 13px body and a 32px action from 600px up, keeping
+     * the 44px action below 600px. The default density is the Beranda scale.
+     */
+    density?: "default" | "compact";
     className?: string;
 }
 /**
@@ -19,6 +24,6 @@ export interface StatusCardProps {
  * expiring) use the compact one-row form; states whose body informs
  * (submitted, needs changes, rejected) use the full card. The tone
  * carries urgency: default white, warning amber, danger red, info sky,
- * muted for closed memberships.
+ * muted for closed memberships. `density="compact"` is the admin scale.
  */
-export declare function StatusCard({ icon, title, body, actionLabel, actionHref, onAction, tone, compact, className }: StatusCardProps): React.JSX.Element;
+export declare function StatusCard({ icon, title, body, actionLabel, actionHref, onAction, tone, compact, density, className }: StatusCardProps): React.JSX.Element;

package/dist/components/status-card.js

@@ -15,12 +15,13 @@ const TONES = {
  * expiring) use the compact one-row form; states whose body informs
  * (submitted, needs changes, rejected) use the full card. The tone
  * carries urgency: default white, warning amber, danger red, info sky,
- * muted for closed memberships.
+ * muted for closed memberships. `density="compact"` is the admin scale.
  */
-export function StatusCard({ icon, title, body, actionLabel, actionHref, onAction, tone = "default", compact = false, className }) {
-    const action = actionLabel ? (_jsx(Button, { asChild: Boolean(actionHref), onClick: onAction, className: cn("shrink-0 bg-brand-red text-white hover:bg-brand-red/90", compact ? "min-h-11 px-4" : "min-h-11 px-5"), children: actionHref ? _jsx("a", { href: actionHref, children: actionLabel }) : _jsx("span", { children: actionLabel }) })) : null;
+export function StatusCard({ icon, title, body, actionLabel, actionHref, onAction, tone = "default", compact = false, density = "default", className }) {
+    const admin = density === "compact";
+    const action = actionLabel ? (_jsx(Button, { asChild: Boolean(actionHref), onClick: onAction, className: cn("shrink-0 bg-brand-red text-white hover:bg-brand-red/90", compact ? "min-h-11 px-4" : "min-h-11 px-5", admin && "max-[600px]:min-h-11 text-[13px] min-[600px]:h-8 min-[600px]:min-h-8 min-[600px]:px-3"), children: actionHref ? _jsx("a", { href: actionHref, children: actionLabel }) : _jsx("span", { children: actionLabel }) })) : null;
     if (compact) {
-        return (_jsxs("div", { role: "region", "aria-label": title, className: cn("flex min-h-[60px] items-center gap-3 rounded-xl border py-2 pr-2 pl-4", TONES[tone], className), children: [_jsx("span", { className: "shrink-0 [&_svg]:size-6", children: icon }), _jsx("h2", { className: "line-clamp-2 min-w-0 flex-1 text-base leading-snug font-bold", children: title }), action] }));
+        return (_jsxs("div", { role: "region", "aria-label": title, className: cn("flex min-h-[60px] items-center gap-3 rounded-xl border py-2 pr-2 pl-4", TONES[tone], admin && "text-[13px]", className), children: [_jsx("span", { className: "shrink-0 [&_svg]:size-6", children: icon }), _jsx("h2", { className: cn("line-clamp-2 min-w-0 flex-1 text-base leading-snug font-bold", admin && "text-sm"), children: title }), action] }));
     }
-    return (_jsxs(Card, { className: cn("gap-3 rounded-xl border py-5", TONES[tone], className), children: [_jsxs("div", { className: "flex items-start gap-3 px-5", children: [_jsx("span", { className: "mt-0.5 shrink-0 [&_svg]:size-6", children: icon }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-lg leading-snug font-bold", children: title }), body && _jsx("p", { className: "mt-1 text-sm", children: body })] })] }), action && _jsx("div", { className: "px-5", children: action })] }));
+    return (_jsxs(Card, { className: cn("gap-3 rounded-xl border py-5", TONES[tone], admin && "text-[13px]", className), children: [_jsxs("div", { className: "flex items-start gap-3 px-5", children: [_jsx("span", { className: "mt-0.5 shrink-0 [&_svg]:size-6", children: icon }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: cn("text-lg leading-snug font-bold", admin && "text-sm"), children: title }), body && _jsx("p", { className: cn("mt-1 text-sm", admin && "text-[13px]"), children: body })] })] }), action && _jsx("div", { className: "px-5", children: action })] }));
 }

package/dist/components/tabs.d.ts

@@ -5,7 +5,13 @@ declare function Tabs({ className, orientation, ...props }: React.ComponentProps
 declare const tabsListVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
-declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+export type TabsAppearance = "default" | "underline" | "segmented";
+declare function TabsList({ className, variant, appearance, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants> & {
+    appearance?: TabsAppearance;
+}): React.JSX.Element;
+declare function TabsTrigger({ className, count, children, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+    /** Optional count beside the label; it joins the trigger's accessible name. */
+    count?: number;
+}): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/components/tabs.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
 import { Tabs as TabsPrimitive } from "radix-ui";
@@ -16,11 +16,24 @@ const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center jus
         variant: "default",
     },
 });
-function TabsList({ className, variant = "default", ...props }) {
-    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
+/**
+ * The three tab rows the admin uses: the boxed default, the underlined queue and
+ * page tabs, and the segmented mode and side switchers. `default` leaves the
+ * list exactly as it shipped.
+ */
+const tabsAppearanceClass = {
+    default: "",
+    underline: "h-auto w-full justify-start gap-0 overflow-x-auto rounded-none border-b border-brand-border bg-transparent p-0 [scrollbar-width:thin] max-[600px]:[&>[data-slot=tabs-trigger]]:min-h-11 min-[600px]:[&>[data-slot=tabs-trigger]]:min-h-8",
+    segmented: "h-auto w-full gap-[3px] rounded-[9px] bg-secondary p-[3px] max-[600px]:[&>[data-slot=tabs-trigger]]:min-h-11 min-[600px]:[&>[data-slot=tabs-trigger]]:min-h-8",
+};
+function TabsList({ className, variant = "default", appearance = "default", ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, "data-appearance": appearance, className: cn(tabsListVariants({ variant }), tabsAppearanceClass[appearance], className), ...props }));
 }
-function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className), ...props }));
+/** Underline and segmented triggers; the default appearance keeps the shipped trigger. */
+const underlineTrigger = "group-data-[appearance=underline]/tabs-list:h-auto group-data-[appearance=underline]/tabs-list:flex-none group-data-[appearance=underline]/tabs-list:gap-2 group-data-[appearance=underline]/tabs-list:rounded-none group-data-[appearance=underline]/tabs-list:border-b-2 group-data-[appearance=underline]/tabs-list:border-transparent group-data-[appearance=underline]/tabs-list:px-3 group-data-[appearance=underline]/tabs-list:py-0 group-data-[appearance=underline]/tabs-list:text-sm group-data-[appearance=underline]/tabs-list:font-bold group-data-[appearance=underline]/tabs-list:text-brand-muted group-data-[appearance=underline]/tabs-list:after:hidden group-data-[appearance=underline]/tabs-list:hover:text-brand-red group-data-[appearance=underline]/tabs-list:data-[state=active]:border-brand-red group-data-[appearance=underline]/tabs-list:data-[state=active]:bg-transparent group-data-[appearance=underline]/tabs-list:data-[state=active]:text-brand-red";
+const segmentedTrigger = "group-data-[appearance=segmented]/tabs-list:h-auto group-data-[appearance=segmented]/tabs-list:rounded-[7px] group-data-[appearance=segmented]/tabs-list:bg-transparent group-data-[appearance=segmented]/tabs-list:px-3 group-data-[appearance=segmented]/tabs-list:text-[13px] group-data-[appearance=segmented]/tabs-list:font-semibold group-data-[appearance=segmented]/tabs-list:text-brand-muted group-data-[appearance=segmented]/tabs-list:after:hidden group-data-[appearance=segmented]/tabs-list:data-[state=active]:text-brand-ink group-data-[appearance=segmented]/tabs-list:data-[state=active]:shadow-[0_2px_6px_rgba(24,34,43,.08)]";
+function TabsTrigger({ className, count, children, ...props }) {
+    return (_jsxs(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", underlineTrigger, segmentedTrigger, className), ...props, children: [children, count === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: `, ${count}` }), _jsx("span", { "aria-hidden": true, className: cn("grid min-w-[18px] place-items-center rounded-full px-1.5 text-[11px] leading-[18px] font-bold", count === 0 ? "bg-secondary text-brand-muted" : "bg-brand-red/8 text-brand-red"), children: count })] }))] }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props }));

package/dist/components/timeline.d.ts

@@ -1,18 +1,34 @@
 import * as React from "react";
 export interface TimelineItem {
     title: string;
-    description?: string;
+    /** Any node, so a long note can be an `ExpandableText`. */
+    description?: React.ReactNode;
     /** When it happened or will happen, already formatted by the page. */
     time?: string;
     state: "complete" | "current" | "upcoming";
 }
 export interface TimelineProps {
     items: TimelineItem[];
+    /**
+     * Show only this many items (the newest, in the given order) and reveal the
+     * rest through a labelled toggle. `undefined` renders every item, which is the
+     * default behaviour.
+     */
+    defaultVisibleCount?: number;
+    /** Starts expanded; the component is uncontrolled. Default false. */
+    defaultExpanded?: boolean;
+    /** Overrides the reveal label; `{n}` is the number of hidden items. */
+    expandLabel?: string;
+    /** Overrides the collapse label; `{n}` is the visible count. */
+    collapseLabel?: string;
+    onExpandChange?: (expanded: boolean) => void;
     className?: string;
 }
 /**
- * A vertical history: what happened, in order, with the current point
- * marked. Used for profile history and verification status, where the
- * person asks one question: where is my process now.
+ * A vertical history: what happened, in order, with the current point marked.
+ * Used for profile history, verification status and membership history, where
+ * the person asks one question: where is my process now. With
+ * `defaultVisibleCount` it shows the newest events and keeps the rest behind a
+ * real toggle that reports `aria-expanded` and names how many items it hides.
  */
-export declare function Timeline({ items, className }: TimelineProps): React.JSX.Element;
+export declare function Timeline({ items, defaultVisibleCount, defaultExpanded, expandLabel, collapseLabel, onExpandChange, className }: TimelineProps): React.JSX.Element;

package/dist/components/timeline.js

@@ -1,11 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
 import { IconCheck } from "@tabler/icons-react";
 import { cn } from "../lib/utils";
 /**
- * A vertical history: what happened, in order, with the current point
- * marked. Used for profile history and verification status, where the
- * person asks one question: where is my process now.
+ * A vertical history: what happened, in order, with the current point marked.
+ * Used for profile history, verification status and membership history, where
+ * the person asks one question: where is my process now. With
+ * `defaultVisibleCount` it shows the newest events and keeps the rest behind a
+ * real toggle that reports `aria-expanded` and names how many items it hides.
  */
-export function Timeline({ items, className }) {
-    return (_jsx("ol", { className: cn("grid", className), children: items.map((item, index) => (_jsxs("li", { className: "relative flex gap-3 pb-6 last:pb-0", children: [index < items.length - 1 && (_jsx("span", { "aria-hidden": true, className: cn("absolute top-6 left-[11px] h-[calc(100%-24px)] w-px", item.state === "complete" ? "bg-brand-red" : "bg-border") })), _jsxs("span", { className: cn("relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full border", item.state === "complete" && "border-brand-red bg-brand-red text-white", item.state === "current" && "border-brand-red bg-card ring-4 ring-brand-red/15", item.state === "upcoming" && "border-border bg-card"), children: [item.state === "complete" && _jsx(IconCheck, { className: "size-3.5" }), item.state === "current" && _jsx("span", { className: "size-2 rounded-full bg-brand-red" }), item.state === "upcoming" && _jsx("span", { className: "size-2 rounded-full bg-border" })] }), _jsxs("div", { className: "grid gap-0.5 pt-0.5", children: [_jsx("span", { className: cn("text-sm", item.state === "upcoming" ? "text-muted-foreground" : "font-medium text-brand-ink"), children: item.title }), item.description && _jsx("span", { className: "text-sm text-muted-foreground", children: item.description }), item.time && _jsx("span", { className: "text-xs text-muted-foreground", children: item.time })] })] }, item.title + index))) }));
+export function Timeline({ items, defaultVisibleCount, defaultExpanded = false, expandLabel, collapseLabel, onExpandChange, className }) {
+    const [expanded, setExpanded] = React.useState(defaultExpanded);
+    const limited = defaultVisibleCount !== undefined && items.length > defaultVisibleCount;
+    const visible = limited && !expanded ? items.slice(0, defaultVisibleCount) : items;
+    const hidden = items.length - visible.length;
+    const toggle = () => {
+        const next = !expanded;
+        setExpanded(next);
+        onExpandChange?.(next);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("ol", { "data-slot": "timeline", className: cn("grid", className), children: visible.map((item, index) => (_jsxs("li", { className: "relative flex gap-3 pb-6 last:pb-0", children: [index < visible.length - 1 && (_jsx("span", { "aria-hidden": true, className: cn("absolute top-6 left-[11px] h-[calc(100%-24px)] w-px", item.state === "complete" ? "bg-brand-red" : "bg-border") })), _jsxs("span", { className: cn("relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full border", item.state === "complete" && "border-brand-red bg-brand-red text-white", item.state === "current" && "border-brand-red bg-card ring-4 ring-brand-red/15", item.state === "upcoming" && "border-border bg-card"), children: [item.state === "complete" && _jsx(IconCheck, { className: "size-3.5" }), item.state === "current" && _jsx("span", { className: "size-2 rounded-full bg-brand-red" }), item.state === "upcoming" && _jsx("span", { className: "size-2 rounded-full bg-border" })] }), _jsxs("div", { className: "grid min-w-0 gap-0.5 pt-0.5", children: [_jsx("span", { className: cn("text-sm", item.state === "upcoming" ? "text-muted-foreground" : "font-medium text-brand-ink"), children: item.title }), item.description ? _jsx("span", { className: "text-sm text-muted-foreground", children: item.description }) : null, item.time ? _jsx("span", { className: "text-xs text-muted-foreground", children: item.time }) : null] })] }, item.title + index))) }), limited ? (_jsx("button", { "data-slot": "timeline-toggle", type: "button", "aria-expanded": expanded, onClick: toggle, className: "mt-2.5 ml-9 text-[13px] font-bold text-brand-red underline-offset-2 hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none max-[600px]:min-h-11 min-[600px]:min-h-8", children: expanded
+                    ? (collapseLabel ?? `Tampilkan ${defaultVisibleCount} terbaru`)
+                    : (expandLabel ?? `Lihat selengkapnya (${hidden} peristiwa)`) })) : null] }));
 }

package/dist/components/workspace-selector.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export type WorkspaceLocale = "id" | "en";
+export interface WorkspaceOption {
+    id: string;
+    label: string;
+    /** Short label for the collapsed and phone trigger, for example "OKY". */
+    short?: string;
+    /** Unit kind, shown under the label in the menu, for example "Komsat". */
+    kind: string;
+    /** Menu mark; defaults to a community glyph. */
+    icon?: React.ReactNode;
+}
+export interface WorkspaceSelectorProps {
+    value: string;
+    options: WorkspaceOption[];
+    onChange: (id: string) => void;
+    /** Small caption above the trigger value. Defaults to the locale's "RUANG KERJA". */
+    label?: string;
+    searchPlaceholder?: string;
+    /** Sidebar rail state: a 48px square trigger with the menu beside it. */
+    collapsed?: boolean;
+    /** `sidebar` is the boxed picker; `phone` the compact top-bar trigger. */
+    variant: "sidebar" | "phone";
+    /** Starts with the menu open; the component is otherwise uncontrolled. */
+    defaultOpen?: boolean;
+    locale: WorkspaceLocale;
+    className?: string;
+}
+/**
+ * The one searchable workspace picker behind the sidebar picker, its collapsed
+ * rail form and the phone top-bar picker. The trigger reports `aria-expanded`
+ * and names the current workspace; the menu is a labelled group of `aria-pressed`
+ * buttons, the search field takes focus on open and Escape closes the menu and
+ * returns focus to the trigger.
+ */
+export declare function WorkspaceSelector({ value, options, onChange, label, searchPlaceholder, collapsed, variant, defaultOpen, locale, className }: WorkspaceSelectorProps): React.JSX.Element;

package/dist/components/workspace-selector.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBuildingCommunity, IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Input } from "./input";
+const labels = {
+    id: { label: "RUANG KERJA", search: "Cari korda atau komsat", trigger: "Ruang kerja", empty: "Tidak ditemukan." },
+    en: { label: "WORKSPACE", search: "Search region or unit", trigger: "Workspace", empty: "Nothing found." },
+};
+/**
+ * The one searchable workspace picker behind the sidebar picker, its collapsed
+ * rail form and the phone top-bar picker. The trigger reports `aria-expanded`
+ * and names the current workspace; the menu is a labelled group of `aria-pressed`
+ * buttons, the search field takes focus on open and Escape closes the menu and
+ * returns focus to the trigger.
+ */
+export function WorkspaceSelector({ value, options, onChange, label, searchPlaceholder, collapsed = false, variant, defaultOpen = false, locale, className }) {
+    const l = labels[locale];
+    const [open, setOpen] = React.useState(defaultOpen);
+    const [query, setQuery] = React.useState("");
+    const triggerRef = React.useRef(null);
+    const searchRef = React.useRef(null);
+    const wrapRef = React.useRef(null);
+    const menuId = React.useId();
+    const selected = options.find((option) => option.id === value);
+    const current = selected?.label ?? "";
+    const triggerText = selected?.short ?? selected?.label ?? "";
+    const matches = options.filter((option) => `${option.label} ${option.kind}`.toLocaleLowerCase("id").includes(query.trim().toLocaleLowerCase("id")));
+    const close = React.useCallback((restoreFocus = true) => {
+        setOpen(false);
+        setQuery("");
+        if (restoreFocus)
+            triggerRef.current?.focus();
+    }, []);
+    // A pointer outside the picker closes the menu; the trigger and the menu are
+    // the only places a click keeps it open.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (!wrapRef.current?.contains(event.target))
+                close(false);
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open, close]);
+    // The search field takes focus as soon as the menu opens.
+    React.useEffect(() => {
+        if (open)
+            searchRef.current?.focus();
+    }, [open]);
+    const menu = open ? (_jsxs("div", { id: menuId, role: "group", "aria-label": label ?? l.label, onKeyDown: (event) => {
+            if (event.key === "Escape") {
+                event.stopPropagation();
+                close();
+            }
+        }, className: cn("absolute z-40 grid max-h-80 gap-0.5 overflow-y-auto rounded-[11px] border border-brand-border bg-card p-1.5 shadow-lg", variant === "phone" ? "top-[calc(100%+6px)] right-0 min-w-[185px]" : collapsed ? "top-0 left-[calc(100%+10px)] w-[220px]" : "top-[calc(100%+7px)] right-0 left-0"), children: [_jsx(Input, { ref: searchRef, "data-size": "sm", textSize: "compact", value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder ?? l.search, "aria-label": searchPlaceholder ?? l.search, className: "mb-1 w-full" }), matches.length ? (matches.map((option) => (_jsxs("button", { type: "button", "aria-pressed": option.id === value, onClick: () => {
+                    onChange(option.id);
+                    close();
+                }, className: cn("flex min-h-11 w-full items-center justify-between gap-2 rounded-[7px] px-2.5 py-2 text-left text-[13px] font-bold min-[600px]:min-h-8", option.id === value ? "bg-brand-red/8 text-brand-red" : "text-brand-ink hover:bg-secondary"), children: [_jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate", children: option.label }), _jsx("span", { className: "block text-xs font-medium text-brand-muted", children: option.label === option.kind ? "" : option.kind })] }), option.id === value ? _jsx(IconCheck, { "aria-hidden": true, className: "size-4 shrink-0 text-brand-red" }) : null] }, option.id)))) : (_jsx("p", { className: "px-2.5 py-2 text-[13px] text-brand-muted", children: l.empty }))] })) : null;
+    if (variant === "phone") {
+        return (_jsxs("div", { ref: wrapRef, "data-slot": "workspace-selector", "data-variant": "phone", className: cn("relative", className), children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-expanded": open, "aria-controls": open ? menuId : undefined, "aria-label": `${labels[locale].trigger}: ${current}`, onClick: () => {
+                        setOpen((value) => !value);
+                        setQuery("");
+                    }, className: "flex min-h-11 items-center gap-1.5 rounded-[7px] border border-brand-border bg-card px-2.5 text-xs font-bold text-brand-ink min-[600px]:min-h-8", children: [_jsx("span", { className: "max-w-[9rem] truncate", children: triggerText }), _jsx(IconChevronDown, { "aria-hidden": true, className: cn("size-4 shrink-0 transition-transform", open && "rotate-180") })] }), menu] }));
+    }
+    return (_jsxs("div", { ref: wrapRef, "data-slot": "workspace-selector", "data-variant": "sidebar", "data-collapsed": collapsed, className: cn("relative min-w-0", className), children: [collapsed ? (_jsx("button", { ref: triggerRef, type: "button", "aria-expanded": open, "aria-controls": open ? menuId : undefined, "aria-label": `${labels[locale].trigger}: ${current}`, onClick: () => {
+                    setOpen((value) => !value);
+                    setQuery("");
+                }, className: "mx-auto grid size-12 place-items-center rounded-[11px] border border-brand-border bg-brand-red/8 text-brand-red focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none", children: _jsx("span", { "aria-hidden": true, children: selected?.icon ?? _jsx(IconBuildingCommunity, { className: "size-[18px]" }) }) })) : (_jsxs("button", { ref: triggerRef, type: "button", "aria-expanded": open, "aria-controls": open ? menuId : undefined, "aria-label": `${labels[locale].trigger}: ${current}`, onClick: () => {
+                    setOpen((value) => !value);
+                    setQuery("");
+                }, className: "flex min-h-12 w-full items-center gap-2.5 rounded-[11px] border border-brand-border bg-brand-bg/60 p-2.5 text-left focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none", children: [_jsx("span", { "aria-hidden": true, className: "grid size-7.5 shrink-0 place-items-center rounded-lg bg-brand-red/8 text-brand-red", children: selected?.icon ?? _jsx(IconBuildingCommunity, { className: "size-[18px]" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("small", { className: "block text-[11px] leading-3.5 font-extrabold tracking-[.12em] text-brand-muted", children: label ?? l.label }), _jsx("strong", { className: "block truncate text-[13px] leading-4 text-brand-ink", children: current })] }), _jsx(IconChevronDown, { "aria-hidden": true, className: cn("size-4 shrink-0 text-brand-muted transition-transform", open && "rotate-180") })] })), menu] }));
+}