pixelize-native-library 1.0.6 → 1.2.0

package/lib/typescript/modules/banner/Banner.variants.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Banner's style resolution — the same split Badge/Button use:
+ *  - STRUCTURE (padding, radius, gaps, border WIDTH) in the themed `bannerStructure` resolver.
+ *  - COLOUR is `tone` × `variant` driven, resolved from ROLE colours only.
+ *
+ * Free of React and of `lucide`, so the WCAG tests import it directly (mocking only
+ * `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+import type { RoleColors, StatusRole, Theme } from "../../theme/hooks";
+import type { IconName } from "../../core/icon";
+export type BannerTone = "accent" | "neutral" | StatusRole;
+export type BannerVariant = "subtle" | "solid";
+export interface BannerToneColors {
+    readonly fill: string;
+    /** Title, message, icon and the dismiss glyph — one colour, so the icon inherits the label's proven ratio. */
+    readonly text: string;
+    readonly border: string;
+}
+/**
+ * `subtle` reuses Badge's exact role mapping, which is already measured ≥ 4.5:1 for the label on its
+ * own fill and ≥ 3:1 for `status.text`-as-border against both the canvas and that fill, on every
+ * brand × mode. `solid` inverts onto the designed `solid`/`onSolid` pairing; `neutral` has no solid
+ * rung, so it inverts onto `fg.default` + `bg.surface` — the body-text pairing, high-contrast by
+ * construction.
+ */
+export declare function resolveBannerTone(colors: RoleColors, tone: BannerTone, variant: BannerVariant): BannerToneColors;
+/** Leading glyph when the caller passes none. `accent`/`neutral` carry no severity, so they get none. */
+export declare function resolveBannerIcon(tone: BannerTone): IconName | undefined;
+export interface BannerAccessibilityInput {
+    readonly tone: BannerTone;
+    readonly title?: string;
+    readonly message: string;
+}
+export interface BannerAccessibilityProps {
+    readonly accessible: true;
+    readonly accessibilityRole: "alert" | "text";
+    readonly accessibilityLabel: string;
+}
+/**
+ * `danger`/`warning` announce as `alert` so a screen reader interrupts; the rest are passive text.
+ * Title and message collapse into ONE accessible node (WCAG 4.1.2) rather than two stray strings.
+ */
+export declare function resolveBannerAccessibility(input: BannerAccessibilityInput): BannerAccessibilityProps;
+export declare const BANNER_ICON_SIZE = 20;
+/** Dismiss and action are real touch targets; the visual glyph is smaller than its 44dp hit area. */
+export declare const BANNER_DISMISS_ICON_SIZE = 16;
+export declare const BANNER_MIN_TOUCH_TARGET = 44;
+export declare const bannerStructure: import("../../core/style").ThemedVariantResolver<Theme, {}, import("react-native").ViewStyle>;
+//# sourceMappingURL=Banner.variants.d.ts.map

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

@@ -0,0 +1,5 @@
+export { Banner } from "./Banner";
+export type { BannerProps, BannerAction } from "./Banner";
+export type { BannerTone, BannerVariant } from "./Banner.variants";
+export type { IconName } from "../../core/icon";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/bottom-nav/BottomNav.d.ts

@@ -7,19 +7,20 @@
  * escape hooks (backdrop press, Android hardware back, iOS VoiceOver escape, the web-portal opt-in)
  * is inherited for free.
  *
- * `BottomNav.tsx` owns only the fixed bar: per-tab focus tracking, the active-indicator render
- * (presence/absence + a label-weight switch, never colour alone — see the accessibility contract in
- * MODULE.md), wiring press → `onDestinationPress`, and closing the sheet after a sheet-row selection.
- * The sheet's actual content (search, Recent, grouped sections, edit mode, no-results) is
- * `BottomNavOverflowSheet` — a private sub-component in its own file, the same "this warrants its own
- * file" call this library already made for Reorder's private `ReorderRow`.
+ * `BottomNav.tsx` owns only the bar's composition: laying out the slots, wiring press →
+ * `onDestinationPress`, and closing the sheet after a sheet-row selection. One slot — icon, badge,
+ * label, focus ring, active indicator, and that indicator's transition — is `BottomNavTab`, rendered
+ * for the core tabs AND the More slot. The sheet's actual content (search, Recent, grouped sections,
+ * edit mode, no-results) is `BottomNavOverflowSheet`. Both are private sub-components in their own
+ * files, the same "this warrants its own file" call this library already made for Reorder's private
+ * `ReorderRow`.
  *
  * Every piece of state here was classified against one question: does anything OUTSIDE this
  * component plausibly need to read or set it? `active`, `moreVisible`, `recent`, `coreTabs`, and
  * `edit.editing` all answer yes (the app's own router/persistence owns them) and are therefore
  * controlled props, never internal state — see MODULE.md's "Controlled-state contract" for the full,
- * item-by-item reasoning. Only per-tab keyboard/AT focus is internal here, the same idiom
- * Button/Input/Select already use for their own focus rings.
+ * item-by-item reasoning. Only per-tab keyboard/AT focus is internal, and it lives inside
+ * `BottomNavTab` — the same idiom Button/Input/Select use for their own focus rings.
  */
 import type { IconName } from "../../core/icon";
 import type { LayoutStyle } from "../../core/style";
@@ -31,8 +32,12 @@ export interface BottomNavDestination {
     /** Visible label AND accessible-name fallback. */
     readonly label: string;
     readonly icon: IconName;
-    /** Overrides the accessible name, e.g. to fold in a live count: "Tasks, 3 overdue". */
+    /** Overrides the accessible name WHOLE — when present, `badge` is not folded in automatically. */
     readonly accessibilityLabel?: string;
+    /** Attention/unread count, shown as a small pill on the icon in the bar AND in sheet rows.
+     *  `0`/omitted renders nothing; display caps at "99+"; the TRUE count is folded into the
+     *  accessible name automatically ("Tasks, 5 new items") unless `accessibilityLabel` overrides. */
+    readonly badge?: number;
 }
 export interface BottomNavOverflowSection {
     /** React key + a11y grouping key. */

package/lib/typescript/modules/bottom-nav/BottomNav.variants.d.ts

@@ -19,7 +19,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` does).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 /** Same touch-target floor as Button/Select/Menu (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
 /** The bar's fixed visual height. A design constant, not a caller-facing `size` scale — v1 is a
@@ -30,6 +30,47 @@ export declare const BOTTOM_NAV_HEIGHT = 56;
 export declare const BOTTOM_NAV_ICON_SIZE = 22;
 /** Icon glyph size for a row inside the overflow sheet (search result, Recent, grouped, edit slot). */
 export declare const OVERFLOW_ROW_ICON_SIZE = 20;
+/** Display cap for the count pill — a count past this renders as "99+"; the accessible name always
+ *  carries the TRUE count (see `resolveBottomNavBadge`). */
+export declare const BOTTOM_NAV_BADGE_MAX_COUNT = 99;
+/** The count pill's height and minimum width — deliberately below `MIN_TOUCH_TARGET`: the pill is a
+ *  passive adornment inside its destination's own touchable, never a target itself. */
+export declare const BOTTOM_NAV_BADGE_SIZE = 16;
+export declare const BOTTOM_NAV_BADGE_FONT_SIZE = 10;
+/** The More trigger's presence-only badge dot — same quiet idiom as the bar's active-indicator dot;
+ *  the summed count still reaches AT users through the trigger's accessible name. */
+export declare const BOTTOM_NAV_BADGE_DOT_SIZE = 8;
+/** The active-tab dot. Geometry is static — selection is animated on opacity/scale only, so the
+ *  bar never reflows when the active tab changes. */
+export declare const BOTTOM_NAV_ACTIVE_DOT_SIZE = 6;
+/** The one settle magnitude the bar owns: the scale both the active dot and a badge grow FROM as
+ *  they fade in, so every appearance in this module reads as the same gesture. */
+export declare const BOTTOM_NAV_SETTLE_SCALE = 0.8;
+export interface BottomNavBadgeState {
+    /** Display text — the count, capped at `"${BOTTOM_NAV_BADGE_MAX_COUNT}+"`. */
+    readonly label: string;
+    /** Folded into the accessible name — always the true count, never the capped form. */
+    readonly accessibilityText: string;
+}
+/** `undefined`/`0` (or any non-positive count) resolves to `null` — the badge renders nothing and
+ *  leaves the accessible name untouched. */
+export declare function resolveBottomNavBadge(count: number | undefined): BottomNavBadgeState | null;
+/** Sums the positive badge counts across every overflow destination — drives the More trigger's dot
+ *  and its accessible name. Structurally typed so this file stays free of `BottomNav.tsx` imports. */
+export declare function resolveBottomNavOverflowBadgeTotal(sections: ReadonlyArray<{
+    readonly destinations: ReadonlyArray<{
+        readonly badge?: number | undefined;
+    }>;
+}>): number;
+export interface BottomNavDestinationAccessibilityLabelInput {
+    readonly label: string;
+    /** An explicit override always wins whole — the badge is never appended to it. */
+    readonly accessibilityLabel?: string | undefined;
+    readonly badge: BottomNavBadgeState | null;
+}
+/** The accessible name a destination (or the More trigger) announces: the explicit override as-is,
+ *  else the label with the badge's true count folded in ("Tasks, 5 new items"). */
+export declare function resolveBottomNavDestinationAccessibilityLabel(input: BottomNavDestinationAccessibilityLabelInput): string;
 /** The edit-mode slot chip's own "this is the pin target" dot — presence/absence, not a re-tint,
  *  same "use of colour" principle the bar's own active indicator documents below. */
 export declare const EDIT_SLOT_INDICATOR_SIZE = 8;
@@ -69,6 +110,18 @@ export interface BottomNavTabColors {
  * which tab is active from the dot and the bold label.
  */
 export declare function resolveBottomNavTabColors(colors: RoleColors, active: boolean): BottomNavTabColors;
+export interface BottomNavBadgeColors {
+    /** Pill/dot fill (WCAG 1.4.11 ≥ 3:1 against the bar's own surface). */
+    readonly fill: string;
+    /** Count text on `fill` (WCAG 1.4.3 ≥ 4.5:1). */
+    readonly label: string;
+}
+/**
+ * The badge reads at the accent's SOLID emphasis, not the Badge module's subtle chip fill — a
+ * 10dp count on a 16dp pill needs the strongest figure/ground the theme offers, and `accent.solid`
+ * is the same role the active-indicator dot already draws from, so the bar stays one accent story.
+ */
+export declare function resolveBottomNavBadgeColors(colors: RoleColors): BottomNavBadgeColors;
 export interface BottomNavTabAccessibilityInput {
     readonly selected: boolean;
     /** Only meaningful for the More tab — tracks whether the overflow sheet is showing. */
@@ -79,16 +132,20 @@ export interface BottomNavTabAccessibilityInput {
 }
 export interface BottomNavTabAccessibilityProps {
     readonly accessibilityRole: "tab";
-    readonly accessibilityState: {
-        readonly selected: boolean;
-        readonly expanded?: boolean;
-        readonly disabled?: 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.
+     *
+     *  `aria-selected` and NOT `aria-current`: this is a tablist, and `aria-selected` is the signal
+     *  the `tab` role defines. `aria-current="page"` marks the current link inside a navigation
+     *  landmark — a different pattern, and carrying both would state the same thing two ways. */
+    readonly "aria-selected": boolean;
+    readonly "aria-expanded": boolean | undefined;
+    readonly "aria-disabled": boolean | undefined;
 }
 /**
- * Derives one tab's accessibility surface once, purely (WCAG 4.1.2): `selected` is required,
- * `expanded` and `disabled` are folded in only when the caller actually passes them, so a plain
- * core tab's `accessibilityState` never carries a stray `expanded: undefined` key.
+ * Derives one tab's accessibility surface once, purely (WCAG 4.1.2): `selected` is required, while
+ * `expanded` and `disabled` stay `undefined` unless the caller passes them — React drops an
+ * `undefined` prop, so a plain core tab renders neither attribute.
  */
 export declare function resolveBottomNavAccessibility(input: BottomNavTabAccessibilityInput): BottomNavTabAccessibilityProps;
 export interface EditRowStateInput {
@@ -109,12 +166,18 @@ export declare const bottomNavBarStructure: import("../../core/style").ThemedVar
 /** One tab slot: icon above label, centered, spaced by `rowGap`. Shared by every core tab AND the
  *  More tab's own touchable — both must reach the same 56dp visual height. */
 export declare const bottomNavTabStructure: 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 tab's own bounds — same `border.focus` treatment
+ *  Button/Input use. Its colour is applied inline over this, never hardcoded here. */
+export declare const bottomNavFocusRingStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /** One row inside the overflow sheet — Recent, a grouped section's destination, or a search result.
  *  Same shape as Select's own `selectRowStructure` / Menu's `menuRowStructure`. */
 export declare const overflowRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /** A grouped overflow section's header row. Omitted entirely for a section with no `label` (a
  *  flat/ungrouped section) — the component, not this resolver, decides whether to render it. */
 export declare const overflowSectionHeaderStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The count pill, absolutely positioned over a destination icon's top-right corner. Width grows
+ *  leftward from the `end` anchor as the count widens ("99+"), never shifting the icon itself. */
+export declare const bottomNavBadgePillStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /** A row inside the edit-mode view — a current-core-tab slot chip, or the "Reset to default" row.
  *  Slightly tighter horizontal padding + a radius than `overflowRowStructure`: these rows read as a
  *  distinct, self-contained mini-list rather than a continuation of the section list below them. */

package/lib/typescript/modules/bottom-nav/BottomNavIconWithBadge.d.ts

@@ -0,0 +1,25 @@
+/**
+ * BottomNavIconWithBadge — PRIVATE sub-component (not exported from `index.ts`, same status as
+ * `BottomNavOverflowSheet`). A destination icon plus its optional attention badge, shared by the
+ * bar's core tabs, the More trigger, and every overflow-sheet row so the badge renders identically
+ * everywhere. `appearance="count"` is the numeric pill (display capped per
+ * `BOTTOM_NAV_BADGE_MAX_COUNT`); `appearance="dot"` is the More trigger's presence-only dot — the
+ * summed overflow count still reaches AT users through the trigger's accessible name, the visual
+ * just stays as quiet as the bar's own active-indicator dot idiom.
+ *
+ * Takes the raw `badgeCount` primitive, not a resolved `BottomNavBadgeState` object, so this
+ * component's `React.memo` actually holds — the parent resolves its own state object for the
+ * accessible name but never passes that fresh-per-render object down.
+ */
+import type { IconName } from "../../core/icon";
+interface BottomNavIconWithBadgeProps {
+    readonly icon: IconName;
+    readonly iconSize: number;
+    readonly iconColor: string;
+    readonly badgeCount: number | undefined;
+    readonly appearance?: "count" | "dot";
+    readonly badgeTestID: string | undefined;
+}
+export declare const BottomNavIconWithBadge: import("react").NamedExoticComponent<BottomNavIconWithBadgeProps>;
+export {};
+//# sourceMappingURL=BottomNavIconWithBadge.d.ts.map

package/lib/typescript/modules/bottom-nav/BottomNavTab.d.ts

@@ -0,0 +1,34 @@
+/**
+ * BottomNavTab — PRIVATE sub-component (not exported from `index.ts`, same status as
+ * `BottomNavOverflowSheet` / `BottomNavIconWithBadge`). ONE slot of the bar: icon + badge, label,
+ * focus ring, and the active-indicator dot. Both the core tabs and the trailing More slot render
+ * through it, so the two can never drift apart.
+ *
+ * Split out of `BottomNav.tsx`'s `coreTabs.map()` for two reasons. Rules of Hooks: the indicator's
+ * transition needs a per-tab `useEffect`, which a loop body can't hold. And re-renders: with the
+ * slot memoized, a selection change re-renders the two tabs whose `selected` actually flipped
+ * instead of the whole bar, and the press/focus handlers stop being fresh closures per render.
+ *
+ * Keyboard/AT focus lives here, not in the parent — nothing outside one tab reads it, and holding
+ * it locally keeps a focus change from re-rendering the bar.
+ */
+import type { IconName } from "../../core/icon";
+interface BottomNavTabProps {
+    /** Handed straight back to `onPress` — the More slot's handler takes no argument and ignores it. */
+    readonly id: string;
+    readonly label: string;
+    readonly icon: IconName;
+    /** Overrides the accessible name whole — the badge count is then never folded in. */
+    readonly accessibilityLabel?: string | undefined;
+    readonly badgeCount: number | undefined;
+    readonly badgeAppearance?: "count" | "dot";
+    readonly selected: boolean;
+    /** More slot only — tracks whether the overflow sheet is showing. */
+    readonly expanded?: boolean | undefined;
+    readonly onPress: (id: string) => void;
+    /** Seeds `${testID}-indicator`, `-badge`, `-focus-ring`. */
+    readonly testID: string | undefined;
+}
+export declare const BottomNavTab: import("react").NamedExoticComponent<BottomNavTabProps>;
+export {};
+//# sourceMappingURL=BottomNavTab.d.ts.map

package/lib/typescript/modules/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,29 @@
+/**
+ * BottomSheet — gesture-driven snap points on a modal panel. Uses reanimated shared values for
+ * translateY and gesture-handler pan on the grabber.
+ *
+ * Timing, easing and the spring come from the global motion system (`core/motion`): the panel rides
+ * the shared `snappy` spring, the scrim fades over the shared `normal` duration, and a tier that
+ * can't afford springs falls back to a timed slide. Under reduce-motion both values are assigned
+ * outright — no tween, no frozen half-slid frame. The panel is unmounted by a timer, never by an
+ * animation callback: an interrupted animation must still unmount the sheet.
+ *
+ * Every translateY write — mount, exit, snap and swipe-dismiss — goes through `slideTo`, so the
+ * reduce-motion branch cannot be bypassed by one call site. A swipe past the dismiss threshold also
+ * reports through `onRequestClose`; the sheet is controlled, so sliding it away is not closing it.
+ */
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+export interface BottomSheetProps {
+    visible: boolean;
+    onRequestClose: () => void;
+    children: ReactNode;
+    /** Snap heights as fractions of window height (0.25 = quarter sheet). */
+    snapPoints?: readonly number[];
+    initialSnapIndex?: number;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const BottomSheet: import("react").NamedExoticComponent<BottomSheetProps>;
+//# sourceMappingURL=BottomSheet.d.ts.map

package/lib/typescript/modules/bottom-sheet/BottomSheet.variants.d.ts

@@ -0,0 +1,13 @@
+import type { RoleColors, Theme } from "../../theme/hooks";
+export declare const BOTTOM_SHEET_BACKDROP = "#00000080";
+export declare function resolveBottomSheetSnapOffset(snapFraction: number, windowHeight: number): number;
+export declare function resolveNearestSnapIndex(offsetY: number, snapOffsets: readonly number[]): number;
+export interface BottomSheetPanelColors {
+    readonly background: string;
+    readonly grabber: string;
+}
+export declare function resolveBottomSheetPanelColors(colors: RoleColors): BottomSheetPanelColors;
+export declare const bottomSheetPanelStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const bottomSheetHandleStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const bottomSheetGrabberStructure: import("../../core/style").ThemedVariantResolver<object, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=BottomSheet.variants.d.ts.map

package/lib/typescript/modules/bottom-sheet/index.d.ts

@@ -0,0 +1,3 @@
+export { BottomSheet } from "./BottomSheet";
+export type { BottomSheetProps } from "./BottomSheet";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/button/Button.d.ts

@@ -4,6 +4,7 @@
  * SAME add-to-cart button, 195 web usages). Every other module copies the patterns here: how variants
  * resolve, how `tone` maps to role colours, how accessibility is wired, and the shape of the tests.
  */
+import type { GestureResponderEvent, MouseEvent, NativeSyntheticEvent, TargetedEvent } from "react-native";
 import type { IconName } from "../../core/icon";
 import type { LayoutStyle } from "../../core/style";
 import type { ButtonSize, ButtonTone, ButtonVariant, IconPosition } from "./Button.variants";
@@ -14,8 +15,28 @@ interface ButtonBaseProps {
     iconPosition?: IconPosition;
     loading?: boolean;
     disabled?: boolean;
+    /**
+     * Toggle state for a button that stays on, e.g. a Bold/Italic toolbar control. ACCESSIBILITY ONLY
+     * — appearance stays with `variant`, which callers already swap for the active look; without this
+     * the on/off state is conveyed by colour alone (WCAG 1.4.1) and never announced (4.1.2).
+     * Omit it entirely on an ordinary button so it does not announce "not pressed".
+     */
+    selected?: boolean;
     fullWidth?: boolean;
     onPress?: () => void;
+    /**
+     * The gesture/pointer/keyboard handlers below plus `accessibilityHint` are the exact set a
+     * wrapping `Tooltip` injects via `cloneElement`. Declared explicitly because `{...rest}` is banned
+     * repo-wide: an undeclared prop is dropped, so without these a tooltip on a Button never opens.
+     * Each is chained after Button's own press/focus state, never in place of it.
+     */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    onPressOut?: (event: GestureResponderEvent) => void;
+    onHoverIn?: (event: MouseEvent) => void;
+    onHoverOut?: (event: MouseEvent) => void;
+    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    accessibilityHint?: string;
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     style?: LayoutStyle;
     testID?: string;

package/lib/typescript/modules/button/Button.variants.d.ts

@@ -13,8 +13,8 @@
  * Everything here is 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 } from "../../theme";
-import type { Theme } from "../../theme";
+import type { RoleColors } from "../../theme/hooks";
+import type { Theme } from "../../theme/hooks";
 export type ButtonVariant = "solid" | "outline" | "ghost" | "link";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonTone = "accent" | "neutral" | "danger";
@@ -86,16 +86,26 @@ export interface ButtonAccessibilityInput {
     readonly accessibilityLabel?: string | undefined;
     readonly disabled?: boolean | undefined;
     readonly loading?: boolean | undefined;
+    /** The RAW prop, before any default — only a caller that passed it gets toggle semantics. */
+    readonly selected?: boolean | undefined;
     readonly onPress?: (() => void) | undefined;
 }
 export interface ButtonAccessibilityProps {
     readonly accessibilityRole: "button";
     /** Falls back to the visible label; required by the type for an icon-only button. */
     readonly accessibilityLabel: string | undefined;
+    /** 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-busy": boolean;
+    /** The WEB half of `selected`. `aria-pressed` is the correct ARIA for a toggle button and has no
+     *  React Native equivalent, so the native half rides `accessibilityState` below. */
+    readonly "aria-pressed": boolean | undefined;
+    /** The NATIVE half of `selected` — discarded by react-native-web, so it never reaches the DOM as
+     *  an `aria-selected` that would be invalid on `role="button"`. `undefined` when untoggled. */
     readonly accessibilityState: {
-        readonly disabled: boolean;
-        readonly busy: boolean;
-    };
+        readonly selected: boolean;
+    } | undefined;
     /** The `Pressable` disabled prop — true while disabled OR loading, so touches are blocked. */
     readonly disabled: boolean;
     /** Gated `onPress`: undefined while disabled or loading, so a press can't fire. */
@@ -107,10 +117,13 @@ export interface ButtonAccessibilityProps {
  *  - disabled OR loading blocks the press (guarded `onPress` AND the `disabled` prop), so a loading
  *    button is non-interactive while it works.
  *
- * `accessibilityState.disabled` tracks the same `blocked` flag the `Pressable disabled` prop uses, so
- * what a screen reader hears matches what actually renders: a loading button announces `busy` AND
- * `disabled` (RN's `disabled` prop forces `disabled` into the state regardless). Reporting `busy` here
- * while the rendered control forced `disabled` back to true would be a lie to assistive tech.
+ * `aria-disabled` tracks the same `blocked` flag the `Pressable disabled` prop uses, so what a screen
+ * reader hears matches what actually renders: a loading button announces `busy` AND `disabled` (RN's
+ * `disabled` prop forces `disabled` into the state regardless). Reporting `busy` here while the
+ * rendered control forced `disabled` back to true would be a lie to assistive tech.
+ *
+ * `selected` is only exposed when the CALLER passed it, mirroring `resolveChipAccessibility`: an
+ * ordinary button has no toggle state and must not announce "not pressed" as if it had one.
  */
 export declare function resolveButtonAccessibility(input: ButtonAccessibilityInput): ButtonAccessibilityProps;
 /**

package/lib/typescript/modules/button-group/ButtonGroup.d.ts

@@ -12,8 +12,10 @@
  * `accessibilityRole="radiogroup"` so assistive tech announces the grouping without collapsing the
  * individually-focusable segments into one.
  *
- * No animation anywhere (selection is a conditional fill, not a slide or a fade), so — like
- * `RadioGroup` — there is nothing here for `useReducedMotion` (WCAG 2.3.3) to gate.
+ * No animation anywhere, deliberately: selection is a conditional fill, and the segments share one
+ * continuous border, so a per-segment press scale (Button's affordance) would visibly detach a
+ * segment from the control it is part of. The `pressed` fill swap is the affordance instead. Nothing
+ * animates, so — like `RadioGroup` — there is nothing here for reduce motion (WCAG 2.3.3) to gate.
  */
 import type { LayoutStyle } from "../../core/style";
 import type { ButtonGroupSize } from "./ButtonGroup.variants";

package/lib/typescript/modules/button-group/ButtonGroup.variants.d.ts

@@ -13,7 +13,7 @@
  *  - `resolveButtonGroupSegmentAccessibility` derives the per-segment a11y surface purely, mirroring
  *    `resolveRadioRowAccessibility` — this is a single-choice value selector, not a set of tabs.
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type ButtonGroupSize = "sm" | "md";
 /** Same floor as Button/RadioGroup/Tabs — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
  * stay isolated. */
@@ -145,10 +145,10 @@ export interface ButtonGroupSegmentAccessibilityInput {
 }
 export interface ButtonGroupSegmentAccessibilityProps {
     readonly accessibilityRole: "radio";
-    readonly accessibilityState: {
-        readonly checked: boolean;
-        readonly disabled: 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-checked": boolean;
+    readonly "aria-disabled": boolean;
     /** The `Pressable` disabled prop — blocks touches without relying on `onPress` gating alone. */
     readonly disabled: boolean;
 }
@@ -159,6 +159,19 @@ export interface ButtonGroupSegmentAccessibilityProps {
  * selector shape `RadioGroup` already uses, just drawn as connected segments instead of rows).
  */
 export declare function resolveButtonGroupSegmentAccessibility(input: ButtonGroupSegmentAccessibilityInput): ButtonGroupSegmentAccessibilityProps;
+export interface ButtonGroupKeyInput {
+    readonly key: string;
+    /** The index the group's single tab stop currently sits on. */
+    readonly index: number;
+    readonly count: number;
+}
+/**
+ * The WAI-ARIA radio-group keyboard contract, resolved purely: arrows move one segment and WRAP (the
+ * arrows both move and select, so there is no "past the end" to fall off), Home/End jump to the ends.
+ * Returns `undefined` for any other key — also how the caller knows not to swallow that keystroke.
+ * Duplicated from `RadioGroup.variants.ts` rather than imported: modules stay isolated.
+ */
+export declare function resolveButtonGroupKeyIndex(input: ButtonGroupKeyInput): number | undefined;
 /**
  * The container — a clipping rect only. `overflow: hidden` + `borderRadius` clips every segment's
  * fill (and the outer segments' square corners) to this single rounded outline, so the selected

package/lib/typescript/modules/card/Card.variants.d.ts

@@ -9,8 +9,8 @@
  * Free of React, so the WCAG test imports this directly (mocking only `react-native`'s
  * `StyleSheet`, as `core/style` does).
  */
-import type { RoleColors } from "../../theme";
-import type { Theme } from "../../theme";
+import type { RoleColors } from "../../theme/hooks";
+import type { Theme } from "../../theme/hooks";
 export type CardVariant = "elevated" | "outline" | "flat";
 export interface CardVariantColors {
     readonly background: string;

package/lib/typescript/modules/charts/BarChart.d.ts

@@ -0,0 +1,26 @@
+import type { LayoutStyle } from "../../core/style";
+export interface BarChartSeries {
+    readonly name: string;
+    readonly color?: string;
+}
+export interface BarChartDatum {
+    readonly label: string;
+    readonly values: number[];
+}
+export interface BarChartProps {
+    data: BarChartDatum[];
+    series?: BarChartSeries[];
+    height?: number;
+    showGrid?: boolean;
+    showValues?: boolean;
+    yAxisFormatter?: (value: number) => string;
+    stacked?: boolean;
+    /** Text legend naming each series. Only drawn when 2+ series are present. */
+    showLegend?: boolean;
+    onPressBar?: (datum: BarChartDatum, seriesIndex: number) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const BarChart: import("react").NamedExoticComponent<BarChartProps>;
+//# sourceMappingURL=BarChart.d.ts.map

package/lib/typescript/modules/charts/BarList.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+export interface BarListItem {
+    readonly label: string;
+    readonly value: number;
+    readonly color?: string;
+    readonly icon?: ReactNode;
+}
+export interface BarListProps {
+    items: BarListItem[];
+    maxValue?: number;
+    onPressItem?: (item: BarListItem, index: number) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const BarList: import("react").NamedExoticComponent<BarListProps>;
+//# sourceMappingURL=BarList.d.ts.map

package/lib/typescript/modules/charts/ChartLegend.d.ts

@@ -0,0 +1,16 @@
+import type { SeriesShape } from "./Charts.variants";
+export type ChartLegendGlyph = "swatch" | "line" | "mark";
+export interface ChartLegendEntry {
+    readonly color: string;
+    readonly label: string;
+    /** Only read by the `line` and `mark` glyphs — a `swatch` legend has no per-mark shape. */
+    readonly shape?: SeriesShape;
+    readonly dash?: readonly number[];
+}
+export interface ChartLegendProps {
+    readonly entries: readonly ChartLegendEntry[];
+    readonly glyph: ChartLegendGlyph;
+    readonly testID: string | undefined;
+}
+export declare const ChartLegend: import("react").NamedExoticComponent<ChartLegendProps>;
+//# sourceMappingURL=ChartLegend.d.ts.map