pixelize-native-library 1.0.7 → 1.2.0

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

@@ -1,3 +1,7 @@
+/**
+ * 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";

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

@@ -2,13 +2,13 @@
  * 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";
+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 value: string;
+    readonly valueColor: string;
     /** The icon chip's tinted fill for the active `tone`. */
     readonly iconFill: string;
 }
@@ -23,10 +23,12 @@ export interface StatTileAccessibilityProps {
     readonly accessible: true;
     readonly accessibilityRole: "button" | "text";
     readonly accessibilityLabel: string;
-    readonly accessibilityState: {
-        readonly busy: boolean;
-    };
+    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>;

package/lib/typescript/modules/state-block/StateBlock.d.ts

@@ -0,0 +1,51 @@
+/**
+ * StateBlock — centred async-state placeholders beside `empty-state`:
+ *  - `LoadingState` composes this library's own `Spinner` (never a raw `ActivityIndicator`).
+ *  - `ErrorState` mirrors `EmptyState`'s layout — optional icon, required title, optional
+ *    description, optional retry action via `Button`.
+ *
+ * No `accessibilityRole` of its own on either export: the composed `Spinner`/`Button` carry their
+ * own semantics, and `ErrorState`'s title is the block's heading (`accessibilityRole="header"`,
+ * WCAG 1.3.1 / 2.4.6) with the description reading after it.
+ *
+ * Both blocks appear WITHOUT moving focus — `Screen` swaps them in for its content — so appearing is
+ * itself the status message (WCAG 4.1.3) and `useAnnounce` speaks it, exactly as the sibling
+ * `EmptyState` does. Neither carries `accessibilityRole="alert"` or `accessibilityLiveRegion`
+ * alongside it: on web `role="alert"` is itself a live region, so the pair announces twice. The
+ * library's split is one or the other — `Banner` takes the role, these take the announcement.
+ *
+ * Both take `visible` (default `true`) and fade/slide through `useEnterExit`, so swapping
+ * loading → error → content is a transition rather than a jump cut. `useEnterExit` skips the enter
+ * for a block that mounts already visible, so the default is behaviourally unchanged.
+ */
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+import type { SpinnerSize, SpinnerTone } from "../spinner/Spinner.variants";
+export interface LoadingStateProps {
+    message?: string;
+    size?: SpinnerSize;
+    tone?: SpinnerTone;
+    /** Fades and slides the block out when set to `false`, then unmounts it. */
+    visible?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export interface ErrorStateAction {
+    readonly label: string;
+    readonly onPress: () => void;
+}
+export interface ErrorStateProps {
+    icon?: IconName;
+    title: string;
+    description?: string;
+    action?: ErrorStateAction;
+    /** Fades and slides the block out when set to `false`, then unmounts it. */
+    visible?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const LoadingState: import("react").NamedExoticComponent<LoadingStateProps>;
+export declare const ErrorState: import("react").NamedExoticComponent<ErrorStateProps>;
+//# sourceMappingURL=StateBlock.d.ts.map

package/lib/typescript/modules/state-block/StateBlock.variants.d.ts

@@ -0,0 +1,30 @@
+/**
+ * StateBlock's style resolution — `LoadingState` and `ErrorState` share this file as siblings to
+ * `empty-state/EmptyState.variants.ts`:
+ *  - STRUCTURE (centring, padding, vertical rhythm) lives in the themed resolvers below.
+ *  - COLOUR is resolved from the theme's ROLE colours, never a raw ramp and never a hardcoded hex.
+ *
+ * Free of React and lucide, so the WCAG tests import this directly (mocking only `react-native`'s
+ * `StyleSheet`, as `core/style` and every sibling module's tests do).
+ */
+import type { RoleColors, Theme } from "../../theme/hooks";
+/** The error glyph's rendered size, in dp — same focal-point reasoning as `EMPTY_STATE_ICON_SIZE`. */
+export declare const ERROR_STATE_ICON_SIZE = 48;
+export interface LoadingStateColors {
+    readonly message: string;
+}
+export interface ErrorStateColors {
+    readonly icon: string;
+    readonly title: string;
+    readonly description: string;
+}
+export declare function resolveLoadingStateColors(colors: RoleColors): LoadingStateColors;
+export declare function resolveErrorStateColors(colors: RoleColors): ErrorStateColors;
+/**
+ * What a screen reader hears when the error block appears (WCAG 4.1.3) — the same shape, and the
+ * same reasoning about the recovery step, as `resolveEmptyStateAnnouncement`.
+ */
+export declare function resolveErrorStateAnnouncement(title: string, description: string | undefined): string;
+export declare const loadingStateStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const errorStateStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=StateBlock.variants.d.ts.map

package/lib/typescript/modules/state-block/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Public surface of `pixelize-native-library/state-block`. Value exports and type exports are split
+ * for `verbatimModuleSyntax`. The resolvers stay internal — a consumer configures these through
+ * their props, never by importing internals.
+ */
+export { LoadingState, ErrorState } from "./StateBlock";
+export type { LoadingStateProps, ErrorStateProps, ErrorStateAction } from "./StateBlock";
+export type { SpinnerSize, SpinnerTone } from "../spinner/Spinner.variants";
+export type { IconName } from "../../core/icon";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/stepper/Stepper.d.ts

@@ -9,6 +9,10 @@
  * length; the connector to the NEXT step is drawn as two identically-coloured halves — the trailing
  * half of this column, the leading half of the next — so a circle stays centered under its own
  * 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.
  */
 import type { LayoutStyle } from "../../core/style";
 export interface StepperStep {

package/lib/typescript/modules/stepper/Stepper.variants.d.ts

@@ -16,7 +16,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 `Button.variants.ts` do).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type StepState = "completed" | "active" | "upcoming";
 /**
  * Visual diameter of a step's numbered circle, in dp. Not a touch target — Stepper is a v1
@@ -72,11 +72,9 @@ export interface StepperAccessibilityInput {
 }
 export interface StepperAccessibilityProps {
     readonly accessibilityRole: "progressbar";
-    readonly accessibilityValue: {
-        readonly min: 0;
-        readonly max: number;
-        readonly now: number;
-    };
+    readonly "aria-valuemin": 0;
+    readonly "aria-valuemax": number;
+    readonly "aria-valuenow": number;
     readonly accessibilityLabel: string;
 }
 /**
@@ -85,7 +83,9 @@ export interface StepperAccessibilityProps {
  * wording is unit-tested without a renderer; `Stepper.tsx` pairs this with `accessible` on the
  * container, the same collapsing idiom `Badge` uses for its icon + label). `activeStep` is
  * 0-indexed internally; the announcement surfaces the natural 1-based ordinal, and
- * `accessibilityValue` surfaces the raw 0-indexed `min`/`max`/`now` progress triple.
+ * the flat `aria-value*` triple surfaces the raw 0-indexed `min`/`max`/`now` progress. Flat rather
+ * than `accessibilityValue={{…}}`: RN's `View` folds 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 resolveStepperAccessibility(input: StepperAccessibilityInput): StepperAccessibilityProps;
 /**

package/lib/typescript/modules/swipeable-row/SwipeableRow.d.ts

@@ -0,0 +1,35 @@
+/**
+ * SwipeableRow — reveals action buttons on horizontal swipe. Built on gesture-handler +
+ * reanimated 4 shared values, so the row follows the finger on the UI thread.
+ *
+ * A swipe is invisible to assistive tech (WCAG 2.1.1), so the same actions are also declared as
+ * `accessibilityActions` on the row itself — the platform-native list-row model, where the row is
+ * one accessibility element carrying custom actions. The trays are the sighted-touch affordance for
+ * that same set, so they stay out of the accessibility tree: they sit behind the content and would
+ * otherwise announce every row's actions ahead of its content, swiped open or not.
+ *
+ * Those two props are native-only — react-native-web implements neither — so each action ALSO
+ * carries an explicit `tabIndex={-1}`: without it a 20-row list costs three Tab presses per row,
+ * two of them landing on a button the content is painted over.
+ */
+import type { ReactNode } from "react";
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+import type { SwipeableActionTone } from "./SwipeableRow.variants";
+export interface SwipeableRowAction {
+    readonly id: string;
+    readonly label: string;
+    readonly icon?: IconName;
+    readonly tone?: SwipeableActionTone;
+    readonly onPress: () => void;
+}
+export interface SwipeableRowProps {
+    children: ReactNode;
+    leftActions?: readonly SwipeableRowAction[];
+    rightActions?: readonly SwipeableRowAction[];
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const SwipeableRow: import("react").NamedExoticComponent<SwipeableRowProps>;
+//# sourceMappingURL=SwipeableRow.d.ts.map

package/lib/typescript/modules/swipeable-row/SwipeableRow.variants.d.ts

@@ -0,0 +1,27 @@
+import type { RoleColors, Theme } from "../../theme/hooks";
+import type { StatusRole } from "../../theme/hooks";
+export type SwipeableActionTone = StatusRole | "accent" | "neutral";
+export interface SwipeableActionColors {
+    readonly fill: string;
+    readonly text: string;
+}
+export declare function resolveSwipeableActionTone(colors: RoleColors, tone: SwipeableActionTone): SwipeableActionColors;
+export declare const swipeableRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const swipeableActionsStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const swipeableActionButtonStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The keyboard/AT focus ring for one action button. Drawn INSIDE the button's own bounds, not as the
+ * gap-outside ring `Button`/`CopyButton` use: `swipeableRowStructure` clips to `overflow: "hidden"`,
+ * so an outset ring on the outermost action would be cut off by the row itself. Its colour is
+ * applied inline over this, never hardcoded here.
+ */
+export declare const swipeableActionFocusRingStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const SWIPE_ACTION_WIDTH = 72;
+/**
+ * The always-visible tap affordance (WCAG 2.5.7 / 2.5.1): trailing edge, vertically centered, on
+ * top of `children` — it does not reflow consumer content, since `children` is opaque to this
+ * component. `pointerEvents: "box-none"` on the wrapping node (applied at the component, not here)
+ * keeps the rest of the row's width free for the pan gesture underneath.
+ */
+export declare const swipeableMoreAffordanceStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=SwipeableRow.variants.d.ts.map

package/lib/typescript/modules/swipeable-row/index.d.ts

@@ -0,0 +1,4 @@
+export { SwipeableRow } from "./SwipeableRow";
+export type { SwipeableRowAction, SwipeableRowProps } from "./SwipeableRow";
+export type { SwipeableActionTone } from "./SwipeableRow.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/switch/Switch.variants.d.ts

@@ -3,7 +3,7 @@
  * lucide, same split as `Button.variants.ts`: 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 interface SwitchColors {
     /** Track fill when `value` is false. */
     readonly trackOff: string;
@@ -39,6 +39,14 @@ export interface SwitchAccessibilityProps {
  * RN's own `<Switch>` defaults `accessibilityRole` to `"switch"` but never sets
  * `accessibilityState.checked` itself (only `disabled` is merged in, on Android) — so this module
  * sets both explicitly, kept pure so the contract is testable without rendering React Native.
+ *
+ * The ONE control in the form family that keeps the OBJECT form. `Switch` is a native primitive, not
+ * a `View`/`Pressable`: RN's `Switch.js` reads `accessibilityState` and spreads everything else
+ * straight onto the platform view, which has no idea what `aria-checked` is — so a flat prop would
+ * announce nothing natively. Web needs nothing either: `react-native-web` renders a real
+ * `<input type="checkbox" role="switch" checked>`, so the DOM already carries the state, and a flat
+ * `aria-checked` would land on the wrapper `<div>` — an element with no role, where the attribute is
+ * not allowed. Object on native, native input on web; no flat form belongs here.
  */
 export declare function resolveSwitchAccessibility(input: SwitchAccessibilityInput): SwitchAccessibilityProps;
 /** WCAG 2.5.5 (AAA) / HIG floor every interactive control is held to — same constant as `Button`. */

package/lib/typescript/modules/tabs/Tabs.d.ts

@@ -3,12 +3,14 @@
  * real design systems split the strip from panel content, and keeps the component simple and
  * composable (no `TabPanel`, no rendering children per tab).
  *
- * The active-tab indicator is two `Animated.Value`s (`x`, `width`) driven off each tab's own
- * `onLayout` measurement, keyed by `value` so reordering `items` doesn't scramble which
- * measurement belongs to which tab. Reduced motion (WCAG 2.3.3) snaps both values with `setValue`
- * instead of animating — same `duration: reducedMotion ? 0 : …` idiom `Button`'s press fade and
- * `Toast`'s slide use, just applied to `setValue` vs `Animated.timing` instead of a duration of 0
- * (a 0-width/0-position change would still tween through intermediate frames otherwise).
+ * The active-tab indicator is a 1dp-wide bar positioned and stretched entirely by transforms
+ * (`translateX` + `scaleX`) off each tab's own `onLayout` measurement, keyed by `value` so
+ * reordering `items` doesn't scramble which measurement belongs to which tab. Transforms are the
+ * only way this can run on the native driver — see `Tabs.variants.ts` for the geometry, and
+ * `core/motion` for the timing every module now shares.
+ *
+ * That indicator marks SELECTION, not focus: a tab holding keyboard/AT focus draws its own inset
+ * ring (WCAG 2.4.7), the same treatment `BottomNavTab` uses.
  */
 import type { IconName } from "../../core/icon";
 import type { LayoutStyle } from "../../core/style";

package/lib/typescript/modules/tabs/Tabs.variants.d.ts

@@ -8,7 +8,7 @@
  *  - `resolveTabAccessibility` derives the per-tab a11y surface purely, so the "selected" contract
  *    is unit-testable without rendering React Native.
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type TabsSize = "sm" | "md" | "lg";
 /** Same floor as Button/RadioGroup — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
  * stay isolated. */
@@ -70,9 +70,9 @@ export interface TabAccessibilityInput {
 }
 export interface TabAccessibilityProps {
     readonly accessibilityRole: "tab";
-    readonly accessibilityState: {
-        readonly selected: boolean;
-    };
+    /** Flat, never `accessibilityState`: react-native-web discards the object form (see
+     *  `docs/PLATFORM-A11Y-PROPS.md`). Quoted key so the compiler still checks the prop name. */
+    readonly "aria-selected": boolean;
 }
 /**
  * Derives one tab's accessibility surface purely, mirroring `resolveRadioRowAccessibility`: every
@@ -106,9 +106,22 @@ export declare const tabItemStructure: import("../../core/style").ThemedVariantR
     };
 }, import("react-native").ViewStyle>;
 /**
- * The active-tab indicator bar. Thickness is the theme's `border.thick` (2dp); the pill radius is
- * `radii.full`. Position (`left`/`width`, via `transform`/`width`) is driven by `Animated.Value`s
- * in `Tabs.tsx`, not by this static resolver.
+ * The active-tab indicator bar. Thickness is the theme's `border.thick` (2dp). Its width is a fixed
+ * 1dp unit that `Tabs.tsx` stretches with an animated `scaleX` — a transform, so the whole indicator
+ * runs on the native driver (animating `width` cannot, and forces a layout pass per frame).
+ *
+ * No `borderRadius`: a corner radius is applied BEFORE the transform, so `scaleX` would smear a
+ * 0.5dp round end into a lens the full width of the tab. At 2dp thick, square ends are
+ * indistinguishable from the previous `radii.full` pill.
+ */
+export declare const TABS_INDICATOR_UNIT_WIDTH = 1;
+/**
+ * The keyboard/AT focus ring drawn over one tab's own bounds — the same treatment
+ * `bottomNavFocusRingStructure` uses, and inset rather than outset because the strip's `columnGap`
+ * is a single space step: a ring drawn outside a tab would overlap its neighbour. Focus is NOT the
+ * animated indicator below — that bar marks SELECTION, which moves only on press. Its colour is
+ * applied inline over this, never hardcoded here.
  */
+export declare const tabsFocusRingStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const tabsIndicatorStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 //# sourceMappingURL=Tabs.variants.d.ts.map

package/lib/typescript/modules/text/Text.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Text — typography primitive with a closed `variant` union. Replaces ad-hoc fontSize literals.
+ */
+import { type TextProps as RNTextProps } from 'react-native';
+import type { LayoutStyle } from '../../core/style';
+import type { HeadingVariant, TextVariant } from './Text.variants';
+export interface TextProps {
+    variant?: TextVariant;
+    children: RNTextProps['children'];
+    numberOfLines?: number;
+    style?: LayoutStyle;
+    testID?: string;
+}
+export interface HeadingProps {
+    variant?: HeadingVariant;
+    children: RNTextProps['children'];
+    numberOfLines?: number;
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Text: import("react").NamedExoticComponent<TextProps>;
+export declare const Heading: import("react").NamedExoticComponent<HeadingProps>;
+//# sourceMappingURL=Text.d.ts.map

package/lib/typescript/modules/text/Text.variants.d.ts

@@ -0,0 +1,18 @@
+import type { TextStyle } from 'react-native';
+import type { HeadingLevel } from '../../core/heading';
+import type { RoleColors, Theme } from '../../theme/hooks';
+export type TextVariant = 'body' | 'body-sm' | 'caption' | 'label' | 'label-sm' | 'overline';
+export type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4';
+/**
+ * `variant` is the level as well as the size. Without this, `react-native-web` renders every
+ * heading as `<h1>` (see `core/heading`).
+ */
+export declare const HEADING_LEVELS: Record<HeadingVariant, HeadingLevel>;
+/** Runtime companion to `TextVariant`, so the WCAG test can enumerate every variant a consumer can pass. */
+export declare const TEXT_VARIANTS: readonly ["body", "body-sm", "caption", "label", "label-sm", "overline"];
+export declare const HEADING_VARIANTS: Record<HeadingVariant, TextVariant>;
+/** The role colour a variant resolves to. Pure, so the WCAG test measures it without a `Theme`. */
+export declare function resolveTextColor(colors: RoleColors, variant: TextVariant): string;
+export declare function resolveTextStyle(theme: Theme, variant: TextVariant): TextStyle;
+export declare function resolveHeadingStyle(theme: Theme, variant: HeadingVariant): TextStyle;
+//# sourceMappingURL=Text.variants.d.ts.map

package/lib/typescript/modules/text/index.d.ts

@@ -0,0 +1,4 @@
+export { Text, Heading } from './Text';
+export type { TextProps, HeadingProps } from './Text';
+export type { TextVariant, HeadingVariant } from './Text.variants';
+//# sourceMappingURL=index.d.ts.map