pixelize-native-library 1.0.6

package/lib/typescript/modules/skeleton/Skeleton.variants.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Skeleton's style + accessibility resolution — the pure functions the component (and its tests)
+ * depend on, plus the themed structural variant resolver.
+ *
+ * The split every sibling module copies (see `Button.variants.ts` / `Avatar.variants.ts`):
+ *  - STRUCTURE (the shape's corner radius) lives in the `createThemedVariants` resolver below —
+ *    static per (brand, mode), registered once via `StyleSheet.create`.
+ *  - SIZE is NOT theme-driven: a skeleton's whole job is standing in for a specific piece of
+ *    content, so `width`/`height` are per-instance numbers the caller supplies (or a per-shape
+ *    fallback), resolved by `resolveSkeletonSize` and applied inline — never a themed variant,
+ *    since there is no closed set of values to register.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveSkeletonColors`), never a raw ramp,
+ *    never a hardcoded hex. There is no `tone` prop to widen — a loading placeholder has exactly
+ *    one neutral appearance (same reasoning as `resolveAvatarColors`). `pulse` is `base` composited
+ *    with a fixed-alpha overlay (see `resolveSkeletonColors`), not a second role lookup — two
+ *    arbitrary role rungs are not guaranteed to differ enough to read as a shimmer.
+ *  - ACCESSIBILITY prop derivation is `resolveSkeletonAccessibility`, kept pure so the "decorative
+ *    unless labelled" contract is unit-testable without rendering React Native (same shape as
+ *    `resolveAvatarAccessibility`).
+ *
+ * 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 every sibling module's tests do).
+ */
+import type { RoleColors, Theme } from "../../theme";
+export type SkeletonShape = "rect" | "circle" | "text";
+export interface SkeletonSizeSpec {
+    readonly width: number;
+    readonly height: number;
+}
+/** Fallback dp size per shape, used whenever the caller gives neither `width` nor `height`. */
+export declare const SKELETON_DEFAULT_SIZE: {
+    readonly rect: {
+        readonly width: 120;
+        readonly height: 80;
+    };
+    readonly circle: {
+        readonly width: 40;
+        readonly height: 40;
+    };
+    readonly text: {
+        readonly width: 120;
+        readonly height: 16;
+    };
+};
+/**
+ * Resolves the box's actual dp size. `circle` is the one shape that cannot take independent
+ * width/height — an unequal pair would render an ellipse under the shared `radii.full` corner
+ * radius, not a circle — so a single given dimension mirrors onto the other rather than the two
+ * silently drifting apart.
+ */
+export declare function resolveSkeletonSize(shape: SkeletonShape, width: number | undefined, height: number | undefined): SkeletonSizeSpec;
+export interface SkeletonColors {
+    /** The resting fill. */
+    readonly base: string;
+    /** The shimmer overlay colour, cross-faded in and out over `base`. */
+    readonly pulse: string;
+}
+/**
+ * Maps the placeholder onto role colours, then derives `pulse` as `base` composited with a small,
+ * fixed-alpha overlay — never a second role lookup. A prior version returned `base: bg.sunken, pulse:
+ * bg.raised`: two role rungs whose luminance gap is whatever the brand's ramp happens to produce, and
+ * an independent re-measurement found that gap collapses to visually-indistinguishable on every
+ * brand × mode — the shimmer was a silent no-op everywhere, not just on one theme. Compositing a
+ * fixed-alpha overlay makes the luminance delta a controlled constant instead of an incidental one,
+ * so it can't collapse regardless of how a brand's `bg.raised`/`bg.sunken` rungs happen to relate.
+ */
+export declare function resolveSkeletonColors(colors: RoleColors): SkeletonColors;
+export interface SkeletonAccessibilityInput {
+    readonly accessibilityLabel?: string | undefined;
+}
+export interface SkeletonAccessibilityProps {
+    /** Groups the placeholder into one accessible element only when it actually carries a name. */
+    readonly accessible: boolean;
+    readonly accessibilityRole: "progressbar" | undefined;
+    readonly accessibilityLabel: string | undefined;
+    /** Indeterminate progress is still busy — announced only on the labelled (exposed) path. */
+    readonly accessibilityState: {
+        readonly busy: boolean;
+    } | undefined;
+    /** Hides the whole element from assistive tech when decorative. */
+    readonly accessibilityElementsHidden: boolean;
+    readonly importantForAccessibility: "auto" | "no-hide-descendants";
+}
+/**
+ * Derives the accessibility surface once, purely, so the "decorative unless labelled" contract is
+ * testable without a renderer (same shape as `resolveAvatarAccessibility`):
+ *  - no label → the placeholder stands in for content that hasn't rendered yet and carries no
+ *    meaning of its own, so it is hidden from assistive tech (`accessibilityElementsHidden` on
+ *    iOS + `importantForAccessibility="no-hide-descendants"` on Android) rather than read as a
+ *    bare, unexplained box.
+ *  - a label (e.g. `"Loading"`) → exposed as one `"progressbar"`-role element carrying it, with
+ *    `busy: true` (WCAG 1.4.1 — the loading state is announced, not left to be inferred from a box
+ *    appearing on screen).
+ */
+export declare function resolveSkeletonAccessibility(input: SkeletonAccessibilityInput): SkeletonAccessibilityProps;
+/**
+ * Structural styles only — the shape's corner radius, plus `overflow: "hidden"` so the animated
+ * shimmer overlay (an absolutely-positioned sibling, see `Skeleton.tsx`) clips to it without each
+ * shape recomputing the same radius on that overlay. 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.
+ *
+ * Unlike `Button`, there is no focus ring here that needs to escape the bounds, so `overflow:
+ * "hidden"` is safe — nothing else needs to be drawn outside this box.
+ */
+export declare const skeletonStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    shape: {
+        rect: {
+            borderRadius: 8;
+        };
+        circle: {
+            borderRadius: 9999;
+        };
+        text: {
+            borderRadius: 4;
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=Skeleton.variants.d.ts.map

package/lib/typescript/modules/skeleton/Skeleton.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/skeleton/Skeleton.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIrD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,+FAA+F;AAC/F,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAI0B,CAAC;AAE7D;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,EAAE,MAAM,GAAG,SAAS,GACzB,gBAAgB,CAOlB;AAED,MAAM,WAAW,cAAc;IAC7B,wBAAwB;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,UAAU,GAAG,cAAc,CAIxE;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,0BAA0B;IACzC,+FAA+F;IAC/F,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,iBAAiB,EAAE,aAAa,GAAG,SAAS,CAAC;IACtD,QAAQ,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAChD,4FAA4F;IAC5F,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,SAAS,CAAC;IACpE,mEAAmE;IACnE,QAAQ,CAAC,2BAA2B,EAAE,OAAO,CAAC;IAC9C,QAAQ,CAAC,yBAAyB,EAAE,MAAM,GAAG,qBAAqB,CAAC;CACpE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,0BAA0B,GAChC,0BAA0B,CAU5B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;oCAU3B,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/skeleton/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,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/typescript/modules/slider/Slider.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Slider — a draggable range control, hand-rolled entirely on React Native's own `PanResponder`
+ * (Wave 3's standing rule: no new npm/Expo dependency — the same "we own every interaction
+ * primitive" philosophy as `Modal`/`Select` owning RN's raw `<Modal>`).
+ *
+ * Two design choices worth documenting up front:
+ *
+ *  1. `PanResponder` is wired on the WHOLE TRACK ROW, not just the visual thumb. A thin 4–6dp thumb
+ *     would be a poor mobile drag target even before the 44dp floor; a full-width row is both a much
+ *     larger target AND lets a touch anywhere on the track jump the thumb there directly (the usual
+ *     native slider affordance). The row's `hitSlop` then only needs to grow the SHORT axis up to
+ *     44dp — the long axis already spans the component's full width.
+ *  2. Position is read from `evt.nativeEvent.locationX` (the touch's position relative to the row
+ *     that received it) on every grant/move, NOT from `gestureState.dx` (PanResponder's accumulated
+ *     delta since the gesture started). `locationX` gives an ABSOLUTE position with no drift and no
+ *     dependency on the responder's internal touch-history bookkeeping — exactly what a track-based
+ *     slider needs (the thumb should always sit under the finger, not accumulate a relative offset).
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { SliderSize } from "./Slider.variants";
+export interface SliderProps {
+    value: number;
+    onValueChange: (value: number) => void;
+    /** Fires once, on release (or after an increment/decrement action) — never on every intermediate move. */
+    onSlidingComplete?: (value: number) => void;
+    min?: number;
+    max?: number;
+    /** Amount a drag snaps to, and an increment/decrement accessibility action adjusts by. */
+    step?: number;
+    disabled?: boolean;
+    /** Closed union — drives track height + thumb diameter. */
+    size?: SliderSize;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    /**
+     * The control structurally never renders visible text (no `label` prop), so this is the only
+     * accessible name a screen reader has — required at the type level, never optional (mirrors
+     * `Switch`'s and `Button`'s icon-only contract).
+     */
+    accessibilityLabel: string;
+    testID?: string;
+}
+export declare const Slider: import("react").NamedExoticComponent<SliderProps>;
+//# sourceMappingURL=Slider.d.ts.map

package/lib/typescript/modules/slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/modules/slider/Slider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAMH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAiBpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,0GAA0G;IAC1G,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAaD,eAAO,MAAM,MAAM,mDAwIjB,CAAC"}

package/lib/typescript/modules/slider/Slider.variants.d.ts

@@ -0,0 +1,211 @@
+/**
+ * Slider's pure math + style + accessibility resolution — the functions the component (and its
+ * tests) depend on, plus the themed structural variant resolvers. Same split as `Button.variants.ts`:
+ *
+ *  - STRUCTURE (row height, track height, thumb diameter, radii, border WIDTH) lives in the
+ *    `createThemedVariants` resolvers below — static per (brand, mode), registered once.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveSliderTrackColors`,
+ *    `resolveSliderThumbColors`), never a raw ramp, never a hardcoded hex.
+ *  - DRAG MATH (`resolveSliderPositionValue`, `sliderValueToFraction`, `stepSliderValue`, …) is kept
+ *    free of React Native so it is unit-testable without a renderer or a real gesture.
+ *  - ACCESSIBILITY prop derivation is `resolveSliderAccessibility`.
+ *
+ * Free of `lucide` and of any React tree, so the WCAG + math tests import this directly (mocking
+ * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
+ */
+import type { RoleColors, Theme } from "../../theme";
+export type SliderSize = "sm" | "md";
+/** Same touch-target floor as every other interactive control in this library (44dp, WCAG 2.5.5 AAA). */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface SliderSizeSpec {
+    /** Track height, in dp. */
+    readonly trackHeight: number;
+    /** Thumb diameter, in dp — also the rendered height of the draggable row. */
+    readonly thumbSize: number;
+    /** Symmetric vertical touch expansion so `thumbSize + 2·hitSlop ≥ 44`. */
+    readonly hitSlop: number;
+}
+export declare const SLIDER_SIZES: {
+    readonly sm: {
+        readonly trackHeight: 4;
+        readonly thumbSize: 16;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly trackHeight: 6;
+        readonly thumbSize: 20;
+        readonly hitSlop: number;
+    };
+};
+/**
+ * The row's `hitSlop`, pre-built per size as a MODULE-LEVEL constant (not built inline in the
+ * component) so it's a stable object reference across renders, same discipline as every other
+ * inline style object in this library. Vertical-only (`left`/`right: 0`): the row already spans the
+ * component's full width, so only the short axis needs to grow to the 44dp floor.
+ */
+export declare const SLIDER_HIT_SLOP: {
+    readonly sm: {
+        readonly top: number;
+        readonly bottom: number;
+        readonly left: 0;
+        readonly right: 0;
+    };
+    readonly md: {
+        readonly top: number;
+        readonly bottom: number;
+        readonly left: 0;
+        readonly right: 0;
+    };
+};
+/**
+ * Clamps a value onto `[min, max]`. `NaN` (a caller's bad math) clamps to `min` rather than
+ * propagating into a `NaN%` width or an invalid `accessibilityValue.now`.
+ */
+export declare function clampSliderValue(value: number, min: number, max: number): number;
+/**
+ * Snaps a value onto the nearest `step` multiple measured from `min`, then clamps onto `[min, max]`.
+ * A non-positive `step` (a caller error) falls back to `1` rather than dividing by zero.
+ */
+export declare function snapSliderValue(value: number, min: number, max: number, step: number): number;
+/**
+ * The fraction (0–1) of the track the current value represents — what both the fill width and the
+ * thumb's `left` position render from. Clamped even for an out-of-range `value` a caller might pass
+ * directly (never drives a rendered width/position outside the track), and `max ≤ min` (a caller
+ * error) resolves to `0` rather than a division by zero.
+ */
+export declare function sliderValueToFraction(value: number, min: number, max: number): number;
+export interface SliderPositionInput {
+    /** Touch position, in dp, relative to the LEFT edge of the measured track/row. */
+    readonly locationX: number;
+    /** The track's measured width (via `onLayout` — a fixed/assumed width is wrong on a real device). */
+    readonly trackWidth: number;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+}
+/**
+ * Converts a touch's x position within the measured track into a value: the position clamps onto
+ * the track bounds first (a touch past either end still resolves to `min`/`max`, not an out-of-range
+ * value), then the resulting value snaps onto `step`. Resolves to `min` when the track hasn't been
+ * measured yet (`trackWidth ≤ 0`) or `max ≤ min` (a caller error) — never `NaN`.
+ */
+export declare function resolveSliderPositionValue(input: SliderPositionInput): number;
+/**
+ * Adjusts `value` by one `step` in `direction`, clamped onto `[min, max]` — the pure core of the
+ * `increment`/`decrement` accessibility actions (WCAG 2.5.7's required non-drag alternative).
+ */
+export declare function stepSliderValue(value: number, direction: 1 | -1, min: number, max: number, step: number): number;
+export interface SliderTrackColors {
+    /** The full-width resting track. */
+    readonly track: string;
+    /** The filled portion, up to the current value. */
+    readonly fill: string;
+}
+/**
+ * Maps the track's two colours onto ROLE tokens — never a raw ramp or a hardcoded hex. `fill` is
+ * `accent.text`, NOT the seemingly-obvious `accent.solid`: measured, `accent.solid` against
+ * `bg.sunken` falls as low as ~1.6:1 on rosewood light — the exact class of gap `ProgressBar`
+ * documented and fixed (a `*.solid` role is only guaranteed to clear contrast against its own
+ * derived `onSolid` label, never against an arbitrary neutral surface). `accent.text` is the SAME
+ * role `Button`'s outline/ghost/link label uses specifically because it's engineered to read on a
+ * pale surface, and measured here at ≥ 4.4:1 against `bg.sunken` for all 8 brands × both modes
+ * (`Slider.test.ts`) — comfortably clearing the 3:1 floor this fill actually needs.
+ */
+export declare function resolveSliderTrackColors(colors: RoleColors): SliderTrackColors;
+export interface SliderThumbColors {
+    /** Thumb fill. */
+    readonly fill: string;
+    /** Thumb ring — the boundary that must clear 3:1 against WHATEVER is behind it. */
+    readonly border: string;
+}
+/**
+ * The thumb can sit over either the resting track (`bg.sunken`) or the filled portion
+ * (`accent.text`), and no single flat colour clears 3:1 against both on every brand — measured:
+ * `bg.canvas` alone is as low as ~1:1 against `bg.sunken` (they're near-identical on some brands,
+ * the same trap `Switch` avoided by measuring against `border.interactive`/`accent.solid`, never
+ * `bg.sunken`), and a neutral `border.interactive` ring is as low as ~1:1 against a saturated
+ * `accent.text` fill on several brands. So the two boundaries are carried by DIFFERENT parts of the
+ * thumb, each measured against the surface it actually needs to clear (`Slider.test.ts`):
+ *  - `border` (`border.interactive`, the same proven neutral outline `Button`'s outline variant and
+ *    `Checkbox`'s unchecked box use) is the boundary against the RESTING track — ≥ 3.05:1 worst case.
+ *  - `fill` (`bg.canvas`, matching `Switch`'s thumb) is the boundary against the ACCENT fill — the
+ *    much larger fill area clears ≥ 4.6:1 worst case there even though the thin ring alone would not.
+ */
+export declare function resolveSliderThumbColors(colors: RoleColors): SliderThumbColors;
+export interface SliderAccessibilityInput {
+    readonly value: number;
+    readonly min: number;
+    readonly max: number;
+    readonly disabled?: boolean | undefined;
+}
+export interface SliderAccessibilityProps {
+    readonly accessibilityRole: "adjustable";
+    readonly accessibilityValue: {
+        readonly min: number;
+        readonly max: number;
+        readonly now: number;
+    };
+    readonly accessibilityState: {
+        readonly disabled: boolean;
+    };
+    readonly accessibilityActions: ReadonlyArray<{
+        readonly name: "increment" | "decrement";
+    }>;
+}
+/**
+ * Derives the accessibility surface once, purely, so the contract is testable without a renderer.
+ * `now` is clamped onto `[min, max]` — a screen reader must never announce a value the track itself
+ * couldn't render. `accessibilityActions` declares BOTH `increment`/`decrement` explicitly: iOS's
+ * `adjustable` trait already offers these via the two-finger swipe-up/down gesture without them
+ * declared, but Android TalkBack has no native "adjustable" gesture and only surfaces custom actions
+ * that are declared here (WCAG 2.5.7 — a drag-only slider has no non-pointer alternative otherwise).
+ */
+export declare function resolveSliderAccessibility(input: SliderAccessibilityInput): SliderAccessibilityProps;
+/**
+ * Structural row styles — the draggable node's own dimensions. Height is fixed to the size's
+ * `thumbSize` (not `trackHeight`): the row must be tall enough to contain the thumb, which is
+ * absolutely positioned within it and vertically centred purely by the row matching its diameter.
+ * No colour here — this node's `backgroundColor` is never set; only its children paint.
+ */
+export declare const sliderRowStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 16;
+        };
+        md: {
+            height: 20;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/** Structural track styles — full width, pill radius, clipped so the fill can't poke past it. */
+export declare const sliderTrackStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 4;
+        };
+        md: {
+            height: 6;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/** The filled segment's own corner radius — matches the track's, same reasoning as `ProgressBar`. */
+export declare const sliderFillStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/**
+ * Structural thumb styles — size, pill radius, border WIDTH. No colour (fill/border colour is
+ * applied inline from `resolveSliderThumbColors`, same structure/colour split as `checkboxBoxStructure`).
+ * `top: 0` relies on the row's height exactly matching `thumbSize` (see `sliderRowStructure`) to
+ * centre vertically; `left`/`marginLeft` (the value-driven position) are applied inline per render.
+ */
+export declare const sliderThumbStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            width: 16;
+            height: 16;
+        };
+        md: {
+            width: 20;
+            height: 20;
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=Slider.variants.d.ts.map

package/lib/typescript/modules/slider/Slider.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/slider/Slider.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGrD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,yGAAyG;AACzG,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAKnC,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;CAG8B,CAAC;AAExD;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAGyE,CAAC;AAEtG;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGhF;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAI7F;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGrF;AAED,MAAM,WAAW,mBAAmB;IAClC,kFAAkF;IAClF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,qGAAqG;IACrG,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAK7E;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,GACX,MAAM,CAER;AAED,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,UAAU,GAAG,iBAAiB,CAE9E;AAED,MAAM,WAAW,iBAAiB;IAChC,kBAAkB;IAClB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,UAAU,GAAG,iBAAiB,CAE9E;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,iBAAiB,EAAE,YAAY,CAAC;IACzC,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,CAAC;IAClG,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IAC5D,QAAQ,CAAC,oBAAoB,EAAE,aAAa,CAAC;QAAE,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW,CAAA;KAAE,CAAC,CAAC;CAC5F;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,wBAAwB,GAAG,wBAAwB,CAWpG;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;oCAS5B,CAAC;AAEJ,iGAAiG;AACjG,eAAO,MAAM,oBAAoB;;;;;;;;;oCAS9B,CAAC;AAEJ,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,uKAE7B,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;oCAS9B,CAAC"}

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

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

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

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

package/lib/typescript/modules/spinner/Spinner.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Spinner — a thin themed wrapper around RN's own `<ActivityIndicator>`. The glyph itself is purely
+ * decorative chrome, hidden from assistive tech exactly how `Button` treats ITS embedded loading
+ * spinner: the OUTER box carries the `progressbar` role, the accessible name, and `busy` state, so a
+ * screen reader announces one "Loading" node — never the indicator as a second, redundant element.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { SpinnerSize, SpinnerTone } from "./Spinner.variants";
+export interface SpinnerProps {
+    size?: SpinnerSize;
+    tone?: SpinnerTone;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+    /** A Spinner renders no visible text, so this is its only accessible name. Defaults to "Loading". */
+    accessibilityLabel?: string;
+}
+export declare const Spinner: import("react").NamedExoticComponent<SpinnerProps>;
+//# sourceMappingURL=Spinner.d.ts.map

package/lib/typescript/modules/spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/modules/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AASpD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qGAAqG;IACrG,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,oDAuClB,CAAC"}

package/lib/typescript/modules/spinner/Spinner.variants.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Spinner's pure resolvers — colour, accessibility, and the size→box/scale mapping. No React, no
+ * lucide: same split as `Button.variants.ts`, so the WCAG + behaviour tests import these directly,
+ * measuring real palettes instead of eyeballing a hex.
+ */
+import type { RoleColors } from "../../theme";
+export type SpinnerSize = "sm" | "md" | "lg";
+export type SpinnerTone = "accent" | "neutral";
+export interface SpinnerSizeSpec {
+    /** The outer box's dp footprint — what layout actually reserves for the spinner. */
+    readonly boxSize: number;
+    /** Transform scale applied to RN's own `size="small"` (20dp) native indicator to fill `boxSize`. */
+    readonly scale: number;
+}
+/**
+ * RN's `<ActivityIndicator>` ships exactly two native sizes, `"small"` (20dp) and `"large"` (36dp)
+ * — no continuous control, and a numeric `size` is Android-only (iOS ignores it). Anchoring every
+ * size on `"small"` and reaching `md`/`lg` with a `transform: scale` keeps the rendered glyph the
+ * same shape on both platforms, rather than jumping to the fixed `"large"` asset partway through
+ * the scale. `boxSize` is `20 × scale`: it exists so the WRAPPING box (`spinnerBox` below) reserves
+ * exactly the visually-scaled footprint — a `transform` alone repaints the glyph without touching
+ * layout, which would leave `lg` overflowing a box a naive implementation still measured at 20dp.
+ */
+export declare const SPINNER_SIZES: {
+    readonly sm: {
+        readonly boxSize: 16;
+        readonly scale: 0.8;
+    };
+    readonly md: {
+        readonly boxSize: 20;
+        readonly scale: 1;
+    };
+    readonly lg: {
+        readonly boxSize: 28;
+        readonly scale: 1.4;
+    };
+};
+/**
+ * Maps `tone` onto ROLE colours — the reason the prop is a closed union and not `color?: string`.
+ * `accent` reads the same solid-fill rung `Button`'s solid variant uses; `neutral` is the muted
+ * foreground for secondary/inline loading states. Both are measured ≥ 3:1 (WCAG 1.4.11's
+ * "Graphical Objects" clause — a spinner is a graphical object required to understand that work is
+ * ongoing) against `bg.canvas`, `bg.surface`, AND `bg.raised` on all 8 brands × both modes — see
+ * `Spinner.test.ts`.
+ */
+export declare function resolveSpinnerTone(colors: RoleColors, tone: SpinnerTone): string;
+export interface SpinnerAccessibilityInput {
+    readonly accessibilityLabel: string | undefined;
+}
+export interface SpinnerAccessibilityProps {
+    readonly accessibilityRole: "progressbar";
+    readonly accessibilityLabel: string;
+    readonly accessibilityState: {
+        readonly busy: true;
+    };
+}
+/** A Spinner renders no visible text, so this is what AT announces absent an explicit override. */
+export declare const DEFAULT_SPINNER_LABEL = "Loading";
+/**
+ * Derives the accessibility surface once, purely, so the fallback label is testable without a
+ * renderer. There is no interaction to gate (a Spinner is never pressable) — unlike
+ * `resolveButtonAccessibility`, the only decision here is the label fallback; `busy` is always true
+ * because a mounted Spinner, by definition, means work is in progress.
+ */
+export declare function resolveSpinnerAccessibility(input: SpinnerAccessibilityInput): SpinnerAccessibilityProps;
+/**
+ * The outer box's structural size — no theme dependency (the dimensions are the component's own
+ * fixed design constants, not on the theme's spacing scale), so this uses the untethered
+ * `createVariants` rather than `createThemedVariants` (the same reasoning `BUTTON_SIZES` documents
+ * for being a plain constant). Centers its child so the scaled glyph (`spinnerGlyphScale` below)
+ * sits in the middle of the reserved footprint.
+ */
+export declare const spinnerBox: import("../../core/style").VariantResolver<{
+    size: {
+        sm: {
+            width: 16;
+            height: 16;
+        };
+        md: {
+            width: 20;
+            height: 20;
+        };
+        lg: {
+            width: 28;
+            height: 28;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * The glyph's own visual scale, applied to the `ActivityIndicator` INSIDE `spinnerBox` — never to
+ * the box itself (one node can't both declare "I am 28dp" and "scale me 1.4×" without double-
+ * applying the enlargement). Registered once via `createVariants`, same reasoning as `spinnerBox`.
+ */
+export declare const spinnerGlyphScale: import("../../core/style").VariantResolver<{
+    size: {
+        sm: {
+            transform: {
+                scale: 0.8;
+            }[];
+        };
+        md: {
+            transform: {
+                scale: 1;
+            }[];
+        };
+        lg: {
+            transform: {
+                scale: 1.4;
+            }[];
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=Spinner.variants.d.ts.map

package/lib/typescript/modules/spinner/Spinner.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/spinner/Spinner.variants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,eAAe;IAC9B,oFAAoF;IACpF,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,oGAAoG;IACpG,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;CAI+B,CAAC;AAE1D;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,GAAG,MAAM,CAOhF;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;CACjD;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,iBAAiB,EAAE,aAAa,CAAC;IAC1C,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC;CACtD;AAED,mGAAmG;AACnG,eAAO,MAAM,qBAAqB,YAAY,CAAC;AAE/C;;;;;GAKG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,yBAAyB,GAC/B,yBAAyB,CAM3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;oCAUrB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;oCAS5B,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * Public surface of `pixelize-native-library/spinner`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`, mirroring `button/index.ts`. The resolvers (`resolveSpinnerTone`,
+ * `SPINNER_SIZES`, …) stay internal — a consumer configures a Spinner through its props only. No
+ * `icon` prop, so unlike `button/index.ts` there is no `IconName` re-export.
+ */
+export { Spinner } from "./Spinner";
+export type { SpinnerProps } from "./Spinner";
+export type { SpinnerSize, SpinnerTone } from "./Spinner.variants";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,26 @@
+/**
+ * Stepper — a horizontal, multi-step progress DISPLAY (checkout/onboarding: "Step 2 of 4"). v1 is
+ * deliberately non-interactive: no `onPress`, no `onStepPress` — a small, display-only surface, per
+ * spec. The whole row collapses into ONE `progressbar`-role accessible node (`accessible` on the
+ * container) so a screen reader gets a single summary announcement instead of reading every circle
+ * and label individually, the same collapsing idiom `Badge` uses for its icon + label.
+ *
+ * Each step is its own `flex: 1` column so the circles stay evenly spaced regardless of label
+ * length; the connector to the NEXT step is drawn as two identically-coloured halves — the trailing
+ * half of this column, the leading half of the next — so a circle stays centered under its own
+ * label rather than centered between two circles' worth of connector.
+ */
+import type { LayoutStyle } from "../../core/style";
+export interface StepperStep {
+    readonly label: string;
+}
+export interface StepperProps {
+    steps: StepperStep[];
+    /** 0-indexed: `0` is the first step. */
+    activeStep: number;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Stepper: import("react").NamedExoticComponent<StepperProps>;
+//# sourceMappingURL=Stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../src/modules/stepper/Stepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAcpD,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,oDA2DlB,CAAC"}