pixelize-native-library 1.0.7 → 1.2.0

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

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

@@ -0,0 +1,46 @@
+/**
+ * LimitReachedModal's pure resolvers. Mirrors `AlertDialog.variants.ts`'s split: this module owns
+ * no colour resolver for the panel or the actions — those are `Modal`'s and `Button`'s own,
+ * applied unchanged (see `Modal.test.ts` / `Button.test.ts`). What IS this module's own contract:
+ * the six-`kind` × admin/member copy table (ported verbatim from web's `limitReachedCopy.ts` so
+ * both platforms read identically), the usage-line formatter, and the icon badge's own colour
+ * pairing (`status.warning.text` on `status.warning.subtle` — the same proven pairing Badge/Banner
+ * use for their own `subtle` variant, not a fresh, unmeasured one).
+ *
+ * Free of React and of any `Modal`/`Button` RENDER import — only `RoleColors`'s TYPE is pulled in
+ * — so this stays a pure resolver file, exactly like `AlertDialog.variants.ts`.
+ */
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type LimitKind = "record" | "automation" | "custom_modules" | "user" | "projects" | "tickets";
+export interface LimitReachedCopy {
+    readonly title: string;
+    readonly message: string;
+}
+/** `canManageBilling` selects the admin (upgrade-able) or member ("ask your admin") message. */
+export declare function resolveLimitReachedCopy(kind: LimitKind, canManageBilling: boolean): LimitReachedCopy;
+/** `null` when either value is missing — the caller renders no usage line at all in that case. */
+export declare function formatLimitUsage(kind: LimitKind, used?: number | null, limit?: number | null): string | null;
+export interface LimitReachedModalColors {
+    /** Icon badge fill. */
+    readonly iconBadge: string;
+    /** Icon glyph on `iconBadge` — the same `status.warning.text` on `status.warning.subtle`
+     *  pairing Badge/Banner's own `subtle` variant already proves ≥ 4.5:1 for every brand × mode. */
+    readonly icon: string;
+    /** Message body, read on the panel's `bg.surface`. */
+    readonly message: string;
+    /** Usage line — secondary, muted. */
+    readonly usage: string;
+}
+/**
+ * Maps LimitReachedModal onto the theme's role colours. The severity is fixed (`warning` — a plan
+ * limit is a soft stop, not a destructive action), so there is no `tone` prop to widen; every
+ * colour this component can show is one of these role lookups.
+ */
+export declare function resolveLimitReachedModalColors(colors: RoleColors): LimitReachedModalColors;
+export declare const LIMIT_REACHED_MODAL_ICON_SIZE = 20;
+export declare const LIMIT_REACHED_MODAL_ICON_BADGE_SIZE = 40;
+/** The icon's circular badge — structural only, colour applied inline over this. */
+export declare const limitReachedModalIconBadgeStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The two-action row beneath the usage line — same shape as `alertDialogActionsStructure`. */
+export declare const limitReachedModalActionsStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=LimitReachedModal.variants.d.ts.map

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

@@ -0,0 +1,10 @@
+/**
+ * Public surface of `pixelize-native-library/limit-reached-modal`. Value exports and type exports
+ * are split for `verbatimModuleSyntax`. The copy table, usage formatter, and colour/structure
+ * resolvers stay internal — a consumer configures a LimitReachedModal through its props, never by
+ * importing its internals.
+ */
+export { LimitReachedModal } from "./LimitReachedModal";
+export type { LimitReachedModalProps } from "./LimitReachedModal";
+export type { LimitKind } from "./LimitReachedModal.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/list-item/ListItem.d.ts

@@ -1,3 +1,9 @@
+/**
+ * ListItem — a row primitive. It is rendered AS a list cell at scale, so it carries no mount
+ * animation and no loop: the only motion is `usePressMotion`, which starts on touch and runs on the
+ * native driver. The pressable root is an animated `Pressable` rather than an `Animated.View`
+ * wrapper so a 5000-row list pays for no extra node.
+ */
 import type { ReactNode } from "react";
 import type { LayoutStyle } from "../../core/style";
 export interface ListItemProps {

package/lib/typescript/modules/list-item/ListItem.variants.d.ts

@@ -2,7 +2,7 @@
  * Pure resolvers for ListItem — no React, so the WCAG tests import this directly (mocking only
  * `react-native`'s `StyleSheet`, as every sibling module's tests do).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export declare const LIST_ITEM_DOT_SIZE = 8;
 export declare const LIST_ITEM_MIN_HEIGHT = 44;
 export interface ListItemColors {

package/lib/typescript/modules/markdown/Markdown.d.ts

@@ -1,3 +1,9 @@
+/**
+ * A markdown document is rendered whole, never virtualized: the heading outline is what a screen
+ * reader's rotor navigates, and windowing would expose only the ~10 blocks currently on screen
+ * (WCAG 2.4.1). It is also normally embedded in a caller's ScrollView, where a nested
+ * VirtualizedList is an error in its own right.
+ */
 import type { LayoutStyle } from "../../core/style";
 export interface MarkdownProps {
     content: string;

package/lib/typescript/modules/markdown/Markdown.variants.d.ts

@@ -2,7 +2,8 @@
  * Pure resolvers for Markdown — no React, so the WCAG tests import this directly (mocking only
  * `react-native`'s `StyleSheet`, as every sibling module's tests do).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { HeadingLevel } from "../../core/heading";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export interface MarkdownColors {
     readonly text: string;
     readonly heading: string;
@@ -18,7 +19,12 @@ export interface MarkdownHeadingSpec {
     readonly fontSize: number;
     readonly fontWeight: "semibold" | "bold";
 }
-export declare function resolveMarkdownHeading(theme: Theme, level: 1 | 2 | 3): MarkdownHeadingSpec;
+/**
+ * SIZE only — `h4`–`h6` deliberately share `h3`'s size while keeping their own `aria-level`. The
+ * document's structure is what the heading level carries; three more type sizes below `lg` would
+ * be smaller than body text.
+ */
+export declare function resolveMarkdownHeading(theme: Theme, level: HeadingLevel): MarkdownHeadingSpec;
 export declare const markdownStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const markdownCodeBlockStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const markdownBlockquoteStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;

package/lib/typescript/modules/markdown/parseMarkdown.d.ts

@@ -1,8 +1,9 @@
 /**
  * A small hand-rolled markdown parser — no dependencies, never throws. Supports the subset the
- * renderer draws: h1–h3, bold, italic, inline code, fenced code blocks, unordered/ordered lists,
+ * renderer draws: h1–h6, bold, italic, inline code, fenced code blocks, unordered/ordered lists,
  * links, blockquotes, paragraphs. Anything malformed degrades to literal text.
  */
+import type { HeadingLevel } from "../../core/heading";
 export type MarkdownInlineNode = {
     readonly type: "text";
     readonly content: string;
@@ -22,7 +23,7 @@ export type MarkdownInlineNode = {
 };
 export type MarkdownBlockNode = {
     readonly type: "heading";
-    readonly level: 1 | 2 | 3;
+    readonly level: HeadingLevel;
     readonly children: readonly MarkdownInlineNode[];
 } | {
     readonly type: "paragraph";