@thewhileloop/whileui 1.2.2 → 2.0.0

package/dist/lib/interaction-tokens.js

@@ -8,8 +8,17 @@ function parseNumber(value, fallback) {
 function clampOpacity(value) {
     return Math.max(0, Math.min(1, value));
 }
+/** Motion values used when a `--ui-motion-*` token is absent, and by the provider-less motion policy. */
+export const MOTION_TOKEN_DEFAULTS = {
+    motionFast: 140,
+    motionNormal: 200,
+    motionSlow: 280,
+    motionSpringDamping: 20,
+    motionSpringStiffness: 260,
+    motionSpringMass: 0.8,
+};
 export function useInteractionTokens() {
-    const [pressOpacity, pressOpacityStrong, disabledOpacity, disabledOpacitySoft, disabledOpacitySubtle, inactiveOpacity, motionFast, motionNormal, motionSlow, drawerOpenDuration, drawerCloseDuration,] = useCSSVariable([
+    const [pressOpacity, pressOpacityStrong, disabledOpacity, disabledOpacitySoft, disabledOpacitySubtle, inactiveOpacity, motionFast, motionNormal, motionSlow, motionSpringDamping, motionSpringStiffness, motionSpringMass, drawerOpenDuration, drawerCloseDuration,] = useCSSVariable([
         '--ui-press-opacity',
         '--ui-press-opacity-strong',
         '--ui-disabled-opacity',
@@ -19,21 +28,27 @@ export function useInteractionTokens() {
         '--ui-motion-fast',
         '--ui-motion-normal',
         '--ui-motion-slow',
+        '--ui-motion-spring-damping',
+        '--ui-motion-spring-stiffness',
+        '--ui-motion-spring-mass',
         '--ui-drawer-open-duration',
         '--ui-drawer-close-duration',
     ]);
     return {
-        pressOpacity: clampOpacity(parseNumber(pressOpacity, 0.72)),
-        pressOpacityStrong: clampOpacity(parseNumber(pressOpacityStrong, 0.9)),
-        disabledOpacity: clampOpacity(parseNumber(disabledOpacity, 0.5)),
-        disabledOpacitySoft: clampOpacity(parseNumber(disabledOpacitySoft, 0.6)),
-        disabledOpacitySubtle: clampOpacity(parseNumber(disabledOpacitySubtle, 0.4)),
-        inactiveOpacity: clampOpacity(parseNumber(inactiveOpacity, 0.5)),
-        motionFast: Math.max(0, Math.round(parseNumber(motionFast, 160))),
-        motionNormal: Math.max(0, Math.round(parseNumber(motionNormal, 220))),
-        motionSlow: Math.max(0, Math.round(parseNumber(motionSlow, 300))),
-        drawerOpenDuration: Math.max(0, Math.round(parseNumber(drawerOpenDuration, 300))),
-        drawerCloseDuration: Math.max(0, Math.round(parseNumber(drawerCloseDuration, 220))),
+        pressOpacity: clampOpacity(parseNumber(pressOpacity, 0.82)),
+        pressOpacityStrong: clampOpacity(parseNumber(pressOpacityStrong, 0.92)),
+        disabledOpacity: clampOpacity(parseNumber(disabledOpacity, 0.46)),
+        disabledOpacitySoft: clampOpacity(parseNumber(disabledOpacitySoft, 0.56)),
+        disabledOpacitySubtle: clampOpacity(parseNumber(disabledOpacitySubtle, 0.36)),
+        inactiveOpacity: clampOpacity(parseNumber(inactiveOpacity, 0.54)),
+        motionFast: Math.max(0, Math.round(parseNumber(motionFast, MOTION_TOKEN_DEFAULTS.motionFast))),
+        motionNormal: Math.max(0, Math.round(parseNumber(motionNormal, MOTION_TOKEN_DEFAULTS.motionNormal))),
+        motionSlow: Math.max(0, Math.round(parseNumber(motionSlow, MOTION_TOKEN_DEFAULTS.motionSlow))),
+        motionSpringDamping: Math.max(0, parseNumber(motionSpringDamping, MOTION_TOKEN_DEFAULTS.motionSpringDamping)),
+        motionSpringStiffness: Math.max(0, parseNumber(motionSpringStiffness, MOTION_TOKEN_DEFAULTS.motionSpringStiffness)),
+        motionSpringMass: Math.max(0.01, parseNumber(motionSpringMass, MOTION_TOKEN_DEFAULTS.motionSpringMass)),
+        drawerOpenDuration: Math.max(0, Math.round(parseNumber(drawerOpenDuration, 260))),
+        drawerCloseDuration: Math.max(0, Math.round(parseNumber(drawerCloseDuration, 180))),
     };
 }
 function resolveDisabledOpacity(tokens, variant) {
@@ -67,4 +82,3 @@ export function withInteractivePressableStyle(styleProp, tokens, options = {}) {
         ];
     };
 }
-//# sourceMappingURL=interaction-tokens.js.map

package/dist/lib/motion-policy.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ReduceMotion } from 'react-native-reanimated';
+export type MotionMode = 'system' | 'reduced' | 'full' | 'disabled';
+export type MotionDuration = 'fast' | 'normal' | 'slow';
+export type MotionSpring = 'responsive';
+export interface MotionSpringConfig {
+    damping: number;
+    stiffness: number;
+    mass: number;
+    reduceMotion: ReduceMotion;
+}
+export interface MotionPolicy {
+    mode: MotionMode;
+    reduceMotion: boolean;
+    animationsEnabled: boolean;
+    durations: Readonly<Record<MotionDuration, number>>;
+    springs: Readonly<Record<MotionSpring, Readonly<MotionSpringConfig>>>;
+    reanimatedReduceMotion: ReduceMotion;
+}
+export interface MotionProviderProps {
+    children: React.ReactNode;
+    mode?: MotionMode;
+}
+export declare function MotionProvider({ children, mode }: MotionProviderProps): React.JSX.Element;
+export declare function useMotionPolicy(): MotionPolicy;

package/dist/lib/motion-policy.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+import { ReduceMotion, useReducedMotion } from 'react-native-reanimated';
+import { MOTION_TOKEN_DEFAULTS, useInteractionTokens } from './interaction-tokens';
+// Without a provider, components still render and Reanimated still follows the system
+// setting. Only `--ui-motion-*` overrides and the non-Reanimated reduced-motion paths
+// need `MotionProvider` at the root.
+const DEFAULT_MOTION_POLICY = {
+    mode: 'system',
+    reduceMotion: false,
+    animationsEnabled: true,
+    durations: {
+        fast: MOTION_TOKEN_DEFAULTS.motionFast,
+        normal: MOTION_TOKEN_DEFAULTS.motionNormal,
+        slow: MOTION_TOKEN_DEFAULTS.motionSlow,
+    },
+    springs: {
+        responsive: {
+            damping: MOTION_TOKEN_DEFAULTS.motionSpringDamping,
+            stiffness: MOTION_TOKEN_DEFAULTS.motionSpringStiffness,
+            mass: MOTION_TOKEN_DEFAULTS.motionSpringMass,
+            reduceMotion: ReduceMotion.System,
+        },
+    },
+    reanimatedReduceMotion: ReduceMotion.System,
+};
+const MotionPolicyContext = createContext(DEFAULT_MOTION_POLICY);
+function useSystemReducedMotion(active) {
+    const initialValue = useReducedMotion();
+    const [enabled, setEnabled] = useState(initialValue);
+    useEffect(() => {
+        if (!active)
+            return;
+        let mounted = true;
+        void AccessibilityInfo.isReduceMotionEnabled()
+            .then((value) => {
+            if (mounted)
+                setEnabled(value);
+        })
+            .catch(() => {
+            // Keep Reanimated's startup snapshot if the native query is unavailable.
+        });
+        const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setEnabled);
+        return () => {
+            mounted = false;
+            subscription.remove();
+        };
+    }, [active]);
+    return enabled;
+}
+export function MotionProvider({ children, mode = 'system' }) {
+    const interaction = useInteractionTokens();
+    const systemReducedMotion = useSystemReducedMotion(mode === 'system');
+    const relevantSystemValue = mode === 'system' ? systemReducedMotion : false;
+    const policy = useMemo(() => {
+        const reduceMotion = mode === 'reduced' || mode === 'disabled' || (mode === 'system' && relevantSystemValue);
+        const animationsEnabled = mode !== 'disabled';
+        const reanimatedReduceMotion = mode === 'system'
+            ? ReduceMotion.System
+            : mode === 'full'
+                ? ReduceMotion.Never
+                : ReduceMotion.Always;
+        return {
+            mode,
+            reduceMotion,
+            animationsEnabled,
+            durations: {
+                fast: animationsEnabled ? interaction.motionFast : 0,
+                normal: animationsEnabled ? interaction.motionNormal : 0,
+                slow: animationsEnabled ? interaction.motionSlow : 0,
+            },
+            springs: {
+                responsive: {
+                    damping: interaction.motionSpringDamping,
+                    stiffness: interaction.motionSpringStiffness,
+                    mass: interaction.motionSpringMass,
+                    reduceMotion: reanimatedReduceMotion,
+                },
+            },
+            reanimatedReduceMotion,
+        };
+    }, [
+        interaction.motionFast,
+        interaction.motionNormal,
+        interaction.motionSlow,
+        interaction.motionSpringDamping,
+        interaction.motionSpringMass,
+        interaction.motionSpringStiffness,
+        mode,
+        relevantSystemValue,
+    ]);
+    return _jsx(MotionPolicyContext.Provider, { value: policy, children: children });
+}
+export function useMotionPolicy() {
+    return useContext(MotionPolicyContext);
+}

package/dist/lib/overlay-insets.d.ts

@@ -0,0 +1,17 @@
+export interface OverlayInsets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+/**
+ * Collision padding for anything that floats: popovers, dropdowns, context menus.
+ *
+ * Without it these are only clamped to the viewport, so a trigger near an edge produces
+ * a panel sitting flush against it — touching the screen edge on web, and sliding under
+ * the notch or home indicator on a device. Both read as broken rather than deliberate.
+ *
+ * Safe area plus a margin, so the result clears the hardware and still leaves the panel
+ * looking placed rather than jammed. Callers can override per instance.
+ */
+export declare function useOverlayInsets(): OverlayInsets;

package/dist/lib/overlay-insets.js

@@ -0,0 +1,23 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useVisualTokens } from './visual-tokens';
+/**
+ * Collision padding for anything that floats: popovers, dropdowns, context menus.
+ *
+ * Without it these are only clamped to the viewport, so a trigger near an edge produces
+ * a panel sitting flush against it — touching the screen edge on web, and sliding under
+ * the notch or home indicator on a device. Both read as broken rather than deliberate.
+ *
+ * Safe area plus a margin, so the result clears the hardware and still leaves the panel
+ * looking placed rather than jammed. Callers can override per instance.
+ */
+export function useOverlayInsets() {
+    const safeArea = useSafeAreaInsets();
+    const visual = useVisualTokens();
+    const margin = visual.surfacePaddingSm;
+    return {
+        top: safeArea.top + margin,
+        bottom: safeArea.bottom + margin,
+        left: safeArea.left + margin,
+        right: safeArea.right + margin,
+    };
+}

package/dist/lib/portal.d.ts

@@ -19,4 +19,3 @@
  * ```
  */
 export { PortalHost } from '@rn-primitives/portal';
-//# sourceMappingURL=portal.d.ts.map

package/dist/lib/portal.js

@@ -19,4 +19,3 @@
  * ```
  */
 export { PortalHost } from '@rn-primitives/portal';
-//# sourceMappingURL=portal.js.map

package/dist/lib/react-native-classname.d.ts

@@ -20,4 +20,3 @@ declare module 'react-native' {
     }
 }
 export {};
-//# sourceMappingURL=react-native-classname.d.ts.map

package/dist/lib/react-native-classname.js

@@ -1,2 +1 @@
 import 'react-native';
-//# sourceMappingURL=react-native-classname.js.map

package/dist/lib/recipes.d.ts

@@ -0,0 +1,30 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+import { type ThemeColors } from './theme-colors';
+import { type VisualTokens } from './visual-tokens';
+/**
+ * Shared style recipes.
+ * Components consume these instead of hardcoding radius/height/padding/font
+ * classes so a theme (color contract + visual token contract) can fully
+ * restyle the package.
+ */
+export type ControlSize = 'sm' | 'default' | 'lg' | 'icon';
+export type SurfacePaddingSize = 'none' | 'sm' | 'default' | 'lg';
+export type ShadowTier = 'none' | 'sm' | 'md' | 'lg';
+export type TypographyRole = 'caption' | 'label' | 'body' | 'emphasis' | 'title' | 'headline';
+export declare function controlRecipe(visual: VisualTokens, size?: ControlSize): ViewStyle;
+export declare function fieldRecipe(visual: VisualTokens, size?: ControlSize): ViewStyle;
+export interface SurfaceRecipeOptions {
+    padding?: SurfacePaddingSize;
+    radius?: 'sm' | 'md' | 'lg' | 'xl';
+    bordered?: boolean;
+}
+export declare function surfacePadding(visual: VisualTokens, padding?: SurfacePaddingSize): number;
+export declare function surfaceRadius(visual: VisualTokens, radius?: 'sm' | 'md' | 'lg' | 'xl'): number;
+export declare function surfaceRecipe(visual: VisualTokens, options?: SurfaceRecipeOptions): ViewStyle;
+export declare function shadowStyle(visual: VisualTokens, colors: ThemeColors, tier: ShadowTier): ViewStyle;
+export declare function typographyStyle(visual: VisualTokens, role: TypographyRole): TextStyle;
+export declare function useControlRecipe(size?: ControlSize): ViewStyle;
+export declare function useFieldRecipe(size?: ControlSize): ViewStyle;
+export declare function useSurfaceRecipe(options?: SurfaceRecipeOptions): ViewStyle;
+export declare function useShadowStyle(tier: ShadowTier): ViewStyle;
+export declare function useTypography(role: TypographyRole): TextStyle;

package/dist/lib/recipes.js

@@ -0,0 +1,138 @@
+import { useThemeColors } from './theme-colors';
+import { useVisualTokens } from './visual-tokens';
+export function controlRecipe(visual, size = 'default') {
+    if (size === 'sm') {
+        return {
+            minHeight: visual.controlHeightSm,
+            borderRadius: visual.radiusMd,
+            paddingHorizontal: visual.controlPaddingXSm,
+            paddingVertical: visual.controlPaddingYSm,
+        };
+    }
+    if (size === 'lg') {
+        return {
+            minHeight: visual.controlHeightLg,
+            borderRadius: visual.radiusXl,
+            paddingHorizontal: visual.controlPaddingXLg,
+            paddingVertical: visual.controlPaddingYLg,
+        };
+    }
+    if (size === 'icon') {
+        return {
+            minHeight: visual.controlHeightDefault,
+            minWidth: visual.controlHeightDefault,
+            width: visual.controlHeightDefault,
+            borderRadius: visual.radiusLg,
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+        };
+    }
+    return {
+        minHeight: visual.controlHeightDefault,
+        borderRadius: visual.radiusLg,
+        paddingHorizontal: visual.controlPaddingXDefault,
+        paddingVertical: visual.controlPaddingYDefault,
+    };
+}
+export function fieldRecipe(visual, size = 'default') {
+    const base = controlRecipe(visual, size);
+    return {
+        ...base,
+        borderWidth: visual.borderWidthControl,
+    };
+}
+export function surfacePadding(visual, padding = 'default') {
+    if (padding === 'none')
+        return 0;
+    if (padding === 'sm')
+        return visual.surfacePaddingSm;
+    if (padding === 'lg')
+        return visual.surfacePaddingLg;
+    return visual.surfacePaddingDefault;
+}
+export function surfaceRadius(visual, radius = 'xl') {
+    if (radius === 'sm')
+        return visual.radiusSm;
+    if (radius === 'md')
+        return visual.radiusMd;
+    if (radius === 'lg')
+        return visual.radiusLg;
+    return visual.radiusXl;
+}
+export function surfaceRecipe(visual, options = {}) {
+    const { padding = 'default', radius = 'xl', bordered = true } = options;
+    return {
+        borderRadius: surfaceRadius(visual, radius),
+        padding: surfacePadding(visual, padding),
+        ...(bordered ? { borderWidth: visual.borderWidthHairline } : null),
+    };
+}
+export function shadowStyle(visual, colors, tier) {
+    if (tier === 'none')
+        return {};
+    const opacity = tier === 'sm'
+        ? visual.shadowOpacitySm
+        : tier === 'md'
+            ? visual.shadowOpacityMd
+            : visual.shadowOpacityLg;
+    const radius = tier === 'sm'
+        ? visual.shadowRadiusSm
+        : tier === 'md'
+            ? visual.shadowRadiusMd
+            : visual.shadowRadiusLg;
+    const offsetY = tier === 'sm'
+        ? visual.shadowOffsetYSm
+        : tier === 'md'
+            ? visual.shadowOffsetYMd
+            : visual.shadowOffsetYLg;
+    const elevation = tier === 'sm'
+        ? visual.shadowElevationSm
+        : tier === 'md'
+            ? visual.shadowElevationMd
+            : visual.shadowElevationLg;
+    if (opacity <= 0)
+        return {};
+    return {
+        shadowColor: colors.shadow,
+        shadowOpacity: opacity,
+        shadowRadius: radius,
+        shadowOffset: { width: 0, height: offsetY },
+        elevation,
+    };
+}
+// Component-owned text sizes. Font family/weight stays on className
+// (font-medium etc.) so app font mappings keep working.
+export function typographyStyle(visual, role) {
+    if (role === 'caption')
+        return {
+            fontSize: visual.fontSizeXs,
+            letterSpacing: visual.letterSpacingCaption,
+        };
+    if (role === 'label')
+        return { fontSize: visual.fontSizeSm, letterSpacing: visual.letterSpacingLabel };
+    if (role === 'emphasis')
+        return { fontSize: visual.fontSizeLg, letterSpacing: visual.letterSpacingBody };
+    if (role === 'title')
+        return { fontSize: visual.fontSizeXl, letterSpacing: visual.letterSpacingTitle };
+    if (role === 'headline')
+        return {
+            fontSize: visual.fontSize2xl,
+            letterSpacing: visual.letterSpacingHeadline,
+        };
+    return { fontSize: visual.fontSizeBase, letterSpacing: visual.letterSpacingBody };
+}
+export function useControlRecipe(size = 'default') {
+    return controlRecipe(useVisualTokens(), size);
+}
+export function useFieldRecipe(size = 'default') {
+    return fieldRecipe(useVisualTokens(), size);
+}
+export function useSurfaceRecipe(options = {}) {
+    return surfaceRecipe(useVisualTokens(), options);
+}
+export function useShadowStyle(tier) {
+    return shadowStyle(useVisualTokens(), useThemeColors(), tier);
+}
+export function useTypography(role) {
+    return typographyStyle(useVisualTokens(), role);
+}

package/dist/lib/tap-only.d.ts

@@ -0,0 +1,11 @@
+import type { GestureResponderEvent } from 'react-native';
+/**
+ * Press handlers that fire only for a tap, not for a drag that happens to start and
+ * end inside the same view. A `Pressable` keeps a press alive while the finger stays
+ * within its bounds, so on a full-screen backdrop every swipe was also a tap and
+ * dismissed the overlay. Ten points is the platform touch slop.
+ */
+export declare function useTapOnly(onTap: () => void, slop?: number): {
+    onPressIn: (event: GestureResponderEvent) => void;
+    onPress: (event: GestureResponderEvent) => void;
+};

package/dist/lib/tap-only.js

@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+/**
+ * Press handlers that fire only for a tap, not for a drag that happens to start and
+ * end inside the same view. A `Pressable` keeps a press alive while the finger stays
+ * within its bounds, so on a full-screen backdrop every swipe was also a tap and
+ * dismissed the overlay. Ten points is the platform touch slop.
+ */
+export function useTapOnly(onTap, slop = 10) {
+    const start = useRef(null);
+    return {
+        onPressIn: (event) => {
+            start.current = { x: event.nativeEvent.pageX, y: event.nativeEvent.pageY };
+        },
+        onPress: (event) => {
+            const from = start.current;
+            start.current = null;
+            const moved = from !== null &&
+                Number.isFinite(event.nativeEvent.pageX) &&
+                Math.hypot(event.nativeEvent.pageX - from.x, event.nativeEvent.pageY - from.y) > slop;
+            if (!moved)
+                onTap();
+        },
+    };
+}

package/dist/lib/theme-bridge.d.ts

@@ -26,4 +26,3 @@ export declare function syncThemeMode(mode: ThemeMode, adapter?: ThemeBridgeAdap
 export declare function useThemeBridge({ initialMode, adapter, }?: UseThemeBridgeOptions): UseThemeBridgeResult;
 export declare function ThemeBridge({ mode: controlledMode, initialMode, adapter, onModeChange, }: ThemeBridgeProps): null;
 export {};
-//# sourceMappingURL=theme-bridge.d.ts.map

package/dist/lib/theme-bridge.js

@@ -30,8 +30,17 @@ export function useThemeBridge({ initialMode = 'system', adapter, } = {}) {
         if (!adapter) {
             return;
         }
-        (async () => {
-            const next = await resolveThemeMode(adapter, initialMode);
+        // `loadThemeMode` is the consumer's storage. If it rejects — a corrupt store, a
+        // keychain prompt the user dismissed — the app must still render in the initial
+        // mode; leaving `hydrated` false would strand anything gated on it forever.
+        void (async () => {
+            let next;
+            try {
+                next = await resolveThemeMode(adapter, initialMode);
+            }
+            catch {
+                next = initialMode;
+            }
             if (!mounted) {
                 return;
             }
@@ -76,4 +85,3 @@ export function ThemeBridge({ mode: controlledMode, initialMode = 'system', adap
     }, [effectiveMode, onModeChange]);
     return null;
 }
-//# sourceMappingURL=theme-bridge.js.map

package/dist/lib/theme-colors.d.ts

@@ -1,46 +1,5 @@
-/**
- * Color values for RN primitives that require them (icons, Calendar, ActivityIndicator).
- * Reads from global.css via useCSSVariable — single source of truth in your theme.
- */
-export interface ThemeColors {
-    primary: string;
-    primaryForeground: string;
-    foreground: string;
-    background: string;
-    card: string;
-    cardForeground: string;
-    popover: string;
-    popoverForeground: string;
-    secondary: string;
-    secondaryForeground: string;
-    muted: string;
-    mutedForeground: string;
-    border: string;
-    input: string;
-    ring: string;
-    accent: string;
-    accentForeground: string;
-    destructive: string;
-    destructiveForeground: string;
-    success: string;
-    successForeground: string;
-    warning: string;
-    warningForeground: string;
-    info: string;
-    infoForeground: string;
-    overlay: string;
-    overlayStrong: string;
-    surfaceElevated: string;
-    surfaceTranslucent: string;
-    surfaceTranslucentBorder: string;
-    surfaceBorder: string;
-    surfaceHighlight: string;
-    stateHover: string;
-    statePressed: string;
-    stateDisabled: string;
-    /** For placeholder text (aliases mutedForeground; override via placeholderTextColor when needed) */
-    placeholder: string;
-}
+import { type ThemeColors } from './theme-contract';
+export type { ThemeColors } from './theme-contract';
 export declare function useThemeColors(): ThemeColors;
 /** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
 export declare function useIconColors(): {
@@ -56,6 +15,3 @@ export declare function useIconColors(): {
 };
 /** Alias for useThemeColors. Returns RN-safe color strings (hex/rgb/rgba) for RefreshControl, LinearGradient, charts. */
 export declare const useThemeTokens: typeof useThemeColors;
-/** @deprecated Use useThemeTokens or useThemeColors. */
-export declare const useResolvedThemeColors: typeof useThemeColors;
-//# sourceMappingURL=theme-colors.d.ts.map