@kbach/react 0.5.62 → 0.6.1

package/README.md

@@ -12,6 +12,8 @@ Tailwind-like utility classes for React (web). Write classes as `className` stri
 
 ## Install
 
+[npm package](https://www.npmjs.com/package/@kbach/react)
+
 ```
 npm install @kbach/react
 ```
@@ -50,6 +52,12 @@ module.exports = {
 
 ### 2. Add the Vite plugin
 
+`@kbach/react` doesn't bundle a React plugin for Vite — if your project doesn't already have one, install it first:
+
+```
+npm install -D vite @vitejs/plugin-react
+```
+
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite';
@@ -98,6 +106,49 @@ export default function Root() {
 }
 ```
 
+## Next.js
+
+Steps 1 and 4 above apply as-is — the JSX runtime setup works via `jsxImportSource` in `tsconfig.json` (Next.js's SWC compiler reads it the same way Vite does), and `ThemeProvider` wraps your app the same way.
+
+Two things differ from the Vite setup:
+
+**No Vite plugin, no static `kbach.css`.** Next.js builds with webpack/Turbopack, not Vite, so step 2/3 (the `@kbach/react/vite` plugin) don't apply — there's currently no static-CSS build step for Next.js. Styles fall back to runtime injection (the same mechanism used automatically when no `kbach.css` is imported). This works, but since the injection only runs in the browser (there's no `document` during the server render), server-rendered HTML has classes with no matching CSS yet — expect a brief flash of unstyled content on first paint before hydration completes and injects the rules. This is a known limitation, not a bug to work around per-project.
+
+**`ThemeProvider` needs a `'use client'` boundary.** `@kbach/react` doesn't ship the `'use client'` directive in its build output, so importing `ThemeProvider` directly into a Server Component (e.g. the App Router root `layout.tsx`, which is a Server Component by default) will fail. Wrap it in your own client component once:
+
+```tsx
+// app/providers.tsx
+'use client';
+import { ThemeProvider } from '@kbach/react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <ThemeProvider defaultMode="system">{children}</ThemeProvider>;
+}
+```
+
+```tsx
+// app/layout.tsx (Server Component — no 'use client' needed here)
+import { Providers } from './providers';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+```
+
+This is the standard pattern for any hook-using npm package that predates the App Router — the same workaround is needed for many other UI libraries.
+
+## React Router
+
+**Framework mode (v7, SSR by default):** works with the same Vite-based setup as above — framework mode builds with Vite under the hood, so the `@kbach/react/vite` plugin runs normally. `include` defaults to `['src', 'app', 'pages', 'components', 'views', 'layouts']`, which already covers React Router's `app/` routes convention. Because the static `kbach.css` approach ships real CSS (not runtime JS injection), there's no FOUC concern for server-rendered routes the way there is with Next.js.
+
+**Library mode (client-only, `createBrowserRouter`/`<BrowserRouter>`):** no SSR involved — set it up exactly like any other Vite + React app per the steps above.
+
 ## API
 
 ### className / kb prop
@@ -226,15 +277,6 @@ colors['white/20']          // 'rgba(255,255,255,0.2)'
 colors.alpha('#ff6b35', 60) // 'rgba(255,107,53,0.6)'
 ```
 
-### ThemeToggle
-
-```jsx
-<ThemeToggle />                                // button (default)
-<ThemeToggle variant="switch" />              // toggle switch
-<ThemeToggle variant="icon-button" />         // icon button
-<ThemeToggle variant="button" includeSystem /> // three-way selector
-```
-
 ## Modifiers
 
 Chain modifiers in any order before the utility name:

package/dist/{chunk-5MX3E4OL.mjs → chunk-36QRQNPL.mjs}

@@ -7,7 +7,7 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-BRCQK5DA.mjs";
+} from "./chunk-MPHPB357.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";
@@ -36,13 +36,15 @@ function subscribeGlobalDarkMode(callback) {
   return () => store.subscribers.delete(callback);
 }
 
-// src/useGlobalDarkMode.ts
+// 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,
@@ -52,6 +54,64 @@ function useGlobalDarkMode() {
   );
 }
 
+// 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",
@@ -300,13 +360,11 @@ function transformToWebProps(originalName, tag, props) {
         continue;
       }
       if (k === "resizeMode") {
-        const existing = out.style ?? {};
-        out.style = { ...existing, objectFit: _resizeModeMap[v] ?? "cover" };
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: _resizeModeMap[v] ?? "cover" };
         continue;
       }
       if (k === "contentFit") {
-        const existing = out.style ?? {};
-        out.style = { ...existing, objectFit: v };
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: v };
         continue;
       }
       if (k === "defaultSource") continue;
@@ -330,15 +388,9 @@ function transformToWebProps(originalName, tag, props) {
 }
 
 // src/InteractiveWrapper.tsx
-import React3, { forwardRef, useState, useCallback, useMemo } from "react";
+import React2, { 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;
@@ -372,49 +424,21 @@ function getWebWidth() {
   return typeof window !== "undefined" ? window.innerWidth : 0;
 }
 function useGlobalWidth() {
-  return useSyncExternalStore2(
+  return useSyncExternalStore(
     isWeb ? subscribeWebWidth : subscribeGlobalWidth,
     isWeb ? getWebWidth : getGlobalWidth,
     ZERO_SNAP
   );
 }
 function useConditionalWidth(active) {
-  return useSyncExternalStore2(
+  return useSyncExternalStore(
     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,
@@ -426,6 +450,7 @@ var InteractiveWrapper = forwardRef(
     onPointerDown,
     onPointerUp,
     onPointerLeave,
+    onPointerCancel,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -444,6 +469,7 @@ var InteractiveWrapper = forwardRef(
     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]);
@@ -453,34 +479,8 @@ var InteractiveWrapper = forwardRef(
       () => {
         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;
-          }
-        }
+        stripInternalMarkers(s);
+        if (typeof Component !== "string") stripWebOnlyProps(s);
         return s;
       },
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked]
@@ -497,13 +497,13 @@ var InteractiveWrapper = forwardRef(
       // 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 },
+      ...!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) ? React3.createElement(Component, componentProps, ...children) : React3.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? React2.createElement(Component, componentProps, ...children) : React2.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
@@ -511,12 +511,16 @@ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 export {
   syncGlobalDarkMode,
   setGlobalDarkMode,
+  useSyncExternalStore,
   useGlobalDarkMode,
   EMPTY_BREAKPOINTS,
   useGlobalWidth,
   useConditionalWidth,
   hasResponsiveBuckets,
   hasInteractiveBuckets,
+  chain,
+  stripInternalMarkers,
+  stripWebOnlyProps,
   registerWebElement,
   getWebTag,
   transformToWebProps,

package/dist/{chunk-MZKQ7H67.mjs → chunk-6ZORO3BP.mjs}

@@ -3,10 +3,12 @@ import {
   InteractiveWrapper,
   getWebTag,
   hasResponsiveBuckets,
+  stripInternalMarkers,
+  stripWebOnlyProps,
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-5MX3E4OL.mjs";
+} from "./chunk-36QRQNPL.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -22,7 +24,7 @@ import {
   normalizeClassString,
   onConfigChange,
   resolve
-} from "./chunk-BRCQK5DA.mjs";
+} from "./chunk-MPHPB357.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -52,36 +54,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 +112,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 +171,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;