jfs-components 0.0.71 → 0.0.73

package/lib/module/components/Radio/Radio.js

@@ -0,0 +1,188 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Pressable, View, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+import { jsx as _jsx } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// Radio
+// ---------------------------------------------------------------------------
+
+export function Radio({
+  selected = false,
+  disabled = false,
+  onPress,
+  modes = EMPTY_MODES,
+  style,
+  testID
+}) {
+  // ---- Refs & State ----
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [pressed, setPressed] = useState(false);
+
+  // ---- Dimensions ----
+  const widthStr = getVariableByName('radio/width', modes) || '18';
+  const heightStr = getVariableByName('radio/height', modes) || '18';
+  const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10';
+  const width = parseFloat(widthStr?.toString() || '18');
+  const height = parseFloat(heightStr?.toString() || '18');
+  const selectorSize = parseFloat(selectorSizeStr?.toString() || '10');
+
+  // ---- State Logic ----
+  // Priority: Disabled -> Focused -> Hover/Pressed -> Idle
+  // Note: Design treats Active (Pressed) similar to Selected for some styles, 
+  // but usually in Radios, Pressed is a transient state.
+  // We will map:
+  // - Disabled -> 'disabled'
+  // - Focused -> 'focus'
+  // - Hovered -> 'hover'
+  // - Idle -> 'idle'
+
+  // We handle `selected` as a separate dimension derived from state.
+
+  let visualState = 'idle';
+  if (disabled) {
+    visualState = 'disabled';
+  } else if (focused) {
+    visualState = 'focus';
+  } else if (hovered || pressed) {
+    visualState = 'hover';
+  }
+
+  // Construct token paths based on state + selected
+  let prefix = `radio/${visualState}`;
+  if (visualState === 'idle' && selected) {
+    prefix = `radio/selected`;
+  } else if (selected) {
+    prefix = `radio/${visualState}Selected`;
+  }
+
+  // ---- Colors & Border ----
+
+  const resolveColor = (path, fallback) => {
+    return getVariableByName(path, modes) || fallback;
+  };
+
+  // Background Color
+  let bgColorVar = `${prefix}/background/color`;
+  // Fix for disabledSelected weirdness if needed
+  if (visualState === 'disabled' && selected) {
+    // Check specific path from dump: `radio/disabledSelected/background`
+    if (!getVariableByName(`${prefix}/background/color`, modes)) {
+      bgColorVar = `${prefix}/background`;
+    }
+  }
+
+  // Border Color
+  let borderColorVar = `${prefix}/border/color`;
+
+  // Border Width
+  let borderWidthVar = `${prefix}/border/size`;
+  // Fix for huge path: `radio/disabled/radio/disabled/border/size`
+  if (visualState === 'disabled' && !selected) {
+    if (getVariableByName('radio/disabled/radio/disabled/border/size', modes)) {
+      borderWidthVar = 'radio/disabled/radio/disabled/border/size';
+    }
+  }
+
+  // Selector Color
+  let selectorBgVar = `${prefix}/selector/background/color`;
+  if (!selected) {
+    selectorBgVar = 'transparent';
+  }
+
+  // Shadows (Glow)
+  let shadowSizeVar = `${prefix}/boxShadow/size`;
+  let shadowColorVar = `${prefix}/shadow/color`;
+
+  // Resolve Values
+  const backgroundColor = resolveColor(bgColorVar, 'transparent');
+  const borderColor = resolveColor(borderColorVar, 'transparent');
+  const borderWidth = parseFloat(getVariableByName(borderWidthVar, modes)?.toString() || '1');
+  const selectorColor = resolveColor(selectorBgVar, 'transparent');
+  const shadowSize = parseFloat(getVariableByName(shadowSizeVar, modes)?.toString() || '0');
+  const shadowColor = resolveColor(shadowColorVar, 'transparent');
+
+  // Styles
+  const containerStyle = {
+    width,
+    height,
+    borderRadius: width / 2,
+    // 9999px -> circle
+    borderWidth,
+    borderColor,
+    backgroundColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // Web shadow (ring)
+    ...(Platform.OS === 'web' && shadowSize > 0 ? {
+      boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`
+    } : {})
+  };
+  const selectorStyle = {
+    width: selectorSize,
+    height: selectorSize,
+    borderRadius: selectorSize / 2,
+    backgroundColor: selectorColor
+  };
+
+  // Dummy block for token extraction (static analysis)
+  if (false) {
+    getVariableByName('radio/idle/background/color');
+    getVariableByName('radio/idle/border/color');
+    getVariableByName('radio/selector/size');
+    getVariableByName('radio/width');
+    getVariableByName('radio/height');
+    getVariableByName('radio/background/color');
+    getVariableByName('radio/hover/background/color');
+    getVariableByName('radio/hover/border/color');
+    getVariableByName('radio/hover/boxShadow/size');
+    getVariableByName('radio/hover/shadow/color');
+    getVariableByName('radio/selected/background/color');
+    getVariableByName('radio/selected/border/color');
+    getVariableByName('radio/selected/selector/background/color');
+    getVariableByName('radio/hoverSelected/background/color');
+    getVariableByName('radio/hoverSelected/border/color');
+    getVariableByName('radio/hoverSelected/boxShadow/size');
+    getVariableByName('radio/hoverSelected/shadow/color');
+    getVariableByName('radio/hoverSelected/selector/background/color');
+    getVariableByName('radio/focus/background/color');
+    getVariableByName('radio/focus/border/color');
+    getVariableByName('radio/focus/border/size');
+    getVariableByName('radio/focus/boxShadow/size');
+    getVariableByName('radio/focus/shadow/color');
+    getVariableByName('radio/focusSelected/background/color');
+    getVariableByName('radio/focusSelected/selector/background/color');
+    getVariableByName('radio/focusSelected/border/size');
+    getVariableByName('radio/disabled/radio/disabled/border/size');
+    getVariableByName('radio/disabled/background/color');
+    getVariableByName('radio/disabled/border/color');
+    getVariableByName('radio/disabledSelected/selector/background/color');
+    getVariableByName('radio/disabledSelected/background');
+    getVariableByName('radio/disabledSelected/border/color');
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    testID: testID,
+    disabled: disabled,
+    onPress: onPress,
+    onHoverIn: () => setHovered(true),
+    onHoverOut: () => setHovered(false),
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: ({
+      pressed: isPressed
+    }) => [containerStyle, style],
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectorStyle
+    })
+  });
+}
+export default Radio;

package/lib/module/components/RadioButton/RadioButton.js

@@ -1,188 +1,23 @@
 "use strict";
 
-import React, { useState } from 'react';
-import { Pressable, View, Platform } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
-
-// ---------------------------------------------------------------------------
-// Props
-// ---------------------------------------------------------------------------
-import { jsx as _jsx } from "react/jsx-runtime";
-// ---------------------------------------------------------------------------
-// RadioButton
-// ---------------------------------------------------------------------------
-
-export function RadioButton({
-  selected = false,
-  disabled = false,
-  onPress,
-  modes = EMPTY_MODES,
-  style,
-  testID
-}) {
-  // ---- Refs & State ----
-  const [hovered, setHovered] = useState(false);
-  const [focused, setFocused] = useState(false);
-  const [pressed, setPressed] = useState(false);
-
-  // ---- Dimensions ----
-  const widthStr = getVariableByName('radio/width', modes) || '18';
-  const heightStr = getVariableByName('radio/height', modes) || '18';
-  const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10';
-  const width = parseFloat(widthStr?.toString() || '18');
-  const height = parseFloat(heightStr?.toString() || '18');
-  const selectorSize = parseFloat(selectorSizeStr?.toString() || '10');
-
-  // ---- State Logic ----
-  // Priority: Disabled -> Focused -> Hover/Pressed -> Idle
-  // Note: Design treats Active (Pressed) similar to Selected for some styles, 
-  // but usually in Radio Buttons, Pressed is a transient state.
-  // We will map:
-  // - Disabled -> 'disabled'
-  // - Focused -> 'focus'
-  // - Hovered -> 'hover'
-  // - Idle -> 'idle'
-
-  // We handle `selected` as a separate dimension derived from state.
-
-  let visualState = 'idle';
-  if (disabled) {
-    visualState = 'disabled';
-  } else if (focused) {
-    visualState = 'focus';
-  } else if (hovered || pressed) {
-    visualState = 'hover';
-  }
-
-  // Construct token paths based on state + selected
-  let prefix = `radio/${visualState}`;
-  if (visualState === 'idle' && selected) {
-    prefix = `radio/selected`;
-  } else if (selected) {
-    prefix = `radio/${visualState}Selected`;
-  }
-
-  // ---- Colors & Border ----
-
-  const resolveColor = (path, fallback) => {
-    return getVariableByName(path, modes) || fallback;
-  };
-
-  // Background Color
-  let bgColorVar = `${prefix}/background/color`;
-  // Fix for disabledSelected weirdness if needed
-  if (visualState === 'disabled' && selected) {
-    // Check specific path from dump: `radio/disabledSelected/background`
-    if (!getVariableByName(`${prefix}/background/color`, modes)) {
-      bgColorVar = `${prefix}/background`;
-    }
-  }
-
-  // Border Color
-  let borderColorVar = `${prefix}/border/color`;
-
-  // Border Width
-  let borderWidthVar = `${prefix}/border/size`;
-  // Fix for huge path: `radio/disabled/radio/disabled/border/size`
-  if (visualState === 'disabled' && !selected) {
-    if (getVariableByName('radio/disabled/radio/disabled/border/size', modes)) {
-      borderWidthVar = 'radio/disabled/radio/disabled/border/size';
-    }
-  }
-
-  // Selector Color
-  let selectorBgVar = `${prefix}/selector/background/color`;
-  if (!selected) {
-    selectorBgVar = 'transparent';
-  }
-
-  // Shadows (Glow)
-  let shadowSizeVar = `${prefix}/boxShadow/size`;
-  let shadowColorVar = `${prefix}/shadow/color`;
-
-  // Resolve Values
-  const backgroundColor = resolveColor(bgColorVar, 'transparent');
-  const borderColor = resolveColor(borderColorVar, 'transparent');
-  const borderWidth = parseFloat(getVariableByName(borderWidthVar, modes)?.toString() || '1');
-  const selectorColor = resolveColor(selectorBgVar, 'transparent');
-  const shadowSize = parseFloat(getVariableByName(shadowSizeVar, modes)?.toString() || '0');
-  const shadowColor = resolveColor(shadowColorVar, 'transparent');
-
-  // Styles
-  const containerStyle = {
-    width,
-    height,
-    borderRadius: width / 2,
-    // 9999px -> circle
-    borderWidth,
-    borderColor,
-    backgroundColor,
-    justifyContent: 'center',
-    alignItems: 'center',
-    // Web shadow (ring)
-    ...(Platform.OS === 'web' && shadowSize > 0 ? {
-      boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`
-    } : {})
-  };
-  const selectorStyle = {
-    width: selectorSize,
-    height: selectorSize,
-    borderRadius: selectorSize / 2,
-    backgroundColor: selectorColor
-  };
-
-  // Dummy block for token extraction (static analysis)
-  if (false) {
-    getVariableByName('radio/idle/background/color');
-    getVariableByName('radio/idle/border/color');
-    getVariableByName('radio/selector/size');
-    getVariableByName('radio/width');
-    getVariableByName('radio/height');
-    getVariableByName('radio/background/color');
-    getVariableByName('radio/hover/background/color');
-    getVariableByName('radio/hover/border/color');
-    getVariableByName('radio/hover/boxShadow/size');
-    getVariableByName('radio/hover/shadow/color');
-    getVariableByName('radio/selected/background/color');
-    getVariableByName('radio/selected/border/color');
-    getVariableByName('radio/selected/selector/background/color');
-    getVariableByName('radio/hoverSelected/background/color');
-    getVariableByName('radio/hoverSelected/border/color');
-    getVariableByName('radio/hoverSelected/boxShadow/size');
-    getVariableByName('radio/hoverSelected/shadow/color');
-    getVariableByName('radio/hoverSelected/selector/background/color');
-    getVariableByName('radio/focus/background/color');
-    getVariableByName('radio/focus/border/color');
-    getVariableByName('radio/focus/border/size');
-    getVariableByName('radio/focus/boxShadow/size');
-    getVariableByName('radio/focus/shadow/color');
-    getVariableByName('radio/focusSelected/background/color');
-    getVariableByName('radio/focusSelected/selector/background/color');
-    getVariableByName('radio/focusSelected/border/size');
-    getVariableByName('radio/disabled/radio/disabled/border/size');
-    getVariableByName('radio/disabled/background/color');
-    getVariableByName('radio/disabled/border/color');
-    getVariableByName('radio/disabledSelected/selector/background/color');
-    getVariableByName('radio/disabledSelected/background');
-    getVariableByName('radio/disabledSelected/border/color');
-  }
-  return /*#__PURE__*/_jsx(Pressable, {
-    testID: testID,
-    disabled: disabled,
-    onPress: onPress,
-    onHoverIn: () => setHovered(true),
-    onHoverOut: () => setHovered(false),
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
-    onPressIn: () => setPressed(true),
-    onPressOut: () => setPressed(false),
-    style: ({
-      pressed: isPressed
-    }) => [containerStyle, style],
-    children: /*#__PURE__*/_jsx(View, {
-      style: selectorStyle
-    })
-  });
-}
+/**
+ * @deprecated `RadioButton` has been renamed to `Radio`.
+ *
+ * This file is kept as a backward-compatibility shim for teams that may be
+ * importing `RadioButton` directly from this deep path:
+ *
+ *   import RadioButton from 'jfs-components/src/components/RadioButton/RadioButton'
+ *   import { RadioButton, RadioButtonProps } from '...'
+ *
+ * The recommended public import is now:
+ *
+ *   import { Radio, type RadioProps } from 'jfs-components'
+ *
+ * Going forward, this component is called `Radio`. This shim only re-exports
+ * the new `Radio` component under the old `RadioButton` names; please migrate
+ * existing usages to `Radio` at your earliest convenience.
+ */
+
+import { Radio } from '../Radio/Radio';
+export const RadioButton = Radio;
 export default RadioButton;

package/lib/module/components/RangeTrack/RangeTrack.js

@@ -0,0 +1,263 @@
+"use strict";
+
+import React, { useCallback, useState } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
+import SegmentedTrack from '../SegmentedTrack/SegmentedTrack';
+import Tabs from '../Tabs/Tabs';
+import TabItem from '../Tabs/TabItem';
+
+/**
+ * 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.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 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 = EMPTY_MODES,
+  style,
+  tabsStyle,
+  trackStyle,
+  legendStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const resolvedTabs = tabs && tabs.length > 0 ? tabs : DEFAULT_TABS;
+  const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultActiveTabIndex, resolvedTabs.length));
+  const isControlled = activeTabIndex !== undefined;
+  const rawIndex = isControlled ? activeTabIndex : internalIndex;
+  const safeIndex = clampIndex(rawIndex, resolvedTabs.length);
+  const handleTabPress = useCallback(index => {
+    const nextTab = resolvedTabs[index];
+    if (!nextTab) return;
+    if (!isControlled) setInternalIndex(index);
+    onTabChange?.(index, nextTab);
+  }, [isControlled, onTabChange, resolvedTabs]);
+  const containerGap = 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__*/_jsxs(View, {
+    accessibilityRole: "summary",
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      width: '100%',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: containerGap
+    }, style],
+    children: [/*#__PURE__*/_jsx(Tabs, {
+      modes: modes,
+      scrollable: scrollableTabs,
+      style: tabsStyle,
+      children: resolvedTabs.map((tab, index) => /*#__PURE__*/_jsx(TabItem, {
+        label: tab.label,
+        active: index === safeIndex,
+        onPress: () => handleTabPress(index),
+        accessibilityLabel: tab.accessibilityLabel ?? tab.label
+      }, tab.key ?? tab.label ?? `tab-${index}`))
+    }), /*#__PURE__*/_jsx(SegmentedTrack, {
+      modes: modes,
+      segments: segments,
+      style: trackStyle,
+      accessibilityLabel: activeTab?.accessibilityLabel ?? activeTab?.label
+    }), /*#__PURE__*/_jsx(View, {
+      style: [{
+        width: '100%',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: legendRowGap
+      }, legendStyle],
+      children: activeItems.map((item, index) => /*#__PURE__*/_jsx(MetricLegendItem, {
+        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);
+}
+export default RangeTrack;