pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/section/Section.js

@@ -0,0 +1,35 @@
+"use strict";
+
+/**
+ * Section — a labelled content block with a hairline top border, an uppercase muted label, and
+ * ordinary `children` composition below.
+ *
+ * The label is the section's heading, so it carries `accessibilityRole="header"` at level 2 (WCAG
+ * 1.3.1 / 2.4.6) — the same role and level `SectionList`'s own section header renders with.
+ */
+
+import { memo, useMemo } from "react";
+import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
+import { useTheme } from "../../theme/hooks.js";
+import { Text } from "../text/index.js";
+import { sectionContainerStructure } from "./Section.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Section = /*#__PURE__*/memo(function Section({
+  label,
+  children,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rootStyle = useMemo(() => [sectionContainerStructure(theme), style], [theme, style]);
+  return /*#__PURE__*/_jsxs(Reanimated.View, {
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+    testID: testID,
+    style: rootStyle,
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "overline",
+      children: label
+    }), children]
+  });
+});
+//# sourceMappingURL=Section.js.map

package/lib/module/modules/section/Section.variants.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { createThemedTextVariants, createThemedVariants } from "../../core/style/index.js";
+export function resolveSectionColors(colors) {
+  return {
+    border: colors.border.default,
+    label: colors.fg.muted
+  };
+}
+export const sectionContainerStructure = createThemedVariants(theme => ({
+  base: {
+    paddingTop: theme.space[4],
+    paddingBottom: theme.space[2],
+    rowGap: theme.space[2]
+  }
+}));
+export const sectionLabelStructure = createThemedTextVariants(theme => ({
+  base: {
+    fontSize: theme.fontSizes.xs,
+    letterSpacing: 0.6,
+    textTransform: "uppercase"
+  }
+}));
+//# sourceMappingURL=Section.variants.js.map

package/lib/module/modules/section/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/section`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The resolvers stay internal — a consumer configures a Section through its
+ * props, never by importing its internals.
+ */
+
+export { Section } from "./Section.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/section-list/MODULE.md

@@ -0,0 +1,18 @@
+# section-list/
+
+Virtualized sectioned list via `core/list/VirtualSectionList`.
+
+## Accessibility
+
+- **1.3.1 / 2.4.6** — a section header carries `accessibilityRole="header"` and `aria-level={2}`
+  (`HEADING_LEVEL.section`, `core/heading`) — the level `Section`'s own label and `EmptyState`'s
+  title also use, nesting under the screen's `AppBar` `<h1>`. Without a level, `react-native-web`
+  still renders `<h1>` by default, but every other level-2 heading on the same screen would collapse
+  into the same tag as this one.
+
+## Tests
+
+| Test | Covers |
+|------|--------|
+| `__tests__/SectionList.render.test.tsx` | Render: section header + item, heading role + level. |
+| `__tests__/SectionList.dom.test.tsx` | Real DOM (`jest.web.config.js`): the header renders a real `<h2>`. |

package/lib/module/modules/section-list/SectionList.js

@@ -0,0 +1,64 @@
+"use strict";
+
+/**
+ * SectionList — virtualized sections built on `core/list` VirtualSectionList.
+ */
+
+import { memo, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { HEADING_LEVEL, HeadingText } from "../../core/heading/index.js";
+import { VirtualSectionList } from "../../core/list/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { sectionListHeaderStructure } from "./SectionList.variants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function SectionListInner({
+  sections,
+  renderItem,
+  keyExtractor,
+  itemHeight,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const headerStyle = useMemo(() => [sectionListHeaderStructure(theme), theme.fontStyleForWeight(theme.fontWeights.semibold), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.muted,
+    textTransform: "uppercase"
+  }], [theme]);
+
+  // Section identity is the caller's object, so an index lookup stays O(1) per rendered row.
+  const sectionIndices = useMemo(() => new Map(sections.map((section, index) => [section, index])), [sections]);
+  const renderSectionHeader = useCallback(section => /*#__PURE__*/_jsx(SectionHeader, {
+    title: section.title,
+    style: headerStyle
+  }), [headerStyle]);
+  const renderVirtualItem = useCallback(info => renderItem({
+    item: info.item,
+    sectionIndex: sectionIndices.get(info.section) ?? -1,
+    index: info.index
+  }), [renderItem, sectionIndices]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: style,
+    children: /*#__PURE__*/_jsx(VirtualSectionList, {
+      sections: sections,
+      renderSectionHeader: renderSectionHeader,
+      renderItem: renderVirtualItem,
+      keyExtractor: keyExtractor,
+      itemHeight: itemHeight
+    })
+  });
+}
+const SectionHeader = /*#__PURE__*/memo(function SectionHeader({
+  title,
+  style
+}) {
+  return /*#__PURE__*/_jsx(HeadingText, {
+    accessibilityRole: "header",
+    "aria-level": HEADING_LEVEL.section,
+    style: style,
+    children: title
+  });
+});
+export const SectionList = /*#__PURE__*/memo(SectionListInner);
+//# sourceMappingURL=SectionList.js.map

package/lib/module/modules/section-list/SectionList.variants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+export const sectionListHeaderStructure = createThemedVariants(theme => ({
+  base: {
+    paddingHorizontal: theme.space[3],
+    paddingTop: theme.space[3],
+    paddingBottom: theme.space[1]
+  }
+}));
+//# sourceMappingURL=SectionList.variants.js.map

package/lib/module/modules/section-list/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { SectionList } from "./SectionList.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/segmented-control/MODULE.md

@@ -0,0 +1,126 @@
+# segmented-control/ — an inline, iOS-style single-choice picker
+
+`SegmentedControl` switches between 2–5 mutually exclusive options (filters, view modes, date
+ranges) inside one rounded track. The active segment is marked by a pill that slides to its
+measured position — the same `onLayout` + `Animated.Value` mechanism `Tabs`' sliding indicator
+uses — but unlike `Tabs`/`ButtonGroup`, the pill is a **neutral raised surface**, not an
+accent-coloured fill: elevation, not colour, is the selection cue here.
+
+## Files
+
+| File | Role |
+|------|------|
+| `SegmentedControl.tsx` | The component. Track + pill + segment composition, press wiring, a11y wiring, the pill's layout measurement + animation. |
+| `SegmentedControl.variants.ts` | Pure resolvers (`resolveSegmentedControlColors`, `resolveSegmentedControlSegmentAccessibility`, `resolveSegmentedControlSegmentHitSlop`) + the themed structural resolvers (`segmentedControlTrackStructure`, `segmentedControlPillStructure`, `segmentedControlSegmentStructure`). No React, no lucide. |
+| `index.ts` | Public surface: `SegmentedControl`, `SegmentedControlProps`, `SegmentedControlOption`, `SegmentedControlSize`, `IconName` (re-exported from `core/icon`). |
+| `__tests__/SegmentedControl.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
+| `__tests__/SegmentedControl.render.test.tsx` | Render: strip/segment roles, selection state, per-option and whole-group `disabled`, pill animation respects reduced motion. |
+| `__tests__/SegmentedControl.motion.test.tsx` | Motion: reduce-motion snap, the real slide, and the device tier's `durationScale` reaching the pill. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `options` | `{ value: string; label: string; icon?: IconName; disabled?: boolean }[]` | — | Rendered in order. `label` is always required — no icon-only segment, the same rule `Badge` documents. |
+| `value` | `string` | — | The selected option's `value`. |
+| `onChange` | `(value: string) => void` | — | Fires with the pressed segment's `value`. |
+| `size` | `sm \| md` | `md` | 32 / 40 dp fixed segment height; both reach 44dp via vertical-only `hitSlop`. |
+| `fullWidth` | `boolean` | `true` | `true`: segments `flex: 1` (equal width). `false`: segments size to content (padding + `minWidth`). |
+| `disabled` | `boolean` | `false` | Dims and blocks every segment, regardless of a per-option `disabled`. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost (the track `View`), applied exactly once, last. |
+| `testID` | `string` | — | Seeds `${testID}-pill`, `${testID}-${option.value}` and, while focused, `${testID}-${option.value}-focus-ring`. |
+
+No `tone`/`variant` union — the selected fill is always the neutral raised pill and the track is
+always `bg.sunken`; there is nothing for a closed union to resolve, the same reasoning `Tabs`/
+`RadioGroup` document for their own single-purpose shape.
+
+## Accessibility contract (WCAG)
+
+- **4.1.2** — `accessibilityRole="tablist"` on the track, `"tab"` per segment with flat
+  `aria-selected` / `aria-disabled` — `disabled` reflects `disabled` (whole-group) OR that option's
+  own `disabled`, unlike `Tabs`/`ButtonGroup`, which have no per-item disabled at all. Flat, never
+  `accessibilityState={{…}}`: react-native-web discards the object form — see
+  `docs/PLATFORM-A11Y-PROPS.md`.
+- **2.5.x target size** — every size reaches ≥ 44dp vertically via `hitSlop`. Horizontal `hitSlop`
+  is **always zero**: segments render flush (no gap — the sliding pill is the only boundary cue,
+  there is no per-segment border to interrupt), so any horizontal expansion risks the exact overlap
+  `ButtonGroup` documents fixing — React Native never clips `hitSlop` to a sibling's bounds and
+  resolves an overlap to whichever segment renders LATER, not whichever is visually closer to the
+  tap. Rather than tune a per-edge exception, every segment's own rendered `minWidth: 44` carries
+  the width floor instead (the only axis this spec requires — `fullWidth` segments are already well
+  over 44dp in practice).
+- **1.4.3** — the active label (`fg.default`, read on the pill's `bg.surface`) and the inactive
+  label (`fg.muted`, read on the track's `bg.sunken`) are each measured ≥ 4.5:1 for all 8 brands ×
+  both modes, including the inactive label against its own pressed background (`bg.raised`) — not
+  just the resting track.
+- **1.4.11** — deliberately **not** satisfied by colour: `bg.surface` (the pill) against
+  `bg.sunken` (the track) measures as low as 1.08:1, nowhere near 3:1, so this pairing could never
+  clear it on its own. The boundary is instead carried by elevation (`theme.elevation.md`, the
+  identical treatment `Card`'s `elevated` variant uses to differentiate itself with no border
+  either) — a decorative, not textual, distinction — and selection reaches assistive tech
+  independently via `aria-selected`, never by colour alone.
+- **2.4.7** — the focused segment draws a `border.focus` ring
+  (`${testID}-${option.value}-focus-ring`), the same treatment `BottomNavTab` uses. The pill is
+  **not** it: it marks selection and moves only on change. Drawn *inside* the segment's bounds —
+  segments render flush, so a gap-outside ring would spill over its neighbour.
+- **2.3.3** — the pill's movement is two `Animated.Value`s (`x`, `width`) driven off each segment's
+  own `onLayout` measurement, exactly `Tabs`' mechanism. Under reduced motion they're set with
+  `setValue` (an instant snap) instead of a tween — verified in the render tests by spying on
+  `Animated.timing` and asserting it isn't called when reduced motion is on.
+
+## Motion
+
+The slide goes through **`useMotion()`**, not a direct `MOTION_DURATION` import: passing the
+configured constant straight to `Animated.timing` read the CONFIGURED duration, never the one
+resolved against the device tier, so `MOTION_TIER[tier].durationScale` never reached the pill.
+Reduce-motion is `motion.enabled` — no second `useReducedMotion()` call (`core/motion/MODULE.md`
+rule 6). Segment presses use `usePressState` (scale + state-layer overlay). The in-flight slide is stopped on effect cleanup and on unmount.
+
+## Patterns copied from Tabs / ButtonGroup / Card
+
+1. **Structure vs colour split** — track padding/radius, segment height/padding, and the pill's
+   radius are `createThemedVariants` (registered once per `(theme, size)`); colour is resolved by
+   `resolveSegmentedControlColors` from role tokens and applied inline.
+2. **Pure, testable resolvers** in `SegmentedControl.variants.ts` — the WCAG + behaviour contract
+   is unit-tested against the real palettes, never eyeballed.
+3. **Measured sliding pill, keyed by `value`** — identical mechanism to `Tabs`' indicator, so
+   reordering `options` can never apply a stale measurement to the wrong segment.
+4. **Elevation as the selection boundary, not colour** — the same choice `Card`'s `elevated`
+   variant makes; see the 1.4.11 note above.
+
+## Design decisions specific to this module
+
+- **The pill is neutral (`bg.surface`), not accent-coloured.** This is what the spec this module
+  was built against calls for, and it is also the only choice that keeps every segment's label the
+  same colour whether or not it happens to be selected in a given render — no per-brand accent
+  contrast to chase the way `ButtonGroup`'s `accent.solid` fill required a whole edge-colour fix.
+- **Horizontal `hitSlop` is zero, full stop** — no per-edge "outer edge gets slop" exception like
+  `ButtonGroup`'s. Only the vertical target is spec-mandated here; adding the outer-edge case would
+  be unrequested surface area for a control whose segments (especially `fullWidth`) are already
+  comfortably wide.
+- **Per-option `disabled` dims only that segment**; whole-group `disabled` dims the entire track
+  (pill included) via one outer `opacity`. A disabled option that also happens to be `value` simply
+  renders its dim label on top of the pill — not specially handled, and not expected in practice.
+
+## Known gaps
+
+- The pill starts at `x: 0, width: 0` until the active segment's first `onLayout` fires — identical,
+  single-frame gap to `Tabs`' own documented known gap, for the same reason (native layout is
+  asynchronous; RNTL's test renderer never calls `onLayout` on its own, so the render tests fire it
+  manually).
+- No horizontal scrolling for an `options` list too wide for the viewport — v1 assumes 2–5 options
+  fit, the same scope decision `Tabs`/`RadioGroup` made for their own lists.
+
+## Performance
+
+Wrapped in `React.memo`. `handleSegmentLayout` is `useCallback`'d (mirroring `Tabs`' own
+`handleTabLayout`). The `options.map()` renders host `Pressable`/`Text` and the one library child,
+`Icon`, which only receives primitive props — nothing else 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.
+- **Round 5 (Android parity)** — segments were missing `android_ripple` entirely; added, bounded
+  (`borderless: false`), gated off while a segment is disabled.

package/lib/module/modules/segmented-control/SegmentedControl.js

@@ -0,0 +1,222 @@
+"use strict";
+
+/**
+ * SegmentedControl — an inline, iOS-style single-choice control for switching between 2–5 mutually
+ * exclusive options (filters, view modes, date ranges). A rounded track (`bg.sunken`) holds every
+ * segment; the active one is marked by a raised pill (`bg.surface` + `Card`'s own elevation
+ * treatment) that slides to the selected segment's measured position — the identical
+ * measure-via-`onLayout` + `Animated.Value` mechanism `Tabs`' sliding indicator uses, keyed by
+ * `value` so reordering `options` can never apply a stale measurement to the wrong segment.
+ *
+ * Unlike `ButtonGroup`/`Tabs`, the active state is NOT accent-coloured: the pill is a neutral raised
+ * surface, and elevation — not colour — is what marks it, because `bg.surface` vs `bg.sunken` alone
+ * measures nowhere near WCAG 1.4.11's 3:1 (see `SegmentedControl.variants.ts`). Selection reaches
+ * assistive tech independently via `accessibilityState.selected`.
+ *
+ * The pill is a SELECTION marker, never a focus one — keyboard/AT focus draws its own inset ring on
+ * the focused segment (WCAG 2.4.7), the same treatment `BottomNavTab` uses.
+ */
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { Icon } from "../../core/icon/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
+import { resolveSegmentedControlColors, resolveSegmentedControlSegmentAccessibility, resolveSegmentedControlSegmentHitSlop, SEGMENTED_CONTROL_SIZES, segmentedControlFocusRingStructure, segmentedControlPillStructure, segmentedControlSegmentStructure, segmentedControlTrackStructure } from "./SegmentedControl.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
+const SegmentButton = /*#__PURE__*/memo(function SegmentButton({
+  option,
+  selected,
+  segmentDisabled,
+  size,
+  fullWidth,
+  labelColor,
+  hitSlop,
+  focused,
+  onChange,
+  onLayout,
+  onFocus,
+  onBlur,
+  testID
+}) {
+  const theme = useTheme();
+  const press = usePressState(segmentDisabled);
+  const a11y = resolveSegmentedControlSegmentAccessibility({
+    selected,
+    disabled: segmentDisabled
+  });
+  const spec = SEGMENTED_CONTROL_SIZES[size];
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || segmentDisabled) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [segmentDisabled, theme.mode]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: a11y.accessibilityRole,
+    "aria-selected": a11y["aria-selected"],
+    "aria-disabled": a11y["aria-disabled"],
+    accessibilityLabel: option.label,
+    disabled: a11y.disabled,
+    onPress: segmentDisabled ? undefined : () => onChange(option.value),
+    onLayout: event => {
+      press.onLayout(event);
+      onLayout(option.value, event);
+    },
+    onFocus: () => onFocus(option.value),
+    onBlur: () => onBlur(option.value),
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    hitSlop: hitSlop,
+    android_ripple: androidRipple,
+    style: [segmentedControlSegmentStructure(theme, {
+      size,
+      fullWidth: fullWidth ? "on" : "off"
+    }), {
+      overflow: "hidden"
+    }, press.animatedStyle, option.disabled === true && !segmentDisabled && styles.dimmed],
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-focus-ring` : undefined,
+      style: [segmentedControlFocusRingStructure(theme), {
+        borderColor: theme.colors.border.focus
+      }]
+    }), option.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+      name: option.icon,
+      size: spec.iconSize,
+      color: labelColor,
+      strokeWidth: ICON_STROKE
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+        fontSize: spec.fontSize,
+        color: labelColor
+      }],
+      children: option.label
+    })]
+  });
+});
+function SegmentedControlImpl({
+  options,
+  value,
+  onChange,
+  size = "md",
+  fullWidth = true,
+  disabled = false,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const haptics = useHaptics();
+  const colors = resolveSegmentedControlColors(theme.colors);
+  const hitSlop = resolveSegmentedControlSegmentHitSlop(size);
+  const [layouts, setLayouts] = useState({});
+  // Which segment holds keyboard/AT focus. One value rather than per-segment state: only one segment
+  // can be focused, and the segments are rendered inline (a hook per segment is not an option).
+  const [focusedValue, setFocusedValue] = useState(null);
+  const pillX = useAnimatedValue(0);
+  const running = useRef(null);
+  const activeLayout = layouts[value];
+  const handleSegmentLayout = useCallback((optionValue, event) => {
+    const {
+      x,
+      width
+    } = event.nativeEvent.layout;
+    setLayouts(prev => {
+      const existing = prev[optionValue];
+      if (existing !== undefined && existing.x === x && existing.width === width) return prev;
+      return {
+        ...prev,
+        [optionValue]: {
+          x,
+          width
+        }
+      };
+    });
+  }, []);
+  useEffect(() => {
+    if (activeLayout === undefined) return undefined;
+    running.current?.stop();
+    if (!motion.enabled) {
+      pillX.setValue(activeLayout.x);
+      return undefined;
+    }
+    running.current = motion.timing(pillX, activeLayout.x, {
+      easing: "standard"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [activeLayout, motion, pillX]);
+  useEffect(() => () => running.current?.stop(), []);
+  const handleChange = useCallback(optionValue => {
+    haptics.selection();
+    onChange(optionValue);
+  }, [haptics, onChange]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    accessibilityRole: "tablist",
+    style: [segmentedControlTrackStructure(theme), {
+      backgroundColor: floatingBackground(theme, "sm"),
+      ...floatingSurfaceStyle(theme, "sm")
+    }, disabled && styles.dimmed, style],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-pill` : undefined,
+      style: [segmentedControlPillStructure(theme), theme.elevation.md, {
+        backgroundColor: colors.pill,
+        width: activeLayout?.width ?? 0,
+        transform: [{
+          translateX: pillX
+        }]
+      }]
+    }), options.map(option => {
+      const selected = option.value === value;
+      const segmentDisabled = disabled || option.disabled === true;
+      const labelColor = selected ? colors.activeLabel : colors.inactiveLabel;
+      return /*#__PURE__*/_jsx(SegmentButton, {
+        option: option,
+        selected: selected,
+        segmentDisabled: segmentDisabled,
+        size: size,
+        fullWidth: fullWidth,
+        labelColor: labelColor,
+        hitSlop: hitSlop,
+        focused: focusedValue === option.value,
+        onChange: handleChange,
+        onLayout: handleSegmentLayout,
+        onFocus: setFocusedValue,
+        onBlur: v => setFocusedValue(current => current === v ? null : current),
+        testID: testID ? `${testID}-${option.value}` : undefined
+      }, option.value);
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
+  dimmed: {
+    opacity: 0.5
+  }
+});
+
+// A consumer's screen re-renders far more often than SegmentedControl's own props change — memo is
+// near-free insurance for a design-system primitive (see CLAUDE.md "Performance" section).
+export const SegmentedControl = /*#__PURE__*/memo(SegmentedControlImpl);
+//# sourceMappingURL=SegmentedControl.js.map