@tempoxyz/ds 0.2.6 → 0.3.0

package/dist/web/components/BarChart.css

@@ -0,0 +1 @@
+.z_tds_2f_web-iTkEmI0{fill:var(--z-tds_2f_web-color-container-regular,light-dark(var(--z-tds_2f_web-color-neutral-shade-004,#0000000a),var(--z-tds_2f_web-color-neutral-tint-012,#ffffff1f)))}.z_tds_2f_web-iTkEmI1{align-items:center}.z_tds_2f_web-iTkEmI2{column-gap:var(--z-tds_2f_web-spacing-6,.375rem)}.z_tds_2f_web-iTkEmI3{display:inline-flex}.z_tds_2f_web-iTkEmI4{white-space:nowrap}.z_tds_2f_web-iTkEmI5{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-iTkEmI6{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-iTkEmI7{display:flex}.z_tds_2f_web-iTkEmI8{justify-content:space-between}.z_tds_2f_web-iTkEmI9{font-family:var(--z-tds_2f_web-typography-body-b3Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-iTkEmIa{font-size:var(--z-tds_2f_web-typography-body-b3Strong-fontSize,12px)}.z_tds_2f_web-iTkEmIb{font-weight:var(--z-tds_2f_web-typography-body-b3Strong-fontWeight,500)}.z_tds_2f_web-iTkEmIc{letter-spacing:var(--z-tds_2f_web-typography-body-b3Strong-letterSpacing,.15px)}.z_tds_2f_web-iTkEmId{line-height:var(--z-tds_2f_web-typography-body-b3Strong-lineHeight,16px)}.z_tds_2f_web-iTkEmIe{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-056,#ffffff8f)))}.z_tds_2f_web-iTkEmIf{column-gap:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-iTkEmIg{flex-wrap:wrap}.z_tds_2f_web-iTkEmIh{margin-block-start:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-iTkEmIi{row-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-iTkEmIj{font-family:var(--z-tds_2f_web-typography-body-b3-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-iTkEmIk{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-iTkEmIl{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-iTkEmIm{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-iTkEmIn{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}.z_tds_2f_web-iTkEmIo{flex-direction:column}.z_tds_2f_web-iTkEmIp{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-iTkEmIq{& .recharts-cartesian-axis-tick-value{color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}}.z_tds_2f_web-iTkEmIr{& .recharts-cartesian-axis-tick-value{fill:currentColor}}.z_tds_2f_web-iTkEmIs{& .recharts-cartesian-axis-tick-value{font-family:var(--z-tds_2f_web-typography-body-b3-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}}.z_tds_2f_web-iTkEmIt{& .recharts-cartesian-axis-tick-value{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}}.z_tds_2f_web-iTkEmIu{& .recharts-cartesian-axis-tick-value{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}}.z_tds_2f_web-iTkEmIv{& .recharts-cartesian-axis-tick-value{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}}.z_tds_2f_web-iTkEmIw{& .recharts-cartesian-axis-tick-value{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}}.z_tds_2f_web-iTkEmIx{& .recharts-cartesian-grid-horizontal line{stroke:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}}.z_tds_2f_web-iTkEmIy{& .recharts-surface{outline:none}}.z_tds_2f_web-iTkEmIz{& .recharts-surface{overflow:visible}}.z_tds_2f_web-iTkEmI10{& .recharts-wrapper:focus-visible{border-radius:var(--z-tds_2f_web-radius-3xs,calc(.25rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-iTkEmI11{& .recharts-wrapper:focus-visible{outline-color:var(--z-tds_2f_web-color-border-focus,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-052,#ffffff85)))}}.z_tds_2f_web-iTkEmI12{& .recharts-wrapper:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-iTkEmI13{& .recharts-wrapper:focus-visible{outline-style:solid}}.z_tds_2f_web-iTkEmI14{& .recharts-wrapper:focus-visible{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}}.z_tds_2f_web-iTkEmI15{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-iTkEmI16{list-style:none}.z_tds_2f_web-iTkEmI17{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-iTkEmI18{margin-block-start:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-iTkEmI19{padding:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-iTkEmI1a{row-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-iTkEmI1b{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-056,#ffffff8f)))}.z_tds_2f_web-iTkEmI1c{flex-grow:1}.z_tds_2f_web-iTkEmI1d{overflow:hidden}.z_tds_2f_web-iTkEmI1e{text-overflow:ellipsis}.z_tds_2f_web-iTkEmI1f{fill:var(--z-tds_2f_web-color-container-strong,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-016,#ffffff29)))}.z_tds_2f_web-iTkEmI1g{border-radius:calc(.125rem * var(--tds-corner-scale,1))}.z_tds_2f_web-iTkEmI1h{flex-shrink:0}.z_tds_2f_web-iTkEmI1i{height:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-iTkEmI1j{width:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-iTkEmI1k{background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}.z_tds_2f_web-iTkEmI1l{border-radius:var(--z-tds_2f_web-radius-sm,calc(1rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-iTkEmI1m{box-shadow:var(--z-tds_2f_web-shadow-regular,0 8px 48px #0000000a, 0 4px 16px #0000000a, 0 2px 8px #0000000a)}.z_tds_2f_web-iTkEmI1n{box-sizing:border-box}.z_tds_2f_web-iTkEmI1o{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-iTkEmI1p{padding:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-iTkEmI1q{pointer-events:none}.z_tds_2f_web-iTkEmI1r{font-family:var(--z-tds_2f_web-typography-body-b3-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-iTkEmI1s{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-iTkEmI1t{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-iTkEmI1u{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-iTkEmI1v{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}.z_tds_2f_web-iTkEmI1w{width:var(--z-tds_2f_web-spacing-200,12.5rem)}

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

@@ -0,0 +1,155 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type * as zyzz from 'zyzz';
+/**
+ * A stacked bar chart of values over time, such as the spend of each agent per day, built on
+ * Recharts. Each `series` stacks in its own color, in order from the baseline. A value axis with
+ * three ticks leads the plot, the `index` labels the bars below it, and a legend names each series
+ * under the chart. Hovering a bar, or moving to it with the arrow keys, shows a `BarChart.Tooltip`
+ * with the value of each series.
+ *
+ * - Name the chart with `aria-label`, or with `aria-labelledby` pointing at its heading.
+ * - Give each series a color that stays the same wherever it appears, such as an agent's brand color.
+ * - Format values with `format`, which the axis, the tooltip, and the total share.
+ * - Offer the same values as a `Table` when people need to read each one.
+ *
+ * @example
+ * <BarChart
+ *   aria-label="Spend by agent"
+ *   data={[{ claude: 1.2, codex: 0.4, day: 'Oct 1' }]}
+ *   format={(value) => `$${value}`}
+ *   index="day"
+ *   series={[
+ *     { color: '#d97757', key: 'claude', label: 'Claude' },
+ *     { color: '#10a37f', key: 'codex', label: 'Codex' },
+ *   ]}
+ * />
+ *
+ * @see {@link https://recharts.github.io/en-US/api/BarChart/ | Recharts BarChart}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
+ */
+export declare function BarChart<const datum extends BarChart.Datum>(props: BarChart.Props<datum>): import("react").JSX.Element;
+export declare namespace BarChart {
+    /** One bar: the value of each series, and the label of the bar under `index`. */
+    type Datum = Record<string, number | string>;
+    type Props<datum extends Datum = Datum> = Omit<ComponentPropsWithRef<'div'>, 'children'> & zyzz.Props.Variants<typeof styles.root> & {
+        /**
+         * One entry per bar, in order along the axis. Each series value is zero or more, since the
+         * series stack up from a zero baseline and the value axis starts at zero.
+         */
+        data: readonly datum[];
+        /**
+         * Formats a value for the axis, the tooltip, and the total, such as `(value) => `$${value}``.
+         *
+         * @default String
+         */
+        format?: ((value: number) => string) | undefined;
+        /**
+         * Height in px of the plot and the axis under it. The legend adds 28px.
+         *
+         * @default 198
+         */
+        height?: number | undefined;
+        /** Key of the label of each bar, such as `day`. */
+        index: keyof datum & string;
+        /**
+         * The stacked series, from the baseline up, which the legend lists in the same order. Each
+         * key names a field with a number in every datum.
+         */
+        series: readonly Series<NumericKey<datum>>[];
+        /** Labels under the axis, such as every seventh day. Recharts picks them when absent. */
+        ticks?: readonly string[] | undefined;
+    };
+    /** The keys of a datum whose values are numbers, or every key of a datum typed by `Datum`. */
+    type NumericKey<datum extends Datum> = string extends keyof datum ? string : {
+        [key in keyof datum]: datum[key] extends number ? key : never;
+    }[keyof datum] & string;
+    /** One stacked series. */
+    type Series<key extends string = string> = {
+        /** Fill of the series, such as the brand color of an agent. */
+        color: string;
+        /** Key of the series' value in each datum. */
+        key: key;
+        /** Name of the series in the legend and the tooltip. */
+        label: string;
+    };
+    /**
+     * The card that names a bar and lists the value of each series in it, which the chart shows on
+     * hover. Render it alone to show the values of a bar elsewhere.
+     */
+    function Tooltip(props: Tooltip.Props): import("react").JSX.Element;
+    namespace Tooltip {
+        /** One series in the tooltip. */
+        type Item = {
+            /** Color of the series, as its bars fill. */
+            color: string;
+            /** Name of the series. */
+            label: ReactNode;
+            /** Formatted value of the series in the bar. */
+            value: ReactNode;
+        };
+        type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> & zyzz.Props.Variants<typeof styles.tooltip> & {
+            /** The series in the bar, from the baseline up. */
+            items: readonly Item[];
+            /** Label of the bar, such as its day. */
+            label: ReactNode;
+            /** Formatted total of the bar, at the end of the header. Absent, the header shows the label alone. */
+            total?: ReactNode | undefined;
+        };
+    }
+}
+declare namespace styles {
+    const cursor: zyzz.style.ReturnType<"react">;
+    const entry: zyzz.style.ReturnType<"react">;
+    const header: zyzz.style.ReturnType<"react">;
+    const legend: zyzz.style.ReturnType<"react">;
+    const root: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly minWidth: "0";
+            readonly selectors: {
+                readonly '& .recharts-cartesian-axis-tick-value': {
+                    readonly color: "content.tertiary";
+                    readonly fill: "currentColor !custom";
+                    readonly typography: "body.b3";
+                };
+                readonly '& .recharts-cartesian-grid-horizontal line': {
+                    readonly stroke: "line.secondary";
+                };
+                readonly '& .recharts-surface': {
+                    readonly outline: "none !custom";
+                    readonly overflow: "visible";
+                };
+                readonly '& .recharts-wrapper:focus-visible': {
+                    readonly borderRadius: "3xs";
+                    readonly outlineColor: "border.focus";
+                    readonly outlineOffset: "2";
+                    readonly outlineStyle: "solid !custom";
+                    readonly outlineWidth: "2";
+                };
+            };
+        };
+    }, "react">;
+    const row: zyzz.style.ReturnType<"react">;
+    const rows: zyzz.style.ReturnType<"react">;
+    const series: zyzz.style.ReturnType<"react">;
+    const stub: zyzz.style.ReturnType<"react">;
+    const swatch: zyzz.style.ReturnType<"react">;
+    const tooltip: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly backgroundColor: "background.elevated";
+            readonly borderRadius: "sm";
+            readonly boxShadow: "regular";
+            readonly boxSizing: "border-box";
+            readonly color: "content.primary";
+            readonly padding: "12";
+            readonly pointerEvents: "none";
+            readonly typography: "body.b3";
+            readonly width: "200";
+        };
+    }, "react">;
+    const value: zyzz.style.ReturnType<"react">;
+}
+export {};
+//# sourceMappingURL=BarChart.d.ts.map

package/dist/web/components/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/web/components/BarChart.tsx"],"names":[],"mappings":"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"}

package/dist/web/components/BarChart.js

@@ -0,0 +1,119 @@
+
+import { Props as __zyzzProps } from 'zyzz/runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import * as Recharts from 'recharts';
+import { style, variants } from '../zyzz.config.js';
+const reducedMotion = '(prefers-reduced-motion: reduce)';
+/**
+ * A stacked bar chart of values over time, such as the spend of each agent per day, built on
+ * Recharts. Each `series` stacks in its own color, in order from the baseline. A value axis with
+ * three ticks leads the plot, the `index` labels the bars below it, and a legend names each series
+ * under the chart. Hovering a bar, or moving to it with the arrow keys, shows a `BarChart.Tooltip`
+ * with the value of each series.
+ *
+ * - Name the chart with `aria-label`, or with `aria-labelledby` pointing at its heading.
+ * - Give each series a color that stays the same wherever it appears, such as an agent's brand color.
+ * - Format values with `format`, which the axis, the tooltip, and the total share.
+ * - Offer the same values as a `Table` when people need to read each one.
+ *
+ * @example
+ * <BarChart
+ *   aria-label="Spend by agent"
+ *   data={[{ claude: 1.2, codex: 0.4, day: 'Oct 1' }]}
+ *   format={(value) => `$${value}`}
+ *   index="day"
+ *   series={[
+ *     { color: '#d97757', key: 'claude', label: 'Claude' },
+ *     { color: '#10a37f', key: 'codex', label: 'Codex' },
+ *   ]}
+ * />
+ *
+ * @see {@link https://recharts.github.io/en-US/api/BarChart/ | Recharts BarChart}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
+ */
+export function BarChart(props) {
+    const { className, data, format = String, height = 198, index, series, ticks, vars, ...attributes } = props;
+    const reduced = useReducedMotion();
+    const value = (entry, key) => Number(entry[key] ?? 0);
+    // Recharts infers its data type from a key of the generic datum and cannot resolve it, so the
+    // axis and the bars read their keys as strings.
+    const category = index;
+    const peak = Math.max(0, ...data.map((entry) => series.reduce((sum, item) => sum + value(entry, item.key), 0)));
+    const step = niceStep(peak / 2);
+    return (_jsxs("div", { role: "figure", ...attributes, ...styles.root({ className, style: props.style, vars }), children: [_jsxs(Recharts.BarChart, { accessibilityLayer: true, barCategoryGap: 3, data: [...data], height: height, margin: { bottom: 0, left: 0, right: 0, top: 0 }, responsive: true, width: "100%", children: [_jsx(Recharts.CartesianGrid, { strokeDasharray: "2 4", vertical: false }), _jsx(Recharts.YAxis, { axisLine: false, 
+                        // Three even ticks round the scale up from the tallest bar.
+                        domain: [0, step * 2], tickFormatter: (tick) => format(tick), tickLine: false, tickMargin: 10, tickSize: 0, ticks: [0, step, Number((step * 2).toPrecision(12))], width: 54 }), _jsx(Recharts.XAxis, { axisLine: false, dataKey: category, height: 28, tickLine: false, tickMargin: 12, tickSize: 0, ...(ticks ? { interval: 0, ticks: [...ticks] } : { interval: 'preserveStartEnd' }) }), _jsx(Recharts.Tooltip, { content: (content) => {
+                            // Each payload entry carries the datum of the hovered bar, which two bars can share
+                            // a label with.
+                            const entry = content.payload?.[0]?.payload;
+                            if (!content.active || !entry)
+                                return null;
+                            const items = series.map((item) => ({
+                                color: item.color,
+                                label: item.label,
+                                value: format(value(entry, item.key)),
+                            }));
+                            const total = series.reduce((sum, item) => sum + value(entry, item.key), 0);
+                            return _jsx(Tooltip, { items: items, label: String(content.label), total: format(total) });
+                        }, cursor: styles.cursor(), isAnimationActive: false }), _jsx(Recharts.Bar, { dataKey: () => 0, isAnimationActive: false, legendType: "none", minPointSize: 2, shape: (shape) => (_jsx("rect", { ...styles.stub(), height: 2, width: shape.width, x: shape.x, y: (shape.y ?? 0) + (shape.height ?? 0) - 2 })), stackId: "total", tooltipType: "none" }), series.map((item) => (_jsx(Recharts.Bar, { animationDuration: 300, animationEasing: "ease-out", dataKey: item.key, fill: item.color, isAnimationActive: !reduced, name: item.label, shape: segment, stackId: "total" }, item.key)))] }), _jsx("div", { ...styles.legend(), children: series.map((item) => (_jsxs("span", { ...styles.entry(), children: [_jsx("span", { "aria-hidden": "true", ...styles.swatch({ style: { backgroundColor: item.color } }) }), item.label] }, item.key))) })] }));
+}
+(function (BarChart) {
+    /**
+     * The card that names a bar and lists the value of each series in it, which the chart shows on
+     * hover. Render it alone to show the values of a bar elsewhere.
+     */
+    function Tooltip(props) {
+        const { className, items, label, total, vars, ...attributes } = props;
+        return (_jsxs("div", { ...attributes, ...styles.tooltip({ className, style: props.style, vars }), children: [_jsxs("div", { ...styles.header(), children: [_jsx("span", { children: label }), total !== undefined && _jsx("span", { children: total })] }), _jsx("ul", { ...styles.rows(), children: items.map((item, position) => (_jsxs("li", { ...styles.row(), children: [_jsx("span", { "aria-hidden": "true", ...styles.swatch({ style: { backgroundColor: item.color } }) }), _jsx("span", { ...styles.series(), children: item.label }), _jsx("span", { ...styles.value(), children: item.value })] }, position))) })] }));
+    }
+    BarChart.Tooltip = Tooltip;
+})(BarChart || (BarChart = {}));
+/**
+ * Returns the smallest step of 1, 2, 2.5, or 5 times a power of ten that is at least `target`. An
+ * empty chart steps by 0.5, so its scale reaches 1.
+ */
+function niceStep(target) {
+    if (!(target > 0))
+        return 0.5;
+    const power = 10 ** Math.floor(Math.log10(target));
+    const factor = [1, 2, 2.5, 5, 10].find((entry) => entry * power >= target) ?? 10;
+    return Number((factor * power).toPrecision(12));
+}
+/** The bar of a tooltip-less series stacks 1px below the one above it, so segments stay apart. */
+function segment(shape) {
+    const height = Math.max((shape.height ?? 0) - 1, 0);
+    return (_jsx("rect", { fill: shape.fill, height: height, width: shape.width, x: shape.x, y: (shape.y ?? 0) + (shape.height ?? 0) - height }));
+}
+/** Whether the reader asks for reduced motion, which skips the bars' growth on load. */
+function useReducedMotion() {
+    return useSyncExternalStore((notify) => {
+        const query = window.matchMedia(reducedMotion);
+        query.addEventListener('change', notify);
+        return () => query.removeEventListener('change', notify);
+    }, () => window.matchMedia(reducedMotion).matches, () => true);
+}
+const Tooltip = BarChart.Tooltip;
+var styles;
+(function (styles) {
+    styles.cursor = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmI0"});
+    styles.entry = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmI1 z_tds_2f_web-iTkEmI2 z_tds_2f_web-iTkEmI3 z_tds_2f_web-iTkEmI4"});
+    styles.header = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmI5 z_tds_2f_web-iTkEmI6 z_tds_2f_web-iTkEmI7 z_tds_2f_web-iTkEmI8 z_tds_2f_web-iTkEmI9 z_tds_2f_web-iTkEmIa z_tds_2f_web-iTkEmIb z_tds_2f_web-iTkEmIc z_tds_2f_web-iTkEmId"});
+    // The legend sits 12px under the axis labels, 16px between its entries.
+    styles.legend = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmIe z_tds_2f_web-iTkEmIf z_tds_2f_web-iTkEmI7 z_tds_2f_web-iTkEmIg z_tds_2f_web-iTkEmIh z_tds_2f_web-iTkEmIi z_tds_2f_web-iTkEmIj z_tds_2f_web-iTkEmIk z_tds_2f_web-iTkEmIl z_tds_2f_web-iTkEmIm z_tds_2f_web-iTkEmIn"});
+    // Recharts draws the grid and the axis labels in SVG, so their paint comes from these selectors.
+    // An SVG text paints with `fill`, and takes `color` too so that `currentColor` matches it.
+    styles.root = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-iTkEmI7 z_tds_2f_web-iTkEmIo z_tds_2f_web-iTkEmIp z_tds_2f_web-iTkEmIq z_tds_2f_web-iTkEmIr z_tds_2f_web-iTkEmIs z_tds_2f_web-iTkEmIt z_tds_2f_web-iTkEmIu z_tds_2f_web-iTkEmIv z_tds_2f_web-iTkEmIw z_tds_2f_web-iTkEmIx z_tds_2f_web-iTkEmIy z_tds_2f_web-iTkEmIz z_tds_2f_web-iTkEmI10 z_tds_2f_web-iTkEmI11 z_tds_2f_web-iTkEmI12 z_tds_2f_web-iTkEmI13 z_tds_2f_web-iTkEmI14"+" "+external:"z_tds_2f_web-iTkEmI7 z_tds_2f_web-iTkEmIo z_tds_2f_web-iTkEmIp z_tds_2f_web-iTkEmIq z_tds_2f_web-iTkEmIr z_tds_2f_web-iTkEmIs z_tds_2f_web-iTkEmIt z_tds_2f_web-iTkEmIu z_tds_2f_web-iTkEmIv z_tds_2f_web-iTkEmIw z_tds_2f_web-iTkEmIx z_tds_2f_web-iTkEmIy z_tds_2f_web-iTkEmIz z_tds_2f_web-iTkEmI10 z_tds_2f_web-iTkEmI11 z_tds_2f_web-iTkEmI12 z_tds_2f_web-iTkEmI13 z_tds_2f_web-iTkEmI14",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.row = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmI1 z_tds_2f_web-iTkEmI15 z_tds_2f_web-iTkEmI7"});
+    styles.rows = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmI7 z_tds_2f_web-iTkEmIo z_tds_2f_web-iTkEmI16 z_tds_2f_web-iTkEmI17 z_tds_2f_web-iTkEmI18 z_tds_2f_web-iTkEmI19 z_tds_2f_web-iTkEmI1a"});
+    styles.series = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmI1b z_tds_2f_web-iTkEmI1c z_tds_2f_web-iTkEmIp z_tds_2f_web-iTkEmI1d z_tds_2f_web-iTkEmI1e z_tds_2f_web-iTkEmI4"});
+    styles.stub = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmI1f"});
+    // A swatch keeps a 2px corner, which no radius token sets.
+    styles.swatch = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmI1g z_tds_2f_web-iTkEmI1h z_tds_2f_web-iTkEmI1i z_tds_2f_web-iTkEmI1j"});
+    // Figma pads the 16px corner of the tooltip by 12px, below the radius, which keeps its rows dense.
+    styles.tooltip = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-iTkEmI1k z_tds_2f_web-iTkEmI1l z_tds_2f_web-iTkEmI1m z_tds_2f_web-iTkEmI1n z_tds_2f_web-iTkEmI1o z_tds_2f_web-iTkEmI1p z_tds_2f_web-iTkEmI1q z_tds_2f_web-iTkEmI1r z_tds_2f_web-iTkEmI1s z_tds_2f_web-iTkEmI1t z_tds_2f_web-iTkEmI1u z_tds_2f_web-iTkEmI1v z_tds_2f_web-iTkEmI1w"+" "+external:"z_tds_2f_web-iTkEmI1k z_tds_2f_web-iTkEmI1l z_tds_2f_web-iTkEmI1m z_tds_2f_web-iTkEmI1n z_tds_2f_web-iTkEmI1o z_tds_2f_web-iTkEmI1p z_tds_2f_web-iTkEmI1q z_tds_2f_web-iTkEmI1r z_tds_2f_web-iTkEmI1s z_tds_2f_web-iTkEmI1t z_tds_2f_web-iTkEmI1u z_tds_2f_web-iTkEmI1v z_tds_2f_web-iTkEmI1w",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.value = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iTkEmI1o z_tds_2f_web-iTkEmI1h"});
+})(styles || (styles = {}));
+//# sourceMappingURL=BarChart.js.map
+import './BarChart.css';

package/dist/web/components/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/web/components/BarChart.tsx"],"names":[],"mappings":"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"}