@scalewing/react 1.38.0 → 1.40.0

package/dist/line-chart-markers.js

@@ -0,0 +1,57 @@
+import { chartInset, chartMarkerSize, chartTextWidth, chartType, } from './chart-metrics.js';
+function meets(a, b) {
+    return (a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom);
+}
+/**
+ * A centre for words `width` wide that keeps them over the plot, clear of
+ * the value axis's words and the last value beside it; centred on the plot
+ * when they are wider than it.
+ */
+function overPlot(x, width, plot) {
+    const low = plot.left + width / 2;
+    const high = plot.right - width / 2;
+    if (low > high)
+        return (plot.left + plot.right) / 2;
+    return Math.min(Math.max(x, low), high);
+}
+/**
+ * Places each marker at the line's height on its date: the triangle a
+ * small inset under the line, its words under it (moved in to stay over
+ * the plot), or both above the line when the words would pass the plot's
+ * bottom.
+ */
+export function placeMarkers(markers, plot) {
+    const half = chartMarkerSize / 2;
+    const shown = [];
+    return markers.map((marker, order) => {
+        const below = marker.y + chartInset + chartMarkerSize + chartType.lineHeight <=
+            plot.bottom;
+        const top = below
+            ? marker.y + chartInset
+            : marker.y - chartInset - chartMarkerSize;
+        const bottom = top + chartMarkerSize;
+        const labelY = below
+            ? bottom + chartType.fontSize
+            : top - (chartType.lineHeight - chartType.fontSize);
+        const width = chartTextWidth(marker.label);
+        const labelX = overPlot(marker.x, width, plot);
+        const box = {
+            left: labelX - width / 2,
+            right: labelX + width / 2,
+            top: labelY - chartType.fontSize,
+            bottom: labelY + (chartType.lineHeight - chartType.fontSize),
+        };
+        const labelShown = !shown.some((taken) => meets(taken, box));
+        if (labelShown)
+            shown.push(box);
+        return {
+            order,
+            x: marker.x,
+            labelX,
+            triangle: `${marker.x - half},${top} ${marker.x + half},${top} ${marker.x},${bottom}`,
+            labelY,
+            label: marker.label,
+            labelShown,
+        };
+    });
+}

package/dist/line-chart-path.d.ts

@@ -0,0 +1,18 @@
+/** How a line runs between its points. */
+export declare const lineChartCurves: readonly ["linear", "step"];
+export type LineChartCurve = (typeof lineChartCurves)[number];
+/** A point in the chart's pixels. */
+export type ChartPoint = {
+    x: number;
+    y: number;
+};
+/**
+ * The vertices a line is drawn through. `linear` joins each point to the
+ * next; `step` holds each value until the next point's date, then moves
+ * straight up or down to it, as a balance that changes on a day does.
+ */
+export declare function linePath(points: readonly ChartPoint[], curve: LineChartCurve): ChartPoint[];
+/** The area under a line's path, closed along the zero line. */
+export declare function areaPath(path: readonly ChartPoint[], zeroY: number): ChartPoint[];
+/** Vertices as an SVG `points` list. */
+export declare function svgPoints(path: readonly ChartPoint[]): string;

package/dist/line-chart-path.js

@@ -0,0 +1,33 @@
+/** How a line runs between its points. */
+export const lineChartCurves = ['linear', 'step'];
+/**
+ * The vertices a line is drawn through. `linear` joins each point to the
+ * next; `step` holds each value until the next point's date, then moves
+ * straight up or down to it, as a balance that changes on a day does.
+ */
+export function linePath(points, curve) {
+    if (curve === 'linear')
+        return [...points];
+    const path = [];
+    points.forEach((point, index) => {
+        const previous = points[index - 1];
+        if (previous)
+            path.push({ x: point.x, y: previous.y });
+        path.push(point);
+    });
+    return path;
+}
+/** The area under a line's path, closed along the zero line. */
+export function areaPath(path, zeroY) {
+    if (path.length === 0)
+        return [];
+    return [
+        { x: path[0].x, y: zeroY },
+        ...path,
+        { x: path.at(-1).x, y: zeroY },
+    ];
+}
+/** Vertices as an SVG `points` list. */
+export function svgPoints(path) {
+    return path.map((point) => `${point.x},${point.y}`).join(' ');
+}

package/dist/line-chart-points.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Each date's closing point: the index of the last point on it. A balance
+ * can change twice on one day; the day's markers and figures belong to its
+ * closing value.
+ */
+export declare function closingIndexes<Day>(days: readonly Day[]): Map<Day, number>;

package/dist/line-chart-points.js

@@ -0,0 +1,8 @@
+/**
+ * Each date's closing point: the index of the last point on it. A balance
+ * can change twice on one day; the day's markers and figures belong to its
+ * closing value.
+ */
+export function closingIndexes(days) {
+    return new Map(days.map((day, index) => [day, index]));
+}

package/dist/line-chart-table.d.ts

@@ -0,0 +1,15 @@
+import { type ChartTableRow } from './chart-table-rows.js';
+import { type LineChartMarker, type LineChartPeriod, type LineChartPoint } from './line-chart-input.js';
+/**
+ * A line chart's hidden table rows: one per point, headed by its date in
+ * the consumer's words, holding its value and (when the chart has markers)
+ * the words of the markers on its date, in the date's closing row only;
+ * the rows inside the boxed period are current.
+ */
+export declare function lineChartRows({ formatDate, formatValue, highlight, markers, points, }: {
+    points: readonly LineChartPoint[];
+    markers: readonly LineChartMarker[];
+    highlight: LineChartPeriod | undefined;
+    formatDate: (date: string) => string;
+    formatValue: (value: number) => string;
+}): ChartTableRow[];

package/dist/line-chart-table.js

@@ -0,0 +1,29 @@
+import { closingIndexes } from './line-chart-points.js';
+/**
+ * A line chart's hidden table rows: one per point, headed by its date in
+ * the consumer's words, holding its value and (when the chart has markers)
+ * the words of the markers on its date, in the date's closing row only;
+ * the rows inside the boxed period are current.
+ */
+export function lineChartRows({ formatDate, formatValue, highlight, markers, points, }) {
+    const closing = closingIndexes(points.map((point) => point.x));
+    return points.map((point, index) => {
+        const cells = [formatValue(point.y)];
+        if (markers.length > 0)
+            cells.push(closing.get(point.x) === index
+                ? markers
+                    .filter((marker) => marker.x === point.x)
+                    .map((marker) => marker.label)
+                    .join(', ')
+                : '');
+        return {
+            key: `${point.x}-${index}`,
+            header: formatDate(point.x),
+            cells,
+            // YYYY-MM-DD dates compare in date order as text.
+            current: highlight !== undefined &&
+                point.x >= highlight.from &&
+                point.x <= highlight.to,
+        };
+    });
+}

package/dist/list-options.d.ts

@@ -0,0 +1,70 @@
+import { type CSSProperties } from 'react';
+import { type TableCellTone } from './css/css-table-ledger.js';
+/**
+ * `panel` (the default) is one bordered panel on the surface; `plain`
+ * draws no panel and a hairline above the first row too, for rows inside
+ * a surface that already has one, such as a Card.
+ */
+export declare const listGroupVariants: readonly ["panel", "plain"];
+export type ListGroupVariant = (typeof listGroupVariants)[number];
+/**
+ * A list's bounded height, counted in rows: as tall as `rows` rows of a
+ * title and one detail line, the rest scrolling inside it. Taller rows
+ * show fewer at a time, shorter ones more.
+ */
+export type ListGroupMaxHeight = {
+    rows: number;
+};
+/** `danger` draws the title in the danger colour, for a row that ends something. */
+export declare const listRowTones: readonly ["default", "danger"];
+export type ListRowTone = (typeof listRowTones)[number];
+/** `strong` (the default) sets the title at the label weight; `plain` at the body's. */
+export declare const listRowTitleAppearances: readonly ["strong", "plain"];
+export type ListRowTitleAppearance = (typeof listRowTitleAppearances)[number];
+/** The colours a row's value can take, as a table cell's. */
+export declare const listRowValueTones: readonly ["success", "danger", "muted", "accent"];
+export type ListRowValueTone = TableCellTone;
+/** What ends a row: a chevron (it opens something), a check (chosen), or none. */
+export type ListRowAccessory = 'chevron' | 'check' | 'none';
+export type ListGroupInput = {
+    label: string | undefined;
+    labelledBy: string | undefined;
+    variant: unknown;
+    maxHeight: ListGroupMaxHeight | undefined;
+};
+/**
+ * Fails closed on a ListGroup it cannot draw: an unknown variant, a
+ * `maxHeight` that is not a whole row count from 1, or a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it holds).
+ */
+export declare function assertListGroup({ label, labelledBy, variant, maxHeight, }: ListGroupInput): void;
+/** The row count the generated `sw-list-group-scroll` height reads. */
+export declare function listMaxHeightStyle(maxHeight: ListGroupMaxHeight): CSSProperties;
+export type ListRowInput = {
+    title: string;
+    tone: unknown;
+    titleAppearance: unknown;
+    valueTone: unknown;
+    accessory: unknown;
+    value: string | undefined;
+    valueDetail: string | undefined;
+    selected: boolean | undefined;
+    pressable: boolean;
+};
+/**
+ * Fails closed on a ListRow it cannot draw: an empty title or value, an
+ * unknown tone, title appearance, value tone or accessory, a `valueDetail`
+ * or `valueTone` with no value, or `selected` on a row that is not a
+ * button or link (its check would be a state nothing can read).
+ */
+export declare function assertListRow(input: ListRowInput): void;
+/**
+ * The row's end: a check while `selected`, nothing for an unchosen choice,
+ * a chevron on a row that opens something (unless `accessory` is `none`),
+ * and nothing on a read-only row.
+ */
+export declare function listRowAccessory(options: {
+    pressable: boolean;
+    selected: boolean | undefined;
+    accessory: 'chevron' | 'none';
+}): ListRowAccessory;

package/dist/list-options.js

@@ -0,0 +1,77 @@
+import { tableCellTones } from './css/css-table-ledger.js';
+import { isOneOf } from './is-one-of.js';
+/**
+ * `panel` (the default) is one bordered panel on the surface; `plain`
+ * draws no panel and a hairline above the first row too, for rows inside
+ * a surface that already has one, such as a Card.
+ */
+export const listGroupVariants = ['panel', 'plain'];
+/** `danger` draws the title in the danger colour, for a row that ends something. */
+export const listRowTones = ['default', 'danger'];
+/** `strong` (the default) sets the title at the label weight; `plain` at the body's. */
+export const listRowTitleAppearances = ['strong', 'plain'];
+/** The colours a row's value can take, as a table cell's. */
+export const listRowValueTones = tableCellTones;
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+/**
+ * Fails closed on a ListGroup it cannot draw: an unknown variant, a
+ * `maxHeight` that is not a whole row count from 1, or a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it holds).
+ */
+export function assertListGroup({ label, labelledBy, variant, maxHeight, }) {
+    if (!isOneOf(listGroupVariants, variant))
+        throw new RangeError(`Unknown ListGroup variant: ${String(variant)}`);
+    if (maxHeight === undefined)
+        return;
+    const rows = typeof maxHeight === 'object' && maxHeight !== null
+        ? maxHeight.rows
+        : undefined;
+    if (typeof rows !== 'number' || !Number.isInteger(rows) || rows < 1)
+        throw new RangeError('ListGroup maxHeight must be { rows } with a whole number from 1');
+    if (isBlank(label) && isBlank(labelledBy))
+        throw new RangeError('A ListGroup with maxHeight needs aria-label or aria-labelledby');
+}
+/** The row count the generated `sw-list-group-scroll` height reads. */
+export function listMaxHeightStyle(maxHeight) {
+    return { '--sw-list-max-rows': maxHeight.rows };
+}
+/**
+ * Fails closed on a ListRow it cannot draw: an empty title or value, an
+ * unknown tone, title appearance, value tone or accessory, a `valueDetail`
+ * or `valueTone` with no value, or `selected` on a row that is not a
+ * button or link (its check would be a state nothing can read).
+ */
+export function assertListRow(input) {
+    if (isBlank(input.title))
+        throw new RangeError('ListRow title must be non-empty text');
+    if (!isOneOf(listRowTones, input.tone))
+        throw new RangeError(`Unknown ListRow tone: ${String(input.tone)}`);
+    if (!isOneOf(listRowTitleAppearances, input.titleAppearance))
+        throw new RangeError(`Unknown ListRow titleAppearance: ${String(input.titleAppearance)}`);
+    if (input.valueTone !== undefined &&
+        !isOneOf(listRowValueTones, input.valueTone))
+        throw new RangeError(`Unknown ListRow valueTone: ${String(input.valueTone)}`);
+    if (!isOneOf(['chevron', 'none'], input.accessory))
+        throw new RangeError(`Unknown ListRow accessory: ${String(input.accessory)}`);
+    if (input.value !== undefined && isBlank(input.value))
+        throw new RangeError('ListRow value must be non-empty text');
+    if (input.selected !== undefined && !input.pressable)
+        throw new RangeError('A ListRow choice (selected) needs onPress or href to say its state');
+    if (input.value === undefined &&
+        (input.valueDetail !== undefined || input.valueTone !== undefined))
+        throw new RangeError('ListRow valueDetail and valueTone need a value');
+}
+/**
+ * The row's end: a check while `selected`, nothing for an unchosen choice,
+ * a chevron on a row that opens something (unless `accessory` is `none`),
+ * and nothing on a read-only row.
+ */
+export function listRowAccessory(options) {
+    if (options.selected !== undefined)
+        return options.selected ? 'check' : 'none';
+    if (!options.pressable)
+        return 'none';
+    return options.accessory;
+}