pixelize-native-library 1.0.7 → 1.2.1

package/lib/typescript/modules/avatar-group/AvatarGroup.variants.d.ts

@@ -0,0 +1,94 @@
+/**
+ * AvatarGroup's style resolution — same split as `Avatar.variants`:
+ *  - STRUCTURE (row overlap, overflow pill sizing) lives in the themed resolvers and plain constants.
+ *  - 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 behaviour 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";
+import { type AvatarSize } from "../avatar/Avatar.variants";
+/** Default visible faces before collapsing the remainder into a `+N` overflow pill. */
+export declare const AVATAR_GROUP_DEFAULT_MAX = 4;
+/** Ring width separating stacked faces — drawn in the canvas colour so each face reads distinctly. */
+export declare const AVATAR_GROUP_RING_WIDTH = 2;
+export interface AvatarGroupColors {
+    readonly ring: string;
+    readonly overflowBackground: string;
+    readonly overflowText: string;
+}
+export declare function resolveAvatarGroupColors(colors: RoleColors): AvatarGroupColors;
+/** Negative overlap as a fraction of the avatar diameter — same visual density as common stacked rows. */
+export declare function resolveAvatarGroupOverlap(size: AvatarSize): number;
+export declare function resolveAvatarGroupVisibleCount(total: number, max: number): number;
+export declare function resolveAvatarGroupOverflowCount(total: number, visible: number): number;
+export interface AvatarGroupOverflowAccessibilityProps {
+    readonly accessible: true;
+    readonly accessibilityRole: "text";
+    readonly accessibilityLabel: string;
+}
+/**
+ * WCAG 2.5.3: the accessible name must CONTAIN the visible "+N" text (same contract as
+ * `MoreItems`'s trigger), so a voice-control user saying what they read still lands on this pill.
+ * `"text"`, not `"button"` — the pill is informational chrome, not interactive (same as `Badge`).
+ */
+export declare function resolveAvatarGroupOverflowAccessibility(count: number): AvatarGroupOverflowAccessibilityProps;
+/**
+ * A face's honest-but-generic name when its consumer never set `accessibilityLabel`. Unlike a
+ * standalone `Avatar` (usually sits beside a visible name, so undecorated is a fair default —
+ * see `resolveAvatarAccessibility`), a grouped face has no adjacent name: falling through to
+ * `Avatar`'s decorative default would leave a screen reader user unable to tell how many distinct
+ * people the stack represents.
+ */
+export declare function resolveAvatarGroupFaceFallbackLabel(index: number): string;
+export declare const avatarGroupStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const avatarGroupItemStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const avatarGroupOverflowStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        xs: {
+            width: 24;
+            height: 24;
+            borderRadius: 9999;
+        };
+        sm: {
+            width: 32;
+            height: 32;
+            borderRadius: 9999;
+        };
+        md: {
+            width: 40;
+            height: 40;
+            borderRadius: 9999;
+        };
+        lg: {
+            width: 56;
+            height: 56;
+            borderRadius: 9999;
+        };
+        xl: {
+            width: 72;
+            height: 72;
+            borderRadius: 9999;
+        };
+    };
+}, import("react-native").ViewStyle>;
+export declare const avatarGroupOverflowLabelStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        xs: {
+            fontSize: 12;
+        };
+        sm: {
+            fontSize: 14;
+        };
+        md: {
+            fontSize: 16;
+        };
+        lg: {
+            fontSize: 20;
+        };
+        xl: {
+            fontSize: 24;
+        };
+    };
+}, import("react-native").TextStyle>;
+//# sourceMappingURL=AvatarGroup.variants.d.ts.map

package/lib/typescript/modules/avatar-group/index.d.ts

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

package/lib/typescript/modules/badge/Badge.d.ts

@@ -5,9 +5,11 @@
  */
 import type { IconName } from "../../core/icon";
 import type { LayoutStyle } from "../../core/style";
-import type { BadgeSize, BadgeTone } from "./Badge.variants";
+import type { BadgeSize, BadgeTone, CustomToneColors } from "./Badge.variants";
 export interface BadgeProps {
     tone?: BadgeTone;
+    /** Required when `tone="custom"`. */
+    customColors?: CustomToneColors;
     size?: BadgeSize;
     label: string;
     icon?: IconName;

package/lib/typescript/modules/badge/Badge.variants.d.ts

@@ -8,10 +8,14 @@
  * 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";
+import type { RoleColors, StatusRole, Theme } from "../../theme/hooks";
 export type BadgeSize = "sm" | "md";
-/** `accent`/`neutral` are brand-driven emphasis; the rest mirror the theme's status roles. */
-export type BadgeTone = "accent" | "neutral" | StatusRole;
+export type CustomToneColors = {
+    readonly bg: string;
+    readonly fg: string;
+};
+/** `custom` requires `customColors` — server-driven hex escape hatch. */
+export type BadgeTone = "accent" | "neutral" | StatusRole | "custom";
 export interface BadgeSizeSpec {
     /** Visual height in dp. */
     readonly height: number;
@@ -66,7 +70,7 @@ export interface BadgeToneColors {
  * and measures ≥ 5.05:1 against the canvas incidentally) — so the border reuses it, giving a
  * coloured outline that always matches the label, never an unreadable hairline.
  */
-export declare function resolveBadgeTone(colors: RoleColors, tone: BadgeTone): BadgeToneColors;
+export declare function resolveBadgeTone(colors: RoleColors, tone: BadgeTone, customColors?: CustomToneColors): BadgeToneColors;
 export interface BadgeAccessibilityInput {
     readonly label: string;
 }

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

@@ -0,0 +1,37 @@
+/**
+ * Banner — a persistent, INLINE message that sits in the layout and stays until dismissed.
+ * Distinct from the two neighbours it is easy to confuse it with: `toast` is a transient overlay
+ * that disappears on a timer, and `alert-dialog` is a modal that blocks the screen for a decision.
+ *
+ * `visible` drives a fade+slide enter/exit through `useEnterExit`. It defaults to `true`, and
+ * `useEnterExit` deliberately skips the enter for a banner that mounts already visible — so a
+ * consumer that never passes `visible` sees exactly the old, animation-free behaviour.
+ */
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+import type { BannerTone, BannerVariant } from "./Banner.variants";
+export interface BannerAction {
+    readonly label: string;
+    readonly onPress: () => void;
+}
+export interface BannerProps {
+    tone?: BannerTone;
+    variant?: BannerVariant;
+    message: string;
+    title?: string;
+    /** Overrides the tone's default glyph. Pass `null` for no icon at all. */
+    icon?: IconName | null;
+    /** Fades and slides the banner out when set to `false`, then unmounts it. */
+    visible?: boolean;
+    /** Renders a trailing dismiss control. Omit for a banner the user cannot close. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    action?: BannerAction;
+    /** Additional inline actions rendered after `action`. */
+    actions?: readonly BannerAction[];
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Banner: import("react").NamedExoticComponent<BannerProps>;
+//# sourceMappingURL=Banner.d.ts.map

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";

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
@@ -40,6 +40,12 @@ 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;
@@ -126,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 {
@@ -149,13 +159,14 @@ export interface EditRowState {
 /** Pure "is this the targeted slot" derivation, shared by the render tree and its tests — the same
  *  small-pure-predicate idiom `resolveReorderMoveState` uses for Reorder's own row gating. */
 export declare function resolveEditRowState(input: EditRowStateInput): EditRowState;
-/** The bar container: tabs laid out as equal-width flex children, top border separating it from the
- *  screen content above. Colour (border, background) is resolved from role tokens and applied
- *  inline over this — never a hardcoded hex here. */
+/** Tabs laid out as equal-width flex children; the bar separates from content by tone + elevation. */
 export declare const bottomNavBarStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /** 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>;

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,15 @@
+import type { RoleColors, Theme } from "../../theme/hooks";
+export declare const BOTTOM_SHEET_BACKDROP: string;
+export declare const BOTTOM_SHEET_IOS_HOME_INDICATOR_INSET = 20;
+export declare function resolveBottomSheetBottomInset(basePadding: number, platformOS: string): number;
+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

@@ -1,9 +1,4 @@
-/**
- * Button — the reference component. The single most-repeated shape in the audited apps (81 raw
- * TouchableOpacity in crm-mobile, 155 in ecommerce-mobile with three different style-key sets for the
- * 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,23 +9,24 @@ interface ButtonBaseProps {
     iconPosition?: IconPosition;
     loading?: boolean;
     disabled?: boolean;
+    selected?: boolean;
     fullWidth?: boolean;
     onPress?: () => void;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    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;
     style?: LayoutStyle;
     testID?: string;
 }
-/** A button with a visible text label. `accessibilityLabel` defaults to `label`. */
 interface LabelledButtonProps extends ButtonBaseProps {
     label: string;
     icon?: IconName;
     accessibilityLabel?: string;
 }
-/**
- * An icon-only button. It has no visible text, so `accessibilityLabel` is REQUIRED at the type level
- * — the single worst a11y trap on web (its tooltip was the only label on icon-only buttons in 22
- * files, and tooltips do not exist on touch). `label?: never` makes the two shapes mutually exclusive.
- */
 interface IconOnlyButtonProps extends ButtonBaseProps {
     icon: IconName;
     label?: never;

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";
@@ -42,19 +42,19 @@ export interface ButtonSizeSpec {
  */
 export declare const BUTTON_SIZES: {
     readonly sm: {
-        readonly height: 32;
+        readonly height: 44;
         readonly fontSize: 14;
         readonly iconSize: 16;
         readonly hitSlop: number;
     };
     readonly md: {
-        readonly height: 40;
+        readonly height: 52;
         readonly fontSize: 16;
         readonly iconSize: 18;
         readonly hitSlop: number;
     };
     readonly lg: {
-        readonly height: 48;
+        readonly height: 56;
         readonly fontSize: 18;
         readonly iconSize: 20;
         readonly hitSlop: number;
@@ -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;
 /**
@@ -124,15 +137,15 @@ export declare function resolveButtonAccessibility(input: ButtonAccessibilityInp
 export declare const buttonStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
         sm: {
-            height: 32;
+            height: 44;
             paddingHorizontal: 12;
         };
         md: {
-            height: 40;
+            height: 52;
             paddingHorizontal: 16;
         };
         lg: {
-            height: 48;
+            height: 56;
             paddingHorizontal: 24;
         };
     };

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

@@ -1,20 +1,3 @@
-/**
- * ButtonGroup — a segmented single-choice control. Visually connected segments sharing one outer
- * border and a divider line between adjacent segments, NOT a row of standalone `Button`s — that
- * connected/segmented treatment is a different structural shape than Button's own pill/rect
- * variants, so this is a standalone sibling (it never imports `../button`). The border/divider is
- * drawn PER SEGMENT, not once on the container: every edge that touches the selected segment omits
- * the stroke (see `resolveButtonGroupSegmentEdgeColors` — WCAG 1.4.11) and relies on the selected
- * fill's own contrast against the canvas instead.
- *
- * One component owns the whole group, same as `RadioGroup`: each segment carries its own
- * `accessibilityRole="radio"` + `accessibilityState.checked`, and the container carries
- * `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.
- */
 import type { LayoutStyle } from "../../core/style";
 import type { ButtonGroupSize } from "./ButtonGroup.variants";
 export interface ButtonGroupOption {