@kbach/ui 0.1.0-beta.7 → 1.0.0-beta.1

package/README.md

@@ -1,205 +1,63 @@
 # @kbach/ui
 
-Tailwind-like utility classes for React — web, React Native, and Expo. Write `className` strings once; a custom JSX runtime resolves them at render time on every platform. An optional Vite plugin outputs a static `kbach.css` for zero runtime cost on web.
+A tiny, dependency-free class-name composer — the same public API and
+behavior as the widely-used [`clsx`](https://www.npmjs.com/package/clsx)
+package, reimplemented from scratch so using it adds zero runtime
+dependencies to your project.
 
-```jsx
-<div className="bg-white dark:bg-gray-10 p-4 rounded-xl shadow" />
-<div className="bg-blue-7 hover:bg-blue-8 dark:bg-indigo-6 rounded-lg px-6 py-3" />
-```
-
-[npm package](https://www.npmjs.com/package/@kbach/ui)
+> Beta — API may still change before 1.0.0.
 
-## Setup
+## Install
 
-```
+```sh
 npm install @kbach/ui
 ```
 
-### JSX runtime (always required)
-
-**tsconfig.json:**
-
-```json
-{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@kbach/ui" } }
-```
-
-That's the only setting needed — Vite, Next.js, and React Router all read it. Don't *also* set `jsxImportSource` on a bundler plugin (e.g. `@vitejs/plugin-react`); one source of truth avoids conflicts.
-
-### Which setup do I need?
-
-| Framework | Use |
-|---|---|
-| Vite, React Router library mode, CRA, other Vite-based | **[Static CSS](#static-css)** (recommended) — zero runtime cost, catches typos at build time |
-| React Router, framework mode | **[Static CSS](#static-css)** — and skip `@vitejs/plugin-react`, see note below |
-| Next.js | **[Next.js](#nextjs)** — Runtime setup, plus one App Router-specific detail |
-| React Native, Expo | **[React Native / Expo](#react-native--expo)** — different setup entirely (Babel preset, not the JSX runtime step above) |
-
-### Static CSS
-
-Vite only, and the recommended setup for any Vite-based app — a build-time plugin writes real CSS into a file you import at build time, so nothing is generated client-side and there's zero runtime cost. Three pieces, all required:
-
-**1. Add the plugin:**
+## Usage
 
 ```ts
-// vite.config.ts
-import { defineConfig } from 'vite';
-import { kbach } from '@kbach/ui/vite';
+import { clsx } from '@kbach/ui';
 
-export default defineConfig({ plugins: [kbach()] });
+clsx('px-4 py-2', isActive && 'bg-blue-6', { 'opacity-50': disabled });
+// "px-4 py-2 bg-blue-6" — when isActive is true and disabled is false
 ```
 
-**2. Create an empty stylesheet with the markers, and import it once:**
-
-```css
-/* src/kbach.css */
-/* kbach:start */
-/* kbach:end */
-```
+Also available as the default export, matching how `clsx` itself is
+conventionally imported:
 
 ```ts
-// main.tsx
-import './kbach.css';
+import clsx from '@kbach/ui';
 ```
 
-This import is what actually switches the app over to Static CSS — the plugin alone only generates the file; without importing it, runtime injection stays active and you get both at once.
+Accepts, in any combination and to any nesting depth:
 
-**3. Wrap your app — no `<KbachReset />` here, `kbach.css` already includes the base reset:**
-
-```jsx
-import { ThemeProvider } from '@kbach/ui';
-
-export default function Root() {
-  return <ThemeProvider defaultMode="system"><App /></ThemeProvider>;
-}
-```
-
-Done. The plugin scans your source at build time and writes CSS between the markers, and warns in the terminal (with a clickable `file:line`) for any class it doesn't recognize — usually a typo.
-
-Using a custom `kbach.config.js`? See [Wiring a custom config in](#wiring-a-custom-config-in) below — it needs to be passed in twice for Static CSS specifically.
-
-**React Router framework mode:** don't add `@vitejs/plugin-react` — `reactRouter()` already provides JSX handling, and both together crash the page (`Identifier 'RefreshRuntime' has already been declared`).
+- **Strings** (`'px-4'`) — kept as-is.
+- **Falsy values** (`false`, `null`, `undefined`, `0`, `''`, `NaN`) — dropped
+  entirely, so `isActive && 'bg-blue-6'` reads naturally.
+- **Objects** (`{ 'opacity-50': disabled }`) — a key is kept only when its
+  value is truthy.
+- **Arrays** (`['px-4', condition && 'py-2']`) — flattened recursively.
 
 ```ts
-// vite.config.ts
-import { reactRouter } from '@react-router/dev/vite';
-import { defineConfig } from 'vite';
-import { kbach } from '@kbach/ui/vite'; // omit if using Runtime setup instead
-
-export default defineConfig({ plugins: [kbach(), reactRouter()] });
-```
-
-(React Router library mode — `createBrowserRouter`, no SSR — has no such conflict; set it up like any Vite + React app.)
-
-### Runtime
-
-Client-side CSS injection — works with any bundler (Vite, webpack, Turbopack, Metro-for-web, …), no build plugin. Next.js always uses this, or use it on Vite if you'd rather not wire up the plugin yet:
-
-```jsx
-import { ThemeProvider, KbachReset } from '@kbach/ui';
-
-export default function Root() {
-  return (
-    <ThemeProvider defaultMode="system">
-      <KbachReset />
-      <App />
-    </ThemeProvider>
-  );
-}
+clsx('base', ['px-4', { 'bg-blue-6': true }], { 'opacity-50': false });
+// "base px-4 bg-blue-6"
 ```
 
-That's it — done. `<KbachReset />` renders the base reset as real markup instead of waiting on client JS — matters most for SSR, where it avoids a flash of unstyled browser defaults before hydration.
-
-Using a custom `kbach.config.js`? Pass it to `ThemeProvider` — see [Wiring a custom config in](#wiring-a-custom-config-in).
-
-Don't also set up Static CSS above in the same app — pick one.
-
-### Next.js
-
-Always [Runtime setup](#runtime) above — Static CSS doesn't apply (webpack/Turbopack, not Vite). The `tsconfig.json` step from [Setup](#setup) applies as-is; SWC reads `jsxImportSource` the same way Vite does.
-
-The one Next.js-specific detail: render `<KbachReset />` once in the root App Router `layout.tsx`:
-
-```jsx
-// app/layout.tsx
-import { ThemeProvider, KbachReset } from '@kbach/ui';
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body>
-        <ThemeProvider defaultMode="system">
-          <KbachReset />
-          {children}
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}
-```
-
-Without it, expect a flash of raw browser defaults on first paint until hydration completes. `@kbach/ui`'s compiled output ships its own `"use client"` directive, so App Router Server Components can use `className`, `styled()`, hooks, `<ThemeProvider>`, and `<KbachReset>` directly — no manual `'use client'` wrapper needed.
-
-### React Native / Expo
-
-Same `npm install @kbach/ui` — no separate package. Everything else (API, modifiers, color system) is the same import as web; only setup differs.
-
-**1. babel.config.js:**
-
-```js
-module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: [
-      'babel-preset-expo',
-      '@kbach/ui/babel',
-    ],
-  };
-};
-```
-
-Or the one-liner helper: `const { createKbachConfig } = require('@kbach/ui/native'); module.exports = createKbachConfig();`. After changing this file, clear the Metro cache: `npx expo start --clear`.
-
-**2. Wrap your app:**
-
-```jsx
-import { ThemeProvider } from '@kbach/ui';
-
-export default function App() {
-  return (
-    <ThemeProvider defaultMode="system">
-      <AppContent />
-    </ThemeProvider>
-  );
-}
-```
-
-`ThemeProvider` auto-detects React Native at render time and reads `useColorScheme()`/`useWindowDimensions()` automatically — same import as web, no `/native` subpath needed.
-
-A handful of utilities are native-only or web-only, and Expo Web/React Native Web has its own notes — see [KBACH.md](./KBACH.md#native-only-utilities) for the full platform-differences reference.
-
-### Wiring a custom config in
-
-`kbach.config.js` isn't picked up automatically — it has to be passed in explicitly, and **where** depends on what it affects:
-
-- **Runtime** (dark mode, `useColors()`, animations) — needed by every setup above, pass it to `ThemeProvider`:
-  ```jsx
-  import { ThemeProvider } from '@kbach/ui';
-  import kbachConfig from '../kbach.config';
-
-  <ThemeProvider defaultMode="system" config={kbachConfig}><App /></ThemeProvider>
-  ```
-- **Build-time** (what the Vite plugin scans against) — only for [Static CSS](#static-css), pass it to the plugin:
-  ```ts
-  import { kbach } from '@kbach/ui/vite';
-  import kbachConfig from './kbach.config';
-
-  export default defineConfig({ plugins: [kbach(kbachConfig)] });
-  ```
+## Do you need this with Kbach?
 
-Skipping the runtime one under Static CSS is an easy mistake — the generated `kbach.css` looks correct, but dark mode/`useColors()`/animations silently fall back to defaults since nothing told the running app what you customized.
+Not really — a Kbach `className` is just a plain string, so plain
+JavaScript already composes it fine (`"bg-" + color + '-6'`,
+`[base, active && 'opacity-100'].join(' ')`; see
+[`@kbach/react`](https://www.npmjs.com/package/@kbach/react)'s own README).
+This package exists purely as an ergonomic convenience for anyone who'd
+rather write conditional classes declaratively, and for porting code that
+already uses `clsx`/`classnames` without adding a second dependency.
 
-## More information
+`@kbach/react`'s static build-time scanner already recognizes `clsx(...)`
+call sites (alongside `cn`/`classnames`/`cx`/`kb`) and extracts every string
+literal inside them on its own — using this function needs no extra plugin
+configuration to keep working with the static CSS build.
 
-[kbach-ui.md](./kbach-ui.md) — the complete reference: `ThemeProvider`/`useTheme`/dark mode, the full API (`styled`, `cx`, `useStyles`, `kb`, `useColors`, typed theme tokens), every modifier, the color system, CSS resets, and all `kbach.config.js` options — covers web and React Native/Expo.
+## License
 
-`@kbach/native` is deprecated and no longer maintained — its last published npm version is frozen as a compatibility shim re-exporting this package. Install `@kbach/ui` directly for new projects.
+MIT

package/dist/index.d.mts

@@ -0,0 +1,43 @@
+/**
+ * A tiny, dependency-free class-name composer — combine strings, arrays,
+ * and objects (with boolean values) into one space-separated className,
+ * skipping anything falsy. Matches the widely-used `clsx` npm package's
+ * public API and behavior exactly (a from-scratch reimplementation, not a
+ * fork or a thin wrapper around it) — Kbach ships its own copy so using it
+ * adds zero runtime dependencies, and so it works identically whether or
+ * not `clsx`/`classnames` happens to already be installed.
+ *
+ * Kbach class strings never NEED this — a Kbach `className` is just a
+ * plain string, composable with plain JS (`"bg-" + color + "-6"`,
+ * `[base, active && "opacity-100"].join(" ")`, see `@kbach/react`'s own
+ * README) with no special API required. This exists purely as an
+ * ergonomic convenience for the common "several conditional classes on one
+ * element" shape, for anyone who'd rather write it declaratively:
+ *
+ * ```ts
+ * clsx("px-4 py-2", isActive && "bg-blue-6", { "opacity-50": disabled });
+ * // "px-4 py-2 bg-blue-6" (when isActive is true and disabled is false)
+ * ```
+ *
+ * `@kbach/react`'s static build-time scanner already recognizes `clsx(...)`
+ * call sites (alongside `cn`/`classnames`/`cx`/`kb`) and extracts every
+ * string literal inside them on its own — using this function needs no
+ * extra plugin configuration to keep working with the static CSS build.
+ */
+/** Anything `clsx` accepts as one argument — recursively, for arrays. */
+type ClassValue = ClassArray | ClassDictionary | string | number | bigint | boolean | null | undefined;
+/** A key is kept (as a literal class name) only when its value is truthy — `{ "opacity-50": disabled }`. */
+interface ClassDictionary {
+    [className: string]: unknown;
+}
+type ClassArray = ClassValue[];
+/**
+ * Joins every truthy piece across all arguments with a single space,
+ * skipping falsy values (`false`, `null`, `undefined`, `0`, `""`, `NaN`)
+ * entirely — they contribute nothing, not even an extra space. Arrays are
+ * flattened (recursively, to any depth); a plain object keeps only the
+ * keys whose value is truthy.
+ */
+declare function clsx(...inputs: ClassValue[]): string;
+
+export { type ClassArray, type ClassDictionary, type ClassValue, clsx, clsx as default };

package/dist/index.d.ts

@@ -1,329 +1,43 @@
-import * as React from 'react';
-import React__default, { Context, ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-import * as __core from './core';
-import { ThemeMode, ResolvedConfig, DefaultColorName, defaultColors, ThemeColors, DefaultSpacingKey, ThemeSpacing, FrameworkConfig, StyleValue, ResolvedStyle } from './core';
-export { DefaultColorName, DefaultSpacingKey, FrameworkConfig, ParsedClass, PluginAPI, ResolvedConfig, ResolvedStyle, StyleValue, ThemeConfig, ThemeMode, buildConfig, clearCache, defaultColors, defaultTheme, disableRuntimeCSS, flatten, generateKbachTypesDts, getConfig, initConfig, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, updateConfig } from './core';
-export { r as registerWebElement } from './web-substitute-6xH1WxpZ.js';
-
-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: 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;
-}
 /**
- * Empty on purpose — augment it via declaration merging so `useColors()` (and
- * `useSpacing()`'s equivalent, `KbachCustomSpacing`) know about a project's
- * `kbach.config.js` colors without repeating a type parameter at every call
- * site. `kbach.config.js` is a plain runtime-loaded .js file, so TypeScript
- * can't see into it on its own — this is the same declaration-merging pattern
- * styled-components' `DefaultTheme` and i18next's resource typing use for the
- * identical problem. Put this in any .d.ts your tsconfig includes:
+ * A tiny, dependency-free class-name composer — combine strings, arrays,
+ * and objects (with boolean values) into one space-separated className,
+ * skipping anything falsy. Matches the widely-used `clsx` npm package's
+ * public API and behavior exactly (a from-scratch reimplementation, not a
+ * fork or a thin wrapper around it) — Kbach ships its own copy so using it
+ * adds zero runtime dependencies, and so it works identically whether or
+ * not `clsx`/`classnames` happens to already be installed.
+ *
+ * Kbach class strings never NEED this — a Kbach `className` is just a
+ * plain string, composable with plain JS (`"bg-" + color + "-6"`,
+ * `[base, active && "opacity-100"].join(" ")`, see `@kbach/react`'s own
+ * README) with no special API required. This exists purely as an
+ * ergonomic convenience for the common "several conditional classes on one
+ * element" shape, for anyone who'd rather write it declaratively:
  *
  * ```ts
- * import '@kbach/ui'; // or '@kbach/native' — either works, native re-exports react's types
- * declare module '@kbach/ui' {
- *   interface KbachCustomColors {
- *     primary: string;    // a flat color, like the built-in `white`/`black`
- *     brand: ColorScale;  // a 1–12 shade scale, like the built-in `blue`/`red`
- *   }
- * }
+ * clsx("px-4 py-2", isActive && "bg-blue-6", { "opacity-50": disabled });
+ * // "px-4 py-2 bg-blue-6" (when isActive is true and disabled is false)
  * ```
  *
- * A mode-aware `{ light, dark }` config color (see ColorValue) still resolves
- * to a flat `string` at read time — declare those as `string` here too, not
- * as the config shape.
- */
-interface KbachCustomColors {
-}
-type ColorValueFor<K extends string> = K extends keyof typeof defaultColors ? (typeof defaultColors)[K] extends string ? string : ColorScale : K extends keyof KbachCustomColors ? KbachCustomColors[K] : ColorScale | string;
-/** Every color name TypeScript knows about without an explicit type parameter: the built-in theme plus whatever's been added via the KbachCustomColors augmentation above. */
-type KnownColorName = DefaultColorName | Extract<keyof KbachCustomColors, string>;
-/**
- * `ColorName` defaults to `KnownColorName` (the built-in theme's color names
- * plus anything augmented onto `KbachCustomColors` above), so `useColors()`
- * gets full autocomplete and typo-catching out of the box — including custom
- * `kbach.config.js` colors, once augmented once project-wide. Without that
- * augmentation, a project with extra colors can still widen per call instead:
- * `useColors<DefaultColorName | 'brand'>()`.
- */
-type ColorsAPI<ColorName extends string = KnownColorName> = {
-    readonly [K in ColorName]: ColorValueFor<K>;
-} & {
-    /**
-     * 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;
-};
-declare function wrapColors<ColorName extends string = KnownColorName>(rawColors: ThemeColors, isDark?: boolean): ColorsAPI<ColorName>;
-declare function useColors<ColorName extends string = KnownColorName>(): ColorsAPI<ColorName>;
-
-/**
- * Empty on purpose — augment it via declaration merging so `useSpacing()`
- * (like `useColors()`'s `KbachCustomColors`) knows about a project's
- * `kbach.config.js` spacing keys without repeating a type parameter at every
- * call site:
- *
- * ```ts
- * import '@kbach/ui'; // or '@kbach/native'
- * declare module '@kbach/ui' {
- *   interface KbachCustomSpacing {
- *     18: true; // value doesn't matter — only the key is read (see SpacingAPI)
- *   }
- * }
- * ```
+ * `@kbach/react`'s static build-time scanner already recognizes `clsx(...)`
+ * call sites (alongside `cn`/`classnames`/`cx`/`kb`) and extracts every
+ * string literal inside them on its own — using this function needs no
+ * extra plugin configuration to keep working with the static CSS build.
  */
-interface KbachCustomSpacing {
+/** Anything `clsx` accepts as one argument — recursively, for arrays. */
+type ClassValue = ClassArray | ClassDictionary | string | number | bigint | boolean | null | undefined;
+/** A key is kept (as a literal class name) only when its value is truthy — `{ "opacity-50": disabled }`. */
+interface ClassDictionary {
+    [className: string]: unknown;
 }
-/** Every spacing key TypeScript knows about without an explicit type parameter. */
-type KnownSpacingKey = DefaultSpacingKey | Extract<keyof KbachCustomSpacing, string>;
-/**
- * `SpacingKey` defaults to `KnownSpacingKey` (the built-in theme's spacing keys
- * plus anything augmented onto `KbachCustomSpacing` above), so `useSpacing()`
- * gets full autocomplete and typo-catching out of the box — including custom
- * `kbach.config.js` keys, once augmented once project-wide. Without that
- * augmentation, a project with extra keys can still widen per call instead:
- * `useSpacing<DefaultSpacingKey | '18'>()`.
- */
-type SpacingAPI<SpacingKey extends string = KnownSpacingKey> = {
-    readonly [K in SpacingKey]: number | string;
-};
-declare function wrapSpacing<SpacingKey extends string = KnownSpacingKey>(rawSpacing: ThemeSpacing): SpacingAPI<SpacingKey>;
+type ClassArray = ClassValue[];
 /**
- * Returns the active theme's spacing scale as a typed, autocomplete-friendly
- * object — useful anywhere a raw JS number/string is needed instead of a
- * className (Animated API distances, chart dimensions, FlatList separator
- * heights, etc.). Values match exactly what `p-`/`m-`/`w-`/`h-`/`gap-` and
- * other spacing-scale utilities resolve to.
- *
- * ```ts
- * const spacing = useSpacing();
- * spacing[4]      // 16
- * spacing.full    // '100%'
- * spacing['1/2']  // '50%'
- * ```
- */
-declare function useSpacing<SpacingKey extends string = KnownSpacingKey>(): SpacingAPI<SpacingKey>;
-
-interface ThemeProviderProps {
-    children: ReactNode;
-    /** Initial mode. Falls back to persisted value, then 'system'. */
-    defaultMode?: ThemeMode;
-    /**
-     * System color scheme for native `defaultMode="system"`.
-     *
-     * On React Native this is detected automatically via `useColorScheme()` —
-     * pass this prop only to override that (e.g. in tests, or Storybook).
-     *
-     * @example
-     * ```tsx
-     * <ThemeProvider defaultMode="system" colorScheme="dark">…</ThemeProvider>
-     * ```
-     */
-    colorScheme?: 'light' | 'dark' | null;
-    /**
-     * Current window/screen width in pixels for responsive breakpoints.
-     * Detected automatically on both web (`window.innerWidth`) and React
-     * Native (`useWindowDimensions()`) — pass this prop only to override that.
-     */
-    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.
- *
- * Skips rendering entirely once disableRuntimeCSS() has fired — the Vite
- * plugin calls it automatically wherever kbach.css gets imported (see
- * vite-plugin.ts's transform hook), and that static file already inlines
- * this exact reset. Previously this rendered unconditionally regardless of
- * that flag, so an app using the static-CSS setup that ALSO keeps
- * <KbachReset/> mounted (e.g. copied from a starter template's root layout
- * and never revisited) got the same reset rules twice — once from the
- * static file, once from this tag — on every single page load, real static
- * CSS or not. Checked here (render time), not just documented, so the
- * static setup is actually leak-free even when this stays in the tree.
- */
-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-9 rounded-xl p-4 shadow-md');
- * const Button = styled(TouchableOpacity, 'bg-blue-6 pressed:bg-blue-8 dark:bg-blue-7 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-9 p-4');
- *
- * // With interaction state
- * const [pressed, setPressed] = useState(false);
- * const styles = useStyles('bg-blue-6 pressed:bg-blue-8', { pressed });
- *
- * // Multiple class strings (merged left-to-right)
- * const styles = useStyles(['bg-white p-4', 'dark:bg-gray-9 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[]): __core.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-9 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-6', undefined)
- * // → 'bg-white p-4 border-2 border-blue-6'
- * ```
+ * Joins every truthy piece across all arguments with a single space,
+ * skipping falsy values (`false`, `null`, `undefined`, `0`, `""`, `NaN`)
+ * entirely — they contribute nothing, not even an extra space. Arrays are
+ * flattened (recursively, to any depth); a plain object keeps only the
+ * keys whose value is truthy.
  */
-declare function cx(...classes: Array<string | false | null | undefined>): string;
+declare function clsx(...inputs: ClassValue[]): string;
 
-export { type ColorScale, type ColorsAPI, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type KbachCustomColors, type KbachCustomSpacing, KbachReset, type SpacingAPI, type StyledProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, cx, kb, styled, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useSpacing, useStyles, useTheme, wrapColors, wrapSpacing };
+export { type ClassArray, type ClassDictionary, type ClassValue, clsx, clsx as default };