@react-native-rethemed/core 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 manato
+
+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

@@ -1,3 +1,88 @@
-# Temporary Holding Version
+# @react-native-rethemed/core
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![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
+
+```sh
+npm install @react-native-rethemed/core
+npm install --save-dev @react-native-rethemed/cli
+```
+
+`react` and `react-native` are peer dependencies.
+
+## Usage
+
+Define a theme:
+
+```ts
+// src/theme/theme.ts
+import { defineTheme } from '@react-native-rethemed/core';
+
+export const themeConfig = defineTheme({
+  tokens: {
+    radii: { md: 6, full: 9999 },
+    spacing: { 1: 4, 2: 8, 4: 16 },
+    fontSizes: { sm: 14, md: 16 },
+    fontWeights: { normal: '400', semibold: '600' },
+    lineHeights: { moderate: 1.5 },
+  },
+  semanticTokens: {
+    colors: {
+      bg: { default: { light: '#ffffff', dark: '#111111' } },
+      fg: { default: { light: '#111111', dark: '#fafafa' } },
+    },
+    text: {
+      title: { fontSize: 'md', lineHeight: 'moderate', fontWeight: 'semibold' },
+    },
+  },
+  defaults: { fontSize: 'md' },
+});
+```
+
+Generate the typed bindings with [`@react-native-rethemed/cli`](https://github.com/manakuro/react-native-rethemed/tree/main/packages/react-native-rethemed/cli):
+
+```sh
+npx @react-native-rethemed/cli codegen src/theme/theme.ts --docs docs/themed.md
+```
+
+Then wrap the app and style with tokens:
+
+```tsx
+import { Text, View } from 'react-native';
+import { ThemedProvider, useThemed } from './theme/themed.gen';
+
+export default function App() {
+  return (
+    <ThemedProvider>
+      <Card />
+    </ThemedProvider>
+  );
+}
+
+function Card() {
+  const { themed } = useThemed();
+  return (
+    <View style={themed.view({ backgroundColor: 'bg.default', padding: 4, borderRadius: 'md' })}>
+      <Text style={themed.text.title({ color: 'fg.default' })}>Hello</Text>
+    </View>
+  );
+}
+```
+
+Start from a design system with a token package (`@react-native-rethemed/chakra-ui-tokens`, `material-ui-tokens`, `material-design-tokens`, `panda-css-tokens`, `tailwind-css-tokens`, `shadcn-ui-tokens`, `radix-ui-tokens`) and `extendTheme`.
+
+## Entry points
+
+| Import | Contents |
+| --- | --- |
+| `@react-native-rethemed/core` | Everything: `defineTheme`, `extendTheme`, `createThemed`, `createThemedStyles` and the types |
+| `@react-native-rethemed/core/config` | The React / React Native-free part (`defineTheme`, `extendTheme`, token helpers), for theme files and tooling |
+
+See the [main README](https://github.com/manakuro/react-native-rethemed#readme) for color mode, `extendTheme` merge rules and the full API.
+
+## License
+
+MIT

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/create-themed-styles.d.cts

@@ -0,0 +1,15 @@
+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.
+ * `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`).
+ */
+export declare function createThemedStyles<S extends ThemedSchema = LooseSchema>(config: ThemeConfig, scheme: ColorScheme): ThemedStyles<S>;
+//#endregion

package/dist/create-themed-styles.d.mts

@@ -0,0 +1,15 @@
+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.
+ * `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`).
+ */
+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 };