@kbach/react-native 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/{chunk-4BXM3QUV.mjs → chunk-HK6PDJJK.mjs}

@@ -280,11 +280,13 @@ var defaultTheme = {
   colors: PALETTE,
   // Real Tailwind's default spacing scale in full — every step is exactly
   // `n * 4px`, including the fractional `.5` steps (`1.5` -> 6px, `2.5` ->
-  // 10px, `3.5` -> 14px) and the "px" literal (a bare 1px). Previously
-  // this only had {0,1,2,4,6,8} — a handful of spot-checked values, not
-  // the real scale — so anything else (`p-3`, `w-5`, `border-2`,
-  // `gap-10`, ...) silently failed to resolve. Mirrors @kbach/react's
-  // theme.ts exactly.
+  // 10px, `3.5` -> 14px) and the "px" literal (a bare 1px). Only the
+  // "usual stops", though — `jsEngine/shared.ts`'s `spacingPx` (and the
+  // native Rust dispatcher's own `spacing_px`) falls back to Tailwind v4's
+  // live `n * 4px` formula for any bare numeric step not listed here
+  // (`p-0.25`, `w-13`, ...), so this table names the common values and
+  // gives a theme override something to target, not the full resolvable
+  // set. Mirrors @kbach/react's theme.ts exactly.
   spacing: {
     "0": 0,
     "px": 1,
@@ -329,7 +331,20 @@ var defaultTheme = {
     xl: 1280,
     "2xl": 1536
   },
-  darkMode: "attribute"
+  // Byte-for-byte the same three stacks
+  // packages/core-engine/src/resolvers/typography.rs's `font_family_value`
+  // falls back to. On native these three still effectively no-op (see
+  // `first_font_name`'s own doc comment for why a generic CSS keyword
+  // isn't a real loadable font) — only a caller-configured custom name
+  // changes native rendering; Expo Web uses the full stack as-is.
+  fontFamily: {
+    sans: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+  },
+  darkMode: "attribute",
+  // Empty by default, matching real Tailwind's own defaults.
+  container: {}
 };
 var activeTheme = defaultTheme;
 var activeThemeJson = JSON.stringify(defaultTheme);

package/dist/{chunk-JR3BLUAV.mjs → chunk-SY5OAY2C.mjs}

@@ -4,7 +4,7 @@ import {
 import {
   getTheme,
   getThemeJson
-} from "./chunk-4BXM3QUV.mjs";
+} from "./chunk-HK6PDJJK.mjs";
 
 // src/nativeBridge.ts
 import { Dimensions, TurboModuleRegistry } from "react-native";
@@ -259,6 +259,12 @@ function parseClass(token) {
 function decl(property, value) {
   return { property, value };
 }
+function spacingPx(theme, value) {
+  const fromTable = theme.spacing[value];
+  if (fromTable !== void 0) return fromTable;
+  const n = Number(value);
+  return Number.isFinite(n) && value.trim() !== "" ? n * 4 : void 0;
+}
 function resolveLength(theme, parsed) {
   if (parsed.negative) return null;
   const value = parsed.value;
@@ -266,7 +272,7 @@ function resolveLength(theme, parsed) {
   if (parsed.isArbitrary) return value;
   if (value === "full") return "100%";
   if (value === "auto") return "auto";
-  const px = theme.spacing[value];
+  const px = spacingPx(theme, value);
   return px === void 0 ? null : `${px}px`;
 }
 function resolveNegatableLength(theme, parsed) {
@@ -274,7 +280,7 @@ function resolveNegatableLength(theme, parsed) {
   if (parsed.isArbitrary) return null;
   const value = parsed.value;
   if (value === null) return null;
-  const px = theme.spacing[value];
+  const px = spacingPx(theme, value);
   if (px === void 0) return null;
   if (px === 0) return "0px";
   return `-${px}px`;
@@ -633,7 +639,8 @@ function resolve2(parsed, theme) {
 
 // src/jsEngine/resolvers/color.ts
 function lookupHex(theme, key) {
-  return theme.colors[key] ?? null;
+  const entry = theme.colors[key];
+  return typeof entry === "string" ? entry : null;
 }
 
 // src/jsEngine/resolvers/border.ts

package/dist/chunk-X4UQCEOE.mjs

@@ -0,0 +1,186 @@
+import {
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  seedDefaultMode,
+  setGlobalThemeMode,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode
+} from "./chunk-Z664AKW7.mjs";
+import {
+  defaultTheme,
+  getTheme,
+  setTheme
+} from "./chunk-HK6PDJJK.mjs";
+
+// src/config.ts
+function parseHexRgb(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function applyOpacityToHex(hex, opacityText) {
+  const rgb = parseHexRgb(hex);
+  if (!rgb) return hex;
+  const a = Number(opacityText) / 100;
+  const clamped = Number.isFinite(a) ? Math.min(1, Math.max(0, a)) : 1;
+  return `rgba(${rgb.join(",")},${clamped})`;
+}
+function resolveColorEntry(value, lookup) {
+  const slash = value.indexOf("/");
+  const name = slash === -1 ? value : value.slice(0, slash);
+  const opacity = slash === -1 ? void 0 : value.slice(slash + 1);
+  const base = lookup(name);
+  if (base === void 0) return value;
+  return opacity === void 0 ? base : applyOpacityToHex(base, opacity);
+}
+function resolveColors(extend, existing) {
+  const resolved = {};
+  const lookup = (name) => {
+    const found = resolved[name] ?? existing[name];
+    return typeof found === "string" ? found : void 0;
+  };
+  for (const [name, value] of Object.entries(extend)) {
+    resolved[name] = resolveColorEntry(value, lookup);
+  }
+  return resolved;
+}
+function resolveKbachConfig(config) {
+  let theme = { ...defaultTheme, ...config.theme };
+  if (config.extend?.colors) {
+    theme = { ...theme, colors: { ...theme.colors, ...resolveColors(config.extend.colors, theme.colors) } };
+  }
+  if (config.extend?.spacing) {
+    theme = { ...theme, spacing: { ...theme.spacing, ...config.extend.spacing } };
+  }
+  if (config.extend?.screens) {
+    theme = { ...theme, screens: { ...theme.screens, ...config.extend.screens } };
+  }
+  if (config.extend?.fontFamily) {
+    theme = { ...theme, fontFamily: { ...theme.fontFamily, ...config.extend.fontFamily } };
+  }
+  if (config.extend?.container) {
+    theme = { ...theme, container: { ...theme.container, ...config.extend.container } };
+  }
+  if (config.darkMode) {
+    theme = { ...theme, darkMode: config.darkMode };
+  }
+  return theme;
+}
+function applyKbachConfig(config) {
+  const theme = resolveKbachConfig(config);
+  setTheme(theme);
+  return theme;
+}
+
+// src/useTheme.ts
+import { useMemo, useSyncExternalStore } from "react";
+function useTheme() {
+  const isDark = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
+  const mode = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalThemeMode);
+  return useMemo(
+    () => ({ mode, isDark, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode, isDark]
+  );
+}
+
+// src/ThemeProvider.tsx
+import { useEffect, useRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var mountedProviderCount = 0;
+var warnedMultipleProviders = false;
+function ThemeProvider({ children, defaultMode = "system" }) {
+  useEffect(() => {
+    mountedProviderCount++;
+    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+      warnedMultipleProviders = true;
+      console.warn(
+        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store useTheme() reads everywhere, not scoped per-provider, so their defaultMode seeds will fight over the same state."
+      );
+    }
+    return () => {
+      mountedProviderCount--;
+    };
+  }, []);
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current) return;
+    seeded.current = true;
+    seedDefaultMode(defaultMode);
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+// src/useColors.ts
+function parseHexRgb2(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function applyOpacity(color, opacity) {
+  const a = Math.max(0, Math.min(1, opacity / 100));
+  if (color.startsWith("#")) {
+    const rgb = parseHexRgb2(color);
+    return rgb ? `rgba(${rgb.join(",")},${a})` : color;
+  }
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
+  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
+  return color;
+}
+function resolveEntry(entry, isDark) {
+  return typeof entry === "string" ? entry : isDark ? entry.dark : entry.light;
+}
+function makeColorsProxy(theme, isDark) {
+  const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
+  const cache = /* @__PURE__ */ new Map();
+  function resolveNamed(key) {
+    let name = key;
+    let opacity;
+    if (key.includes("/")) {
+      const slash = key.indexOf("/");
+      name = key.slice(0, slash);
+      opacity = Number(key.slice(slash + 1));
+    }
+    const entry = theme.colors[name];
+    if (entry === void 0) return void 0;
+    const value = resolveEntry(entry, isDark);
+    return opacity === void 0 ? value : applyOpacity(value, opacity);
+  }
+  function makeFamilyProxy(family) {
+    return new Proxy({}, {
+      get(_, prop) {
+        const key = String(prop);
+        if (key === "then") return void 0;
+        return resolveNamed(`${family}-${key}`);
+      }
+    });
+  }
+  return new Proxy({ alpha }, {
+    get(_, prop) {
+      const key = String(prop);
+      if (key === "then") return void 0;
+      if (key === "alpha") return alpha;
+      const direct = resolveNamed(key);
+      if (direct !== void 0) return direct;
+      if (!cache.has(key)) cache.set(key, makeFamilyProxy(key));
+      return cache.get(key);
+    }
+  });
+}
+function useColors() {
+  const { isDark } = useTheme();
+  return makeColorsProxy(getTheme(), isDark);
+}
+
+export {
+  resolveKbachConfig,
+  applyKbachConfig,
+  useTheme,
+  ThemeProvider,
+  useColors
+};

package/dist/{chunk-OIW7OQWO.mjs → chunk-YOC3SHF5.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-JS5KIGAB.mjs";
+} from "./chunk-H5Z24XX5.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { T as ThemeConfig, a as ThemeContextValue, b as ThemeMode, c as ThemeProvider, d as ThemeProviderProps, e as defaultTheme, g as getGlobalDarkMode, f as getGlobalThemeMode, h as getTheme, s as setGlobalThemeMode, i as setTheme, j as subscribeGlobalDarkMode, t as toggleGlobalDarkMode, u as useGlobalDarkMode, k as useTheme } from './ThemeContext-Dc5AC-m0.mjs';
+export { C as ColorEntry, a as ColorScale, b as ColorsAPI, c as ContainerConfig, K as KbachConfig, T as ThemeConfig, d as ThemeMode, e as ThemeProvider, f as ThemeProviderProps, g as ThemeState, h as applyKbachConfig, i as defaultTheme, j as getGlobalDarkMode, k as getGlobalThemeMode, l as getTheme, r as resolveKbachConfig, s as setGlobalThemeMode, m as setTheme, n as subscribeGlobalDarkMode, t as toggleGlobalDarkMode, u as useColors, o as useTheme } from './useColors-CeP5_HvM.mjs';
 import 'react';
 
 type StyleValue = string | number | {
@@ -25,10 +25,9 @@ interface StyleObject {
  * whenever the mode is `'system'` (its own default), so nothing regresses
  * for apps that never touch the override API at all. This function itself
  * has no subscription of its own, so nothing re-renders just because the
- * store's value changed — call `useGlobalDarkMode()` (or consume
- * `useTheme()`'s `isDark`) somewhere in the tree for that, NOT React
- * Native's own `useColorScheme()`, which only reflects the raw OS setting
- * and would miss an explicit override entirely.
+ * store's value changed — call `useTheme()` (its `isDark`) somewhere in
+ * the tree for that, NOT React Native's own `useColorScheme()`, which only
+ * reflects the raw OS setting and would miss an explicit override entirely.
  *
  * Phase 11 originally shipped with live in-place theme switching unverified
  * (a `uiMode` toggle triggered a re-render but `Appearance.getColorScheme()`

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { T as ThemeConfig, a as ThemeContextValue, b as ThemeMode, c as ThemeProvider, d as ThemeProviderProps, e as defaultTheme, g as getGlobalDarkMode, f as getGlobalThemeMode, h as getTheme, s as setGlobalThemeMode, i as setTheme, j as subscribeGlobalDarkMode, t as toggleGlobalDarkMode, u as useGlobalDarkMode, k as useTheme } from './ThemeContext-Dc5AC-m0.js';
+export { C as ColorEntry, a as ColorScale, b as ColorsAPI, c as ContainerConfig, K as KbachConfig, T as ThemeConfig, d as ThemeMode, e as ThemeProvider, f as ThemeProviderProps, g as ThemeState, h as applyKbachConfig, i as defaultTheme, j as getGlobalDarkMode, k as getGlobalThemeMode, l as getTheme, r as resolveKbachConfig, s as setGlobalThemeMode, m as setTheme, n as subscribeGlobalDarkMode, t as toggleGlobalDarkMode, u as useColors, o as useTheme } from './useColors-CeP5_HvM.js';
 import 'react';
 
 type StyleValue = string | number | {
@@ -25,10 +25,9 @@ interface StyleObject {
  * whenever the mode is `'system'` (its own default), so nothing regresses
  * for apps that never touch the override API at all. This function itself
  * has no subscription of its own, so nothing re-renders just because the
- * store's value changed — call `useGlobalDarkMode()` (or consume
- * `useTheme()`'s `isDark`) somewhere in the tree for that, NOT React
- * Native's own `useColorScheme()`, which only reflects the raw OS setting
- * and would miss an explicit override entirely.
+ * store's value changed — call `useTheme()` (its `isDark`) somewhere in
+ * the tree for that, NOT React Native's own `useColorScheme()`, which only
+ * reflects the raw OS setting and would miss an explicit override entirely.
  *
  * Phase 11 originally shipped with live in-place theme switching unverified
  * (a `uiMode` toggle triggered a re-render but `Appearance.getColorScheme()`

package/dist/index.js

@@ -21,16 +21,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ThemeProvider: () => ThemeProvider,
+  applyKbachConfig: () => applyKbachConfig,
   defaultTheme: () => defaultTheme,
   getGlobalDarkMode: () => getGlobalDarkMode,
   getGlobalThemeMode: () => getGlobalThemeMode,
   getTheme: () => getTheme,
+  resolveKbachConfig: () => resolveKbachConfig,
   resolveStyle: () => resolveStyle,
   setGlobalThemeMode: () => setGlobalThemeMode,
   setTheme: () => setTheme,
   subscribeGlobalDarkMode: () => subscribeGlobalDarkMode,
   toggleGlobalDarkMode: () => toggleGlobalDarkMode,
-  useGlobalDarkMode: () => useGlobalDarkMode,
+  useColors: () => useColors,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
@@ -317,11 +319,13 @@ var defaultTheme = {
   colors: PALETTE,
   // Real Tailwind's default spacing scale in full — every step is exactly
   // `n * 4px`, including the fractional `.5` steps (`1.5` -> 6px, `2.5` ->
-  // 10px, `3.5` -> 14px) and the "px" literal (a bare 1px). Previously
-  // this only had {0,1,2,4,6,8} — a handful of spot-checked values, not
-  // the real scale — so anything else (`p-3`, `w-5`, `border-2`,
-  // `gap-10`, ...) silently failed to resolve. Mirrors @kbach/react's
-  // theme.ts exactly.
+  // 10px, `3.5` -> 14px) and the "px" literal (a bare 1px). Only the
+  // "usual stops", though — `jsEngine/shared.ts`'s `spacingPx` (and the
+  // native Rust dispatcher's own `spacing_px`) falls back to Tailwind v4's
+  // live `n * 4px` formula for any bare numeric step not listed here
+  // (`p-0.25`, `w-13`, ...), so this table names the common values and
+  // gives a theme override something to target, not the full resolvable
+  // set. Mirrors @kbach/react's theme.ts exactly.
   spacing: {
     "0": 0,
     "px": 1,
@@ -366,7 +370,20 @@ var defaultTheme = {
     xl: 1280,
     "2xl": 1536
   },
-  darkMode: "attribute"
+  // Byte-for-byte the same three stacks
+  // packages/core-engine/src/resolvers/typography.rs's `font_family_value`
+  // falls back to. On native these three still effectively no-op (see
+  // `first_font_name`'s own doc comment for why a generic CSS keyword
+  // isn't a real loadable font) — only a caller-configured custom name
+  // changes native rendering; Expo Web uses the full stack as-is.
+  fontFamily: {
+    sans: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+  },
+  darkMode: "attribute",
+  // Empty by default, matching real Tailwind's own defaults.
+  container: {}
 };
 var activeTheme = defaultTheme;
 var activeThemeJson = JSON.stringify(defaultTheme);
@@ -680,6 +697,12 @@ function parseClass(token) {
 function decl(property, value) {
   return { property, value };
 }
+function spacingPx(theme, value) {
+  const fromTable = theme.spacing[value];
+  if (fromTable !== void 0) return fromTable;
+  const n = Number(value);
+  return Number.isFinite(n) && value.trim() !== "" ? n * 4 : void 0;
+}
 function resolveLength(theme, parsed) {
   if (parsed.negative) return null;
   const value = parsed.value;
@@ -687,7 +710,7 @@ function resolveLength(theme, parsed) {
   if (parsed.isArbitrary) return value;
   if (value === "full") return "100%";
   if (value === "auto") return "auto";
-  const px = theme.spacing[value];
+  const px = spacingPx(theme, value);
   return px === void 0 ? null : `${px}px`;
 }
 function resolveNegatableLength(theme, parsed) {
@@ -695,7 +718,7 @@ function resolveNegatableLength(theme, parsed) {
   if (parsed.isArbitrary) return null;
   const value = parsed.value;
   if (value === null) return null;
-  const px = theme.spacing[value];
+  const px = spacingPx(theme, value);
   if (px === void 0) return null;
   if (px === 0) return "0px";
   return `-${px}px`;
@@ -1054,7 +1077,8 @@ function resolve2(parsed, theme) {
 
 // src/jsEngine/resolvers/color.ts
 function lookupHex(theme, key) {
-  return theme.colors[key] ?? null;
+  const entry = theme.colors[key];
+  return typeof entry === "string" ? entry : null;
 }
 
 // src/jsEngine/resolvers/border.ts
@@ -1620,71 +1644,184 @@ function resolveStyle(classString, pressed = false) {
   return JSON.parse(json);
 }
 
-// src/useGlobalDarkMode.ts
-var import_react = require("react");
-function useGlobalDarkMode() {
-  return (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode);
+// src/config.ts
+function parseHexRgb(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function applyOpacityToHex(hex, opacityText) {
+  const rgb = parseHexRgb(hex);
+  if (!rgb) return hex;
+  const a = Number(opacityText) / 100;
+  const clamped = Number.isFinite(a) ? Math.min(1, Math.max(0, a)) : 1;
+  return `rgba(${rgb.join(",")},${clamped})`;
+}
+function resolveColorEntry(value, lookup) {
+  const slash = value.indexOf("/");
+  const name = slash === -1 ? value : value.slice(0, slash);
+  const opacity = slash === -1 ? void 0 : value.slice(slash + 1);
+  const base = lookup(name);
+  if (base === void 0) return value;
+  return opacity === void 0 ? base : applyOpacityToHex(base, opacity);
+}
+function resolveColors(extend, existing) {
+  const resolved = {};
+  const lookup = (name) => {
+    const found = resolved[name] ?? existing[name];
+    return typeof found === "string" ? found : void 0;
+  };
+  for (const [name, value] of Object.entries(extend)) {
+    resolved[name] = resolveColorEntry(value, lookup);
+  }
+  return resolved;
+}
+function resolveKbachConfig(config) {
+  let theme = { ...defaultTheme, ...config.theme };
+  if (config.extend?.colors) {
+    theme = { ...theme, colors: { ...theme.colors, ...resolveColors(config.extend.colors, theme.colors) } };
+  }
+  if (config.extend?.spacing) {
+    theme = { ...theme, spacing: { ...theme.spacing, ...config.extend.spacing } };
+  }
+  if (config.extend?.screens) {
+    theme = { ...theme, screens: { ...theme.screens, ...config.extend.screens } };
+  }
+  if (config.extend?.fontFamily) {
+    theme = { ...theme, fontFamily: { ...theme.fontFamily, ...config.extend.fontFamily } };
+  }
+  if (config.extend?.container) {
+    theme = { ...theme, container: { ...theme.container, ...config.extend.container } };
+  }
+  if (config.darkMode) {
+    theme = { ...theme, darkMode: config.darkMode };
+  }
+  return theme;
+}
+function applyKbachConfig(config) {
+  const theme = resolveKbachConfig(config);
+  setTheme(theme);
+  return theme;
 }
 
-// src/ThemeProvider.tsx
-var import_react3 = require("react");
-
-// src/ThemeContext.tsx
-var import_react2 = require("react");
-var ThemeContext = (0, import_react2.createContext)(null);
+// src/useTheme.ts
+var import_react = require("react");
 function useTheme() {
-  const ctx = (0, import_react2.useContext)(ThemeContext);
-  if (!ctx) {
-    throw new Error(
-      'useTheme() must be called within a <ThemeProvider>. For dark-mode state without a provider, use useGlobalDarkMode() (read) or toggleGlobalDarkMode()/setGlobalThemeMode() (write) from "@kbach/react-native" instead.'
-    );
-  }
-  return ctx;
+  const isDark2 = (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode);
+  const mode2 = (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalThemeMode);
+  return (0, import_react.useMemo)(
+    () => ({ mode: mode2, isDark: isDark2, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode2, isDark2]
+  );
 }
 
 // src/ThemeProvider.tsx
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var mountedProviderCount = 0;
 var warnedMultipleProviders = false;
 function ThemeProvider({ children, defaultMode = "system" }) {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     mountedProviderCount++;
     if (mountedProviderCount > 1 && !warnedMultipleProviders) {
       warnedMultipleProviders = true;
       console.warn(
-        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store (the same one useGlobalDarkMode()/toggleGlobalDarkMode() read and write), not scoped per-provider, so they will fight over the same state instead of each getting their own."
+        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store useTheme() reads everywhere, not scoped per-provider, so their defaultMode seeds will fight over the same state."
       );
     }
     return () => {
       mountedProviderCount--;
     };
   }, []);
-  const seeded = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const seeded = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
     if (seeded.current) return;
     seeded.current = true;
     seedDefaultMode(defaultMode);
   }, []);
-  const isDark2 = (0, import_react3.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode);
-  const mode2 = (0, import_react3.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalThemeMode);
-  const value = (0, import_react3.useMemo)(
-    () => ({ mode: mode2, isDark: isDark2, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
-    [mode2, isDark2]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+}
+
+// src/useColors.ts
+function parseHexRgb2(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function applyOpacity(color, opacity) {
+  const a = Math.max(0, Math.min(1, opacity / 100));
+  if (color.startsWith("#")) {
+    const rgb = parseHexRgb2(color);
+    return rgb ? `rgba(${rgb.join(",")},${a})` : color;
+  }
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
+  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
+  return color;
+}
+function resolveEntry(entry, isDark2) {
+  return typeof entry === "string" ? entry : isDark2 ? entry.dark : entry.light;
+}
+function makeColorsProxy(theme, isDark2) {
+  const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
+  const cache = /* @__PURE__ */ new Map();
+  function resolveNamed(key) {
+    let name = key;
+    let opacity;
+    if (key.includes("/")) {
+      const slash = key.indexOf("/");
+      name = key.slice(0, slash);
+      opacity = Number(key.slice(slash + 1));
+    }
+    const entry = theme.colors[name];
+    if (entry === void 0) return void 0;
+    const value = resolveEntry(entry, isDark2);
+    return opacity === void 0 ? value : applyOpacity(value, opacity);
+  }
+  function makeFamilyProxy(family) {
+    return new Proxy({}, {
+      get(_, prop) {
+        const key = String(prop);
+        if (key === "then") return void 0;
+        return resolveNamed(`${family}-${key}`);
+      }
+    });
+  }
+  return new Proxy({ alpha }, {
+    get(_, prop) {
+      const key = String(prop);
+      if (key === "then") return void 0;
+      if (key === "alpha") return alpha;
+      const direct = resolveNamed(key);
+      if (direct !== void 0) return direct;
+      if (!cache.has(key)) cache.set(key, makeFamilyProxy(key));
+      return cache.get(key);
+    }
+  });
+}
+function useColors() {
+  const { isDark: isDark2 } = useTheme();
+  return makeColorsProxy(getTheme(), isDark2);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemeProvider,
+  applyKbachConfig,
   defaultTheme,
   getGlobalDarkMode,
   getGlobalThemeMode,
   getTheme,
+  resolveKbachConfig,
   resolveStyle,
   setGlobalThemeMode,
   setTheme,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode,
-  useGlobalDarkMode,
+  useColors,
   useTheme
 });