@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/tabs.js

@@ -0,0 +1,247 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { DotsThreeIcon } from "@phosphor-icons/react";
+import { createContext, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { css, cx } from "#primitives/css";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Menu } from "./menu.js";
+// Shrinkable by default, so a tab row in a flex or grid row scrolls inside itself rather than
+// widening the page.
+const root = css({ minWidth: "0", maxWidth: "100%" });
+export function TabsRoot({ className, ...props }) {
+    return _jsx(BaseTabs.Root, { ...props, className: cx(root, className) });
+}
+export const TabsPanel = BaseTabs.Panel;
+const list = css({
+    display: "flex",
+    maxWidth: "100%",
+    alignItems: "center",
+    gap: "none",
+    overflowX: "auto",
+    scrollbarWidth: "none",
+});
+/** Finalization "Menu Tabs": tabs sit inside a bordered pill with a hairline inset. */
+const containedList = css({
+    width: "max-content",
+    padding: "control.trackInset",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "pill",
+    background: "bg.control",
+    gap: "control.trackInset",
+});
+/* Text tabs: words only, the open one in the primary text, for a tray's or a sheet's filters. */
+const textList = css({ "&[data-variant=text]": { gap: "layout.contentGap" } });
+/* Underline tabs: words on a hairline, the open one underlined, for a panel's or a sheet's head. */
+const underlineList = css({
+    // Raised over the base list's own gap, as the text list's is.
+    "&[data-variant=underline]": {
+        gap: "layout.clusterGap",
+        paddingInline: "panel.comfortable",
+        borderBottom: "1px solid token(colors.border.panel)",
+    },
+});
+const count = css({ color: "fg.muted", fontSize: "code", fontVariantNumeric: "tabular-nums" });
+const tab = css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "control.iconGap",
+    height: "control.small",
+    paddingInline: "control.tabInline",
+    border: "1px solid transparent",
+    borderRadius: "pill",
+    background: "transparent",
+    color: "fg.muted",
+    fontFamily: "sans",
+    fontSize: "body",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    letterSpacing: "compact",
+    cursor: "pointer",
+    flexShrink: "0",
+    "&[data-icon-tone=bronze] svg": { color: "accent.bronze" },
+    _before: { display: "none" },
+    _hover: {
+        background: "bg.hover",
+        color: "fg.primary",
+        "& svg": { color: "inherit" },
+        _before: { display: "block" },
+    },
+    "&[data-active]": {
+        background: "bg.selected",
+        color: "fg.primary",
+        "& svg": { color: "inherit" },
+        _before: { display: "block" },
+    },
+    // Words only: no face, no inset, and focus underlines the word rather than boxing it.
+    "[data-variant=text] > &": {
+        height: "auto",
+        paddingBlock: "layout.tightGap",
+        paddingInline: "none",
+        border: "0",
+        background: "transparent",
+        _hover: { background: "transparent" },
+        "&[data-active]": { background: "transparent" },
+        // No glass edge either: the open word is the only mark.
+        "&::before, &:hover::before, &[data-active]::before": { display: "none" },
+        _focusVisible: {
+            boxShadow: "none",
+            outline: "none",
+            color: "fg.primary",
+            textDecoration: "underline",
+            textUnderlineOffset: "3px",
+        },
+    },
+    "[data-variant=underline] > &": {
+        height: "control.search",
+        paddingInline: "none",
+        border: "0",
+        borderBottom: "2px solid transparent",
+        borderRadius: "0",
+        marginBottom: "-1px",
+        background: "transparent",
+        _hover: { background: "transparent" },
+        "&[data-active]": { background: "transparent", borderBottomColor: "fg.primary" },
+        "&::before, &:hover::before, &[data-active]::before": { display: "none" },
+        _phone: { height: "control.search", paddingInline: "none" },
+    },
+    // Past the row's width, a tab waits in the "more" menu at the row's end.
+    "&[data-overflowed]": { display: "none" },
+    // Inside the tab: the list scrolls, so it clips anything past its 2px inset.
+    _focusVisible: { focusRing: "inset" },
+    "&:disabled, &[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
+    _phone: {
+        height: "control.compact",
+        paddingInline: "control.compactInline",
+        fontSize: "caption",
+    },
+});
+const group = css({ display: "flex", flexShrink: "0", borderRadius: "pill" });
+export function TabsGroup({ border = "control", className, ...props }) {
+    return _jsx("span", { ...props, className: cx(group, className), "data-ciridae-ui": "", "data-edge": border });
+}
+const InTabsBarContext = createContext(false);
+/*
+ * Moves the tabs that do not fit the row's width into a trailing "more" menu, measuring every tab
+ * as it would sit in the row. Runs whenever the tabs or the row's room change.
+ */
+function useOverflowedTabs(enabled, tabs) {
+    const listRef = useRef(null);
+    const moreRef = useRef(null);
+    const [overflowed, setOverflowed] = useState([]);
+    const [room, setRoom] = useState(0);
+    useLayoutEffect(() => {
+        const list = listRef.current;
+        const container = list?.parentElement;
+        if (!enabled || !container)
+            return;
+        const observer = new ResizeObserver(() => setRoom(container.clientWidth));
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [enabled]);
+    useLayoutEffect(() => {
+        const list = listRef.current;
+        const container = list?.parentElement;
+        if (!list || !container)
+            return;
+        const elements = [...list.children].filter((child) => child instanceof HTMLElement && child.getAttribute("role") === "tab");
+        for (const element of elements)
+            element.removeAttribute("data-overflowed");
+        const available = container.clientWidth;
+        const reserve = (moreRef.current?.offsetWidth ?? 0) + 4;
+        const fits = (element, width) => element.offsetLeft - list.offsetLeft + element.offsetWidth <= width;
+        const last = elements[elements.length - 1];
+        let firstHidden = elements.length;
+        if (enabled && last && !fits(last, available)) {
+            firstHidden = elements.findIndex((element) => !fits(element, available - reserve));
+        }
+        const next = elements.slice(firstHidden).map((element, offset) => {
+            element.setAttribute("data-overflowed", "");
+            const countText = element.querySelector("[data-tab-count]")?.textContent ?? undefined;
+            const label = [...element.childNodes]
+                .filter((node) => !(node instanceof Element && node.hasAttribute("data-tab-count")))
+                .map((node) => node.textContent ?? "")
+                .join("")
+                .trim();
+            return {
+                index: firstHidden + offset,
+                label,
+                count: countText,
+                active: element.hasAttribute("data-active"),
+            };
+        });
+        const key = (items) => items
+            .map((item) => `${item.index}:${item.label}:${item.count ?? ""}:${item.active}`)
+            .join("|");
+        if (key(next) !== key(overflowed))
+            setOverflowed(next);
+    }, [enabled, tabs, room, overflowed]);
+    const activate = (index) => {
+        const element = listRef.current?.querySelectorAll(":scope > [role=tab]")[index];
+        element?.click();
+    };
+    const activeHidden = overflowed.some((item) => item.active);
+    return { listRef, moreRef, overflowed, activeHidden, activate, room };
+}
+export function TabsList({ className, variant = "plain", overflow: ownOverflow, children, ...props }) {
+    const inBar = useContext(InTabsBarContext);
+    const overflow = ownOverflow ?? (inBar ? "menu" : "scroll");
+    const { labels } = useCiridaeLocale();
+    const { listRef, moreRef, overflowed, activeHidden, activate } = useOverflowedTabs(overflow === "menu", children);
+    return (_jsxs(BaseTabs.List, { ...props, ref: listRef, className: cx(list, variant === "contained" && containedList, variant === "text" && textList, variant === "underline" && underlineList, className), "data-ciridae-ui": "", "data-variant": variant, children: [children, overflow === "menu" && overflowed.length > 0 && (_jsx(Menu, { align: "end", trigger: _jsx("button", { type: "button", ref: moreRef, className: tab, "aria-label": labels.common.moreTabs, "data-ciridae-ui": "", "data-edge": "glass", "data-active": activeHidden || undefined, children: _jsx(DotsThreeIcon, { className: icon({ size: "small" }), weight: "bold" }) }), items: overflowed.map((item) => ({
+                    label: item.label,
+                    meta: item.count,
+                    onSelect: () => activate(item.index),
+                })) }))] }));
+}
+export function TabsTab({ className, iconTone, href, render, count: tabCount, children, ...props }) {
+    const link = href !== undefined || render !== undefined;
+    return (_jsxs(BaseTabs.Tab, { ...props, render: render ?? (href !== undefined ? _jsx("a", { href: href }) : undefined), nativeButton: link ? false : props.nativeButton, className: cx(tab, className), "data-ciridae-ui": "", "data-edge": "glass", "data-icon-tone": iconTone, children: [children, tabCount !== undefined && tabCount !== null && (_jsx("span", { className: count, "data-tab-count": "", children: tabCount }))] }));
+}
+/*
+ * A page's tabs share one row with the open section's controls: tabs that do not fit go into the
+ * list's "more" menu rather than pushing the controls onto a line of their own. Only a phone
+ * drops the controls below.
+ */
+const bar = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "nowrap",
+    gap: "layout.contentGap",
+    minWidth: "0",
+    "& > :first-child": { flex: "1 1 auto", minWidth: "0", maxWidth: "100%" },
+    _phone: { flexWrap: "wrap" },
+});
+const barActions = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    marginInlineStart: "auto",
+    flexShrink: "0",
+    "&:empty": { display: "none" },
+});
+const TabsBarSlotContext = createContext(null);
+/**
+ * Wraps a page's `TabsBar` and the section below it, so the section can place its controls on the
+ * tab row with `TabsBarActions` while keeping its own state.
+ */
+export function TabsBarProvider({ children }) {
+    const [slot, setSlot] = useState(null);
+    const value = useMemo(() => ({ slot, setSlot }), [slot]);
+    return _jsx(TabsBarSlotContext.Provider, { value: value, children: children });
+}
+/** Section tabs (a `TabsRoot`) with a slot at the end of the row for the open section's controls. */
+export function TabsBar({ className, children, ...props }) {
+    const context = useContext(TabsBarSlotContext);
+    return (_jsx(InTabsBarContext, { value: true, children: _jsxs("div", { ...props, className: cx(bar, className), "data-ciridae-ui": "", children: [children, _jsx("div", { ref: context?.setSlot, className: barActions })] }) }));
+}
+/** Renders the open section's controls at the end of the nearest `TabsBar` row. */
+export function TabsBarActions({ children }) {
+    const slot = useContext(TabsBarSlotContext)?.slot;
+    return slot ? createPortal(children, slot) : null;
+}

package/dist/components/theme-customizer.d.ts

@@ -0,0 +1,53 @@
+import { type ComponentProps } from "react";
+import { type PaletteName } from "../theme/palettes.js";
+import { type CiridaeLabels } from "./locale.js";
+import type { CiridaeTheme } from "../theme/options.js";
+/** A face the app offers: its id, its name in the menu and its CSS family. */
+export type ThemeFontOption = {
+    id: string;
+    label: string;
+    family: string;
+};
+export type ThemeFontOptions = {
+    /** Heading faces; the body faces when left out. */
+    display?: readonly ThemeFontOption[];
+    sans: readonly ThemeFontOption[];
+    mono: readonly ThemeFontOption[];
+};
+/** The palette and the faces, by font id. */
+export type ThemeCustomization = {
+    palette: PaletteName;
+    displayFont: string;
+    sansFont: string;
+    monoFont: string;
+};
+/** The palette and font families `ThemeProvider` (and `createCiridaePreset`) take for `value`. */
+export declare function themeCustomizationTheme(value: ThemeCustomization, fonts: ThemeFontOptions): Pick<CiridaeTheme, "palette" | "fonts">;
+/** A stored customization read back field by field, taking `fallback`'s for any it lacks. */
+export declare function parseThemeCustomization(stored: unknown, fallback: ThemeCustomization, fonts: ThemeFontOptions): ThemeCustomization;
+export type UseThemeCustomizationOptions<Value extends ThemeCustomization> = {
+    defaultValue: Value;
+    fonts: ThemeFontOptions;
+    /** Keeps the value in `localStorage`, as JSON, under this key. */
+    persistKey?: string;
+    /** Reads the stored JSON back; `parseThemeCustomization` covers a plain customization. */
+    parse: (stored: unknown) => Value;
+};
+/**
+ * A customization the app holds at its root: the value, a setter, and the `palette` and `fonts`
+ * to pass `ThemeProvider`. With `persistKey` it survives reloads; anything the app keeps beside
+ * the theme in `Value`, such as a brand name, is stored with it.
+ */
+export declare function useThemeCustomization<Value extends ThemeCustomization>({ defaultValue, fonts, persistKey, parse, }: UseThemeCustomizationOptions<Value>): {
+    value: Value;
+    setValue: import("@types/react").Dispatch<import("@types/react").SetStateAction<Value>>;
+    reset: () => void;
+    theme: Pick<CiridaeTheme, "fonts" | "palette">;
+};
+export type ThemeCustomizerProps<Value extends ThemeCustomization> = Omit<ComponentProps<"div">, "children" | "onChange"> & {
+    value: Value;
+    onValueChange: (value: Value) => void;
+    fonts: ThemeFontOptions;
+    labels?: Partial<CiridaeLabels["themeCustomizer"]>;
+};
+export declare function ThemeCustomizer<Value extends ThemeCustomization>({ value, onValueChange, fonts, labels: ownLabels, className, ...props }: ThemeCustomizerProps<Value>): import("@types/react").JSX.Element;

package/dist/components/theme-customizer.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The Appearance controls: the palette (with each palette's swatches under the color theme on
+ * screen), the color theme (System, Light, Dark) and the display, body and mono faces from fonts
+ * the app offers. The palette and faces are the caller's `value`, which it hands to
+ * `ThemeProvider` (`useThemeCustomization` keeps one in `localStorage` and builds those props);
+ * the color theme is `ThemeProvider`'s own, so it is read and set through `useColorTheme`.
+ */
+import { useCallback, useEffect, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { derivePaletteTokens } from "../theme/derive.js";
+import { PALETTE_NAMES, palettes } from "../theme/palettes.js";
+import { useColorTheme } from "./color-theme.js";
+import { DrawerField, DrawerFieldRow } from "./drawer.js";
+import { SegmentedControl, SegmentedOption } from "./form-layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { RadioCard, RadioCardGroup } from "./radio-card.js";
+import { Select } from "./select.js";
+function fontFamily(options, id) {
+    return options.find((option) => option.id === id)?.family;
+}
+/** The palette and font families `ThemeProvider` (and `createCiridaePreset`) take for `value`. */
+export function themeCustomizationTheme(value, fonts) {
+    return {
+        palette: value.palette,
+        fonts: {
+            display: fontFamily(fonts.display ?? fonts.sans, value.displayFont),
+            sans: fontFamily(fonts.sans, value.sansFont),
+            mono: fontFamily(fonts.mono, value.monoFont),
+        },
+    };
+}
+/** A stored customization read back field by field, taking `fallback`'s for any it lacks. */
+export function parseThemeCustomization(stored, fallback, fonts) {
+    if (typeof stored !== "object" || stored === null)
+        return fallback;
+    const fontId = (options, value, otherwise) => options.find((option) => option.id === value)?.id ?? otherwise;
+    const palette = "palette" in stored ? stored.palette : undefined;
+    return {
+        palette: PALETTE_NAMES.find((name) => name === palette) ?? fallback.palette,
+        displayFont: fontId(fonts.display ?? fonts.sans, "displayFont" in stored ? stored.displayFont : undefined, fallback.displayFont),
+        sansFont: fontId(fonts.sans, "sansFont" in stored ? stored.sansFont : undefined, fallback.sansFont),
+        monoFont: fontId(fonts.mono, "monoFont" in stored ? stored.monoFont : undefined, fallback.monoFont),
+    };
+}
+/**
+ * A customization the app holds at its root: the value, a setter, and the `palette` and `fonts`
+ * to pass `ThemeProvider`. With `persistKey` it survives reloads; anything the app keeps beside
+ * the theme in `Value`, such as a brand name, is stored with it.
+ */
+export function useThemeCustomization({ defaultValue, fonts, persistKey, parse, }) {
+    const [value, setValue] = useState(() => {
+        if (!persistKey)
+            return defaultValue;
+        try {
+            const text = globalThis.localStorage?.getItem(persistKey);
+            return text ? parse(JSON.parse(text)) : defaultValue;
+        }
+        catch {
+            return defaultValue;
+        }
+    });
+    useEffect(() => {
+        if (!persistKey)
+            return;
+        try {
+            globalThis.localStorage?.setItem(persistKey, JSON.stringify(value));
+        }
+        catch {
+            // The reader loses persistence across reloads, not the look they chose.
+        }
+    }, [persistKey, value]);
+    const reset = useCallback(() => setValue(defaultValue), [defaultValue]);
+    return { value, setValue, reset, theme: themeCustomizationTheme(value, fonts) };
+}
+const root = css({ display: "flex", flexDirection: "column", gap: "layout.clusterGap" });
+const swatches = css({ display: "flex", gap: "layout.tightGap" });
+const swatch = css({
+    width: "indicator.badge",
+    height: "indicator.badge",
+    borderRadius: "round",
+    boxShadow: "inset 0 0 0 1px token(colors.border.glass)",
+});
+/** The palette's accent, primary face and four status hues, under the color theme on screen. */
+function PaletteSwatches({ name, colorTheme }) {
+    const tokens = derivePaletteTokens(palettes[name]);
+    const themed = (value) => colorTheme === "light" ? value._light : value.base;
+    const fills = [
+        themed(tokens.colors["accent.brand"]),
+        themed(tokens.colors["bg.primary"]),
+        themed(tokens.colors["accent.green"]),
+        themed(tokens.colors["accent.red"]),
+        themed(tokens.colors["accent.yellow"]),
+        themed(tokens.colors["accent.blue"]),
+    ];
+    return (_jsx("span", { className: swatches, "aria-hidden": "true", children: fills.map((fill, index) => (_jsx("span", { className: swatch, style: { background: fill } }, index))) }));
+}
+export function ThemeCustomizer({ value, onValueChange, fonts, labels: ownLabels, className, ...props }) {
+    const { labels: localeLabels } = useCiridaeLocale();
+    const labels = { ...localeLabels.themeCustomizer, ...ownLabels };
+    const { theme, preference, setPreference } = useColorTheme();
+    const colorThemes = [
+        { value: "system", label: labels.system },
+        { value: "light", label: labels.light },
+        { value: "dark", label: labels.dark },
+    ];
+    const fontSelect = (label, options, selected, pick) => (_jsx(DrawerField, { label: label, children: _jsx(Select, { label: label, size: "medium", options: options.map((option) => ({ value: option.id, label: option.label })), value: selected, onValueChange: (id) => {
+                if (id !== null && options.some((option) => option.id === id))
+                    pick(id);
+            } }) }));
+    return (_jsxs("div", { ...props, className: cx(root, className), "data-ciridae-ui": "", children: [_jsx(DrawerField, { label: labels.palette, children: _jsx(RadioCardGroup, { name: "palette", label: labels.palette, value: value.palette, onValueChange: (next) => {
+                        const palette = PALETTE_NAMES.find((name) => name === next);
+                        if (palette)
+                            onValueChange({ ...value, palette });
+                    }, children: PALETTE_NAMES.map((name) => (_jsx(RadioCard, { value: name, title: labels.paletteName(name), source: _jsx(PaletteSwatches, { name: name, colorTheme: theme }) }, name))) }) }), _jsx(DrawerField, { label: labels.colorTheme, children: _jsx(SegmentedControl, { "aria-label": labels.colorTheme, children: colorThemes.map((option) => (_jsx(SegmentedOption, { selected: option.value === preference, onClick: () => setPreference(option.value), children: option.label }, option.value))) }) }), _jsxs(DrawerFieldRow, { children: [fontSelect(labels.displayFont, fonts.display ?? fonts.sans, value.displayFont, (id) => onValueChange({ ...value, displayFont: id })), fontSelect(labels.sansFont, fonts.sans, value.sansFont, (id) => onValueChange({ ...value, sansFont: id }))] }), _jsx(DrawerFieldRow, { children: fontSelect(labels.monoFont, fonts.mono, value.monoFont, (id) => onValueChange({ ...value, monoFont: id })) })] }));
+}

package/dist/components/toast.d.ts

@@ -0,0 +1,23 @@
+import { toast, type ToasterProps } from "sonner";
+import type { ComponentProps, ReactNode } from "react";
+export { toast };
+/** The toast stack, in the kit's look: mount one at the app's root. */
+export declare function Toaster(props: ToasterProps): import("@types/react").JSX.Element;
+export type ToastVariant = "success" | "progress" | "info" | "warning" | "error";
+export type ToastOptions = {
+    title: ReactNode;
+    /** One muted line under the message, such as an error ID to copy. */
+    description?: ReactNode;
+    variant?: ToastVariant;
+    /** Milliseconds it stays; `0` keeps it until dismissed. An error stays by default. */
+    timeout?: number;
+    /** One text button, such as Undo; its children are the label. */
+    actionProps?: Pick<ComponentProps<"button">, "children" | "onClick">;
+};
+/** Raises a toast with the kit's options, returning its id. */
+declare function addToast({ title: message, description: detail, variant, timeout, actionProps, }: ToastOptions): string | number;
+/** The kit's toast calls: `add` raises one and returns its id, `close` dismisses it. */
+export declare function useToast(): {
+    add: typeof addToast;
+    close: (id?: string | number) => string | number;
+};

package/dist/components/toast.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Toasts are sonner's, in the kit's look: a compact card with a tone icon, the message, an
+ * optional muted line under it, an optional action and a close button. Mount one `Toaster` at the
+ * app's root; raise toasts with `toast` from anywhere, or `useToast().add` with the kit's options.
+ */
+import { CheckCircleIcon, InfoIcon, SpinnerGapIcon, WarningCircleIcon, WarningIcon, XIcon, } from "@phosphor-icons/react";
+import { Toaster as SonnerToaster, toast } from "sonner";
+import { css, cx } from "#primitives/css";
+import { icon, spinning } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+export { toast };
+const card = css({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "layout.controlGap",
+    width: "max-content",
+    maxWidth: "min(360px, calc(100vw - token(spacing.layout.pageGap) * 2))",
+    paddingBlock: "control.block",
+    paddingInline: "control.iconInline",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "bg.card",
+    color: "fg.primary",
+    boxShadow: "toast",
+    textStyle: "body",
+    fontFamily: "sans",
+    lineHeight: "compact",
+    pointerEvents: "auto",
+});
+const content = css({ display: "grid", gap: "2px", flex: "1", minWidth: "0" });
+// Capped so a long message, such as a raw server error, can't grow the toast down the screen.
+const title = css({ fontWeight: "medium", lineClamp: "3", overflowWrap: "anywhere" });
+const description = css({
+    color: "fg.muted",
+    fontSize: "caption",
+    lineClamp: "2",
+    overflowWrap: "anywhere",
+});
+const iconSlot = css({
+    display: "inline-flex",
+    height: "1lh",
+    alignItems: "center",
+    flexShrink: "0",
+});
+const actionButton = css({
+    flexShrink: "0",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "accent.brand",
+    font: "inherit",
+    fontWeight: "medium",
+    cursor: "pointer",
+    _hover: { textDecoration: "underline" },
+    _focusVisible: { focusRing: "outer" },
+});
+// Sonner places its close button in the card's corner; the kit's sits at the end of the row.
+const closeButton = css({
+    position: "static!",
+    order: "1",
+    display: "grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "control.mark",
+    height: "control.mark",
+    padding: "none",
+    border: "0",
+    borderRadius: "round",
+    background: "transparent",
+    color: "fg.muted",
+    transform: "none!",
+    cursor: "pointer",
+    _hover: { color: "fg.primary", background: "bg.hover" },
+    _focusVisible: { focusRing: "outer" },
+});
+const toneIcon = {
+    success: css({ color: "accent.green" }),
+    info: css({ color: "accent.blue" }),
+    warning: css({ color: "accent.yellow" }),
+    danger: css({ color: "accent.red" }),
+};
+/** The toast stack, in the kit's look: mount one at the app's root. */
+export function Toaster(props) {
+    const { labels, dir } = useCiridaeLocale();
+    const small = icon({ size: "small" });
+    return (_jsx(SonnerToaster, { position: "bottom-right", gap: 6, 
+        // Listed apart rather than stacked under each other, so every message reads at once.
+        expand: true, closeButton: true, dir: dir, icons: {
+            success: _jsx(CheckCircleIcon, { className: cx(small, toneIcon.success), weight: "fill" }),
+            info: _jsx(InfoIcon, { className: cx(small, toneIcon.info), weight: "fill" }),
+            warning: _jsx(WarningCircleIcon, { className: cx(small, toneIcon.warning), weight: "fill" }),
+            error: _jsx(WarningIcon, { className: cx(small, toneIcon.danger), weight: "fill" }),
+            loading: _jsx(SpinnerGapIcon, { className: cx(small, toneIcon.info, spinning) }),
+            close: _jsx(XIcon, { className: icon({ size: "compact" }) }),
+        }, containerAriaLabel: labels.notifications.title, ...props, toastOptions: {
+            unstyled: true,
+            ...props.toastOptions,
+            classNames: {
+                toast: card,
+                content,
+                title,
+                description,
+                icon: iconSlot,
+                actionButton,
+                closeButton,
+                ...props.toastOptions?.classNames,
+            },
+        } }));
+}
+/** Raises a toast with the kit's options, returning its id. */
+function addToast({ title: message, description: detail, variant, timeout, actionProps, }) {
+    const duration = timeout ?? (variant === "error" ? 0 : undefined);
+    const options = {
+        description: detail,
+        duration: duration === 0 ? Infinity : duration,
+        action: actionProps && {
+            label: actionProps.children,
+            onClick: (event) => actionProps.onClick?.(event),
+        },
+    };
+    switch (variant) {
+        case "success":
+            return toast.success(message, options);
+        case "error":
+            return toast.error(message, options);
+        case "warning":
+            return toast.warning(message, options);
+        case "progress":
+            return toast.loading(message, options);
+        case "info":
+            return toast.info(message, options);
+        case undefined:
+            return toast(message, options);
+    }
+}
+/** The kit's toast calls: `add` raises one and returns its id, `close` dismisses it. */
+export function useToast() {
+    return { add: addToast, close: (id) => toast.dismiss(id) };
+}

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

@@ -0,0 +1,66 @@
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+export type UserChipAction = {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+};
+/** A row of the profile card, such as View profile or a persona's policies. */
+export type UserProfileAction = UserChipAction & {
+    icon?: ReactNode;
+};
+export type UserProfile = {
+    /** Their role or what the agent does, such as "Controller" or "Payables agent". */
+    title?: string;
+    email?: string;
+    /** What you can do with them, as rows at the foot of the card. */
+    actions?: readonly UserProfileAction[];
+};
+type UserIdentity = {
+    name: string;
+    kind?: "user" | "agent";
+    /** A photo; without one the avatar shows initials. */
+    src?: string;
+    /** A mark in place of initials, for an actor that is not a person, such as a sync or a rule. */
+    icon?: ReactNode;
+};
+/** Where the name leads: an address, or a router's link element such as `<Link to="...">`. */
+type UserLink = {
+    href?: string;
+    renderLink?: ReactElement;
+};
+export type UserChipProps = Omit<ComponentProps<"span">, "children"> & UserIdentity & UserLink & {
+    /** What they are doing, or their role. */
+    detail?: ReactNode;
+    action?: UserChipAction;
+    profile?: UserProfile;
+    size?: "regular" | "compact";
+};
+export declare function UserChip({ name, kind, src, icon, detail, action, profile, size, href, renderLink, className, ...props }: UserChipProps): import("@types/react").JSX.Element;
+/** Just the name, opening the same profile card when there is one: an author under a message. */
+export declare function UserName({ profile, href, renderLink, ...who }: UserIdentity & UserLink & {
+    profile?: UserProfile;
+}): import("@types/react").JSX.Element;
+/** Someone who takes part in a record: a person, or an agent persona, as the app knows them. */
+export type ChipParticipant = {
+    id: string;
+    name: string;
+    kind: "user" | "agent";
+    /** Their role, or what the agent does: "Controller", "Payables agent". */
+    title?: string;
+    email?: string;
+    /** A photo; agents draw their own mark. */
+    src?: string;
+    /** What the agent does, in a sentence. */
+    duty?: string;
+};
+export type ParticipantChipProps = Omit<UserChipProps, "name" | "kind" | "src" | "icon" | "profile"> & {
+    participant: ChipParticipant;
+    /** Rows at the foot of the profile card, such as View profile. */
+    actions?: readonly UserProfileAction[];
+};
+/**
+ * A participant as a `UserChip` whose name opens their profile card: their title and email, and
+ * `actions`. `href` or `renderLink` makes the name lead to their page as well.
+ */
+export declare function ParticipantChip({ participant, actions, ...chipProps }: ParticipantChipProps): import("@types/react").JSX.Element;
+export {};