@kbach/react 0.5.27 → 0.5.28

package/dist/index.d.mts

@@ -0,0 +1,304 @@
+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

@@ -0,0 +1,304 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,8 @@
+// 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

@@ -0,0 +1,8 @@
+// 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

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+import { F as FrameworkConfig } from './types-CV5vXnSH.mjs';
+
+declare const VIRTUAL_ID = "virtual:kbach/styles.css";
+declare function kbach(userConfig?: FrameworkConfig): Plugin;
+
+export { VIRTUAL_ID, kbach };

package/dist/vite-plugin.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+import { F as FrameworkConfig } from './types-CV5vXnSH.js';
+
+declare const VIRTUAL_ID = "virtual:kbach/styles.css";
+declare function kbach(userConfig?: FrameworkConfig): Plugin;
+
+export { VIRTUAL_ID, kbach };

package/dist/vite-plugin.js

@@ -3388,7 +3388,7 @@ function formatKbachCSS(tokenCSS, theme) {
   const colorVars = buildColorVarMap(theme, allRaw);
   function applyVars(css) {
     for (const [val, varName] of colorVars) {
-      css = css.replaceAll(val, `var(${varName})`);
+      css = css.split(val).join(`var(${varName})`);
     }
     return css;
   }

package/dist/vite-plugin.mjs

@@ -46,7 +46,7 @@ function formatKbachCSS(tokenCSS, theme) {
   const colorVars = buildColorVarMap(theme, allRaw);
   function applyVars(css) {
     for (const [val, varName] of colorVars) {
-      css = css.replaceAll(val, `var(${varName})`);
+      css = css.split(val).join(`var(${varName})`);
     }
     return css;
   }

package/package.json

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