pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/card/Card.js

@@ -1,39 +1,140 @@
 "use strict";
 
 /**
- * Card — a plain container for grouping content. No interaction, no text of its own: `children` is
- * ordinary composition (a consumer places `Text`, `Button`, whatever it needs inside), so there is
- * nothing here for `accessibilityRole` to announce — the container is intentionally invisible to
- * assistive tech and its children carry their own semantics, exactly like a plain `View` would.
+ * Card — a plain container for grouping content, optionally pressable. When `onPress` is absent the
+ * root is a plain `View` with no press hook or animated values. Children carry their own semantics.
  */
 
-import { memo } from "react";
-import { View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { memo, useCallback, useMemo } from "react";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
 import { cardStructure, resolveCardVariant } from "./Card.variants.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function useCardStyles(variant, style) {
+  const theme = useTheme();
+  return useMemo(() => {
+    const variantColors = resolveCardVariant(theme.colors, variant);
+    const elevated = variant === "elevated";
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.sm);
+    const elevatedBg = elevated ? floatingBackground(theme, "sm") : variantColors.background;
+    return [cardStructure(theme, {
+      variant
+    }), {
+      backgroundColor: elevatedBg,
+      borderCurve: "continuous"
+    }, variantColors.border !== undefined && {
+      borderColor: variantColors.border
+    }, elevated && floatingSurfaceStyle(theme, "sm"), style];
+  }, [theme, variant, style]);
+}
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+function StaticCard({
+  variant,
+  children,
+  style,
+  testID
+}) {
+  const rootStyle = useCardStyles(variant, style);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: rootStyle,
+    children: children
+  });
+}
+function PressableCard({
+  variant,
+  children,
+  style,
+  testID,
+  onPress,
+  onLongPress,
+  disabled = false
+}) {
+  const theme = useTheme();
+  const blocked = disabled;
+  const press = usePressState(blocked);
+  const rootStyle = useCardStyles(variant, style);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.lg]);
+  const handlePressOut = useCallback(() => {
+    press.handlers.onPressOut();
+  }, [press.handlers]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || blocked) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [blocked, theme.mode]);
+  return /*#__PURE__*/_jsx(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    disabled: blocked,
+    onPress: blocked ? undefined : onPress,
+    onLongPress: blocked ? undefined : onLongPress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: handlePressOut,
+    onLayout: press.onLayout,
+    android_ripple: androidRipple,
+    style: [rootStyle, press.animatedStyle, blocked && styles.dimmed, {
+      overflow: "hidden"
+    }],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.rippleClip,
+      pointerEvents: "box-none",
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        testID: testID === undefined ? undefined : `${testID}-press-overlay`,
+        style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      }), children]
+    })
+  });
+}
 function CardImpl({
   variant = "elevated",
   children,
+  onPress,
+  onLongPress,
+  disabled = false,
   style,
   testID
 }) {
-  const theme = useTheme();
-  const variantColors = resolveCardVariant(theme.colors, variant);
-  return /*#__PURE__*/_jsx(View, {
+  if (onPress === undefined) {
+    return /*#__PURE__*/_jsx(StaticCard, {
+      variant: variant,
+      style: style,
+      testID: testID,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(PressableCard, {
+    variant: variant,
+    style: style,
     testID: testID,
-    style: [cardStructure(theme, {
-      variant
-    }), {
-      backgroundColor: variantColors.background
-    }, variantColors.border !== undefined && {
-      borderColor: variantColors.border
-    }, variant === "elevated" && theme.elevation.md, style],
+    onPress: onPress,
+    onLongPress: onLongPress,
+    disabled: disabled,
     children: children
   });
 }
-
-// A consumer's screen re-renders far more often than Card's own props change — memo is near-free
-// insurance for a design-system primitive (see CLAUDE.md "Performance" section).
+const styles = StyleSheet.create({
+  dimmed: {
+    opacity: 0.5
+  },
+  rippleClip: {
+    flex: 1,
+    overflow: "hidden",
+    borderRadius: 0
+  }
+});
 export const Card = /*#__PURE__*/memo(CardImpl);
 //# sourceMappingURL=Card.js.map

package/lib/module/modules/card/Card.variants.js

@@ -53,6 +53,7 @@ export function resolveCardVariant(colors, variant) {
 export const cardStructure = createThemedVariants(theme => ({
   base: {
     borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     padding: theme.space[4]
   },
   variants: {

package/lib/module/modules/card/MODULE.md

@@ -1,13 +1,15 @@
 # card/ — a plain, variant-driven container
 
 `Card` groups content with a themed background, optional border, and optional elevation. It takes
-no icon, no press handler, and renders no text of its own — `children` is ordinary composition.
+no icon and renders no text of its own — `children` is ordinary composition. When `onPress` is
+provided the root becomes a pressable surface with scale + state-layer feedback; otherwise it stays
+a plain `View` with no press hook.
 
 ## Files
 
 | File | Role |
 |------|------|
-| `Card.tsx` | The component. Resolves the variant's colours + elevation, applies them inline over the structural style, in that order, `style` last. |
+| `Card.tsx` | The component. Resolves variant colours + `floatingSurfaceStyle` for `elevated`, applies inline over structure, `style` last. |
 | `Card.variants.ts` | Pure resolver (`resolveCardVariant`) + the themed structural variant resolver `cardStructure`. No React. |
 | `index.ts` | Public surface: `Card`, `CardProps`, `CardVariant`. |
 | `__tests__/Card.test.ts` | Pure: WCAG 1.4.11 (outline border, all brands × modes) + variant→colour resolution. |
@@ -18,6 +20,9 @@ no icon, no press handler, and renders no text of its own — `children` is ordi
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `variant` | `elevated \| outline \| flat` | `elevated` | Closed union — see below. |
+| `onPress` | `() => void` | — | When set, root is `Pressable` with `usePressState` feedback. |
+| `onLongPress` | `(event) => void` | — | Only when `onPress` is set. |
+| `disabled` | `boolean` | `false` | Only when `onPress` is set. |
 | `children` | `ReactNode` | — | Ordinary composition, not a prop spread. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Forwarded to the outermost `View`. |
@@ -28,7 +33,7 @@ no icon, no press handler, and renders no text of its own — `children` is ordi
 |---------|-----------|--------|-----------|
 | `flat` | `bg.surface` | none | none |
 | `outline` | `bg.surface` | `border.interactive`, `borderWidths.thin` | none |
-| `elevated` (default) | `bg.raised` | none | `theme.elevation.md` (already-rendered `ElevationStyle`, spread as-is — never re-derived) |
+| `elevated` (default) | `floatingBackground(sm)` in dark | none | `floatingSurfaceStyle(sm)` — `elevation` + `highlight` + `borderCurve` |
 
 Padding (`theme.space[4]`) and radius (`theme.radii.lg`) are shared across all three variants via
 `cardStructure`; only border WIDTH varies by variant there (colour is resolved separately and
@@ -49,17 +54,15 @@ edge. `elevated` additionally separates itself with a shadow, not a colour jump.
 
 ## Accessibility contract (WCAG)
 
-- **No `accessibilityRole`.** `Card` is a plain grouping container with no interaction and no text
-  of its own — there is nothing here for assistive tech to announce beyond its children, so the
-  *correct* role (rule 8) is none, exactly like an unstyled `View`. Children carry their own
-  semantics.
+- **No `accessibilityRole` when not pressable.** Plain grouping container — children carry semantics.
+  When `onPress` is set, `accessibilityRole="button"`.
 - **1.4.11** — the only rendered non-text boundary (`outline`'s border) clears ≥ 3:1 against
   `bg.canvas`, measured for all 8 brands × both modes (`Card.test.ts`).
 - **1.4.3** — N/A. Card renders no text; contrast for whatever a consumer places in `children` is
   that content's own responsibility, same as `Button.test.ts` only measures what Button itself
   renders.
-- **2.3.3 (reduced motion)** — N/A. Card has no animation.
-- **Touch target (2.5.x)** — N/A. Card is not interactive; it has no press handler to reach 44dp.
+- **2.3.3 (reduced motion)** — press feedback respects `usePressState` / `useMotion` when interactive.
+- **Touch target (2.5.x)** — N/A unless `onPress` is set; the card's padded area is the target.
 
 ## Patterns copied from `button/` (the reference module)
 
@@ -74,8 +77,14 @@ edge. `elevated` additionally separates itself with a shadow, not a colour jump.
 
 ## Known gaps
 
-None — no icon, no new theme token, no new core helper needed for this component.
+None.
 
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `CardImpl` internally, exported as `Card = memo(CardImpl)`. Renders only a `View` around consumer-supplied `children` — no library child component, nothing to memoize.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/modules/charts/BarChart.js

@@ -0,0 +1,257 @@
+"use strict";
+
+import { memo, useCallback, useMemo, useState } from "react";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import Svg, { Circle, Line, Path, Rect, Text as SvgText } from "react-native-svg";
+import { useDeviceTier } from "../../core/device/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
+import { ChartLegend } from "./ChartLegend.js";
+import { BAR_MARKER_MIN_SPAN, BAR_MARKER_RADIUS, categoricalColorAt, decimateCategories, defaultNumberFormatter, describeMarker, finiteOrZero, hitSlopFor, maxRenderedCategories, niceScale, resolveBarChartDomain, resolveBarLayout, resolveBarX, resolveChartAxisColors, scaleValue, seriesShapeAt, summarizeBarChart } from "./Charts.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Y_AXIS_WIDTH = 40;
+const X_AXIS_HEIGHT = 24;
+const PLOT_TOP = 12;
+const TICK_COUNT = 5;
+const VALUE_LABEL_GAP = 6;
+const AXIS_LABEL_SIZE = 11;
+const BarPressTarget = /*#__PURE__*/memo(function BarPressTarget({
+  categoryIndex,
+  seriesIndex,
+  x,
+  top,
+  width,
+  height,
+  label,
+  testID,
+  onPress,
+  androidRipple
+}) {
+  const press = useCallback(() => onPress(categoryIndex, seriesIndex), [onPress, categoryIndex, seriesIndex]);
+  const box = useMemo(() => ({
+    position: "absolute",
+    left: x,
+    top,
+    width,
+    height,
+    overflow: "hidden"
+  }), [x, top, width, height]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    hitSlop: hitSlopFor(width, height),
+    onPress: press,
+    android_ripple: androidRipple,
+    style: box
+  });
+});
+export const BarChart = /*#__PURE__*/memo(function BarChart({
+  data,
+  series,
+  height = 200,
+  showGrid = true,
+  showValues = false,
+  yAxisFormatter = defaultNumberFormatter,
+  stacked = false,
+  showLegend = true,
+  onPressBar,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const axisColors = useMemo(() => resolveChartAxisColors(theme.colors), [theme.colors]);
+  const [width, setWidth] = useState(0);
+  const tier = useDeviceTier();
+  const onLayout = event => {
+    setWidth(event.nativeEvent.layout.width);
+  };
+  const plotWidth = Math.max(0, width - Y_AXIS_WIDTH);
+  const plotHeight = Math.max(0, height - X_AXIS_HEIGHT - PLOT_TOP);
+
+  // An unbounded `data` array otherwise means unbounded svg nodes — one bar, one label and one
+  // press target per category. Below the cap this is the same array reference as `data` itself.
+  const renderedData = useMemo(() => decimateCategories(data, maxRenderedCategories(tier)), [data, tier]);
+  const summary = useMemo(() => summarizeBarChart(renderedData, yAxisFormatter), [renderedData, yAxisFormatter]);
+  const seriesCount = useMemo(() => Math.max(1, renderedData.reduce((max, datum) => Math.max(max, datum.values.length), 0)), [renderedData]);
+  const {
+    bars,
+    ticks,
+    categories
+  } = useMemo(() => {
+    const domain = resolveBarChartDomain(renderedData, stacked);
+    const scale = niceScale(domain.min, domain.max, TICK_COUNT);
+    const layout = resolveBarLayout(renderedData.length, seriesCount, plotWidth, stacked);
+    const zeroY = scaleValue(0, scale.min, scale.max, plotHeight, 0);
+    const resolvedBars = renderedData.flatMap((datum, categoryIndex) => {
+      let stackTop = 0;
+      return datum.values.map((rawValue, seriesIndex) => {
+        const value = finiteOrZero(rawValue);
+        const color = series?.[seriesIndex]?.color ?? categoricalColorAt(theme.colors, seriesIndex);
+        const x = Y_AXIS_WIDTH + resolveBarX(categoryIndex, seriesIndex, seriesCount, layout, stacked);
+        let top;
+        let barHeight;
+        if (stacked) {
+          const from = stackTop;
+          const to = stackTop + value;
+          stackTop = to;
+          const yFrom = scaleValue(from, scale.min, scale.max, plotHeight, 0);
+          const yTo = scaleValue(to, scale.min, scale.max, plotHeight, 0);
+          top = PLOT_TOP + Math.min(yFrom, yTo);
+          barHeight = Math.abs(yTo - yFrom);
+        } else {
+          const yValue = scaleValue(value, scale.min, scale.max, plotHeight, 0);
+          top = PLOT_TOP + Math.min(yValue, zeroY);
+          barHeight = Math.abs(zeroY - yValue);
+        }
+        const seriesName = series?.[seriesIndex]?.name;
+        const label = seriesName ? `${datum.label} ${seriesName}, ${yAxisFormatter(value)}` : `${datum.label}, ${yAxisFormatter(value)}`;
+
+        // A single-series chart needs no shape channel; a mark too narrow or too short to draw
+        // cleanly falls back to the legend and the bar's own fixed group position instead.
+        const canMarkShape = seriesCount > 1 && layout.barWidth >= BAR_MARKER_MIN_SPAN && barHeight >= BAR_MARKER_MIN_SPAN;
+        return {
+          categoryIndex,
+          seriesIndex,
+          x,
+          top,
+          width: layout.barWidth,
+          height: barHeight,
+          color,
+          shape: canMarkShape ? seriesShapeAt(seriesIndex) : undefined,
+          value,
+          label
+        };
+      });
+    });
+    return {
+      bars: resolvedBars,
+      ticks: scale.ticks.map(tick => ({
+        y: PLOT_TOP + scaleValue(tick, scale.min, scale.max, plotHeight, 0),
+        text: yAxisFormatter(tick)
+      })),
+      categories: renderedData.map((datum, categoryIndex) => ({
+        x: Y_AXIS_WIDTH + categoryIndex * layout.bandWidth + layout.bandWidth / 2,
+        label: datum.label
+      }))
+    };
+  }, [renderedData, series, stacked, seriesCount, plotWidth, plotHeight, theme.colors, yAxisFormatter]);
+  const pressBar = useCallback((categoryIndex, seriesIndex) => {
+    const datum = renderedData[categoryIndex];
+    if (datum !== undefined) onPressBar?.(datum, seriesIndex);
+  }, [renderedData, onPressBar]);
+  const legendEntries = useMemo(() => showLegend && seriesCount > 1 ? Array.from({
+    length: seriesCount
+  }, (_, index) => ({
+    color: series?.[index]?.color ?? categoricalColorAt(theme.colors, index),
+    label: series?.[index]?.name ?? `Series ${index + 1}`,
+    shape: seriesShapeAt(index)
+  })) : [], [seriesCount, series, showLegend, theme.colors]);
+  const plotStyle = useMemo(() => ({
+    height
+  }), [height]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: style,
+    onLayout: onLayout,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: plotStyle,
+      children: [/*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-summary` : undefined,
+        accessible: true,
+        accessibilityRole: "image",
+        accessibilityLabel: summary,
+        style: StyleSheet.absoluteFill,
+        pointerEvents: "none"
+      }), /*#__PURE__*/_jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        style: StyleSheet.absoluteFill,
+        children: /*#__PURE__*/_jsxs(Svg, {
+          width: width,
+          height: height,
+          children: [showGrid && ticks.map((tick, index) => /*#__PURE__*/_jsx(Line, {
+            testID: testID ? `${testID}-grid-${index}` : undefined,
+            x1: Y_AXIS_WIDTH,
+            x2: width,
+            y1: tick.y,
+            y2: tick.y,
+            stroke: axisColors.gridline,
+            strokeWidth: StyleSheet.hairlineWidth
+          }, `grid-${index}`)), ticks.map((tick, index) => /*#__PURE__*/_jsx(SvgText, {
+            testID: testID ? `${testID}-tick-${index}` : undefined,
+            x: Y_AXIS_WIDTH - 8,
+            y: tick.y + 4,
+            fontSize: AXIS_LABEL_SIZE,
+            fill: axisColors.label,
+            textAnchor: "end",
+            children: tick.text
+          }, `tick-${index}`)), categories.map((category, categoryIndex) => /*#__PURE__*/_jsx(SvgText, {
+            testID: testID ? `${testID}-category-${categoryIndex}` : undefined,
+            x: category.x,
+            y: height - X_AXIS_HEIGHT / 2 + 4,
+            fontSize: AXIS_LABEL_SIZE,
+            fill: axisColors.label,
+            textAnchor: "middle",
+            children: category.label
+          }, `category-${categoryIndex}`)), bars.map(bar => /*#__PURE__*/_jsx(Rect, {
+            testID: testID ? `${testID}-bar-${bar.categoryIndex}-${bar.seriesIndex}` : undefined,
+            x: bar.x,
+            y: bar.top,
+            width: bar.width,
+            height: bar.height,
+            fill: bar.color
+          }, `bar-${bar.categoryIndex}-${bar.seriesIndex}`)), bars.map(bar => {
+            if (bar.shape === undefined) return null;
+            const markTestID = testID ? `${testID}-bar-${bar.categoryIndex}-${bar.seriesIndex}-mark` : undefined;
+            const cx = bar.x + bar.width / 2;
+            const cy = bar.top + BAR_MARKER_RADIUS * 2;
+            return bar.shape === "circle" ? /*#__PURE__*/_jsx(Circle, {
+              testID: markTestID,
+              cx: cx,
+              cy: cy,
+              r: BAR_MARKER_RADIUS,
+              fill: theme.colors.bg.surface
+            }, `mark-${bar.categoryIndex}-${bar.seriesIndex}`) : /*#__PURE__*/_jsx(Path, {
+              testID: markTestID,
+              d: describeMarker(bar.shape, cx, cy, BAR_MARKER_RADIUS),
+              fill: theme.colors.bg.surface
+            }, `mark-${bar.categoryIndex}-${bar.seriesIndex}`);
+          }), showValues && bars.map(bar => /*#__PURE__*/_jsx(SvgText, {
+            testID: testID ? `${testID}-value-${bar.categoryIndex}-${bar.seriesIndex}` : undefined,
+            x: bar.x + bar.width / 2,
+            y: Math.max(PLOT_TOP, bar.top - VALUE_LABEL_GAP),
+            fontSize: AXIS_LABEL_SIZE,
+            fill: axisColors.label,
+            textAnchor: "middle",
+            children: yAxisFormatter(bar.value)
+          }, `value-${bar.categoryIndex}-${bar.seriesIndex}`))]
+        })
+      }), onPressBar !== undefined && /*#__PURE__*/_jsx(View, {
+        style: StyleSheet.absoluteFill,
+        pointerEvents: "box-none",
+        children: bars.map(bar => /*#__PURE__*/_jsx(BarPressTarget, {
+          testID: testID ? `${testID}-bar-${bar.categoryIndex}-${bar.seriesIndex}-press` : undefined,
+          categoryIndex: bar.categoryIndex,
+          seriesIndex: bar.seriesIndex,
+          x: bar.x,
+          top: bar.top,
+          width: bar.width,
+          height: bar.height,
+          label: bar.label,
+          onPress: pressBar,
+          androidRipple: androidRipple
+        }, `press-${bar.categoryIndex}-${bar.seriesIndex}`))
+      })]
+    }), /*#__PURE__*/_jsx(ChartLegend, {
+      entries: legendEntries,
+      glyph: "mark",
+      testID: testID ? `${testID}-legend` : undefined
+    })]
+  });
+});
+//# sourceMappingURL=BarChart.js.map

package/lib/module/modules/charts/BarList.js

@@ -1,14 +1,68 @@
 "use strict";
 
-import { memo } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
-import { barListHeaderStructure, barListRowStructure, barListStructure, barListTrackStructure, resolveBarListColors } from "./Charts.variants.js";
+import { VirtualList } from "../../core/list/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { BAR_LIST_ROW_HEIGHT, barListHeaderStructure, barListRowStructure, barListStructure, barListTrackStructure, resolveBarListColors } from "./Charts.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function barFraction(value, max) {
   if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0;
   return Math.min(Math.max(value / max, 0), 1);
 }
+const BarListRow = /*#__PURE__*/memo(function BarListRow({
+  index,
+  label,
+  value,
+  icon,
+  fillWidth,
+  fillColor,
+  trackColor,
+  rowStyle,
+  headerStyle,
+  trackStyle,
+  labelTextStyle,
+  valueTextStyle,
+  testID,
+  onPress
+}) {
+  const press = useCallback(() => onPress?.(index), [onPress, index]);
+  const Row = onPress === undefined ? View : Pressable;
+  return /*#__PURE__*/_jsxs(Row, {
+    testID: testID,
+    accessible: true,
+    accessibilityRole: onPress === undefined ? "text" : "button",
+    accessibilityLabel: `${label}, ${value}`,
+    onPress: onPress === undefined ? undefined : press,
+    style: rowStyle,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: headerStyle,
+      children: [icon, /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: labelTextStyle,
+        children: label
+      }), /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: valueTextStyle,
+        children: value
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      testID: testID === undefined ? undefined : `${testID}-track`,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [trackStyle, {
+        backgroundColor: trackColor
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        testID: testID === undefined ? undefined : `${testID}-fill`,
+        style: [styles.fill, {
+          width: fillWidth,
+          backgroundColor: fillColor
+        }]
+      })
+    })]
+  });
+});
 export const BarList = /*#__PURE__*/memo(function BarList({
   items,
   maxValue,
@@ -17,54 +71,63 @@ export const BarList = /*#__PURE__*/memo(function BarList({
   testID
 }) {
   const theme = useTheme();
-  const colors = resolveBarListColors(theme.colors);
-  const max = maxValue ?? items.reduce((highest, item) => Math.max(highest, Number.isFinite(item.value) ? item.value : 0), 0);
+  const colors = useMemo(() => resolveBarListColors(theme.colors), [theme.colors]);
+  const rows = useMemo(() => {
+    const max = maxValue ?? items.reduce((highest, item) => Math.max(highest, Number.isFinite(item.value) ? item.value : 0), 0);
+    return items.map((item, index) => ({
+      key: `${index}-${item.label}`,
+      label: item.label,
+      value: item.value,
+      icon: item.icon,
+      fillWidth: `${barFraction(item.value, max) * 100}%`,
+      fillColor: item.color ?? colors.fill
+    }));
+  }, [items, maxValue, colors.fill]);
+  const rowStyle = useMemo(() => barListRowStructure(theme), [theme]);
+  const headerStyle = useMemo(() => barListHeaderStructure(theme), [theme]);
+  const trackStyle = useMemo(() => barListTrackStructure(theme), [theme]);
+  const labelTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), styles.label, {
+    fontSize: theme.fontSizes.sm,
+    color: colors.label
+  }], [theme, colors.label]);
+  const valueTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.valueColor
+  }], [theme, colors.valueColor]);
+  const pressItem = useCallback(index => {
+    const item = items[index];
+    if (item !== undefined) onPressItem?.(item, index);
+  }, [items, onPressItem]);
+  const contentContainerStyle = useMemo(() => barListStructure(theme), [theme]);
+  const keyExtractor = useCallback(row => row.key, []);
+  const renderItem = useCallback(({
+    item,
+    index
+  }) => /*#__PURE__*/_jsx(BarListRow, {
+    testID: testID === undefined ? undefined : `${testID}-item-${index}`,
+    index: index,
+    label: item.label,
+    value: item.value,
+    icon: item.icon,
+    fillWidth: item.fillWidth,
+    fillColor: item.fillColor,
+    trackColor: colors.track,
+    rowStyle: rowStyle,
+    headerStyle: headerStyle,
+    trackStyle: trackStyle,
+    labelTextStyle: labelTextStyle,
+    valueTextStyle: valueTextStyle,
+    onPress: onPressItem === undefined ? undefined : pressItem
+  }), [testID, colors.track, rowStyle, headerStyle, trackStyle, labelTextStyle, valueTextStyle, onPressItem, pressItem]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
-    style: [barListStructure(theme), style],
-    children: items.map((item, index) => {
-      const rowTestID = testID === undefined ? undefined : `${testID}-item-${index}`;
-      const Row = onPressItem === undefined ? View : Pressable;
-      return /*#__PURE__*/_jsxs(Row, {
-        testID: rowTestID,
-        accessible: true,
-        accessibilityRole: onPressItem === undefined ? "text" : "button",
-        accessibilityLabel: `${item.label}, ${item.value}`,
-        onPress: onPressItem === undefined ? undefined : () => onPressItem(item, index),
-        style: barListRowStructure(theme),
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: barListHeaderStructure(theme),
-          children: [item.icon, /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [theme.fontStyleForWeight(theme.fontWeights.medium), styles.label, {
-              fontSize: theme.fontSizes.sm,
-              color: colors.label
-            }],
-            children: item.label
-          }), /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-              fontSize: theme.fontSizes.sm,
-              color: colors.value
-            }],
-            children: item.value
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          testID: rowTestID === undefined ? undefined : `${rowTestID}-track`,
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no-hide-descendants",
-          style: [barListTrackStructure(theme), {
-            backgroundColor: colors.track
-          }],
-          children: /*#__PURE__*/_jsx(View, {
-            testID: rowTestID === undefined ? undefined : `${rowTestID}-fill`,
-            style: [styles.fill, {
-              width: `${barFraction(item.value, max) * 100}%`,
-              backgroundColor: item.color ?? colors.fill
-            }]
-          })
-        })]
-      }, `${index}-${item.label}`);
+    style: style,
+    children: /*#__PURE__*/_jsx(VirtualList, {
+      data: rows,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      itemHeight: BAR_LIST_ROW_HEIGHT,
+      contentContainerStyle: contentContainerStyle
     })
   });
 });