@kbach/react 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { T as ThemeConfig, d as defaultTheme, g as getTheme, s as setTheme } from './theme-BKAb78KP.mjs';
+export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-BQ_b-qxF.mjs';
 import * as react from 'react';
 import { ReactNode } from 'react';
 
@@ -61,16 +61,23 @@ declare function setGlobalThemeMode(nextMode: ThemeMode): void;
 declare function toggleGlobalDarkMode(): void;
 declare function subscribeGlobalDarkMode(listener: () => void): () => void;
 
+interface ThemeState {
+    mode: ThemeMode;
+    isDark: boolean;
+    setMode: (mode: ThemeMode) => void;
+    toggle: () => void;
+}
 /**
- * Reactive read of the global dark-mode store — works with or without a
- * `<ThemeProvider>` mounted anywhere in the tree, since it subscribes to
- * `darkModeStore.ts` directly. `useSyncExternalStore`'s SSR snapshot always
- * returns `false` (light), matching `applyToDom`'s own server no-op — the
- * server and the client's very first render agree, so there's no
- * hydration-mismatch warning; the real value (if different) applies on the
- * client immediately after.
+ * The one hook for reading and writing Kbach's dark-mode state. Reads
+ * `darkModeStore.ts`'s global store directly via `useSyncExternalStore` —
+ * that module-level store, not React Context, is the actual source of
+ * truth (every provider used to just mirror it into a Context value), so
+ * this works from ANY component, with or without a `<ThemeProvider>`
+ * mounted anywhere in the tree. `<ThemeProvider>` still exists, but purely
+ * as an optional convenience for seeding an app's initial `defaultMode` —
+ * see its own doc comment.
  */
-declare function useGlobalDarkMode(): boolean;
+declare function useTheme(): ThemeState;
 
 interface ThemeProviderProps {
     children: ReactNode;
@@ -82,36 +89,60 @@ interface ThemeProviderProps {
     defaultMode?: ThemeMode;
 }
 /**
- * Optional React Context wrapper around `darkModeStore.ts`'s single global
- * store — port of old-kbach's `ThemeProvider` (`packages/ui/src/
- * ThemeProvider.tsx`), same "provider is a thin wrapper around a global
- * store, not the source of truth itself" shape, simplified to this
- * package's web-only scope (no native `useColorScheme()`/`windowWidth`
- * branch, no `disablePersistence` prop — persistence is always on, since
- * `darkModeStore.ts` already guards every `localStorage` access for
- * environments where it's unavailable).
+ * Optional — `useTheme()` reads `darkModeStore.ts`'s global store directly
+ * and works anywhere without this mounted at all. The only thing this
+ * component does is seed that store's initial `defaultMode` once, for apps
+ * that want to declare a startup default in JSX rather than calling
+ * `setGlobalThemeMode()` imperatively before their first render. It
+ * renders `children` as-is — no Context.Provider, since there's no value
+ * left to distribute; `useTheme()` never reads from Context.
  *
- * Because the store is global, MULTIPLE mounted providers share the exact
- * same `mode`/`isDark` state rather than each getting their own scoped
- * value — mounting more than one is very likely a mistake (each fighting
- * over the same state via a different `defaultMode`), so this warns once
- * in dev, matching old-kbach's identical guard.
+ * Because the store is global, MULTIPLE mounted providers would each try
+ * to seed the exact same store rather than getting their own scoped
+ * state — mounting more than one is very likely a mistake, so this warns
+ * once in dev.
  */
 declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
 
-interface ThemeContextValue {
-    mode: ThemeMode;
-    isDark: boolean;
-    setMode: (mode: ThemeMode) => void;
-    toggle: () => void;
+interface ColorScale {
+    /** `colors.blue[6]` -> raw value */
+    readonly [shade: number]: string;
+    /** `colors.blue['6/50']` -> shade 6 at 50% opacity */
+    readonly [key: string]: string;
 }
+type ColorsAPI = {
+    /** `colors.white`, `colors.blue` (a shade family), `colors.surface`, ... */
+    readonly [name: string]: string | ColorScale;
+} & {
+    /**
+     * Applies an opacity (0–100) to any color string this hook can return —
+     * a hex, `rgb()`/`rgba()`, or one of this hook's own
+     * `rgb(var(--kb-color-x))` mode-aware references.
+     */
+    readonly alpha: (color: string, opacity?: number) => string;
+};
 /**
- * Requires a `<ThemeProvider>` ancestor — throws otherwise, since a
- * component that destructures `{ mode, setMode }` genuinely needs Context
- * (unlike a component that just wants the dark/light boolean, which should
- * reach for `useGlobalDarkMode()` instead and never needs a provider at
- * all).
+ * Resolved theme colors as real values — for anywhere you need an actual
+ * color (an SVG `fill`, a canvas context, a chart library prop), not a
+ * `className`. Ported from old-kbach's `useColors()`
+ * (`old-kbach/packages/ui/src/useColors.ts`), adapted to this engine's flat
+ * `"blue-6"`-keyed palette (`colors.blue[6]` looks up `"blue-6"`).
+ *
+ * Any color — a shade-family entry like `"blue-6"` or a standalone name
+ * like `"surface"` — can be defined in the theme as either a plain string
+ * (static, same in both modes) or a `{ light, dark }` pair — fully manual,
+ * no automatic shade-shifting or other assumption about what a "dark
+ * variant" should be; see `resolveEntry`'s own doc comment for how a
+ * `{ light, dark }` entry resolves.
+ *
+ * ```ts
+ * const colors = useColors();
+ * colors.blue[6];         // "#3b82f6" — static, same value in both modes
+ * colors.blue['6/50'];    // same, at 50% opacity
+ * colors.surface;         // "rgb(var(--kb-color-surface))" if defined as { light, dark }
+ * colors.alpha(colors.surface, 50); // "rgba(var(--kb-color-surface), 0.5)"
+ * ```
  */
-declare function useTheme(): ThemeContextValue;
+declare function useColors(): ColorsAPI;
 
-export { KbachReset, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, disableRuntimeCSS, getGlobalDarkMode, getGlobalThemeMode, initKbach, isKbachReady, isRuntimeCSSDisabled, kb, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };
+export { type ColorScale, type ColorsAPI, KbachReset, type ThemeMode, ThemeProvider, type ThemeProviderProps, type ThemeState, disableRuntimeCSS, getGlobalDarkMode, getGlobalThemeMode, initKbach, isKbachReady, isRuntimeCSSDisabled, kb, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode, useColors, useTheme };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { T as ThemeConfig, d as defaultTheme, g as getTheme, s as setTheme } from './theme-BKAb78KP.js';
+export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-BQ_b-qxF.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
 
@@ -61,16 +61,23 @@ declare function setGlobalThemeMode(nextMode: ThemeMode): void;
 declare function toggleGlobalDarkMode(): void;
 declare function subscribeGlobalDarkMode(listener: () => void): () => void;
 
+interface ThemeState {
+    mode: ThemeMode;
+    isDark: boolean;
+    setMode: (mode: ThemeMode) => void;
+    toggle: () => void;
+}
 /**
- * Reactive read of the global dark-mode store — works with or without a
- * `<ThemeProvider>` mounted anywhere in the tree, since it subscribes to
- * `darkModeStore.ts` directly. `useSyncExternalStore`'s SSR snapshot always
- * returns `false` (light), matching `applyToDom`'s own server no-op — the
- * server and the client's very first render agree, so there's no
- * hydration-mismatch warning; the real value (if different) applies on the
- * client immediately after.
+ * The one hook for reading and writing Kbach's dark-mode state. Reads
+ * `darkModeStore.ts`'s global store directly via `useSyncExternalStore` —
+ * that module-level store, not React Context, is the actual source of
+ * truth (every provider used to just mirror it into a Context value), so
+ * this works from ANY component, with or without a `<ThemeProvider>`
+ * mounted anywhere in the tree. `<ThemeProvider>` still exists, but purely
+ * as an optional convenience for seeding an app's initial `defaultMode` —
+ * see its own doc comment.
  */
-declare function useGlobalDarkMode(): boolean;
+declare function useTheme(): ThemeState;
 
 interface ThemeProviderProps {
     children: ReactNode;
@@ -82,36 +89,60 @@ interface ThemeProviderProps {
     defaultMode?: ThemeMode;
 }
 /**
- * Optional React Context wrapper around `darkModeStore.ts`'s single global
- * store — port of old-kbach's `ThemeProvider` (`packages/ui/src/
- * ThemeProvider.tsx`), same "provider is a thin wrapper around a global
- * store, not the source of truth itself" shape, simplified to this
- * package's web-only scope (no native `useColorScheme()`/`windowWidth`
- * branch, no `disablePersistence` prop — persistence is always on, since
- * `darkModeStore.ts` already guards every `localStorage` access for
- * environments where it's unavailable).
+ * Optional — `useTheme()` reads `darkModeStore.ts`'s global store directly
+ * and works anywhere without this mounted at all. The only thing this
+ * component does is seed that store's initial `defaultMode` once, for apps
+ * that want to declare a startup default in JSX rather than calling
+ * `setGlobalThemeMode()` imperatively before their first render. It
+ * renders `children` as-is — no Context.Provider, since there's no value
+ * left to distribute; `useTheme()` never reads from Context.
  *
- * Because the store is global, MULTIPLE mounted providers share the exact
- * same `mode`/`isDark` state rather than each getting their own scoped
- * value — mounting more than one is very likely a mistake (each fighting
- * over the same state via a different `defaultMode`), so this warns once
- * in dev, matching old-kbach's identical guard.
+ * Because the store is global, MULTIPLE mounted providers would each try
+ * to seed the exact same store rather than getting their own scoped
+ * state — mounting more than one is very likely a mistake, so this warns
+ * once in dev.
  */
 declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
 
-interface ThemeContextValue {
-    mode: ThemeMode;
-    isDark: boolean;
-    setMode: (mode: ThemeMode) => void;
-    toggle: () => void;
+interface ColorScale {
+    /** `colors.blue[6]` -> raw value */
+    readonly [shade: number]: string;
+    /** `colors.blue['6/50']` -> shade 6 at 50% opacity */
+    readonly [key: string]: string;
 }
+type ColorsAPI = {
+    /** `colors.white`, `colors.blue` (a shade family), `colors.surface`, ... */
+    readonly [name: string]: string | ColorScale;
+} & {
+    /**
+     * Applies an opacity (0–100) to any color string this hook can return —
+     * a hex, `rgb()`/`rgba()`, or one of this hook's own
+     * `rgb(var(--kb-color-x))` mode-aware references.
+     */
+    readonly alpha: (color: string, opacity?: number) => string;
+};
 /**
- * Requires a `<ThemeProvider>` ancestor — throws otherwise, since a
- * component that destructures `{ mode, setMode }` genuinely needs Context
- * (unlike a component that just wants the dark/light boolean, which should
- * reach for `useGlobalDarkMode()` instead and never needs a provider at
- * all).
+ * Resolved theme colors as real values — for anywhere you need an actual
+ * color (an SVG `fill`, a canvas context, a chart library prop), not a
+ * `className`. Ported from old-kbach's `useColors()`
+ * (`old-kbach/packages/ui/src/useColors.ts`), adapted to this engine's flat
+ * `"blue-6"`-keyed palette (`colors.blue[6]` looks up `"blue-6"`).
+ *
+ * Any color — a shade-family entry like `"blue-6"` or a standalone name
+ * like `"surface"` — can be defined in the theme as either a plain string
+ * (static, same in both modes) or a `{ light, dark }` pair — fully manual,
+ * no automatic shade-shifting or other assumption about what a "dark
+ * variant" should be; see `resolveEntry`'s own doc comment for how a
+ * `{ light, dark }` entry resolves.
+ *
+ * ```ts
+ * const colors = useColors();
+ * colors.blue[6];         // "#3b82f6" — static, same value in both modes
+ * colors.blue['6/50'];    // same, at 50% opacity
+ * colors.surface;         // "rgb(var(--kb-color-surface))" if defined as { light, dark }
+ * colors.alpha(colors.surface, 50); // "rgba(var(--kb-color-surface), 0.5)"
+ * ```
  */
-declare function useTheme(): ThemeContextValue;
+declare function useColors(): ColorsAPI;
 
-export { KbachReset, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, disableRuntimeCSS, getGlobalDarkMode, getGlobalThemeMode, initKbach, isKbachReady, isRuntimeCSSDisabled, kb, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };
+export { type ColorScale, type ColorsAPI, KbachReset, type ThemeMode, ThemeProvider, type ThemeProviderProps, type ThemeState, disableRuntimeCSS, getGlobalDarkMode, getGlobalThemeMode, initKbach, isKbachReady, isRuntimeCSSDisabled, kb, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode, useColors, useTheme };

package/dist/index.js

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   KbachReset: () => KbachReset,
   ThemeProvider: () => ThemeProvider,
+  applyKbachConfig: () => applyKbachConfig,
   defaultTheme: () => defaultTheme,
   disableRuntimeCSS: () => disableRuntimeCSS,
   getGlobalDarkMode: () => getGlobalDarkMode,
@@ -41,11 +42,12 @@ __export(src_exports, {
   isKbachReady: () => isKbachReady,
   isRuntimeCSSDisabled: () => isRuntimeCSSDisabled,
   kb: () => kb,
+  resolveKbachConfig: () => resolveKbachConfig,
   setGlobalThemeMode: () => setGlobalThemeMode,
   setTheme: () => setTheme,
   subscribeGlobalDarkMode: () => subscribeGlobalDarkMode,
   toggleGlobalDarkMode: () => toggleGlobalDarkMode,
-  useGlobalDarkMode: () => useGlobalDarkMode,
+  useColors: () => useColors,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
@@ -360,14 +362,15 @@ var defaultTheme = {
   // Real Tailwind's default spacing scale in full — every step is exactly
   // `n * 4px` (Tailwind's base spacing unit), including the fractional
   // `.5` steps (`1.5` -> 6px, `2.5` -> 10px, `3.5` -> 14px) and the "px"
-  // literal (a bare 1px, for `p-px`-style hairline spacing). 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 (an unknown spacing key returns `None`
-  // the same way an unknown class does, with no error). "0" itself is
-  // still needed explicitly (not derivable as "any number * 4") for the
-  // same reason it always was: `sticky top-0` needs an actual "0" key to
-  // resolve at all, not just fall through as unresolvable.
+  // literal (a bare 1px, for `p-px`-style hairline spacing). This table is
+  // only the "usual stops", though — the Rust/JS engines' shared
+  // `spacing_px`/`spacingPx` helper falls back to Tailwind v4's own live
+  // `n * 4px` formula for any bare numeric step NOT listed here (`p-0.25`,
+  // `gap-1.75`, `w-13`, ...), so this table exists to name the common
+  // values and give a theme customization something to override, not to
+  // enumerate every resolvable step. "px" is the one exception that must
+  // stay listed explicitly — it isn't a number, so the formula can't
+  // derive it.
   spacing: {
     "0": 0,
     "px": 1,
@@ -412,7 +415,21 @@ 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 — kept here too (rather than leaving this empty and
+  // relying purely on the Rust-side fallback) so `defaultTheme.fontFamily.sans`
+  // is a real, readable value for anything that wants to extend rather
+  // than replace it (see `KbachConfig.extend.fontFamily` in config.ts).
+  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 (no forced
+  // centering/padding) — see `ContainerConfig`'s own doc comment.
+  container: {}
 };
 var activeTheme = defaultTheme;
 var activeThemeJson = JSON.stringify(defaultTheme);
@@ -577,6 +594,113 @@ function KbachReset() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: RESET_STYLE_ID, children: BASE_RESET });
 }
 
+// src/colorVariables.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 wrapDarkDecls(strategy, decls) {
+  switch (strategy) {
+    case "class":
+      return `.dark { ${decls} }`;
+    case "media":
+      return `@media (prefers-color-scheme: dark) { :root { ${decls} } }`;
+    case "attribute":
+    default:
+      return `[data-theme="dark"] { ${decls} }`;
+  }
+}
+var STYLE_ID = "kbach-colors";
+var injectedForTheme = null;
+function ensureColorVariablesInjected(theme) {
+  if (typeof document === "undefined") return;
+  if (injectedForTheme === theme) return;
+  injectedForTheme = theme;
+  const lightDecls = [];
+  const darkDecls = [];
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (typeof value === "string") continue;
+    const light = parseHexRgb(value.light);
+    const dark = parseHexRgb(value.dark);
+    if (!light || !dark) continue;
+    lightDecls.push(`--kb-color-${name}: ${light.join(",")};`);
+    darkDecls.push(`--kb-color-${name}: ${dark.join(",")};`);
+  }
+  let el = document.getElementById(STYLE_ID);
+  if (lightDecls.length === 0) {
+    el?.remove();
+    return;
+  }
+  if (!el) {
+    el = document.createElement("style");
+    el.id = STYLE_ID;
+    document.head.insertBefore(el, document.head.firstChild);
+  }
+  el.textContent = `:root { ${lightDecls.join(" ")} }
+${wrapDarkDecls(theme.darkMode, darkDecls.join(" "))}`;
+}
+
+// src/config.ts
+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) {
+  if (typeof value !== "string") return value;
+  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;
+  if (opacity === void 0) return base;
+  return typeof base === "string" ? applyOpacityToHex(base, opacity) : { light: applyOpacityToHex(base.light, opacity), dark: applyOpacityToHex(base.dark, opacity) };
+}
+function resolveColors(extend, existing) {
+  const resolved = {};
+  const lookup = (name) => resolved[name] ?? existing[name];
+  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
+var import_react = require("react");
+
 // src/darkModeStore.ts
 var STORAGE_KEY = "kbach-theme";
 var listeners = /* @__PURE__ */ new Set();
@@ -664,64 +788,111 @@ function seedDefaultMode(fallback) {
   notify();
 }
 
-// src/useGlobalDarkMode.ts
-var import_react = require("react");
-var getServerSnapshot = () => false;
-function useGlobalDarkMode() {
-  return (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode, getServerSnapshot);
-}
-
-// 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
 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" instead.'
-    );
-  }
-  return ctx;
+  const isDark2 = (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode, () => false);
+  const mode2 = (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalThemeMode, () => "system");
+  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_runtime2 = 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, () => false);
-  const mode2 = (0, import_react3.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalThemeMode, () => defaultMode);
-  const value = (0, import_react3.useMemo)(
-    () => ({ mode: mode2, isDark: isDark2, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
-    [mode2, isDark2]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+}
+
+// src/useColors.ts
+function applyOpacity(color, opacity) {
+  const a = Math.max(0, Math.min(1, opacity / 100));
+  const varMatch = /^rgb\(var\((--[\w-]+)\)\)$/.exec(color);
+  if (varMatch) return `rgba(var(${varMatch[1]}), ${a})`;
+  if (color.startsWith("#")) {
+    const rgb = parseHexRgb(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(name, entry, isDark2) {
+  if (typeof entry === "string") return entry;
+  const light = parseHexRgb(entry.light);
+  const dark = parseHexRgb(entry.dark);
+  if (light && dark) return `rgb(var(--kb-color-${name}))`;
+  return 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(name, 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();
+  const theme = getTheme();
+  ensureColorVariablesInjected(theme);
+  return makeColorsProxy(theme, isDark2);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   KbachReset,
   ThemeProvider,
+  applyKbachConfig,
   defaultTheme,
   disableRuntimeCSS,
   getGlobalDarkMode,
@@ -731,10 +902,11 @@ function ThemeProvider({ children, defaultMode = "system" }) {
   isKbachReady,
   isRuntimeCSSDisabled,
   kb,
+  resolveKbachConfig,
   setGlobalThemeMode,
   setTheme,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode,
-  useGlobalDarkMode,
+  useColors,
   useTheme
 });