@kbach/react 0.6.0 → 0.6.2

package/dist/index.mjs

@@ -1,38 +1,42 @@
+'use client';
 import {
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
-  getWebTag,
-  hasInteractiveBuckets,
-  hasResponsiveBuckets,
-  registerWebElement,
-  setGlobalDarkMode,
-  syncGlobalDarkMode,
-  transformToWebProps,
-  useConditionalWidth,
-  useGlobalDarkMode,
-  useGlobalWidth
-} from "./chunk-D4LJICWZ.mjs";
-import {
   buildConfig,
+  chain,
+  clearCache,
   defaultColors,
   defaultTheme,
   disableRuntimeCSS,
   flatten,
   getActiveBreakpoints,
   getConfig,
+  getWebTag,
+  hasInteractiveBuckets,
+  hasResponsiveBuckets,
   initConfig,
   isWeb,
   normalizeClassString,
   onConfigChange,
   parseClass,
   parseClasses,
+  parseHexRgb,
+  registerWebElement,
   resolve,
+  setGlobalDarkMode,
   setGlobalWidth,
+  setResolveTarget,
   splitClassTokens,
+  syncGlobalDarkMode,
   syncGlobalScreens,
   syncGlobalWidth,
-  updateConfig
-} from "./chunk-6NED62DB.mjs";
+  transformToWebProps,
+  updateConfig,
+  useConditionalWidth,
+  useGlobalDarkMode,
+  useGlobalWidth,
+  useSyncExternalStore
+} from "./chunk-GRZ6MVIL.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -55,22 +59,10 @@ import { useMemo } from "react";
 function applyOpacity(color, opacity) {
   const a = Math.max(0, Math.min(1, opacity / 100));
   if (color.startsWith("#")) {
-    const h = color.slice(1);
-    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})`;
+    const rgb = parseHexRgb(color);
+    if (!rgb) return color;
+    const [r, g, b] = rgb;
+    return `rgba(${r},${g},${b},${a})`;
   }
   if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
   if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
@@ -144,6 +136,22 @@ function persistMode(mode) {
   } catch {
   }
 }
+function subscribeSystemScheme(callback) {
+  if (!isWeb || typeof window === "undefined") return () => {
+  };
+  const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+  if (!mq) return () => {
+  };
+  mq.addEventListener("change", callback);
+  return () => mq.removeEventListener("change", callback);
+}
+function getSystemScheme() {
+  if (!isWeb || typeof window === "undefined") return "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
+}
+function getSystemSchemeServerSnapshot() {
+  return "light";
+}
 function applyWebTheme(resolvedMode, strategy) {
   if (!isWeb) return;
   const root = document.documentElement;
@@ -165,9 +173,7 @@ function ThemeProvider({
   const [resolvedConfig, setResolvedConfig] = useState(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
-  const [webWidth, setWebWidth] = useState(
-    () => isWeb && typeof window !== "undefined" ? window.innerWidth : 0
-  );
+  const [webWidth, setWebWidth] = useState(0);
   const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
   const numericScreens = useMemo2(() => {
     const out = {};
@@ -191,6 +197,7 @@ function ThemeProvider({
   }, [effectiveWidth]);
   useEffect(() => {
     if (!isWeb || typeof window === "undefined") return;
+    setWebWidth(window.innerWidth);
     let raf = 0;
     const update = () => {
       cancelAnimationFrame(raf);
@@ -206,20 +213,18 @@ function ThemeProvider({
       cancelAnimationFrame(raf);
     };
   }, []);
-  const [webScheme, setWebScheme] = useState(() => {
-    if (isWeb && typeof window !== "undefined") {
-      return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    }
-    return "light";
-  });
+  const webScheme = useSyncExternalStore(
+    subscribeSystemScheme,
+    getSystemScheme,
+    getSystemSchemeServerSnapshot
+  );
   const systemScheme = isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
-  const [mode, _setMode] = useState(() => {
-    if (!disablePersistence) {
-      const persisted = loadPersistedMode();
-      if (persisted) return persisted;
-    }
-    return defaultMode;
-  });
+  const [mode, _setMode] = useState(defaultMode);
+  useEffect(() => {
+    if (disablePersistence) return;
+    const persisted = loadPersistedMode();
+    if (persisted) _setMode(persisted);
+  }, []);
   const setMode = useCallback((next) => {
     _setMode(next);
     if (!disablePersistence) persistMode(next);
@@ -234,18 +239,6 @@ function ThemeProvider({
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
     setGlobalDarkMode(isDark);
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);
-  const setWebSchemeRef = useRef(setWebScheme);
-  setWebSchemeRef.current = setWebScheme;
-  useEffect(() => {
-    if (!isWeb || typeof window === "undefined") return;
-    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
-    if (!mq) return;
-    const handler = (e) => {
-      setWebSchemeRef.current(e.matches ? "dark" : "light");
-    };
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, []);
   useEffect(() => {
     if (!configOverride) return;
     updateConfig(configOverride);
@@ -287,6 +280,7 @@ function styled(Component, baseClasses = "") {
         onPointerDown,
         onPointerUp,
         onPointerLeave,
+        onPointerCancel,
         onMouseEnter,
         onMouseLeave,
         onFocus,
@@ -300,42 +294,16 @@ function styled(Component, baseClasses = "") {
       const [pressed, setPressed] = useState2(false);
       const [hovered, setHovered] = useState2(false);
       const [focused, setFocused] = useState2(false);
-      const handlePressIn = useCallback2((e) => {
-        setPressed(true);
-        onPressIn?.(e);
-      }, [onPressIn]);
-      const handlePressOut = useCallback2((e) => {
-        setPressed(false);
-        onPressOut?.(e);
-      }, [onPressOut]);
-      const handlePointerDown = useCallback2((e) => {
-        setPressed(true);
-        onPointerDown?.(e);
-      }, [onPointerDown]);
-      const handlePointerUp = useCallback2((e) => {
-        setPressed(false);
-        onPointerUp?.(e);
-      }, [onPointerUp]);
-      const handlePointerLeave = useCallback2((e) => {
-        setPressed(false);
-        onPointerLeave?.(e);
-      }, [onPointerLeave]);
-      const handleMouseEnter = useCallback2((e) => {
-        setHovered(true);
-        onMouseEnter?.(e);
-      }, [onMouseEnter]);
-      const handleMouseLeave = useCallback2((e) => {
-        setHovered(false);
-        onMouseLeave?.(e);
-      }, [onMouseLeave]);
-      const handleFocus = useCallback2((e) => {
-        setFocused(true);
-        onFocus?.(e);
-      }, [onFocus]);
-      const handleBlur = useCallback2((e) => {
-        setFocused(false);
-        onBlur?.(e);
-      }, [onBlur]);
+      const handlePressIn = useCallback2(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+      const handlePressOut = useCallback2(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+      const handlePointerDown = useCallback2(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+      const handlePointerUp = useCallback2(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+      const handlePointerLeave = useCallback2(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
+      const handlePointerCancel = useCallback2(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
+      const handleMouseEnter = useCallback2(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+      const handleMouseLeave = useCallback2(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+      const handleFocus = useCallback2(chain(onFocus, () => setFocused(true)), [onFocus]);
+      const handleBlur = useCallback2(chain(onBlur, () => setFocused(false)), [onBlur]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
       const resolved = useMemo3(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
       const hasInteractive = useMemo3(() => hasInteractiveBuckets(resolved), [resolved]);
@@ -363,7 +331,7 @@ function styled(Component, baseClasses = "") {
         // Always forward user-provided handlers to avoid silently swallowing them.
         // onPressIn/onPressOut are forwarded on web too (not just native) since
         // react-native-web components rely on receiving them directly.
-        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,
@@ -404,7 +372,7 @@ function useBreakpoint() {
   const width = useGlobalWidth();
   const screens = config.theme.screens;
   const sorted = useMemo5(
-    () => Object.entries(screens).filter((entry) => typeof entry[1] === "number").sort(([, a], [, b]) => b - a),
+    () => Object.entries(screens).map(([name, v]) => [name, typeof v === "number" ? v : parseInt(String(v), 10)]).filter(([, minW]) => !Number.isNaN(minW)).sort(([, a], [, b]) => b - a),
     [screens]
   );
   for (const [name, minW] of sorted) {
@@ -418,8 +386,9 @@ function useResponsive() {
   const screens = config.theme.screens;
   return useMemo5(() => {
     const result = {};
-    for (const [name, minW] of Object.entries(screens)) {
-      if (typeof minW === "number") result[name] = width >= minW;
+    for (const [name, v] of Object.entries(screens)) {
+      const minW = typeof v === "number" ? v : parseInt(String(v), 10);
+      if (!Number.isNaN(minW)) result[name] = width >= minW;
     }
     return result;
   }, [screens, width]);
@@ -442,6 +411,7 @@ export {
   ThemeContext,
   ThemeProvider,
   buildConfig,
+  clearCache,
   cx,
   defaultColors,
   defaultTheme,
@@ -455,6 +425,7 @@ export {
   parseClasses,
   registerWebElement,
   resolve,
+  setResolveTarget,
   splitClassTokens,
   styled,
   updateConfig,