@thewhileloop/whileui 1.2.3 → 3.0.0

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

@@ -8,7 +8,6 @@ export interface ThemeBridgeProps {
     mode?: ThemeMode;
     initialMode?: ThemeMode;
     adapter?: ThemeBridgeAdapter;
-    onModeChange?: (mode: ThemeMode) => void;
 }
 export interface UseThemeBridgeOptions {
     initialMode?: ThemeMode;
@@ -24,6 +23,8 @@ export declare function applyThemeMode(mode: ThemeMode): void;
 export declare function resolveThemeMode(adapter?: ThemeBridgeAdapter, fallback?: ThemeMode): Promise<ThemeMode>;
 export declare function syncThemeMode(mode: ThemeMode, adapter?: ThemeBridgeAdapter): Promise<ThemeMode>;
 export declare function useThemeBridge({ initialMode, adapter, }?: UseThemeBridgeOptions): UseThemeBridgeResult;
-export declare function ThemeBridge({ mode: controlledMode, initialMode, adapter, onModeChange, }: ThemeBridgeProps): null;
+export declare function ThemeBridge({ mode, initialMode, adapter }: ThemeBridgeProps): import("react").FunctionComponentElement<Pick<ThemeBridgeProps, "initialMode" | "adapter">> | import("react").FunctionComponentElement<{
+    mode: ThemeMode;
+    adapter?: ThemeBridgeAdapter;
+}>;
 export {};
-//# sourceMappingURL=theme-bridge.d.ts.map

package/dist/lib/theme-bridge.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { createElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { Uniwind, useUniwind } from 'uniwind';
 const modeCycle = ['light', 'dark', 'system'];
 export function applyThemeMode(mode) {
@@ -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;
             }
@@ -65,15 +74,18 @@ export function useThemeBridge({ initialMode = 'system', adapter, } = {}) {
         cycleMode,
     }), [cycleMode, mode, theme]);
 }
-export function ThemeBridge({ mode: controlledMode, initialMode = 'system', adapter, onModeChange, }) {
-    const { mode, setMode } = useThemeBridge({ initialMode, adapter });
-    const effectiveMode = controlledMode ?? mode;
-    useEffect(() => {
-        setMode(effectiveMode);
-    }, [effectiveMode, setMode]);
+function ControlledThemeBridge({ mode, adapter, }) {
     useEffect(() => {
-        onModeChange?.(effectiveMode);
-    }, [effectiveMode, onModeChange]);
+        void syncThemeMode(mode, adapter);
+    }, [adapter, mode]);
     return null;
 }
-//# sourceMappingURL=theme-bridge.js.map
+function UncontrolledThemeBridge({ initialMode, adapter, }) {
+    useThemeBridge({ initialMode, adapter });
+    return null;
+}
+export function ThemeBridge({ mode, initialMode = 'system', adapter }) {
+    return mode === undefined
+        ? createElement(UncontrolledThemeBridge, { initialMode, adapter })
+        : createElement(ControlledThemeBridge, { mode, adapter });
+}

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

package/dist/lib/theme-colors.js

@@ -1,5 +1,9 @@
 import { useCSSVariable } from 'uniwind';
+import { useUniwind } from 'uniwind';
 import { formatHex, formatRgb, parse } from 'culori';
+import { WHILEUI_DARK_THEME_COLORS, WHILEUI_LIGHT_THEME_COLORS, THEME_TOKEN_SPECS, THEME_TOKEN_VARIABLES, } from './theme-contract';
+import { deriveThemeColors, THEME_BASE_TOKEN_KEYS } from './theme-derive';
+import { Platform } from 'react-native';
 function parseThemeColor(value) {
     if (value === undefined || value === null)
         return undefined;
@@ -31,233 +35,31 @@ function parseThemeColor(value) {
     }
     return undefined;
 }
-function resolveThemeToken(cssValue, appValue, fallback) {
-    return parseThemeColor(cssValue) ?? parseThemeColor(appValue) ?? fallback;
+function resolveThemeToken(cssValue, appValue) {
+    if (Platform.OS === 'android') {
+        return parseThemeColor(appValue) ?? parseThemeColor(cssValue);
+    }
+    return parseThemeColor(cssValue) ?? parseThemeColor(appValue);
 }
-const THEME_COLOR_SPECS = [
-    {
-        key: 'primary',
-        cssVar: '--color-primary',
-        appVar: '--app-color-primary',
-        fallback: '#000000',
-    },
-    {
-        key: 'primaryForeground',
-        cssVar: '--color-primary-foreground',
-        appVar: '--app-color-primary-foreground',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'foreground',
-        cssVar: '--color-foreground',
-        appVar: '--app-color-foreground',
-        fallback: '#000000',
-    },
-    {
-        key: 'background',
-        cssVar: '--color-background',
-        appVar: '--app-color-background',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'card',
-        cssVar: '--color-card',
-        appVar: '--app-color-card',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'cardForeground',
-        cssVar: '--color-card-foreground',
-        appVar: '--app-color-card-foreground',
-        fallback: '#000000',
-    },
-    {
-        key: 'popover',
-        cssVar: '--color-popover',
-        appVar: '--app-color-popover',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'popoverForeground',
-        cssVar: '--color-popover-foreground',
-        appVar: '--app-color-popover-foreground',
-        fallback: '#000000',
-    },
-    {
-        key: 'secondary',
-        cssVar: '--color-secondary',
-        appVar: '--app-color-secondary',
-        fallback: '#f5f5f5',
-    },
-    {
-        key: 'secondaryForeground',
-        cssVar: '--color-secondary-foreground',
-        appVar: '--app-color-secondary-foreground',
-        fallback: '#171717',
-    },
-    {
-        key: 'muted',
-        cssVar: '--color-muted',
-        appVar: '--app-color-muted',
-        fallback: '#f5f5f5',
-    },
-    {
-        key: 'mutedForeground',
-        cssVar: '--color-muted-foreground',
-        appVar: '--app-color-muted-foreground',
-        fallback: '#737373',
-    },
-    {
-        key: 'border',
-        cssVar: '--color-border',
-        appVar: '--app-color-border',
-        fallback: '#e5e5e5',
-    },
-    {
-        key: 'input',
-        cssVar: '--color-input',
-        appVar: '--app-color-input',
-        fallback: '#e5e5e5',
-    },
-    {
-        key: 'ring',
-        cssVar: '--color-ring',
-        appVar: '--app-color-ring',
-        fallback: '#94a3b8',
-    },
-    {
-        key: 'accent',
-        cssVar: '--color-accent',
-        appVar: '--app-color-accent',
-        fallback: '#22c55e',
-    },
-    {
-        key: 'accentForeground',
-        cssVar: '--color-accent-foreground',
-        appVar: '--app-color-accent-foreground',
-        fallback: '#0a0a0a',
-    },
-    {
-        key: 'destructive',
-        cssVar: '--color-destructive',
-        appVar: '--app-color-destructive',
-        fallback: '#dc2626',
-    },
-    {
-        key: 'destructiveForeground',
-        cssVar: '--color-destructive-foreground',
-        appVar: '--app-color-destructive-foreground',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'success',
-        cssVar: '--color-success',
-        appVar: '--app-color-success',
-        fallback: '#16a34a',
-    },
-    {
-        key: 'successForeground',
-        cssVar: '--color-success-foreground',
-        appVar: '--app-color-success-foreground',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'warning',
-        cssVar: '--color-warning',
-        appVar: '--app-color-warning',
-        fallback: '#f59e0b',
-    },
-    {
-        key: 'warningForeground',
-        cssVar: '--color-warning-foreground',
-        appVar: '--app-color-warning-foreground',
-        fallback: '#111827',
-    },
-    {
-        key: 'info',
-        cssVar: '--color-info',
-        appVar: '--app-color-info',
-        fallback: '#3b82f6',
-    },
-    {
-        key: 'infoForeground',
-        cssVar: '--color-info-foreground',
-        appVar: '--app-color-info-foreground',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'overlay',
-        cssVar: '--color-overlay',
-        appVar: '--app-color-overlay',
-        fallback: 'rgba(0, 0, 0, 0.4)',
-    },
-    {
-        key: 'overlayStrong',
-        cssVar: '--color-overlay-strong',
-        appVar: '--app-color-overlay-strong',
-        fallback: 'rgba(0, 0, 0, 0.55)',
-    },
-    {
-        key: 'surfaceElevated',
-        cssVar: '--color-surface-elevated',
-        appVar: '--app-color-surface-elevated',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'surfaceTranslucent',
-        cssVar: '--color-surface-translucent',
-        appVar: '--app-color-surface-translucent',
-        fallback: 'rgba(255, 255, 255, 0.5)',
-    },
-    {
-        key: 'surfaceTranslucentBorder',
-        cssVar: '--color-surface-translucent-border',
-        appVar: '--app-color-surface-translucent-border',
-        fallback: 'rgba(255, 255, 255, 0.18)',
-    },
-    {
-        key: 'surfaceBorder',
-        cssVar: '--color-surface-border',
-        appVar: '--app-color-surface-border',
-        fallback: 'rgba(255, 255, 255, 0.3)',
-    },
-    {
-        key: 'surfaceHighlight',
-        cssVar: '--color-surface-highlight',
-        appVar: '--app-color-surface-highlight',
-        fallback: 'rgba(255, 255, 255, 0.3)',
-    },
-    {
-        key: 'stateHover',
-        cssVar: '--color-state-hover',
-        appVar: '--app-color-state-hover',
-        fallback: 'rgba(0, 0, 0, 0.05)',
-    },
-    {
-        key: 'statePressed',
-        cssVar: '--color-state-pressed',
-        appVar: '--app-color-state-pressed',
-        fallback: 'rgba(0, 0, 0, 0.12)',
-    },
-    {
-        key: 'stateDisabled',
-        cssVar: '--color-state-disabled',
-        appVar: '--app-color-state-disabled',
-        fallback: 'rgba(0, 0, 0, 0.4)',
-    },
-];
-const THEME_COLOR_VARIABLES = THEME_COLOR_SPECS.flatMap(({ cssVar, appVar }) => [cssVar, appVar]);
 export function useThemeColors() {
-    const values = useCSSVariable(THEME_COLOR_VARIABLES);
-    const resolved = {};
+    const { theme } = useUniwind();
+    const values = useCSSVariable(THEME_TOKEN_VARIABLES);
+    const scheme = theme === 'dark' ? 'dark' : 'light';
+    const fallbackPalette = scheme === 'dark' ? WHILEUI_DARK_THEME_COLORS : WHILEUI_LIGHT_THEME_COLORS;
+    const defined = {};
     let index = 0;
-    for (const token of THEME_COLOR_SPECS) {
-        const cssValue = values[index++];
-        const appValue = values[index++];
-        resolved[token.key] = resolveThemeToken(cssValue, appValue, token.fallback);
+    for (const token of THEME_TOKEN_SPECS) {
+        const value = resolveThemeToken(values[index++], values[index++]);
+        if (value)
+            defined[token.key] = value;
     }
-    resolved.placeholder = resolved.mutedForeground ?? '#737373';
-    return resolved;
+    // Tokens the app left out are derived from its own base palette, not taken
+    // from the default one — a missing soft tint must not turn the brand purple.
+    const base = {};
+    for (const key of THEME_BASE_TOKEN_KEYS)
+        base[key] = defined[key] ?? fallbackPalette[key];
+    const derived = deriveThemeColors(base, scheme);
+    return { ...derived, ...defined, placeholder: derived.placeholder };
 }
 /** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
 export function useIconColors() {
@@ -276,6 +78,3 @@ export function useIconColors() {
 }
 /** Alias for useThemeColors. Returns RN-safe color strings (hex/rgb/rgba) for RefreshControl, LinearGradient, charts. */
 export const useThemeTokens = useThemeColors;
-/** @deprecated Use useThemeTokens or useThemeColors. */
-export const useResolvedThemeColors = useThemeColors;
-//# sourceMappingURL=theme-colors.js.map

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

@@ -0,0 +1,78 @@
+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;
+    shadow: string;
+    primaryActive: string;
+    secondaryActive: string;
+    destructiveActive: string;
+    primarySoft: string;
+    primarySoftSubtle: string;
+    secondarySoft: string;
+    mutedSoft: string;
+    destructiveSoft: string;
+    destructiveSoftBorder: string;
+    successSoft: string;
+    successSoftBorder: string;
+    warningSoft: string;
+    warningSoftBorder: string;
+    infoSoft: string;
+    infoSoftBorder: string;
+    /** For placeholder text (aliases mutedForeground; override via placeholderTextColor when needed) */
+    placeholder: string;
+}
+export type ThemeTokenKey = keyof Omit<ThemeColors, 'placeholder'>;
+export type ThemeTokenGroup = 'core' | 'status' | 'surface' | 'feedback';
+export interface ThemeTokenSpec {
+    key: ThemeTokenKey;
+    cssVar: string;
+    appVar: string;
+    fallback: string;
+    group: ThemeTokenGroup;
+}
+export declare const WHILEUI_LIGHT_THEME_COLORS: ThemeColors;
+export declare const WHILEUI_DARK_THEME_COLORS: ThemeColors;
+/**
+ * App-owned theme contract for WhileUI.
+ * The package owns token names and fallbacks; apps own the actual values.
+ */
+export declare const THEME_TOKEN_SPECS: readonly ThemeTokenSpec[];
+export declare const THEME_TOKEN_VARIABLES: string[];
+export declare const THEME_TOKEN_GROUPS: {
+    readonly core: ThemeTokenSpec[];
+    readonly status: ThemeTokenSpec[];
+    readonly surface: ThemeTokenSpec[];
+    readonly feedback: ThemeTokenSpec[];
+};