@datalayer/primer-addons 1.0.21 → 1.0.22

package/README.md

@@ -25,6 +25,20 @@ This project has been [shared in a discussion](https://github.com/primer/react/d
 - [x] Slider
 - [x] Toolbar
 
+## Reactor Plugins
+
+Three plugins for hosts built on [`@datalayer/reactor`](https://github.com/datalayer/reactor), imported by path so a page without a reactor never pulls it in:
+
+```ts
+import { AppearancePlugin, PageLayoutPlugin, ThemePlugin } from '@datalayer/primer-addons/lib/reactor';
+```
+
+- `ThemePlugin` keeps Primer's portals in the application's color mode and toggles that mode by command (`Mod+Alt+C`).
+- `AppearancePlugin` puts the appearance menu — color mode, theme, the theme's description and a preview of it, the control the Datalayer header wears — in a slot, `header` by default, and brings `ThemePlugin` along as a dependency.
+- `PageLayoutPlugin` arranges a host's slots as a page: what plugins put in `page` lies on a centred sheet over a quiet canvas, `page-band` is docked above it at the sheet's width (or floats over it as a card), `page-chips` sit under the band, and `page-panel` is a side panel opened from a toggle in the header. The layout (`PageLayout`), its toggle and its signals (`pageLayoutPanelOpen`, `openPagePanel()`…) are exported too, for a host that wires the parts itself — the Loop of `@datalayer/agent-runtimes` does, with the notebook as the page and the conversation as the panel.
+
+The [gallery example](examples/gallery) is a Reactor app built on the three: `npm run gallery`.
+
 <div align="center" style="text-align: center">
   <img alt="Primer React Addons" src="https://assets.datalayer.tech/primer-addons-example.png" />
 </div>

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

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react';
+import type { StoreApi, UseBoundStore } from 'zustand';
+import { type ThemeState } from '../../theme/useThemeStore';
+import { type AppearanceMenuProps } from './AppearanceMenu';
+export interface AppearanceMenuWithStoreProps extends Omit<AppearanceMenuProps, 'colorMode' | 'themeVariant' | 'onColorModeChange' | 'onThemeChange'> {
+    /** The store the menu reads and writes; the shared one by default. */
+    useStore?: UseBoundStore<StoreApi<ThemeState>>;
+    /**
+     * Whether choosing a theme also switches to that theme's default color
+     * mode. Off by default: a person who chose dark keeps dark while they try
+     * another theme, which is how the public Datalayer header behaves.
+     */
+    applyThemeColorMode?: boolean;
+}
+/**
+ * The {@link AppearanceMenu} bound to a theme store, so a header mounts it
+ * with no props at all.
+ *
+ * The menu itself is controlled: a page with its own idea of where the theme
+ * lives hands it values and callbacks. Most pages have no such idea — the
+ * theme lives in the store — and this reads it from there and writes the
+ * choices back. The same shape as {@link AppearanceControlsWithStore}, for
+ * the whole menu: the trigger, the overlay, the description, the preview.
+ */
+export declare function AppearanceMenuWithStore({ useStore, applyThemeColorMode, ...menu }: AppearanceMenuWithStoreProps): ReactElement;
+export default AppearanceMenuWithStore;

package/lib/components/appearance/AppearanceMenuWithStore.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThemeStore } from '../../theme/useThemeStore';
+import { AppearanceMenu } from './AppearanceMenu';
+/**
+ * The {@link AppearanceMenu} bound to a theme store, so a header mounts it
+ * with no props at all.
+ *
+ * The menu itself is controlled: a page with its own idea of where the theme
+ * lives hands it values and callbacks. Most pages have no such idea — the
+ * theme lives in the store — and this reads it from there and writes the
+ * choices back. The same shape as {@link AppearanceControlsWithStore}, for
+ * the whole menu: the trigger, the overlay, the description, the preview.
+ */
+export function AppearanceMenuWithStore({ useStore = useThemeStore, applyThemeColorMode = false, ...menu }) {
+    const colorMode = useStore((state) => state.colorMode);
+    const themeVariant = useStore((state) => state.theme);
+    const setColorMode = useStore((state) => state.setColorMode);
+    const setTheme = useStore((state) => state.setTheme);
+    return (_jsx(AppearanceMenu, { colorMode: colorMode, themeVariant: themeVariant, onColorModeChange: setColorMode, onThemeChange: (theme) => setTheme(theme, applyThemeColorMode), ...menu }));
+}
+export default AppearanceMenuWithStore;

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

@@ -0,0 +1,65 @@
+import { type ThemeVariant } from "../../theme/themeRegistry";
+/**
+ * Which of the bright palette's colours a collaborator can be given, in the
+ * order they are handed out.
+ *
+ * Interleaved on purpose: green, red, blue, yellow, cyan, orange, lime, so
+ * the second person in a room is never a near-neighbour of the first.
+ * `onGlow` is not here — it is a text colour, not a hue.
+ */
+export declare const COLLABORATOR_SLOTS: readonly ["glow", "blaze", "surge", "gold", "pop", "flame", "spark"];
+/** How many colours a room can hand out before it repeats one. */
+export declare const COLLABORATOR_COLOR_COUNT: 7;
+/** The collaborator colours of one theme, in one colour mode. */
+export declare function collaboratorColors(variant?: ThemeVariant, colorMode?: "light" | "dark" | "auto"): string[];
+/**
+ * A number from a string, stable across machines and runs.
+ *
+ * djb2: small, and — unlike anything built on iteration order or `Math.random`
+ * — it gives every browser in the room the same answer for the same person,
+ * which is the whole point.
+ */
+export declare function collaboratorHash(seed: string): number;
+/**
+ * The colour this person holds: the same one, everywhere, every session.
+ *
+ * `seed` should be whatever identifies them to the room — a user id where
+ * there is one, their handle otherwise.
+ */
+export declare function collaboratorColor(seed: string, variant?: ThemeVariant, colorMode?: "light" | "dark" | "auto"): string;
+/**
+ * The palette as CSS custom properties.
+ *
+ * JupyterLab reads `--jp-collaborator-color1` through `7`; anything of ours
+ * can read `--dla-collaborator-color1` through `7`. Both names carry the same
+ * colours, so a JupyterLab surface and a Primer surface in the same page
+ * agree on who is who.
+ */
+export declare function collaboratorColorVars(variant?: ThemeVariant, colorMode?: "light" | "dark" | "auto"): Record<string, string>;
+/** The collaborator colours of whichever theme is on, following the store. */
+export declare function useCollaboratorColors(): string[];
+/** One person's colour, in whichever theme is on. */
+export declare function useCollaboratorColor(seed: string): string;
+export interface CollaboratorPaletteProps {
+    /**
+     * People to colour, in the order they joined. Named, the swatch is theirs
+     * and is picked by hash; unnamed, the palette is shown slot by slot.
+     */
+    people?: readonly string[];
+    /** The theme to read. The active one by default. */
+    variant?: ThemeVariant;
+    /** The mode to read. The active one by default. */
+    colorMode?: "light" | "dark" | "auto";
+    /** Show the hex value under each swatch. */
+    showValues?: boolean;
+    /** How tall each swatch stands, in pixels. */
+    height?: number;
+}
+/**
+ * The palette, drawn.
+ *
+ * A row of swatches — one per collaborator colour, or one per named person —
+ * for a settings page, a room's roster, or the gallery.
+ */
+export declare function CollaboratorPalette({ people, variant, colorMode, showValues, height, }: CollaboratorPaletteProps): import("react").JSX.Element;
+export default CollaboratorPalette;

package/lib/components/appearance/CollaboratorPalette.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Who is who, in colour.
+ *
+ * A shared document gives every person a colour: their cursor, their
+ * selection, the ring on their avatar. Those colours were fixed hex values
+ * in each application that needed them — JupyterLab's seven
+ * `--jp-collaborator-color*`, and a pair typed into an editor example — so a
+ * page in the Sand theme drew its collaborators in the same seven colours as
+ * a page in Matrix.
+ *
+ * They come from the active theme instead. Each theme already carries a
+ * **bright palette**: seven vivid, well-separated colours meant to sit on
+ * that theme's surfaces, in a light and a dark reading. Those are the
+ * collaborator colours, ordered here so that neighbouring people get
+ * different hue families rather than two greens.
+ *
+ * Two rules the colours have to keep, and this module keeps them:
+ *
+ * - **A person holds their colour.** {@link collaboratorColor} picks by a
+ *   stable hash of who they are, so a name always lands on the same slot for
+ *   everyone in the room, with no server handing numbers out.
+ * - **Nobody is invisible.** The bright palettes are vivid in both readings,
+ *   so a cursor stays visible on a light page and on a dark one.
+ *
+ * @module components/appearance/CollaboratorPalette
+ */
+import { useMemo } from "react";
+import { Box, Text } from "@primer/react";
+import { getBrightPalette, } from "../../theme/themeRegistry";
+import { useThemeStore } from "../../theme/useThemeStore";
+import { useSystemColorMode } from "../../theme/useSystemColorMode";
+/**
+ * Which of the bright palette's colours a collaborator can be given, in the
+ * order they are handed out.
+ *
+ * Interleaved on purpose: green, red, blue, yellow, cyan, orange, lime, so
+ * the second person in a room is never a near-neighbour of the first.
+ * `onGlow` is not here — it is a text colour, not a hue.
+ */
+export const COLLABORATOR_SLOTS = [
+    "glow",
+    "blaze",
+    "surge",
+    "gold",
+    "pop",
+    "flame",
+    "spark",
+];
+/** How many colours a room can hand out before it repeats one. */
+export const COLLABORATOR_COLOR_COUNT = COLLABORATOR_SLOTS.length;
+/** The collaborator colours of one theme, in one colour mode. */
+export function collaboratorColors(variant = "datalayer", colorMode = "dark") {
+    const bright = getBrightPalette(variant, colorMode);
+    return COLLABORATOR_SLOTS.map((slot) => bright[slot]);
+}
+/**
+ * A number from a string, stable across machines and runs.
+ *
+ * djb2: small, and — unlike anything built on iteration order or `Math.random`
+ * — it gives every browser in the room the same answer for the same person,
+ * which is the whole point.
+ */
+export function collaboratorHash(seed) {
+    let hash = 5381;
+    for (let index = 0; index < seed.length; index += 1) {
+        hash = ((hash << 5) + hash + seed.charCodeAt(index)) | 0;
+    }
+    return Math.abs(hash);
+}
+/**
+ * The colour this person holds: the same one, everywhere, every session.
+ *
+ * `seed` should be whatever identifies them to the room — a user id where
+ * there is one, their handle otherwise.
+ */
+export function collaboratorColor(seed, variant = "datalayer", colorMode = "dark") {
+    const colors = collaboratorColors(variant, colorMode);
+    return colors[collaboratorHash(seed) % colors.length];
+}
+/**
+ * The palette as CSS custom properties.
+ *
+ * JupyterLab reads `--jp-collaborator-color1` through `7`; anything of ours
+ * can read `--dla-collaborator-color1` through `7`. Both names carry the same
+ * colours, so a JupyterLab surface and a Primer surface in the same page
+ * agree on who is who.
+ */
+export function collaboratorColorVars(variant = "datalayer", colorMode = "dark") {
+    const colors = collaboratorColors(variant, colorMode);
+    const vars = {};
+    colors.forEach((color, index) => {
+        vars[`--jp-collaborator-color${index + 1}`] = color;
+        vars[`--dla-collaborator-color${index + 1}`] = color;
+    });
+    return vars;
+}
+/** The collaborator colours of whichever theme is on, following the store. */
+export function useCollaboratorColors() {
+    const { theme, colorMode } = useThemeStore();
+    const systemMode = useSystemColorMode();
+    const resolved = colorMode === "auto" ? systemMode : colorMode;
+    return useMemo(() => collaboratorColors(theme, resolved), [theme, resolved]);
+}
+/** One person's colour, in whichever theme is on. */
+export function useCollaboratorColor(seed) {
+    const colors = useCollaboratorColors();
+    return colors[collaboratorHash(seed) % colors.length];
+}
+/**
+ * The palette, drawn.
+ *
+ * A row of swatches — one per collaborator colour, or one per named person —
+ * for a settings page, a room's roster, or the gallery.
+ */
+export function CollaboratorPalette({ people, variant, colorMode, showValues = true, height = 44, }) {
+    const store = useThemeStore();
+    const systemMode = useSystemColorMode();
+    const activeMode = colorMode ?? store.colorMode;
+    const resolved = activeMode === "auto" ? systemMode : activeMode;
+    const colors = collaboratorColors(variant ?? store.theme, resolved);
+    const entries = people?.length
+        ? people.map((person) => ({
+            key: person,
+            label: person,
+            color: colors[collaboratorHash(person) % colors.length],
+        }))
+        : colors.map((color, index) => ({
+            key: `${index}`,
+            label: `Collaborator ${index + 1}`,
+            color,
+        }));
+    return (_jsx(Box, { role: "list", "aria-label": "Collaborator colours", sx: {
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(96px, 1fr))",
+            gap: 2,
+        }, children: entries.map((entry) => (_jsxs(Box, { role: "listitem", sx: {
+                display: "grid",
+                gap: 1,
+                border: "1px solid",
+                borderColor: "var(--borderColor-default)",
+                borderRadius: 2,
+                overflow: "hidden",
+            }, children: [_jsx(Box, { style: { backgroundColor: entry.color, height } }), _jsxs(Box, { sx: { px: 2, pb: 2, display: "grid", gap: 1 }, children: [_jsx(Text, { sx: {
+                                fontSize: 0,
+                                color: "var(--fgColor-default)",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                            }, title: entry.label, children: entry.label }), showValues ? (_jsx(Text, { sx: {
+                                fontSize: 0,
+                                fontFamily: "mono",
+                                color: "var(--fgColor-muted)",
+                            }, children: entry.color })) : null] })] }, entry.key))) }));
+}
+export default CollaboratorPalette;

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

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

package/lib/components/appearance/index.js

@@ -5,6 +5,8 @@
 export * from './AppearanceControls';
 export * from './AppearanceControlsWithStore';
 export * from './AppearanceMenu';
+export * from './AppearanceMenuWithStore';
+export * from './CollaboratorPalette';
 export * from './ColorModeCircle';
 export * from './ThemePreviewCard';
 export * from './ThemeCircle';

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

@@ -1,7 +1,19 @@
-import { ComponentProps } from 'react';
-import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
-import { type SxProp } from './sx';
-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;
+/**
+ * `Box`: Primer's, re-exported.
+ *
+ * This used to be a `styled.div` of our own, built on this package's own
+ * styled-components. That copy is v5 while `@primer/react` runs on v6, so
+ * wherever a bundler did not dedupe the two — webpack in the landing, Rsbuild
+ * in the decks app — our Box rendered under a runtime with no Primer theme:
+ * `sx` was never resolved and landed on the DOM as `sx="[object Object]"`,
+ * and a card that asked for `canvas.subtle` came out white on a dark page.
+ * agent-runtimes' Vite config carried a shim aliasing this module to Primer's
+ * Box for exactly that reason; making the module *be* that is the fix for
+ * every consumer at once. The system props (`p`, `bg`, `display`, …) and `sx`
+ * are the same API on Primer's Box.
+ */
+import type { ComponentProps } from 'react';
+import { Box } from '@primer/react';
+export { Box };
 export type BoxProps = ComponentProps<typeof Box>;
 export default Box;

package/lib/components/box/Box.js

@@ -1,10 +1,8 @@
 /*
- * Copyright (c) 2021-2024 Datalayer, Inc.
+ * Copyright (c) 2023-2026 Datalayer, Inc.
  *
  * Datalayer License
  */
-import styled from 'styled-components';
-import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from 'styled-system';
-import sx from './sx';
-export const Box = styled.div(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
+import { Box } from '@primer/react';
+export { Box };
 export default Box;

package/lib/components/calendar-picker/CalendarPicker.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Every cell of the grid the month is drawn on: the days before the first
+ * fall on the previous month, the days after the last on the next, so the
+ * weeks stay whole and nothing jumps when the month changes length.
+ */
+export declare function monthGrid(month: Date, weekStartsOn?: number): Date[];
+export interface CalendarPickerProps {
+    /** The day that reads as chosen. */
+    value?: Date | null;
+    /** The month on screen when the calendar has no value of its own. */
+    defaultMonth?: Date;
+    /** Told which day was picked. */
+    onChange?: (date: Date) => void;
+    /** Days before this one cannot be picked. */
+    min?: Date;
+    /** Days after this one cannot be picked. */
+    max?: Date;
+    /** Answers whether one more day is out of bounds, over `min` and `max`. */
+    isDisabled?: (date: Date) => boolean;
+    /**
+     * Which day a week opens on: `0` Sunday (the default), `1` Monday. The
+     * headings follow it, so a Monday week reads M T W T F S S.
+     */
+    weekStartsOn?: 0 | 1;
+    /** The locale the month name and the weekday initials are written in. */
+    locale?: string;
+    /** A label for the grid, for anyone reading it through a screen reader. */
+    "aria-label"?: string;
+}
+/**
+ * The month grid. Uncontrolled in the month it shows — arrows move it — and
+ * controlled in the day it marks, which is the caller's to hold.
+ */
+export declare function CalendarPicker({ value, defaultMonth, onChange, min, max, isDisabled, weekStartsOn, locale, "aria-label": ariaLabel, }: CalendarPickerProps): import("react").JSX.Element;
+export default CalendarPicker;

package/lib/components/calendar-picker/CalendarPicker.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A month of days, to pick one from.
+ *
+ * The grid on its own, with no input and no popover: a page that already has
+ * somewhere to show a month — a sidebar, a scheduling panel, a form — renders
+ * this directly, and {@link DatePicker} puts the same grid in an overlay
+ * behind a field.
+ *
+ * Every colour is a Primer custom property rather than a token read from the
+ * theme object, so the calendar follows whichever theme the page is wearing.
+ *
+ * @module components/calendar-picker/CalendarPicker
+ */
+import { useMemo, useState } from "react";
+import { Box, IconButton, Text } from "@primer/react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react";
+/** Sunday-first, as a month grid is conventionally drawn. */
+const WEEKDAY_ORDER = [0, 1, 2, 3, 4, 5, 6];
+/** Midnight, so two days compare by their date alone. */
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function sameDay(a, b) {
+    return (!!a &&
+        !!b &&
+        a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+/**
+ * Every cell of the grid the month is drawn on: the days before the first
+ * fall on the previous month, the days after the last on the next, so the
+ * weeks stay whole and nothing jumps when the month changes length.
+ */
+export function monthGrid(month, weekStartsOn = 0) {
+    const first = new Date(month.getFullYear(), month.getMonth(), 1);
+    const lead = (first.getDay() - weekStartsOn + 7) % 7;
+    const start = new Date(first);
+    start.setDate(first.getDate() - lead);
+    return Array.from({ length: 42 }, (_, index) => {
+        const day = new Date(start);
+        day.setDate(start.getDate() + index);
+        return day;
+    });
+}
+/**
+ * The month grid. Uncontrolled in the month it shows — arrows move it — and
+ * controlled in the day it marks, which is the caller's to hold.
+ */
+export function CalendarPicker({ value, defaultMonth, onChange, min, max, isDisabled, weekStartsOn = 0, locale, "aria-label": ariaLabel, }) {
+    const [month, setMonth] = useState(() => {
+        const anchor = value ?? defaultMonth ?? new Date();
+        return new Date(anchor.getFullYear(), anchor.getMonth(), 1);
+    });
+    const today = useMemo(() => startOfDay(new Date()), []);
+    const days = useMemo(() => monthGrid(month, weekStartsOn), [month, weekStartsOn]);
+    const monthName = useMemo(() => new Intl.DateTimeFormat(locale, {
+        month: "long",
+        year: "numeric",
+    }).format(month), [locale, month]);
+    const weekdayNames = useMemo(() => {
+        const format = new Intl.DateTimeFormat(locale, { weekday: "short" });
+        // Any week will do for the names; 2024-01-07 was a Sunday.
+        return WEEKDAY_ORDER.map((offset) => {
+            const day = new Date(2024, 0, 7 + ((offset + weekStartsOn) % 7));
+            return format.format(day);
+        });
+    }, [locale, weekStartsOn]);
+    const dayLabel = useMemo(() => new Intl.DateTimeFormat(locale, {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+    }), [locale]);
+    const blocked = (day) => {
+        if (min && startOfDay(day) < startOfDay(min)) {
+            return true;
+        }
+        if (max && startOfDay(day) > startOfDay(max)) {
+            return true;
+        }
+        return isDisabled?.(day) ?? false;
+    };
+    const step = (by) => setMonth(new Date(month.getFullYear(), month.getMonth() + by, 1));
+    return (_jsxs(Box, { role: "group", "aria-label": ariaLabel ?? "Choose a date", sx: { display: "grid", gap: 2, minWidth: 252 }, children: [_jsxs(Box, { sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: 2,
+                }, children: [_jsx(IconButton, { icon: ChevronLeftIcon, "aria-label": "Previous month", variant: "invisible", size: "small", onClick: () => step(-1) }), _jsx(Text, { "aria-live": "polite", sx: {
+                            fontSize: 1,
+                            fontWeight: "semibold",
+                            color: "var(--fgColor-default)",
+                        }, children: monthName }), _jsx(IconButton, { icon: ChevronRightIcon, "aria-label": "Next month", variant: "invisible", size: "small", onClick: () => step(1) })] }), _jsxs(Box, { sx: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(7, 1fr)",
+                    gap: 1,
+                }, children: [weekdayNames.map((name) => (_jsx(Text, { "aria-hidden": "true", sx: {
+                            fontSize: 0,
+                            textAlign: "center",
+                            color: "var(--fgColor-muted)",
+                        }, children: name.slice(0, 2) }, name))), days.map((day) => {
+                        const outside = day.getMonth() !== month.getMonth();
+                        const selected = sameDay(day, value ?? null);
+                        const isToday = sameDay(day, today);
+                        const disabled = blocked(day);
+                        return (_jsx(Box, { as: "button", type: "button", "aria-label": dayLabel.format(day), "aria-pressed": selected, "aria-current": isToday ? "date" : undefined, disabled: disabled, onClick: () => !disabled && onChange?.(startOfDay(day)), sx: {
+                                appearance: "none",
+                                border: "1px solid",
+                                borderColor: selected
+                                    ? "var(--borderColor-accent-emphasis)"
+                                    : isToday
+                                        ? "var(--borderColor-default)"
+                                        : "transparent",
+                                borderRadius: 2,
+                                height: 30,
+                                cursor: disabled ? "not-allowed" : "pointer",
+                                fontSize: 1,
+                                lineHeight: 1,
+                                bg: selected
+                                    ? "var(--bgColor-accent-emphasis)"
+                                    : "transparent",
+                                color: selected
+                                    ? "var(--fgColor-onEmphasis)"
+                                    : outside || disabled
+                                        ? "var(--fgColor-muted)"
+                                        : "var(--fgColor-default)",
+                                opacity: disabled ? 0.5 : outside ? 0.6 : 1,
+                                "&:hover:not(:disabled)": {
+                                    bg: selected
+                                        ? "var(--bgColor-accent-emphasis)"
+                                        : "var(--bgColor-muted)",
+                                },
+                                "&:focus-visible": {
+                                    outline: "2px solid var(--borderColor-accent-emphasis)",
+                                    outlineOffset: "-1px",
+                                },
+                            }, children: day.getDate() }, day.toISOString()));
+                    })] })] }));
+}
+export default CalendarPicker;

package/lib/components/calendar-picker/index.d.ts

@@ -0,0 +1 @@
+export * from "./CalendarPicker";

package/lib/components/calendar-picker/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from "./CalendarPicker";

package/lib/components/card/Card.d.ts

@@ -6,7 +6,12 @@ export type CardProps = Omit<BoxProps, 'border'> & {
     shadow?: 'small' | 'medium' | 'large' | 'extraLarge';
 };
 export type CardHeaderProps = {
-    title?: string;
+    /**
+     * The card's title. A node rather than a string, so a header can carry an
+     * avatar, a label or a link beside its text — a card title is a place
+     * callers reasonably want to compose.
+     */
+    title?: React.ReactNode;
     description?: string;
     leadingVisual?: React.ElementType;
     action?: React.ReactNode;

package/lib/components/card/Card.js

@@ -35,7 +35,7 @@ export const Card = (props) => {
 };
 Card.Header = (props) => {
     const { title, description, leadingVisual, action } = props;
-    return _jsxs(Box, { display: "flex", alignItems: "center", sx: { p: 3 }, children: [leadingVisual && _jsx(Box, { sx: { mr: 3 }, children: _jsx(IconButton, { size: "medium", icon: leadingVisual, "aria-label": "" }) }), _jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(Text, { display: "block", children: title }), _jsx(Text, { display: "block", color: "fg.muted", children: description })] }), action && _jsx(Box, { children: action })] });
+    return _jsxs(Box, { display: "flex", alignItems: "center", sx: { p: 3 }, children: [leadingVisual && _jsx(Box, { sx: { mr: 3 }, children: _jsx(IconButton, { size: "medium", icon: leadingVisual, "aria-label": "" }) }), _jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(Text, { as: "div", display: "block", children: title }), _jsx(Text, { display: "block", color: "fg.muted", children: description })] }), action && _jsx(Box, { children: action })] });
 };
 Card.Image = ({ url, image, svg, height }) => {
     return (_jsxs(Box, { display: "block", width: "100%", height: `${height}px`, backgroundImage: `url(${url})`, sx: {

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

@@ -19,5 +19,5 @@ export interface ColorSwatchProps {
  * 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 declare function ColorSwatch({ color, label, showValue, height, }: ColorSwatchProps): import("react").JSX.Element;
 export default ColorSwatch;