@kbach/react 0.6.1 → 0.6.3

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

@@ -47,14 +47,7 @@ import { ThemeProvider } from '@kbach/react';
 ```
 
 ### 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` ships no `'use client'` directive, so wrap `ThemeProvider` in your own client component before using it in App Router:
-```tsx
-'use client';
-import { ThemeProvider } from '@kbach/react';
-export function Providers({ children }) {
-  return <ThemeProvider defaultMode="system">{children}</ThemeProvider>;
-}
-```
+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.
@@ -435,7 +428,7 @@ mx-auto   (centers element)
 ```
 
 Spacing scale (1 unit = 4px):
-`px(1) 0 0.5(2) 1(4) 1.5(6) 2(8) 2.5(10) 3(12) 3.5(14) 4(16) 5(20) 6(24) 7(28) 8(32) 9(36) 10(40) 11(44) 12(48) 14(56) 16(64) 20(80) 24(96) 28(112) 32(128) 36(144) 40(160) 44(176) 48(192) 52(208) 56(224) 60(240) 64(256) 72(288) 80(320) 96(384) auto full(100%) 1/2 1/3 2/3 1/4 3/4 screen(100vh) min max fit`
+`px(1) 0 0.5(2) 1(4) 1.5(6) 2(8) 2.5(10) 3(12) 3.5(14) 4(16) 5(20) 6(24) 7(28) 8(32) 9(36) 10(40) 11(44) 12(48) 14(56) 16(64) 20(80) 24(96) 28(112) 32(128) 36(144) 40(160) 44(176) 48(192) 52(208) 56(224) 60(240) 64(256) 72(288) 80(320) 96(384) auto full(100%) 1/2 1/3 2/3 1/4 3/4 screen(100dvh) min max fit`
 
 ### Sizing
 ```
@@ -444,7 +437,9 @@ w-{n}  h-{n}  size-{n}  min-w-{n}  min-h-{n}  max-w-{n}  max-h-{n}
 Named max-w: none xs(320) sm(384) md(448) lg(512) xl(576) 2xl(672) 3xl(768)
              4xl(896) 5xl(1024) 6xl(1152) 7xl(1280) prose(65ch)
 
-Screen:  w-screen(100vw)  h-screen(100vh)
+Screen (dvw/dvh — correct on mobile where browser chrome resizes the
+visible viewport; vw/vh are pinned to the largest viewport and overflow
+behind a shown address bar): w-screen(100dvw)  h-screen(100dvh)
          min-w-screen  max-w-screen  min-h-screen  max-h-screen
 ```
 
@@ -524,11 +519,15 @@ opacity-0/5/10/15/20/25/30/40/50/60/70/75/80/90/95/100
 ```
 
 ### Ring
+Web: box-shadow ring. Native: approximated via borderWidth/borderColor
+(no box-shadow on RN) — affects layout there and shares properties with
+`border-*` (last class wins if both are used). `ring-offset-*`/`ring-inset`
+stay web-only, with no native equivalent.
 ```
 ring / ring-{n}(0 1 2 4 8)
 ring-{color}
-ring-inset
-ring-offset-{n}(0 1 2 4 8)
+ring-inset            (web only)
+ring-offset-{n}(0 1 2 4 8)  (web only)
 ```
 
 ### Outline

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "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-36QRQNPL.mjs

@@ -1,528 +0,0 @@
-import {
-  flatten,
-  getActiveBreakpoints,
-  getGlobalWidth,
-  getInteractiveModifiers,
-  getResponsiveModifiers,
-  isNative,
-  isWeb,
-  subscribeGlobalWidth
-} from "./chunk-MPHPB357.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/useSyncExternalStoreShim.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();
-};
-
-// src/useGlobalDarkMode.ts
-function useGlobalDarkMode() {
-  return useSyncExternalStore(
-    subscribeGlobalDarkMode,
-    getGlobalDarkMode,
-    () => false
-    // SSR: default light
-  );
-}
-
-// 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;
-}
-function chain(original, extra) {
-  return (...args) => {
-    original?.(...args);
-    extra();
-  };
-}
-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/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") {
-        pendingStyle = { ...pendingStyle ?? {}, objectFit: _resizeModeMap[v] ?? "cover" };
-        continue;
-      }
-      if (k === "contentFit") {
-        pendingStyle = { ...pendingStyle ?? {}, 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 React2, { forwardRef, useState, useCallback, useMemo } from "react";
-
-// src/useGlobalWidth.ts
-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 useSyncExternalStore(
-    isWeb ? subscribeWebWidth : subscribeGlobalWidth,
-    isWeb ? getWebWidth : getGlobalWidth,
-    ZERO_SNAP
-  );
-}
-function useConditionalWidth(active) {
-  return useSyncExternalStore(
-    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
-    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
-    ZERO_SNAP
-  );
-}
-
-// src/InteractiveWrapper.tsx
-var InteractiveWrapper = forwardRef(
-  function InteractiveWrapper2({
-    Component,
-    resolvedStyle,
-    className,
-    style: styleProp,
-    onPressIn,
-    onPressOut,
-    onPointerDown,
-    onPointerUp,
-    onPointerLeave,
-    onPointerCancel,
-    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 handlePointerCancel = useCallback(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
-    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);
-        stripInternalMarkers(s);
-        if (typeof Component !== "string") stripWebOnlyProps(s);
-        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: handlePointerCancel, onPressIn, onPressOut } : { 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 {
-  syncGlobalDarkMode,
-  setGlobalDarkMode,
-  useSyncExternalStore,
-  useGlobalDarkMode,
-  EMPTY_BREAKPOINTS,
-  useGlobalWidth,
-  useConditionalWidth,
-  hasResponsiveBuckets,
-  hasInteractiveBuckets,
-  chain,
-  stripInternalMarkers,
-  stripWebOnlyProps,
-  registerWebElement,
-  getWebTag,
-  transformToWebProps,
-  InteractiveWrapper
-};