@kbach/react 0.6.34 → 0.6.36

package/dist/{chunk-O7GFDFVJ.mjs → chunk-ATZF2VI7.mjs}

@@ -2203,10 +2203,6 @@ function expandModeAwareColorClasses(classString, colors) {
       out.push(token);
       continue;
     }
-    if (parsed.modifiers.includes("dark") || parsed.modifiers.includes("light")) {
-      out.push(token);
-      continue;
-    }
     const slashIdx = parsed.value.indexOf("/");
     const colorPart = slashIdx > 0 ? parsed.value.slice(0, slashIdx) : parsed.value;
     const opacitySuffix = slashIdx > 0 ? parsed.value.slice(slashIdx) : "";
@@ -2218,6 +2214,12 @@ function expandModeAwareColorClasses(classString, colors) {
     changed = true;
     const bang = parsed.important ? "!" : "";
     const modPrefix = parsed.modifiers.map((m) => `${m}:`).join("");
+    const explicitScheme = parsed.modifiers.map((m) => getModifier(m)?.darkScheme).find((s) => s);
+    if (explicitScheme) {
+      const side = explicitScheme === "dark" ? pair.dark : pair.light;
+      out.push(`${bang}${modPrefix}${parsed.utility}-[${side}]${opacitySuffix}`);
+      continue;
+    }
     out.push(`${bang}${modPrefix}${parsed.utility}-[${pair.light}]${opacitySuffix}`);
     out.push(`${bang}dark:${modPrefix}${parsed.utility}-[${pair.dark}]${opacitySuffix}`);
   }
@@ -2773,6 +2775,48 @@ var defaultTheme = {
   animation: {}
 };
 
+// src/core/generateTypesDts.ts
+var HEADER = `// AUTO-GENERATED by Kbach from your kbach.config.js \u2014 do not edit by hand.
+// Regenerated automatically every time your dev server / Metro picks up a
+// change to that file. Safe (and recommended) to add to .gitignore.
+//
+// Gives useColors()/useSpacing() full autocomplete and typo-catching for your
+// custom colors/spacing keys with zero manual setup \u2014 see KbachCustomColors'
+// doc comment in @kbach/react if you'd rather hand-author this instead.
+import '@kbach/react';
+`;
+var IDENT_RE = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+function propKey(name) {
+  return IDENT_RE.test(name) ? name : JSON.stringify(name);
+}
+function generateKbachTypesDts(theme) {
+  const colorLines = [];
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (name in defaultColors) continue;
+    const isFlat = typeof value === "string" || isModeAwareColor(value);
+    colorLines.push(`    ${propKey(name)}: ${isFlat ? "string" : "ColorScale"};`);
+  }
+  const spacingLines = [];
+  for (const key of Object.keys(theme.spacing)) {
+    if (key in defaultTheme.spacing) continue;
+    spacingLines.push(`    ${propKey(key)}: true;`);
+  }
+  if (colorLines.length === 0 && spacingLines.length === 0) return "";
+  const body = [
+    colorLines.length > 0 ? `  interface KbachCustomColors {
+${colorLines.join("\n")}
+  }` : null,
+    spacingLines.length > 0 ? `  interface KbachCustomSpacing {
+${spacingLines.join("\n")}
+  }` : null
+  ].filter((s) => s !== null).join("\n\n");
+  return `${HEADER}
+declare module '@kbach/react' {
+${body}
+}
+`;
+}
+
 // src/core/reset.ts
 var RESET_STYLE_ID = "kbach-reset";
 var BASE_RESET = [
@@ -3941,6 +3985,7 @@ export {
   expandModeAwareColorClasses,
   defaultColors,
   defaultTheme,
+  generateKbachTypesDts,
   RESET_STYLE_ID,
   BASE_RESET,
   syncGlobalWidth,

package/dist/{chunk-Y6JF3TZM.mjs → chunk-YDLZI5J6.mjs}

@@ -26,7 +26,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-O7GFDFVJ.mjs";
+} from "./chunk-ATZF2VI7.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/core/index.d.ts

@@ -190,6 +190,20 @@ declare function isModeAwareColor(v: unknown): v is {
  * normal parsing — e.g. `bg-surface` becomes `bg-[#ffffff] dark:bg-[#111827]`.
  * `bg-surface/50` becomes `bg-[#ffffff]/50 dark:bg-[#111827]/50` (the arbitrary-
  * color-plus-opacity composition already resolveColor() already supports).
+ * `hover:bg-surface` becomes `hover:bg-[#ffffff] dark:hover:bg-[#111827]` —
+ * every other modifier already present on the token carries through onto
+ * both halves of the pair unchanged.
+ *
+ * A token that ALREADY carries an explicit dark:/light:/not-dark:/not-light:
+ * modifier (someone writes `dark:hover:bg-primary` on a `primary` that's
+ * already mode-aware, usually out of habit from before it was) isn't split
+ * into a pair — that would be redundant on top of an already-explicit
+ * choice. Instead the matching side is substituted in place and every
+ * modifier, including the dark:/light: itself, is left exactly as written,
+ * so `dark:hover:bg-primary` still only applies in dark mode, using the
+ * dark side (not the resolveColor()-level fallback's light side, which is
+ * only ever reached by a mode-aware pair that skipped this expansion
+ * entirely — not a path normal className resolution takes).
  *
  * Runs once, upfront, purely as a string rewrite — everything downstream
  * (CSS generation, native bucketing/flatten(), the existing dark: reactivity
@@ -200,6 +214,19 @@ declare function isModeAwareColor(v: unknown): v is {
  */
 declare function expandModeAwareColorClasses(classString: string, colors: ThemeColors): string;
 
+/**
+ * Generates the KbachCustomColors/KbachCustomSpacing module-augmentation
+ * source for every color/spacing key `extend.theme` added beyond the built-in
+ * defaults. Called by both the Vite plugin and @kbach/native's Babel plugin —
+ * kept here, shared, so "which colors count as custom" and "flat string vs.
+ * ColorScale" can't drift between the two.
+ *
+ * Returns '' (nothing to write) when the theme adds no custom colors or
+ * spacing keys at all, so callers can skip writing/deleting a file for the
+ * common case of a project still on the stock theme.
+ */
+declare function generateKbachTypesDts(theme: ThemeConfig): string;
+
 declare const defaultColors: {
     transparent: string;
     current: string;
@@ -1308,4 +1335,4 @@ declare function subscribeGlobalWidth(listener: WidthListener): () => void;
  */
 declare function getActiveBreakpoints(width?: number, screens?: Record<string, number>): Set<string>;
 
-export { BASE_RESET, type ColorShades, type ColorValue, type DarkMode, type DefaultColorName, type DefaultSpacingKey, type FrameworkConfig, LRUCache, type ParsedClass, type Platform, type PluginAPI, RESET_STYLE_ID, type ResolvedConfig, type ResolvedStyle, type StyleValue, type ThemeColors, type ThemeConfig, type ThemeMode, type ThemeSpacing, buildConfig, clearCache, clearPluginModifiers, customVariants, defaultColors, defaultTheme, disableRuntimeCSS, escapeCSSSelector, expandModeAwareColorClasses, flatten, generateClassCSS, getActiveBreakpoints, getAllModifierNames, getBuiltinStandaloneNames, getBuiltinUtilityPrefixes, getConfig, getDefaultFontFamily, getEffectiveIsWeb, getGlobalDarkMode, getGlobalScreens, getGlobalWidth, getInteractiveModifiers, getModeModifiers, getModifier, getResponsiveModifiers, initConfig, isKnownModifier, isKnownUtility, isModeAwareColor, isNative, isRuntimeCSSDisabled, isWeb, kbachWarn, matchModifier, normalizeClassString, onConfigChange, parseClass, parseClasses, parseHexRgb, registerModifier, resetConfig, resolve, resolveColor, resolveSizing, resolveSpacing, resolveUtility, setDefaultFontFamily, setGlobalDarkMode, setGlobalWidth, setResolveTarget, splitClassTokens, subscribeGlobalDarkMode, subscribeGlobalWidth, syncGlobalDarkMode, syncGlobalScreens, syncGlobalWidth, toNativeValue, updateConfig };
+export { BASE_RESET, type ColorShades, type ColorValue, type DarkMode, type DefaultColorName, type DefaultSpacingKey, type FrameworkConfig, LRUCache, type ParsedClass, type Platform, type PluginAPI, RESET_STYLE_ID, type ResolvedConfig, type ResolvedStyle, type StyleValue, type ThemeColors, type ThemeConfig, type ThemeMode, type ThemeSpacing, buildConfig, clearCache, clearPluginModifiers, customVariants, defaultColors, defaultTheme, disableRuntimeCSS, escapeCSSSelector, expandModeAwareColorClasses, flatten, generateClassCSS, generateKbachTypesDts, getActiveBreakpoints, getAllModifierNames, getBuiltinStandaloneNames, getBuiltinUtilityPrefixes, getConfig, getDefaultFontFamily, getEffectiveIsWeb, getGlobalDarkMode, getGlobalScreens, getGlobalWidth, getInteractiveModifiers, getModeModifiers, getModifier, getResponsiveModifiers, initConfig, isKnownModifier, isKnownUtility, isModeAwareColor, isNative, isRuntimeCSSDisabled, isWeb, kbachWarn, matchModifier, normalizeClassString, onConfigChange, parseClass, parseClasses, parseHexRgb, registerModifier, resetConfig, resolve, resolveColor, resolveSizing, resolveSpacing, resolveUtility, setDefaultFontFamily, setGlobalDarkMode, setGlobalWidth, setResolveTarget, splitClassTokens, subscribeGlobalDarkMode, subscribeGlobalWidth, syncGlobalDarkMode, syncGlobalScreens, syncGlobalWidth, toNativeValue, updateConfig };

package/dist/core/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   expandModeAwareColorClasses: () => expandModeAwareColorClasses,
   flatten: () => flatten,
   generateClassCSS: () => generateClassCSS,
+  generateKbachTypesDts: () => generateKbachTypesDts,
   getActiveBreakpoints: () => getActiveBreakpoints,
   getAllModifierNames: () => getAllModifierNames,
   getBuiltinStandaloneNames: () => getBuiltinStandaloneNames,
@@ -2291,10 +2292,6 @@ function expandModeAwareColorClasses(classString, colors) {
       out.push(token);
       continue;
     }
-    if (parsed.modifiers.includes("dark") || parsed.modifiers.includes("light")) {
-      out.push(token);
-      continue;
-    }
     const slashIdx = parsed.value.indexOf("/");
     const colorPart = slashIdx > 0 ? parsed.value.slice(0, slashIdx) : parsed.value;
     const opacitySuffix = slashIdx > 0 ? parsed.value.slice(slashIdx) : "";
@@ -2306,6 +2303,12 @@ function expandModeAwareColorClasses(classString, colors) {
     changed = true;
     const bang = parsed.important ? "!" : "";
     const modPrefix = parsed.modifiers.map((m) => `${m}:`).join("");
+    const explicitScheme = parsed.modifiers.map((m) => getModifier(m)?.darkScheme).find((s) => s);
+    if (explicitScheme) {
+      const side = explicitScheme === "dark" ? pair.dark : pair.light;
+      out.push(`${bang}${modPrefix}${parsed.utility}-[${side}]${opacitySuffix}`);
+      continue;
+    }
     out.push(`${bang}${modPrefix}${parsed.utility}-[${pair.light}]${opacitySuffix}`);
     out.push(`${bang}dark:${modPrefix}${parsed.utility}-[${pair.dark}]${opacitySuffix}`);
   }
@@ -2861,6 +2864,48 @@ var defaultTheme = {
   animation: {}
 };
 
+// src/core/generateTypesDts.ts
+var HEADER = `// AUTO-GENERATED by Kbach from your kbach.config.js \u2014 do not edit by hand.
+// Regenerated automatically every time your dev server / Metro picks up a
+// change to that file. Safe (and recommended) to add to .gitignore.
+//
+// Gives useColors()/useSpacing() full autocomplete and typo-catching for your
+// custom colors/spacing keys with zero manual setup \u2014 see KbachCustomColors'
+// doc comment in @kbach/react if you'd rather hand-author this instead.
+import '@kbach/react';
+`;
+var IDENT_RE = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+function propKey(name) {
+  return IDENT_RE.test(name) ? name : JSON.stringify(name);
+}
+function generateKbachTypesDts(theme) {
+  const colorLines = [];
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (name in defaultColors) continue;
+    const isFlat = typeof value === "string" || isModeAwareColor(value);
+    colorLines.push(`    ${propKey(name)}: ${isFlat ? "string" : "ColorScale"};`);
+  }
+  const spacingLines = [];
+  for (const key of Object.keys(theme.spacing)) {
+    if (key in defaultTheme.spacing) continue;
+    spacingLines.push(`    ${propKey(key)}: true;`);
+  }
+  if (colorLines.length === 0 && spacingLines.length === 0) return "";
+  const body = [
+    colorLines.length > 0 ? `  interface KbachCustomColors {
+${colorLines.join("\n")}
+  }` : null,
+    spacingLines.length > 0 ? `  interface KbachCustomSpacing {
+${spacingLines.join("\n")}
+  }` : null
+  ].filter((s) => s !== null).join("\n\n");
+  return `${HEADER}
+declare module '@kbach/react' {
+${body}
+}
+`;
+}
+
 // src/core/reset.ts
 var RESET_STYLE_ID = "kbach-reset";
 var BASE_RESET = [
@@ -3502,6 +3547,7 @@ function subscribeGlobalDarkMode(callback) {
   expandModeAwareColorClasses,
   flatten,
   generateClassCSS,
+  generateKbachTypesDts,
   getActiveBreakpoints,
   getAllModifierNames,
   getBuiltinStandaloneNames,

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
 import * as __core from './core';
 import { ThemeMode, ResolvedConfig, DefaultColorName, defaultColors, ThemeColors, DefaultSpacingKey, ThemeSpacing, FrameworkConfig, StyleValue, ResolvedStyle } from './core';
-export { DefaultColorName, DefaultSpacingKey, FrameworkConfig, ParsedClass, PluginAPI, ResolvedConfig, ResolvedStyle, StyleValue, ThemeConfig, ThemeMode, buildConfig, clearCache, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, updateConfig } from './core';
+export { DefaultColorName, DefaultSpacingKey, FrameworkConfig, ParsedClass, PluginAPI, ResolvedConfig, ResolvedStyle, StyleValue, ThemeConfig, ThemeMode, buildConfig, clearCache, defaultColors, defaultTheme, disableRuntimeCSS, flatten, generateKbachTypesDts, getConfig, initConfig, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, updateConfig } from './core';
 export { r as registerWebElement } from './web-substitute-CfpYFnE7.js';
 
 interface ThemeContextValue {
@@ -29,17 +29,43 @@ interface ColorScale {
     /** `colors.blue['6/50']` → shade 6 at 50% opacity */
     readonly [key: string]: string;
 }
-type ColorValueFor<K extends string> = K extends keyof typeof defaultColors ? (typeof defaultColors)[K] extends string ? string : ColorScale : ColorScale | string;
 /**
- * `ColorName` defaults to the built-in theme's color names (`DefaultColorName`,
- * derived from `defaultColors` in core/theme.ts), so `useColors()` gets full
- * autocomplete and typo-catching out of the box for any project on the default
- * theme. A customized `kbach.config.js` isn't visible to TypeScript (it's a
- * plain .js file loaded at runtime, not a statically-analyzed module), so a
- * project with extra colors needs to widen the type parameter explicitly:
+ * Empty on purpose — augment it via declaration merging so `useColors()` (and
+ * `useSpacing()`'s equivalent, `KbachCustomSpacing`) know about a project's
+ * `kbach.config.js` colors without repeating a type parameter at every call
+ * site. `kbach.config.js` is a plain runtime-loaded .js file, so TypeScript
+ * can't see into it on its own — this is the same declaration-merging pattern
+ * styled-components' `DefaultTheme` and i18next's resource typing use for the
+ * identical problem. Put this in any .d.ts your tsconfig includes:
+ *
+ * ```ts
+ * import '@kbach/react'; // or '@kbach/native' — either works, native re-exports react's types
+ * declare module '@kbach/react' {
+ *   interface KbachCustomColors {
+ *     primary: string;    // a flat color, like the built-in `white`/`black`
+ *     brand: ColorScale;  // a 1–12 shade scale, like the built-in `blue`/`red`
+ *   }
+ * }
+ * ```
+ *
+ * A mode-aware `{ light, dark }` config color (see ColorValue) still resolves
+ * to a flat `string` at read time — declare those as `string` here too, not
+ * as the config shape.
+ */
+interface KbachCustomColors {
+}
+type ColorValueFor<K extends string> = K extends keyof typeof defaultColors ? (typeof defaultColors)[K] extends string ? string : ColorScale : K extends keyof KbachCustomColors ? KbachCustomColors[K] : ColorScale | string;
+/** Every color name TypeScript knows about without an explicit type parameter: the built-in theme plus whatever's been added via the KbachCustomColors augmentation above. */
+type KnownColorName = DefaultColorName | Extract<keyof KbachCustomColors, string>;
+/**
+ * `ColorName` defaults to `KnownColorName` (the built-in theme's color names
+ * plus anything augmented onto `KbachCustomColors` above), so `useColors()`
+ * gets full autocomplete and typo-catching out of the box — including custom
+ * `kbach.config.js` colors, once augmented once project-wide. Without that
+ * augmentation, a project with extra colors can still widen per call instead:
  * `useColors<DefaultColorName | 'brand'>()`.
  */
-type ColorsAPI<ColorName extends string = DefaultColorName> = {
+type ColorsAPI<ColorName extends string = KnownColorName> = {
     readonly [K in ColorName]: ColorValueFor<K>;
 } & {
     /**
@@ -50,22 +76,40 @@ type ColorsAPI<ColorName extends string = DefaultColorName> = {
      */
     readonly alpha: (color: string, opacity?: number) => string;
 };
-declare function wrapColors<ColorName extends string = DefaultColorName>(rawColors: ThemeColors, isDark?: boolean): ColorsAPI<ColorName>;
-declare function useColors<ColorName extends string = DefaultColorName>(): ColorsAPI<ColorName>;
+declare function wrapColors<ColorName extends string = KnownColorName>(rawColors: ThemeColors, isDark?: boolean): ColorsAPI<ColorName>;
+declare function useColors<ColorName extends string = KnownColorName>(): ColorsAPI<ColorName>;
 
 /**
- * `SpacingKey` defaults to the built-in theme's spacing keys (`DefaultSpacingKey`,
- * derived from `defaultTheme.spacing` in core/theme.ts), so `useSpacing()` gets
- * full autocomplete and typo-catching out of the box for any project on the
- * default scale. A customized `kbach.config.js` isn't visible to TypeScript
- * (it's a plain .js file loaded at runtime, not a statically-analyzed module),
- * so a project with extra spacing keys needs to widen the type parameter
- * explicitly: `useSpacing<DefaultSpacingKey | '18'>()`.
+ * Empty on purpose — augment it via declaration merging so `useSpacing()`
+ * (like `useColors()`'s `KbachCustomColors`) knows about a project's
+ * `kbach.config.js` spacing keys without repeating a type parameter at every
+ * call site:
+ *
+ * ```ts
+ * import '@kbach/react'; // or '@kbach/native'
+ * declare module '@kbach/react' {
+ *   interface KbachCustomSpacing {
+ *     18: true; // value doesn't matter — only the key is read (see SpacingAPI)
+ *   }
+ * }
+ * ```
+ */
+interface KbachCustomSpacing {
+}
+/** Every spacing key TypeScript knows about without an explicit type parameter. */
+type KnownSpacingKey = DefaultSpacingKey | Extract<keyof KbachCustomSpacing, string>;
+/**
+ * `SpacingKey` defaults to `KnownSpacingKey` (the built-in theme's spacing keys
+ * plus anything augmented onto `KbachCustomSpacing` above), so `useSpacing()`
+ * gets full autocomplete and typo-catching out of the box — including custom
+ * `kbach.config.js` keys, once augmented once project-wide. Without that
+ * augmentation, a project with extra keys can still widen per call instead:
+ * `useSpacing<DefaultSpacingKey | '18'>()`.
  */
-type SpacingAPI<SpacingKey extends string = DefaultSpacingKey> = {
+type SpacingAPI<SpacingKey extends string = KnownSpacingKey> = {
     readonly [K in SpacingKey]: number | string;
 };
-declare function wrapSpacing<SpacingKey extends string = DefaultSpacingKey>(rawSpacing: ThemeSpacing): SpacingAPI<SpacingKey>;
+declare function wrapSpacing<SpacingKey extends string = KnownSpacingKey>(rawSpacing: ThemeSpacing): SpacingAPI<SpacingKey>;
 /**
  * Returns the active theme's spacing scale as a typed, autocomplete-friendly
  * object — useful anywhere a raw JS number/string is needed instead of a
@@ -80,7 +124,7 @@ declare function wrapSpacing<SpacingKey extends string = DefaultSpacingKey>(rawS
  * spacing['1/2']  // '50%'
  * ```
  */
-declare function useSpacing<SpacingKey extends string = DefaultSpacingKey>(): SpacingAPI<SpacingKey>;
+declare function useSpacing<SpacingKey extends string = KnownSpacingKey>(): SpacingAPI<SpacingKey>;
 
 interface ThemeProviderProps {
     children: ReactNode;
@@ -278,4 +322,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 InteractionState, InteractiveWrapper, type InteractiveWrapperProps, KbachReset, type SpacingAPI, type StyledProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, cx, kb, styled, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useSpacing, useStyles, useTheme, wrapColors, wrapSpacing };
+export { type ColorScale, type ColorsAPI, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type KbachCustomColors, type KbachCustomSpacing, KbachReset, type SpacingAPI, type StyledProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, cx, kb, styled, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useSpacing, useStyles, useTheme, wrapColors, wrapSpacing };

package/dist/index.js

@@ -42,6 +42,7 @@ __export(index_exports, {
   defaultTheme: () => import_core12.defaultTheme,
   disableRuntimeCSS: () => import_core12.disableRuntimeCSS,
   flatten: () => import_core12.flatten,
+  generateKbachTypesDts: () => import_core12.generateKbachTypesDts,
   getConfig: () => import_core12.getConfig,
   initConfig: () => import_core12.initConfig,
   kb: () => kb,
@@ -1113,6 +1114,7 @@ var import_core12 = require("./core");
   defaultTheme,
   disableRuntimeCSS,
   flatten,
+  generateKbachTypesDts,
   getConfig,
   initConfig,
   kb,

package/dist/index.mjs

@@ -11,6 +11,7 @@ import {
   defaultTheme,
   disableRuntimeCSS,
   flatten,
+  generateKbachTypesDts,
   getActiveBreakpoints,
   getConfig,
   getEffectiveIsWeb,
@@ -44,7 +45,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-O7GFDFVJ.mjs";
+} from "./chunk-ATZF2VI7.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -549,6 +550,7 @@ export {
   defaultTheme,
   disableRuntimeCSS,
   flatten,
+  generateKbachTypesDts,
   getConfig,
   initConfig,
   kb,

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-Y6JF3TZM.mjs";
-import "./chunk-O7GFDFVJ.mjs";
+} from "./chunk-YDLZI5J6.mjs";
+import "./chunk-ATZF2VI7.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-Y6JF3TZM.mjs";
+} from "./chunk-YDLZI5J6.mjs";
 import {
   registerWebElement
-} from "./chunk-O7GFDFVJ.mjs";
+} from "./chunk-ATZF2VI7.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -2800,10 +2800,6 @@ function expandModeAwareColorClasses(classString, colors) {
       out.push(token);
       continue;
     }
-    if (parsed.modifiers.includes("dark") || parsed.modifiers.includes("light")) {
-      out.push(token);
-      continue;
-    }
     const slashIdx = parsed.value.indexOf("/");
     const colorPart = slashIdx > 0 ? parsed.value.slice(0, slashIdx) : parsed.value;
     const opacitySuffix = slashIdx > 0 ? parsed.value.slice(slashIdx) : "";
@@ -2815,6 +2811,12 @@ function expandModeAwareColorClasses(classString, colors) {
     changed = true;
     const bang = parsed.important ? "!" : "";
     const modPrefix = parsed.modifiers.map((m) => `${m}:`).join("");
+    const explicitScheme = parsed.modifiers.map((m) => getModifier(m)?.darkScheme).find((s) => s);
+    if (explicitScheme) {
+      const side = explicitScheme === "dark" ? pair.dark : pair.light;
+      out.push(`${bang}${modPrefix}${parsed.utility}-[${side}]${opacitySuffix}`);
+      continue;
+    }
     out.push(`${bang}${modPrefix}${parsed.utility}-[${pair.light}]${opacitySuffix}`);
     out.push(`${bang}dark:${modPrefix}${parsed.utility}-[${pair.dark}]${opacitySuffix}`);
   }
@@ -3196,6 +3198,48 @@ function makePluginAPI(theme) {
 }
 var customVariants = configStore.customVariants;
 
+// src/core/generateTypesDts.ts
+var HEADER = `// AUTO-GENERATED by Kbach from your kbach.config.js \u2014 do not edit by hand.
+// Regenerated automatically every time your dev server / Metro picks up a
+// change to that file. Safe (and recommended) to add to .gitignore.
+//
+// Gives useColors()/useSpacing() full autocomplete and typo-catching for your
+// custom colors/spacing keys with zero manual setup \u2014 see KbachCustomColors'
+// doc comment in @kbach/react if you'd rather hand-author this instead.
+import '@kbach/react';
+`;
+var IDENT_RE = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+function propKey(name) {
+  return IDENT_RE.test(name) ? name : JSON.stringify(name);
+}
+function generateKbachTypesDts(theme) {
+  const colorLines = [];
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (name in defaultColors) continue;
+    const isFlat = typeof value === "string" || isModeAwareColor(value);
+    colorLines.push(`    ${propKey(name)}: ${isFlat ? "string" : "ColorScale"};`);
+  }
+  const spacingLines = [];
+  for (const key of Object.keys(theme.spacing)) {
+    if (key in defaultTheme.spacing) continue;
+    spacingLines.push(`    ${propKey(key)}: true;`);
+  }
+  if (colorLines.length === 0 && spacingLines.length === 0) return "";
+  const body = [
+    colorLines.length > 0 ? `  interface KbachCustomColors {
+${colorLines.join("\n")}
+  }` : null,
+    spacingLines.length > 0 ? `  interface KbachCustomSpacing {
+${spacingLines.join("\n")}
+  }` : null
+  ].filter((s) => s !== null).join("\n\n");
+  return `${HEADER}
+declare module '@kbach/react' {
+${body}
+}
+`;
+}
+
 // src/vite-plugin.ts
 var process2 = import_node_process.default;
 function normPath(p) {
@@ -3216,6 +3260,9 @@ function warn(message) {
 function warnBlock(header, ...lines) {
   console.warn([`${TAG()} ${yellow(header)}`, ...lines].join("\n"));
 }
+function log(message) {
+  console.log(`${TAG()} ${message}`);
+}
 function findLineCol(code, needle) {
   const index = code.indexOf(needle);
   if (index === -1) return null;
@@ -3481,6 +3528,28 @@ ${block}` : block;
   (0, import_fs.writeFileSync)(filePath, next, "utf-8");
   return true;
 }
+function writeKbachTypesDts(root, theme) {
+  const filePath = (0, import_path.join)(root, "kbach-types.d.ts");
+  const content = generateKbachTypesDts(theme);
+  let existing = null;
+  try {
+    existing = (0, import_fs.readFileSync)(filePath, "utf-8");
+  } catch {
+  }
+  if (content === (existing ?? "")) return;
+  try {
+    if (content === "") {
+      (0, import_fs.unlinkSync)(filePath);
+    } else {
+      const isNew = existing === null;
+      (0, import_fs.writeFileSync)(filePath, content, "utf-8");
+      if (isNew) {
+        log(`Generated kbach-types.d.ts \u2014 gives useColors()/useSpacing() autocomplete for your custom colors/spacing keys. Safe to add to .gitignore.`);
+      }
+    }
+  } catch {
+  }
+}
 function toNumericScreens(screens) {
   const out = {};
   for (const [k, v] of Object.entries(screens)) {
@@ -3700,6 +3769,7 @@ function kbach(userConfigOrOptions) {
     },
     configResolved(resolved) {
       root = resolved.root;
+      writeKbachTypesDts(root, cfg.theme);
       const names = new Set(resolved.plugins.map((p) => p.name));
       if (names.has("react-router") && names.has("vite:react-refresh")) {
         warnBlock(

package/dist/vite-plugin.mjs

@@ -1,5 +1,5 @@
 // src/vite-plugin.ts
-import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
+import { readFileSync, writeFileSync, unlinkSync, readdirSync, statSync } from "fs";
 import { join, relative } from "path";
 import processImport from "process";
 
@@ -2766,10 +2766,6 @@ function expandModeAwareColorClasses(classString, colors) {
       out.push(token);
       continue;
     }
-    if (parsed.modifiers.includes("dark") || parsed.modifiers.includes("light")) {
-      out.push(token);
-      continue;
-    }
     const slashIdx = parsed.value.indexOf("/");
     const colorPart = slashIdx > 0 ? parsed.value.slice(0, slashIdx) : parsed.value;
     const opacitySuffix = slashIdx > 0 ? parsed.value.slice(slashIdx) : "";
@@ -2781,6 +2777,12 @@ function expandModeAwareColorClasses(classString, colors) {
     changed = true;
     const bang = parsed.important ? "!" : "";
     const modPrefix = parsed.modifiers.map((m) => `${m}:`).join("");
+    const explicitScheme = parsed.modifiers.map((m) => getModifier(m)?.darkScheme).find((s) => s);
+    if (explicitScheme) {
+      const side = explicitScheme === "dark" ? pair.dark : pair.light;
+      out.push(`${bang}${modPrefix}${parsed.utility}-[${side}]${opacitySuffix}`);
+      continue;
+    }
     out.push(`${bang}${modPrefix}${parsed.utility}-[${pair.light}]${opacitySuffix}`);
     out.push(`${bang}dark:${modPrefix}${parsed.utility}-[${pair.dark}]${opacitySuffix}`);
   }
@@ -3162,6 +3164,48 @@ function makePluginAPI(theme) {
 }
 var customVariants = configStore.customVariants;
 
+// src/core/generateTypesDts.ts
+var HEADER = `// AUTO-GENERATED by Kbach from your kbach.config.js \u2014 do not edit by hand.
+// Regenerated automatically every time your dev server / Metro picks up a
+// change to that file. Safe (and recommended) to add to .gitignore.
+//
+// Gives useColors()/useSpacing() full autocomplete and typo-catching for your
+// custom colors/spacing keys with zero manual setup \u2014 see KbachCustomColors'
+// doc comment in @kbach/react if you'd rather hand-author this instead.
+import '@kbach/react';
+`;
+var IDENT_RE = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+function propKey(name) {
+  return IDENT_RE.test(name) ? name : JSON.stringify(name);
+}
+function generateKbachTypesDts(theme) {
+  const colorLines = [];
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (name in defaultColors) continue;
+    const isFlat = typeof value === "string" || isModeAwareColor(value);
+    colorLines.push(`    ${propKey(name)}: ${isFlat ? "string" : "ColorScale"};`);
+  }
+  const spacingLines = [];
+  for (const key of Object.keys(theme.spacing)) {
+    if (key in defaultTheme.spacing) continue;
+    spacingLines.push(`    ${propKey(key)}: true;`);
+  }
+  if (colorLines.length === 0 && spacingLines.length === 0) return "";
+  const body = [
+    colorLines.length > 0 ? `  interface KbachCustomColors {
+${colorLines.join("\n")}
+  }` : null,
+    spacingLines.length > 0 ? `  interface KbachCustomSpacing {
+${spacingLines.join("\n")}
+  }` : null
+  ].filter((s) => s !== null).join("\n\n");
+  return `${HEADER}
+declare module '@kbach/react' {
+${body}
+}
+`;
+}
+
 // src/vite-plugin.ts
 var process2 = processImport;
 function normPath(p) {
@@ -3182,6 +3226,9 @@ function warn(message) {
 function warnBlock(header, ...lines) {
   console.warn([`${TAG()} ${yellow(header)}`, ...lines].join("\n"));
 }
+function log(message) {
+  console.log(`${TAG()} ${message}`);
+}
 function findLineCol(code, needle) {
   const index = code.indexOf(needle);
   if (index === -1) return null;
@@ -3447,6 +3494,28 @@ ${block}` : block;
   writeFileSync(filePath, next, "utf-8");
   return true;
 }
+function writeKbachTypesDts(root, theme) {
+  const filePath = join(root, "kbach-types.d.ts");
+  const content = generateKbachTypesDts(theme);
+  let existing = null;
+  try {
+    existing = readFileSync(filePath, "utf-8");
+  } catch {
+  }
+  if (content === (existing ?? "")) return;
+  try {
+    if (content === "") {
+      unlinkSync(filePath);
+    } else {
+      const isNew = existing === null;
+      writeFileSync(filePath, content, "utf-8");
+      if (isNew) {
+        log(`Generated kbach-types.d.ts \u2014 gives useColors()/useSpacing() autocomplete for your custom colors/spacing keys. Safe to add to .gitignore.`);
+      }
+    }
+  } catch {
+  }
+}
 function toNumericScreens(screens) {
   const out = {};
   for (const [k, v] of Object.entries(screens)) {
@@ -3666,6 +3735,7 @@ function kbach(userConfigOrOptions) {
     },
     configResolved(resolved) {
       root = resolved.root;
+      writeKbachTypesDts(root, cfg.theme);
       const names = new Set(resolved.plugins.map((p) => p.name));
       if (names.has("react-router") && names.has("vite:react-refresh")) {
         warnBlock(

package/kbach-react.md

@@ -189,7 +189,24 @@ colors.white              // '#ffffff'
 colors['white/20']        // 'rgba(255,255,255,0.2)'
 colors.alpha('#ff6b35', 60) // 'rgba(255,107,53,0.6)'
 ```
-Typed against the built-in theme by default — `colors.blu` (typo) is a compile error. Custom `kbach.config.js` colors aren't visible to TypeScript (runtime-loaded plain `.js`), so widen manually: `useColors<DefaultColorName | 'brand'>()`. `useSpacing()` is the same pattern for the spacing scale (`spacing[4]` → `16`, `spacing.full` → `'100%'`).
+Typed against the built-in theme by default — `colors.blu` (typo) is a compile error. Custom `kbach.config.js` colors work too, with **zero setup**: the Vite plugin (and `@kbach/native`'s Babel plugin) automatically generate a `kbach-types.d.ts` next to your config, kept in sync every time the dev server / Metro picks up an edit to it — safe to add to `.gitignore`. `useColors()`/`useSpacing()` see your custom names immediately, no type parameter needed, same typo-catching as the built-in ones.
+
+If you'd rather commit the types instead of generating them (a library package with no dev server/bundler step of its own, for instance), hand-author the same thing in any `.d.ts` your tsconfig includes:
+
+```ts
+import '@kbach/react'; // or '@kbach/native' — either works, native re-exports react's types
+declare module '@kbach/react' {
+  interface KbachCustomColors {
+    brand: ColorScale; // a 1–12 shade scale, like the built-in blue/red
+    accent: string;    // a flat color, like the built-in white/black — also what a
+                        // mode-aware { light, dark } config color resolves to at read time
+  }
+  interface KbachCustomSpacing {
+    18: true; // only the key is read — value is just a placeholder
+  }
+}
+```
+A hand-authored file and the generated one both merge into the exact same interfaces, so either — or both at once — works.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.34",
+  "version": "0.6.36",
   "description": "React / React Native components and hooks for the Kbach framework",
   "repository": {
     "type": "git",