pixelize-native-library 1.0.6

package/lib/typescript/modules/number-input/NumberInput.variants.d.ts

@@ -0,0 +1,170 @@
+/**
+ * NumberInput's style + behaviour resolution — same split as Input.variants:
+ *  - STRUCTURE (height, width, border WIDTH) lives in the themed `numberInputStructure` /
+ *    `numberInputStepperStructure` resolvers, static per (brand, mode).
+ *  - COLOUR is `status`-driven (never a free `color` prop), resolved from the theme's ROLE colours by
+ *    `resolveNumberInputStatus` — same border token choice as Input, and for the same reason
+ *    (`status.danger.border` fails 3:1 against the canvas on several brands; `status.danger.solid`
+ *    clears it everywhere).
+ *  - VALUE handling (`clampNumberInputValue`, `parseNumberInputDraft`, `canDecrementNumberInput` /
+ *    `canIncrementNumberInput`) and ACCESSIBILITY prop derivation (`resolveNumberInputAccessibility`)
+ *    are kept pure so the clamping/limit contract is unit-testable without rendering React Native.
+ *
+ * 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, Theme } from "../../theme";
+export type NumberInputSize = "sm" | "md" | "lg";
+/** A state, not a brand tone — same reasoning as Input's `status`. */
+export type NumberInputStatus = "default" | "error";
+/** Same floor as Button/Input/Select — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
+ *  stay isolated. */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface NumberInputSizeSpec {
+    /** Visual row/stepper height in dp. Stepper buttons are square: width === height. */
+    readonly height: number;
+    /** Value text size, on the theme's `fontSizes` scale. */
+    readonly fontSize: number;
+    /** Stepper glyph size in dp. */
+    readonly iconSize: number;
+    /** Symmetric touch expansion so `height + 2·hitSlop ≥ 44`. */
+    readonly hitSlop: number;
+}
+/** Same numbers as Input's sizes, so a NumberInput lines up beside a plain field. */
+export declare const NUMBER_INPUT_SIZES: {
+    readonly sm: {
+        readonly height: 32;
+        readonly fontSize: 14;
+        readonly iconSize: 16;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly height: 40;
+        readonly fontSize: 16;
+        readonly iconSize: 18;
+        readonly hitSlop: number;
+    };
+    readonly lg: {
+        readonly height: 48;
+        readonly fontSize: 18;
+        readonly iconSize: 20;
+        readonly hitSlop: number;
+    };
+};
+export interface NumberInputStatusColors {
+    /** Field border — the neutral interactive outline, or the danger outline in "error" (≥ 3:1). */
+    readonly border: string;
+}
+export interface NumberInputStepperPressColors {
+    /** Pressed-state fill for a stepper `Pressable`. */
+    readonly fill: string;
+    /** Icon colour while that fill is showing — inverted so it stays readable on it. */
+    readonly icon: string;
+}
+/**
+ * Pressed-state colours for the stepper buttons. Deliberately NOT `bg.sunken`: a stepper carries no
+ * background at rest, so its fill's only edge is against `bg.canvas` — and `bg.sunken` measures only
+ * ~1.0–1.12:1 there (WCAG 1.4.11 needs ≥ 3:1). This reuses Button's own "neutral" solid recipe
+ * (`fg.default` fill / `bg.canvas` label) instead of inventing a new colour: `fg.default` is already
+ * proven ≥ 4.5:1 against `bg.canvas` by the resting-icon test above, and contrast is symmetric, so the
+ * fill clears the 3:1 non-text minimum AND the inverted icon clears 4.5:1 text contrast on it, on
+ * every brand × mode, for free — see the `it.each` measurement in `NumberInput.test.ts`.
+ *
+ * Keyboard/AT focus is a SEPARATE indicator — the offset `border.focus` ring `NumberInput.tsx` draws
+ * per stepper, same geometry/token as Button/Input/Checkbox. This fill is for the touch press only.
+ */
+export declare function resolveNumberInputStepperPressColors(colors: RoleColors): NumberInputStepperPressColors;
+/**
+ * Maps `status` onto the theme's role colours — identical reasoning and token choice to Input's
+ * `resolveInputStatus`: the error border deliberately reads `status.danger.solid`, NOT
+ * `status.danger.border` (the latter is the decorative chip/badge outline and measures below 3:1
+ * against the canvas on several brand × mode combinations).
+ */
+export declare function resolveNumberInputStatus(colors: RoleColors, status: NumberInputStatus): NumberInputStatusColors;
+export interface NumberInputAccessibilityInput {
+    readonly label?: string | undefined;
+    readonly accessibilityLabel?: string | undefined;
+    readonly disabled?: boolean | undefined;
+}
+export interface NumberInputAccessibilityProps {
+    /** Falls back to the visible label — a sibling `Text`, not a wrapping element RN can associate. */
+    readonly accessibilityLabel: string | undefined;
+    readonly accessibilityState: {
+        readonly disabled: boolean;
+    };
+    /** The `TextInput` `editable` prop — false while disabled, so the field blocks typing. */
+    readonly editable: boolean;
+}
+/** Same fallback contract as `resolveInputAccessibility`: an explicit `accessibilityLabel` always
+ *  wins over the visible label. */
+export declare function resolveNumberInputAccessibility(input: NumberInputAccessibilityInput): NumberInputAccessibilityProps;
+/** Clamps to [min, max]. Either bound may be absent, meaning "no floor"/"no ceiling" on that side. */
+export declare function clampNumberInputValue(value: number, min?: number, max?: number): number;
+/**
+ * Parses a typed draft to a finite number, or `null` for anything that isn't a complete number yet
+ * ("", "-", ".", "-.") — so the caller can tell "no value yet" apart from a real `0` and doesn't
+ * commit a bogus `NaN`/clamp on every half-typed keystroke.
+ */
+export declare function parseNumberInputDraft(raw: string): number | null;
+export interface NumberInputLimitInput {
+    readonly value: number;
+    readonly min?: number | undefined;
+    readonly max?: number | undefined;
+    readonly disabled?: boolean | undefined;
+}
+/** Decrement is blocked once `value` is already at (or below) `min`, or the field is disabled. */
+export declare function canDecrementNumberInput(input: NumberInputLimitInput): boolean;
+/** Increment is blocked once `value` is already at (or above) `max`, or the field is disabled. */
+export declare function canIncrementNumberInput(input: NumberInputLimitInput): boolean;
+/**
+ * Structural styles for the field row — layout, height, border WIDTH. No colours (status-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 numberInputStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+        };
+        md: {
+            height: 40;
+        };
+        lg: {
+            height: 48;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * Structural styles for each stepper button. `alignSelf: "stretch"` is the same fix Input's own
+ * `TextInput` carries: without it, the row's `alignItems: "center"` shrinks the button to its
+ * intrinsic content height instead of the row's full `spec.height`, silently voiding the `hitSlop`
+ * touch-target math (a real Wave-1 bug on Input — not one to repeat here). The corner radii on the
+ * outer edge match the row's own `radii.base` so a pressed/focused fill doesn't square off past the
+ * row's rounded corner.
+ */
+export declare const numberInputStepperStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            width: 32;
+        };
+        md: {
+            width: 40;
+        };
+        lg: {
+            width: 48;
+        };
+    };
+    position: {
+        leading: {
+            borderRightWidth: 1;
+            borderTopLeftRadius: 8;
+            borderBottomLeftRadius: 8;
+        };
+        trailing: {
+            borderLeftWidth: 1;
+            borderTopRightRadius: 8;
+            borderBottomRightRadius: 8;
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=NumberInput.variants.d.ts.map

package/lib/typescript/modules/number-input/NumberInput.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/number-input/NumberInput.variants.ts"],"names":[],"mappings":"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"}

package/lib/typescript/modules/number-input/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Public surface of `pixelize-native-library/number-input`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The visual/behaviour resolvers (`resolveNumberInputStatus`,
+ * `NUMBER_INPUT_SIZES`, …) stay internal — a consumer configures a NumberInput through its props,
+ * never by importing its internals. The stepper icons are fixed ("minus"/"plus"), so there is no
+ * `icon` prop and nothing to re-export from `core/icon`.
+ */
+export { NumberInput } from "./NumberInput";
+export type { NumberInputProps } from "./NumberInput";
+export type { NumberInputSize, NumberInputStatus } from "./NumberInput.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/number-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/number-input/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/typescript/modules/pin-input/PinInput.d.ts

@@ -0,0 +1,40 @@
+/**
+ * PinInput — OTP-style multi-box code entry. Backed by ONE real (near-invisible) `TextInput` that
+ * captures the actual keyboard input; the N visual boxes are a pure PROJECTION of that single
+ * controlled `value` string, never N separately-focusable fields. This is deliberate, not a
+ * shortcut: managing focus across N `TextInput`s is fragile (advancing on every keystroke breaks
+ * on backspace/selection) and defeats OS paste — a pasted code lands in whichever box happened to
+ * be focused instead of filling the whole field. One field, one source of truth.
+ *
+ * Touch target: the ROW is the single 44dp+ touch target (`hitSlop` on the wrapping `Pressable`),
+ * not per-box targets — tapping ANY box focuses the same underlying field, so splitting the target
+ * per box would just be N ways to trigger the identical action.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { PinInputKeyboardType, PinInputSize, PinInputStatus } from "./PinInput.variants";
+export interface PinInputProps {
+    /** Number of boxes / max code length. */
+    length?: number;
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Fires once per completion — when `value.length` reaches `length` on a CHANGE, never on every re-render while already full. */
+    onComplete?: (value: string) => void;
+    /**
+     * Renders a dot instead of the character per box — the masking concept `Input`'s `secureTextEntry`
+     * uses. Also forwarded to the real hidden `TextInput` (so OS-level secure-input behaviour engages)
+     * and masks the announced `accessibilityValue` — a screen reader must never speak the raw digits.
+     */
+    secureTextEntry?: boolean;
+    keyboardType?: PinInputKeyboardType;
+    status?: PinInputStatus;
+    disabled?: boolean;
+    size?: PinInputSize;
+    autoFocus?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+    /** REQUIRED — this is effectively one field with no visible text label (e.g. "6-digit verification code"). */
+    accessibilityLabel: string;
+}
+export declare const PinInput: import("react").NamedExoticComponent<PinInputProps>;
+//# sourceMappingURL=PinInput.d.ts.map

package/lib/typescript/modules/pin-input/PinInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../../src/modules/pin-input/PinInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAapD,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE9F,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,iIAAiI;IACjI,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8GAA8G;IAC9G,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAKD,eAAO,MAAM,QAAQ,qDA2InB,CAAC"}

package/lib/typescript/modules/pin-input/PinInput.variants.d.ts

@@ -0,0 +1,164 @@
+/**
+ * PinInput's style + behaviour resolution — same split as Button/Input:
+ *  - STRUCTURE (box size, row gap, border WIDTH) lives in the themed `pinInputRowStructure` /
+ *    `pinInputBoxStructure` resolvers, static per (brand, mode), registered once via
+ *    `StyleSheet.create`.
+ *  - COLOUR is `status`-driven (never a free `color` prop) and resolved from the theme's ROLE
+ *    colours by `resolvePinInputBoxColors`, so it is guaranteed legible in both modes.
+ *  - The keystroke/paste contract (`clampPinInputValue`), the active-box index
+ *    (`resolvePinInputActiveIndex`), completion (`isPinInputComplete`), and accessibility prop
+ *    derivation (`resolvePinInputAccessibility`) are kept pure so they are unit-testable without
+ *    rendering React Native.
+ *
+ * Free of React and of any `TextInput`/`Pressable` 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 PinInputSize = "sm" | "md" | "lg";
+/** A validity state, not a brand tone — same reasoning as `InputStatus`. */
+export type PinInputStatus = "default" | "error";
+export type PinInputKeyboardType = "number-pad" | "default";
+/** Same floor as Button/Input — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules stay isolated. */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface PinInputSizeSpec {
+    /** Visual box width/height in dp (boxes are square). */
+    readonly boxSize: number;
+    /** Digit glyph size, on the theme's `fontSizes` scale (20/24/30). */
+    readonly fontSize: number;
+    /** Masked-dot diameter in dp, used instead of the glyph when `secureTextEntry` is set. */
+    readonly dotSize: number;
+    /** Horizontal gap between boxes in dp. */
+    readonly gap: number;
+    /**
+     * Symmetric touch expansion applied to the ROW (not per box) so
+     * `boxSize + 2·hitSlop ≥ 44` — see the "one contiguous touch target" note on `PinInput.tsx`.
+     */
+    readonly hitSlop: number;
+}
+/**
+ * PinInput-specific dimensions. Box size / dot size / gap are the component's own design
+ * constants; `fontSize` sits on the theme's `fontSizes` scale (xl/2xl/3xl = 20/24/30) — a digit
+ * reads larger than body text, unlike Button/Input's 14/16/18 label sizes.
+ */
+export declare const PIN_INPUT_SIZES: {
+    readonly sm: {
+        readonly boxSize: 40;
+        readonly fontSize: 20;
+        readonly dotSize: 8;
+        readonly gap: 8;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly boxSize: 48;
+        readonly fontSize: 24;
+        readonly dotSize: 10;
+        readonly gap: 10;
+        readonly hitSlop: number;
+    };
+    readonly lg: {
+        readonly boxSize: 56;
+        readonly fontSize: 30;
+        readonly dotSize: 12;
+        readonly gap: 12;
+        readonly hitSlop: number;
+    };
+};
+export interface PinInputBoxColors {
+    /** Box border — the neutral interactive outline, or the danger outline in "error" (≥ 3:1). */
+    readonly border: string;
+    /** Digit glyph / masked-dot fill (≥ 4.5:1 on the canvas — boxes render no explicit background). */
+    readonly text: string;
+}
+/**
+ * Maps `status` onto the theme's role colours — identical precedent to `resolveInputStatus`.
+ * The error border deliberately reads `status.danger.solid`, NOT `status.danger.border`:
+ * `StatusColors.border` is documented (see `Input.variants.ts`) as the decorative chip/badge
+ * outline (`ramp[200]`) and measures below 3:1 against the canvas on several brands in dark mode.
+ * A pin box border is a real UI boundary (WCAG 1.4.11), so it needs the rung that actually clears
+ * 3:1 everywhere — `solid` does, measured in `PinInput.test.ts`.
+ */
+export declare function resolvePinInputBoxColors(colors: RoleColors, status: PinInputStatus): PinInputBoxColors;
+/**
+ * Strips the keystroke/paste payload to what an OTP field actually accepts: digits only when
+ * `keyboardType` is `"number-pad"` (a pasted code with stray spaces/dashes still lands cleanly),
+ * left as-is for `"default"` (alphanumeric codes), then clamped to `length` characters either way
+ * — a paste longer than the field can never overflow the controlled `value`.
+ */
+export declare function clampPinInputValue(raw: string, length: number, keyboardType: PinInputKeyboardType): string;
+/**
+ * The box index that represents "where typing would land next": the current value's length, or
+ * the last box once the value is full. Pure so the projection from `value` → active box is
+ * testable without a renderer; the component gates its VISIBLE indicator on this AND real
+ * `TextInput` focus (WCAG 2.4.7 — a focus indicator only while actually focused).
+ */
+export declare function resolvePinInputActiveIndex(value: string, length: number): number;
+/** Whether `value` fills every box — the trigger condition for `onComplete`. */
+export declare function isPinInputComplete(value: string, length: number): boolean;
+export interface PinInputAccessibilityInput {
+    readonly accessibilityLabel: string;
+    readonly value: string;
+    readonly disabled?: boolean | undefined;
+    /** When true, `accessibilityValue.text` is masked to `•` per digit — never the raw value — the a11y mirror of the visual dot masking. */
+    readonly secureTextEntry?: boolean | undefined;
+}
+export interface PinInputAccessibilityProps {
+    readonly accessibilityLabel: string;
+    /**
+     * Announces the digits entered so far — this is the one real field, not N mystery boxes. When
+     * `secureTextEntry` is set, masked to one `•` per digit so a screen reader never speaks the raw
+     * code aloud, matching what a native masked field announces.
+     */
+    readonly accessibilityValue: {
+        readonly text: string;
+    };
+    readonly accessibilityState: {
+        readonly disabled: boolean;
+    };
+    /** The `TextInput` `editable` prop — false while disabled, so the field blocks input. */
+    readonly editable: boolean;
+}
+/**
+ * Derives the accessibility surface once, purely — same shape as `resolveInputAccessibility`, but
+ * `accessibilityLabel` is required (never a fallback) because PinInput has no visible text label of
+ * its own; the caller must always name the field (e.g. "6-digit verification code").
+ */
+export declare function resolvePinInputAccessibility(input: PinInputAccessibilityInput): PinInputAccessibilityProps;
+/**
+ * Structural styles for the ROW — the single contiguous touch target. No colours (status is
+ * resolved per box by `resolvePinInputBoxColors`), so this compiles once per theme identity via
+ * the `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export declare const pinInputRowStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            columnGap: 8;
+        };
+        md: {
+            columnGap: 10;
+        };
+        lg: {
+            columnGap: 12;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * Structural styles for ONE box — square, bordered, centred content. No colours (border/text are
+ * resolved by `resolvePinInputBoxColors` and applied inline over this).
+ */
+export declare const pinInputBoxStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            width: 40;
+            height: 40;
+        };
+        md: {
+            width: 48;
+            height: 48;
+        };
+        lg: {
+            width: 56;
+            height: 56;
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=PinInput.variants.d.ts.map

package/lib/typescript/modules/pin-input/PinInput.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/pin-input/PinInput.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGrD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,4EAA4E;AAC5E,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,CAAC;AACjD,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,SAAS,CAAC;AAE5D,6GAA6G;AAC7G,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAInC,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,0FAA0F;IAC1F,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,0CAA0C;IAC1C,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;CAI+B,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC,8FAA8F;IAC9F,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,mGAAmG;IACnG,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,GAAG,iBAAiB,CAKtG;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,oBAAoB,GAAG,MAAM,CAG1G;AAED;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEhF;AAED,gFAAgF;AAChF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAEzE;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,yIAAyI;IACzI,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChD;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IAC5D,yFAAyF;IACzF,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAKD;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,0BAA0B,GAAG,0BAA0B,CAS1G;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;oCAc9B,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;oCAe9B,CAAC"}

package/lib/typescript/modules/pin-input/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Public surface of `pixelize-native-library/pin-input`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The visual/behaviour resolvers (`resolvePinInputBoxColors`,
+ * `PIN_INPUT_SIZES`, …) stay internal — a consumer configures a PinInput through its props, never
+ * by importing its internals.
+ */
+export { PinInput } from "./PinInput";
+export type { PinInputProps } from "./PinInput";
+export type { PinInputKeyboardType, PinInputSize, PinInputStatus } from "./PinInput.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/pin-input/index.d.ts.map

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

package/lib/typescript/modules/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ProgressBar — a linear progress indicator. Determinate (`value` 0–100) renders a static fill
+ * sized to the value; indeterminate (`value` omitted) renders a looping `Animated` sweep across the
+ * track, skipped in favour of a static half-filled track when `useReducedMotion()` is true (WCAG
+ * 2.3.3 — never a frame frozen mid-sweep).
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { ProgressBarSize, ProgressBarTone } from "./ProgressBar.variants";
+export interface ProgressBarProps {
+    /** 0–100. Omit for an indeterminate sweep. */
+    value?: number;
+    tone?: ProgressBarTone;
+    /** Closed union — drives the track (and fill) height. */
+    size?: ProgressBarSize;
+    accessibilityLabel?: string;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const ProgressBar: import("react").NamedExoticComponent<ProgressBarProps>;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/lib/typescript/modules/progress-bar/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/modules/progress-bar/ProgressBar.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAapD,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE/E,MAAM,WAAW,gBAAgB;IAC/B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,yDAAyD;IACzD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,wDA+FtB,CAAC"}

package/lib/typescript/modules/progress-bar/ProgressBar.variants.d.ts

@@ -0,0 +1,112 @@
+/**
+ * ProgressBar's style + accessibility resolution — the pure functions the component (and its tests)
+ * depend on, plus the themed structural variant resolvers.
+ *
+ * The split every sibling module copies (see `Button.variants.ts`):
+ *  - STRUCTURE (track height, the pill radius, `overflow: hidden`) lives in the `createThemedVariants`
+ *    resolvers below — static per (brand, mode), registered once.
+ *  - COLOUR is tone-driven and resolved by `resolveProgressBarFill` from the theme's ROLE colours,
+ *    never a raw ramp and never a hardcoded hex. The track itself has exactly one neutral colour
+ *    (`bg.sunken`, applied inline in `ProgressBar.tsx`) — there is nothing to widen on the track.
+ *  - ACCESSIBILITY prop derivation is `resolveProgressBarAccessibility`, kept pure so the
+ *    determinate/indeterminate contract is unit-testable without rendering React Native.
+ *
+ * Everything here is free of React and of any Animated import, so the WCAG + behaviour tests import
+ * it directly (mocking only `react-native`'s `StyleSheet`, as `Button.variants` does).
+ */
+import type { RoleColors, Theme } from "../../theme";
+export type ProgressBarTone = "accent" | "success" | "warning" | "danger";
+export type ProgressBarSize = "sm" | "md";
+export interface ProgressBarSizeSpec {
+    /** Track height in dp. */
+    readonly height: number;
+}
+/** Track heights. Not on the theme's spacing scale, so a plain constant (same reasoning as `BUTTON_SIZES`). */
+export declare const PROGRESS_BAR_SIZES: {
+    readonly sm: {
+        readonly height: 4;
+    };
+    readonly md: {
+        readonly height: 8;
+    };
+};
+/** Fraction of the track's measured width the indeterminate sweep segment covers. */
+export declare const SWEEP_FRACTION = 0.4;
+/** One full indeterminate sweep cycle, ms. */
+export declare const SWEEP_DURATION_MS = 1200;
+/** Fill fraction rendered, static, when the sweep is skipped for reduced motion (WCAG 2.3.3). */
+export declare const REDUCED_MOTION_FILL_FRACTION = 0.5;
+/**
+ * Clamps a caller-given value onto the 0–100 scale the track, the fill width, and
+ * `accessibilityValue.now` all agree on. `undefined` is preserved — that absence IS the
+ * indeterminate signal, never a value to coerce. A `NaN` (a caller's bad ratio math) clamps to `0`
+ * rather than propagating into a `NaN%` width or an invalid `now`.
+ */
+export declare function resolveProgressBarValue(value: number | undefined): number | undefined;
+/**
+ * Maps `tone` onto the theme's ROLE colours — using the `text` rung, not `solid`. Never a raw ramp
+ * or a hardcoded hex, so every fill is guaranteed legible and can never be an off-palette value an
+ * app invented.
+ *
+ * Why `text`, not the seemingly-obvious `solid`: `solid` is only guaranteed to clear contrast
+ * against its OWN derived `onSolid` label, never against an arbitrary neutral surface. Measured
+ * against the `bg.sunken` track this component actually uses, `warning.solid`/`success.solid` (a
+ * pale, semantic-ramp orange/green shared across every brand) fall as low as ~1.9–2.4:1 in light
+ * mode — a real `AA_NON_TEXT` (3:1) failure, the same class of mistake `RadioGroup`/`Tabs` shipped
+ * by assuming a role pairing "should" clear AA without measuring it. `text` is `readableOn(ramp,
+ * [ramp[50]])` — the SAME role `Button` already uses for its outline/ghost/link label specifically
+ * because it is engineered to read on a pale surface — and measured here at ≥ 4.4:1 against
+ * `bg.sunken` for every tone × all 8 brands × both modes (`ProgressBar.test.ts`), comfortably
+ * clearing the 3:1 floor this fill actually needs.
+ */
+export declare function resolveProgressBarFill(colors: RoleColors, tone: ProgressBarTone): string;
+export interface ProgressBarAccessibilityInput {
+    /** Already clamped via `resolveProgressBarValue` — `undefined` means indeterminate. */
+    readonly value: number | undefined;
+}
+export interface ProgressBarAccessibilityProps {
+    readonly accessibilityRole: "progressbar";
+    readonly accessibilityValue: {
+        readonly min: number;
+        readonly max: number;
+        readonly now: number;
+    } | undefined;
+    readonly accessibilityState: {
+        readonly busy: boolean;
+    };
+}
+/**
+ * Derives the accessibility surface once, purely, so the determinate/indeterminate contract is
+ * testable without a renderer:
+ *  - determinate (`value` given) → `accessibilityValue` carries `now`; `busy` is false once the
+ *    value is known.
+ *  - indeterminate (`value` omitted) → NO `accessibilityValue` at all. The absence of `now` is how
+ *    assistive tech reports "indeterminate" — inventing a guessed number would misreport actual
+ *    progress. `busy: true` (WCAG 1.4.1) announces the ongoing work the visual sweep alone doesn't
+ *    convey to a screen reader.
+ */
+export declare function resolveProgressBarAccessibility(input: ProgressBarAccessibilityInput): ProgressBarAccessibilityProps;
+/**
+ * Structural track styles: `size`-driven height, full pill radius, and `overflow: hidden` so the
+ * fill/sweep sibling clips to the rounded ends without recomputing the radius itself. No colour here
+ * (the track's single neutral fill is applied inline in `ProgressBar.tsx`) — same structure/colour
+ * split as `buttonStructure`/`skeletonStructure`.
+ */
+export declare const progressBarTrackStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 4;
+        };
+        md: {
+            height: 8;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * The fill/sweep segment's own corner radius — matches the track's, so a partial determinate fill
+ * or the indeterminate sweep still reads as a rounded pill rather than a rectangle poking past a
+ * rounded track end. No `size` variant: the segment's height always fills the track (`height: "100%"`,
+ * applied inline in `ProgressBar.tsx`), so only the radius is structural here.
+ */
+export declare const progressBarFillStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=ProgressBar.variants.d.ts.map

package/lib/typescript/modules/progress-bar/ProgressBar.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/progress-bar/ProgressBar.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGrD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,mBAAmB;IAClC,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,+GAA+G;AAC/G,eAAO,MAAM,kBAAkB;;;;;;;CAGkC,CAAC;AAElE,qFAAqF;AACrF,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,8CAA8C;AAC9C,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,iGAAiG;AACjG,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAIrF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,GAAG,MAAM,CAWxF;AAED,MAAM,WAAW,6BAA6B;IAC5C,uFAAuF;IACvF,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,iBAAiB,EAAE,aAAa,CAAC;IAC1C,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IAC9G,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;CACzD;AAED;;;;;;;;;GASG;AACH,wBAAgB,+BAA+B,CAC7C,KAAK,EAAE,6BAA6B,GACnC,6BAA6B,CAc/B;AAED;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;;oCASnC,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,uKAElC,CAAC"}

package/lib/typescript/modules/progress-bar/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Public surface of `pixelize-native-library/progress-bar`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The resolvers (`resolveProgressBarFill`, `PROGRESS_BAR_SIZES`, …) stay
+ * internal — a consumer configures a ProgressBar through its props, never by importing its internals.
+ *
+ * No `icon` prop, so no `IconName` re-export (same as `Spinner`/`Switch`).
+ */
+export { ProgressBar } from "./ProgressBar";
+export type { ProgressBarProps } from "./ProgressBar";
+export type { ProgressBarSize, ProgressBarTone } from "./ProgressBar.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/progress-bar/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/typescript/modules/radio-group/RadioGroup.d.ts

@@ -0,0 +1,27 @@
+/**
+ * RadioGroup — one component owns the whole group; there is no separate `Radio` export. Each
+ * option is a row (ring + dot drawn with plain Views, no icon) that carries its own
+ * `accessibilityRole="radio"`, wrapped in a container carrying `accessibilityRole="radiogroup"` so
+ * assistive tech announces the grouping without collapsing the individually-focusable rows into one.
+ *
+ * No animation anywhere (the dot appears/disappears by conditional render, not a fade or a move),
+ * so there is nothing for `useReducedMotion` (WCAG 2.3.3) to gate — unlike Button's press fade.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { RadioGroupSize } from "./RadioGroup.variants";
+export interface RadioGroupOption {
+    readonly label: string;
+    readonly value: string;
+}
+export interface RadioGroupProps {
+    options: RadioGroupOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    size?: RadioGroupSize;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const RadioGroup: import("react").NamedExoticComponent<RadioGroupProps>;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/lib/typescript/modules/radio-group/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/modules/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAYpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,uDAyDrB,CAAC"}