@tonycodes-ui/mortar 0.0.0-stage → 0.11.0

package/dist/calendar.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState, } from "react";
+import { SegmentedControl } from "./inspection.js";
+import { ChevronLeft, ChevronRight } from "./icons.js";
+import { childLevel, headingTag } from "./heading.js";
+import { componentRoot, cx } from "./internal.js";
+// Dates are YYYY-MM-DD strings handled in UTC, so no local time zone can shift a day.
+const DAY = 86_400_000;
+const toTime = (date) => {
+    const [y, m, d] = date.split("-").map(Number);
+    return Date.UTC(y, m - 1, d);
+};
+const toDate = (time) => new Date(time).toISOString().slice(0, 10);
+const addDays = (date, days) => toDate(toTime(date) + days * DAY);
+function addMonths(date, months) {
+    const [y, m, d] = date.split("-").map(Number);
+    const first = new Date(Date.UTC(y, m - 1 + months, 1));
+    const last = new Date(Date.UTC(first.getUTCFullYear(), first.getUTCMonth() + 1, 0)).getUTCDate();
+    return toDate(Date.UTC(first.getUTCFullYear(), first.getUTCMonth(), Math.min(d, last)));
+}
+const monthOf = (date) => date.slice(0, 7);
+/** Column of a date in a week starting on `weekStartsOn` (0 = Sunday). */
+const weekdayIndex = (date, weekStartsOn) => (new Date(toTime(date)).getUTCDay() - weekStartsOn + 7) % 7;
+/** A day button's name: the full date, plus how many events it has. */
+const dayLabel = (name, count) => count ? `${name}, ${count} ${count === 1 ? "event" : "events"}` : name;
+const toMinutes = (time) => {
+    const [h, m] = time.split(":").map(Number);
+    return h * 60 + (m || 0);
+};
+/** Shortest drawn event, in minutes, so an event at the edge stays visible. */
+const MIN_DRAWN = 30;
+/**
+ * Place timed events between `min` and `max` minutes and assign overlapping
+ * ones to side-by-side lanes. Events that start before `min` or end after
+ * `max` are drawn at the edge and flagged as clipped.
+ */
+function layout(events, min, max) {
+    const timed = events
+        .filter((e) => e.start)
+        .map((e) => {
+        const start = toMinutes(e.start);
+        const end = e.end ? toMinutes(e.end) : start + 60;
+        const top = Math.min(Math.max(start, min), max - MIN_DRAWN);
+        const bottom = Math.max(Math.min(end, max), top + MIN_DRAWN);
+        return {
+            event: e,
+            top,
+            bottom,
+            clippedStart: start < min,
+            clippedEnd: end > max,
+        };
+    })
+        .sort((a, b) => a.top - b.top || a.bottom - b.bottom);
+    const out = [];
+    let cluster = [];
+    let laneEnds = [];
+    let clusterEnd = -1;
+    const flush = () => {
+        const lanes = Math.max(1, ...cluster.map((c) => c.lane + 1));
+        cluster.forEach((c) => (c.lanes = lanes));
+        out.push(...cluster);
+        cluster = [];
+        laneEnds = [];
+        clusterEnd = -1;
+    };
+    for (const item of timed) {
+        if (cluster.length && item.top >= clusterEnd)
+            flush();
+        let lane = laneEnds.findIndex((end) => end <= item.top);
+        if (lane < 0) {
+            lane = laneEnds.length;
+            laneEnds.push(item.bottom);
+        }
+        else
+            laneEnds[lane] = item.bottom;
+        cluster.push({ ...item, lane, lanes: 1 });
+        clusterEnd = Math.max(clusterEnd, item.bottom);
+    }
+    if (cluster.length)
+        flush();
+    return out;
+}
+function localToday() {
+    const now = new Date();
+    return toDate(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+}
+/**
+ * Calendar with year, month, week and day views. One current date (`date`)
+ * is shared by every view, so moving through months and then switching to
+ * the week view shows a week of the month you reached. The month and year
+ * views are grids with keyboard navigation; the week and day views place
+ * timed events on an hour grid.
+ */
+export function Calendar({ month: controlledMonth, onMonthChange, date: controlledDate, onDateChange, selected, onSelect, events = [], variant = "compact", weekStartsOn = 1, today: todayProp, locale = "en-GB", maxEvents = 2, view = "month", onViewChange, onEventSelect, agenda = false, dayStartHour = 8, dayEndHour = 19, headingLevel = 2, id, className, }) {
+    const today = todayProp || localToday();
+    const [ownDate, setOwnDate] = useState(() => {
+        const start = selected || today;
+        return controlledMonth && monthOf(start) !== controlledMonth
+            ? `${controlledMonth}-01`
+            : start;
+    });
+    // Follow a changed `selected` or `month` prop when the date is uncontrolled.
+    const [seen, setSeen] = useState({ selected, month: controlledMonth });
+    if (seen.selected !== selected || seen.month !== controlledMonth) {
+        setSeen({ selected, month: controlledMonth });
+        if (controlledDate === undefined) {
+            let next = selected && selected !== seen.selected ? selected : ownDate;
+            if (controlledMonth && monthOf(next) !== controlledMonth)
+                next = `${controlledMonth}-01`;
+            if (next !== ownDate)
+                setOwnDate(next);
+        }
+    }
+    const date = controlledDate ?? ownDate;
+    const month = controlledMonth ?? monthOf(date);
+    const focusDate = monthOf(date) === month ? date : `${month}-01`;
+    const moved = useRef(false);
+    const grid = useRef(null);
+    const headingId = useId();
+    const Heading = headingTag(headingLevel);
+    const SubHeading = headingTag(childLevel(headingLevel));
+    const rootClass = cx("m-calendar", className);
+    const formats = useMemo(() => ({
+        title: new Intl.DateTimeFormat(locale, {
+            month: "long",
+            year: "numeric",
+            timeZone: "UTC",
+        }),
+        day: new Intl.DateTimeFormat(locale, {
+            weekday: "long",
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+            timeZone: "UTC",
+        }),
+        short: new Intl.DateTimeFormat(locale, {
+            weekday: "short",
+            timeZone: "UTC",
+        }),
+        long: new Intl.DateTimeFormat(locale, {
+            weekday: "long",
+            timeZone: "UTC",
+        }),
+        narrow: new Intl.DateTimeFormat(locale, {
+            weekday: "narrow",
+            timeZone: "UTC",
+        }),
+        monthName: new Intl.DateTimeFormat(locale, {
+            month: "long",
+            timeZone: "UTC",
+        }),
+    }), [locale]);
+    const byDay = useMemo(() => {
+        const map = new Map();
+        for (const event of events)
+            map.set(event.date, [...(map.get(event.date) || []), event]);
+        return map;
+    }, [events]);
+    const first = `${month}-01`;
+    const start = addDays(first, -weekdayIndex(first, weekStartsOn));
+    const weeks = Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, d) => addDays(start, w * 7 + d)));
+    function setDate(next) {
+        if (next === date)
+            return;
+        if (controlledDate === undefined)
+            setOwnDate(next);
+        onDateChange?.(next);
+        if (monthOf(next) !== month)
+            onMonthChange?.(monthOf(next));
+    }
+    const year = date.slice(0, 4);
+    function move(next) {
+        moved.current = true;
+        setDate(next);
+    }
+    useEffect(() => {
+        if (!moved.current)
+            return;
+        moved.current = false;
+        const target = view === "year" ? date : focusDate;
+        grid.current
+            ?.querySelector(`[data-date="${target}"]`)
+            ?.focus();
+    });
+    function onKeyDown(event, day) {
+        const weekday = weekdayIndex(day, weekStartsOn);
+        const next = {
+            ArrowLeft: () => addDays(day, -1),
+            ArrowRight: () => addDays(day, 1),
+            ArrowUp: () => addDays(day, -7),
+            ArrowDown: () => addDays(day, 7),
+            Home: () => addDays(day, -weekday),
+            End: () => addDays(day, 6 - weekday),
+            PageUp: () => addMonths(day, event.shiftKey ? -12 : -1),
+            PageDown: () => addMonths(day, event.shiftKey ? 12 : 1),
+        }[event.key];
+        if (!next)
+            return;
+        event.preventDefault();
+        move(next());
+    }
+    const step = (months) => setDate(addMonths(focusDate, months));
+    const switcher = onViewChange && (_jsx(SegmentedControl, { label: "Calendar view", value: view, options: [
+            { value: "year", label: "Year" },
+            { value: "month", label: "Month" },
+            { value: "week", label: "Week" },
+            { value: "day", label: "Day" },
+        ], onChange: (next) => onViewChange(next) }));
+    if (view === "year") {
+        const shiftYear = (by) => setDate(addMonths(date, 12 * by));
+        const label = (day) => dayLabel(formats.day.format(new Date(toTime(day))), byDay.get(day)?.length ?? 0);
+        return (_jsxs("div", { id: id, ...componentRoot("Calendar"), className: rootClass, "data-view": "year", children: [_jsxs("div", { className: "m-calendar-header", children: [_jsx(Heading, { id: headingId, className: "m-calendar-title", "aria-live": "polite", children: year }), switcher, _jsxs("div", { className: "m-calendar-nav", children: [_jsx(NavButton, { label: "Previous year", direction: "back", onClick: () => shiftYear(-1) }), _jsx(NavButton, { label: "Next year", direction: "forward", onClick: () => shiftYear(1) })] })] }), _jsx("div", { className: "m-calendar-year", ref: grid, children: Array.from({ length: 12 }, (_, i) => {
+                        const mm = String(i + 1).padStart(2, "0");
+                        const firstDay = `${year}-${mm}-01`;
+                        const lead = weekdayIndex(firstDay, weekStartsOn);
+                        const cells = Array.from({ length: 42 }, (_, n) => addDays(firstDay, n - lead));
+                        const titleId = `${headingId}-m${mm}`;
+                        return (_jsxs("section", { className: "m-calendar-month", "aria-labelledby": titleId, children: [_jsx(SubHeading, { id: titleId, className: "m-calendar-month-title", children: formats.monthName.format(new Date(toTime(firstDay))) }), _jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: cells.slice(0, 7).map((day) => {
+                                                    const d = new Date(toTime(day));
+                                                    return (_jsx("th", { scope: "col", abbr: formats.long.format(d), children: formats.narrow.format(d) }, day));
+                                                }) }) }), _jsx("tbody", { children: Array.from({ length: 6 }, (_, w) => (_jsx("tr", { children: cells.slice(w * 7, w * 7 + 7).map((day) => monthOf(day) === `${year}-${mm}` ? (_jsx("td", { children: _jsxs("button", { type: "button", "data-date": day, tabIndex: day === date ? 0 : -1, "aria-current": day === today ? "date" : undefined, "aria-pressed": day === selected, "aria-label": label(day), onClick: () => {
+                                                            setDate(day);
+                                                            onSelect?.(day);
+                                                        }, onKeyDown: (event) => onKeyDown(event, day), children: [_jsx("span", { className: "m-calendar-day", children: Number(day.slice(8)) }), byDay.has(day) && (_jsx("span", { className: "m-calendar-dot", "aria-hidden": "true" }))] }) }, day)) : (_jsx("td", {}, day))) }, w))) })] })] }, mm));
+                    }) })] }));
+    }
+    if (view !== "month")
+        return (_jsx(TimeGrid, { view: view, date: date, onDateChange: setDate, events: byDay, today: today, selected: selected, weekStartsOn: weekStartsOn, locale: locale, formats: formats, headingId: headingId, headingLevel: headingLevel, switcher: switcher, onEventSelect: onEventSelect, dayStartHour: dayStartHour, dayEndHour: dayEndHour, id: id, className: rootClass }));
+    const monthGrid = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "m-calendar-header", children: [_jsx(Heading, { id: headingId, className: "m-calendar-title", "aria-live": "polite", children: formats.title.format(new Date(toTime(first))) }), switcher, _jsxs("div", { className: "m-calendar-nav", children: [_jsx(NavButton, { label: "Previous month", direction: "back", onClick: () => step(-1) }), _jsx(NavButton, { label: "Next month", direction: "forward", onClick: () => step(1) })] })] }), _jsxs("table", { role: "grid", "aria-labelledby": headingId, ref: grid, children: [_jsx("thead", { children: _jsx("tr", { children: weeks[0].map((day) => {
+                                const d = new Date(toTime(day));
+                                return (_jsx("th", { scope: "col", abbr: formats.long.format(d), children: formats.short.format(d) }, day));
+                            }) }) }), _jsx("tbody", { children: weeks.map((week) => (_jsx("tr", { children: week.map((day) => {
+                                const dayEvents = byDay.get(day) || [];
+                                const count = dayEvents.length;
+                                const name = formats.day.format(new Date(toTime(day)));
+                                const listed = variant === "full" && count > 0;
+                                return (_jsxs("td", { "aria-selected": day === selected ? true : undefined, "data-outside": monthOf(day) !== month || undefined, children: [_jsxs("button", { type: "button", "data-date": day, tabIndex: day === focusDate ? 0 : -1, "aria-current": day === today ? "date" : undefined, "aria-pressed": day === selected, "aria-describedby": listed ? `${headingId}-${day}` : undefined, "aria-label": dayLabel(name, count), onClick: () => {
+                                                setDate(day);
+                                                onSelect?.(day);
+                                            }, onKeyDown: (event) => onKeyDown(event, day), children: [_jsx("span", { className: "m-calendar-day", children: Number(day.slice(8)) }), count > 0 && (_jsx("span", { className: "m-calendar-dot", "aria-hidden": "true" }))] }), listed && (_jsxs("ol", { className: "m-calendar-events", id: `${headingId}-${day}`, children: [dayEvents.slice(0, maxEvents).map((event) => (_jsxs("li", { children: [event.time && _jsx("time", { children: event.time }), event.time && " ", event.title] }, event.id))), count > maxEvents && (_jsxs("li", { className: "m-calendar-more", children: ["+", count - maxEvents, " more"] }))] }))] }, day));
+                            }) }, week[0]))) })] })] }));
+    const rootProps = {
+        ...componentRoot("Calendar"),
+        id,
+        className: rootClass,
+        "data-variant": variant === "full" ? "full" : undefined,
+    };
+    if (!agenda)
+        return _jsx("div", { ...rootProps, children: monthGrid });
+    const agendaDay = selected ?? date;
+    const agendaEvents = [...(byDay.get(agendaDay) || [])].sort((a, b) => (a.start ?? a.time ?? "").localeCompare(b.start ?? b.time ?? ""));
+    const agendaId = `${headingId}-agenda`;
+    return (_jsxs("div", { ...rootProps, "data-agenda": "true", children: [_jsx("div", { className: "m-calendar-main", children: monthGrid }), _jsxs("section", { className: "m-calendar-agenda", "aria-labelledby": agendaId, children: [_jsxs(SubHeading, { id: agendaId, className: "m-calendar-agenda-title", "aria-live": "polite", children: ["Schedule for", " ", _jsx("time", { dateTime: agendaDay, children: formats.day.format(new Date(toTime(agendaDay))) })] }), agendaEvents.length ? (_jsx("ol", { className: "m-calendar-agenda-list", children: agendaEvents.map((event) => {
+                            const when = event.start ? (_jsxs(_Fragment, { children: [_jsx("time", { children: event.start }), event.end && (_jsxs(_Fragment, { children: ["\u2013", _jsx("time", { children: event.end })] }))] })) : event.time ? (_jsx("time", { children: event.time })) : ("All day");
+                            // The space keeps the title and time apart in a button's name.
+                            const text = (_jsxs(_Fragment, { children: [_jsx("strong", { children: event.title }), " ", _jsx("span", { className: "m-calendar-event-time", children: when })] }));
+                            return (_jsxs("li", { children: [event.media, onEventSelect ? (_jsx("button", { type: "button", className: "m-calendar-agenda-text", onClick: () => onEventSelect(event.id), children: text })) : (_jsx("p", { className: "m-calendar-agenda-text", children: text }))] }, event.id));
+                        }) })) : (_jsx("p", { className: "m-calendar-none", children: "No events" }))] })] }));
+}
+function NavButton({ label, direction, onClick, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, onClick: onClick, children: direction === "back" ? _jsx(ChevronLeft, {}) : _jsx(ChevronRight, {}) }));
+}
+/** Week and day views: labelled day groups whose events are positioned on an hour grid. */
+function TimeGrid({ view, date, onDateChange, events, today, selected, weekStartsOn, locale, formats, headingId, headingLevel, switcher, onEventSelect, dayStartHour, dayEndHour, id, className, }) {
+    const Heading = headingTag(headingLevel);
+    const DayHeading = headingTag(childLevel(headingLevel));
+    const offset = weekdayIndex(date, weekStartsOn);
+    const days = view === "week"
+        ? Array.from({ length: 7 }, (_, i) => addDays(date, i - offset))
+        : [date];
+    const step = view === "week" ? 7 : 1;
+    const unit = view === "week" ? "week" : "day";
+    const range = new Intl.DateTimeFormat(locale, {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+        timeZone: "UTC",
+    });
+    const title = view === "week"
+        ? range.formatRange(new Date(toTime(days[0])), new Date(toTime(days[days.length - 1])))
+        : formats.day.format(new Date(toTime(date)));
+    const first = dayStartHour * 60;
+    const span = Math.max(60, (dayEndHour - dayStartHour) * 60);
+    const pct = (n) => `${(Math.min(Math.max(n, 0), 1) * 100).toFixed(4)}%`;
+    const hours = Array.from({ length: dayEndHour - dayStartHour }, (_, i) => dayStartHour + i);
+    const times = (event) => (_jsxs("span", { className: "m-calendar-event-time", children: [_jsx("time", { children: event.start }), event.end && (_jsxs(_Fragment, { children: ["\u2013", _jsx("time", { children: event.end })] }))] }));
+    const item = (event, timed) => {
+        // The space keeps the title and time apart in the accessible name.
+        const inner = (_jsxs(_Fragment, { children: [event.title, timed && " ", timed && times(event)] }));
+        return onEventSelect ? (_jsx("button", { type: "button", className: "m-calendar-event", onClick: () => onEventSelect(event.id), children: inner })) : timed ? (_jsx("div", { className: "m-calendar-event", children: inner })) : (inner);
+    };
+    return (_jsxs("div", { id: id, ...componentRoot("Calendar"), className: className, "data-view": view, children: [_jsxs("div", { className: "m-calendar-header", children: [_jsx(Heading, { id: headingId, className: "m-calendar-title", "aria-live": "polite", children: title }), switcher, _jsxs("div", { className: "m-calendar-nav", children: [_jsx(NavButton, { label: `Previous ${unit}`, direction: "back", onClick: () => onDateChange(addDays(date, -step)) }), _jsx(NavButton, { label: `Next ${unit}`, direction: "forward", onClick: () => onDateChange(addDays(date, step)) })] })] }), _jsxs("div", { className: "m-calendar-timegrid", style: {
+                    "--m-hours": hours.length,
+                    "--m-days": days.length,
+                }, children: [_jsx("div", { className: "m-calendar-hours", "aria-hidden": "true", children: hours.map((h) => (_jsx("span", { children: `${String(h).padStart(2, "0")}:00` }, h))) }), _jsx("div", { className: "m-calendar-columns", "data-count": days.length, children: days.map((day) => {
+                            const dayEvents = events.get(day) || [];
+                            const allDay = dayEvents.filter((e) => !e.start);
+                            const timed = layout(dayEvents, first, first + span);
+                            const d = new Date(toTime(day));
+                            const labelId = `${headingId}-${day}`;
+                            return (_jsxs("div", { role: "group", className: "m-calendar-column", "aria-labelledby": labelId, "data-selected": day === selected || undefined, children: [_jsxs(DayHeading, { id: labelId, className: "m-calendar-column-heading", "aria-current": day === today ? "date" : undefined, children: [_jsxs("span", { className: "m-calendar-column-label", "aria-hidden": "true", children: [_jsx("span", { children: formats.short.format(d) }), _jsx("strong", { children: Number(day.slice(8)) })] }), _jsx("span", { className: "m-sr-only", children: formats.day.format(d) })] }), allDay.length > 0 && (_jsx("ul", { className: "m-calendar-allday", "aria-label": "All day", children: allDay.map((event) => (_jsx("li", { children: item(event, false) }, event.id))) })), timed.length > 0 ? (_jsx("ol", { className: "m-calendar-slots", children: timed.map((t) => (_jsx("li", { "data-clipped-start": t.clippedStart || undefined, "data-clipped-end": t.clippedEnd || undefined, style: {
+                                                "--m-top": pct((t.top - first) / span),
+                                                "--m-height": pct((t.bottom - t.top) / span),
+                                                "--m-lane": t.lane,
+                                                "--m-lanes": t.lanes,
+                                            }, children: item(t.event, true) }, t.event.id))) })) : allDay.length ? (
+                                    // Keeps the hour lines in columns that only have all-day events.
+                                    _jsx("div", { className: "m-calendar-slots", "aria-hidden": "true" })) : (_jsx("p", { className: "m-calendar-none", children: "No events" }))] }, day));
+                        }) })] })] }));
+}

package/dist/choice.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+export interface ChoiceOption {
+    value: string;
+    label: string;
+    description?: string;
+    /** Avatar, icon or status dot shown before the label. */
+    leading?: ReactNode;
+    disabled?: boolean;
+}
+interface ChoiceProps {
+    label: string;
+    options: ChoiceOption[];
+    value: string | null;
+    onChange: (value: string | null) => void;
+    placeholder?: string;
+    hint?: string;
+    /** Marks the field invalid; the message is announced when it appears. */
+    error?: string;
+    disabled?: boolean;
+    /** Marks the field required and adds a decorative marker to the label. */
+    required?: boolean;
+    /** On the field's root element. */
+    className?: string;
+}
+/** Styled single select for rich options (avatars, descriptions). Use Select for plain native choices. */
+export declare function Listbox({ label, options, value, onChange, placeholder, hint, error, disabled, required, className, }: ChoiceProps): import("react").JSX.Element;
+/** Searchable single select; filters options by label as the person types. */
+export declare function Combobox({ label, options, value, onChange, placeholder, hint, error, disabled, required, className, empty, }: ChoiceProps & {
+    /** Shown and announced when the typed text matches no option. */
+    empty?: {
+        title: string;
+        description?: string;
+        action?: ReactNode;
+    };
+}): import("react").JSX.Element;
+export {};

package/dist/choice.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Field, Label, Description, Listbox as HeadlessListbox, ListboxButton, ListboxOptions, ListboxOption, Combobox as HeadlessCombobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, } from "@headlessui/react";
+import { Check, ChevronDown } from "./icons.js";
+import { RequiredMark, componentRoot, cx } from "./internal.js";
+function OptionContent({ option }) {
+    return (_jsxs(_Fragment, { children: [option.leading && (_jsx("span", { className: "m-choice-leading", "aria-hidden": "true", children: option.leading })), _jsxs("span", { className: "m-choice-text", children: [_jsx("span", { children: option.label }), option.description && _jsx("small", { children: option.description })] }), _jsx(Check, { className: "m-choice-check" })] }));
+}
+/** Label with the required marker; `spoken` adds "required" for controls that cannot carry aria-required. */
+function ChoiceLabel({ label, required, spoken = false, }) {
+    return (_jsxs(Label, { children: [label, required && _jsx(RequiredMark, {}), required && spoken && _jsx("span", { className: "m-sr-only", children: " (required)" })] }));
+}
+/** The hint or error; the error is a separate alert so it is announced when it appears. */
+function Message({ hint, error }) {
+    if (error)
+        return (_jsx(Description, { className: "m-error", role: "alert", children: error }, "error"));
+    return hint ? _jsx(Description, { children: hint }, "hint") : null;
+}
+/** Styled single select for rich options (avatars, descriptions). Use Select for plain native choices. */
+export function Listbox({ label, options, value, onChange, placeholder = "Select…", hint, error, disabled = false, required, className, }) {
+    const selected = options.find((o) => o.value === value);
+    return (_jsxs(Field, { ...componentRoot("Listbox"), className: cx("m-field", className), disabled: disabled, children: [_jsx(ChoiceLabel, { label: label, required: required, spoken: true }), _jsxs(HeadlessListbox, { value: value, onChange: onChange, children: [_jsxs(ListboxButton, { className: "m-choice-control", "aria-invalid": error ? true : undefined, children: [selected ? (_jsxs("span", { className: "m-choice-value", children: [selected.leading && (_jsx("span", { className: "m-choice-leading", "aria-hidden": "true", children: selected.leading })), _jsx("span", { children: selected.label })] })) : (_jsx("span", { className: "m-placeholder", children: placeholder })), _jsx(ChevronDown, {})] }), _jsx(ListboxOptions, { anchor: "bottom start", className: "m-choice-options", children: options.map((option) => (_jsx(ListboxOption, { value: option.value, disabled: option.disabled, className: "m-choice-option", children: _jsx(OptionContent, { option: option }) }, option.value))) })] }), _jsx(Message, { hint: hint, error: error })] }));
+}
+/** Searchable single select; filters options by label as the person types. */
+export function Combobox({ label, options, value, onChange, placeholder, hint, error, disabled = false, required, className, empty = { title: "No matches" }, }) {
+    const [query, setQuery] = useState("");
+    const needle = query.trim().toLowerCase();
+    const filtered = needle
+        ? options.filter((o) => o.label.toLowerCase().includes(needle))
+        : options;
+    const leading = query
+        ? undefined
+        : options.find((o) => o.value === value)?.leading;
+    const nothing = !!needle && !filtered.length;
+    return (_jsxs(Field, { ...componentRoot("Combobox"), className: cx("m-field", className), disabled: disabled, children: [_jsx(ChoiceLabel, { label: label, required: required }), _jsxs(HeadlessCombobox, { value: value, onChange: onChange, onClose: () => setQuery(""), children: [_jsxs("div", { className: "m-combobox", "data-leading": leading ? true : undefined, children: [leading && (_jsx("span", { className: "m-choice-leading", "aria-hidden": "true", children: leading })), _jsx(ComboboxInput, { className: "m-choice-control", placeholder: placeholder, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, displayValue: (v) => options.find((o) => o.value === v)?.label ?? "", onChange: (event) => setQuery(event.target.value) }), _jsx(ComboboxButton, { className: "m-combobox-toggle", "aria-label": `Show ${label} options`, children: _jsx(ChevronDown, {}) })] }), filtered.length > 0 && (_jsx(ComboboxOptions, { anchor: "bottom start", className: "m-choice-options m-combobox-options", children: filtered.map((option) => (_jsx(ComboboxOption, { value: option.value, disabled: option.disabled, className: "m-choice-option", children: _jsx(OptionContent, { option: option }) }, option.value))) }))] }), _jsx("p", { role: "status", className: nothing ? undefined : "m-sr-only", children: nothing && (_jsxs(_Fragment, { children: [empty.title, empty.description && _jsxs("span", { children: [" ", empty.description] })] })) }), nothing && empty.action, _jsx(Message, { hint: hint, error: error })] }));
+}

package/dist/composer.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+/** Comment box with optional avatar, toolbar, Write/Preview tabs and a character count. */
+export declare function CommentComposer({ onSubmit, value: controlled, onChange, label, labelVisible, placeholder, submitLabel, loading, avatar, actions, preview, maxLength, hint, error, rows, className, }: {
+    onSubmit: (value: string) => void;
+    /** Controlled text; omit to let the composer manage and clear it. */
+    value?: string;
+    /** Called with the text on every edit. */
+    onChange?: (value: string) => void;
+    label?: string;
+    labelVisible?: boolean;
+    placeholder?: string;
+    submitLabel?: string;
+    /** Busy submitting: the submit button keeps focus but ignores activation. */
+    loading?: boolean;
+    /** Author avatar shown beside the box (decorative). */
+    avatar?: ReactNode;
+    /** Toolbar controls such as attach or emoji buttons. */
+    actions?: ReactNode;
+    /** Renders a preview of the text and enables Write/Preview tabs. */
+    preview?: (value: string) => ReactNode;
+    /** Shows a visible count; the remaining characters are announced only near the limit. */
+    maxLength?: number;
+    hint?: string;
+    /** Marks the text invalid; the message is announced when it appears. */
+    error?: string;
+    rows?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/composer.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Tabs } from "./primitives.js";
+import { FieldFeedback, componentRoot, cx, useField } from "./internal.js";
+/** Characters left at which the count starts being announced. */
+const nearLimit = (maxLength) => Math.max(10, Math.ceil(maxLength * 0.1));
+/** Comment box with optional avatar, toolbar, Write/Preview tabs and a character count. */
+export function CommentComposer({ onSubmit, value: controlled, onChange, label = "Add your comment", labelVisible = false, placeholder = "Add your comment…", submitLabel = "Comment", loading = false, avatar, actions, preview, maxLength, hint, error, rows = 3, className, }) {
+    const { fieldId: id, messageId, describedBy } = useField({ hint, error });
+    const [own, setOwn] = useState("");
+    const [mode, setMode] = useState("write");
+    const value = controlled ?? own;
+    const setValue = (next) => {
+        if (controlled === undefined)
+            setOwn(next);
+        onChange?.(next);
+    };
+    const empty = !value.trim();
+    const submit = () => {
+        if (empty || loading)
+            return;
+        onSubmit(value);
+        if (controlled === undefined)
+            setOwn("");
+    };
+    const remaining = maxLength === undefined ? 0 : maxLength - value.length;
+    const field = (_jsx("textarea", { id: id, rows: rows, value: value, placeholder: placeholder, maxLength: maxLength, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, "aria-keyshortcuts": "Control+Enter Meta+Enter", onChange: (event) => setValue(event.target.value), onKeyDown: (event) => {
+            if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                submit();
+            }
+        } }));
+    return (_jsxs("form", { ...componentRoot("CommentComposer"), className: cx("m-composer", className), onSubmit: (event) => {
+            event.preventDefault();
+            submit();
+        }, children: [avatar && (_jsx("span", { className: "m-composer-avatar", "aria-hidden": "true", children: avatar })), _jsxs("div", { className: "m-composer-main", children: [_jsx("label", { className: labelVisible ? "m-composer-label" : "m-sr-only", htmlFor: id, children: label }), _jsxs("div", { className: "m-composer-box", "data-invalid": error ? true : undefined, children: [preview ? (_jsx(Tabs, { label: "Comment mode", value: mode, onChange: setMode, items: [
+                                    { id: "write", label: "Write", content: field },
+                                    {
+                                        id: "preview",
+                                        label: "Preview",
+                                        content: (_jsx("div", { className: "m-composer-preview", children: empty ? (_jsx("p", { className: "m-composer-empty", children: "Nothing to preview" })) : (preview(value)) })),
+                                    },
+                                ] })) : (field), _jsxs("div", { className: "m-composer-bar", children: [actions && _jsx("div", { className: "m-composer-actions", children: actions }), maxLength !== undefined && (_jsxs("span", { className: "m-composer-count", children: [value.length, " / ", maxLength] })), _jsx(Button, { type: "submit", disabled: empty, loading: loading, children: submitLabel }), maxLength !== undefined && (_jsx("span", { className: "m-sr-only", role: "status", children: remaining <= nearLimit(maxLength) &&
+                                            (remaining > 0
+                                                ? `${remaining} ${remaining === 1 ? "character" : "characters"} left`
+                                                : "Character limit reached") }))] })] }), _jsx(FieldFeedback, { id: messageId, hint: hint, error: error })] })] }));
+}

package/dist/display.d.ts

@@ -0,0 +1,136 @@
+import { type ReactNode } from "react";
+import type { Tone } from "./primitives.js";
+import { type HeadingLevel } from "./heading.js";
+export interface AvatarProps {
+    name: string;
+    src?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    shape?: "circle" | "square";
+    status?: "online" | "offline";
+    /** Corner of the status dot; `top` suits notification indicators. */
+    statusPosition?: "bottom" | "top";
+    /** Shown when there is no `src`: the name's initials or a generic person icon. */
+    placeholder?: "initials" | "icon";
+    /** Hide the avatar from assistive technology when the name is already visible beside it. */
+    decorative?: boolean;
+    className?: string;
+}
+export declare function Avatar({ name, src, size, shape, status, statusPosition, placeholder, decorative, className, }: AvatarProps): import("react").JSX.Element;
+export interface AvatarGroupProps {
+    label: string;
+    people: {
+        name: string;
+        src?: string;
+    }[];
+    max?: number;
+    className?: string;
+}
+export declare function AvatarGroup({ label, people, max, className, }: AvatarGroupProps): import("react").JSX.Element;
+export interface KbdProps {
+    keys: string[];
+    className?: string;
+}
+export declare function Kbd({ keys, className }: KbdProps): import("react").JSX.Element;
+export interface ProgressBarProps {
+    label: string;
+    value: number;
+    max?: number;
+    valueLabel?: string;
+    /** Status colour for the bar; omit for the accent colour. */
+    tone?: Tone;
+    className?: string;
+}
+export declare function ProgressBar({ label, value, max, valueLabel, tone, className, }: ProgressBarProps): import("react").JSX.Element;
+export interface FilterChipProps {
+    label: ReactNode;
+    selected?: boolean;
+    onClick?: () => void;
+    /** Shows a remove button; focus moves to the next chip once the chip is gone. */
+    onRemove?: () => void;
+    className?: string;
+}
+export declare function FilterChip({ label, selected, onClick, onRemove, className, }: FilterChipProps): import("react").JSX.Element;
+export interface CheckListProps {
+    items: ReactNode[];
+    label?: string;
+    columns?: 1 | 2;
+    size?: "sm" | "md";
+    className?: string;
+}
+/** Feature or inclusion list with a check marker; replaces ad-hoc list-disc styling. */
+export declare function CheckList({ items, label, columns, size, className, }: CheckListProps): import("react").JSX.Element;
+export interface DescriptionListProps {
+    title?: string;
+    description?: string;
+    headingLevel?: HeadingLevel;
+    items: {
+        term: string;
+        details: ReactNode;
+        action?: ReactNode;
+    }[];
+    layout?: "columns" | "stacked";
+    /**
+     * `striped` shades alternate rows instead of dividing them. To show the
+     * list in a card, place it in a Card with the title on the card.
+     */
+    variant?: "plain" | "striped";
+    id?: string;
+    className?: string;
+}
+/** Label/value pairs for detail screens, stacked on narrow screens and in columns when wide. */
+export declare function DescriptionList({ title, description, headingLevel, items, layout, variant, id, className, }: DescriptionListProps): import("react").JSX.Element;
+export interface GridListItem {
+    id: string;
+    title: string;
+    description?: string;
+    /** Destination for the card; its title link covers the whole card. */
+    href?: string;
+    /** Avatar or icon shown beside the title. */
+    media?: ReactNode;
+    /** Image across the top of the card. Use alt="" when the title already describes it. */
+    cover?: {
+        src: string;
+        alt: string;
+    };
+    /** Badges, dates or counts under the description. */
+    meta?: ReactNode;
+    /** Term/value pairs under the body, e.g. a client card's last invoice and amount. */
+    details?: {
+        term: string;
+        details: ReactNode;
+    }[];
+    actions?: ReactNode;
+}
+export interface GridListProps {
+    label: string;
+    items: GridListItem[];
+    columns?: 2 | 3 | 4;
+    /** Level of each card's title. */
+    itemHeadingLevel?: HeadingLevel;
+    /** `split` gives each action an equal cell divided by shared borders, e.g. Email | Call. */
+    actionsLayout?: "inline" | "split";
+    className?: string;
+}
+/**
+ * Responsive grid of cards for people, projects or files. A card's title link
+ * covers the card; links and buttons in `media`, `meta`, `details` and
+ * `actions` sit above it and stay clickable.
+ */
+export declare function GridList({ label, items, columns, itemHeadingLevel, actionsLayout, className, }: GridListProps): import("react").JSX.Element;
+export interface Attachment {
+    id: string;
+    name: string;
+    href: string;
+    /** Preformatted size, e.g. "2.4 MB". */
+    size?: string;
+    /** Link text; the file name is appended for screen readers. Defaults to "Download". */
+    actionLabel?: string;
+    icon?: ReactNode;
+}
+export interface AttachmentListProps {
+    files: Attachment[];
+    label?: string;
+    className?: string;
+}
+/** Files attached to a record, each with a size and a named download link. */
+export declare function AttachmentList({ files, label, className, }: AttachmentListProps): import("react").JSX.Element;