pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/button-group/ButtonGroup.js

@@ -14,15 +14,127 @@
  * `accessibilityRole="radiogroup"` so assistive tech announces the grouping without collapsing the
  * individually-focusable segments into one.
  *
- * No animation anywhere (selection is a conditional fill, not a slide or a fade), so — like
- * `RadioGroup` — there is nothing here for `useReducedMotion` (WCAG 2.3.3) to gate.
+ * No animation anywhere, deliberately: selection is a conditional fill, and the segments share one
+ * continuous border, so a per-segment press scale (Button's affordance) would visibly detach a
+ * segment from the control it is part of. The `pressed` fill swap is the affordance instead. Nothing
+ * animates, so — like `RadioGroup` — there is nothing here for reduce motion (WCAG 2.3.3) to gate.
  */
 
-import { memo } from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
-import { BUTTON_GROUP_SIZES, buttonGroupSegmentStructure, buttonGroupStructure, resolveButtonGroupColors, resolveButtonGroupSegmentAccessibility, resolveButtonGroupSegmentEdgeColors, resolveButtonGroupSegmentHitSlop } from "./ButtonGroup.variants.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../theme/hooks.js";
+import { BUTTON_GROUP_SIZES, buttonGroupSegmentStructure, buttonGroupStructure, resolveButtonGroupColors, resolveButtonGroupKeyIndex, resolveButtonGroupSegmentAccessibility, resolveButtonGroupSegmentEdgeColors, resolveButtonGroupSegmentHitSlop } from "./ButtonGroup.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RN's Flow `ViewProps` declares `onKeyDown` and react-native-web forwards it straight to the DOM
+ * node, but RN's TypeScript `ViewPropTypes.d.ts` omits it — this re-type is the only cast here.
+ */
+const KeyboardView = View;
+
+/**
+ * The ring is drawn INSIDE the segment (positive offsets), unlike Button's outside ring: the
+ * container is `overflow: "hidden"` so it can clip the joined segment radii, which would erase an
+ * outside ring entirely (`ButtonGroup.render.test.tsx` asserts both halves of this).
+ */
+const FOCUS_RING_WIDTH = 2;
+const FOCUS_RING_INSET = 2;
+function ButtonGroupSegmentImpl({
+  label,
+  value,
+  selected,
+  nextSelected,
+  isFirst,
+  isLast,
+  index,
+  active,
+  size,
+  disabled,
+  colors,
+  fontSize,
+  onValueChange,
+  registerRef,
+  testID
+}) {
+  const theme = useTheme();
+  const [focused, setFocused] = useState(false);
+  const a11y = useMemo(() => resolveButtonGroupSegmentAccessibility({
+    selected,
+    disabled
+  }), [selected, disabled]);
+  const edges = useMemo(() => resolveButtonGroupSegmentEdgeColors(colors, {
+    selected,
+    nextSelected
+  }), [colors, selected, nextSelected]);
+  const hitSlop = useMemo(() => resolveButtonGroupSegmentHitSlop(size, {
+    isFirst,
+    isLast
+  }), [size, isFirst, isLast]);
+  const handlePress = useCallback(() => onValueChange(value), [onValueChange, value]);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const setRef = useCallback(node => {
+    registerRef(index, node);
+  }, [registerRef, index]);
+  const focusRingStyle = useMemo(() => ({
+    position: "absolute",
+    pointerEvents: "none",
+    top: FOCUS_RING_INSET,
+    left: FOCUS_RING_INSET,
+    right: FOCUS_RING_INSET,
+    bottom: FOCUS_RING_INSET,
+    borderWidth: FOCUS_RING_WIDTH,
+    borderColor: theme.colors.border.focus,
+    borderRadius: Math.max(0, theme.radii.base - FOCUS_RING_INSET)
+  }), [theme.colors.border.focus, theme.radii.base]);
+  const segmentStyle = useCallback(({
+    pressed
+  }) => [buttonGroupSegmentStructure(theme, {
+    size,
+    first: isFirst ? "on" : "off",
+    last: isLast ? "on" : "off"
+  }), {
+    borderTopColor: edges.top,
+    borderBottomColor: edges.bottom,
+    borderLeftColor: edges.left,
+    borderRightColor: edges.right
+  }, selected ? {
+    backgroundColor: colors.selectedFill
+  } : pressed && !disabled && {
+    backgroundColor: colors.pressedFill
+  }, disabled && styles.dimmed], [theme, size, isFirst, isLast, edges, selected, disabled, colors]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize,
+    color: selected ? colors.onSelectedFill : colors.label
+  }], [theme, fontSize, selected, colors]);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    ref: setRef,
+    testID: testID,
+    accessibilityRole: a11y.accessibilityRole,
+    "aria-checked": a11y["aria-checked"],
+    "aria-disabled": a11y["aria-disabled"],
+    accessibilityLabel: label,
+    disabled: a11y.disabled,
+    tabIndex: active && !disabled ? 0 : -1
+    // RN's Pressable stays `focusable` when disabled, so a TV remote could otherwise land on a
+    // segment that renders no ring (WCAG 2.4.7) — the same fix NumberInput's steppers use.
+    ,
+    focusable: !disabled,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onPress: disabled ? undefined : handlePress,
+    hitSlop: hitSlop,
+    style: segmentStyle,
+    children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
+      testID: testID === undefined ? undefined : `${testID}-focus-ring`,
+      style: focusRingStyle
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: label
+    })]
+  });
+}
+const ButtonGroupSegment = /*#__PURE__*/memo(ButtonGroupSegmentImpl);
 function ButtonGroupImpl({
   options,
   value,
@@ -33,62 +145,58 @@ function ButtonGroupImpl({
   testID
 }) {
   const theme = useTheme();
-  const colors = resolveButtonGroupColors(theme.colors);
+  const colors = useMemo(() => resolveButtonGroupColors(theme.colors), [theme.colors]);
   const fontSize = BUTTON_GROUP_SIZES[size].fontSize;
   const lastIndex = options.length - 1;
-  return /*#__PURE__*/_jsx(View, {
+
+  // `accessibilityRole="radio"` per segment means ARIA requires the group to be ONE tab stop, and
+  // its arrows both move and select — so the roving tab stop is simply the selected segment (the
+  // first when `value` matches nothing), derived rather than held in state so a `value` the consumer
+  // changes from outside can never desync it.
+  const selectedIndex = options.findIndex(option => option.value === value);
+  const activeIndex = selectedIndex >= 0 ? selectedIndex : 0;
+  const segmentRefs = useRef([]);
+  const registerRef = useCallback((index, node) => {
+    segmentRefs.current[index] = node;
+  }, []);
+  const handleKeyDown = event => {
+    if (disabled) return;
+    const next = resolveButtonGroupKeyIndex({
+      key: event.nativeEvent.key,
+      index: activeIndex,
+      count: options.length
+    });
+    const option = next === undefined ? undefined : options[next];
+    if (next === undefined || option === undefined) return;
+    // Arrow/Home/End would otherwise scroll the page out from under the group.
+    event.preventDefault?.();
+    onValueChange(option.value);
+    // The tab stop moves with the selection, so DOM focus has to follow it or the ring is stranded.
+    segmentRefs.current[next]?.focus();
+  };
+  return /*#__PURE__*/_jsx(KeyboardView, {
     testID: testID,
     accessibilityRole: "radiogroup",
+    onKeyDown: handleKeyDown,
     style: [buttonGroupStructure(theme), style],
     children: options.map((option, index) => {
-      const selected = option.value === value;
-      const isFirst = index === 0;
       const isLast = index === lastIndex;
-      const nextSelected = !isLast && options[index + 1]?.value === value;
-      const a11y = resolveButtonGroupSegmentAccessibility({
-        selected,
-        disabled
-      });
-      const edges = resolveButtonGroupSegmentEdgeColors(colors, {
-        selected,
-        nextSelected
-      });
-      const hitSlop = resolveButtonGroupSegmentHitSlop(size, {
-        isFirst,
-        isLast
-      });
-      return /*#__PURE__*/_jsx(Pressable, {
-        testID: testID ? `${testID}-${option.value}` : undefined,
-        accessibilityRole: a11y.accessibilityRole,
-        accessibilityState: a11y.accessibilityState,
-        accessibilityLabel: option.label,
-        disabled: a11y.disabled,
-        onPress: disabled ? undefined : () => onValueChange(option.value),
-        hitSlop: hitSlop,
-        style: ({
-          pressed
-        }) => [buttonGroupSegmentStructure(theme, {
-          size,
-          first: isFirst ? "on" : "off",
-          last: isLast ? "on" : "off"
-        }), {
-          borderTopColor: edges.top,
-          borderBottomColor: edges.bottom,
-          borderLeftColor: edges.left,
-          borderRightColor: edges.right
-        }, selected ? {
-          backgroundColor: colors.selectedFill
-        } : pressed && !disabled && {
-          backgroundColor: colors.pressedFill
-        }, disabled && styles.dimmed],
-        children: /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-            fontSize,
-            color: selected ? colors.onSelectedFill : colors.label
-          }],
-          children: option.label
-        })
+      return /*#__PURE__*/_jsx(ButtonGroupSegment, {
+        label: option.label,
+        value: option.value,
+        selected: option.value === value,
+        nextSelected: !isLast && options[index + 1]?.value === value,
+        isFirst: index === 0,
+        isLast: isLast,
+        index: index,
+        active: index === activeIndex,
+        size: size,
+        disabled: disabled,
+        colors: colors,
+        fontSize: fontSize,
+        onValueChange: onValueChange,
+        registerRef: registerRef,
+        testID: testID ? `${testID}-${option.value}` : undefined
       }, option.value);
     })
   });

package/lib/module/modules/button-group/ButtonGroup.variants.js

@@ -131,13 +131,39 @@ export function resolveButtonGroupSegmentHitSlop(size, position) {
 export function resolveButtonGroupSegmentAccessibility(input) {
   return {
     accessibilityRole: "radio",
-    accessibilityState: {
-      checked: input.selected,
-      disabled: input.disabled
-    },
+    "aria-checked": input.selected,
+    "aria-disabled": input.disabled,
     disabled: input.disabled
   };
 }
+/**
+ * The WAI-ARIA radio-group keyboard contract, resolved purely: arrows move one segment and WRAP (the
+ * arrows both move and select, so there is no "past the end" to fall off), Home/End jump to the ends.
+ * Returns `undefined` for any other key — also how the caller knows not to swallow that keystroke.
+ * Duplicated from `RadioGroup.variants.ts` rather than imported: modules stay isolated.
+ */
+export function resolveButtonGroupKeyIndex(input) {
+  const {
+    key,
+    index,
+    count
+  } = input;
+  if (count <= 0) return undefined;
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowDown":
+      return (index + 1) % count;
+    case "ArrowLeft":
+    case "ArrowUp":
+      return (index - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return undefined;
+  }
+}
 
 /**
  * The container — a clipping rect only. `overflow: hidden` + `borderRadius` clips every segment's

package/lib/module/modules/button-group/MODULE.md

@@ -28,7 +28,7 @@ the container) so it can be selectively omitted where it touches the selected se
 | `disabled` | `boolean` | `false` | Dims every segment and blocks all presses (whole-group only — no per-option `disabled`). |
 | `size` | `sm \| md` | `md` | 32 / 40 dp fixed segment height (matches Button's `sm`/`md`); both reach 44dp via `hitSlop`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
-| `testID` | `string` | — | Container's testID; each segment gets `` `${testID}-${option.value}` `` when set. |
+| `testID` | `string` | — | Container's testID; each segment gets `` `${testID}-${option.value}` ``, and the focused segment a `` `${testID}-${option.value}-focus-ring` `` child, when set. |
 
 No `tone`/`variant` union and no `icon` — this is a single-purpose control, not a closed union of
 appearances. The selected fill is always `accent.solid`; the shared outline/divider is always
@@ -36,10 +36,12 @@ appearances. The selected fill is always `accent.solid`; the shared outline/divi
 
 ## Accessibility contract (WCAG)
 
-- **4.1.2** — `accessibilityRole="radio"` per segment, `accessibilityState={ checked, disabled }`
+- **4.1.2** — `accessibilityRole="radio"` per segment, flat `aria-checked` / `aria-disabled`
   (NOT `role="tab"`/`.selected` — a tab switches content panels, which this control does not do; it
   is the same single-choice value selector shape `RadioGroup` already uses, just drawn as connected
-  segments instead of rows); `accessibilityRole="radiogroup"` on the container.
+  segments instead of rows); `accessibilityRole="radiogroup"` on the container. Flat, never
+  `accessibilityState={{…}}`: react-native-web discards the object form — see
+  `docs/PLATFORM-A11Y-PROPS.md`.
 - **2.5.x target size** — every segment reaches ≥ 44dp on BOTH axes, but not through one flat
   `hitSlop`:
   - **Vertical** — symmetric `hitSlop` on every segment (32dp/40dp visual height + 6/2dp slop = 44dp).
@@ -75,6 +77,21 @@ appearances. The selected fill is always `accent.solid`; the shared outline/divi
   3.24:1, emerald light) — the same mechanism every other solid-fill component in this library
   already relies on. `ButtonGroup.test.ts` measures every actually-rendered boundary pairing (not
   just the easy outline-vs-canvas one) for first/middle/last selected × all 8 brands × both modes.
+- **2.1.1 (keyboard) — roving tabindex.** `accessibilityRole="radio"` per segment means ARIA requires
+  the group to be ONE tab stop whose arrows both move and select. `tabIndex` is `0` on exactly one
+  segment and `-1` on the rest; arrows move and select (wrapping), Home/End jump to the ends
+  (`resolveButtonGroupKeyIndex`), and the handler calls `preventDefault` so the page does not scroll.
+  The active index is **derived** from `value` (falling back to segment 0), never held in state — a
+  `value` the consumer changes from outside can then never desync the tab stop. After an arrow the
+  handler also calls `.focus()` on the newly-selected segment's node, because the tab stop moved and
+  DOM focus has to follow it or the ring is stranded. RN's TypeScript `ViewPropTypes.d.ts` omits
+  `onKeyDown` (its Flow types declare it), so the container `View` is re-typed once, locally.
+- **2.4.7 (focus visible) — the ring is INSET here, unlike Button's.** `buttonGroupStructure` is
+  `overflow: "hidden"` and has to be (that clip is what joins the segment radii into one shape), so
+  Button's ring at negative offsets would be clipped away entirely. This one is drawn at positive
+  offsets inside the segment instead; `ButtonGroup.render.test.tsx` asserts both halves — that the
+  container really clips, and that every ring edge is a positive inset that therefore survives it.
+  Segments also carry `focusable={!disabled}`, since RN's `Pressable` stays focusable when disabled.
 - **2.3.3** — n/a: nothing here animates. Selection is a conditional fill (not a slide or a fade), so
   there is no transition for `useReducedMotion` to gate — same as `RadioGroup`.
 - Disabled segments are exempt from the contrast minimum (WCAG 1.4.3), so the uniform `opacity: 0.5`
@@ -107,10 +124,13 @@ appearances. The selected fill is always `accent.solid`; the shared outline/divi
 
 ## Known gaps
 
-- No visible keyboard-focus ring (Button's `border.focus` ring pattern, WCAG 2.4.7) — left out of v1
-  for the same reason `RadioGroup` left it out: touch is the primary input surface for this control.
-  The same `onFocus`/`onBlur` + `border.focus` pattern from `Button.tsx` would extend cleanly here if
-  a future task needs it for external-keyboard / RN Web use.
+- Arrow keys move the tab stop by moving the SELECTION, so a keyboard user cannot browse the segments
+  without changing the value. That is the WAI-ARIA radio-group pattern, not a defect — but it does
+  mean `onValueChange` fires once per arrow press.
+- The focus ring's contrast is **not** measured per brand the way every other boundary in this module
+  is. It is `border.focus` (a neutral grey, chosen library-wide precisely so a ring survives an
+  accent-filled control) drawn inside the segment, so on a SELECTED segment it sits over
+  `accent.solid` rather than the canvas — the one pairing this module's WCAG suite does not cover.
 
 ### Resolved — the adjacent-pressed-segment boundary (WCAG 1.4.11)
 
@@ -127,3 +147,9 @@ an `if (dark)` branch. Worst case now 3.08:1 (rosewood light); the unselected la
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `ButtonGroupImpl` internally, exported as `ButtonGroup = memo(ButtonGroupImpl)`. The `options.map()` hands every per-row prop to host elements (`Pressable`/`Text`/`View`), never a library child component, so no `useCallback`/`useMemo` was needed.
+
+## 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/card/Card.js

@@ -7,9 +7,9 @@
  * assistive tech and its children carry their own semantics, exactly like a plain `View` would.
  */
 
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { cardStructure, resolveCardVariant } from "./Card.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function CardImpl({
@@ -19,16 +19,19 @@ function CardImpl({
   testID
 }) {
   const theme = useTheme();
-  const variantColors = resolveCardVariant(theme.colors, variant);
-  return /*#__PURE__*/_jsx(View, {
-    testID: testID,
-    style: [cardStructure(theme, {
+  const rootStyle = useMemo(() => {
+    const variantColors = resolveCardVariant(theme.colors, variant);
+    return [cardStructure(theme, {
       variant
     }), {
       backgroundColor: variantColors.background
     }, variantColors.border !== undefined && {
       borderColor: variantColors.border
-    }, variant === "elevated" && theme.elevation.md, style],
+    }, variant === "elevated" && theme.elevation.md, style];
+  }, [theme, variant, style]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: rootStyle,
     children: children
   });
 }

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

@@ -79,3 +79,9 @@ None — no icon, no new theme token, no new core helper needed for this compone
 ## 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,242 @@
+"use strict";
+
+import { memo, useCallback, useMemo, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Svg, { Circle, Line, Path, Rect, Text as SvgText } from "react-native-svg";
+import { useTheme } from "../../theme/hooks.js";
+import { ChartLegend } from "./ChartLegend.js";
+import { BAR_MARKER_MIN_SPAN, BAR_MARKER_RADIUS, categoricalColorAt, defaultNumberFormatter, describeMarker, finiteOrZero, hitSlopFor, 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
+}) {
+  const press = useCallback(() => onPress(categoryIndex, seriesIndex), [onPress, categoryIndex, seriesIndex]);
+  const box = useMemo(() => ({
+    position: "absolute",
+    left: x,
+    top,
+    width,
+    height
+  }), [x, top, width, height]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    hitSlop: hitSlopFor(width, height),
+    onPress: press,
+    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 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);
+  const summary = useMemo(() => summarizeBarChart(data, yAxisFormatter), [data, yAxisFormatter]);
+  const seriesCount = useMemo(() => Math.max(1, data.reduce((max, datum) => Math.max(max, datum.values.length), 0)), [data]);
+  const {
+    bars,
+    ticks,
+    categories
+  } = useMemo(() => {
+    const domain = resolveBarChartDomain(data, stacked);
+    const scale = niceScale(domain.min, domain.max, TICK_COUNT);
+    const layout = resolveBarLayout(data.length, seriesCount, plotWidth, stacked);
+    const zeroY = scaleValue(0, scale.min, scale.max, plotHeight, 0);
+    const resolvedBars = data.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: data.map((datum, categoryIndex) => ({
+        x: Y_AXIS_WIDTH + categoryIndex * layout.bandWidth + layout.bandWidth / 2,
+        label: datum.label
+      }))
+    };
+  }, [data, series, stacked, seriesCount, plotWidth, plotHeight, theme.colors, yAxisFormatter]);
+  const pressBar = useCallback((categoryIndex, seriesIndex) => {
+    const datum = data[categoryIndex];
+    if (datum !== undefined) onPressBar?.(datum, seriesIndex);
+  }, [data, 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]);
+  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
+        }, `press-${bar.categoryIndex}-${bar.seriesIndex}`))
+      })]
+    }), /*#__PURE__*/_jsx(ChartLegend, {
+      entries: legendEntries,
+      glyph: "mark",
+      testID: testID ? `${testID}-legend` : undefined
+    })]
+  });
+});
+//# sourceMappingURL=BarChart.js.map