pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/stepper/Stepper.js

@@ -13,13 +13,16 @@
  * label rather than centered between two circles' worth of connector.
  *
  * Advancing `activeStep` settles the newly-active circle with a small scale (`core/motion`). One
- * shared `Animated.Value` drives it — the connectors change colour, which cannot run on the native
- * driver, so they stay static.
+ * shared value drives it — the connectors change colour, which cannot run on the native driver, so
+ * they stay static.
  */
 
 import { memo, useEffect, useMemo, useRef } from "react";
-import { Animated, StyleSheet, Text, View } from "react-native";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { StyleSheet, Text, View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { resolveStepCircleColors, resolveStepConnectorColor, resolveStepLabelColor, resolveStepState, resolveStepperAccessibility, stepCircleStructure, stepConnectorLineStructure, stepLabelStructure } from "./Stepper.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,13 +45,14 @@ const StepColumn = /*#__PURE__*/memo(function StepColumn({
   const trailingStyle = useMemo(() => [stepConnectorLineStructure(), {
     backgroundColor: trailingConnector
   }], [trailingConnector]);
-  const circleStyle = useMemo(() => [stepCircleStructure(theme), {
+  const circleStatic = useMemo(() => [stepCircleStructure(theme), {
     backgroundColor: circleFill
-  }, advance === null ? null : {
+  }], [theme, circleFill]);
+  const circleMotion = useAnimatedStyle(() => advance === null ? {} : {
     transform: [{
-      scale: advance
+      scale: interpolate(advance.value, [0, 1], [ADVANCE_SCALE, 1])
     }]
-  }], [theme, circleFill, advance]);
+  });
   const numberStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
     fontSize: theme.fontSizes.sm,
     color: circleText
@@ -57,13 +61,15 @@ const StepColumn = /*#__PURE__*/memo(function StepColumn({
     fontSize: theme.fontSizes.xs,
     color: labelColor
   }], [theme, labelColor]);
+  const Circle = advance === null ? View : Reanimated.View;
+  const circleStyle = advance === null ? circleStatic : [circleStatic, circleMotion];
   return /*#__PURE__*/_jsxs(View, {
     style: styles.column,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.connectorRow,
       children: [/*#__PURE__*/_jsx(View, {
         style: leadingStyle
-      }), /*#__PURE__*/_jsx(Animated.View, {
+      }), /*#__PURE__*/_jsx(Circle, {
         testID: testID,
         style: circleStyle,
         children: /*#__PURE__*/_jsx(Text, {
@@ -88,6 +94,8 @@ export const Stepper = /*#__PURE__*/memo(function Stepper({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const a11y = resolveStepperAccessibility({
     steps,
     activeStep
@@ -100,12 +108,11 @@ export const Stepper = /*#__PURE__*/memo(function Stepper({
     running.current?.stop();
     const previous = lastStep.current;
     lastStep.current = activeStep;
-    // `motion` is a dep, so a mid-session reduce-motion change re-runs this — neither that nor the
-    // first render is an advance, and re-pulsing a step the user never left would be a lie.
     if (!motion.enabled || previous === null || previous === activeStep) {
-      advance.setValue(1);
+      advance.value = 1;
     } else {
-      advance.setValue(0);
+      if (!reducedMotion) haptics.selection();
+      advance.value = 0;
       running.current = motion.timing(advance, 1, {
         duration: "fast",
         easing: "decelerate"
@@ -113,12 +120,8 @@ export const Stepper = /*#__PURE__*/memo(function Stepper({
       running.current.start();
     }
     return () => running.current?.stop();
-  }, [activeStep, motion, advance]);
+  }, [activeStep, motion, advance, reducedMotion, haptics]);
   useEffect(() => () => running.current?.stop(), []);
-  const advanceScale = useMemo(() => advance.interpolate({
-    inputRange: [0, 1],
-    outputRange: [ADVANCE_SCALE, 1]
-  }), [advance]);
   const rootStyle = useMemo(() => [styles.row, style], [style]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
@@ -132,8 +135,6 @@ export const Stepper = /*#__PURE__*/memo(function Stepper({
     children: steps.map((step, index) => {
       const state = resolveStepState(index, activeStep);
       const circleColors = resolveStepCircleColors(theme.colors, state);
-      // No segment exists before the first circle or after the last — a transparent spacer keeps
-      // every circle centered in its column via the same left/right flex split as every other one.
       const leadingConnector = index === 0 ? "transparent" : resolveStepConnectorColor(theme.colors, index - 1, activeStep);
       const trailingConnector = index === lastIndex ? "transparent" : resolveStepConnectorColor(theme.colors, index, activeStep);
       return /*#__PURE__*/_jsx(StepColumn, {
@@ -145,7 +146,7 @@ export const Stepper = /*#__PURE__*/memo(function Stepper({
         labelColor: resolveStepLabelColor(theme.colors, state),
         leadingConnector: leadingConnector,
         trailingConnector: trailingConnector,
-        advance: index === activeStep ? advanceScale : null,
+        advance: index === activeStep ? advance : null,
         testID: testID === undefined ? undefined : `${testID}-circle-${index}`
       }, index);
     })

package/lib/module/modules/stepper/Stepper.variants.js

@@ -19,7 +19,9 @@
  * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants, createThemedTextVariants, createVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 /**
  * Visual diameter of a step's numbered circle, in dp. Not a touch target — Stepper is a v1
  * DISPLAY-only component with no `onPress` (no `onStepPress` either — see `StepperProps`), so the

package/lib/module/modules/stepper/StepperProps.js

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

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

@@ -9,9 +9,9 @@ when the composition is yours.
 
 | File | Role |
 |------|------|
-| `Surface.tsx` | The component. Resolves colours, padding and elevation, applies inline over structure, `style` last. |
+| `Surface.tsx` | Resolves colours, padding and elevation; `renderNodeSlot` on children; `style` last. |
 | `Surface.variants.ts` | Pure resolvers (`resolveSurfaceColors`, `resolveSurfacePadding`, `resolveSurfaceElevation`) + `surfaceStructure`. No React. |
-| `index.ts` | Public surface: `Surface`, `SurfaceProps`, and the role/token aliases. |
+| `index.ts` | Public surface: `Surface`, `Box` (an alias for it), `SurfaceProps`, and the role/token aliases. |
 | `__tests__/Surface.test.ts` | Pure: background and border roles map, unset roles are omitted. |
 | `__tests__/Surface.render.test.tsx` | Render: children compose, `testID` forwards, consumer `style` applies last. |
 | `__tests__/SurfaceElevation.test.tsx` | Pure: the `ElevationLevel` → `FloatingLevel` mapping, including the two rungs the platform layer does not implement. |
@@ -25,7 +25,9 @@ when the composition is yours.
 | `radius` | `RadiusToken` | — | A `theme.radii` key. |
 | `elevation` | `ElevationLevel` | — | See below — the union is wider than the platform layer implements. |
 | `padding` | `SpaceToken` | — | A `theme.space` key. |
+| `children` | `ReactNode` | — | Rendered through `renderNodeSlot`, so bare strings inherit `fg.default`. |
 | `style` | `LayoutStyle` | — | Layout only, applied last, exactly once. |
+| `testID` | `string` | — | Forwarded to the root `View`. |
 
 ## `elevation` spans a wider union than the platform implements
 
@@ -46,12 +48,8 @@ ladder, and under-shadowing a surface is the recoverable error. `SURFACE_FLOATIN
 `satisfies Record<Exclude<ElevationLevel, "none">, FloatingLevel>`, so adding a rung to the primitive
 ladder is a type error here until it is mapped — the mapping cannot silently fall through again.
 
-## Known gaps
-
-`elevation="none"` and `elevation="base"` both previously resolved to `lg`, the heaviest shadow in
-the ladder — a ternary whose `else` branch caught every unhandled rung. Asking a surface to be flat
-gave it the most pronounced shadow available. `__tests__/SurfaceElevation.test.tsx` pins each rung so
-the fall-through cannot return.
+`__tests__/SurfaceElevation.test.tsx` pins every rung, so a new `ElevationLevel` cannot silently
+fall through to the heaviest shadow.
 
 ## Performance
 

package/lib/module/modules/surface/Surface.js

@@ -2,6 +2,7 @@
 
 import { memo, useMemo } from "react";
 import { View } from "react-native";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { resolveSurfaceColors, resolveSurfaceElevation, resolveSurfacePadding, surfaceStructure } from "./Surface.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,10 +32,14 @@ function SurfaceImpl({
       padding: pad
     }, shadow, style];
   }, [theme, background, border, radius, elevation, padding, style]);
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     style: rootStyle,
-    children: children
+    children: renderNodeSlot(children, childrenSlotStyle)
   });
 }
 export const Surface = /*#__PURE__*/memo(SurfaceImpl);

package/lib/module/modules/surface/SurfaceProps.js

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

package/lib/module/modules/swipeable-row/MODULE.md

@@ -1,4 +1,4 @@
-# swipeable-row/
+# swipeable-row/ — a row with swipe-to-reveal actions
 
 Swipe-to-reveal row actions via gesture-handler + reanimated.
 
@@ -122,7 +122,8 @@ Known gaps:
 - `SwipeableRow.render.test.tsx` — the accessibility-action contract, the hidden trays, and the tap
   affordance: hidden-from-AT wrapper + `pointerEvents="box-none"`, the single-action direct-press
   path, the multi-action `Menu` path (real rendered items, real dispatch to the pressed action's own
-  `onPress`), and the button's own rendered touch-target size.
+  `onPress`), and the button's own rendered touch-target size. Uses the root Jest Reanimated mock so
+  the composed `Menu` sheet's `interpolate` path is covered without a duplicate mock.
 - `SwipeableRow.motion.test.tsx` — both halves of the reduce-motion contract, with
   `withSpring`/`withTiming` mocked (a shared value written as a plain number proves nothing tweened).
 

package/lib/module/modules/swipeable-row/SwipeableRow.js

@@ -17,8 +17,12 @@
 
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { useMotion } from "../../core/motion/index.js";
 import { usePressState } from "../../core/motion/usePressState.js";
@@ -40,10 +44,21 @@ export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
   testID
 }) {
   const theme = useTheme();
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const translateX = useSharedValue(0);
+  /** `-1` = right tray open, `0` = closed, `1` = left tray open. */
+  const openState = useSharedValue(0);
   const leftWidth = leftActions.length * SWIPE_ACTION_WIDTH;
   const rightWidth = rightActions.length * SWIPE_ACTION_WIDTH;
+  const fireSnapHaptic = useCallback(() => {
+    if (!reducedMotion) haptics.selection();
+  }, [haptics, reducedMotion]);
   const spring = motion.spring("snappy");
   const settleMs = motion.duration("fast");
   const animated = motion.enabled;
@@ -68,8 +83,13 @@ export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
 
     const openLeft = translateX.value > leftWidth / 2;
     const openRight = translateX.value < -rightWidth / 2;
+    const next = openLeft ? 1 : openRight ? -1 : 0;
     settle(openLeft ? leftWidth : openRight ? -rightWidth : 0);
-  }), [leftWidth, rightWidth, settle, translateX]);
+    if (next !== openState.value) {
+      openState.value = next;
+      scheduleOnRN(fireSnapHaptic);
+    }
+  }), [leftWidth, rightWidth, settle, translateX, openState, fireSnapHaptic]);
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{
       translateX: translateX.value
@@ -172,7 +192,7 @@ export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
       gesture: pan,
       children: /*#__PURE__*/_jsx(Animated.View, {
         style: contentStyle,
-        children: children
+        children: renderNodeSlot(children, childrenSlotStyle)
       })
     }), hasActions &&
     /*#__PURE__*/
@@ -183,10 +203,11 @@ export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
     // actions rather than a needed one. See MODULE.md "Tap affordance" for the full reasoning.
     _jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-more-affordance`,
-      pointerEvents: "box-none",
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
-      style: moreAffordanceStyle,
+      style: [moreAffordanceStyle, {
+        pointerEvents: "box-none"
+      }],
       children: orderedActions.length === 1 ? soleActionButton : /*#__PURE__*/_jsx(Menu, {
         testID: testID === undefined ? undefined : `${testID}-more-menu`,
         items: menuItems,
@@ -240,12 +261,14 @@ const SwipeableAction = /*#__PURE__*/memo(function SwipeableAction({
     android_ripple: androidRipple,
     style: [buttonStyle, styles.overflowHidden, press.animatedStyle],
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), focused && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
-      style: focusRingStyle
+      style: [focusRingStyle, {
+        pointerEvents: 'none'
+      }]
     }), action.icon ? /*#__PURE__*/_jsx(Icon, {
       name: action.icon,
       size: ICON_SIZE,

package/lib/module/modules/swipeable-row/SwipeableRowProps.js

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

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

@@ -21,9 +21,12 @@ two colours onto ROLE tokens and leaves sizing/animation to RN.
 | `value` | `boolean` | — | Required. Controlled — RN's own controlled-component contract. |
 | `onValueChange` | `(value: boolean) => void` | — | Required. |
 | `disabled` | `boolean` | `false` | Blocks toggling; RN renders its own native disabled treatment. |
-| `accessibilityLabel` | `string` | — | **Required** — a switch never renders visible text, so this is the only accessible name (mirrors `Button`'s icon-only contract). |
+| `accessibilityLabel` | `string` | — | **Required always** (type-level). `label` defaults from it when omitted. |
+| `label` | `string` | — | Visible label; when set, the row wrapper takes `${testID}-row`. |
+| `description` | `string` | — | Muted helper under `label`. |
+| `errorText` | `string` | — | Danger caption under `label`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once. |
-| `testID` | `string` | — | |
+| `testID` | `string` | — | On the inner `<Switch>`; `${testID}-row` on the row wrapper when `label` is set, so `getByTestId(testID)` resolves to one node. |
 
 No `size` prop — RN's `Switch` is a native primitive with an intrinsic size that doesn't scale
 cleanly. No `variant`/`tone` either: a switch has exactly one on/off visual language, so there is
@@ -78,4 +81,4 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - 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.
 
-Toggle uses `usePressState` and `useHaptics().selection()` on press.
+Toggling fires `useHaptics().selection()` alongside `onValueChange`.

package/lib/module/modules/switch/Switch.js

@@ -7,22 +7,26 @@
  * to RN — which is also why there is no `size` prop.
  */
 
-import { memo, useCallback } from "react";
-import { Switch as RNSwitch } from "react-native";
+import { memo, useCallback, useMemo } from "react";
+import { Switch as RNSwitch, View } from "react-native";
 import { useHaptics } from "../../core/haptics/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { useThemeColors } from "../../theme/hooks.js";
+import { Text } from "../text/index.js";
 import { resolveSwitchAccessibility, resolveSwitchColors, SWITCH_HIT_SLOP } from "./Switch.variants.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Switch = /*#__PURE__*/memo(function Switch({
   value,
   onValueChange,
   disabled = false,
   accessibilityLabel,
+  label,
+  description,
+  errorText,
   style,
   testID
 }) {
-  // `trackColor`/`thumbColor` accept no token object — the same raw-string escape hatch as
-  // `placeholderTextColor` — so colour is resolved via `useThemeColors()`, not `useTheme().colors`.
+  const theme = useTheme();
   const colors = useThemeColors();
   const haptics = useHaptics();
   const {
@@ -30,21 +34,28 @@ export const Switch = /*#__PURE__*/memo(function Switch({
     trackOn,
     thumbColor
   } = resolveSwitchColors(colors);
+  const resolvedLabel = label ?? accessibilityLabel;
   const a11y = resolveSwitchAccessibility({
     value,
     disabled
   });
+  const rowStyle = useMemo(() => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space[3]
+  }), [theme]);
   const handleValueChange = useCallback(next => {
     haptics.selection();
     onValueChange(next);
   }, [haptics, onValueChange]);
-  return /*#__PURE__*/_jsx(RNSwitch, {
+  const control = /*#__PURE__*/_jsx(RNSwitch, {
     testID: testID,
     value: value,
     onValueChange: handleValueChange,
     disabled: disabled,
     accessibilityRole: a11y.accessibilityRole,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: resolvedLabel,
     accessibilityState: a11y.accessibilityState,
     trackColor: {
       false: trackOff,
@@ -53,7 +64,30 @@ export const Switch = /*#__PURE__*/memo(function Switch({
     thumbColor: thumbColor,
     ios_backgroundColor: trackOff,
     hitSlop: SWITCH_HIT_SLOP,
-    style: style
+    style: label === undefined ? style : undefined
+  });
+  if (label === undefined) return control;
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID ? `${testID}-row` : undefined,
+    style: [rowStyle, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        gap: theme.space[1]
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        children: label
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "muted",
+        children: description
+      }) : null, errorText ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "danger",
+        children: errorText
+      }) : null]
+    }), control]
   });
 });
 //# sourceMappingURL=Switch.js.map

package/lib/module/modules/switch/Switch.variants.js

@@ -6,6 +6,7 @@
  * measuring real palettes instead of eyeballing a hex.
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 /**
  * Maps the switch's track + thumb onto ROLE colours — never a hardcoded hex, so it's guaranteed
  * legible in both modes and can never be an off-palette value an app invented.
@@ -17,6 +18,7 @@
  * non-text UI surface), while `bg.canvas` clears ≥3:1 against BOTH `trackOff` and `trackOn` on
  * every brand × mode — see `__tests__/Switch.test.ts`.
  */
+export { MIN_TOUCH_TARGET };
 export function resolveSwitchColors(colors) {
   return {
     trackOff: colors.border.interactive,
@@ -47,9 +49,6 @@ export function resolveSwitchAccessibility(input) {
   };
 }
 
-/** WCAG 2.5.5 (AAA) / HIG floor every interactive control is held to — same constant as `Button`. */
-export const MIN_TOUCH_TARGET = 44;
-
 /**
  * RN's `Switch` has no `size` prop (a native intrinsic control doesn't scale cleanly), so its
  * visual height is a platform constant rather than something this library chooses. 31 is iOS's

package/lib/module/modules/switch/SwitchProps.js

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

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

@@ -1,8 +1,8 @@
 # tabs/ — a single-select strip with a sliding active indicator
 
-`Tabs` renders ONLY the tab strip — content switching is the consumer's job. There is no
-`TabPanel` and it never renders children per tab, mirroring how real design systems split `Tabs`
-from panel content and keeping this component simple and composable.
+`Tabs` renders the tab strip and, optionally, panel content: pass `panels` keyed by tab `value` and
+it renders the active one below the strip. Omit `panels` and it is strip-only — content switching
+stays the consumer's job. There is no separate `TabPanel` component.
 
 ## Files
 
@@ -18,12 +18,14 @@ from panel content and keeping this component simple and composable.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `items` | `{ label: string; value: string; icon?: IconName }[]` | — | Rendered in order. `label` is always required — there is no icon-only tab, so there is no a11y trap to type-enforce against here. |
+| `items` | `{ label: string; value: string; icon?: IconName; count?: number }[]` | — | Rendered in order. `label` is always required — there is no icon-only tab, so there is no a11y trap to type-enforce against here. `count` renders a `Badge` beside the label. |
 | `value` | `string` | — | The active item's `value`. |
 | `onValueChange` | `(value: string) => void` | — | Fires with the pressed tab's `value`. |
 | `size` | `sm \| md \| lg` | `md` | 36 / 44 / 52 dp visual height; `sm` reaches 44 via `hitSlop`. |
+| `panels` | `Partial<Record<string, ReactNode>>` | — | Panel content keyed by tab `value`. Omitted means strip-only. |
+| `lazyPanels` | `boolean` | `true` | A panel mounts on first visit and stays mounted; `false` renders only the active panel. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
-| `testID` | `string` | — | Container's testID; each tab gets `` `${testID}-${item.value}` `` (and `` `-focus-ring` `` under it while focused), and the indicator gets `` `${testID}-indicator` ``, when set. |
+| `testID` | `string` | — | Container's testID; each tab gets `` `${testID}-${item.value}` `` (and `` `-focus-ring` `` under it while focused), the indicator gets `` `${testID}-indicator` `` and the panel host `` `${testID}-panels` ``, when set. |
 
 No per-item `disabled` and no `tone` — every active label + indicator is the same accent role,
 every inactive label is the same neutral `fg.muted`. Same reasoning as `RadioGroup`: a single-
@@ -58,14 +60,13 @@ purpose control has no closed union of appearances to resolve.
   each tab's own `onLayout` measurement. When `useMotion().enabled` is false (reduced motion or the
   global kill switch) they're set with `setValue` (an instant snap) instead of tweening — verified
   in the render tests by spying on `Animated.timing` and asserting it isn't called. Tab presses use
-  `usePressState` (scale + state-layer overlay).
+  `usePressState` (scale + state-layer overlay) and fire `useHaptics().selection()`.
 
 ## Indicator motion (transform-only, native driver)
 
 The indicator is a **1dp-wide bar** (`TABS_INDICATOR_UNIT_WIDTH`) stretched by an animated `scaleX`
-and positioned by an animated `translateX`. It previously animated `left`/`width`, which forces
-`useNativeDriver: false` and a layout pass per frame; only `opacity`/`transform` can run on the
-native driver, so the strip now animates entirely off the JS thread.
+and positioned by an animated `translateX`. Only `opacity`/`transform` run on the native driver, so
+animating `left`/`width` instead would force `useNativeDriver: false` and a layout pass per frame.
 
 Geometry: RN scales around the element's centre, so for a tab measured at `{x, width}` the targets
 are `translateX = x + width / 2 - 0.5` and `scaleX = width`. The structural resolver carries **no**
@@ -108,8 +109,3 @@ private, memo'd `TabStripItem`: the strip passes primitives plus the two stable
 arrays, so a selection change re-renders the two affected tabs rather than the whole strip. The
 indicator's structural style, the root style array and the resolved colours are memoized.
 
-## 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.