@react-native-rethemed/core 0.1.0 → 0.1.1

package/README.md

@@ -1,5 +1,7 @@
 # @react-native-rethemed/core
 
+[![npm](https://img.shields.io/npm/v/@react-native-rethemed/core.svg)](https://www.npmjs.com/package/@react-native-rethemed/core)
+
 Type-safe design tokens for React Native style props — no wrapper components. Light/dark aware, with text presets and a `themed` style API. Part of [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
 
 ## Installation

package/dist/color-mode-store.cjs

@@ -0,0 +1,57 @@
+//#region src/color-mode-store.ts
+const isColorMode = (value) => value === "light" || value === "dark" || value === "system";
+/**
+* External store holding the uncontrolled color mode. One is created per
+* `createThemed()` call (never at module level) so independent instances
+* don't share state.
+*/
+function createColorModeStore() {
+	let mode = null;
+	let userSet = false;
+	let hydrationStarted = false;
+	const listeners = /* @__PURE__ */ new Set();
+	const emit = () => {
+		for (const listener of listeners) listener();
+	};
+	return {
+		/**
+		* Seeds the mode on first use only. Called during render so the very
+		* first render already sees `defaultMode`; later calls (e.g. a changed
+		* `defaultColorMode` prop) are ignored rather than overwriting the
+		* current mode.
+		*/
+		init(defaultMode) {
+			if (mode === null) mode = defaultMode;
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		getSnapshot() {
+			return mode ?? "system";
+		},
+		setMode(next) {
+			userSet = true;
+			if (next === mode) return;
+			mode = next;
+			emit();
+		},
+		/** Returns `false` if rehydration already ran for this store. */
+		beginHydration() {
+			if (hydrationStarted) return false;
+			hydrationStarted = true;
+			return true;
+		},
+		/** Applies a stored value unless it's malformed or the user already chose. */
+		hydrate(saved) {
+			if (userSet || !isColorMode(saved) || saved === mode) return;
+			mode = saved;
+			emit();
+		}
+	};
+}
+//#endregion
+exports.createColorModeStore = createColorModeStore;
+exports.isColorMode = isColorMode;

package/dist/color-mode-store.d.cts

@@ -0,0 +1,11 @@
+//#region src/color-mode-store.d.ts
+export type ColorMode = 'light' | 'dark' | 'system';
+/**
+ * Structural subset of `expo-secure-store` / `AsyncStorage`, so either can be
+ * passed as-is without an adapter.
+ */
+export type ColorModeStorage = {
+  getItem: (key: string) => string | null | Promise<string | null>;
+  setItem: (key: string, value: string) => void | Promise<void>;
+};
+//#endregion

package/dist/color-mode-store.d.mts

@@ -0,0 +1,11 @@
+//#region src/color-mode-store.d.ts
+export type ColorMode = 'light' | 'dark' | 'system';
+/**
+ * Structural subset of `expo-secure-store` / `AsyncStorage`, so either can be
+ * passed as-is without an adapter.
+ */
+export type ColorModeStorage = {
+  getItem: (key: string) => string | null | Promise<string | null>;
+  setItem: (key: string, value: string) => void | Promise<void>;
+};
+//#endregion

package/dist/color-mode-store.mjs

@@ -0,0 +1,56 @@
+//#region src/color-mode-store.ts
+const isColorMode = (value) => value === "light" || value === "dark" || value === "system";
+/**
+* External store holding the uncontrolled color mode. One is created per
+* `createThemed()` call (never at module level) so independent instances
+* don't share state.
+*/
+function createColorModeStore() {
+	let mode = null;
+	let userSet = false;
+	let hydrationStarted = false;
+	const listeners = /* @__PURE__ */ new Set();
+	const emit = () => {
+		for (const listener of listeners) listener();
+	};
+	return {
+		/**
+		* Seeds the mode on first use only. Called during render so the very
+		* first render already sees `defaultMode`; later calls (e.g. a changed
+		* `defaultColorMode` prop) are ignored rather than overwriting the
+		* current mode.
+		*/
+		init(defaultMode) {
+			if (mode === null) mode = defaultMode;
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		getSnapshot() {
+			return mode ?? "system";
+		},
+		setMode(next) {
+			userSet = true;
+			if (next === mode) return;
+			mode = next;
+			emit();
+		},
+		/** Returns `false` if rehydration already ran for this store. */
+		beginHydration() {
+			if (hydrationStarted) return false;
+			hydrationStarted = true;
+			return true;
+		},
+		/** Applies a stored value unless it's malformed or the user already chose. */
+		hydrate(saved) {
+			if (userSet || !isColorMode(saved) || saved === mode) return;
+			mode = saved;
+			emit();
+		}
+	};
+}
+//#endregion
+export { createColorModeStore, isColorMode };

package/dist/config.cjs

@@ -0,0 +1,26 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_define_theme = require("./define-theme.cjs");
+const require_semantic_colors = require("./semantic-colors.cjs");
+const require_text_tree = require("./text-tree.cjs");
+const require_extend_theme = require("./extend-theme.cjs");
+const require_line_height_resolver = require("./resolvers/line-height-resolver.cjs");
+const require_style_props = require("./style-props.cjs");
+exports.COLOR_KEYS = require_style_props.COLOR_KEYS;
+exports.FONT_SIZE_KEYS = require_style_props.FONT_SIZE_KEYS;
+exports.FONT_WEIGHT_KEYS = require_style_props.FONT_WEIGHT_KEYS;
+exports.LETTER_SPACING_KEYS = require_style_props.LETTER_SPACING_KEYS;
+exports.LINE_HEIGHT_KEYS = require_style_props.LINE_HEIGHT_KEYS;
+exports.RADIUS_KEYS = require_style_props.RADIUS_KEYS;
+exports.RN_DEFAULT_FONT_SIZE = require_line_height_resolver.RN_DEFAULT_FONT_SIZE;
+exports.SHADOW_STYLE_PROPS = require_style_props.SHADOW_STYLE_PROPS;
+exports.SPACING_KEYS = require_style_props.SPACING_KEYS;
+exports.TEXT_TOKEN_FIELDS = require_text_tree.TEXT_TOKEN_FIELDS;
+exports.Z_INDEX_KEYS = require_style_props.Z_INDEX_KEYS;
+exports.defineTheme = require_define_theme.defineTheme;
+exports.extendTheme = require_extend_theme.extendTheme;
+exports.isSchemeColor = require_semantic_colors.isSchemeColor;
+exports.isTextPreset = require_text_tree.isTextPreset;
+exports.resolveBaseFontSize = require_line_height_resolver.resolveBaseFontSize;
+exports.resolveTextColor = require_text_tree.resolveTextColor;
+exports.walkSemanticColors = require_semantic_colors.walkSemanticColors;
+exports.walkTextPresets = require_text_tree.walkTextPresets;

package/dist/config.d.cts

@@ -0,0 +1,8 @@
+import { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, RADIUS_KEYS, SHADOW_STYLE_PROPS, SPACING_KEYS, Z_INDEX_KEYS } from "./style-props.cjs";
+import { LooseSchema, SchemeColor, SemanticColors, ShadowToken, TextColor, TextToken, TextTokenTree, ThemeConfig, ThemedSchema, ThemedStyles, TokenizeStyle } from "./types.cjs";
+import { defineTheme } from "./define-theme.cjs";
+import { extendTheme } from "./extend-theme.cjs";
+import { RN_DEFAULT_FONT_SIZE, resolveBaseFontSize } from "./resolvers/line-height-resolver.cjs";
+import { isSchemeColor, walkSemanticColors } from "./semantic-colors.cjs";
+import { TEXT_TOKEN_FIELDS, isTextPreset, resolveTextColor, walkTextPresets } from "./text-tree.cjs";
+export { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, type LooseSchema, RADIUS_KEYS, RN_DEFAULT_FONT_SIZE, SHADOW_STYLE_PROPS, SPACING_KEYS, type SchemeColor, type SemanticColors, type ShadowToken, TEXT_TOKEN_FIELDS, type TextColor, type TextToken, type TextTokenTree, type ThemeConfig, type ThemedSchema, type ThemedStyles, type TokenizeStyle, Z_INDEX_KEYS, defineTheme, extendTheme, isSchemeColor, isTextPreset, resolveBaseFontSize, resolveTextColor, walkSemanticColors, walkTextPresets };

package/dist/config.d.mts

@@ -0,0 +1,8 @@
+import { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, RADIUS_KEYS, SHADOW_STYLE_PROPS, SPACING_KEYS, Z_INDEX_KEYS } from "./style-props.mjs";
+import { LooseSchema, SchemeColor, SemanticColors, ShadowToken, TextColor, TextToken, TextTokenTree, ThemeConfig, ThemedSchema, ThemedStyles, TokenizeStyle } from "./types.mjs";
+import { defineTheme } from "./define-theme.mjs";
+import { extendTheme } from "./extend-theme.mjs";
+import { RN_DEFAULT_FONT_SIZE, resolveBaseFontSize } from "./resolvers/line-height-resolver.mjs";
+import { isSchemeColor, walkSemanticColors } from "./semantic-colors.mjs";
+import { TEXT_TOKEN_FIELDS, isTextPreset, resolveTextColor, walkTextPresets } from "./text-tree.mjs";
+export { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, type LooseSchema, RADIUS_KEYS, RN_DEFAULT_FONT_SIZE, SHADOW_STYLE_PROPS, SPACING_KEYS, type SchemeColor, type SemanticColors, type ShadowToken, TEXT_TOKEN_FIELDS, type TextColor, type TextToken, type TextTokenTree, type ThemeConfig, type ThemedSchema, type ThemedStyles, type TokenizeStyle, Z_INDEX_KEYS, defineTheme, extendTheme, isSchemeColor, isTextPreset, resolveBaseFontSize, resolveTextColor, walkSemanticColors, walkTextPresets };

package/dist/config.mjs

@@ -0,0 +1,7 @@
+import { defineTheme } from "./define-theme.mjs";
+import { isSchemeColor, walkSemanticColors } from "./semantic-colors.mjs";
+import { TEXT_TOKEN_FIELDS, isTextPreset, resolveTextColor, walkTextPresets } from "./text-tree.mjs";
+import { extendTheme } from "./extend-theme.mjs";
+import { RN_DEFAULT_FONT_SIZE, resolveBaseFontSize } from "./resolvers/line-height-resolver.mjs";
+import { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, RADIUS_KEYS, SHADOW_STYLE_PROPS, SPACING_KEYS, Z_INDEX_KEYS } from "./style-props.mjs";
+export { COLOR_KEYS, FONT_SIZE_KEYS, FONT_WEIGHT_KEYS, LETTER_SPACING_KEYS, LINE_HEIGHT_KEYS, RADIUS_KEYS, RN_DEFAULT_FONT_SIZE, SHADOW_STYLE_PROPS, SPACING_KEYS, TEXT_TOKEN_FIELDS, Z_INDEX_KEYS, defineTheme, extendTheme, isSchemeColor, isTextPreset, resolveBaseFontSize, resolveTextColor, walkSemanticColors, walkTextPresets };

package/dist/create-themed-styles.cjs

@@ -0,0 +1,31 @@
+const require_text_tree = require("./text-tree.cjs");
+const require_style_resolver = require("./resolvers/style-resolver.cjs");
+const require_text_variants = require("./text-variants.cjs");
+//#region src/create-themed-styles.ts
+/**
+* Builds `{ view, text, image }` from a fully resolved `ThemeConfig` for one
+* fixed color scheme. No React here — plain data in, plain functions out.
+* `createThemed` calls this once per scheme and hands the result out through
+* `useThemed()`, so components re-render (and pick up new colors) when the
+* scheme changes.
+*
+* `S` comes from the generated `themed.gen.ts`; without it every token
+* prop is loosely typed (`LooseSchema`).
+*/
+function createThemedStyles(config, scheme) {
+	const resolveStyle = require_style_resolver.createStyleResolver(config, scheme);
+	const text = (input = {}) => resolveStyle(input);
+	const variants = require_text_variants.createTextVariants(require_text_tree.resolveTextTree(config.semanticTokens?.text, scheme), (input) => resolveStyle(input));
+	for (const [role, sizes] of Object.entries(variants)) Object.defineProperty(text, role, {
+		value: sizes,
+		enumerable: true,
+		configurable: true
+	});
+	return {
+		view: resolveStyle,
+		image: resolveStyle,
+		text
+	};
+}
+//#endregion
+exports.createThemedStyles = createThemedStyles;

package/dist/{esm/create-themed-styles.d.ts → create-themed-styles.d.cts}

@@ -1,5 +1,6 @@
-import type { ColorScheme } from './resolvers/color-resolver.js';
-import type { LooseSchema, ThemeConfig, ThemedSchema, ThemedStyles } from './types.js';
+import { LooseSchema, ThemeConfig, ThemedSchema, ThemedStyles } from "./types.cjs";
+import { ColorScheme } from "./resolvers/color-resolver.cjs";
+//#region src/create-themed-styles.d.ts
 /**
  * Builds `{ view, text, image }` from a fully resolved `ThemeConfig` for one
  * fixed color scheme. No React here — plain data in, plain functions out.
@@ -11,3 +12,4 @@ import type { LooseSchema, ThemeConfig, ThemedSchema, ThemedStyles } from './typ
  * prop is loosely typed (`LooseSchema`).
  */
 export declare function createThemedStyles<S extends ThemedSchema = LooseSchema>(config: ThemeConfig, scheme: ColorScheme): ThemedStyles<S>;
+//#endregion

package/dist/{cjs/create-themed-styles.d.ts → create-themed-styles.d.mts}

@@ -1,5 +1,6 @@
-import type { ColorScheme } from './resolvers/color-resolver';
-import type { LooseSchema, ThemeConfig, ThemedSchema, ThemedStyles } from './types';
+import { LooseSchema, ThemeConfig, ThemedSchema, ThemedStyles } from "./types.mjs";
+import { ColorScheme } from "./resolvers/color-resolver.mjs";
+//#region src/create-themed-styles.d.ts
 /**
  * Builds `{ view, text, image }` from a fully resolved `ThemeConfig` for one
  * fixed color scheme. No React here — plain data in, plain functions out.
@@ -11,3 +12,4 @@ import type { LooseSchema, ThemeConfig, ThemedSchema, ThemedStyles } from './typ
  * prop is loosely typed (`LooseSchema`).
  */
 export declare function createThemedStyles<S extends ThemedSchema = LooseSchema>(config: ThemeConfig, scheme: ColorScheme): ThemedStyles<S>;
+//#endregion

package/dist/create-themed-styles.mjs

@@ -0,0 +1,31 @@
+import { resolveTextTree } from "./text-tree.mjs";
+import { createStyleResolver } from "./resolvers/style-resolver.mjs";
+import { createTextVariants } from "./text-variants.mjs";
+//#region src/create-themed-styles.ts
+/**
+* Builds `{ view, text, image }` from a fully resolved `ThemeConfig` for one
+* fixed color scheme. No React here — plain data in, plain functions out.
+* `createThemed` calls this once per scheme and hands the result out through
+* `useThemed()`, so components re-render (and pick up new colors) when the
+* scheme changes.
+*
+* `S` comes from the generated `themed.gen.ts`; without it every token
+* prop is loosely typed (`LooseSchema`).
+*/
+function createThemedStyles(config, scheme) {
+	const resolveStyle = createStyleResolver(config, scheme);
+	const text = (input = {}) => resolveStyle(input);
+	const variants = createTextVariants(resolveTextTree(config.semanticTokens?.text, scheme), (input) => resolveStyle(input));
+	for (const [role, sizes] of Object.entries(variants)) Object.defineProperty(text, role, {
+		value: sizes,
+		enumerable: true,
+		configurable: true
+	});
+	return {
+		view: resolveStyle,
+		image: resolveStyle,
+		text
+	};
+}
+//#endregion
+export { createThemedStyles };

package/dist/create-themed.cjs

@@ -0,0 +1,93 @@
+const require_text_tree = require("./text-tree.cjs");
+const require_color_mode_store = require("./color-mode-store.cjs");
+const require_create_themed_styles = require("./create-themed-styles.cjs");
+const require_color_resolver = require("./resolvers/color-resolver.cjs");
+let react = require("react");
+let react_native = require("react-native");
+//#region src/create-themed.ts
+const DEFAULT_STORAGE_KEY = "react-native-rethemed.color-mode";
+/** RN 0.86 reports `'unspecified'` (and may report `null`); the theme is binary. */
+function toColorScheme(value) {
+	return value === "dark" ? "dark" : "light";
+}
+/** `Appearance.setColorScheme` is RN 0.73+ only and absent on react-native-web. */
+function syncNativeAppearance(mode) {
+	if (typeof react_native.Appearance?.setColorScheme !== "function") return;
+	react_native.Appearance.setColorScheme(mode === "system" ? "unspecified" : mode);
+}
+const warnControlledSetMode = () => {
+	if (__DEV__) console.warn("[react-native-rethemed] setMode() was called while <ThemedProvider> is controlled via the `colorScheme` prop. Update that prop instead.");
+};
+/**
+* Binds a theme config to React: returns a provider plus hooks that read
+* the current scheme from it. Everything (store, contexts, precomputed
+* themes) is scoped to this call, so several instances can coexist.
+*
+* `S` is supplied by the generated `themed.gen.ts`
+* (`@react-native-rethemed/cli codegen`); without it tokens are loosely typed.
+*/
+function createThemed(config) {
+	const build = (colorScheme) => ({
+		themed: require_create_themed_styles.createThemedStyles(config, colorScheme),
+		tokens: config.tokens ?? {},
+		semanticTokens: {
+			colors: require_color_resolver.resolveSemanticColors(config, colorScheme),
+			text: require_text_tree.resolveTextTree(config.semanticTokens?.text, colorScheme)
+		},
+		colorScheme
+	});
+	const themes = {
+		light: build("light"),
+		dark: build("dark")
+	};
+	const store = require_color_mode_store.createColorModeStore();
+	const SchemeContext = (0, react.createContext)(null);
+	const ModeContext = (0, react.createContext)(null);
+	function ThemedProvider({ children, colorScheme, defaultColorMode = "system", storage, storageKey = DEFAULT_STORAGE_KEY }) {
+		const isControlled = colorScheme !== void 0;
+		store.init(defaultColorMode);
+		const storedMode = (0, react.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+		const systemScheme = toColorScheme((0, react_native.useColorScheme)());
+		(0, react.useEffect)(() => {
+			if (isControlled || !storage || !store.beginHydration()) return;
+			Promise.resolve().then(() => storage.getItem(storageKey)).then((saved) => store.hydrate(saved)).catch(() => {});
+		}, [
+			isControlled,
+			storage,
+			storageKey
+		]);
+		(0, react.useEffect)(() => {
+			if (!isControlled) syncNativeAppearance(storedMode);
+		}, [isControlled, storedMode]);
+		const setUncontrolledMode = (0, react.useCallback)((next) => {
+			syncNativeAppearance(next);
+			store.setMode(next);
+			if (storage) Promise.resolve().then(() => storage.setItem(storageKey, next)).catch(() => {});
+		}, [storage, storageKey]);
+		const scheme = isControlled ? colorScheme : storedMode === "system" ? systemScheme : storedMode;
+		const mode = isControlled ? colorScheme : storedMode;
+		const setMode = isControlled ? warnControlledSetMode : setUncontrolledMode;
+		const modeValue = (0, react.useMemo)(() => ({
+			mode,
+			setMode
+		}), [mode, setMode]);
+		return (0, react.createElement)(SchemeContext, { value: scheme }, (0, react.createElement)(ModeContext, { value: modeValue }, children));
+	}
+	function useThemed() {
+		const scheme = (0, react.useContext)(SchemeContext);
+		if (scheme === null) throw new Error("useThemed() must be used within a <ThemedProvider> returned by the same createThemed() call.");
+		return themes[scheme];
+	}
+	function useColorMode() {
+		const value = (0, react.useContext)(ModeContext);
+		if (value === null) throw new Error("useColorMode() must be used within a <ThemedProvider> returned by the same createThemed() call.");
+		return value;
+	}
+	return {
+		ThemedProvider,
+		useThemed,
+		useColorMode
+	};
+}
+//#endregion
+exports.createThemed = createThemed;

package/dist/create-themed.d.cts

@@ -0,0 +1,48 @@
+import { LooseSchema, ThemeConfig, ThemedSchema, ThemedStyles } from "./types.cjs";
+import { ColorScheme } from "./resolvers/color-resolver.cjs";
+import { ColorMode, ColorModeStorage } from "./color-mode-store.cjs";
+import { ReactNode } from "react";
+//#region src/create-themed.d.ts
+export type ThemedProviderProps = {
+  children?: ReactNode;
+  /**
+   * Controlled mode: the app owns the scheme and this value is used as-is.
+   * When set, `defaultColorMode`/`storage`/`storageKey` are ignored.
+   */
+  colorScheme?: ColorScheme;
+  /** Uncontrolled initial mode. Only read the first time the store is used. */
+  defaultColorMode?: ColorMode;
+  /** Uncontrolled persistence, e.g. `expo-secure-store` or `AsyncStorage`. */
+  storage?: ColorModeStorage;
+  storageKey?: string;
+};
+export type UseThemedResult<S extends ThemedSchema = LooseSchema> = {
+  themed: ThemedStyles<S>;
+  /** Primitive, scheme-independent tokens exactly as in the config. */
+  tokens: S['tokens'];
+  /**
+   * Semantic tokens with colors (including text preset colors) resolved for
+   * the current scheme.
+   */
+  semanticTokens: S['semanticTokens'];
+  colorScheme: ColorScheme;
+};
+export type UseColorModeResult = {
+  mode: ColorMode;
+  setMode: (mode: ColorMode) => void;
+};
+/**
+ * Binds a theme config to React: returns a provider plus hooks that read
+ * the current scheme from it. Everything (store, contexts, precomputed
+ * themes) is scoped to this call, so several instances can coexist.
+ *
+ * `S` is supplied by the generated `themed.gen.ts`
+ * (`@react-native-rethemed/cli codegen`); without it tokens are loosely typed.
+ */
+export declare function createThemed<S extends ThemedSchema = LooseSchema>(config: ThemeConfig): {
+  ThemedProvider: ({ children, colorScheme, defaultColorMode, storage, storageKey }: ThemedProviderProps) => import("react").FunctionComponentElement<import("react").ProviderProps<ColorScheme | null>>;
+  useThemed: () => UseThemedResult<S>;
+  useColorMode: () => UseColorModeResult;
+};
+//#endregion
+export type { ColorMode, ColorModeStorage, ColorScheme };

package/dist/create-themed.d.mts

@@ -0,0 +1,48 @@
+import { LooseSchema, ThemeConfig, ThemedSchema, ThemedStyles } from "./types.mjs";
+import { ColorScheme } from "./resolvers/color-resolver.mjs";
+import { ColorMode, ColorModeStorage } from "./color-mode-store.mjs";
+import { ReactNode } from "react";
+//#region src/create-themed.d.ts
+export type ThemedProviderProps = {
+  children?: ReactNode;
+  /**
+   * Controlled mode: the app owns the scheme and this value is used as-is.
+   * When set, `defaultColorMode`/`storage`/`storageKey` are ignored.
+   */
+  colorScheme?: ColorScheme;
+  /** Uncontrolled initial mode. Only read the first time the store is used. */
+  defaultColorMode?: ColorMode;
+  /** Uncontrolled persistence, e.g. `expo-secure-store` or `AsyncStorage`. */
+  storage?: ColorModeStorage;
+  storageKey?: string;
+};
+export type UseThemedResult<S extends ThemedSchema = LooseSchema> = {
+  themed: ThemedStyles<S>;
+  /** Primitive, scheme-independent tokens exactly as in the config. */
+  tokens: S['tokens'];
+  /**
+   * Semantic tokens with colors (including text preset colors) resolved for
+   * the current scheme.
+   */
+  semanticTokens: S['semanticTokens'];
+  colorScheme: ColorScheme;
+};
+export type UseColorModeResult = {
+  mode: ColorMode;
+  setMode: (mode: ColorMode) => void;
+};
+/**
+ * Binds a theme config to React: returns a provider plus hooks that read
+ * the current scheme from it. Everything (store, contexts, precomputed
+ * themes) is scoped to this call, so several instances can coexist.
+ *
+ * `S` is supplied by the generated `themed.gen.ts`
+ * (`@react-native-rethemed/cli codegen`); without it tokens are loosely typed.
+ */
+export declare function createThemed<S extends ThemedSchema = LooseSchema>(config: ThemeConfig): {
+  ThemedProvider: ({ children, colorScheme, defaultColorMode, storage, storageKey }: ThemedProviderProps) => import("react").FunctionComponentElement<import("react").ProviderProps<ColorScheme | null>>;
+  useThemed: () => UseThemedResult<S>;
+  useColorMode: () => UseColorModeResult;
+};
+//#endregion
+export type { ColorMode, ColorModeStorage, ColorScheme };

package/dist/create-themed.mjs

@@ -0,0 +1,93 @@
+import { resolveTextTree } from "./text-tree.mjs";
+import { createColorModeStore } from "./color-mode-store.mjs";
+import { createThemedStyles } from "./create-themed-styles.mjs";
+import { resolveSemanticColors } from "./resolvers/color-resolver.mjs";
+import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useSyncExternalStore } from "react";
+import { Appearance, useColorScheme } from "react-native";
+//#region src/create-themed.ts
+const DEFAULT_STORAGE_KEY = "react-native-rethemed.color-mode";
+/** RN 0.86 reports `'unspecified'` (and may report `null`); the theme is binary. */
+function toColorScheme(value) {
+	return value === "dark" ? "dark" : "light";
+}
+/** `Appearance.setColorScheme` is RN 0.73+ only and absent on react-native-web. */
+function syncNativeAppearance(mode) {
+	if (typeof Appearance?.setColorScheme !== "function") return;
+	Appearance.setColorScheme(mode === "system" ? "unspecified" : mode);
+}
+const warnControlledSetMode = () => {
+	if (__DEV__) console.warn("[react-native-rethemed] setMode() was called while <ThemedProvider> is controlled via the `colorScheme` prop. Update that prop instead.");
+};
+/**
+* Binds a theme config to React: returns a provider plus hooks that read
+* the current scheme from it. Everything (store, contexts, precomputed
+* themes) is scoped to this call, so several instances can coexist.
+*
+* `S` is supplied by the generated `themed.gen.ts`
+* (`@react-native-rethemed/cli codegen`); without it tokens are loosely typed.
+*/
+function createThemed(config) {
+	const build = (colorScheme) => ({
+		themed: createThemedStyles(config, colorScheme),
+		tokens: config.tokens ?? {},
+		semanticTokens: {
+			colors: resolveSemanticColors(config, colorScheme),
+			text: resolveTextTree(config.semanticTokens?.text, colorScheme)
+		},
+		colorScheme
+	});
+	const themes = {
+		light: build("light"),
+		dark: build("dark")
+	};
+	const store = createColorModeStore();
+	const SchemeContext = createContext(null);
+	const ModeContext = createContext(null);
+	function ThemedProvider({ children, colorScheme, defaultColorMode = "system", storage, storageKey = DEFAULT_STORAGE_KEY }) {
+		const isControlled = colorScheme !== void 0;
+		store.init(defaultColorMode);
+		const storedMode = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+		const systemScheme = toColorScheme(useColorScheme());
+		useEffect(() => {
+			if (isControlled || !storage || !store.beginHydration()) return;
+			Promise.resolve().then(() => storage.getItem(storageKey)).then((saved) => store.hydrate(saved)).catch(() => {});
+		}, [
+			isControlled,
+			storage,
+			storageKey
+		]);
+		useEffect(() => {
+			if (!isControlled) syncNativeAppearance(storedMode);
+		}, [isControlled, storedMode]);
+		const setUncontrolledMode = useCallback((next) => {
+			syncNativeAppearance(next);
+			store.setMode(next);
+			if (storage) Promise.resolve().then(() => storage.setItem(storageKey, next)).catch(() => {});
+		}, [storage, storageKey]);
+		const scheme = isControlled ? colorScheme : storedMode === "system" ? systemScheme : storedMode;
+		const mode = isControlled ? colorScheme : storedMode;
+		const setMode = isControlled ? warnControlledSetMode : setUncontrolledMode;
+		const modeValue = useMemo(() => ({
+			mode,
+			setMode
+		}), [mode, setMode]);
+		return createElement(SchemeContext, { value: scheme }, createElement(ModeContext, { value: modeValue }, children));
+	}
+	function useThemed() {
+		const scheme = useContext(SchemeContext);
+		if (scheme === null) throw new Error("useThemed() must be used within a <ThemedProvider> returned by the same createThemed() call.");
+		return themes[scheme];
+	}
+	function useColorMode() {
+		const value = useContext(ModeContext);
+		if (value === null) throw new Error("useColorMode() must be used within a <ThemedProvider> returned by the same createThemed() call.");
+		return value;
+	}
+	return {
+		ThemedProvider,
+		useThemed,
+		useColorMode
+	};
+}
+//#endregion
+export { createThemed };

package/dist/define-theme.cjs

@@ -0,0 +1,15 @@
+//#region src/define-theme.ts
+/**
+* Identity function used purely as a type gate: checks `config` against
+* `ThemeConfig` (object literals get the usual excess-property check, so a
+* misspelled `radius` or `semanticToken` fails to compile).
+*
+* The return type is deliberately the plain `ThemeConfig` — exact token
+* names come from the generated `themed.gen.ts`, not from literal-type
+* inference here.
+*/
+function defineTheme(config) {
+	return config;
+}
+//#endregion
+exports.defineTheme = defineTheme;

package/dist/{esm/define-theme.d.ts → define-theme.d.cts}

@@ -1,4 +1,5 @@
-import type { ThemeConfig } from './types.js';
+import { ThemeConfig } from "./types.cjs";
+//#region src/define-theme.d.ts
 /**
  * Identity function used purely as a type gate: checks `config` against
  * `ThemeConfig` (object literals get the usual excess-property check, so a
@@ -9,3 +10,4 @@ import type { ThemeConfig } from './types.js';
  * inference here.
  */
 export declare function defineTheme(config: ThemeConfig): ThemeConfig;
+//#endregion

package/dist/{cjs/define-theme.d.ts → define-theme.d.mts}

@@ -1,4 +1,5 @@
-import type { ThemeConfig } from './types';
+import { ThemeConfig } from "./types.mjs";
+//#region src/define-theme.d.ts
 /**
  * Identity function used purely as a type gate: checks `config` against
  * `ThemeConfig` (object literals get the usual excess-property check, so a
@@ -9,3 +10,4 @@ import type { ThemeConfig } from './types';
  * inference here.
  */
 export declare function defineTheme(config: ThemeConfig): ThemeConfig;
+//#endregion

package/dist/define-theme.mjs

@@ -0,0 +1,15 @@
+//#region src/define-theme.ts
+/**
+* Identity function used purely as a type gate: checks `config` against
+* `ThemeConfig` (object literals get the usual excess-property check, so a
+* misspelled `radius` or `semanticToken` fails to compile).
+*
+* The return type is deliberately the plain `ThemeConfig` — exact token
+* names come from the generated `themed.gen.ts`, not from literal-type
+* inference here.
+*/
+function defineTheme(config) {
+	return config;
+}
+//#endregion
+export { defineTheme };