pixelize-native-library 1.0.6 → 1.2.0

package/lib/typescript/modules/rich-text-editor/RichTextEditor.variants.d.ts

@@ -0,0 +1,139 @@
+/**
+ * RichTextEditor's style + behaviour resolution — the same split every sibling module holds to:
+ *  - STRUCTURE lives in the `createThemedVariants` resolvers below — static per (brand, mode).
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveRichTextEditorColors`,
+ *    `resolveRichTextEditorHtmlStyle`), never a raw ramp, never a hardcoded hex.
+ *  - The toolbar/mention behaviour (`RICH_TEXT_EDITOR_TOOLBAR_ITEMS`, `resolveRichTextEditorActiveActions`,
+ *    `filterMentionCandidates`) is pure, so it is unit-tested without mounting the native editor.
+ *
+ * `resolveRichTextEditorHtmlStyle` is the one resolver that talks to `react-native-enriched-html`'s
+ * own `HtmlStyle` shape (types-only import — no runtime dependency on the package from this file).
+ * The mention pill (`mention`) reuses `accent.subtle`/`accent.text`, the one tint pair the role table
+ * already guarantees at 4.5:1 for every brand × mode (see `org-switcher/OrgSwitcher.variants.ts` for
+ * the same reasoning) rather than inventing a new pairing that would need its own contrast proof.
+ *
+ * Free of React and of any native import, so the WCAG + behaviour tests import it directly (mocking
+ * only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+import type { HtmlStyle, OnChangeStateEvent } from "react-native-enriched-html";
+import type { IconName } from "../../core/icon";
+import type { RoleColors, Theme } from "../../theme/hooks";
+export interface MentionUser {
+    readonly id: string | number;
+    readonly label: string;
+    readonly profileUrl?: string;
+}
+/** An uploaded image ready to insert. `width`/`height` are the DISPLAY size in dp: the native editor
+ *  reads an `<img>`'s dimensions once at parse time and never re-measures, so a 0 renders 0×0. */
+export interface RichTextEditorImage {
+    readonly uri: string;
+    readonly width: number;
+    readonly height: number;
+}
+/** Every toolbar action this module renders a button for. `image`/`mention` are triggers, not
+ *  toggles — neither has an entry in `resolveRichTextEditorActiveActions`' output. */
+export type RichTextEditorToolbarAction = "bold" | "italic" | "underline" | "strikethrough" | "inlineCode" | "h1" | "h2" | "h3" | "blockQuote" | "codeBlock" | "unorderedList" | "orderedList" | "checkboxList" | "link" | "image" | "mention";
+export interface RichTextEditorToolbarItem {
+    readonly action: RichTextEditorToolbarAction;
+    readonly icon: IconName;
+    /** The button's accessible name — icon-only `Button` requires one. */
+    readonly label: string;
+    /** Whether this button holds an on/off state (so it announces one from first render, before any
+     *  `onChangeState` has arrived). True for exactly the actions
+     *  `resolveRichTextEditorActiveActions` reports on; the two triggers must not announce
+     *  "not pressed" as if they toggled something. */
+    readonly toggle: boolean;
+}
+/** Order is the rendered order, left to right in the toolbar's horizontal scroller. */
+export declare const RICH_TEXT_EDITOR_TOOLBAR_ITEMS: readonly RichTextEditorToolbarItem[];
+/**
+ * Maps the native editor's per-keystroke `onChangeState` payload onto the closed action set — this
+ * is what drives toolbar toggle highlighting (active = `variant="solid"`, inactive = `"outline"`).
+ * `image`/`mention` are intentionally absent: both open a picker rather than toggling a style.
+ */
+export declare function resolveRichTextEditorActiveActions(state: OnChangeStateEvent): Partial<Record<RichTextEditorToolbarAction, boolean>>;
+export interface RichTextEditorAccessibilityInput {
+    readonly label?: string | undefined;
+    readonly accessibilityLabel?: string | undefined;
+    /** `Platform.OS === "web"` at the call site — an input rather than a `Platform` import, so this
+     *  file stays pure and both platforms' output is asserted in one plain jest run. */
+    readonly web: boolean;
+}
+export interface RichTextEditorAccessibilityProps {
+    /** The accessible name for the EDITOR FIELD. RN has no `htmlFor`-equivalent link to a sibling
+     *  label `Text`, so the visible label's content is copied onto the field — the same fallback
+     *  `resolveInputAccessibility` makes, and an explicit `accessibilityLabel` always wins. */
+    readonly accessibilityLabel: string | undefined;
+    /** For the VISIBLE label `Text`, not the field: `true` hides it from assistive tech once the
+     *  field carries the same name, so it isn't announced twice. Never `false` — `undefined` is what
+     *  leaves a node exposed. */
+    readonly "aria-hidden": true | undefined;
+}
+/**
+ * Derives the editor's accessible-name surface purely.
+ *
+ * The visible label stays EXPOSED on web: `react-native-enriched-html`'s web build renders a TipTap
+ * `EditorContent` and forwards no accessibility prop to the contenteditable at all (it sets only
+ * `enterkeyhint`), so the field never gets the name there. Hiding the label too would leave a web
+ * screen-reader user with nothing — see MODULE.md's "Known gaps".
+ */
+export declare function resolveRichTextEditorAccessibility(input: RichTextEditorAccessibilityInput): RichTextEditorAccessibilityProps;
+/** Web caps the mention dropdown at 8 rows (`mentionSuggestion.ts`) — matched here for parity. */
+export declare const MENTION_CANDIDATE_LIMIT = 8;
+/** Case-insensitive substring match on `label`, capped to `limit`. Empty `query` (just-opened
+ *  dropdown) returns the first `limit` candidates, same as web's `items()` with an empty query. */
+export declare function filterMentionCandidates(users: readonly MentionUser[], query: string, limit?: number): MentionUser[];
+export interface RichTextEditorColors {
+    readonly toolbarBackground: string;
+    readonly toolbarDivider: string;
+    readonly cardBackground: string;
+    readonly cardBorder: string;
+    readonly cardBorderFocus: string;
+    readonly text: string;
+    readonly placeholder: string;
+    readonly cursor: string;
+    readonly selection: string;
+    readonly mentionDropdownBackground: string;
+    readonly mentionDropdownBorder: string;
+    readonly mentionRowBackground: string;
+    readonly mentionRowPressed: string;
+    readonly mentionRowText: string;
+}
+/** The card owns the boundary: Android's `SimpleViewManager` declares no `border*` prop, so a border
+ *  on the native view's own style is silently dropped there. */
+export declare function resolveRichTextEditorColors(colors: RoleColors): RichTextEditorColors;
+/**
+ * The slice of `Theme` this resolver actually reads — deliberately NOT the full `Theme` (which also
+ * carries `palette`, `elevation`, `fontStyleForWeight`, …, none of which a pure test can construct
+ * without mounting `PixelizeProvider`). Every field here is a plain token module import, so
+ * `RichTextEditor.test.ts` builds a real fixture and measures real contrast, the same rigor
+ * `Avatar.test.ts`/`OrgSwitcher.test.ts` apply — without needing a rendered theme to do it.
+ */
+export type RichTextEditorHtmlStyleTheme = Pick<Theme, "colors" | "fontSizes" | "space" | "fontWeights" | "radii" | "borderWidths">;
+/**
+ * Themes the HTML content `react-native-enriched-html` renders inside the editor. Every colour is a
+ * role lookup — never a hex the native lib is handed directly:
+ *  - `code`/`mention` share `accent.subtle` + `accent.text`, the tint pair already proven ≥ 4.5:1 for
+ *    every brand × mode (see the header comment) — the mention pill is the one place this rigor
+ *    matters most, since it is the only "chip" the rendered content shows.
+ *  - `codeblock` uses `bg.sunken` + `fg.default`, the identical pair `Avatar`'s neutral fill already
+ *    measures ≥ 4.5:1 for every brand × mode (`resolveAvatarColors`) — reused rather than re-proven.
+ *  - `blockquote`'s bar is `border.interactive` (≥ 3:1, the same non-text-UI floor every interactive
+ *    outline in this library holds to), its text `fg.muted` (≥ 4.5:1 against every surface it sits on
+ *    — see `roleColors`' `fg.muted` derivation).
+ */
+export declare function resolveRichTextEditorHtmlStyle(theme: RichTextEditorHtmlStyleTheme): HtmlStyle;
+export declare const richTextEditorLayout: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** No `overflow: "hidden"` — the mention dropdown overflows the field by design. */
+export declare const richTextEditorCardStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const richTextEditorToolbarStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** Applied to the `EnrichedTextInput`'s own `style` prop — `EnrichedInputStyle` is a RESTRICTED
+ *  subset of `TextStyle` (no `flexDirection`/`alignItems`/etc.), so this stays to the keys that
+ *  subset actually allows: padding, `minHeight`, `color`. Border, radius and fill deliberately
+ *  belong to the card instead (see `resolveRichTextEditorColors`). */
+export declare const richTextEditorFieldStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** Positioned "below the toolbar": the wrapping field container is the `relative` anchor, so `top: 0`
+ *  here lands the dropdown right under the toolbar, overlaying the editor field beneath it. */
+export declare const richTextEditorMentionDropdownStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const richTextEditorMentionRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=RichTextEditor.variants.d.ts.map

package/lib/typescript/modules/rich-text-editor/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Public surface of `pixelize-native-library/rich-text-editor`. Value exports and type exports are
+ * split for `verbatimModuleSyntax`.
+ */
+export { RichTextEditor } from "./RichTextEditor";
+export type { RichTextEditorHandle, RichTextEditorProps } from "./RichTextEditor";
+export type { MentionUser, RichTextEditorImage, RichTextEditorToolbarAction, } from "./RichTextEditor.variants";
+export { RICH_TEXT_EDITOR_TOOLBAR_ITEMS } from "./RichTextEditor.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/screen/Screen.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Screen — a screen shell composing SafeArea, optional KeyboardAvoidingView, optional pull-to-refresh,
+ * and async-state slots that swap in `LoadingState` / consumer-provided empty/error content instead of
+ * `children`. Replaces the per-app `SafeAreaView` + `KeyboardAvoidingView` + `RefreshControl` wiring
+ * that tickets/mobile and crm-mobile each re-declared.
+ *
+ * Requires `react-native-safe-area-context` — Screen's whole purpose is safe-area handling; consumers
+ * using this module are expected to install that optional peer (see MODULE.md).
+ *
+ * No `accessibilityRole` of its own: like `Card`, this is a layout shell — children and composed
+ * state blocks carry their own semantics.
+ */
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+import type { ScreenEdge, ScreenState } from "./Screen.variants";
+export interface ScreenProps {
+    children?: ReactNode;
+    edges?: readonly ScreenEdge[];
+    padded?: boolean;
+    keyboardAvoiding?: boolean;
+    keyboardVerticalOffset?: number;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    state?: ScreenState;
+    /** Shown when `state="loading"`. Defaults to `<LoadingState />`. */
+    loading?: ReactNode;
+    /** Shown when `state="empty"`. Compose `EmptyState` here. */
+    empty?: ReactNode;
+    /** Shown when `state="error"`. Compose `ErrorState` here. */
+    error?: ReactNode;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Screen: import("react").NamedExoticComponent<ScreenProps>;
+//# sourceMappingURL=Screen.d.ts.map

package/lib/typescript/modules/screen/Screen.variants.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Screen's style resolution — same split as `Card.variants` / `EmptyState.variants`:
+ *  - STRUCTURE (flex root, padded inset, centred state slots) lives in the themed resolvers below.
+ *  - COLOUR is resolved from the theme's ROLE colours by `resolveScreenColors`, never a raw ramp.
+ *
+ * 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";
+export type ScreenEdge = "top" | "right" | "bottom" | "left";
+export type ScreenState = "idle" | "loading" | "empty" | "error";
+export declare const SCREEN_DEFAULT_EDGES: readonly ScreenEdge[];
+export interface ScreenColors {
+    readonly background: string;
+}
+export declare function resolveScreenColors(colors: RoleColors): ScreenColors;
+export declare const screenRootStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const screenPaddedStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const screenStateSlotStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const screenScrollContentStructure: import("../../core/style").VariantResolver<import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=Screen.variants.d.ts.map

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

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

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

@@ -0,0 +1,47 @@
+/**
+ * SearchBar — the affordances every list screen re-implements around a query field: a leading
+ * `search` glyph (swapped for a `Spinner` while `loading`), a trailing clear button with its own
+ * accessible name and its own 44dp target, optional debounced reporting, and an optional "Cancel"
+ * text button.
+ *
+ * It owns its own `TextInput` rather than wrapping this library's `Input`. Reuse was evaluated:
+ * `Input`'s `trailingIcon` is documented decorative-only (it cannot host a separate pressable, which
+ * is exactly what "clearing never fires submit" requires), and `Input` exposes no submit/focus/
+ * autoFocus surface. Widening `Input` for one consumer would push search concerns into every form
+ * field, so — like `ButtonGroup` not importing `Button` — this is a standalone sibling that mirrors
+ * `Input`'s size specs, role tokens, and offset focus ring exactly instead of inventing new ones.
+ *
+ * Nothing here animates (the cancel button is a conditional render, not a transition), so there is
+ * no motion for `useReducedMotion` (WCAG 2.3.3) to gate. The one moving part on screen — the
+ * `loading` spinner — is `Spinner`'s own, which already honours reduced motion internally.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { SearchBarSize } from "./SearchBar.variants";
+export interface SearchBarProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    /** Fires on the keyboard's submit/search key. Any pending debounce is flushed first. */
+    onSubmit?: () => void;
+    /** Fires after the clear button (or "Cancel") empties the query. */
+    onClear?: () => void;
+    /** `0` (default) reports every keystroke. Above `0`, `onChangeText` is debounced by this many
+     *  milliseconds while the rendered text stays instant. */
+    debounceMs?: number;
+    /** Reveals a trailing "Cancel" text button once the field is focused. */
+    showCancel?: boolean;
+    cancelLabel?: string;
+    /** Swaps the leading `search` glyph for a `Spinner`. */
+    loading?: boolean;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    size?: SearchBarSize;
+    /** Overrides the placeholder→name fallback, for a placeholder that reads as a prompt rather than
+     *  a name ("Search…" tells a screen-reader user nothing about WHAT is being searched). */
+    accessibilityLabel?: string;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
+//# sourceMappingURL=SearchBar.d.ts.map

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