@kbach/react 0.5.62 → 0.6.1

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import {
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
+  chain,
   getWebTag,
   hasInteractiveBuckets,
   hasResponsiveBuckets,
@@ -10,11 +11,12 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode,
-  useGlobalWidth
-} from "./chunk-5MX3E4OL.mjs";
+  useGlobalWidth,
+  useSyncExternalStore
+} from "./chunk-36QRQNPL.mjs";
 import {
-  __require,
   buildConfig,
+  clearCache,
   defaultColors,
   defaultTheme,
   disableRuntimeCSS,
@@ -27,13 +29,15 @@ import {
   onConfigChange,
   parseClass,
   parseClasses,
+  parseHexRgb,
   resolve,
   setGlobalWidth,
+  setResolveTarget,
   splitClassTokens,
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-BRCQK5DA.mjs";
+} from "./chunk-MPHPB357.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -56,22 +60,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})`);
@@ -145,6 +137,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;
@@ -166,9 +174,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 = {};
@@ -192,6 +198,7 @@ function ThemeProvider({
   }, [effectiveWidth]);
   useEffect(() => {
     if (!isWeb || typeof window === "undefined") return;
+    setWebWidth(window.innerWidth);
     let raf = 0;
     const update = () => {
       cancelAnimationFrame(raf);
@@ -207,20 +214,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);
@@ -235,18 +240,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);
@@ -270,150 +263,11 @@ function ThemeProvider({
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
 }
 
-// src/ThemeToggle.tsx
-import React2 from "react";
-function getPrimitives() {
-  try {
-    const RN = __require("react-native");
-    return {
-      View: RN.View,
-      Text: RN.Text,
-      Touchable: RN.TouchableOpacity,
-      Switch: RN.Switch
-    };
-  } catch {
-    const View = ({ style, ...rest }) => React2.createElement("div", { style, ...rest });
-    const Text = ({ style, ...rest }) => React2.createElement("span", { style, ...rest });
-    const Touchable = ({ onPress, style, ...rest }) => React2.createElement("button", { onClick: onPress, style, ...rest });
-    const Switch = ({
-      value,
-      onValueChange,
-      accessibilityLabel
-    }) => React2.createElement("input", {
-      type: "checkbox",
-      checked: value,
-      onChange: (e) => onValueChange?.(e.target.checked),
-      "aria-label": accessibilityLabel
-    });
-    return { View, Text, Touchable, Switch };
-  }
-}
-var { View: _View, Text: _Text, Touchable: _Touchable, Switch: _Switch } = getPrimitives();
-function ThemeToggle({
-  variant = "button",
-  label,
-  lightLabel = "Light",
-  darkLabel = "Dark",
-  includeSystem = false,
-  style,
-  labelStyle
-}) {
-  const { mode, isDark, setMode, toggle } = useTheme();
-  const View = _View, Text = _Text, Touchable = _Touchable, Switch = _Switch;
-  if (variant === "switch") {
-    return React2.createElement(
-      View,
-      { style: { flexDirection: "row", alignItems: "center", gap: 8, ...style } },
-      React2.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, lightLabel),
-      React2.createElement(Switch, {
-        value: isDark,
-        onValueChange: (v) => setMode(v ? "dark" : "light"),
-        trackColor: { false: "#d1d5db", true: "#6366f1" },
-        thumbColor: isDark ? "#ffffff" : "#f3f4f6",
-        ios_backgroundColor: "#d1d5db",
-        accessibilityLabel: "Toggle dark mode"
-      }),
-      React2.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, darkLabel)
-    );
-  }
-  if (variant === "icon-button") {
-    const icon = isDark ? darkLabel : lightLabel;
-    return React2.createElement(
-      Touchable,
-      {
-        onPress: toggle,
-        style: {
-          padding: 8,
-          borderRadius: 8,
-          backgroundColor: isDark ? "#374151" : "#f3f4f6",
-          ...style
-        },
-        accessibilityRole: "button",
-        accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
-        accessibilityState: {}
-      },
-      React2.createElement(Text, { style: { fontSize: 18, ...labelStyle } }, icon)
-    );
-  }
-  if (includeSystem) {
-    const modes = [
-      { key: "light", label: lightLabel },
-      { key: "dark", label: darkLabel },
-      { key: "system", label: "System" }
-    ];
-    return React2.createElement(
-      View,
-      { style: { flexDirection: "row", gap: 4, ...style } },
-      ...modes.map(
-        ({ key, label: mLabel }) => React2.createElement(
-          Touchable,
-          {
-            key,
-            onPress: () => setMode(key),
-            style: {
-              paddingHorizontal: 12,
-              paddingVertical: 6,
-              borderRadius: 6,
-              backgroundColor: mode === key ? isDark ? "#6366f1" : "#3b82f6" : isDark ? "#374151" : "#e5e7eb"
-            },
-            accessibilityRole: "button",
-            accessibilityLabel: `Set ${key} theme`,
-            accessibilityState: { selected: mode === key }
-          },
-          React2.createElement(Text, {
-            style: {
-              fontSize: 13,
-              fontWeight: "500",
-              color: mode === key ? "#ffffff" : isDark ? "#d1d5db" : "#374151",
-              ...labelStyle
-            }
-          }, mLabel)
-        )
-      )
-    );
-  }
-  const currentLabel = label ?? (isDark ? darkLabel : lightLabel);
-  return React2.createElement(
-    Touchable,
-    {
-      onPress: toggle,
-      style: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 8,
-        backgroundColor: isDark ? "#374151" : "#e5e7eb",
-        ...style
-      },
-      accessibilityRole: "button",
-      accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
-      accessibilityState: {}
-    },
-    React2.createElement(Text, {
-      style: {
-        fontSize: 14,
-        fontWeight: "500",
-        color: isDark ? "#f9fafb" : "#111827",
-        ...labelStyle
-      }
-    }, currentLabel)
-  );
-}
-
 // src/styled.tsx
-import React3, {
+import React2, {
   forwardRef,
   useState as useState2,
-  useCallback as useCallback3,
+  useCallback as useCallback2,
   useMemo as useMemo3
 } from "react";
 function styled(Component, baseClasses = "") {
@@ -427,6 +281,7 @@ function styled(Component, baseClasses = "") {
         onPointerDown,
         onPointerUp,
         onPointerLeave,
+        onPointerCancel,
         onMouseEnter,
         onMouseLeave,
         onFocus,
@@ -440,42 +295,16 @@ function styled(Component, baseClasses = "") {
       const [pressed, setPressed] = useState2(false);
       const [hovered, setHovered] = useState2(false);
       const [focused, setFocused] = useState2(false);
-      const handlePressIn = useCallback3((e) => {
-        setPressed(true);
-        onPressIn?.(e);
-      }, [onPressIn]);
-      const handlePressOut = useCallback3((e) => {
-        setPressed(false);
-        onPressOut?.(e);
-      }, [onPressOut]);
-      const handlePointerDown = useCallback3((e) => {
-        setPressed(true);
-        onPointerDown?.(e);
-      }, [onPointerDown]);
-      const handlePointerUp = useCallback3((e) => {
-        setPressed(false);
-        onPointerUp?.(e);
-      }, [onPointerUp]);
-      const handlePointerLeave = useCallback3((e) => {
-        setPressed(false);
-        onPointerLeave?.(e);
-      }, [onPointerLeave]);
-      const handleMouseEnter = useCallback3((e) => {
-        setHovered(true);
-        onMouseEnter?.(e);
-      }, [onMouseEnter]);
-      const handleMouseLeave = useCallback3((e) => {
-        setHovered(false);
-        onMouseLeave?.(e);
-      }, [onMouseLeave]);
-      const handleFocus = useCallback3((e) => {
-        setFocused(true);
-        onFocus?.(e);
-      }, [onFocus]);
-      const handleBlur = useCallback3((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]);
@@ -493,7 +322,7 @@ function styled(Component, baseClasses = "") {
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
-      return React3.createElement(effectiveComponent, {
+      return React2.createElement(effectiveComponent, {
         ref,
         ...effectiveRest,
         style: finalStyle,
@@ -503,7 +332,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,
@@ -544,7 +373,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) {
@@ -558,8 +387,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]);
@@ -581,8 +411,8 @@ export {
   InteractiveWrapper,
   ThemeContext,
   ThemeProvider,
-  ThemeToggle,
   buildConfig,
+  clearCache,
   cx,
   defaultColors,
   defaultTheme,
@@ -596,6 +426,7 @@ export {
   parseClasses,
   registerWebElement,
   resolve,
+  setResolveTarget,
   splitClassTokens,
   styled,
   updateConfig,