pixelize-native-library 1.0.7 → 1.2.0

package/lib/typescript/core/icon/index.d.ts

@@ -1,97 +1,9 @@
 /**
- * The shared icon registry. `icon` props across every module take a NAME from the closed
- * `IconName` union, never a `ReactNode` — same discipline as `tone`/`variant`: a consumer cannot
- * pass an arbitrary component in.
- *
- * Icons are DEEP-IMPORTED from `lucide-react-native/icons/<kebab-name>` (~656 B each), never from
- * the barrel `lucide-react-native` (~233 KB — it defeats per-component tree-shaking). The
- * name→component map is a STATIC object literal so every deep import stays statically analysable.
- *
- * Requires the consumer app to install `lucide-react-native` + `react-native-svg` (both optional
- * peers — see package.json). A component that renders no icon never pays for either.
+ * The shared icon registry. Icons are split into per-glyph modules under `icons/` so each
+ * component imports only the glyphs it renders. `Icon` remains for dynamic `IconName` props.
  */
-/** The props a lucide icon accepts (a subset — the ones the design system drives). */
-export interface LucideIconProps {
-    size?: number;
-    color?: string;
-    strokeWidth?: number;
-    absoluteStrokeWidth?: boolean;
-}
-/**
- * The catalogue — grows as modules need more glyphs. Keys are the stable public names
- * (`IconName`); adding one here is the only change needed for every module to gain it.
- *
- * 2026-07 — expanded for the tickets-native consumer app: navigation glyphs
- * (layout-dashboard, kanban, layers, list, chart-column, map, milestone, file-text,
- * layout-template, bell, life-buoy) and ticket-detail glyphs (calendar, clock, user,
- * users, tag, flag, paperclip, message-square, eye, link, star, folder, inbox,
- * circle-check, circle-alert, triangle-alert, arrow-up, arrow-down). Additive — no
- * existing name changed. Ships as a changesets minor.
- */
-export declare const ICON_COMPONENTS: {
-    readonly "arrow-down": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "arrow-left": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "arrow-right": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "arrow-up": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly bell: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly calendar: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "chart-column": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly check: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "chevron-down": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "chevron-left": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "chevron-right": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "chevron-up": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "circle-alert": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "circle-check": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly clock: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly download: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "external-link": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly eye: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "file-text": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly filter: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly flag: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly folder: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly inbox: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly kanban: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly layers: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "layout-dashboard": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "layout-template": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "life-buoy": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly link: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly list: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "list-todo": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "log-out": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly map: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "message-square": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly milestone: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly minus: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "more-horizontal": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly paperclip: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly pencil: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly plus: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "refresh-cw": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly save: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly search: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly send: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly settings: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly share: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly star: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly tag: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly trash: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly "triangle-alert": import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly upload: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly user: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly users: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-    readonly x: import("react").ForwardRefExoticComponent<import("lucide-react-native").LucideProps & import("react").RefAttributes<SVGSVGElement>>;
-};
-/** The closed set of icon names a component may reference. */
-export type IconName = keyof typeof ICON_COMPONENTS;
-export interface IconProps {
-    name: IconName;
-    size: number;
-    color: string;
-    strokeWidth?: number;
-}
-/** Renders a lucide glyph by name. `size`/`color` are resolved values (never a token object). */
-export declare function Icon({ name, size, color, strokeWidth }: IconProps): import("react").JSX.Element;
+export type { IconName } from './names';
+export type { LucideIconProps, IconComponent, IconProps } from './types';
+export { Icon } from './Icon';
+export { resolveIcon } from './resolve';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/core/icon/names.d.ts

@@ -0,0 +1,2 @@
+export type IconName = "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell" | "bold" | "building-2" | "calendar" | "chart-column" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-left" | "chevrons-right" | "chevrons-up-down" | "circle-alert" | "circle-check" | "clock" | "code" | "download" | "external-link" | "eye" | "file-text" | "filter" | "flag" | "folder" | "heading-1" | "heading-2" | "heading-3" | "image" | "inbox" | "info" | "italic" | "kanban" | "layers" | "layout-dashboard" | "layout-template" | "life-buoy" | "link" | "list" | "list-checks" | "list-ordered" | "list-todo" | "log-out" | "map" | "message-square" | "milestone" | "minus" | "more-horizontal" | "paperclip" | "pencil" | "plus" | "quote" | "refresh-cw" | "save" | "search" | "send" | "settings" | "share" | "square-code" | "star" | "strikethrough" | "tag" | "trash" | "triangle-alert" | "underline" | "upload" | "user" | "users" | "x";
+//# sourceMappingURL=names.d.ts.map

package/lib/typescript/core/icon/resolve.d.ts

@@ -0,0 +1,4 @@
+import type { IconName } from "./names";
+import type { IconComponent } from "./types";
+export declare function resolveIcon(name: IconName): IconComponent;
+//# sourceMappingURL=resolve.d.ts.map

package/lib/typescript/core/icon/types.d.ts

@@ -0,0 +1,13 @@
+import type { IconName } from './names';
+export interface LucideIconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+    absoluteStrokeWidth?: boolean;
+}
+export interface IconProps extends LucideIconProps {
+    name: IconName;
+    label?: string;
+}
+export type IconComponent = import('react').ComponentType<LucideIconProps>;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/core/list/VirtualList.d.ts

@@ -0,0 +1,55 @@
+import type { ReactElement } from 'react';
+import { type AccessibilityRole, type FlatListProps, type ListRenderItem, type StyleProp, type ViewStyle } from 'react-native';
+import type { DeviceTier } from '../device';
+/**
+ * `core/list` is internal, so this is a curated allowlist of the list props modules legitimately
+ * need — never `{...rest}`. A prop missing here forces the module to re-express it as layout, which
+ * is how the DataTable header ended up rendered after its own rows.
+ */
+export interface VirtualListProps<T> {
+    data: readonly T[];
+    renderItem: ListRenderItem<T>;
+    keyExtractor: (item: T, index: number) => string;
+    /** Uniform row height only. Variable rows must omit it — wrong offsets are worse than none. */
+    itemHeight?: number;
+    /** Exact per-row layout; wins over `itemHeight` when rows are not uniform. */
+    getItemLayout?: FlatListProps<T>['getItemLayout'];
+    /** `"handled"` stops a row tap under a focused field being swallowed as a keyboard dismiss. */
+    keyboardShouldPersistTaps?: FlatListProps<T>['keyboardShouldPersistTaps'];
+    ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];
+    ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];
+    ListEmptyComponent?: FlatListProps<T>['ListEmptyComponent'];
+    stickyHeaderIndices?: FlatListProps<T>['stickyHeaderIndices'];
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    numColumns?: number;
+    /** Defaults to `"list"` so every consumer inherits the role instead of each adding its own. */
+    accessibilityRole?: AccessibilityRole;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    testID?: string;
+}
+export interface VirtualSection<T> {
+    readonly title: string;
+    readonly data: readonly T[];
+}
+export interface VirtualSectionListProps<T> {
+    sections: readonly VirtualSection<T>[];
+    renderItem: (info: {
+        item: T;
+        section: VirtualSection<T>;
+        index: number;
+    }) => ReactElement | null;
+    renderSectionHeader: (section: VirtualSection<T>) => ReactElement | null;
+    keyExtractor: (item: T, index: number) => string;
+    /** Height of a plain row. Only feeds `getItemLayout` when `sectionHeaderHeight` is known too. */
+    itemHeight?: number;
+    /** Height `renderSectionHeader` occupies; the rows carrying one are that much taller. */
+    sectionHeaderHeight?: number;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+/** FlashList's own default is 250dp; low-end halves it, high-end buys a smoother fling. */
+export declare function flashListDrawDistance(tier: DeviceTier): number;
+export declare function VirtualList<T>({ data, renderItem, keyExtractor, itemHeight, getItemLayout, keyboardShouldPersistTaps, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, stickyHeaderIndices, contentContainerStyle, numColumns, accessibilityRole, accessibilityLabel, accessibilityHint, testID, }: VirtualListProps<T>): import("react").JSX.Element;
+export declare function VirtualSectionList<T>({ sections, renderItem, renderSectionHeader, keyExtractor, itemHeight, sectionHeaderHeight, accessibilityLabel, testID, }: VirtualSectionListProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=VirtualList.d.ts.map

package/lib/typescript/core/list/index.d.ts

@@ -0,0 +1,3 @@
+export { VirtualList, VirtualSectionList } from './VirtualList';
+export type { VirtualListProps, VirtualSectionListProps, VirtualSection } from './VirtualList';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/core/media/MediaImage.d.ts

@@ -0,0 +1,28 @@
+import type { ImageStyle, StyleProp } from 'react-native';
+export type MediaImageFit = 'cover' | 'contain' | 'fill';
+export interface MediaImageProps {
+    source: {
+        readonly uri: string;
+    };
+    /** expo-image's `contentFit`; maps onto RN `Image`'s `resizeMode` on the fallback path. */
+    contentFit: MediaImageFit;
+    /**
+     * Blanks the image the instant this changes, so a recycled list row can never show the PREVIOUS
+     * subject's image while the new one loads. No RN `Image` equivalent — the fallback drops it.
+     */
+    recyclingKey?: string;
+    transition?: number;
+    style: StyleProp<ImageStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+/**
+ * The library's single image element. Routes through `expo-image` when the app injected it
+ * (`setExpoImage`) — native downsampling to the target box, memory+disk cache, `recyclingKey` —
+ * and degrades to RN's `Image` when it did not.
+ *
+ * `expo-image` is an OPTIONAL peer dependency: reading it through `getExpoImage()` alone crashes
+ * on first render for any app that never wired it up, which is why the branch exists.
+ */
+export declare const MediaImage: import("react").NamedExoticComponent<MediaImageProps>;
+//# sourceMappingURL=MediaImage.d.ts.map

package/lib/typescript/core/media/expoImage.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType } from 'react';
+import type { ImageProps } from 'react-native';
+export type ExpoImageComponent = ComponentType<ImageProps & {
+    recyclingKey?: string;
+    transition?: number;
+    contentFit?: 'cover' | 'contain' | 'fill';
+    cachePolicy?: string;
+}>;
+/** Injects expo-image at runtime — never imports the package at module scope. */
+export declare function setExpoImage(Image: ExpoImageComponent): void;
+/** Throws when unset — components render images through `MediaImage`, which degrades instead. */
+export declare function getExpoImage(): ExpoImageComponent;
+export declare function hasExpoImage(): boolean;
+//# sourceMappingURL=expoImage.d.ts.map

package/lib/typescript/core/media/index.d.ts

@@ -0,0 +1,7 @@
+export { setExpoImage, getExpoImage, hasExpoImage } from './expoImage';
+export type { ExpoImageComponent } from './expoImage';
+export { MediaImage } from './MediaImage';
+export type { MediaImageFit, MediaImageProps } from './MediaImage';
+export { setDocumentPicker, setImagePicker, getDocumentPicker, getImagePicker, } from './pickers';
+export type { DocumentPickerModule, ImagePickerModule } from './pickers';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/core/media/pickers.d.ts

@@ -0,0 +1,27 @@
+export type DocumentPickerModule = {
+    getDocumentAsync: (options?: object) => Promise<{
+        canceled: boolean;
+        assets?: ReadonlyArray<{
+            uri: string;
+            name: string;
+            size?: number;
+            mimeType?: string;
+        }>;
+    }>;
+};
+export type ImagePickerModule = {
+    launchImageLibraryAsync: (options?: object) => Promise<{
+        canceled: boolean;
+        assets?: ReadonlyArray<{
+            uri: string;
+            fileName?: string;
+            fileSize?: number;
+            mimeType?: string;
+        }>;
+    }>;
+};
+export declare function setDocumentPicker(module: DocumentPickerModule): void;
+export declare function setImagePicker(module: ImagePickerModule): void;
+export declare function getDocumentPicker(): DocumentPickerModule;
+export declare function getImagePicker(): ImagePickerModule;
+//# sourceMappingURL=pickers.d.ts.map

package/lib/typescript/core/motion/config.d.ts

@@ -0,0 +1,56 @@
+/**
+ * THE global motion control for the whole library. Tweak this file to retune every animated
+ * component at once — no component defines its own duration, easing or spring.
+ *
+ * Two hard perf rules every preset obeys, and any new one must too:
+ *   1. Animate ONLY `opacity` and `transform`. Never height/width/margin/padding — those cannot
+ *      run on the native driver and force a layout pass per frame.
+ *   2. Always `useNativeDriver: true`.
+ */
+import type { EasingFunction } from "react-native";
+import type { DeviceTier } from "../device";
+export type MotionDurationKey = "instant" | "fast" | "normal" | "slow" | "deliberate";
+export type MotionEasingKey = "standard" | "decelerate" | "accelerate" | "emphasized";
+export type MotionSpringKey = "gentle" | "snappy" | "bouncy";
+export interface MotionSpringConfig {
+    readonly damping: number;
+    readonly stiffness: number;
+    readonly mass: number;
+}
+export interface MotionTierPolicy {
+    /** Multiplies every duration. Low-end runs shorter so a dropped frame is less visible. */
+    readonly durationScale: number;
+    /** Springs cost more than tweens; low-end falls back to timing. */
+    readonly springs: boolean;
+    /** Decorative-only motion (parallax, shimmer, stagger) — the first thing to drop. */
+    readonly decorative: boolean;
+    readonly blur: boolean;
+}
+/** Master switch. `false` makes every component render its final state with no animation. */
+export declare const MOTION_ENABLED = true;
+/** Global speed dial. 0.5 = twice as fast, 2 = twice as slow. Tune the whole library from here. */
+export declare const MOTION_SCALE = 1;
+export declare const MOTION_DURATION: Readonly<Record<MotionDurationKey, number>>;
+/** Cubic-bezier control points. Kept as data so this module has no import-time RN dependency. */
+export declare const MOTION_EASING_CURVE: Readonly<Record<MotionEasingKey, readonly [number, number, number, number]>>;
+/** Built on first use, never at module scope — pure tests that mock `react-native` have no `Easing`. */
+export declare function motionEasing(key: MotionEasingKey): EasingFunction;
+/** Test-only: drops memoized easings so a suite can swap the `react-native` mock. */
+export declare function resetMotionEasingCache(): void;
+export declare const MOTION_SPRING: Readonly<Record<MotionSpringKey, MotionSpringConfig>>;
+/** Shared magnitudes so every component's motion reads as one system. */
+export declare const MOTION_TRANSFORM: {
+    /** Press scale for buttons, cards, list rows. */
+    readonly pressScale: 0.97;
+    readonly pressOpacity: 0.92;
+    /** Vertical offset for content revealing in place. */
+    readonly offsetY: 6;
+    /** Larger offset for sheets and toasts. */
+    readonly surfaceOffsetY: 24;
+    /** Overlay scrim opacity at rest. */
+    readonly scrimOpacity: 0.5;
+};
+export declare const MOTION_TIER: Readonly<Record<DeviceTier, MotionTierPolicy>>;
+/** Resolves a duration through the global switch, the global scale, and the device tier. */
+export declare function resolveDuration(key: MotionDurationKey, tier: DeviceTier, reducedMotion: boolean): number;
+//# sourceMappingURL=config.d.ts.map

package/lib/typescript/core/motion/index.d.ts

@@ -0,0 +1,8 @@
+export { MOTION_DURATION, MOTION_EASING_CURVE, MOTION_ENABLED, MOTION_SCALE, MOTION_SPRING, MOTION_TIER, MOTION_TRANSFORM, motionEasing, resetMotionEasingCache, resolveDuration, } from "./config";
+export type { MotionDurationKey, MotionEasingKey, MotionSpringConfig, MotionSpringKey, MotionTierPolicy, } from "./config";
+export { useAnimatedValue } from "./useAnimatedValue";
+export { useMotion } from "./useMotion";
+export type { Motion, TimingOptions } from "./useMotion";
+export { useEnterExit, usePressMotion, useReveal } from "./presets";
+export type { EnterExitMotion, PressMotion, RevealMotion } from "./presets";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/core/motion/presets.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Ready-made motion for the two patterns that repeat across the library: press feedback, and
+ * mount/unmount reveal. Components use these instead of hand-rolling an `Animated.Value` each,
+ * so retuning `config.ts` retunes everything.
+ */
+import { Animated } from "react-native";
+export interface PressStyle {
+    readonly opacity: Animated.Value | number;
+    readonly transform: readonly [{
+        readonly scale: Animated.Value | number;
+    }];
+}
+export interface PressMotion {
+    readonly style: PressStyle;
+    readonly onPressIn: () => void;
+    readonly onPressOut: () => void;
+}
+/** Scale + opacity dip on press. Native driver, so it never blocks the JS thread mid-scroll. */
+export declare function usePressMotion(disabled?: boolean): PressMotion;
+export interface RevealMotion {
+    readonly style: {
+        opacity: Animated.Value;
+        transform: [{
+            translateY: Animated.Value;
+        }];
+    };
+}
+/**
+ * Fade + slide for a subtree whose mounting someone else already controls. Holds no state, so it
+ * costs no extra render — use this instead of `useEnterExit` when the caller ignores `mounted`.
+ */
+export declare function useReveal(visible: boolean, offsetY?: number): RevealMotion;
+export interface EnterExitMotion {
+    /** False once the exit animation has settled — render nothing. */
+    readonly mounted: boolean;
+    readonly style: {
+        opacity: Animated.Value;
+        transform: [{
+            translateY: Animated.Value;
+        }];
+    };
+}
+/**
+ * Fade + slide a subtree in, and keep it mounted only until the exit settles. The unmount is
+ * driven by a timer, not the animation callback: an interrupted animation must still unmount, or
+ * collapsed content leaks into the tree forever.
+ */
+export declare function useEnterExit(visible: boolean, offsetY?: number): EnterExitMotion;
+//# sourceMappingURL=presets.d.ts.map

package/lib/typescript/core/motion/useAnimatedValue.d.ts

@@ -0,0 +1,11 @@
+import { Animated } from "react-native";
+/**
+ * A render-stable `Animated.Value`, allocated once.
+ *
+ * `useRef(new Animated.Value(0))` — the shape this replaces — evaluates its argument on **every**
+ * render and hands `useRef` a fresh node it then discards. A list row holding two of them throws
+ * away two animated nodes per row per render, which is exactly the churn the press-motion fix
+ * removed from `usePressMotion`. `initial` is read on the first render only, matching `useRef`.
+ */
+export declare function useAnimatedValue(initial: number): Animated.Value;
+//# sourceMappingURL=useAnimatedValue.d.ts.map

package/lib/typescript/core/motion/useMotion.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The single hook every animated module uses. Resolves the global config in `config.ts` against
+ * the device tier and the OS reduce-motion setting, so no component reads a raw duration.
+ *
+ * Reduce-motion (WCAG 2.3.3) always wins over the tier policy — `enabled` goes false and every
+ * duration resolves to 0, so callers can `setValue` instead of tweening.
+ */
+import { Animated } from "react-native";
+import type { EasingFunction } from "react-native";
+import type { DeviceTier } from "../device";
+import { MOTION_TRANSFORM } from "./config";
+import type { MotionDurationKey, MotionEasingKey, MotionSpringConfig, MotionSpringKey } from "./config";
+export interface TimingOptions {
+    readonly duration?: MotionDurationKey;
+    readonly easing?: MotionEasingKey;
+    readonly delay?: number;
+}
+export interface Motion {
+    /** False under reduce-motion or the global kill switch — skip the tween, snap the value. */
+    readonly enabled: boolean;
+    readonly tier: DeviceTier;
+    /** Decorative motion (shimmer, parallax, stagger) is high-tier only. */
+    readonly decorative: boolean;
+    readonly blur: boolean;
+    readonly transform: typeof MOTION_TRANSFORM;
+    readonly duration: (key: MotionDurationKey) => number;
+    readonly easing: (key: MotionEasingKey) => EasingFunction;
+    /** Null when the tier can't afford a spring — callers fall back to `timing`. */
+    readonly spring: (key: MotionSpringKey) => MotionSpringConfig | null;
+    /** Native-driver timing. Under reduce-motion it still runs, at duration 0. */
+    readonly timing: (value: Animated.Value, toValue: number, options?: TimingOptions) => Animated.CompositeAnimation;
+}
+export declare function useMotion(): Motion;
+//# sourceMappingURL=useMotion.d.ts.map

package/lib/typescript/core/style/index.d.ts

@@ -1,4 +1,7 @@
 export type { LayoutStyle } from "./layoutStyle";
+export { sx } from "./sx";
+export type { SxProps, SxSpaceToken } from "./sx";
+export { useThemedStyles } from "./useThemedStyles";
 export { createVariants, createTextVariants, createThemedVariants, createThemedTextVariants, variantFactory, themedVariantFactory, } from "./variants";
 export type { CompoundVariant, ThemedVariantResolver, VariantConfig, VariantGroups, VariantProps, VariantResolver, VariantSelection, VariantStyle, } from "./variants";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/core/style/sx.d.ts

@@ -0,0 +1,86 @@
+import type { ViewStyle } from "react-native";
+import type { SpaceToken } from "../../theme/tokens/primitives/space";
+/**
+ * Spacing steps sx() accepts for padding/margin/gap — a deliberately short list (0–32dp) covering
+ * real layout spacing, not the full 17-step `SpaceToken` scale. Bigger jumps (36dp+) are almost
+ * always component *sizing* (an avatar, an icon touch target), not spacing between things — that
+ * belongs to `SizeToken`, not here. `Extract` ties this to `SpaceToken` so it can never list a
+ * step the shared scale doesn't actually have.
+ */
+export type SxSpaceToken = Extract<SpaceToken, 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8>;
+/**
+ * Spacing + flex shorthand for building a plain `ViewStyle` inline — scoped deliberately to the
+ * two things app screens hand-write over and over (padding/margin/gap, flex layout), not a
+ * general CSS-in-JS escape hatch. No color, no typography, no borders — those already have a
+ * typed home (`useThemeColors()`, variant resolvers).
+ */
+export interface SxProps {
+    /** Padding on all sides. */
+    p?: SxSpaceToken;
+    /** Padding left and right. */
+    px?: SxSpaceToken;
+    /** Padding top and bottom. */
+    py?: SxSpaceToken;
+    /** Padding top only. */
+    pt?: SxSpaceToken;
+    /** Padding right only. */
+    pr?: SxSpaceToken;
+    /** Padding bottom only. */
+    pb?: SxSpaceToken;
+    /** Padding left only. */
+    pl?: SxSpaceToken;
+    /** Margin on all sides. */
+    m?: SxSpaceToken;
+    /** Margin left and right. */
+    mx?: SxSpaceToken;
+    /** Margin top and bottom. */
+    my?: SxSpaceToken;
+    /** Margin top only. */
+    mt?: SxSpaceToken;
+    /** Margin right only. */
+    mr?: SxSpaceToken;
+    /** Margin bottom only. */
+    mb?: SxSpaceToken;
+    /** Margin left only. */
+    ml?: SxSpaceToken;
+    /** Space between every child, both directions. */
+    gap?: SxSpaceToken;
+    /** Vertical space between rows of children (only differs from `gap` when wrapping). */
+    rowGap?: SxSpaceToken;
+    /** Horizontal space between columns of children (only differs from `gap` when wrapping). */
+    columnGap?: SxSpaceToken;
+    /** Lay children out left-to-right instead of React Native's default top-to-bottom. */
+    row?: boolean;
+    /** Reverse child order — right-to-left with `row`, bottom-to-top otherwise. */
+    reverse?: boolean;
+    /** Let children wrap onto a new line/column instead of overflowing or being squeezed. */
+    wrap?: boolean;
+    /** How children line up on the cross axis, e.g. `"center"` to vertically center a row. */
+    align?: ViewStyle["alignItems"];
+    /** How children are spaced on the main axis, e.g. `"space-between"`. */
+    justify?: ViewStyle["justifyContent"];
+    /** How wrapped lines are spaced when `wrap` is set and there's extra room left over. */
+    alignContent?: ViewStyle["alignContent"];
+    /** Shorthand for `align: "center"` + `justify: "center"` — centers children both ways. */
+    center?: boolean;
+    /** How much of the remaining space this element should take up. */
+    flex?: number;
+    /** Whether/how much this element grows to fill extra space. */
+    grow?: number;
+    /** Whether/how much this element shrinks when space is tight. */
+    shrink?: number;
+    /** This element's starting size before flex grow/shrink apply. */
+    basis?: ViewStyle["flexBasis"];
+    /** Overrides `align` for just this one element. */
+    self?: ViewStyle["alignSelf"];
+}
+/**
+ * Builds a plain `ViewStyle` object — pass it straight to any component's `style` prop.
+ *
+ * Builds a fresh object per call, same as an inline `style={{...}}` (never cached like
+ * `StyleSheet.create` or the themed variant resolver above). Fine for ordinary screen code that
+ * re-renders on user interaction; hoist a `StyleSheet.create` instead inside a list item renderer
+ * or anything re-rendering many times a second, where per-render allocation actually adds up.
+ */
+export declare function sx(props: SxProps): ViewStyle;
+//# sourceMappingURL=sx.d.ts.map

package/lib/typescript/core/style/useThemedStyles.d.ts

@@ -0,0 +1,5 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { Theme } from '../../theme/provider/types';
+/** Memoizes themed style arrays at the component boundary. */
+export declare function useThemedStyles<T extends StyleProp<ViewStyle>>(factory: (theme: Theme) => T, theme: Theme, deps?: readonly unknown[]): T;
+//# sourceMappingURL=useThemedStyles.d.ts.map