pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/stage-progress/StageProgress.js

@@ -8,10 +8,12 @@
 import { memo, useCallback, useMemo, useState } from "react";
 import { Platform, Pressable, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
+import { Icon } from "../../core/icon/index.js";
 import { usePressState } from "../../core/motion/usePressState.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
-import { resolveActiveStageIndex, resolveStageAccessibilityLabel, resolveStageAccessibilityState, resolveStageProgressAccessibility, resolveStageProgressColors, resolveStageState, stageBarStructure, stageFocusRingStructure, stagePillStructure, stageProgressRowStructure, stageStepperCircleStructure, STAGE_PILL_HIT_SLOP, STAGE_STEPPER_HIT_SLOP } from "./StageProgress.variants.js";
+import { Spinner } from "../spinner/index.js";
+import { resolveActiveStageIndex, resolveStageAccessibilityLabel, resolveStageAccessibilityState, resolveStagePillLayout, resolveStageProgressAccessibility, resolveStageProgressColors, resolveStageState, STAGE_PROGRESS_SIZES, stageBarStructure, stageFocusRingStructure, stagePillStructure, stageProgressRowStructure, stageStepperCircleStructure, STAGE_PILL_HIT_SLOP, STAGE_STEPPER_HIT_SLOP } from "./StageProgress.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function fillFor(state, palette) {
@@ -60,9 +62,10 @@ const StagePressable = /*#__PURE__*/memo(function StagePressable({
     onBlur: onBlur,
     style: press.animatedStyle,
     children: [focused && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
       testID: focusRingTestID,
-      style: focusRingStyle
+      style: [focusRingStyle, {
+        pointerEvents: 'none'
+      }]
     }), children]
   });
 });
@@ -70,13 +73,19 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
   stages,
   value,
   variant = "pills",
+  size = "md",
+  colorScheme = "default",
+  isLoading = false,
+  minStageWidth,
   readOnly = true,
   onStagePress,
   style,
   testID
 }) {
   const theme = useTheme();
-  const palette = resolveStageProgressColors(theme.colors);
+  const palette = resolveStageProgressColors(theme.colors, colorScheme);
+  const sizeSpec = STAGE_PROGRESS_SIZES[size];
+  const pillLayout = useMemo(() => resolveStagePillLayout(theme, size, minStageWidth), [theme, size, minStageWidth]);
   const activeIndex = resolveActiveStageIndex(stages, value);
   // Which interactive stage holds keyboard/AT focus — one value, since only one stage can be focused.
   const [focusedStageId, setFocusedStageId] = useState(null);
@@ -113,7 +122,7 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
             }],
             children: /*#__PURE__*/_jsx(Text, {
               style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-                fontSize: theme.fontSizes.sm,
+                fontSize: sizeSpec.labelFontSize,
                 color: textFor(state, palette)
               }],
               children: index + 1
@@ -121,7 +130,7 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
           }), /*#__PURE__*/_jsx(Text, {
             numberOfLines: 1,
             style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-              fontSize: theme.fontSizes.xs,
+              fontSize: sizeSpec.stepLabelFontSize,
               color: palette.upcomingText,
               marginTop: theme.space[1]
             }],
@@ -130,7 +139,7 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
         });
         const a11yLabel = resolveStageAccessibilityLabel(stage.label, state);
         const a11yState = resolveStageAccessibilityState(state, stage.disabled);
-        if (readOnly || stage.disabled) return /*#__PURE__*/_jsx(View, {
+        if (readOnly || stage.disabled || onStagePress === undefined) return /*#__PURE__*/_jsx(View, {
           accessible: true,
           accessibilityLabel: a11yLabel,
           "aria-current": a11yState["aria-current"],
@@ -157,17 +166,21 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
         }, stage.id);
       });
     }
-    return stages.map((stage, index) => {
+    const renderPill = (stage, index, keyPrefix) => {
       const state = resolveStageState(index, activeIndex, true);
+      const showSpinner = isLoading && state === "active";
       const pill = /*#__PURE__*/_jsx(View, {
-        testID: testID ? `${testID}-pill-${stage.id}` : undefined,
-        style: [stagePillStructure(theme), theme.elevation.sm, {
+        testID: testID ? `${testID}-${keyPrefix}-${stage.id}` : undefined,
+        style: [stagePillStructure(theme), pillLayout, theme.elevation.sm, {
           backgroundColor: fillFor(state, palette)
         }],
-        children: /*#__PURE__*/_jsx(Text, {
+        children: showSpinner ? /*#__PURE__*/_jsx(Spinner, {
+          size: "sm",
+          testID: testID ? `${testID}-${keyPrefix}-${stage.id}-loading` : undefined
+        }) : /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
           style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-            fontSize: theme.fontSizes.sm,
+            fontSize: sizeSpec.labelFontSize,
             color: textFor(state, palette)
           }],
           children: stage.label
@@ -175,7 +188,7 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
       });
       const a11yLabel = resolveStageAccessibilityLabel(stage.label, state);
       const a11yState = resolveStageAccessibilityState(state, stage.disabled);
-      if (readOnly || stage.disabled) return /*#__PURE__*/_jsx(View, {
+      if (readOnly || stage.disabled || onStagePress === undefined) return /*#__PURE__*/_jsx(View, {
         accessible: true,
         accessibilityLabel: a11yLabel,
         "aria-current": a11yState["aria-current"],
@@ -200,14 +213,31 @@ export const StageProgress = /*#__PURE__*/memo(function StageProgress({
         onBlur: () => setFocusedStageId(current => current === stage.id ? null : current),
         children: pill
       }, stage.id);
-    });
-  }, [stages, variant, activeIndex, palette, theme, testID, readOnly, handlePress, focusedStageId]);
+    };
+    if (variant === "chevron") {
+      return stages.map((stage, index) => /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: theme.space[1]
+        },
+        children: [renderPill(stage, index, "chevron-pill"), index < stages.length - 1 ? /*#__PURE__*/_jsx(Icon, {
+          name: "chevron-right",
+          size: 16,
+          color: palette.upcomingText,
+          strokeWidth: 2
+        }) : null]
+      }, stage.id));
+    }
+    return stages.map((stage, index) => renderPill(stage, index, "pill"));
+  }, [stages, variant, activeIndex, palette, theme, testID, readOnly, onStagePress, handlePress, focusedStageId, sizeSpec, pillLayout, isLoading]);
 
   // Only the `bar` variant collapses into one announcement — `pills`/`stepper` render real text per
   // stage, and swallowing it behind a container summary would lose the per-stage labels.
   const barA11y = variant === "bar" ? resolveStageProgressAccessibility(stages, activeIndex) : null;
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
+    "aria-busy": isLoading ? true : undefined,
     accessible: barA11y !== null,
     accessibilityRole: barA11y?.accessibilityRole,
     "aria-valuemin": barA11y?.["aria-valuemin"],

package/lib/module/modules/stage-progress/StageProgress.variants.js

@@ -1,10 +1,25 @@
 "use strict";
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
-/** WCAG 2.5.5 target size, the library-wide floor (`Tabs`/`Pagination`/`Reorder` all pin the same 44). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
-
+export { MIN_TOUCH_TARGET };
+export const STAGE_PROGRESS_SIZES = {
+  sm: {
+    labelFontSize: 12,
+    stepLabelFontSize: 10,
+    pillMinWidth: 56
+  },
+  md: {
+    labelFontSize: 14,
+    stepLabelFontSize: 12,
+    pillMinWidth: 72
+  },
+  lg: {
+    labelFontSize: 16,
+    stepLabelFontSize: 14,
+    pillMinWidth: 88
+  }
+};
 /**
  * Floor for the pill's height. The pill sizes itself from padding + its label's font metrics, so
  * without a floor there is no number the touch-target maths can be proven against; pinned here at
@@ -86,7 +101,17 @@ export function resolveStageProgressAccessibility(stages, activeIndex) {
     accessibilityLabel: summary
   };
 }
-export function resolveStageProgressColors(colors) {
+export function resolveStageProgressColors(colors, colorScheme = "default") {
+  if (colorScheme === "neutral") {
+    return {
+      activeFill: colors.fg.default,
+      activeText: colors.bg.surface,
+      completedFill: colors.bg.sunken,
+      completedText: colors.fg.default,
+      upcomingFill: colors.bg.sunken,
+      upcomingText: colors.fg.muted
+    };
+  }
   return {
     activeFill: colors.accent.solid,
     activeText: colors.accent.onSolid,
@@ -104,13 +129,20 @@ export const stageProgressRowStructure = createThemedVariants(theme => ({
     overflow: "hidden"
   }
 }));
+export function resolveStagePillLayout(theme, size, minStageWidth) {
+  const spec = STAGE_PROGRESS_SIZES[size];
+  const padY = size === "sm" ? theme.space[1] : theme.space[2];
+  const padX = size === "lg" ? theme.space[4] : theme.space[3];
+  return {
+    paddingHorizontal: padX,
+    paddingVertical: padY,
+    minWidth: minStageWidth ?? spec.pillMinWidth
+  };
+}
 export const stagePillStructure = createThemedVariants(theme => ({
   base: {
-    paddingHorizontal: theme.space[3],
-    paddingVertical: theme.space[2],
     borderRadius: theme.radii.full,
     borderCurve: "continuous",
-    minWidth: 72,
     minHeight: STAGE_PILL_MIN_HEIGHT,
     alignItems: "center",
     justifyContent: "center"

package/lib/module/modules/stage-progress/StageProgressProps.js

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

package/lib/module/modules/stat-grid/MODULE.md

@@ -0,0 +1,11 @@
+# stat-grid/ — a responsive grid of StatTile metrics
+
+Responsive grid of `StatTile` metrics for dashboards.
+
+## Exports
+
+- `StatGrid` — `items` (`StatGridItem[]`, each `{ label, value }`), `columns` (`2 | 3`, default `2` —
+  cells are `48%` / `31%` wide in a wrapping row), `style` (layout-only, last), `testID` (seeds
+  `${testID}-tile-<index>`)
+- `StatGridItem` — the cell type. A cell renders a plain `StatTile` with label + value only; tone,
+  icon, delta and press are not forwarded.

package/lib/module/modules/stat-grid/StatGrid.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { StatTile } from "../stat-tile/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const StatGrid = /*#__PURE__*/memo(function StatGrid({
+  items,
+  columns = 2,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rootStyle = useMemo(() => ({
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: theme.space[3]
+  }), [theme]);
+  const itemWidth = columns === 3 ? "31%" : "48%";
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: [rootStyle, style],
+    children: items.map((item, index) => /*#__PURE__*/_jsx(StatTile, {
+      label: item.label,
+      value: item.value,
+      style: {
+        width: itemWidth
+      },
+      testID: testID ? `${testID}-tile-${index}` : undefined
+    }, `${item.label}-${index}`))
+  });
+});
+//# sourceMappingURL=StatGrid.js.map

package/lib/module/modules/stat-grid/StatGridProps.js

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

package/lib/module/modules/stat-grid/index.js

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

package/lib/module/modules/stat-tile/MODULE.md

@@ -13,6 +13,7 @@ chip. Tappable when `onPress` is set; shows a `Skeleton` in place of the value w
 | `index.ts` | Public surface: `StatTile`, `StatTileProps`, `StatTileTone`. |
 | `__tests__/StatTile.test.ts` | Pure: WCAG contrast (all brands × modes) + a11y contract. |
 | `__tests__/StatTile.render.test.tsx` | Render: value/label, tones, press, loading skeleton. |
+| `__tests__/StatTile.dom.test.tsx` | Real DOM (`jest.web.config.js`): the flat `aria-busy` reaching the DOM. |
 
 ## Props
 
@@ -24,6 +25,9 @@ chip. Tappable when `onPress` is set; shows a `Skeleton` in place of the value w
 | `tone` | `accent \| neutral \| success \| warning \| danger \| info` | `accent` | Tints the icon chip only (subtle fills); label/value stay fixed `fg` roles. |
 | `onPress` | `() => void` | — | Makes the tile a `button`-role Pressable with a `bg.sunken` pressed fill (measured — `fg.default` fails AA on `bg.hover` on 4 light brands). |
 | `loading` | `boolean` | `false` | Skeleton in place of the value; announced via `aria-busy` (flat, not `accessibilityState` — see Accessibility). |
+| `delta` | `string` | — | Change vs the prior period, e.g. `"+12%"`. Rendered under the value. |
+| `trend` | `up \| down \| flat` | `flat` | Picks the delta glyph; `flat` is neutral. |
+| `goodDirection` | `up \| down` | `up` | Whether an upward `trend` is good (revenue) or bad (churn) — decides the delta's tone. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Also derives `-icon` / `-skeleton` sub-ids. |
 
@@ -33,13 +37,20 @@ chip. Tappable when `onPress` is set; shows a `Skeleton` in place of the value w
   (just `label` while loading, with `aria-busy={true}`). Flat `aria-busy`, not
   `accessibilityState={{ busy }}` — react-native-web 0.21.2 forwards only the flat form to the DOM.
 - Label (`fg.muted`) and value (`fg.default`) are measured ≥ 4.5:1 on `bg.raised` for all
-  8 brands × both modes (`StatTile.test.ts`).
+  9 brands × both modes (`StatTile.test.ts`).
 
 ## Known gaps
 
 - `icon` is a `ReactNode` (per the dashboard build spec), not the library's usual `IconName` —
   chart/KPI icons come from consumer feature sets wider than the shared registry.
 
+## Motion
+
+Press feedback is `usePressMotion` (inert unless `onPress` is set), and a press fires
+`haptics.selection()` unless reduce-motion is on. A changed `value` fades back in via
+`motion.timing` (`fast`/`decelerate`); under `motion.enabled === false` it snaps. The in-flight fade
+is stopped on the next change and on unmount.
+
 ## Performance
 
 Wrapped in `React.memo`; the Pressable style function is `useCallback`'d.

package/lib/module/modules/stat-tile/StatTile.js

@@ -5,16 +5,20 @@
  * dashboard reads as a transition rather than a silent swap; the first render never animates.
  */
 
-import { memo, useEffect, useMemo, useRef } from "react";
-import { Animated, Pressable, Text as RNText, View } from "react-native";
-import { useAnimatedValue, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { Pressable, Text as RNText, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { AnimatedText, useAnimatedValue, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Skeleton } from "../skeleton/index.js";
 import { resolveTextStyle } from "../text/Text.variants.js";
-import { resolveStatTileAccessibility, resolveStatTileColors, statTileBodyStructure, statTileIconStructure, statTileStructure } from "./StatTile.variants.js";
+import { resolveStatTileAccessibility, resolveStatTileColors, resolveStatTileDeltaColor, statTileBodyStructure, statTileIconStructure, statTileStructure } from "./StatTile.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const VALUE_SKELETON_WIDTH = 72;
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
 export const StatTile = /*#__PURE__*/memo(function StatTile({
   label,
   value,
@@ -22,25 +26,37 @@ export const StatTile = /*#__PURE__*/memo(function StatTile({
   tone = "accent",
   onPress,
   loading = false,
+  delta,
+  trend = "flat",
+  goodDirection = "up",
   style,
   testID
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const pressable = onPress !== undefined;
   const press = usePressMotion(!pressable);
+  const handlePress = useCallback(() => {
+    if (!reducedMotion) haptics.selection();
+    onPress?.();
+  }, [haptics, onPress, reducedMotion]);
   const valueOpacity = useAnimatedValue(1);
   const previousValue = useRef(value);
   const valueAnimation = useRef(null);
+  const valueAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: valueOpacity.value
+  }));
   useEffect(() => {
     if (previousValue.current === value) return;
     previousValue.current = value;
     valueAnimation.current?.stop();
     if (!motion.enabled) {
-      valueOpacity.setValue(1);
+      valueOpacity.value = 1;
       return;
     }
-    valueOpacity.setValue(0);
+    valueOpacity.value = 0;
     valueAnimation.current = motion.timing(valueOpacity, 1, {
       duration: "fast",
       easing: "decelerate"
@@ -77,14 +93,19 @@ export const StatTile = /*#__PURE__*/memo(function StatTile({
     weight: "semibold"
   }), [theme]);
   const valueStyle = useMemo(() => [valueTypography, {
-    color: tileColors.valueColor,
-    opacity: valueOpacity
-  }], [valueTypography, tileColors.valueColor, valueOpacity]);
+    color: tileColors.valueColor
+  }], [valueTypography, tileColors.valueColor]);
+  const deltaColor = useMemo(() => resolveStatTileDeltaColor(theme.colors, trend, goodDirection), [theme.colors, trend, goodDirection]);
+  const deltaStyle = useMemo(() => [resolveTextStyle(theme, "caption", {
+    weight: "medium"
+  }), {
+    color: deltaColor
+  }], [theme, deltaColor]);
   const body = /*#__PURE__*/_jsxs(_Fragment, {
     children: [icon !== undefined && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-icon`,
       style: iconStyle,
-      children: icon
+      children: renderNodeSlot(icon, labelStyle)
     }), /*#__PURE__*/_jsxs(View, {
       style: bodyStyle,
       children: [/*#__PURE__*/_jsx(RNText, {
@@ -95,11 +116,15 @@ export const StatTile = /*#__PURE__*/memo(function StatTile({
         width: VALUE_SKELETON_WIDTH,
         height: theme.fontSizes["2xl"],
         testID: testID === undefined ? undefined : `${testID}-skeleton`
-      }) : /*#__PURE__*/_jsx(Animated.Text, {
+      }) : /*#__PURE__*/_jsx(AnimatedText, {
         numberOfLines: 1,
-        style: valueStyle,
+        style: [valueStyle, valueAnimatedStyle],
         children: value
-      })]
+      }), delta !== undefined && !loading ? /*#__PURE__*/_jsx(RNText, {
+        numberOfLines: 1,
+        style: deltaStyle,
+        children: delta
+      }) : null]
     })]
   });
   if (!pressable) {
@@ -119,7 +144,7 @@ export const StatTile = /*#__PURE__*/memo(function StatTile({
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
     "aria-busy": a11y["aria-busy"],
-    onPress: onPress,
+    onPress: handlePress,
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
     style: pressableStyle,

package/lib/module/modules/stat-tile/StatTile.variants.js

@@ -6,6 +6,11 @@
  */
 
 import { createThemedVariants } from "../../core/style/index.js";
+export function resolveStatTileDeltaColor(colors, trend, goodDirection) {
+  if (trend === "flat") return colors.fg.muted;
+  const good = trend === "up" && goodDirection === "up" || trend === "down" && goodDirection === "down";
+  return good ? colors.status.success.solid : colors.status.danger.solid;
+}
 export function resolveStatTileColors(colors, tone) {
   const iconFill = tone === "accent" ? colors.accent.subtle : tone === "neutral" ? colors.bg.sunken : colors.status[tone].subtle;
   return {

package/lib/module/modules/stat-tile/StatTileProps.js

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

package/lib/module/modules/state-block/MODULE.md

@@ -35,6 +35,7 @@
 | `description` | `string` | — | Optional. Muted, centred. |
 | `action` | `{ label; onPress }` | — | Optional retry via `Button` (`tone="accent" variant="solid"`). |
 | `fill` | `boolean` | `false` | `flex: 1` + centred — fills a list/screen slot without a wrapper. |
+| `visible` | `boolean` | `true` | Fades/slides out when `false`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, last. |
 | `testID` | `string` | — | Forwarded to the outermost `View`. |
 
@@ -45,11 +46,16 @@
 - **4.1.3** — both blocks appear WITHOUT moving focus (`Screen` swaps them in for its `children`), so
   appearing is itself the status message: `useAnnounce` speaks `LoadingState`'s `message` and
   `ErrorState`'s `title` + `description` once, on arrival (gated on `visible`, mirroring
-  `EmptyState.resolveEmptyStateAnnouncement`'s shape via the new `resolveErrorStateAnnouncement`). No
+  `EmptyState.resolveEmptyStateAnnouncement`'s shape via `resolveErrorStateAnnouncement`). No
   `accessibilityLiveRegion` alongside it — Android-only, would double-announce there.
-- Consuming apps that render `LoadingState`/`ErrorState` directly (not through `Screen`'s default
-  slots) now get this announcement automatically — no prop change needed on their end.
+- The announcement is unconditional, so apps rendering these blocks directly (not through `Screen`'s
+  default slots) get it too.
 
 ## Performance
 
 Both exports wrapped in `React.memo`.
+
+## Motion
+
+Both blocks mount/unmount through `useEnterExit(visible)` plus Reanimated `FadeInDown.springify()` /
+`FadeOut`, each carrying `ReduceMotion.System`.

package/lib/module/modules/state-block/StateBlock.js

@@ -23,7 +23,7 @@
 
 import { memo, useMemo } from "react";
 import { StyleSheet, Text, View } from "react-native";
-import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
+import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { useEnterExit } from "../../core/motion/index.js";
@@ -57,18 +57,22 @@ export const LoadingState = /*#__PURE__*/memo(function LoadingState({
     color: colors.message
   }], [theme, colors]);
   if (!enterExit.mounted) return null;
-  return /*#__PURE__*/_jsxs(Reanimated.View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
-    testID: testID,
-    style: rootStyle,
-    children: [/*#__PURE__*/_jsx(Spinner, {
-      size: size,
-      tone: tone,
-      testID: testID === undefined ? undefined : `${testID}-spinner`
-    }), message !== undefined && /*#__PURE__*/_jsx(Text, {
-      style: messageStyle,
-      children: message
-    })]
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
+      testID: testID,
+      style: rootStyle,
+      children: [/*#__PURE__*/_jsx(Spinner, {
+        size: size,
+        tone: tone,
+        testID: testID === undefined ? undefined : `${testID}-spinner`
+      }), message !== undefined && /*#__PURE__*/_jsx(Text, {
+        style: messageStyle,
+        children: message
+      })]
+    })
   });
 });
 export const ErrorState = /*#__PURE__*/memo(function ErrorState({
@@ -99,33 +103,37 @@ export const ErrorState = /*#__PURE__*/memo(function ErrorState({
     color: colors.description
   }], [theme, colors]);
   if (!enterExit.mounted) return null;
-  return /*#__PURE__*/_jsxs(Reanimated.View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
-    testID: testID,
-    style: rootStyle,
-    children: [/*#__PURE__*/_jsx(View, {
-      testID: testID === undefined ? undefined : `${testID}-icon`,
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: icon,
-        size: ERROR_STATE_ICON_SIZE,
-        color: colors.icon,
-        strokeWidth: ICON_STROKE
-      })
-    }), /*#__PURE__*/_jsx(Text, {
-      accessibilityRole: "header",
-      style: titleStyle,
-      children: title
-    }), description !== undefined && /*#__PURE__*/_jsx(Text, {
-      style: descriptionStyle,
-      children: description
-    }), action !== undefined && /*#__PURE__*/_jsx(Button, {
-      label: action.label,
-      onPress: action.onPress,
-      tone: "accent",
-      variant: "solid"
-    })]
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
+      testID: testID,
+      style: rootStyle,
+      children: [/*#__PURE__*/_jsx(View, {
+        testID: testID === undefined ? undefined : `${testID}-icon`,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: icon,
+          size: ERROR_STATE_ICON_SIZE,
+          color: colors.icon,
+          strokeWidth: ICON_STROKE
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        accessibilityRole: "header",
+        style: titleStyle,
+        children: title
+      }), description !== undefined && /*#__PURE__*/_jsx(Text, {
+        style: descriptionStyle,
+        children: description
+      }), action !== undefined && /*#__PURE__*/_jsx(Button, {
+        label: action.label,
+        onPress: action.onPress,
+        tone: "accent",
+        variant: "solid"
+      })]
+    })
   });
 });
 const styles = StyleSheet.create({

package/lib/module/modules/state-block/StateBlockProps.js

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

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

@@ -113,3 +113,5 @@ layout lives in `StyleSheet.create`.
 - 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.
+
+A step advance also fires `useHaptics().selection()`, skipped under reduced motion.