@openwarelabs/ui 0.11.1 → 0.12.1

package/dist/components/AppShell/AppShell.context.d.cts

@@ -0,0 +1,21 @@
+export interface AppShellState {
+    /** The sidebar is folded down to its icons (wide screens only; the phone drawer is never folded). */
+    collapsed: boolean;
+    setCollapsed(collapsed: boolean): void;
+    toggleCollapsed(): void;
+    /** Whether the sidebar can fold at all: AppShell's `collapsible`. */
+    collapsible: boolean;
+    /** True inside the phone drawer, false in the sidebar beside the page. */
+    inDrawer: boolean;
+    /** Opens and closes the phone drawer. Choosing a NavItem closes it by itself. */
+    openNavigation(): void;
+    closeNavigation(): void;
+    /** The sidebar's id, for aria-controls. */
+    sidebarId: string;
+}
+export declare const AppShellContext: import("react").Context<AppShellState | null>;
+/**
+ * The shell around the component: whether the sidebar is folded, and ways to fold it or open and close the phone
+ * drawer. Null outside an AppShell.
+ */
+export declare function useAppShell(): AppShellState | null;

package/dist/components/AppShell/AppShell.context.d.ts

@@ -0,0 +1,21 @@
+export interface AppShellState {
+    /** The sidebar is folded down to its icons (wide screens only; the phone drawer is never folded). */
+    collapsed: boolean;
+    setCollapsed(collapsed: boolean): void;
+    toggleCollapsed(): void;
+    /** Whether the sidebar can fold at all: AppShell's `collapsible`. */
+    collapsible: boolean;
+    /** True inside the phone drawer, false in the sidebar beside the page. */
+    inDrawer: boolean;
+    /** Opens and closes the phone drawer. Choosing a NavItem closes it by itself. */
+    openNavigation(): void;
+    closeNavigation(): void;
+    /** The sidebar's id, for aria-controls. */
+    sidebarId: string;
+}
+export declare const AppShellContext: import("react").Context<AppShellState | null>;
+/**
+ * The shell around the component: whether the sidebar is folded, and ways to fold it or open and close the phone
+ * drawer. Null outside an AppShell.
+ */
+export declare function useAppShell(): AppShellState | null;

package/dist/components/AppShell/AppShell.d.cts

@@ -0,0 +1,17 @@
+import type { AppShellProps, SidebarSectionProps, SidebarToggleProps } from "./AppShell.types.cjs";
+export { useAppShell } from "./AppShell.context.cjs";
+export type { AppShellState } from "./AppShell.context.cjs";
+export type { AppShellProps, SidebarSectionProps, SidebarToggleProps } from "./AppShell.types.cjs";
+/**
+ * An app's frame: a sidebar down the left and the page beside it. When the shell is narrower than its breakpoint
+ * (900px by default) the sidebar folds into a drawer behind a bar at the top. With `collapsible`, people can fold the sidebar to its icons.
+ */
+export declare function AppShell({ sidebar, children, variant, collapsible, collapsed, defaultCollapsed, onCollapsedChange, breakpoint, topbar, topbarActions, labels, className, ...props }: AppShellProps): import("react").JSX.Element;
+/** The top of the sidebar: the logo, a workspace switcher, a search button. It stays put while the content scrolls. */
+export declare function SidebarHeader({ className, ...props }: SidebarSectionProps): import("react").JSX.Element;
+/** The middle of the sidebar, usually NavLists. It scrolls when it's taller than the screen. */
+export declare function SidebarContent({ className, children, ...props }: SidebarSectionProps): import("react").JSX.Element;
+/** The bottom of the sidebar: the account, help, a SidebarToggle. */
+export declare function SidebarFooter({ className, ...props }: SidebarSectionProps): import("react").JSX.Element;
+/** Folds the sidebar to its icons and back. It shows only beside the page in a `collapsible` AppShell, not in the phone drawer. */
+export declare function SidebarToggle({ labels, className }: SidebarToggleProps): import("react").JSX.Element | null;

package/dist/components/AppShell/AppShell.d.ts

@@ -0,0 +1,17 @@
+import type { AppShellProps, SidebarSectionProps, SidebarToggleProps } from "./AppShell.types.js";
+export { useAppShell } from "./AppShell.context.js";
+export type { AppShellState } from "./AppShell.context.js";
+export type { AppShellProps, SidebarSectionProps, SidebarToggleProps } from "./AppShell.types.js";
+/**
+ * An app's frame: a sidebar down the left and the page beside it. When the shell is narrower than its breakpoint
+ * (900px by default) the sidebar folds into a drawer behind a bar at the top. With `collapsible`, people can fold the sidebar to its icons.
+ */
+export declare function AppShell({ sidebar, children, variant, collapsible, collapsed, defaultCollapsed, onCollapsedChange, breakpoint, topbar, topbarActions, labels, className, ...props }: AppShellProps): import("react").JSX.Element;
+/** The top of the sidebar: the logo, a workspace switcher, a search button. It stays put while the content scrolls. */
+export declare function SidebarHeader({ className, ...props }: SidebarSectionProps): import("react").JSX.Element;
+/** The middle of the sidebar, usually NavLists. It scrolls when it's taller than the screen. */
+export declare function SidebarContent({ className, children, ...props }: SidebarSectionProps): import("react").JSX.Element;
+/** The bottom of the sidebar: the account, help, a SidebarToggle. */
+export declare function SidebarFooter({ className, ...props }: SidebarSectionProps): import("react").JSX.Element;
+/** Folds the sidebar to its icons and back. It shows only beside the page in a `collapsible` AppShell, not in the phone drawer. */
+export declare function SidebarToggle({ labels, className }: SidebarToggleProps): import("react").JSX.Element | null;

package/dist/components/AppShell/AppShell.types.d.cts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** What goes down the left: a SidebarHeader, a SidebarContent with NavLists, a SidebarFooter. On narrow screens the same goes in a drawer. */
+    sidebar: ReactNode;
+    /** The page. It goes in a `main` landmark. */
+    children: ReactNode;
+    /** `inset` puts the page on a raised panel beside the sidebar, on the canvas; `flat` puts it straight on the surface, with a line between them.
+     * @default "inset" */
+    variant?: "inset" | "flat";
+    /** Lets people fold the sidebar down to its icons, with a SidebarToggle. Labels show as tooltips while it's folded. @default false */
+    collapsible?: boolean;
+    /** Folded, when you control it. */
+    collapsed?: boolean;
+    /** Folded at first, when it controls itself. @default false */
+    defaultCollapsed?: boolean;
+    /** Called when it folds or unfolds: keep `collapsed` here, or save the choice. */
+    onCollapsedChange?(collapsed: boolean): void;
+    /** How narrow the shell gets before the sidebar folds into a drawer: `sm` under 560px, `md` under 900px, `lg` under
+     * 1200px. It's the shell's own width, not the window's.
+     * @default "md" */
+    breakpoint?: "sm" | "md" | "lg";
+    /** The left of the bar on narrow screens, beside the menu button: usually the logo and the app's name. */
+    topbar?: ReactNode;
+    /** The right of the bar on narrow screens: a search or an account button. */
+    topbarActions?: ReactNode;
+    /** The words it uses, for other languages. */
+    labels?: {
+        /** Names the sidebar for screen readers. @default "Main navigation" */
+        navigation?: string;
+        /** The menu button on narrow screens. @default "Open navigation" */
+        openNavigation?: string;
+        /** The drawer's title. @default "Menu" */
+        menu?: string;
+    };
+}
+export interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface SidebarToggleProps {
+    /** @default { collapse: "Collapse sidebar", expand: "Expand sidebar" } */
+    labels?: {
+        collapse?: string;
+        expand?: string;
+    };
+    className?: string;
+}

package/dist/components/AppShell/AppShell.types.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** What goes down the left: a SidebarHeader, a SidebarContent with NavLists, a SidebarFooter. On narrow screens the same goes in a drawer. */
+    sidebar: ReactNode;
+    /** The page. It goes in a `main` landmark. */
+    children: ReactNode;
+    /** `inset` puts the page on a raised panel beside the sidebar, on the canvas; `flat` puts it straight on the surface, with a line between them.
+     * @default "inset" */
+    variant?: "inset" | "flat";
+    /** Lets people fold the sidebar down to its icons, with a SidebarToggle. Labels show as tooltips while it's folded. @default false */
+    collapsible?: boolean;
+    /** Folded, when you control it. */
+    collapsed?: boolean;
+    /** Folded at first, when it controls itself. @default false */
+    defaultCollapsed?: boolean;
+    /** Called when it folds or unfolds: keep `collapsed` here, or save the choice. */
+    onCollapsedChange?(collapsed: boolean): void;
+    /** How narrow the shell gets before the sidebar folds into a drawer: `sm` under 560px, `md` under 900px, `lg` under
+     * 1200px. It's the shell's own width, not the window's.
+     * @default "md" */
+    breakpoint?: "sm" | "md" | "lg";
+    /** The left of the bar on narrow screens, beside the menu button: usually the logo and the app's name. */
+    topbar?: ReactNode;
+    /** The right of the bar on narrow screens: a search or an account button. */
+    topbarActions?: ReactNode;
+    /** The words it uses, for other languages. */
+    labels?: {
+        /** Names the sidebar for screen readers. @default "Main navigation" */
+        navigation?: string;
+        /** The menu button on narrow screens. @default "Open navigation" */
+        openNavigation?: string;
+        /** The drawer's title. @default "Menu" */
+        menu?: string;
+    };
+}
+export interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface SidebarToggleProps {
+    /** @default { collapse: "Collapse sidebar", expand: "Expand sidebar" } */
+    labels?: {
+        collapse?: string;
+        expand?: string;
+    };
+    className?: string;
+}

package/dist/components/Chart/BarChart.d.cts

@@ -0,0 +1,6 @@
+import type { BarChartProps } from "./Chart.types.cjs";
+/**
+ * Bars from a zero baseline, for comparing amounts: side by side, or stacked to show the parts of a whole. Hover,
+ * or focus it and use the arrow keys, to read each bar; screen readers get every number as a table.
+ */
+export declare function BarChart(props: BarChartProps): import("react").JSX.Element;

package/dist/components/Chart/BarChart.d.ts

@@ -0,0 +1,6 @@
+import type { BarChartProps } from "./Chart.types.js";
+/**
+ * Bars from a zero baseline, for comparing amounts: side by side, or stacked to show the parts of a whole. Hover,
+ * or focus it and use the arrow keys, to read each bar; screen readers get every number as a table.
+ */
+export declare function BarChart(props: BarChartProps): import("react").JSX.Element;

package/dist/components/Chart/Cartesian.d.cts

@@ -0,0 +1,8 @@
+import type { BarChartProps, LineChartProps } from "./Chart.types.cjs";
+type Props = (LineChartProps & {
+    kind: "line";
+}) | (BarChartProps & {
+    kind: "bar";
+});
+export declare function CartesianChart(props: Props): import("react").JSX.Element;
+export {};

package/dist/components/Chart/Cartesian.d.ts

@@ -0,0 +1,8 @@
+import type { BarChartProps, LineChartProps } from "./Chart.types.js";
+type Props = (LineChartProps & {
+    kind: "line";
+}) | (BarChartProps & {
+    kind: "bar";
+});
+export declare function CartesianChart(props: Props): import("react").JSX.Element;
+export {};

package/dist/components/Chart/Chart.d.cts

@@ -0,0 +1,5 @@
+export { LineChart } from "./LineChart.cjs";
+export { BarChart } from "./BarChart.cjs";
+export { DonutChart } from "./DonutChart.cjs";
+export { Sparkline } from "./Sparkline.cjs";
+export type { BarChartProps, CartesianChartProps, ChartColor, ChartRow, ChartSeries, DonutChartProps, DonutChartSlice, LineChartProps, SparklineProps, } from "./Chart.types.cjs";

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,5 @@
+export { LineChart } from "./LineChart.js";
+export { BarChart } from "./BarChart.js";
+export { DonutChart } from "./DonutChart.js";
+export { Sparkline } from "./Sparkline.js";
+export type { BarChartProps, CartesianChartProps, ChartColor, ChartRow, ChartSeries, DonutChartProps, DonutChartSlice, LineChartProps, SparklineProps, } from "./Chart.types.js";

package/dist/components/Chart/Chart.types.d.cts

@@ -0,0 +1,83 @@
+import type { ReactNode } from "react";
+/** A chart series colour: 1 to 8 for the chart palette's slots, or any CSS colour. */
+export type ChartColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | (string & {});
+export interface ChartSeries {
+    /** The key in each row that holds this series' number. */
+    key: string;
+    /** Its name, in the legend, the readout and the table. */
+    label: string;
+    /**
+     * A palette slot (1–8) or a CSS colour. By default series take the slots in order. Give each one a fixed slot when
+     * a filter can hide some, so the rest keep their colours.
+     */
+    color?: ChartColor;
+}
+export type ChartRow = Record<string, unknown>;
+export interface CartesianChartProps {
+    /** One row per point along the x axis, e.g. `{ month: "Jan", visits: 120, signups: 30 }`. */
+    data: ChartRow[];
+    /** The key in each row for the x axis: a label, a number or a Date. */
+    index: string;
+    /** The numbers to plot, one series each; at most eight. */
+    series: ChartSeries[];
+    /** What the chart shows, e.g. "Visits per month". Read out by screen readers and used as the table's caption. */
+    label: string;
+    /** Height of the plot in pixels, axes included. @default 240 */
+    height?: number;
+    /** Turns a number into the text in the readout and the table, e.g. (v) => `€${v}`. @default the locale's format */
+    formatValue?(value: number): string;
+    /** Turns a number into a y axis label. @default compact: 1.2K, 3M */
+    formatTick?(value: number): string;
+    /** Turns an x value into its label. @default dates as "12 Oct", anything else as text */
+    formatIndex?(value: unknown): string;
+    /** Shows the legend above the plot. @default true when there's more than one series */
+    legend?: boolean;
+    className?: string;
+}
+export interface LineChartProps extends CartesianChartProps {
+    /** Fills under each line with a light wash of its colour. @default false */
+    area?: boolean;
+    /** Joins the points with smooth curves instead of straight lines. @default false */
+    curved?: boolean;
+}
+export interface BarChartProps extends CartesianChartProps {
+    /** Stacks the series in one bar per row instead of side by side. @default false */
+    stacked?: boolean;
+}
+export interface DonutChartSlice {
+    label: string;
+    value: number;
+    color?: ChartColor;
+}
+export interface DonutChartProps {
+    /** One slice each, largest first reads best; at most eight. Fold the smallest into an "Other" slice past that. */
+    data: DonutChartSlice[];
+    /** What the chart shows, e.g. "Spend by category". Read out by screen readers and used as the table's caption. */
+    label: string;
+    /** @default the locale's format */
+    formatValue?(value: number): string;
+    /** In the middle: a total, or anything short. @default the total, formatted, over the word "Total" */
+    center?: ReactNode;
+    /** The word under the total in the middle. @default "Total" */
+    centerLabel?: ReactNode;
+    /** Diameter in pixels. @default 180 */
+    size?: number;
+    /** Shows the legend, with each slice's value and share, beside the ring. @default true */
+    legend?: boolean;
+    className?: string;
+}
+export interface SparklineProps {
+    /** The numbers, oldest first. */
+    data: number[];
+    /** Read out by screen readers, e.g. "Sign-ups over the last 30 days, rising from 12 to 48". */
+    "aria-label": string;
+    /** A palette slot (1–8) or a CSS colour. @default 1 */
+    color?: ChartColor;
+    /** Fills under the line with a light wash. @default true */
+    area?: boolean;
+    /** @default 120 */
+    width?: number | string;
+    /** @default 32 */
+    height?: number;
+    className?: string;
+}

package/dist/components/Chart/Chart.types.d.ts

@@ -0,0 +1,83 @@
+import type { ReactNode } from "react";
+/** A chart series colour: 1 to 8 for the chart palette's slots, or any CSS colour. */
+export type ChartColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | (string & {});
+export interface ChartSeries {
+    /** The key in each row that holds this series' number. */
+    key: string;
+    /** Its name, in the legend, the readout and the table. */
+    label: string;
+    /**
+     * A palette slot (1–8) or a CSS colour. By default series take the slots in order. Give each one a fixed slot when
+     * a filter can hide some, so the rest keep their colours.
+     */
+    color?: ChartColor;
+}
+export type ChartRow = Record<string, unknown>;
+export interface CartesianChartProps {
+    /** One row per point along the x axis, e.g. `{ month: "Jan", visits: 120, signups: 30 }`. */
+    data: ChartRow[];
+    /** The key in each row for the x axis: a label, a number or a Date. */
+    index: string;
+    /** The numbers to plot, one series each; at most eight. */
+    series: ChartSeries[];
+    /** What the chart shows, e.g. "Visits per month". Read out by screen readers and used as the table's caption. */
+    label: string;
+    /** Height of the plot in pixels, axes included. @default 240 */
+    height?: number;
+    /** Turns a number into the text in the readout and the table, e.g. (v) => `€${v}`. @default the locale's format */
+    formatValue?(value: number): string;
+    /** Turns a number into a y axis label. @default compact: 1.2K, 3M */
+    formatTick?(value: number): string;
+    /** Turns an x value into its label. @default dates as "12 Oct", anything else as text */
+    formatIndex?(value: unknown): string;
+    /** Shows the legend above the plot. @default true when there's more than one series */
+    legend?: boolean;
+    className?: string;
+}
+export interface LineChartProps extends CartesianChartProps {
+    /** Fills under each line with a light wash of its colour. @default false */
+    area?: boolean;
+    /** Joins the points with smooth curves instead of straight lines. @default false */
+    curved?: boolean;
+}
+export interface BarChartProps extends CartesianChartProps {
+    /** Stacks the series in one bar per row instead of side by side. @default false */
+    stacked?: boolean;
+}
+export interface DonutChartSlice {
+    label: string;
+    value: number;
+    color?: ChartColor;
+}
+export interface DonutChartProps {
+    /** One slice each, largest first reads best; at most eight. Fold the smallest into an "Other" slice past that. */
+    data: DonutChartSlice[];
+    /** What the chart shows, e.g. "Spend by category". Read out by screen readers and used as the table's caption. */
+    label: string;
+    /** @default the locale's format */
+    formatValue?(value: number): string;
+    /** In the middle: a total, or anything short. @default the total, formatted, over the word "Total" */
+    center?: ReactNode;
+    /** The word under the total in the middle. @default "Total" */
+    centerLabel?: ReactNode;
+    /** Diameter in pixels. @default 180 */
+    size?: number;
+    /** Shows the legend, with each slice's value and share, beside the ring. @default true */
+    legend?: boolean;
+    className?: string;
+}
+export interface SparklineProps {
+    /** The numbers, oldest first. */
+    data: number[];
+    /** Read out by screen readers, e.g. "Sign-ups over the last 30 days, rising from 12 to 48". */
+    "aria-label": string;
+    /** A palette slot (1–8) or a CSS colour. @default 1 */
+    color?: ChartColor;
+    /** Fills under the line with a light wash. @default true */
+    area?: boolean;
+    /** @default 120 */
+    width?: number | string;
+    /** @default 32 */
+    height?: number;
+    className?: string;
+}

package/dist/components/Chart/ChartParts.d.cts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/** The series' names, each beside its colour, above the plot. */
+export declare function ChartLegend({ items, shape }: {
+    items: Array<{
+        label: ReactNode;
+        color: string;
+        value?: ReactNode;
+    }>;
+    shape: "line" | "square";
+}): import("react").JSX.Element;
+/** Every number in the chart as a table, for screen readers: the chart's text alternative. */
+export declare function ChartTable({ caption, head, rows }: {
+    caption: string;
+    head: string[];
+    rows: string[][];
+}): import("react").JSX.Element;

package/dist/components/Chart/ChartParts.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/** The series' names, each beside its colour, above the plot. */
+export declare function ChartLegend({ items, shape }: {
+    items: Array<{
+        label: ReactNode;
+        color: string;
+        value?: ReactNode;
+    }>;
+    shape: "line" | "square";
+}): import("react").JSX.Element;
+/** Every number in the chart as a table, for screen readers: the chart's text alternative. */
+export declare function ChartTable({ caption, head, rows }: {
+    caption: string;
+    head: string[];
+    rows: string[][];
+}): import("react").JSX.Element;

package/dist/components/Chart/DonutChart.d.cts

@@ -0,0 +1,6 @@
+import type { DonutChartProps } from "./Chart.types.cjs";
+/**
+ * Parts of a whole as a ring, with the total in the middle and each part's value and share beside it. Best with two
+ * to six slices; hover a slice, or focus it and use the arrow keys, to read it.
+ */
+export declare function DonutChart({ data, label, formatValue, center, centerLabel, size, legend, className }: DonutChartProps): import("react").JSX.Element;

package/dist/components/Chart/DonutChart.d.ts

@@ -0,0 +1,6 @@
+import type { DonutChartProps } from "./Chart.types.js";
+/**
+ * Parts of a whole as a ring, with the total in the middle and each part's value and share beside it. Best with two
+ * to six slices; hover a slice, or focus it and use the arrow keys, to read it.
+ */
+export declare function DonutChart({ data, label, formatValue, center, centerLabel, size, legend, className }: DonutChartProps): import("react").JSX.Element;

package/dist/components/Chart/LineChart.d.cts

@@ -0,0 +1,6 @@
+import type { LineChartProps } from "./Chart.types.cjs";
+/**
+ * Lines over time or another ordered x axis, for trends. Hover, or focus it and use the arrow keys, to read each
+ * point; screen readers get every number as a table.
+ */
+export declare function LineChart(props: LineChartProps): import("react").JSX.Element;

package/dist/components/Chart/LineChart.d.ts

@@ -0,0 +1,6 @@
+import type { LineChartProps } from "./Chart.types.js";
+/**
+ * Lines over time or another ordered x axis, for trends. Hover, or focus it and use the arrow keys, to read each
+ * point; screen readers get every number as a table.
+ */
+export declare function LineChart(props: LineChartProps): import("react").JSX.Element;

package/dist/components/Chart/Sparkline.d.cts

@@ -0,0 +1,6 @@
+import type { SparklineProps } from "./Chart.types.cjs";
+/**
+ * A small line with no axes, for the shape of a trend beside a number or in a table cell. It's an image to screen
+ * readers: say what it shows in its aria-label.
+ */
+export declare function Sparkline({ data, "aria-label": ariaLabel, color, area, width, height, className }: SparklineProps): import("react").JSX.Element;

package/dist/components/Chart/Sparkline.d.ts

@@ -0,0 +1,6 @@
+import type { SparklineProps } from "./Chart.types.js";
+/**
+ * A small line with no axes, for the shape of a trend beside a number or in a table cell. It's an image to screen
+ * readers: say what it shows in its aria-label.
+ */
+export declare function Sparkline({ data, "aria-label": ariaLabel, color, area, width, height, className }: SparklineProps): import("react").JSX.Element;

package/dist/components/Chart/chartUtils.d.cts

@@ -0,0 +1,13 @@
+import type { ChartColor, ChartRow, ChartSeries } from "./Chart.types.cjs";
+export declare const colorOf: (color: ChartColor | undefined, index: number) => string;
+export declare const seriesColors: (series: ChartSeries[]) => string[];
+export declare const defaultValue: (value: number) => string;
+export declare const defaultTick: (value: number) => string;
+export declare const defaultIndex: (value: unknown) => string;
+export declare const valueOf: (row: ChartRow | undefined, key: string) => number;
+/** Round gridlines: steps of 1, 2 or 5 times a power of ten, about four of them, always including zero. */
+export declare function niceTicks(min: number, max: number): number[];
+/** The element's width, kept up to date. Zero until it's measured, so charts draw on the client only. */
+export declare function useWidth<T extends HTMLElement>(): readonly [import("react").RefObject<T>, number];
+/** Roughly how wide a label is at the axis' 11.5px, to keep labels from colliding without measuring each one. */
+export declare const textWidth: (text: string) => number;

package/dist/components/Chart/chartUtils.d.ts

@@ -0,0 +1,13 @@
+import type { ChartColor, ChartRow, ChartSeries } from "./Chart.types.js";
+export declare const colorOf: (color: ChartColor | undefined, index: number) => string;
+export declare const seriesColors: (series: ChartSeries[]) => string[];
+export declare const defaultValue: (value: number) => string;
+export declare const defaultTick: (value: number) => string;
+export declare const defaultIndex: (value: unknown) => string;
+export declare const valueOf: (row: ChartRow | undefined, key: string) => number;
+/** Round gridlines: steps of 1, 2 or 5 times a power of ten, about four of them, always including zero. */
+export declare function niceTicks(min: number, max: number): number[];
+/** The element's width, kept up to date. Zero until it's measured, so charts draw on the client only. */
+export declare function useWidth<T extends HTMLElement>(): readonly [import("react").RefObject<T>, number];
+/** Roughly how wide a label is at the axis' 11.5px, to keep labels from colliding without measuring each one. */
+export declare const textWidth: (text: string) => number;

package/dist/components/NavList/NavList.d.cts

@@ -1,27 +1,9 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
-export interface NavListProps {
-    /** Names the navigation for screen readers, e.g. "Settings". */
-    label: string;
-    /** A muted heading above the items (vertical only). */
-    heading?: ReactNode;
-    /** `vertical` for a sidebar; `horizontal` scrolls sideways, for narrow screens.
-     * @default "vertical" */
-    orientation?: "vertical" | "horizontal";
-    children: ReactNode;
-    className?: string;
-}
+import type { NavItemProps, NavListProps } from "./NavList.types.cjs";
+export type { NavItemProps, NavListProps } from "./NavList.types.cjs";
 /** A list of places to go, the way a settings dialog's sidebar lists its sections. Place it on ow-canvas. */
 export declare function NavList({ label, heading, orientation, children, className }: NavListProps): import("react").JSX.Element;
-export interface NavItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** A 15px lucide-react icon. */
-    icon?: ReactNode;
-    /** The current section: raised on a surface, its icon in the primary colour.
-     * @default false */
-    active?: boolean;
-    /** Makes the item a link to this address instead of a button. */
-    href?: string;
-    /** Muted text at the right: a count, a badge. */
-    end?: ReactNode;
-}
-/** One place in a NavList: a button, or a link when given an href. */
+/**
+ * One place in a NavList: a button, or a link when given an href. In a folded AppShell sidebar it shows only its
+ * icon, with its label as a tooltip (and still read out by screen readers).
+ */
 export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/NavList/NavList.d.ts

@@ -1,27 +1,9 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
-export interface NavListProps {
-    /** Names the navigation for screen readers, e.g. "Settings". */
-    label: string;
-    /** A muted heading above the items (vertical only). */
-    heading?: ReactNode;
-    /** `vertical` for a sidebar; `horizontal` scrolls sideways, for narrow screens.
-     * @default "vertical" */
-    orientation?: "vertical" | "horizontal";
-    children: ReactNode;
-    className?: string;
-}
+import type { NavItemProps, NavListProps } from "./NavList.types.js";
+export type { NavItemProps, NavListProps } from "./NavList.types.js";
 /** A list of places to go, the way a settings dialog's sidebar lists its sections. Place it on ow-canvas. */
 export declare function NavList({ label, heading, orientation, children, className }: NavListProps): import("react").JSX.Element;
-export interface NavItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** A 15px lucide-react icon. */
-    icon?: ReactNode;
-    /** The current section: raised on a surface, its icon in the primary colour.
-     * @default false */
-    active?: boolean;
-    /** Makes the item a link to this address instead of a button. */
-    href?: string;
-    /** Muted text at the right: a count, a badge. */
-    end?: ReactNode;
-}
-/** One place in a NavList: a button, or a link when given an href. */
+/**
+ * One place in a NavList: a button, or a link when given an href. In a folded AppShell sidebar it shows only its
+ * icon, with its label as a tooltip (and still read out by screen readers).
+ */
 export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/NavList/NavList.types.d.cts

@@ -0,0 +1,23 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export interface NavListProps {
+    /** Names the navigation for screen readers, e.g. "Settings". */
+    label: string;
+    /** A muted heading above the items (vertical only). */
+    heading?: ReactNode;
+    /** `vertical` for a sidebar; `horizontal` scrolls sideways, for narrow screens.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    children: ReactNode;
+    className?: string;
+}
+export interface NavItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** A 15px lucide-react icon. */
+    icon?: ReactNode;
+    /** The current section: raised on a surface, its icon in the primary colour.
+     * @default false */
+    active?: boolean;
+    /** Makes the item a link to this address instead of a button. */
+    href?: string;
+    /** Muted text at the right: a count, a badge. */
+    end?: ReactNode;
+}

package/dist/components/NavList/NavList.types.d.ts

@@ -0,0 +1,23 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export interface NavListProps {
+    /** Names the navigation for screen readers, e.g. "Settings". */
+    label: string;
+    /** A muted heading above the items (vertical only). */
+    heading?: ReactNode;
+    /** `vertical` for a sidebar; `horizontal` scrolls sideways, for narrow screens.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    children: ReactNode;
+    className?: string;
+}
+export interface NavItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** A 15px lucide-react icon. */
+    icon?: ReactNode;
+    /** The current section: raised on a surface, its icon in the primary colour.
+     * @default false */
+    active?: boolean;
+    /** Makes the item a link to this address instead of a button. */
+    href?: string;
+    /** Muted text at the right: a count, a badge. */
+    end?: ReactNode;
+}