react-cheminfo 0.9.0 → 0.11.0

package/lib/overlay/ui/OverlayRow.d.ts

@@ -0,0 +1,111 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { HelpContent } from '../../help/ui/HelpBody.tsx';
+/** One choice offered by an {@link OverlaySelect} or an {@link OverlaySegmented}. */
+export interface OverlayOption<TValue extends string = string> {
+    /** What picking it means. */
+    value: TValue;
+    /**
+     * What it reads. Write the answer rather than the jargon — `95% of samples`,
+     * never `2 SD`, because the second is meaningless to a reader who has not
+     * met it and is misread as 95% by everyone who has.
+     */
+    label: string;
+    /**
+     * What the pointer is told about this one choice, when the control's own
+     * help does not cover a surprising consequence.
+     * @default undefined
+     */
+    title?: string;
+    /**
+     * Whether it can be picked. A choice that does not apply is greyed rather
+     * than removed, so the control keeps its shape and the reader learns that
+     * the option exists at all.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** How a row arranges its name and its control. */
+export type OverlayRowLayout = 'row' | 'grid';
+/** What every control inside an {@link OverlayBar} carries. */
+export interface OverlayControlProps {
+    /**
+     * The words in front of the control, phrased as the question the reader
+     * already has: `Colour by`, `Group outlines`, `Dot size`.
+     *
+     * Required, and deliberately so. A row with no name is a row whose only
+     * identification is the help glyph beside it, which is how a panel ends up
+     * with a column of question marks standing in for its words — and it is the
+     * name that a screen reader is given, that the help hangs off, and that
+     * fills the panel's left column.
+     */
+    label: string;
+    /**
+     * What the control does, in a sentence. It hangs off the name, which is
+     * underlined with dots to say so — never off a glyph of its own. A control
+     * floating over a figure has no room to explain itself, and a reader who has
+     * to guess what it does picks nothing at all, so every control should carry
+     * one.
+     * @default undefined — the name is written plainly
+     */
+    help?: HelpContent;
+    /**
+     * Whether the name is written or only announced. Hide it for a control whose
+     * own words already say what it is — a button that reads `Zoom to selection`
+     * — and never for one whose choices are bare numbers. It is honoured on a
+     * bar alone: in a panel the name is the left column, and an empty cell there
+     * is the ragged panel the grid exists to prevent.
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Whether the control is greyed and unreachable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Value of the `data-testid` attribute of the control.
+     * @default undefined
+     */
+    testId?: string;
+}
+/** What {@link OverlayRow} lays out. Exported so a caller's own control gets the same name, help and geometry as the built-in ones. */
+export interface OverlayRowProps extends OverlayControlProps {
+    /** The control itself. */
+    children: ReactNode;
+    /**
+     * Whether the name sits in front of the control or above it. Above once the
+     * names are long enough to push the card past a third of the figure. Only
+     * consulted on a bar; a panel row is always two columns.
+     * @default 'inline'
+     */
+    labelPlacement?: 'inline' | 'above';
+    /**
+     * Whether the row is a line on a bar or a cell in a panel's grid.
+     * @default `'grid'` inside an {@link OverlayPanel}, `'row'` anywhere else
+     */
+    layout?: OverlayRowLayout;
+}
+/**
+ * A name, its help, and the control they belong to.
+ *
+ * Every control of this domain is one of these, which is the whole reason a
+ * picker and a stepper standing side by side in a card line up on the same
+ * baseline and answer to the same measurements. A caller writing a control
+ * this package does not have reaches for it too, rather than approximating the
+ * geometry and landing half a pixel out.
+ *
+ * The help hangs off the name rather than off a question mark beside it. Five
+ * controls each with a glyph put five question marks in a column down the left
+ * edge of a panel, and the eye reads that column before it reads a single
+ * word; a dotted underline says the same thing and costs nothing. The name is
+ * reachable by tab for the same reason the glyph was, so the explanation is
+ * not reserved to whoever is holding a pointer, and it carries the class
+ * `help-name` — the counterpart of the glyph's `help-icon` — so that whatever
+ * used to look for the glyph has something to look for. In a panel the name
+ * also names its row out loud, since a name a whole column away from its
+ * control is not associated with it by proximity alone.
+ * @param props - See {@link OverlayRowProps}.
+ * @returns The row.
+ */
+export declare function OverlayRow(props: OverlayRowProps): ReactElement;
+//# sourceMappingURL=OverlayRow.d.ts.map

package/lib/overlay/ui/OverlayRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayRow.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAc9D,qFAAqF;AACrF,MAAM,WAAW,aAAa,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IAC3D,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,mDAAmD;AACnD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,CAAC;AAE9C,+DAA+D;AAC/D,MAAM,WAAW,mBAAmB;IAClC;;;;;;;;;OASG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,uIAAuI;AACvI,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAuE/D"}

package/lib/overlay/ui/OverlayRow.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { HelpTooltip } from "../../help/ui/HelpTooltip.js";
+import { useOverlayPanelShape } from "./overlayPanelContext.js";
+import { OVERLAY_GRID_CELL_STYLE, overlayGridRowStyle, overlayNameColumnWidth, overlayNameStyle, overlayRowStyle, overlayStackedRowStyle, } from "./overlayRowStyles.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * A name, its help, and the control they belong to.
+ *
+ * Every control of this domain is one of these, which is the whole reason a
+ * picker and a stepper standing side by side in a card line up on the same
+ * baseline and answer to the same measurements. A caller writing a control
+ * this package does not have reaches for it too, rather than approximating the
+ * geometry and landing half a pixel out.
+ *
+ * The help hangs off the name rather than off a question mark beside it. Five
+ * controls each with a glyph put five question marks in a column down the left
+ * edge of a panel, and the eye reads that column before it reads a single
+ * word; a dotted underline says the same thing and costs nothing. The name is
+ * reachable by tab for the same reason the glyph was, so the explanation is
+ * not reserved to whoever is holding a pointer, and it carries the class
+ * `help-name` — the counterpart of the glyph's `help-icon` — so that whatever
+ * used to look for the glyph has something to look for. In a panel the name
+ * also names its row out loud, since a name a whole column away from its
+ * control is not associated with it by proximity alone.
+ * @param props - See {@link OverlayRowProps}.
+ * @returns The row.
+ */
+export function OverlayRow(props) {
+    const { children, label, help, hideLabel = false, disabled = false, testId, labelPlacement = 'inline', } = props;
+    const { metrics } = useOverlaySurface();
+    const panel = useOverlayPanelShape();
+    const layout = props.layout ?? (panel === undefined ? 'row' : 'grid');
+    const nameId = useId();
+    const written = layout === 'grid' || !hideLabel;
+    const name = written ? (_jsx("span", { id: layout === 'grid' ? nameId : undefined, className: help === undefined ? undefined : 'help-name', tabIndex: help === undefined ? undefined : 0, style: overlayNameStyle(metrics, { help: help !== undefined, disabled }), children: label })) : null;
+    const explained = help === undefined ? (name) : (_jsx(HelpTooltip, { content: help, children: name }));
+    // A control whose name is not written keeps the help on its own words, so
+    // that dropping the name never quietly drops the explanation with it.
+    const control = help === undefined || written ? (children) : (_jsx(HelpTooltip, { content: help, children: children }));
+    if (layout === 'grid') {
+        const width = panel?.nameWidth ?? overlayNameColumnWidth(metrics);
+        return (_jsxs("div", { role: "group", "aria-labelledby": nameId, "data-testid": testId, style: overlayGridRowStyle(metrics, width), children: [explained, _jsx("span", { style: OVERLAY_GRID_CELL_STYLE, children: control })] }));
+    }
+    if (labelPlacement === 'above') {
+        return (_jsxs("div", { "data-testid": testId, style: overlayStackedRowStyle(metrics), children: [explained, control] }));
+    }
+    return (_jsxs("div", { "data-testid": testId, style: overlayRowStyle(metrics), children: [explained, control] }));
+}
+//# sourceMappingURL=OverlayRow.js.map

package/lib/overlay/ui/OverlayRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayRow.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayRow.tsx"],"names":[],"mappings":"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"}

package/lib/overlay/ui/OverlaySegmented.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react';
+import type { OverlayControlProps, OverlayOption } from './OverlayRow.tsx';
+/** What {@link OverlaySegmented} needs. Use it for two to four choices. */
+export interface OverlaySegmentedProps<TValue extends string = string> extends OverlayControlProps {
+    /** The current choice. */
+    value: TValue;
+    /** What may be chosen, in the order offered. */
+    options: ReadonlyArray<OverlayOption<TValue>>;
+    /** Called with the new choice. */
+    onChange: (value: TValue) => void;
+}
+/**
+ * The row of segments a card uses while every choice still fits on one line.
+ *
+ * Its choices are readable without being opened, which is worth the width up
+ * to about four of them: a reader who can see that a second view exists asks
+ * for it, and a reader looking at a closed picker does not.
+ *
+ * It is the same sunken track a figure's tab strip is made of, one size down,
+ * so a reader meets one device in a viewer rather than two that happen to both
+ * be rows of choices. The segments carry the caption's own name, because a
+ * bare row of buttons over a figure is announced as nothing at all to a reader
+ * arriving by keyboard.
+ * @param props - See {@link OverlaySegmentedProps}.
+ * @returns The caption, its help, and the segments.
+ */
+export declare function OverlaySegmented<TValue extends string = string>(props: OverlaySegmentedProps<TValue>): ReactElement;
+//# sourceMappingURL=OverlaySegmented.d.ts.map

package/lib/overlay/ui/OverlaySegmented.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySegmented.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySegmented.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAG3E,2EAA2E;AAC3E,MAAM,WAAW,qBAAqB,CACpC,MAAM,SAAS,MAAM,GAAG,MAAM,CAC9B,SAAQ,mBAAmB;IAC3B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,aAAa,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAC7D,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,GACnC,YAAY,CA+Bd"}

package/lib/overlay/ui/OverlaySegmented.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OverlayPills } from "./OverlayPills.js";
+import { OverlayRow } from "./OverlayRow.js";
+/**
+ * The row of segments a card uses while every choice still fits on one line.
+ *
+ * Its choices are readable without being opened, which is worth the width up
+ * to about four of them: a reader who can see that a second view exists asks
+ * for it, and a reader looking at a closed picker does not.
+ *
+ * It is the same sunken track a figure's tab strip is made of, one size down,
+ * so a reader meets one device in a viewer rather than two that happen to both
+ * be rows of choices. The segments carry the caption's own name, because a
+ * bare row of buttons over a figure is announced as nothing at all to a reader
+ * arriving by keyboard.
+ * @param props - See {@link OverlaySegmentedProps}.
+ * @returns The caption, its help, and the segments.
+ */
+export function OverlaySegmented(props) {
+    const { value, options, onChange, label, help, hideLabel = false, disabled = false, testId, } = props;
+    return (_jsx(OverlayRow, { label: label, help: help, hideLabel: hideLabel, disabled: disabled, children: _jsx(OverlayPills, { role: "radiogroup", size: "setting", label: label, value: value, options: options, disabled: disabled, testId: testId, onChange: onChange }) }));
+}
+//# sourceMappingURL=OverlaySegmented.js.map

package/lib/overlay/ui/OverlaySegmented.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySegmented.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySegmented.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAc9C;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAAoC;IAEpC,MAAM,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAElB,KAAC,YAAY,IACX,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB,GACS,CACd,CAAC;AACJ,CAAC"}

package/lib/overlay/ui/OverlaySelect.d.ts

@@ -0,0 +1,35 @@
+import type { ReactElement } from 'react';
+import type { OverlayControlProps, OverlayOption } from './OverlayRow.tsx';
+/** How a picker is drawn. */
+export type OverlaySelectAppearance = 'field' | 'quiet';
+/** What {@link OverlaySelect} needs. Use it past four choices. */
+export interface OverlaySelectProps<TValue extends string = string> extends OverlayControlProps {
+    /** The current choice. */
+    value: TValue;
+    /** What may be chosen, in the order offered. */
+    options: ReadonlyArray<OverlayOption<TValue>>;
+    /** Called with the new choice. */
+    onChange: (value: TValue) => void;
+    /**
+     * Whether the picker is drawn as a form field or as a quiet button showing
+     * only its value.
+     *
+     * A settings panel gets `quiet` on its own, because a bordered field beside
+     * borderless switches and steppers is the one shape in the panel that draws
+     * the eye, and it draws it to whichever setting happens to be a list.
+     * @default 'quiet' inside an OverlayPanel, 'field' anywhere else
+     */
+    appearance?: OverlaySelectAppearance;
+}
+/**
+ * The picker a card reaches for once the choices stop fitting side by side.
+ *
+ * The options are written out rather than handed to Blueprint's shorthand,
+ * because a choice that does not apply has to keep its place in the list and
+ * say why the pointer cannot take it — and the shorthand has nowhere to put
+ * that sentence.
+ * @param props - See {@link OverlaySelectProps}.
+ * @returns The caption, its help, and the picker.
+ */
+export declare function OverlaySelect<TValue extends string = string>(props: OverlaySelectProps<TValue>): ReactElement;
+//# sourceMappingURL=OverlaySelect.d.ts.map

package/lib/overlay/ui/OverlaySelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySelect.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAM3E,6BAA6B;AAC7B,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,OAAO,CAAC;AAExD,kEAAkE;AAClE,MAAM,WAAW,kBAAkB,CACjC,MAAM,SAAS,MAAM,GAAG,MAAM,CAC9B,SAAQ,mBAAmB;IAC3B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,aAAa,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;CACtC;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAC1D,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAChC,YAAY,CAmEd"}

package/lib/overlay/ui/OverlaySelect.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HTMLSelect } from '@blueprintjs/core';
+import { OverlayRow } from "./OverlayRow.js";
+import { OverlayValueMenu } from "./OverlayValueMenu.js";
+import { useOverlayPanelShape } from "./overlayPanelContext.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * The picker a card reaches for once the choices stop fitting side by side.
+ *
+ * The options are written out rather than handed to Blueprint's shorthand,
+ * because a choice that does not apply has to keep its place in the list and
+ * say why the pointer cannot take it — and the shorthand has nowhere to put
+ * that sentence.
+ * @param props - See {@link OverlaySelectProps}.
+ * @returns The caption, its help, and the picker.
+ */
+export function OverlaySelect(props) {
+    const { value, options, onChange, label, help, hideLabel = false, disabled = false, testId, } = props;
+    const { metrics } = useOverlaySurface();
+    const panel = useOverlayPanelShape();
+    const { appearance = panel === undefined ? 'field' : 'quiet' } = props;
+    if (appearance === 'quiet') {
+        // The menu goes INSIDE the row rather than replacing it: the row is what
+        // holds the name column and hangs the help off it, and a panel whose rows
+        // do not all have that column is not a grid.
+        return (_jsx(OverlayRow, { label: label, help: help, hideLabel: hideLabel, disabled: disabled, children: _jsx(OverlayValueMenu, { label: label, value: value, options: options, onChange: onChange, showKey: false, disabled: disabled, testId: testId }) }));
+    }
+    return (_jsx(OverlayRow, { label: label, help: help, hideLabel: hideLabel, disabled: disabled, children: _jsx(HTMLSelect, { value: value, disabled: disabled, large: metrics.blueprintSize === 'large', "aria-label": label, "data-testid": testId, onChange: (event) => onChange(event.currentTarget.value), children: options.map((option) => (_jsx("option", { value: option.value, title: option.title, disabled: option.disabled, children: option.label }, option.value))) }) }));
+}
+//# sourceMappingURL=OverlaySelect.js.map

package/lib/overlay/ui/OverlaySelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySelect.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA2BxD;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAiC;IAEjC,MAAM,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,MAAM,GACP,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;IACrC,MAAM,EAAE,UAAU,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvE,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;QAC3B,yEAAyE;QACzE,0EAA0E;QAC1E,6CAA6C;QAC7C,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAElB,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACd,GACS,CACd,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAElB,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,OAAO,CAAC,aAAa,KAAK,OAAO,gBAC5B,KAAK,iBACJ,MAAM,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAe,CAAC,YAEjE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAEE,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,YAExB,MAAM,CAAC,KAAK,IALR,MAAM,CAAC,KAAK,CAMV,CACV,CAAC,GACS,GACF,CACd,CAAC;AACJ,CAAC"}

package/lib/overlay/ui/OverlaySwatchIcon.d.ts

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react';
+/** What {@link OverlaySwatchIcon} draws. */
+export interface OverlaySwatchIconProps {
+    /**
+     * The colours the figure is drawn in, in the order it draws them. Hand it
+     * the very colours on the chart: the whole point of this glyph is that a
+     * reader recognises the plot in it without being taught anything.
+     */
+    colors: readonly string[];
+}
+/**
+ * The colours of a figure, as the glyph of the control that changes them.
+ *
+ * Every other icon on a bar has to be learned before it means anything. This
+ * one does not: a reader who has just looked at four groups of dots knows what
+ * a row of those four colours opens, which is why the control that picks what
+ * the figure is coloured by wears its palette rather than a paint-pot.
+ *
+ * Past four colours it becomes three and a count. Eight dots inside a
+ * twenty-four pixel button is a smear, and a smear says less about the figure
+ * than three honest colours and the news that there are more.
+ * @param props - See {@link OverlaySwatchIconProps}.
+ * @returns The row of dots.
+ */
+export declare function OverlaySwatchIcon(props: OverlaySwatchIconProps): ReactElement;
+//# sourceMappingURL=OverlaySwatchIcon.d.ts.map

package/lib/overlay/ui/OverlaySwatchIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySwatchIcon.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySwatchIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAMzD,4CAA4C;AAC5C,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA8B7E"}

package/lib/overlay/ui/OverlaySwatchIcon.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOverlaySurface } from "./overlaySurface.js";
+/**
+ * The colours of a figure, as the glyph of the control that changes them.
+ *
+ * Every other icon on a bar has to be learned before it means anything. This
+ * one does not: a reader who has just looked at four groups of dots knows what
+ * a row of those four colours opens, which is why the control that picks what
+ * the figure is coloured by wears its palette rather than a paint-pot.
+ *
+ * Past four colours it becomes three and a count. Eight dots inside a
+ * twenty-four pixel button is a smear, and a smear says less about the figure
+ * than three honest colours and the news that there are more.
+ * @param props - See {@link OverlaySwatchIconProps}.
+ * @returns The row of dots.
+ */
+export function OverlaySwatchIcon(props) {
+    const { colors } = props;
+    const { metrics } = useOverlaySurface();
+    const shown = colors.length > OVERLAY_SWATCH_DOTS
+        ? OVERLAY_SWATCH_DOTS - 1
+        : colors.length;
+    const rest = colors.length - shown;
+    const size = dotSize(metrics);
+    const dots = [];
+    for (let index = 0; index < shown; index++) {
+        const color = colors[index];
+        if (color === undefined)
+            continue;
+        dots.push(_jsx("span", { style: overlaySwatchDotStyle(color, size) }, `${index}:${color}`));
+    }
+    return (_jsxs("span", { "aria-hidden": "true", style: OVERLAY_SWATCH_ROW_STYLE, children: [dots, rest > 0 ? (_jsx("span", { style: overlaySwatchRestStyle(metrics), children: `+${rest}` })) : null] }));
+}
+/** How many dots the glyph holds before the last one becomes a count. */
+const OVERLAY_SWATCH_DOTS = 4;
+/** The dots side by side, with the button's own ink for the count. */
+const OVERLAY_SWATCH_ROW_STYLE = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 2,
+};
+/**
+ * One dot.
+ *
+ * Round rather than square, because these stand for the marks on a scatter
+ * rather than for the series of a bar chart.
+ *
+ * The hairline that keeps a pale group visible against the card is drawn only
+ * once the dot is wide enough to carry it: inside a four pixel dot a one pixel
+ * ring is half the dot, and the reader is then shown a grey ring with a speck
+ * of the group's colour in it — which is the one thing this glyph exists not
+ * to do.
+ * @param color - The colour of the group it stands for.
+ * @param size - How wide the dot is.
+ * @returns The dot's rules.
+ */
+function overlaySwatchDotStyle(color, size) {
+    return {
+        display: 'inline-block',
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background: color,
+        boxShadow: size >= 6 ? 'inset 0 0 0 1px var(--border)' : undefined,
+    };
+}
+/**
+ * The count standing in for the colours that did not fit.
+ *
+ * It takes the button's own ink rather than a colour of its own, so it fades
+ * and lights with the button instead of reading as a fifth group.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The count's rules.
+ */
+function overlaySwatchRestStyle(metrics) {
+    return {
+        fontSize: Math.max(9, metrics.labelSize - 1),
+        fontVariantNumeric: 'tabular-nums',
+        fontWeight: 600,
+        lineHeight: 1,
+    };
+}
+/**
+ * How wide one dot is.
+ *
+ * A sixth of the button, so the row of four fills it the way a glyph would
+ * rather than sitting in the middle of it as four specks.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The dot's width in pixels.
+ */
+function dotSize(metrics) {
+    return Math.max(4, Math.round(metrics.buttonSize / 6));
+}
+//# sourceMappingURL=OverlaySwatchIcon.js.map

package/lib/overlay/ui/OverlaySwatchIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySwatchIcon.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlaySwatchIcon.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAYxD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAExC,MAAM,KAAK,GACT,MAAM,CAAC,MAAM,GAAG,mBAAmB;QACjC,CAAC,CAAC,mBAAmB,GAAG,CAAC;QACzB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;IACpB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;IACnC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,IAAI,GAAmB,EAAE,CAAC;IAChC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC;QAC3C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,KAAK,KAAK,SAAS;YAAE,SAAS;QAClC,IAAI,CAAC,IAAI,CACP,eAEE,KAAK,EAAE,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC,IADpC,GAAG,KAAK,IAAI,KAAK,EAAE,CAExB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,+BAAkB,MAAM,EAAC,KAAK,EAAE,wBAAwB,aACrD,IAAI,EACJ,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CACV,eAAM,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,YAAG,IAAI,IAAI,EAAE,GAAQ,CAClE,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC;AAED,yEAAyE;AACzE,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,sEAAsE;AACtE,MAAM,wBAAwB,GAAG;IAC/B,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CAC0B,CAAC;AAEnC;;;;;;;;;;;;;;GAcG;AACH,SAAS,qBAAqB,CAAC,KAAa,EAAE,IAAY;IACxD,OAAO;QACL,OAAO,EAAE,cAAc;QACvB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,SAAS;KACnE,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,sBAAsB,CAAC,OAAuB;IACrD,OAAO;QACL,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;QAC5C,kBAAkB,EAAE,cAAc;QAClC,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,CAAC;KACd,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,OAAO,CAAC,OAAuB;IACtC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;AACzD,CAAC"}

package/lib/overlay/ui/OverlayToggle.d.ts

@@ -0,0 +1,56 @@
+import type { IconName } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import type { OverlayControlProps } from './OverlayRow.tsx';
+/** How a toggle is drawn. */
+export type OverlayToggleAppearance = 'button' | 'switch';
+/** What {@link OverlayToggle} needs. */
+export interface OverlayToggleProps extends OverlayControlProps {
+    /** Whether it is on. */
+    checked: boolean;
+    /** Called with the new state. */
+    onChange: (checked: boolean) => void;
+    /**
+     * How it is drawn: a pressed button carrying its own words, or a switch
+     * beside a name in a panel's control column.
+     * @default `'switch'` inside an {@link OverlayPanel}, `'button'` anywhere else
+     */
+    appearance?: OverlayToggleAppearance;
+    /**
+     * Colour of the square in front of the caption. Give it the series' own
+     * colour and a row of toggles becomes the figure's legend, each entry
+     * showing and hiding what it names. Drawn by the button appearance alone.
+     * @default undefined — no square is drawn
+     */
+    swatch?: string;
+    /**
+     * Blueprint glyph in front of the caption, for a toggle short of room. Drawn
+     * by the button appearance alone.
+     * @default undefined
+     */
+    icon?: IconName;
+}
+/**
+ * One thing on the figure turned on and off.
+ *
+ * On a bar it is a pressed button, because the same control has to work as a
+ * legend entry — a swatch and a series name that dim when the series is hidden
+ * — and a checkbox beside a colour square reads as two separate claims about
+ * one series. In a panel it is a switch, because a row of grey chips is a row
+ * whose state cannot be read: `One scale for all` drawn as a chip answers the
+ * reader's only question about it — is it on? — with nothing at all, and the
+ * reader has to click it to find out.
+ *
+ * It stays a real `button` reporting `aria-pressed` in both appearances rather
+ * than becoming a checkbox in one of them, since a control that reports its
+ * state one way on a bar and another in a panel is a control a reader who
+ * cannot see it has to learn twice. A native button is also operated by Space
+ * and by Enter for nothing, where a checkbox built out of a `div` has to
+ * reimplement both and usually gets one of them subtly wrong.
+ *
+ * A swatch takes the glyph's place when both are given, since the colour is
+ * what ties the entry to a mark on the chart.
+ * @param props - See {@link OverlayToggleProps}.
+ * @returns The toggle.
+ */
+export declare function OverlayToggle(props: OverlayToggleProps): ReactElement;
+//# sourceMappingURL=OverlayToggle.d.ts.map

package/lib/overlay/ui/OverlayToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayToggle.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAY5D,6BAA6B;AAC7B,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE1D,wCAAwC;AACxC,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,wBAAwB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAkErE"}

package/lib/overlay/ui/OverlayToggle.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from 'react-science/ui';
+import { OverlayRow } from "./OverlayRow.js";
+import { overlaySwatchStyle } from "./overlayControlStyles.js";
+import { useOverlayPanelShape } from "./overlayPanelContext.js";
+import { useOverlaySurface } from "./overlaySurface.js";
+import { overlaySwitchKnobStyle, overlaySwitchStyle, overlaySwitchTrack, overlaySwitchTrackStyle, } from "./overlaySwitchStyles.js";
+/**
+ * One thing on the figure turned on and off.
+ *
+ * On a bar it is a pressed button, because the same control has to work as a
+ * legend entry — a swatch and a series name that dim when the series is hidden
+ * — and a checkbox beside a colour square reads as two separate claims about
+ * one series. In a panel it is a switch, because a row of grey chips is a row
+ * whose state cannot be read: `One scale for all` drawn as a chip answers the
+ * reader's only question about it — is it on? — with nothing at all, and the
+ * reader has to click it to find out.
+ *
+ * It stays a real `button` reporting `aria-pressed` in both appearances rather
+ * than becoming a checkbox in one of them, since a control that reports its
+ * state one way on a bar and another in a panel is a control a reader who
+ * cannot see it has to learn twice. A native button is also operated by Space
+ * and by Enter for nothing, where a checkbox built out of a `div` has to
+ * reimplement both and usually gets one of them subtly wrong.
+ *
+ * A swatch takes the glyph's place when both are given, since the colour is
+ * what ties the entry to a mark on the chart.
+ * @param props - See {@link OverlayToggleProps}.
+ * @returns The toggle.
+ */
+export function OverlayToggle(props) {
+    const { checked, onChange, label, help, hideLabel = false, disabled = false, testId, swatch, icon, } = props;
+    const { metrics } = useOverlaySurface();
+    const panel = useOverlayPanelShape();
+    const appearance = props.appearance ?? (panel === undefined ? 'button' : 'switch');
+    if (appearance === 'switch') {
+        const track = overlaySwitchTrack(metrics);
+        return (_jsx(OverlayRow, { label: label, help: help, hideLabel: hideLabel, disabled: disabled, children: _jsx("button", { type: "button", "aria-pressed": checked, "aria-label": label, disabled: disabled, "data-testid": testId, style: overlaySwitchStyle(metrics, track, disabled), onClick: () => onChange(!checked), children: _jsx("span", { style: overlaySwitchTrackStyle(track, checked), children: _jsx("span", { style: overlaySwitchKnobStyle(track, checked) }) }) }) }));
+    }
+    return (_jsx(OverlayRow, { label: label, help: help, hideLabel: true, disabled: disabled, children: _jsx(Button, { variant: "minimal", size: metrics.blueprintSize, active: checked, disabled: disabled, "aria-pressed": checked, "aria-label": label, title: hideLabel ? label : undefined, icon: swatch === undefined ? (icon) : (_jsx("span", { style: overlaySwatchStyle(swatch) })), text: hideLabel ? undefined : label, "data-testid": testId, onClick: () => onChange(!checked) }) }));
+}
+//# sourceMappingURL=OverlayToggle.js.map

package/lib/overlay/ui/OverlayToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayToggle.js","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayToggle.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,0BAA0B,CAAC;AAgClC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,MAAM,EACN,IAAI,GACL,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;IACrC,MAAM,UAAU,GACd,KAAK,CAAC,UAAU,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAElE,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC1C,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,YAElB,iBACE,IAAI,EAAC,QAAQ,kBACC,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,iBACL,MAAM,EACnB,KAAK,EAAE,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,EACnD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,YAEjC,eAAM,KAAK,EAAE,uBAAuB,CAAC,KAAK,EAAE,OAAO,CAAC,YAClD,eAAM,KAAK,EAAE,sBAAsB,CAAC,KAAK,EAAE,OAAO,CAAC,GAAI,GAClD,GACA,GACE,CACd,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,QAAC,QAAQ,EAAE,QAAQ,YAChE,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,OAAO,CAAC,aAAa,EAC3B,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,QAAQ,kBACJ,OAAO,gBACT,KAAK,EACjB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACpC,IAAI,EACF,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,IAAI,CACL,CAAC,CAAC,CAAC,CACF,eAAM,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAI,CAC5C,EAEH,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,iBACtB,MAAM,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,GACjC,GACS,CACd,CAAC;AACJ,CAAC"}

package/lib/overlay/ui/OverlayValueButton.d.ts

@@ -0,0 +1,80 @@
+import type { ReactElement } from 'react';
+/** What {@link OverlayValueButton} needs. */
+export interface OverlayValueButtonProps {
+    /**
+     * What the setting is called, in full and phrased as the question the reader
+     * already has: `Colour by`, `Group outlines`. It is never the thing written
+     * on the bar — it goes into `title` and `aria-label` with the value after
+     * it, so a button showing `Species` still announces `Colour by — Species`.
+     */
+    label: string;
+    /**
+     * What the setting is currently on, which is the thing actually written:
+     * `Species`, `95%`. Write the answer rather than the jargon.
+     */
+    value: string;
+    /**
+     * The one word written in front of the value on a roomy bar.
+     * @default the label, which is right wherever the name is already one word
+     */
+    keyWord?: string;
+    /**
+     * Whether that key word is written. This is the first thing a narrowing bar
+     * turns off: the name of a setting is read once and its value every time.
+     * @default true
+     */
+    showKey?: boolean;
+    /**
+     * The figure's own colours, drawn as a row of dots in front of the words. A
+     * reader who has just looked at four groups of dots recognises them without
+     * being taught anything, which is worth more than any paint-pot glyph.
+     * @default undefined — no dots are drawn
+     */
+    swatches?: readonly string[];
+    /**
+     * Whether the choices behind it are showing.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Whether it cannot be pressed.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Why it cannot be pressed, which the pointer is told in place of the name.
+     * A greyed control that does not say why is worse than one that is missing.
+     * @default undefined — the pointer is still told the name and the value
+     */
+    disabledReason?: string;
+    /**
+     * Whether pressing it opens a menu, which is what tells a screen reader
+     * there is more behind the words than a press.
+     * @default false
+     */
+    opensMenu?: boolean;
+    /**
+     * Called when it is pressed. Leave it out inside a popover, which listens on
+     * the wrapper it puts around the button and would otherwise be told twice.
+     * @default undefined — nothing of its own happens
+     */
+    onClick?: () => void;
+    /**
+     * Value of the `data-testid` attribute.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * A setting written as its own value, with a caret saying it can be changed.
+ *
+ * It replaces the two idioms a bar used to hold for the same job — a caption
+ * beside an outlined segmented control, and a caption beside a native select —
+ * with one that costs no box at all. The reader scans the bar and reads
+ * `Species` and `95%`, which is how the figure is drawn; the names of the two
+ * settings are one press away and in every announcement.
+ * @param props - See {@link OverlayValueButtonProps}.
+ * @returns The button.
+ */
+export declare function OverlayValueButton(props: OverlayValueButtonProps): ReactElement;
+//# sourceMappingURL=OverlayValueButton.d.ts.map

package/lib/overlay/ui/OverlayValueButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayValueButton.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/OverlayValueButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAY1C,6CAA6C;AAC7C,MAAM,WAAW,uBAAuB;IACtC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,YAAY,CA0Cd"}