@pantoken/react-native 0.1.0

package/README.md

@@ -0,0 +1,37 @@
+# @pantoken/react-native
+
+Instructure design tokens as React Native `StyleSheet`-friendly objects. React Native has no CSS
+variables, so tokens are fully resolved: colors are hex strings, dimensions are numbers (dp), and
+icons are excluded.
+
+## Install
+
+```sh
+npm i @pantoken/react-native
+```
+
+Also available as `pantoken/reactNative`.
+
+## Usage
+
+```ts
+import { useColorScheme } from "react-native";
+import { tokensForScheme } from "@pantoken/react-native";
+
+const t = tokensForScheme(useColorScheme());
+const styles = { card: { backgroundColor: t.colorBackgroundBase, padding: t.spacingSpaceMd } };
+```
+
+## API
+
+- **`tokensForScheme(scheme): Record<string, RNTokenValue>`** — pick the token object for a color scheme. Pair with React Native's `useColorScheme`; anything other than `"dark"` returns the light set.
+- **`light`, `dark`** — the resolved token objects, exported directly.
+- **`RNTokenValue`** — a token value: a color/string or a numeric dimension.
+
+## Related
+
+- Reads from `@pantoken/tokens` and resolves through `@pantoken/utils`.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,22 @@
+//#region src/index.d.ts
+/** A React Native token value: a colour/string or a numeric dimension. */
+type RNTokenValue = string | number;
+/** The `light`-mode token object. */
+declare const light: Record<string, RNTokenValue>;
+/** The `dark`-mode token object. */
+declare const dark: Record<string, RNTokenValue>;
+/**
+ * Select the token object for a colour scheme (pair with RN's `useColorScheme`).
+ *
+ * @example
+ * ```tsx
+ * import { useColorScheme } from "react-native";
+ * import { tokensForScheme } from "@pantoken/react-native";
+ *
+ * const t = tokensForScheme(useColorScheme());
+ * const styles = { card: { backgroundColor: t.colorBackgroundBase, padding: t.spacingSpaceMd } };
+ * ```
+ */
+declare function tokensForScheme(scheme: "light" | "dark" | null | undefined): Record<string, RNTokenValue>;
+//#endregion
+export { RNTokenValue, dark, light, tokensForScheme };

package/dist/index.mjs

@@ -0,0 +1,43 @@
+import { tokens } from "@pantoken/tokens";
+import { camelCase, resolveTokens } from "@pantoken/utils";
+//#region src/index.ts
+/**
+* `@pantoken/react-native` — Instructure design tokens as React Native `StyleSheet`-friendly
+* objects. React Native has no CSS variables, so tokens are fully resolved to concrete values:
+* colours stay hex strings, dimensions become numbers (dp), and icons are excluded.
+*
+* @module
+* @experimental
+*/
+function build(mode) {
+	const resolved = resolveTokens(tokens, { mode });
+	const out = {};
+	for (const token of tokens) {
+		if (token.meta?.kind === "icon") continue;
+		const value = (resolved.get(token.name) ?? token.value).trim();
+		const dim = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(value);
+		out[camelCase(token.name.replace(/^--instui-/, ""))] = dim ? Number(dim[1]) * (dim[2] === "rem" || dim[2] === "em" ? 16 : 1) : value;
+	}
+	return out;
+}
+/** The `light`-mode token object. */
+const light = build("light");
+/** The `dark`-mode token object. */
+const dark = build("dark");
+/**
+* Select the token object for a colour scheme (pair with RN's `useColorScheme`).
+*
+* @example
+* ```tsx
+* import { useColorScheme } from "react-native";
+* import { tokensForScheme } from "@pantoken/react-native";
+*
+* const t = tokensForScheme(useColorScheme());
+* const styles = { card: { backgroundColor: t.colorBackgroundBase, padding: t.spacingSpaceMd } };
+* ```
+*/
+function tokensForScheme(scheme) {
+	return scheme === "dark" ? dark : light;
+}
+//#endregion
+export { dark, light, tokensForScheme };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@pantoken/react-native",
+  "version": "0.1.0",
+  "description": "Instructure design tokens as React Native StyleSheet-friendly objects (colors as hex, dimensions as numbers).",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pantoken/tokens": "0.1.0",
+    "@pantoken/utils": "0.1.0",
+    "@pantoken/model": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plus": "0.2.4"
+  },
+  "pantoken": {
+    "key": "reactNative",
+    "kind": "subpath"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}