@kbach/react 0.6.0 → 0.6.2

package/dist/{chunk-AAAI37Y4.mjs → chunk-NWW57Q5Q.mjs}

@@ -1,13 +1,7 @@
+'use client';
 import {
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
-  getWebTag,
-  hasResponsiveBuckets,
-  transformToWebProps,
-  useConditionalWidth,
-  useGlobalDarkMode
-} from "./chunk-D4LJICWZ.mjs";
-import {
   flatten,
   getActiveBreakpoints,
   getConfig,
@@ -16,13 +10,20 @@ import {
   getInteractiveModifiers,
   getModeModifiers,
   getResponsiveModifiers,
+  getWebTag,
+  hasResponsiveBuckets,
   isNative,
   isRuntimeCSSDisabled,
   isWeb,
   normalizeClassString,
   onConfigChange,
-  resolve
-} from "./chunk-6NED62DB.mjs";
+  resolve,
+  stripInternalMarkers,
+  stripWebOnlyProps,
+  transformToWebProps,
+  useConditionalWidth,
+  useGlobalDarkMode
+} from "./chunk-GRZ6MVIL.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -52,36 +53,6 @@ var DarkWrapper = React.forwardRef(
   }
 );
 DarkWrapper.displayName = "Kbach.DarkWrapper";
-function stripInternalMarkers(s) {
-  delete s.__divideX;
-  delete s.__divideY;
-  delete s.__divideColor;
-  delete s.__divideStyle;
-  delete s.__keyframe;
-}
-function stripWebOnlyProps(s) {
-  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
-  delete s.gridTemplateColumns;
-  delete s.gridTemplateRows;
-  delete s.gridColumn;
-  delete s.gridRow;
-  delete s.gridArea;
-  delete s.gridColumnStart;
-  delete s.gridColumnEnd;
-  delete s.gridRowStart;
-  delete s.gridRowEnd;
-  delete s.gridAutoFlow;
-  delete s.gridAutoColumns;
-  delete s.gridAutoRows;
-  delete s.placeItems;
-  delete s.placeContent;
-  delete s.justifyItems;
-  delete s.placeSelf;
-  delete s.justifySelf;
-  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
-    delete s.position;
-  }
-}
 
 // src/jsx-runtime.tsx
 var _cachedDefaultFont = void 0;
@@ -140,36 +111,6 @@ function mergeStyle(computed, userStyle) {
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
 }
-function stripInternalMarkers2(s) {
-  delete s.__divideX;
-  delete s.__divideY;
-  delete s.__divideColor;
-  delete s.__divideStyle;
-  delete s.__keyframe;
-}
-function stripWebOnlyInlineProps(s) {
-  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
-  delete s.gridTemplateColumns;
-  delete s.gridTemplateRows;
-  delete s.gridColumn;
-  delete s.gridRow;
-  delete s.gridArea;
-  delete s.gridColumnStart;
-  delete s.gridColumnEnd;
-  delete s.gridRowStart;
-  delete s.gridRowEnd;
-  delete s.gridAutoFlow;
-  delete s.gridAutoColumns;
-  delete s.gridAutoRows;
-  delete s.placeItems;
-  delete s.placeContent;
-  delete s.justifyItems;
-  delete s.placeSelf;
-  delete s.justifySelf;
-  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
-    delete s.position;
-  }
-}
 function processElement(type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
   const webTag = isWeb ? getWebTag(type, rawProps ?? void 0) : null;
@@ -229,8 +170,8 @@ function processElement(type, rawProps, key, isStaticChildren) {
   let finalStyle;
   if (!skipComputedInline) {
     const computedStyle = flatten(resolved, false);
-    stripInternalMarkers2(computedStyle);
-    if (typeof effectiveType !== "string") stripWebOnlyInlineProps(computedStyle);
+    stripInternalMarkers(computedStyle);
+    if (typeof effectiveType !== "string") stripWebOnlyProps(computedStyle);
     finalStyle = mergeStyle(computedStyle, userStyle);
   } else {
     finalStyle = userStyle ?? void 0;

package/dist/index.d.mts

@@ -1,12 +1,142 @@
 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-BESBQANS.mjs';
-export { d as PluginAPI } from './types-BESBQANS.mjs';
 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>;
+    [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
@@ -48,6 +178,14 @@ declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
     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.
@@ -229,6 +367,7 @@ interface InteractiveWrapperProps {
     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;
@@ -278,4 +417,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, 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/index.d.ts

@@ -1,12 +1,142 @@
 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-BESBQANS.js';
-export { d as PluginAPI } from './types-BESBQANS.js';
 export { r as registerWebElement } from './web-substitute-CfpYFnE7.js';
 
+/**
+ * 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>;
+    [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
@@ -48,6 +178,14 @@ declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
     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.
@@ -229,6 +367,7 @@ interface InteractiveWrapperProps {
     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;
@@ -278,4 +417,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, 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 };