@sproutsocial/seeds-react-data-viz 0.7.32 → 0.15.0

package/dist/axis-DXzufRRj.d.mts

@@ -0,0 +1,116 @@
+import { ReactNode } from 'react';
+import { TypeIconName } from '@sproutsocial/seeds-react-icon';
+import { c as TypeChartNumberFormat, k as TypeChartStyleColor } from './types-B7ILUQ6_.mjs';
+
+type TypeValuePercentInput = "decimal" | "whole";
+type TypeValueFormatterOptions = Readonly<{
+    /** The raw numeric value. For duration, milliseconds. */
+    value: number;
+    /** default "decimal" */
+    numberFormat?: TypeChartNumberFormat;
+    /** Only used when numberFormat === "currency". default "USD" */
+    currency?: string;
+    /** true → 10k threshold; number → max(1000, abs(n)); false → never. default true */
+    abbreviate?: boolean | number;
+    /** "decimal" scales 0.42 → "42%"; "whole" treats 42 → "42%". default "decimal" */
+    percentInput?: TypeValuePercentInput;
+    /** locale for decimal/currency/percent (formatNumeral) */
+    numberLocale?: Intl.LocalesArgument;
+    /** locale for duration (formatDuration) */
+    textLocale?: Intl.LocalesArgument;
+}>;
+/**
+ * Declarative value-format config for axis ticks and the default tooltip — the
+ * full {@link TypeValueFormatterOptions} surface minus `value`, which is
+ * supplied per-tick / per-row by the caller (the adapter and tooltip).
+ */
+type ValueFormat = Omit<TypeValueFormatterOptions, "value">;
+
+interface ChartTooltipDataRow {
+    color: TypeChartStyleColor;
+    name: string;
+    value: number | null;
+}
+/** Tooltip render-prop signature for v2 charts. */
+interface ChartTooltipProps {
+    data: ChartTooltipDataRow[];
+    /** Resolved x-axis position. Category name for category axes, numeric for time/linear. */
+    position: number | string;
+    /** Resolved chart timezone — pass to date formatters when `position` is a numeric timestamp. Undefined on category axes. */
+    timezone?: string;
+    /** Declarative annotation anchored at this position, if any. Rendered in the tooltip header. */
+    annotation?: {
+        icon?: TypeIconName;
+        color?: string;
+        title?: string;
+        description?: string;
+    };
+    /** True when the chart has an `onClick` handler — used by the default tooltip to render the click-label footer. */
+    hasOnClick?: boolean;
+    /** Footer content shown in the default tooltip when the chart is clickable. */
+    tooltipClickLabel?: ReactNode;
+    /** Content shown in place of a row's value when the value is null. Defaults to an em-dash. */
+    invalidNumberLabel?: ReactNode;
+    /** Declarative value format for the tooltip value cell. Omit for raw rendering. Applied at full precision (abbreviation off). */
+    valueFormat?: ValueFormat;
+}
+
+/**
+ * Declarative annotation shape — the DS renders the marker and tooltip header
+ * internally; consumers don't supply render functions. See CE-7.
+ */
+interface ChartAnnotation {
+    /** Numeric x-axis coordinate — a category index (category axes) or the raw coordinate (datetime/linear axes). */
+    position: number;
+    /** Icon shown above the chart at `position` and inline with `title` in the tooltip header. */
+    icon?: TypeIconName;
+    /** Color applied to the marker's vertical line. */
+    color?: string;
+    /** Tooltip header line 1. */
+    title?: string;
+    /** Tooltip header line 2. */
+    description?: string;
+}
+
+/**
+ * Pure, Highcharts-free datetime axis label formatter for v2 chart families.
+ *
+ * Ports v1's `helpers/xAxisLabelFormatter` into a rendering-agnostic shape: it
+ * returns a `{ primary, secondary? }` object instead of an HTML string, leaving
+ * SVG rendering to the caller. The timezone- and DST-correct boundary detection
+ * (calendar parts read in the target timezone) and the per-granularity
+ * `Intl.DateTimeFormat` option sets are a near-verbatim port of v1.
+ *
+ * The one net-new piece versus v1 is granularity derivation: v1 receives
+ * `unitName` from Highcharts, but `charts/` may not depend on Highcharts types
+ * (see `charts/README.md` invariants), so granularity is derived from the
+ * spacing of `tickPositions`.
+ */
+type DatetimeTimeFormat = "12" | "24";
+
+/** A datetime data point: `[msSinceEpoch, value]` tuple or `{ x, y }` object. */
+type DatetimePoint = [number, number | null] | {
+    x: number;
+    y: number | null;
+};
+/** A value on a category axis, or a datetime point when the axis is `"datetime"`. */
+type ChartDataPoint = number | null | DatetimePoint;
+/** Category axis — labels indexed parallel to `series.data`. The default axis type. */
+interface CategoryAxis {
+    type?: "category";
+    /** Category labels, indexed parallel to `series.data`. */
+    categories: Array<string>;
+    crosshair?: boolean;
+}
+/** Datetime axis — `series.data` carries timestamped points. */
+interface DatetimeAxis {
+    type: "datetime";
+    crosshair?: boolean;
+    /**
+     * 12- or 24-hour clock for hour-granularity tick labels (e.g. `9 AM` vs
+     * `09:00`). Default `"12"`. Coarser granularities (day/month/year) ignore it.
+     */
+    timeFormat?: DatetimeTimeFormat;
+}
+
+export type { ChartDataPoint as C, DatetimeAxis as D, ValueFormat as V, CategoryAxis as a, ChartTooltipProps as b, ChartAnnotation as c, DatetimePoint as d };

package/dist/axis-PJwu5Xmo.d.ts

@@ -0,0 +1,116 @@
+import { ReactNode } from 'react';
+import { TypeIconName } from '@sproutsocial/seeds-react-icon';
+import { c as TypeChartNumberFormat, k as TypeChartStyleColor } from './types-B7ILUQ6_.js';
+
+type TypeValuePercentInput = "decimal" | "whole";
+type TypeValueFormatterOptions = Readonly<{
+    /** The raw numeric value. For duration, milliseconds. */
+    value: number;
+    /** default "decimal" */
+    numberFormat?: TypeChartNumberFormat;
+    /** Only used when numberFormat === "currency". default "USD" */
+    currency?: string;
+    /** true → 10k threshold; number → max(1000, abs(n)); false → never. default true */
+    abbreviate?: boolean | number;
+    /** "decimal" scales 0.42 → "42%"; "whole" treats 42 → "42%". default "decimal" */
+    percentInput?: TypeValuePercentInput;
+    /** locale for decimal/currency/percent (formatNumeral) */
+    numberLocale?: Intl.LocalesArgument;
+    /** locale for duration (formatDuration) */
+    textLocale?: Intl.LocalesArgument;
+}>;
+/**
+ * Declarative value-format config for axis ticks and the default tooltip — the
+ * full {@link TypeValueFormatterOptions} surface minus `value`, which is
+ * supplied per-tick / per-row by the caller (the adapter and tooltip).
+ */
+type ValueFormat = Omit<TypeValueFormatterOptions, "value">;
+
+interface ChartTooltipDataRow {
+    color: TypeChartStyleColor;
+    name: string;
+    value: number | null;
+}
+/** Tooltip render-prop signature for v2 charts. */
+interface ChartTooltipProps {
+    data: ChartTooltipDataRow[];
+    /** Resolved x-axis position. Category name for category axes, numeric for time/linear. */
+    position: number | string;
+    /** Resolved chart timezone — pass to date formatters when `position` is a numeric timestamp. Undefined on category axes. */
+    timezone?: string;
+    /** Declarative annotation anchored at this position, if any. Rendered in the tooltip header. */
+    annotation?: {
+        icon?: TypeIconName;
+        color?: string;
+        title?: string;
+        description?: string;
+    };
+    /** True when the chart has an `onClick` handler — used by the default tooltip to render the click-label footer. */
+    hasOnClick?: boolean;
+    /** Footer content shown in the default tooltip when the chart is clickable. */
+    tooltipClickLabel?: ReactNode;
+    /** Content shown in place of a row's value when the value is null. Defaults to an em-dash. */
+    invalidNumberLabel?: ReactNode;
+    /** Declarative value format for the tooltip value cell. Omit for raw rendering. Applied at full precision (abbreviation off). */
+    valueFormat?: ValueFormat;
+}
+
+/**
+ * Declarative annotation shape — the DS renders the marker and tooltip header
+ * internally; consumers don't supply render functions. See CE-7.
+ */
+interface ChartAnnotation {
+    /** Numeric x-axis coordinate — a category index (category axes) or the raw coordinate (datetime/linear axes). */
+    position: number;
+    /** Icon shown above the chart at `position` and inline with `title` in the tooltip header. */
+    icon?: TypeIconName;
+    /** Color applied to the marker's vertical line. */
+    color?: string;
+    /** Tooltip header line 1. */
+    title?: string;
+    /** Tooltip header line 2. */
+    description?: string;
+}
+
+/**
+ * Pure, Highcharts-free datetime axis label formatter for v2 chart families.
+ *
+ * Ports v1's `helpers/xAxisLabelFormatter` into a rendering-agnostic shape: it
+ * returns a `{ primary, secondary? }` object instead of an HTML string, leaving
+ * SVG rendering to the caller. The timezone- and DST-correct boundary detection
+ * (calendar parts read in the target timezone) and the per-granularity
+ * `Intl.DateTimeFormat` option sets are a near-verbatim port of v1.
+ *
+ * The one net-new piece versus v1 is granularity derivation: v1 receives
+ * `unitName` from Highcharts, but `charts/` may not depend on Highcharts types
+ * (see `charts/README.md` invariants), so granularity is derived from the
+ * spacing of `tickPositions`.
+ */
+type DatetimeTimeFormat = "12" | "24";
+
+/** A datetime data point: `[msSinceEpoch, value]` tuple or `{ x, y }` object. */
+type DatetimePoint = [number, number | null] | {
+    x: number;
+    y: number | null;
+};
+/** A value on a category axis, or a datetime point when the axis is `"datetime"`. */
+type ChartDataPoint = number | null | DatetimePoint;
+/** Category axis — labels indexed parallel to `series.data`. The default axis type. */
+interface CategoryAxis {
+    type?: "category";
+    /** Category labels, indexed parallel to `series.data`. */
+    categories: Array<string>;
+    crosshair?: boolean;
+}
+/** Datetime axis — `series.data` carries timestamped points. */
+interface DatetimeAxis {
+    type: "datetime";
+    crosshair?: boolean;
+    /**
+     * 12- or 24-hour clock for hour-granularity tick labels (e.g. `9 AM` vs
+     * `09:00`). Default `"12"`. Coarser granularities (day/month/year) ignore it.
+     */
+    timeFormat?: DatetimeTimeFormat;
+}
+
+export type { ChartDataPoint as C, DatetimeAxis as D, ValueFormat as V, CategoryAxis as a, ChartTooltipProps as b, ChartAnnotation as c, DatetimePoint as d };

package/dist/bar/index.d.mts

@@ -0,0 +1,98 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TypeIconName } from '@sproutsocial/seeds-react-icon';
+import { C as ChartDataPoint, a as CategoryAxis, D as DatetimeAxis, V as ValueFormat, b as ChartTooltipProps, c as ChartAnnotation, d as DatetimePoint } from '../axis-DXzufRRj.mjs';
+import { C as ChartExportHandle } from '../chartExport-CKYpuhik.mjs';
+import '../types-B7ILUQ6_.mjs';
+import 'highcharts';
+
+/** A datetime data point: `[msSinceEpoch, value]` tuple or `{ x, y }` object. */
+type BarDatetimePoint = DatetimePoint;
+/** A category y-value, or a datetime point when the dimensional axis is `"datetime"`. */
+type BarDataPoint = ChartDataPoint;
+interface BarSeries {
+    name: string;
+    /**
+     * Y-values indexed parallel to `xAxis.categories` on a category axis, or
+     * `[timestamp, value]` / `{ x, y }` points on a datetime axis.
+     */
+    data: Array<BarDataPoint>;
+    color?: string;
+    /** Seeds icon or partner-logo name rendered before the series name in the legend. */
+    icon?: TypeIconName;
+}
+type BarXAxis = CategoryAxis | DatetimeAxis;
+interface BarYAxis {
+    min?: number;
+    max?: number;
+    /** Default: true. */
+    showGridLines?: boolean;
+    title?: string;
+    /**
+     * Declarative value formatting applied to y-axis tick labels and the default
+     * tooltip value. Omit for the zero-config decimal default (smart 1k/10k
+     * abbreviation on the axis, raw values in the tooltip).
+     */
+    format?: ValueFormat;
+    /**
+     * Show y-axis tick labels. Default `true`. `false` hides them (maps to
+     * Highcharts' `labels.enabled`, replacing v1's `() => ""` formatter trick).
+     */
+    showLabels?: boolean;
+}
+/**
+ * Direction in which bars are drawn. Single-member union for now; expands to
+ * `"vertical" | "horizontal"` when `HorizontalBarChart` ships.
+ */
+type BarChartDirection = "vertical";
+interface BarChartProps {
+    /** Wired into Highcharts' `accessibility.description`. */
+    description: string;
+    series: Array<BarSeries>;
+    /**
+     * Maximum number of series to display. Series beyond the limit are dropped to
+     * keep the chart readable and accessible. Default `10`.
+     */
+    seriesLimit?: number;
+    /**
+     * Suppress the `console.warn` emitted when the series count exceeds the limit.
+     * The cap still applies. Default `false`.
+     */
+    hideSeriesLimitWarning?: boolean;
+    xAxis: BarXAxis;
+    yAxis?: BarYAxis;
+    /** IANA timezone for datetime-axis ticks and tooltips. Default `"UTC"`. Ignored for category axes. */
+    timezone?: string;
+    /**
+     * Stacking mode for multi-series charts. Defaults to `"normal"` — the
+     * canonical design-system spec renders multi-series bar charts as a single
+     * stacked column per category. `"percent"` normalizes each column to 100%.
+     * `"grouped"` renders series as adjacent bars per category; not part of the
+     * canonical spec, but available for non-standard use cases.
+     */
+    stacking?: "normal" | "percent" | "grouped";
+    /** Appended to each tooltip value (e.g., `" MT"`, `"%"`). */
+    valueSuffix?: string;
+    /** Override for the default tooltip content. */
+    tooltip?: (args: ChartTooltipProps) => ReactNode;
+    /** Declarative annotations rendered at positions on the chart. */
+    annotations?: ChartAnnotation[];
+    /** Click handler invoked with the dimensional-axis value of the clicked column — the category name on a category axis, the numeric timestamp on a datetime axis. `position` is direction-agnostic: the x-axis value on `VerticalBarChart`, the y-axis value on `HorizontalBarChart`. */
+    onClick?: ({ position }: {
+        position: number | string;
+    }) => void;
+    /** Footer content shown in the default tooltip when `onClick` is set. */
+    tooltipClickLabel?: ReactNode;
+    /** Override for the value shown when a data point is invalid/missing (null). Defaults to an em-dash. */
+    invalidNumberLabel?: ReactNode;
+    /**
+     * Fired once per chart instance with an opaque {@link ChartExportHandle} for
+     * triggering PNG/SVG/PDF/CSV downloads. Re-fires only on a genuine remount,
+     * never on data or prop updates.
+     */
+    onReady?: (handle: ChartExportHandle) => void;
+}
+
+declare const VerticalBarChart: react.NamedExoticComponent<BarChartProps>;
+
+export { type BarChartDirection, type BarChartProps, type BarDataPoint, type BarDatetimePoint, type BarSeries, type BarXAxis, type BarYAxis, CategoryAxis, ChartExportHandle, DatetimeAxis, ValueFormat, VerticalBarChart };

package/dist/bar/index.d.ts

@@ -0,0 +1,98 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TypeIconName } from '@sproutsocial/seeds-react-icon';
+import { C as ChartDataPoint, a as CategoryAxis, D as DatetimeAxis, V as ValueFormat, b as ChartTooltipProps, c as ChartAnnotation, d as DatetimePoint } from '../axis-PJwu5Xmo.js';
+import { C as ChartExportHandle } from '../chartExport-CKYpuhik.js';
+import '../types-B7ILUQ6_.js';
+import 'highcharts';
+
+/** A datetime data point: `[msSinceEpoch, value]` tuple or `{ x, y }` object. */
+type BarDatetimePoint = DatetimePoint;
+/** A category y-value, or a datetime point when the dimensional axis is `"datetime"`. */
+type BarDataPoint = ChartDataPoint;
+interface BarSeries {
+    name: string;
+    /**
+     * Y-values indexed parallel to `xAxis.categories` on a category axis, or
+     * `[timestamp, value]` / `{ x, y }` points on a datetime axis.
+     */
+    data: Array<BarDataPoint>;
+    color?: string;
+    /** Seeds icon or partner-logo name rendered before the series name in the legend. */
+    icon?: TypeIconName;
+}
+type BarXAxis = CategoryAxis | DatetimeAxis;
+interface BarYAxis {
+    min?: number;
+    max?: number;
+    /** Default: true. */
+    showGridLines?: boolean;
+    title?: string;
+    /**
+     * Declarative value formatting applied to y-axis tick labels and the default
+     * tooltip value. Omit for the zero-config decimal default (smart 1k/10k
+     * abbreviation on the axis, raw values in the tooltip).
+     */
+    format?: ValueFormat;
+    /**
+     * Show y-axis tick labels. Default `true`. `false` hides them (maps to
+     * Highcharts' `labels.enabled`, replacing v1's `() => ""` formatter trick).
+     */
+    showLabels?: boolean;
+}
+/**
+ * Direction in which bars are drawn. Single-member union for now; expands to
+ * `"vertical" | "horizontal"` when `HorizontalBarChart` ships.
+ */
+type BarChartDirection = "vertical";
+interface BarChartProps {
+    /** Wired into Highcharts' `accessibility.description`. */
+    description: string;
+    series: Array<BarSeries>;
+    /**
+     * Maximum number of series to display. Series beyond the limit are dropped to
+     * keep the chart readable and accessible. Default `10`.
+     */
+    seriesLimit?: number;
+    /**
+     * Suppress the `console.warn` emitted when the series count exceeds the limit.
+     * The cap still applies. Default `false`.
+     */
+    hideSeriesLimitWarning?: boolean;
+    xAxis: BarXAxis;
+    yAxis?: BarYAxis;
+    /** IANA timezone for datetime-axis ticks and tooltips. Default `"UTC"`. Ignored for category axes. */
+    timezone?: string;
+    /**
+     * Stacking mode for multi-series charts. Defaults to `"normal"` — the
+     * canonical design-system spec renders multi-series bar charts as a single
+     * stacked column per category. `"percent"` normalizes each column to 100%.
+     * `"grouped"` renders series as adjacent bars per category; not part of the
+     * canonical spec, but available for non-standard use cases.
+     */
+    stacking?: "normal" | "percent" | "grouped";
+    /** Appended to each tooltip value (e.g., `" MT"`, `"%"`). */
+    valueSuffix?: string;
+    /** Override for the default tooltip content. */
+    tooltip?: (args: ChartTooltipProps) => ReactNode;
+    /** Declarative annotations rendered at positions on the chart. */
+    annotations?: ChartAnnotation[];
+    /** Click handler invoked with the dimensional-axis value of the clicked column — the category name on a category axis, the numeric timestamp on a datetime axis. `position` is direction-agnostic: the x-axis value on `VerticalBarChart`, the y-axis value on `HorizontalBarChart`. */
+    onClick?: ({ position }: {
+        position: number | string;
+    }) => void;
+    /** Footer content shown in the default tooltip when `onClick` is set. */
+    tooltipClickLabel?: ReactNode;
+    /** Override for the value shown when a data point is invalid/missing (null). Defaults to an em-dash. */
+    invalidNumberLabel?: ReactNode;
+    /**
+     * Fired once per chart instance with an opaque {@link ChartExportHandle} for
+     * triggering PNG/SVG/PDF/CSV downloads. Re-fires only on a genuine remount,
+     * never on data or prop updates.
+     */
+    onReady?: (handle: ChartExportHandle) => void;
+}
+
+declare const VerticalBarChart: react.NamedExoticComponent<BarChartProps>;
+
+export { type BarChartDirection, type BarChartProps, type BarDataPoint, type BarDatetimePoint, type BarSeries, type BarXAxis, type BarYAxis, CategoryAxis, ChartExportHandle, DatetimeAxis, ValueFormat, VerticalBarChart };

package/dist/bar/index.js

@@ -0,0 +1,186 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+var _chunkJXARPHQEjs = require('../chunk-JXARPHQE.js');
+
+
+
+
+
+
+
+
+
+var _chunkVSZSIN34js = require('../chunk-VSZSIN34.js');
+require('../chunk-EEVKTTT3.js');
+
+// src/charts/bar/VerticalBarChart.tsx
+var _react = require('react');
+
+// src/charts/bar/adapter.ts
+function highchartsType(direction) {
+  switch (direction) {
+    case "vertical":
+      return "column";
+  }
+}
+function buildBarChartOptions(props, direction, series = props.series) {
+  const chartType = highchartsType(direction);
+  const isDatetime = props.xAxis.type === "datetime";
+  const tooltipTimezone = _chunkVSZSIN34js.resolveTooltipTimezone.call(void 0, props.xAxis, props.timezone);
+  const { annotations, lookup: annotationLookup } = _chunkVSZSIN34js.buildAnnotationConfig.call(void 0, 
+    props.annotations
+  );
+  const options = {
+    ..._chunkVSZSIN34js.buildBaseChartOptions.call(void 0, {
+      type: chartType,
+      description: props.description,
+      valueSuffix: props.valueSuffix,
+      reserveTopMargin: Boolean(annotations),
+      timezone: tooltipTimezone
+    }),
+    xAxis: _chunkVSZSIN34js.buildDimensionalAxis.call(void 0, props.xAxis, _nullishCoalesce(tooltipTimezone, () => ( "UTC"))),
+    yAxis: {
+      min: _optionalChain([props, 'access', _ => _.yAxis, 'optionalAccess', _2 => _2.min]),
+      max: _optionalChain([props, 'access', _3 => _3.yAxis, 'optionalAccess', _4 => _4.max]),
+      gridLineWidth: _optionalChain([props, 'access', _5 => _5.yAxis, 'optionalAccess', _6 => _6.showGridLines]) === false ? 0 : 1,
+      title: { text: _nullishCoalesce(_optionalChain([props, 'access', _7 => _7.yAxis, 'optionalAccess', _8 => _8.title]), () => ( "")) },
+      labels: {
+        // `showLabels` toggles tick-label visibility; defaults to shown.
+        enabled: _optionalChain([props, 'access', _9 => _9.yAxis, 'optionalAccess', _10 => _10.showLabels]) !== false,
+        // A declarative `format` drives ticks through the shared valueFormatter;
+        // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).
+        formatter: _optionalChain([props, 'access', _11 => _11.yAxis, 'optionalAccess', _12 => _12.format]) ? _chunkVSZSIN34js.makeValueAxisLabelFormatter.call(void 0, props.yAxis.format) : _chunkVSZSIN34js.defaultValueAxisLabelFormatter
+      }
+    },
+    plotOptions: {
+      series: { animation: false },
+      column: {
+        // "grouped" maps to omitting `stacking` — Highcharts renders multi-series
+        // columns side-by-side when no stacking is set.
+        ...props.stacking === "grouped" ? {} : { stacking: _nullishCoalesce(props.stacking, () => ( "normal")) },
+        pointPadding: 0.25,
+        groupPadding: 0.25,
+        // Fixed bar width on datetime axes. Sparse time-series otherwise size
+        // columns from the (large) gap between points and balloon; this mirrors
+        // v1's `pointWidth: 20` time-series treatment. Dense datetime data may
+        // instead want a `maxPointWidth` cap — revisit when Line/Area land.
+        ...isDatetime ? { pointWidth: 20 } : {},
+        borderRadius: 4,
+        borderWidth: 0,
+        // Pairs with the `:hover` dimming rule in `styles.ts`: while the cursor
+        // is over the chart, all bars dim; these handlers restore opacity for
+        // every bar at the hovered x (so stacked/grouped columns highlight
+        // together rather than just the single hovered bar).
+        point: {
+          events: {
+            click: props.onClick ? (event) => props.onClick({ position: event.point.x }) : void 0,
+            mouseOver: function() {
+              const x = this.x;
+              this.series.chart.series.forEach((s) => {
+                if (s.type !== "column") return;
+                s.data.forEach((point) => {
+                  if (point.x !== x) return;
+                  _optionalChain([point, 'access', _13 => _13.graphic, 'optionalAccess', _14 => _14.element, 'optionalAccess', _15 => _15.classList, 'access', _16 => _16.add, 'call', _17 => _17("column-hover")]);
+                });
+              });
+            },
+            mouseOut: function() {
+              this.series.chart.series.forEach((s) => {
+                if (s.type !== "column") return;
+                s.data.forEach((point) => {
+                  _optionalChain([point, 'access', _18 => _18.graphic, 'optionalAccess', _19 => _19.element, 'optionalAccess', _20 => _20.classList, 'access', _21 => _21.remove, 'call', _22 => _22("column-hover")]);
+                });
+              });
+            }
+          }
+        }
+      }
+    },
+    series: series.map((s) => ({
+      type: chartType,
+      name: s.name,
+      data: [...s.data],
+      color: s.color
+    })),
+    ...annotations ? { annotations } : {}
+  };
+  return { options, annotationLookup, tooltipTimezone };
+}
+
+// src/charts/bar/styles.ts
+var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+var _seedsreactbox = require('@sproutsocial/seeds-react-box');
+
+// src/charts/shared/styles.ts
+
+var axisLabelV2Styles = _styledcomponents.css`
+  .highcharts-xaxis-labels,
+  .highcharts-yaxis-labels {
+    // SVG labels (styledMode): fill is the SVG text colour; color has no effect.
+    text {
+      font-family: ${({ theme }) => theme.fontFamily};
+      ${({ theme }) => theme.typography[100]};
+      font-weight: ${({ theme }) => theme.fontWeights.normal};
+      fill: ${({ theme }) => theme.colors.text.subtext};
+    }
+  }
+  // Two-line stacked datetime label: the boundary token is an
+  // hc-axis-label-secondary tspan on a second line, rendered semibold.
+  .highcharts-xaxis-labels text tspan.hc-axis-label-secondary {
+    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  }
+`;
+
+// src/charts/bar/styles.ts
+var VerticalBarStyledBox = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
+  ${_chunkJXARPHQEjs.verticalBarChartStyles}
+  ${axisLabelV2Styles}
+`;
+
+// src/charts/bar/VerticalBarChart.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var VerticalBarChart = _react.memo.call(void 0, function VerticalBarChart2(props) {
+  const seriesLimit = _nullishCoalesce(props.seriesLimit, () => ( _chunkJXARPHQEjs.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT));
+  const { colors, series } = _chunkVSZSIN34js.useSeedsChartSetup.call(void 0, {
+    series: props.series,
+    seriesLimit,
+    isSeriesLimitOverridden: props.seriesLimit !== void 0,
+    hideSeriesLimitWarning: props.hideSeriesLimitWarning,
+    componentName: "VerticalBarChart"
+  });
+  const { options, annotationLookup, tooltipTimezone } = buildBarChartOptions(
+    props,
+    "vertical",
+    series
+  );
+  const hasOnClick = Boolean(props.onClick);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    VerticalBarStyledBox,
+    {
+      $colors: colors,
+      $hasOnClick: hasOnClick,
+      bg: "container.background.base",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkVSZSIN34js.ChartRenderer,
+        {
+          options,
+          series,
+          colors,
+          tooltip: props.tooltip,
+          annotationLookup,
+          hasOnClick,
+          tooltipClickLabel: props.tooltipClickLabel,
+          timezone: tooltipTimezone,
+          invalidNumberLabel: props.invalidNumberLabel,
+          valueFormat: _optionalChain([props, 'access', _23 => _23.yAxis, 'optionalAccess', _24 => _24.format]),
+          onReady: props.onReady
+        }
+      )
+    }
+  );
+});
+
+
+exports.VerticalBarChart = VerticalBarChart;
+//# sourceMappingURL=index.js.map

package/dist/bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/bar/index.js","../../src/charts/bar/VerticalBarChart.tsx","../../src/charts/bar/adapter.ts","../../src/charts/bar/styles.ts","../../src/charts/shared/styles.ts"],"names":["VerticalBarChart"],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/bar/index.js","sourcesContent":[null,"import { memo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { buildBarChartOptions } from \"./adapter\";\nimport { VerticalBarStyledBox } from \"./styles\";\nimport type { BarChartProps } from \"./types\";\nimport { VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT } from \"../../constants\";\n\nexport const VerticalBarChart = memo(function VerticalBarChart(\n  props: BarChartProps\n) {\n  // The shared hook caps the series to the limit (and warns once per render\n  // when the default is exceeded without an explicit override) so the adapter\n  // and renderer below all consume the capped data.\n  const seriesLimit =\n    props.seriesLimit ?? VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT;\n  const { colors, series } = useSeedsChartSetup({\n    series: props.series,\n    seriesLimit,\n    isSeriesLimitOverridden: props.seriesLimit !== undefined,\n    hideSeriesLimitWarning: props.hideSeriesLimitWarning,\n    componentName: \"VerticalBarChart\",\n  });\n\n  const { options, annotationLookup, tooltipTimezone } = buildBarChartOptions(\n    props,\n    \"vertical\",\n    series\n  );\n  const hasOnClick = Boolean(props.onClick);\n\n  return (\n    <VerticalBarStyledBox\n      $colors={colors}\n      $hasOnClick={hasOnClick}\n      bg=\"container.background.base\"\n    >\n      <ChartRenderer\n        options={options}\n        series={series}\n        colors={colors}\n        tooltip={props.tooltip}\n        annotationLookup={annotationLookup}\n        hasOnClick={hasOnClick}\n        tooltipClickLabel={props.tooltipClickLabel}\n        timezone={tooltipTimezone}\n        invalidNumberLabel={props.invalidNumberLabel}\n        valueFormat={props.yAxis?.format}\n        onReady={props.onReady}\n      />\n    </VerticalBarStyledBox>\n  );\n});\n","import { buildAnnotationConfig } from \"../shared/annotations\";\nimport type { ChartAnnotationLookup } from \"../shared/annotations\";\nimport type { SeedsChartOptions } from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n  buildDimensionalAxis,\n  resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport {\n  defaultValueAxisLabelFormatter,\n  makeValueAxisLabelFormatter,\n} from \"../shared/valueAxisLabelFormatter\";\nimport type { BarChartDirection, BarChartProps } from \"./types\";\n\n// `direction` is a single-member union for now (`\"vertical\"`). When\n// `HorizontalBarChart` ships, the union expands and this switch fails to\n// compile until the `\"horizontal\"` case is added.\nfunction highchartsType(direction: BarChartDirection): \"column\" {\n  switch (direction) {\n    case \"vertical\":\n      return \"column\";\n  }\n}\n\nexport function buildBarChartOptions(\n  props: BarChartProps,\n  direction: BarChartDirection,\n  // The (already-capped) series to render. Defaults to `props.series` so the\n  // ~40 existing call sites keep working; the component passes the capped\n  // series from `useSeedsChartSetup` explicitly.\n  series: BarChartProps[\"series\"] = props.series\n): {\n  options: SeedsChartOptions;\n  annotationLookup: ChartAnnotationLookup | undefined;\n  /** Resolved timezone for the tooltip date formatter; undefined on category axes. */\n  tooltipTimezone: string | undefined;\n} {\n  const chartType = highchartsType(direction);\n  const isDatetime = props.xAxis.type === \"datetime\";\n  const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);\n  const { annotations, lookup: annotationLookup } = buildAnnotationConfig(\n    props.annotations\n  );\n  const options: SeedsChartOptions = {\n    ...buildBaseChartOptions({\n      type: chartType,\n      description: props.description,\n      valueSuffix: props.valueSuffix,\n      reserveTopMargin: Boolean(annotations),\n      timezone: tooltipTimezone,\n    }),\n    xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n    yAxis: {\n      min: props.yAxis?.min,\n      max: props.yAxis?.max,\n      gridLineWidth: props.yAxis?.showGridLines === false ? 0 : 1,\n      title: { text: props.yAxis?.title ?? \"\" },\n      labels: {\n        // `showLabels` toggles tick-label visibility; defaults to shown.\n        enabled: props.yAxis?.showLabels !== false,\n        // A declarative `format` drives ticks through the shared valueFormatter;\n        // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).\n        formatter: props.yAxis?.format\n          ? makeValueAxisLabelFormatter(props.yAxis.format)\n          : defaultValueAxisLabelFormatter,\n      },\n    },\n    plotOptions: {\n      series: { animation: false },\n      column: {\n        // \"grouped\" maps to omitting `stacking` — Highcharts renders multi-series\n        // columns side-by-side when no stacking is set.\n        ...(props.stacking === \"grouped\"\n          ? {}\n          : { stacking: props.stacking ?? \"normal\" }),\n        pointPadding: 0.25,\n        groupPadding: 0.25,\n        // Fixed bar width on datetime axes. Sparse time-series otherwise size\n        // columns from the (large) gap between points and balloon; this mirrors\n        // v1's `pointWidth: 20` time-series treatment. Dense datetime data may\n        // instead want a `maxPointWidth` cap — revisit when Line/Area land.\n        ...(isDatetime ? { pointWidth: 20 } : {}),\n        borderRadius: 4,\n        borderWidth: 0,\n        // Pairs with the `:hover` dimming rule in `styles.ts`: while the cursor\n        // is over the chart, all bars dim; these handlers restore opacity for\n        // every bar at the hovered x (so stacked/grouped columns highlight\n        // together rather than just the single hovered bar).\n        point: {\n          events: {\n            click: props.onClick\n              ? (event) => props.onClick!({ position: event.point.x })\n              : undefined,\n            mouseOver: function () {\n              const x = this.x;\n              this.series.chart.series.forEach((s) => {\n                if (s.type !== \"column\") return;\n                s.data.forEach((point) => {\n                  if (point.x !== x) return;\n                  point.graphic?.element?.classList.add(\"column-hover\");\n                });\n              });\n            },\n            mouseOut: function () {\n              this.series.chart.series.forEach((s) => {\n                if (s.type !== \"column\") return;\n                s.data.forEach((point) => {\n                  point.graphic?.element?.classList.remove(\"column-hover\");\n                });\n              });\n            },\n          },\n        },\n      },\n    },\n    series: series.map((s) => ({\n      type: chartType,\n      name: s.name,\n      data: [...s.data],\n      color: s.color,\n    })),\n    ...(annotations ? { annotations } : {}),\n  };\n\n  return { options, annotationLookup, tooltipTimezone };\n}\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { verticalBarChartStyles } from \"../../components/VerticalBarChart/styles\";\nimport { axisLabelV2Styles } from \"../shared/styles\";\nimport type {\n  TypeChartStyleColor,\n  TypeChartStyleHasOnClick,\n} from \"../../types\";\n\ntype StyleProps = Readonly<{\n  $colors: ReadonlyArray<TypeChartStyleColor>;\n  $hasOnClick: TypeChartStyleHasOnClick;\n}>;\n\nexport const VerticalBarStyledBox = styled(Box)<StyleProps>`\n  ${verticalBarChartStyles}\n  ${axisLabelV2Styles}\n`;\n","import { css } from \"styled-components\";\n\n/**\n * v2 chart axis-label styles. v2 charts render in `styledMode` with\n * `useHTML: false`, so axis labels are SVG `<text>` / `<tspan>` rather than the\n * HTML `<span>`s v1 uses; these mirror the v1 HTML label rules in\n * `styles/chartStyles.ts` for the SVG element type.\n *\n * Kept here, separate from v1's `timeSeriesChartStyles`: v2 may *consume* the v1\n * styles, but v2-specific rules must not accrete into the v1 files — that keeps\n * the eventual v1 → v2 port clean and avoids coupling. Compose this into each v2\n * chart family's styled wrapper.\n */\nexport const axisLabelV2Styles = css`\n  .highcharts-xaxis-labels,\n  .highcharts-yaxis-labels {\n    // SVG labels (styledMode): fill is the SVG text colour; color has no effect.\n    text {\n      font-family: ${({ theme }) => theme.fontFamily};\n      ${({ theme }) => theme.typography[100]};\n      font-weight: ${({ theme }) => theme.fontWeights.normal};\n      fill: ${({ theme }) => theme.colors.text.subtext};\n    }\n  }\n  // Two-line stacked datetime label: the boundary token is an\n  // hc-axis-label-secondary tspan on a second line, rendered semibold.\n  .highcharts-xaxis-labels text tspan.hc-axis-label-secondary {\n    font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  }\n`;\n"]}