pixelize-native-library 1.0.7 → 1.2.0

package/lib/typescript/modules/menu/Menu.d.ts

@@ -1,26 +1,19 @@
 /**
- * Menu — a small anchored action list opened from a caller-supplied trigger. Unlike Select (whose
- * open/closed state is a `value`/`onValueChange` pair the caller owns), Menu is self-contained: a
- * transient action list manages its own visibility, closing itself after every dismissal path.
+ * Menu — a small anchored action list opened from a caller-supplied trigger.
  *
- * The trigger is composed via `React.cloneElement` — never `{...rest}` — injecting only `onPress`,
- * chained after any handler the trigger already defined (the same "merge, never clobber" technique
- * Tooltip uses for its child). The dropdown itself is React Native's OWN `Modal`, imported directly
- * from `"react-native"` on purpose: this module must never depend on the library's own `Modal`
- * COMPONENT — this library's own `Modal` (built in parallel elsewhere) is for persistent app
- * dialogs with a title/children contract, not a quick transient overlay — the same distinction
- * Select already draws for its own option list.
+ * The sheet is the menu itself: it carries `accessibilityRole="menu"` over the `menuitem` rows, and
+ * the `accessibilityViewIsModal` / `onAccessibilityEscape` pair `Modal.tsx` establishes — set on the
+ * sheet node itself so the web-portal path (which has no RN `<Modal>`) is modal to assistive tech too.
  *
- * 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 Menu reads the same ones `Modal.tsx` and `Select.tsx` read to stay
- * consistent once a consumer opts in via `ModalPortalProvider` — see `../modal/ModalPortalContext.ts`.
+ * Motion split, same as this library's own `Modal`: RN `<Modal>`'s native `animationType` owns the
+ * scrim fade (in AND out, with no JS timer, so a selection closes the menu on the same tick it
+ * always did), and the global motion system (`core/motion`) owns the sheet's own scale + lift on
+ * enter. The sheet is centered rather than anchored (see MODULE.md), so it scales from its centre.
  */
 import type { ReactElement } from "react";
 import type { GestureResponderEvent } from "react-native";
 import type { IconName } from "../../core/icon";
 import type { MenuItemTone } from "./Menu.variants";
-/** The subset of props Menu reads from / injects into its trigger child. */
 export interface MenuTriggerProps {
     onPress?: (event: GestureResponderEvent) => void;
 }
@@ -31,11 +24,8 @@ export interface MenuItem {
     readonly tone?: MenuItemTone;
 }
 export interface MenuProps {
-    /** A single element that accepts `onPress` (e.g. a `Button`). Opens the menu on press. */
     trigger: ReactElement<MenuTriggerProps>;
     items: MenuItem[];
-    /** Blocks the menu from opening. Does not itself restyle the trigger — pass `disabled` to the
-     *  trigger too if it should also look disabled (Menu never rewrites a prop it didn't ask for). */
     disabled?: boolean;
     testID?: string;
 }

package/lib/typescript/modules/menu/Menu.variants.d.ts

@@ -9,7 +9,7 @@
  * Free of React, `lucide`, and any `Modal`/`Pressable` import, so the WCAG + touch-target tests
  * import it directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type MenuItemTone = "default" | "danger";
 /** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
@@ -26,6 +26,13 @@ export declare const MENU_ROW_ICON_SIZE = 18;
  * 3:1 non-text minimum for free.
  */
 export declare function resolveMenuItemColor(colors: RoleColors, tone: MenuItemTone): string;
+/**
+ * A row's 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 a tinted label below 4.5:1; the pale `sunken` tint doesn't). One background for every
+ * tone: `default` and `danger` labels are both measured against it in `Menu.test.ts`.
+ */
+export declare function resolveMenuRowPressedBackground(colors: RoleColors): string;
 /**
  * Structural styles only — layout, padding, radius, border WIDTH. No colours (those are resolved
  * from `RoleColors` and applied inline), so this compiles once per theme identity via the themed

package/lib/typescript/modules/message-bubble/MessageBubble.d.ts

@@ -0,0 +1,25 @@
+/**
+ * MessageBubble — a single chat turn bubble. User variant uses accent fill; assistant uses surface
+ * card with border. Plain-text `content` only (rich assistant replies compose Markdown/RichText
+ * upstream).
+ *
+ * The accessible label names the sender ("You" / "Assistant") ahead of the content: alignment and
+ * fill colour are the only things that say who spoke, and neither reaches a screen reader.
+ *
+ * No mount animation, by rule 5 of `core/motion/MODULE.md`: bubbles are list cells, and `FlatList`
+ * unmounts and remounts them as they leave and re-enter its window — a "plays once per mount" enter
+ * therefore replays for every bubble scrolled back into view, which is exactly the per-row motion
+ * during scroll that rule forbids. A "new message arrived" reveal would have to be keyed off the
+ * message's own identity (an id/timestamp high-water mark the consumer owns), never off mounting.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { MessageBubbleVariant } from "./MessageBubble.variants";
+export interface MessageBubbleProps {
+    variant?: MessageBubbleVariant;
+    content: string;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const MessageBubble: import("react").NamedExoticComponent<MessageBubbleProps>;
+//# sourceMappingURL=MessageBubble.d.ts.map

package/lib/typescript/modules/message-bubble/MessageBubble.variants.d.ts

@@ -0,0 +1,31 @@
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type MessageBubbleVariant = "user" | "assistant";
+export interface MessageBubbleColors {
+    readonly background: string;
+    readonly text: string;
+    readonly border?: string;
+}
+export declare function resolveMessageBubbleColors(colors: RoleColors, variant: MessageBubbleVariant): MessageBubbleColors;
+export declare const messageBubbleStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    variant: {
+        user: {
+            alignSelf: "flex-end";
+            borderBottomRightRadius: 4;
+        };
+        assistant: {
+            alignSelf: "flex-start";
+            borderBottomLeftRadius: 4;
+            borderWidth: 1;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * Who sent a turn is carried only by `alignSelf` and the bubble fill on screen, so the label has to
+ * name the sender for it to reach assistive tech at all (WCAG 1.3.1).
+ */
+export declare function resolveMessageBubbleAccessibility(content: string, variant: MessageBubbleVariant): {
+    readonly accessible: true;
+    readonly accessibilityRole: "text";
+    readonly accessibilityLabel: string;
+};
+//# sourceMappingURL=MessageBubble.variants.d.ts.map

package/lib/typescript/modules/message-bubble/index.d.ts

@@ -0,0 +1,4 @@
+export { MessageBubble } from "./MessageBubble";
+export type { MessageBubbleProps } from "./MessageBubble";
+export type { MessageBubbleVariant } from "./MessageBubble.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/modal/Modal.d.ts

@@ -4,6 +4,12 @@
  * backdrop scrim dismisses it on press; the panel sits on `bg.surface` with `theme.radii.lg` and
  * `theme.elevation.lg`, capped to one of three closed widths (`size`).
  *
+ * Motion split: RN's own `animationType` owns the SURFACE fade (in AND out, natively, with no JS
+ * timer), and the global motion system (`core/motion`) owns the panel's own entrance lift. The exit
+ * is deliberately left to the native transition — a JS-timed exit would have to keep the `<Modal>`
+ * mounted past `visible`, widening the window in which iOS drops a sibling `<Modal>` presented while
+ * this one is dismissing.
+ *
  * Fully controlled: the caller owns `visible` and reacts to `onRequestClose`, which fires from the
  * backdrop press, the Android hardware back button, and — via `onAccessibilityEscape` on the panel
  * — iOS VoiceOver's two-finger-Z escape gesture. (RN's `<Modal>` only fires `onRequestClose` from a
@@ -17,6 +23,12 @@
  * `renderWebPortal` instead — see `ModalPortalContext.ts` for why. Every other case (native, or web
  * with no provider — the default `ModalPortalContext` value is `null`) renders through RN's own
  * `<Modal>`, byte-identical to before this mechanism existed.
+ *
+ * Physical-keyboard support is scoped to exactly that portal branch. `react-native-web`'s own
+ * `<Modal>` already ships Escape, a Tab trap and focus restore (`ModalContent`/`ModalFocusTrap`),
+ * so the RNModal path below must stay untouched — wiring the hooks there too would give the page
+ * two Escape listeners and two competing traps. The portal branch renders no `<RNModal>` at all,
+ * which is where all three silently went missing.
  */
 import type { ReactNode } from "react";
 import type { ModalSize } from "./Modal.variants";

package/lib/typescript/modules/modal/Modal.variants.d.ts

@@ -9,7 +9,7 @@
  * 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 { RoleColors, Theme } from "../../theme/hooks";
 export type ModalSize = "sm" | "md" | "lg";
 export interface ModalSizeSpec {
     /** Panel max width in dp — a screen narrower than this still shrinks it via `width: "100%"`. */

package/lib/typescript/modules/more-items/MoreItems.d.ts

@@ -0,0 +1,15 @@
+/**
+ * MoreItems — "+N more" overflow affordance opening a sheet of hidden items (avatars, tags, etc.).
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { MoreItemsEntry } from "./MoreItems.variants";
+export interface MoreItemsProps {
+    items: readonly MoreItemsEntry[];
+    moreCount?: number;
+    triggerText?: string;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const MoreItems: import("react").NamedExoticComponent<MoreItemsProps>;
+//# sourceMappingURL=MoreItems.d.ts.map

package/lib/typescript/modules/more-items/MoreItems.variants.d.ts

@@ -0,0 +1,30 @@
+import type { RoleColors, Theme } from "../../theme/hooks";
+import type { BadgeTone } from "../badge/Badge.variants";
+export interface MoreItemsEntry {
+    readonly id: string;
+    readonly label: string;
+    readonly tone?: BadgeTone;
+}
+export declare function resolveMoreItemsCount(moreCount: number | undefined, itemsLength: number): number;
+/** Tone dot beside each overflow label. */
+export declare const MORE_ITEMS_DOT_SIZE = 8;
+/** The sheet never grows past this — the list inside it scrolls (and virtualizes). */
+export declare const MORE_ITEMS_SHEET_MAX_HEIGHT = 280;
+/**
+ * 44dp is Apple's HIG minimum and WCAG 2.5.5 (AAA); it comfortably exceeds 2.5.8's 24×24 (AA). The
+ * trigger reaches it with `minHeight` rather than `hitSlop`: it is a standalone node with no
+ * neighbouring target to overlap, and a slop-expanded rectangle would still leave a ~22dp visual
+ * control that misses under an unsteady finger.
+ */
+export declare const MIN_TOUCH_TARGET = 44;
+export declare const moreItemsTriggerStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The trigger's animated layer: press motion moves the content, never the outer layout box. */
+export declare const moreItemsTriggerContentStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** Overflow-list row. Height is text-driven (font scaling), so the list gets no fixed itemHeight. */
+export declare const moreItemsRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const moreItemsDotStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const moreItemsOverlayStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const moreItemsSheetStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const moreItemsBadgeStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare function resolveMoreItemsDotColor(colors: RoleColors, tone?: BadgeTone): string;
+//# sourceMappingURL=MoreItems.variants.d.ts.map

package/lib/typescript/modules/more-items/index.d.ts

@@ -0,0 +1,4 @@
+export { MoreItems } from "./MoreItems";
+export type { MoreItemsProps } from "./MoreItems";
+export type { MoreItemsEntry } from "./MoreItems.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/multi-select/MultiSelect.d.ts

@@ -1,15 +1,5 @@
 /**
- * MultiSelect — a trigger styled like Select/Input that opens a checkbox-style option list in React
- * Native's OWN `Modal`. Imported directly from `"react-native"` here on purpose, and built as a
- * standalone sibling of `Select` rather than on top of it: selection semantics differ enough
- * (multiple values, a running "N selected" summary, checkbox-row indicators instead of a single
- * check mark) that importing Select would force awkward prop overloading — and this module must not
- * depend on any sibling module, including the library's own Modal (built in parallel elsewhere).
- *
- * 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 MultiSelect reads the same ones `Modal.tsx`/`Select.tsx` read to stay
- * consistent once a consumer opts in via `ModalPortalProvider` — see `../modal/ModalPortalContext.ts`.
+ * MultiSelect — a trigger styled like Select/Input that opens a checkbox-style option list.
  */
 import type { ReactNode } from "react";
 import type { LayoutStyle } from "../../core/style";
@@ -17,10 +7,6 @@ import type { MultiSelectSize } from "./MultiSelect.variants";
 export interface MultiSelectOption {
     readonly label: string;
     readonly value: string;
-    /** Optional adornment rendered between the checkbox indicator and the label (e.g. an avatar) —
-     *  for domain visuals a name-keyed `IconName` cannot express. Same ReactNode content-slot
-     *  precedent as `ListItem`'s `leading` and `Select`'s option `leading`. Fixed-size nodes only;
-     *  the label still owns the row's flexible width. */
     readonly leading?: ReactNode;
 }
 export interface MultiSelectProps {
@@ -31,7 +17,6 @@ export interface MultiSelectProps {
     label?: string;
     disabled?: boolean;
     size?: MultiSelectSize;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     containerStyle?: LayoutStyle;
     testID?: string;
 }

package/lib/typescript/modules/multi-select/MultiSelect.variants.d.ts

@@ -15,7 +15,8 @@
  * 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 MultiSelectSize = "sm" | "md" | "lg";
 /** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
@@ -51,6 +52,13 @@ export declare const MULTI_SELECT_SIZES: {
 };
 /** Minimum height for an option row — a list item is still an interactive target (WCAG 2.5.8). */
 export declare const MULTI_SELECT_ROW_MIN_HEIGHT = 44;
+/**
+ * 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 MULTI_SELECT_LISTBOX_ROLE: AccessibilityRole;
 /** Row checkbox-style indicator box side, in dp. Fixed — independent of the trigger's own `size`,
  *  same reasoning as `Select`'s row "check" glyph. */
 export declare const MULTI_SELECT_ROW_INDICATOR_SIZE = 20;
@@ -94,6 +102,10 @@ export interface MultiSelectRowColors {
     /** Check glyph on `indicatorFill` — the derived on-colour (≥ 3:1 non-text; measured, never
      *  assumed), same role pairing `Checkbox` uses. */
     readonly indicatorIcon: 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 resolveMultiSelectRowColors(colors: RoleColors): MultiSelectRowColors;
 export interface MultiSelectAccessibilityInput {
@@ -102,10 +114,10 @@ export interface MultiSelectAccessibilityInput {
 }
 export interface MultiSelectAccessibilityProps {
     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 sheet while disabled. */
     readonly disabled: boolean;
 }
@@ -143,6 +155,13 @@ export declare const multiSelectSheetStructure: import("../../core/style").Theme
 export declare const multiSelectHeaderStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const multiSelectCloseButtonStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const multiSelectRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * `MultiSelectOption.leading` is an arbitrary consumer node, so an unconstrained one could make a
+ * row taller than `MULTI_SELECT_ROW_MIN_HEIGHT` and silently falsify the list's `getItemLayout`
+ * offsets. This slot bounds it to the row's own indicator box instead, which is what keeps the
+ * uniform-height fast path true by construction (`core/MODULE.md`: `itemHeight` is uniform-only).
+ */
+export declare const multiSelectRowLeadingStructure: import("../../core/style").ThemedVariantResolver<object, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /** Structural indicator-box styles only — size, radius, border WIDTH. No colours: border/fill
  *  colour is checked-state-driven and applied inline over this, same split as `checkboxBoxStructure`. */
 export declare const multiSelectRowIndicatorStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;

package/lib/typescript/modules/number-input/NumberInput.d.ts

@@ -24,6 +24,12 @@ export interface NumberInputProps {
     disabled?: boolean;
     /** Rendered above the field. Also becomes `accessibilityLabel` unless one is passed explicitly. */
     label?: string;
+    /**
+     * The validity message. Shown below the field and folded into the accessible name when `status`
+     * is `"error"` — same prop name and rule as `Input`/`FormField`. Without it an error is a red
+     * border and nothing else, which no screen-reader or colour-blind user can perceive.
+     */
+    errorText?: string;
     /** Overrides the label→`accessibilityLabel` fallback. */
     accessibilityLabel?: string;
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */

package/lib/typescript/modules/number-input/NumberInput.variants.d.ts

@@ -13,7 +13,7 @@
  * Free of `lucide` and of any React tree, 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 { RoleColors, Theme } from "../../theme/hooks";
 export type NumberInputSize = "sm" | "md" | "lg";
 /** A state, not a brand tone — same reasoning as Input's `status`. */
 export type NumberInputStatus = "default" | "error";
@@ -82,21 +82,71 @@ export declare function resolveNumberInputStepperPressColors(colors: RoleColors)
  */
 export declare function resolveNumberInputStatus(colors: RoleColors, status: NumberInputStatus): NumberInputStatusColors;
 export interface NumberInputAccessibilityInput {
+    readonly value: number;
+    readonly min?: number | undefined;
+    readonly max?: number | undefined;
     readonly label?: string | undefined;
     readonly accessibilityLabel?: string | undefined;
     readonly disabled?: boolean | undefined;
+    /**
+     * What the field is actually SHOWING — the uncommitted draft while the user types. Defaults to
+     * `String(value)`, which is only the same string once the draft has been committed and clamped.
+     */
+    readonly displayText?: string | undefined;
+    readonly status?: NumberInputStatus | undefined;
+    readonly errorText?: string | undefined;
+}
+export interface NumberInputAccessibilityValue {
+    /** Omitted entirely when the caller sets no floor — an absent bound is not `min: 0`. */
+    readonly min?: number;
+    /** Omitted entirely when the caller sets no ceiling. */
+    readonly max?: number;
+    readonly now: number;
+    readonly text: string;
 }
 export interface NumberInputAccessibilityProps {
-    /** Falls back to the visible label — a sibling `Text`, not a wrapping element RN can associate. */
+    /**
+     * Falls back to the visible label — a sibling `Text`, not a wrapping element RN can associate —
+     * with `errorText` appended in the error state, the same rule `FormField` states.
+     */
     readonly accessibilityLabel: string | undefined;
-    readonly accessibilityState: {
-        readonly disabled: boolean;
-    };
+    readonly "aria-disabled": boolean;
+    readonly "aria-invalid": boolean;
+    /** The validity message to render below the field — the visible half of WCAG 3.3.1 / 1.4.1. */
+    readonly message: string | undefined;
+    /**
+     * The bounds + current value, so AT announces the range and hears the number change (WCAG 4.1.2).
+     *
+     * Emitted in BOTH forms, unlike `Slider`'s flat-only. The host is a `TextInput`, and RN's
+     * `TextInput.js` never destructures `aria-value*` (only the five `aria-*` state aliases), while
+     * `react-native-web` never reads `accessibilityValue`. Flat-only is silent on native here;
+     * object-only is silent on web. `View`-hosted controls like `Slider` need only the flat form.
+     */
+    readonly accessibilityValue: NumberInputAccessibilityValue;
+    readonly "aria-valuemin": number | undefined;
+    readonly "aria-valuemax": number | undefined;
+    readonly "aria-valuenow": number;
+    readonly "aria-valuetext": string;
+    /** Declared so TalkBack can adjust the value from the FIELD, not only the two stepper stops. */
+    readonly accessibilityActions: ReadonlyArray<{
+        readonly name: "increment" | "decrement";
+    }>;
     /** The `TextInput` `editable` prop — false while disabled, so the field blocks typing. */
     readonly editable: boolean;
 }
-/** Same fallback contract as `resolveInputAccessibility`: an explicit `accessibilityLabel` always
- *  wins over the visible label. */
+/**
+ * Same fallback contract as `resolveInputAccessibility`: an explicit `accessibilityLabel` always wins
+ * over the visible label.
+ *
+ * `now` is the RAW `value`, deliberately NOT clamped the way `resolveSliderAccessibility` clamps its
+ * own — the caller's committed value is what the control's value IS. The announced TEXT is
+ * `displayText` (the draft the field is rendering), not `String(value)`: mid-typing the two diverge
+ * whenever a keystroke doesn't parse or clamps, and a reader speaking a different number from the
+ * one on screen is a 4.1.2 failure in itself. `min`/`max` are omitted rather than defaulted — an
+ * absent bound means "no floor"/"no ceiling" here (see `clampNumberInputValue`), and announcing
+ * `min: 0` would invent one. `accessibilityActions` mirrors `Slider`'s reasoning: iOS surfaces
+ * adjust gestures from the trait, Android TalkBack only surfaces actions declared here (WCAG 2.5.7).
+ */
 export declare function resolveNumberInputAccessibility(input: NumberInputAccessibilityInput): NumberInputAccessibilityProps;
 /** Clamps to [min, max]. Either bound may be absent, meaning "no floor"/"no ceiling" on that side. */
 export declare function clampNumberInputValue(value: number, min?: number, max?: number): number;

package/lib/typescript/modules/org-switcher/OrgSwitcher.d.ts

@@ -0,0 +1,44 @@
+/**
+ * OrgSwitcher — a trigger showing the active org (avatar + name) that opens a sheet of every org
+ * the user belongs to: identity-tinted avatar, org name, the user's role on a second line, and an
+ * accent tint + check on the active one. Renders nothing when there's ≤1 option — a switcher with
+ * a single choice has nothing to switch to.
+ *
+ * It owns its trigger and sheet outright rather than presetting `Select`, mirroring web's
+ * OrgSwitcher (which owns its Popover rather than wrapping a generic select). `Select`'s row
+ * contract is closed at "one label, one optional leading node, a check when active" — a role
+ * subtitle and a tinted active row are org-switching concerns, not things every select should grow.
+ *
+ * Fully controlled and store-agnostic: the host app supplies the org list and owns wherever the
+ * active org actually lives (Redux, context, …) — this module never reads or dispatches app state,
+ * the same contract every other module in this library holds to.
+ *
+ * `Modal` is imported directly from `"react-native"`, and the web-portal branch mirrors `Select`'s
+ * — see that file's header for why both are deliberate.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { OrgSwitcherSize } from "./OrgSwitcher.variants";
+export interface OrgSwitcherOption {
+    readonly value: string;
+    readonly label: string;
+    /** The user's role in this org, shown as a second line under the name. */
+    readonly role?: string;
+    /** A remote logo/avatar image. Wins over `avatarInitials` when present. */
+    readonly avatarSource?: {
+        uri: string;
+    };
+    /** Falls back to initials derived from `label` when omitted. */
+    readonly avatarInitials?: string;
+}
+export interface OrgSwitcherProps {
+    options: OrgSwitcherOption[];
+    value?: string;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    size?: OrgSwitcherSize;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    containerStyle?: LayoutStyle;
+    testID?: string;
+}
+export declare const OrgSwitcher: import("react").NamedExoticComponent<OrgSwitcherProps>;
+//# sourceMappingURL=OrgSwitcher.d.ts.map

package/lib/typescript/modules/org-switcher/OrgSwitcher.variants.d.ts

@@ -0,0 +1,139 @@
+/**
+ * OrgSwitcher's style + behaviour resolution — the same split every sibling module holds to:
+ *  - STRUCTURE (sizing/spacing off the theme scale) lives in the `createThemedVariants` resolvers
+ *    below — static per (brand, mode), registered once.
+ *  - COLOUR is resolved from the theme's ROLE colours (never a raw ramp, never a hardcoded hex) by
+ *    `resolveOrgSwitcherTriggerColors` / `resolveOrgSwitcherRowColors`.
+ *
+ * Why this module resolves its own row colours instead of reusing `Select`'s: `Select` pins every
+ * row to `bg.surface` and conveys selection with a check glyph alone, because `bg.selected` is not
+ * provably readable on every brand. Web's OrgSwitcher tints the active row, and that tint is the
+ * cue a user actually sees when the sheet opens. `accent.subtle` + `accent.text` is the one role
+ * pair the role table already guarantees at 4.5:1 for every brand × mode, so the tint comes from
+ * there rather than from widening `Select`'s deliberately closed row contract.
+ *
+ * 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/hooks";
+import type { AvatarSize } from "../avatar";
+export type OrgSwitcherSize = "sm" | "md" | "lg";
+/** Same touch-target floor as Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface OrgSwitcherSizeSpec {
+    /** Visual trigger height in dp. */
+    readonly height: number;
+    /** Org-name text size on the trigger, on the theme's `fontSizes` scale. */
+    readonly fontSize: number;
+    /** Chevron glyph size in dp. */
+    readonly iconSize: number;
+    /** Avatar size used on the trigger AND on every row, as web uses one avatar size for both. */
+    readonly avatarSize: AvatarSize;
+    /** Symmetric touch expansion so `height + 2·hitSlop ≥ 44`. */
+    readonly hitSlop: number;
+}
+export declare const ORG_SWITCHER_SIZES: {
+    readonly sm: {
+        readonly height: 32;
+        readonly fontSize: 14;
+        readonly iconSize: 16;
+        readonly avatarSize: "xs";
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly height: 40;
+        readonly fontSize: 16;
+        readonly iconSize: 18;
+        readonly avatarSize: "sm";
+        readonly hitSlop: number;
+    };
+    readonly lg: {
+        readonly height: 48;
+        readonly fontSize: 18;
+        readonly iconSize: 20;
+        readonly avatarSize: "md";
+        readonly hitSlop: number;
+    };
+};
+/** Minimum height for an org row — a list item is still an interactive target (WCAG 2.5.8). */
+export declare const ORG_SWITCHER_ROW_MIN_HEIGHT = 44;
+/** The "check" glyph beside the active row. Fixed — independent of the trigger's own `size`. */
+export declare const ORG_SWITCHER_ROW_ICON_SIZE = 18;
+export interface OrgSwitcherTriggerColors {
+    readonly background: string;
+    readonly border: string;
+    /** Colour for the active org's name. */
+    readonly text: string;
+    /** Colour for the placeholder (no org selected yet). */
+    readonly placeholder: string;
+    /** Chevron + empty-state building glyph colour. */
+    readonly icon: string;
+}
+/** `pressed` covers the touch-down state; there is no hover on a touch device. */
+export declare function resolveOrgSwitcherTriggerColors(colors: RoleColors, pressed: boolean): OrgSwitcherTriggerColors;
+export interface OrgSwitcherRowColors {
+    /** Row fill: the accent tint while active, the sheet's surface otherwise, and its press
+     *  counterpart under a finger. All three carry `text`, `subtitle` and `icon` legibly. */
+    readonly background: string;
+    /** Org-name colour. */
+    readonly text: string;
+    /** Role subtitle colour. */
+    readonly subtitle: string;
+    /** "check" glyph colour, only rendered when `selected` — a non-text UI component, so 3:1. */
+    readonly icon: string;
+}
+/**
+ * Press moves each row to the OTHER row fill — active loses its tint, inactive gains `bg.sunken` —
+ * rather than both landing on one shared pressed colour: on zinc (the default brand) `accent.subtle`
+ * and `bg.sunken` are the same value, so a shared pressed fill gives the active row no feedback at
+ * all. The ink never changes with the fill, because all three fills clear AA for both text roles.
+ */
+export declare function resolveOrgSwitcherRowColors(colors: RoleColors, selected: boolean, pressed: boolean): OrgSwitcherRowColors;
+export interface OrgSwitcherAccessibilityInput {
+    readonly open: boolean;
+    /** The active org's name, or `undefined` when nothing is selected yet. */
+    readonly selectedLabel: string | undefined;
+    readonly placeholder: string;
+}
+export interface OrgSwitcherAccessibilityProps {
+    readonly accessibilityRole: "button";
+    readonly accessibilityLabel: string;
+    /** Flat, not `accessibilityState`: react-native-web discards the object form entirely. */
+    readonly "aria-expanded": boolean;
+}
+/**
+ * The trigger shows only the org name, so the accessible name has to say what the control IS —
+ * "Acme Inc" alone tells a screen-reader user nothing about switching orgs (WCAG 4.1.2, which also
+ * requires the expanded/collapsed state a collapsible control is in).
+ */
+export declare function resolveOrgSwitcherAccessibility(input: OrgSwitcherAccessibilityInput): OrgSwitcherAccessibilityProps;
+/** Initials for the fallback avatar: first letters of the first two words, as `Avatar` clips to two. */
+export declare function orgInitials(label: string): string;
+export declare const orgSwitcherTriggerStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+            paddingHorizontal: 8;
+        };
+        md: {
+            height: 40;
+            paddingHorizontal: 12;
+        };
+        lg: {
+            height: 48;
+            paddingHorizontal: 16;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/** The trigger's animated layer: press motion moves the content, never the fill or the border. */
+export declare const orgSwitcherTriggerContentStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** Avatar + org name, in one shrinkable row so the chevron stays pinned right. */
+export declare const orgSwitcherTriggerValueStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const orgSwitcherOverlayStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const orgSwitcherSheetStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const orgSwitcherRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The row's animated layer: press motion moves the content, never the row fill. */
+export declare const orgSwitcherRowContentStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** Name over role, taking the row's flexible width so both truncate rather than push the check off. */
+export declare const orgSwitcherRowBodyStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=OrgSwitcher.variants.d.ts.map

package/lib/typescript/modules/org-switcher/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Public surface of `pixelize-native-library/org-switcher`. Value exports and type exports are
+ * split for `verbatimModuleSyntax`.
+ */
+export { OrgSwitcher } from "./OrgSwitcher";
+export type { OrgSwitcherProps, OrgSwitcherOption } from "./OrgSwitcher";
+export type { OrgSwitcherSize } from "./OrgSwitcher.variants";
+//# sourceMappingURL=index.d.ts.map