blend-native 0.0.1-beta.0 → 0.0.1-beta.2

package/lib/commonjs/components/OTPInput/otpInput.utils.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildCellLabel = buildCellLabel;
+exports.clampOtpSlotLength = clampOtpSlotLength;
+exports.otpToCells = otpToCells;
+exports.processCellChange = processCellChange;
+/**
+ * Pure ports of web's `otpInputV2Utils.ts`. On RN there is no separate
+ * paste event — a paste or SMS autofill arrives as a multi-character
+ * change on one cell, which `mergeDigitRunIntoOtp` already handles.
+ */
+
+/** Web's `clampOtpSlotLength` — 1..32 slots. */
+function clampOtpSlotLength(length) {
+  if (!Number.isFinite(length ?? NaN)) return 6;
+  return Math.min(32, Math.max(1, Math.trunc(length)));
+}
+
+/** Value → per-cell digits, padded to the slot count. */
+function otpToCells(value, slots) {
+  const digits = value.replace(/\D/g, '').slice(0, slots).split('');
+  return Array.from({
+    length: slots
+  }, (_, i) => digits[i] ?? '');
+}
+/**
+ * Web's `processOtpCellValueChange`/`mergeDigitRunIntoOtp`: a change on one
+ * cell may carry several characters (paste, SMS autofill, IME) — the digit
+ * run spreads across the following cells; an emptied cell clears itself.
+ */
+function processCellChange(cells, index, raw) {
+  const digits = raw.replace(/\D/g, '');
+  const next = [...cells];
+  if (digits.length === 0) {
+    next[index] = '';
+    return {
+      cells: next,
+      focusIndex: null
+    };
+  }
+  let cursor = index;
+  for (const digit of digits) {
+    if (cursor >= next.length) break;
+    next[cursor] = digit;
+    cursor += 1;
+  }
+  return {
+    cells: next,
+    focusIndex: Math.min(cursor, next.length - 1)
+  };
+}
+
+/** Web's `buildOtpCellAriaLabel`. */
+function buildCellLabel(label, index, total) {
+  const base = label?.trim() || 'One-time code';
+  return `${base}, digit ${index + 1} of ${total}`;
+}
+//# sourceMappingURL=otpInput.utils.js.map

package/lib/commonjs/components/OTPInput/otpInput.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clampOtpSlotLength","length","Number","isFinite","NaN","Math","min","max","trunc","otpToCells","value","slots","digits","replace","slice","split","Array","from","_","i","processCellChange","cells","index","raw","next","focusIndex","cursor","digit","buildCellLabel","label","total","base","trim"],"sourceRoot":"../../../../src","sources":["components/OTPInput/otpInput.utils.ts"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;;AAEA;AACO,SAASA,kBAAkBA,CAACC,MAA0B,EAAU;EACnE,IAAI,CAACC,MAAM,CAACC,QAAQ,CAACF,MAAM,IAAIG,GAAG,CAAC,EAAE,OAAO,CAAC;EAC7C,OAAOC,IAAI,CAACC,GAAG,CAAC,EAAE,EAAED,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEF,IAAI,CAACG,KAAK,CAACP,MAAgB,CAAC,CAAC,CAAC;AAClE;;AAEA;AACO,SAASQ,UAAUA,CAACC,KAAa,EAAEC,KAAa,EAAY;EAC/D,MAAMC,MAAM,GAAGF,KAAK,CAACG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAEH,KAAK,CAAC,CAACI,KAAK,CAAC,EAAE,CAAC;EACjE,OAAOC,KAAK,CAACC,IAAI,CAAC;IAAEhB,MAAM,EAAEU;EAAM,CAAC,EAAE,CAACO,CAAC,EAAEC,CAAC,KAAKP,MAAM,CAACO,CAAC,CAAC,IAAI,EAAE,CAAC;AACnE;AAQA;AACA;AACA;AACA;AACA;AACO,SAASC,iBAAiBA,CAC7BC,KAAwB,EACxBC,KAAa,EACbC,GAAW,EACE;EACb,MAAMX,MAAM,GAAGW,GAAG,CAACV,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;EACrC,MAAMW,IAAI,GAAG,CAAC,GAAGH,KAAK,CAAC;EAEvB,IAAIT,MAAM,CAACX,MAAM,KAAK,CAAC,EAAE;IACrBuB,IAAI,CAACF,KAAK,CAAC,GAAG,EAAE;IAChB,OAAO;MAAED,KAAK,EAAEG,IAAI;MAAEC,UAAU,EAAE;IAAK,CAAC;EAC5C;EAEA,IAAIC,MAAM,GAAGJ,KAAK;EAClB,KAAK,MAAMK,KAAK,IAAIf,MAAM,EAAE;IACxB,IAAIc,MAAM,IAAIF,IAAI,CAACvB,MAAM,EAAE;IAC3BuB,IAAI,CAACE,MAAM,CAAC,GAAGC,KAAK;IACpBD,MAAM,IAAI,CAAC;EACf;EACA,OAAO;IACHL,KAAK,EAAEG,IAAI;IACXC,UAAU,EAAEpB,IAAI,CAACC,GAAG,CAACoB,MAAM,EAAEF,IAAI,CAACvB,MAAM,GAAG,CAAC;EAChD,CAAC;AACL;;AAEA;AACO,SAAS2B,cAAcA,CAC1BC,KAAyB,EACzBP,KAAa,EACbQ,KAAa,EACP;EACN,MAAMC,IAAI,GAAGF,KAAK,EAAEG,IAAI,CAAC,CAAC,IAAI,eAAe;EAC7C,OAAO,GAAGD,IAAI,WAAWT,KAAK,GAAG,CAAC,OAAOQ,KAAK,EAAE;AACpD","ignoreList":[]}

package/lib/commonjs/components/OutageChart/OutageChart.js

@@ -0,0 +1,277 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _victoryNative = require("victory-native");
+var _node = require("@juspay/blend-design-system/node");
+var _useNativeTokens = require("../../theme/useNativeTokens.js");
+var _Text = _interopRequireDefault(require("../../primitives/Text.js"));
+var _index = require("../Chart/index.js");
+var _outageChartUtils = require("./outageChart.utils.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_TREND_HEIGHT = 160;
+const DEFAULT_LANE_HEIGHT = 48;
+const DEFAULT_SEGMENT_HEIGHT = 4;
+const HIGHLIGHT_OPACITY = 0.15;
+const DIMMED_OPACITY = 0.25;
+const NO_AXIS_STYLE = {
+  axis: {
+    stroke: 'transparent'
+  },
+  ticks: {
+    size: 0
+  },
+  tickLabels: {
+    fill: 'transparent'
+  },
+  grid: {
+    stroke: 'transparent',
+    strokeWidth: 0
+  }
+};
+
+/**
+ * OutageChart — composite "outage trend + per-lane timeline" surface.
+ *
+ * Port of the web `OutageChartDemoV2` pattern: a zone-colored trend line on
+ * top, and an xrange-style timeline beneath with one row per lane label.
+ * Tapping a timeline segment highlights the same x-span on the trend chart
+ * (the native stand-in for the web hover plot-band).
+ */
+const OutageChart = /*#__PURE__*/(0, _react.forwardRef)(function OutageChart({
+  trendData,
+  zones = [],
+  segments = [],
+  trendColor,
+  trendHeight = DEFAULT_TREND_HEIGHT,
+  laneHeight = DEFAULT_LANE_HEIGHT,
+  segmentHeight = DEFAULT_SEGMENT_HEIGHT,
+  title,
+  header,
+  selectedSegmentId: controlledSelected,
+  onSegmentSelect,
+  noData,
+  skeleton,
+  accessibilityLabel,
+  testID,
+  style
+}, ref) {
+  const tokens = (0, _useNativeTokens.useNativeTokens)('CHARTSV2');
+  const ct = tokens.chart;
+  const [measuredWidth, setMeasuredWidth] = (0, _react.useState)();
+  const onLayout = event => {
+    const w = event.nativeEvent.layout.width;
+    if (w > 0 && w !== measuredWidth) setMeasuredWidth(w);
+  };
+
+  // --- Selection (controlled or uncontrolled) ---------------------
+  const isControlled = controlledSelected !== undefined;
+  const [internalSelected, setInternalSelected] = (0, _react.useState)(null);
+  const selectedSegmentId = isControlled ? controlledSelected : internalSelected;
+  const handleSegmentPress = (0, _react.useCallback)((index, segment) => {
+    const next = selectedSegmentId === index ? null : index;
+    if (!isControlled) setInternalSelected(next);
+    onSegmentSelect?.(next === null ? null : {
+      index,
+      segment
+    });
+  }, [isControlled, selectedSegmentId, onSegmentSelect]);
+  const selectedSegment = selectedSegmentId != null ? segments[selectedSegmentId] : undefined;
+
+  // --- Derived data --------------------------------------------------
+  const domain = (0, _react.useMemo)(() => (0, _outageChartUtils.computeXDomain)(trendData, segments), [trendData, segments]);
+  const lanes = (0, _react.useMemo)(() => (0, _outageChartUtils.computeLanes)(segments), [segments]);
+  const trendParts = (0, _react.useMemo)(() => {
+    const parts = (0, _outageChartUtils.splitTrendByZones)(trendData, zones);
+    // zoneColor fallback when no zones: single color for the line.
+    if (parts.length === 1 && zones.length === 0 && trendColor) {
+      return [{
+        color: trendColor,
+        data: parts[0].data
+      }];
+    }
+    return parts;
+  }, [trendData, zones, trendColor]);
+
+  // --- Skeleton -------------------------------------------------------
+  if (skeleton?.show) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.ChartContainer, {
+      ref: ref,
+      style: style,
+      children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChartHeader, {
+        children: header
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChartSkeleton, {
+        height: trendHeight + lanes.length * laneHeight
+      })]
+    });
+  }
+
+  // --- No-data ----------------------------------------------------------
+  if (trendData.length === 0 && segments.length === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.ChartContainer, {
+      ref: ref,
+      style: style,
+      children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChartHeader, {
+        children: header
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChartNoData, {
+        title: noData?.title ?? 'No data available',
+        subtitle: noData?.subtitle ?? 'Data will appear here once available'
+      })]
+    });
+  }
+
+  // VictoryChart insets the plot area by 8px on each side. The
+  // highlight band is positioned in pixels relative to the chart
+  // container so it aligns with the trend data, not the full View.
+  const CHART_PADDING = 8;
+  const plotWidth = Math.max(0, (measuredWidth ?? 0) - CHART_PADDING * 2);
+  const highlightBand = selectedSegment ? {
+    left: CHART_PADDING + (0, _outageChartUtils.xToFraction)(selectedSegment.start, domain) * plotWidth,
+    width: ((0, _outageChartUtils.xToFraction)(selectedSegment.end, domain) - (0, _outageChartUtils.xToFraction)(selectedSegment.start, domain)) * plotWidth,
+    color: selectedSegment.color
+  } : null;
+  const subtitleColor = String(ct.xAxis.labels.color);
+  const tagBorderColor = String(_node.FOUNDATION_THEME.colors.gray[200]);
+  const tagBg = String(_node.FOUNDATION_THEME.colors.gray[50]);
+  const tagTextColor = String(_node.FOUNDATION_THEME.colors.gray[700]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.ChartContainer, {
+    ref: ref,
+    style: style,
+    children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChartHeader, {
+      children: header
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        padding: 16,
+        gap: 12,
+        backgroundColor: String(ct.backgroundColor)
+      },
+      accessibilityLabel: accessibilityLabel ?? `Outage chart with ${trendData.length} trend points and ${segments.length} timeline segments`,
+      accessibilityRole: "summary",
+      testID: testID,
+      children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        fontSize: 14,
+        fontWeight: 500,
+        color: subtitleColor,
+        children: title
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        onLayout: onLayout,
+        style: {
+          width: '100%'
+        },
+        children: measuredWidth ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_victoryNative.VictoryChart, {
+            width: measuredWidth,
+            height: trendHeight,
+            padding: {
+              top: 8,
+              bottom: 8,
+              left: 8,
+              right: 8
+            },
+            domain: {
+              x: [domain.min, domain.max]
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_victoryNative.VictoryAxis, {
+              style: NO_AXIS_STYLE
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_victoryNative.VictoryAxis, {
+              dependentAxis: true,
+              style: NO_AXIS_STYLE
+            }), trendParts.map((part, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_victoryNative.VictoryLine, {
+              data: part.data,
+              interpolation: "monotoneX",
+              style: {
+                data: {
+                  stroke: part.color,
+                  strokeWidth: 2
+                }
+              }
+            }, `trend-${i}`))]
+          }), highlightBand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            pointerEvents: "none",
+            style: {
+              position: 'absolute',
+              top: CHART_PADDING,
+              bottom: CHART_PADDING,
+              left: highlightBand.left,
+              width: highlightBand.width,
+              backgroundColor: highlightBand.color,
+              opacity: HIGHLIGHT_OPACITY,
+              borderRadius: 2
+            },
+            testID: testID ? `${testID}-highlight` : undefined
+          }) : null]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            height: trendHeight
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          gap: 8
+        },
+        testID: testID ? `${testID}-timeline` : undefined,
+        children: lanes.map(lane => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            minHeight: laneHeight,
+            gap: 6,
+            justifyContent: 'center'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              alignSelf: 'flex-start',
+              borderWidth: 1,
+              borderColor: tagBorderColor,
+              backgroundColor: tagBg,
+              borderRadius: 4,
+              paddingHorizontal: 8,
+              paddingVertical: 2
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+              fontSize: 11,
+              fontWeight: 500,
+              color: tagTextColor,
+              children: lane
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              height: segmentHeight + 8,
+              justifyContent: 'center'
+            },
+            children: segments.map((segment, i) => {
+              if (segment.laneLabel !== lane) {
+                return null;
+              }
+              const left = (0, _outageChartUtils.xToFraction)(segment.start, domain) * 100;
+              const width = ((0, _outageChartUtils.xToFraction)(segment.end, domain) - (0, _outageChartUtils.xToFraction)(segment.start, domain)) * 100;
+              const isSelected = selectedSegmentId === i;
+              const dimmed = selectedSegmentId != null && !isSelected;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+                onPress: () => handleSegmentPress(i, segment),
+                testID: testID ? `${testID}-segment-${i}` : undefined,
+                accessibilityRole: "button",
+                accessibilityLabel: `${lane} segment from ${segment.start} to ${segment.end}`,
+                style: {
+                  position: 'absolute',
+                  left: `${left}%`,
+                  width: `${width}%`,
+                  height: segmentHeight,
+                  borderRadius: 0,
+                  backgroundColor: segment.color,
+                  opacity: dimmed ? DIMMED_OPACITY : 1
+                }
+              }, `${lane}-${i}`);
+            })
+          })]
+        }, lane))
+      })]
+    })]
+  });
+});
+OutageChart.displayName = 'OutageChart';
+var _default = exports.default = OutageChart;
+//# sourceMappingURL=OutageChart.js.map

package/lib/commonjs/components/OutageChart/OutageChart.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_victoryNative","_node","_useNativeTokens","_Text","_interopRequireDefault","_index","_outageChartUtils","_jsxRuntime","e","__esModule","default","DEFAULT_TREND_HEIGHT","DEFAULT_LANE_HEIGHT","DEFAULT_SEGMENT_HEIGHT","HIGHLIGHT_OPACITY","DIMMED_OPACITY","NO_AXIS_STYLE","axis","stroke","ticks","size","tickLabels","fill","grid","strokeWidth","OutageChart","forwardRef","trendData","zones","segments","trendColor","trendHeight","laneHeight","segmentHeight","title","header","selectedSegmentId","controlledSelected","onSegmentSelect","noData","skeleton","accessibilityLabel","testID","style","ref","tokens","useNativeTokens","ct","chart","measuredWidth","setMeasuredWidth","useState","onLayout","event","w","nativeEvent","layout","width","isControlled","undefined","internalSelected","setInternalSelected","handleSegmentPress","useCallback","index","segment","next","selectedSegment","domain","useMemo","computeXDomain","lanes","computeLanes","trendParts","parts","splitTrendByZones","length","color","data","show","jsxs","ChartContainer","children","jsx","ChartHeader","ChartSkeleton","height","ChartNoData","subtitle","CHART_PADDING","plotWidth","Math","max","highlightBand","left","xToFraction","start","end","subtitleColor","String","xAxis","labels","tagBorderColor","FOUNDATION_THEME","colors","gray","tagBg","tagTextColor","View","padding","gap","backgroundColor","accessibilityRole","fontSize","fontWeight","VictoryChart","top","bottom","right","x","min","VictoryAxis","dependentAxis","map","part","i","VictoryLine","interpolation","pointerEvents","position","opacity","borderRadius","lane","minHeight","justifyContent","alignSelf","borderWidth","borderColor","paddingHorizontal","paddingVertical","laneLabel","isSelected","dimmed","Pressable","onPress","displayName","_default","exports"],"sourceRoot":"../../../../src","sources":["components/OutageChart/OutageChart.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/OutageChart/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OutageChart", {
+  enumerable: true,
+  get: function () {
+    return _OutageChart.default;
+  }
+});
+var _OutageChart = _interopRequireDefault(require("./OutageChart.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/OutageChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_OutageChart","_interopRequireDefault","require","e","__esModule","default"],"sourceRoot":"../../../../src","sources":["components/OutageChart/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAsD,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/commonjs/components/OutageChart/outageChart.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=outageChart.types.js.map

package/lib/commonjs/components/OutageChart/outageChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/OutageChart/outageChart.types.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/components/OutageChart/outageChart.utils.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeLanes = computeLanes;
+exports.computeXDomain = computeXDomain;
+exports.splitTrendByZones = splitTrendByZones;
+exports.xToFraction = xToFraction;
+/**
+ * Split a trend line into per-zone segments for Victory rendering.
+ *
+ * Highcharts draws one series and recolors the stroke by x-zone; Victory has
+ * no zones, so we produce one polyline per zone span. At each zone boundary
+ * we interpolate the y value (linear between the two surrounding data points)
+ * so adjacent segments share a boundary point and the stroke is continuous.
+ * If the boundary lies exactly on a data point, that point is included in
+ * both segments.
+ */
+function splitTrendByZones(data, zones) {
+  if (data.length === 0) return [];
+  if (zones.length === 0) {
+    return [{
+      color: '#2B7FFF',
+      data
+    }];
+  }
+  const sorted = [...zones].sort((a, b) => a.from - b.from);
+  const result = [];
+
+  /** Linearly interpolate y at x between the two surrounding data points. */
+  const interpolate = (x, lo, hi) => {
+    const t = (x - lo.x) / (hi.x - lo.x);
+    return lo.y + t * (hi.y - lo.y);
+  };
+  for (let i = 0; i < sorted.length; i++) {
+    const zone = sorted[i];
+    const nextFrom = sorted[i + 1]?.from ?? Infinity;
+    const points = [];
+    for (let j = 0; j < data.length; j++) {
+      const d = data[j];
+
+      // Left boundary handling for the first point in the zone:
+      if (points.length === 0 && j > 0 && zone.from > data[j - 1].x && zone.from <= d.x) {
+        if (zone.from < d.x) {
+          // Zone starts between points — interpolate y at boundary.
+          const y = interpolate(zone.from, data[j - 1], d);
+          points.push({
+            x: zone.from,
+            y
+          });
+        } else {
+          // zone.from === d.x — include the previous point
+          // as-is so the stroke is continuous across the boundary.
+          points.push(data[j - 1]);
+        }
+      }
+      if (d.x >= zone.from && d.x < nextFrom) {
+        points.push(d);
+      }
+
+      // Right boundary: interpolate if the next zone starts between
+      // the current point and the following one.
+      if (d.x < nextFrom && j + 1 < data.length && data[j + 1].x >= nextFrom && nextFrom > d.x) {
+        const y = interpolate(nextFrom, d, data[j + 1]);
+        points.push({
+          x: nextFrom,
+          y
+        });
+      }
+    }
+    if (points.length > 0) {
+      result.push({
+        color: zone.color,
+        data: points
+      });
+    }
+  }
+  return result;
+}
+
+/**
+ * Unique lane labels from segments, in first-seen order. The timeline's rows
+ * are keyed off this list.
+ */
+function computeLanes(segments) {
+  const seen = new Set();
+  const lanes = [];
+  for (const s of segments) {
+    if (!seen.has(s.laneLabel)) {
+      seen.add(s.laneLabel);
+      lanes.push(s.laneLabel);
+    }
+  }
+  return lanes;
+}
+
+/** The shared x-domain used by both the trend chart and the timeline. */
+function computeXDomain(trendData, segments) {
+  const xs = [];
+  for (const d of trendData) xs.push(d.x);
+  for (const s of segments) {
+    xs.push(s.start, s.end);
+  }
+  if (xs.length === 0) return {
+    min: 0,
+    max: 1
+  };
+  const min = Math.min(...xs);
+  const max = Math.max(...xs);
+  return min === max ? {
+    min,
+    max: min + 1
+  } : {
+    min,
+    max
+  };
+}
+
+/** Map an x value to a 0–1 fraction of the shared domain. */
+function xToFraction(x, domain) {
+  return (x - domain.min) / (domain.max - domain.min);
+}
+//# sourceMappingURL=outageChart.utils.js.map

package/lib/commonjs/components/OutageChart/outageChart.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["splitTrendByZones","data","zones","length","color","sorted","sort","a","b","from","result","interpolate","x","lo","hi","t","y","i","zone","nextFrom","Infinity","points","j","d","push","computeLanes","segments","seen","Set","lanes","s","has","laneLabel","add","computeXDomain","trendData","xs","start","end","min","max","Math","xToFraction","domain"],"sourceRoot":"../../../../src","sources":["components/OutageChart/outageChart.utils.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Popover/Popover.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Popover = Popover;
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _node = require("@juspay/blend-design-system/node");
+var _useNativeTokens = require("../../theme/useNativeTokens.js");
+var _useNativeBreakpoint = require("../../theme/useNativeBreakpoint.js");
+var _useControllableState = require("../../hooks/useControllableState.js");
+var _AnchoredOverlay = require("../../overlay/anchored/AnchoredOverlay.js");
+var _BottomSheet = require("../../overlay/sheet/BottomSheet.js");
+var _cssStringAdapter = require("../../adapters/cssStringAdapter.js");
+var _PopoverHeader = require("./PopoverHeader.js");
+var _PopoverFooter = require("./PopoverFooter.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Popover — the native port of web's `PopoverV2`.
+ *
+ * Phones (`sm`) present a bottom sheet, exactly what web's
+ * `useDrawerOnMobile` does with the V1 Drawer; tablets (`lg`) get an
+ * anchored surface via `AnchoredOverlay`. Chrome comes from POPOVERV2
+ * tokens. Web's `border` token holds `"8px"` — an invalid CSS shorthand
+ * browsers silently drop — so no border is drawn (flagged upstream).
+ */
+function Popover({
+  trigger,
+  children,
+  heading,
+  description,
+  showCloseButton = true,
+  open,
+  onOpenChange,
+  onClose,
+  side = _node.PopoverV2Side.BOTTOM,
+  align = _node.PopoverV2Align.CENTER,
+  sideOffset = 8,
+  size = _node.PopoverV2Size.MD,
+  primaryAction,
+  secondaryAction,
+  maxHeightFraction,
+  width,
+  minWidth = 300,
+  maxWidth = 400,
+  height,
+  minHeight,
+  maxHeight,
+  testID,
+  style
+}) {
+  const tokens = (0, _useNativeTokens.useNativeTokens)('POPOVERV2');
+  const breakpoint = (0, _useNativeBreakpoint.useNativeBreakpoint)();
+  const [isOpen, setOpen] = (0, _useControllableState.useControllableState)(open, false, onOpenChange);
+  const close = () => {
+    setOpen(false);
+    onClose?.();
+  };
+  const gap = (0, _cssStringAdapter.parseDimension)(tokens.gap[size]) ?? 12;
+  const padding = {
+    paddingTop: (0, _cssStringAdapter.parseDimension)(tokens.padding.top[size]) ?? 12,
+    paddingBottom: (0, _cssStringAdapter.parseDimension)(tokens.padding.bottom[size]) ?? 16,
+    paddingLeft: (0, _cssStringAdapter.parseDimension)(tokens.padding.left[size]) ?? 16,
+    paddingRight: (0, _cssStringAdapter.parseDimension)(tokens.padding.right[size]) ?? 16
+  };
+  const header = /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopoverHeader.PopoverHeader, {
+    heading: heading,
+    description: description,
+    showCloseButton: showCloseButton,
+    onClose: close,
+    size: size,
+    tokens: tokens,
+    testID: testID ? `${testID}-header` : undefined
+  });
+  const footer = /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopoverFooter.PopoverFooter, {
+    primaryAction: primaryAction,
+    secondaryAction: secondaryAction,
+    size: size,
+    tokens: tokens,
+    testID: testID ? `${testID}-footer` : undefined
+  });
+  if (breakpoint === 'sm') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: () => setOpen(true),
+        testID: testID ? `${testID}-trigger` : undefined,
+        children: trigger
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomSheet.BottomSheet, {
+        open: isOpen,
+        onClose: close,
+        backgroundColor: String(tokens.background ?? '#FFFFFF'),
+        topRadius: (0, _cssStringAdapter.parseDimension)(tokens.borderRadius[size]) ?? 8,
+        maxHeightFraction: maxHeightFraction,
+        accessibilityLabel: heading,
+        testID: testID,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [padding, {
+            gap
+          }, style],
+          children: [header, children, footer]
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AnchoredOverlay.AnchoredOverlay, {
+    open: isOpen,
+    onRequestClose: close,
+    placement: side,
+    alignment: align,
+    offset: sideOffset,
+    backdrop: "transparent",
+    modal: true,
+    accessibilityLabel: heading,
+    testID: testID,
+    trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: () => setOpen(true),
+      testID: testID ? `${testID}-trigger` : undefined,
+      children: trigger
+    }),
+    contentStyle: [{
+      backgroundColor: String(tokens.background ?? '#FFFFFF'),
+      borderRadius: (0, _cssStringAdapter.parseDimension)(tokens.borderRadius[size]) ?? 8,
+      ...padding,
+      gap,
+      width,
+      minWidth,
+      maxWidth,
+      height,
+      minHeight,
+      maxHeight
+    }, style],
+    children: [header, children, footer]
+  });
+}
+Popover.displayName = 'Popover';
+var _default = exports.default = Popover;
+//# sourceMappingURL=Popover.js.map