@scalewing/react 1.37.0 → 1.39.0

package/dist/css/css-table-bounded-edges.js

@@ -0,0 +1,132 @@
+import { scrollShadeColor } from './css-scroll-region.js';
+const region = '.sw-table-bounded';
+/*
+ * While rows are scrolled out past the top or bottom of a bounded region
+ * (`sw-scroll-more-top`, `sw-scroll-more-bottom`), that edge draws the
+ * scroll shade, a spacing step 5 deep, in the colour of the inline edges'
+ * shade. A pinned row covers the region's own edge, so the shade is cast
+ * from the pinned row instead: the header's last row extends its rule's
+ * `::before` downward into a gradient, and a sticky footer's first row
+ * extends its 2 px rule's `::before` upward into one. Both are drawn
+ * inside their pinned group's layer, over the rows that scroll under
+ * them, and no cell moves. Only the header's last row casts it, so a
+ * header cell that spans rows (`rowSpan`) from an earlier row casts none
+ * under its column. An edge with nothing pinned on it, such as a bounded
+ * table without a sticky footer, shades the region's own edge with a
+ * background layer fixed to the box, under the rows as the inline shade
+ * is. Forced colours draw no shade; the system scrollbar is the cue.
+ */
+function shadeRules() {
+    const shade = (direction) => `linear-gradient(to ${direction}, ${scrollShadeColor}, transparent)`;
+    const headCells = `${region}.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before`;
+    const footCells = `${region}.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before`;
+    const noHead = ':not(:has(> .sw-table > thead))';
+    const noPinnedFoot = ':not(:has(> .sw-table > .sw-table-footer-sticky))';
+    const ownTop = `${region}.sw-scroll-more-top${noHead}`;
+    const ownBottom = `${region}.sw-scroll-more-bottom${noPinnedFoot}`;
+    const ownBoth = `${region}.sw-scroll-more-top.sw-scroll-more-bottom${noHead}${noPinnedFoot}`;
+    return `${headCells} {
+  background: ${shade('bottom')};
+  border-bottom: 0;
+  border-top: 1px solid var(--sw-color-border);
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  inset-block-end: auto;
+  inset-block-start: calc(100% - 1px);
+}
+
+${footCells} {
+  background: ${shade('top')};
+  border-bottom: 2px solid var(--sw-color-border);
+  border-top: 0;
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  inset-block-end: calc(100% - 1px);
+  inset-block-start: auto;
+}
+
+${ownTop},
+${ownBottom} {
+  background-repeat: no-repeat;
+  background-size: 100% var(--sw-space-5);
+}
+
+${ownTop} {
+  background-image: ${shade('bottom')};
+  background-position: top;
+}
+
+${ownBottom} {
+  background-image: ${shade('top')};
+  background-position: bottom;
+}
+
+${ownBoth} {
+  background-image: ${shade('bottom')}, ${shade('top')};
+  background-position: top, bottom;
+}
+
+@media (forced-colors: active) {
+  ${headCells},
+  ${footCells} { background: none; border-color: CanvasText; }
+  ${ownTop},
+  ${ownBottom},
+  ${ownBoth} { background-image: none; }
+}`;
+}
+/*
+ * The region's focus ring is its own outline, drawn inside its edge, and
+ * the pinned header and sticky footer paint over it. While the region has
+ * keyboard focus, those pinned cells carry the ring's part they cover: an
+ * inset line at the top of the header's first row and the bottom of the
+ * footer's last row, and at the outer side of each pinned row's first and
+ * last cell (mirrored right to left). The parts are custom properties set
+ * on the cell they belong to and joined in one shadow, so a corner cell
+ * carries two. The side parts sit on the first and last cells, so they
+ * show while the region is scrolled to that inline edge, and a header
+ * cell spanning rows (`rowSpan`) puts a later row's first cell off the
+ * edge, where its side part would land mid-header. Forced colours drop
+ * shadows; the outline shows beside the rows there.
+ */
+function focusRules() {
+    const focused = `${region}:focus-visible`;
+    const head = `${focused} > .sw-table-sticky > thead`;
+    const foot = `${focused} > .sw-table > .sw-table-footer-sticky`;
+    const cells = (group, row = 'tr', cell = ':is(th, td)') => `${group} > ${row} > ${cell}`;
+    const both = (row, cell) => `${cells(head, row, cell)},\n${cells(foot, row, cell)}`;
+    const ring = 'var(--sw-focus-ring-width)';
+    const line = (x, y) => `inset ${x} ${y} 0 0 var(--sw-color-accent)`;
+    const none = '0 0 transparent';
+    return `${both('tr', ':is(th, td)')} {
+  box-shadow: var(--sw-table-ring-block, ${none}), var(--sw-table-ring-start, ${none}), var(--sw-table-ring-end, ${none});
+}
+
+${cells(head, 'tr:first-child')} {
+  --sw-table-ring-block: ${line('0', ring)};
+}
+
+${cells(foot, 'tr:last-child')} {
+  --sw-table-ring-block: ${line('0', `calc(-1 * ${ring})`)};
+}
+
+${both('tr', ':first-child')} {
+  --sw-table-ring-start: ${line(ring, '0')};
+}
+
+${both('tr', ':last-child')} {
+  --sw-table-ring-end: ${line(`calc(-1 * ${ring})`, '0')};
+}
+
+${both('tr', ':first-child:dir(rtl)')} {
+  --sw-table-ring-start: ${line(`calc(-1 * ${ring})`, '0')};
+}
+
+${both('tr', ':last-child:dir(rtl)')} {
+  --sw-table-ring-end: ${line(ring, '0')};
+}`;
+}
+export function cssTableBoundedEdgeClasses() {
+    return `${shadeRules()}
+
+${focusRules()}`;
+}

package/dist/css/css-table-bounded.d.ts

@@ -0,0 +1,2 @@
+export declare function cssTableBoundedClasses(): string;
+export declare function tableBoundedClassCatalog(): string[];

package/dist/css/css-table-bounded.js

@@ -0,0 +1,73 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { cssTableBoundedEdgeClasses } from './css-table-bounded-edges.js';
+import { tableCellPadding, tableRuleWidth, tableSortMinHeight, } from './css-table-metrics.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+/** A header row whose line is `line` tall: that line and its padding twice. */
+function headBlock(line) {
+    return `calc(${line} + 2 * var(--sw-table-cell-pad))`;
+}
+/*
+ * A bounded table (`Table maxHeight`, `sw-table-bounded` on its region)
+ * is as tall as its row count (`--sw-table-max-rows`) of single-line body
+ * rows, plus one header row when it has a `thead` and one footer row when
+ * it has a `tfoot`, from the measures its cells are drawn with
+ * (`css-table-metrics.ts`): a body row is the body line, the cell padding
+ * twice and its rule; a header row is the caption line and the padding
+ * twice (a pinned header cell draws its rule inside itself), or the sort
+ * button's height where a header sorts (the touch target on a coarse
+ * pointer). Compact density swaps the padding. Rows of two lines or with
+ * controls, a second header or footer row, and a horizontal scrollbar
+ * that takes room (classic scrollbars) leave fewer rows showing.
+ *
+ * The region already scrolls (`overflow: auto`), so the rows past that
+ * height scroll inside it, and the pinned header group (`thead`, top 0)
+ * and a sticky footer (bottom 0) pin to the region's own edges: it is
+ * their nearest scroll box. A bounded region is never marked
+ * `sw-scroll-fits`, so it never stops being a scroll box for the page
+ * pinning in `css-table-page-pin.ts`. Printed, every row shows.
+ */
+function heightRules() {
+    const sorting = '.sw-table-bounded:has(> .sw-table > thead .sw-table-sort)';
+    return `.sw-table-bounded {
+  --sw-table-cell-pad: ${tableCellPadding.comfortable.block};
+  --sw-table-head-block: 0px;
+  --sw-table-foot-rows: 0;
+  max-height: calc((var(--sw-table-max-rows) + var(--sw-table-foot-rows)) * (${body.lineHeight}px + 2 * var(--sw-table-cell-pad) + ${tableRuleWidth}) + var(--sw-table-head-block));
+}
+
+.sw-table-bounded:has(> .sw-table-compact) {
+  --sw-table-cell-pad: ${tableCellPadding.compact.block};
+}
+
+.sw-table-bounded:has(> .sw-table > thead) {
+  --sw-table-head-block: ${headBlock(`${caption.lineHeight}px`)};
+}
+
+${sorting} {
+  --sw-table-head-block: ${headBlock(`max(${caption.lineHeight}px, ${tableSortMinHeight})`)};
+}
+
+@media ${coarsePointerQuery} {
+  ${sorting} {
+    --sw-table-head-block: ${headBlock(`max(${caption.lineHeight}px, ${touchTarget})`)};
+  }
+}
+
+.sw-table-bounded:has(> .sw-table > tfoot) {
+  --sw-table-foot-rows: 1;
+}
+
+@media print {
+  .sw-table-bounded { max-height: none; }
+}`;
+}
+export function cssTableBoundedClasses() {
+    return `${heightRules()}
+
+${cssTableBoundedEdgeClasses()}`;
+}
+export function tableBoundedClassCatalog() {
+    return ['sw-table-bounded'];
+}

package/dist/css/css-table-ledger.d.ts

@@ -1,8 +1,11 @@
 /** The colours a cell's text can take: a signed figure or a quiet value. */
 export declare const tableCellTones: readonly ["success", "danger", "muted", "accent"];
 export type TableCellTone = (typeof tableCellTones)[number];
-/** A row's place in the table: a row of its own, or one under the row above. */
-export declare const tableRowVariants: readonly ["default", "sub"];
+/**
+ * A row's place in the table: a row of its own, one under the row above,
+ * or a total of the rows above it, mid-table.
+ */
+export declare const tableRowVariants: readonly ["default", "sub", "total"];
 export type TableRowVariant = (typeof tableRowVariants)[number];
 export declare function assertTableCellTone(tone: unknown): void;
 export declare function assertTableRowVariant(variant: unknown): void;

package/dist/css/css-table-ledger.js

@@ -1,7 +1,10 @@
 /** The colours a cell's text can take: a signed figure or a quiet value. */
 export const tableCellTones = ['success', 'danger', 'muted', 'accent'];
-/** A row's place in the table: a row of its own, or one under the row above. */
-export const tableRowVariants = ['default', 'sub'];
+/**
+ * A row's place in the table: a row of its own, one under the row above,
+ * or a total of the rows above it, mid-table.
+ */
+export const tableRowVariants = ['default', 'sub', 'total'];
 export function assertTableCellTone(tone) {
     if (tone !== undefined && !tableCellTones.includes(tone))
         throw new RangeError(`Unknown TableCell tone: ${String(tone)}`);

package/dist/css/css-table-metrics.d.ts

@@ -0,0 +1,14 @@
+export declare const tableCellPadding: {
+    readonly comfortable: {
+        readonly block: "var(--sw-space-2)";
+        readonly inline: "var(--sw-space-3)";
+    };
+    readonly compact: {
+        readonly block: "var(--sw-space-1)";
+        readonly inline: "var(--sw-space-2)";
+    };
+};
+/** The rule under every row (a collapsed cell border). */
+export declare const tableRuleWidth = "1px";
+/** The least height of a sortable header's button on a fine pointer. */
+export declare const tableSortMinHeight = "var(--sw-control-xs-min-height)";

package/dist/css/css-table-metrics.js

@@ -0,0 +1,13 @@
+/*
+ * The measures a table's cells are drawn with, shared by the cell rules
+ * (`css-table.ts`, `css-table-sort.ts`) and the bounded table's height
+ * (`css-table-bounded.ts`), so a change to one moves the other with it.
+ */
+export const tableCellPadding = {
+    comfortable: { block: 'var(--sw-space-2)', inline: 'var(--sw-space-3)' },
+    compact: { block: 'var(--sw-space-1)', inline: 'var(--sw-space-2)' },
+};
+/** The rule under every row (a collapsed cell border). */
+export const tableRuleWidth = '1px';
+/** The least height of a sortable header's button on a fine pointer. */
+export const tableSortMinHeight = 'var(--sw-control-xs-min-height)';

package/dist/css/css-table-sort.js

@@ -1,4 +1,5 @@
 import { chevronStroke } from './chevron.js';
+import { tableSortMinHeight } from './css-table-metrics.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 /*
  * A sortable header's button keeps the header's own text style (caption,
@@ -63,7 +64,7 @@ export function cssTableSortClasses() {
   letter-spacing: inherit;
   /* A step of room for the focus ring, taken back so the name stays on the cell's edge. */
   margin-inline: calc(-1 * var(--sw-space-1));
-  min-height: var(--sw-control-xs-min-height);
+  min-height: ${tableSortMinHeight};
   padding: 0 var(--sw-space-1);
   text-align: inherit;
 }

package/dist/css/css-table-total-row.d.ts

@@ -0,0 +1,2 @@
+export declare function cssTableTotalRowClasses(): string;
+export declare function tableTotalRowClassCatalog(): string[];

package/dist/css/css-table-total-row.js

@@ -0,0 +1,29 @@
+/*
+ * A total row mid-table (`TableRow variant="total"`), such as a subtotal
+ * the rows above add up to before the table goes on: its cells at weight
+ * 600 under the footer's heavier rule, 2 px in the border colour across
+ * its top, as a `TableFooter` total is drawn. The rule is the cells' own
+ * top border, which the collapsed-border model resolves over the row
+ * above's 1 px one, so forced colours keep it (in `CanvasText`) and no
+ * pseudo-element is taken from a selected row's bar or a sub row's guide.
+ * The row takes no fill: on the subtle fill, accent text (a link or an
+ * accent-toned figure) falls under 4.5:1 in several palettes, as the
+ * selected row's note in `css-table.ts` found. A total row belongs in the
+ * body: a pinned header cell draws its rules on its pseudo-elements
+ * instead, and a `TableFooter` already draws the total at the table's
+ * end. A cell's `tone` keeps its colour; a struck total row mutes and
+ * strikes it as any struck row.
+ */
+export function cssTableTotalRowClasses() {
+    return `.sw-table .sw-table-row-total > :is(th, td) {
+  border-top: 2px solid var(--sw-color-border);
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-table .sw-table-row-total > :is(th, td) { border-top-color: CanvasText; }
+}`;
+}
+export function tableTotalRowClassCatalog() {
+    return ['sw-table-row-total'];
+}

package/dist/css/css-table.js

@@ -1,13 +1,18 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { scrollRegionRules } from './css-scroll-region.js';
+import { tableCellPadding, tableRuleWidth } from './css-table-metrics.js';
+import { cssTableBoundedClasses, tableBoundedClassCatalog, } from './css-table-bounded.js';
 import { cssTableLayoutClasses, tableLayoutClassCatalog, } from './css-table-layout.js';
 import { cssTableLedgerClasses, tableLedgerClassCatalog, } from './css-table-ledger.js';
 import { cssTableFooterClasses, tableFooterClassCatalog, } from './css-table-footer.js';
 import { cssTablePagePinClasses, tablePagePinClassCatalog, } from './css-table-page-pin.js';
+import { cssTableTotalRowClasses, tableTotalRowClassCatalog, } from './css-table-total-row.js';
 import { cssTablePressClasses, tablePressClassCatalog, } from './css-table-press.js';
 import { cssTableStickyHeaderClasses, tableStickyHeaderClassCatalog, } from './css-table-sticky-header.js';
 import { cssTableSortClasses, tableSortClassCatalog, } from './css-table-sort.js';
 const caption = typographyVariants.caption;
+const comfortable = tableCellPadding.comfortable;
+const compact = tableCellPadding.compact;
 /*
  * A selected row is marked by an accent bar at its inline start and nothing
  * else: no fill, so text, muted text and accent text (ghost buttons, links)
@@ -45,8 +50,8 @@ export function cssTableClasses() {
 
 .sw-table th,
 .sw-table td {
-  border-bottom: 1px solid var(--sw-color-border);
-  padding: var(--sw-space-2) var(--sw-space-3);
+  border-bottom: ${tableRuleWidth} solid var(--sw-color-border);
+  padding: ${comfortable.block} ${comfortable.inline};
   text-align: start;
   vertical-align: middle;
 }
@@ -79,7 +84,7 @@ ${cssTableStickyHeaderClasses()}
 
 .sw-table-compact th,
 .sw-table-compact td {
-  padding: var(--sw-space-1) var(--sw-space-2);
+  padding: ${compact.block} ${compact.inline};
 }
 
 ${cssTableLayoutClasses()}
@@ -88,10 +93,14 @@ ${cssTableSortClasses()}
 
 ${cssTableLedgerClasses()}
 
+${cssTableTotalRowClasses()}
+
 ${cssTableFooterClasses()}
 
 ${cssTablePagePinClasses()}
 
+${cssTableBoundedClasses()}
+
 ${cssTablePressClasses()}
 
 ${selectedRowRules()}`;
@@ -109,8 +118,10 @@ export function tableClassCatalog() {
         ...tableLayoutClassCatalog(),
         ...tableSortClassCatalog(),
         ...tableLedgerClassCatalog(),
+        ...tableTotalRowClassCatalog(),
         ...tableFooterClassCatalog(),
         ...tablePagePinClassCatalog(),
+        ...tableBoundedClassCatalog(),
         ...tablePressClassCatalog(),
     ];
 }

package/dist/css/stylesheet.js

@@ -1,4 +1,5 @@
 import { cardVariants, darkTheme, lightTheme, typographyVariants, } from '@scalewing/tokens';
+import { chartToneClassCatalog } from './chart-tones.js';
 import { actionBarClassCatalog } from './css-action-bar.js';
 import { actionMenuClassCatalog } from './css-action-menu.js';
 import { accordionClassCatalog } from './css-accordion.js';
@@ -30,7 +31,12 @@ import { boxBorderClassCatalog } from './css-box-border.js';
 import { boxLinkClassCatalog } from './css-box-link.js';
 import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
-import { chartClassCatalog } from './css-chart.js';
+import { barChartClassCatalog } from './css-bar-chart.js';
+import { chartLegendClassCatalog } from './css-chart-legend.js';
+import { chartPlotClassCatalog } from './css-chart-plot.js';
+import { lineChartClassCatalog } from './css-line-chart.js';
+import { dataBarClassCatalog } from './css-data-bar.js';
+import { paginationClassCatalog } from './css-pagination.js';
 import { dataClassCatalog } from './css-data.js';
 import { segmentedClassCatalog } from './css-segmented.js';
 import { tableClassCatalog } from './css-table.js';
@@ -68,7 +74,13 @@ export function utilityClassCatalog() {
         ...segmentedClassCatalog(),
         ...tableClassCatalog(),
         ...scrollRegionClassCatalog(),
-        ...chartClassCatalog(),
+        ...barChartClassCatalog(),
+        ...dataBarClassCatalog(),
+        ...chartToneClassCatalog(),
+        ...chartLegendClassCatalog(),
+        ...chartPlotClassCatalog(),
+        ...lineChartClassCatalog(),
+        ...paginationClassCatalog(),
         ...chromeClassCatalog(),
         ...sectionNavClassCatalog(),
         ...dialogClassCatalog(),

package/dist/data-bar-geometry.d.ts

@@ -0,0 +1,24 @@
+/** Where a range bar sits on its track, as shares of the track (0 to 1). */
+export type DataBarGeometry = {
+    /** The bar's inline start, from the track's start. */
+    start: number;
+    /** The bar's length. */
+    size: number;
+    /** Where zero falls, when the domain runs from below zero to above it. */
+    zero: number | null;
+    /**
+     * Which end of the bar meets the zero line on such a domain: `start`
+     * for a bar from zero toward the domain's end (a positive value), `end`
+     * for one from below zero up to it, `null` when neither end is zero.
+     */
+    zeroEnd: 'start' | 'end' | null;
+};
+/**
+ * Places the range from `from` to `to` on a track whose domain runs from
+ * `min` to `max`: the bar starts at the smaller end and runs to the larger,
+ * each clamped to the domain, so a value just past it from rounding stays
+ * on the track. A domain from below zero to above it has a zero line, and
+ * the bar says which of its ends meets it.
+ * Non-finite numbers, or a `min` not under `max`, throw a `RangeError`.
+ */
+export declare function dataBarGeometry(from: number, to: number, min: number, max: number): DataBarGeometry;

package/dist/data-bar-geometry.js

@@ -0,0 +1,41 @@
+function assertFinite(name, value) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        throw new RangeError(`DataBar ${name} must be a finite number: ${String(value)}`);
+}
+function share(value, min, span) {
+    return (Math.min(Math.max(value, min), min + span) - min) / span;
+}
+/**
+ * Places the range from `from` to `to` on a track whose domain runs from
+ * `min` to `max`: the bar starts at the smaller end and runs to the larger,
+ * each clamped to the domain, so a value just past it from rounding stays
+ * on the track. A domain from below zero to above it has a zero line, and
+ * the bar says which of its ends meets it.
+ * Non-finite numbers, or a `min` not under `max`, throw a `RangeError`.
+ */
+export function dataBarGeometry(from, to, min, max) {
+    assertFinite('from', from);
+    assertFinite('to', to);
+    assertFinite('min', min);
+    assertFinite('max', max);
+    if (min >= max)
+        throw new RangeError(`DataBar min must be under max: min ${min}, max ${max}`);
+    const span = max - min;
+    const low = Math.min(from, to);
+    const high = Math.max(from, to);
+    const start = share(low, min, span);
+    const end = share(high, min, span);
+    const diverging = min < 0 && max > 0;
+    return {
+        start,
+        size: end - start,
+        zero: diverging ? share(0, min, span) : null,
+        zeroEnd: !diverging || low === high
+            ? null
+            : low === 0
+                ? 'start'
+                : high === 0
+                    ? 'end'
+                    : null,
+    };
+}

package/dist/index.d.ts

@@ -16,6 +16,11 @@ export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './comp
 export { AppHeader, appHeaderAppearances, type AppHeaderAppearance, type AppHeaderProps, } from './components/AppHeader.js';
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
+export { ChartLegend, type ChartFillTone, type ChartLegendItem, type ChartLegendProps, type ChartLegendSwatch, type ChartStrokeTone, type ChartTone, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
+export { ColumnChart, type ColumnChartCallout, type ColumnChartLine, type ColumnChartMode, type ColumnChartProps, type ColumnChartSeries, columnChartModes, } from './components/ColumnChart.js';
+export { LineChart, type LineChartCurve, type LineChartMarker, type LineChartPeriod, type LineChartPoint, type LineChartProps, lineChartCurves, } from './components/LineChart.js';
+export { DataBar, type DataBarProps, type DataBarTone, dataBarTones, } from './components/DataBar.js';
+export { Pagination, type PaginationLabels, type PaginationProps, } from './components/Pagination.js';
 export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } from './components/Box.js';
@@ -42,7 +47,7 @@ export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
 export { MultiSelect, type MultiSelectAlign, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableProps, type TableRowProps, type TableRowVariant, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowVariant, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';

package/dist/index.js

@@ -15,6 +15,11 @@ export { RadioGroup, } from './components/RadioGroup.js';
 export { AppHeader, appHeaderAppearances, } from './components/AppHeader.js';
 export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, barChartTones, } from './components/BarChart.js';
+export { ChartLegend, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
+export { ColumnChart, columnChartModes, } from './components/ColumnChart.js';
+export { LineChart, lineChartCurves, } from './components/LineChart.js';
+export { DataBar, dataBarTones, } from './components/DataBar.js';
+export { Pagination, } from './components/Pagination.js';
 export { Button, } from './components/Button.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, } from './components/Box.js';

package/dist/is-one-of.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether a value is one of a list of names, narrowing it to the list's
+ * type: a component's check of a prop against its allowed values.
+ */
+export declare function isOneOf<Name extends string>(names: readonly Name[], value: unknown): value is Name;

package/dist/is-one-of.js

@@ -0,0 +1,7 @@
+/**
+ * Whether a value is one of a list of names, narrowing it to the list's
+ * type: a component's check of a prop against its allowed values.
+ */
+export function isOneOf(names, value) {
+    return names.includes(value);
+}

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

@@ -0,0 +1,39 @@
+import { type ChartStrokeTone } from './css/chart-tones.js';
+import { type LineChartCurve } from './line-chart-path.js';
+/** A value on a date (`YYYY-MM-DD`). */
+export type LineChartPoint = {
+    x: string;
+    y: number;
+};
+/** A downward triangle on the line at one of its points' dates, with words. */
+export type LineChartMarker = {
+    x: string;
+    label: string;
+    tone: ChartStrokeTone;
+};
+/** A period to box, from its first date to its last. */
+export type LineChartPeriod = {
+    from: string;
+    to: string;
+};
+export type LineChartInput = {
+    label: string;
+    valueLabel?: string;
+    points: readonly LineChartPoint[];
+    curve: LineChartCurve;
+    tone: ChartStrokeTone;
+    markers: readonly LineChartMarker[];
+    markersLabel?: string;
+    ticks?: readonly string[];
+    highlight?: LineChartPeriod;
+};
+/** A date's day count, or a refusal naming what it was. */
+export declare function lineChartDay(what: string, value: string): number;
+/**
+ * Refuses what a line chart cannot draw, with a `RangeError`: empty words,
+ * a date that is not `YYYY-MM-DD`, points out of date order, a value that
+ * is not finite, an unknown curve or tone, a marker off the points' dates
+ * or markers without `markersLabel`, a tick outside the points' dates, and
+ * a period that ends before it starts.
+ */
+export declare function assertLineChartInput(input: LineChartInput): void;

package/dist/line-chart-input.js

@@ -0,0 +1,70 @@
+import { dayNumber } from './chart-dates.js';
+import { chartStrokeTones } from './css/chart-tones.js';
+import { isOneOf } from './is-one-of.js';
+import { lineChartCurves } from './line-chart-path.js';
+function refuse(message) {
+    throw new RangeError(`LineChart ${message}`);
+}
+function assertWords(what, value) {
+    if (typeof value !== 'string' || value.trim() === '')
+        refuse(`${what} must not be empty`);
+}
+/** A date's day count, or a refusal naming what it was. */
+export function lineChartDay(what, value) {
+    const day = typeof value === 'string' ? dayNumber(value) : null;
+    if (day === null)
+        refuse(`${what} must be a YYYY-MM-DD date: ${String(value)}`);
+    return day;
+}
+function assertTone(what, tone) {
+    if (!isOneOf(chartStrokeTones, tone))
+        refuse(`${what} must be one of ${chartStrokeTones.join(', ')}; received ${String(tone)}`);
+}
+/**
+ * Refuses what a line chart cannot draw, with a `RangeError`: empty words,
+ * a date that is not `YYYY-MM-DD`, points out of date order, a value that
+ * is not finite, an unknown curve or tone, a marker off the points' dates
+ * or markers without `markersLabel`, a tick outside the points' dates, and
+ * a period that ends before it starts.
+ */
+export function assertLineChartInput(input) {
+    assertWords('label', input.label);
+    if (input.valueLabel !== undefined)
+        assertWords('valueLabel', input.valueLabel);
+    if (!isOneOf(lineChartCurves, input.curve))
+        refuse(`curve must be one of ${lineChartCurves.join(', ')}; received ${String(input.curve)}`);
+    assertTone('tone', input.tone);
+    let previous = -Infinity;
+    for (const point of input.points) {
+        const day = lineChartDay('point x', point.x);
+        if (day < previous)
+            refuse(`points must be in date order: ${point.x} comes after a later date`);
+        previous = day;
+        if (typeof point.y !== 'number' || !Number.isFinite(point.y))
+            refuse(`point y must be a finite number: ${String(point.y)}`);
+    }
+    const dates = new Set(input.points.map((point) => point.x));
+    if (input.markers.length > 0)
+        assertWords('markersLabel', input.markersLabel);
+    for (const marker of input.markers) {
+        if (!dates.has(marker.x))
+            refuse(`marker x must be one of the points' dates: ${String(marker.x)}`);
+        assertWords('marker label', marker.label);
+        assertTone('marker tone', marker.tone);
+    }
+    const first = input.points[0]?.x;
+    const last = input.points.at(-1)?.x;
+    for (const tick of input.ticks ?? []) {
+        const day = lineChartDay('tick', tick);
+        if (first === undefined ||
+            day < lineChartDay('point x', first) ||
+            day > lineChartDay('point x', last))
+            refuse(`tick must fall within the points' dates: ${tick}`);
+    }
+    if (input.highlight) {
+        const from = lineChartDay('highlight from', input.highlight.from);
+        const to = lineChartDay('highlight to', input.highlight.to);
+        if (to < from)
+            refuse('highlight must not end before it starts');
+    }
+}