@kbach/react 0.5.25 → 0.5.27

package/dist/vite-plugin.js

@@ -3352,14 +3352,89 @@ var VIRTUAL_ID = "virtual:kbach/styles.css";
 var RESOLVED_ID = "\0virtual:kbach/styles.css";
 var KBACH_START = "/* kbach:start */";
 var KBACH_END = "/* kbach:end */";
+var GROUPS = [
+  ["Layout", /^(flex(?!-\d|-auto|-none|-initial|-1)|flex-(col|row|wrap|nowrap)|grid|block|inline|hidden|table|contents|overflow|items-|justify-|self-|place-|grow|shrink|float-|clear-|static|fixed|absolute|relative|sticky|z-|top-|right-|bottom-|left-|inset|aspect)/],
+  ["Sizing", /^(w-|h-|min-w-|max-w-|min-h-|max-h-|size-|flex-1|flex-auto|flex-none|flex-initial|basis-)/],
+  ["Spacing", /^(p-|px-|py-|pt-|pb-|pl-|pr-|m-|mx-|my-|mt-|mb-|ml-|mr-|gap-|space-)/],
+  ["Typography", /^(text-(xs|sm|base|lg|\dxl)|font-|leading-|tracking-|uppercase|lowercase|capitalize|normal-case|italic|not-italic|underline|overline|line-through|no-underline|truncate|whitespace-|text-(left|center|right|justify|start|end)|list-|align-|line-clamp)/],
+  ["Colors", /^(bg-|text-|color-|fill-|stroke-|caret-|accent-)/],
+  ["Borders", /^(border|rounded|ring|outline|divide)/],
+  ["Effects", /^(shadow|opacity|blur|brightness|contrast|grayscale|transition|duration|ease|delay|animate|scale|rotate|translate|transform|cursor|pointer|select-)/]
+];
+var GROUP_ORDER = ["Layout", "Sizing", "Spacing", "Typography", "Colors", "Borders", "Effects", "Utilities", "Dark Mode", "Responsive"];
+function classifyToken(token) {
+  if (/^dark:/.test(token)) return "Dark Mode";
+  if (/^(sm|md|lg|xl|2xl):/.test(token)) return "Responsive";
+  const base = token.replace(/^(hover|focus|active|group-hover|peer-hover):/, "");
+  for (const [label, re] of GROUPS) {
+    if (re.test(base)) return label;
+  }
+  return "Utilities";
+}
+function buildColorVarMap(theme, usedCSS) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [name, shades] of Object.entries(theme.colors ?? {})) {
+    const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
+    for (const [fullName, val] of entries) {
+      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val) && usedCSS.includes(val)) {
+        map.set(val, `--color-${fullName}`);
+      }
+    }
+  }
+  return map;
+}
+function formatKbachCSS(tokenCSS, theme) {
+  const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
+  const colorVars = buildColorVarMap(theme, allRaw);
+  function applyVars(css) {
+    for (const [val, varName] of colorVars) {
+      css = css.replaceAll(val, `var(${varName})`);
+    }
+    return css;
+  }
+  const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
+  for (const [token, css] of tokenCSS) {
+    if (!css) continue;
+    const label = classifyToken(token);
+    if (!groups.has(label)) groups.set(label, []);
+    groups.get(label).push(applyVars(css));
+  }
+  const out = ["/* Generated by Kbach \u2014 do not edit */"];
+  if (colorVars.size > 0) {
+    out.push("\n:root {");
+    for (const [val, varName] of colorVars) {
+      out.push(`  ${varName}: ${val};`);
+    }
+    out.push("}");
+  }
+  const globalCSS = buildThemeGlobal(theme);
+  if (globalCSS) {
+    out.push(`
+/* Global */
+${globalCSS}`);
+  }
+  for (const label of GROUP_ORDER) {
+    const items = groups.get(label) ?? [];
+    if (!items.length) continue;
+    out.push(`
+/* ${label} */`);
+    out.push(items.join("\n"));
+  }
+  return out.join("\n");
+}
+function buildThemeGlobal(theme) {
+  const ff = theme.fontFamily;
+  if (!ff?.sans || ff.sans === "System") return "";
+  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+  return `body { font-family: ${family}; }`;
+}
 function findMainCSSFile(root) {
-  const candidates = [
+  for (const c of [
     (0, import_path.join)(root, "app", "app.css"),
     (0, import_path.join)(root, "src", "index.css"),
     (0, import_path.join)(root, "src", "app.css"),
     (0, import_path.join)(root, "app", "index.css")
-  ];
-  for (const c of candidates) {
+  ]) {
     if ((0, import_fs.existsSync)(c)) return c;
   }
   return null;
@@ -3393,11 +3468,8 @@ function scanDir(dir, onFile) {
       const full = (0, import_path.join)(dir, entry);
       try {
         const st = (0, import_fs.statSync)(full);
-        if (st.isDirectory()) {
-          scanDir(full, onFile);
-        } else if (/\.(tsx?|jsx?)$/.test(entry)) {
-          onFile((0, import_fs.readFileSync)(full, "utf-8"));
-        }
+        if (st.isDirectory()) scanDir(full, onFile);
+        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile((0, import_fs.readFileSync)(full, "utf-8"));
       } catch {
       }
     }
@@ -3414,18 +3486,11 @@ function extractClassStrings(code) {
   }
   return found;
 }
-function buildGlobalCSS(theme) {
-  const ff = theme.fontFamily;
-  if (!ff?.sans || ff.sans === "System") return "";
-  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
-  return `body { font-family: ${family}; }`;
-}
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   const tokenCSS = /* @__PURE__ */ new Map();
   let root = process.cwd();
-  let server = null;
   let mainCSSFile = null;
   function processToken(token) {
     if (tokenCSS.has(token)) return false;
@@ -3434,21 +3499,13 @@ function kbach(userConfig) {
   }
   function extractFromCode(code) {
     let added = false;
-    for (const cls of extractClassStrings(code)) {
-      for (const token of cls.split(/\s+/).filter(Boolean)) {
+    for (const cls of extractClassStrings(code))
+      for (const token of cls.split(/\s+/).filter(Boolean))
         if (processToken(token)) added = true;
-      }
-    }
     return added;
   }
-  function getAllCSS() {
-    const parts = [];
-    const global = buildGlobalCSS(cfg.theme);
-    if (global) parts.push(global);
-    for (const css of tokenCSS.values()) {
-      if (css) parts.push(css);
-    }
-    return parts.join("\n");
+  function getFormattedCSS() {
+    return formatKbachCSS(tokenCSS, cfg.theme);
   }
   return {
     name: "kbach",
@@ -3456,37 +3513,28 @@ function kbach(userConfig) {
     configResolved(resolved) {
       root = resolved.root;
     },
-    configureServer(s) {
-      server = s;
-    },
     buildStart() {
-      for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
+      for (const dir of ["src", "app", "pages", "components", "views", "layouts"])
         scanDir((0, import_path.join)(root, dir), (code) => extractFromCode(code));
-      }
       mainCSSFile = findMainCSSFile(root);
-      if (mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
+      if (mainCSSFile) writeKbachToFile(mainCSSFile, getFormattedCSS());
     },
     transform(code, id) {
       const cleanId = id.split("?")[0];
-      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
+      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules"))
         extractFromCode(code);
-      }
     },
-    // ── Virtual module (opt-in explicit import) ───────────────────────────────
     resolveId(id) {
       if (id === VIRTUAL_ID) return RESOLVED_ID;
     },
     load(id) {
-      if (id === RESOLVED_ID) return getAllCSS();
+      if (id === RESOLVED_ID) return getFormattedCSS();
     },
-    // ── HMR: write updated CSS to file when new classes are found ────────────
-    // Vite's own file watcher detects the change and hot-reloads the CSS —
-    // no manual invalidation needed.
     handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         const added = extractFromCode((0, import_fs.readFileSync)(file, "utf-8"));
-        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
+        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getFormattedCSS());
       } catch {
       }
     }

package/dist/vite-plugin.mjs

@@ -10,14 +10,89 @@ var VIRTUAL_ID = "virtual:kbach/styles.css";
 var RESOLVED_ID = "\0virtual:kbach/styles.css";
 var KBACH_START = "/* kbach:start */";
 var KBACH_END = "/* kbach:end */";
+var GROUPS = [
+  ["Layout", /^(flex(?!-\d|-auto|-none|-initial|-1)|flex-(col|row|wrap|nowrap)|grid|block|inline|hidden|table|contents|overflow|items-|justify-|self-|place-|grow|shrink|float-|clear-|static|fixed|absolute|relative|sticky|z-|top-|right-|bottom-|left-|inset|aspect)/],
+  ["Sizing", /^(w-|h-|min-w-|max-w-|min-h-|max-h-|size-|flex-1|flex-auto|flex-none|flex-initial|basis-)/],
+  ["Spacing", /^(p-|px-|py-|pt-|pb-|pl-|pr-|m-|mx-|my-|mt-|mb-|ml-|mr-|gap-|space-)/],
+  ["Typography", /^(text-(xs|sm|base|lg|\dxl)|font-|leading-|tracking-|uppercase|lowercase|capitalize|normal-case|italic|not-italic|underline|overline|line-through|no-underline|truncate|whitespace-|text-(left|center|right|justify|start|end)|list-|align-|line-clamp)/],
+  ["Colors", /^(bg-|text-|color-|fill-|stroke-|caret-|accent-)/],
+  ["Borders", /^(border|rounded|ring|outline|divide)/],
+  ["Effects", /^(shadow|opacity|blur|brightness|contrast|grayscale|transition|duration|ease|delay|animate|scale|rotate|translate|transform|cursor|pointer|select-)/]
+];
+var GROUP_ORDER = ["Layout", "Sizing", "Spacing", "Typography", "Colors", "Borders", "Effects", "Utilities", "Dark Mode", "Responsive"];
+function classifyToken(token) {
+  if (/^dark:/.test(token)) return "Dark Mode";
+  if (/^(sm|md|lg|xl|2xl):/.test(token)) return "Responsive";
+  const base = token.replace(/^(hover|focus|active|group-hover|peer-hover):/, "");
+  for (const [label, re] of GROUPS) {
+    if (re.test(base)) return label;
+  }
+  return "Utilities";
+}
+function buildColorVarMap(theme, usedCSS) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [name, shades] of Object.entries(theme.colors ?? {})) {
+    const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
+    for (const [fullName, val] of entries) {
+      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val) && usedCSS.includes(val)) {
+        map.set(val, `--color-${fullName}`);
+      }
+    }
+  }
+  return map;
+}
+function formatKbachCSS(tokenCSS, theme) {
+  const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
+  const colorVars = buildColorVarMap(theme, allRaw);
+  function applyVars(css) {
+    for (const [val, varName] of colorVars) {
+      css = css.replaceAll(val, `var(${varName})`);
+    }
+    return css;
+  }
+  const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
+  for (const [token, css] of tokenCSS) {
+    if (!css) continue;
+    const label = classifyToken(token);
+    if (!groups.has(label)) groups.set(label, []);
+    groups.get(label).push(applyVars(css));
+  }
+  const out = ["/* Generated by Kbach \u2014 do not edit */"];
+  if (colorVars.size > 0) {
+    out.push("\n:root {");
+    for (const [val, varName] of colorVars) {
+      out.push(`  ${varName}: ${val};`);
+    }
+    out.push("}");
+  }
+  const globalCSS = buildThemeGlobal(theme);
+  if (globalCSS) {
+    out.push(`
+/* Global */
+${globalCSS}`);
+  }
+  for (const label of GROUP_ORDER) {
+    const items = groups.get(label) ?? [];
+    if (!items.length) continue;
+    out.push(`
+/* ${label} */`);
+    out.push(items.join("\n"));
+  }
+  return out.join("\n");
+}
+function buildThemeGlobal(theme) {
+  const ff = theme.fontFamily;
+  if (!ff?.sans || ff.sans === "System") return "";
+  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+  return `body { font-family: ${family}; }`;
+}
 function findMainCSSFile(root) {
-  const candidates = [
+  for (const c of [
     join(root, "app", "app.css"),
     join(root, "src", "index.css"),
     join(root, "src", "app.css"),
     join(root, "app", "index.css")
-  ];
-  for (const c of candidates) {
+  ]) {
     if (existsSync(c)) return c;
   }
   return null;
@@ -51,11 +126,8 @@ function scanDir(dir, onFile) {
       const full = join(dir, entry);
       try {
         const st = statSync(full);
-        if (st.isDirectory()) {
-          scanDir(full, onFile);
-        } else if (/\.(tsx?|jsx?)$/.test(entry)) {
-          onFile(readFileSync(full, "utf-8"));
-        }
+        if (st.isDirectory()) scanDir(full, onFile);
+        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(readFileSync(full, "utf-8"));
       } catch {
       }
     }
@@ -72,18 +144,11 @@ function extractClassStrings(code) {
   }
   return found;
 }
-function buildGlobalCSS(theme) {
-  const ff = theme.fontFamily;
-  if (!ff?.sans || ff.sans === "System") return "";
-  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
-  return `body { font-family: ${family}; }`;
-}
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   const tokenCSS = /* @__PURE__ */ new Map();
   let root = process.cwd();
-  let server = null;
   let mainCSSFile = null;
   function processToken(token) {
     if (tokenCSS.has(token)) return false;
@@ -92,21 +157,13 @@ function kbach(userConfig) {
   }
   function extractFromCode(code) {
     let added = false;
-    for (const cls of extractClassStrings(code)) {
-      for (const token of cls.split(/\s+/).filter(Boolean)) {
+    for (const cls of extractClassStrings(code))
+      for (const token of cls.split(/\s+/).filter(Boolean))
         if (processToken(token)) added = true;
-      }
-    }
     return added;
   }
-  function getAllCSS() {
-    const parts = [];
-    const global = buildGlobalCSS(cfg.theme);
-    if (global) parts.push(global);
-    for (const css of tokenCSS.values()) {
-      if (css) parts.push(css);
-    }
-    return parts.join("\n");
+  function getFormattedCSS() {
+    return formatKbachCSS(tokenCSS, cfg.theme);
   }
   return {
     name: "kbach",
@@ -114,37 +171,28 @@ function kbach(userConfig) {
     configResolved(resolved) {
       root = resolved.root;
     },
-    configureServer(s) {
-      server = s;
-    },
     buildStart() {
-      for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
+      for (const dir of ["src", "app", "pages", "components", "views", "layouts"])
         scanDir(join(root, dir), (code) => extractFromCode(code));
-      }
       mainCSSFile = findMainCSSFile(root);
-      if (mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
+      if (mainCSSFile) writeKbachToFile(mainCSSFile, getFormattedCSS());
     },
     transform(code, id) {
       const cleanId = id.split("?")[0];
-      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
+      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules"))
         extractFromCode(code);
-      }
     },
-    // ── Virtual module (opt-in explicit import) ───────────────────────────────
     resolveId(id) {
       if (id === VIRTUAL_ID) return RESOLVED_ID;
     },
     load(id) {
-      if (id === RESOLVED_ID) return getAllCSS();
+      if (id === RESOLVED_ID) return getFormattedCSS();
     },
-    // ── HMR: write updated CSS to file when new classes are found ────────────
-    // Vite's own file watcher detects the change and hot-reloads the CSS —
-    // no manual invalidation needed.
     handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         const added = extractFromCode(readFileSync(file, "utf-8"));
-        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
+        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getFormattedCSS());
       } catch {
       }
     }

package/package.json

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

package/dist/index.d.mts

@@ -1,304 +0,0 @@
-import * as React from 'react';
-import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-CV5vXnSH.mjs';
-export { d as PluginAPI } from './types-CV5vXnSH.mjs';
-
-declare const defaultColors: ThemeColors;
-declare const defaultTheme: ThemeConfig;
-
-declare function parseClass(className: string): ParsedClass | null;
-/** Parse a space-separated class string into individual ParsedClass objects. */
-declare function parseClasses(classString: string): ParsedClass[];
-
-/**
- * Resolve a class string to a ResolvedStyle object.
- *
- * The result groups styles by modifier key:
- *   - 'base'        → always-applied styles
- *   - 'dark'        → dark-mode styles
- *   - 'hover'       → hover styles
- *   - 'dark:hover'  → combined dark + hover
- *   - etc.
- *
- * Results are cached — repeated calls with the same string are O(1).
- */
-declare function resolve(classString: string, theme: ThemeConfig, darkMode?: 'attribute' | 'class' | 'media'): ResolvedStyle;
-/**
- * Flatten a ResolvedStyle into a single StyleValue for the given runtime state.
- * Used by useStyles() and styled().
- *
- * @param resolved      Output of resolve()
- * @param isDark        Whether dark mode is currently active
- * @param state         Interaction state flags
- * @param breakpoints   Active breakpoint names (sm, md, lg, xl, 2xl). On web,
- *                      pass an empty Set — CSS @media rules handle responsive.
- */
-declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
-    hover?: boolean;
-    focus?: boolean;
-    pressed?: boolean;
-    active?: boolean;
-    disabled?: boolean;
-    checked?: boolean;
-    visited?: boolean;
-    placeholder?: boolean;
-}, breakpoints?: Set<string>): StyleValue;
-
-/**
- * Load, merge, and cache the resolved config.
- * Call resetConfig() to force a reload (e.g. in tests or after live update).
- */
-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') */
-    mode: ThemeMode;
-    /** The effective resolved mode (never 'system') */
-    resolvedMode: 'light' | 'dark';
-    /** Convenience boolean */
-    isDark: boolean;
-    /** Change the theme mode programmatically */
-    setMode: (mode: ThemeMode) => void;
-    /** Toggle between light and dark (ignores system) */
-    toggle: () => void;
-    /** The fully resolved framework config (theme values, darkMode strategy, etc.) */
-    config: ResolvedConfig;
-}
-declare const ThemeContext: React.Context<ThemeContextValue | null>;
-declare function useTheme(): ThemeContextValue;
-declare function useIsDark(): boolean;
-
-interface ColorScale {
-    /** `colors.blue[6]` → raw hex string */
-    readonly [shade: number]: string;
-    /** `colors.blue['6/50']` → shade 6 at 50% opacity */
-    readonly [key: string]: string;
-}
-interface ColorsAPI {
-    /**
-     * Pass any CSS color through, optionally applying an opacity (0–100).
-     * - `colors.alpha('#3b82f6', 50)` → `'rgba(59,130,246,0.5)'`
-     * - `colors.alpha('rgb(0,0,0)', 10)` → `'rgba(0,0,0,0.1)'`
-     * - `colors.alpha('rgba(0,0,0,0.5)')` → `'rgba(0,0,0,0.5)'` (passthrough)
-     */
-    readonly alpha: (color: string, opacity?: number) => string;
-    [color: string]: any;
-}
-declare function wrapColors(rawColors: ThemeColors): ColorsAPI;
-declare function useColors(): ColorsAPI;
-
-interface ThemeProviderProps {
-    children: ReactNode;
-    /** Initial mode. Falls back to persisted value, then 'system'. */
-    defaultMode?: ThemeMode;
-    /**
-     * System color scheme for native `defaultMode="system"`.
-     *
-     * Pass the value of `useColorScheme()` from `react-native`. When importing
-     * `ThemeProvider` from `@kbach/native` this is handled automatically.
-     *
-     * @example
-     * ```tsx
-     * import { useColorScheme } from 'react-native';
-     * const colorScheme = useColorScheme();
-     * <ThemeProvider defaultMode="system" colorScheme={colorScheme}>…</ThemeProvider>
-     * ```
-     */
-    colorScheme?: 'light' | 'dark' | null;
-    /**
-     * Current window/screen width in pixels for responsive breakpoints.
-     * On web this is read from `window.innerWidth` automatically.
-     * When importing `ThemeProvider` from `@kbach/native` this is provided
-     * automatically from `useWindowDimensions()`.
-     */
-    windowWidth?: number;
-    /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
-    config?: FrameworkConfig;
-    /** Disable persistence to localStorage */
-    disablePersistence?: boolean;
-}
-declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth: windowWidthProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
-
-type ToggleVariant = 'button' | 'switch' | 'icon-button';
-interface ThemeToggleProps {
-    /** Visual variant. Default: 'button' */
-    variant?: ToggleVariant;
-    /** Override label text (button variant) */
-    label?: string;
-    /** Custom light-mode label */
-    lightLabel?: string;
-    /** Custom dark-mode label */
-    darkLabel?: string;
-    /** Show system mode option */
-    includeSystem?: boolean;
-    /** Custom styles applied to the root container */
-    style?: object;
-    /** Custom styles for the label text */
-    labelStyle?: object;
-}
-/**
- * Drop-in theme toggle. Works on web and React Native.
- *
- * ```tsx
- * <ThemeToggle />
- * <ThemeToggle variant="switch" />
- * <ThemeToggle variant="icon-button" lightLabel="☀️" darkLabel="🌙" />
- * ```
- */
-declare function ThemeToggle({ variant, label, lightLabel, darkLabel, includeSystem, style, labelStyle, }: ThemeToggleProps): React__default.JSX.Element;
-
-interface StyledProps {
-    /** Additional utility classes applied on top of the base classes */
-    kb?: string;
-    /** Merged with resolved kb styles; applied last */
-    style?: StyleValue | StyleValue[];
-}
-type OmittedKeys = 'style';
-/**
- * Create a styled component from any React / React Native component.
- *
- * ```tsx
- * const Card = styled(View, 'bg-white dark:bg-gray-800 rounded-xl p-4 shadow-md');
- * const Button = styled(TouchableOpacity, 'bg-blue-500 pressed:bg-blue-700 dark:bg-blue-600 rounded-lg p-3');
- *
- * // Use it:
- * <Card kb="mt-4">...</Card>
- * <Button onPress={handlePress} kb="w-full" />
- * ```
- */
-declare function styled<T extends ComponentType<any>>(Component: T, baseClasses?: string): ForwardRefExoticComponent<Omit<React__default.ComponentPropsWithRef<T>, OmittedKeys> & StyledProps>;
-
-interface InteractionState {
-    hover?: boolean;
-    focus?: boolean;
-    /** Maps to 'pressed' and 'active' modifiers */
-    pressed?: boolean;
-    active?: boolean;
-    disabled?: boolean;
-    checked?: boolean;
-    visited?: boolean;
-    placeholder?: boolean;
-}
-/**
- * Resolve a utility class string to a style object for the current theme + state.
- *
- * ```tsx
- * // Basic usage
- * const styles = useStyles('bg-white dark:bg-gray-900 p-4');
- *
- * // With interaction state
- * const [pressed, setPressed] = useState(false);
- * const styles = useStyles('bg-blue-500 pressed:bg-blue-700', { pressed });
- *
- * // Multiple class strings (merged left-to-right)
- * const styles = useStyles(['bg-white p-4', 'dark:bg-gray-900 rounded-xl']);
- * ```
- */
-declare function useStyles(classString: string | string[], state?: InteractionState): StyleValue;
-/**
- * Returns the full ResolvedStyle bucket map (base, dark, hover, …).
- * Useful when you need to apply styles selectively or pass them to Animated.
- */
-declare function useResolvedStyle(classString: string | string[]): ResolvedStyle;
-
-/**
- * Subscribe to the global dark-mode store with React's concurrent-safe
- * useSyncExternalStore so that any component using className/kb re-renders
- * immediately when the theme changes — without needing ThemeContext.
- */
-declare function useGlobalDarkMode(): boolean;
-
-/**
- * Returns the name of the currently active breakpoint — the largest breakpoint
- * whose min-width the window satisfies, or `'xs'` when below all breakpoints.
- *
- * ```ts
- * const bp = useBreakpoint(); // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- * ```
- */
-declare function useBreakpoint(): string;
-/**
- * Returns a record of boolean flags for each breakpoint — `true` when the
- * window width satisfies that breakpoint's min-width threshold.
- *
- * ```ts
- * const { sm, md, lg } = useResponsive();
- * const padding = lg ? 32 : sm ? 16 : 8;
- * ```
- */
-declare function useResponsive(): Record<string, boolean>;
-
-interface InteractiveWrapperProps {
-    /** The real component to render (View, TouchableOpacity, div, a third-party button…) */
-    Component: React__default.ComponentType<any> | string;
-    /** Pre-resolved style buckets from resolve() */
-    resolvedStyle: ResolvedStyle;
-    /** On web: original class string so CSS pseudo-rules still fire */
-    className?: string;
-    /** Extra style prop passed by the user */
-    style?: StyleValue | StyleValue[];
-    children?: React__default.ReactNode;
-    onPressIn?: (...args: any[]) => void;
-    onPressOut?: (...args: any[]) => void;
-    onPointerDown?: (...args: any[]) => void;
-    onPointerUp?: (...args: any[]) => void;
-    onPointerLeave?: (...args: any[]) => void;
-    onMouseEnter?: (...args: any[]) => void;
-    onMouseLeave?: (...args: any[]) => void;
-    onFocus?: (...args: any[]) => void;
-    onBlur?: (...args: any[]) => void;
-}
-/**
- * Thin wrapper rendered automatically by the JSX runtime whenever a className/kb
- * string contains interactive modifiers (hover:, pressed:, focus:, active:, …).
- *
- * Manages interaction state locally and flattens the correct style bucket on
- * every render. The wrapped component sees a plain `style` prop — it never
- * knows it was wrapped.
- *
- * Refs are forwarded so the host component's imperative API still works.
- */
-declare const InteractiveWrapper: React__default.ForwardRefExoticComponent<InteractiveWrapperProps & React__default.RefAttributes<unknown>>;
-
-/**
- * Resolve a utility class string outside of a React component.
- *
- * On **native** — returns a StyleValue (style object) for the given mode.
- * On **web** — injects CSS and returns the original class string (use as className).
- *
- * ```ts
- * // Inside a component use useStyles() instead.
- * // kb() is useful for StyleSheet.create() calls and static values.
- *
- * const styles = StyleSheet.create({
- *   container: kb('flex-1 bg-white p-4') as any,
- * });
- *
- * // Web: use as className
- * <div className={kb('bg-white dark:bg-gray-900 p-4') as string} />
- * ```
- *
- * @param classString   Space-separated utility classes
- * @param isDark        Whether dark mode is active (default: false)
- */
-declare function kb(classString: string, isDark?: boolean): StyleValue | string;
-/**
- * Conditionally join class names. Falsy values are ignored.
- *
- * ```ts
- * cx('bg-white p-4', isActive && 'border-2 border-blue-500', undefined)
- * // → 'bg-white p-4 border-2 border-blue-500'
- * ```
- */
-declare function cx(...classes: Array<string | false | null | undefined>): string;
-
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.d.ts

@@ -1,304 +0,0 @@
-import * as React from 'react';
-import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-CV5vXnSH.js';
-export { d as PluginAPI } from './types-CV5vXnSH.js';
-
-declare const defaultColors: ThemeColors;
-declare const defaultTheme: ThemeConfig;
-
-declare function parseClass(className: string): ParsedClass | null;
-/** Parse a space-separated class string into individual ParsedClass objects. */
-declare function parseClasses(classString: string): ParsedClass[];
-
-/**
- * Resolve a class string to a ResolvedStyle object.
- *
- * The result groups styles by modifier key:
- *   - 'base'        → always-applied styles
- *   - 'dark'        → dark-mode styles
- *   - 'hover'       → hover styles
- *   - 'dark:hover'  → combined dark + hover
- *   - etc.
- *
- * Results are cached — repeated calls with the same string are O(1).
- */
-declare function resolve(classString: string, theme: ThemeConfig, darkMode?: 'attribute' | 'class' | 'media'): ResolvedStyle;
-/**
- * Flatten a ResolvedStyle into a single StyleValue for the given runtime state.
- * Used by useStyles() and styled().
- *
- * @param resolved      Output of resolve()
- * @param isDark        Whether dark mode is currently active
- * @param state         Interaction state flags
- * @param breakpoints   Active breakpoint names (sm, md, lg, xl, 2xl). On web,
- *                      pass an empty Set — CSS @media rules handle responsive.
- */
-declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
-    hover?: boolean;
-    focus?: boolean;
-    pressed?: boolean;
-    active?: boolean;
-    disabled?: boolean;
-    checked?: boolean;
-    visited?: boolean;
-    placeholder?: boolean;
-}, breakpoints?: Set<string>): StyleValue;
-
-/**
- * Load, merge, and cache the resolved config.
- * Call resetConfig() to force a reload (e.g. in tests or after live update).
- */
-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') */
-    mode: ThemeMode;
-    /** The effective resolved mode (never 'system') */
-    resolvedMode: 'light' | 'dark';
-    /** Convenience boolean */
-    isDark: boolean;
-    /** Change the theme mode programmatically */
-    setMode: (mode: ThemeMode) => void;
-    /** Toggle between light and dark (ignores system) */
-    toggle: () => void;
-    /** The fully resolved framework config (theme values, darkMode strategy, etc.) */
-    config: ResolvedConfig;
-}
-declare const ThemeContext: React.Context<ThemeContextValue | null>;
-declare function useTheme(): ThemeContextValue;
-declare function useIsDark(): boolean;
-
-interface ColorScale {
-    /** `colors.blue[6]` → raw hex string */
-    readonly [shade: number]: string;
-    /** `colors.blue['6/50']` → shade 6 at 50% opacity */
-    readonly [key: string]: string;
-}
-interface ColorsAPI {
-    /**
-     * Pass any CSS color through, optionally applying an opacity (0–100).
-     * - `colors.alpha('#3b82f6', 50)` → `'rgba(59,130,246,0.5)'`
-     * - `colors.alpha('rgb(0,0,0)', 10)` → `'rgba(0,0,0,0.1)'`
-     * - `colors.alpha('rgba(0,0,0,0.5)')` → `'rgba(0,0,0,0.5)'` (passthrough)
-     */
-    readonly alpha: (color: string, opacity?: number) => string;
-    [color: string]: any;
-}
-declare function wrapColors(rawColors: ThemeColors): ColorsAPI;
-declare function useColors(): ColorsAPI;
-
-interface ThemeProviderProps {
-    children: ReactNode;
-    /** Initial mode. Falls back to persisted value, then 'system'. */
-    defaultMode?: ThemeMode;
-    /**
-     * System color scheme for native `defaultMode="system"`.
-     *
-     * Pass the value of `useColorScheme()` from `react-native`. When importing
-     * `ThemeProvider` from `@kbach/native` this is handled automatically.
-     *
-     * @example
-     * ```tsx
-     * import { useColorScheme } from 'react-native';
-     * const colorScheme = useColorScheme();
-     * <ThemeProvider defaultMode="system" colorScheme={colorScheme}>…</ThemeProvider>
-     * ```
-     */
-    colorScheme?: 'light' | 'dark' | null;
-    /**
-     * Current window/screen width in pixels for responsive breakpoints.
-     * On web this is read from `window.innerWidth` automatically.
-     * When importing `ThemeProvider` from `@kbach/native` this is provided
-     * automatically from `useWindowDimensions()`.
-     */
-    windowWidth?: number;
-    /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
-    config?: FrameworkConfig;
-    /** Disable persistence to localStorage */
-    disablePersistence?: boolean;
-}
-declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth: windowWidthProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
-
-type ToggleVariant = 'button' | 'switch' | 'icon-button';
-interface ThemeToggleProps {
-    /** Visual variant. Default: 'button' */
-    variant?: ToggleVariant;
-    /** Override label text (button variant) */
-    label?: string;
-    /** Custom light-mode label */
-    lightLabel?: string;
-    /** Custom dark-mode label */
-    darkLabel?: string;
-    /** Show system mode option */
-    includeSystem?: boolean;
-    /** Custom styles applied to the root container */
-    style?: object;
-    /** Custom styles for the label text */
-    labelStyle?: object;
-}
-/**
- * Drop-in theme toggle. Works on web and React Native.
- *
- * ```tsx
- * <ThemeToggle />
- * <ThemeToggle variant="switch" />
- * <ThemeToggle variant="icon-button" lightLabel="☀️" darkLabel="🌙" />
- * ```
- */
-declare function ThemeToggle({ variant, label, lightLabel, darkLabel, includeSystem, style, labelStyle, }: ThemeToggleProps): React__default.JSX.Element;
-
-interface StyledProps {
-    /** Additional utility classes applied on top of the base classes */
-    kb?: string;
-    /** Merged with resolved kb styles; applied last */
-    style?: StyleValue | StyleValue[];
-}
-type OmittedKeys = 'style';
-/**
- * Create a styled component from any React / React Native component.
- *
- * ```tsx
- * const Card = styled(View, 'bg-white dark:bg-gray-800 rounded-xl p-4 shadow-md');
- * const Button = styled(TouchableOpacity, 'bg-blue-500 pressed:bg-blue-700 dark:bg-blue-600 rounded-lg p-3');
- *
- * // Use it:
- * <Card kb="mt-4">...</Card>
- * <Button onPress={handlePress} kb="w-full" />
- * ```
- */
-declare function styled<T extends ComponentType<any>>(Component: T, baseClasses?: string): ForwardRefExoticComponent<Omit<React__default.ComponentPropsWithRef<T>, OmittedKeys> & StyledProps>;
-
-interface InteractionState {
-    hover?: boolean;
-    focus?: boolean;
-    /** Maps to 'pressed' and 'active' modifiers */
-    pressed?: boolean;
-    active?: boolean;
-    disabled?: boolean;
-    checked?: boolean;
-    visited?: boolean;
-    placeholder?: boolean;
-}
-/**
- * Resolve a utility class string to a style object for the current theme + state.
- *
- * ```tsx
- * // Basic usage
- * const styles = useStyles('bg-white dark:bg-gray-900 p-4');
- *
- * // With interaction state
- * const [pressed, setPressed] = useState(false);
- * const styles = useStyles('bg-blue-500 pressed:bg-blue-700', { pressed });
- *
- * // Multiple class strings (merged left-to-right)
- * const styles = useStyles(['bg-white p-4', 'dark:bg-gray-900 rounded-xl']);
- * ```
- */
-declare function useStyles(classString: string | string[], state?: InteractionState): StyleValue;
-/**
- * Returns the full ResolvedStyle bucket map (base, dark, hover, …).
- * Useful when you need to apply styles selectively or pass them to Animated.
- */
-declare function useResolvedStyle(classString: string | string[]): ResolvedStyle;
-
-/**
- * Subscribe to the global dark-mode store with React's concurrent-safe
- * useSyncExternalStore so that any component using className/kb re-renders
- * immediately when the theme changes — without needing ThemeContext.
- */
-declare function useGlobalDarkMode(): boolean;
-
-/**
- * Returns the name of the currently active breakpoint — the largest breakpoint
- * whose min-width the window satisfies, or `'xs'` when below all breakpoints.
- *
- * ```ts
- * const bp = useBreakpoint(); // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- * ```
- */
-declare function useBreakpoint(): string;
-/**
- * Returns a record of boolean flags for each breakpoint — `true` when the
- * window width satisfies that breakpoint's min-width threshold.
- *
- * ```ts
- * const { sm, md, lg } = useResponsive();
- * const padding = lg ? 32 : sm ? 16 : 8;
- * ```
- */
-declare function useResponsive(): Record<string, boolean>;
-
-interface InteractiveWrapperProps {
-    /** The real component to render (View, TouchableOpacity, div, a third-party button…) */
-    Component: React__default.ComponentType<any> | string;
-    /** Pre-resolved style buckets from resolve() */
-    resolvedStyle: ResolvedStyle;
-    /** On web: original class string so CSS pseudo-rules still fire */
-    className?: string;
-    /** Extra style prop passed by the user */
-    style?: StyleValue | StyleValue[];
-    children?: React__default.ReactNode;
-    onPressIn?: (...args: any[]) => void;
-    onPressOut?: (...args: any[]) => void;
-    onPointerDown?: (...args: any[]) => void;
-    onPointerUp?: (...args: any[]) => void;
-    onPointerLeave?: (...args: any[]) => void;
-    onMouseEnter?: (...args: any[]) => void;
-    onMouseLeave?: (...args: any[]) => void;
-    onFocus?: (...args: any[]) => void;
-    onBlur?: (...args: any[]) => void;
-}
-/**
- * Thin wrapper rendered automatically by the JSX runtime whenever a className/kb
- * string contains interactive modifiers (hover:, pressed:, focus:, active:, …).
- *
- * Manages interaction state locally and flattens the correct style bucket on
- * every render. The wrapped component sees a plain `style` prop — it never
- * knows it was wrapped.
- *
- * Refs are forwarded so the host component's imperative API still works.
- */
-declare const InteractiveWrapper: React__default.ForwardRefExoticComponent<InteractiveWrapperProps & React__default.RefAttributes<unknown>>;
-
-/**
- * Resolve a utility class string outside of a React component.
- *
- * On **native** — returns a StyleValue (style object) for the given mode.
- * On **web** — injects CSS and returns the original class string (use as className).
- *
- * ```ts
- * // Inside a component use useStyles() instead.
- * // kb() is useful for StyleSheet.create() calls and static values.
- *
- * const styles = StyleSheet.create({
- *   container: kb('flex-1 bg-white p-4') as any,
- * });
- *
- * // Web: use as className
- * <div className={kb('bg-white dark:bg-gray-900 p-4') as string} />
- * ```
- *
- * @param classString   Space-separated utility classes
- * @param isDark        Whether dark mode is active (default: false)
- */
-declare function kb(classString: string, isDark?: boolean): StyleValue | string;
-/**
- * Conditionally join class names. Falsy values are ignored.
- *
- * ```ts
- * cx('bg-white p-4', isActive && 'border-2 border-blue-500', undefined)
- * // → 'bg-white p-4 border-2 border-blue-500'
- * ```
- */
-declare function cx(...classes: Array<string | false | null | undefined>): string;
-
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/jsx-dev-runtime.d.mts

@@ -1,19 +0,0 @@
-import { ReactElement } from 'react';
-export { Fragment } from 'react';
-
-/**
- * @kbach/react/jsx-dev-runtime
- *
- * Development variant of the custom JSX runtime.
- * Babel uses jsxDEV (instead of jsx/jsxs) in dev builds.
- * We forward isStaticChildren so React's dev-mode key-warning suppression
- * works correctly for compile-time static child arrays.
- */
-
-declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, _source?: {
-    fileName: string;
-    lineNumber: number;
-    columnNumber: number;
-}, _self?: unknown): ReactElement;
-
-export { jsxDEV };

package/dist/jsx-dev-runtime.d.ts

@@ -1,19 +0,0 @@
-import { ReactElement } from 'react';
-export { Fragment } from 'react';
-
-/**
- * @kbach/react/jsx-dev-runtime
- *
- * Development variant of the custom JSX runtime.
- * Babel uses jsxDEV (instead of jsx/jsxs) in dev builds.
- * We forward isStaticChildren so React's dev-mode key-warning suppression
- * works correctly for compile-time static child arrays.
- */
-
-declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, _source?: {
-    fileName: string;
-    lineNumber: number;
-    columnNumber: number;
-}, _self?: unknown): ReactElement;
-
-export { jsxDEV };

package/dist/jsx-runtime.d.mts

@@ -1,17 +0,0 @@
-import { ReactElement } from 'react';
-export { Fragment, JSX } from 'react';
-
-/**
- * @kbach/react/jsx-runtime
- *
- * Drop-in replacement for react/jsx-runtime.
- * Intercepts `className` and `kb` props on EVERY JSX element — React Native
- * built-ins, HTML elements on web, and any third-party library component.
- */
-
-/** jsx() — elements with 0–1 child or dynamic key. */
-declare function jsx(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
-/** jsxs() — elements with 2+ static children. Children array is compile-time stable. */
-declare function jsxs(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
-
-export { jsx, jsxs };

package/dist/jsx-runtime.d.ts

@@ -1,17 +0,0 @@
-import { ReactElement } from 'react';
-export { Fragment, JSX } from 'react';
-
-/**
- * @kbach/react/jsx-runtime
- *
- * Drop-in replacement for react/jsx-runtime.
- * Intercepts `className` and `kb` props on EVERY JSX element — React Native
- * built-ins, HTML elements on web, and any third-party library component.
- */
-
-/** jsx() — elements with 0–1 child or dynamic key. */
-declare function jsx(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
-/** jsxs() — elements with 2+ static children. Children array is compile-time stable. */
-declare function jsxs(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
-
-export { jsx, jsxs };

package/dist/types-CV5vXnSH.d.mts

@@ -1,70 +0,0 @@
-type ThemeMode = 'light' | 'dark' | 'system';
-interface StyleValue {
-    [key: string]: string | number | undefined | null | StyleValue | unknown[];
-}
-interface ParsedClass {
-    /** The original class string, e.g. "dark:hover:bg-[#fff]" */
-    original: string;
-    /** Up to 3 modifier prefixes, e.g. ['dark', 'hover'] */
-    modifiers: string[];
-    /** Whether a leading `-` was present for negative values */
-    negative: boolean;
-    /** Whether a leading `!` was present — applies !important to all CSS declarations */
-    important: boolean;
-    /** The utility name, e.g. 'bg', 'p', 'text' */
-    utility: string;
-    /** The resolved value, e.g. 'white', '#fff', '4' */
-    value: string;
-    /** Whether the value was specified with bracket notation [value] */
-    isArbitrary: boolean;
-}
-interface ResolvedStyle {
-    /** Base styles applied unconditionally */
-    base?: StyleValue;
-    /** Styles keyed by modifier or modifier combo, e.g. 'dark', 'hover', 'dark:hover' */
-    [modifierKey: string]: StyleValue | undefined;
-}
-type ColorShades = Record<string, string>;
-type ThemeColors = Record<string, string | ColorShades>;
-type ThemeSpacing = Record<string, number | string>;
-interface ThemeConfig {
-    colors: ThemeColors;
-    spacing: ThemeSpacing;
-    fontSize: Record<string, number | string>;
-    fontFamily: Record<string, string | string[]>;
-    fontWeight: Record<string, string | number>;
-    borderRadius: Record<string, number | string>;
-    borderWidth: Record<string, number>;
-    opacity: Record<string, number>;
-    lineHeight: Record<string, number | string>;
-    letterSpacing: Record<string, number | string>;
-    zIndex: Record<string, number | string>;
-    flex: Record<string, number>;
-    shadow: Record<string, StyleValue>;
-    screens: Record<string, string | number>;
-    [key: string]: unknown;
-}
-type DarkMode = 'attribute' | 'class' | 'media';
-interface PluginAPI {
-    addUtility(name: string, styles: StyleValue): void;
-    addVariant(name: string, selector: string): void;
-    theme(path: string, defaultValue?: unknown): unknown;
-    e(className: string): string;
-}
-interface FrameworkConfig {
-    darkMode?: DarkMode;
-    theme?: Partial<ThemeConfig>;
-    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
-    extend?: {
-        theme?: Partial<ThemeConfig>;
-    } & Partial<ThemeConfig>;
-    plugins?: Array<(api: PluginAPI) => void>;
-    content?: string[];
-}
-interface ResolvedConfig {
-    darkMode: DarkMode;
-    theme: ThemeConfig;
-    plugins: Array<(api: PluginAPI) => void>;
-}
-
-export type { FrameworkConfig as F, ParsedClass as P, ResolvedStyle as R, StyleValue as S, ThemeColors as T, ThemeConfig as a, ResolvedConfig as b, ThemeMode as c, PluginAPI as d };

package/dist/types-CV5vXnSH.d.ts

@@ -1,70 +0,0 @@
-type ThemeMode = 'light' | 'dark' | 'system';
-interface StyleValue {
-    [key: string]: string | number | undefined | null | StyleValue | unknown[];
-}
-interface ParsedClass {
-    /** The original class string, e.g. "dark:hover:bg-[#fff]" */
-    original: string;
-    /** Up to 3 modifier prefixes, e.g. ['dark', 'hover'] */
-    modifiers: string[];
-    /** Whether a leading `-` was present for negative values */
-    negative: boolean;
-    /** Whether a leading `!` was present — applies !important to all CSS declarations */
-    important: boolean;
-    /** The utility name, e.g. 'bg', 'p', 'text' */
-    utility: string;
-    /** The resolved value, e.g. 'white', '#fff', '4' */
-    value: string;
-    /** Whether the value was specified with bracket notation [value] */
-    isArbitrary: boolean;
-}
-interface ResolvedStyle {
-    /** Base styles applied unconditionally */
-    base?: StyleValue;
-    /** Styles keyed by modifier or modifier combo, e.g. 'dark', 'hover', 'dark:hover' */
-    [modifierKey: string]: StyleValue | undefined;
-}
-type ColorShades = Record<string, string>;
-type ThemeColors = Record<string, string | ColorShades>;
-type ThemeSpacing = Record<string, number | string>;
-interface ThemeConfig {
-    colors: ThemeColors;
-    spacing: ThemeSpacing;
-    fontSize: Record<string, number | string>;
-    fontFamily: Record<string, string | string[]>;
-    fontWeight: Record<string, string | number>;
-    borderRadius: Record<string, number | string>;
-    borderWidth: Record<string, number>;
-    opacity: Record<string, number>;
-    lineHeight: Record<string, number | string>;
-    letterSpacing: Record<string, number | string>;
-    zIndex: Record<string, number | string>;
-    flex: Record<string, number>;
-    shadow: Record<string, StyleValue>;
-    screens: Record<string, string | number>;
-    [key: string]: unknown;
-}
-type DarkMode = 'attribute' | 'class' | 'media';
-interface PluginAPI {
-    addUtility(name: string, styles: StyleValue): void;
-    addVariant(name: string, selector: string): void;
-    theme(path: string, defaultValue?: unknown): unknown;
-    e(className: string): string;
-}
-interface FrameworkConfig {
-    darkMode?: DarkMode;
-    theme?: Partial<ThemeConfig>;
-    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
-    extend?: {
-        theme?: Partial<ThemeConfig>;
-    } & Partial<ThemeConfig>;
-    plugins?: Array<(api: PluginAPI) => void>;
-    content?: string[];
-}
-interface ResolvedConfig {
-    darkMode: DarkMode;
-    theme: ThemeConfig;
-    plugins: Array<(api: PluginAPI) => void>;
-}
-
-export type { FrameworkConfig as F, ParsedClass as P, ResolvedStyle as R, StyleValue as S, ThemeColors as T, ThemeConfig as a, ResolvedConfig as b, ThemeMode as c, PluginAPI as d };

package/dist/vite-plugin-client.d.mts

@@ -1,8 +0,0 @@
-// TypeScript declarations for the Kbach Vite plugin virtual module.
-// Add this to your tsconfig "types" array or via a triple-slash reference:
-//   /// <reference types="@kbach/react/vite/client" />
-
-declare module 'virtual:kbach/styles.css' {
-  const css: string;
-  export default css;
-}

package/dist/vite-plugin-client.d.ts

@@ -1,8 +0,0 @@
-// TypeScript declarations for the Kbach Vite plugin virtual module.
-// Add this to your tsconfig "types" array or via a triple-slash reference:
-//   /// <reference types="@kbach/react/vite/client" />
-
-declare module 'virtual:kbach/styles.css' {
-  const css: string;
-  export default css;
-}

package/dist/vite-plugin.d.mts

@@ -1,22 +0,0 @@
-import { Plugin } from 'vite';
-import { F as FrameworkConfig } from './types-CV5vXnSH.mjs';
-
-/**
- * @kbach/react/vite
- *
- * Vite plugin — scans source files for Kbach className/kb props and generates CSS.
- * Zero setup: just add kbach() to your plugins array.
- * Only generates CSS for classes you actually use (like Tailwind).
- *
- * How it works (same as Tailwind):
- *   1. Scans your source files at startup for className/kb props
- *   2. Generates CSS rules for only those classes
- *   3. Appends them to your imported CSS file (e.g. app.css) via Vite's transform
- *   4. Vite serves the CSS through its normal pipeline → <link rel="stylesheet">
- *   5. When you add a new class in dev, the CSS file is hot-reloaded
- */
-
-declare const VIRTUAL_ID = "virtual:kbach/styles.css";
-declare function kbach(userConfig?: FrameworkConfig): Plugin;
-
-export { VIRTUAL_ID, kbach };

package/dist/vite-plugin.d.ts

@@ -1,22 +0,0 @@
-import { Plugin } from 'vite';
-import { F as FrameworkConfig } from './types-CV5vXnSH.js';
-
-/**
- * @kbach/react/vite
- *
- * Vite plugin — scans source files for Kbach className/kb props and generates CSS.
- * Zero setup: just add kbach() to your plugins array.
- * Only generates CSS for classes you actually use (like Tailwind).
- *
- * How it works (same as Tailwind):
- *   1. Scans your source files at startup for className/kb props
- *   2. Generates CSS rules for only those classes
- *   3. Appends them to your imported CSS file (e.g. app.css) via Vite's transform
- *   4. Vite serves the CSS through its normal pipeline → <link rel="stylesheet">
- *   5. When you add a new class in dev, the CSS file is hot-reloaded
- */
-
-declare const VIRTUAL_ID = "virtual:kbach/styles.css";
-declare function kbach(userConfig?: FrameworkConfig): Plugin;
-
-export { VIRTUAL_ID, kbach };