@mechane-ai/ui 0.2.1 → 0.3.0

package/dist/packages/ai/src/approval.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+type PendingApproval = {
+    readonly status: 'pending';
+    readonly onApprove: () => void;
+    readonly onDeny: () => void;
+    readonly busy?: 'approve' | 'deny' | undefined;
+    readonly disabled?: boolean;
+    readonly approveLabel?: string;
+    readonly denyLabel?: string;
+    readonly statusLabel?: never;
+};
+type SettledApproval = {
+    readonly status: 'approved' | 'denied' | 'expired';
+    readonly statusLabel: string;
+    readonly onApprove?: never;
+    readonly onDeny?: never;
+    readonly busy?: never;
+    readonly disabled?: never;
+    readonly approveLabel?: never;
+    readonly denyLabel?: never;
+};
+export type ApprovalProps = (PendingApproval | SettledApproval) & {
+    readonly requestId: string;
+    readonly title: string;
+    readonly description?: string;
+    readonly children?: ReactNode;
+};
+export declare function Approval(props: ApprovalProps): ReactNode;
+export {};

package/dist/packages/ai/src/conversation.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+export type ConversationRootProps = {
+    readonly children: ReactNode;
+    readonly initialPosition?: 'start' | 'end';
+    readonly follow?: boolean;
+};
+export type ConversationViewportProps = {
+    readonly label: string;
+    readonly children: ReactNode;
+};
+export type ConversationContentProps = {
+    readonly children: ReactNode;
+    readonly streaming?: boolean;
+};
+export type ConversationItemProps = {
+    readonly messageId: string;
+    readonly children: ReactNode;
+};
+export type ConversationJumpProps = {
+    readonly label?: string;
+};
+declare function ConversationRoot({ children, initialPosition, follow }: ConversationRootProps): ReactNode;
+declare function ConversationViewport({ label, children }: ConversationViewportProps): ReactNode;
+declare function ConversationContent({ children, streaming }: ConversationContentProps): ReactNode;
+declare function ConversationItem({ messageId, children }: ConversationItemProps): ReactNode;
+declare function ConversationJumpToLatest({ label }: ConversationJumpProps): ReactNode;
+export declare const Conversation: {
+    Root: typeof ConversationRoot;
+    Viewport: typeof ConversationViewport;
+    Content: typeof ConversationContent;
+    Item: typeof ConversationItem;
+    JumpToLatest: typeof ConversationJumpToLatest;
+};
+export {};

package/dist/packages/ai/src/index.d.ts

@@ -0,0 +1,10 @@
+export { Conversation } from './conversation.tsx';
+export type { ConversationRootProps, ConversationViewportProps, ConversationContentProps, ConversationItemProps, ConversationJumpProps, } from './conversation.tsx';
+export { Message, MessageAttachment } from './message.tsx';
+export type { MessageProps, MessageKind, MessageAttachmentProps } from './message.tsx';
+export { PromptInput } from './prompt-input.tsx';
+export type { PromptInputProps } from './prompt-input.tsx';
+export { Approval } from './approval.tsx';
+export type { ApprovalProps } from './approval.tsx';
+export { Sources, InlineCitation } from './sources.tsx';
+export type { Source, SourcesProps, InlineCitationProps } from './sources.tsx';

package/dist/packages/ai/src/message.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export type MessageKind = 'user' | 'assistant' | 'system';
+export type MessageProps = {
+    readonly author: string;
+    readonly children: ReactNode;
+    readonly id?: string;
+    readonly kind?: MessageKind;
+    readonly meta?: ReactNode;
+    readonly actions?: ReactNode;
+    readonly attachments?: ReactNode;
+};
+export type MessageAttachmentProps = {
+    readonly name: string;
+    readonly description?: string;
+    readonly href?: string;
+    readonly actions?: ReactNode;
+};
+export declare function Message({ author, children, id, kind, meta, actions, attachments, }: MessageProps): ReactNode;
+export declare function MessageAttachment({ name, description, href, actions }: MessageAttachmentProps): ReactNode;

package/dist/packages/ai/src/prompt-input.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps, ReactNode } from 'react';
+export type PromptInputProps = {
+    readonly label: string;
+    readonly value: string;
+    readonly onValueChange: (value: string) => void;
+    readonly onSubmit: NonNullable<ComponentProps<'form'>['onSubmit']>;
+    readonly name?: string;
+    readonly placeholder?: string;
+    readonly maxLength?: number;
+    readonly required?: boolean;
+    readonly pending?: boolean;
+    readonly disabled?: boolean;
+    readonly submitDisabled?: boolean;
+    readonly submitLabel?: string;
+    readonly pendingLabel?: string;
+    readonly enterBehavior?: 'newline' | 'submit';
+    readonly description?: ReactNode;
+    readonly error?: string | undefined;
+    readonly controls?: ReactNode;
+    readonly attachments?: ReactNode;
+    readonly onStop?: (() => void) | undefined;
+    readonly stopPending?: boolean;
+    readonly stopLabel?: string;
+};
+export declare function PromptInput({ label, value, onValueChange, onSubmit, name, placeholder, maxLength, required, pending, disabled, submitDisabled, submitLabel, pendingLabel, enterBehavior, description, error, controls, attachments, onStop, stopPending, stopLabel, }: PromptInputProps): ReactNode;

package/dist/packages/ai/src/sources.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export type Source = {
+    readonly id: string;
+    readonly title: string;
+    readonly href: string;
+    readonly description?: string;
+};
+export type SourcesProps = {
+    readonly sources: ReadonlyArray<Source>;
+    readonly label?: string;
+};
+export type InlineCitationProps = {
+    readonly source: Source;
+    readonly label: string;
+};
+export declare function Sources({ sources, label }: SourcesProps): ReactNode;
+export declare function InlineCitation({ source, label }: InlineCitationProps): ReactNode;

package/dist/packages/charts/src/cartesian/categorical.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+export type BreakdownItem = {
+    readonly id: string;
+    readonly label: string;
+    readonly value: number | null;
+    readonly tone?: ChartTone | undefined;
+};
+export type BreakdownBarProps = {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly items: ReadonlyArray<BreakdownItem>;
+    readonly total: number;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection | undefined;
+};
+export type TreemapProps = Omit<BreakdownBarProps, 'total'> & {
+    readonly height?: number | undefined;
+};
+export type BarSeries = {
+    readonly id: string;
+    readonly label: string;
+    readonly values: ReadonlyArray<number | null>;
+    readonly tone?: ChartTone | undefined;
+};
+export type BarChartProps = {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly categories: ReadonlyArray<{
+        readonly id: string;
+        readonly label: string;
+    }>;
+    readonly series: ReadonlyArray<BarSeries>;
+    readonly domain: readonly [number, number];
+    readonly mode?: 'grouped' | 'stacked' | undefined;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection | undefined;
+    readonly height?: number | undefined;
+};
+export declare function BreakdownBar({ title, description, items, total, formatValue, selection, }: BreakdownBarProps): ReactNode;
+export declare function Treemap({ title, description, items, formatValue, selection, height }: TreemapProps): ReactNode;
+export declare function BarChart({ title, description, categories, series, domain, mode, formatValue, selection, height, }: BarChartProps): ReactNode;

package/dist/packages/charts/src/cartesian/index.d.ts

@@ -0,0 +1,8 @@
+export { LineChart, AreaChart, SmallMultiples } from './time-series.tsx';
+export type { TimeSeriesChartProps, AreaChartProps, SmallMultiplesProps } from './time-series.tsx';
+export { Sparkline } from './sparkline.tsx';
+export type { SparklineProps } from './sparkline.tsx';
+export { BreakdownBar, BarChart, Treemap } from './categorical.tsx';
+export type { BreakdownItem, BreakdownBarProps, BarSeries, BarChartProps, TreemapProps } from './categorical.tsx';
+export type { TimeSeriesPoint, TimeSeries, TimeSeriesMarker } from './time-series-data.ts';
+export { timeSeriesLimits } from './time-series-data.ts';

package/dist/packages/charts/src/cartesian/sparkline.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { TimeSeries } from './time-series-data.ts';
+export type SparklineProps = {
+    readonly title: string;
+    readonly summary: string;
+    readonly unit: string;
+    readonly timestampUnit: 'seconds' | 'milliseconds';
+    readonly series: TimeSeries;
+    readonly valueDomain: readonly [number, number];
+};
+export declare function Sparkline({ title, summary, unit, timestampUnit, series, valueDomain }: SparklineProps): ReactNode;

package/dist/packages/charts/src/cartesian/time-series-data.d.ts

@@ -0,0 +1,54 @@
+import type { ChartTone } from '../chart-theme.ts';
+export type TimeSeriesPoint = {
+    readonly timestamp: number;
+    readonly value: number | null;
+};
+export type TimeSeries = {
+    readonly id: string;
+    readonly label: string;
+    readonly points: ReadonlyArray<TimeSeriesPoint>;
+    readonly tone?: ChartTone | undefined;
+};
+export type TimeSeriesMarker = {
+    readonly id: string;
+    readonly timestamp: number;
+    readonly label: string;
+} & ({
+    readonly kind: 'time';
+    readonly seriesId?: never;
+    readonly value?: never;
+} | {
+    readonly kind: 'point';
+    readonly seriesId: string;
+    readonly value: number;
+});
+export type PlotPoint = {
+    readonly timestamp: number;
+    readonly value: number | null;
+    readonly base: number;
+};
+export type PlotSeries = {
+    readonly id: string;
+    readonly label: string;
+    readonly tone: ChartTone;
+    readonly points: ReadonlyArray<PlotPoint>;
+};
+export declare const timeSeriesLimits: {
+    readonly series: 12;
+    readonly pointsPerSeries: 2000;
+    readonly markers: 200;
+    readonly panels: 12;
+};
+export declare function validateTimeSeries({ series, isStacked, markers, }: {
+    readonly series: ReadonlyArray<TimeSeries>;
+    readonly isStacked: boolean;
+    readonly markers: ReadonlyArray<TimeSeriesMarker>;
+}): string | undefined;
+export declare function timeSeriesSignature({ series, markers, timestampUnit, isStacked, }: {
+    readonly series: ReadonlyArray<TimeSeries>;
+    readonly markers: ReadonlyArray<TimeSeriesMarker>;
+    readonly timestampUnit: string;
+    readonly isStacked: boolean;
+}): string;
+export declare function observationDomain(minimum: number, maximum: number, startsAtZero?: boolean): readonly [number, number];
+export declare function prepareTimeSeries(series: ReadonlyArray<TimeSeries>, isStacked: boolean): ReadonlyArray<PlotSeries>;

package/dist/packages/charts/src/cartesian/time-series-line.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { PlotSeries } from './time-series-data.ts';
+export declare function TimeSeriesLine({ series, x, y, inspectedTimestamp, pointRadius, }: {
+    readonly series: PlotSeries;
+    readonly x: (timestamp: number) => number;
+    readonly y: (value: number) => number;
+    readonly inspectedTimestamp?: number | undefined;
+    readonly pointRadius?: number | undefined;
+}): ReactNode;

package/dist/packages/charts/src/cartesian/time-series.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import type { TimeSeries, TimeSeriesMarker } from './time-series-data.ts';
+export type TimeSeriesChartProps = {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly series: ReadonlyArray<TimeSeries>;
+    readonly timestampUnit: 'seconds' | 'milliseconds';
+    readonly formatTimestamp: (timestamp: number) => string;
+    readonly formatValue: (value: number) => string;
+    readonly markers?: ReadonlyArray<TimeSeriesMarker> | undefined;
+    readonly height?: number | undefined;
+    readonly actions?: ReactNode;
+};
+export type AreaChartProps = TimeSeriesChartProps & {
+    readonly stacked?: boolean | undefined;
+};
+export type SmallMultiplesProps = Omit<TimeSeriesChartProps, 'series' | 'title' | 'description' | 'actions' | 'formatValue' | 'markers'> & {
+    readonly charts: ReadonlyArray<{
+        readonly id: string;
+        readonly title: string;
+        readonly series: ReadonlyArray<TimeSeries>;
+        readonly description?: string | undefined;
+        readonly formatValue: (value: number) => string;
+        readonly markers?: ReadonlyArray<TimeSeriesMarker> | undefined;
+    }>;
+};
+export declare function LineChart(props: TimeSeriesChartProps): ReactNode;
+export declare function AreaChart({ stacked, ...props }: AreaChartProps): ReactNode;
+export declare function SmallMultiples({ charts, ...props }: SmallMultiplesProps): ReactNode;

package/dist/packages/charts/src/chart-frame.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { ChartTone } from './chart-theme.ts';
+export type ChartSelection = {
+    readonly selectedId: string | undefined;
+    readonly onSelect: (id: string) => void;
+};
+export type ChartFrameProps = {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly children: ReactNode;
+    readonly actions?: ReactNode;
+    readonly footer?: ReactNode;
+};
+export type ChartLegendItem = {
+    readonly id: string;
+    readonly label: string;
+    readonly tone: ChartTone;
+};
+export type ChartLegendProps = {
+    readonly items: ReadonlyArray<ChartLegendItem>;
+    readonly label?: string | undefined;
+};
+export declare function ChartFrame({ title, description, children, actions, footer }: ChartFrameProps): ReactNode;
+export declare function ChartLegend({ items, label }: ChartLegendProps): ReactNode;
+export declare function ChartDatumButton({ label, selected, onSelect, children, }: {
+    readonly label: string;
+    readonly selected?: boolean | undefined;
+    readonly onSelect?: (() => void) | undefined;
+    readonly children: ReactNode;
+}): ReactNode;
+export declare function ChartDataDisclosure({ children, label, }: {
+    readonly children: ReactNode;
+    readonly label?: string | undefined;
+}): ReactNode;

package/dist/packages/charts/src/chart-input.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export declare function isFiniteDomain(domain: readonly [number, number]): boolean;
+export declare function hasUniqueIds(records: ReadonlyArray<{
+    readonly id: string;
+}>): boolean;
+export declare function ChartInputError({ title, description, message, }: {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly message: string;
+}): ReactNode;

package/dist/packages/charts/src/chart-theme.d.ts

@@ -0,0 +1,48 @@
+import * as stylex from '@stylexjs/stylex';
+export type ChartTone = 'series1' | 'series2' | 'series3' | 'series4' | 'series5' | 'series6' | 'positive' | 'negative' | 'neutral';
+export declare const chartToneColors: Readonly<Record<ChartTone, string>>;
+export declare const chartStyles: Readonly<{
+    readonly plot: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    }>;
+    readonly svg: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "visible">;
+    }>;
+    readonly axis: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 1>;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly grid: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 1>;
+        readonly strokeDasharray: stylex.StyleXClassNameFor<"strokeDasharray", "3 3">;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly label: Readonly<{
+        readonly fill: stylex.StyleXClassNameFor<"fill", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly mark: Readonly<{
+        readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 1.5>;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly selected: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 2>;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly focus: Readonly<{
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineColor: stylex.StyleXVar<string>;
+            readonly outlineStyle: "solid";
+            readonly outlineWidth: stylex.StyleXVar<string>;
+            readonly outlineOffset: 2;
+        }>;
+    }>;
+}>;

package/dist/packages/charts/src/distribution/distribution-input.d.ts

@@ -0,0 +1,14 @@
+export type NumericDomain = readonly [minimum: number, maximum: number];
+export declare const distributionLimits: {
+    readonly bins: 200;
+    readonly cumulativePoints: 2000;
+    readonly rows: 200;
+};
+export declare function distributionInputError({ items, domain, maxEntries, }: {
+    readonly items: ReadonlyArray<{
+        readonly id: string;
+    }>;
+    readonly domain: NumericDomain;
+    readonly maxEntries: number;
+}): string | undefined;
+export declare function outsideDomain(value: number, domain: NumericDomain): boolean;

package/dist/packages/charts/src/distribution/distribution-plot.d.ts

@@ -0,0 +1,135 @@
+import * as stylex from '@stylexjs/stylex';
+import type { ReactNode } from 'react';
+import type { NumericDomain } from './distribution-input.ts';
+export declare const distributionGeometry: {
+    readonly height: 160;
+};
+export declare const distributionStyles: Readonly<{
+    readonly plot: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "max-content minmax(0, 1fr)">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly yAxis: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", 160>;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "end">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly svg: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly height: stylex.StyleXClassNameFor<"height", 160>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    }>;
+    readonly grid: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeDasharray: stylex.StyleXClassNameFor<"strokeDasharray", "3 3">;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly axis: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly axisNames: Readonly<{
+        readonly gridColumn: stylex.StyleXClassNameFor<"gridColumn", "1 / -1">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly label: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly values: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly value: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly summary: Readonly<{
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "end">;
+    }>;
+    readonly row: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "minmax(0, 1fr)" | "minmax(100px, 1fr) minmax(120px, 2fr)">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly rowAxis: Readonly<{
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly axisSpacer: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block" | "none">;
+    }>;
+    readonly rowLabel: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly rowValue: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly rowSvg: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly height: stylex.StyleXClassNameFor<"height", 28>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    }>;
+    readonly empty: Readonly<{
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly baseline: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly missing: Readonly<{
+        readonly fill: stylex.StyleXClassNameFor<"fill", string>;
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeDasharray: stylex.StyleXClassNameFor<"strokeDasharray", "3 3">;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+}>;
+type NumericPlotProps = {
+    readonly xDomain: NumericDomain;
+    readonly yDomain: NumericDomain;
+    readonly xLabel: string;
+    readonly yLabel: string;
+    readonly formatX: (value: number) => string;
+    readonly formatY: (value: number) => string;
+    readonly children: (width: number) => ReactNode;
+};
+export declare function NumericPlot({ xDomain, yDomain, xLabel, yLabel, formatX, formatY, children, }: NumericPlotProps): ReactNode;
+export declare function DomainLabels({ domain, formatValue, }: {
+    readonly domain: NumericDomain;
+    readonly formatValue: (value: number) => string;
+}): ReactNode;
+export {};

package/dist/packages/charts/src/distribution/ecdf.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+import type { NumericDomain } from './distribution-input.ts';
+export type ECDFPoint = {
+    readonly id: string;
+    readonly value: number;
+    readonly probability: number | null;
+};
+export type ECDFProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly points: ReadonlyArray<ECDFPoint>;
+    readonly domain: NumericDomain;
+    readonly valueLabel: string;
+    readonly probabilityLabel: string;
+    readonly formatValue: (value: number) => string;
+    readonly formatProbability: (probability: number) => string;
+    readonly tone?: ChartTone;
+    readonly selection?: ChartSelection;
+    readonly emptyLabel?: string;
+};
+export declare function ECDF({ title, description, points, domain, valueLabel, probabilityLabel, formatValue, formatProbability, tone, selection, emptyLabel, }: ECDFProps): ReactNode;

package/dist/packages/charts/src/distribution/histogram.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+import type { NumericDomain } from './distribution-input.ts';
+export type HistogramBin = {
+    readonly id: string;
+    readonly label: string;
+    readonly lowerBound: number;
+    readonly upperBound: number;
+    readonly count: number | null;
+};
+export type HistogramProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly bins: ReadonlyArray<HistogramBin>;
+    readonly domain: NumericDomain;
+    readonly maximumCount: number;
+    readonly valueLabel: string;
+    readonly countLabel: string;
+    readonly formatValue: (value: number) => string;
+    readonly formatCount: (count: number) => string;
+    readonly tone?: ChartTone;
+    readonly selection?: ChartSelection;
+    readonly emptyLabel?: string;
+};
+export declare function Histogram({ title, description, bins, domain, maximumCount, valueLabel, countLabel, formatValue, formatCount, tone, selection, emptyLabel, }: HistogramProps): ReactNode;

package/dist/packages/charts/src/distribution/index.d.ts

@@ -0,0 +1,8 @@
+export { Histogram } from './histogram.tsx';
+export type { HistogramBin, HistogramProps } from './histogram.tsx';
+export { ECDF } from './ecdf.tsx';
+export type { ECDFPoint, ECDFProps } from './ecdf.tsx';
+export { IntervalPlot } from './interval-plot.tsx';
+export type { IntervalDatum, IntervalPlotProps } from './interval-plot.tsx';
+export { RankedBars } from './ranked-bars.tsx';
+export type { RankedBarDatum, RankedBarsProps } from './ranked-bars.tsx';

package/dist/packages/charts/src/distribution/interval-plot.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+import type { NumericDomain } from './distribution-input.ts';
+export type IntervalDatum = {
+    readonly id: string;
+    readonly label: string;
+    readonly lower: number | null;
+    readonly estimate: number | null;
+    readonly upper: number | null;
+    readonly tone?: ChartTone;
+};
+export type IntervalPlotProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly items: ReadonlyArray<IntervalDatum>;
+    readonly domain: NumericDomain;
+    readonly valueLabel: string;
+    readonly intervalLabel: string;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection;
+    readonly emptyLabel?: string;
+};
+export declare function IntervalPlot({ title, description, items, domain, valueLabel, intervalLabel, formatValue, selection, emptyLabel, }: IntervalPlotProps): ReactNode;