pixelize-native-library 1.2.0 → 1.3.0

package/lib/typescript/modules/section-list/SectionListProps.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import type { LayoutStyle } from "../../core/style";
+/** One section: a title and its rows. */
+export interface SectionListSection<T> {
+    readonly title: string;
+    readonly data: readonly T[];
+}
+/** Data plus render/measurement config for a virtualized sectioned list. */
+export interface SectionListProps<T> {
+    sections: readonly SectionListSection<T>[];
+    /** `index` is per-section (0-based within its own section), not a global row index. */
+    renderItem: (info: {
+        item: T;
+        sectionIndex: number;
+        index: number;
+    }) => ReactElement | null;
+    keyExtractor: (item: T, index: number) => string;
+    /** Enables fixed-height layout math for faster scrolling; omit for dynamic row measurement. */
+    itemHeight?: number;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=SectionListProps.d.ts.map

package/lib/typescript/modules/section-list/index.d.ts

@@ -1,3 +1,3 @@
 export { SectionList } from "./SectionList";
-export type { SectionListProps, SectionListSection } from "./SectionList";
+export type { SectionListProps, SectionListSection } from "./SectionListProps";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/segmented-control/SegmentedControl.d.ts

@@ -1,44 +1,5 @@
-/**
- * SegmentedControl — an inline, iOS-style single-choice control for switching between 2–5 mutually
- * exclusive options (filters, view modes, date ranges). A rounded track (`bg.sunken`) holds every
- * segment; the active one is marked by a raised pill (`bg.surface` + `Card`'s own elevation
- * treatment) that slides to the selected segment's measured position — the identical
- * measure-via-`onLayout` + `Animated.Value` mechanism `Tabs`' sliding indicator uses, keyed by
- * `value` so reordering `options` can never apply a stale measurement to the wrong segment.
- *
- * Unlike `ButtonGroup`/`Tabs`, the active state is NOT accent-coloured: the pill is a neutral raised
- * surface, and elevation — not colour — is what marks it, because `bg.surface` vs `bg.sunken` alone
- * measures nowhere near WCAG 1.4.11's 3:1 (see `SegmentedControl.variants.ts`). Selection reaches
- * assistive tech independently via `accessibilityState.selected`.
- *
- * The pill is a SELECTION marker, never a focus one — keyboard/AT focus draws its own inset ring on
- * the focused segment (WCAG 2.4.7), the same treatment `BottomNavTab` uses.
- */
-import type { IconName } from "../../core/icon";
-import type { LayoutStyle } from "../../core/style";
-import type { SegmentedControlSize } from "./SegmentedControl.variants";
-export interface SegmentedControlOption {
-    readonly value: string;
-    /** Always required — an icon-only segment has no accessible name a screen reader can announce,
-     *  the same rule `Badge` documents for its own label. */
-    readonly label: string;
-    readonly icon?: IconName;
-    readonly disabled?: boolean;
-}
-export interface SegmentedControlProps {
-    options: SegmentedControlOption[];
-    value: string;
-    onChange: (value: string) => void;
-    size?: SegmentedControlSize;
-    /** `true` (default): segments flex equally to fill the width. `false`: segments size to their
-     *  own content (padding + `minWidth`). */
-    fullWidth?: boolean;
-    /** Dims and blocks every segment, regardless of a per-option `disabled`. */
-    disabled?: boolean;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
-    style?: LayoutStyle;
-    testID?: string;
-}
+/** Inline single-choice control; see `MODULE.md` for the elevation/a11y contract. */
+import type { SegmentedControlProps } from "./SegmentedControlProps";
 declare function SegmentedControlImpl({ options, value, onChange, size, fullWidth, disabled, style, testID, }: SegmentedControlProps): import("react").JSX.Element;
 export declare const SegmentedControl: import("react").MemoExoticComponent<typeof SegmentedControlImpl>;
 export {};

package/lib/typescript/modules/segmented-control/SegmentedControl.variants.d.ts

@@ -1,20 +1,8 @@
-/**
- * SegmentedControl's style + behaviour resolution — pure, React/lucide-free, same split as Tabs:
- *  - STRUCTURE (track padding/radius, segment height/padding, pill 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 (`resolveSegmentedControlColors`), never a raw
- *    hex: the track is always `bg.sunken`, the pill is always `bg.surface` (a neutral raised
- *    surface, NOT the accent role — unlike `ButtonGroup`/`Tabs`, selection here is conveyed by
- *    elevation + position, not by brand colour).
- *  - `resolveSegmentedControlSegmentAccessibility` derives the per-segment a11y surface purely, so
- *    the "selected"/"disabled" contract is unit-testable without rendering React Native.
- */
+/** Pure style + a11y resolvers for SegmentedControl — no React, no lucide. */
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget";
 import type { RoleColors, Theme } from "../../theme/hooks";
+export { MIN_TOUCH_TARGET };
 export type SegmentedControlSize = "sm" | "md";
-/** Same floor as Button/Input/Tabs/ButtonGroup — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported:
- * modules stay isolated. */
-export declare const MIN_TOUCH_TARGET = 44;
 export interface SegmentedControlSizeSpec {
     /** Visual height in dp, per segment (fixed, not a minimum — the hitSlop math depends on it). */
     readonly height: number;
@@ -41,30 +29,10 @@ export declare const SEGMENTED_CONTROL_SIZES: {
     };
 };
 export interface SegmentedControlColors {
-    /** The track fill every unselected segment sits directly on. */
-    readonly track: string;
-    /** The active segment's pill fill — a neutral raised surface (elevation is the selection cue, not
-     *  a colour change), applied together with `theme.elevation.md` by the component. */
-    readonly pill: string;
-    /** The active segment's label, read on `pill`. */
     readonly activeLabel: string;
-    /** Every inactive segment's label, read on `track`. */
     readonly inactiveLabel: string;
-    /** A pressed, unselected segment's background — never applied to the selected segment (its own
-     *  pill fill already reads as the "active" cue). */
-    readonly pressedSegment: string;
 }
-/**
- * Maps the control's fixed visual roles onto ROLE colours — never a hardcoded hex. There is no
- * per-segment `tone`: like `RadioGroup`/`Tabs`, this is pure indirection, not a union to resolve.
- *
- * The pill deliberately reads `bg.surface`, NOT an accent fill: `bg.surface` vs `bg.sunken` alone
- * measures as low as 1.08:1 (nowhere near WCAG 1.4.11's 3:1 — see `SegmentedControl.test.ts`), so
- * the boundary between the pill and the track is carried by elevation (`theme.elevation.md`, the
- * same treatment `Card`'s `elevated` variant uses to differentiate itself with no border either),
- * not by a colour contrast this pairing could never clear on its own. Selection is additionally
- * conveyed to assistive tech via `accessibilityState.selected`, never by colour alone.
- */
+/** Label colours only — track/pill/pressed backgrounds are resolved live in `SegmentedControl.tsx`. */
 export declare function resolveSegmentedControlColors(colors: RoleColors): SegmentedControlColors;
 export interface SegmentedControlSegmentAccessibilityInput {
     readonly selected: boolean;
@@ -100,14 +68,7 @@ export interface SegmentedControlHitSlop {
 export declare function resolveSegmentedControlSegmentHitSlop(size: SegmentedControlSize): SegmentedControlHitSlop;
 /** The outer track — padded so the pill has room to sit inset from the track's own edge. */
 export declare const segmentedControlTrackStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
-/**
- * The pill. `theme.radii.sm` — one step down from the track's `theme.radii.base` — nests cleanly
- * inside the track's own `space[1]` inset, the same "inner radius ≈ outer radius − inset" geometry
- * a nested rounded rect needs to read as concentric rather than mismatched. `top`/`bottom` pin it to
- * the row's own height (set by the segments, its flow siblings); `left`/`width` are driven by
- * `Animated.Value`s in `SegmentedControl.tsx`, keyed off each segment's own `onLayout` measurement —
- * same mechanism as `Tabs`' sliding indicator.
- */
+/** `radii.base` (12 − the track's `space[1]` inset of 4) nests concentric inside `radii.md`. */
 export declare const segmentedControlPillStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /**
  * The keyboard/AT focus ring drawn over one segment's own bounds — the same inset treatment

package/lib/typescript/modules/segmented-control/SegmentedControlProps.d.ts

@@ -0,0 +1,29 @@
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+import type { SegmentedControlSize } from "./SegmentedControl.variants";
+/** One selectable option in a SegmentedControl. */
+export interface SegmentedControlOption {
+    readonly value: string;
+    /** Always required — an icon-only segment has no accessible name a screen reader can announce,
+     *  the same rule `Badge` documents for its own label. */
+    readonly label: string;
+    readonly icon?: IconName;
+    readonly disabled?: boolean;
+}
+/** Configuration for the inline single-choice segmented control. */
+export interface SegmentedControlProps {
+    options: SegmentedControlOption[];
+    value: string;
+    onChange: (value: string) => void;
+    /** Defaults to "md". */
+    size?: SegmentedControlSize;
+    /** `true` (default): segments flex equally to fill the width. `false`: segments size to their
+     *  own content (padding + `minWidth`). */
+    fullWidth?: boolean;
+    /** Dims and blocks every segment, regardless of a per-option `disabled`. */
+    disabled?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=SegmentedControlProps.d.ts.map

package/lib/typescript/modules/segmented-control/index.d.ts

@@ -5,7 +5,7 @@
  * its props, never by importing its internals.
  */
 export { SegmentedControl } from "./SegmentedControl";
-export type { SegmentedControlProps, SegmentedControlOption } from "./SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlOption } from "./SegmentedControlProps";
 export type { SegmentedControlSize } from "./SegmentedControl.variants";
 export type { IconName } from "../../core/icon";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/select/Select.d.ts

@@ -2,23 +2,15 @@
  * Select — a trigger styled like an Input box that opens an option list in React Native's OWN `Modal`.
  */
 import type { ReactNode } from "react";
-import type { LayoutStyle } from "../../core/style";
-import type { SelectSize } from "./Select.variants";
+import type { SelectOptionCustomColors, SelectOptionTone } from "./Select.variants";
+import type { SelectProps } from "./SelectProps";
 export interface SelectOption {
     readonly label: string;
     readonly value: string;
     readonly leading?: ReactNode;
-}
-export interface SelectProps {
-    options: SelectOption[];
-    value?: string;
-    onValueChange: (value: string) => void;
-    placeholder?: string;
-    label?: string;
-    disabled?: boolean;
-    size?: SelectSize;
-    containerStyle?: LayoutStyle;
-    testID?: string;
+    readonly tone?: SelectOptionTone;
+    /** Required when `tone="custom"`. */
+    readonly customColors?: SelectOptionCustomColors;
 }
 export declare const Select: import("react").NamedExoticComponent<SelectProps>;
 //# sourceMappingURL=Select.d.ts.map

package/lib/typescript/modules/select/Select.variants.d.ts

@@ -10,8 +10,9 @@
  * Free of React and of any `Modal`/`Pressable` import, so the WCAG + behaviour tests import it
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget";
 import type { AccessibilityRole } from "react-native";
-import type { RoleColors, Theme } from "../../theme/hooks";
+import type { RoleColors, StatusRole, Theme } from "../../theme/hooks";
 export type SelectSize = "sm" | "md" | "lg";
 /**
  * The option list's container role. RN 0.86's role unions have no `listbox` — both `Role` and
@@ -20,8 +21,15 @@ export type SelectSize = "sm" | "md" | "lg";
  * emits the string as the DOM `role` verbatim, and native maps roles it doesn't know to nothing.
  */
 export declare const SELECT_LISTBOX_ROLE: AccessibilityRole;
-/** Same touch-target floor as Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export declare const MIN_TOUCH_TARGET = 44;
+/**
+ * Each option row's role. `aria-selected` is only valid ARIA on `option`/`row`/`tab`/`gridcell`/
+ * `treeitem` — the row sits inside a `SELECT_LISTBOX_ROLE` container, so `option` is the
+ * textbook-correct pairing (2026-08 sweep fixed the row from the invalid `menuitem`+`aria-selected`
+ * combination). Same type gap as `SELECT_LISTBOX_ROLE`: RN 0.86's `AccessibilityRole` union has no
+ * `option` either.
+ */
+export declare const SELECT_OPTION_ROLE: AccessibilityRole;
+export { MIN_TOUCH_TARGET, slopFor };
 export interface SelectSizeSpec {
     /** Visual trigger height in dp. */
     readonly height: number;
@@ -34,26 +42,26 @@ export interface SelectSizeSpec {
 }
 export declare const SELECT_SIZES: {
     readonly sm: {
-        readonly height: 32;
+        readonly height: 44;
         readonly fontSize: 14;
         readonly iconSize: 16;
         readonly hitSlop: number;
     };
     readonly md: {
-        readonly height: 40;
+        readonly height: 52;
         readonly fontSize: 16;
         readonly iconSize: 18;
         readonly hitSlop: number;
     };
     readonly lg: {
-        readonly height: 48;
+        readonly height: 56;
         readonly fontSize: 18;
         readonly iconSize: 20;
         readonly hitSlop: number;
     };
 };
 /** Minimum height for an option row — a list item is still an interactive target (WCAG 2.5.8). */
-export declare const SELECT_ROW_MIN_HEIGHT = 44;
+export declare const SELECT_ROW_MIN_HEIGHT = 48;
 /** The "check" glyph beside the active row. Fixed — independent of the trigger's own `size`. */
 export declare const SELECT_ROW_ICON_SIZE = 18;
 export interface SelectTriggerColors {
@@ -92,6 +100,12 @@ export interface SelectRowColors {
     readonly pressedRow: string;
 }
 export declare function resolveSelectRowColors(colors: RoleColors): SelectRowColors;
+export type SelectOptionTone = "accent" | "neutral" | StatusRole | "custom";
+export type SelectOptionCustomColors = {
+    readonly bg: string;
+    readonly fg: string;
+};
+export declare function resolveSelectOptionLabelColor(colors: RoleColors, tone: SelectOptionTone | undefined, customColors: SelectOptionCustomColors | undefined): string;
 export interface SelectAccessibilityInput {
     readonly disabled?: boolean | undefined;
     readonly open: boolean;
@@ -118,15 +132,15 @@ export declare function resolveSelectAccessibility(input: SelectAccessibilityInp
 export declare const selectTriggerStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
         sm: {
-            height: 32;
+            height: 44;
             paddingHorizontal: 12;
         };
         md: {
-            height: 40;
+            height: 52;
             paddingHorizontal: 16;
         };
         lg: {
-            height: 48;
+            height: 56;
             paddingHorizontal: 24;
         };
     };

package/lib/typescript/modules/select/SelectProps.d.ts

@@ -0,0 +1,25 @@
+import type { LayoutStyle } from "../../core/style";
+import type { InputStatus } from "../input/Input.variants";
+import type { SelectOption } from "./Select";
+import type { SelectSize } from "./Select.variants";
+/** Dropdown-style trigger; opens the option list in a modal, not a native dropdown. */
+export interface SelectProps {
+    options: SelectOption[];
+    value?: string;
+    onValueChange: (value: string) => void;
+    /** Shown when no option is selected. */
+    placeholder?: string;
+    /** Renders a field label above the trigger; also feeds the accessible name. */
+    label?: string;
+    /** Defaults to "default". */
+    status?: InputStatus;
+    /** Only shown when `status` is "error". */
+    errorText?: string;
+    /** Defaults to false. */
+    disabled?: boolean;
+    /** Defaults to "md". */
+    size?: SelectSize;
+    containerStyle?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=SelectProps.d.ts.map

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

@@ -4,6 +4,7 @@
  * internal — a consumer configures a Select through its props, never by importing its internals.
  */
 export { Select } from "./Select";
-export type { SelectProps, SelectOption } from "./Select";
-export type { SelectSize } from "./Select.variants";
+export type { SelectOption } from "./Select";
+export type { SelectProps } from "./SelectProps";
+export type { SelectOptionCustomColors, SelectOptionTone, SelectSize, } from "./Select.variants";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/setting-row/SettingRow.d.ts

@@ -0,0 +1,3 @@
+import type { SettingRowProps } from "./SettingRowProps";
+export declare const SettingRow: import("react").NamedExoticComponent<SettingRowProps>;
+//# sourceMappingURL=SettingRow.d.ts.map

package/lib/typescript/modules/setting-row/SettingRowProps.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+/** Settings row with title, optional description, and trailing control. */
+export interface SettingRowProps {
+    title: string;
+    description?: string;
+    /** Control rendered on the trailing edge (switch, button, …). */
+    control: ReactNode;
+    /** Uses danger ink for destructive settings zones. */
+    isDanger?: boolean;
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=SettingRowProps.d.ts.map

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

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

package/lib/typescript/modules/settings-section/SettingsSection.d.ts

@@ -0,0 +1,3 @@
+import type { SettingsSectionProps } from "./SettingsSectionProps";
+export declare const SettingsSection: import("react").NamedExoticComponent<SettingsSectionProps>;
+//# sourceMappingURL=SettingsSection.d.ts.map

package/lib/typescript/modules/settings-section/SettingsSectionProps.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+/** Grouped settings block with optional section title. */
+export interface SettingsSectionProps {
+    title?: string;
+    /** Bare string/number children get default text styling; other nodes render as-is. */
+    children: ReactNode;
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=SettingsSectionProps.d.ts.map

package/lib/typescript/modules/settings-section/index.d.ts

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

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

@@ -1,32 +1,7 @@
 /**
- * Skeleton — a loading placeholder box that shimmers while the real content it stands in for is
- * still on its way. It is its own size (`width`/`height` are component-owned props, not
- * `LayoutStyle` — sizing IS the point of this component) and has exactly one neutral appearance:
- * a resting `bg.sunken` fill cross-faded with a fixed-alpha `fg.default` overlay composited over it
- * (see `resolveSkeletonColors`), pulsing on an `Animated` opacity loop. Purely decorative by default
- * (see `Skeleton.variants.ts` →
- * `resolveSkeletonAccessibility`, the same "decorative unless labelled" contract as `Avatar`).
- *
- * The shimmer is gated on `motion.decorative`, so it runs on high-tier devices only. A skeleton is
- * usually rendered one-per-row across a whole loading list, and a per-row loop is the single most
- * expensive thing a placeholder can do — low/mid tiers and reduce-motion get the static fill. Even
- * on high tier the loop is shaped so it costs zero JS per iteration: see the effect below.
+ * Skeleton — a loading placeholder with a translating highlight-band shimmer over a neutral base.
  */
-import type { LayoutStyle } from "../../core/style";
-import type { SkeletonShape } from "./Skeleton.variants";
-export interface SkeletonProps {
-    shape?: SkeletonShape;
-    /** Component-owned sizing, in dp — not `LayoutStyle`. Falls back to a per-shape default. */
-    width?: number;
-    height?: number;
-    /**
-     * Decorative by default — hidden from assistive tech (`Avatar`'s optional-label contract).
-     * Pass a label (e.g. `"Loading"`) to instead expose this as one `progressbar`-role element.
-     */
-    accessibilityLabel?: string;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
-    style?: LayoutStyle;
-    testID?: string;
-}
+import type { SkeletonProps } from "./SkeletonProps";
+export type { SkeletonProps } from "./SkeletonProps";
 export declare const Skeleton: import("react").NamedExoticComponent<SkeletonProps>;
 //# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,25 +1,6 @@
 /**
  * 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/hooks";
 export type SkeletonShape = "rect" | "circle" | "text";
@@ -42,75 +23,36 @@ export declare const SKELETON_DEFAULT_SIZE: {
         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 const SKELETON_SHIMMER_DURATION_MS = 1400;
+export declare const SKELETON_BAND_WIDTH_RATIO = 0.4;
+export declare const SKELETON_STAGGER_MS = 100;
 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;
+    readonly highlight: 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.
- */
+/** Sunken base + skeleton-only shimmer highlight (not shared `bg.hover`). */
 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 "aria-busy": boolean | undefined;
-    /** Hides the whole element from assistive tech when decorative. */
     readonly "aria-hidden": true | undefined;
 }
-/**
- * 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 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).
- *
- * `aria-hidden` covers BOTH platforms in one prop: RN maps it onto `accessibilityElementsHidden`
- * (iOS) + `importantForAccessibility="no-hide-descendants"` (Android), and react-native-web forwards
- * it to the DOM — where those two native props reach nothing, so an unlabelled skeleton used to stay
- * fully exposed to a screen reader on web.
- */
 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;
+            borderRadius: 12;
+            borderCurve: "continuous";
         };
         circle: {
             borderRadius: 9999;
+            borderCurve: "continuous";
         };
         text: {
             borderRadius: 4;

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

@@ -0,0 +1,18 @@
+import type { LayoutStyle } from "../../core/style";
+import type { SkeletonShape } from "./Skeleton.variants";
+/** A shimmering loading placeholder box. */
+export interface SkeletonProps {
+    /** Defaults to "rect"; "circle" uses `width` or `height` as its diameter. */
+    shape?: SkeletonShape;
+    /** Falls back to a size fixed per `shape` when omitted. */
+    width?: number;
+    /** Falls back to a size fixed per `shape` when omitted. */
+    height?: number;
+    /** Stagger sibling skeletons by index × 100ms (80–120ms band). */
+    staggerIndex?: number;
+    /** Absent hides the skeleton from assistive tech; present exposes it as a busy progressbar. */
+    accessibilityLabel?: string;
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=SkeletonProps.d.ts.map

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

@@ -4,6 +4,6 @@
  * 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 { SkeletonProps } from "./SkeletonProps";
 export type { SkeletonShape } from "./Skeleton.variants";
 //# sourceMappingURL=index.d.ts.map

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

@@ -16,29 +16,6 @@
  *     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;
-}
+import type { SliderProps } from "./SliderProps";
 export declare const Slider: import("react").NamedExoticComponent<SliderProps>;
 //# sourceMappingURL=Slider.d.ts.map

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

@@ -13,10 +13,11 @@
  * 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 { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget";
 import type { RoleColors, Theme } from "../../theme/hooks";
+export { MIN_TOUCH_TARGET };
 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;