pixelize-native-library 1.0.6

package/lib/typescript/modules/stepper/Stepper.variants.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Stepper's pure resolvers + the themed/untethemed structural variant resolvers — the same split
+ * every sibling module follows (see `Button.variants.ts`):
+ *  - STRUCTURE (circle diameter, connector height, the pill radius, label spacing) lives in the
+ *    resolvers below — `createThemedVariants` where a value comes off the theme scale (the circle's
+ *    `radii.full`, the label's `space[2]` gap), `createVariants` where it doesn't (the connector's
+ *    own fixed height, same reasoning `RadioGroup.variants.ts` documents for `radioDotStructure`).
+ *    Both are registered once per identity, never rebuilt per render.
+ *  - COLOUR is state-driven, never a raw ramp and never a hardcoded hex. A step has no `tone`/
+ *    `variant` prop to widen — it is one of exactly three states (`resolveStepState`), and every
+ *    colour it can show is a role lookup off that state (`resolveStepCircleColors`,
+ *    `resolveStepLabelColor`, `resolveStepConnectorColor`).
+ *  - ACCESSIBILITY is `resolveStepperAccessibility`, kept pure so the single-summary-announcement
+ *    contract ("Step 2 of 4: …") is unit-testable without rendering React Native.
+ *
+ * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
+ * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
+ */
+import type { RoleColors, Theme } from "../../theme";
+export type StepState = "completed" | "active" | "upcoming";
+/**
+ * Visual diameter of a step's numbered circle, in dp. Not a touch target — Stepper is a v1
+ * DISPLAY-only component with no `onPress` (no `onStepPress` either — see `StepperProps`), so the
+ * 44dp floor other interactive modules hold themselves to (see `Button`'s `MIN_TOUCH_TARGET`) does
+ * not apply here, the same reasoning `Badge`/`Avatar` document for their own non-interactive boxes.
+ */
+export declare const STEP_CIRCLE_DIAMETER = 28;
+/** The connector line's thickness, in dp. A fixed design constant, not on the theme's border scale. */
+export declare const CONNECTOR_HEIGHT = 2;
+/**
+ * A step is "completed" strictly before `activeStep`, "active" AT `activeStep`, or "upcoming"
+ * strictly after it. Pure index arithmetic — no theme dependency — so the render layer and the
+ * tests share one source of truth for which of the three states a given index resolves to.
+ */
+export declare function resolveStepState(index: number, activeStep: number): StepState;
+export interface StepCircleColors {
+    /** Circle fill. */
+    readonly fill: string;
+    /** The step number, on `fill`. */
+    readonly text: string;
+}
+/**
+ * Maps a step's state onto role colours for its circle. Completed and active read IDENTICALLY (per
+ * spec — both are "reached" steps): the accent-filled circle with its derived on-colour number.
+ * Upcoming reads as the quiet neutral `bg.sunken` fill with the `fg.muted` number. There is no
+ * `tone` prop to widen: every colour a step circle can show is one of these two role lookups,
+ * guaranteed legible in both modes and never an off-palette value an app invented.
+ */
+export declare function resolveStepCircleColors(colors: RoleColors, state: StepState): StepCircleColors;
+/**
+ * The label below a reached step (completed/active) is the primary `fg.default`; an upcoming
+ * step's label is the quieter `fg.muted` — mirroring the same reached/upcoming split the circle
+ * uses, so the label's emphasis never contradicts its circle. Both rungs are already measured
+ * against `bg.canvas` elsewhere in this library (`Input`/`Select`/`Textarea` for `fg.muted`), and
+ * `Stepper.test.ts` measures them again here, for this component's own actual pairing.
+ */
+export declare function resolveStepLabelColor(colors: RoleColors, state: StepState): string;
+/**
+ * The connector segment between step `index` and step `index + 1`: solid accent up to (and
+ * including the approach into) the active step, the neutral decorative `border.default` beyond it —
+ * matching the spec's "accent.solid up to the active step, border.default beyond it". Split into
+ * two identically-coloured halves by `Stepper.tsx` (the trailing half of column `index`, the
+ * leading half of column `index + 1`) so the circle stays centered under its label regardless of
+ * label length — this function only ever answers for ONE logical segment, so both halves agree.
+ */
+export declare function resolveStepConnectorColor(colors: RoleColors, index: number, activeStep: number): string;
+export interface StepperAccessibilityInput {
+    readonly steps: readonly {
+        readonly label: string;
+    }[];
+    readonly activeStep: number;
+}
+export interface StepperAccessibilityProps {
+    readonly accessibilityRole: "progressbar";
+    readonly accessibilityValue: {
+        readonly min: 0;
+        readonly max: number;
+        readonly now: number;
+    };
+    readonly accessibilityLabel: string;
+}
+/**
+ * Derives ONE summary announcement for the whole stepper — "Step 2 of 4: <label>" — instead of
+ * letting a screen reader step through every circle and label individually (kept pure so the
+ * wording is unit-tested without a renderer; `Stepper.tsx` pairs this with `accessible` on the
+ * container, the same collapsing idiom `Badge` uses for its icon + label). `activeStep` is
+ * 0-indexed internally; the announcement surfaces the natural 1-based ordinal, and
+ * `accessibilityValue` surfaces the raw 0-indexed `min`/`max`/`now` progress triple.
+ */
+export declare function resolveStepperAccessibility(input: StepperAccessibilityInput): StepperAccessibilityProps;
+/**
+ * The numbered circle's structure — diameter + full radius, the same `radii.full` idiom `Avatar`
+ * uses (a finite 9999, not `Infinity` — RN rejects non-finite style values) to clip a square box to
+ * a perfect circle. No colour (state-driven, applied inline over this), so this compiles once per
+ * theme identity via the `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export declare const stepCircleStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** The label's gap under its circle — on the theme's spacing scale, so it's themed. */
+export declare const stepLabelStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").TextStyle>, import("react-native").TextStyle>;
+/**
+ * One connector half's structure — a flex-filled hairline. `CONNECTOR_HEIGHT` has no theme
+ * dependency (the component's own fixed design constant, not on the theme's border scale), so this
+ * uses the untethemed `createVariants` rather than `createThemedVariants` — same reasoning
+ * `RadioGroup.variants.ts` documents for `radioDotStructure`.
+ */
+export declare const stepConnectorLineStructure: import("../../core/style").VariantResolver<import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=Stepper.variants.d.ts.map

package/lib/typescript/modules/stepper/Stepper.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/stepper/Stepper.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGrD,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5D;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,uGAAuG;AACvG,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,SAAS,CAI7E;AAED,MAAM,WAAW,gBAAgB;IAC/B,mBAAmB;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,GAAG,gBAAgB,CAG9F;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,CAElF;AAED;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAEvG;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,KAAK,EAAE,SAAS;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,iBAAiB,EAAE,aAAa,CAAC;IAC1C,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7F,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;CACrC;AAED;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,yBAAyB,GAAG,yBAAyB,CAUvG;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,uKAQ7B,CAAC;AAEJ,uFAAuF;AACvF,eAAO,MAAM,kBAAkB,uKAK5B,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,0BAA0B,0JAErC,CAAC"}

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

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

package/lib/typescript/modules/stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/stepper/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}

package/lib/typescript/modules/switch/Switch.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Switch — a thin themed wrapper over React Native's own `<Switch>`. The native primitive already
+ * ships correct per-platform accessibility semantics (a real toggle control, not a hand-built
+ * track/thumb), so this module re-themes its two colours from ROLE tokens and leaves sizing/shape
+ * to RN — which is also why there is no `size` prop.
+ */
+import type { LayoutStyle } from "../../core/style";
+export interface SwitchProps {
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    disabled?: boolean;
+    /**
+     * A switch never renders visible text, so this is the only accessible name a screen reader has
+     * — required at the type level, never optional (mirrors `Button`'s icon-only contract).
+     */
+    accessibilityLabel: string;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Switch: import("react").NamedExoticComponent<SwitchProps>;
+//# sourceMappingURL=Switch.d.ts.map

package/lib/typescript/modules/switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/modules/switch/Switch.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKpD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,mDA8BjB,CAAC"}

package/lib/typescript/modules/switch/Switch.variants.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Switch's pure resolvers — colour + accessibility + the touch-target constant. No React, no
+ * lucide, same split as `Button.variants.ts`: the WCAG + behaviour tests import these directly,
+ * measuring real palettes instead of eyeballing a hex.
+ */
+import type { RoleColors } from "../../theme";
+export interface SwitchColors {
+    /** Track fill when `value` is false. */
+    readonly trackOff: string;
+    /** Track fill when `value` is true. */
+    readonly trackOn: string;
+    /** The thumb — one colour for both states; measured to clear 3:1 against each track (below). */
+    readonly thumbColor: string;
+}
+/**
+ * Maps the switch's track + thumb onto ROLE colours — never a hardcoded hex, so it's guaranteed
+ * legible in both modes and can never be an off-palette value an app invented.
+ *
+ * `trackOff` is `border.interactive`, the same proven ≥3:1-on-every-canvas neutral outline token
+ * `Button` uses for its outline boundary — not `border.default` (decorative, no contrast
+ * guarantee). `thumbColor` is `bg.canvas` alone, not `fg.default`: measured, `fg.default` falls as
+ * low as 1.16:1 against `trackOff` on several brands (it reads as a body-text colour, not a
+ * non-text UI surface), while `bg.canvas` clears ≥3:1 against BOTH `trackOff` and `trackOn` on
+ * every brand × mode — see `__tests__/Switch.test.ts`.
+ */
+export declare function resolveSwitchColors(colors: RoleColors): SwitchColors;
+export interface SwitchAccessibilityInput {
+    readonly value: boolean;
+    readonly disabled?: boolean | undefined;
+}
+export interface SwitchAccessibilityProps {
+    readonly accessibilityRole: "switch";
+    readonly accessibilityState: {
+        readonly checked: boolean;
+        readonly disabled: boolean;
+    };
+}
+/**
+ * RN's own `<Switch>` defaults `accessibilityRole` to `"switch"` but never sets
+ * `accessibilityState.checked` itself (only `disabled` is merged in, on Android) — so this module
+ * sets both explicitly, kept pure so the contract is testable without rendering React Native.
+ */
+export declare function resolveSwitchAccessibility(input: SwitchAccessibilityInput): SwitchAccessibilityProps;
+/** WCAG 2.5.5 (AAA) / HIG floor every interactive control is held to — same constant as `Button`. */
+export declare const MIN_TOUCH_TARGET = 44;
+/**
+ * RN's `Switch` has no `size` prop (a native intrinsic control doesn't scale cleanly), so its
+ * visual height is a platform constant rather than something this library chooses. 31 is iOS's
+ * exact intrinsic height (51×31pt) — the shorter of the two platforms' native defaults, so sizing
+ * the hit-slop off it keeps Android (whose default Material Switch is taller) covered too.
+ */
+export declare const SWITCH_HEIGHT = 31;
+/** Symmetric touch expansion so `SWITCH_HEIGHT + 2·slop ≥ 44`, same `hitSlop` pattern as `Button`. */
+export declare const SWITCH_HIT_SLOP: {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+};
+//# sourceMappingURL=Switch.variants.d.ts.map

package/lib/typescript/modules/switch/Switch.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/switch/Switch.variants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,WAAW,YAAY;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,gGAAgG;IAChG,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,UAAU,GAAG,YAAY,CAMpE;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,iBAAiB,EAAE,QAAQ,CAAC;IACrC,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;CACxF;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,wBAAwB,GAAG,wBAAwB,CAKpG;AAED,qGAAqG;AACrG,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,KAAK,CAAC;AAIhC,sGAAsG;AACtG,eAAO,MAAM,eAAe;;;;;CAAgE,CAAC"}

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

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

package/lib/typescript/modules/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/switch/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/lib/typescript/modules/tabs/Tabs.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Tabs — renders ONLY the tab strip. Content switching is the consumer's job: this mirrors how
+ * real design systems split the strip from panel content, and keeps the component simple and
+ * composable (no `TabPanel`, no rendering children per tab).
+ *
+ * The active-tab indicator is two `Animated.Value`s (`x`, `width`) driven off each tab's own
+ * `onLayout` measurement, keyed by `value` so reordering `items` doesn't scramble which
+ * measurement belongs to which tab. Reduced motion (WCAG 2.3.3) snaps both values with `setValue`
+ * instead of animating — same `duration: reducedMotion ? 0 : …` idiom `Button`'s press fade and
+ * `Toast`'s slide use, just applied to `setValue` vs `Animated.timing` instead of a duration of 0
+ * (a 0-width/0-position change would still tween through intermediate frames otherwise).
+ */
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+import type { TabsSize } from "./Tabs.variants";
+export interface TabItem {
+    readonly label: string;
+    readonly value: string;
+    readonly icon?: IconName;
+}
+export interface TabsProps {
+    items: TabItem[];
+    value: string;
+    onValueChange: (value: string) => void;
+    size?: TabsSize;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Tabs: import("react").NamedExoticComponent<TabsProps>;
+//# sourceMappingURL=Tabs.d.ts.map

package/lib/typescript/modules/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/modules/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAQH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAWpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAUD,eAAO,MAAM,IAAI,iDAiGf,CAAC"}

package/lib/typescript/modules/tabs/Tabs.variants.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Tabs' style + behaviour resolution — pure, React/lucide-free, same split as Button:
+ *  - STRUCTURE (strip gap, item height/padding/gap, indicator thickness/radius) lives in the
+ *    `createThemedVariants` resolvers below, registered once per (theme, size) — never rebuilt
+ *    per render.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveTabsColors`), never a raw hex: the
+ *    active label + indicator are always the accent role, the inactive label is always `fg.muted`.
+ *  - `resolveTabAccessibility` derives the per-tab a11y surface purely, so the "selected" contract
+ *    is unit-testable without rendering React Native.
+ */
+import type { RoleColors, Theme } from "../../theme";
+export type TabsSize = "sm" | "md" | "lg";
+/** Same floor as Button/RadioGroup — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
+ * stay isolated. */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface TabsSizeSpec {
+    /** Visual height in dp, per tab. */
+    readonly height: number;
+    /** Label size, on the theme's `fontSizes` scale. */
+    readonly fontSize: number;
+    /** Icon glyph size in dp. */
+    readonly iconSize: number;
+    /** Symmetric touch expansion so `height + 2·hitSlop ≥ 44`. */
+    readonly hitSlop: number;
+}
+/**
+ * Tabs-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target test
+ * can assert `height + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
+ */
+export declare const TABS_SIZES: {
+    readonly sm: {
+        readonly height: 36;
+        readonly fontSize: 14;
+        readonly iconSize: 16;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly height: 44;
+        readonly fontSize: 16;
+        readonly iconSize: 18;
+        readonly hitSlop: number;
+    };
+    readonly lg: {
+        readonly height: 52;
+        readonly fontSize: 18;
+        readonly iconSize: 20;
+        readonly hitSlop: number;
+    };
+};
+export interface TabsColors {
+    /** The active tab's label + icon. */
+    readonly activeLabel: string;
+    /** Every inactive tab's label + icon, read on the canvas. */
+    readonly inactiveLabel: string;
+    /** The bar under the active tab — a non-text UI marker, not a label. */
+    readonly indicator: string;
+    /** A tab's background while pressed. */
+    readonly pressedTab: string;
+}
+/**
+ * Maps the strip's fixed visual roles onto ROLE colours — never a hardcoded hex, so it's
+ * guaranteed legible in both modes and can never be an off-palette value an app invented. There is
+ * no per-tab `tone`: every active label + indicator is the accent role, every inactive label is
+ * the same neutral `fg.muted`, so — like `RadioGroup` — this is pure indirection, not a union to
+ * resolve.
+ */
+export declare function resolveTabsColors(colors: RoleColors): TabsColors;
+export interface TabAccessibilityInput {
+    readonly selected: boolean;
+}
+export interface TabAccessibilityProps {
+    readonly accessibilityRole: "tab";
+    readonly accessibilityState: {
+        readonly selected: boolean;
+    };
+}
+/**
+ * Derives one tab's accessibility surface purely, mirroring `resolveRadioRowAccessibility`: every
+ * item always carries a visible `label`, so — unlike `Button` — there is no icon-only shape here
+ * and nothing to gate a press on.
+ */
+export declare function resolveTabAccessibility(input: TabAccessibilityInput): TabAccessibilityProps;
+/** The strip container — a row with a small gap between tabs. */
+export declare const tabsStripStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * One tab's layout — height, inset padding, and the gap to its optional icon. Colour (label tint,
+ * pressed fill) is resolved and applied inline over this.
+ */
+export declare const tabItemStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 36;
+            columnGap: 4;
+            paddingHorizontal: 12;
+        };
+        md: {
+            height: 44;
+            columnGap: 8;
+            paddingHorizontal: 16;
+        };
+        lg: {
+            height: 52;
+            columnGap: 8;
+            paddingHorizontal: 20;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * The active-tab indicator bar. Thickness is the theme's `border.thick` (2dp); the pill radius is
+ * `radii.full`. Position (`left`/`width`, via `transform`/`width`) is driven by `Animated.Value`s
+ * in `Tabs.tsx`, not by this static resolver.
+ */
+export declare const tabsIndicatorStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=Tabs.variants.d.ts.map

package/lib/typescript/modules/tabs/Tabs.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/tabs/Tabs.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGrD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C;oBACoB;AACpB,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAInC,MAAM,WAAW,YAAY;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,6BAA6B;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;CAI4B,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,6DAA6D;IAC7D,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,wEAAwE;IACxE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,UAAU,GAAG,UAAU,CAYhE;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,iBAAiB,EAAE,KAAK,CAAC;IAClC,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;CAC7D;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAK3F;AAED,iEAAiE;AACjE,eAAO,MAAM,kBAAkB,uKAM5B,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;oCA2B1B,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,uKAQhC,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * Public surface of `pixelize-native-library/tabs`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The visual/behaviour resolvers (`resolveTabsColors`, `TABS_SIZES`, …)
+ * stay internal — a consumer configures Tabs through its props, never by importing its internals.
+ */
+export { Tabs } from "./Tabs";
+export type { TabsProps, TabItem } from "./Tabs";
+export type { TabsSize } from "./Tabs.variants";
+export type { IconName } from "../../core/icon";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/tabs/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjD,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGhD,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/typescript/modules/textarea/Textarea.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Textarea — the multiline sibling of `Input` (Input itself is being built in parallel; this module
+ * does not depend on it). Same closed-prop shape the rest of the catalogue follows: `size` / `status`
+ * are closed unions, colour is resolved from `RoleColors`, and `containerStyle` is the one documented
+ * `LayoutStyle` exception for a component wrapping a native `TextInput` (CLAUDE.md).
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { TextareaSize, TextareaStatus } from "./Textarea.variants";
+export interface TextareaProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    size?: TextareaSize;
+    status?: TextareaStatus;
+    disabled?: boolean;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    maxLength?: number;
+    /** Layout-only, outer box, applied exactly once as the LAST entry in the root style array. */
+    containerStyle?: LayoutStyle;
+    testID?: string;
+}
+export declare const Textarea: import("react").NamedExoticComponent<TextareaProps>;
+//# sourceMappingURL=Textarea.d.ts.map

package/lib/typescript/modules/textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/modules/textarea/Textarea.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAUpD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAQD,eAAO,MAAM,QAAQ,qDAyGnB,CAAC"}

package/lib/typescript/modules/textarea/Textarea.variants.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Textarea's style + behaviour resolution — pure functions the component (and its tests) depend on,
+ * plus the themed structural variant resolvers. Same split as `Button.variants.ts`:
+ *  - STRUCTURE (padding, radius, border WIDTH, minHeight) lives in `createThemedVariants` below,
+ *    registered once per theme identity.
+ *  - COLOUR is `status`-driven and resolved by `resolveTextareaStatus` from the theme's ROLE colours
+ *    — never a raw ramp, never a hardcoded hex — so `status` stays a closed union, not a `color`.
+ *  - ACCESSIBILITY prop derivation is `resolveTextareaAccessibility`, kept pure so the
+ *    label/hint/disabled contract is unit-testable without rendering React Native.
+ *
+ * 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";
+export type TextareaSize = "sm" | "md" | "lg";
+export type TextareaStatus = "default" | "error";
+/**
+ * A multiline field is already well past the 44dp floor at every size (unlike a compact control such
+ * as Button), so the touch target is met structurally — no `hitSlop` needed here. Kept local (not
+ * imported from a sibling module) per the library's module-isolation rule.
+ */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface TextareaSizeSpec {
+    /** Minimum visual height in dp — roughly 3 / 4 / 5 lines at this size's `fontSize`. */
+    readonly minHeight: number;
+    /** On the theme's `fontSizes` scale (14/16/18), kept as a plain constant so it's testable without a provider. */
+    readonly fontSize: number;
+}
+export declare const TEXTAREA_SIZES: {
+    readonly sm: {
+        readonly minHeight: 72;
+        readonly fontSize: 14;
+    };
+    readonly md: {
+        readonly minHeight: 96;
+        readonly fontSize: 16;
+    };
+    readonly lg: {
+        readonly minHeight: 128;
+        readonly fontSize: 18;
+    };
+};
+export interface TextareaStatusColors {
+    /** Field boundary. */
+    readonly border: string;
+    /** Helper/error message colour. */
+    readonly message: string;
+}
+/**
+ * Maps `status` onto the theme's role colours — the reason the prop is a closed union and not a
+ * `color?: string`. `error`'s border is `status.danger.solid`: measured ≥ 3:1 against the canvas on
+ * every brand (unlike `status.danger.border`, the pale ramp[200] chip outline, which does not clear
+ * 3:1 — see the WCAG test). `default`'s border is the same neutral `border.interactive` Button uses
+ * for its outline boundary, guaranteed ≥ 3:1 on every brand.
+ */
+export declare function resolveTextareaStatus(colors: RoleColors, status: TextareaStatus): TextareaStatusColors;
+export interface TextareaAccessibilityInput {
+    readonly label?: string | undefined;
+    readonly helperText?: string | undefined;
+    readonly errorText?: string | undefined;
+    readonly status?: TextareaStatus | undefined;
+    readonly disabled?: boolean | undefined;
+}
+export interface TextareaAccessibilityProps {
+    readonly accessibilityLabel: string | undefined;
+    /** The message actually shown — `errorText` when in error status (if provided), else `helperText`. */
+    readonly accessibilityHint: string | undefined;
+    readonly accessibilityState: {
+        readonly disabled: boolean;
+    };
+}
+/**
+ * Derives the accessibility surface once, purely, so the label/hint/disabled contract is testable
+ * without a renderer. React Native has no `aria-describedby`; `accessibilityHint` is the platform
+ * equivalent, so the SAME string this returns is also what the component renders as the visible
+ * helper/error `Text` — one source of truth, never two strings that could drift apart.
+ */
+export declare function resolveTextareaAccessibility(input: TextareaAccessibilityInput): TextareaAccessibilityProps;
+/**
+ * Structural styles only — layout, padding, radius, border WIDTH, per-size `minHeight`. No colours
+ * (those are status-driven and applied inline over this), so this compiles once per theme identity
+ * via the `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export declare const textareaFieldStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            minHeight: 72;
+        };
+        md: {
+            minHeight: 96;
+        };
+        lg: {
+            minHeight: 128;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/** The gap between label / field / helper text. Themed (uses `space`), so it goes through the same resolver. */
+export declare const textareaLayout: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=Textarea.variants.d.ts.map

package/lib/typescript/modules/textarea/Textarea.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/textarea/Textarea.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGrD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,MAAM,WAAW,gBAAgB;IAC/B,uFAAuF;IACvF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,iHAAiH;IACjH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;CAIgC,CAAC;AAE5D,MAAM,WAAW,oBAAoB;IACnC,sBAAsB;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,GAAG,oBAAoB,CAOtG;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAChD,sGAAsG;IACtG,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;CAC7D;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,0BAA0B,GAChC,0BAA0B,CAQ5B;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;oCAehC,CAAC;AAEJ,gHAAgH;AAChH,eAAO,MAAM,cAAc,uKAExB,CAAC"}

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

@@ -0,0 +1,9 @@
+/**
+ * Public surface of `pixelize-native-library/textarea`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The resolvers (`resolveTextareaStatus`, `TEXTAREA_SIZES`, …) stay internal
+ * — a consumer configures a Textarea through its props, never by importing its internals.
+ */
+export { Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea";
+export type { TextareaSize, TextareaStatus } from "./Textarea.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/textarea/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/typescript/modules/timeline/Timeline.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Timeline — a vertical list of dated/ordered events. Each row is a marker (a plain dot, or an
+ * icon in a filled circle) connected to the next row's marker by a line. Purely informational: no
+ * press handling, no per-item emphasis, no animation. The marker + connecting line are decorative
+ * (removing them changes spacing, not meaning — same reasoning `Divider` documents for its own
+ * hairline), so they are hidden from assistive tech; the title/description/timestamp stay in the
+ * normal accessibility tree, read in order, exactly like the plain `View` container `Card.tsx`
+ * documents ("nothing here for `accessibilityRole` to announce — children carry their own
+ * semantics").
+ */
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+export interface TimelineItem {
+    readonly title: string;
+    readonly description?: string;
+    readonly timestamp?: string;
+    /** A NAME, never a `ReactNode`. Always paired with the visible `title` — never the sole label of
+     *  anything, so it carries no `accessibilityLabel` requirement of its own. */
+    readonly icon?: IconName;
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Timeline: import("react").NamedExoticComponent<TimelineProps>;
+//# sourceMappingURL=Timeline.d.ts.map

package/lib/typescript/modules/timeline/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../src/modules/timeline/Timeline.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAapD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;kFAC8E;IAC9E,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAID,eAAO,MAAM,QAAQ,qDAsFnB,CAAC"}