@datalayer/primer-addons 1.0.20 → 1.0.22

package/lib/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,97 @@
+/**
+ * A colour, picked.
+ *
+ * A saturation-and-brightness field, a hue rail under it, a hex field and a
+ * row of presets — the shape a colour picker has had since Photoshop, drawn
+ * with Primer's form controls and Primer's custom properties so it sits in a
+ * Primer page without a stylesheet of its own.
+ *
+ * The chrome follows the theme (`--borderColor-default`, `--bgColor-muted`).
+ * The colour surfaces do not: a hue rail is the hue rail in every theme, and
+ * tinting it would lie about the colour being picked.
+ *
+ * Pointer events throughout, so a drag works the same with a mouse, a finger
+ * or a stylus, and keeps following the pointer outside the element.
+ *
+ * @module components/color-picker/ColorPicker
+ */
+import type React from "react";
+import { type ThemeVariant } from "../../theme/themeRegistry";
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface HSV {
+    /** 0–360 */
+    h: number;
+    /** 0–100 */
+    s: number;
+    /** 0–100 */
+    v: number;
+}
+/** `#rgb`, `#rrggbb` or `rgb(r, g, b)` as channels; black when unreadable. */
+export declare function toRgb(input: string): RGB;
+export declare function toHex({ r, g, b }: RGB): string;
+export declare function rgbToHsv({ r, g, b }: RGB): HSV;
+export declare function hsvToRgb({ h, s, v }: HSV): RGB;
+/** Whether text reads as a colour this picker can hold. */
+export declare function isColor(input: string): boolean;
+/** Black or white, whichever stays legible on the colour given. */
+export declare function readableOn(color: RGB): string;
+/** A spread of hues and neutrals to start from. */
+export declare const DEFAULT_COLOR_PRESETS: string[];
+/**
+ * A named row of swatches under the field.
+ *
+ * More than one can be offered at a time — the theme's own colours, the
+ * colours a room gives its collaborators, a product's brand set — each under
+ * its own heading, so a person picking a colour can reach for one that
+ * already belongs somewhere rather than inventing a hex value.
+ */
+export interface ColorPresetGroup {
+    /** The heading over the row. */
+    label: string;
+    /** The colours, as anything CSS accepts. */
+    colors: readonly string[];
+}
+/**
+ * The active theme's own colours, as a group.
+ *
+ * Surfaces and text first, then the semantic four, then the vivid palette the
+ * theme keeps for illustration — the order someone reaches for them in.
+ */
+export declare function themeColorPresets(variant?: ThemeVariant, colorMode?: "light" | "dark" | "auto"): ColorPresetGroup;
+/** The colours a room gives its collaborators, as a group. */
+export declare function collaboratorColorPresets(variant?: ThemeVariant, colorMode?: "light" | "dark" | "auto"): ColorPresetGroup;
+export interface ColorPickerProps {
+    /** The colour held, as `#rrggbb` or `rgb(r, g, b)`. */
+    color: string;
+    /** Told the new colour, as `#rrggbb`, while it is dragged and when it is set. */
+    onChange?: (color: string) => void;
+    /** The swatches offered under the field. {@link DEFAULT_COLOR_PRESETS} by default. */
+    presets?: readonly string[];
+    /** Hide the preset row. */
+    showPresets?: boolean;
+    /**
+     * Further rows under the presets, each with its own heading. Give it
+     * {@link themeColorPresets} or {@link collaboratorColorPresets}, or rows of
+     * your own.
+     */
+    presetGroups?: readonly ColorPresetGroup[];
+    /**
+     * Offer the active theme's own colours as a row. On by default: a colour
+     * picked in a themed page usually wants to be one of the theme's.
+     */
+    showThemeColors?: boolean;
+    /** Offer the collaborator colours as a row. Off by default. */
+    showCollaboratorColors?: boolean;
+    /** Hide the hex field. */
+    showInput?: boolean;
+    /** How wide the whole picker is, in pixels. */
+    width?: number;
+    /** The picker's accessible name. */
+    "aria-label"?: string;
+}
+export declare function ColorPicker({ color, onChange, presets, showPresets, presetGroups, showThemeColors, showCollaboratorColors, showInput, width, "aria-label": ariaLabel, }: ColorPickerProps): React.JSX.Element;
+export default ColorPicker;

package/lib/components/color-picker/ColorPicker.js

@@ -0,0 +1,358 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { Box, Text, TextInput } from "@primer/react";
+import { getBrightPalette, themeConfigs, } from "../../theme/themeRegistry";
+import { useThemeStore } from "../../theme/useThemeStore";
+import { useSystemColorMode } from "../../theme/useSystemColorMode";
+import { collaboratorColors } from "../appearance/CollaboratorPalette";
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/** `#rgb`, `#rrggbb` or `rgb(r, g, b)` as channels; black when unreadable. */
+export function toRgb(input) {
+    const text = input.trim();
+    const fromFunction = /^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/i.exec(text);
+    if (fromFunction) {
+        const [, r, g, b] = fromFunction;
+        return { r: Number(r), g: Number(g), b: Number(b) };
+    }
+    let hex = text.replace(/^#/, "");
+    if (hex.length === 3) {
+        hex = hex
+            .split("")
+            .map((channel) => channel + channel)
+            .join("");
+    }
+    if (!/^[0-9a-f]{6}$/i.test(hex)) {
+        return { r: 0, g: 0, b: 0 };
+    }
+    return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+    };
+}
+export function toHex({ r, g, b }) {
+    const channel = (value) => clamp(Math.round(value), 0, 255).toString(16).padStart(2, "0");
+    return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+export function rgbToHsv({ r, g, b }) {
+    const red = r / 255;
+    const green = g / 255;
+    const blue = b / 255;
+    const max = Math.max(red, green, blue);
+    const min = Math.min(red, green, blue);
+    const span = max - min;
+    let h = 0;
+    if (span !== 0) {
+        if (max === red) {
+            h = 60 * (((green - blue) / span) % 6);
+        }
+        else if (max === green) {
+            h = 60 * ((blue - red) / span + 2);
+        }
+        else {
+            h = 60 * ((red - green) / span + 4);
+        }
+    }
+    if (h < 0) {
+        h += 360;
+    }
+    return { h, s: max === 0 ? 0 : (span / max) * 100, v: max * 100 };
+}
+export function hsvToRgb({ h, s, v }) {
+    const saturation = s / 100;
+    const value = v / 100;
+    const chroma = value * saturation;
+    const second = chroma * (1 - Math.abs(((h / 60) % 2) - 1));
+    const base = value - chroma;
+    const sextant = Math.floor((((h % 360) + 360) % 360) / 60);
+    const [r, g, b] = [
+        [chroma, second, 0],
+        [second, chroma, 0],
+        [0, chroma, second],
+        [0, second, chroma],
+        [second, 0, chroma],
+        [chroma, 0, second],
+    ][sextant];
+    return {
+        r: Math.round((r + base) * 255),
+        g: Math.round((g + base) * 255),
+        b: Math.round((b + base) * 255),
+    };
+}
+/** Whether text reads as a colour this picker can hold. */
+export function isColor(input) {
+    const text = input.trim();
+    return (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(text) ||
+        /^rgba?\(\s*\d+[,\s]+\d+[,\s]+\d+/i.test(text));
+}
+/** Black or white, whichever stays legible on the colour given. */
+export function readableOn(color) {
+    // Rec. 601 luma, the usual quick test for "is this a light colour".
+    const luma = (color.r * 299 + color.g * 587 + color.b * 114) / 1000;
+    return luma > 150 ? "#000000" : "#ffffff";
+}
+/* ── The picker ────────────────────────────────────────────────────── */
+/** A spread of hues and neutrals to start from. */
+export const DEFAULT_COLOR_PRESETS = [
+    "#cf222e",
+    "#bc4c00",
+    "#9a6700",
+    "#1a7f37",
+    "#0969da",
+    "#8250df",
+    "#bf3989",
+    "#24292f",
+    "#57606a",
+    "#8c959f",
+    "#d0d7de",
+    "#ffffff",
+];
+/**
+ * The active theme's own colours, as a group.
+ *
+ * Surfaces and text first, then the semantic four, then the vivid palette the
+ * theme keeps for illustration — the order someone reaches for them in.
+ */
+export function themeColorPresets(variant = "datalayer", colorMode = "light") {
+    const bright = getBrightPalette(variant, colorMode);
+    const config = themeConfigs[variant] ?? themeConfigs.datalayer;
+    const mode = colorMode === "auto"
+        ? typeof window !== "undefined" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light"
+        : colorMode;
+    const styles = (mode === "dark" ? config.themeStyles.dark : config.themeStyles.light);
+    const fromStyles = (name) => styles[name];
+    return {
+        label: config.label,
+        colors: [
+            fromStyles("--bgColor-default"),
+            fromStyles("--bgColor-muted"),
+            fromStyles("--fgColor-default"),
+            fromStyles("--fgColor-muted"),
+            fromStyles("--fgColor-accent"),
+            fromStyles("--fgColor-success"),
+            fromStyles("--fgColor-attention"),
+            fromStyles("--fgColor-danger"),
+            bright.glow,
+            bright.pop,
+            bright.spark,
+            bright.blaze,
+            bright.surge,
+            bright.flame,
+            bright.gold,
+        ].filter(Boolean),
+    };
+}
+/** The colours a room gives its collaborators, as a group. */
+export function collaboratorColorPresets(variant = "datalayer", colorMode = "dark") {
+    return {
+        label: "Collaborators",
+        colors: collaboratorColors(variant, colorMode),
+    };
+}
+const FIELD_HEIGHT = 150;
+const RAIL_HEIGHT = 12;
+/**
+ * Follows a pointer across an element, in fractions of its own box.
+ *
+ * The listeners go on the window once a drag starts, so the pointer can leave
+ * the element — down the page, out of the window — without the handle being
+ * dropped where it was last seen.
+ */
+function useDrag(onMove) {
+    const ref = useRef(null);
+    const moving = useRef(false);
+    const report = useCallback((event) => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        const box = element.getBoundingClientRect();
+        onMove(clamp((event.clientX - box.left) / box.width, 0, 1), clamp((event.clientY - box.top) / box.height, 0, 1));
+    }, [onMove]);
+    useEffect(() => {
+        const move = (event) => moving.current && report(event);
+        const up = () => {
+            moving.current = false;
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", up);
+        return () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            window.removeEventListener("pointercancel", up);
+        };
+    }, [report]);
+    const onPointerDown = (event) => {
+        moving.current = true;
+        report(event);
+    };
+    return { ref, onPointerDown };
+}
+export function ColorPicker({ color, onChange, presets = DEFAULT_COLOR_PRESETS, showPresets = true, presetGroups, showThemeColors = true, showCollaboratorColors = false, showInput = true, width = 232, "aria-label": ariaLabel = "Colour picker", }) {
+    const [hsv, setHsv] = useState(() => rgbToHsv(toRgb(color)));
+    const [text, setText] = useState(() => toHex(toRgb(color)));
+    /* A drag reports a colour, which comes back as a prop; without this the
+       answer would overwrite the hue whenever grey is picked (grey has none). */
+    const own = useRef(false);
+    useEffect(() => {
+        if (own.current) {
+            own.current = false;
+            return;
+        }
+        const rgb = toRgb(color);
+        setHsv(rgbToHsv(rgb));
+        setText(toHex(rgb));
+    }, [color]);
+    const rgb = useMemo(() => hsvToRgb(hsv), [hsv]);
+    const hex = useMemo(() => toHex(rgb), [rgb]);
+    const announce = useCallback((next) => {
+        own.current = true;
+        setHsv(next);
+        const value = toHex(hsvToRgb(next));
+        setText(value);
+        onChange?.(value);
+    }, [onChange]);
+    const field = useDrag(useCallback((x, y) => announce({ ...hsv, s: x * 100, v: (1 - y) * 100 }), [announce, hsv]));
+    const rail = useDrag(useCallback((x) => announce({ ...hsv, h: x * 360 }), [announce, hsv]));
+    /*
+      The rows under the field: the caller's presets, then the theme's own
+      colours, then the collaborators' — each only when asked for, and each
+      read from whichever theme is on rather than from a fixed list.
+    */
+    const { theme: activeTheme, colorMode: activeMode } = useThemeStore();
+    const systemMode = useSystemColorMode();
+    const resolvedMode = activeMode === "auto" ? systemMode : activeMode;
+    const rows = useMemo(() => {
+        const groups = [];
+        if (showPresets && presets.length > 0) {
+            groups.push({ label: "Presets", colors: presets });
+        }
+        if (showThemeColors) {
+            groups.push(themeColorPresets(activeTheme, resolvedMode));
+        }
+        if (showCollaboratorColors) {
+            groups.push(collaboratorColorPresets(activeTheme, resolvedMode));
+        }
+        return groups.concat(presetGroups ?? []);
+    }, [
+        activeTheme,
+        presetGroups,
+        presets,
+        resolvedMode,
+        showCollaboratorColors,
+        showPresets,
+        showThemeColors,
+    ]);
+    /* Each row's heading names its own swatches, so the ids must not collide. */
+    const rowIdPrefix = useId();
+    const setFromText = (entry) => {
+        setText(entry);
+        if (isColor(entry)) {
+            const next = rgbToHsv(toRgb(entry));
+            own.current = true;
+            setHsv(next);
+            onChange?.(toHex(toRgb(entry)));
+        }
+    };
+    const nudge = (event, axis) => {
+        const step = event.shiftKey ? 10 : 1;
+        const back = event.key === "ArrowLeft" || event.key === "ArrowDown";
+        const forward = event.key === "ArrowRight" || event.key === "ArrowUp";
+        if (!back && !forward) {
+            return;
+        }
+        event.preventDefault();
+        const by = forward ? step : -step;
+        const limit = axis === "h" ? 360 : 100;
+        announce({ ...hsv, [axis]: clamp(hsv[axis] + by, 0, limit) });
+    };
+    const handle = {
+        position: "absolute",
+        width: 14,
+        height: 14,
+        borderRadius: "50%",
+        border: "2px solid #ffffff",
+        boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.35)",
+        transform: "translate(-50%, -50%)",
+        pointerEvents: "none",
+    };
+    return (_jsxs(Box, { role: "group", "aria-label": ariaLabel, sx: { display: "grid", gap: 2, width, minWidth: 0 }, children: [_jsx(Box, { ref: field.ref, role: "slider", tabIndex: 0, "aria-label": "Saturation and brightness", "aria-valuetext": `saturation ${Math.round(hsv.s)}%, brightness ${Math.round(hsv.v)}%`, onPointerDown: field.onPointerDown, onKeyDown: (event) => nudge(event, event.key === "ArrowUp" || event.key === "ArrowDown" ? "v" : "s"), sx: {
+                    position: "relative",
+                    height: FIELD_HEIGHT,
+                    borderRadius: 2,
+                    border: "1px solid",
+                    borderColor: "var(--borderColor-default)",
+                    cursor: "crosshair",
+                    touchAction: "none",
+                    backgroundColor: toHex(hsvToRgb({ h: hsv.h, s: 100, v: 100 })),
+                    backgroundImage: "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",
+                    "&:focus-visible": {
+                        outline: "2px solid var(--borderColor-accent-emphasis)",
+                        outlineOffset: "1px",
+                    },
+                }, children: _jsx(Box, { sx: {
+                        ...handle,
+                        left: `${hsv.s}%`,
+                        top: `${100 - hsv.v}%`,
+                        backgroundColor: hex,
+                    } }) }), _jsx(Box, { ref: rail.ref, role: "slider", tabIndex: 0, "aria-label": "Hue", "aria-valuemin": 0, "aria-valuemax": 360, "aria-valuenow": Math.round(hsv.h), onPointerDown: rail.onPointerDown, onKeyDown: (event) => nudge(event, "h"), sx: {
+                    position: "relative",
+                    height: RAIL_HEIGHT,
+                    borderRadius: 6,
+                    border: "1px solid",
+                    borderColor: "var(--borderColor-default)",
+                    cursor: "ew-resize",
+                    touchAction: "none",
+                    backgroundImage: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+                    "&:focus-visible": {
+                        outline: "2px solid var(--borderColor-accent-emphasis)",
+                        outlineOffset: "1px",
+                    },
+                }, children: _jsx(Box, { sx: {
+                        ...handle,
+                        left: `${(hsv.h / 360) * 100}%`,
+                        top: "50%",
+                        backgroundColor: toHex(hsvToRgb({ h: hsv.h, s: 100, v: 100 })),
+                    } }) }), showInput ? (_jsxs(Box, { sx: { display: "flex", gap: 2, alignItems: "center" }, children: [_jsx(Box, { "aria-hidden": "true", sx: {
+                            width: 28,
+                            height: 28,
+                            flex: "0 0 auto",
+                            borderRadius: 2,
+                            border: "1px solid",
+                            borderColor: "var(--borderColor-default)",
+                            backgroundColor: hex,
+                        } }), _jsx(TextInput, { "aria-label": "Colour, as hex", value: text, onChange: (event) => setFromText(event.target.value), onBlur: () => setText(hex), size: "small", sx: { flex: "1 1 auto", fontFamily: "mono" }, validationStatus: isColor(text) ? undefined : "error" })] })) : null, rows.map((row) => (_jsxs(Box, { children: [_jsx(Text, { id: `${rowIdPrefix}-${row.label}`, sx: {
+                            fontSize: 0,
+                            color: "var(--fgColor-muted)",
+                            display: "block",
+                            mb: 1,
+                        }, children: row.label }), _jsx(Box, { role: "group", "aria-labelledby": `${rowIdPrefix}-${row.label}`, sx: {
+                            display: "grid",
+                            gridTemplateColumns: "repeat(auto-fill, minmax(22px, 1fr))",
+                            gap: 1,
+                        }, children: row.colors.map((preset, index) => {
+                            const chosen = preset.toLowerCase() === hex.toLowerCase();
+                            return (_jsx(Box, { as: "button", type: "button", "aria-label": preset, "aria-pressed": chosen, onClick: () => setFromText(preset), sx: {
+                                    height: 22,
+                                    borderRadius: 2,
+                                    cursor: "pointer",
+                                    backgroundColor: preset,
+                                    border: "1px solid",
+                                    borderColor: chosen
+                                        ? "var(--borderColor-accent-emphasis)"
+                                        : "var(--borderColor-default)",
+                                    boxShadow: chosen
+                                        ? "inset 0 0 0 2px var(--bgColor-default)"
+                                        : "none",
+                                    "&:focus-visible": {
+                                        outline: "2px solid var(--borderColor-accent-emphasis)",
+                                        outlineOffset: "1px",
+                                    },
+                                } }, `${preset}-${index}`));
+                        }) })] }, row.label)))] }));
+}
+export default ColorPicker;

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

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

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

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

package/lib/components/content-loader/ContentLoader.d.ts

@@ -2,5 +2,5 @@ import 'react-loading-skeleton/dist/skeleton.css';
 export interface ContentLoaderProps {
     count?: number;
 }
-export declare const ContentLoader: (props: ContentLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentLoader: (props: ContentLoaderProps) => import("react").JSX.Element;
 export default ContentLoader;

package/lib/components/content-loader/ContentLoader.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { ContentLoaderProps } from '../..';
 declare const meta: {
     title: string;
-    component: (props: ContentLoaderProps) => import("react/jsx-runtime").JSX.Element;
+    component: (props: ContentLoaderProps) => import("react").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/lib/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,46 @@
+import { type CalendarPickerProps } from "../calendar-picker/CalendarPicker";
+/** `YYYY-MM-DD`, the one format that means the same thing everywhere. */
+export declare function formatISODate(date: Date): string;
+/**
+ * Reads `YYYY-MM-DD` as a local date.
+ *
+ * `new Date('2026-01-31')` is UTC midnight, which is the day before in the
+ * Americas; the parts are given to the constructor separately so the date
+ * means the same day in every zone.
+ */
+export declare function parseISODate(text: string): Date | null;
+export interface DatePickerProps extends Pick<CalendarPickerProps, "min" | "max" | "isDisabled" | "weekStartsOn" | "locale"> {
+    /** The chosen date, or nothing chosen. */
+    value?: Date | null;
+    /** Told when a date is picked or typed. `null` when the field is emptied. */
+    onChange?: (date: Date | null) => void;
+    /** What the empty field says. */
+    placeholder?: string;
+    /** The field's accessible name. */
+    "aria-label"?: string;
+    /** Nothing can be picked or typed. */
+    disabled?: boolean;
+    /** The field's width. Primer's `medium` by default. */
+    size?: "small" | "medium" | "large";
+    /**
+     * Marks the field as holding something invalid, or as settled. Primer's own
+     * two, spelled out rather than imported from a path inside the package that
+     * not every consumer's module resolution can see.
+     */
+    validationStatus?: "error" | "success";
+    /**
+     * How a chosen date is written into the field. ISO `YYYY-MM-DD` by
+     * default, which is also the only shape the field parses back.
+     */
+    format?: (date: Date) => string;
+    /** An id for the field, for a label that names it from outside. */
+    id?: string;
+}
+/**
+ * A date field with a calendar behind it.
+ *
+ * Controlled: `value` is the caller's, and every pick and every parsed entry
+ * arrives through `onChange`.
+ */
+export declare function DatePicker({ value, onChange, placeholder, "aria-label": ariaLabel, disabled, size, validationStatus, format, id, min, max, isDisabled, weekStartsOn, locale, }: DatePickerProps): import("react").JSX.Element;
+export default DatePicker;

package/lib/components/date-picker/DatePicker.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { AnchoredOverlay, Box, TextInput } from "@primer/react";
+import { CalendarIcon } from "@primer/octicons-react";
+import { CalendarPicker } from "../calendar-picker/CalendarPicker";
+/** `YYYY-MM-DD`, the one format that means the same thing everywhere. */
+export function formatISODate(date) {
+    const month = `${date.getMonth() + 1}`.padStart(2, "0");
+    const day = `${date.getDate()}`.padStart(2, "0");
+    return `${date.getFullYear()}-${month}-${day}`;
+}
+/**
+ * Reads `YYYY-MM-DD` as a local date.
+ *
+ * `new Date('2026-01-31')` is UTC midnight, which is the day before in the
+ * Americas; the parts are given to the constructor separately so the date
+ * means the same day in every zone.
+ */
+export function parseISODate(text) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text.trim());
+    if (!match) {
+        return null;
+    }
+    const [, year, month, day] = match;
+    const date = new Date(Number(year), Number(month) - 1, Number(day));
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+/**
+ * A date field with a calendar behind it.
+ *
+ * Controlled: `value` is the caller's, and every pick and every parsed entry
+ * arrives through `onChange`.
+ */
+export function DatePicker({ value = null, onChange, placeholder = "YYYY-MM-DD", "aria-label": ariaLabel = "Date", disabled = false, size = "medium", validationStatus, format = formatISODate, id, min, max, isDisabled, weekStartsOn, locale, }) {
+    const [open, setOpen] = useState(false);
+    const [text, setText] = useState(() => (value ? format(value) : ""));
+    const anchorRef = useRef(null);
+    // The field follows the value, except while it is being typed into: a
+    // controlled rewrite mid-word moves the caret to the end.
+    const typing = useRef(false);
+    useEffect(() => {
+        if (!typing.current) {
+            setText(value ? format(value) : "");
+        }
+    }, [value, format]);
+    const commit = (next) => {
+        typing.current = false;
+        const trimmed = next.trim();
+        if (trimmed === "") {
+            onChange?.(null);
+            return;
+        }
+        const parsed = parseISODate(trimmed);
+        if (parsed) {
+            onChange?.(parsed);
+            setText(format(parsed));
+        }
+        else {
+            // Unreadable: put back what is actually held, rather than keeping a
+            // date on screen that the caller never received.
+            setText(value ? format(value) : "");
+        }
+    };
+    const calendar = useMemo(() => (_jsx(Box, { sx: { p: 3 }, children: _jsx(CalendarPicker, { value: value, defaultMonth: value ?? undefined, onChange: (date) => {
+                onChange?.(date);
+                setText(format(date));
+                setOpen(false);
+            }, min: min, max: max, isDisabled: isDisabled, weekStartsOn: weekStartsOn, locale: locale, "aria-label": `${ariaLabel}, choose a day` }) })), [
+        ariaLabel,
+        format,
+        isDisabled,
+        locale,
+        max,
+        min,
+        onChange,
+        value,
+        weekStartsOn,
+    ]);
+    return (_jsxs(Box, { ref: anchorRef, sx: { display: "inline-block" }, children: [_jsx(AnchoredOverlay, { open: open, onOpen: () => !disabled && setOpen(true), onClose: () => setOpen(false), 
+                // The field's own box is the anchor; `useRef` types its current as
+                // nullable, which is not how the overlay declares what it takes.
+                anchorRef: anchorRef, 
+                // The field is the anchor; the button inside it does the opening.
+                renderAnchor: null, overlayProps: { role: "dialog", "aria-label": `${ariaLabel} calendar` }, children: calendar }), _jsx(TextInput, { id: id, "aria-label": ariaLabel, "aria-haspopup": "dialog", "aria-expanded": open, value: text, placeholder: placeholder, disabled: disabled, size: size, validationStatus: validationStatus, onChange: (event) => {
+                    typing.current = true;
+                    setText(event.target.value);
+                }, onBlur: (event) => commit(event.target.value), onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                        commit(event.target.value);
+                        setOpen(false);
+                    }
+                    if (event.key === "ArrowDown" && !open) {
+                        event.preventDefault();
+                        setOpen(true);
+                    }
+                }, trailingAction: _jsx(TextInput.Action, { onClick: () => !disabled && setOpen((was) => !was), icon: CalendarIcon, "aria-label": open ? "Close the calendar" : "Open the calendar", disabled: disabled }) })] }));
+}
+export default DatePicker;

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

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

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

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

package/lib/components/icons/CircleIcon.d.ts

@@ -2,5 +2,5 @@ export type CircleIconProps = {
     color?: string;
     variant?: 'fg' | 'default' | 'muted' | 'onEmphasis' | 'subtle';
 };
-export declare const CircleIcon: ({ color, variant, }: CircleIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CircleIcon: ({ color, variant, }: CircleIconProps) => import("react").JSX.Element;
 export default CircleIcon;

package/lib/components/icons/CircleIcon.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { CircleIconProps } from '../..';
 declare const meta: {
     title: string;
-    component: ({ color, variant, }: CircleIconProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, variant, }: CircleIconProps) => import("react").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;