pixelize-native-library 1.0.6 → 1.2.0

package/lib/typescript/modules/segmented-control/SegmentedControl.variants.d.ts

@@ -0,0 +1,143 @@
+/**
+ * SegmentedControl's style + behaviour resolution — pure, React/lucide-free, same split as Tabs:
+ *  - STRUCTURE (track padding/radius, segment height/padding, pill radius) lives in the
+ *    `createThemedVariants` resolvers below, registered once per (theme, size) — never rebuilt per
+ *    render.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveSegmentedControlColors`), never a raw
+ *    hex: the track is always `bg.sunken`, the pill is always `bg.surface` (a neutral raised
+ *    surface, NOT the accent role — unlike `ButtonGroup`/`Tabs`, selection here is conveyed by
+ *    elevation + position, not by brand colour).
+ *  - `resolveSegmentedControlSegmentAccessibility` derives the per-segment a11y surface purely, so
+ *    the "selected"/"disabled" contract is unit-testable without rendering React Native.
+ */
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type SegmentedControlSize = "sm" | "md";
+/** Same floor as Button/Input/Tabs/ButtonGroup — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported:
+ * modules stay isolated. */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface SegmentedControlSizeSpec {
+    /** Visual height in dp, per segment (fixed, not a minimum — the hitSlop math depends on it). */
+    readonly height: number;
+    /** Label size, on the theme's `fontSizes` scale. */
+    readonly fontSize: number;
+    /** Icon glyph size in dp. */
+    readonly iconSize: number;
+    /** Symmetric VERTICAL touch expansion so `height + 2·hitSlop ≥ 44`. Never applied horizontally —
+     *  see `resolveSegmentedControlSegmentHitSlop`. */
+    readonly hitSlop: number;
+}
+export declare const SEGMENTED_CONTROL_SIZES: {
+    readonly sm: {
+        readonly height: 32;
+        readonly fontSize: 14;
+        readonly iconSize: 16;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly height: 40;
+        readonly fontSize: 16;
+        readonly iconSize: 18;
+        readonly hitSlop: number;
+    };
+};
+export interface SegmentedControlColors {
+    /** The track fill every unselected segment sits directly on. */
+    readonly track: string;
+    /** The active segment's pill fill — a neutral raised surface (elevation is the selection cue, not
+     *  a colour change), applied together with `theme.elevation.md` by the component. */
+    readonly pill: string;
+    /** The active segment's label, read on `pill`. */
+    readonly activeLabel: string;
+    /** Every inactive segment's label, read on `track`. */
+    readonly inactiveLabel: string;
+    /** A pressed, unselected segment's background — never applied to the selected segment (its own
+     *  pill fill already reads as the "active" cue). */
+    readonly pressedSegment: string;
+}
+/**
+ * Maps the control's fixed visual roles onto ROLE colours — never a hardcoded hex. There is no
+ * per-segment `tone`: like `RadioGroup`/`Tabs`, this is pure indirection, not a union to resolve.
+ *
+ * The pill deliberately reads `bg.surface`, NOT an accent fill: `bg.surface` vs `bg.sunken` alone
+ * measures as low as 1.08:1 (nowhere near WCAG 1.4.11's 3:1 — see `SegmentedControl.test.ts`), so
+ * the boundary between the pill and the track is carried by elevation (`theme.elevation.md`, the
+ * same treatment `Card`'s `elevated` variant uses to differentiate itself with no border either),
+ * not by a colour contrast this pairing could never clear on its own. Selection is additionally
+ * conveyed to assistive tech via `accessibilityState.selected`, never by colour alone.
+ */
+export declare function resolveSegmentedControlColors(colors: RoleColors): SegmentedControlColors;
+export interface SegmentedControlSegmentAccessibilityInput {
+    readonly selected: boolean;
+    readonly disabled: boolean;
+}
+export interface SegmentedControlSegmentAccessibilityProps {
+    readonly accessibilityRole: "tab";
+    /** Flat, never `accessibilityState`: react-native-web discards the object form (see
+     *  `docs/PLATFORM-A11Y-PROPS.md`). Quoted keys so the compiler still checks the prop names. */
+    readonly "aria-selected": boolean;
+    readonly "aria-disabled": boolean;
+    /** The `Pressable` disabled prop — blocks touches without relying on `onPress` gating alone. */
+    readonly disabled: boolean;
+}
+export declare function resolveSegmentedControlSegmentAccessibility(input: SegmentedControlSegmentAccessibilityInput): SegmentedControlSegmentAccessibilityProps;
+export interface SegmentedControlHitSlop {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+}
+/**
+ * Vertical-only touch expansion. Segments render flush against each other inside the track (no gap
+ * — the sliding pill is the only boundary cue, there is no per-segment border to interrupt), so ANY
+ * horizontal hitSlop would risk 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 (`
+ * ButtonGroup`'s fix), horizontal hitSlop is zero everywhere and every segment's own rendered
+ * `minWidth` (see `segmentedControlSegmentStructure`) carries the width floor instead — the only
+ * touch-target axis this spec requires (`fullWidth` segments are already well over 44dp in
+ * practice; `minWidth` protects the narrow-content case).
+ */
+export declare function resolveSegmentedControlSegmentHitSlop(size: SegmentedControlSize): SegmentedControlHitSlop;
+/** The outer track — padded so the pill has room to sit inset from the track's own edge. */
+export declare const segmentedControlTrackStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The pill. `theme.radii.sm` — one step down from the track's `theme.radii.base` — nests cleanly
+ * inside the track's own `space[1]` inset, the same "inner radius ≈ outer radius − inset" geometry
+ * a nested rounded rect needs to read as concentric rather than mismatched. `top`/`bottom` pin it to
+ * the row's own height (set by the segments, its flow siblings); `left`/`width` are driven by
+ * `Animated.Value`s in `SegmentedControl.tsx`, keyed off each segment's own `onLayout` measurement —
+ * same mechanism as `Tabs`' sliding indicator.
+ */
+export declare const segmentedControlPillStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The keyboard/AT focus ring drawn over one segment's own bounds — the same inset treatment
+ * `bottomNavFocusRingStructure` uses. Segments render flush against each other inside the track, so
+ * an outset ring would spill over its neighbour; and the sliding pill marks SELECTION, never focus.
+ * Its colour is applied inline over this, never hardcoded here.
+ */
+export declare const segmentedControlFocusRingStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * One segment's layout. `minWidth` is the real touch-target floor for the WIDTH axis (see
+ * `resolveSegmentedControlSegmentHitSlop` — horizontal hitSlop can't safely carry it here). `height`
+ * is fixed (not a minimum) so the vertical hitSlop math holds against what actually renders, and so
+ * the pill (pinned to the row's height via `top: 0, bottom: 0`) matches exactly.
+ */
+export declare const segmentedControlSegmentStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+            paddingHorizontal: 8;
+        };
+        md: {
+            height: 40;
+            paddingHorizontal: 12;
+        };
+    };
+    fullWidth: {
+        on: {
+            flex: number;
+        };
+        off: {};
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=SegmentedControl.variants.d.ts.map

package/lib/typescript/modules/segmented-control/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Public surface of `pixelize-native-library/segmented-control`. Value exports and type exports are
+ * split for `verbatimModuleSyntax`. The resolvers (`resolveSegmentedControlColors`,
+ * `SEGMENTED_CONTROL_SIZES`, …) stay internal — a consumer configures a SegmentedControl through
+ * its props, never by importing its internals.
+ */
+export { SegmentedControl } from "./SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlOption } from "./SegmentedControl";
+export type { SegmentedControlSize } from "./SegmentedControl.variants";
+export type { IconName } from "../../core/icon";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/select/Select.d.ts

@@ -1,19 +1,13 @@
 /**
- * Select — a trigger styled like an Input box (same size/border/focus-ring conventions) that opens
- * an option list in React Native's OWN `Modal`. Imported directly from `"react-native"` here on
- * purpose: this module must never depend on the library's own `Modal` COMPONENT (its rendered
- * output/behaviour) — Select still owns its option list's markup outright.
- *
- * The one deliberate exception is the web portal mechanism: `ModalPortalContext`/`renderWebPortal`
- * are a plain context + a stateless helper with no React-tree footprint of their own (not the
- * `Modal` component), so Select reads the same ones `Modal.tsx` reads to stay consistent once a
- * consumer opts in via `ModalPortalProvider` — see `../modal/ModalPortalContext.ts`.
+ * Select — a trigger styled like an Input box that opens an option list in React Native's OWN `Modal`.
  */
+import type { ReactNode } from "react";
 import type { LayoutStyle } from "../../core/style";
 import type { SelectSize } from "./Select.variants";
 export interface SelectOption {
     readonly label: string;
     readonly value: string;
+    readonly leading?: ReactNode;
 }
 export interface SelectProps {
     options: SelectOption[];
@@ -23,7 +17,6 @@ export interface SelectProps {
     label?: string;
     disabled?: boolean;
     size?: SelectSize;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     containerStyle?: LayoutStyle;
     testID?: string;
 }

package/lib/typescript/modules/select/Select.variants.d.ts

@@ -10,8 +10,16 @@
  * Free of React and of any `Modal`/`Pressable` import, so the WCAG + behaviour tests import it
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { AccessibilityRole } from "react-native";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type SelectSize = "sm" | "md" | "lg";
+/**
+ * The option list's container role. RN 0.86's role unions have no `listbox` — both `Role` and
+ * `AccessibilityRole` jump `list` → `listitem` → `log` — so the widening lives on this ONE audited
+ * line instead of a cast at the call site. It is a type gap, not a runtime one: `react-native-web`
+ * emits the string as the DOM `role` verbatim, and native maps roles it doesn't know to nothing.
+ */
+export declare const SELECT_LISTBOX_ROLE: AccessibilityRole;
 /** Same touch-target floor as Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
 export interface SelectSizeSpec {
@@ -78,6 +86,10 @@ export interface SelectRowColors {
     /** "check" glyph colour, only rendered when `selected`. Same value as `text`: if the label
      *  already clears the stricter 4.5:1 text minimum on `background`, it clears the icon's 3:1 too. */
     readonly icon: string;
+    /** Row background while pressed — `bg.sunken`, not `bg.hover`: same class of fix `Button`'s
+     *  "neutral" tone and `RadioGroup`/`Accordion` document (the saturated `hover` mid-tone risks
+     *  dropping `text` below 4.5:1 on brand-tinted palettes; the pale `sunken` tint doesn't). */
+    readonly pressedRow: string;
 }
 export declare function resolveSelectRowColors(colors: RoleColors): SelectRowColors;
 export interface SelectAccessibilityInput {
@@ -86,10 +98,10 @@ export interface SelectAccessibilityInput {
 }
 export interface SelectAccessibilityProps {
     readonly accessibilityRole: "button";
-    readonly accessibilityState: {
-        readonly disabled: boolean;
-        readonly expanded: boolean;
-    };
+    /** Flat, never `accessibilityState`: react-native-web discards the object form (see
+     *  `docs/PLATFORM-A11Y-PROPS.md`). Quoted keys so the compiler still checks the prop names. */
+    readonly "aria-disabled": boolean;
+    readonly "aria-expanded": boolean;
     /** The `Pressable disabled` prop — blocks opening the menu while disabled. */
     readonly disabled: boolean;
 }
@@ -119,9 +131,19 @@ export declare const selectTriggerStructure: import("../../core/style").ThemedVa
         };
     };
 }, import("react-native").ViewStyle>;
+/** The trigger's value cluster — an option's `leading` adornment + the displayed label — kept in
+ *  one shrinkable row so the chevron stays pinned right by the trigger's own space-between. */
+export declare const selectTriggerValueStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /** The full-screen overlay the sheet centers in. `box-none` (applied by the component) lets a tap
  *  on its empty padding fall through to the backdrop press underneath. */
 export declare const selectOverlayStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const selectSheetStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const selectRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * `SelectOption.leading` is an arbitrary consumer node, so an unconstrained one could make a row
+ * taller than `SELECT_ROW_MIN_HEIGHT` and silently falsify the list's `getItemLayout` offsets. This
+ * slot bounds it to the row's own glyph box instead, which is what keeps the uniform-height fast
+ * path true by construction (`core/MODULE.md`: `itemHeight` is for uniform rows only).
+ */
+export declare const selectRowLeadingStructure: import("../../core/style").ThemedVariantResolver<object, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 //# sourceMappingURL=Select.variants.d.ts.map

package/lib/typescript/modules/skeleton/Skeleton.d.ts

@@ -6,6 +6,11 @@
  * (see `resolveSkeletonColors`), pulsing on an `Animated` opacity loop. Purely decorative by default
  * (see `Skeleton.variants.ts` →
  * `resolveSkeletonAccessibility`, the same "decorative unless labelled" contract as `Avatar`).
+ *
+ * The shimmer is gated on `motion.decorative`, so it runs on high-tier devices only. A skeleton is
+ * usually rendered one-per-row across a whole loading list, and a per-row loop is the single most
+ * expensive thing a placeholder can do — low/mid tiers and reduce-motion get the static fill. Even
+ * on high tier the loop is shaped so it costs zero JS per iteration: see the effect below.
  */
 import type { LayoutStyle } from "../../core/style";
 import type { SkeletonShape } from "./Skeleton.variants";

package/lib/typescript/modules/skeleton/Skeleton.variants.d.ts

@@ -21,7 +21,7 @@
  * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
  * only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type SkeletonShape = "rect" | "circle" | "text";
 export interface SkeletonSizeSpec {
     readonly width: number;
@@ -74,23 +74,24 @@ export interface SkeletonAccessibilityProps {
     readonly accessibilityRole: "progressbar" | undefined;
     readonly accessibilityLabel: string | undefined;
     /** Indeterminate progress is still busy — announced only on the labelled (exposed) path. */
-    readonly accessibilityState: {
-        readonly busy: boolean;
-    } | undefined;
+    readonly "aria-busy": boolean | undefined;
     /** Hides the whole element from assistive tech when decorative. */
-    readonly accessibilityElementsHidden: boolean;
-    readonly importantForAccessibility: "auto" | "no-hide-descendants";
+    readonly "aria-hidden": true | undefined;
 }
 /**
  * Derives the accessibility surface once, purely, so the "decorative unless labelled" contract is
  * testable without a renderer (same shape as `resolveAvatarAccessibility`):
  *  - no label → the placeholder stands in for content that hasn't rendered yet and carries no
- *    meaning of its own, so it is hidden from assistive tech (`accessibilityElementsHidden` on
- *    iOS + `importantForAccessibility="no-hide-descendants"` on Android) rather than read as a
- *    bare, unexplained box.
+ *    meaning of its own, so it is hidden from assistive tech rather than read as a bare,
+ *    unexplained box.
  *  - a label (e.g. `"Loading"`) → exposed as one `"progressbar"`-role element carrying it, with
  *    `busy: true` (WCAG 1.4.1 — the loading state is announced, not left to be inferred from a box
  *    appearing on screen).
+ *
+ * `aria-hidden` covers BOTH platforms in one prop: RN maps it onto `accessibilityElementsHidden`
+ * (iOS) + `importantForAccessibility="no-hide-descendants"` (Android), and react-native-web forwards
+ * it to the DOM — where those two native props reach nothing, so an unlabelled skeleton used to stay
+ * fully exposed to a screen reader on web.
  */
 export declare function resolveSkeletonAccessibility(input: SkeletonAccessibilityInput): SkeletonAccessibilityProps;
 /**

package/lib/typescript/modules/slider/Slider.variants.d.ts

@@ -13,7 +13,7 @@
  * Free of `lucide` and of any React tree, so the WCAG + math tests import this directly (mocking
  * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type SliderSize = "sm" | "md";
 /** Same touch-target floor as every other interactive control in this library (44dp, WCAG 2.5.5 AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
@@ -95,6 +95,25 @@ export declare function resolveSliderPositionValue(input: SliderPositionInput):
  * `increment`/`decrement` accessibility actions (WCAG 2.5.7's required non-drag alternative).
  */
 export declare function stepSliderValue(value: number, direction: 1 | -1, min: number, max: number, step: number): number;
+/** How much of the range PageUp/PageDown cover, before rounding onto a whole number of `step`s. */
+export declare const SLIDER_PAGE_FRACTION = 0.1;
+/**
+ * The coarse PageUp/PageDown amount — the whole number of `step`s nearest a tenth of the range,
+ * never fewer than one, so a 0–5 slider still pages by `step` instead of rounding down to zero.
+ */
+export declare function sliderPageStep(min: number, max: number, step: number): number;
+export interface SliderKeyInput {
+    readonly value: number;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+}
+/**
+ * The WAI-ARIA slider keyboard contract, resolved purely: Left/Down decrement and Right/Up increment
+ * by `step`, Home/End jump to the bounds, PageDown/PageUp move by `sliderPageStep`. Returns
+ * `undefined` for any other key, which is also how the caller knows not to swallow that keystroke.
+ */
+export declare function resolveSliderKeyValue(key: string, input: SliderKeyInput): number | undefined;
 export interface SliderTrackColors {
     /** The full-width resting track. */
     readonly track: string;
@@ -140,25 +159,27 @@ export interface SliderAccessibilityInput {
 }
 export interface SliderAccessibilityProps {
     readonly accessibilityRole: "adjustable";
-    readonly accessibilityValue: {
-        readonly min: number;
-        readonly max: number;
-        readonly now: number;
-    };
-    readonly accessibilityState: {
-        readonly disabled: boolean;
-    };
+    readonly "aria-valuemin": number;
+    readonly "aria-valuemax": number;
+    readonly "aria-valuenow": number;
+    readonly "aria-disabled": boolean;
     readonly accessibilityActions: ReadonlyArray<{
         readonly name: "increment" | "decrement";
     }>;
 }
 /**
  * Derives the accessibility surface once, purely, so the contract is testable without a renderer.
- * `now` is clamped onto `[min, max]` — a screen reader must never announce a value the track itself
- * couldn't render. `accessibilityActions` declares BOTH `increment`/`decrement` explicitly: iOS's
- * `adjustable` trait already offers these via the two-finger swipe-up/down gesture without them
- * declared, but Android TalkBack has no native "adjustable" gesture and only surfaces custom actions
- * that are declared here (WCAG 2.5.7 — a drag-only slider has no non-pointer alternative otherwise).
+ * `aria-valuenow` is clamped onto `[min, max]` — a screen reader must never announce a value the
+ * track itself couldn't render. `accessibilityActions` declares BOTH `increment`/`decrement`
+ * explicitly: iOS's `adjustable` trait already offers these via the two-finger swipe-up/down gesture
+ * without them declared, but Android TalkBack has no native "adjustable" gesture and only surfaces
+ * custom actions that are declared here (WCAG 2.5.7 — a drag-only slider has no non-pointer
+ * alternative otherwise).
+ *
+ * FLAT `aria-*`, not `accessibilityValue={{…}}`/`accessibilityState={{…}}`: react-native-web 0.21
+ * drops both objects, so on web the slider announced its role and NO position at all. The host here
+ * is a `View`, which merges every flat prop into the object form natively (`View.js`), so one flat
+ * form is right on both platforms.
  */
 export declare function resolveSliderAccessibility(input: SliderAccessibilityInput): SliderAccessibilityProps;
 /**

package/lib/typescript/modules/spinner/Spinner.variants.d.ts

@@ -3,7 +3,7 @@
  * lucide: same split as `Button.variants.ts`, so the WCAG + behaviour tests import these directly,
  * measuring real palettes instead of eyeballing a hex.
  */
-import type { RoleColors } from "../../theme";
+import type { RoleColors } from "../../theme/hooks";
 export type SpinnerSize = "sm" | "md" | "lg";
 export type SpinnerTone = "accent" | "neutral";
 export interface SpinnerSizeSpec {
@@ -50,9 +50,7 @@ export interface SpinnerAccessibilityInput {
 export interface SpinnerAccessibilityProps {
     readonly accessibilityRole: "progressbar";
     readonly accessibilityLabel: string;
-    readonly accessibilityState: {
-        readonly busy: true;
-    };
+    readonly "aria-busy": true;
 }
 /** A Spinner renders no visible text, so this is what AT announces absent an explicit override. */
 export declare const DEFAULT_SPINNER_LABEL = "Loading";
@@ -61,6 +59,10 @@ export declare const DEFAULT_SPINNER_LABEL = "Loading";
  * renderer. There is no interaction to gate (a Spinner is never pressable) — unlike
  * `resolveButtonAccessibility`, the only decision here is the label fallback; `busy` is always true
  * because a mounted Spinner, by definition, means work is in progress.
+ *
+ * Flat `aria-busy` rather than `accessibilityState={{ busy }}`: RN's `View` folds the flat prop back
+ * into `accessibilityState`, while react-native-web forwards only the flat form — the object reaches
+ * nothing at all on web, leaving the spinner announcing a role with no state.
  */
 export declare function resolveSpinnerAccessibility(input: SpinnerAccessibilityInput): SpinnerAccessibilityProps;
 /**

package/lib/typescript/modules/stage-progress/StageProgress.d.ts

@@ -0,0 +1,18 @@
+/**
+ * StageProgress — horizontal pipeline stages (pills, bar, or stepper). Read-only by default;
+ * optional `onStagePress` when not `readOnly`.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { StageProgressStage, StageProgressVariant } from "./StageProgress.variants";
+export interface StageProgressProps {
+    stages: readonly StageProgressStage[];
+    value: string;
+    variant?: StageProgressVariant;
+    readOnly?: boolean;
+    onStagePress?: (stageId: string) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const StageProgress: import("react").NamedExoticComponent<StageProgressProps>;
+//# sourceMappingURL=StageProgress.d.ts.map

package/lib/typescript/modules/stage-progress/StageProgress.variants.d.ts

@@ -0,0 +1,98 @@
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type StageProgressVariant = "pills" | "bar" | "stepper";
+export type StageState = "completed" | "active" | "upcoming";
+export interface StageProgressStage {
+    readonly id: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+}
+/** WCAG 2.5.5 target size, the library-wide floor (`Tabs`/`Pagination`/`Reorder` all pin the same 44). */
+export declare const MIN_TOUCH_TARGET = 44;
+/**
+ * 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
+ * the value the natural layout already exceeds (2×`space[2]` + a 14dp line + two hairlines ≈ 35dp),
+ * so it changes no pixel and makes the `hitSlop` guarantee below arithmetic rather than a hope.
+ */
+export declare const STAGE_PILL_MIN_HEIGHT = 32;
+/** Stepper circle diameter. Shared by the structure resolver and the touch-target maths. */
+export declare const STAGE_STEPPER_CIRCLE = 28;
+/**
+ * Vertical-only `hitSlop` for the two pressable stage shapes. Both are wider than 44dp already
+ * (`minWidth` 72 / 64), so widening horizontally would only make adjacent stages' targets overlap.
+ * Height is the short axis, so it is padded to the floor the `Tabs`/`CopyButton` `slopFor` idiom
+ * defines. Applied only where a stage is actually pressable — `readOnly` stages render no
+ * `Pressable` and need no target at all.
+ */
+export declare const STAGE_PILL_HIT_SLOP: {
+    readonly top: number;
+    readonly bottom: number;
+};
+export declare const STAGE_STEPPER_HIT_SLOP: {
+    readonly top: number;
+    readonly bottom: number;
+};
+export declare function resolveStageState(index: number, activeIndex: number, markCompleted: boolean): StageState;
+export declare function resolveActiveStageIndex(stages: readonly StageProgressStage[], value: string): number;
+/**
+ * The stage's spoken name. The suffix is the whole point (WCAG 1.4.1): fill colour is the ONLY
+ * thing that separates a completed stage from an upcoming one on screen, so without it a screen
+ * reader hears four identical labels and learns nothing about progress. The state props alone
+ * cannot carry it — there is no "completed" flag, only `selected`, which is the active stage.
+ */
+export declare function resolveStageAccessibilityLabel(label: string, state: StageState): string;
+export interface StageAccessibilityState {
+    readonly "aria-selected": boolean;
+    readonly "aria-disabled": boolean;
+}
+/**
+ * Flat `aria-*` rather than `accessibilityState={{…}}`: RN's `View`/`Pressable` fold the flat props
+ * back into that object, while react-native-web forwards only the flat form — the object reaches
+ * nothing at all on web.
+ */
+export declare function resolveStageAccessibilityState(state: StageState, disabled: boolean | undefined): StageAccessibilityState;
+export interface StageProgressAccessibilityProps {
+    readonly accessibilityRole: "progressbar";
+    readonly "aria-valuemin": 0;
+    readonly "aria-valuemax": number;
+    readonly "aria-valuenow": number;
+    readonly accessibilityLabel: string;
+}
+/**
+ * ONE summary announcement for the whole track — "Stage 2 of 4: Review" — the same collapsing idiom
+ * (and the same shape) `resolveStepperAccessibility` uses. This is what the `bar` variant depends
+ * on: it renders nothing but coloured rectangles, with no text anywhere, so without a label on the
+ * container a screen-reader user gets literally nothing from the component.
+ */
+export declare function resolveStageProgressAccessibility(stages: readonly StageProgressStage[], activeIndex: number): StageProgressAccessibilityProps;
+export interface StageProgressColors {
+    readonly activeFill: string;
+    readonly activeText: string;
+    readonly completedFill: string;
+    readonly completedText: string;
+    readonly upcomingFill: string;
+    readonly upcomingText: string;
+    readonly track: string;
+}
+export declare function resolveStageProgressColors(colors: RoleColors): StageProgressColors;
+export declare const stageProgressRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const stagePillStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The keyboard/AT focus ring for an interactive stage, drawn INSIDE the stage's own bounds:
+ * `stageProgressRowStructure` clips to `overflow: "hidden"` and spaces stages a single space step
+ * apart, so the gap-outside ring `Button`/`CopyButton` use would be cut off on the first and last
+ * stage and overlap its neighbour everywhere else. Its colour is applied inline over this.
+ */
+export declare const stageFocusRingStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    variant: {
+        pill: {
+            borderRadius: 9999;
+        };
+        stepper: {
+            borderRadius: 8;
+        };
+    };
+}, import("react-native").ViewStyle>;
+export declare const stageBarStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const stageStepperCircleStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=StageProgress.variants.d.ts.map

package/lib/typescript/modules/stage-progress/index.d.ts

@@ -0,0 +1,4 @@
+export { StageProgress } from "./StageProgress";
+export type { StageProgressProps } from "./StageProgress";
+export type { StageProgressStage, StageProgressVariant, StageState, } from "./StageProgress.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/stat-tile/StatTile.d.ts

@@ -0,0 +1,20 @@
+/**
+ * StatTile — a labelled metric. The value fades back in whenever it changes, so a live-updating
+ * dashboard reads as a transition rather than a silent swap; the first render never animates.
+ */
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+import type { StatTileTone } from "./StatTile.variants";
+export interface StatTileProps {
+    label: string;
+    value: string | number;
+    icon?: ReactNode;
+    tone?: StatTileTone;
+    onPress?: () => void;
+    loading?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const StatTile: import("react").NamedExoticComponent<StatTileProps>;
+//# sourceMappingURL=StatTile.d.ts.map

package/lib/typescript/modules/stat-tile/StatTile.variants.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Pure resolvers for StatTile — no React, so the WCAG tests import this directly (mocking only
+ * `react-native`'s `StyleSheet`, as every sibling module's tests do).
+ */
+import type { RoleColors, StatusRole, Theme } from "../../theme/hooks";
+export type StatTileTone = "accent" | "neutral" | StatusRole;
+export interface StatTileColors {
+    readonly background: string;
+    readonly pressed: string;
+    readonly label: string;
+    readonly valueColor: string;
+    /** The icon chip's tinted fill for the active `tone`. */
+    readonly iconFill: string;
+}
+export declare function resolveStatTileColors(colors: RoleColors, tone: StatTileTone): StatTileColors;
+export interface StatTileAccessibilityInput {
+    readonly label: string;
+    readonly value: string | number;
+    readonly loading: boolean;
+    readonly pressable: boolean;
+}
+export interface StatTileAccessibilityProps {
+    readonly accessible: true;
+    readonly accessibilityRole: "button" | "text";
+    readonly accessibilityLabel: string;
+    readonly "aria-busy": boolean;
+}
+/**
+ * Flat `aria-busy` rather than `accessibilityState={{ busy }}`: RN's `View`/`Pressable` fold it back
+ * into `accessibilityState`, while react-native-web forwards only the flat form.
+ */
+export declare function resolveStatTileAccessibility(input: StatTileAccessibilityInput): StatTileAccessibilityProps;
+export declare const statTileStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const statTileIconStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const statTileBodyStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=StatTile.variants.d.ts.map

package/lib/typescript/modules/stat-tile/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Public surface of `pixelize-native-library/stat-tile`. Value exports and type exports are split
+ * for `verbatimModuleSyntax`. The resolvers stay internal — a consumer configures a StatTile
+ * through its props, never by importing its internals.
+ */
+export { StatTile } from "./StatTile";
+export type { StatTileProps } from "./StatTile";
+export type { StatTileTone } from "./StatTile.variants";
+//# sourceMappingURL=index.d.ts.map