@razorpay/blade 12.111.0 → 12.120.0

package/build/lib/web/development/components/Charts/LineChart/useReferenceBand.js

@@ -0,0 +1,195 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default, { useMemo, isValidElement, useState, useLayoutEffect } from 'react';
+import getIn from '../../../utils/lodashButBetter/get.js';
+import '../../BladeProvider/index.js';
+import '../../../utils/isValidAllowedChildren/index.js';
+import { componentId, REFERENCE_BAND_DEFAULT_COLOR, REFERENCE_BAND_LOWER_CLASS, REFERENCE_BAND_UPPER_CLASS, REFERENCE_BAND_LAYER_CLASS, REFERENCE_BAND_FILL_OPACITY } from '../CommonChartComponents/tokens.js';
+import { parsePathAnchors } from '../utils/nullBridgeUtils.js';
+import { perLineBandClass, buildBandAreaPath } from '../utils/referenceBandUtils.js';
+import { componentIds } from './componentIds.js';
+import { jsx } from 'react/jsx-runtime';
+import useTheme from '../../BladeProvider/useTheme.js';
+import { getComponentId } from '../../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
+
+var geomsEqual = function geomsEqual(a, b) {
+  return a.length === b.length && a.every(function (item, index) {
+    var other = b[index];
+    return item.id === other.id && item.d === other.d && item.fillColor === other.fillColor;
+  });
+};
+
+/**
+ * Manages the web-only reference-band rendering pipeline for `ChartLineWrapper`. Collects every band
+ * source — the standalone `<ChartReferenceBand>` plus each `<ChartLine>` that declares a range — and,
+ * after Recharts lays out the invisible bound lines, reads their pixel anchors from the rendered SVG
+ * and fills the area between each pair (via `buildBandAreaPath`), recomputing on DOM/resize changes.
+ * Per-line bands are color-matched to their line via `dataColorMapping`. This mirrors the null-bridge
+ * approach because Recharts v3 doesn't expose axis scales to `<Customized>`.
+ */
+var useReferenceBand = function useReferenceBand(children, data, containerRef, dataColorMapping) {
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var bandSources = useMemo(function () {
+    var sources = [];
+    React__default.Children.forEach(children, function (child) {
+      if (! /*#__PURE__*/isValidElement(child)) return;
+      var id = getComponentId(child);
+
+      // Standalone <ChartReferenceBand> (single band not tied to a specific line).
+      if (id === componentId.chartReferenceBand) {
+        var _props$color, _props$name, _props$showLegend;
+        var props = child.props;
+        var colorToken = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : REFERENCE_BAND_DEFAULT_COLOR;
+        sources.push({
+          id: 'standalone',
+          lowerClass: REFERENCE_BAND_LOWER_CLASS,
+          upperClass: REFERENCE_BAND_UPPER_CLASS,
+          name: (_props$name = props.name) !== null && _props$name !== void 0 ? _props$name : 'Reference band',
+          colorToken: colorToken,
+          fillColor: getIn(theme.colors, colorToken),
+          showLegend: (_props$showLegend = props.showLegend) !== null && _props$showLegend !== void 0 ? _props$showLegend : true
+        });
+        return;
+      }
+
+      // Per-line band: a <ChartLine> that declares both range bounds.
+      if (id === componentIds.ChartLine) {
+        var _ref, _props$rangeColor, _dataColorMapping$dat, _props$rangeName, _ref2, _props$showRangeLegen;
+        var _props = child.props;
+        var dataKey = _props.dataKey;
+        if (!dataKey || !_props.rangeLowerDataKey || !_props.rangeUpperDataKey) return;
+        // Color-match to the line: explicit rangeColor wins, else the line's resolved color.
+        var _colorToken = (_ref = (_props$rangeColor = _props.rangeColor) !== null && _props$rangeColor !== void 0 ? _props$rangeColor : (_dataColorMapping$dat = dataColorMapping[dataKey]) === null || _dataColorMapping$dat === void 0 ? void 0 : _dataColorMapping$dat.colorToken) !== null && _ref !== void 0 ? _ref : REFERENCE_BAND_DEFAULT_COLOR;
+        sources.push({
+          id: dataKey,
+          lowerClass: perLineBandClass(dataKey, 'lower'),
+          upperClass: perLineBandClass(dataKey, 'upper'),
+          name: (_props$rangeName = _props.rangeName) !== null && _props$rangeName !== void 0 ? _props$rangeName : 'Industry range',
+          colorToken: _colorToken,
+          fillColor: getIn(theme.colors, _colorToken),
+          showLegend: (_ref2 = (_props$showRangeLegen = _props.showRangeLegend) !== null && _props$showRangeLegen !== void 0 ? _props$showRangeLegen : _props.showLegend) !== null && _ref2 !== void 0 ? _ref2 : true
+        });
+      }
+    });
+    return sources;
+  }, [children, theme, dataColorMapping]);
+  var hasReferenceBand = bandSources.length > 0;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    bandGeoms = _useState2[0],
+    setBandGeoms = _useState2[1];
+
+  // Stable key of the sources' identity so the effect re-runs when bands are added/removed/recolored.
+  var sourceSignature = useMemo(function () {
+    return bandSources.map(function (s) {
+      return "".concat(s.id, ":").concat(s.fillColor);
+    }).join('|');
+  }, [bandSources]);
+  useLayoutEffect(function () {
+    var container = containerRef.current;
+    if (!container || !hasReferenceBand) {
+      setBandGeoms(function (prev) {
+        return prev.length === 0 ? prev : [];
+      });
+      return undefined;
+    }
+    var computeBands = function computeBands() {
+      var surface = container.querySelector('svg.recharts-surface');
+      if (!surface) return;
+      var next = [];
+      bandSources.forEach(function (source) {
+        var _upperCurve$getAttrib, _lowerCurve$getAttrib;
+        var upperCurve = surface.querySelector(".".concat(source.upperClass, " .recharts-line-curve"));
+        var lowerCurve = surface.querySelector(".".concat(source.lowerClass, " .recharts-line-curve"));
+        if (!upperCurve || !lowerCurve) return;
+        var upperAnchors = parsePathAnchors((_upperCurve$getAttrib = upperCurve.getAttribute('d')) !== null && _upperCurve$getAttrib !== void 0 ? _upperCurve$getAttrib : '');
+        var lowerAnchors = parsePathAnchors((_lowerCurve$getAttrib = lowerCurve.getAttribute('d')) !== null && _lowerCurve$getAttrib !== void 0 ? _lowerCurve$getAttrib : '');
+        var d = buildBandAreaPath(upperAnchors, lowerAnchors);
+        if (!d) return;
+        next.push({
+          id: source.id,
+          d: d,
+          fillColor: source.fillColor
+        });
+      });
+      setBandGeoms(function (prev) {
+        return geomsEqual(prev, next) ? prev : next;
+      });
+    };
+    computeBands();
+    var cleanups = [];
+    if (typeof MutationObserver !== 'undefined') {
+      var rafId = null;
+      var mutationObserver = new MutationObserver(function (mutations) {
+        // Ignore mutations from our own band layer to avoid a re-entrant loop.
+        var isBandMutation = mutations.some(function (m) {
+          return m.target instanceof Element && m.target.closest(".".concat(REFERENCE_BAND_LAYER_CLASS));
+        });
+        if (isBandMutation) return;
+        if (rafId !== null) cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(function () {
+          rafId = null;
+          computeBands();
+        });
+      });
+      mutationObserver.observe(container, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['d']
+      });
+      cleanups.push(function () {
+        mutationObserver.disconnect();
+        if (rafId !== null) cancelAnimationFrame(rafId);
+      });
+    }
+    if (typeof ResizeObserver !== 'undefined') {
+      var resizeObserver = new ResizeObserver(function () {
+        return computeBands();
+      });
+      resizeObserver.observe(container);
+      cleanups.push(function () {
+        return resizeObserver.disconnect();
+      });
+    }
+    return function () {
+      return cleanups.forEach(function (cleanup) {
+        return cleanup();
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, hasReferenceBand, sourceSignature]);
+  var renderReferenceBands = function renderReferenceBands() {
+    if (!hasReferenceBand || bandGeoms.length === 0) return null;
+    return /*#__PURE__*/jsx("g", {
+      className: REFERENCE_BAND_LAYER_CLASS,
+      children: bandGeoms.map(function (band) {
+        return /*#__PURE__*/jsx("path", {
+          d: band.d,
+          fill: band.fillColor,
+          fillOpacity: REFERENCE_BAND_FILL_OPACITY,
+          stroke: "none"
+        }, "reference-band-".concat(band.id));
+      })
+    });
+  };
+  var referenceBandLegendInfos = useMemo(function () {
+    return bandSources.filter(function (source) {
+      return source.showLegend;
+    }).map(function (source) {
+      return {
+        name: source.name,
+        color: source.colorToken,
+        fillOpacity: REFERENCE_BAND_FILL_OPACITY
+      };
+    });
+  }, [bandSources]);
+  return {
+    hasReferenceBand: hasReferenceBand,
+    renderReferenceBands: renderReferenceBands,
+    referenceBandLegendInfos: referenceBandLegendInfos
+  };
+};
+
+export { useReferenceBand };
+//# sourceMappingURL=useReferenceBand.js.map

package/build/lib/web/development/components/Charts/LineChart/useReferenceBand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReferenceBand.js","sources":["../../../../../../../src/components/Charts/LineChart/useReferenceBand.tsx"],"sourcesContent":["import React, { useState, useMemo, useLayoutEffect, isValidElement } from 'react';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport type {\n  ChartReferenceBandProps,\n  ReferenceBandLegendInfo,\n  DataColorMapping,\n} from '../CommonChartComponents/types';\nimport {\n  componentId as commonComponentIds,\n  REFERENCE_BAND_DEFAULT_COLOR,\n  REFERENCE_BAND_FILL_OPACITY,\n  REFERENCE_BAND_LOWER_CLASS,\n  REFERENCE_BAND_UPPER_CLASS,\n  REFERENCE_BAND_LAYER_CLASS,\n} from '../CommonChartComponents/tokens';\nimport { parsePathAnchors } from '../utils/nullBridgeUtils';\nimport { buildBandAreaPath, perLineBandClass } from '../utils/referenceBandUtils';\nimport { componentIds } from './componentIds';\nimport type { ChartLineProps } from './types';\n\ntype ChartData = { [key: string]: unknown };\n\n/**\n * A single band to be drawn — either the standalone `<ChartReferenceBand>` or one derived from a\n * `<ChartLine>` that declares `rangeLowerDataKey` / `rangeUpperDataKey`. `lowerClass` / `upperClass`\n * are the classNames of the invisible bound lines whose rendered geometry we read.\n */\ntype BandSource = {\n  id: string;\n  lowerClass: string;\n  upperClass: string;\n  name: string;\n  colorToken: ReferenceBandLegendInfo['color'];\n  fillColor: string;\n  showLegend: boolean;\n};\n\ntype BandGeometry = {\n  id: string;\n  d: string;\n  fillColor: string;\n};\n\ntype UseReferenceBandResult = {\n  hasReferenceBand: boolean;\n  renderReferenceBands: () => React.ReactElement | null;\n  referenceBandLegendInfos: ReferenceBandLegendInfo[];\n};\n\nconst geomsEqual = (a: BandGeometry[], b: BandGeometry[]): boolean =>\n  a.length === b.length &&\n  a.every((item, index) => {\n    const other = b[index];\n    return item.id === other.id && item.d === other.d && item.fillColor === other.fillColor;\n  });\n\n/**\n * Manages the web-only reference-band rendering pipeline for `ChartLineWrapper`. Collects every band\n * source — the standalone `<ChartReferenceBand>` plus each `<ChartLine>` that declares a range — and,\n * after Recharts lays out the invisible bound lines, reads their pixel anchors from the rendered SVG\n * and fills the area between each pair (via `buildBandAreaPath`), recomputing on DOM/resize changes.\n * Per-line bands are color-matched to their line via `dataColorMapping`. This mirrors the null-bridge\n * approach because Recharts v3 doesn't expose axis scales to `<Customized>`.\n */\nconst useReferenceBand = (\n  children: React.ReactNode,\n  data: ChartData[],\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  dataColorMapping: DataColorMapping,\n): UseReferenceBandResult => {\n  const { theme } = useTheme();\n\n  const bandSources = useMemo<BandSource[]>(() => {\n    const sources: BandSource[] = [];\n\n    React.Children.forEach(children, (child) => {\n      if (!isValidElement(child)) return;\n      const id = getComponentId(child);\n\n      // Standalone <ChartReferenceBand> (single band not tied to a specific line).\n      if (id === commonComponentIds.chartReferenceBand) {\n        const props = child.props as ChartReferenceBandProps;\n        const colorToken =\n          props.color ?? (REFERENCE_BAND_DEFAULT_COLOR as ReferenceBandLegendInfo['color']);\n        sources.push({\n          id: 'standalone',\n          lowerClass: REFERENCE_BAND_LOWER_CLASS,\n          upperClass: REFERENCE_BAND_UPPER_CLASS,\n          name: props.name ?? 'Reference band',\n          colorToken,\n          fillColor: getIn(theme.colors, colorToken),\n          showLegend: props.showLegend ?? true,\n        });\n        return;\n      }\n\n      // Per-line band: a <ChartLine> that declares both range bounds.\n      if (id === componentIds.ChartLine) {\n        const props = child.props as ChartLineProps;\n        const dataKey = props.dataKey as string;\n        if (!dataKey || !props.rangeLowerDataKey || !props.rangeUpperDataKey) return;\n        // Color-match to the line: explicit rangeColor wins, else the line's resolved color.\n        const colorToken =\n          props.rangeColor ??\n          dataColorMapping[dataKey]?.colorToken ??\n          (REFERENCE_BAND_DEFAULT_COLOR as ReferenceBandLegendInfo['color']);\n        sources.push({\n          id: dataKey,\n          lowerClass: perLineBandClass(dataKey, 'lower'),\n          upperClass: perLineBandClass(dataKey, 'upper'),\n          name: props.rangeName ?? 'Industry range',\n          colorToken,\n          fillColor: getIn(theme.colors, colorToken),\n          showLegend: props.showRangeLegend ?? props.showLegend ?? true,\n        });\n      }\n    });\n\n    return sources;\n  }, [children, theme, dataColorMapping]);\n\n  const hasReferenceBand = bandSources.length > 0;\n\n  const [bandGeoms, setBandGeoms] = useState<BandGeometry[]>([]);\n\n  // Stable key of the sources' identity so the effect re-runs when bands are added/removed/recolored.\n  const sourceSignature = useMemo(\n    () => bandSources.map((s) => `${s.id}:${s.fillColor}`).join('|'),\n    [bandSources],\n  );\n\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || !hasReferenceBand) {\n      setBandGeoms((prev) => (prev.length === 0 ? prev : []));\n      return undefined;\n    }\n\n    const computeBands = (): void => {\n      const surface = container.querySelector('svg.recharts-surface');\n      if (!surface) return;\n      const next: BandGeometry[] = [];\n      bandSources.forEach((source) => {\n        const upperCurve = surface.querySelector<SVGPathElement>(\n          `.${source.upperClass} .recharts-line-curve`,\n        );\n        const lowerCurve = surface.querySelector<SVGPathElement>(\n          `.${source.lowerClass} .recharts-line-curve`,\n        );\n        if (!upperCurve || !lowerCurve) return;\n        const upperAnchors = parsePathAnchors(upperCurve.getAttribute('d') ?? '');\n        const lowerAnchors = parsePathAnchors(lowerCurve.getAttribute('d') ?? '');\n        const d = buildBandAreaPath(upperAnchors, lowerAnchors);\n        if (!d) return;\n        next.push({\n          id: source.id,\n          d,\n          fillColor: source.fillColor,\n        });\n      });\n      setBandGeoms((prev) => (geomsEqual(prev, next) ? prev : next));\n    };\n\n    computeBands();\n\n    const cleanups: Array<() => void> = [];\n    if (typeof MutationObserver !== 'undefined') {\n      let rafId: number | null = null;\n      const mutationObserver = new MutationObserver((mutations) => {\n        // Ignore mutations from our own band layer to avoid a re-entrant loop.\n        const isBandMutation = mutations.some(\n          (m) => m.target instanceof Element && m.target.closest(`.${REFERENCE_BAND_LAYER_CLASS}`),\n        );\n        if (isBandMutation) return;\n        if (rafId !== null) cancelAnimationFrame(rafId);\n        rafId = requestAnimationFrame(() => {\n          rafId = null;\n          computeBands();\n        });\n      });\n      mutationObserver.observe(container, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['d'],\n      });\n      cleanups.push(() => {\n        mutationObserver.disconnect();\n        if (rafId !== null) cancelAnimationFrame(rafId);\n      });\n    }\n    if (typeof ResizeObserver !== 'undefined') {\n      const resizeObserver = new ResizeObserver(() => computeBands());\n      resizeObserver.observe(container);\n      cleanups.push(() => resizeObserver.disconnect());\n    }\n    return () => cleanups.forEach((cleanup) => cleanup());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, hasReferenceBand, sourceSignature]);\n\n  const renderReferenceBands = (): React.ReactElement | null => {\n    if (!hasReferenceBand || bandGeoms.length === 0) return null;\n    return (\n      <g className={REFERENCE_BAND_LAYER_CLASS}>\n        {bandGeoms.map((band) => (\n          <path\n            key={`reference-band-${band.id}`}\n            d={band.d}\n            fill={band.fillColor}\n            fillOpacity={REFERENCE_BAND_FILL_OPACITY}\n            stroke=\"none\"\n          />\n        ))}\n      </g>\n    );\n  };\n\n  const referenceBandLegendInfos = useMemo<ReferenceBandLegendInfo[]>(\n    () =>\n      bandSources\n        .filter((source) => source.showLegend)\n        .map((source) => ({\n          name: source.name,\n          color: source.colorToken,\n          fillOpacity: REFERENCE_BAND_FILL_OPACITY,\n        })),\n    [bandSources],\n  );\n\n  return { hasReferenceBand, renderReferenceBands, referenceBandLegendInfos };\n};\n\nexport { useReferenceBand };\nexport type { UseReferenceBandResult, BandSource, BandGeometry };\n"],"names":["geomsEqual","a","b","length","every","item","index","other","id","d","fillColor","useReferenceBand","children","data","containerRef","dataColorMapping","_useTheme","useTheme","theme","bandSources","useMemo","sources","React","Children","forEach","child","isValidElement","getComponentId","commonComponentIds","chartReferenceBand","_props$color","_props$name","_props$showLegend","props","colorToken","color","REFERENCE_BAND_DEFAULT_COLOR","push","lowerClass","REFERENCE_BAND_LOWER_CLASS","upperClass","REFERENCE_BAND_UPPER_CLASS","name","getIn","colors","showLegend","componentIds","ChartLine","_ref","_props$rangeColor","_dataColorMapping$dat","_props$rangeName","_ref2","_props$showRangeLegen","dataKey","rangeLowerDataKey","rangeUpperDataKey","rangeColor","perLineBandClass","rangeName","showRangeLegend","hasReferenceBand","_useState","useState","_useState2","_slicedToArray","bandGeoms","setBandGeoms","sourceSignature","map","s","concat","join","useLayoutEffect","container","current","prev","undefined","computeBands","surface","querySelector","next","source","_upperCurve$getAttrib","_lowerCurve$getAttrib","upperCurve","lowerCurve","upperAnchors","parsePathAnchors","getAttribute","lowerAnchors","buildBandAreaPath","cleanups","MutationObserver","rafId","mutationObserver","mutations","isBandMutation","some","m","target","Element","closest","REFERENCE_BAND_LAYER_CLASS","cancelAnimationFrame","requestAnimationFrame","observe","childList","subtree","attributes","attributeFilter","disconnect","ResizeObserver","resizeObserver","cleanup","renderReferenceBands","_jsx","className","band","fill","fillOpacity","REFERENCE_BAND_FILL_OPACITY","stroke","referenceBandLegendInfos","filter"],"mappings":"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"}

package/build/lib/web/development/components/Charts/utils/nullBridgeUtils.js

@@ -0,0 +1,175 @@
+import _typeof from '@babel/runtime/helpers/typeof';
+
+// A dataKey can be a string (possibly dot-nested, e.g. `metrics.sales`), a number,
+// or a function — but the bridge utilities only handle the string/number form, which
+// is what Recharts' path rendering uses. Keeping this local avoids coupling the shared
+// utility to any specific chart component's types.
+
+/**
+ * Monotone cubic interpolation using a weighted-harmonic tangent formula
+ * (`3(dx₁+dx₂) / ((dx₁+2dx₂)/m₁ + (2dx₁+dx₂)/m₂)`). Given the defined points
+ * `(xs[i], ys[i])` (xs ascending), it returns the interpolated `y` at `xq`. Used to densely
+ * sample the null-bridge onto the real curve so the dashed bridge follows a monotone curve
+ * across the gap instead of a straight chord.
+ *
+ * **Note on curve parity:** this shares its formula with `buildMonotonePath` (native
+ * LineChart), so on native LineChart the bridge follows the same curve as the solid line.
+ * It is *not* pixel-identical to d3-shape's `curveMonotoneX` (Steffen `slope3`, which Recharts
+ * uses on web) nor to `buildMonotone` (native AreaChart, arithmetic-mean + Fritsch–Carlson
+ * clip). The bridge endpoints always coincide with the solid anchors, so junctions are
+ * continuous; only the interior curvature of the dashed span can differ slightly on web and
+ * native AreaChart. Unifying all renderers on d3 `curveMonotoneX` is tracked as a follow-up.
+ */
+var monotoneInterpolate = function monotoneInterpolate(xs, ys, xq) {
+  var n = xs.length;
+  if (n === 0) return 0;
+  if (n === 1) return ys[0];
+  var slope = [];
+  for (var i = 0; i < n - 1; i++) {
+    var dx = xs[i + 1] - xs[i];
+    slope[i] = dx === 0 ? 0 : (ys[i + 1] - ys[i]) / dx;
+  }
+
+  // Tangents at each point — weighted-harmonic formula, matching buildMonotonePath (native
+  // LineChart) so the dashed bridge follows the same curve as the solid line on that renderer.
+  // (Close to, but not pixel-identical to, d3's curveMonotoneX / Recharts on web.)
+  var tangent = new Array(n);
+  tangent[0] = slope[0];
+  tangent[n - 1] = slope[n - 2];
+  for (var _i = 1; _i < n - 1; _i++) {
+    var m1 = slope[_i - 1];
+    var m2 = slope[_i];
+    if (m1 * m2 <= 0) {
+      tangent[_i] = 0;
+    } else {
+      var dx1 = xs[_i] - xs[_i - 1];
+      var dx2 = xs[_i + 1] - xs[_i];
+      var common = dx1 + dx2;
+      tangent[_i] = 3 * common / ((common + dx2) / m1 + (common + dx1) / m2);
+    }
+  }
+
+  // Locate the interval containing xq and evaluate the Hermite basis.
+  var k = 0;
+  while (k < n - 2 && xq > xs[k + 1]) k++;
+  var h = xs[k + 1] - xs[k];
+  var t = h === 0 ? 0 : (xq - xs[k]) / h;
+  var t2 = t * t;
+  var t3 = t2 * t;
+  var h00 = 2 * t3 - 3 * t2 + 1;
+  var h10 = t3 - 2 * t2 + t;
+  var h01 = -2 * t3 + 3 * t2;
+  var h11 = t3 - t2;
+  return h00 * ys[k] + h10 * h * tangent[k] + h01 * ys[k + 1] + h11 * h * tangent[k + 1];
+};
+
+// Resolve a (possibly nested, e.g. `metrics.sales`) dataKey from a data row.
+var resolveDataKeyValue = function resolveDataKeyValue(row, dataKey) {
+  var path = String(dataKey);
+  if (!path) return undefined;
+  return path.split('.').reduce(function (accumulator, key) {
+    if (accumulator && _typeof(accumulator) === 'object') {
+      return accumulator[key];
+    }
+    return undefined;
+  }, row);
+};
+// Extract the indices + numeric values of the non-null points for a dataKey.
+var getDefinedNumericPoints = function getDefinedNumericPoints(data, dataKey) {
+  var indices = [];
+  var values = [];
+  data.forEach(function (row, index) {
+    var raw = resolveDataKeyValue(row, dataKey);
+    var numeric = raw === null || raw === undefined ? null : Number(raw);
+    if (numeric !== null && !Number.isNaN(numeric)) {
+      indices.push(index);
+      values.push(numeric);
+    }
+  });
+  return {
+    indices: indices,
+    values: values
+  };
+};
+
+// Positions (into the defined-points array) of adjacent defined points that have at least one null
+// point between them, i.e. an interior gap that a null-bridge should span.
+var getInteriorGaps = function getInteriorGaps(indices) {
+  var gaps = [];
+  for (var i = 0; i < indices.length - 1; i++) {
+    if (indices[i + 1] - indices[i] > 1) {
+      gaps.push({
+        from: i,
+        to: i + 1
+      });
+    }
+  }
+  return gaps;
+};
+
+/**
+ * Build a dashed null-bridge `d` path (dense polyline) across a single interior gap, sampling the
+ * monotone spline through the line's defined anchor points (in pixel space) so the bridge follows
+ * the same curve Recharts draws for a solid connect instead of a straight chord.
+ */
+var buildBridgePathData = function buildBridgePathData(anchors, from, to) {
+  var xs = anchors.map(function (point) {
+    return point.x;
+  });
+  var ys = anchors.map(function (point) {
+    return point.y;
+  });
+  var start = anchors[from];
+  var end = anchors[to];
+  var sampleCount = Math.max(2, Math.round(Math.abs(end.x - start.x) / 3));
+  var pathData = '';
+  for (var step = 0; step <= sampleCount; step++) {
+    var t = step / sampleCount;
+    var x = start.x + (end.x - start.x) * t;
+    var y = monotoneInterpolate(xs, ys, x);
+    pathData += "".concat(step === 0 ? 'M' : 'L').concat(x, ",").concat(y, " ");
+  }
+  return pathData.trim();
+};
+/**
+ * Parse the anchor (data) points out of an SVG path `d` string as rendered by Recharts for a line.
+ * Handles `M`/`L` (linear) and `C` (monotone/natural cubic) commands — for a cubic the anchor is the
+ * final control pair. Restart commands (`M`, from a gapped/`connectNulls={false}` line) contribute
+ * their point too, so the result is the ordered list of the line's *defined* data points in pixel
+ * space. Used to derive the null-bridge geometry from Recharts' own computed coordinates.
+ *
+ * **Limitation:** This parser only handles `M`, `L`, and `C` SVG commands. For step-type curves
+ * (`type="step"`, `"stepBefore"`, `"stepAfter"`), d3-shape generates extra `L` commands for
+ * intermediate step points (e.g. `curveStepAfter` produces 2n-1 `L`/`M` commands for n defined
+ * data points). The anchor count will not match the defined data point count, so the
+ * `anchors.length !== indices.length` guard in the calling code will bail out and the dashed
+ * bridge will not render. `connectNullsStyle="dashed"` is therefore only supported for
+ * `type="monotone"` and `type="linear"`. For step-type lines, use `connectNullsStyle="solid"`
+ * (which uses Recharts' native `connectNulls` and is unaffected by this limitation).
+ */
+var parsePathAnchors = function parsePathAnchors(pathData) {
+  var anchors = [];
+  var commandPattern = /([MLC])([^MLC]*)/g;
+  var match = commandPattern.exec(pathData);
+  while (match !== null) {
+    var _match$2$match;
+    var command = match[1];
+    var numbers = ((_match$2$match = match[2].match(/-?[\d.]+(?:e-?\d+)?/g)) !== null && _match$2$match !== void 0 ? _match$2$match : []).map(Number);
+    if (command === 'M' || command === 'L') {
+      if (numbers.length >= 2) anchors.push({
+        x: numbers[0],
+        y: numbers[1]
+      });
+    } else if (command === 'C') {
+      if (numbers.length >= 6) anchors.push({
+        x: numbers[4],
+        y: numbers[5]
+      });
+    }
+    match = commandPattern.exec(pathData);
+  }
+  return anchors;
+};
+
+export { buildBridgePathData, getDefinedNumericPoints, getInteriorGaps, monotoneInterpolate, parsePathAnchors, resolveDataKeyValue };
+//# sourceMappingURL=nullBridgeUtils.js.map

package/build/lib/web/development/components/Charts/utils/nullBridgeUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nullBridgeUtils.js","sources":["../../../../../../../src/components/Charts/utils/nullBridgeUtils.ts"],"sourcesContent":["// A dataKey can be a string (possibly dot-nested, e.g. `metrics.sales`), a number,\n// or a function — but the bridge utilities only handle the string/number form, which\n// is what Recharts' path rendering uses. Keeping this local avoids coupling the shared\n// utility to any specific chart component's types.\ntype DataKey = string | number | ((row: Record<string, unknown>) => unknown);\n\n/**\n * Monotone cubic interpolation using a weighted-harmonic tangent formula\n * (`3(dx₁+dx₂) / ((dx₁+2dx₂)/m₁ + (2dx₁+dx₂)/m₂)`). Given the defined points\n * `(xs[i], ys[i])` (xs ascending), it returns the interpolated `y` at `xq`. Used to densely\n * sample the null-bridge onto the real curve so the dashed bridge follows a monotone curve\n * across the gap instead of a straight chord.\n *\n * **Note on curve parity:** this shares its formula with `buildMonotonePath` (native\n * LineChart), so on native LineChart the bridge follows the same curve as the solid line.\n * It is *not* pixel-identical to d3-shape's `curveMonotoneX` (Steffen `slope3`, which Recharts\n * uses on web) nor to `buildMonotone` (native AreaChart, arithmetic-mean + Fritsch–Carlson\n * clip). The bridge endpoints always coincide with the solid anchors, so junctions are\n * continuous; only the interior curvature of the dashed span can differ slightly on web and\n * native AreaChart. Unifying all renderers on d3 `curveMonotoneX` is tracked as a follow-up.\n */\nconst monotoneInterpolate = (xs: number[], ys: number[], xq: number): number => {\n  const n = xs.length;\n  if (n === 0) return 0;\n  if (n === 1) return ys[0];\n\n  const slope: number[] = [];\n  for (let i = 0; i < n - 1; i++) {\n    const dx = xs[i + 1] - xs[i];\n    slope[i] = dx === 0 ? 0 : (ys[i + 1] - ys[i]) / dx;\n  }\n\n  // Tangents at each point — weighted-harmonic formula, matching buildMonotonePath (native\n  // LineChart) so the dashed bridge follows the same curve as the solid line on that renderer.\n  // (Close to, but not pixel-identical to, d3's curveMonotoneX / Recharts on web.)\n  const tangent: number[] = new Array(n);\n  tangent[0] = slope[0];\n  tangent[n - 1] = slope[n - 2];\n  for (let i = 1; i < n - 1; i++) {\n    const m1 = slope[i - 1];\n    const m2 = slope[i];\n    if (m1 * m2 <= 0) {\n      tangent[i] = 0;\n    } else {\n      const dx1 = xs[i] - xs[i - 1];\n      const dx2 = xs[i + 1] - xs[i];\n      const common = dx1 + dx2;\n      tangent[i] = (3 * common) / ((common + dx2) / m1 + (common + dx1) / m2);\n    }\n  }\n\n  // Locate the interval containing xq and evaluate the Hermite basis.\n  let k = 0;\n  while (k < n - 2 && xq > xs[k + 1]) k++;\n  const h = xs[k + 1] - xs[k];\n  const t = h === 0 ? 0 : (xq - xs[k]) / h;\n  const t2 = t * t;\n  const t3 = t2 * t;\n  const h00 = 2 * t3 - 3 * t2 + 1;\n  const h10 = t3 - 2 * t2 + t;\n  const h01 = -2 * t3 + 3 * t2;\n  const h11 = t3 - t2;\n\n  return h00 * ys[k] + h10 * h * tangent[k] + h01 * ys[k + 1] + h11 * h * tangent[k + 1];\n};\n\n// Resolve a (possibly nested, e.g. `metrics.sales`) dataKey from a data row.\nconst resolveDataKeyValue = (row: Record<string, unknown>, dataKey: DataKey): unknown => {\n  const path = String(dataKey);\n  if (!path) return undefined;\n  return path.split('.').reduce<unknown>((accumulator, key) => {\n    if (accumulator && typeof accumulator === 'object') {\n      return (accumulator as Record<string, unknown>)[key];\n    }\n    return undefined;\n  }, row);\n};\n\ntype DefinedPoints = { indices: number[]; values: number[] };\n\n// Extract the indices + numeric values of the non-null points for a dataKey.\nconst getDefinedNumericPoints = (\n  data: Array<Record<string, unknown>>,\n  dataKey: DataKey,\n): DefinedPoints => {\n  const indices: number[] = [];\n  const values: number[] = [];\n  data.forEach((row, index) => {\n    const raw = resolveDataKeyValue(row, dataKey);\n    const numeric = raw === null || raw === undefined ? null : Number(raw);\n    if (numeric !== null && !Number.isNaN(numeric)) {\n      indices.push(index);\n      values.push(numeric);\n    }\n  });\n  return { indices, values };\n};\n\n// Positions (into the defined-points array) of adjacent defined points that have at least one null\n// point between them, i.e. an interior gap that a null-bridge should span.\nconst getInteriorGaps = (indices: number[]): Array<{ from: number; to: number }> => {\n  const gaps: Array<{ from: number; to: number }> = [];\n  for (let i = 0; i < indices.length - 1; i++) {\n    if (indices[i + 1] - indices[i] > 1) {\n      gaps.push({ from: i, to: i + 1 });\n    }\n  }\n  return gaps;\n};\n\n/**\n * Build a dashed null-bridge `d` path (dense polyline) across a single interior gap, sampling the\n * monotone spline through the line's defined anchor points (in pixel space) so the bridge follows\n * the same curve Recharts draws for a solid connect instead of a straight chord.\n */\nconst buildBridgePathData = (anchors: PixelPoint[], from: number, to: number): string => {\n  const xs = anchors.map((point) => point.x);\n  const ys = anchors.map((point) => point.y);\n  const start = anchors[from];\n  const end = anchors[to];\n  const sampleCount = Math.max(2, Math.round(Math.abs(end.x - start.x) / 3));\n  let pathData = '';\n  for (let step = 0; step <= sampleCount; step++) {\n    const t = step / sampleCount;\n    const x = start.x + (end.x - start.x) * t;\n    const y = monotoneInterpolate(xs, ys, x);\n    pathData += `${step === 0 ? 'M' : 'L'}${x},${y} `;\n  }\n  return pathData.trim();\n};\n\ntype PixelPoint = { x: number; y: number };\n\n/**\n * Parse the anchor (data) points out of an SVG path `d` string as rendered by Recharts for a line.\n * Handles `M`/`L` (linear) and `C` (monotone/natural cubic) commands — for a cubic the anchor is the\n * final control pair. Restart commands (`M`, from a gapped/`connectNulls={false}` line) contribute\n * their point too, so the result is the ordered list of the line's *defined* data points in pixel\n * space. Used to derive the null-bridge geometry from Recharts' own computed coordinates.\n *\n * **Limitation:** This parser only handles `M`, `L`, and `C` SVG commands. For step-type curves\n * (`type=\"step\"`, `\"stepBefore\"`, `\"stepAfter\"`), d3-shape generates extra `L` commands for\n * intermediate step points (e.g. `curveStepAfter` produces 2n-1 `L`/`M` commands for n defined\n * data points). The anchor count will not match the defined data point count, so the\n * `anchors.length !== indices.length` guard in the calling code will bail out and the dashed\n * bridge will not render. `connectNullsStyle=\"dashed\"` is therefore only supported for\n * `type=\"monotone\"` and `type=\"linear\"`. For step-type lines, use `connectNullsStyle=\"solid\"`\n * (which uses Recharts' native `connectNulls` and is unaffected by this limitation).\n */\nconst parsePathAnchors = (pathData: string): PixelPoint[] => {\n  const anchors: PixelPoint[] = [];\n  const commandPattern = /([MLC])([^MLC]*)/g;\n  let match: RegExpExecArray | null = commandPattern.exec(pathData);\n  while (match !== null) {\n    const command = match[1];\n    const numbers = (match[2].match(/-?[\\d.]+(?:e-?\\d+)?/g) ?? []).map(Number);\n    if (command === 'M' || command === 'L') {\n      if (numbers.length >= 2) anchors.push({ x: numbers[0], y: numbers[1] });\n    } else if (command === 'C') {\n      if (numbers.length >= 6) anchors.push({ x: numbers[4], y: numbers[5] });\n    }\n    match = commandPattern.exec(pathData);\n  }\n  return anchors;\n};\n\nexport {\n  monotoneInterpolate,\n  resolveDataKeyValue,\n  getDefinedNumericPoints,\n  getInteriorGaps,\n  parsePathAnchors,\n  buildBridgePathData,\n};\nexport type { DefinedPoints, PixelPoint, DataKey };\n"],"names":["monotoneInterpolate","xs","ys","xq","n","length","slope","i","dx","tangent","Array","m1","m2","dx1","dx2","common","k","h","t","t2","t3","h00","h10","h01","h11","resolveDataKeyValue","row","dataKey","path","String","undefined","split","reduce","accumulator","key","_typeof","getDefinedNumericPoints","data","indices","values","forEach","index","raw","numeric","Number","isNaN","push","getInteriorGaps","gaps","from","to","buildBridgePathData","anchors","map","point","x","y","start","end","sampleCount","Math","max","round","abs","pathData","step","concat","trim","parsePathAnchors","commandPattern","match","exec","_match$2$match","command","numbers"],"mappings":"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"}

package/build/lib/web/development/components/Charts/utils/referenceBandUtils.js

@@ -0,0 +1,66 @@
+import { monotoneInterpolate } from './nullBridgeUtils.js';
+
+/**
+ * Build a closed SVG `d` path for a reference band, given the upper and lower bound points in
+ * pixel space (both ordered left→right, x ascending). The top edge is sampled left→right and the
+ * bottom edge right→left along the monotone spline through each bound's anchors, so the band's
+ * edges follow the same curve the trend line does instead of straight chords, then closed with `Z`.
+ *
+ * Shared by web (anchors parsed from Recharts' rendered bound curves via `parsePathAnchors`) and
+ * native (points computed directly from the chart scales), so the band geometry matches on both.
+ */
+var buildBandAreaPath = function buildBandAreaPath(upper, lower) {
+  if (upper.length < 2 || lower.length < 2) return '';
+  var upperXs = upper.map(function (point) {
+    return point.x;
+  });
+  var upperYs = upper.map(function (point) {
+    return point.y;
+  });
+  var lowerXs = lower.map(function (point) {
+    return point.x;
+  });
+  var lowerYs = lower.map(function (point) {
+    return point.y;
+  });
+  var startX = upper[0].x;
+  var endX = upper[upper.length - 1].x;
+  var sampleCount = Math.max(2, Math.round(Math.abs(endX - startX) / 3));
+  var pathData = '';
+  // Top edge: left → right along the upper bound.
+  for (var step = 0; step <= sampleCount; step++) {
+    var t = step / sampleCount;
+    var x = startX + (endX - startX) * t;
+    var y = monotoneInterpolate(upperXs, upperYs, x);
+    pathData += "".concat(step === 0 ? 'M' : 'L').concat(x, ",").concat(y, " ");
+  }
+  // Bottom edge: right → left along the lower bound, then close.
+  for (var _step = sampleCount; _step >= 0; _step--) {
+    var _t = _step / sampleCount;
+    var _x = startX + (endX - startX) * _t;
+    var _y = monotoneInterpolate(lowerXs, lowerYs, _x);
+    pathData += "L".concat(_x, ",").concat(_y, " ");
+  }
+  pathData += 'Z';
+  return pathData.trim();
+};
+
+/**
+ * Sanitize a dataKey into a CSS-class-safe token (nested keys like `metrics.sales` contain dots,
+ * which are invalid in a single className). Shared by the ChartLine bound-line renderer and the
+ * reference-band hook so both derive the same className for a given line.
+ */
+var sanitizeBandKey = function sanitizeBandKey(dataKey) {
+  return dataKey.replace(/[^a-zA-Z0-9_-]/g, '-');
+};
+
+/**
+ * className applied to a per-line band's invisible lower/upper bound line, so the reference-band
+ * hook can locate the rendered curve in the SVG. Kept in sync between the renderer and the reader.
+ */
+var perLineBandClass = function perLineBandClass(dataKey, edge) {
+  return "blade-reference-band-".concat(sanitizeBandKey(dataKey), "-").concat(edge);
+};
+
+export { buildBandAreaPath, perLineBandClass, sanitizeBandKey };
+//# sourceMappingURL=referenceBandUtils.js.map

package/build/lib/web/development/components/Charts/utils/referenceBandUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"referenceBandUtils.js","sources":["../../../../../../../src/components/Charts/utils/referenceBandUtils.ts"],"sourcesContent":["import { monotoneInterpolate } from './nullBridgeUtils';\nimport type { PixelPoint } from './nullBridgeUtils';\n\n/**\n * Build a closed SVG `d` path for a reference band, given the upper and lower bound points in\n * pixel space (both ordered left→right, x ascending). The top edge is sampled left→right and the\n * bottom edge right→left along the monotone spline through each bound's anchors, so the band's\n * edges follow the same curve the trend line does instead of straight chords, then closed with `Z`.\n *\n * Shared by web (anchors parsed from Recharts' rendered bound curves via `parsePathAnchors`) and\n * native (points computed directly from the chart scales), so the band geometry matches on both.\n */\nconst buildBandAreaPath = (upper: PixelPoint[], lower: PixelPoint[]): string => {\n  if (upper.length < 2 || lower.length < 2) return '';\n\n  const upperXs = upper.map((point) => point.x);\n  const upperYs = upper.map((point) => point.y);\n  const lowerXs = lower.map((point) => point.x);\n  const lowerYs = lower.map((point) => point.y);\n\n  const startX = upper[0].x;\n  const endX = upper[upper.length - 1].x;\n  const sampleCount = Math.max(2, Math.round(Math.abs(endX - startX) / 3));\n\n  let pathData = '';\n  // Top edge: left → right along the upper bound.\n  for (let step = 0; step <= sampleCount; step++) {\n    const t = step / sampleCount;\n    const x = startX + (endX - startX) * t;\n    const y = monotoneInterpolate(upperXs, upperYs, x);\n    pathData += `${step === 0 ? 'M' : 'L'}${x},${y} `;\n  }\n  // Bottom edge: right → left along the lower bound, then close.\n  for (let step = sampleCount; step >= 0; step--) {\n    const t = step / sampleCount;\n    const x = startX + (endX - startX) * t;\n    const y = monotoneInterpolate(lowerXs, lowerYs, x);\n    pathData += `L${x},${y} `;\n  }\n  pathData += 'Z';\n  return pathData.trim();\n};\n\n/**\n * Sanitize a dataKey into a CSS-class-safe token (nested keys like `metrics.sales` contain dots,\n * which are invalid in a single className). Shared by the ChartLine bound-line renderer and the\n * reference-band hook so both derive the same className for a given line.\n */\nconst sanitizeBandKey = (dataKey: string): string => dataKey.replace(/[^a-zA-Z0-9_-]/g, '-');\n\n/**\n * className applied to a per-line band's invisible lower/upper bound line, so the reference-band\n * hook can locate the rendered curve in the SVG. Kept in sync between the renderer and the reader.\n */\nconst perLineBandClass = (dataKey: string, edge: 'lower' | 'upper'): string =>\n  `blade-reference-band-${sanitizeBandKey(dataKey)}-${edge}`;\n\nexport { buildBandAreaPath, sanitizeBandKey, perLineBandClass };\n"],"names":["buildBandAreaPath","upper","lower","length","upperXs","map","point","x","upperYs","y","lowerXs","lowerYs","startX","endX","sampleCount","Math","max","round","abs","pathData","step","t","monotoneInterpolate","concat","trim","sanitizeBandKey","dataKey","replace","perLineBandClass","edge"],"mappings":";;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,IAAAA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,KAAmB,EAAEC,KAAmB,EAAa;AAC9E,EAAA,IAAID,KAAK,CAACE,MAAM,GAAG,CAAC,IAAID,KAAK,CAACC,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,CAAA;AAEnD,EAAA,IAAMC,OAAO,GAAGH,KAAK,CAACI,GAAG,CAAC,UAACC,KAAK,EAAA;IAAA,OAAKA,KAAK,CAACC,CAAC,CAAA;GAAC,CAAA,CAAA;AAC7C,EAAA,IAAMC,OAAO,GAAGP,KAAK,CAACI,GAAG,CAAC,UAACC,KAAK,EAAA;IAAA,OAAKA,KAAK,CAACG,CAAC,CAAA;GAAC,CAAA,CAAA;AAC7C,EAAA,IAAMC,OAAO,GAAGR,KAAK,CAACG,GAAG,CAAC,UAACC,KAAK,EAAA;IAAA,OAAKA,KAAK,CAACC,CAAC,CAAA;GAAC,CAAA,CAAA;AAC7C,EAAA,IAAMI,OAAO,GAAGT,KAAK,CAACG,GAAG,CAAC,UAACC,KAAK,EAAA;IAAA,OAAKA,KAAK,CAACG,CAAC,CAAA;GAAC,CAAA,CAAA;AAE7C,EAAA,IAAMG,MAAM,GAAGX,KAAK,CAAC,CAAC,CAAC,CAACM,CAAC,CAAA;EACzB,IAAMM,IAAI,GAAGZ,KAAK,CAACA,KAAK,CAACE,MAAM,GAAG,CAAC,CAAC,CAACI,CAAC,CAAA;EACtC,IAAMO,WAAW,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,KAAK,CAACF,IAAI,CAACG,GAAG,CAACL,IAAI,GAAGD,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;EAExE,IAAIO,QAAQ,GAAG,EAAE,CAAA;AACjB;EACA,KAAK,IAAIC,IAAI,GAAG,CAAC,EAAEA,IAAI,IAAIN,WAAW,EAAEM,IAAI,EAAE,EAAE;AAC9C,IAAA,IAAMC,CAAC,GAAGD,IAAI,GAAGN,WAAW,CAAA;IAC5B,IAAMP,CAAC,GAAGK,MAAM,GAAG,CAACC,IAAI,GAAGD,MAAM,IAAIS,CAAC,CAAA;IACtC,IAAMZ,CAAC,GAAGa,mBAAmB,CAAClB,OAAO,EAAEI,OAAO,EAAED,CAAC,CAAC,CAAA;AAClDY,IAAAA,QAAQ,OAAAI,MAAA,CAAOH,IAAI,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,CAAA,CAAAG,MAAA,CAAGhB,CAAC,OAAAgB,MAAA,CAAId,CAAC,EAAG,GAAA,CAAA,CAAA;AACnD,GAAA;AACA;EACA,KAAK,IAAIW,KAAI,GAAGN,WAAW,EAAEM,KAAI,IAAI,CAAC,EAAEA,KAAI,EAAE,EAAE;AAC9C,IAAA,IAAMC,EAAC,GAAGD,KAAI,GAAGN,WAAW,CAAA;IAC5B,IAAMP,EAAC,GAAGK,MAAM,GAAG,CAACC,IAAI,GAAGD,MAAM,IAAIS,EAAC,CAAA;IACtC,IAAMZ,EAAC,GAAGa,mBAAmB,CAACZ,OAAO,EAAEC,OAAO,EAAEJ,EAAC,CAAC,CAAA;IAClDY,QAAQ,IAAA,GAAA,CAAAI,MAAA,CAAQhB,EAAC,OAAAgB,MAAA,CAAId,EAAC,EAAG,GAAA,CAAA,CAAA;AAC3B,GAAA;AACAU,EAAAA,QAAQ,IAAI,GAAG,CAAA;AACf,EAAA,OAAOA,QAAQ,CAACK,IAAI,EAAE,CAAA;AACxB,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,OAAe,EAAA;AAAA,EAAA,OAAaA,OAAO,CAACC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAA;AAAA,EAAA;;AAE5F;AACA;AACA;AACA;AACA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIF,OAAe,EAAEG,IAAuB,EAAA;EAAA,OAAAN,uBAAAA,CAAAA,MAAA,CACxCE,eAAe,CAACC,OAAO,CAAC,EAAA,GAAA,CAAA,CAAAH,MAAA,CAAIM,IAAI,CAAA,CAAA;AAAA;;;;"}

package/build/lib/web/development/components/CounterInput/CounterInput.web.js

@@ -3,10 +3,11 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
-import { StyledCounterInput } from './StyledCounterInput.js';
-import { COUNTER_INPUT_TOKEN, COUNTER_INPUT_ICON_SIZE_MAP } from './token.js';
+import { StyledCounterInput, StyledNumberWrapper } from './StyledCounterInput.js';
+import { COUNTER_INPUT_TOKEN, COUNTER_INPUT_SIZE_TO_TEXT_SIZE, COUNTER_INPUT_ICON_SIZE_MAP } from './token.js';
 import { CounterInputProvider } from './CounterInputContext.js';
 import '../Input/BaseInput/index.js';
+import { baseInputCounterInputPaddingTokens } from '../Input/BaseInput/baseInputTokens.js';
 import '../../utils/metaAttribute/index.js';
 import '../Box/styledProps/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
@@ -24,6 +25,7 @@ import '../ProgressBar/index.js';
 import getIn from '../../utils/lodashButBetter/get.js';
 import { mergeRefs } from '../../utils/useMergeRefs.js';
 import '../../utils/getFocusRingStyles/index.js';
+import { getTextProps } from '../Typography/Text/Text.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
 import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
@@ -32,6 +34,7 @@ import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js
 import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
 import useTheme from '../BladeProvider/useTheme.js';
 import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
+import { makeTypographySize } from '../../utils/makeTypographySize/makeTypographySize.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
@@ -142,6 +145,22 @@ var _CounterInput = /*#__PURE__*/React__default.forwardRef(function (_ref8, ref)
   var lastActionRef = useRef(null);
   var previousValueRef = useRef(internalValue);
   var containerRef = useRef(null);
+  var rawCounterValue = internalValue !== null && internalValue !== void 0 ? internalValue : min;
+  var counterValueDigitCount = Math.max(2, String(Math.abs(rawCounterValue)).length) + (rawCounterValue < 0 ? 1 : 0);
+  var _getTextProps = getTextProps({
+      variant: 'body',
+      size: COUNTER_INPUT_SIZE_TO_TEXT_SIZE[size],
+      weight: 'semibold'
+    }),
+    _getTextProps$fontSiz = _getTextProps.fontSize,
+    counterInputFontSizeToken = _getTextProps$fontSiz === void 0 ? 100 : _getTextProps$fontSiz;
+  var counterInputHorizontalPadding = theme.spacing[baseInputCounterInputPaddingTokens.left[size]] + theme.spacing[baseInputCounterInputPaddingTokens.right[size]];
+  var counterInputFieldWidth = "calc(".concat(counterValueDigitCount, "ch + ").concat(counterInputHorizontalPadding, "px)");
+  var counterInputTextStyle = {
+    fontFamily: theme.typography.fonts.family.text,
+    fontSize: makeTypographySize(theme.typography.fonts.size[counterInputFontSizeToken]),
+    fontWeight: theme.typography.fonts.weight.semibold
+  };
 
   // Track Tab navigation to show focus ring only on keyboard navigation (not mouse clicks)
   // Note: :focus-visible doesn't work for text inputs - shows ring on both Tab and click
@@ -251,7 +270,8 @@ var _CounterInput = /*#__PURE__*/React__default.forwardRef(function (_ref8, ref)
           alignItems: "center",
           flexDirection: "column",
           backgroundColor: isLoading || isDisabled ? emphasisTokens.loadingOrDisabledBgColor : emphasisTokens.backgroundColor,
-          width: "".concat(COUNTER_INPUT_TOKEN.width[size], "px"),
+          width: "fit-content",
+          minWidth: "".concat(COUNTER_INPUT_TOKEN.width[size], "px"),
           height: "".concat(COUNTER_INPUT_TOKEN.height[size], "px"),
           borderRadius: COUNTER_INPUT_TOKEN.containerBorderRadius[size],
           borderWidth: "thin",
@@ -276,8 +296,12 @@ var _CounterInput = /*#__PURE__*/React__default.forwardRef(function (_ref8, ref)
                 size: COUNTER_INPUT_ICON_SIZE_MAP[size],
                 color: "currentColor"
               })
-            }), /*#__PURE__*/jsx(BaseBox, {
-              className: animationClass,
+            }), /*#__PURE__*/jsx(StyledNumberWrapper, {
+              className: "__blade-counter-input-number-wrapper ".concat(animationClass).trim(),
+              $width: counterInputFieldWidth,
+              $fontFamily: counterInputTextStyle.fontFamily,
+              $fontSize: counterInputTextStyle.fontSize,
+              $fontWeight: counterInputTextStyle.fontWeight,
               children: /*#__PURE__*/jsx(BaseInput, {
                 ref: ref,
                 id: inputId,