@kbach/react 0.3.2 → 0.3.4

package/dist/{chunk-V5KHX4CZ.mjs → chunk-ADRZPFQC.mjs}

@@ -1801,9 +1801,6 @@ function clearPluginUtilities() {
 function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
-function getPluginResolverMap() {
-  return PLUGIN_RESOLVERS;
-}
 
 // src/core/cache.ts
 var LRUCache = class {
@@ -2085,6 +2082,28 @@ function getConfig() {
   store.resolved = buildConfig({});
   return store.resolved;
 }
+function resolveOneRef(ref, colors) {
+  const m = /^([a-z][a-z0-9]*)-(\d+)$/.exec(ref);
+  if (!m) return null;
+  const entry = colors[m[1]];
+  if (!entry || typeof entry !== "object") return null;
+  return entry[m[2]] ?? null;
+}
+function resolveColorRefs(colors) {
+  const out = {};
+  for (const [key, val] of Object.entries(colors)) {
+    if (typeof val === "string") {
+      out[key] = resolveOneRef(val, colors) ?? val;
+    } else {
+      const shades = {};
+      for (const [shade, hex] of Object.entries(val)) {
+        shades[shade] = resolveOneRef(hex, colors) ?? hex;
+      }
+      out[key] = shades;
+    }
+  }
+  return out;
+}
 function buildConfig(userConfig) {
   let theme = { ...defaultTheme };
   if (userConfig.theme) {
@@ -2103,6 +2122,7 @@ function buildConfig(userConfig) {
       }
     }
   }
+  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
   const resolved = {
     darkMode: userConfig.darkMode ?? "attribute",
     theme,
@@ -2118,7 +2138,6 @@ function buildConfig(userConfig) {
 }
 function makePluginAPI(theme) {
   const standalone = getPluginStandaloneMap();
-  const resolvers = getPluginResolverMap();
   return {
     addUtility(name, styles) {
       standalone[name] = styles;
@@ -2149,11 +2168,16 @@ function onConfigChange(listener) {
 function updateConfig(userConfig) {
   const store = getConfigStore();
   store.resolved = buildConfig(userConfig);
+  store._src = userConfig;
   clearCache();
   for (const listener of store.listeners) {
     listener(store.resolved);
   }
 }
+function initConfig(userConfig) {
+  if (getConfigStore()._src === userConfig) return;
+  updateConfig(userConfig);
+}
 var customVariants = new Proxy(
   {},
   {
@@ -2287,6 +2311,7 @@ export {
   buildConfig,
   onConfigChange,
   updateConfig,
+  initConfig,
   syncGlobalDarkMode,
   setGlobalDarkMode,
   useGlobalDarkMode,

package/dist/{chunk-Q5RMVTAU.mjs → chunk-J322Q3UR.mjs}

@@ -5,7 +5,7 @@ import {
   isWeb,
   resolve,
   useGlobalDarkMode
-} from "./chunk-V5KHX4CZ.mjs";
+} from "./chunk-ADRZPFQC.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";

package/dist/index.d.mts

@@ -122,6 +122,13 @@ declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
 declare function getConfig(): ResolvedConfig;
 declare function buildConfig(userConfig: FrameworkConfig): ResolvedConfig;
 declare function updateConfig(userConfig: FrameworkConfig): void;
+/**
+ * Like updateConfig, but only calls it when the config object reference has
+ * actually changed. Used by the Babel-injected IIFE so that:
+ *  - multiple files with kbach classes don't re-run the update on every load
+ *  - Fast Refresh DOES re-run when kbach.config.js changes (new module → new object)
+ */
+declare function initConfig(userConfig: FrameworkConfig): void;
 
 interface ThemeContextValue {
     /** The user-selected mode ('light' | 'dark' | 'system') */
@@ -335,4 +342,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useStyles, useTheme, wrapColors };

package/dist/index.d.ts

@@ -122,6 +122,13 @@ declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
 declare function getConfig(): ResolvedConfig;
 declare function buildConfig(userConfig: FrameworkConfig): ResolvedConfig;
 declare function updateConfig(userConfig: FrameworkConfig): void;
+/**
+ * Like updateConfig, but only calls it when the config object reference has
+ * actually changed. Used by the Babel-injected IIFE so that:
+ *  - multiple files with kbach classes don't re-run the update on every load
+ *  - Fast Refresh DOES re-run when kbach.config.js changes (new module → new object)
+ */
+declare function initConfig(userConfig: FrameworkConfig): void;
 
 interface ThemeContextValue {
     /** The user-selected mode ('light' | 'dark' | 'system') */
@@ -335,4 +342,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useStyles, useTheme, wrapColors };

package/dist/index.js

@@ -40,6 +40,7 @@ __export(index_exports, {
   defaultTheme: () => defaultTheme,
   flatten: () => flatten,
   getConfig: () => getConfig,
+  initConfig: () => initConfig,
   kb: () => kb,
   parseClass: () => parseClass,
   parseClasses: () => parseClasses,
@@ -1964,9 +1965,6 @@ function clearPluginUtilities() {
 function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
-function getPluginResolverMap() {
-  return PLUGIN_RESOLVERS;
-}
 
 // src/core/resolver.ts
 var styleCache = new LRUCache(1e4);
@@ -2212,6 +2210,28 @@ function getConfig() {
   store.resolved = buildConfig({});
   return store.resolved;
 }
+function resolveOneRef(ref, colors) {
+  const m = /^([a-z][a-z0-9]*)-(\d+)$/.exec(ref);
+  if (!m) return null;
+  const entry = colors[m[1]];
+  if (!entry || typeof entry !== "object") return null;
+  return entry[m[2]] ?? null;
+}
+function resolveColorRefs(colors) {
+  const out = {};
+  for (const [key, val] of Object.entries(colors)) {
+    if (typeof val === "string") {
+      out[key] = resolveOneRef(val, colors) ?? val;
+    } else {
+      const shades = {};
+      for (const [shade, hex] of Object.entries(val)) {
+        shades[shade] = resolveOneRef(hex, colors) ?? hex;
+      }
+      out[key] = shades;
+    }
+  }
+  return out;
+}
 function buildConfig(userConfig) {
   let theme = { ...defaultTheme };
   if (userConfig.theme) {
@@ -2230,6 +2250,7 @@ function buildConfig(userConfig) {
       }
     }
   }
+  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
   const resolved = {
     darkMode: userConfig.darkMode ?? "attribute",
     theme,
@@ -2245,7 +2266,6 @@ function buildConfig(userConfig) {
 }
 function makePluginAPI(theme) {
   const standalone = getPluginStandaloneMap();
-  const resolvers = getPluginResolverMap();
   return {
     addUtility(name, styles) {
       standalone[name] = styles;
@@ -2276,11 +2296,16 @@ function onConfigChange(listener) {
 function updateConfig(userConfig) {
   const store = getConfigStore();
   store.resolved = buildConfig(userConfig);
+  store._src = userConfig;
   clearCache();
   for (const listener of store.listeners) {
     listener(store.resolved);
   }
 }
+function initConfig(userConfig) {
+  if (getConfigStore()._src === userConfig) return;
+  updateConfig(userConfig);
+}
 var customVariants = new Proxy(
   {},
   {
@@ -2409,7 +2434,8 @@ function ThemeProvider({
   }, []);
   (0, import_react3.useEffect)(() => {
     if (!configOverride) return;
-    setResolvedConfig(buildConfig(configOverride));
+    updateConfig(configOverride);
+    setResolvedConfig(getConfig());
   }, [configOverride]);
   (0, import_react3.useEffect)(() => {
     if (configOverride) return;
@@ -2747,6 +2773,7 @@ function cx(...classes) {
   defaultTheme,
   flatten,
   getConfig,
+  initConfig,
   kb,
   parseClass,
   parseClasses,

package/dist/index.mjs

@@ -6,6 +6,7 @@ import {
   defaultTheme,
   flatten,
   getConfig,
+  initConfig,
   isWeb,
   onConfigChange,
   parseClass,
@@ -15,7 +16,7 @@ import {
   syncGlobalDarkMode,
   updateConfig,
   useGlobalDarkMode
-} from "./chunk-V5KHX4CZ.mjs";
+} from "./chunk-ADRZPFQC.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -176,7 +177,8 @@ function ThemeProvider({
   }, []);
   useEffect(() => {
     if (!configOverride) return;
-    setResolvedConfig(buildConfig(configOverride));
+    updateConfig(configOverride);
+    setResolvedConfig(getConfig());
   }, [configOverride]);
   useEffect(() => {
     if (configOverride) return;
@@ -447,6 +449,7 @@ export {
   defaultTheme,
   flatten,
   getConfig,
+  initConfig,
   kb,
   parseClass,
   parseClasses,

package/dist/jsx-dev-runtime.js

@@ -1870,9 +1870,6 @@ function clearPluginUtilities() {
 function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
-function getPluginResolverMap() {
-  return PLUGIN_RESOLVERS;
-}
 
 // src/core/resolver.ts
 var styleCache = new LRUCache(1e4);
@@ -2115,6 +2112,28 @@ function getConfig() {
   store.resolved = buildConfig({});
   return store.resolved;
 }
+function resolveOneRef(ref, colors) {
+  const m = /^([a-z][a-z0-9]*)-(\d+)$/.exec(ref);
+  if (!m) return null;
+  const entry = colors[m[1]];
+  if (!entry || typeof entry !== "object") return null;
+  return entry[m[2]] ?? null;
+}
+function resolveColorRefs(colors) {
+  const out = {};
+  for (const [key, val] of Object.entries(colors)) {
+    if (typeof val === "string") {
+      out[key] = resolveOneRef(val, colors) ?? val;
+    } else {
+      const shades = {};
+      for (const [shade, hex] of Object.entries(val)) {
+        shades[shade] = resolveOneRef(hex, colors) ?? hex;
+      }
+      out[key] = shades;
+    }
+  }
+  return out;
+}
 function buildConfig(userConfig) {
   let theme = { ...defaultTheme };
   if (userConfig.theme) {
@@ -2133,6 +2152,7 @@ function buildConfig(userConfig) {
       }
     }
   }
+  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
   const resolved = {
     darkMode: userConfig.darkMode ?? "attribute",
     theme,
@@ -2148,7 +2168,6 @@ function buildConfig(userConfig) {
 }
 function makePluginAPI(theme) {
   const standalone = getPluginStandaloneMap();
-  const resolvers = getPluginResolverMap();
   return {
     addUtility(name, styles) {
       standalone[name] = styles;

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-Q5RMVTAU.mjs";
-import "./chunk-V5KHX4CZ.mjs";
+} from "./chunk-J322Q3UR.mjs";
+import "./chunk-ADRZPFQC.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -1869,9 +1869,6 @@ function clearPluginUtilities() {
 function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
-function getPluginResolverMap() {
-  return PLUGIN_RESOLVERS;
-}
 
 // src/core/resolver.ts
 var styleCache = new LRUCache(1e4);
@@ -2114,6 +2111,28 @@ function getConfig() {
   store.resolved = buildConfig({});
   return store.resolved;
 }
+function resolveOneRef(ref, colors) {
+  const m = /^([a-z][a-z0-9]*)-(\d+)$/.exec(ref);
+  if (!m) return null;
+  const entry = colors[m[1]];
+  if (!entry || typeof entry !== "object") return null;
+  return entry[m[2]] ?? null;
+}
+function resolveColorRefs(colors) {
+  const out = {};
+  for (const [key, val] of Object.entries(colors)) {
+    if (typeof val === "string") {
+      out[key] = resolveOneRef(val, colors) ?? val;
+    } else {
+      const shades = {};
+      for (const [shade, hex] of Object.entries(val)) {
+        shades[shade] = resolveOneRef(hex, colors) ?? hex;
+      }
+      out[key] = shades;
+    }
+  }
+  return out;
+}
 function buildConfig(userConfig) {
   let theme = { ...defaultTheme };
   if (userConfig.theme) {
@@ -2132,6 +2151,7 @@ function buildConfig(userConfig) {
       }
     }
   }
+  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
   const resolved = {
     darkMode: userConfig.darkMode ?? "attribute",
     theme,
@@ -2147,7 +2167,6 @@ function buildConfig(userConfig) {
 }
 function makePluginAPI(theme) {
   const standalone = getPluginStandaloneMap();
-  const resolvers = getPluginResolverMap();
   return {
     addUtility(name, styles) {
       standalone[name] = styles;

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-Q5RMVTAU.mjs";
-import "./chunk-V5KHX4CZ.mjs";
+} from "./chunk-J322Q3UR.mjs";
+import "./chunk-ADRZPFQC.mjs";
 export {
   Fragment,
   jsx,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",