@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/bulk-action-bar.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* What to do with a list's ticked rows: the count, Clear (and Select all), then the actions. */
+import { css, cx } from "#primitives/css";
+import { Button } from "./button.js";
+import { useCiridaeLocale } from "./locale.js";
+// On a phone the actions drop under the count rather than squeezing it into a column.
+const bar = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: "layout.contentGap",
+    minHeight: "56px",
+    paddingBlock: "panel.compact",
+    paddingInlineStart: "panel.comfortable",
+    paddingInlineEnd: "panel.compact",
+    border: "1px solid token(colors.border.panel)",
+    borderRadius: "action",
+    background: "bg.hover",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    _light: { background: "bg.card" },
+});
+const leading = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    whiteSpace: "nowrap",
+});
+const actionRow = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.tightGap",
+});
+/**
+ * Shown in place of a list's footer while rows are ticked. `actions` are the buttons for the ticked
+ * rows; `onSelectAll` with `total` offers to tick every row the list holds, beyond the page.
+ */
+export function BulkActionBar({ count, onClear, actions, onSelectAll, total, labels: ownLabels, className, ...props }) {
+    const { labels: localeLabels } = useCiridaeLocale();
+    const labels = { ...localeLabels.table, ...ownLabels };
+    return (_jsxs("div", { role: "toolbar", "aria-label": labels.selectedItems, ...props, className: cx(bar, className), "data-ciridae-ui": "", children: [_jsxs("span", { className: leading, children: [labels.selectedCount(count), onSelectAll && total !== undefined && (_jsx(Button, { variant: "link", onClick: onSelectAll, children: labels.selectAllCount(total) })), _jsx(Button, { variant: "link", onClick: onClear, children: labels.clearSelection })] }), actions && _jsx("span", { className: actionRow, children: actions })] }));
+}

package/dist/components/button.d.ts

@@ -0,0 +1,52 @@
+import { type ButtonProps as BaseButtonProps } from "@base-ui/react/button";
+import { type ReactNode } from "react";
+import { type Hotkey } from "./hotkeys.js";
+export type ButtonProps = Omit<BaseButtonProps, "className"> & {
+    className?: string;
+    variant?: "primary" | "secondary" | "subtle" | "ghost" | "tinted" | "secondaryDanger" | "danger" | "success"
+    /** Text-style: the words alone, set in the line around them. */
+     | "link";
+    size?: "small" | "medium" | "large";
+    fullWidth?: boolean;
+    loading?: boolean;
+    icon?: ReactNode;
+    /** The hotkey that does what the button does, shown after its label; the host binds it. */
+    shortcut?: Hotkey;
+};
+export declare function Button({ className, variant, size, fullWidth, loading, icon, shortcut, children, disabled, ...props }: ButtonProps): import("@types/react").JSX.Element;
+export type DataButtonState = "idle" | "pending" | "error" | "success";
+export type DataButtonProps = Omit<ButtonProps, "children" | "icon" | "loading"> & {
+    state: DataButtonState;
+    idleLabel: ReactNode;
+    pendingLabel?: ReactNode;
+    errorLabel?: ReactNode;
+    successLabel?: ReactNode;
+    icon?: ReactNode;
+};
+/** Async action button with consistent pending, retry, and completion feedback. */
+export declare function DataButton({ state, idleLabel, pendingLabel, errorLabel, successLabel, variant, icon, disabled, ...props }: DataButtonProps): import("@types/react").JSX.Element;
+type IconButtonSize = "compact" | "small" | "medium" | "large";
+/**
+ * The size an `IconButton` takes where it does not set its own, so the container decides: the
+ * sidebar rail's icons are large, and the same icon shown in the phone header matches the header's
+ * small buttons.
+ */
+export declare const IconButtonSizeContext: import("@types/react").Context<IconButtonSize>;
+export type IconButtonProps = Omit<BaseButtonProps, "className" | "aria-label"> & {
+    className?: string;
+    "aria-label": string;
+    size?: IconButtonSize;
+    variant?: "raised" | "ghost" | "primary";
+    /**
+     * `true` marks the button with a dot; a number shows that count, nothing at zero, and joins the
+     * button's name so assistive tech hears it too.
+     */
+    badge?: boolean | number;
+    /**
+     * The hotkey that does what the button does, announced to assistive tech; the host binds it,
+     * and `KeyboardShortcuts` lists it.
+     */
+    shortcut?: Hotkey;
+};
+export declare function IconButton({ className, size, variant, badge, shortcut, children, "aria-label": label, ...props }: IconButtonProps): import("@types/react").JSX.Element;
+export {};

package/dist/components/button.js

@@ -0,0 +1,272 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as BaseButton } from "@base-ui/react/button";
+import { CheckCircleIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { createContext, useContext } from "react";
+import { css, cva, cx } from "#primitives/css";
+import { formatForDisplay } from "./hotkeys.js";
+import { icon as iconStyle, Spinner } from "./icon.js";
+import { ShortcutHint } from "./keycap.js";
+import { useCiridaeLocale } from "./locale.js";
+const action = cva({
+    base: {
+        display: "inline-flex",
+        textDecoration: "none",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "control.iconGap",
+        border: "1px solid",
+        borderRadius: "action",
+        height: "control.default",
+        paddingInline: "control.inline",
+        fontFamily: "sans",
+        fontSize: "body",
+        fontWeight: "medium",
+        letterSpacing: "compact",
+        lineHeight: "tight",
+        cursor: "pointer",
+        transitionProperty: "translate, background, color",
+        transitionDuration: "fast",
+        _focusVisible: { focusRing: "outer" },
+        "&:disabled, &[data-disabled]": {
+            opacity: "disabled",
+            cursor: "not-allowed",
+            // A control that cannot be pressed should not look like it is waiting to be.
+            translate: "none",
+        },
+    },
+    variants: {
+        variant: {
+            // Round 2 buttons cast no shadow: each face is told apart by its fill and its edge alone.
+            primary: {
+                background: "bg.primary",
+                color: "bg.canvas",
+                _light: { color: "fg.onAccent" },
+                borderColor: "transparent",
+                _hover: { background: "bg.primaryHover" },
+                _active: { translate: "0 1px" },
+            },
+            secondary: {
+                background: "bg.raised",
+                color: "fg.primary",
+                borderColor: "transparent",
+                _hover: { background: "bg.raisedHover" },
+                _active: { translate: "0 1px" },
+            },
+            subtle: {
+                background: "bg.fill",
+                color: "fg.muted",
+                borderColor: "transparent",
+                _hover: { color: "fg.primary" },
+                _active: { translate: "0 1px" },
+            },
+            // White in dark, muted in light: the one face whose text follows the theme differently.
+            ghost: {
+                background: "transparent",
+                color: "fg.primary",
+                _light: { color: "fg.muted" },
+                borderColor: "transparent",
+                _hover: { color: "fg.primary", background: "bg.hover" },
+            },
+            // Warm glass with an amber edge and the warm accent for its text.
+            tinted: {
+                background: "bg.tinted",
+                color: "accent.yellow",
+                _light: { color: "accent.bronze" },
+                borderColor: "transparent",
+                _hover: { background: "bg.raisedHover" },
+                _active: { translate: "0 1px" },
+            },
+            // The secondary face with red text, for a destructive action that asks for confirmation:
+            // it names the risk without being the loudest thing on the page. The confirmation's own
+            // button is `danger`.
+            secondaryDanger: {
+                background: "bg.raised",
+                color: "accent.red",
+                borderColor: "transparent",
+                _hover: { background: "bg.raisedHover" },
+                _active: { translate: "0 1px" },
+            },
+            danger: {
+                background: "bg.danger",
+                color: "fg.onAccent",
+                borderColor: "transparent",
+                _hover: { filter: "brightness(1.05)" },
+                _active: { translate: "0 1px" },
+            },
+            success: {
+                background: "accent.green",
+                color: "bg.canvas",
+                borderColor: "transparent",
+                _hover: { filter: "brightness(1.05)" },
+                _active: { translate: "0 1px" },
+            },
+            // Words only, in the text around it: no face, no height, underlined on hover.
+            link: {
+                background: "transparent",
+                color: "fg.primary",
+                borderColor: "transparent",
+                borderWidth: "0",
+                fontFamily: "inherit",
+                fontWeight: "inherit",
+                letterSpacing: "inherit",
+                lineHeight: "inherit",
+                _hover: { textDecoration: "underline" },
+            },
+        },
+        size: {
+            small: {
+                height: "control.small",
+                paddingInline: "control.compactInline",
+                fontSize: "caption",
+            },
+            medium: {},
+            large: { height: "control.field", paddingInline: "control.largeInline", fontSize: "heading" },
+        },
+        fullWidth: { true: { width: "100%" } },
+    },
+    compoundVariants: [
+        {
+            variant: "link",
+            size: ["small", "medium", "large"],
+            css: { height: "auto", paddingInline: "none", fontSize: "inherit", flexShrink: "0" },
+        },
+    ],
+    // Small is the everyday button; medium and large are for a page's one main action.
+    defaultVariants: { variant: "primary", size: "small" },
+});
+// The glass faces draw a hairline, which is their outline; a filled face draws none.
+const buttonEdges = {
+    primary: undefined,
+    secondary: "glass",
+    subtle: "glass",
+    ghost: undefined,
+    tinted: undefined,
+    secondaryDanger: "glass",
+    danger: undefined,
+    success: undefined,
+    link: undefined,
+};
+// In the button's own color, quieter than its label.
+const buttonHint = css({ color: "inherit", opacity: "0.6" });
+export function Button({ className, variant = "primary", size = "small", fullWidth, loading, icon, shortcut, children, disabled, ...props }) {
+    return (_jsxs(BaseButton, { ...props, disabled: disabled || loading, "aria-busy": loading || undefined, className: cx(action({ variant, size, fullWidth }), className), "data-ciridae-ui": "", "data-edge": buttonEdges[variant], children: [loading ? _jsx(Spinner, { "aria-hidden": "true" }) : icon, children, shortcut && _jsx(ShortcutHint, { hotkey: shortcut, className: buttonHint })] }));
+}
+/** Async action button with consistent pending, retry, and completion feedback. */
+export function DataButton({ state, idleLabel, pendingLabel, errorLabel, successLabel, variant = "primary", icon, disabled, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const presentation = state === "pending"
+        ? {
+            label: pendingLabel ?? labels.common.working,
+            icon: _jsx(Spinner, { "aria-hidden": "true" }),
+            variant,
+        }
+        : state === "error"
+            ? {
+                label: errorLabel ?? labels.common.retry,
+                icon: _jsx(WarningCircleIcon, { className: iconStyle({ size: "small" }) }),
+                variant: "danger",
+            }
+            : state === "success"
+                ? {
+                    label: successLabel ?? labels.common.done,
+                    icon: _jsx(CheckCircleIcon, { className: iconStyle({ size: "small" }) }),
+                    variant: "success",
+                }
+                : { label: idleLabel, icon, variant };
+    return (_jsx(Button, { ...props, variant: presentation.variant, disabled: disabled || state === "success", loading: state === "pending", icon: presentation.icon, children: presentation.label }));
+}
+const round = cva({
+    base: {
+        textDecoration: "none",
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "none",
+        border: "1px solid transparent",
+        borderRadius: "pill",
+        color: "fg.muted",
+        background: "bg.raised",
+        cursor: "pointer",
+        flexShrink: "0",
+        transitionProperty: "translate, background, color",
+        transitionDuration: "fast",
+        _hover: { color: "fg.primary", background: "bg.raisedHover" },
+        _active: { translate: "0 1px" },
+        _focusVisible: { focusRing: "outer" },
+        "&:disabled, &[data-disabled]": {
+            opacity: "disabled",
+            cursor: "not-allowed",
+            translate: "none",
+        },
+    },
+    variants: {
+        variant: {
+            raised: {},
+            ghost: {
+                background: "transparent",
+                _hover: { background: "bg.hover" },
+                _active: { translate: "none" },
+            },
+            // The primary face as a round button: a composer's send.
+            primary: {
+                background: "bg.primary",
+                color: "bg.canvas",
+                _light: { color: "fg.onAccent" },
+                _hover: { color: "bg.canvas", background: "bg.primaryHover" },
+            },
+        },
+        size: {
+            compact: { width: "control.shortcut", height: "control.shortcut" },
+            small: { width: "control.small", height: "control.small" },
+            medium: { width: "control.compact", height: "control.compact" },
+            large: { width: "control.default", height: "control.default" },
+        },
+    },
+    defaultVariants: { size: "medium", variant: "raised" },
+});
+const badgeDot = css({
+    position: "absolute",
+    top: "control.block",
+    insetInlineEnd: "control.block",
+    width: "indicator.badge",
+    height: "indicator.badge",
+    borderRadius: "round",
+    background: "accent.red",
+    border: "1px solid token(colors.border.panel)",
+    boxShadow: "badge",
+});
+/* A count sits on the button's corner, where the dot alone would not say how many. */
+const badgeCount = css({
+    position: "absolute",
+    top: "calc(token(spacing.layout.tightGap) * -1)",
+    insetInlineEnd: "calc(token(spacing.layout.tightGap) * -1)",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: "indicator.count",
+    height: "indicator.count",
+    paddingInline: "layout.tightGap",
+    borderRadius: "round",
+    background: "accent.red",
+    border: "1px solid token(colors.border.panel)",
+    boxShadow: "badge",
+    color: "bg.canvas",
+    fontSize: "avatar.small",
+    fontWeight: "medium",
+    lineHeight: "1",
+    fontVariantNumeric: "tabular-nums",
+});
+/**
+ * The size an `IconButton` takes where it does not set its own, so the container decides: the
+ * sidebar rail's icons are large, and the same icon shown in the phone header matches the header's
+ * small buttons.
+ */
+export const IconButtonSizeContext = createContext("medium");
+const iconButtonEdges = { raised: "glass", ghost: undefined, primary: undefined };
+export function IconButton({ className, size, variant = "raised", badge, shortcut, children, "aria-label": label, ...props }) {
+    const containerSize = useContext(IconButtonSizeContext);
+    const { labels } = useCiridaeLocale();
+    const count = typeof badge === "number" && badge > 0 ? badge : 0;
+    return (_jsxs(BaseButton, { ...props, "aria-label": count > 0 ? labels.common.withCount(label, count) : label, "aria-keyshortcuts": shortcut && formatForDisplay(shortcut, { useSymbols: false }), className: cx(round({ size: size ?? containerSize, variant }), className), "data-ciridae-ui": "", "data-edge": iconButtonEdges[variant], children: [children, badge === true && _jsx("span", { className: badgeDot, "aria-hidden": "true" }), count > 0 && (_jsx("span", { className: badgeCount, "aria-hidden": "true", children: count > 99 ? "99+" : count }))] }));
+}

package/dist/components/calendar.d.ts

@@ -0,0 +1,14 @@
+import { type CiridaeLabels } from "./locale.js";
+type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type CalendarProps = {
+    month: Date;
+    selected?: Date;
+    onMonthChange: (month: Date) => void;
+    onSelect: (date: Date) => void;
+    /** The `CiridaeLocaleProvider`'s locale by default. */
+    locale?: string | string[];
+    weekStartsOn?: WeekStartsOn;
+    labels?: Partial<CiridaeLabels["calendar"]>;
+};
+export declare function Calendar({ month, selected, onMonthChange, onSelect, locale: ownLocale, weekStartsOn, labels: ownLabels, }: CalendarProps): import("@types/react").JSX.Element;
+export {};

package/dist/components/calendar.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon } from "@phosphor-icons/react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { IconButton } from "./button.js";
+import { directional, icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+const grid = css({
+    display: "grid",
+    gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+    justifyItems: "center",
+    gap: "layout.tightGap",
+});
+const row = css({
+    display: "grid",
+    gridColumn: "1 / -1",
+    gridTemplateColumns: "subgrid",
+    width: "100%",
+});
+const previousMonthIcon = css({ transform: "rotate(180deg)" });
+const day = css({
+    width: "control.compact",
+    height: "control.compact",
+    border: "0",
+    borderRadius: "round",
+    background: "transparent",
+    color: "fg.primary",
+    cursor: "pointer",
+    transitionProperty: "background, color",
+    transitionDuration: "fast",
+    "&:hover:not(:disabled):not([aria-selected=true])": {
+        background: "bg.fill",
+    },
+    "&[aria-selected=true]": { background: "fg.primary", color: "bg.canvas" },
+    _disabled: { color: "fg.muted", opacity: "disabled", cursor: "default" },
+    _focusVisible: { focusRing: "outer" },
+});
+function firstDayOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addDays(date, amount) {
+    const nextDate = new Date(date);
+    nextDate.setDate(nextDate.getDate() + amount);
+    return nextDate;
+}
+function isSameDay(first, second) {
+    return (!!first &&
+        !!second &&
+        first.getFullYear() === second.getFullYear() &&
+        first.getMonth() === second.getMonth() &&
+        first.getDate() === second.getDate());
+}
+function isSameMonth(first, second) {
+    return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth();
+}
+function dateKey(date) {
+    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+}
+function addMonths(date, amount) {
+    const targetMonth = new Date(date.getFullYear(), date.getMonth() + amount, 1);
+    const lastDay = new Date(targetMonth.getFullYear(), targetMonth.getMonth() + 1, 0).getDate();
+    return new Date(targetMonth.getFullYear(), targetMonth.getMonth(), Math.min(date.getDate(), lastDay));
+}
+export function Calendar({ month, selected, onMonthChange, onSelect, locale: ownLocale, weekStartsOn = 0, labels: ownLabels, }) {
+    const ciridaeLocale = useCiridaeLocale();
+    const locale = ownLocale ?? ciridaeLocale.locale;
+    const labels = { ...ciridaeLocale.labels.calendar, ...ownLabels };
+    // Under right-to-left text the days run from the right, so the arrows swap.
+    const forward = ciridaeLocale.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const backward = ciridaeLocale.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+    const monthLabelId = useId();
+    const monthYear = month.getFullYear();
+    const monthIndex = month.getMonth();
+    const currentMonth = useMemo(() => new Date(monthYear, monthIndex, 1), [monthIndex, monthYear]);
+    const initialFocusedDate = selected && isSameMonth(selected, currentMonth) ? selected : currentMonth;
+    const [focusedDate, setFocusedDate] = useState(initialFocusedDate);
+    const shouldMoveFocus = useRef(false);
+    const dayButtons = useRef(new Map());
+    const days = useMemo(() => {
+        const precedingDays = (currentMonth.getDay() - weekStartsOn + 7) % 7;
+        const firstVisibleDate = addDays(currentMonth, -precedingDays);
+        return Array.from({ length: 42 }, (_, index) => addDays(firstVisibleDate, index));
+    }, [currentMonth, weekStartsOn]);
+    const weekDays = useMemo(() => {
+        const sunday = new Date(2024, 0, 7);
+        return Array.from({ length: 7 }, (_, index) => addDays(sunday, weekStartsOn + index));
+    }, [weekStartsOn]);
+    useEffect(() => {
+        if (!isSameMonth(focusedDate, currentMonth)) {
+            setFocusedDate(selected && isSameMonth(selected, currentMonth) ? selected : currentMonth);
+        }
+    }, [currentMonth, focusedDate, selected]);
+    useEffect(() => {
+        if (!shouldMoveFocus.current)
+            return;
+        dayButtons.current.get(dateKey(focusedDate))?.focus();
+        shouldMoveFocus.current = false;
+    }, [currentMonth, focusedDate]);
+    function moveFocus(nextDate) {
+        shouldMoveFocus.current = true;
+        setFocusedDate(nextDate);
+        if (!isSameMonth(nextDate, currentMonth))
+            onMonthChange(firstDayOfMonth(nextDate));
+    }
+    function handleDayKeyDown(event, date) {
+        const dayOfWeek = (date.getDay() - weekStartsOn + 7) % 7;
+        const nextDate = event.key === backward
+            ? addDays(date, -1)
+            : event.key === forward
+                ? addDays(date, 1)
+                : event.key === "ArrowUp"
+                    ? addDays(date, -7)
+                    : event.key === "ArrowDown"
+                        ? addDays(date, 7)
+                        : event.key === "Home"
+                            ? addDays(date, -dayOfWeek)
+                            : event.key === "End"
+                                ? addDays(date, 6 - dayOfWeek)
+                                : event.key === "PageUp"
+                                    ? addMonths(date, -1)
+                                    : event.key === "PageDown"
+                                        ? addMonths(date, 1)
+                                        : null;
+        if (!nextDate)
+            return;
+        event.preventDefault();
+        moveFocus(nextDate);
+    }
+    const monthFormatter = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" });
+    const dayFormatter = new Intl.DateTimeFormat(locale, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+    });
+    const weekDayFormatter = new Intl.DateTimeFormat(locale, { weekday: "narrow" });
+    const fullWeekDayFormatter = new Intl.DateTimeFormat(locale, { weekday: "long" });
+    return (_jsxs("section", { className: css({
+            width: "calendar.width",
+            padding: "panel.compact",
+            border: "1px solid token(colors.border.control)",
+            borderRadius: "inset",
+            background: "bg.card",
+        }), "data-ciridae-ui": "", children: [_jsxs("header", { className: css({
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    marginBottom: "panel.compact",
+                }), children: [_jsx(IconButton, { "aria-label": labels.previousMonth, size: "compact", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() - 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon(), directional, previousMonthIcon) }) }), _jsx("strong", { id: monthLabelId, children: monthFormatter.format(month) }), _jsx(IconButton, { "aria-label": labels.nextMonth, size: "compact", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() + 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon(), directional) }) })] }), _jsxs("div", { className: grid, role: "grid", "aria-labelledby": monthLabelId, children: [_jsx("div", { className: row, role: "row", children: weekDays.map((date) => (_jsx("span", { "aria-label": fullWeekDayFormatter.format(date), className: css({ textAlign: "center", color: "fg.muted", fontSize: "caption" }), role: "columnheader", children: weekDayFormatter.format(date) }, date.getDay()))) }), Array.from({ length: 6 }, (_, weekIndex) => (_jsx("div", { className: row, role: "row", children: days.slice(weekIndex * 7, weekIndex * 7 + 7).map((date) => {
+                            const inCurrentMonth = isSameMonth(date, currentMonth);
+                            return (_jsx("button", { type: "button", "aria-label": dayFormatter.format(date), "aria-selected": inCurrentMonth && isSameDay(date, selected), className: day, disabled: !inCurrentMonth, onClick: () => onSelect(date), onFocus: () => setFocusedDate(date), onKeyDown: (event) => handleDayKeyDown(event, date), ref: (element) => {
+                                    if (element)
+                                        dayButtons.current.set(dateKey(date), element);
+                                    else
+                                        dayButtons.current.delete(dateKey(date));
+                                }, role: "gridcell", tabIndex: inCurrentMonth && isSameDay(date, focusedDate) ? 0 : -1, children: ciridaeLocale.formatNumber(date.getDate()) }, dateKey(date)));
+                        }) }, weekIndex)))] })] }));
+}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export type CenteredPageProps = {
+    /** The mark above the card: `true` for the Ciridae mark, or a product's own logo. */
+    brand?: ReactNode | true;
+    /** Across from the brand, such as a sign-out link. */
+    aside?: ReactNode;
+    /** The card's title, as the page's h1, with `description` muted under it. */
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Above the card in place of the brand row, for anything else. */
+    header?: ReactNode;
+    width?: "form" | "regular" | "wide";
+    children?: ReactNode;
+};
+/**
+ * One card centered on an otherwise empty page, for flows outside the app frame such as sign-in
+ * and consent: a `brand` mark and `aside` above it, then the card's `title`, `description` and
+ * content. `form` width narrows both for a short form; `wide` suits a card holding a list whose
+ * rows carry a label, a detail, and a control.
+ */
+export declare function CenteredPage({ brand, aside, title, description, header, width, children, }: CenteredPageProps): import("@types/react").JSX.Element;

package/dist/components/centered-page.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from "#primitives/css";
+import { CiridaeMark } from "./brand-icons.js";
+const page = css({
+    boxSizing: "border-box",
+    minHeight: "100dvh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    // A phone keeps a thin margin around the card rather than giving its width away.
+    padding: "panel.compact",
+    "@media(min-width: 640px)": { padding: "page.inline" },
+    background: "bg.canvas",
+    color: "fg.primary",
+});
+const column = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.contentGap",
+    width: "100%",
+    maxWidth: "card.centered",
+});
+const formColumn = css({ maxWidth: "card.centeredForm" });
+const wideColumn = css({ maxWidth: "card.centeredWide" });
+// Lines the mark and aside up with the card's content.
+const headerRow = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.contentGap",
+    paddingInline: "panel.roomy",
+});
+const brandMark = css({ width: "brand.logo", height: "brand.logo", color: "fg.primary" });
+const content = css({ display: "flex", flexDirection: "column", gap: "layout.sectionGap" });
+const titleGroup = css({ display: "grid", gap: "layout.tightGap" });
+const titleText = css({ margin: "none", fontSize: "heading.section", fontWeight: "medium" });
+const descriptionText = css({ margin: "none", color: "fg.muted", fontSize: "caption" });
+const card = css({
+    boxSizing: "border-box",
+    width: "100%",
+    padding: "panel.roomy",
+    borderRadius: "card",
+    border: "1px solid token(colors.border.card)",
+    background: "bg.card",
+});
+/**
+ * One card centered on an otherwise empty page, for flows outside the app frame such as sign-in
+ * and consent: a `brand` mark and `aside` above it, then the card's `title`, `description` and
+ * content. `form` width narrows both for a short form; `wide` suits a card holding a list whose
+ * rows carry a label, a detail, and a control.
+ */
+export function CenteredPage({ brand, aside, title, description, header, width = "regular", children, }) {
+    const brandRow = (brand !== undefined || aside !== undefined) && (_jsxs("div", { className: headerRow, children: [brand === true ? _jsx(CiridaeMark, { className: brandMark, title: "Ciridae" }) : brand, aside] }));
+    return (_jsx("div", { className: page, "data-ciridae-ui": "", children: _jsxs("div", { className: cx(column, width === "form" && formColumn, width === "wide" && wideColumn), children: [header ?? brandRow, _jsx("div", { className: card, children: title === undefined ? (children) : (_jsxs("div", { className: content, children: [_jsxs("div", { className: titleGroup, children: [_jsx("h1", { className: titleText, children: title }), description !== undefined && _jsx("p", { className: descriptionText, children: description })] }), children] })) })] }) }));
+}

package/dist/components/chart.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+/** One line on the chart: a label and its `[unixSeconds, value]` samples. */
+export type TimeSeries = {
+    label: string;
+    points: readonly (readonly [number, number])[];
+};
+/**
+ * Lines over a fixed time window. Samples from different series are joined on their timestamp, so
+ * a series missing a sample leaves a gap rather than a line drawn through it.
+ */
+export declare function TimeSeriesChart({ series, start, end, formatValue, formatTimestamp, height, allowDecimals, className, ...props }: ComponentProps<"div"> & {
+    series: readonly TimeSeries[];
+    /** Window bounds in unix seconds; the axis spans them even where no samples fall. */
+    start: number;
+    end: number;
+    formatValue: (value: number) => string;
+    /** Optional axis and tooltip labels for a caller-owned time zone or calendar grain. */
+    formatTimestamp?: (unixSeconds: number) => string;
+    height?: number;
+    /** Disable fractional axis ticks for discrete counts such as users. */
+    allowDecimals?: boolean;
+}): import("@types/react").JSX.Element;