@dloizides/ui-motion 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,33 @@
+# Changelog
+
+## 1.0.1
+
+Initial release — the shared motion layer of the dloizides.com RN-web UI kit.
+
+The kit was almost entirely static: only `ui-feedback` (ToastHost fade/slide, PageSkeleton
+opacity pulse) and `ui-layout` (Accordion chevron) animated, each re-declaring durations and
+curves inline. This package centralises reusable motion primitives, all built on RN `Animated`
+(no reanimated/moti/framer), all driven by `@dloizides/design-tokens` motion tokens, and all
+gated on `@dloizides/rn-web-hooks` `useReducedMotion` so every animation collapses to instant
+under the user's reduced-motion preference.
+
+### New
+
+- **Tokens** — `motionDurations`, `motionEasings` (RN `EasingFunction`s built from the
+  design-token cubic-bezier tuples), `motionEasingTokens`, and a re-export of `DEFAULT_MOTION`.
+  Web and native animate on the same curves.
+- **`useReducedMotion` / `prefersReducedMotion`** — re-exported from `@dloizides/rn-web-hooks`
+  (canonical gate, not forked) so motion consumers get the gate and the primitives from one place.
+- **`useEnterExit({ visible, duration?, translateY?, fromScale? })`** — the reusable enter/exit
+  pattern promoted from ToastHost. Returns an animated `style` + a `mounted` flag so callers keep
+  the node in the tree through its exit animation.
+- **`<FadeIn>`** — fade (+ small translateY) on mount.
+- **`<Collapse open>`** — animated height expand/collapse that WORKS ON WEB (measures content
+  height, animates a real `Animated.Value` height; not `LayoutAnimation`, a native-only no-op on
+  RN-web). Children stay mounted, overflow clipped.
+- **`<PressableScale>`** — a `Pressable` that scales down on press-in and back on press-out;
+  forwards all Pressable props + accessibility. Replaces bare `activeOpacity` in ui-buttons.
+- **`<Skeleton>`** — a moving-shimmer placeholder block (upgrades the opacity-pulse approach);
+  `width` / `height` / `borderRadius` props.
+- Pure helpers `resolveDuration`, `shouldUseNativeDriver`, `collapseTargetHeight`, `resolveScale`,
+  `shimmerRange`, and `MOTION_TEST_IDS`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 dloizides
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,108 @@
+# @dloizides/ui-motion
+
+Themable, brand-agnostic **React Native (RN-web)** motion primitives — the shared
+animation layer of the dloizides.com UI kit.
+
+- Built on RN `Animated` only. **No** reanimated / moti / framer.
+- Native driver on native, JS driver on web (`useNativeDriver: Platform.OS !== 'web'`).
+- **Every animation collapses to instant when the user prefers reduced motion**
+  (`useReducedMotion()`, re-exported from `@dloizides/rn-web-hooks`).
+- Motion values (durations + easings) come from `@dloizides/design-tokens`, so web
+  (CSS `cubic-bezier`) and native (`Easing.bezier`) animate on the **same curves**.
+
+## Install
+
+```bash
+npm install @dloizides/ui-motion
+```
+
+Peer deps: `react >=18`, `react-native >=0.74`. Runtime deps `@dloizides/design-tokens`
+and `@dloizides/rn-web-hooks` are installed automatically.
+
+## Tokens
+
+```ts
+import { motionDurations, motionEasings, DEFAULT_MOTION } from '@dloizides/ui-motion';
+
+motionDurations; // { instant: 0, fast: 140, base: 200, slow: 300 } (ms)
+motionEasings.standard;   // RN EasingFunction built from cubic-bezier(0.2,0,0,1)
+motionEasings.decelerate; // entering elements
+motionEasings.accelerate; // leaving elements
+DEFAULT_MOTION.easings.standard.css; // 'cubic-bezier(0.2,0,0,1)' for web/CSS consumers
+```
+
+## Hooks
+
+### `useReducedMotion()` / `prefersReducedMotion()`
+
+Re-exported from `@dloizides/rn-web-hooks` (the canonical gate — not forked). Web reads
+`matchMedia('(prefers-reduced-motion: reduce)')`; native returns `false`.
+
+### `useEnterExit({ visible, duration?, translateY?, fromScale? })`
+
+The reusable enter/exit pattern (fade + optional translate/scale) promoted from
+`ui-feedback`'s ToastHost. Returns an animated `style` **and** a `mounted` flag so the
+node stays in the tree until its exit animation finishes.
+
+```tsx
+const { style, mounted } = useEnterExit({ visible: open, translateY: -6 });
+if (!mounted) return null;
+return <Animated.View style={style}>{children}</Animated.View>;
+```
+
+## Components
+
+### `<FadeIn duration? delay? translateY? style? testID>`
+
+Fades (and slightly lifts) its children in once, on mount.
+
+```tsx
+<FadeIn><Card /></FadeIn>
+```
+
+### `<Collapse open duration? style? testID>`
+
+Animated height expand/collapse that **works on web** — it measures the content's
+natural height and animates a real `Animated.Value` height (unlike `LayoutAnimation`,
+a native-only no-op on RN-web). Children stay mounted; overflow is clipped.
+
+```tsx
+<Collapse open={expanded}><Details /></Collapse>
+```
+
+### `<PressableScale pressedScale? innerStyle? ...PressableProps>`
+
+A `Pressable` that scales down (default `0.96`) on press-in and springs back on
+press-out. Forwards **all** Pressable props and accessibility. Designed to replace bare
+`activeOpacity` in `@dloizides/ui-buttons`.
+
+```tsx
+<PressableScale accessibilityLabel="Save" accessibilityHint="Saves the form" onPress={save}>
+  <Text>Save</Text>
+</PressableScale>
+```
+
+### `<Skeleton width? height? borderRadius? duration? backgroundColor? highlightColor? style? testID>`
+
+A rounded placeholder block with a highlight band that sweeps across it — a stronger
+loading signal than the opacity pulse in `ui-feedback`'s PageSkeleton.
+
+```tsx
+<Skeleton width="60%" height={20} borderRadius={6} />
+```
+
+## Reduced motion
+
+Every primitive honours the OS "reduce motion" setting: `FadeIn` shows content at rest,
+`Collapse` snaps to the target height, `PressableScale` keeps scale `1`, `Skeleton`
+shows a static block, and `useEnterExit` collapses its duration to `0`.
+
+## Testing philosophy
+
+Unit tests cover **logic** (reduced-motion collapse, mount/exit lifecycle, token
+derivation, prop forwarding), not animation frames — the frame-driven paths are
+verified in the app E2E suites.
+
+## License
+
+MIT © dloizides

package/dist/index.d.mts

@@ -0,0 +1,206 @@
+export { prefersReducedMotion, useReducedMotion } from '@dloizides/rn-web-hooks';
+import { EasingFunction, Animated, StyleProp, ViewStyle, PressableProps } from 'react-native';
+import { MotionEasings, MotionDurations } from '@dloizides/design-tokens';
+export { DEFAULT_MOTION, Motion, MotionDurations, MotionEasings } from '@dloizides/design-tokens';
+import React from 'react';
+
+/**
+ * motionTokens — the RN-ready motion scale, DERIVED from `@dloizides/design-tokens`.
+ *
+ * design-tokens ships framework-agnostic VALUES (durations in ms + easings as a
+ * `css` string plus `[x1,y1,x2,y2]` bezier control points). This module turns the
+ * bezier tuples into RN `Easing.bezier(...)` functions ONCE, so every primitive in
+ * this package animates on the same curves the web/CSS side uses — one source, two
+ * runtimes. Nothing here is app-specific; motion is uniform across portals.
+ */
+
+/** Durations in ms (numbers). `instant` (0) is the reduced-motion collapse target. */
+declare const motionDurations: MotionDurations;
+/** The easing token group in its raw (`css` + `bezier`) form. */
+declare const motionEasingTokens: MotionEasings;
+/** The named RN easing curves, one per {@link MotionEasings} key. */
+type MotionEasingName = keyof MotionEasings;
+/**
+ * RN `EasingFunction`s built from the design-token bezier tuples. Built once at
+ * module load; the same three functions are reused by every primitive.
+ */
+declare const motionEasings: Record<MotionEasingName, EasingFunction>;
+
+/**
+ * The animation duration a primitive should actually use. Collapses to
+ * `instant` (0) under reduced-motion — the single source of the "every animation
+ * collapses to instant" rule the whole package promises. `0` means "jump to the
+ * end state on the next frame", i.e. no visible motion.
+ */
+declare function resolveDuration(duration: number, reduced: boolean): number;
+/**
+ * Whether RN `Animated` should use the native driver. Layout props (height) can
+ * NEVER be native-driven, so callers animating height must pass `false` regardless
+ * — this helper is for opacity/transform animations, which are native-drivable on
+ * native and must fall back to the JS driver on web.
+ */
+declare function shouldUseNativeDriver(): boolean;
+/**
+ * The target height for a {@link Collapse}: the measured content height when open,
+ * `0` when closed. `undefined` while the content has not been measured yet — the
+ * caller leaves height `auto` for that first layout pass so the content can report
+ * its natural size.
+ */
+declare function collapseTargetHeight(open: boolean, measured: number | null): number | undefined;
+/**
+ * The scale a {@link PressableScale} should animate to. `1` (no scale) whenever
+ * reduced-motion is on OR the control is not pressed; the pressed scale otherwise.
+ */
+declare function resolveScale(pressed: boolean, reduced: boolean, pressedScale: number): number;
+/**
+ * The `[from, to]` translateX range for a {@link Skeleton} shimmer sweep across a
+ * block of the given pixel width — the highlight travels from just off the left
+ * edge to just off the right edge.
+ */
+declare function shimmerRange(width: number): readonly [number, number];
+
+/**
+ * Default testID strings for the motion primitives. Consumers can override each
+ * via the component's `testID` prop; these are the fallbacks so Playwright/RTL
+ * selectors have a stable default.
+ */
+declare const MOTION_TEST_IDS: {
+    readonly fadeIn: "fade-in";
+    readonly collapse: "collapse";
+    readonly pressableScale: "pressable-scale";
+    readonly skeleton: "skeleton";
+};
+/** Default press-in scale for {@link PressableScale}. */
+declare const DEFAULT_PRESSED_SCALE = 0.96;
+/** Default enter translate-Y (px) for {@link FadeIn}. */
+declare const DEFAULT_FADE_TRANSLATE_Y = 8;
+/** Default shimmer sweep duration (ms) for {@link Skeleton}. */
+declare const DEFAULT_SKELETON_DURATION_MS = 1200;
+
+interface UseEnterExitOptions {
+    /** Whether the element should be visible (entered). */
+    visible: boolean;
+    /** Enter/exit duration in ms. Defaults to the `base` motion duration (200). */
+    duration?: number;
+    /**
+     * Initial translate-Y offset (px) the element enters from / exits to. `0`
+     * (default) disables the translate, leaving a pure fade.
+     */
+    translateY?: number;
+    /**
+     * Initial scale the element enters from / exits to. `1` (default) disables the
+     * scale, leaving a pure fade.
+     */
+    fromScale?: number;
+}
+interface UseEnterExitResult {
+    /** Animated style to spread onto an `Animated.View`. */
+    style: {
+        opacity: Animated.Value;
+        transform: Animated.WithAnimatedArray<{
+            translateY: Animated.AnimatedInterpolation<number>;
+        } | {
+            scale: Animated.AnimatedInterpolation<number>;
+        }>;
+    };
+    /** True while the element must remain in the tree (entered OR exiting). */
+    mounted: boolean;
+}
+declare function useEnterExit(options: UseEnterExitOptions): UseEnterExitResult;
+
+/**
+ * FadeIn — fades its children in (with a small upward translate) once, on mount.
+ * The lightweight, mount-only sibling of {@link useEnterExit} (which handles the
+ * full enter/exit lifecycle). Under reduced-motion it renders its children at rest
+ * immediately — no fade, no translate.
+ */
+
+interface FadeInProps {
+    children: React.ReactNode;
+    /** Fade duration in ms. Defaults to the `base` motion duration (200). */
+    duration?: number;
+    /** Delay before the fade starts, in ms. Default 0. */
+    delay?: number;
+    /** Enter translate-Y offset (px). `0` disables the translate. Default 8. */
+    translateY?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const FadeIn: ({ children, duration, delay, translateY, style, testID, }: FadeInProps) => React.ReactElement;
+
+/**
+ * Collapse — an animated height expand/collapse that WORKS ON WEB.
+ *
+ * WHY NOT LayoutAnimation: RN's `LayoutAnimation` (what ui-layout's Accordion uses)
+ * is a NATIVE-only no-op under react-native-web, so an app that relied on it got no
+ * animation on the web build. Collapse instead measures the content's natural height
+ * via `onLayout` and animates a real `Animated.Value` height — the same code path on
+ * web and native. Height is a layout prop, so the native driver can never be used
+ * here (`useNativeDriver: false`).
+ *
+ * The children stay MOUNTED at all times (only clipped by `overflow: hidden`), so
+ * their state is preserved across open/close and screen readers still reach them.
+ * Reduced-motion snaps to the target height with no animation.
+ */
+
+interface CollapseProps {
+    /** Whether the content is expanded. */
+    open: boolean;
+    children: React.ReactNode;
+    /** Expand/collapse duration in ms. Defaults to the `base` motion duration (200). */
+    duration?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const Collapse: ({ open, children, duration, style, testID, }: CollapseProps) => React.ReactElement;
+
+/**
+ * PressableScale — a `Pressable` that scales down on press-in and springs back on
+ * press-out, giving tactile feedback without the flat opacity dip of a bare
+ * `activeOpacity`. Built to replace `activeOpacity` usage in `@dloizides/ui-buttons`.
+ *
+ * It forwards EVERY `Pressable` prop (onPress, accessibility*, disabled, hitSlop,
+ * …) so it is a drop-in wrapper; the scale is applied to an inner `Animated.View`
+ * so the outer `Pressable` keeps its full press/a11y behaviour. Under reduced-motion
+ * the scale is suppressed entirely (the element stays at scale 1).
+ */
+
+interface PressableScaleProps extends PressableProps {
+    /** Scale to shrink to on press-in. Default 0.96. */
+    pressedScale?: number;
+    /** Style applied to the inner animated wrapper that carries the scale transform. */
+    innerStyle?: StyleProp<ViewStyle>;
+}
+declare const PressableScale: ({ pressedScale, innerStyle, onPressIn, onPressOut, children, testID, ...rest }: PressableScaleProps) => React.ReactElement;
+
+/**
+ * Skeleton — a rounded placeholder block with a highlight band that sweeps across
+ * it, upgrading the opacity-pulse skeleton in `@dloizides/ui-feedback` to a moving
+ * shimmer (a stronger "content is loading" signal).
+ *
+ * The block measures its own pixel width via `onLayout`, then loops a highlight
+ * `Animated.View` from just off the left edge to just off the right edge (transform
+ * translateX — native-drivable on native, JS driver on web). Under reduced-motion
+ * the sweep is suppressed and a static block is shown, so it never animates against
+ * the user's OS preference.
+ */
+
+interface SkeletonProps {
+    /** Block width. Number (px) or percentage string. Default '100%'. */
+    width?: number | string;
+    /** Block height in px. Default 16. */
+    height?: number;
+    /** Corner radius in px. Default 4. */
+    borderRadius?: number;
+    /** Shimmer sweep duration in ms. Default 1200. */
+    duration?: number;
+    /** Base block colour. */
+    backgroundColor?: string;
+    /** Sweeping highlight colour. */
+    highlightColor?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const Skeleton: ({ width, height, borderRadius, duration, backgroundColor, highlightColor, style, testID, }: SkeletonProps) => React.ReactElement;
+
+export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, collapseTargetHeight, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit };

package/dist/index.d.ts

@@ -0,0 +1,206 @@
+export { prefersReducedMotion, useReducedMotion } from '@dloizides/rn-web-hooks';
+import { EasingFunction, Animated, StyleProp, ViewStyle, PressableProps } from 'react-native';
+import { MotionEasings, MotionDurations } from '@dloizides/design-tokens';
+export { DEFAULT_MOTION, Motion, MotionDurations, MotionEasings } from '@dloizides/design-tokens';
+import React from 'react';
+
+/**
+ * motionTokens — the RN-ready motion scale, DERIVED from `@dloizides/design-tokens`.
+ *
+ * design-tokens ships framework-agnostic VALUES (durations in ms + easings as a
+ * `css` string plus `[x1,y1,x2,y2]` bezier control points). This module turns the
+ * bezier tuples into RN `Easing.bezier(...)` functions ONCE, so every primitive in
+ * this package animates on the same curves the web/CSS side uses — one source, two
+ * runtimes. Nothing here is app-specific; motion is uniform across portals.
+ */
+
+/** Durations in ms (numbers). `instant` (0) is the reduced-motion collapse target. */
+declare const motionDurations: MotionDurations;
+/** The easing token group in its raw (`css` + `bezier`) form. */
+declare const motionEasingTokens: MotionEasings;
+/** The named RN easing curves, one per {@link MotionEasings} key. */
+type MotionEasingName = keyof MotionEasings;
+/**
+ * RN `EasingFunction`s built from the design-token bezier tuples. Built once at
+ * module load; the same three functions are reused by every primitive.
+ */
+declare const motionEasings: Record<MotionEasingName, EasingFunction>;
+
+/**
+ * The animation duration a primitive should actually use. Collapses to
+ * `instant` (0) under reduced-motion — the single source of the "every animation
+ * collapses to instant" rule the whole package promises. `0` means "jump to the
+ * end state on the next frame", i.e. no visible motion.
+ */
+declare function resolveDuration(duration: number, reduced: boolean): number;
+/**
+ * Whether RN `Animated` should use the native driver. Layout props (height) can
+ * NEVER be native-driven, so callers animating height must pass `false` regardless
+ * — this helper is for opacity/transform animations, which are native-drivable on
+ * native and must fall back to the JS driver on web.
+ */
+declare function shouldUseNativeDriver(): boolean;
+/**
+ * The target height for a {@link Collapse}: the measured content height when open,
+ * `0` when closed. `undefined` while the content has not been measured yet — the
+ * caller leaves height `auto` for that first layout pass so the content can report
+ * its natural size.
+ */
+declare function collapseTargetHeight(open: boolean, measured: number | null): number | undefined;
+/**
+ * The scale a {@link PressableScale} should animate to. `1` (no scale) whenever
+ * reduced-motion is on OR the control is not pressed; the pressed scale otherwise.
+ */
+declare function resolveScale(pressed: boolean, reduced: boolean, pressedScale: number): number;
+/**
+ * The `[from, to]` translateX range for a {@link Skeleton} shimmer sweep across a
+ * block of the given pixel width — the highlight travels from just off the left
+ * edge to just off the right edge.
+ */
+declare function shimmerRange(width: number): readonly [number, number];
+
+/**
+ * Default testID strings for the motion primitives. Consumers can override each
+ * via the component's `testID` prop; these are the fallbacks so Playwright/RTL
+ * selectors have a stable default.
+ */
+declare const MOTION_TEST_IDS: {
+    readonly fadeIn: "fade-in";
+    readonly collapse: "collapse";
+    readonly pressableScale: "pressable-scale";
+    readonly skeleton: "skeleton";
+};
+/** Default press-in scale for {@link PressableScale}. */
+declare const DEFAULT_PRESSED_SCALE = 0.96;
+/** Default enter translate-Y (px) for {@link FadeIn}. */
+declare const DEFAULT_FADE_TRANSLATE_Y = 8;
+/** Default shimmer sweep duration (ms) for {@link Skeleton}. */
+declare const DEFAULT_SKELETON_DURATION_MS = 1200;
+
+interface UseEnterExitOptions {
+    /** Whether the element should be visible (entered). */
+    visible: boolean;
+    /** Enter/exit duration in ms. Defaults to the `base` motion duration (200). */
+    duration?: number;
+    /**
+     * Initial translate-Y offset (px) the element enters from / exits to. `0`
+     * (default) disables the translate, leaving a pure fade.
+     */
+    translateY?: number;
+    /**
+     * Initial scale the element enters from / exits to. `1` (default) disables the
+     * scale, leaving a pure fade.
+     */
+    fromScale?: number;
+}
+interface UseEnterExitResult {
+    /** Animated style to spread onto an `Animated.View`. */
+    style: {
+        opacity: Animated.Value;
+        transform: Animated.WithAnimatedArray<{
+            translateY: Animated.AnimatedInterpolation<number>;
+        } | {
+            scale: Animated.AnimatedInterpolation<number>;
+        }>;
+    };
+    /** True while the element must remain in the tree (entered OR exiting). */
+    mounted: boolean;
+}
+declare function useEnterExit(options: UseEnterExitOptions): UseEnterExitResult;
+
+/**
+ * FadeIn — fades its children in (with a small upward translate) once, on mount.
+ * The lightweight, mount-only sibling of {@link useEnterExit} (which handles the
+ * full enter/exit lifecycle). Under reduced-motion it renders its children at rest
+ * immediately — no fade, no translate.
+ */
+
+interface FadeInProps {
+    children: React.ReactNode;
+    /** Fade duration in ms. Defaults to the `base` motion duration (200). */
+    duration?: number;
+    /** Delay before the fade starts, in ms. Default 0. */
+    delay?: number;
+    /** Enter translate-Y offset (px). `0` disables the translate. Default 8. */
+    translateY?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const FadeIn: ({ children, duration, delay, translateY, style, testID, }: FadeInProps) => React.ReactElement;
+
+/**
+ * Collapse — an animated height expand/collapse that WORKS ON WEB.
+ *
+ * WHY NOT LayoutAnimation: RN's `LayoutAnimation` (what ui-layout's Accordion uses)
+ * is a NATIVE-only no-op under react-native-web, so an app that relied on it got no
+ * animation on the web build. Collapse instead measures the content's natural height
+ * via `onLayout` and animates a real `Animated.Value` height — the same code path on
+ * web and native. Height is a layout prop, so the native driver can never be used
+ * here (`useNativeDriver: false`).
+ *
+ * The children stay MOUNTED at all times (only clipped by `overflow: hidden`), so
+ * their state is preserved across open/close and screen readers still reach them.
+ * Reduced-motion snaps to the target height with no animation.
+ */
+
+interface CollapseProps {
+    /** Whether the content is expanded. */
+    open: boolean;
+    children: React.ReactNode;
+    /** Expand/collapse duration in ms. Defaults to the `base` motion duration (200). */
+    duration?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const Collapse: ({ open, children, duration, style, testID, }: CollapseProps) => React.ReactElement;
+
+/**
+ * PressableScale — a `Pressable` that scales down on press-in and springs back on
+ * press-out, giving tactile feedback without the flat opacity dip of a bare
+ * `activeOpacity`. Built to replace `activeOpacity` usage in `@dloizides/ui-buttons`.
+ *
+ * It forwards EVERY `Pressable` prop (onPress, accessibility*, disabled, hitSlop,
+ * …) so it is a drop-in wrapper; the scale is applied to an inner `Animated.View`
+ * so the outer `Pressable` keeps its full press/a11y behaviour. Under reduced-motion
+ * the scale is suppressed entirely (the element stays at scale 1).
+ */
+
+interface PressableScaleProps extends PressableProps {
+    /** Scale to shrink to on press-in. Default 0.96. */
+    pressedScale?: number;
+    /** Style applied to the inner animated wrapper that carries the scale transform. */
+    innerStyle?: StyleProp<ViewStyle>;
+}
+declare const PressableScale: ({ pressedScale, innerStyle, onPressIn, onPressOut, children, testID, ...rest }: PressableScaleProps) => React.ReactElement;
+
+/**
+ * Skeleton — a rounded placeholder block with a highlight band that sweeps across
+ * it, upgrading the opacity-pulse skeleton in `@dloizides/ui-feedback` to a moving
+ * shimmer (a stronger "content is loading" signal).
+ *
+ * The block measures its own pixel width via `onLayout`, then loops a highlight
+ * `Animated.View` from just off the left edge to just off the right edge (transform
+ * translateX — native-drivable on native, JS driver on web). Under reduced-motion
+ * the sweep is suppressed and a static block is shown, so it never animates against
+ * the user's OS preference.
+ */
+
+interface SkeletonProps {
+    /** Block width. Number (px) or percentage string. Default '100%'. */
+    width?: number | string;
+    /** Block height in px. Default 16. */
+    height?: number;
+    /** Corner radius in px. Default 4. */
+    borderRadius?: number;
+    /** Shimmer sweep duration in ms. Default 1200. */
+    duration?: number;
+    /** Base block colour. */
+    backgroundColor?: string;
+    /** Sweeping highlight colour. */
+    highlightColor?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const Skeleton: ({ width, height, borderRadius, duration, backgroundColor, highlightColor, style, testID, }: SkeletonProps) => React.ReactElement;
+
+export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, collapseTargetHeight, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit };