@k2b/ui 0.51.0 → 0.52.0

package/dist/types/actions/Toolbar.d.ts

@@ -21,6 +21,8 @@ export type ToolbarActionProps = {
     /** 1 is most important. Larger numbers move first; ties move later DOM actions first. Omit to keep fixed. */
     priority?: number;
     disabled?: boolean;
+    /** Makes the action a toggle and exposes its state as `aria-pressed`, such as Bold over bold text. */
+    pressed?: boolean;
     onClick?: () => void;
 };
 export type ToolbarLabelProps = {

package/dist/types/charts/core/bar-labels.d.ts

@@ -0,0 +1 @@
+export declare const barPercent: (locale?: string) => Intl.NumberFormat;

package/dist/types/charts/core/bubble.d.ts

@@ -0,0 +1,66 @@
+import { type ChartOptions } from "./svg";
+export type BubbleOptions = ChartOptions & {
+    groups: string[];
+    data: {
+        label: string;
+        group: string;
+        x: number;
+        y: number;
+        size?: number;
+    }[];
+    xLabel: string;
+    yLabel: string;
+    sizeLabel?: string;
+    averages?: boolean;
+    legend?: boolean;
+    locale?: string;
+    xFormat?: (value: number) => string;
+    yFormat?: (value: number) => string;
+    sizeFormat?: (value: number) => string;
+    displayWidth?: number;
+};
+export declare function bubbleLayout(spec: BubbleOptions, size?: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+    header: {
+        svg: string;
+        height: number;
+    };
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    xd: readonly [number, number];
+    yd: readonly [number, number];
+    x: (value: number) => number;
+    y: (value: number) => number;
+    points: {
+        label: string;
+        group: string;
+        x: number;
+        y: number;
+        size?: number;
+        index: number;
+        cx: number;
+        cy: number;
+        radius: number;
+        labelBox: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        } | undefined;
+    }[];
+    meanX: number;
+    meanY: number;
+    legend: {
+        label: string;
+        index: number;
+        x: number;
+        row: number;
+    }[];
+};
+export declare function renderBubbleSvg(spec: BubbleOptions): string;

package/dist/types/charts/core/default-styles.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_STYLES: string;

package/dist/types/charts/core/funnel-layout.d.ts

@@ -0,0 +1,43 @@
+import type { ChartDatum } from "./types";
+export type FunnelOptions = {
+    data: {
+        label: string;
+        value: number | null;
+    }[];
+    valueFormat?: (value: number) => string;
+    locale?: string;
+    title?: string;
+    subtitle?: string;
+    className?: string;
+};
+/** Ratios use the original start/previous observation. Geometry fits the largest observed step, including rises. */
+export declare function funnelLayout(spec: FunnelOptions, size?: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+    unit: number;
+    left: number;
+    right: number;
+    center: number;
+    top: number;
+    pitch: number;
+    barHeight: number;
+    steps: {
+        label: string;
+        value: number | null;
+        index: number;
+        center: number;
+        y: number;
+        width: number;
+        startShare: number | null;
+        previousShare: number | null;
+        datum: ChartDatum;
+        labelLines: string[];
+        valueText: string;
+        shareText: string;
+        title: string;
+    }[];
+};
+export type FunnelLayout = ReturnType<typeof funnelLayout>;

package/dist/types/charts/core/funnel.d.ts

@@ -0,0 +1,13 @@
+import { type FunnelLayout, type FunnelOptions } from "./funnel-layout";
+export { type FunnelLayout, type FunnelOptions, funnelLayout } from "./funnel-layout";
+export declare function renderFunnelSvg(spec: FunnelOptions & {
+    width: number;
+    height: number;
+    inspect?: boolean;
+}): string;
+/** Draw the same geometry reserved before a lazy host loads its renderer. */
+export declare function renderFunnelLayoutSvg(spec: FunnelOptions & {
+    width: number;
+    height: number;
+    inspect?: boolean;
+}, g: FunnelLayout): string;

package/dist/types/charts/core/index.d.ts

@@ -1,16 +1,21 @@
 /** Portable chart contracts. This entry never imports Solid or browser APIs. */
-export { type BarChartLayout, type BarChartOptions, barChartLayout, renderBarChartSvg, seriesBarLayout } from "../../content/chart-bar";
+export { type BarChartLayout, type BarChartOptions, barChartLayout, rankedBarLayout, renderBarChartSvg, seriesBarLayout, } from "../../content/chart-bar";
 export { renderStateTimelineSvg, type StateTimelineChartOptions, type StateTimelineDomain, stateTimelineDomain, stateTimelineHeight, } from "../../content/chart-state-timeline";
 export { type ChartTimeAxis } from "../../content/chart-time-axis";
 export { type AreaOptions, areaLayout, renderAreaSvg } from "./area";
+export * from "./bubble";
 export * from "./calendar";
+export { type FunnelLayout, type FunnelOptions, funnelLayout, renderFunnelLayoutSvg, renderFunnelSvg } from "./funnel";
 export { type HorizontalBarLayout, type HorizontalBarOptions, hbarLayout, renderHbarLayoutSvg, renderHbarSvg } from "./hbar";
 export * from "./inspection";
 export { map } from "./map";
+export * from "./pareto";
+export * from "./radar";
 export * from "./render";
 export { chartRenderHeight, preservesAspectRatio } from "./render-size";
 export * from "./snapshot";
 export { charts } from "./svg";
 export { type AxisOptions, arcPathD, autoBin, type BarItem, bar, barGauge, boxplot, type ChartOptions, chartDatumSvg, computeBoxStats, computeDomain, donut, escapeXml, extendDomainToNice, gauge, heatmap, histogram, type LineStyle, line, linearRegression, linePathD, type MapOptions, type MapPoint, type MapSeries, type MapViewport, type MarkerShape, mapLog, mapRange, markerPath, niceLogTicks, niceStep, normalizePadding, type Padding, type Point, pie, type ReferenceLine, type Series, type SliceItem, scatter, smoothPathD, sparkline, stat, stateTimeline, stepPathD, svgRoot, } from "./svg-renderers";
+export * from "./treemap";
 export { type ChartDateFormat, type ChartDatum, type ChartDatumRole, type ChartFormat, type ChartKind, type ChartNumberFormat, chartDatumRoles, } from "./types";
 export { renderWaterfallLayoutSvg, renderWaterfallSvg, type WaterfallLayout, type WaterfallOptions, waterfallLayout } from "./waterfall";

package/dist/types/charts/core/pareto.d.ts

@@ -0,0 +1,40 @@
+import { type ChartOptions } from "./svg";
+export type ParetoOptions = ChartOptions & {
+    labels: [string, string];
+    data: {
+        label: string;
+        value: number;
+        prev: number;
+    }[];
+    locale?: string;
+    format?: (value: number) => string;
+    displayWidth?: number;
+};
+export declare function paretoLayout(spec: ParetoOptions, size?: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+    total: number;
+    max: number;
+    ticks: number[];
+    left: number;
+    plot: number;
+    rowHeight: number;
+    header: {
+        svg: string;
+        height: number;
+    };
+    top: number;
+    bottom: number;
+    rows: {
+        label: string;
+        value: number;
+        prev: number;
+        index: number;
+        y: number;
+        cumulative: number;
+    }[];
+};
+export declare function renderParetoSvg(spec: ParetoOptions): string;

package/dist/types/charts/core/radar.d.ts

@@ -0,0 +1,47 @@
+import { type ChartOptions } from "./svg";
+export type RadarOptions = ChartOptions & {
+    axes: string[];
+    max: number;
+    unit?: string;
+    series: {
+        label: string;
+        data: number[];
+    }[];
+    legend?: boolean;
+    locale?: string;
+    format?: (value: number) => string;
+    displayWidth?: number;
+};
+export declare function radarLayout(spec: RadarOptions, size?: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+    header: {
+        svg: string;
+        height: number;
+    };
+    cx: number;
+    cy: number;
+    radius: number;
+    axes: {
+        label: string;
+        index: number;
+        x: number;
+        y: number;
+        anchor: string;
+        text: string;
+        end: [number, number];
+        points: [number, number][];
+    }[];
+    point: (axis: number, value: number) => [number, number];
+    legend: {
+        label: string;
+        index: number;
+        x: number;
+        row: number;
+    }[];
+    bottom: number;
+};
+export declare function renderRadarSvg(spec: RadarOptions): string;

package/dist/types/charts/core/registry.d.ts

@@ -1,10 +1,15 @@
 import { renderBarChartSvg } from "../../content/chart-bar";
 import { renderStateTimelineSvg } from "../../content/chart-state-timeline";
 import { renderAreaSvg } from "./area";
+import { renderBubbleSvg } from "./bubble";
 import { renderHeatmapSvg } from "./calendar";
+import { renderFunnelSvg } from "./funnel";
 import { renderHbarSvg } from "./hbar";
 import { map } from "./map";
+import { renderParetoSvg } from "./pareto";
+import { renderRadarSvg } from "./radar";
 import { barGauge, boxplot, donut, gauge, histogram, line, pie, scatter, sparkline, stat } from "./svg-renderers";
+import { renderTreemapSvg } from "./treemap";
 import { renderWaterfallSvg } from "./waterfall";
 export declare const chartRenderers: {
     waterfall: typeof renderWaterfallSvg;
@@ -12,6 +17,7 @@ export declare const chartRenderers: {
     line: typeof line;
     bar: typeof renderBarChartSvg;
     hbar: typeof renderHbarSvg;
+    funnel: typeof renderFunnelSvg;
     pie: typeof pie;
     donut: typeof donut;
     scatter: typeof scatter;
@@ -24,6 +30,10 @@ export declare const chartRenderers: {
     heatmap: typeof renderHeatmapSvg;
     map: typeof map;
     stateTimeline: typeof renderStateTimelineSvg;
+    treemap: typeof renderTreemapSvg;
+    pareto: typeof renderParetoSvg;
+    bubble: typeof renderBubbleSvg;
+    radar: typeof renderRadarSvg;
 };
 type Kind = keyof typeof chartRenderers;
 type ChartKinds = {

package/dist/types/charts/core/render-size.d.ts

@@ -4,4 +4,4 @@ import type { ChartKind } from "./types";
 export declare const chartRenderHeight: (props: ChartRenderOptions, sizing?: {
     contentHeight?: boolean;
 }) => number;
-export declare const preservesAspectRatio: (kind: ChartKind) => kind is "donut" | "gauge" | "map" | "pie";
+export declare const preservesAspectRatio: (kind: ChartKind) => kind is "donut" | "gauge" | "map" | "pie" | "radar";

package/dist/types/charts/core/svg-barGauge.d.ts

@@ -0,0 +1,3 @@
+import { type BarGaugeOptions } from "./svg-common";
+/** Render compact horizontal bar gauges for multiple reduced metrics. */
+export declare const barGauge: (opts: BarGaugeOptions) => string;

package/dist/types/charts/core/svg-boxplot.d.ts

@@ -0,0 +1,18 @@
+import { type BoxPlotOptions } from "./svg-common";
+/**
+ * Render a box plot (Tukey style): box for the IQR (Q1-Q3), median line,
+ * whiskers extending to 1.5×IQR fences, and individual outlier dots.
+ *
+ * Useful for comparing distributions across categorical groups (e.g. test
+ * scores per class, reaction times per condition).
+ *
+ * @example
+ * charts.boxplot({
+ *   groups: [
+ *     { label: "Class A", values: scoresA },
+ *     { label: "Class B", values: scoresB },
+ *   ],
+ *   yAxis: { label: "Score" },
+ * });
+ */
+export declare const boxplot: (opts: BoxPlotOptions) => string;