@kbach/react 0.6.0 → 0.6.2

package/jsx-dev-runtime.js

@@ -1,2 +1,3 @@
+'use client';
 'use strict';
 module.exports = require('./dist/jsx-dev-runtime.js');

package/jsx-runtime.js

@@ -1,2 +1,3 @@
+'use client';
 'use strict';
 module.exports = require('./dist/jsx-runtime.js');

package/kbach-react.md

@@ -14,6 +14,7 @@ Package: `@kbach/react`
 ```
 
 ### vite.config.ts
+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';
 import react from '@vitejs/plugin-react';
@@ -45,6 +46,12 @@ import { ThemeProvider } from '@kbach/react';
 <ThemeProvider defaultMode="system"><App /></ThemeProvider>
 ```
 
+### Next.js
+tsconfig `jsxImportSource` setup above applies as-is. No Vite plugin for Next.js (webpack/Turbopack) — falls back to runtime CSS injection, which only runs client-side, so expect a brief flash of unstyled content on first paint before hydration. `@kbach/react`'s compiled output ships its own `"use client"` directive, so App Router Server Components can use `className`, `styled()`, hooks, and `<ThemeProvider>` directly, with no manual client wrapper needed.
+
+### React Router
+Framework mode (v7, SSR) builds with Vite, so the setup above works unchanged — default scan dirs include `app/`. Library mode (client-only) needs no special handling beyond the standard Vite setup.
+
 ---
 
 ## Vite Plugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -39,9 +39,9 @@
     }
   },
   "scripts": {
-    "build": "tsup src/index.ts src/jsx-runtime.tsx src/jsx-dev-runtime.tsx src/vite-plugin.ts --format esm,cjs --dts --clean --external vite",
+    "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 src/index.ts src/jsx-runtime.tsx src/jsx-dev-runtime.tsx src/vite-plugin.ts --format esm,cjs --dts --watch --external vite",
+    "dev": "tsup --watch",
     "test": "vitest run --passWithNoTests",
     "lint": "tsc --noEmit",
     "postinstall": "node scripts/postinstall.js"

package/dist/chunk-D4LJICWZ.mjs

@@ -1,524 +0,0 @@
-import {
-  flatten,
-  getActiveBreakpoints,
-  getGlobalWidth,
-  getInteractiveModifiers,
-  getResponsiveModifiers,
-  isNative,
-  isWeb,
-  subscribeGlobalWidth
-} from "./chunk-6NED62DB.mjs";
-
-// src/core/darkModeStore.ts
-var KEY = "__kbach_dark_store__";
-function getStore() {
-  const g = globalThis;
-  if (!g[KEY]) {
-    g[KEY] = { isDark: false, subscribers: /* @__PURE__ */ new Set() };
-  }
-  return g[KEY];
-}
-function syncGlobalDarkMode(isDark) {
-  getStore().isDark = isDark;
-}
-function setGlobalDarkMode(isDark) {
-  const store = getStore();
-  if (store.isDark === isDark) return;
-  store.isDark = isDark;
-  for (const sub of store.subscribers) sub();
-}
-function getGlobalDarkMode() {
-  return getStore().isDark;
-}
-function subscribeGlobalDarkMode(callback) {
-  const store = getStore();
-  store.subscribers.add(callback);
-  return () => store.subscribers.delete(callback);
-}
-
-// src/useGlobalDarkMode.ts
-import React from "react";
-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/web-substitute.ts
-var _rnToHtml = {
-  View: "div",
-  SafeAreaView: "div",
-  KeyboardAvoidingView: "div",
-  ScrollView: "div",
-  VirtualizedList: "div",
-  FlatList: "div",
-  SectionList: "div",
-  Text: "span",
-  TextInput: "input",
-  Image: "img",
-  ImageBackground: "div",
-  Pressable: "div",
-  TouchableOpacity: "div",
-  TouchableHighlight: "div",
-  TouchableWithoutFeedback: "div",
-  TouchableNativeFeedback: "div"
-};
-var _userMap = /* @__PURE__ */ new Map();
-var _cache = /* @__PURE__ */ new WeakMap();
-function registerWebElement(rnComponent, htmlTag) {
-  if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
-  _userMap.set(rnComponent, htmlTag);
-  _cache.delete(rnComponent);
-}
-function getWebTag(type, props) {
-  if (typeof type === "string") return null;
-  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
-  const obj = type;
-  if (_userMap.has(obj)) return _userMap.get(obj);
-  const name = obj.displayName ?? obj.name;
-  if (!name) {
-    _cache.set(obj, null);
-    return null;
-  }
-  if (name === "TextInput") {
-    const multiline = !!props && (props.multiline === true || Number(props.numberOfLines) > 1);
-    return multiline ? "textarea" : "input";
-  }
-  if (_cache.has(obj)) return _cache.get(obj);
-  const tag = _rnToHtml[name] ?? null;
-  _cache.set(obj, tag);
-  return tag;
-}
-var _rnOnlyProps = /* @__PURE__ */ new Set([
-  // Interaction
-  "onLongPress",
-  "delayLongPress",
-  "activeOpacity",
-  "underlayColor",
-  "hitSlop",
-  "pressRetentionOffset",
-  "android_ripple",
-  "android_disableSound",
-  "onHoverIn",
-  "onHoverOut",
-  "onHoverStart",
-  "onHoverEnd",
-  // Layout event
-  "onLayout",
-  // Accessibility
-  "accessible",
-  "accessibilityState",
-  "accessibilityLiveRegion",
-  "importantForAccessibility",
-  // Platform
-  "nativeID",
-  "collapsable",
-  "needsOffscreenAlphaCompositing",
-  "renderToHardwareTextureAndroid",
-  "shouldRasterizeIOS",
-  "focusable",
-  "hasTVPreferredFocus",
-  // 'pointerEvents' is handled in transformToWebProps (mapped to CSS style)
-  // Text
-  "selectable",
-  "allowFontScaling",
-  "adjustsFontSizeToFit",
-  "minimumFontScale",
-  "ellipsizeMode",
-  "numberOfLines",
-  "onTextLayout",
-  "textBreakStrategy",
-  "lineBreakStrategyIOS",
-  // TextInput
-  "multiline",
-  "resizeMode",
-  // handled separately
-  "blurOnSubmit",
-  "clearButtonMode",
-  "clearTextOnFocus",
-  "enablesReturnKeyAutomatically",
-  "returnKeyType",
-  "spellCheck",
-  // ScrollView
-  "scrollEnabled",
-  "showsVerticalScrollIndicator",
-  "showsHorizontalScrollIndicator",
-  "contentContainerStyle",
-  // 'horizontal' is handled in transformToWebProps (converted to CSS overflow-x).
-  "keyboardShouldPersistTaps",
-  "keyboardDismissMode",
-  "pagingEnabled",
-  "scrollEventThrottle",
-  "decelerationRate",
-  "bounces",
-  "alwaysBounceHorizontal",
-  "alwaysBounceVertical",
-  "snapToAlignment",
-  "snapToInterval",
-  "snapToOffsets",
-  "removeClippedSubviews",
-  "overScrollMode",
-  "stickyHeaderIndices",
-  "invertStickyHeaders",
-  "onScrollBeginDrag",
-  "onScrollEndDrag",
-  "onMomentumScrollBegin",
-  "onMomentumScrollEnd",
-  "contentInset",
-  "contentInsetAdjustmentBehavior",
-  "automaticallyAdjustContentInsets",
-  "automaticallyAdjustsScrollIndicatorInsets",
-  // expo-image
-  "contentPosition",
-  "cachePolicy",
-  "recyclingKey",
-  "blurRadius",
-  "fadeDuration",
-  "responsivePolicy",
-  "tintColor",
-  "allowDownscaling",
-  "placeholderContentFit",
-  // FlatList / SectionList
-  "data",
-  "renderItem",
-  "keyExtractor",
-  "getItemLayout",
-  "initialScrollIndex",
-  "initialNumToRender",
-  "maxToRenderPerBatch",
-  "windowSize",
-  "updateCellsBatchingPeriod",
-  "onEndReached",
-  "onEndReachedThreshold",
-  "ListHeaderComponent",
-  "ListFooterComponent",
-  "ListEmptyComponent",
-  "ListHeaderComponentStyle",
-  "ListFooterComponentStyle",
-  "ItemSeparatorComponent",
-  "SectionSeparatorComponent",
-  "inverted",
-  "getItem",
-  "getItemCount"
-]);
-var _pressableNames = /* @__PURE__ */ new Set([
-  "Pressable",
-  "TouchableOpacity",
-  "TouchableHighlight",
-  "TouchableWithoutFeedback",
-  "TouchableNativeFeedback"
-]);
-var _keyboardTypeMap = {
-  "numeric": "number",
-  "number-pad": "number",
-  "decimal-pad": "decimal",
-  "email-address": "email",
-  "phone-pad": "tel",
-  "url": "url"
-};
-var _resizeModeMap = {
-  "contain": "contain",
-  "cover": "cover",
-  "stretch": "fill",
-  "center": "none",
-  "repeat": "none"
-};
-function transformToWebProps(originalName, tag, props) {
-  const out = {};
-  const isPressable = _pressableNames.has(originalName);
-  const isTextInput = originalName === "TextInput";
-  const isImage = originalName === "Image" || originalName === "ImageBackground";
-  const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
-  let pendingStyle = null;
-  for (const [k, v] of Object.entries(props)) {
-    if (_rnOnlyProps.has(k)) continue;
-    if (k === "onPress") {
-      if (!("onClick" in props)) out.onClick = v;
-      continue;
-    }
-    if (k === "accessibilityLabel") {
-      if (out["aria-label"] == null) out["aria-label"] = v;
-      continue;
-    }
-    if (k === "accessibilityRole") {
-      if (out.role == null) out.role = v;
-      continue;
-    }
-    if (k === "testID") {
-      if (out["data-testid"] == null) out["data-testid"] = v;
-      continue;
-    }
-    if (isTextInput) {
-      if (k === "onChangeText") {
-        if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
-        continue;
-      }
-      if (k === "secureTextEntry") {
-        if (v && !("type" in props)) out.type = "password";
-        continue;
-      }
-      if (k === "keyboardType") {
-        if (!("type" in props) && !("secureTextEntry" in props)) {
-          const mapped = _keyboardTypeMap[v];
-          if (mapped) out.type = mapped;
-        }
-        continue;
-      }
-      if (k === "editable") {
-        if (v === false) out.readOnly = true;
-        continue;
-      }
-      if (k === "maxLength") {
-        out.maxLength = v;
-        continue;
-      }
-    }
-    if (isScrollable && k === "horizontal") {
-      if (v) pendingStyle = { display: "flex", flexDirection: "row", overflowX: "auto" };
-      continue;
-    }
-    if (k === "pointerEvents") {
-      if (v === "none" || v === "auto") pendingStyle = { ...pendingStyle ?? {}, pointerEvents: v };
-      continue;
-    }
-    if (isImage) {
-      if (k === "source") {
-        if (typeof v === "string") {
-          out.src = v;
-        } else if (v && typeof v === "object" && "uri" in v) {
-          out.src = v.uri;
-          if (v.headers) out["crossOrigin"] = "anonymous";
-        }
-        continue;
-      }
-      if (k === "resizeMode") {
-        const existing = out.style ?? {};
-        out.style = { ...existing, objectFit: _resizeModeMap[v] ?? "cover" };
-        continue;
-      }
-      if (k === "contentFit") {
-        const existing = out.style ?? {};
-        out.style = { ...existing, objectFit: v };
-        continue;
-      }
-      if (k === "defaultSource") continue;
-    }
-    if (k === "style") {
-      if (Array.isArray(v)) {
-        out.style = Object.assign({}, ...v.filter(Boolean));
-      } else if (v != null) {
-        out.style = v;
-      }
-      continue;
-    }
-    out[k] = v;
-  }
-  if (pendingStyle) {
-    out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
-  }
-  if (isPressable && !out.role) out.role = "button";
-  if (isImage && tag === "img" && out.alt == null) out.alt = "";
-  return out;
-}
-
-// src/InteractiveWrapper.tsx
-import React3, { forwardRef, useState, useCallback, useMemo } from "react";
-
-// src/useGlobalWidth.ts
-import React2 from "react";
-var useSyncExternalStore2 = React2.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = React2.useReducer((n) => n + 1, 0);
-  React2.useEffect(() => subscribe(forceUpdate), [subscribe]);
-  return getSnapshot();
-};
-var NOOP_SUB = (_) => () => {
-};
-var ZERO_SNAP = () => 0;
-var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
-var _webListeners = null;
-var _webRaf = 0;
-function _webResizeHandler() {
-  cancelAnimationFrame(_webRaf);
-  _webRaf = requestAnimationFrame(() => {
-    if (_webListeners) for (const cb of _webListeners) cb();
-  });
-}
-function subscribeWebWidth(cb) {
-  if (typeof window === "undefined") return () => {
-  };
-  if (!_webListeners) {
-    _webListeners = /* @__PURE__ */ new Set();
-    window.addEventListener("resize", _webResizeHandler);
-  }
-  _webListeners.add(cb);
-  return () => {
-    _webListeners.delete(cb);
-    if (_webListeners.size === 0) {
-      window.removeEventListener("resize", _webResizeHandler);
-      cancelAnimationFrame(_webRaf);
-      _webListeners = null;
-    }
-  };
-}
-function getWebWidth() {
-  return typeof window !== "undefined" ? window.innerWidth : 0;
-}
-function useGlobalWidth() {
-  return useSyncExternalStore2(
-    isWeb ? subscribeWebWidth : subscribeGlobalWidth,
-    isWeb ? getWebWidth : getGlobalWidth,
-    ZERO_SNAP
-  );
-}
-function useConditionalWidth(active) {
-  return useSyncExternalStore2(
-    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
-    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
-    ZERO_SNAP
-  );
-}
-
-// src/shared-utils.ts
-function hasResponsiveBuckets(resolved) {
-  const responsiveMods = getResponsiveModifiers();
-  for (const key of Object.keys(resolved)) {
-    if (key === "base") continue;
-    for (const mod of key.split(":")) {
-      if (responsiveMods.has(mod)) return true;
-    }
-  }
-  return false;
-}
-function hasInteractiveBuckets(resolved) {
-  const interactiveMods = getInteractiveModifiers();
-  for (const key of Object.keys(resolved)) {
-    if (key === "base") continue;
-    for (const mod of key.split(":")) {
-      if (interactiveMods.has(mod)) return true;
-    }
-  }
-  return false;
-}
-
-// src/InteractiveWrapper.tsx
-function chain(original, extra) {
-  return (...args) => {
-    original?.(...args);
-    extra();
-  };
-}
-var InteractiveWrapper = forwardRef(
-  function InteractiveWrapper2({
-    Component,
-    resolvedStyle,
-    className,
-    style: styleProp,
-    onPressIn,
-    onPressOut,
-    onPointerDown,
-    onPointerUp,
-    onPointerLeave,
-    onMouseEnter,
-    onMouseLeave,
-    onFocus,
-    onBlur,
-    ...rest
-  }, ref) {
-    const isDark = useGlobalDarkMode();
-    const needsWidth = hasResponsiveBuckets(resolvedStyle);
-    const width = useConditionalWidth(needsWidth);
-    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-    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 handlePointerDown = useCallback(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = useCallback(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = useCallback(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    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 { children, disabled, checked, ...restForComponent } = rest;
-    const computedStyle = useMemo(
-      () => {
-        if (isWeb) return {};
-        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
-        delete s.__divideX;
-        delete s.__divideY;
-        delete s.__divideColor;
-        delete s.__divideStyle;
-        delete s.__keyframe;
-        if (typeof Component !== "string") {
-          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;
-          }
-        }
-        return s;
-      },
-      [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked]
-    );
-    const skipComputedInline = isWeb || !isNative && typeof Component === "string";
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
-    const componentProps = {
-      ref,
-      ...restForComponent,
-      ...disabled !== void 0 ? { disabled } : {},
-      ...checked !== void 0 ? { checked } : {},
-      style: finalStyle,
-      ...!isNative && className ? { className } : {},
-      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
-      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
-      // (and any component that accepts both prop names) depend on receiving them directly.
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    };
-    return Array.isArray(children) ? React3.createElement(Component, componentProps, ...children) : React3.createElement(Component, componentProps, children);
-  }
-);
-InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
-
-export {
-  syncGlobalDarkMode,
-  setGlobalDarkMode,
-  useGlobalDarkMode,
-  EMPTY_BREAKPOINTS,
-  useGlobalWidth,
-  useConditionalWidth,
-  hasResponsiveBuckets,
-  hasInteractiveBuckets,
-  registerWebElement,
-  getWebTag,
-  transformToWebProps,
-  InteractiveWrapper
-};