@kbach/react 0.5.37 → 0.5.40

package/dist/index.mjs

@@ -1,12 +1,13 @@
 import {
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
+  hasResponsiveBuckets,
   setGlobalDarkMode,
   syncGlobalDarkMode,
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-36QDTNAQ.mjs";
+} from "./chunk-EYPBYQSB.mjs";
 import {
   __require,
   buildConfig,
@@ -27,7 +28,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-J2I5YSC5.mjs";
+} from "./chunk-IZ3W6G3V.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -51,7 +52,20 @@ function applyOpacity(color, opacity) {
   const a = Math.max(0, Math.min(1, opacity / 100));
   if (color.startsWith("#")) {
     const h = color.slice(1);
-    const [rs, gs, bs] = h.length === 3 ? [h[0] + h[0], h[1] + h[1], h[2] + h[2]] : [h.slice(0, 2), h.slice(2, 4), h.slice(4, 6)];
+    let rs, gs, bs;
+    if (h.length === 3 || h.length === 4) {
+      rs = h[0] + h[0];
+      gs = h[1] + h[1];
+      bs = h[2] + h[2];
+    } else if (h.length === 8) {
+      rs = h.slice(0, 2);
+      gs = h.slice(2, 4);
+      bs = h.slice(4, 6);
+    } else {
+      rs = h.slice(0, 2);
+      gs = h.slice(2, 4);
+      bs = h.slice(4, 6);
+    }
     return `rgba(${parseInt(rs, 16)},${parseInt(gs, 16)},${parseInt(bs, 16)},${a})`;
   }
   if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
@@ -151,8 +165,16 @@ function ThemeProvider({
     () => isWeb && typeof window !== "undefined" ? window.innerWidth : 0
   );
   const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
-  syncGlobalWidth(effectiveWidth);
-  syncGlobalScreens(resolvedConfig.theme.screens);
+  const numericScreens = {};
+  for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
+    numericScreens[k] = typeof v === "number" ? v : parseInt(String(v), 10);
+  }
+  const _prevWidthRef = useRef(-1);
+  if (_prevWidthRef.current !== effectiveWidth) {
+    _prevWidthRef.current = effectiveWidth;
+    syncGlobalWidth(effectiveWidth);
+  }
+  syncGlobalScreens(numericScreens);
   useEffect(() => {
     setGlobalWidth(effectiveWidth);
   }, [effectiveWidth]);
@@ -376,16 +398,6 @@ import React3, {
   useCallback as useCallback3,
   useMemo as useMemo3
 } from "react";
-var RESPONSIVE_MODS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
-function hasResponsiveBuckets(resolved) {
-  for (const key of Object.keys(resolved)) {
-    if (key === "base") continue;
-    for (const mod of key.split(":")) {
-      if (RESPONSIVE_MODS.has(mod)) return true;
-    }
-  }
-  return false;
-}
 function styled(Component, baseClasses = "") {
   const Styled = forwardRef(
     (props, ref) => {
@@ -480,10 +492,10 @@ import { useMemo as useMemo4 } from "react";
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
-  const breakpoints = getActiveBreakpoints(width);
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
   return useMemo4(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
+    const breakpoints = getActiveBreakpoints(width);
     return flatten(resolved, isDark, state, breakpoints);
   }, [normalised, isDark, config, width, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
 }
@@ -497,11 +509,15 @@ function useResolvedStyle(classString) {
 }
 
 // src/useBreakpoint.ts
+import { useMemo as useMemo5 } from "react";
 function useBreakpoint() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  const sorted = Object.entries(screens).filter(([, v]) => typeof v === "number").sort(([, a], [, b]) => b - a);
+  const sorted = useMemo5(
+    () => Object.entries(screens).filter(([, v]) => typeof v === "number").sort(([, a], [, b]) => b - a),
+    [screens]
+  );
   for (const [name, minW] of sorted) {
     if (width >= minW) return name;
   }
@@ -511,11 +527,13 @@ function useResponsive() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  const result = {};
-  for (const [name, minW] of Object.entries(screens)) {
-    if (typeof minW === "number") result[name] = width >= minW;
-  }
-  return result;
+  return useMemo5(() => {
+    const result = {};
+    for (const [name, minW] of Object.entries(screens)) {
+      if (typeof minW === "number") result[name] = width >= minW;
+    }
+    return result;
+  }, [screens, width]);
 }
 
 // src/kb.ts

package/dist/jsx-dev-runtime.d.mts

@@ -6,14 +6,16 @@ export { Fragment } from 'react';
  *
  * Development variant of the custom JSX runtime.
  * Babel uses jsxDEV (instead of jsx/jsxs) in dev builds.
- * We forward isStaticChildren so React's dev-mode key-warning suppression
- * works correctly for compile-time static child arrays.
+ *
+ * We intercept `className`/`kb` props exactly like the production runtime, but
+ * forward `_source` to React's own jsxDEV so React DevTools can display the
+ * correct file + line number for every element.
  */
 
-declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, _source?: {
+declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
     fileName: string;
     lineNumber: number;
     columnNumber: number;
-}, _self?: unknown): ReactElement;
+}, self?: unknown): ReactElement;
 
 export { jsxDEV };

package/dist/jsx-dev-runtime.d.ts

@@ -6,14 +6,16 @@ export { Fragment } from 'react';
  *
  * Development variant of the custom JSX runtime.
  * Babel uses jsxDEV (instead of jsx/jsxs) in dev builds.
- * We forward isStaticChildren so React's dev-mode key-warning suppression
- * works correctly for compile-time static child arrays.
+ *
+ * We intercept `className`/`kb` props exactly like the production runtime, but
+ * forward `_source` to React's own jsxDEV so React DevTools can display the
+ * correct file + line number for every element.
  */
 
-declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, _source?: {
+declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
     fileName: string;
     lineNumber: number;
     columnNumber: number;
-}, _self?: unknown): ReactElement;
+}, self?: unknown): ReactElement;
 
 export { jsxDEV };