@kbach/react 0.1.6 → 0.1.9

package/dist/index.d.mts

@@ -1,8 +1,127 @@
 import * as React from 'react';
 import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-import * as _kbach_core from '@kbach/core';
-import { ThemeMode, ResolvedConfig, FrameworkConfig, StyleValue, ResolvedStyle } from '@kbach/core';
-export { FrameworkConfig, ParsedClass, PluginAPI, ResolvedConfig, ResolvedStyle, StyleValue, ThemeConfig, ThemeMode, defaultColors, defaultTheme, flatten, getConfig, parseClass, parseClasses, resolve, updateConfig } from '@kbach/core';
+
+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;
+    /** 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>;
+    extend?: {
+        theme?: 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;
+
+/**
+ * Parse a single utility class string into its components.
+ *
+ * Handles:
+ *   - Up to 3 modifier prefixes:  dark:hover:focus:bg-white
+ *   - Negative values:            -p-4  -m-[10px]  -top-2
+ *   - Arbitrary bracket values:   bg-[#fff]  p-[10px]  text-[rgba(0,0,0,.5)]
+ *   - All Tailwind-equivalent utilities
+ */
+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
+ */
+declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
+    hover?: boolean;
+    focus?: boolean;
+    pressed?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    visited?: boolean;
+    placeholder?: boolean;
+}): 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;
 
 interface ThemeContextValue {
     /** The user-selected mode ('light' | 'dark' | 'system') */
@@ -62,8 +181,8 @@ declare function ThemeToggle({ variant, label, lightLabel, darkLabel, includeSys
 
 interface StyledProps {
     /** Additional utility classes applied on top of the base classes */
-    tw?: string;
-    /** Merged with resolved tw styles; applied last */
+    kb?: string;
+    /** Merged with resolved kb styles; applied last */
     style?: StyleValue | StyleValue[];
 }
 type OmittedKeys = 'style';
@@ -75,8 +194,8 @@ type OmittedKeys = 'style';
  * const Button = styled(TouchableOpacity, 'bg-blue-500 pressed:bg-blue-700 dark:bg-blue-600 rounded-lg p-3');
  *
  * // Use it:
- * <Card tw="mt-4">...</Card>
- * <Button onPress={handlePress} tw="w-full" />
+ * <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>;
@@ -112,7 +231,7 @@ declare function useStyles(classString: string | string[], state?: InteractionSt
  * 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[]): _kbach_core.ResolvedStyle;
+declare function useResolvedStyle(classString: string | string[]): ResolvedStyle;
 
 /**
  * Subscribe to the global dark-mode store with React's concurrent-safe
@@ -182,4 +301,4 @@ declare function tw(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type StyledProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, cx, styled, tw, useGlobalDarkMode, useResolvedStyle, useStyles, useTheme };
+export { 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, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, parseClass, parseClasses, resolve, styled, tw, updateConfig, useGlobalDarkMode, useResolvedStyle, useStyles, useTheme };

package/dist/index.d.ts

@@ -1,8 +1,127 @@
 import * as React from 'react';
 import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-import * as _kbach_core from '@kbach/core';
-import { ThemeMode, ResolvedConfig, FrameworkConfig, StyleValue, ResolvedStyle } from '@kbach/core';
-export { FrameworkConfig, ParsedClass, PluginAPI, ResolvedConfig, ResolvedStyle, StyleValue, ThemeConfig, ThemeMode, defaultColors, defaultTheme, flatten, getConfig, parseClass, parseClasses, resolve, updateConfig } from '@kbach/core';
+
+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;
+    /** 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>;
+    extend?: {
+        theme?: 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;
+
+/**
+ * Parse a single utility class string into its components.
+ *
+ * Handles:
+ *   - Up to 3 modifier prefixes:  dark:hover:focus:bg-white
+ *   - Negative values:            -p-4  -m-[10px]  -top-2
+ *   - Arbitrary bracket values:   bg-[#fff]  p-[10px]  text-[rgba(0,0,0,.5)]
+ *   - All Tailwind-equivalent utilities
+ */
+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
+ */
+declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
+    hover?: boolean;
+    focus?: boolean;
+    pressed?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    visited?: boolean;
+    placeholder?: boolean;
+}): 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;
 
 interface ThemeContextValue {
     /** The user-selected mode ('light' | 'dark' | 'system') */
@@ -62,8 +181,8 @@ declare function ThemeToggle({ variant, label, lightLabel, darkLabel, includeSys
 
 interface StyledProps {
     /** Additional utility classes applied on top of the base classes */
-    tw?: string;
-    /** Merged with resolved tw styles; applied last */
+    kb?: string;
+    /** Merged with resolved kb styles; applied last */
     style?: StyleValue | StyleValue[];
 }
 type OmittedKeys = 'style';
@@ -75,8 +194,8 @@ type OmittedKeys = 'style';
  * const Button = styled(TouchableOpacity, 'bg-blue-500 pressed:bg-blue-700 dark:bg-blue-600 rounded-lg p-3');
  *
  * // Use it:
- * <Card tw="mt-4">...</Card>
- * <Button onPress={handlePress} tw="w-full" />
+ * <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>;
@@ -112,7 +231,7 @@ declare function useStyles(classString: string | string[], state?: InteractionSt
  * 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[]): _kbach_core.ResolvedStyle;
+declare function useResolvedStyle(classString: string | string[]): ResolvedStyle;
 
 /**
  * Subscribe to the global dark-mode store with React's concurrent-safe
@@ -182,4 +301,4 @@ declare function tw(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type StyledProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, cx, styled, tw, useGlobalDarkMode, useResolvedStyle, useStyles, useTheme };
+export { 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, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, parseClass, parseClasses, resolve, styled, tw, updateConfig, useGlobalDarkMode, useResolvedStyle, useStyles, useTheme };