jfs-components 0.0.72 → 0.0.74

package/lib/commonjs/components/PoweredByLabel/PoweredByLabel.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _MediaSource = _interopRequireDefault(require("../../utils/MediaSource"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Default bundled FINVU brand logo, matching the Figma reference so the
+// component renders correctly out of the box without any image prop.
+const DEFAULT_LOGO = require('./finvu.png');
+const DEFAULT_LABEL = 'Powered by RBI-regulated account aggregator';
+const DEFAULT_IMAGE_WIDTH = 33;
+const DEFAULT_IMAGE_HEIGHT = 12;
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : fallback;
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+
+/**
+ * `PoweredByLabel` renders the small "Powered by RBI-regulated account
+ * aggregator" badge with a trailing brand logo, used to attribute the
+ * underlying account-aggregator partner in flows such as bank-account
+ * linking and consent screens.
+ *
+ * The component is composed of:
+ *
+ * 1. A token-styled pill container (`poweredByLabel/background`,
+ *    `poweredByLabel/padding/*`).
+ * 2. The disclosure copy rendered through the `poweredByLabel/*` typography
+ *    tokens.
+ * 3. A configurable brand logo slot. Defaults to the bundled FINVU mark, but
+ *    callers can pass any image via `imageSource` or fully replace the slot
+ *    via `imageSlot`.
+ *
+ * @component
+ * @param {PoweredByLabelProps} props
+ */
+function PoweredByLabel({
+  label = DEFAULT_LABEL,
+  imageSource,
+  imageWidth = DEFAULT_IMAGE_WIDTH,
+  imageHeight = DEFAULT_IMAGE_HEIGHT,
+  imageSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  textStyle,
+  imageStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/background', modes) ?? '#f5f5f5';
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/foreground', modes) ?? '#191b1e';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/fontSize', modes), 10);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/lineHeight', modes), 12);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/fontWeight', modes), '400');
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/gap', modes), 10);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/padding/horizontal', modes), 16);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/padding/vertical', modes), 6);
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: background,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    // Hug content horizontally so the pill does not stretch to fill the
+    // parent (matches Badge, BrandChip, etc.). Override via `style` if
+    // you want it full-width (e.g. inside a card footer).
+    alignSelf: 'flex-start'
+  };
+  const labelTextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    textAlign: 'center',
+    flexShrink: 1
+  };
+  const renderImage = () => {
+    if (imageSlot !== undefined && imageSlot !== null) {
+      const processed = (0, _reactUtils.cloneChildrenWithModes)(imageSlot, modes);
+      if (processed.length === 0) return null;
+      return processed.length === 1 ? processed[0] : processed;
+    }
+    const resolvedSource = imageSource ?? DEFAULT_LOGO;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSource.default, {
+      source: resolvedSource,
+      width: imageWidth,
+      height: imageHeight,
+      resizeMode: "contain",
+      style: imageStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityRole: "text",
+    accessibilityLabel: accessibilityLabel ?? label,
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [labelTextStyle, textStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      numberOfLines: 1,
+      children: label
+    }), renderImage()]
+  });
+}
+var _default = exports.default = PoweredByLabel;

package/lib/commonjs/components/ProductOverview/ProductOverview.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Image = _interopRequireDefault(require("../Image/Image"));
+var _ProductLabel = _interopRequireDefault(require("../ProductLabel/ProductLabel"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_STATS = [{
+  value: '995',
+  label: 'Purity'
+}, {
+  value: '3%',
+  label: 'GST'
+}];
+const ProductOverview = ({
+  imageSource,
+  imageRatio = 288 / 170,
+  labelImageSource,
+  label = 'Gold',
+  productName = '0.5g Gold Coin',
+  description = 'Your gold is insured from our vault to you. If lost or damaged, we’ll replace it.',
+  stats = DEFAULT_STATS,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  children
+}) => {
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('productOverview/padding', modes) ?? 24;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('productOverview/gap', modes) ?? 12;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('productOverview/background', modes) ?? '#ffffff';
+  const productNameColor = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/color', modes) ?? '#0d0d0f';
+  const productNameFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/fontFamily', modes) ?? 'JioType Var';
+  const productNameFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/fontSize', modes) ?? 26;
+  const productNameFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/fontWeight', modes) ?? 900;
+  const productNameLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/productName/lineHeight', modes) ?? 26;
+  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/color', modes) ?? '#1a1c1f';
+  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/fontFamily', modes) ?? 'JioType Var';
+  const descriptionFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/fontSize', modes) ?? 14;
+  const descriptionFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/fontWeight', modes) ?? 500;
+  const descriptionLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/description/lineHeight', modes) ?? 18.2;
+  const statGap = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/gap', modes) ?? 2;
+  const statValueColor = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/color', modes) ?? '#141414';
+  const statValueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/fontFamily', modes) ?? 'JioType Var';
+  const statValueFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/fontSize', modes) ?? 20;
+  const statValueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/fontWeight', modes) ?? 900;
+  const statValueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/value/lineHeight', modes) ?? 20;
+  const statLabelColor = productNameColor;
+  const statLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/label/fontFamily', modes) ?? 'JioType Var';
+  const statLabelFontSize = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/label/fontSize', modes) ?? 12;
+  const statLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/label/fontWeight', modes) ?? 400;
+  const statLabelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productOverview/stat/label/lineHeight', modes) ?? 15.6;
+  const productNameStyle = {
+    color: productNameColor,
+    fontFamily: productNameFontFamily,
+    fontSize: productNameFontSize,
+    fontWeight: String(productNameFontWeight),
+    lineHeight: productNameLineHeight,
+    textAlign: 'center'
+  };
+  const descriptionStyle = {
+    color: descriptionColor,
+    fontFamily: descriptionFontFamily,
+    fontSize: descriptionFontSize,
+    fontWeight: String(descriptionFontWeight),
+    lineHeight: descriptionLineHeight,
+    textAlign: 'center'
+  };
+  const statValueStyle = {
+    color: statValueColor,
+    fontFamily: statValueFontFamily,
+    fontSize: statValueFontSize,
+    fontWeight: String(statValueFontWeight),
+    lineHeight: statValueLineHeight
+  };
+  const statLabelStyle = {
+    color: statLabelColor,
+    fontFamily: statLabelFontFamily,
+    fontSize: statLabelFontSize,
+    fontWeight: String(statLabelFontWeight),
+    lineHeight: statLabelLineHeight,
+    textAlign: 'center'
+  };
+  const showStats = Array.isArray(stats) && stats.length > 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      backgroundColor: background,
+      padding,
+      gap,
+      alignItems: 'center',
+      width: '100%'
+    }, style],
+    children: [imageSource != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      imageSource: imageSource,
+      ratio: imageRatio,
+      resizeMode: "contain",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductLabel.default, {
+      label: label,
+      ...(labelImageSource != null && {
+        imageSource: labelImageSource
+      }),
+      modes: modes
+    }), productName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: productNameStyle,
+      accessibilityRole: "header",
+      children: productName
+    }) : null, description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: descriptionStyle,
+      children: description
+    }) : null, children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+    }) : null, showStats && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+      },
+      children: stats.map((stat, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          alignItems: 'center',
+          gap: statGap,
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: statValueStyle,
+          numberOfLines: 1,
+          children: stat.value
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: statLabelStyle,
+          numberOfLines: 1,
+          children: stat.label
+        })]
+      }, `${stat.label}-${index}`))
+    })]
+  });
+};
+var _default = exports.default = ProductOverview;

package/lib/commonjs/components/RangeTrack/RangeTrack.js

@@ -0,0 +1,269 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _MetricLegendItem = _interopRequireDefault(require("../MetricLegendItem/MetricLegendItem"));
+var _SegmentedTrack = _interopRequireDefault(require("../SegmentedTrack/SegmentedTrack"));
+var _Tabs = _interopRequireDefault(require("../Tabs/Tabs"));
+var _TabItem = _interopRequireDefault(require("../Tabs/TabItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * One row of data inside a `RangeTrack` tab.
+ *
+ * Each item drives BOTH a `SegmentedTrack` segment and the matching
+ * `MetricLegendItem` row, so the segment color and legend indicator
+ * always share the same color by construction (same `Emphasis / DataViz`
+ * cascade as the standalone `SegmentedTrack`).
+ */
+
+/**
+ * One tab inside a `RangeTrack`. Each tab carries its own `items`
+ * array, which is the single source of truth for both the
+ * `SegmentedTrack` segments AND the `MetricLegendItem` legend rows
+ * rendered for that tab.
+ */
+
+const DEFAULT_EMPHASIS_CYCLE = ['High', 'Medium', 'Low'];
+const DEFAULT_TABS = [{
+  label: 'Tab item',
+  items: [{
+    label: 'Large cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Mid cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Small cap',
+    value: 1,
+    displayValue: '25%'
+  }]
+}, {
+  label: 'Tab item',
+  items: [{
+    label: 'Large cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Mid cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Small cap',
+    value: 1,
+    displayValue: '25%'
+  }]
+}, {
+  label: 'Tab item',
+  items: [{
+    label: 'Large cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Mid cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Small cap',
+    value: 1,
+    displayValue: '25%'
+  }]
+}];
+const defaultEmphasisFor = index => DEFAULT_EMPHASIS_CYCLE[index % DEFAULT_EMPHASIS_CYCLE.length];
+
+/**
+ * Resolve the shared color for an item. Honors any explicit `color`
+ * override, then falls back to `dataViz/bg` for the merged mode set,
+ * then to the Figma reference value.
+ *
+ * Mirrors the cascade used by `SegmentedTrack` (per-index `Emphasis /
+ * DataViz` defaults of `High` → `Medium` → `Low`, cycling) so the
+ * pre-computed color we pass to both the segment and the legend
+ * indicator matches what the `SegmentedTrack` would have computed on
+ * its own. This is what keeps segments and legend rows in sync by
+ * construction.
+ */
+function resolveItemColor(parentModes, item, index) {
+  if (item.color) return item.color;
+  const itemModes = {
+    ...parentModes,
+    'Emphasis / DataViz': defaultEmphasisFor(index),
+    ...(item.modes || {})
+  };
+  return (0, _figmaVariablesResolver.getVariableByName)('dataViz/bg', itemModes) ?? '#cea15a';
+}
+
+/**
+ * Resolve what to render in the legend row's right-side slot. The
+ * order of precedence is:
+ *   1. `item.displayValue` if explicitly provided (including `null` /
+ *      `false`, which the underlying `MetricLegendItem` treats as
+ *      "hide the value slot").
+ *   2. `formatValue(item.value)` when a parent-level formatter exists.
+ *   3. `undefined` — the value slot is hidden.
+ */
+function resolveLegendValue(item, formatValue) {
+  if (item.displayValue !== undefined) return item.displayValue;
+  if (formatValue) return formatValue(item.value);
+  return undefined;
+}
+
+/**
+ * `RangeTrack` pairs a tab row with a `SegmentedTrack` and a vertical
+ * stack of `MetricLegendItem` rows. Each tab carries its own `items`
+ * array which is the **single source of truth** for both the segments
+ * and the legend rows of that tab — every segment has exactly one
+ * legend row and they share the same color through the same
+ * `Emphasis / DataViz` cascade as the standalone `SegmentedTrack`.
+ *
+ * Switching tabs swaps the segments and the legend together so the
+ * two visualizations can never drift out of sync.
+ *
+ * The default 3-item layout per tab receives per-index
+ * `Emphasis / DataViz` defaults (item 1 → `High`, 2 → `Medium`, 3 →
+ * `Low`, then cycles). Override `Appearance / DataViz` on the parent
+ * `modes` to retheme the whole component, or set `modes` per item to
+ * remix.
+ *
+ * The component supports both **controlled** and **uncontrolled**
+ * tab selection — pass `activeTabIndex` + `onTabChange` for the
+ * controlled mode, or omit them and the component will manage the
+ * selection internally starting from `defaultActiveTabIndex`.
+ *
+ * @component
+ * @param {RangeTrackProps} props
+ *
+ * @example
+ * ```tsx
+ * <RangeTrack
+ *   tabs={[
+ *     {
+ *       label: 'Sectoral',
+ *       items: [
+ *         { label: 'Large cap', value: 50, displayValue: '50%' },
+ *         { label: 'Mid cap',   value: 30, displayValue: '30%' },
+ *         { label: 'Small cap', value: 20, displayValue: '20%' },
+ *       ],
+ *     },
+ *     {
+ *       label: 'Geography',
+ *       items: [
+ *         { label: 'India', value: 70, displayValue: '70%' },
+ *         { label: 'US',    value: 20, displayValue: '20%' },
+ *         { label: 'Other', value: 10, displayValue: '10%' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+function RangeTrack({
+  tabs,
+  formatValue,
+  activeTabIndex,
+  defaultActiveTabIndex = 0,
+  onTabChange,
+  scrollableTabs = false,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  tabsStyle,
+  trackStyle,
+  legendStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const resolvedTabs = tabs && tabs.length > 0 ? tabs : DEFAULT_TABS;
+  const [internalIndex, setInternalIndex] = (0, _react.useState)(() => clampIndex(defaultActiveTabIndex, resolvedTabs.length));
+  const isControlled = activeTabIndex !== undefined;
+  const rawIndex = isControlled ? activeTabIndex : internalIndex;
+  const safeIndex = clampIndex(rawIndex, resolvedTabs.length);
+  const handleTabPress = (0, _react.useCallback)(index => {
+    const nextTab = resolvedTabs[index];
+    if (!nextTab) return;
+    if (!isControlled) setInternalIndex(index);
+    onTabChange?.(index, nextTab);
+  }, [isControlled, onTabChange, resolvedTabs]);
+  const containerGap = (0, _figmaVariablesResolver.getVariableByName)('rangeTrack/gap', modes) ?? 28;
+  // Vertical gap between legend rows is not exposed as its own token —
+  // the Figma design uses 8px between rows, mirroring the
+  // `donutChartSummary/legend/gap` default. Keep the value in step
+  // with `DonutChartSummary` so the two summary components feel
+  // cohesive when stacked.
+  const legendRowGap = 8;
+  const activeTab = resolvedTabs[safeIndex];
+  const activeItems = activeTab?.items ?? [];
+  const segments = activeItems.map((item, index) => ({
+    key: item.key ?? `segment-${index}`,
+    value: item.value,
+    color: resolveItemColor(modes, item, index),
+    accessibilityLabel: item.accessibilityLabel
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityRole: "summary",
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      width: '100%',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: containerGap
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+      modes: modes,
+      scrollable: scrollableTabs,
+      style: tabsStyle,
+      children: resolvedTabs.map((tab, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabItem.default, {
+        label: tab.label,
+        active: index === safeIndex,
+        onPress: () => handleTabPress(index),
+        accessibilityLabel: tab.accessibilityLabel ?? tab.label
+      }, tab.key ?? tab.label ?? `tab-${index}`))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SegmentedTrack.default, {
+      modes: modes,
+      segments: segments,
+      style: trackStyle,
+      accessibilityLabel: activeTab?.accessibilityLabel ?? activeTab?.label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        width: '100%',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: legendRowGap
+      }, legendStyle],
+      children: activeItems.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricLegendItem.default, {
+        label: item.label,
+        value: resolveLegendValue(item, formatValue),
+        indicatorColor: resolveItemColor(modes, item, index),
+        modes: modes
+      }, item.key ?? `legend-${index}`))
+    })]
+  });
+}
+
+/**
+ * Clamp a tab index into `[0, length)`. Negative or out-of-bounds
+ * values fall back to `0` to avoid rendering an undefined tab.
+ */
+function clampIndex(index, length) {
+  if (length <= 0) return 0;
+  if (!Number.isFinite(index)) return 0;
+  if (index < 0) return 0;
+  if (index >= length) return length - 1;
+  return Math.floor(index);
+}
+var _default = exports.default = RangeTrack;