@-reddacted-/react-ui 0.3.0 → 0.4.0

package/dist/components/Tabs.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, useState } from "react";
+import { resolveColor } from "../style/resolveColor.js";
+import { tabsCss } from "../style/tabsCss.js";
+import { useStyle } from "../style/useStyle.js";
+const TabsContext = createContext(null);
+function useTabsContext(part) {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error(`Tabs.${part} must be used within Tabs`);
+    return ctx;
+}
+// Values are free strings: whitespace is not allowed in ids.
+const idPart = (value) => value.replace(/\s/g, "_");
+const tabId = (baseId, value) => `${baseId}-tab-${idPart(value)}`;
+const panelId = (baseId, value) => `${baseId}-panel-${idPart(value)}`;
+export function Tabs({ value: controlledValue, defaultValue, onChange, variant = "underline", orientation = "horizontal", color = "--color-primary", keepMounted = false, className, style, children, }) {
+    useStyle("tabs", tabsCss);
+    const baseId = useId();
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const controlled = controlledValue !== undefined;
+    const value = controlled ? controlledValue : uncontrolledValue;
+    const select = (next) => {
+        if (next === value)
+            return;
+        if (!controlled)
+            setUncontrolledValue(next);
+        onChange?.(next);
+    };
+    return (_jsx(TabsContext.Provider, { value: { value, select, baseId, variant, orientation, color, keepMounted }, children: _jsx("div", { className: className, style: style, children: children }) }));
+}
+const NEXT_KEY = { horizontal: "ArrowRight", vertical: "ArrowDown" };
+const PREV_KEY = { horizontal: "ArrowLeft", vertical: "ArrowUp" };
+/** The tab list (`role="tablist"`, class `rui-tabs`). Arrow keys, Home and End move and activate. */
+function List({ className, style, onKeyDown, ...props }) {
+    const { select, variant, orientation, color } = useTabsContext("List");
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        const tabs = Array.from(event.currentTarget.querySelectorAll(':scope > [role="tab"]:not(:disabled)'));
+        const current = tabs.indexOf(event.target);
+        if (current === -1)
+            return;
+        let next;
+        if (event.key === NEXT_KEY[orientation])
+            next = (current + 1) % tabs.length;
+        else if (event.key === PREV_KEY[orientation])
+            next = (current - 1 + tabs.length) % tabs.length;
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = tabs.length - 1;
+        else
+            return;
+        event.preventDefault();
+        tabs[next].focus();
+        const nextValue = tabs[next].dataset.value;
+        if (nextValue !== undefined)
+            select(nextValue);
+    };
+    return (_jsx("div", { role: "tablist", "aria-orientation": orientation, ...props, className: className ? `rui-tabs ${className}` : "rui-tabs", "data-variant": variant, style: { "--rui-tabs-color": resolveColor(color), ...style }, onKeyDown: handleKeyDown }));
+}
+function Tab({ value, disabled, onClick, ...props }) {
+    const ctx = useTabsContext("Tab");
+    const selected = ctx.value === value;
+    return (_jsx("button", { type: "button", role: "tab", id: tabId(ctx.baseId, value), "aria-controls": panelId(ctx.baseId, value), "aria-selected": selected, 
+        // Roving tabIndex: only the active tab is in the Tab order (every tab while none is active).
+        tabIndex: selected || ctx.value === undefined ? 0 : -1, disabled: disabled, "data-value": value, ...props, onClick: event => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                ctx.select(value);
+        } }));
+}
+function Panel({ value, ...props }) {
+    const ctx = useTabsContext("Panel");
+    const selected = ctx.value === value;
+    if (!selected && !ctx.keepMounted)
+        return null;
+    return (_jsx("div", { role: "tabpanel", id: panelId(ctx.baseId, value), "aria-labelledby": tabId(ctx.baseId, value), tabIndex: 0, hidden: !selected, ...props }));
+}
+Tabs.List = List;
+Tabs.Tab = Tab;
+Tabs.Panel = Panel;

package/dist/components/Tag.d.ts

@@ -0,0 +1,10 @@
+import type { BadgeProps } from "./Badge.js";
+type TagProps = BadgeProps & {
+    /** Shows a × button calling this. */
+    onRemove?: () => void;
+    /** Accessible name of the × button. Defaults to `"Remove"`. */
+    removeLabel?: string;
+};
+export declare function Tag({ variant, color, size, onRemove, removeLabel, className, style, children, ...props }: TagProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Tag.d.ts.map

package/dist/components/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/components/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,KAAK,QAAQ,GAAG,UAAU,GAAG;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,wBAAgB,GAAG,CAAC,EAClB,OAAiB,EACjB,KAAyB,EACzB,IAAI,EACJ,QAAQ,EACR,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,QAAQ,+BAiBV"}

package/dist/components/Tag.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { badgeCss, badgeVars } from "../style/badgeCss.js";
+import { useStyle } from "../style/useStyle.js";
+export function Tag({ variant = "solid", color = "--color-primary", size, onRemove, removeLabel = "Remove", className, style, children, ...props }) {
+    useStyle("badge", badgeCss);
+    return (_jsxs("span", { ...props, className: className ? `rui-tag ${className}` : "rui-tag", "data-variant": variant, style: { ...badgeVars(color, size), ...style }, children: [children, onRemove && (_jsx("button", { type: "button", className: "rui-tag-remove", "aria-label": removeLabel, onClick: onRemove, children: "\u00D7" }))] }));
+}

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement, ReactNode } from "react";
+import type { TooltipPlacement } from "../tooltip/tooltipEngine.js";
+type TooltipProps = {
+    /** Not interactive: the bubble never receives pointer events or focus. */
+    content: ReactNode;
+    /** Flips and shifts by itself when there is no room. Defaults to `"top"`. */
+    placement?: TooltipPlacement;
+    /** Hover delay in ms before opening; keyboard focus opens right away. Defaults to 300. */
+    delay?: number;
+    /** Background. `"--color-x"` reads the theme variable; anything else is a raw CSS color. Defaults to `--color-text`. */
+    color?: string;
+    /** Defaults to `--color-bg`. */
+    textColor?: string;
+    /** Numbers are pixels. Defaults to 240. */
+    maxWidth?: string | number;
+    disabled?: boolean;
+    /** A single element that accepts a ref (DOM element or forwardRef component). */
+    children: ReactElement;
+};
+export declare function Tooltip({ content, placement, delay, color, textColor, maxWidth, disabled, children, }: TooltipProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA4C,YAAY,EAAE,SAAS,EAAO,MAAM,OAAO,CAAA;AAKnG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AASnE,KAAK,YAAY,GAAG;IAClB,0EAA0E;IAC1E,OAAO,EAAE,SAAS,CAAA;IAClB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wHAAwH;IACxH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iFAAiF;IACjF,QAAQ,EAAE,YAAY,CAAA;CACvB,CAAA;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAiB,EACjB,KAAW,EACX,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAgB,EAChB,QAAQ,GACT,EAAE,YAAY,+BA+Ed"}

package/dist/components/Tooltip.js

@@ -0,0 +1,76 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { tooltipCss } from "../style/tooltipCss.js";
+import { useStyle } from "../style/useStyle.js";
+import { TooltipEngine } from "../tooltip/tooltipEngine.js";
+import { assignRef, getElementRef } from "../utils/childRef.js";
+import { isDev } from "../utils/isDev.js";
+const INTERACTIVE = "a[href], button, input, select, textarea, [tabindex]";
+export function Tooltip({ content, placement = "top", delay = 300, color, textColor, maxWidth, disabled = false, children, }) {
+    useStyle("tooltip", tooltipCss);
+    const [open, setOpen] = useState(false);
+    const [engine] = useState(() => new TooltipEngine(setOpen));
+    const anchorRef = useRef(null);
+    const child = Children.only(children);
+    const childProps = child.props;
+    const childRef = getElementRef(child);
+    const setAnchor = useCallback((node) => {
+        anchorRef.current = node;
+        assignRef(childRef, node);
+    }, [childRef]);
+    useLayoutEffect(() => {
+        engine.setLook({ placement, color, textColor, maxWidth });
+    }, [engine, placement, color, textColor, maxWidth]);
+    useEffect(() => {
+        if (disabled)
+            engine.hide();
+    }, [engine, disabled]);
+    useEffect(() => () => engine.hide(), [engine]);
+    useEffect(() => {
+        if (isDev() && !anchorRef.current) {
+            console.warn("Tooltip: the child did not receive the ref (use a DOM element or a forwardRef component).");
+        }
+    }, []);
+    useEffect(() => {
+        if (open && isDev() && engine.content.querySelector(INTERACTIVE)) {
+            console.warn("Tooltip: the content holds an interactive element, which can never be reached.");
+        }
+    }, [engine, open, content]);
+    const onPointerEnter = (event) => {
+        childProps.onPointerEnter?.(event);
+        if (!disabled && event.pointerType !== "touch")
+            engine.scheduleShow(event.currentTarget, delay);
+    };
+    const onPointerLeave = (event) => {
+        childProps.onPointerLeave?.(event);
+        if (event.pointerType !== "touch")
+            engine.hide();
+    };
+    const onPointerDown = (event) => {
+        childProps.onPointerDown?.(event);
+        if (!disabled && event.pointerType === "touch")
+            engine.showForTouch(event.currentTarget);
+    };
+    const onFocus = (event) => {
+        childProps.onFocus?.(event);
+        if (!disabled)
+            engine.show(event.currentTarget);
+    };
+    const onBlur = (event) => {
+        childProps.onBlur?.(event);
+        engine.hide();
+    };
+    const describedBy = open
+        ? [childProps["aria-describedby"], engine.id].filter(Boolean).join(" ")
+        : childProps["aria-describedby"];
+    return (_jsxs(_Fragment, { children: [cloneElement(child, {
+                ref: setAnchor,
+                "aria-describedby": describedBy,
+                onPointerEnter,
+                onPointerLeave,
+                onPointerDown,
+                onFocus,
+                onBlur,
+            }), createPortal(content, engine.content)] }));
+}

package/dist/components/drawerStore.d.ts

@@ -0,0 +1,11 @@
+export declare function openDrawer(id: string): void;
+export declare function closeDrawer(id: string): void;
+export declare function toggleDrawer(id: string): void;
+/** Reads whether drawer `id` is open by call, with bound `open` / `close` / `toggle`. */
+export declare function useDrawer(id: string): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+//# sourceMappingURL=drawerStore.d.ts.map

package/dist/components/drawerStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawerStore.d.ts","sourceRoot":"","sources":["../../src/components/drawerStore.ts"],"names":[],"mappings":"AAqBA,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAE3C;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAE5C;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAE7C;AAED,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CAYlH"}

package/dist/components/drawerStore.js

@@ -0,0 +1,40 @@
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+// Drawers opened by call, by id. Kept apart from Drawer.tsx so the component file
+// only exports components (react-refresh rule).
+const openIds = new Set();
+const listeners = new Set();
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+function setDrawerOpen(id, open) {
+    if (openIds.has(id) === open)
+        return;
+    if (open)
+        openIds.add(id);
+    else
+        openIds.delete(id);
+    listeners.forEach(listener => listener());
+}
+export function openDrawer(id) {
+    setDrawerOpen(id, true);
+}
+export function closeDrawer(id) {
+    setDrawerOpen(id, false);
+}
+export function toggleDrawer(id) {
+    setDrawerOpen(id, !openIds.has(id));
+}
+/** Reads whether drawer `id` is open by call, with bound `open` / `close` / `toggle`. */
+export function useDrawer(id) {
+    const getSnapshot = useCallback(() => openIds.has(id), [id]);
+    const isOpen = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    return useMemo(() => ({
+        isOpen,
+        open: () => openDrawer(id),
+        close: () => closeDrawer(id),
+        toggle: () => toggleDrawer(id),
+    }), [id, isOpen]);
+}

package/dist/components/paginationItems.d.ts

@@ -0,0 +1,18 @@
+export type PaginationItem = {
+    type: "page";
+    page: number;
+    current: boolean;
+} | {
+    type: "first" | "previous" | "next" | "last";
+    page: number;
+    disabled: boolean;
+} | {
+    type: "ellipsis";
+};
+/**
+ * Items to render for `page` of `total` (1-based): edges, previous / next, the first and
+ * last pages, `siblings` pages around the current one, and ellipses for the gaps.
+ * A gap of a single page shows that page instead of an ellipsis.
+ */
+export declare function getPaginationItems(page: number, total: number, siblings: number, showEdges: boolean): PaginationItem[];
+//# sourceMappingURL=paginationItems.d.ts.map

package/dist/components/paginationItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginationItems.d.ts","sourceRoot":"","sources":["../../src/components/paginationItems.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GACjF;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAA;AAExB;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,cAAc,EAAE,CAyBtH"}

package/dist/components/paginationItems.js

@@ -0,0 +1,32 @@
+/**
+ * Items to render for `page` of `total` (1-based): edges, previous / next, the first and
+ * last pages, `siblings` pages around the current one, and ellipses for the gaps.
+ * A gap of a single page shows that page instead of an ellipsis.
+ */
+export function getPaginationItems(page, total, siblings, showEdges) {
+    const last = Math.max(1, total);
+    const current = Math.min(Math.max(1, page), last);
+    const shown = new Set([1, last]);
+    for (let p = current - siblings; p <= current + siblings; p++) {
+        if (p >= 1 && p <= last)
+            shown.add(p);
+    }
+    const pages = [...shown].sort((a, b) => a - b);
+    const items = [];
+    if (showEdges)
+        items.push({ type: "first", page: 1, disabled: current === 1 });
+    items.push({ type: "previous", page: current - 1, disabled: current === 1 });
+    let previous = 0;
+    for (const p of pages) {
+        if (p - previous === 2)
+            items.push({ type: "page", page: p - 1, current: false });
+        else if (p - previous > 2)
+            items.push({ type: "ellipsis" });
+        items.push({ type: "page", page: p, current: p === current });
+        previous = p;
+    }
+    items.push({ type: "next", page: current + 1, disabled: current === last });
+    if (showEdges)
+        items.push({ type: "last", page: last, disabled: current === last });
+    return items;
+}

package/dist/index.d.ts

@@ -2,21 +2,37 @@ export { default as Modal, openModal, closeModal } from "./components/Modal.js";
 export { default as ColorPicker } from "./components/ColorPicker.js";
 export { default as ConfirmDeleteButton } from "./components/ConfirmDeleteButton.js";
 export { ColorField } from "./components/ColorField.js";
-export { Button, type ButtonVariant } from "./components/Button.js";
-export { NavBar, type NavLink } from "./components/NavBar.js";
-export { PageMessage, LoadingMessage, ErrorMessage } from "./components/PageStatus.js";
+export { Button, type ButtonVariant, type ThemeColorVar } from "./components/Button.js";
+export { NavBar } from "./components/NavBar.js";
+export { Spinner } from "./components/Spinner.js";
+export { Skeleton } from "./components/Skeleton.js";
+export { Card } from "./components/Card.js";
+export { Stack } from "./components/Stack.js";
+export { Badge, type BadgeVariant } from "./components/Badge.js";
+export { Tag } from "./components/Tag.js";
+export { Tabs } from "./components/Tabs.js";
+export { Tooltip } from "./components/Tooltip.js";
+export { DropdownMenu } from "./components/DropdownMenu.js";
+export { Table, type TableColumn, type SortState } from "./components/Table.js";
+export type { TooltipPlacement } from "./tooltip/tooltipEngine.js";
+export { Drawer, type DrawerSide, type DrawerMode } from "./components/Drawer.js";
+export { openDrawer, closeDrawer, toggleDrawer, useDrawer } from "./components/drawerStore.js";
+export { PageStatus } from "./components/PageStatus.js";
+export { Pagination } from "./components/Pagination.js";
+export { Accordion } from "./components/Accordion.js";
+export type { PaginationItem } from "./components/paginationItems.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { ThemeSelect } from "./theme/ThemeSelect.js";
 export { defaultPalette } from "./theme/palette.js";
 export { createLocalThemeStore, createHttpThemeStore, type ThemeStore } from "./theme/store.js";
 export { serializeColors, parseColors, isHexColor, randomHex } from "./theme/clipboard.js";
 export type { ThemeColors, ThemeDefinition, ThemeCatalog, ThemeDraft } from "./theme/types.js";
-export { PopupProvider, type InterceptFetchMode } from "./popup/PopupProvider.js";
-export { usePopup, type PopupApi } from "./popup/usePopup.js";
-export { PopupHost } from "./popup/PopupHost.js";
+export { PopupProvider, type InterceptFetchMode, type ToastGroupConfig } from "./popup/PopupProvider.js";
+export { usePopup, type PopupApi, type PushOptions } from "./popup/usePopup.js";
+export { PopupHost, type ToastBox } from "./popup/PopupHost.js";
 export { createInterceptedFetch, type InterceptorHandlers } from "./popup/fetchInterceptor.js";
 export { createErrorRules, createGraphqlErrorRules, defaultMessages, type ErrorRules, type ErrorRulesOptions, type GraphqlError, type GraphqlErrorRulesOptions, type PopupMessages, type FetchErrorReport, } from "./popup/errorRules.js";
 export { fetchJson } from "./net/fetchJson.js";
-export { useDocumentTitle, useAsync, useElementSize, useClickOutside, useEscapeKey } from "@-reddacted-/react-hooks";
+export { useDocumentTitle, useAsync, useElementSize, useClickOutside, useEscapeKey, useFocusTrap, useScrollLock, useOverlayStack, } from "@-reddacted-/react-hooks";
 export type { AsyncStatus, AsyncStatus as LoadStatus, AsyncResult, ElementSize } from "@-reddacted-/react-hooks";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEtF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE9F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAC9F,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,eAAe,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACpH,YAAY,EAAE,WAAW,EAAE,WAAW,IAAI,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -4,7 +4,21 @@ export { default as ConfirmDeleteButton } from "./components/ConfirmDeleteButton
 export { ColorField } from "./components/ColorField.js";
 export { Button } from "./components/Button.js";
 export { NavBar } from "./components/NavBar.js";
-export { PageMessage, LoadingMessage, ErrorMessage } from "./components/PageStatus.js";
+export { Spinner } from "./components/Spinner.js";
+export { Skeleton } from "./components/Skeleton.js";
+export { Card } from "./components/Card.js";
+export { Stack } from "./components/Stack.js";
+export { Badge } from "./components/Badge.js";
+export { Tag } from "./components/Tag.js";
+export { Tabs } from "./components/Tabs.js";
+export { Tooltip } from "./components/Tooltip.js";
+export { DropdownMenu } from "./components/DropdownMenu.js";
+export { Table } from "./components/Table.js";
+export { Drawer } from "./components/Drawer.js";
+export { openDrawer, closeDrawer, toggleDrawer, useDrawer } from "./components/drawerStore.js";
+export { PageStatus } from "./components/PageStatus.js";
+export { Pagination } from "./components/Pagination.js";
+export { Accordion } from "./components/Accordion.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { ThemeSelect } from "./theme/ThemeSelect.js";
 export { defaultPalette } from "./theme/palette.js";
@@ -17,4 +31,4 @@ export { createInterceptedFetch } from "./popup/fetchInterceptor.js";
 export { createErrorRules, createGraphqlErrorRules, defaultMessages, } from "./popup/errorRules.js";
 export { fetchJson } from "./net/fetchJson.js";
 // Réexportés depuis react-hooks : les appelants n'ont pas à connaître le découpage.
-export { useDocumentTitle, useAsync, useElementSize, useClickOutside, useEscapeKey } from "@-reddacted-/react-hooks";
+export { useDocumentTitle, useAsync, useElementSize, useClickOutside, useEscapeKey, useFocusTrap, useScrollLock, useOverlayStack, } from "@-reddacted-/react-hooks";

package/dist/popup/PopupHost.d.ts

@@ -1,8 +1,24 @@
+import type { CSSProperties, ReactNode } from "react";
+/** One group's box: every message of the group, stacked. */
+export type ToastBox = {
+    group: string;
+    /** `"--color-x"` reads the theme variable; anything else is a raw CSS color. */
+    color: string;
+    className?: string;
+    items: {
+        id: number | string;
+        content: ReactNode;
+    }[];
+};
 type PopupHostProps = {
-    messages: string[];
-    onDismiss: () => void;
+    boxes: ToastBox[];
+    /** Called with the group of the box whose × was clicked. */
+    onDismiss: (group: string) => void;
     closeLabel?: string;
+    /** Set on the `.rui-toasts` container. */
+    className?: string;
+    style?: CSSProperties;
 };
-export declare function PopupHost({ messages, onDismiss, closeLabel }: PopupHostProps): import("react").JSX.Element | null;
+export declare function PopupHost({ boxes, onDismiss, closeLabel, className, style }: PopupHostProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=PopupHost.d.ts.map

package/dist/popup/PopupHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupHost.d.ts","sourceRoot":"","sources":["../../src/popup/PopupHost.tsx"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAoB,EAAE,EAAE,cAAc,sCAiBtF"}
+{"version":3,"file":"PopupHost.d.ts","sourceRoot":"","sources":["../../src/popup/PopupHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIrD,4DAA4D;AAC5D,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,EAAE,SAAS,CAAA;KAAE,EAAE,CAAA;CACrD,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,4DAA4D;IAC5D,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAoB,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,cAAc,sCA6BrG"}

package/dist/popup/PopupHost.js

@@ -1,46 +1,67 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function PopupHost({ messages, onDismiss, closeLabel = "Close" }) {
-    if (messages.length === 0)
+import { resolveColor } from "../style/resolveColor.js";
+import { useStyle } from "../style/useStyle.js";
+export function PopupHost({ boxes, onDismiss, closeLabel = "Close", className, style }) {
+    useStyle("toast", toastCss);
+    if (boxes.length === 0)
         return null;
-    return (_jsxs("div", { role: "alert", "aria-live": "assertive", style: hostStyle, children: [_jsx("div", { style: bodyStyle, children: messages.map(message => (_jsx("p", { style: messageStyle, children: message }, message))) }), _jsx("button", { type: "button", "aria-label": closeLabel, onClick: onDismiss, style: closeStyle, children: "\u00D7" })] }));
-}
-const hostStyle = {
-    position: "fixed",
-    top: "1rem",
-    left: "50%",
-    transform: "translateX(-50%)",
-    zIndex: 2000,
-    display: "flex",
-    alignItems: "flex-start",
-    gap: "0.75rem",
-    maxWidth: "min(32rem, calc(100vw - 2rem))",
-    padding: "0.75rem 0.75rem 0.75rem 1rem",
-    borderRadius: "8px",
-    border: "1px solid var(--color-danger)",
-    backgroundColor: "var(--color-danger-soft)",
-    boxShadow: "0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent)",
-};
-const bodyStyle = {
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.25rem",
-};
-const messageStyle = {
-    margin: 0,
-    fontSize: "0.875rem",
-    lineHeight: 1.4,
-    color: "var(--color-text)",
-};
-const closeStyle = {
-    flexShrink: 0,
-    padding: 0,
-    width: "1.5rem",
-    height: "1.5rem",
-    lineHeight: 1,
-    fontSize: "1.125rem",
-    cursor: "pointer",
-    border: "none",
-    borderRadius: "4px",
-    backgroundColor: "transparent",
-    color: "var(--color-danger)",
-};
+    return (_jsx("div", { className: className ? `rui-toasts ${className}` : "rui-toasts", style: style, children: boxes.map(box => (_jsxs("div", { role: "alert", "aria-live": "assertive", className: box.className ? `rui-toast ${box.className}` : "rui-toast", "data-group": box.group || undefined, style: { "--rui-toast-color": resolveColor(box.color) }, children: [_jsx("div", { className: "rui-toast-body", children: box.items.map(item => (_jsx("div", { className: "rui-toast-message", children: item.content }, item.id))) }), _jsx("button", { type: "button", className: "rui-toast-close", "aria-label": closeLabel, onClick: () => onDismiss(box.group), children: "\u00D7" })] }, box.group))) }));
+}
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+// Above the overlay stack (modals start at 1000) so errors stay visible over a modal.
+const toastCss = `
+:where(.rui-toasts) {
+  position: fixed;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: max-content;
+  max-width: min(32rem, calc(100vw - 2rem));
+}
+:where(.rui-toast) {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 0.75rem 0.75rem 1rem;
+  border: 1px solid var(--rui-toast-color);
+  border-radius: 8px;
+  background-color: color-mix(in srgb, var(--rui-toast-color) 12%, var(--color-surface));
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent);
+}
+:where(.rui-toast-body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+:where(.rui-toast-message) {
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--color-text);
+}
+:where(.rui-toast-close) {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: transparent;
+  color: var(--rui-toast-color);
+  font-size: 1.125rem;
+  line-height: 1;
+  cursor: pointer;
+}
+:where(.rui-toast-close:hover) {
+  background-color: color-mix(in srgb, var(--rui-toast-color) 12%, transparent);
+}
+:where(.rui-toast-close:focus-visible) {
+  outline: 2px solid var(--rui-toast-color);
+  outline-offset: 1px;
+}
+`;

package/dist/popup/PopupProvider.d.ts

@@ -1,19 +1,36 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import type { FetchErrorReport, GraphqlErrorRulesOptions } from "./errorRules.js";
 /** Which `window.fetch` failures raise a popup on their own; `false` leaves fetch untouched. */
 export type InterceptFetchMode = false | "rest" | "graphql";
+export type ToastGroupConfig = {
+    /** `"--color-x"` reads the theme variable; anything else is a raw CSS color. Defaults to the provider's `color`. */
+    color?: string;
+    /** Closes the group's box this many ms after its last message. Absent or 0: stays until closed. */
+    duration?: number;
+    /** Added to the group's `.rui-toast` box. */
+    className?: string;
+};
 type PopupProviderProps = GraphqlErrorRulesOptions & {
     children: ReactNode;
     closeLabel?: string;
+    /** Groups the project uses, by name. Undeclared groups are accepted with the defaults. */
+    groups?: Record<string, ToastGroupConfig>;
+    /** Default color of every box. `"--color-x"` reads the theme variable. Defaults to `"--color-primary"`. */
+    color?: string;
     /**
      * Installs a `window.fetch` interceptor that raises popups by itself: `"rest"` reads HTTP
      * statuses, `"graphql"` also reads the `errors` array on `graphqlPaths`. Off by default.
      * Intercepted messages clear as soon as the next request starts; pushed ones stay.
      */
     interceptFetch?: InterceptFetchMode;
+    /** Group of intercepted fetch failures. Omitted: the anonymous default group. */
+    fetchGroup?: string;
     /** Called for every intercepted failure, with the method, URL and status behind it. */
     onReport?: (report: FetchErrorReport) => void;
+    /** Set on the `.rui-toasts` container, e.g. to move it. */
+    className?: string;
+    style?: CSSProperties;
 };
-export declare function PopupProvider({ children, closeLabel, interceptFetch, onReport, ...ruleOptions }: PopupProviderProps): import("react").JSX.Element;
+export declare function PopupProvider({ children, closeLabel, groups: groupConfigs, color, interceptFetch, fetchGroup, onReport, className, style, ...ruleOptions }: PopupProviderProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=PopupProvider.d.ts.map

package/dist/popup/PopupProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupProvider.d.ts","sourceRoot":"","sources":["../../src/popup/PopupProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAOjF,gGAAgG;AAChG,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;AAE3D,KAAK,kBAAkB,GAAG,wBAAwB,GAAG;IACnD,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAC9C,CAAA;AAKD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAsB,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,EAAE,kBAAkB,+BAyD3H"}
+{"version":3,"file":"PopupProvider.d.ts","sourceRoot":"","sources":["../../src/popup/PopupProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AASjF,gGAAgG;AAChG,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oHAAoH;IACpH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mGAAmG;IACnG,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,kBAAkB,GAAG,wBAAwB,GAAG;IACnD,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACzC,2GAA2G;IAC3G,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC7C,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAwBD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,MAAM,EAAE,YAAY,EACpB,KAAyB,EACzB,cAAsB,EACtB,UAA0B,EAC1B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,WAAW,EACf,EAAE,kBAAkB,+BA0GpB"}