@datalayer/primer-addons 1.0.18 → 1.0.19

package/lib/components/appearance/AppearanceControls.d.ts

@@ -1,10 +1,11 @@
-import type { ReactElement } from 'react';
+import { type ReactElement } from 'react';
 import { type ColorMode, type ThemeVariant } from '../../theme';
 export interface AppearanceControlsProps {
     colorMode: ColorMode;
     themeVariant: ThemeVariant;
     onColorModeChange: (mode: ColorMode) => void;
     onThemeChange: (theme: ThemeVariant) => void;
+    showThemePreviews?: boolean;
 }
-export declare function AppearanceControls({ colorMode, themeVariant, onColorModeChange, onThemeChange, }: AppearanceControlsProps): ReactElement;
+export declare function AppearanceControls({ colorMode, themeVariant, onColorModeChange, onThemeChange, showThemePreviews, }: AppearanceControlsProps): ReactElement;
 export default AppearanceControls;

package/lib/components/appearance/AppearanceControls.js

@@ -1,13 +1,81 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState } from 'react';
 import { SegmentedControl, Tooltip } from '@primer/react';
 import { MoonIcon, SunIcon, DeviceDesktopIcon, } from '@primer/octicons-react';
 import { Box } from '../box/Box';
 import { themeVariants, themeConfigs, } from '../../theme';
-export function AppearanceControls({ colorMode, themeVariant, onColorModeChange, onThemeChange, }) {
+import { ThemePreviewCard } from './ThemePreviewCard';
+export function AppearanceControls({ colorMode, themeVariant, onColorModeChange, onThemeChange, showThemePreviews = false, }) {
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+    const selectedTheme = themeConfigs[themeVariant];
     return (_jsxs(_Fragment, { children: [_jsx(Box, { sx: { px: 2, py: 2, display: 'flex', justifyContent: 'center' }, children: _jsxs(SegmentedControl, { "aria-label": "Color mode", size: "small", onChange: (index) => {
                         const modes = ['light', 'dark', 'auto'];
                         onColorModeChange(modes[index]);
-                    }, children: [_jsx(SegmentedControl.IconButton, { selected: colorMode === 'light', icon: SunIcon, "aria-label": "Light" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'dark', icon: MoonIcon, "aria-label": "Dark" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'auto', icon: DeviceDesktopIcon, "aria-label": "Auto" })] }) }), _jsx(Box, { sx: {
+                    }, children: [_jsx(SegmentedControl.IconButton, { selected: colorMode === 'light', icon: SunIcon, "aria-label": "Light" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'dark', icon: MoonIcon, "aria-label": "Dark" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'auto', icon: DeviceDesktopIcon, "aria-label": "Auto" })] }) }), showThemePreviews ? (_jsxs(Box, { sx: {
+                    px: 2,
+                    pb: 2,
+                    display: 'grid',
+                    gap: 2,
+                }, children: [_jsx(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'center',
+                            gap: 2,
+                            flexWrap: 'wrap',
+                        }, children: themeVariants.map((variant) => {
+                            const cfg = themeConfigs[variant];
+                            const isSelected = themeVariant === variant;
+                            return (_jsx(Tooltip, { text: `${cfg.label} — ${cfg.description}`, direction: "s", children: _jsx(Box, { as: "button", "aria-label": cfg.label, "aria-pressed": isSelected, onClick: () => onThemeChange(variant), sx: {
+                                        width: 24,
+                                        height: 24,
+                                        borderRadius: '50%',
+                                        backgroundColor: cfg.brandColor,
+                                        border: '2px solid',
+                                        borderColor: isSelected ? 'accent.fg' : 'border.default',
+                                        cursor: 'pointer',
+                                        padding: 0,
+                                        outline: 'none',
+                                        transition: 'border-color 0.15s ease',
+                                        boxShadow: isSelected
+                                            ? '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))'
+                                            : 'none',
+                                        '&:hover': {
+                                            borderColor: 'accent.fg',
+                                        },
+                                        '&:focus-visible': {
+                                            boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
+                                        },
+                                    } }) }, variant));
+                        }) }), _jsxs(Box, { sx: {
+                            px: 1,
+                            display: 'grid',
+                            gap: 1,
+                        }, children: [_jsx(Box, { sx: { fontSize: 1, fontWeight: 'semibold', color: 'fg.default' }, children: selectedTheme.label }), _jsx(Box, { sx: { fontSize: 0, color: 'fg.muted', lineHeight: 1.5 }, children: selectedTheme.description }), _jsx(Box, { as: "button", type: "button", onClick: () => setIsPreviewOpen((open) => !open), "aria-expanded": isPreviewOpen, sx: {
+                                    mt: 1,
+                                    width: 'fit-content',
+                                    px: 2,
+                                    py: '4px',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    bg: 'canvas.default',
+                                    color: 'fg.default',
+                                    fontSize: 0,
+                                    fontWeight: 'semibold',
+                                    cursor: 'pointer',
+                                    '&:hover': {
+                                        borderColor: 'accent.fg',
+                                        color: 'accent.fg',
+                                    },
+                                    '&:focus-visible': {
+                                        outline: '2px solid',
+                                        outlineColor: 'accent.fg',
+                                        outlineOffset: 1,
+                                    },
+                                }, children: isPreviewOpen ? 'Hide preview' : 'Show preview' })] }), isPreviewOpen ? (_jsx(ThemePreviewCard, { variant: themeVariant, colorMode: colorMode, selected: true, compact: true, showDescription: true })) : null] })) : (_jsx(Box, { sx: {
                     px: 2,
                     pb: 2,
                     display: 'flex',
@@ -37,6 +105,6 @@ export function AppearanceControls({ colorMode, themeVariant, onColorModeChange,
                                     boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
                                 },
                             } }) }, variant));
-                }) })] }));
+                }) }))] }));
 }
 export default AppearanceControls;

package/lib/components/appearance/AppearanceMenu.d.ts

@@ -0,0 +1,30 @@
+import { type ReactElement } from 'react';
+import type { ColorMode, ThemeVariant } from '../../theme';
+export interface AppearanceMenuProps {
+    /** Current color mode. */
+    colorMode: ColorMode;
+    /** Current theme variant. */
+    themeVariant: ThemeVariant;
+    /** Called with the next color mode. */
+    onColorModeChange: (mode: ColorMode) => void;
+    /** Called with the next theme variant. */
+    onThemeChange: (theme: ThemeVariant) => void;
+    /** Diameter of the trigger circle in pixels. */
+    size?: number;
+    /** Visual shape of the trigger control. */
+    shape?: 'square' | 'circle';
+    /** Overlay placement relative to the circle. */
+    hoverOverlayPlacement?: 'bottom-start' | 'bottom-end';
+    /** Whether the overlay shows the live theme previews. */
+    showThemePreviews?: boolean;
+}
+/**
+ * A single color-mode circle that reveals, on hover, an appearance overlay
+ * with color-mode controls, theme circles and live theme previews.
+ *
+ * This bundles the {@link ColorModeCircle} trigger together with the
+ * {@link AppearanceControls} overlay so the whole appearance menu can be
+ * dropped into any header with a single component.
+ */
+export declare function AppearanceMenu({ colorMode, themeVariant, onColorModeChange, onThemeChange, size, shape, hoverOverlayPlacement, showThemePreviews, }: AppearanceMenuProps): ReactElement;
+export default AppearanceMenu;

package/lib/components/appearance/AppearanceMenu.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorModeCircle } from './ColorModeCircle';
+import { AppearanceControls } from './AppearanceControls';
+/**
+ * A single color-mode circle that reveals, on hover, an appearance overlay
+ * with color-mode controls, theme circles and live theme previews.
+ *
+ * This bundles the {@link ColorModeCircle} trigger together with the
+ * {@link AppearanceControls} overlay so the whole appearance menu can be
+ * dropped into any header with a single component.
+ */
+export function AppearanceMenu({ colorMode, themeVariant, onColorModeChange, onThemeChange, size = 26, shape = 'square', hoverOverlayPlacement = 'bottom-end', showThemePreviews = true, }) {
+    return (_jsx(ColorModeCircle, { colorMode: colorMode, onColorModeChange: onColorModeChange, cycleOnClick: false, themeVariant: themeVariant, hoverOverlayPlacement: hoverOverlayPlacement, shape: shape, size: size, hoverOverlay: _jsx(AppearanceControls, { colorMode: colorMode, themeVariant: themeVariant, onColorModeChange: onColorModeChange, onThemeChange: onThemeChange, showThemePreviews: showThemePreviews }) }));
+}
+export default AppearanceMenu;

package/lib/components/appearance/ColorModeCircle.d.ts

@@ -0,0 +1,28 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type ColorMode, type ThemeVariant } from '../../theme';
+type HoverOverlayPlacement = 'bottom-start' | 'bottom-end';
+type ColorModeCircleShape = 'square' | 'circle';
+export interface ColorModeCircleProps {
+    /** Current color mode. */
+    colorMode: ColorMode;
+    /** Called with the next color mode when the circle is clicked. */
+    onColorModeChange: (mode: ColorMode) => void;
+    /** Diameter of the circle in pixels. */
+    size?: number;
+    /** Optional overlay shown when hovering the circle. */
+    hoverOverlay?: ReactNode;
+    /** Keep legacy click-to-cycle behavior when an overlay is present. */
+    cycleOnClick?: boolean;
+    /** Overlay placement relative to the circle. */
+    hoverOverlayPlacement?: HoverOverlayPlacement;
+    /** Optional theme used to tint the circle border. */
+    themeVariant?: ThemeVariant;
+    /** Visual shape of the control. */
+    shape?: ColorModeCircleShape;
+}
+/**
+ * A single clickable circle that cycles the color mode through
+ * light → dark → system (auto). The icon reflects the current mode.
+ */
+export declare function ColorModeCircle({ colorMode, onColorModeChange, size, hoverOverlay, cycleOnClick, hoverOverlayPlacement, themeVariant, shape, }: ColorModeCircleProps): ReactElement;
+export default ColorModeCircle;

package/lib/components/appearance/ColorModeCircle.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { IconButton, Tooltip } from '@primer/react';
+import { MoonIcon, SunIcon, DeviceDesktopIcon } from '@primer/octicons-react';
+import { Box } from '../box/Box';
+import { themeConfigs } from '../../theme';
+/** Order in which a click cycles through the color modes. */
+const COLOR_MODE_CYCLE = {
+    light: 'dark',
+    dark: 'auto',
+    auto: 'light',
+};
+/** Display metadata (label + icon) for each color mode. */
+const COLOR_MODE_META = {
+    light: { label: 'Light', Icon: SunIcon },
+    dark: { label: 'Dark', Icon: MoonIcon },
+    auto: { label: 'System', Icon: DeviceDesktopIcon },
+};
+/** Small optical offsets so glyphs look visually centered in the circle. */
+const COLOR_MODE_ICON_Y_OFFSET = {
+    light: -0.75,
+    dark: 0,
+    auto: -0.5,
+};
+/**
+ * A single clickable circle that cycles the color mode through
+ * light → dark → system (auto). The icon reflects the current mode.
+ */
+export function ColorModeCircle({ colorMode, onColorModeChange, size = 28, hoverOverlay, cycleOnClick = true, hoverOverlayPlacement = 'bottom-end', themeVariant, shape = 'square', }) {
+    const meta = COLOR_MODE_META[colorMode] ?? COLOR_MODE_META.light;
+    const next = COLOR_MODE_CYCLE[colorMode] ?? 'light';
+    const nextMeta = COLOR_MODE_META[next];
+    const { Icon } = meta;
+    const iconYOffset = COLOR_MODE_ICON_Y_OFFSET[colorMode] ?? 0;
+    const [isHoverOpen, setIsHoverOpen] = useState(false);
+    const closeTimerRef = useRef(null);
+    const isBottomStart = hoverOverlayPlacement === 'bottom-start';
+    const themeConfig = themeVariant ? themeConfigs[themeVariant] : undefined;
+    const themeBorderColor = themeConfig?.brandColor;
+    const hasThemeColor = Boolean(themeBorderColor);
+    const resolvedMode = colorMode === 'auto'
+        ? (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light')
+        : colorMode;
+    const modeThemeStyles = themeConfig?.themeStyles?.[resolvedMode];
+    const themePrimaryButtonBg = modeThemeStyles?.['--button-primary-bgColor-rest'];
+    const themePrimaryButtonFg = modeThemeStyles?.['--button-primary-fgColor-rest'];
+    const themedIconColor = themePrimaryButtonFg || themeConfig?.brightPalette?.onGlow || 'fg.default';
+    const cancelScheduledClose = () => {
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    };
+    const openHoverOverlay = () => {
+        cancelScheduledClose();
+        setIsHoverOpen(true);
+    };
+    const scheduleCloseHoverOverlay = () => {
+        cancelScheduledClose();
+        closeTimerRef.current = setTimeout(() => {
+            setIsHoverOpen(false);
+            closeTimerRef.current = null;
+        }, 220);
+    };
+    useEffect(() => {
+        return () => cancelScheduledClose();
+    }, []);
+    const handleClick = () => {
+        if (!hoverOverlay || cycleOnClick) {
+            onColorModeChange(next);
+        }
+    };
+    const circle = (_jsx(IconButton, { "aria-label": `Color mode: ${meta.label}. Switch to ${nextMeta.label}.`, onClick: handleClick, icon: () => (_jsx(Box, { as: "span", sx: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transform: `translateY(${iconYOffset}px)`,
+                lineHeight: 0,
+            }, children: _jsx(Icon, { size: Math.round(size * 0.5) }) })), size: "small", variant: "invisible", sx: {
+            minWidth: size,
+            width: size,
+            height: size,
+            borderRadius: shape === 'circle' ? '50%' : 2,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            bg: hasThemeColor ? (themePrimaryButtonBg || themeBorderColor) : 'canvas.default',
+            color: hasThemeColor ? themedIconColor : 'fg.default',
+            border: '1px solid',
+            borderColor: themeBorderColor || 'border.default',
+            cursor: 'pointer',
+            padding: 0,
+            transition: 'border-color 0.15s ease, color 0.15s ease',
+            '&:hover': {
+                borderColor: hasThemeColor ? themeBorderColor : 'accent.fg',
+                color: hasThemeColor ? themedIconColor : 'accent.fg',
+                opacity: hasThemeColor ? 0.92 : 1,
+            },
+            '&:focus-visible': {
+                outline: '2px solid',
+                outlineColor: 'accent.fg',
+                outlineOffset: 1,
+            },
+        } }));
+    if (!hoverOverlay) {
+        return (_jsx(Tooltip, { text: `Color mode: ${meta.label} — click for ${nextMeta.label}`, direction: "s", children: circle }));
+    }
+    return (_jsxs(Box, { sx: { position: 'relative', display: 'inline-flex', alignItems: 'center' }, onMouseEnter: openHoverOverlay, onMouseLeave: scheduleCloseHoverOverlay, children: [circle, _jsx(Box, { sx: {
+                    position: 'absolute',
+                    top: `calc(100% + 8px)`,
+                    left: isBottomStart ? 0 : 'auto',
+                    right: isBottomStart ? 'auto' : 0,
+                    zIndex: 220,
+                    minWidth: 340,
+                    bg: 'canvas.overlay',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    boxShadow: 'shadow.large',
+                    opacity: isHoverOpen ? 1 : 0,
+                    transform: isHoverOpen ? 'translateY(0)' : 'translateY(-6px)',
+                    pointerEvents: isHoverOpen ? 'auto' : 'none',
+                    transition: 'opacity 0.16s ease, transform 0.16s ease',
+                }, children: hoverOverlay })] }));
+}
+export default ColorModeCircle;

package/lib/components/appearance/ThemeCircle.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface ThemeCircleProps {
+    /** Current theme variant. */
+    themeVariant: ThemeVariant;
+    /** Called with the next theme variant when the circle is clicked. */
+    onThemeChange: (theme: ThemeVariant) => void;
+    /**
+     * Ordered list of themes to cycle through. Defaults to every registered
+     * theme variant.
+     */
+    themes?: ThemeVariant[];
+    /** Diameter of the circle in pixels. */
+    size?: number;
+}
+/**
+ * A single clickable circle, filled with the current theme's brand color,
+ * that cycles to the next theme in `themes` on each click.
+ */
+export declare function ThemeCircle({ themeVariant, onThemeChange, themes, size, }: ThemeCircleProps): ReactElement;
+export default ThemeCircle;

package/lib/components/appearance/ThemeCircle.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@primer/react';
+import { Box } from '../box/Box';
+import { themeConfigs, themeVariants } from '../../theme';
+/**
+ * A single clickable circle, filled with the current theme's brand color,
+ * that cycles to the next theme in `themes` on each click.
+ */
+export function ThemeCircle({ themeVariant, onThemeChange, themes, size = 28, }) {
+    const list = themes && themes.length > 0 ? themes : themeVariants;
+    const currentIndex = Math.max(0, list.indexOf(themeVariant));
+    const cfg = themeConfigs[themeVariant] ?? themeConfigs[list[0]];
+    const next = list[(currentIndex + 1) % list.length];
+    const nextCfg = themeConfigs[next];
+    const innerDotSize = Math.max(8, Math.round(size * 0.58));
+    return (_jsx(Tooltip, { text: `Theme: ${cfg.label} — click for ${nextCfg.label}`, direction: "s", children: _jsx(Box, { as: "button", type: "button", "aria-label": `Theme: ${cfg.label}. Switch to ${nextCfg.label}.`, onClick: () => onThemeChange(next), sx: {
+                width: size,
+                height: size,
+                borderRadius: '50%',
+                boxSizing: 'border-box',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'canvas.default',
+                appearance: 'none',
+                WebkitAppearance: 'none',
+                border: '2px solid',
+                borderColor: 'border.default',
+                cursor: 'pointer',
+                padding: 0,
+                transition: 'border-color 0.15s ease, transform 0.15s ease',
+                '&:hover': { borderColor: 'accent.fg', transform: 'scale(1.05)' },
+                '&:active': { transform: 'scale(1.02)' },
+                '&:focus-visible': {
+                    outline: '2px solid',
+                    outlineColor: 'accent.fg',
+                    outlineOffset: 1,
+                },
+            }, children: _jsx(Box, { "aria-hidden": true, sx: {
+                    width: innerDotSize,
+                    height: innerDotSize,
+                    borderRadius: '50%',
+                    backgroundColor: cfg.brandColor,
+                } }) }) }));
+}
+export default ThemeCircle;

package/lib/components/appearance/ThemePreviewCard.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+import { type ColorMode, type ThemeVariant } from '../../theme';
+export interface ThemePreviewCardProps {
+    variant: ThemeVariant;
+    colorMode: ColorMode;
+    selected?: boolean;
+    onSelect?: (variant: ThemeVariant) => void;
+    compact?: boolean;
+    showDescription?: boolean;
+}
+export declare function ThemePreviewCard({ variant, colorMode, selected, onSelect, compact, showDescription, }: ThemePreviewCardProps): ReactElement;
+export default ThemePreviewCard;

package/lib/components/appearance/ThemePreviewCard.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleFillIcon } from '@primer/octicons-react';
+import { Box } from '../box/Box';
+import { matrixColors } from '../../theme/colors';
+import { DatalayerThemeProvider, themeConfigs, useSystemColorMode } from '../../theme';
+export function ThemePreviewCard({ variant, colorMode, selected = false, onSelect, compact = false, showDescription = true, }) {
+    const cfg = themeConfigs[variant];
+    const systemMode = useSystemColorMode();
+    const resolvedMode = colorMode === 'auto' ? systemMode : colorMode;
+    return (_jsxs(Box, { as: onSelect ? 'button' : 'div', onClick: onSelect ? () => onSelect(variant) : undefined, sx: {
+            position: 'relative',
+            width: '100%',
+            textAlign: 'left',
+            cursor: onSelect ? 'pointer' : 'default',
+            bg: 'canvas.default',
+            border: '2px solid',
+            borderColor: selected ? 'accent.fg' : 'border.default',
+            borderRadius: 2,
+            p: compact ? 2 : 4,
+            transition: 'border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease',
+            boxShadow: selected
+                ? '0 0 0 1px var(--fgColor-accent, var(--color-accent-fg))'
+                : 'none',
+            ':hover': onSelect
+                ? {
+                    borderColor: selected ? 'accent.fg' : 'border.muted',
+                    bg: 'canvas.default',
+                }
+                : undefined,
+            ':focus-visible': onSelect
+                ? {
+                    outline: '2px solid',
+                    outlineColor: 'accent.fg',
+                    outlineOffset: 2,
+                }
+                : undefined,
+        }, children: [selected ? (_jsx(Box, { sx: {
+                    position: 'absolute',
+                    top: 2,
+                    right: 2,
+                    color: 'accent.fg',
+                }, children: _jsx(CheckCircleFillIcon, { size: compact ? 16 : 20 }) })) : null, _jsx(DatalayerThemeProvider, { colorMode: resolvedMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { sx: {
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        overflow: 'hidden',
+                        mb: compact ? 2 : 3,
+                    }, children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 1,
+                                px: compact ? 1.5 : 2,
+                                py: compact ? '4px' : '6px',
+                                bg: 'canvas.default',
+                                borderBottom: '1px solid',
+                                borderColor: 'border.muted',
+                            }, children: [_jsx(Box, { sx: { width: 8, height: 8, borderRadius: '50%', bg: 'danger.emphasis' } }), _jsx(Box, { sx: { width: 8, height: 8, borderRadius: '50%', bg: 'attention.emphasis' } }), _jsx(Box, { sx: { width: 8, height: 8, borderRadius: '50%', bg: 'success.emphasis' } })] }), _jsxs(Box, { sx: { p: compact ? 2 : 3, bg: 'canvas.default' }, children: [_jsx(Box, { sx: { display: 'block', fontWeight: 'semibold', fontSize: compact ? 0 : 1, color: 'fg.default', mb: 1 }, children: "The quick brown fox" }), _jsx(Box, { sx: { display: 'block', fontSize: 0, color: 'fg.muted', mb: 2 }, children: "jumps over the lazy dog." }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: ([
+                                        { label: 'accent', bg: 'accent.emphasis' },
+                                        { label: 'success', bg: 'success.emphasis' },
+                                        { label: 'attention', bg: 'attention.emphasis' },
+                                        { label: 'danger', bg: 'danger.emphasis' },
+                                        { label: 'done', bg: 'done.emphasis' },
+                                        { label: 'severe', bg: 'severe.emphasis' },
+                                    ]).map(({ label, bg }) => (_jsx(Box, { sx: {
+                                            px: 2,
+                                            py: '2px',
+                                            borderRadius: '12px',
+                                            bg,
+                                            color: variant === 'matrix' &&
+                                                ((resolvedMode === 'dark' && label === 'accent') ||
+                                                    (resolvedMode === 'light' && label === 'attention'))
+                                                ? matrixColors.black
+                                                : 'fg.onEmphasis',
+                                            fontSize: 0,
+                                            lineHeight: '18px',
+                                        }, children: label }, label))) })] })] }) }), _jsx(Box, { sx: {
+                    display: 'block',
+                    fontWeight: 'semibold',
+                    fontSize: compact ? 1 : 2,
+                    mb: showDescription ? 1 : 0,
+                }, children: cfg.label }), showDescription ? (_jsx(Box, { sx: { color: 'fg.muted', fontSize: compact ? 0 : 1 }, children: cfg.description })) : null] }));
+}
+export default ThemePreviewCard;

package/lib/components/appearance/index.d.ts

@@ -1,2 +1,6 @@
 export * from './AppearanceControls';
 export * from './AppearanceControlsWithStore';
+export * from './AppearanceMenu';
+export * from './ColorModeCircle';
+export * from './ThemePreviewCard';
+export * from './ThemeCircle';

package/lib/components/appearance/index.js

@@ -4,3 +4,7 @@
  */
 export * from './AppearanceControls';
 export * from './AppearanceControlsWithStore';
+export * from './AppearanceMenu';
+export * from './ColorModeCircle';
+export * from './ThemePreviewCard';
+export * from './ThemeCircle';

package/lib/components/box/Box.d.ts

@@ -1,6 +1,7 @@
 import { ComponentProps } from 'react';
 import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
 import { type SxProp } from './sx';
-export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | keyof SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>> & SxProp & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | keyof SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>> & SxProp & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>>> & string;
+type StyledBoxProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
+export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBoxProps>> & string;
 export type BoxProps = ComponentProps<typeof Box>;
 export default Box;

package/lib/components/closeable-flash/CloseableFlash.js

@@ -2,8 +2,35 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, Flash, CircleOcticon, Text } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
+const closeButtonToneForVariant = (variant) => {
+    switch (variant) {
+        case 'success':
+            return { fg: 'success.fg', hoverBg: 'rgba(26, 127, 55, 0.14)' };
+        case 'warning':
+            return { fg: 'attention.fg', hoverBg: 'rgba(154, 103, 0, 0.16)' };
+        case 'danger':
+            return { fg: 'danger.fg', hoverBg: 'rgba(207, 34, 46, 0.14)' };
+        default:
+            return { fg: 'fg.default', hoverBg: 'rgba(31, 35, 40, 0.12)' };
+    }
+};
+const textColorForVariant = (variant) => {
+    switch (variant) {
+        case 'success':
+            return 'success.fg';
+        case 'warning':
+            return 'attention.fg';
+        case 'danger':
+            return 'danger.fg';
+        default:
+            return 'fg.default';
+    }
+};
 export const CloseableFlash = (props) => {
     const { leadingVisual, variant, onClose, ...otherProps } = props;
+    const resolvedVariant = variant ?? 'default';
+    const closeTone = closeButtonToneForVariant(resolvedVariant);
+    const flashVariant = resolvedVariant === 'default' ? undefined : resolvedVariant;
     const [isVisible, setIsVisible] = useState(true);
     const handleClose = () => {
         if (onClose) {
@@ -14,5 +41,35 @@ export const CloseableFlash = (props) => {
     if (!isVisible) {
         return null;
     }
-    return (_jsx(Flash, { variant: variant, ...otherProps, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { sx: { flexGrow: 1 }, children: [leadingVisual && _jsx(CircleOcticon, { icon: leadingVisual }), _jsx(Text, { color: `${variant === "default" ? "accent" : (variant === "warning" ? "attention" : variant)}.fg`, children: props.children })] }), _jsx(Box, { onClick: handleClose, sx: { cursor: "pointer" }, children: _jsx(XIcon, { size: 20 }) })] }) }));
+    return (_jsx(Flash, { variant: flashVariant, ...otherProps, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { sx: { flexGrow: 1 }, children: [leadingVisual && _jsx(CircleOcticon, { icon: leadingVisual }), _jsx(Text, { color: textColorForVariant(resolvedVariant), children: props.children })] }), _jsx(Box, { as: "button", type: "button", "aria-label": "Close", onClick: handleClose, sx: {
+                        flex: '0 0 auto',
+                        p: 0,
+                        m: 0,
+                        width: 28,
+                        height: 28,
+                        minWidth: 28,
+                        minHeight: 28,
+                        boxSizing: 'border-box',
+                        display: 'grid',
+                        placeItems: 'center',
+                        lineHeight: 0,
+                        border: 0,
+                        background: 'transparent',
+                        appearance: 'none',
+                        cursor: 'pointer',
+                        color: closeTone.fg,
+                        borderRadius: 2,
+                        '&:hover': {
+                            backgroundColor: closeTone.hoverBg,
+                        },
+                        '& > span': {
+                            width: 16,
+                            height: 16,
+                            display: 'grid',
+                            placeItems: 'center',
+                        },
+                        '& svg': {
+                            display: 'block',
+                        },
+                    }, children: _jsx(Box, { as: "span", "aria-hidden": true, children: _jsx(XIcon, { size: 16 }) }) })] }) }));
 };

package/lib/components/color/ColorSwatch.d.ts

@@ -0,0 +1,23 @@
+export interface ColorSwatchProps {
+    /**
+     * A CSS color value or `var()` expression to render, e.g.
+     * `"var(--fgColor-default)"` or `"#ff0000"`. The swatch resolves the
+     * computed color at runtime, so `var()` tokens reflect the active theme
+     * and color mode.
+     */
+    color: string;
+    /** Optional label shown under the swatch. Defaults to the `color` string. */
+    label?: string;
+    /** Show the resolved hex value below the label. Defaults to `true`. */
+    showValue?: boolean;
+    /** Height of the color block in pixels. Defaults to `54`. */
+    height?: number;
+}
+/**
+ * Theme-aware color swatch. Renders a block filled with `color`, then reads
+ * the resolved value via `getComputedStyle` and displays it as a hex string.
+ * The resolved value recomputes whenever the active theme or color mode
+ * changes, so swatches backed by CSS custom properties stay in sync.
+ */
+export declare function ColorSwatch({ color, label, showValue, height, }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;
+export default ColorSwatch;