@kbach/react 0.6.24 → 0.6.26

package/kbach-react.md

@@ -13,7 +13,7 @@ Package: `@kbach/react`
 { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@kbach/react" } }
 ```
 
-### vite.config.ts (plain Vite only — skip @vitejs/plugin-react if a meta-framework already provides its own Vite/React plugin, e.g. React Router's reactRouter(); see below)
+### vite.config.ts — Static CSS setup (recommended, plain Vite only — skip @vitejs/plugin-react if a meta-framework already provides its own Vite/React plugin, e.g. React Router's reactRouter(); see below)
 Requires `vite` and `@vitejs/plugin-react` as dev dependencies — not installed by `@kbach/react` itself: `npm install -D vite @vitejs/plugin-react`.
 ```ts
 import { defineConfig } from 'vite';
@@ -27,6 +27,19 @@ export default defineConfig({
   ],
 });
 ```
+Then create the stylesheet the plugin writes into and import it once — this import is the step that actually disables runtime CSS injection; `kbach()` in the plugins array alone only generates the file:
+```css
+/* src/kbach.css */
+/* kbach:start */
+/* kbach:end */
+```
+```ts
+// main.tsx
+import './kbach.css';
+```
+
+### Runtime setup (any bundler, no Vite plugin)
+Skip `kbach()` and the `kbach.css` import above. Works with any bundler (Vite, webpack, Turbopack, Metro-for-web) with no build plugin — the only option for Next.js (see below), or for skipping the plugin for now on Vite.
 
 ### Babel (non-Vite)
 ```js
@@ -176,6 +189,7 @@ 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%'`).
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.24",
+  "version": "0.6.26",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -9,19 +9,19 @@
     ".": {
       "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
     "./jsx-runtime": {
       "types": "./dist/jsx-runtime.d.ts",
       "source": "./src/jsx-runtime.tsx",
-      "import": "./dist/jsx-runtime.js",
+      "import": "./dist/jsx-runtime.mjs",
       "require": "./dist/jsx-runtime.js"
     },
     "./jsx-dev-runtime": {
       "types": "./dist/jsx-dev-runtime.d.ts",
       "source": "./src/jsx-dev-runtime.tsx",
-      "import": "./dist/jsx-dev-runtime.js",
+      "import": "./dist/jsx-dev-runtime.mjs",
       "require": "./dist/jsx-dev-runtime.js"
     },
     "./types": {
@@ -32,14 +32,10 @@
       "source": "./src/vite-plugin.ts",
       "import": "./dist/vite-plugin.mjs",
       "require": "./dist/vite-plugin.js"
-    },
-    "./vite/client": {
-      "types": "./dist/vite-plugin-client.d.ts"
     }
   },
   "scripts": {
     "build": "tsup",
-    "postbuild": "node -e \"const f=require('fs');f.copyFileSync('src/vite-plugin-client.d.ts','dist/vite-plugin-client.d.ts');f.copyFileSync('src/vite-plugin-client.d.ts','dist/vite-plugin-client.d.mts')\"",
     "dev": "tsup --watch",
     "test": "vitest run --passWithNoTests",
     "lint": "tsc --noEmit",

package/dist/index.d.mts

@@ -1,455 +0,0 @@
-import * as React from 'react';
-import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-export { r as registerWebElement } from './web-substitute-CfpYFnE7.mjs';
-
-/**
- * Unified modifier registry — single source of truth for ALL modifier behavior.
- *
- * Adding a new modifier requires editing ONLY this file:
- *   1. Add an entry to BUILTIN_MODIFIERS with its CSS and JS behavior.
- *   2. Done — parser, resolver, CSS generator, and JSX runtime all derive
- *      their behavior from this data automatically.
- *
- * Plugin authors can register custom modifiers via registerModifier().
- */
-interface ModifierDef {
-    /** CSS pseudo-class or pseudo-element appended to the selector (e.g. ':hover', '::before') */
-    pseudo?: string;
-    /** Ancestor selector prefix INCLUDING trailing space (e.g. '.group:hover ', '.peer:focus ~ ') */
-    ancestorSelector?: string;
-    /** Directionality attribute selector prefix INCLUDING trailing space (e.g. '[dir="rtl"] ') */
-    dirSelector?: string;
-    /** @media query body WITHOUT the '@media ' prefix (e.g. 'print', '(orientation: landscape)') */
-    mediaQuery?: string;
-    /** Dark/light mode scheme — triggers the configured darkMode strategy in CSS output */
-    darkScheme?: 'dark' | 'light';
-    /** True for responsive modifiers — wraps in @media (min-width: theme.screens[name]) */
-    isResponsive?: boolean;
-    /**
-     * Forces !important on all declarations in the generated CSS rule.
-     * Applied automatically for structural / ancestor / media modifiers that must
-     * win over base inline styles.
-     */
-    forcesImportant?: boolean;
-    /**
-     * How the JSX runtime routes this modifier:
-     *   'interactive'  — managed by InteractiveWrapper (hover, focus, pressed, …)
-     *   'mode'         — managed by DarkWrapper (dark, light, not-dark, …)
-     *   'responsive'   — managed by DarkWrapper (sm, md, lg, xl, 2xl)
-     *   'css-only'     — CSS injection only; matchModifier always returns false
-     */
-    jsBehavior: 'interactive' | 'mode' | 'responsive' | 'css-only';
-    /**
-     * Evaluates whether this modifier's condition is met at runtime.
-     * Omit for 'css-only' modifiers — they never apply as inline styles.
-     */
-    jsMatch?: (isDark: boolean, state: Record<string, boolean | undefined>, breakpoints: Set<string>) => boolean;
-}
-
-type ThemeMode = 'light' | 'dark' | 'system';
-interface StyleValue {
-    [key: string]: string | number | undefined | null | StyleValue | StyleValue[];
-}
-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 | string>;
-    shadow: Record<string, StyleValue>;
-    screens: Record<string, string | number>;
-    /**
-     * Custom @keyframes, web only. Each key is a keyframe name, its value maps
-     * percentage/from/to selectors to a plain CSS declaration object (camelCase
-     * properties, same shape as an inline style object):
-     *   keyframes: { wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' }, '50%': { transform: 'rotate(3deg)' } } }
-     * Referenced from `animation` below, or directly via animate-[wiggle_1s_ease-in-out].
-     */
-    keyframes: Record<string, Record<string, StyleValue>>;
-    /**
-     * Named animation shorthands built on `keyframes` above, referenced via
-     * animate-{name} (e.g. animate-wiggle):
-     *   animation: { wiggle: 'wiggle 1s ease-in-out infinite' }
-     * The first word must match a `keyframes` key so its @keyframes rule can be
-     * injected alongside the animation — a name with no matching keyframes entry
-     * still sets the `animation` CSS property, it just won't animate anything.
-     */
-    animation: Record<string, string>;
-    [key: string]: unknown;
-}
-/**
- * 'class'     — toggles .dark class on <html>
- * 'media'     — uses prefers-color-scheme media query
- * 'attribute' — uses data-theme="dark" attribute on <html>
- */
-type DarkMode = 'attribute' | 'class' | 'media';
-interface PluginAPI {
-    addUtility(name: string, styles: StyleValue): void;
-    /**
-     * Register a custom variant.
-     *
-     * Pass a CSS selector string for simple cases — it is automatically
-     * converted into a ModifierDef that generates correct CSS rules:
-     *   addVariant('hocus', ':hover, :focus')  // pseudo
-     *   addVariant('supports-grid', '@media (display: grid)')  // media
-     *   addVariant('dark-green', '.dark-green')  // ancestor selector
-     *
-     * Pass a full ModifierDef object for advanced control (e.g. JS-trackable
-     * interactive variants with custom jsMatch logic).
-     */
-    addVariant(name: string, selectorOrDef: string | ModifierDef): 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>;
-}
-
-declare const defaultColors: ThemeColors;
-declare const defaultTheme: ThemeConfig;
-
-declare function setResolveTarget(target: 'web' | 'native' | null): void;
-
-declare function parseClass(className: string): ParsedClass | null;
-/**
- * Split a class string into tokens. Whitespace at bracket depth > 0 is STRIPPED
- * (not just skipped) so that arbitrary values like rgb(41, 172, 15) become valid
- * CSS class name tokens: bg-[rgb(41,172,15)].
- */
-declare function splitClassTokens(classString: string): string[];
-/**
- * Normalize a full class string so it is safe to use as an HTML className value.
- * Strips spaces inside brackets: "bg-[rgb(41, 172, 15)] p-4" → "bg-[rgb(41,172,15)] p-4"
- */
-declare function normalizeClassString(classString: string): string;
-/** Parse a space-separated class string into individual ParsedClass objects. */
-declare function parseClasses(classString: string): ParsedClass[];
-
-declare function disableRuntimeCSS(): void;
-/**
- * Resolve a class string to a ResolvedStyle object.
- *
- * Results are cached per (theme, classString, darkMode) — repeated calls with
- * the same arguments are O(1).  Different theme objects each get their own
- * cache so concurrent ThemeProviders with different configs are always correct.
- */
-declare function resolve(classString: string, theme: ThemeConfig, darkMode?: 'attribute' | 'class' | 'media'): ResolvedStyle;
-/**
- * Flatten a ResolvedStyle into a single StyleValue for the current runtime state.
- * Used by useStyles() and styled().
- *
- * The sort step is memoized per resolved object reference (#6) — when resolve()
- * returns a cached object, getSortedEntries() is O(1) on all subsequent calls.
- */
-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;
-/**
- * Clear CSS injection state so stale rules are re-injected when the theme changes.
- *
- * The per-theme style cache (WeakMap) does not need to be cleared manually:
- * updateConfig() creates a new theme object, making the old cache entry
- * automatically unreachable for GC.
- */
-declare function clearCache(): void;
-
-/**
- * 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;
-
-/**
- * Renders Kbach's base browser-default reset (borderless button/input,
- * visible checkbox/radio, no arrow-less <select>, etc.) as a plain <style>
- * tag so it's part of the page's initial HTML.
- *
- * Runtime-only setups (no Vite plugin / static kbach.css) otherwise only get
- * this reset once ThemeProvider's client-side effect runs — fine for a plain
- * CSR app, but under SSR the server has no JS to run it, so the first paint
- * ships with raw browser defaults (e.g. the native button border) until
- * hydration catches up. Render this once, as high in <head> as your
- * framework allows, to close that gap.
- *
- * Not needed if you're on the static-CSS setup — kbach.css already includes
- * the same reset, and the runtime injector detects this tag and skips adding
- * it a second time either way.
- */
-declare function KbachReset(): React.JSX.Element | null;
-
-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;
-    onPointerCancel?: (...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, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, KbachReset, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

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

@@ -1,21 +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 intercept `className`/`kb` props exactly like the production runtime, but
- * forward `_source` to React's own jsxDEV so React DevTools can display the
- * correct file + line number for every element.
- */
-
-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';
-export { r as registerWebElement } from './web-substitute-CfpYFnE7.mjs';
-
-/**
- * @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.
- */
-
-declare function _invalidateDefaultFontCache(): void;
-declare function jsx(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
-declare function jsxs(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
-
-export { _invalidateDefaultFontCache, jsx, jsxs };

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/web-substitute-CfpYFnE7.d.mts

@@ -1,22 +0,0 @@
-/**
- * React Native → HTML element substitution for web rendering.
- *
- * When isWeb is true, known React Native component types (View, Text, Pressable, …)
- * are replaced with plain HTML element strings ('div', 'span', …) so the DOM shows
- * clean Kbach class names instead of React Native Web's generated css-view-* classes.
- *
- * Used by: jsx-runtime (bare JSX), styled(), DarkWrapper, InteractiveWrapper.
- */
-/**
- * Register a custom React Native component → HTML tag substitution.
- * Call once at app startup before first render.
- *
- * ```ts
- * import { Animated } from 'react-native';
- * import { registerWebElement } from '@kbach/react';
- * registerWebElement(Animated.View, 'div');
- * ```
- */
-declare function registerWebElement(rnComponent: unknown, htmlTag: string): void;
-
-export { registerWebElement as r };