@thewhileloop/whileui 2.0.0 → 4.0.0

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,5 +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 {};

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) {
@@ -74,14 +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;
+function ControlledThemeBridge({ mode, adapter, }) {
     useEffect(() => {
-        setMode(effectiveMode);
-    }, [effectiveMode, setMode]);
-    useEffect(() => {
-        onModeChange?.(effectiveMode);
-    }, [effectiveMode, onModeChange]);
+        void syncThemeMode(mode, adapter);
+    }, [adapter, mode]);
+    return null;
+}
+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-presets.d.ts

@@ -1,4 +1,5 @@
 import { type ThemeColors } from './theme-contract';
+import { type ThemeBaseColors } from './theme-derive';
 import { type VisualTokens } from './visual-token-contract';
 /**
  * Canonical full-package theme presets.
@@ -15,6 +16,31 @@ export interface ThemePreset {
     /** Visual token overrides; unset keys keep contract fallbacks. */
     visual: Partial<VisualTokens>;
 }
+/**
+ * Build a preset from the 25 base colors, deriving the other 27.
+ *
+ * Prefer this to writing a `ThemePreset` literal. `visual` has always been
+ * `Partial`, but `light` and `dark` are the full 52-key `ThemeColors`, so the
+ * literal form asks an author for every active variant, soft variant, overlay,
+ * surface, interaction state and shadow — values `deriveThemeColors` already
+ * computes from the palette. Nothing in the literal's type points at that helper,
+ * and the predictable result is a hand-written derivation that drifts from the
+ * library's own. The Atelier preset below is 110 lines for this reason.
+ *
+ * Override a derived value by spreading the result:
+ *
+ * ```ts
+ * const preset = createThemePreset({ name, description, light, dark });
+ * preset.dark.overlay = 'rgba(0, 0, 0, 0.9)';
+ * ```
+ */
+export declare function createThemePreset(input: {
+    name: string;
+    description: string;
+    light: ThemeBaseColors;
+    dark: ThemeBaseColors;
+    visual?: Partial<VisualTokens>;
+}): ThemePreset;
 export declare const WHILEUI_PRESET_SOFT: ThemePreset;
 export declare const WHILEUI_PRESET_ATELIER: ThemePreset;
 export declare const WHILEUI_THEME_PRESETS: readonly ThemePreset[];

package/dist/lib/theme-presets.js

@@ -1,5 +1,33 @@
 import { THEME_TOKEN_SPECS, WHILEUI_DARK_THEME_COLORS, WHILEUI_LIGHT_THEME_COLORS, } from './theme-contract';
+import { deriveThemeColors } from './theme-derive';
 import { VISUAL_TOKEN_SPECS } from './visual-token-contract';
+/**
+ * Build a preset from the 25 base colors, deriving the other 27.
+ *
+ * Prefer this to writing a `ThemePreset` literal. `visual` has always been
+ * `Partial`, but `light` and `dark` are the full 52-key `ThemeColors`, so the
+ * literal form asks an author for every active variant, soft variant, overlay,
+ * surface, interaction state and shadow — values `deriveThemeColors` already
+ * computes from the palette. Nothing in the literal's type points at that helper,
+ * and the predictable result is a hand-written derivation that drifts from the
+ * library's own. The Atelier preset below is 110 lines for this reason.
+ *
+ * Override a derived value by spreading the result:
+ *
+ * ```ts
+ * const preset = createThemePreset({ name, description, light, dark });
+ * preset.dark.overlay = 'rgba(0, 0, 0, 0.9)';
+ * ```
+ */
+export function createThemePreset(input) {
+    return {
+        name: input.name,
+        description: input.description,
+        light: deriveThemeColors(input.light, 'light'),
+        dark: deriveThemeColors(input.dark, 'dark'),
+        visual: input.visual ?? {},
+    };
+}
 // Rounded, airy, frosted. Matches the contract fallbacks.
 export const WHILEUI_PRESET_SOFT = {
     name: 'soft',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhileloop/whileui",
-  "version": "2.0.0",
+  "version": "4.0.0",
   "description": "WhileUI Native — Copy-paste components for React Native. You own the code.",
   "license": "MIT",
   "repository": {
@@ -60,25 +60,25 @@
     "test:watch": "jest --watch"
   },
   "peerDependencies": {
-    "@rn-primitives/hooks": ">=1.0.0",
-    "@rn-primitives/hover-card": ">=1.0.0",
-    "@rn-primitives/popover": ">=1.0.0",
-    "@rn-primitives/portal": ">=1.0.0",
-    "@rn-primitives/select": ">=1.0.0",
-    "@rn-primitives/slot": ">=1.0.0",
-    "@rn-primitives/tooltip": ">=1.0.0",
-    "expo": ">=57.0.0",
-    "expo-blur": ">=57.0.0",
-    "expo-image": ">=57.0.0",
-    "react": ">=19.2.0",
-    "react-native": ">=0.86.0",
-    "react-native-gesture-handler": ">=2.32.0",
-    "react-native-reanimated": ">=4.5.0",
-    "react-native-safe-area-context": ">=5.7.0",
-    "react-native-screens": ">=4.26.0",
+    "@rn-primitives/hooks": ">=1.5.2",
+    "@rn-primitives/hover-card": ">=1.5.2",
+    "@rn-primitives/popover": ">=1.5.2",
+    "@rn-primitives/portal": ">=1.5.3",
+    "@rn-primitives/select": ">=1.5.2",
+    "@rn-primitives/slot": ">=1.5.2",
+    "@rn-primitives/tooltip": ">=1.5.2",
+    "expo": ">=58.0.0",
+    "expo-blur": ">=58.0.0",
+    "expo-image": ">=58.0.0",
+    "react": ">=19.3.0",
+    "react-native": ">=0.88.0",
+    "react-native-gesture-handler": ">=3.3.0",
+    "react-native-reanimated": ">=4.7.0",
+    "react-native-safe-area-context": ">=5.10.0",
+    "react-native-screens": ">=4.30.0",
     "tailwindcss": ">=4.0.0",
     "uniwind": ">=1.12.0",
-    "react-native-worklets": ">=0.10.0"
+    "react-native-worklets": ">=0.13.0"
   },
   "peerDependenciesMeta": {
     "expo-blur": {
@@ -89,19 +89,20 @@
     "clsx": "^2.1.0",
     "culori": "^4.0.2",
     "react-native-calendars": "^1.1314.0",
-    "tailwind-merge": "^3.0.0",
-    "tailwind-variants": "^0.3.0"
+    "tailwind-merge": "^3.7.0",
+    "tailwind-variants": "^3.3.1"
   },
   "devDependencies": {
-    "@testing-library/react-native": "^14.0.1",
+    "@react-native/jest-preset": "0.88.0",
+    "@testing-library/react-native": "^14.1.0",
     "@types/culori": "^4.0.1",
-    "@types/jest": "^29.5.14",
-    "@types/react": "~19.2.0",
-    "expo-image": "~57.0.5",
-    "jest": "^29.7.0",
-    "jest-expo": "~57.0.5",
-    "react-native-screens": "~4.26.0",
-    "test-renderer": "^1.2.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "~19.3.0",
+    "expo-image": "~58.0.15",
+    "jest": "^30.5.2",
+    "jest-expo": "~58.0.11",
+    "react-native-screens": "~4.30.0",
+    "test-renderer": "^1.3.1",
     "typescript": "~6.0.3"
   }
 }