@-reddacted-/react-ui 0.3.0 → 0.4.0

package/dist/components/DropdownMenu.js

@@ -0,0 +1,302 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { useEscapeKey, useOverlayStack } from "@-reddacted-/react-hooks";
+import { menuCss } from "../style/menuCss.js";
+import { resolveColor } from "../style/resolveColor.js";
+import { toLength } from "../style/toLength.js";
+import { useStyle } from "../style/useStyle.js";
+import { assignRef, getElementRef } from "../utils/childRef.js";
+const MenuContext = createContext(null);
+function useMenuContext(part) {
+    const ctx = useContext(MenuContext);
+    if (!ctx)
+        throw new Error(`DropdownMenu.${part} must be used within DropdownMenu`);
+    return ctx;
+}
+const ITEM_SELECTOR = '[role^="menuitem"]:not([aria-disabled="true"])';
+const TYPEAHEAD_RESET = 500;
+function menuItems(content) {
+    return content ? Array.from(content.querySelectorAll(ITEM_SELECTOR)) : [];
+}
+function focusItem(content, intent) {
+    const items = menuItems(content);
+    if (intent === "first")
+        items[0]?.focus();
+    else if (intent === "last")
+        items[items.length - 1]?.focus();
+}
+export function DropdownMenu({ trigger = "click", placement = "bottom-start", open: controlledOpen, defaultOpen = false, onOpenChange, closeDelay = 200, color = "--color-primary", children, }) {
+    useStyle("menu", menuCss);
+    const baseId = useId();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const controlled = controlledOpen !== undefined;
+    const open = controlled ? controlledOpen : uncontrolledOpen;
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const focusIntent = useRef("none");
+    const closeTimer = useRef();
+    const onOpenChangeRef = useRef(onOpenChange);
+    onOpenChangeRef.current = onOpenChange;
+    const openRef = useRef(open);
+    openRef.current = open;
+    const setOpen = useCallback((next, options = {}) => {
+        clearTimeout(closeTimer.current);
+        if (next)
+            focusIntent.current = options.focus ?? "none";
+        if (!next && options.returnFocus)
+            triggerRef.current?.focus();
+        if (next === openRef.current) {
+            // Already open: still honour a keyboard request to move into the menu.
+            if (next)
+                focusItem(contentRef.current, focusIntent.current);
+            return;
+        }
+        if (!controlled)
+            setUncontrolledOpen(next);
+        onOpenChangeRef.current?.(next);
+    }, [controlled]);
+    const cancelClose = useCallback(() => clearTimeout(closeTimer.current), []);
+    const scheduleClose = useCallback(() => {
+        clearTimeout(closeTimer.current);
+        closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
+    }, [setOpen, closeDelay]);
+    useEffect(() => () => clearTimeout(closeTimer.current), []);
+    const value = {
+        open,
+        setOpen,
+        focusIntent,
+        triggerRef,
+        contentRef,
+        menuId: `${baseId}-menu`,
+        triggerId: `${baseId}-trigger`,
+        trigger,
+        placement,
+        color,
+        scheduleClose,
+        cancelClose,
+    };
+    return _jsx(MenuContext.Provider, { value: value, children: children });
+}
+/** Wraps one element of the project (e.g. a Button), which must accept a ref. */
+function Trigger({ children }) {
+    const ctx = useMenuContext("Trigger");
+    const child = Children.only(children);
+    const childProps = child.props;
+    const childRef = getElementRef(child);
+    const lastPointerType = useRef("mouse");
+    const setRef = useCallback((node) => {
+        ctx.triggerRef.current = node;
+        assignRef(childRef, node);
+    }, [ctx.triggerRef, childRef]);
+    const hoverMode = ctx.trigger === "hover";
+    return cloneElement(child, {
+        ref: setRef,
+        id: childProps.id ?? ctx.triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": ctx.open,
+        "aria-controls": ctx.open ? ctx.menuId : undefined,
+        onPointerDown: (event) => {
+            childProps.onPointerDown?.(event);
+            lastPointerType.current = event.pointerType;
+        },
+        onClick: (event) => {
+            childProps.onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            // Hover mode on a mouse: the pointer already opened it, a click keeps it open.
+            if (hoverMode && lastPointerType.current !== "touch")
+                ctx.setOpen(true);
+            else
+                ctx.setOpen(!ctx.open, { focus: "first" });
+        },
+        onKeyDown: (event) => {
+            childProps.onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            // A button turns Enter / Space into a click (handled above); other elements need it here.
+            const activates = (event.key === "Enter" || event.key === " ") && event.currentTarget.tagName !== "BUTTON";
+            if (event.key === "ArrowDown" || activates) {
+                event.preventDefault();
+                ctx.setOpen(true, { focus: "first" });
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                ctx.setOpen(true, { focus: "last" });
+            }
+        },
+        onPointerEnter: (event) => {
+            childProps.onPointerEnter?.(event);
+            if (hoverMode && event.pointerType !== "touch")
+                ctx.setOpen(true);
+        },
+        onPointerLeave: (event) => {
+            childProps.onPointerLeave?.(event);
+            if (hoverMode && event.pointerType !== "touch")
+                ctx.scheduleClose();
+        },
+    });
+}
+function Content({ minWidth, className, style, onKeyDown, children, ...props }) {
+    const ctx = useMenuContext("Content");
+    const { open, setOpen, contentRef, triggerRef } = ctx;
+    const { isTop, zIndex } = useOverlayStack(open);
+    const [triggerWidth, setTriggerWidth] = useState();
+    const typeahead = useRef({ text: "", timer: undefined });
+    const closeAndReturn = useCallback(() => setOpen(false, { returnFocus: true }), [setOpen]);
+    useEscapeKey(closeAndReturn, open && isTop);
+    // Position, then move the focus in as asked by the opening gesture.
+    useLayoutEffect(() => {
+        const trigger = triggerRef.current;
+        const content = contentRef.current;
+        if (!open || !trigger || !content)
+            return;
+        setTriggerWidth(trigger.offsetWidth);
+        focusItem(content, ctx.focusIntent.current);
+        return autoUpdate(trigger, content, () => {
+            void computePosition(trigger, content, {
+                strategy: "fixed",
+                placement: ctx.placement,
+                middleware: [offset(4), flip(), shift({ padding: 8 })],
+            }).then(({ x, y, placement }) => {
+                content.style.left = `${x}px`;
+                content.style.top = `${y}px`;
+                content.dataset.placement = placement;
+            });
+        });
+    }, [open, triggerRef, contentRef, ctx.focusIntent, ctx.placement]);
+    // Pressing outside the menu and its trigger closes it, leaving the focus where it goes.
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (!contentRef.current?.contains(target) && !triggerRef.current?.contains(target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => document.removeEventListener("pointerdown", onPointerDown, true);
+    }, [open, setOpen, contentRef, triggerRef]);
+    useEffect(() => () => clearTimeout(typeahead.current.timer), []);
+    if (!open)
+        return null;
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const items = menuItems(contentRef.current);
+        const index = items.indexOf(document.activeElement);
+        const move = (next) => {
+            event.preventDefault();
+            items[next]?.focus();
+        };
+        switch (event.key) {
+            case "ArrowDown":
+                return move(index === -1 ? 0 : (index + 1) % items.length);
+            case "ArrowUp":
+                return move(index <= 0 ? items.length - 1 : index - 1);
+            case "Home":
+                return move(0);
+            case "End":
+                return move(items.length - 1);
+            case "Tab":
+                event.preventDefault();
+                return closeAndReturn();
+            case "Enter":
+            case " ":
+                if (index !== -1) {
+                    event.preventDefault();
+                    items[index].click();
+                }
+                return;
+        }
+        // Typeahead: jump to the next item starting with the typed letters.
+        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        const state = typeahead.current;
+        clearTimeout(state.timer);
+        state.text += event.key.toLowerCase();
+        state.timer = setTimeout(() => (state.text = ""), TYPEAHEAD_RESET);
+        const ordered = [...items.slice(index + 1), ...items.slice(0, index + 1)];
+        const match = ordered.find(item => (item.dataset.textValue ?? item.textContent ?? "").trim().toLowerCase().startsWith(state.text));
+        match?.focus();
+    };
+    const hoverMode = ctx.trigger === "hover";
+    return createPortal(_jsx("div", { role: "menu", id: ctx.menuId, "aria-labelledby": triggerRef.current?.id, tabIndex: -1, ...props, ref: contentRef, className: className ? `rui-menu ${className}` : "rui-menu", style: {
+            zIndex,
+            minWidth: toLength(minWidth) ?? triggerWidth,
+            "--rui-menu-accent": resolveColor(ctx.color),
+            ...style,
+        }, onKeyDown: handleKeyDown, onPointerEnter: hoverMode ? ctx.cancelClose : undefined, onPointerLeave: hoverMode ? ctx.scheduleClose : undefined, children: children }), document.body);
+}
+/** Shared behaviour of every item: role, focus on hover, activation, closing. */
+function useItemProps(role, { disabled = false, closeOnSelect = true, textValue }, onActivate, checked) {
+    const ctx = useMenuContext("Item");
+    return {
+        role,
+        tabIndex: -1,
+        "aria-disabled": disabled || undefined,
+        "aria-checked": checked,
+        "data-text-value": textValue,
+        onPointerMove: (event) => {
+            if (!disabled && document.activeElement !== event.currentTarget)
+                event.currentTarget.focus();
+        },
+        onClick: (event) => {
+            if (disabled) {
+                event.preventDefault();
+                return;
+            }
+            onActivate(event);
+            if (closeOnSelect && !event.defaultPrevented)
+                ctx.setOpen(false, { returnFocus: true });
+        },
+    };
+}
+function Item({ disabled, closeOnSelect, textValue, onSelect, asChild, className, children, ...props }) {
+    const itemProps = useItemProps("menuitem", { disabled, closeOnSelect, textValue }, event => onSelect?.(event));
+    if (asChild && isValidElement(children)) {
+        const childProps = children.props;
+        return cloneElement(children, {
+            ...itemProps,
+            className: [childProps.className, "rui-menu-item", className].filter(Boolean).join(" "),
+            onClick: (event) => {
+                childProps.onClick?.(event);
+                itemProps.onClick(event);
+            },
+        });
+    }
+    return (_jsx("div", { ...props, ...itemProps, className: className ? `rui-menu-item ${className}` : "rui-menu-item", children: children }));
+}
+function CheckboxItem({ disabled, closeOnSelect, textValue, checked, onCheckedChange, className, children, ...props }) {
+    const itemProps = useItemProps("menuitemcheckbox", { disabled, closeOnSelect, textValue }, () => onCheckedChange(!checked), checked);
+    return (_jsxs("div", { ...props, ...itemProps, className: className ? `rui-menu-item ${className}` : "rui-menu-item", children: [_jsx("span", { className: "rui-menu-indicator", "aria-hidden": "true", children: checked ? "✓" : "" }), children] }));
+}
+const RadioGroupContext = createContext(null);
+function RadioGroup({ value, onValueChange, ...props }) {
+    return (_jsx(RadioGroupContext.Provider, { value: { value, onValueChange }, children: _jsx("div", { role: "group", ...props }) }));
+}
+function RadioItem({ value, disabled, closeOnSelect, textValue, className, children, ...props }) {
+    const group = useContext(RadioGroupContext);
+    if (!group)
+        throw new Error("DropdownMenu.RadioItem must be used within DropdownMenu.RadioGroup");
+    const checked = group.value === value;
+    const itemProps = useItemProps("menuitemradio", { disabled, closeOnSelect, textValue }, () => group.onValueChange(value), checked);
+    return (_jsxs("div", { ...props, ...itemProps, className: className ? `rui-menu-item ${className}` : "rui-menu-item", children: [_jsx("span", { className: "rui-menu-indicator", "aria-hidden": "true", children: checked ? "●" : "" }), children] }));
+}
+/** Group title, not focusable. */
+function Label({ className, ...props }) {
+    return _jsx("div", { role: "presentation", ...props, className: className ? `rui-menu-label ${className}` : "rui-menu-label" });
+}
+function Separator({ className, ...props }) {
+    return (_jsx("div", { role: "separator", ...props, className: className ? `rui-menu-separator ${className}` : "rui-menu-separator" }));
+}
+DropdownMenu.Trigger = Trigger;
+DropdownMenu.Content = Content;
+DropdownMenu.Item = Item;
+DropdownMenu.CheckboxItem = CheckboxItem;
+DropdownMenu.RadioGroup = RadioGroup;
+DropdownMenu.RadioItem = RadioItem;
+DropdownMenu.Label = Label;
+DropdownMenu.Separator = Separator;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAgBrD,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,QAGnC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,QAEpC;AAID,KAAK,UAAU,GAAG;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,MAAM,EACN,UAAoB,EACpB,SAAS,EACT,KAAK,EACL,YAAoB,EACpB,cAAc,EACd,eAAe,GAChB,EAAE,UAAU,sCAkMZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAkBrD,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,QAGnC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,QAEpC;AAED,KAAK,UAAU,GAAG;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,MAAM,EACN,UAAoB,EACpB,SAAS,EACT,KAAK,EACL,YAAoB,EACpB,cAAc,EACd,eAAe,GAChB,EAAE,UAAU,sCA+FZ"}

package/dist/components/Modal.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { useEscapeKey, useFocusTrap, useOverlayStack, useScrollLock } from "@-reddacted-/react-hooks";
+import { useStyle } from "../style/useStyle.js";
 const listeners = new Map();
 function on(event, cb) {
     if (!listeners.has(event))
@@ -18,11 +20,9 @@ export function openModal(id) {
 export function closeModal(id) {
     emit("modal:close", id);
 }
-const FOCUSABLE = `a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])`;
 export default function Modal({ id, open, onClose, width, height, children, title, footer, closeLabel = "Close", className, style, preventClose = false, ariaLabelledBy, ariaDescribedBy, }) {
     const [busOpen, setBusOpen] = useState(false);
     const contentRef = useRef(null);
-    const lastFocusedEl = useRef(null);
     const portalTarget = useRef(null);
     const controlled = open !== undefined;
     const isOpen = controlled ? open : busOpen;
@@ -36,10 +36,8 @@ export default function Modal({ id, open, onClose, width, height, children, titl
             return;
         const setIsOpen = setBusOpen;
         const offOpen = on("modal:open", (targetId) => {
-            if (targetId === id) {
-                lastFocusedEl.current = document.activeElement ?? null;
+            if (targetId === id)
                 setIsOpen(true);
-            }
         });
         const offClose = on("modal:close", (targetId) => {
             if (targetId === id)
@@ -61,135 +59,105 @@ export default function Modal({ id, open, onClose, width, height, children, titl
         }
         portalTarget.current = el;
     }, []);
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const prevOverflow = document.body.style.overflow;
-        const prevPadRight = document.body.style.paddingRight;
-        const scrollbarW = window.innerWidth - document.documentElement.clientWidth;
-        if (scrollbarW > 0)
-            document.body.style.paddingRight = `${scrollbarW}px`;
-        document.body.style.overflow = "hidden";
-        const to = setTimeout(() => {
-            const container = contentRef.current;
-            if (!container)
-                return;
-            const focusables = container.querySelectorAll(FOCUSABLE);
-            (focusables[0] ?? container).focus();
-        }, 0);
-        const onKeyDown = (e) => {
-            if (e.key === "Escape" && !preventClose) {
-                dismissRef.current();
-                return;
-            }
-            if (e.key !== "Tab")
-                return;
-            const container = contentRef.current;
-            if (!container)
-                return;
-            const focusables = Array.from(container.querySelectorAll(FOCUSABLE)).filter(el => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden"));
-            if (focusables.length === 0)
-                return;
-            const first = focusables[0];
-            const last = focusables[focusables.length - 1];
-            const active = document.activeElement;
-            if (e.shiftKey) {
-                if (active === first || !container.contains(active)) {
-                    last.focus();
-                    e.preventDefault();
-                }
-            }
-            else {
-                if (active === last || !container.contains(active)) {
-                    first.focus();
-                    e.preventDefault();
-                }
-            }
-        };
-        const onFocusIn = (e) => {
-            const container = contentRef.current;
-            if (!container)
-                return;
-            if (!container.contains(e.target))
-                container.focus();
-        };
-        document.addEventListener("keydown", onKeyDown);
-        document.addEventListener("focusin", onFocusIn);
-        return () => {
-            document.body.style.overflow = prevOverflow;
-            document.body.style.paddingRight = prevPadRight;
-            clearTimeout(to);
-            document.removeEventListener("keydown", onKeyDown);
-            document.removeEventListener("focusin", onFocusIn);
-            lastFocusedEl.current?.focus?.();
-            lastFocusedEl.current = null;
-        };
-    }, [isOpen, preventClose]);
+    useStyle("modal", modalCss);
+    const { isTop, zIndex } = useOverlayStack(isOpen);
+    useScrollLock(isOpen);
+    // Paused while a menu or drawer is open above: focus may leave the modal for it.
+    useFocusTrap(contentRef, isOpen, !isTop);
+    // Only the overlay on top of the stack closes on Escape.
+    const onEscape = useCallback(() => dismissRef.current(), []);
+    useEscapeKey(onEscape, isOpen && isTop && !preventClose);
     if (!isOpen || !portalTarget.current)
         return null;
-    const w = typeof width === "number" ? `${width}px` : (width ?? "min(540px, 95vw)");
-    const h = typeof height === "number" ? `${height}px` : height;
-    const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
-    const scrimStyle = {
-        position: "fixed",
-        inset: 0,
-        zIndex: 9999,
-        display: "grid",
-        placeItems: "center",
-        padding: "1rem",
-        backdropFilter: "brightness(0.45) blur(2px)",
-        WebkitBackdropFilter: "brightness(0.45) blur(2px)",
-        animation: prefersReducedMotion ? "none" : "modalFade 150ms ease-out",
-    };
     const cardStyle = {
-        width: w,
-        height: h,
-        maxWidth: "95vw",
-        maxHeight: "85vh",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-        outline: "none",
-        backgroundColor: "var(--color-surface)",
-        border: "1px solid var(--color-border)",
-        borderRadius: "12px",
-        animation: prefersReducedMotion ? "none" : "modalPop 160ms ease-out",
+        width: typeof width === "number" ? `${width}px` : (width ?? "min(540px, 95vw)"),
+        height: typeof height === "number" ? `${height}px` : height,
+        ...style,
     };
-    const keyframes = (_jsx("style", { children: `
-      @keyframes modalFade { from { opacity: 0 } to { opacity: 1 } }
-      @keyframes modalPop {
-        from { opacity: 0; transform: translateY(4px) scale(0.98) }
-        to { opacity: 1; transform: translateY(0) scale(1) }
-      }
-    ` }));
     const framed = title !== undefined || footer !== undefined;
-    return createPortal(_jsxs(_Fragment, { children: [keyframes, _jsx("div", { style: scrimStyle, onMouseDown: e => {
-                    if (!preventClose && e.target === e.currentTarget)
-                        dismissRef.current();
-                }, children: _jsxs("div", { ref: contentRef, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, tabIndex: -1, className: className, style: { ...cardStyle, ...style }, onMouseDown: e => e.stopPropagation(), children: [title !== undefined && (_jsxs("div", { style: headerStyle, children: [_jsx("span", { style: titleStyle, children: title }), _jsx("button", { type: "button", style: closeStyle, onClick: dismiss, "aria-label": closeLabel, children: "\u2715" })] })), _jsx("div", { style: framed ? bodyStyle : bareBodyStyle, children: children }), footer && _jsx("div", { style: footerStyle, children: footer })] }) })] }), portalTarget.current);
-}
-const headerStyle = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "1rem 1.25rem",
-    borderBottom: "1px solid var(--color-border)",
-};
-const titleStyle = { fontSize: "0.95rem", fontWeight: 600, color: "var(--color-text)" };
-const closeStyle = {
-    border: "none",
-    background: "none",
-    cursor: "pointer",
-    color: "var(--color-text-muted)",
-    fontSize: "0.95rem",
-    lineHeight: 1,
-};
-const bodyStyle = { padding: "1.25rem", overflowY: "auto", flex: 1 };
-const bareBodyStyle = { overflowY: "auto", flex: 1 };
-const footerStyle = {
-    display: "flex",
-    justifyContent: "flex-end",
-    gap: "0.75rem",
-    padding: "1rem 1.25rem",
-    borderTop: "1px solid var(--color-border)",
-};
+    return createPortal(_jsx("div", { className: "rui-modal-scrim", style: { zIndex }, onMouseDown: e => {
+            if (!preventClose && e.target === e.currentTarget)
+                dismissRef.current();
+        }, children: _jsxs("div", { ref: contentRef, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, tabIndex: -1, className: className ? `rui-modal ${className}` : "rui-modal", "data-framed": framed || undefined, style: cardStyle, onMouseDown: e => e.stopPropagation(), children: [title !== undefined && (_jsxs("div", { className: "rui-modal-header", children: [_jsx("span", { className: "rui-modal-title", children: title }), _jsx("button", { type: "button", className: "rui-modal-close", onClick: dismiss, "aria-label": closeLabel, children: "\u2715" })] })), _jsx("div", { className: "rui-modal-body", children: children }), footer && _jsx("div", { className: "rui-modal-footer", children: footer })] }) }), portalTarget.current);
+}
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const modalCss = `
+:where(.rui-modal-scrim) {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  -webkit-backdrop-filter: brightness(0.45) blur(2px);
+  backdrop-filter: brightness(0.45) blur(2px);
+  animation: rui-modal-fade 150ms ease-out;
+}
+:where(.rui-modal) {
+  max-width: 95vw;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  outline: none;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  animation: rui-modal-pop 160ms ease-out;
+}
+:where(.rui-modal-header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+:where(.rui-modal-title) {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+:where(.rui-modal-close) {
+  border: none;
+  border-radius: 4px;
+  background: none;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  font-size: 0.95rem;
+  line-height: 1;
+}
+:where(.rui-modal-close:hover) {
+  color: var(--color-text);
+}
+:where(.rui-modal-close:focus-visible) {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+:where(.rui-modal-body) {
+  flex: 1;
+  overflow-y: auto;
+}
+:where(.rui-modal[data-framed] > .rui-modal-body) {
+  padding: 1.25rem;
+}
+:where(.rui-modal-footer) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--color-border);
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-modal-scrim, .rui-modal) {
+    animation: none;
+  }
+}
+@keyframes rui-modal-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes rui-modal-pop {
+  from { opacity: 0; transform: translateY(4px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+`;

package/dist/components/NavBar.d.ts

@@ -1,20 +1,17 @@
-import type { ElementType, ReactNode } from "react";
-export type NavLink = {
-    label: string;
-    to: string;
-};
+import type { CSSProperties, ReactNode } from "react";
 type NavBarProps = {
-    brand: string;
-    links?: NavLink[];
-    /** Rendered on the right of the links: sign out, theme select, whatever the page adds. */
-    actions?: ReactNode;
     /**
-     * Link component to render with. Defaults to a plain anchor so the bar works
-     * without a router; pass a router Link to keep client-side navigation.
+     * Anything: logo, router links, buttons, selects. Direct `a` / `button` children get
+     * a default look; mark the current one with `aria-current="page"` (react-router's
+     * NavLink does it for you) or `aria-pressed="true"` to render it pressed.
      */
-    linkAs?: ElementType;
-    homeTo?: string;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
 };
-export declare function NavBar({ brand, links, actions, linkAs, homeTo }: NavBarProps): import("react").JSX.Element;
+export declare function NavBar({ children, className, style }: NavBarProps): import("react").JSX.Element;
+export declare namespace NavBar {
+    var Spacer: () => import("react").JSX.Element;
+}
 export {};
 //# sourceMappingURL=NavBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../src/components/NavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAElE,MAAM,MAAM,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,EAAE,CAAA;IACjB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,KAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAY,EAAE,EAAE,WAAW,+BAmBvF"}
+{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../src/components/NavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrD,KAAK,WAAW,GAAG;IACjB;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,+BAOjE;yBAPe,MAAM"}