@datalayer/primer-addons 1.0.21 → 1.0.23

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

@@ -1,7 +1,40 @@
 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.
+ */
+/**
+ * `CloseableFlash`: a Primer `Flash` the reader can dismiss.
+ *
+ * Primer's own variants are `default`, `success`, `warning` and `danger`. Two
+ * more are added here, for the levels a platform announce is written at:
+ * `info`, which is the neutral blue Primer already draws for `default` and is
+ * worth having under the name people say, and `critical`, which is `danger`
+ * wearing its emphasis colour — an incident has to look different from a
+ * validation error, and a reader who sees everything red stops reading red.
+ *
+ * @module components/closeable-flash/CloseableFlash
+ */
 import { useState } from "react";
 import { Box, Flash, CircleOcticon, Text } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
+/**
+ * The Primer variant that draws a given level.
+ *
+ * `info` is Primer's `default` — already the accent blue — and `critical` is
+ * `danger`; what sets the two dangers apart is the emphasis below, not the
+ * variant, because Primer has no louder red to ask for.
+ */
+const flashVariantForVariant = (variant) => {
+    switch (variant) {
+        case 'info':
+            return 'default';
+        case 'critical':
+            return 'danger';
+        default:
+            return variant;
+    }
+};
 const closeButtonToneForVariant = (variant) => {
     switch (variant) {
         case 'success':
@@ -9,7 +42,10 @@ const closeButtonToneForVariant = (variant) => {
         case 'warning':
             return { fg: 'attention.fg', hoverBg: 'rgba(154, 103, 0, 0.16)' };
         case 'danger':
+        case 'critical':
             return { fg: 'danger.fg', hoverBg: 'rgba(207, 34, 46, 0.14)' };
+        case 'info':
+            return { fg: 'accent.fg', hoverBg: 'rgba(9, 105, 218, 0.12)' };
         default:
             return { fg: 'fg.default', hoverBg: 'rgba(31, 35, 40, 0.12)' };
     }
@@ -21,16 +57,21 @@ const textColorForVariant = (variant) => {
         case 'warning':
             return 'attention.fg';
         case 'danger':
+        case 'critical':
             return 'danger.fg';
+        case 'info':
+            return 'accent.fg';
         default:
             return 'fg.default';
     }
 };
 export const CloseableFlash = (props) => {
-    const { leadingVisual, variant, onClose, ...otherProps } = props;
+    const { leadingVisual, variant, onClose, sx, dismissible = true, ...otherProps } = props;
     const resolvedVariant = variant ?? 'default';
     const closeTone = closeButtonToneForVariant(resolvedVariant);
-    const flashVariant = resolvedVariant === 'default' ? undefined : resolvedVariant;
+    const primerVariant = flashVariantForVariant(resolvedVariant);
+    const flashVariant = primerVariant === 'default' ? undefined : primerVariant;
+    const isCritical = resolvedVariant === 'critical';
     const [isVisible, setIsVisible] = useState(true);
     const handleClose = () => {
         if (onClose) {
@@ -41,7 +82,14 @@ export const CloseableFlash = (props) => {
     if (!isVisible) {
         return null;
     }
-    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: {
+    return (_jsx(Flash, { variant: flashVariant, sx: {
+            // A critical flash is the one a reader must not scroll past: the
+            // border carries the emphasis colour rather than the muted one.
+            ...(isCritical
+                ? { borderColor: 'danger.emphasis', borderWidth: 2, borderStyle: 'solid' }
+                : {}),
+            ...sx,
+        }, ...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), sx: isCritical ? { fontWeight: 'bold' } : undefined, children: props.children })] }), dismissible && (_jsx(Box, { as: "button", type: "button", "aria-label": "Close", onClick: handleClose, sx: {
                         flex: '0 0 auto',
                         p: 0,
                         m: 0,
@@ -71,5 +119,5 @@ export const CloseableFlash = (props) => {
                         '& svg': {
                             display: 'block',
                         },
-                    }, children: _jsx(Box, { as: "span", "aria-hidden": true, children: _jsx(XIcon, { size: 16 }) }) })] }) }));
+                    }, children: _jsx(Box, { as: "span", "aria-hidden": true, children: _jsx(XIcon, { size: 16 }) }) }))] }) }));
 };

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;

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.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { Box, useTheme } from "@primer/react";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import 'react-loading-skeleton/dist/skeleton.css';

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;