@expo-forge/forge-ui 0.0.47

package/bin/forge.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+// ForgeUI CLI bootstrap
+// Resolves the correct platform binary and runs it.
+
+"use strict";
+
+const { spawnSync } = require("child_process");
+const path = require("path");
+const fs = require("fs");
+
+const binaryPath = getBinaryPath();
+
+if (!binaryPath) {
+  console.error(
+    "[forge] Could not find the forge binary.\n" +
+      "  Run: npm install @expo-forge/forge-ui  (re-runs postinstall)\n" +
+      "  Or download manually from: https://github.com/semsakadanupol/forge-ui/releases",
+  );
+  process.exit(1);
+}
+
+const result = spawnSync(binaryPath, process.argv.slice(2), {
+  stdio: "inherit",
+});
+process.exit(result.status ?? 1);
+
+// ---------------------------------------------------------------------------
+
+function getBinaryPath() {
+  const binDir = path.join(__dirname, "native");
+  const name = platformBinaryName();
+  if (!name) return null;
+
+  const localBin = path.join(binDir, name);
+  if (fs.existsSync(localBin)) return localBin;
+
+  return null;
+}
+
+function platformBinaryName() {
+  const p = process.platform;
+  const a = process.arch;
+
+  if (p === "win32" && a === "x64") return "forge-win-x64.exe";
+  if (p === "darwin" && a === "x64") return "forge-mac-x64";
+  if (p === "darwin" && a === "arm64") return "forge-mac-arm64";
+  if (p === "linux" && a === "x64") return "forge-linux-x64";
+  if (p === "linux" && a === "arm64") return "forge-linux-arm64";
+
+  console.error(`[forge] Unsupported platform: ${p}/${a}`);
+  return null;
+}

package/bin/install.js

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+// Runs after `npm install @expo-forge/forge-ui`.
+// Downloads the correct platform binary into bin/native/.
+
+"use strict";
+
+const https = require("https");
+const http = require("http");
+const fs = require("fs");
+const path = require("path");
+const { execFileSync } = require("child_process");
+
+const VERSION = require("../package.json").version;
+const BASE_URL = `https://github.com/semsakadanupol/forge-ui/releases/download/v${VERSION}`;
+
+const PLATFORM_MAP = {
+  "win32-x64": "forge-win-x64.exe",
+  "darwin-x64": "forge-mac-x64",
+  "darwin-arm64": "forge-mac-arm64",
+  "linux-x64": "forge-linux-x64",
+  "linux-arm64": "forge-linux-arm64",
+};
+
+const key = `${process.platform}-${process.arch}`;
+const binName = PLATFORM_MAP[key];
+
+if (!binName) {
+  console.warn(
+    `[forge] No pre-built binary for ${key}. Build from source: https://github.com/semsakadanupol/forge-ui`,
+  );
+  process.exit(0);
+}
+
+const outDir = path.join(__dirname, "native");
+const outPath = path.join(outDir, binName);
+
+if (fs.existsSync(outPath)) {
+  console.log("[forge] Binary already installed.");
+  process.exit(0);
+}
+
+fs.mkdirSync(outDir, { recursive: true });
+
+const url = `${BASE_URL}/${binName}`;
+console.log(`[forge] Downloading ${binName} from GitHub releases…`);
+
+downloadFile(url, outPath)
+  .then(() => {
+    if (process.platform !== "win32") {
+      fs.chmodSync(outPath, 0o755);
+    }
+    console.log(`[forge] Installed → bin/native/${binName}`);
+  })
+  .catch((err) => {
+    console.error(`[forge] Download failed: ${err.message}`);
+    console.error("  Build from source: cargo build --release");
+    fs.rmSync(outPath, { force: true });
+    process.exit(0); // Don't block npm install — user can build manually
+  });
+
+// ---------------------------------------------------------------------------
+
+function downloadFile(url, dest) {
+  return new Promise((resolve, reject) => {
+    const file = fs.createWriteStream(dest);
+    const get = url.startsWith("https") ? https.get : http.get;
+
+    function request(currentUrl) {
+      get(currentUrl, (res) => {
+        if (res.statusCode === 301 || res.statusCode === 302) {
+          // Follow redirect
+          request(res.headers.location);
+          return;
+        }
+        if (res.statusCode !== 200) {
+          reject(new Error(`HTTP ${res.statusCode} for ${currentUrl}`));
+          return;
+        }
+        res.pipe(file);
+        file.on("finish", () => file.close(resolve));
+        file.on("error", reject);
+      }).on("error", reject);
+    }
+
+    request(url);
+  });
+}

package/bin/prepare-publish.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+"use strict";
+
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+const { spawnSync } = require("child_process");
+
+const rootDir = path.resolve(__dirname, "..");
+const outDir = path.join(__dirname, "native");
+
+const platformMap = {
+  "win32-x64": "forge-win-x64.exe",
+  "darwin-x64": "forge-mac-x64",
+  "darwin-arm64": "forge-mac-arm64",
+  "linux-x64": "forge-linux-x64",
+  "linux-arm64": "forge-linux-arm64",
+};
+
+const key = `${process.platform}-${process.arch}`;
+const packagedName = platformMap[key];
+
+function resolveCargoCommand() {
+  if (process.env.CARGO) {
+    return process.env.CARGO;
+  }
+
+  const homeCargo = path.join(
+    os.homedir(),
+    ".cargo",
+    "bin",
+    process.platform === "win32" ? "cargo.exe" : "cargo",
+  );
+
+  if (fs.existsSync(homeCargo)) {
+    return homeCargo;
+  }
+
+  return "cargo";
+}
+
+if (!packagedName) {
+  console.error(`[forge] Unsupported publish platform: ${key}`);
+  process.exit(1);
+}
+
+const cargoResult = spawnSync(resolveCargoCommand(), ["build", "--release"], {
+  cwd: rootDir,
+  stdio: "inherit",
+  shell: process.platform === "win32",
+});
+
+if (cargoResult.status !== 0) {
+  process.exit(cargoResult.status || 1);
+}
+
+const builtBinary = path.join(
+  rootDir,
+  "target",
+  "release",
+  process.platform === "win32" ? "forge.exe" : "forge",
+);
+
+if (!fs.existsSync(builtBinary)) {
+  console.error(`[forge] Built binary not found: ${builtBinary}`);
+  process.exit(1);
+}
+
+fs.mkdirSync(outDir, { recursive: true });
+const packagedBinary = path.join(outDir, packagedName);
+fs.copyFileSync(builtBinary, packagedBinary);
+
+if (process.platform !== "win32") {
+  fs.chmodSync(packagedBinary, 0o755);
+}
+
+console.log(`[forge] Bundled binary updated → bin/native/${packagedName}`);

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@expo-forge/forge-ui",
+  "version": "0.0.47",
+  "description": "ForgeUI — utility-first CSS/React Native style engine",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/semsakadanupol/forge-ui.git"
+  },
+  "homepage": "https://github.com/semsakadanupol/forge-ui#readme",
+  "bugs": {
+    "url": "https://github.com/semsakadanupol/forge-ui/issues"
+  },
+  "keywords": [
+    "forge-ui",
+    "css",
+    "utility-first",
+    "react-native",
+    "expo",
+    "babel-plugin"
+  ],
+  "types": "types/index.d.ts",
+  "main": "theme.js",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./theme.js"
+    },
+    "./theme": {
+      "types": "./types/theme.d.ts",
+      "default": "./theme.js"
+    },
+    "./babel-plugin": "./babel-plugin.js",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "theme": [
+        "types/theme.d.ts"
+      ],
+      "*": [
+        "types/index.d.ts"
+      ]
+    }
+  },
+  "bin": {
+    "forge": "bin/forge.js"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.72"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "postinstall": "node bin/install.js",
+    "prepack": "node bin/prepare-publish.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "bin/",
+    "babel-plugin.js",
+    "theme.js",
+    "types/"
+  ],
+  "engines": {
+    "node": ">=18"
+  }
+}

package/theme.js

@@ -0,0 +1,379 @@
+"use strict";
+
+const React = require("react");
+const { createContext, useContext, useState, useEffect } = React;
+
+let Appearance, useColorScheme, AsyncStorage;
+let isReactNative = false;
+
+try {
+  const RN = require("react-native");
+  Appearance = RN.Appearance;
+  useColorScheme = RN.useColorScheme;
+  isReactNative = !!RN;
+} catch (e) {
+  // Non-native environment fallback
+}
+
+try {
+  AsyncStorage = require("@react-native-async-storage/async-storage").default;
+} catch (e) {
+  // AsyncStorage not available
+}
+
+const isBrowserDom =
+  typeof window !== "undefined" && typeof document !== "undefined";
+
+const hasMatchMedia =
+  typeof window !== "undefined" && typeof window.matchMedia === "function";
+
+const THEME_STORAGE_KEY = "FORGE_THEME_PREFERENCE";
+
+function setGlobalThemeOverride(value) {
+  if (typeof globalThis !== "undefined") {
+    if (value === "light" || value === "dark") {
+      globalThis.__forgeThemeOverride = value;
+    } else {
+      delete globalThis.__forgeThemeOverride;
+    }
+  }
+}
+
+function isLocalStorageAvailable() {
+  try {
+    if (!isBrowserDom) return false;
+    let storage;
+    try {
+      storage = window["localStorage"];
+    } catch (e) {
+      return false;
+    }
+    if (!storage) return false;
+    const testKey = "__forge_test__";
+    try {
+      storage.setItem(testKey, "1");
+      storage.removeItem(testKey);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+async function getSavedTheme() {
+  try {
+    if (isReactNative && AsyncStorage) {
+      const saved = await AsyncStorage.getItem(THEME_STORAGE_KEY);
+      if (saved === "light" || saved === "dark") {
+        return saved;
+      }
+    } else if (isLocalStorageAvailable()) {
+      let storage;
+      try {
+        storage = window["localStorage"];
+      } catch (e) {
+        storage = null;
+      }
+      if (storage) {
+        const saved = storage.getItem(THEME_STORAGE_KEY);
+        if (saved === "light" || saved === "dark") {
+          return saved;
+        }
+      }
+    }
+  } catch (e) {
+    // Fallback if storage fails
+  }
+  return null;
+}
+
+async function saveTheme(themeValue) {
+  try {
+    if (isReactNative && AsyncStorage) {
+      if (themeValue === "light" || themeValue === "dark") {
+        await AsyncStorage.setItem(THEME_STORAGE_KEY, themeValue);
+      } else {
+        await AsyncStorage.removeItem(THEME_STORAGE_KEY);
+      }
+    } else if (isLocalStorageAvailable()) {
+      let storage;
+      try {
+        storage = window["localStorage"];
+      } catch (e) {
+        storage = null;
+      }
+      if (storage) {
+        if (themeValue === "light" || themeValue === "dark") {
+          storage.setItem(THEME_STORAGE_KEY, themeValue);
+        } else {
+          storage.removeItem(THEME_STORAGE_KEY);
+        }
+      }
+    }
+  } catch (e) {
+    // Fallback if storage fails
+  }
+}
+
+function getNativeSystemTheme() {
+  if (
+    isReactNative &&
+    Appearance &&
+    typeof Appearance.getColorScheme === "function"
+  ) {
+    return Appearance.getColorScheme() || "light";
+  }
+  return null;
+}
+
+function getWebSystemTheme() {
+  if (hasMatchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  return "light";
+}
+
+// Get initial theme based on environment
+function getInitialTheme() {
+  const nativeTheme = getNativeSystemTheme();
+  if (nativeTheme) {
+    return nativeTheme;
+  }
+  if (isBrowserDom) {
+    return getWebSystemTheme();
+  }
+  return "light";
+}
+
+const ThemeCtx = createContext({
+  scheme: getInitialTheme(),
+  toggleTheme: () => {},
+});
+
+/**
+ * Wrap your app with <ThemeProvider> so dark: classes re-render
+ * automatically when the device color scheme changes.
+ *
+ * You can also pass a manual `theme` prop to force light/dark:
+ *   <ThemeProvider theme="dark">
+ */
+function ThemeProvider({ children, theme }) {
+  const rnSystemScheme =
+    typeof useColorScheme === "function" ? useColorScheme() : null;
+  const nativeSystemScheme = getNativeSystemTheme();
+  const webSystemScheme =
+    !rnSystemScheme && isBrowserDom ? getWebSystemTheme() : null;
+  const systemScheme =
+    rnSystemScheme || nativeSystemScheme || webSystemScheme || "light";
+
+  const [scheme, setScheme] = useState(theme || systemScheme);
+  const [manualOverride, setManualOverride] = useState(!!theme);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  // Load saved theme preference on mount
+  useEffect(() => {
+    const loadSavedTheme = async () => {
+      if (!theme) {
+        const saved = await getSavedTheme();
+        if (saved) {
+          setScheme(saved);
+          setManualOverride(true);
+          setGlobalThemeOverride(saved);
+        }
+      }
+      setIsHydrated(true);
+    };
+    loadSavedTheme();
+  }, []);
+
+  const toggleTheme = () => {
+    const next = scheme === "dark" ? "light" : "dark";
+    setScheme(next);
+    setManualOverride(true);
+    setGlobalThemeOverride(next);
+    // Save theme preference
+    saveTheme(next);
+  };
+
+  // Keep web DOM class in sync with theme.
+  useEffect(() => {
+    if (isBrowserDom) {
+      document.documentElement.classList.toggle("dark", scheme === "dark");
+    }
+  }, [scheme]);
+
+  // Manual theme override via prop.
+  useEffect(() => {
+    if (theme) {
+      setScheme(theme);
+      setManualOverride(true);
+      setGlobalThemeOverride(theme);
+    } else {
+      setManualOverride(false);
+      setGlobalThemeOverride(null);
+    }
+  }, [theme]);
+
+  useEffect(() => {
+    if (!theme && !manualOverride && isHydrated) {
+      setScheme(systemScheme);
+    }
+  }, [theme, manualOverride, systemScheme, isHydrated]);
+
+  useEffect(() => {
+    if (manualOverride) {
+      return;
+    }
+
+    if (
+      isReactNative &&
+      Appearance &&
+      typeof Appearance.addChangeListener === "function"
+    ) {
+      const current = getNativeSystemTheme();
+      if (current) setScheme(current);
+
+      const sub = Appearance.addChangeListener((event) => {
+        const next =
+          (event && event.colorScheme) || getNativeSystemTheme() || "light";
+        setScheme(next);
+      });
+
+      return () => {
+        if (sub && typeof sub.remove === "function") {
+          sub.remove();
+        }
+      };
+    }
+
+    if (isBrowserDom && hasMatchMedia) {
+      // Web: listen to matchMedia changes
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      const handler = (e) => {
+        const newScheme = e.matches ? "dark" : "light";
+        setScheme(newScheme);
+      };
+
+      // New API
+      if (typeof mq.addEventListener === "function") {
+        mq.addEventListener("change", handler);
+        return () => mq.removeEventListener("change", handler);
+      }
+
+      // Safari fallback
+      if (typeof mq.addListener === "function") {
+        mq.addListener(handler);
+        return () => mq.removeListener(handler);
+      }
+    }
+  }, [manualOverride]);
+
+  const contextValue = {
+    scheme,
+    toggleTheme,
+  };
+
+  return React.createElement(
+    ThemeCtx.Provider,
+    { value: contextValue },
+    children,
+  );
+}
+
+/**
+ * Returns the current theme: "light" | "dark".
+ * Requires <ThemeProvider> to be in the tree for reactive updates.
+ */
+function useForgeTheme() {
+  const ctx = useContext(ThemeCtx);
+  return ctx.scheme;
+}
+
+/**
+ * Returns the current theme and a toggle function.
+ * Requires <ThemeProvider> to be in the tree for reactive updates.
+ */
+function useTheme() {
+  const ctx = useContext(ThemeCtx);
+  return {
+    theme: ctx.scheme,
+    toggleTheme: ctx.toggleTheme,
+  };
+}
+
+// ── Forge Color Palettes ──────────────────────────────────────────────────────
+
+const COLORS = {
+  slate: ["#f8fafc", "#f1f5f9", "#e2e8f0", "#cbd5e1", "#94a3b8", "#64748b", "#475569", "#334155", "#1e293b", "#0f172a", "#020617"],
+  gray: ["#f9fafb", "#f3f4f6", "#e5e7eb", "#d1d5db", "#9ca3af", "#6b7280", "#4b5563", "#374151", "#1f2937", "#111827", "#030712"],
+  zinc: ["#fafafa", "#f4f4f5", "#e4e4e7", "#d4d4d8", "#a1a1aa", "#71717a", "#52525b", "#3f3f46", "#27272a", "#18181b", "#09090b"],
+  neutral: ["#fafafa", "#f5f5f5", "#e5e5e5", "#d4d4d4", "#a3a3a3", "#737373", "#525252", "#404040", "#262626", "#171717", "#0a0a0a"],
+  stone: ["#fafaf9", "#f5f5f4", "#e7e5e4", "#d6d3d1", "#a8a29e", "#78716c", "#57534e", "#44403c", "#292524", "#1c1917", "#0c0a09"],
+  red: ["#fef2f2", "#fee2e2", "#fecaca", "#fca5a5", "#f87171", "#ef4444", "#dc2626", "#b91c1c", "#991b1b", "#7f1d1d", "#450a0a"],
+  orange: ["#fff7ed", "#ffedd5", "#fed7aa", "#fdba74", "#fb923c", "#f97316", "#ea580c", "#c2410c", "#9a3412", "#7c2d12", "#431407"],
+  amber: ["#fffbeb", "#fef3c7", "#fde68a", "#fcd34d", "#fbbf24", "#f59e0b", "#d97706", "#b45309", "#92400e", "#78350f", "#451a03"],
+  yellow: ["#fefce8", "#fef9c3", "#fef08a", "#fde047", "#facc15", "#eab308", "#ca8a04", "#a16207", "#854d0e", "#713f12", "#422006"],
+  lime: ["#f7fee7", "#ecfccb", "#d9f99d", "#bef264", "#a3e635", "#84cc16", "#65a30d", "#4d7c0f", "#3f6212", "#365314", "#1a2e05"],
+  green: ["#f0fdf4", "#dcfce7", "#bbf7d0", "#86efac", "#4ade80", "#22c55e", "#16a34a", "#15803d", "#166534", "#14532d", "#052e16"],
+  emerald: ["#ecfdf5", "#d1fae5", "#a7f3d0", "#6ee7b7", "#34d399", "#10b981", "#059669", "#047857", "#065f46", "#064e3b", "#022c22"],
+  teal: ["#f0fdfa", "#ccfbf1", "#99f6e4", "#5eead4", "#2dd4bf", "#14b8a6", "#0d9488", "#0f766e", "#115e59", "#134e4a", "#042f2e"],
+  cyan: ["#ecfeff", "#cffafe", "#a5f3fc", "#67e8f9", "#22d3ee", "#06b6d4", "#0891b2", "#0e7490", "#155e75", "#164e63", "#083344"],
+  sky: ["#f0f9ff", "#e0f2fe", "#bae6fd", "#7dd3fc", "#38bdf8", "#0ea5e9", "#0284c7", "#0369a1", "#075985", "#0c4a6e", "#082f49"],
+  blue: ["#eff6ff", "#dbeafe", "#bfdbfe", "#93c5fd", "#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8", "#1e40af", "#1e3a8a", "#172554"],
+  indigo: ["#eef2ff", "#e0e7ff", "#c7d2fe", "#a5b4fc", "#818cf8", "#6366f1", "#4f46e5", "#4338ca", "#3730a3", "#312e81", "#1e1b4b"],
+  violet: ["#f5f3ff", "#ede9fe", "#ddd6fe", "#c4b5fd", "#a78bfa", "#8b5cf6", "#7c3aed", "#6d28d9", "#5b21b6", "#4c1d95", "#2e1065"],
+  purple: ["#faf5ff", "#f3e8ff", "#e9d5ff", "#d8b4fe", "#c084fc", "#a855f7", "#9333ea", "#7e22ce", "#6b21a8", "#581c87", "#3b0764"],
+  fuchsia: ["#fdf4ff", "#fae8ff", "#f5d0fe", "#f0abfc", "#e879f9", "#d946ef", "#c026d3", "#a21caf", "#86198f", "#701a75", "#4a044e"],
+  pink: ["#fdf2f8", "#fce7f3", "#fbcfe8", "#f9a8d4", "#f472b6", "#ec4899", "#db2777", "#be185d", "#9d174d", "#831843", "#500724"],
+  rose: ["#fff1f2", "#ffe4e6", "#fecdd3", "#fda4af", "#fb7185", "#f43f5e", "#e11d48", "#be123c", "#9f1239", "#881337", "#4c0519"],
+  brown: ["#fdf8f6", "#f2e8e5", "#eaddd7", "#d2bab0", "#bfa094", "#a07856", "#7c5e45", "#5c4033", "#3e2723", "#2d1b10", "#1a0f07"],
+  tan: ["#fefce8", "#fef9c3", "#fef08a", "#f5deb3", "#deb887", "#c8a96e", "#b8934a", "#a07828", "#7c5c1e", "#5c4214", "#3b280a"],
+  sand: ["#fefdf5", "#fdf8e1", "#fbf0c0", "#f5e49c", "#edd57a", "#d4b858", "#b89a3e", "#9c7e28", "#7c6218", "#5c480e", "#3b2e06"],
+  chocolate: ["#fff8f5", "#feecd8", "#fdd5b0", "#f5b87a", "#e89244", "#c0622a", "#9a4520", "#7a3018", "#5a2012", "#3e140c", "#220a06"],
+  sienna: ["#fff5f2", "#fee8e0", "#fcc9b8", "#f8a080", "#f07050", "#c85a30", "#a04020", "#7a2c12", "#5c1e0e", "#3e1208", "#220a04"],
+  mint: ["#f0fff4", "#dcfce7", "#bbf7d0", "#86efac", "#4ade80", "#34d399", "#10b981", "#059669", "#047857", "#065f46", "#022c22"],
+  sage: ["#f6f8f4", "#e8efe4", "#cdddc8", "#adc8a4", "#87a87c", "#6b8c60", "#527048", "#3e5434", "#2c3c24", "#1c2818", "#0e140c"],
+  olive: ["#f8f8e8", "#eeeec8", "#d8d898", "#bcbc68", "#9c9c44", "#808028", "#686818", "#505010", "#3a3a08", "#282804", "#181802"],
+  moss: ["#f4f7f0", "#e0e8d8", "#c0d4b0", "#98b884", "#70985c", "#547c3e", "#3e6028", "#2c4818", "#1e320e", "#122008", "#081004"],
+  forest: ["#f0f8f0", "#d8ecd8", "#a8d4a8", "#78b878", "#4c9a4c", "#2d7a2d", "#1e5e1e", "#154615", "#0e300e", "#081e08", "#041004"],
+  navy: ["#f0f4ff", "#dce8ff", "#b8d0ff", "#84a8f8", "#5070e0", "#2a4ab8", "#1c348e", "#142264", "#0e1646", "#080e2e", "#040818"],
+  cobalt: ["#f0f4ff", "#dce4ff", "#b8cafe", "#84a4fc", "#4c78f0", "#1c50d8", "#1238a8", "#0c2680", "#081858", "#040e36", "#020618"],
+  royal: ["#f4f0ff", "#e4d8ff", "#c8b0ff", "#a884ff", "#8054f0", "#5c28d8", "#4018a8", "#2e0c80", "#1e085a", "#120438", "#08021a"],
+  cerulean: ["#f0f8ff", "#dceeff", "#b8daff", "#84bef8", "#4898ec", "#1c74cc", "#145aa8", "#0e4280", "#082e5a", "#041e38", "#020e1c"],
+  crimson: ["#fff0f2", "#ffd8de", "#ffaaba", "#f87892", "#e84068", "#c01848", "#940c34", "#6e0424", "#4e0218", "#30010e", "#180006"],
+  ruby: ["#fff1f3", "#ffdbdf", "#ffb0b8", "#f87880", "#e84050", "#c01830", "#94081e", "#6e0414", "#4e020c", "#300106", "#180003"],
+  wine: ["#fff0f4", "#ffd8e4", "#ffaac4", "#f878a0", "#e04070", "#b81848", "#8e0c30", "#680420", "#4a0214", "#2e010c", "#160004"],
+  burgundy: ["#fff0f2", "#ffd4da", "#ffa0ae", "#e86c82", "#c83850", "#9e1430", "#780a20", "#540414", "#3a020c", "#240108", "#100004"],
+  maroon: ["#fff0ef", "#ffd6d4", "#ffa8a4", "#e87870", "#c84040", "#9e1c1c", "#780c0c", "#540404", "#3a0202", "#240101", "#100000"],
+  gold: ["#fffdf0", "#fffadc", "#fff0a8", "#ffe068", "#f0c020", "#c89800", "#a07800", "#7c5c00", "#5c4400", "#3c2c00", "#201800"],
+  bronze: ["#fdf8f0", "#f8edd8", "#efd4a8", "#dfb070", "#c8883c", "#a86420", "#844c10", "#623808", "#462804", "#2e1a02", "#180e00"],
+  copper: ["#fdf6f0", "#fae8d8", "#f4c8a8", "#e8a070", "#d47038", "#b44c14", "#8c3808", "#682804", "#4a1c02", "#2e1001", "#180800"],
+  lavender: ["#faf6ff", "#f0e8ff", "#dfd0ff", "#c8acff", "#ae84f8", "#905ae0", "#7038c0", "#501c9c", "#380e78", "#240650", "#120230"],
+  lilac: ["#fdf5ff", "#f9eaff", "#f0d0ff", "#e0acff", "#cc84f8", "#b05ce0", "#8c3cc0", "#681ea0", "#4c0e80", "#300460", "#18023a"],
+  mauve: ["#fdf4ff", "#f8e6ff", "#edccff", "#dba4ff", "#c074f4", "#a048d8", "#7c28b0", "#5c1290", "#40086e", "#280448", "#12022a"],
+  orchid: ["#fdf2ff", "#fae0ff", "#f0baff", "#e088ff", "#cc4ef8", "#a818e0", "#8408b8", "#620094", "#460070", "#2c0048", "#14002c"],
+  coral: ["#fff4f0", "#ffe4dc", "#ffbcac", "#ff8e78", "#f85f48", "#e03020", "#b81c10", "#8e0c06", "#660402", "#400200", "#200100"],
+  salmon: ["#fff5f3", "#ffe6e0", "#ffc4b8", "#ff9888", "#f86a58", "#e04030", "#b82820", "#8e1412", "#660808", "#400404", "#200202"],
+  peach: ["#fff8f3", "#ffedd8", "#ffd4a8", "#ffb070", "#f88a3c", "#e06018", "#b84008", "#8c2804", "#641802", "#3e0c00", "#200600"],
+  turquoise: ["#f0fffe", "#ccfefa", "#98fcf4", "#50f0e8", "#14d8d0", "#00b0a8", "#008880", "#006860", "#004844", "#002e2c", "#001816"],
+  aqua: ["#f0fffe", "#ccfefa", "#98fdfa", "#52f0f2", "#14d8e0", "#00b4be", "#008c94", "#006870", "#00484e", "#002e34", "#00181c"],
+};
+
+/**
+ * Returns Forge color palettes for use in native components.
+ * Each color has 11 shades (0-10).
+ *
+ * Usage:
+ *   const colors = useColors();
+ *   <View style={{ backgroundColor: colors.blue[5] }} />
+ */
+function useColors() {
+  return COLORS;
+}
+
+module.exports = { ThemeProvider, useForgeTheme, useTheme, useColors };
+