@kennycorrea/ui 0.9.1 → 0.11.0

package/dist/atoms/StatTile/StatTile.d.ts

@@ -0,0 +1,36 @@
+import type { AnchorHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { type CardDensity, type CardVariant, type Responsive } from '../Card/index.js';
+export type StatTone = 'positive' | 'negative' | 'neutral';
+export type StatDirection = 'up' | 'down' | 'flat';
+export interface StatDelta {
+    /** The change as the reader should see it, already formatted: "+12%", "−€40". */
+    value: ReactNode;
+    /** Which way the number moved — picks the arrow. `flat` shows none. */
+    direction?: StatDirection;
+    /** Whether the move is good news. Independent of direction: fewer no-shows is down and positive. */
+    tone?: StatTone;
+    /** Spoken context for the change, e.g. "versus last month". Visually hidden. */
+    label?: string;
+}
+export interface StatTileProps {
+    label: ReactNode;
+    /** Already formatted; rendered with tabular numerals so a row of tiles lines up. */
+    value: ReactNode;
+    delta?: StatDelta;
+    /** A small chart, rendered under the value in a fixed-height slot. */
+    sparkline?: ReactNode;
+    /** Makes the tile a link, with a chevron. */
+    href?: string;
+    linkProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'children'>;
+    /** Makes the tile a button (or, with `href`, also fires on the link), with a chevron. */
+    onClick?: MouseEventHandler<HTMLElement>;
+    variant?: Responsive<CardVariant>;
+    density?: Responsive<CardDensity>;
+    className?: string;
+}
+/**
+ * A compact KPI tile: label, value, optional delta and sparkline. Built on `Card`, so `variant`
+ * and `density` mean what they mean there. With `href` or `onClick` the whole tile is the target
+ * and a chevron says so.
+ */
+export declare function StatTile({ label, value, delta, sparkline, href, linkProps, onClick, variant, density, className, }: StatTileProps): import("react").JSX.Element;

package/dist/atoms/StatTile/StatTile.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { cn } from '../../utils/cn.js';
+import { Card } from '../Card/index.js';
+const ARROWS = { up: ArrowUpIcon, down: ArrowDownIcon };
+/**
+ * A compact KPI tile: label, value, optional delta and sparkline. Built on `Card`, so `variant`
+ * and `density` mean what they mean there. With `href` or `onClick` the whole tile is the target
+ * and a chevron says so.
+ */
+export function StatTile({ label, value, delta, sparkline, href, linkProps, onClick, variant, density, className, }) {
+    const interactive = href !== undefined || onClick !== undefined;
+    const direction = delta?.direction ?? 'flat';
+    const Arrow = direction === 'flat' ? null : ARROWS[direction];
+    const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-stat-label", children: label }), _jsxs("span", { className: "ui-stat-row", children: [_jsx("span", { className: "ui-stat-value", children: value }), delta && (_jsxs("span", { className: "ui-stat-delta", "data-tone": delta.tone ?? 'neutral', children: [Arrow && _jsx(Arrow, { "aria-hidden": true }), delta.value, delta.label && _jsxs("span", { className: "sr-only", children: [" ", delta.label] })] }))] }), sparkline && (_jsx("span", { className: "ui-stat-spark", "aria-hidden": true, children: sparkline })), interactive && _jsx(ChevronRightIcon, { className: "ui-stat-chevron", "aria-hidden": true })] }));
+    return (_jsx(Card, { variant: variant, density: density, className: cn('ui-stat-card', className), children: href !== undefined ? (_jsx("a", { ...linkProps, href: href, className: "ui-stat", "data-interactive": true, onClick: onClick, children: body })) : onClick ? (_jsx("button", { type: "button", className: "ui-stat", "data-interactive": true, onClick: onClick, children: body })) : (_jsx("div", { className: "ui-stat", children: body })) }));
+}

package/dist/atoms/StatTile/index.d.ts

@@ -0,0 +1 @@
+export * from './StatTile.js';

package/dist/atoms/StatTile/index.js

@@ -0,0 +1 @@
+export * from './StatTile.js';

package/dist/atoms/TabBar/TabBar.d.ts

@@ -0,0 +1,42 @@
+import type { ReactElement, ReactNode } from 'react';
+export type TabBarBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** What a `render` function must spread onto the element it returns (a router link, say). */
+export interface TabBarItemRenderProps {
+    className: string;
+    'aria-current'?: 'page';
+    'aria-label'?: string;
+    'data-active': 'true' | 'false';
+    onClick: () => void;
+    children: ReactNode;
+}
+export interface TabBarItem {
+    value: string;
+    label: string;
+    icon: ReactNode;
+    /** Shown instead of `icon` while active (a filled glyph, usually). */
+    activeIcon?: ReactNode;
+    /** A number shows a count (99+ caps); `true` shows a dot. */
+    badge?: number | boolean;
+    /** Wrap a router link: spread the props onto the element you return. */
+    render?: (props: TabBarItemRenderProps) => ReactElement;
+}
+export interface TabBarProps {
+    items: TabBarItem[];
+    value: string;
+    onValueChange?: (value: string) => void;
+    /** Breakpoint (Radix Themes' scale) from which the bar is hidden. Default `md`. */
+    hideFrom?: TabBarBreakpoint;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A fixed bottom navigation bar for small screens. 3–5 items; the active one is in the brand
+ * colour and carries `aria-current="page"`. Height is `--tabbar-height` (49px + `--safe-bottom`);
+ * render a {@link TabBarSpacer} (or pad by that variable) so content is not covered.
+ * Press feedback is `:active`; nothing depends on hover.
+ */
+export declare function TabBar({ items, value, onValueChange, hideFrom, className, 'aria-label': ariaLabel, }: TabBarProps): import("react").JSX.Element;
+/** Reserves the bar's height in the flow, hidden at the same breakpoint as the bar. */
+export declare function TabBarSpacer({ hideFrom }: {
+    hideFrom?: TabBarBreakpoint;
+}): import("react").JSX.Element;

package/dist/atoms/TabBar/TabBar.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function badgeText(badge) {
+    if (badge === undefined || badge === false || badge === 0)
+        return null;
+    if (badge === true)
+        return '';
+    return badge > 99 ? '99+' : String(badge);
+}
+/**
+ * A fixed bottom navigation bar for small screens. 3–5 items; the active one is in the brand
+ * colour and carries `aria-current="page"`. Height is `--tabbar-height` (49px + `--safe-bottom`);
+ * render a {@link TabBarSpacer} (or pad by that variable) so content is not covered.
+ * Press feedback is `:active`; nothing depends on hover.
+ */
+export function TabBar({ items, value, onValueChange, hideFrom = 'md', className, 'aria-label': ariaLabel, }) {
+    return (_jsx("nav", { className: ['ui-tabbar', className].filter(Boolean).join(' '), "data-hide-from": hideFrom, "aria-label": ariaLabel, children: items.map((item) => {
+            const active = item.value === value;
+            const text = badgeText(item.badge);
+            const children = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "ui-tabbar__icon", "aria-hidden": "true", children: [active && item.activeIcon ? item.activeIcon : item.icon, text !== null && (_jsx("span", { className: "ui-tabbar__badge", "data-dot": text === '' ? 'true' : undefined, children: text }))] }), _jsx("span", { className: "ui-tabbar__label", children: item.label })] }));
+            const props = {
+                className: 'ui-tabbar__item',
+                'aria-current': active ? 'page' : undefined,
+                'aria-label': typeof item.badge === 'number' && item.badge > 0
+                    ? `${item.label}, ${item.badge}`
+                    : undefined,
+                'data-active': active ? 'true' : 'false',
+                onClick: () => onValueChange?.(item.value),
+                children,
+            };
+            return (_jsx("span", { className: "ui-tabbar__cell", children: item.render ? item.render(props) : _jsx("button", { type: "button", ...props }) }, item.value));
+        }) }));
+}
+/** Reserves the bar's height in the flow, hidden at the same breakpoint as the bar. */
+export function TabBarSpacer({ hideFrom = 'md' }) {
+    return _jsx("div", { className: "ui-tabbar-spacer", "data-hide-from": hideFrom, "aria-hidden": "true" });
+}

package/dist/atoms/TabBar/index.d.ts

@@ -0,0 +1 @@
+export * from './TabBar.js';

package/dist/atoms/TabBar/index.js

@@ -0,0 +1 @@
+export * from './TabBar.js';

package/dist/atoms/Textarea/Textarea.d.ts

@@ -1,5 +1,9 @@
 import { TextArea } from '@radix-ui/themes';
 import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * `inputMode` and `enterKeyHint` pass through to the `<textarea>`. On coarse pointers the text is
+ * never below 16px, or iOS zooms the page on focus.
+ */
 export interface TextareaProps extends Omit<ComponentPropsWithoutRef<typeof TextArea>, 'size' | 'color'> {
     invalid?: boolean;
 }

package/dist/atoms/Textarea/Textarea.js

@@ -3,5 +3,5 @@ import { TextArea } from '@radix-ui/themes';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
 export const Textarea = forwardRef(function Textarea({ invalid = false, className, rows = 3, ...props }, ref) {
-    return (_jsx(TextArea, { ref: ref, rows: rows, size: "2", color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('w-full', className), ...props }));
+    return (_jsx(TextArea, { ref: ref, rows: rows, size: "2", color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('ui-textarea w-full', className), ...props }));
 });

package/dist/atoms/Toast/Toast.d.ts

@@ -44,7 +44,13 @@ export declare const toast: typeof show & {
 export interface ToasterProps {
     /** Milliseconds a toast stays when it was not given its own `duration`. */
     duration?: number;
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    /**
+     * Distance from the anchored edge (top for `top-*`, bottom for `bottom-*`). A number is px; a
+     * string is any CSS length, so a toast can sit under a nav bar or above a tab bar:
+     * `offset="var(--navbar-height)"`, `offset="calc(var(--tabbar-height) + 8px)"`.
+     */
+    offset?: number | string;
     /** The landmark name screen readers announce, e.g. "Notificações ({hotkey})". */
     label?: string;
 }
@@ -55,5 +61,5 @@ export interface ToasterProps {
  * stack its live-region announcements, the F8 hotkey to reach it, pause-on-hover and swipe to
  * dismiss.
  */
-export declare function Toaster({ duration, position, label }: ToasterProps): import("react").JSX.Element;
+export declare function Toaster({ duration, position, offset, label, }: ToasterProps): import("react").JSX.Element;
 export {};

package/dist/atoms/Toast/Toast.js

@@ -68,6 +68,8 @@ const POSITIONS = {
     'top-left': 'top-0 left-0',
     'bottom-right': 'bottom-0 right-0 flex-col-reverse',
     'bottom-left': 'bottom-0 left-0 flex-col-reverse',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse',
 };
 /**
  * Renders the stack. Mount once, inside `<Theme>` so the toasts take the app's palette.
@@ -76,10 +78,21 @@ const POSITIONS = {
  * stack its live-region announcements, the F8 hotkey to reach it, pause-on-hover and swipe to
  * dismiss.
  */
-export function Toaster({ duration = 5000, position = 'bottom-right', label }) {
+export function Toaster({ duration = 5000, position = 'bottom-right', offset, label, }) {
     const items = useSyncExternalStore(subscribe, () => records, () => records);
     const strings = useUiStrings();
-    const swipeDirection = position.endsWith('left') ? 'left' : 'right';
+    // Centred stacks dismiss vertically, towards the edge they are anchored to: that is the way a
+    // thumb flicks a banner away, and sideways would fight the browser's back-swipe.
+    const swipeDirection = position.endsWith('center')
+        ? position.startsWith('top')
+            ? 'up'
+            : 'down'
+        : position.endsWith('left')
+            ? 'left'
+            : 'right';
+    const vertical = swipeDirection === 'up' || swipeDirection === 'down';
+    const edge = position.startsWith('top') ? 'top' : 'bottom';
+    const edgeOffset = typeof offset === 'number' ? `${offset}px` : offset;
     return (_jsxs(RadixToast.Provider, { duration: duration, swipeDirection: swipeDirection, label: label, children: [items.map((item) => {
                 const { color, icon } = TYPES[item.type];
                 return (_jsxs(RadixToast.Root, { open: item.open, duration: item.duration, type: item.type === 'error' ? 'foreground' : 'background', onOpenChange: (open) => {
@@ -88,10 +101,12 @@ export function Toaster({ duration = 5000, position = 'bottom-right', label }) {
                     }, onAnimationEnd: () => {
                         if (!item.open)
                             remove(item.id);
-                    }, "data-accent-color": color, className: "ui-toast panel pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden py-3 pr-3 pl-4", children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-1 bg-[var(--accent-9)]" }), _jsx(Icon, { name: icon, className: "mt-0.5 text-[var(--accent-11)]" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(RadixToast.Title, { className: "text-sm font-medium text-ink", children: item.title }), item.description ? (_jsx(RadixToast.Description, { className: "mt-0.5 text-sm text-ink-muted", children: item.description })) : null] }), item.action ? (_jsx(RadixToast.Action, { altText: item.action.label, onClick: (event) => {
+                    }, "data-accent-color": color, "data-swipe-axis": vertical ? 'y' : undefined, style: vertical
+                        ? { '--ui-toast-swipe-sign': swipeDirection === 'up' ? -1 : 1 }
+                        : undefined, className: "ui-toast panel pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden py-3 pr-3 pl-4", children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-1 bg-[var(--accent-9)]" }), _jsx(Icon, { name: icon, className: "mt-0.5 text-[var(--accent-11)]" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(RadixToast.Title, { className: "text-sm font-medium text-ink", children: item.title }), item.description ? (_jsx(RadixToast.Description, { className: "mt-0.5 text-sm text-ink-muted", children: item.description })) : null] }), item.action ? (_jsx(RadixToast.Action, { altText: item.action.label, onClick: (event) => {
                                 item.action?.onClick();
                                 if (item.action?.keepOpen)
                                     event.preventDefault();
                             }, className: cn('shrink-0 rounded-md px-2 py-1 text-sm font-medium', 'text-[var(--accent-11)] hover:bg-[var(--accent-a3)]'), children: item.action.label })) : null, _jsx(RadixToast.Close, { "aria-label": strings.dismiss, className: "shrink-0 rounded-md p-1 text-ink-muted hover:bg-[var(--gray-a3)]", children: _jsx(Icon, { name: "close", className: "size-4" }) })] }, item.id));
-            }), _jsx(RadixToast.Viewport, { ref: warnMissingScales, className: cn('fixed z-50 m-0 flex w-full max-w-sm list-none flex-col gap-2 p-4 outline-none', POSITIONS[position]) })] }));
+            }), _jsx(RadixToast.Viewport, { ref: warnMissingScales, style: edgeOffset === undefined ? undefined : { [edge]: edgeOffset }, className: cn('fixed z-50 m-0 flex w-full max-w-sm list-none flex-col gap-2 p-4 outline-none', POSITIONS[position]) })] }));
 }

package/dist/atoms/index.d.ts

@@ -1,24 +1,36 @@
+export * from './ActionSheet/index.js';
 export * from './Alert/index.js';
 export * from './Avatar/index.js';
 export * from './Badge/index.js';
 export * from './Button/index.js';
 export * from './Card/index.js';
 export * from './Checkbox/index.js';
+export * from './ChipGroup/index.js';
 export * from './ContextMenu/index.js';
 export * from './Dialog/index.js';
 export * from './Drawer/index.js';
 export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Label/index.js';
+export * from './List/index.js';
+export * from './NavBar/index.js';
+export * from './NotificationCard/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
+export * from './PullToRefresh/index.js';
+export * from './ResponsiveDialog/index.js';
 export * from './RichText/index.js';
+export * from './ScrollStrip/index.js';
+export * from './SegmentedControl/index.js';
 export * from './Select/index.js';
 export * from './Separator/index.js';
+export * from './Sheet/index.js';
 export * from './Skeleton/index.js';
 export * from './Slider/index.js';
 export * from './Spinner/index.js';
+export * from './StatTile/index.js';
 export * from './Switch/index.js';
+export * from './TabBar/index.js';
 export * from './Textarea/index.js';
 export * from './Toast/index.js';
 export * from './Tooltip/index.js';

package/dist/atoms/index.js

@@ -1,24 +1,36 @@
+export * from './ActionSheet/index.js';
 export * from './Alert/index.js';
 export * from './Avatar/index.js';
 export * from './Badge/index.js';
 export * from './Button/index.js';
 export * from './Card/index.js';
 export * from './Checkbox/index.js';
+export * from './ChipGroup/index.js';
 export * from './ContextMenu/index.js';
 export * from './Dialog/index.js';
 export * from './Drawer/index.js';
 export * from './Icon/index.js';
 export * from './Input/index.js';
 export * from './Label/index.js';
+export * from './List/index.js';
+export * from './NavBar/index.js';
+export * from './NotificationCard/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
+export * from './PullToRefresh/index.js';
+export * from './ResponsiveDialog/index.js';
 export * from './RichText/index.js';
+export * from './ScrollStrip/index.js';
+export * from './SegmentedControl/index.js';
 export * from './Select/index.js';
 export * from './Separator/index.js';
+export * from './Sheet/index.js';
 export * from './Skeleton/index.js';
 export * from './Slider/index.js';
 export * from './Spinner/index.js';
+export * from './StatTile/index.js';
 export * from './Switch/index.js';
+export * from './TabBar/index.js';
 export * from './Textarea/index.js';
 export * from './Toast/index.js';
 export * from './Tooltip/index.js';

package/dist/primitives/index.d.ts

@@ -6,4 +6,4 @@
  * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
  * and drifting from the version the atoms were built against.
  */
-export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

package/dist/primitives/index.js

@@ -6,4 +6,4 @@
  * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
  * and drifting from the version the atoms were built against.
  */
-export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

package/dist/strings.d.ts

@@ -28,12 +28,22 @@ export interface UiStrings {
     heading: string;
     bulletList: string;
     orderedList: string;
-    /** Drawer: the close button's accessible name. */
+    /** Drawer and NotificationCard: the close button's accessible name. */
     close: string;
-    /** Drawer: the handle's accessible name while collapsed. */
+    /** Drawer handle / NotificationCard toggle, while collapsed. */
     expand: string;
-    /** Drawer: the handle's accessible name while expanded. */
+    /** Drawer handle / NotificationCard toggle, while expanded. */
     collapse: string;
+    /** ListRow: the accessible name of the overflow button holding a row's actions. */
+    moreActions: string;
+    /** ActionSheet's separated button, and confirm()'s dismiss button. */
+    cancel: string;
+    /** confirm()'s default accept button. */
+    confirm: string;
+    /** BackButton's accessible name when it has no visible label. */
+    back: string;
+    /** PullToRefresh: announced while a refresh is in progress. */
+    refreshing: string;
 }
 /**
  * Feeds the atoms their strings, once, near the root.

package/dist/strings.js

@@ -14,6 +14,11 @@ const DEFAULTS = {
     close: 'Close',
     expand: 'Expand',
     collapse: 'Collapse',
+    moreActions: 'More actions',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    back: 'Back',
+    refreshing: 'Refreshing',
 };
 const StringsContext = createContext(DEFAULTS);
 /**

package/dist/utils/themePortal.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+/**
+ * Finds where a floating component may portal without leaving its theme.
+ *
+ * Radix Themes defines every colour variable on `.radix-themes` and flips light/dark with a
+ * class on that element, so a portal under `<body>` renders light whatever the app is in. The
+ * target is `container` when given, else the nearest `.radix-themes` above `anchorRef`, else
+ * nothing — meaning render in place.
+ */
+export declare function useThemePortalTarget(container?: HTMLElement | null): {
+    anchorRef: import("react").RefObject<HTMLSpanElement | null>;
+    target: HTMLElement | null;
+    resolved: boolean;
+};
+/** Portals into `target` wrapped in a nested `<Theme>` (which inherits appearance and accent), or renders in place. */
+export declare function ThemePortal({ target, children, }: {
+    target: HTMLElement | null;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/utils/themePortal.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Theme } from '@radix-ui/themes';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+/**
+ * Finds where a floating component may portal without leaving its theme.
+ *
+ * Radix Themes defines every colour variable on `.radix-themes` and flips light/dark with a
+ * class on that element, so a portal under `<body>` renders light whatever the app is in. The
+ * target is `container` when given, else the nearest `.radix-themes` above `anchorRef`, else
+ * nothing — meaning render in place.
+ */
+export function useThemePortalTarget(container) {
+    const anchorRef = useRef(null);
+    const [themeRoot, setThemeRoot] = useState(null);
+    const [resolved, setResolved] = useState(false);
+    useLayoutEffect(() => {
+        setThemeRoot(anchorRef.current?.closest('.radix-themes') ?? null);
+        setResolved(true);
+    }, []);
+    return { anchorRef, target: container ?? themeRoot, resolved: resolved || !!container };
+}
+/** Portals into `target` wrapped in a nested `<Theme>` (which inherits appearance and accent), or renders in place. */
+export function ThemePortal({ target, children, }) {
+    if (!target)
+        return _jsx(_Fragment, { children: children });
+    return createPortal(_jsx(Theme, { hasBackground: false, children: children }), target);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.9.1",
-  "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
+  "version": "0.11.0",
+  "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",
   "license": "UNLICENSED",
@@ -35,6 +35,8 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-dialog": "^1.3.1",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-slider": "^1.5.0",
     "@radix-ui/react-toast": "^1.2.23",