pixelize-native-library 1.0.7 → 1.2.0

package/lib/typescript/modules/search-bar/SearchBar.variants.d.ts

@@ -0,0 +1,179 @@
+/**
+ * SearchBar's style + behaviour resolution — same split as `Input.variants`:
+ *  - STRUCTURE (row/field/affordance sizing, radius, border WIDTH) lives in the `createThemedVariants`
+ *    resolvers below, registered once per (theme, size) — never rebuilt per render.
+ *  - COLOUR is resolved from the theme's ROLE colours by `resolveSearchBarColors` /
+ *    `resolveSearchBarBorderColor`, never a raw ramp and never a hardcoded hex.
+ *  - BEHAVIOUR derivation (`resolveSearchBarAccessibility`, `shouldShowClear`,
+ *    `resolveSearchBarFieldHitSlop`, `resolveSearchBarTrailingHitSlop`) is kept pure so the a11y +
+ *    touch-target contract is unit-testable without rendering React Native.
+ *
+ * Free of React and of `lucide`, 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";
+export type SearchBarSize = "sm" | "md";
+/** Same floor as Button/Input/ButtonGroup — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported:
+ * modules stay isolated. */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface SearchBarSizeSpec {
+    /** Visual field height in dp (fixed, not a minimum — the hitSlop math depends on it). */
+    readonly height: number;
+    /** Query / placeholder text size, on the theme's `fontSizes` scale. */
+    readonly fontSize: number;
+    /** Leading search glyph + trailing clear glyph size in dp. */
+    readonly iconSize: number;
+    /** Touch expansion so `height + 2·hitSlop ≥ 44`. */
+    readonly hitSlop: number;
+}
+/**
+ * Deliberately the same height/fontSize/iconSize numbers as `INPUT_SIZES` `sm`/`md`, so a SearchBar
+ * and an Input placed in the same form line up exactly.
+ */
+export declare const SEARCH_BAR_SIZES: {
+    readonly sm: {
+        readonly height: 32;
+        readonly fontSize: 14;
+        readonly iconSize: 16;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly height: 40;
+        readonly fontSize: 16;
+        readonly iconSize: 18;
+        readonly hitSlop: number;
+    };
+};
+/**
+ * The clear button's own rendered width. Its height comes from `alignSelf: "stretch"` (the field's
+ * full `spec.height`) plus the same vertical `hitSlop` the field uses, but its WIDTH cannot come
+ * from horizontal hitSlop: the clear button sits flush against the `TextInput`, and React Native
+ * never clips hitSlop to a sibling's bounds — it resolves an overlap to whichever renders LATER,
+ * which is the clear button. Horizontal slop there would silently steal taps from the right end of
+ * the query text. So the rendered node clears 44dp on its own and both horizontal slops are 0 —
+ * the same overlap-elimination `ButtonGroup` documents for its internal segment edges.
+ */
+export declare const CLEAR_BUTTON_WIDTH = 44;
+export interface SearchBarColors {
+    /** Query text. */
+    readonly text: string;
+    /** Placeholder text — the pairing most likely to fail 4.5:1, measured in `SearchBar.test.ts`. */
+    readonly placeholder: string;
+    /** Leading search glyph and the resting clear glyph. */
+    readonly icon: string;
+    /** Resting field outline. */
+    readonly border: string;
+    /** Field outline while focused, and the offset focus ring. */
+    readonly focusBorder: string;
+    /**
+     * Fill behind the clear / cancel affordance while pressed. `bg.sunken`, not `bg.hover`: the
+     * saturated `hover` mid-tone drops brand-tinted foregrounds below 4.5:1 on several brands — the
+     * same class of bug `Button`'s "neutral" tone and `RadioGroup`/`Menu`'s pressed row document.
+     */
+    readonly pressedFill: string;
+    /**
+     * Glyph / label colour ON `pressedFill`. `fg.default` rather than keeping `icon` (`fg.muted`) or
+     * `cancelLabel` (`accent.text`): those two are measured against the CANVAS, and neither is
+     * measured against `bg.sunken` anywhere in this library. `fg.default` on `bg.sunken` is (see
+     * `Menu`'s pressed row), so the pressed state adopts it instead of shipping an unmeasured pairing.
+     */
+    readonly onPressedFill: string;
+    /** The "Cancel" text button's label, read on the canvas. */
+    readonly cancelLabel: string;
+}
+/**
+ * Maps SearchBar's fixed visual roles onto ROLE colours — never a hardcoded hex. There is no `tone`
+ * or `status` union: a search field reports no validity state and carries no brand identity of its
+ * own, so — like `RadioGroup`/`ButtonGroup` — this is pure indirection, not a union to resolve.
+ *
+ * The field renders NO background fill (transparent, exactly like `Input`'s box), so every colour
+ * here is read against `bg.canvas`.
+ */
+export declare function resolveSearchBarColors(colors: RoleColors): SearchBarColors;
+/** The field outline tracks focus, same cue `Select`'s trigger uses for focused-or-open. */
+export declare function resolveSearchBarBorderColor(colors: SearchBarColors, focused: boolean): string;
+/** The clear affordance exists only for a non-empty query, and never on a disabled field. */
+export declare function shouldShowClear(value: string, disabled: boolean): boolean;
+export interface SearchBarHitSlop {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+}
+/**
+ * The query field's per-edge touch expansion. Vertical and left expansion are always safe (nothing
+ * interactive sits above, below, or to the left of the field). The RIGHT edge is zeroed whenever a
+ * trailing affordance — the clear button, or the "Cancel" button outside the field — is rendered:
+ * the field's own slop would otherwise overlap it, and React Native resolves overlapping siblings'
+ * hitSlop to whichever renders LATER, so the field would never win that region anyway while
+ * silently enlarging the ambiguous zone. Same per-edge reasoning as `ButtonGroup`'s segments.
+ */
+export declare function resolveSearchBarFieldHitSlop(size: SearchBarSize, input: {
+    readonly trailingAdjacent: boolean;
+}): SearchBarHitSlop;
+/**
+ * A trailing affordance's per-edge touch expansion. Vertical only for the clear button (it sits
+ * between the query text and the field's own right edge); the cancel button additionally expands
+ * right, since that edge is the whole control's true outer edge and shares with nothing.
+ */
+export declare function resolveSearchBarTrailingHitSlop(size: SearchBarSize, input: {
+    readonly outerRight: boolean;
+}): SearchBarHitSlop;
+export interface SearchBarAccessibilityInput {
+    readonly placeholder: string;
+    readonly accessibilityLabel?: string | undefined;
+    readonly disabled?: boolean | undefined;
+}
+export interface SearchBarAccessibilityProps {
+    /** The field's accessible name. RN's `TextInput` has no `htmlFor`-equivalent to a sibling label
+     * and SearchBar renders no visible label, so the placeholder is the default — but a placeholder
+     * doubling as the name is a fallback, not a contract, and a caller whose placeholder reads as a
+     * prompt ("Search…") rather than a name ("Search customers") needs to be able to say so. */
+    readonly accessibilityLabel: string;
+    readonly "aria-disabled": boolean;
+    /** The `TextInput` `editable` prop — false while disabled, so the field blocks input. */
+    readonly editable: boolean;
+}
+export declare function resolveSearchBarAccessibility(input: SearchBarAccessibilityInput): SearchBarAccessibilityProps;
+/** The outer row — the field plus, when shown, the "Cancel" button beside it. */
+export declare const searchBarRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The field box. Structural only — layout, height, padding, radius, border WIDTH; the border COLOUR
+ * is focus-driven and applied inline over this. No background: like `Input`, the field is
+ * transparent so every colour it shows is read against the canvas (which is what `SearchBar.test.ts`
+ * measures).
+ */
+export declare const searchBarFieldStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+            paddingHorizontal: 12;
+        };
+        md: {
+            height: 40;
+            paddingHorizontal: 16;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * The clear button. `alignSelf: "stretch"` fills the field's full height (so the vertical hitSlop
+ * math holds against what actually renders — the same assumption `Input`'s `TextInput` relies on),
+ * and `width` carries the horizontal 44dp floor on its own (see `CLEAR_BUTTON_WIDTH`).
+ */
+export declare const searchBarClearStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The "Cancel" text button. `minWidth` keeps the rendered node at the 44dp floor even for a short
+ * `cancelLabel` — horizontal hitSlop can only expand its outer right edge, so the node itself must
+ * clear the floor, the same fix `ButtonGroup`'s segments use.
+ */
+export declare const searchBarCancelStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+        };
+        md: {
+            height: 40;
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=SearchBar.variants.d.ts.map

package/lib/typescript/modules/search-bar/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Public surface of `pixelize-native-library/search-bar`. Value exports and type exports are split
+ * for `verbatimModuleSyntax`. The resolvers (`resolveSearchBarColors`, `SEARCH_BAR_SIZES`, …) stay
+ * internal — a consumer configures a SearchBar through its props, never by importing its internals.
+ * No `icon` prop (the leading/trailing glyphs are fixed), so unlike `input/index.ts` there is no
+ * `IconName` re-export.
+ */
+export { SearchBar } from "./SearchBar";
+export type { SearchBarProps } from "./SearchBar";
+export type { SearchBarSize } from "./SearchBar.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/section/Section.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Section — a labelled content block with a hairline top border, an uppercase muted label, and
+ * ordinary `children` composition below.
+ *
+ * The label is the section's heading, so it carries `accessibilityRole="header"` at level 2 (WCAG
+ * 1.3.1 / 2.4.6) — the same role and level `SectionList`'s own section header renders with.
+ */
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+export interface SectionProps {
+    label: string;
+    children?: ReactNode;
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Section: import("react").NamedExoticComponent<SectionProps>;
+//# sourceMappingURL=Section.d.ts.map

package/lib/typescript/modules/section/Section.variants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Section's style resolution — same split as `Divider.variants` / `Card.variants`.
+ */
+import type { RoleColors, Theme } from "../../theme/hooks";
+export interface SectionColors {
+    readonly border: string;
+    readonly label: string;
+}
+export declare function resolveSectionColors(colors: RoleColors): SectionColors;
+export declare const sectionContainerStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const sectionLabelStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").TextStyle>, import("react-native").TextStyle>;
+//# sourceMappingURL=Section.variants.d.ts.map

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

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

package/lib/typescript/modules/section-list/SectionList.d.ts

@@ -0,0 +1,26 @@
+/**
+ * SectionList — virtualized sections built on `core/list` VirtualSectionList.
+ */
+import type { ReactElement } from "react";
+import type { LayoutStyle } from "../../core/style";
+export interface SectionListSection<T> {
+    readonly title: string;
+    readonly data: readonly T[];
+}
+export interface SectionListProps<T> {
+    sections: readonly SectionListSection<T>[];
+    renderItem: (info: {
+        item: T;
+        sectionIndex: number;
+        index: number;
+    }) => ReactElement | null;
+    keyExtractor: (item: T, index: number) => string;
+    itemHeight?: number;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+declare function SectionListInner<T>({ sections, renderItem, keyExtractor, itemHeight, style, testID, }: SectionListProps<T>): import("react").JSX.Element;
+export declare const SectionList: typeof SectionListInner;
+export {};
+//# sourceMappingURL=SectionList.d.ts.map

package/lib/typescript/modules/section-list/SectionList.variants.d.ts

@@ -0,0 +1,3 @@
+import type { Theme } from "../../theme/hooks";
+export declare const sectionListHeaderStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=SectionList.variants.d.ts.map

package/lib/typescript/modules/section-list/index.d.ts

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

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

@@ -0,0 +1,45 @@
+/**
+ * SegmentedControl — an inline, iOS-style single-choice control for switching between 2–5 mutually
+ * exclusive options (filters, view modes, date ranges). A rounded track (`bg.sunken`) holds every
+ * segment; the active one is marked by a raised pill (`bg.surface` + `Card`'s own elevation
+ * treatment) that slides to the selected segment's measured position — the identical
+ * measure-via-`onLayout` + `Animated.Value` mechanism `Tabs`' sliding indicator uses, keyed by
+ * `value` so reordering `options` can never apply a stale measurement to the wrong segment.
+ *
+ * Unlike `ButtonGroup`/`Tabs`, the active state is NOT accent-coloured: the pill is a neutral raised
+ * surface, and elevation — not colour — is what marks it, because `bg.surface` vs `bg.sunken` alone
+ * measures nowhere near WCAG 1.4.11's 3:1 (see `SegmentedControl.variants.ts`). Selection reaches
+ * assistive tech independently via `accessibilityState.selected`.
+ *
+ * The pill is a SELECTION marker, never a focus one — keyboard/AT focus draws its own inset ring on
+ * the focused segment (WCAG 2.4.7), the same treatment `BottomNavTab` uses.
+ */
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+import type { SegmentedControlSize } from "./SegmentedControl.variants";
+export interface SegmentedControlOption {
+    readonly value: string;
+    /** Always required — an icon-only segment has no accessible name a screen reader can announce,
+     *  the same rule `Badge` documents for its own label. */
+    readonly label: string;
+    readonly icon?: IconName;
+    readonly disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    options: SegmentedControlOption[];
+    value: string;
+    onChange: (value: string) => void;
+    size?: SegmentedControlSize;
+    /** `true` (default): segments flex equally to fill the width. `false`: segments size to their
+     *  own content (padding + `minWidth`). */
+    fullWidth?: boolean;
+    /** Dims and blocks every segment, regardless of a per-option `disabled`. */
+    disabled?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+declare function SegmentedControlImpl({ options, value, onChange, size, fullWidth, disabled, style, testID, }: SegmentedControlProps): import("react").JSX.Element;
+export declare const SegmentedControl: import("react").MemoExoticComponent<typeof SegmentedControlImpl>;
+export {};
+//# sourceMappingURL=SegmentedControl.d.ts.map

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

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

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

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

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

@@ -1,13 +1,5 @@
 /**
- * Select — a trigger styled like an Input box (same size/border/focus-ring conventions) that opens
- * an option list in React Native's OWN `Modal`. Imported directly from `"react-native"` here on
- * purpose: this module must never depend on the library's own `Modal` COMPONENT (its rendered
- * output/behaviour) — Select still owns its option list's markup outright.
- *
- * The one deliberate exception is the web portal mechanism: `ModalPortalContext`/`renderWebPortal`
- * are a plain context + a stateless helper with no React-tree footprint of their own (not the
- * `Modal` component), so Select reads the same ones `Modal.tsx` reads to stay consistent once a
- * consumer opts in via `ModalPortalProvider` — see `../modal/ModalPortalContext.ts`.
+ * Select — a trigger styled like an Input box that opens an option list in React Native's OWN `Modal`.
  */
 import type { ReactNode } from "react";
 import type { LayoutStyle } from "../../core/style";
@@ -15,10 +7,6 @@ import type { SelectSize } from "./Select.variants";
 export interface SelectOption {
     readonly label: string;
     readonly value: string;
-    /** Optional adornment rendered before the label — on the option row AND on the trigger while
-     *  this option is selected. For domain visuals a name-keyed `IconName` cannot express (status
-     *  chips, priority glyphs, avatars) — same ReactNode content-slot precedent as `ListItem`'s
-     *  `leading`. The node must be fixed-size; the label still owns the row's flexible width. */
     readonly leading?: ReactNode;
 }
 export interface SelectProps {
@@ -29,7 +17,6 @@ export interface SelectProps {
     label?: string;
     disabled?: boolean;
     size?: SelectSize;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     containerStyle?: LayoutStyle;
     testID?: string;
 }

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

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

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

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

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

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