pixelize-native-library 1.0.6 → 1.2.0

package/lib/typescript/modules/file-upload/FileUpload.d.ts

@@ -36,6 +36,9 @@ export interface FileUploadProps {
     allowedMimeTypes?: string[];
     /** Image-only — forwarded as `ImagePicker.launchImageLibraryAsync`'s `allowsEditing`. Ignored when `source` is `"document"`. Defaults to `false`, the default (permission-less) picker flow — see `FileUpload.variants.ts`'s `pickImageFile`. */
     allowsEditing?: boolean;
+    /** 0–100. Omitted means "no upload in flight" and renders no track at all — this module still owns
+     *  no upload logic, it only DISPLAYS a number the consumer drives from its own transfer. */
+    progress?: number;
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     style?: LayoutStyle;
     testID?: string;

package/lib/typescript/modules/file-upload/FileUpload.variants.d.ts

@@ -17,9 +17,8 @@
  * Free of React, so this file (and `FileUpload.test.ts`) never needs `@testing-library/react-native`
  * — only `react-native`'s `StyleSheet` is mocked to identity, same as every sibling's pure test.
  */
-import * as DocumentPicker from "expo-document-picker";
-import * as ImagePicker from "expo-image-picker";
-import type { Theme } from "../../theme";
+import type { DocumentPickerModule, ImagePickerModule } from "../../core/media";
+import type { Theme } from "../../theme/hooks";
 export type FileUploadSource = "image" | "document";
 export type FileUploadSize = "sm" | "md" | "lg";
 export interface FileUploadResult {
@@ -45,9 +44,9 @@ export declare function fileNameFromUri(uri: string): string;
  * FileUpload.tsx`) is the one that decides what a `null` MEANS (cancel → leave `value` alone,
  * reject → clear it) by checking `result.canceled` itself; this function only normalizes the shape.
  */
-export declare function resolveImagePickResult(result: ImagePicker.ImagePickerResult): FileUploadResult | null;
+export declare function resolveImagePickResult(result: Awaited<ReturnType<ImagePickerModule['launchImageLibraryAsync']>>): FileUploadResult | null;
 /** Maps `DocumentPicker.getDocumentAsync`'s result onto the public shape — same `canceled`/empty-array handling as `resolveImagePickResult`. `DocumentPickerAsset.name` is always present, so no filename fallback is needed. */
-export declare function resolveDocumentPickResult(result: DocumentPicker.DocumentPickerResult): FileUploadResult | null;
+export declare function resolveDocumentPickResult(result: Awaited<ReturnType<DocumentPickerModule['getDocumentAsync']>>): FileUploadResult | null;
 /**
  * Opens the OS media-library picker and returns the normalized result, or `null` on cancel.
  *
@@ -102,6 +101,24 @@ export declare function resolveFileUploadRemoveLabel(fileName: string): string;
  * key), instead of the result depending on ambient parent layout.
  */
 export declare const fileUploadContainerStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The progress track's accessible name — `accessibilityValue.now` carries the number itself. */
+export declare const FILE_UPLOAD_PROGRESS_LABEL = "Upload progress";
+/** 0–100 (any other input, including `NaN`, reads as 0) → the 0–1 `scaleX` factor of the fill. */
+export declare function resolveFileUploadProgressFraction(progress: number): number;
+/** Rounded 0–100 for `accessibilityValue.now`, which takes an integer. */
+export declare function resolveFileUploadProgressPercent(progress: number): number;
+/**
+ * The upload-progress track. `alignSelf: "stretch"` so it spans the container the trigger `Button`
+ * sizes — the root hugs its content (see `fileUploadContainerStructure`), so a track with no
+ * intrinsic width would otherwise render 0dp wide.
+ */
+export declare const fileUploadProgressTrackStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The fill. Laid out at the track's FULL width and shrunk with an animated `scaleX` — the only way
+ * a determinate fill can run on the native driver (`width` cannot; see `core/motion`'s config
+ * header). `transformOrigin` pins the growth to the left edge instead of the centre.
+ */
+export declare const fileUploadProgressFillStructure: import("../../core/style").VariantResolver<import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /**
  * The "selected file" row — a bordered chip below the trigger. `border.interactive`, NOT the
  * decorative `border.default`: `Card.variants.ts` documents `border.default` as measuring

package/lib/typescript/modules/filter-sheet/FilterSheet.variants.d.ts

@@ -14,7 +14,7 @@
  * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
  * only `react-native`'s `StyleSheet`, as `core/style` does).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 /** Same touch-target floor as every interactive control in this library (44dp — Apple HIG minimum,
  *  WCAG 2.5.5 AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
@@ -59,10 +59,12 @@ export interface FilterChipAccessibilityProps {
 }
 /**
  * Derives `FilterChip`'s a11y surface once, purely. Removable → `accessibilityRole="button"` with a
- * label that folds in the remove affordance (`"${label}, remove filter"`) so a screen reader
- * announces what the press does — the same "one accessible node reports the whole meaning"
- * contract `Badge` documents for its own chip. Locked (no `onRemove`) → no role at all: the
- * component renders a plain `View`, not a `Pressable`, so there is nothing to press.
+ * label that folds in the remove affordance so a screen reader announces what the press does — the
+ * same "one accessible node reports the whole meaning" contract `Badge` documents for its own chip.
+ * That wording comes from `core/a11y/labels`, shared with `chip` and `file-upload`, because three
+ * different names for one X affordance on one screen is a WCAG 3.2.4 failure. Locked (no
+ * `onRemove`) → no role at all: the component renders a plain `View`, not a `Pressable`, so there
+ * is nothing to press.
  */
 export declare function resolveFilterChipAccessibility(input: FilterChipAccessibilityInput): FilterChipAccessibilityProps;
 /** The one-tap quick-shortcut pill rendered above a dimension's Accordion section (e.g. a "Me"
@@ -83,6 +85,29 @@ export interface QuickChipColors {
  * neutral outlined pill on the sheet's own surface.
  */
 export declare function resolveQuickChipColors(colors: RoleColors, selected: boolean): QuickChipColors;
+export interface QuickChipAccessibilityInput {
+    readonly label: string;
+    readonly selected: boolean;
+}
+export interface QuickChipAccessibilityProps {
+    readonly accessibilityRole: "button";
+    readonly accessibilityLabel: string;
+    /** The WEB half. `aria-pressed` is the correct ARIA for a toggle button and has no React Native
+     *  equivalent, so the native half rides `accessibilityState` below. */
+    readonly "aria-pressed": boolean;
+    /** The NATIVE half — discarded by react-native-web, so it never reaches the DOM as an
+     *  `aria-selected` that would be invalid on `role="button"`. */
+    readonly accessibilityState: {
+        readonly selected: boolean;
+    };
+}
+/**
+ * Derives the quick chip's a11y surface purely. The pair is the one `docs/PLATFORM-A11Y-PROPS.md`
+ * prescribes for a toggle button, the one case where the two vocabularies genuinely diverge: each
+ * prop is inert on the platform it isn't aimed at, so neither is belt-and-braces. Unlike `Button`'s
+ * optional `selected`, a quick chip is ALWAYS a toggle, so both halves are always emitted.
+ */
+export declare function resolveQuickChipAccessibility(input: QuickChipAccessibilityInput): QuickChipAccessibilityProps;
 /** The header row hosting the sheet's title. */
 export declare const filterSheetHeaderStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /** One dimension's quick-chip row — wraps onto multiple lines rather than scrolling horizontally,

package/lib/typescript/modules/filter-sheet/FilterSheetBody.d.ts

@@ -1,14 +1,19 @@
 /**
  * FilterSheetBody — PRIVATE sub-component (not exported from `index.ts`, same status as
  * `BottomNavOverflowSheet`), handed to `FilterSheet.tsx`'s `<Drawer>` as `children`: the title
- * header, each dimension's optional quick-chip row, a single-open `Accordion` of per-dimension
- * facet controls, and the Apply/Reset footer.
+ * header, each dimension's optional quick-chip row, the per-dimension facet controls, and the
+ * Apply/Reset footer.
  *
- * Caps its own scrollable dimension list to a fraction of the window via
- * `resolveFilterSheetBodyHeight` — the same "keep the header/footer fixed, only the middle scrolls"
- * shape `BottomNavOverflowSheet` uses for its own search box + rows — so Apply/Reset stay reachable
- * regardless of how many dimensions a consumer supplies, all still within Drawer's own 90%-of-window
- * cap.
+ * The scrollable middle is ONE `VirtualList` over a flat row list — every dimension's quick-chip row
+ * first (unchanged order), then every dimension's own collapsible section — so a consumer supplying
+ * a long `dimensions` array mounts only the visible rows. A single `openKey` here keeps the
+ * "one section open at a time" contract that a single shared `Accordion` used to provide, now that
+ * each row owns its own one-item `Accordion`.
+ *
+ * Caps that list to a fraction of the window via `resolveFilterSheetBodyHeight` — the same
+ * "keep the header/footer fixed, only the middle scrolls" shape `BottomNavOverflowSheet` uses — so
+ * Apply/Reset stay reachable regardless of how many dimensions a consumer supplies, all still
+ * within Drawer's own 90%-of-window cap.
  */
 import type { FilterDimension, FilterValues } from "./FilterSheet";
 interface FilterSheetBodyProps {
@@ -23,6 +28,6 @@ interface FilterSheetBodyProps {
     readonly resetLabel: string;
     readonly testID: string | undefined;
 }
-export declare function FilterSheetBody({ dimensions, staged, onQuickToggle, onDimensionChange, onApply, onReset, title, applyLabel, resetLabel, testID, }: FilterSheetBodyProps): import("react").JSX.Element;
+export declare const FilterSheetBody: import("react").NamedExoticComponent<FilterSheetBodyProps>;
 export {};
 //# sourceMappingURL=FilterSheetBody.d.ts.map

package/lib/typescript/modules/folder-row/FolderRow.d.ts

@@ -0,0 +1,24 @@
+/**
+ * FolderRow — file-browser style row with optional leading icon and trailing meta text.
+ *
+ * It is rendered AS a list cell at scale, so it carries no mount animation and no loop: press
+ * feedback is a plain pressed background colour. Colours and style arrays are memoized so a
+ * parent re-render with unchanged props costs nothing.
+ *
+ * Keyboard/AT focus draws an INSET ring (WCAG 2.4.7) rather than the gap-outside ring `Button` uses
+ * — a full-bleed row's outset ring is clipped by the list it sits in.
+ */
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+export interface FolderRowProps {
+    title: string;
+    subtitle?: string;
+    icon?: IconName;
+    trailing?: string;
+    onPress?: () => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const FolderRow: import("react").NamedExoticComponent<FolderRowProps>;
+//# sourceMappingURL=FolderRow.d.ts.map

package/lib/typescript/modules/folder-row/FolderRow.variants.d.ts

@@ -0,0 +1,29 @@
+import type { RoleColors, Theme } from "../../theme/hooks";
+export declare const folderRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * The keyboard/AT focus ring, drawn INSIDE the row's own bounds — not the gap-outside ring
+ * `Button`/`CopyButton` use. A folder row is a full-bleed list cell: an outset ring would be clipped
+ * by the enclosing list (or by the row's own rounded corners) on the very edges that carry it. Its
+ * colour is applied inline over this, never hardcoded here.
+ */
+export declare const folderRowFocusRingStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export interface FolderRowAccessibleNameInput {
+    readonly title: string;
+    readonly subtitle?: string | undefined;
+    readonly trailing?: string | undefined;
+}
+/**
+ * The pressable row's whole accessible name. A `Pressable` is an accessibility element, so its
+ * subtree collapses into ONE node and its own `accessibilityLabel` is all a screen reader hears —
+ * anything left out of this string (the trailing "12 items", the subtitle) is simply never
+ * announced. Kept pure so that contract is unit-testable without rendering React Native.
+ */
+export declare function resolveFolderRowAccessibleName(input: FolderRowAccessibleNameInput): string;
+export interface FolderRowColors {
+    readonly background: string;
+    readonly pressed: string;
+    readonly title: string;
+    readonly subtitle: string;
+}
+export declare function resolveFolderRowColors(colors: RoleColors): FolderRowColors;
+//# sourceMappingURL=FolderRow.variants.d.ts.map

package/lib/typescript/modules/folder-row/index.d.ts

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

package/lib/typescript/modules/form-field/FormField.d.ts

@@ -0,0 +1,29 @@
+/**
+ * FormField — the label/required-marker/description/helper-error wrapper every crm-mobile form
+ * hand-rolled per-field (`formInputs.tsx`, `baseForm.tsx`). It draws no box of its own: it wraps
+ * ANY control (Input, Select, DatePicker, Combobox, a bare TextInput, …) and hands that control
+ * back the accessibility props it needs (`resolveFormFieldAccessibility`) via a render-prop, so the
+ * control never has to duplicate label/required/error logic itself.
+ *
+ * The only motion here is the helper/error message's enter-exit — the wrapper has no focus surface
+ * and nothing pressable of its own.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { FormFieldControlProps, FormFieldStatus } from "./FormField.variants";
+export interface FormFieldProps {
+    label: string;
+    required?: boolean;
+    description?: string;
+    status?: FormFieldStatus;
+    helperText?: string;
+    errorText?: string;
+    disabled?: boolean;
+    /** Render-prop so the control receives the derived accessibility name/state without a second
+     *  lookup — the one place this contract is computed. */
+    children: (control: FormFieldControlProps) => React.ReactNode;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const FormField: import("react").NamedExoticComponent<FormFieldProps>;
+//# sourceMappingURL=FormField.d.ts.map

package/lib/typescript/modules/form-field/FormField.variants.d.ts

@@ -0,0 +1,93 @@
+/**
+ * FormField's colour + behaviour resolution. There is no `structure` split here of the kind
+ * Button/Input have: a field wrapper draws no box of its own — it is pure vertical rhythm around
+ * whatever control the caller puts inside — so the only themed structure is spacing.
+ *
+ * Free of `lucide` and of any React tree, so the WCAG + contract tests import it directly
+ * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+import type { RoleColors, Theme } from "../../theme/hooks";
+/** A state, not a brand tone — a field's colour reports validity. Mirrors `InputStatus`. */
+export type FormFieldStatus = "default" | "error";
+export interface FormFieldStatusColors {
+    /** The visible label above the control. */
+    readonly label: string;
+    /** The `*` marker next to a required label. */
+    readonly requiredMark: string;
+    /** The optional description line between label and control. */
+    readonly description: string;
+    /** Helper text, or the error message when `status` is `"error"`. */
+    readonly message: string;
+}
+/**
+ * Maps `status` onto role colours. The required marker reads `status.danger.text` (not `.solid`):
+ * it is TEXT, so it owes 4.5:1 against the canvas, and `.text` is the rung picked for exactly that
+ * — `.solid` is a fill rung and only guarantees the looser 3:1.
+ */
+export declare function resolveFormFieldStatus(colors: RoleColors, status: FormFieldStatus): FormFieldStatusColors;
+export interface FormFieldAccessibilityInput {
+    readonly label?: string | undefined;
+    readonly required?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
+    readonly status?: FormFieldStatus | undefined;
+    readonly errorText?: string | undefined;
+    readonly description?: string | undefined;
+    readonly helperText?: string | undefined;
+    /**
+     * Instance-unique id prefix for the supporting nodes this wrapper renders, so the web build can
+     * point `aria-describedby` at real elements. Omitted (tests, native-only callers) leaves
+     * `aria-describedby` undefined — the native `accessibilityHint` still carries the same text.
+     */
+    readonly describedByIdPrefix?: string | undefined;
+}
+export interface FormFieldControlProps {
+    /** Hand this to the control inside — RN has no `htmlFor`, so the name must be copied onto it. */
+    readonly accessibilityLabel: string | undefined;
+    /** The supporting line, `description` first — the NATIVE stand-in for `aria-describedby`. */
+    readonly accessibilityHint: string | undefined;
+    /**
+     * The web half of the same link: ids of the supporting nodes this wrapper actually rendered.
+     * `react-native-web` forwards it and drops `accessibilityHint` entirely, so a control needs both.
+     */
+    readonly "aria-describedby": string | undefined;
+    /** WCAG 3.3.1's programmatic half — the red border alone is a 1.4.1 "use of colour" failure. */
+    readonly "aria-invalid": boolean;
+    readonly "aria-disabled": boolean;
+    /** Lets a status-aware control (Input, Select, …) paint its error border without a second prop. */
+    readonly status: FormFieldStatus;
+}
+/** Node ids the wrapper stamps and `aria-describedby` refers to. Derived once, never interpolated
+ *  at a call site where a typo would be a dangling reference no compiler catches. */
+export declare function formFieldDescriptionId(prefix: string): string;
+export declare function formFieldMessageId(prefix: string): string;
+/**
+ * Derives what the control inside needs, purely.
+ *
+ * WCAG 3.3.2 — the red `*` is a *visual* convention a screen reader does not convey, so "required"
+ * is appended to the accessible name. WCAG 3.3.1 — in the error state the message is appended too,
+ * so a reader landing on the control hears WHY it is invalid instead of only that something is
+ * wrong; the visible message is separately announced when it appears.
+ *
+ * WCAG 1.3.1 — `description`/`helperText` are visible lines with no programmatic link to the control,
+ * so they ride `accessibilityHint` on native and `aria-describedby` on web (`accessibilityHint` has
+ * no web equivalent at all — `react-native-web` never reads it). `description` wins the hint: it
+ * explains what to enter, where `helperText` only qualifies it. `errorText` stays in the NAME, not
+ * the hint — a hint is advisory and some readers suppress it, which a validity message must never be
+ * — and the same state sets `aria-invalid`, so the error is never carried by border colour alone.
+ *
+ * `aria-describedby` deliberately omits the message node in the error state: that string is already
+ * in the accessible name, and listing it twice announces it twice.
+ */
+export declare function resolveFormFieldAccessibility(input: FormFieldAccessibilityInput): FormFieldControlProps;
+/** The message a field shows — one at a time, error winning over helper (same rule as Input). */
+export declare function resolveFormFieldMessage(input: {
+    readonly status?: FormFieldStatus | undefined;
+    readonly helperText?: string | undefined;
+    readonly errorText?: string | undefined;
+}): string | undefined;
+/**
+ * Vertical rhythm only — no colours, no box. Compiles once per theme identity via the
+ * `WeakMap`-cached themed resolver.
+ */
+export declare const formFieldStructure: import("../../core/style").ThemedVariantResolver<Theme, {}, import("react-native").ViewStyle>;
+//# sourceMappingURL=FormField.variants.d.ts.map

package/lib/typescript/modules/form-field/index.d.ts

@@ -0,0 +1,4 @@
+export { FormField } from "./FormField";
+export type { FormFieldProps } from "./FormField";
+export type { FormFieldStatus, FormFieldControlProps } from "./FormField.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/gantt/Gantt.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Gantt — lightweight horizontal timeline chart (ported from tickets/mobile EpicTimeline).
+ *
+ * The lane-label column is hidden from assistive tech: it is a second, parallel column of the same
+ * names the bars already carry inside their composed labels ("<sublabel> <label>, <range>, <n>%
+ * complete"), and nothing associates a name in one column with a bar in the other (WCAG 1.3.1). One
+ * accessible node per lane, holding the whole relationship, is what a screen reader can act on.
+ */
+import type { LayoutStyle } from "../../core/style";
+import { type GanttLaneInput } from "./Gantt.variants";
+export interface GanttProps {
+    lanes: readonly GanttLaneInput[];
+    onLanePress?: (id: string) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Gantt: import("react").NamedExoticComponent<GanttProps>;
+//# sourceMappingURL=Gantt.d.ts.map

package/lib/typescript/modules/gantt/Gantt.variants.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Gantt layout math — ported from tickets/mobile EpicTimeline. Pure, testable.
+ */
+import type { RoleColors } from "../../theme/hooks";
+export declare const MS_PER_DAY = 86400000;
+export declare const GANTT_LABEL_W = 108;
+export declare const GANTT_ROW_H = 46;
+export declare const GANTT_BAR_H = 18;
+export declare const GANTT_MIN_BAR_W = 14;
+export declare const GANTT_MARKER_W = 12;
+export declare const GANTT_BASE_PX_PER_DAY = 4;
+export declare const GANTT_MIN_SPAN_MS: number;
+export declare const GANTT_PAD_MS: number;
+/** WCAG 2.5.5 target size, the library-wide floor (`Tabs`/`Pagination`/`Reorder` all pin the same 44). */
+export declare const MIN_TOUCH_TARGET = 44;
+/**
+ * A bar is a *data mark* — its 18dp height encodes nothing but the chart's row rhythm, and its width
+ * encodes the lane's duration, so neither can be grown to 44dp without lying about the data. When
+ * `onLanePress` is given the bar IS the press target, so the target is widened with `hitSlop`
+ * instead — the `Reorder`/`CopyButton` idiom for a mark whose drawn size is fixed by its meaning.
+ * Sized off the NARROWEST bar the layout can produce (`GANTT_MARKER_W`, a same-day lane) so every
+ * bar clears the floor, not just the wide ones. Vertical slop stays inside `GANTT_ROW_H`, so
+ * neighbouring rows' targets never overlap.
+ */
+export declare const GANTT_BAR_HIT_SLOP: {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+};
+export interface GanttLaneInput {
+    readonly id: string;
+    readonly label: string;
+    readonly sublabel?: string;
+    readonly startMs: number;
+    readonly endMs?: number;
+    readonly progress?: number;
+}
+export interface GanttLaneLayout {
+    readonly id: string;
+    readonly label: string;
+    readonly sublabel?: string;
+    readonly leftPx: number;
+    readonly widthPx: number;
+    readonly fillPx: number;
+    readonly isMarker: boolean;
+    readonly complete: boolean;
+    readonly ariaLabel: string;
+}
+export interface GanttModel {
+    readonly empty: boolean;
+    readonly lanes: readonly GanttLaneLayout[];
+    readonly chartWidth: number;
+    readonly bodyHeight: number;
+    readonly showToday: boolean;
+    readonly todayX: number;
+    readonly rangeLabel: string;
+}
+export interface GanttColors {
+    readonly bar: string;
+    readonly barComplete: string;
+    readonly track: string;
+    readonly border: string;
+    readonly today: string;
+    readonly label: string;
+    readonly sublabel: string;
+    readonly caption: string;
+}
+/**
+ * Bar/track/label roles. Two bindings are deliberate and measured, not the obvious pick:
+ *
+ *  - `barComplete` is the success ramp's `text` rung, NOT `solid` — the same choice (and the same
+ *    reason) `ProgressBar.variants.ts` documents: `success.solid` is a pale semantic green that
+ *    measures 2.19:1 against the `accent.subtle` track and 2.38:1 against the canvas in light mode,
+ *    failing WCAG 1.4.11 for the progress fill it draws. The `text` rung clears both (≥5.40 / ≥6.56).
+ *  - `caption` is `fg.muted`, NOT `fg.subtle` — the range label renders at `fontSize.xs`, and
+ *    `fg.subtle` (a flat `gray[500]`) falls to 3.19:1 on emerald light. Same defect as `Text`'s
+ *    `overline` and `Timeline`'s timestamp.
+ */
+export declare function resolveGanttColors(colors: RoleColors): GanttColors;
+export declare function computeGanttModel(lanes: readonly GanttLaneInput[], windowWidth: number, nowMs: number): GanttModel;
+//# sourceMappingURL=Gantt.variants.d.ts.map

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

@@ -0,0 +1,5 @@
+export { Gantt } from "./Gantt";
+export type { GanttProps } from "./Gantt";
+export type { GanttLaneInput, GanttLaneLayout, GanttModel } from "./Gantt.variants";
+export { computeGanttModel } from "./Gantt.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/image-viewer/ImageViewer.d.ts

@@ -0,0 +1,27 @@
+/**
+ * ImageViewer — full-screen modal gallery for images. Ported from tickets/mobile AttachmentViewerModal
+ * (simplified API — uri/id/label items, no attachment-specific fields).
+ */
+import type { LayoutStyle } from "../../core/style";
+export interface ImageViewerItem {
+    readonly id: string;
+    readonly uri: string;
+    readonly label?: string;
+    /**
+     * A smaller rendition for the thumbnail strip. Absent → the strip falls back to `uri`, which is
+     * decoded down to the thumb box by expo-image rather than at full resolution.
+     */
+    readonly thumbUri?: string;
+}
+export interface ImageViewerProps {
+    visible: boolean;
+    onRequestClose: () => void;
+    items: readonly ImageViewerItem[];
+    initialIndex?: number;
+    onShare?: (item: ImageViewerItem) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const ImageViewer: import("react").NamedExoticComponent<ImageViewerProps>;
+//# sourceMappingURL=ImageViewer.d.ts.map

package/lib/typescript/modules/image-viewer/ImageViewer.variants.d.ts

@@ -0,0 +1,3 @@
+/** ImageViewer has no variant unions — layout constants only. */
+export declare const IMAGE_VIEWER_PAGE_PADDING = 48;
+//# sourceMappingURL=ImageViewer.variants.d.ts.map

package/lib/typescript/modules/image-viewer/index.d.ts

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

package/lib/typescript/modules/input/Input.d.ts

@@ -3,7 +3,11 @@
  * comes from `createThemedVariants`, and the focus indicator is the same offset-ring pattern as
  * Button: a `border.focus` ring drawn a small gap OUTSIDE the field, on the canvas, because that is
  * the role token proven ≥ 3:1 against the canvas (over the field's own border it isn't guaranteed).
+ *
+ * Motion comes from `core/motion` — the ring crossfades on focus/blur and the helper/error message
+ * fades in and out. Both honour reduce-motion through `useMotion()`.
  */
+import { type TextInputProps } from "react-native";
 import type { IconName } from "../../core/icon";
 import type { LayoutStyle } from "../../core/style";
 import type { InputSize, InputStatus } from "./Input.variants";
@@ -18,7 +22,7 @@ export interface InputProps {
     label?: string;
     /** Shown below the field when `status` is `"default"`. */
     helperText?: string;
-    /** Shown below the field, with `accessibilityLiveRegion="polite"`, when `status` is `"error"`. */
+    /** Shown below the field, and announced to the screen reader, when `status` is `"error"`. */
     errorText?: string;
     leadingIcon?: IconName;
     trailingIcon?: IconName;
@@ -28,6 +32,10 @@ export interface InputProps {
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     containerStyle?: LayoutStyle;
     testID?: string;
+    /** Pass `"off"` on fields that aren't a real form (e.g. a search box) to suppress the OS
+     *  autofill/keyboard-suggestion strip — on Android that strip eats vertical space above the
+     *  keyboard, which can crowd out content (like search results) sitting just above it. */
+    autoComplete?: TextInputProps["autoComplete"];
 }
 export declare const Input: import("react").NamedExoticComponent<InputProps>;
 //# sourceMappingURL=Input.d.ts.map

package/lib/typescript/modules/input/Input.variants.d.ts

@@ -11,8 +11,8 @@
  * Free of `lucide` and of any React tree, so the WCAG + behaviour tests import it directly
  * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
-import type { RoleColors } from "../../theme";
-import type { Theme } from "../../theme";
+import type { RoleColors } from "../../theme/hooks";
+import type { Theme } from "../../theme/hooks";
 export type InputSize = "sm" | "md" | "lg";
 /** A state, not a brand tone — an input's colour reports validity, so it is never called `tone`. */
 export type InputStatus = "default" | "error";
@@ -75,13 +75,23 @@ export interface InputAccessibilityInput {
     readonly label?: string | undefined;
     readonly accessibilityLabel?: string | undefined;
     readonly disabled?: boolean | undefined;
+    readonly status?: InputStatus | undefined;
+    readonly helperText?: string | undefined;
+    readonly errorText?: string | undefined;
 }
 export interface InputAccessibilityProps {
-    /** Falls back to the visible label — a sibling `Text`, not a wrapping element RN can associate. */
+    /**
+     * Falls back to the visible label — a sibling `Text`, not a wrapping element RN can associate —
+     * with `errorText` appended in the error state, exactly as `resolveFormFieldAccessibility` builds
+     * its own name.
+     */
     readonly accessibilityLabel: string | undefined;
-    readonly accessibilityState: {
-        readonly disabled: boolean;
-    };
+    /** ADVISORY supporting text only (`helperText`). Never the validity message — see below. */
+    readonly accessibilityHint: string | undefined;
+    readonly "aria-invalid": boolean;
+    readonly "aria-disabled": boolean;
+    /** The string the component renders below the field — `errorText` in the error state, else `helperText`. */
+    readonly message: string | undefined;
     /** The `TextInput` `editable` prop — false while disabled, so the field blocks input. */
     readonly editable: boolean;
 }
@@ -90,6 +100,16 @@ export interface InputAccessibilityProps {
  * renderer. RN's `TextInput` has no `htmlFor`-equivalent link to a sibling label `Text`, so the
  * label's content must be copied onto `accessibilityLabel` directly (an explicit
  * `accessibilityLabel` always wins).
+ *
+ * The validity message rides the NAME, not the hint — the rule `resolveFormFieldAccessibility`
+ * already states and this resolver used to contradict: a hint is advisory and some readers suppress
+ * it, which a WCAG 3.3.1 message must never be. `helperText` is genuinely advisory, so it stays on
+ * the hint (native) and is linked by `aria-describedby` to the rendered message node (web, where
+ * `accessibilityHint` does not exist at all). The two never overlap: in the error state the message
+ * is in the name and `aria-invalid` is set, so nothing is announced twice.
+ *
+ * `message` is returned separately from `accessibilityHint` because the two diverged when the error
+ * moved into the name — the component still renders one visible line, error winning over helper.
  */
 export declare function resolveInputAccessibility(input: InputAccessibilityInput): InputAccessibilityProps;
 /**

package/lib/typescript/modules/limit-reached-modal/LimitReachedModal.d.ts

@@ -0,0 +1,34 @@
+/**
+ * LimitReachedModal — a plan-limit dialog, DELIBERATELY composed from this library's own,
+ * already-shipped `Modal` and `Button` rather than reimplementing a backdrop/panel/action row from
+ * scratch (same reasoning `AlertDialog` documents for its own composition). This module's own job
+ * is: the six-`kind` copy (admin vs "contact your administrator"), the optional usage line, and
+ * which action(s) appear — an always-present dismiss action plus an upgrade CTA gated on
+ * `canManageBilling`.
+ *
+ * Web's counterpart (`Micro-Components/src/Components/LimitReachedModal`) renders a brand-gradient
+ * header with a per-`kind` icon (mostly `Crown`, `Users` for the `user` kind). Neither ports: this
+ * library has no `LinearGradient` anywhere and the API contract bans a raw `color?: string`/gradient
+ * prop, and `crown` isn't a registered glyph. A single `triangle-alert` icon on the theme's
+ * `status.warning` role reads correctly for every kind and every brand instead — the same icon
+ * `Banner` already resolves for its own `warning` tone.
+ */
+import type { LimitKind } from "./LimitReachedModal.variants";
+export interface LimitReachedModalProps {
+    visible: boolean;
+    onRequestClose: () => void;
+    kind: LimitKind;
+    /** Plan limit for `kind`. Pass together with `used` to show an inline usage line. */
+    limit?: number | null;
+    used?: number | null;
+    /** `false` hides the upgrade CTA and swaps in "contact your administrator" copy. */
+    canManageBilling: boolean;
+    onUpgrade?: () => void;
+    /** Overrides the `kind`'s default title. */
+    title?: string;
+    /** Overrides the `kind`'s default admin/member message. */
+    message?: string;
+    testID?: string;
+}
+export declare const LimitReachedModal: import("react").NamedExoticComponent<LimitReachedModalProps>;
+//# sourceMappingURL=LimitReachedModal.d.ts.map