@kennycorrea/ui 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.9.1 — 2026-10-18
+
+### Fixed
+- **`Drawer` renders inside the nearest `<Theme>`** (`.radix-themes`) instead of under
+  `<body>`. Outside a Theme none of the house tokens or the accent are defined, so in 0.9.0 the
+  sheet lost the app's appearance — a dark app got a light sheet. Falls back to `<body>` when
+  there is no Theme; `container` still overrides it.
+- In `modal` mode, everything outside the sheet goes `inert` at every level up to `<body>`, not
+  only the sheet's siblings, now that the sheet sits inside the Theme rather than beside it.
+
 ## 0.9.0 — 2026-10-18
 
 ### Added

package/README.md

@@ -343,5 +343,8 @@ above that (`maxWidthClassName` to change it), safe-area aware, themed from the
   `UiStringsProvider`.
 - Motion is a CSS transform, switched off under `prefers-reduced-motion`.
 
+It portals into the nearest `<Theme>` so it inherits the appearance and accent, falling back to
+`<body>`; `container` overrides that.
+
 Built by hand rather than on Radix Dialog because the non-modal half must not do what Dialog
 does to the rest of the page. Both examples are in `examples/Drawers.tsx`.

package/dist/atoms/Drawer/Drawer.d.ts

@@ -43,7 +43,7 @@ export interface DrawerProps {
     /** Caps the width on wider screens. Default `max-w-lg`; pass `max-w-none` for full width. */
     maxWidthClassName?: string;
     className?: string;
-    /** Where the portal mounts. Default `document.body`. */
+    /** Where the portal mounts. Default: the nearest `<Theme>` (`.radix-themes`), else `document.body`. */
     container?: HTMLElement | null;
 }
 /**
@@ -59,4 +59,4 @@ export interface DrawerProps {
  * from inside the body only counts when the body is scrolled to its top and moving down, so the
  * content still scrolls normally.
  */
-export declare function Drawer({ mode, open: openProp, defaultOpen, onOpenChange, onClose, snap: snapProp, defaultSnap, onSnapChange, dismissible, title, description, peek, children, footer, showCloseButton, closeLabel, expandLabel, collapseLabel, maxWidthClassName, className, container, }: DrawerProps): import("react").ReactPortal | null;
+export declare function Drawer({ mode, open: openProp, defaultOpen, onOpenChange, onClose, snap: snapProp, defaultSnap, onSnapChange, dismissible, title, description, peek, children, footer, showCloseButton, closeLabel, expandLabel, collapseLabel, maxWidthClassName, className, container, }: DrawerProps): import("react").JSX.Element;

package/dist/atoms/Drawer/Drawer.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState, } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import { useUiStrings } from '../../strings.js';
 import { cn } from '../../utils/cn.js';
@@ -53,21 +53,32 @@ export function Drawer({ mode = 'modal', open: openProp, defaultOpen = true, onO
         setOpen(false);
         onClose?.();
     }, [setOpen, onClose]);
+    // Portal into the nearest <Theme> so the sheet inherits its appearance, accent and tokens;
+    // a portal under <body> would sit outside `.radix-themes`, where none of them are defined.
+    const anchorRef = useRef(null);
+    const [themeRoot, setThemeRoot] = useState(null);
+    useLayoutEffect(() => {
+        setThemeRoot(anchorRef.current?.closest('.radix-themes') ?? document.body);
+    }, []);
+    const target = container ?? themeRoot;
     // Modal: everything else on the page goes inert, focus moves in, and comes back on close.
     useEffect(() => {
-        if (!open || !modal)
+        // The wrapper only exists once the target is known, so wait for it.
+        if (!open || !modal || !target)
             return;
         const wrapper = wrapperRef.current;
-        const root = wrapper?.parentElement;
         const previous = document.activeElement;
         const made = [];
-        if (root) {
-            for (const el of Array.from(root.children)) {
-                if (el !== wrapper && !el.hasAttribute('inert')) {
+        // Every sibling on the way up to <body>: the app inside the Theme, and anything beside it.
+        for (let node = wrapper ?? null; node && node !== document.body;) {
+            const parent = node.parentElement;
+            for (const el of Array.from(parent?.children ?? [])) {
+                if (el !== node && !el.hasAttribute('inert')) {
                     el.setAttribute('inert', '');
                     made.push(el);
                 }
             }
+            node = parent;
         }
         const first = sheetRef.current?.querySelector(FOCUSABLE);
         (first ?? sheetRef.current)?.focus();
@@ -76,7 +87,7 @@ export function Drawer({ mode = 'modal', open: openProp, defaultOpen = true, onO
                 el.removeAttribute('inert');
             previous?.focus?.();
         };
-    }, [open, modal]);
+    }, [open, modal, target]);
     useEffect(() => {
         if (!open || !modal || !dismissible)
             return;
@@ -176,15 +187,15 @@ export function Drawer({ mode = 'modal', open: openProp, defaultOpen = true, onO
         }
         setSnap(expanded ? 'collapsed' : 'expanded');
     };
-    if (!open)
-        return null;
-    const target = container ?? (typeof document === 'undefined' ? null : document.body);
-    if (!target)
-        return null;
+    // A hidden marker stays in the React tree's DOM position, so the portal can find its Theme.
+    const anchor = _jsx("span", { ref: anchorRef, hidden: true, "data-drawer-anchor": "" });
+    if (!open || !target)
+        return anchor;
     const dragHandlers = {
         onPointerMove: move,
         onPointerUp: end,
         onPointerCancel: cancel,
     };
-    return createPortal(_jsxs("div", { ref: wrapperRef, "data-drawer-root": "", children: [modal ? (_jsx("div", { "data-testid": "drawer-scrim", "aria-hidden": "true", className: "fixed inset-0 z-40 bg-scrim", onClick: dismissible ? close : undefined })) : null, _jsxs("div", { ref: sheetRef, role: modal ? 'dialog' : 'region', "aria-modal": modal ? true : undefined, "aria-labelledby": titleId, "aria-describedby": description ? descId : undefined, tabIndex: -1, "data-snap": snap, "data-mode": mode, onKeyDown: trapTab, style: { transform: `translateY(${Math.max(offset, -40)}px)` }, className: cn('fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full flex-col', 'rounded-t-2xl border border-b-0 border-hairline bg-sheet text-ink shadow-2xl', 'pb-[env(safe-area-inset-bottom)] outline-none', !dragging && 'transition-transform duration-200 ease-out motion-reduce:transition-none', maxWidthClassName, className), children: [_jsxs("div", { className: "touch-none select-none px-5 pt-2", onPointerDown: (e) => begin(e, false), ...dragHandlers, children: [_jsx("button", { type: "button", "aria-expanded": expanded, "aria-controls": bodyId, "aria-label": expanded ? (collapseLabel ?? strings.collapse) : (expandLabel ?? strings.expand), onClick: onHandleClick, className: "mx-auto flex h-6 w-16 cursor-grab items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-brand-700 active:cursor-grabbing", children: _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-10 rounded-full bg-hairline" }) }), _jsxs("div", { className: "flex items-start gap-3 pb-3 pt-1", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "m-0 text-base font-medium text-brand-900", children: title }), description ? (_jsx("p", { id: descId, className: "m-0 mt-1 text-sm text-ink-muted", children: description })) : null] }), showCloseButton && dismissible ? (_jsx("button", { type: "button", "aria-label": closeLabel ?? strings.close, onClick: close, className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-full text-ink-muted hover:bg-brand-700/8 focus-visible:outline-2 focus-visible:outline-brand-700", children: _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3.5 3.5l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })) : null] })] }), !expanded && peek ? _jsx("div", { className: "px-5 pb-4", children: peek }) : null, _jsx("div", { ref: bodyRef, id: bodyId, hidden: !expanded, className: "max-h-[80vh] overflow-y-auto overscroll-contain px-5 pb-4", onPointerDown: (e) => begin(e, true), ...dragHandlers, children: children }), footer ? (_jsx("div", { className: "flex justify-end gap-2 border-t border-hairline px-5 py-3", children: footer })) : null] })] }), target);
+    return (_jsxs(_Fragment, { children: [anchor, createPortal(_jsxs("div", { ref: wrapperRef, "data-drawer-root": "", children: [modal ? (_jsx("div", { "data-testid": "drawer-scrim", "aria-hidden": "true", className: "fixed inset-0 z-40 bg-scrim", onClick: dismissible ? close : undefined })) : null, _jsxs("div", { ref: sheetRef, role: modal ? 'dialog' : 'region', "aria-modal": modal ? true : undefined, "aria-labelledby": titleId, "aria-describedby": description ? descId : undefined, tabIndex: -1, "data-snap": snap, "data-mode": mode, onKeyDown: trapTab, style: { transform: `translateY(${Math.max(offset, -40)}px)` }, className: cn('fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full flex-col', 'rounded-t-2xl border border-b-0 border-hairline bg-sheet text-ink shadow-2xl', 'pb-[env(safe-area-inset-bottom)] outline-none', !dragging &&
+                            'transition-transform duration-200 ease-out motion-reduce:transition-none', maxWidthClassName, className), children: [_jsxs("div", { className: "touch-none select-none px-5 pt-2", onPointerDown: (e) => begin(e, false), ...dragHandlers, children: [_jsx("button", { type: "button", "aria-expanded": expanded, "aria-controls": bodyId, "aria-label": expanded ? (collapseLabel ?? strings.collapse) : (expandLabel ?? strings.expand), onClick: onHandleClick, className: "mx-auto flex h-6 w-16 cursor-grab items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-brand-700 active:cursor-grabbing", children: _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-10 rounded-full bg-hairline" }) }), _jsxs("div", { className: "flex items-start gap-3 pb-3 pt-1", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "m-0 text-base font-medium text-brand-900", children: title }), description ? (_jsx("p", { id: descId, className: "m-0 mt-1 text-sm text-ink-muted", children: description })) : null] }), showCloseButton && dismissible ? (_jsx("button", { type: "button", "aria-label": closeLabel ?? strings.close, onClick: close, className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-full text-ink-muted hover:bg-brand-700/8 focus-visible:outline-2 focus-visible:outline-brand-700", children: _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3.5 3.5l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })) : null] })] }), !expanded && peek ? _jsx("div", { className: "px-5 pb-4", children: peek }) : null, _jsx("div", { ref: bodyRef, id: bodyId, hidden: !expanded, className: "max-h-[80vh] overflow-y-auto overscroll-contain px-5 pb-4", onPointerDown: (e) => begin(e, true), ...dragHandlers, children: children }), footer ? (_jsx("div", { className: "flex justify-end gap-2 border-t border-hairline px-5 py-3", children: footer })) : null] })] }), target)] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
   "private": false,
   "type": "module",