@kbach/react 0.1.0

package/dist/chunk-FUSJKUE7.mjs

@@ -0,0 +1,100 @@
+import {
+  InteractiveWrapper,
+  useGlobalDarkMode
+} from "./chunk-IZK5HMWK.mjs";
+
+// src/jsx-runtime.tsx
+import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
+import { isWeb, getConfig, resolve, flatten as flatten2 } from "@kbach/core";
+
+// src/DarkWrapper.tsx
+import React from "react";
+import { flatten } from "@kbach/core";
+var DarkWrapper = React.forwardRef(
+  function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
+    const isDark = useGlobalDarkMode();
+    const computedStyle = flatten(resolvedStyle, isDark);
+    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const props = { ref, ...rest, style: finalStyle };
+    return Array.isArray(children) ? React.createElement(Component, props, ...children) : React.createElement(Component, props, children);
+  }
+);
+DarkWrapper.displayName = "Kbach.DarkWrapper";
+
+// src/jsx-runtime.tsx
+var MODE_BUCKET_RE = /^(not-)?(dark|light)(:(not-)?(dark|light))*$/;
+function hasInteractiveBuckets(resolved) {
+  return Object.keys(resolved).some((key) => {
+    if (key === "base") return false;
+    if (/^(sm|md|lg|xl|2xl)$/.test(key)) return false;
+    if (MODE_BUCKET_RE.test(key)) return false;
+    return true;
+  });
+}
+var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "tw", "__kbachStyles", "__kbachClasses"]);
+function omitConsumed(props) {
+  const out = {};
+  for (const key of Object.keys(props)) {
+    if (!CONSUMED_PROPS.has(key)) out[key] = props[key];
+  }
+  return out;
+}
+function mergeStyle(computed, userStyle) {
+  if (!userStyle) return computed;
+  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
+  return { ...computed, ...userStyle };
+}
+function makeElement(isStaticChildren, type, props, key) {
+  return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
+}
+function processElement(type, rawProps, key, isStaticChildren) {
+  if (!rawProps) return _jsx(type, null, key);
+  const { className, tw: twProp, __kbachStyles, __kbachClasses } = rawProps;
+  const classStr = className ?? twProp ?? __kbachClasses;
+  if (!classStr && !__kbachStyles) {
+    return makeElement(isStaticChildren, type, rawProps, key);
+  }
+  const config = getConfig();
+  const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
+  const { style: userStyle, ...passProps } = omitConsumed(rawProps);
+  if (hasInteractiveBuckets(resolved)) {
+    return _jsx(InteractiveWrapper, {
+      Component: type,
+      resolvedStyle: resolved,
+      ...isWeb && classStr ? { className: classStr } : {},
+      style: userStyle,
+      ...passProps
+    }, key);
+  }
+  const hasModeVariants = Object.keys(resolved).some(
+    (k) => k !== "base" && MODE_BUCKET_RE.test(k)
+  );
+  if (hasModeVariants) {
+    return _jsx(DarkWrapper, {
+      Component: type,
+      resolvedStyle: resolved,
+      ...isWeb && classStr ? { className: classStr } : {},
+      style: userStyle,
+      ...passProps
+    }, key);
+  }
+  const computedStyle = flatten2(resolved, false);
+  const finalStyle = mergeStyle(computedStyle, userStyle);
+  return makeElement(isStaticChildren, type, {
+    ...passProps,
+    style: finalStyle,
+    ...isWeb && classStr ? { className: classStr } : {}
+  }, key);
+}
+function jsx(type, props, key) {
+  return processElement(type, props, key, false);
+}
+function jsxs(type, props, key) {
+  return processElement(type, props, key, true);
+}
+
+export {
+  Fragment,
+  jsx,
+  jsxs
+};

package/dist/chunk-IZK5HMWK.mjs

@@ -0,0 +1,85 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/useGlobalDarkMode.ts
+import React from "react";
+import { getGlobalDarkMode, subscribeGlobalDarkMode } from "@kbach/core";
+var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = React.useReducer((n) => n + 1, 0);
+  React.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+function useGlobalDarkMode() {
+  return useSyncExternalStore(
+    subscribeGlobalDarkMode,
+    getGlobalDarkMode,
+    () => false
+    // SSR: default light
+  );
+}
+
+// src/InteractiveWrapper.tsx
+import React2, { forwardRef, useState, useCallback, useMemo } from "react";
+import { flatten, isWeb } from "@kbach/core";
+function chain(original, extra) {
+  return (...args) => {
+    original?.(...args);
+    extra();
+  };
+}
+var InteractiveWrapper = forwardRef(
+  function InteractiveWrapper2({
+    Component,
+    resolvedStyle,
+    className,
+    style: styleProp,
+    onPressIn,
+    onPressOut,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) {
+    const isDark = useGlobalDarkMode();
+    const [pressed, setPressed] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const handlePressIn = useCallback(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = useCallback(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handleMouseEnter = useCallback(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = useCallback(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const computedStyle = useMemo(
+      () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }),
+      [resolvedStyle, isDark, pressed, hovered, focused]
+    );
+    const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const { children, ...restWithoutChildren } = rest;
+    const componentProps = {
+      ref,
+      ...restWithoutChildren,
+      style: finalStyle,
+      ...isWeb && className ? { className } : {},
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    };
+    return Array.isArray(children) ? React2.createElement(Component, componentProps, ...children) : React2.createElement(Component, componentProps, children);
+  }
+);
+InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
+
+export {
+  __require,
+  useGlobalDarkMode,
+  InteractiveWrapper
+};

package/dist/index.d.mts

@@ -0,0 +1,185 @@
+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';
+
+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;
+
+interface ThemeProviderProps {
+    children: ReactNode;
+    /** Default mode on first render. Falls back to persisted value, then 'system'. */
+    defaultMode?: ThemeMode;
+    /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
+    config?: FrameworkConfig;
+    /** Disable persistence to localStorage / AsyncStorage */
+    disablePersistence?: boolean;
+}
+declare function ThemeProvider({ children, defaultMode, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
+
+type ToggleVariant = 'button' | 'switch' | 'icon-button';
+interface ThemeToggleProps {
+    /** Visual variant. Default: 'button' */
+    variant?: ToggleVariant;
+    /** Override label text (button variant) */
+    label?: string;
+    /** Custom light-mode label */
+    lightLabel?: string;
+    /** Custom dark-mode label */
+    darkLabel?: string;
+    /** Show system mode option */
+    includeSystem?: boolean;
+    /** Custom styles applied to the root container */
+    style?: object;
+    /** Custom styles for the label text */
+    labelStyle?: object;
+}
+/**
+ * Drop-in theme toggle. Works on web and React Native.
+ *
+ * ```tsx
+ * <ThemeToggle />
+ * <ThemeToggle variant="switch" />
+ * <ThemeToggle variant="icon-button" lightLabel="☀️" darkLabel="🌙" />
+ * ```
+ */
+declare function ThemeToggle({ variant, label, lightLabel, darkLabel, includeSystem, style, labelStyle, }: ThemeToggleProps): React__default.JSX.Element;
+
+interface StyledProps {
+    /** Additional utility classes applied on top of the base classes */
+    tw?: string;
+    /** Merged with resolved tw 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 tw="mt-4">...</Card>
+ * <Button onPress={handlePress} tw="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[]): _kbach_core.ResolvedStyle;
+
+/**
+ * Subscribe to the global dark-mode store with React's concurrent-safe
+ * useSyncExternalStore so that any component using className/tw re-renders
+ * immediately when the theme changes — without needing ThemeContext.
+ */
+declare function useGlobalDarkMode(): 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;
+    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/tw
+ * 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.
+ * // tw() is useful for StyleSheet.create() calls and static values.
+ *
+ * const styles = StyleSheet.create({
+ *   container: tw('flex-1 bg-white p-4') as any,
+ * });
+ *
+ * // Web: use as className
+ * <div className={tw('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 tw(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 InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type StyledProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, cx, styled, tw, useGlobalDarkMode, useResolvedStyle, useStyles, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,185 @@
+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';
+
+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;
+
+interface ThemeProviderProps {
+    children: ReactNode;
+    /** Default mode on first render. Falls back to persisted value, then 'system'. */
+    defaultMode?: ThemeMode;
+    /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
+    config?: FrameworkConfig;
+    /** Disable persistence to localStorage / AsyncStorage */
+    disablePersistence?: boolean;
+}
+declare function ThemeProvider({ children, defaultMode, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
+
+type ToggleVariant = 'button' | 'switch' | 'icon-button';
+interface ThemeToggleProps {
+    /** Visual variant. Default: 'button' */
+    variant?: ToggleVariant;
+    /** Override label text (button variant) */
+    label?: string;
+    /** Custom light-mode label */
+    lightLabel?: string;
+    /** Custom dark-mode label */
+    darkLabel?: string;
+    /** Show system mode option */
+    includeSystem?: boolean;
+    /** Custom styles applied to the root container */
+    style?: object;
+    /** Custom styles for the label text */
+    labelStyle?: object;
+}
+/**
+ * Drop-in theme toggle. Works on web and React Native.
+ *
+ * ```tsx
+ * <ThemeToggle />
+ * <ThemeToggle variant="switch" />
+ * <ThemeToggle variant="icon-button" lightLabel="☀️" darkLabel="🌙" />
+ * ```
+ */
+declare function ThemeToggle({ variant, label, lightLabel, darkLabel, includeSystem, style, labelStyle, }: ThemeToggleProps): React__default.JSX.Element;
+
+interface StyledProps {
+    /** Additional utility classes applied on top of the base classes */
+    tw?: string;
+    /** Merged with resolved tw 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 tw="mt-4">...</Card>
+ * <Button onPress={handlePress} tw="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[]): _kbach_core.ResolvedStyle;
+
+/**
+ * Subscribe to the global dark-mode store with React's concurrent-safe
+ * useSyncExternalStore so that any component using className/tw re-renders
+ * immediately when the theme changes — without needing ThemeContext.
+ */
+declare function useGlobalDarkMode(): 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;
+    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/tw
+ * 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.
+ * // tw() is useful for StyleSheet.create() calls and static values.
+ *
+ * const styles = StyleSheet.create({
+ *   container: tw('flex-1 bg-white p-4') as any,
+ * });
+ *
+ * // Web: use as className
+ * <div className={tw('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 tw(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 InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type StyledProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, cx, styled, tw, useGlobalDarkMode, useResolvedStyle, useStyles, useTheme };