pixelize-native-library 1.0.7 → 1.2.0

package/lib/typescript/modules/combobox/Combobox.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Combobox — a searchable/filterable select. A NEW module rather than a `searchable` prop on
+ * `select`: the interaction model differs materially (a text input owns focus, results filter live,
+ * there is an async/loading path, and there is a "no results" state) — bolting that onto `Select`
+ * would double its complexity for every existing caller who never needs search.
+ *
+ * Structurally it mirrors `Select`/`MultiSelect`: a trigger field that opens an option list in React
+ * Native's OWN `Modal`, imported directly from `"react-native"` on purpose — this module must never
+ * depend on the library's own `Modal` COMPONENT, and (like every sibling picker) never imports
+ * another module's component either, with two narrow, deliberate exceptions:
+ *
+ *  1. 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
+ *     Combobox reads the same ones `Modal.tsx`/`Select.tsx`/`MultiSelect.tsx` read to stay consistent
+ *     once a consumer opts in via `ModalPortalProvider`.
+ *  2. `Spinner` for the list's loading state — a small, dependency-free leaf component this library
+ *     already reuses directly across modules (e.g. `SearchBar`), unlike the heavier, stateful
+ *     components (`Modal`, `Checkbox`'s row indicator) every sibling picker duplicates instead.
+ *
+ * The search field is its OWN local `TextInput` — it does NOT import this library's `Input`. This
+ * mirrors `SearchBar`'s own documented precedent for the identical tension: `Input` exposes no
+ * `autoFocus`/ref surface (it isn't `forwardRef`, and accepts no `{...rest}` per this library's API
+ * contract), so a field that must genuinely autofocus when the sheet opens cannot be built on top of
+ * it. Reusing `Input`'s exact size/role-colour contract (never its component) keeps this module
+ * consistent with the rest of the library while still delivering the autofocus the spec calls for.
+ *
+ * The trigger's focus/open indicator is `Input`'s offset ring (drawn outside the field, on the
+ * canvas), not `Select`/`MultiSelect`'s older border-colour swap — their own docs already flag that
+ * swap as provisional, pending reconciliation with `Input`'s newer, now-current convention. Combining
+ * a border swap AND a ring would double-signal the same state, so the trigger border here is
+ * `error`-driven only (see `Combobox.variants.ts`).
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { ComboboxOption } from "./Combobox.variants";
+export type { ComboboxOption };
+interface ComboboxCommonProps {
+    options: ComboboxOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    label?: string;
+    disabled?: boolean;
+    /** Shown below the field; announced on both platforms via `useAnnounce`. */
+    error?: string;
+    /** Shows an "x" on the field once something is selected. */
+    clearable?: boolean;
+    /** Swaps the option list for a centered `Spinner` — the list area, not the search field. */
+    loading?: boolean;
+    emptyMessage?: string;
+    /**
+     * Presence signals SERVER-side filtering: once provided, `Combobox` renders `options` verbatim and
+     * never filters locally, even if `filterFn` is also passed. Absent (the default) means local
+     * filtering. Debounced by `SEARCH_DEBOUNCE_MS`. This is the prop most likely to be misused —
+     * passing it does not add server-side filtering on top of local filtering, it REPLACES it.
+     */
+    onSearchChange?: (query: string) => void;
+    /** Overrides local filtering. Ignored entirely when `onSearchChange` is set. Default is
+     *  `defaultComboboxFilter` (case- and diacritic-insensitive substring match on `label`). */
+    filterFn?: (option: ComboboxOption, query: string) => boolean;
+    maxHeight?: number;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export interface ComboboxSingleProps extends ComboboxCommonProps {
+    multiple?: false;
+    value: string | null;
+    onChange: (value: string | null) => void;
+}
+export interface ComboboxMultipleProps extends ComboboxCommonProps {
+    multiple: true;
+    values: string[];
+    onValuesChange: (values: string[]) => void;
+}
+/**
+ * A discriminated union, not one flat interface with every field optional: `multiple: true` requires
+ * `values`/`onValuesChange`, the default (`multiple` absent/`false`) requires `value`/`onChange` — a
+ * caller can never wire the wrong pair for the active mode and have it silently do nothing.
+ */
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+export declare const Combobox: import("react").NamedExoticComponent<ComboboxProps>;
+//# sourceMappingURL=Combobox.d.ts.map

package/lib/typescript/modules/combobox/Combobox.variants.d.ts

@@ -0,0 +1,212 @@
+/**
+ * Combobox's pure data/style/behaviour resolution — same split every reference module uses:
+ *  - STRUCTURE (heights, padding, radius, border WIDTH) lives in the `createThemedVariants`
+ *    resolvers, registered once per theme identity.
+ *  - COLOUR is resolved from the theme's ROLE colours by `resolveComboboxTriggerColors` /
+ *    `resolveComboboxRowColors` / `resolveComboboxErrorTextColor`, never a raw ramp, never a
+ *    hardcoded hex.
+ *  - ACCESSIBILITY prop derivation (`resolveComboboxAccessibility`, `resolveComboboxRowAccessibility`)
+ *    is kept pure so the "disabled blocks opening / expanded tracks the sheet / selected+disabled per
+ *    row" contract is unit-testable without rendering React Native.
+ *  - SEARCH/SELECTION logic (`defaultComboboxFilter`, `resolveComboboxSummary`) is pure too, so the
+ *    filtering and trigger-summary rules are unit-tested directly. `defaultComboboxFilter` is the
+ *    SPEC of the default local filter, and is what a caller-supplied `filterFn` replaces — but the
+ *    component no longer calls it per option: it memoizes one normalized-label array per `options`
+ *    identity and reuses it for every pass (`Combobox.tsx`), which must stay byte-identical to this
+ *    function's result (`Combobox.filter.test.ts` pins that).
+ *
+ * `ComboboxOption` lives here, not in `Combobox.tsx`: unlike `Select`'s/`MultiSelect`'s option types
+ * (which carry a `ReactNode leading` and so must live in the component file), every field here is a
+ * plain value — no React import needed — so it can be pure like the rest of this file.
+ *
+ * Free of React and of any `Modal`/`Pressable`/`TextInput` import, so the WCAG + logic tests import
+ * this directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+import type { AccessibilityRole } from "react-native";
+import type { RoleColors, Theme } from "../../theme/hooks";
+import type { IconName } from "../../core/icon";
+export interface ComboboxOption {
+    readonly value: string;
+    readonly label: string;
+    readonly icon?: IconName;
+    readonly description?: string;
+    readonly disabled?: boolean;
+}
+/** Same touch-target floor as Button/Select/Input (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
+export declare const MIN_TOUCH_TARGET = 44;
+/** No `size` prop (unlike Select/MultiSelect) — not part of this module's spec, and a search sheet's
+ *  proportions don't benefit from the sm/lg range those triggers offer. One fixed box, sized exactly
+ *  like Input's/Select's `md`, so a Combobox lines up with either in the same form. */
+export declare const COMBOBOX_FIELD_HEIGHT = 40;
+export declare const COMBOBOX_FIELD_FONT_SIZE = 16;
+export declare const COMBOBOX_FIELD_ICON_SIZE = 18;
+export declare const COMBOBOX_FIELD_HIT_SLOP: number;
+/** The trigger's clear ("x") affordance, nested inside the field `Pressable` exactly like
+ *  `DatePicker`'s own clear button — RN's responder system resolves a touch to the innermost
+ *  `Pressable` that claims it, so the field's own `onPress` never also fires. Narrower than the
+ *  field is tall, so it reaches 44×44 through `hitSlop` rather than through its own width. */
+export declare const COMBOBOX_CLEAR_BUTTON_WIDTH = 32;
+export declare const COMBOBOX_CLEAR_BUTTON_HIT_SLOP: number;
+/** Minimum height for an option row — a list item is still an interactive target (WCAG 2.5.8). Not a
+ *  fixed height: a row with a `description` line grows past this floor. */
+export declare const COMBOBOX_ROW_MIN_HEIGHT = 44;
+export declare const COMBOBOX_ROW_ICON_SIZE = 18;
+export declare const DEFAULT_PLACEHOLDER = "Select\u2026";
+export declare const DEFAULT_SEARCH_PLACEHOLDER = "Search\u2026";
+export declare const DEFAULT_EMPTY_MESSAGE = "No results";
+export declare const DEFAULT_MAX_HEIGHT = 320;
+/** `onSearchChange` debounce window — a fixed design constant, not a caller-facing prop (the spec
+ *  this module was built against fixes it at 250ms). */
+export declare const SEARCH_DEBOUNCE_MS = 250;
+/** Local-filter debounce — shorter than the networked `SEARCH_DEBOUNCE_MS`; only outruns a typing burst. */
+export declare const FILTER_DEBOUNCE_MS = 140;
+/**
+ * Strips combining diacritical marks after Unicode NFD decomposition, so "José" and "jose" match the
+ * same query. Lowercased last so the comparison is also case-insensitive.
+ */
+export declare function normalizeForSearch(value: string): string;
+/**
+ * The option list's container role — what makes `aria-activedescendant` on the search field mean
+ * anything. 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 COMBOBOX_LISTBOX_ROLE: AccessibilityRole;
+/**
+ * The DOM id of one option row. `aria-activedescendant` and `nativeID` must agree exactly, and
+ * every `aria-*` prop is UNCHECKED by TypeScript on an RN component (hyphenated JSX attributes are
+ * not type-checked at all) — so the id is derived here once rather than interpolated at each call
+ * site, where a typo would silently produce a dangling reference no compiler would catch.
+ */
+export declare function comboboxOptionNativeId(listId: string, value: string): string;
+/**
+ * The default local `filterFn`: case-insensitive, diacritic-insensitive substring match on `label`.
+ * An empty/whitespace-only query matches everything, so clearing the search box restores the full
+ * list instead of an empty one.
+ */
+export declare function defaultComboboxFilter(option: ComboboxOption, query: string): boolean;
+export interface ComboboxSummaryInput {
+    readonly options: ComboboxOption[];
+    readonly selectedValues: readonly string[];
+    readonly placeholder: string;
+}
+/**
+ * The trigger's display text — one rule for both single and multiple mode, since single mode is just
+ * "at most one selected value" flowing through the same collapsing rule: 0 → placeholder, 1 → that
+ * option's label, 2 → both labels joined, 3+ → "N selected". A selected value with no matching option
+ * (e.g. stale data) falls back to "1 selected" / the raw value rather than rendering nothing.
+ */
+export declare function resolveComboboxSummary(input: ComboboxSummaryInput): string;
+export interface ComboboxTriggerColors {
+    /** Trigger fill — the same surface an Input's/Select's box sits on. */
+    readonly background: string;
+    /** Boundary colour: the neutral interactive outline, or `status.danger.solid` while `error` is
+     *  set. NOT focus-driven — unlike `Select`/`MultiSelect`'s border-swap, focus/open is signalled by
+     *  `Combobox`'s offset ring instead (see the component), `Input`'s exact convention. Combining a
+     *  border swap AND a ring would double-signal the same state. */
+    readonly border: string;
+    /** Colour for the summary text once something is selected. */
+    readonly text: string;
+    /** Colour for the placeholder (nothing selected yet). */
+    readonly placeholder: string;
+    /** Chevron / clear-icon colour. */
+    readonly icon: string;
+}
+/**
+ * Maps trigger state onto role colours — the reason there is no free-form `color` prop. `error`
+ * mirrors `Input.resolveInputStatus`'s exact precedence: the error border reads `status.danger.solid`
+ * (NOT `status.danger.border`, which measures below 3:1 on every brand — see `Input.test.ts`'s
+ * identical finding).
+ */
+export declare function resolveComboboxTriggerColors(colors: RoleColors, state: {
+    readonly error: boolean;
+}): ComboboxTriggerColors;
+/** The error message under the field, read on the canvas — same role `Input.resolveInputStatus` uses
+ *  for its own `errorText`. */
+export declare function resolveComboboxErrorTextColor(colors: RoleColors): string;
+export interface ComboboxRowColors {
+    /** Row / search-row fill — the sheet's own surface. Kept constant across selection: `bg.selected`
+     *  is not proven ≥ 4.5:1 against `fg.default` on every brand (measured: fails on radiant/rosewood
+     *  light — same finding `Select`'s rows document). Selection is conveyed by the "check" glyph +
+     *  `accessibilityState.selected`, never by a background tint. */
+    readonly background: string;
+    /** Option label, and the search box's own typed text. */
+    readonly text: string;
+    /** The option `description` line, the search placeholder, and the empty-state message — all the
+     *  muted-text pairings, sharing one measured rung. */
+    readonly muted: string;
+    /** Leading option icon, the search glyph, and the clear-row icon. */
+    readonly icon: string;
+    /** The selected row's "check" glyph. Same value as `text`: if the label clears the stricter 4.5:1
+     *  text minimum, the icon clears its looser 3:1 non-text minimum for free (same reasoning
+     *  `Select`'s active-row check glyph relies on). */
+    readonly checkIcon: string;
+    /** Row background while pressed — `bg.sunken`, not `bg.hover`: the same fix `Button`'s "neutral"
+     *  tone and `RadioGroup`/`Menu`/`Select` 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 resolveComboboxRowColors(colors: RoleColors): ComboboxRowColors;
+export interface ComboboxAccessibilityInput {
+    readonly disabled?: boolean | undefined;
+    readonly open: boolean;
+}
+export interface ComboboxAccessibilityProps {
+    readonly accessibilityRole: "combobox";
+    /** Flat, never `accessibilityState`: react-native-web discards the object form (see
+     *  `docs/PLATFORM-A11Y-PROPS.md`). Quoted keys so the compiler still checks the prop names. */
+    readonly "aria-disabled": boolean;
+    readonly "aria-expanded": boolean;
+    /** The `Pressable` `disabled` prop — blocks opening the sheet while disabled. */
+    readonly disabled: boolean;
+}
+/**
+ * Derives the field's accessibility surface once, purely: `expanded` tracks whether the sheet is
+ * showing (WCAG 4.1.2), `disabled` blocks it from opening at all.
+ */
+export declare function resolveComboboxAccessibility(input: ComboboxAccessibilityInput): ComboboxAccessibilityProps;
+export interface ComboboxRowAccessibilityInput {
+    readonly selected: boolean;
+    readonly disabled: boolean;
+}
+export interface ComboboxRowAccessibilityProps {
+    readonly accessibilityRole: "menuitem";
+    /** 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;
+    readonly disabled: boolean;
+}
+/**
+ * Every row is `menuitem` (matching this library's `Menu`), in BOTH single and multiple mode — the
+ * spec this module was built against fixes this role regardless of mode, unlike `MultiSelect`'s own
+ * `checkbox` rows. Selection state rides `aria-selected`, never `aria-checked`.
+ */
+export declare function resolveComboboxRowAccessibility(input: ComboboxRowAccessibilityInput): ComboboxRowAccessibilityProps;
+/**
+ * Structural styles only — layout, height, padding, radius, border WIDTH. No colours (state-driven,
+ * applied inline over this), so this compiles once per theme identity via the themed resolver.
+ */
+export declare const comboboxFieldStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The open-target's own inner row — the selected option's icon (single mode) + the summary text,
+ *  kept in one shrinkable cluster so the clear button and chevron stay pinned to the trailing edge. */
+export declare const comboboxFieldValueStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const comboboxClearButtonStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The full-screen overlay the sheet centers in — byte-identical to `Select`'s. `box-none` (applied
+ *  by the component) lets a tap on its empty padding fall through to the backdrop press underneath. */
+export declare const comboboxOverlayStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** No `maxHeight` baked in here — it is the one caller-configurable dimension (`maxHeight` prop,
+ *  default `DEFAULT_MAX_HEIGHT`) and is applied inline over this at the component boundary. */
+export declare const comboboxSheetStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The search row's bottom border doubles as the divider between it and the option list — one fewer
+ *  node than a dedicated `Divider`. Colour (`border.default`, the decorative rung) is applied inline. */
+export declare const comboboxSearchRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The loading spinner / empty-message container — centered in the space the option list would
+ *  otherwise occupy. */
+export declare const comboboxListStateStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const comboboxRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The label + optional description cluster — `rowGap` mirrors `ListItem`'s identical title/subtitle
+ *  spacing. */
+export declare const comboboxRowTextStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=Combobox.variants.d.ts.map

package/lib/typescript/modules/combobox/comboboxKeys.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Native/default counterpart of `comboboxKeys.web.ts` — the `core/a11y/keyboard.ts` pattern, local
+ * to this module. Physical-keyboard interaction is a web concern, so this is a no-op with an
+ * identical signature, and Metro keeps the DOM half out of the native graph entirely.
+ *
+ * **Why this exists instead of `core/a11y`'s `useRovingKeys`.** That helper is the right one for
+ * `menu`/`select`/`multi-select`, but its Enter/Space branch calls `preventDefault()`
+ * unconditionally — and this container holds the search `TextInput`. Attaching it here would make
+ * the space bar untypable in the search field, so Combobox handles the four navigation keys plus
+ * Enter itself and leaves Space entirely to the input. Everything else it needs (Escape, the focus
+ * trap) still comes from `core/a11y/keyboard`.
+ */
+import type { RefObject } from "react";
+import type { View } from "react-native";
+export interface ComboboxKeysOptions {
+    /** Number of options currently in the list. */
+    readonly count: number;
+    /** Index of the `aria-activedescendant` option. */
+    readonly activeIndex: number;
+    readonly onActiveIndexChange: (index: number) => void;
+    /** Enter on the container — Space is deliberately NOT an activation key here. */
+    readonly onActivate: (index: number) => void;
+}
+export declare function useComboboxKeys(_ref: RefObject<View | null>, _active: boolean, _options: ComboboxKeysOptions): void;
+//# sourceMappingURL=comboboxKeys.d.ts.map

package/lib/typescript/modules/combobox/comboboxKeys.web.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Web implementation of Combobox's own arrow-key navigation. Metro resolves this file only for a
+ * web bundle (see `comboboxKeys.ts`, which also documents why `core/a11y`'s `useRovingKeys` cannot
+ * be used for this particular container), so it is free to assume a DOM.
+ *
+ * DOM types are hand-written for the same reason `core/a11y/keyboard.web.ts` and
+ * `modules/modal/renderWebPortal.web.ts` hand-write theirs: `tsconfig.json` sets `"lib": ["ESNext"]`,
+ * so `document`/`HTMLElement`/`KeyboardEvent` do not exist as types, `any` is lint-banned, and
+ * augmenting `react-native`'s types would ship through `lib/typescript/**`.
+ */
+import type { RefObject } from "react";
+import type { View } from "react-native";
+import type { ComboboxKeysOptions } from "./comboboxKeys";
+export type { ComboboxKeysOptions };
+/**
+ * Arrow/Home/End/Enter navigation for the `aria-activedescendant` listbox pattern: focus never
+ * leaves the search field, only the active index moves.
+ *
+ * Listens on the CONTAINER in the CAPTURE phase — that is what gets past the focused `TextInput`,
+ * whose own key handling runs while the event bubbles.
+ */
+export declare function useComboboxKeys(ref: RefObject<View | null>, active: boolean, options: ComboboxKeysOptions): void;
+//# sourceMappingURL=comboboxKeys.web.d.ts.map

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

@@ -0,0 +1,11 @@
+/**
+ * Public surface of `pixelize-native-library/combobox`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The resolvers (`resolveComboboxTriggerColors`, `defaultComboboxFilter`, …)
+ * stay internal — a consumer configures a Combobox through its props, never by importing its
+ * internals.
+ */
+export { Combobox } from "./Combobox";
+export type { ComboboxProps, ComboboxSingleProps, ComboboxMultipleProps } from "./Combobox";
+export type { ComboboxOption } from "./Combobox.variants";
+export type { IconName } from "../../core/icon";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/composer/Composer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Composer — chat message input row with multiline field and send affordance.
+ *
+ * The focus ring is its only motion: it crossfades on focus/blur, never while the message list
+ * below it scrolls, so `core/motion`'s per-row rule still holds. Same offset-ring pattern as Input —
+ * a `border.focus` ring a small gap outside the field, on the canvas, where that token is the one
+ * proven ≥ 3:1.
+ */
+import type { LayoutStyle } from "../../core/style";
+export interface ComposerProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    onSend: () => void;
+    placeholder?: string;
+    /**
+     * The field's accessible name. Defaults to `placeholder`, which is the only text this component
+     * renders — but a placeholder is not a label (it disappears the moment there is a value), so a
+     * caller with more than one composer on screen needs to be able to name them apart.
+     */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+    sending?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Composer: import("react").NamedExoticComponent<ComposerProps>;
+//# sourceMappingURL=Composer.d.ts.map

package/lib/typescript/modules/composer/Composer.variants.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from "../../theme/hooks";
+export declare const composerStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** Carries the row's `flex: 1` so the focus ring can be an absolute sibling of the `TextInput`. */
+export declare const composerFieldStructure: import("../../core/style").VariantResolver<import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const composerInputStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const composerSendStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=Composer.variants.d.ts.map

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

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

package/lib/typescript/modules/copy-button/CopyButton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * CopyButton — copies a string to the clipboard with brief success feedback. Three closed
+ * variants: icon-only, outlined button, or menu-row shape.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { CopyButtonSize, CopyButtonVariant } from "./CopyButton.variants";
+export interface CopyButtonProps {
+    value: string;
+    variant?: CopyButtonVariant;
+    label?: string;
+    copiedLabel?: string;
+    /** Shown and announced when the clipboard write fails (e.g. the optional native peer is absent). */
+    failedLabel?: string;
+    size?: CopyButtonSize;
+    onCopy?: (value: string) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const CopyButton: import("react").NamedExoticComponent<CopyButtonProps>;
+//# sourceMappingURL=CopyButton.d.ts.map

package/lib/typescript/modules/copy-button/CopyButton.variants.d.ts

@@ -0,0 +1,42 @@
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type CopyButtonVariant = "icon" | "button" | "menu-item";
+export type CopyButtonSize = "sm" | "md";
+export declare const COPY_FEEDBACK_MS = 1500;
+/**
+ * Same touch-target floor as `Button`/`Checkbox` (44dp — Apple HIG minimum, WCAG 2.5.5 AAA).
+ * Duplicated rather than imported — modules never import across `src/modules/*`.
+ */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface CopyButtonSizeSpec {
+    /** Glyph size in dp — also the `icon` variant's whole visual footprint (it has no padding). */
+    readonly iconSize: number;
+    /** Symmetric touch expansion so `iconSize + 2·hitSlop ≥ 44` on the bare-icon variant. */
+    readonly hitSlop: number;
+}
+/**
+ * CopyButton-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
+ * test can assert `iconSize + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
+ */
+export declare const COPY_BUTTON_SIZES: {
+    readonly sm: {
+        readonly iconSize: 14;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly iconSize: 16;
+        readonly hitSlop: number;
+    };
+};
+export interface CopyButtonColors {
+    readonly default: string;
+    readonly success: string;
+    readonly danger: string;
+    readonly border: string;
+}
+export declare function resolveCopyButtonColors(colors: RoleColors): CopyButtonColors;
+/** The row shapes reach 44dp with `minHeight`, not `hitSlop` — the `MENU_ROW_MIN_HEIGHT` /
+ *  `MULTI_SELECT_ROW_MIN_HEIGHT` precedent: a row is already its own full-width touch target. */
+export declare const copyButtonMenuRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const copyButtonOutlineStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare function writeClipboard(value: string): Promise<boolean>;
+//# sourceMappingURL=CopyButton.variants.d.ts.map

package/lib/typescript/modules/copy-button/index.d.ts

@@ -0,0 +1,4 @@
+export { CopyButton } from "./CopyButton";
+export type { CopyButtonProps } from "./CopyButton";
+export type { CopyButtonSize, CopyButtonVariant } from "./CopyButton.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/data-table/DataTable.d.ts

@@ -0,0 +1,44 @@
+/**
+ * DataTable — a horizontally-scrollable, column-configured table for phone screens. Header and
+ * body live in ONE vertical `FlatList` (header as `ListHeaderComponent`, `stickyHeaderIndices={[0]}`
+ * for the pin) nested inside a single horizontal `ScrollView` — so header and rows are always the
+ * same width and scroll sideways together, without hand-syncing two independent scroll offsets.
+ *
+ * Sort and selection are fully controlled, the same contract `Select` uses for `value`: this
+ * component never sorts `data` itself and never owns `selectedKeys` — it only reports the next
+ * state via `onSortChange`/`onSelectionChange` and renders whatever the caller passes back in.
+ */
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+import type { DataTableAlign, DataTableSortDirection } from "./DataTable.variants";
+export interface DataTableColumn<T> {
+    readonly key: string;
+    readonly header: string;
+    readonly width?: number;
+    readonly align?: DataTableAlign;
+    readonly render?: (row: T, index: number) => ReactNode;
+    readonly sortable?: boolean;
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    keyExtractor: (row: T, index: number) => string;
+    onRowPress?: (row: T, index: number) => void;
+    sortBy?: string;
+    sortDirection?: DataTableSortDirection;
+    onSortChange?: (key: string, direction: DataTableSortDirection) => void;
+    selectable?: boolean;
+    selectedKeys?: string[];
+    onSelectionChange?: (keys: string[]) => void;
+    loading?: boolean;
+    emptyMessage?: string;
+    stickyHeader?: boolean;
+    rowHeight?: number;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+declare function DataTableInner<T>({ columns, data, keyExtractor, onRowPress, sortBy, sortDirection, onSortChange, selectable, selectedKeys, onSelectionChange, loading, emptyMessage, stickyHeader, rowHeight, style, testID, }: DataTableProps<T>): import("react").JSX.Element;
+export declare const DataTable: typeof DataTableInner;
+export {};
+//# sourceMappingURL=DataTable.d.ts.map

package/lib/typescript/modules/data-table/DataTable.variants.d.ts

@@ -0,0 +1,118 @@
+/**
+ * DataTable's style + behaviour resolution — the same split every sibling module copies
+ * (see `Select.variants.ts` / `Menu.variants.ts`):
+ *  - STRUCTURE (row/cell layout, padding, border WIDTH) lives in the variant resolvers below —
+ *    static per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveDataTableColors`), never a raw ramp,
+ *    never a hardcoded hex. A table has no per-instance colour choice, so the resolver takes no
+ *    selector argument (same shape as `resolveCheckboxColors`).
+ *  - BEHAVIOUR (sort cycling, selection set maths, the sorted-column accessible name) is pure here
+ *    so the contract is unit-testable without rendering React Native.
+ *
+ * Free of React, of `lucide`, 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 { RoleColors, Theme } from "../../theme/hooks";
+export type DataTableAlign = "left" | "center" | "right";
+export type DataTableSortDirection = "asc" | "desc";
+/** The three glyphs a header can show. A literal union rather than an `IconName` import, so this
+ *  file stays free of the icon registry (which pulls `lucide` at runtime); `Icon`'s own `name` prop
+ *  still type-checks these against the closed `IconName` set at the call site. */
+export type DataTableSortIcon = "chevron-up" | "chevron-down" | "chevrons-up-down";
+/** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
+export declare const MIN_TOUCH_TARGET = 44;
+/** Header cells are sortable buttons, so the header is a direct 44dp target — never slop-expanded. */
+export declare const DATA_TABLE_HEADER_HEIGHT = 44;
+export declare const DATA_TABLE_DEFAULT_ROW_HEIGHT = 48;
+export declare const DATA_TABLE_DEFAULT_COLUMN_WIDTH = 120;
+export declare const DATA_TABLE_SELECT_COLUMN_WIDTH = 48;
+export declare const DATA_TABLE_SORT_ICON_SIZE = 14;
+export declare const DATA_TABLE_SKELETON_ROW_COUNT = 5;
+export declare const DATA_TABLE_SKELETON_CELL_HEIGHT = 12;
+/**
+ * Symmetric touch expansion for a pressable row, so `rowHeight + 2·slop ≥ 44` even when a caller
+ * passes a compact `rowHeight` (same `slopFor` technique `Button`/`Select` use for their short sizes).
+ */
+export declare function rowTouchSlop(rowHeight: number): number;
+export declare function resolveColumnWidth(width: number | undefined): number;
+/** The row's full width — what the header and every body row are pinned to, so the two stay aligned
+ *  while the shared horizontal `ScrollView` moves them together. */
+export declare function resolveTotalWidth(widths: readonly (number | undefined)[], selectable: boolean): number;
+export interface DataTableColors {
+    /** Header fill. `bg.sunken` separates the header band from the body without a second border. */
+    readonly headerBackground: string;
+    /** Header label — `fg.muted`, measured ≥ 4.5:1 on `headerBackground` for every brand × mode. */
+    readonly headerText: string;
+    /** Sort glyph. The SAME value as `headerText`: a colour that clears the stricter 4.5:1 text
+     *  minimum clears the icon's 3:1 non-text minimum for free (Menu/Select's identical argument). */
+    readonly headerIcon: string;
+    /** The header/body boundary — `border.interactive` (≥ 3:1, WCAG 1.4.11), not the decorative
+     *  `border.default`, which is a ~1.2:1 hairline on every brand. */
+    readonly headerBorder: string;
+    /** Even-row fill. */
+    readonly rowBackground: string;
+    /** Odd-row zebra fill. */
+    readonly rowBackgroundAlt: string;
+    /** Pressed-row fill. `bg.raised` rather than `bg.sunken`, because `bg.sunken` is already the zebra
+     *  stripe — pressing an odd row would otherwise change nothing. `bg.hover` is excluded for the
+     *  reason `ListItem` documents (it drops `fg.default` below 4.5:1 on 4 light brands). */
+    readonly rowPressed: string;
+    /** Body cell text, measured ≥ 4.5:1 on all three row fills above. */
+    readonly cellText: string;
+}
+export declare function resolveDataTableColors(colors: RoleColors): DataTableColors;
+/** Zebra striping, or the pressed fill when the row is being touched. */
+export declare function resolveRowBackground(colors: DataTableColors, index: number, pressed: boolean): string;
+/**
+ * asc → desc → asc on the active column; any other column starts at asc. Pressing a new column
+ * never inherits the previous column's direction — a fresh sort reads ascending.
+ */
+export declare function nextSortDirection(columnKey: string, activeKey: string | undefined, activeDirection: DataTableSortDirection | undefined): DataTableSortDirection;
+export declare function resolveSortIcon(columnKey: string, activeKey: string | undefined, activeDirection: DataTableSortDirection | undefined): DataTableSortIcon;
+/**
+ * WCAG 1.3.3 / 4.1.2 — the sort glyph is a visual-only cue, so the header's accessible name carries
+ * the same state in words. Without this a screen-reader user hears only the column title and cannot
+ * tell which column the table is sorted by.
+ */
+export declare function resolveSortAccessibilityLabel(header: string, columnKey: string, activeKey: string | undefined, activeDirection: DataTableSortDirection | undefined): string;
+/**
+ * Fallback cell text when a column has no `render`. `row` is generic and unconstrained (a table
+ * accepts any shape of data), so reading `column.key` off it is a deliberate, narrow escape from
+ * `T` rather than a real type hole — the alternative is forcing every caller to supply `render`.
+ */
+export declare function resolveDefaultCellText(row: unknown, key: string): string;
+export declare function toggleSelectionKey(selectedKeys: readonly string[], key: string): string[];
+export interface DataTableSelectAllState {
+    readonly checked: boolean;
+    readonly indeterminate: boolean;
+}
+export declare function resolveSelectAllState(selectedKeys: readonly string[], rowKeys: readonly string[]): DataTableSelectAllState;
+/**
+ * Select-all only ever adds or removes the rows currently in `data` — a key selected elsewhere
+ * (a previous page, a filtered-out row) survives both directions, so the caller owns the full set.
+ */
+export declare function resolveSelectAllSelection(selectedKeys: readonly string[], rowKeys: readonly string[]): string[];
+export declare const dataTableRowStructure: import("../../core/style").VariantResolver<import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const dataTableHeaderRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const dataTableCellStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    align: {
+        left: {
+            justifyContent: "flex-start";
+        };
+        center: {
+            justifyContent: "center";
+        };
+        right: {
+            justifyContent: "flex-end";
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * The keyboard/AT focus ring for a sortable header cell or a pressable row, drawn INSIDE the
+ * element's own bounds. Both are full-bleed: a header cell abuts its neighbours and a row spans the
+ * table's whole width, so the gap-outside ring `Button`/`CopyButton` use would be clipped by the
+ * table's own scroll containers. Square, like the cells it sits in. Colour is applied inline.
+ */
+export declare const dataTableFocusRingStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const dataTableSelectCellStructure: import("../../core/style").VariantResolver<import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=DataTable.variants.d.ts.map