@kbach/react 0.3.3 → 0.3.5

package/dist/index.js

@@ -47,10 +47,12 @@ __export(index_exports, {
   resolve: () => resolve,
   styled: () => styled,
   updateConfig: () => updateConfig,
+  useBreakpoint: () => useBreakpoint,
   useColors: () => useColors,
   useGlobalDarkMode: () => useGlobalDarkMode,
   useIsDark: () => useIsDark,
   useResolvedStyle: () => useResolvedStyle,
+  useResponsive: () => useResponsive,
   useStyles: () => useStyles,
   useTheme: () => useTheme,
   wrapColors: () => wrapColors
@@ -1966,6 +1968,48 @@ function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
 
+// src/core/responsiveStore.ts
+var RESPONSIVE_KEY = "__kbach_responsive__";
+function getStore() {
+  const g = globalThis;
+  if (!g[RESPONSIVE_KEY]) {
+    g[RESPONSIVE_KEY] = { width: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
+  }
+  return g[RESPONSIVE_KEY];
+}
+function syncGlobalWidth(width) {
+  getStore().width = width;
+}
+function syncGlobalScreens(screens) {
+  getStore().screens = screens;
+}
+function getGlobalScreens() {
+  return getStore().screens;
+}
+function setGlobalWidth(width) {
+  const store = getStore();
+  if (store.width === width) return;
+  store.width = width;
+  for (const l of store.listeners) l(width);
+}
+function getGlobalWidth() {
+  return getStore().width;
+}
+function subscribeGlobalWidth(listener) {
+  const store = getStore();
+  store.listeners.add(listener);
+  return () => store.listeners.delete(listener);
+}
+function getActiveBreakpoints(width) {
+  const store = getStore();
+  const w = width ?? store.width;
+  const active = /* @__PURE__ */ new Set();
+  for (const [name, minW] of Object.entries(store.screens)) {
+    if (typeof minW === "number" && w >= minW) active.add(name);
+  }
+  return active;
+}
+
 // src/core/resolver.ts
 var styleCache = new LRUCache(1e4);
 var _styleEl = null;
@@ -2016,6 +2060,7 @@ var GROUP_PEER_PREFIX = {
   "peer-focus": ".peer:focus ~"
 };
 var MODE_MODS = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
+var RESPONSIVE_MODS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
 function injectClassRule(cls, bucketKey, styles, darkMode) {
   const cssDecls = styleValueToCSS(styles);
   if (!cssDecls) return;
@@ -2025,10 +2070,12 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
     return;
   }
   const mods = bucketKey.split(":");
-  const hasDark = mods.includes("dark") || mods.includes("not-light");
-  const hasLight = mods.includes("light") || mods.includes("not-dark");
-  const ancestorMods = mods.filter((m) => m in GROUP_PEER_PREFIX);
-  const pseudoMods = mods.filter((m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX));
+  const responsiveMods = mods.filter((m) => RESPONSIVE_MODS.has(m));
+  const nonResponsiveMods = mods.filter((m) => !RESPONSIVE_MODS.has(m));
+  const hasDark = nonResponsiveMods.includes("dark") || nonResponsiveMods.includes("not-light");
+  const hasLight = nonResponsiveMods.includes("light") || nonResponsiveMods.includes("not-dark");
+  const ancestorMods = nonResponsiveMods.filter((m) => m in GROUP_PEER_PREFIX);
+  const pseudoMods = nonResponsiveMods.filter((m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX));
   const pseudoSuffix = pseudoMods.map((p) => MODIFIER_TO_PSEUDO[p] ?? `:${p}`).join("");
   const elementSelector = `.${escaped}${pseudoSuffix}`;
   const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
@@ -2053,6 +2100,13 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
   } else {
     rule = `${selector} { ${cssDecls} }`;
   }
+  if (responsiveMods.length > 0) {
+    const screens = getGlobalScreens();
+    const minWidth = Math.max(...responsiveMods.map((m) => screens[m] ?? 0));
+    if (minWidth > 0) {
+      rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
+    }
+  }
   injectRule(rule);
 }
 var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
@@ -2121,18 +2175,18 @@ function resolve(classString, theme, darkMode = "attribute") {
   }
   return result;
 }
-function flatten(resolved, isDark, state = {}) {
+function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
   const result = { ...resolved.base ?? {} };
   for (const [key, styles] of Object.entries(resolved)) {
     if (key === "base" || !styles) continue;
     const mods = key.split(":");
-    if (matchesMods(mods, isDark, state)) {
+    if (matchesMods(mods, isDark, state, breakpoints)) {
       Object.assign(result, styles);
     }
   }
   return result;
 }
-function matchesMods(mods, isDark, state) {
+function matchesMods(mods, isDark, state, breakpoints) {
   return mods.every((mod) => {
     switch (mod) {
       case "dark":
@@ -2170,6 +2224,12 @@ function matchesMods(mods, isDark, state) {
         return !state.visited;
       case "placeholder":
         return !!state.placeholder;
+      case "sm":
+      case "md":
+      case "lg":
+      case "xl":
+      case "2xl":
+        return breakpoints.has(mod);
       default:
         return false;
     }
@@ -2210,6 +2270,28 @@ function getConfig() {
   store.resolved = buildConfig({});
   return store.resolved;
 }
+function resolveOneRef(ref, colors) {
+  const m = /^([a-z][a-z0-9]*)-(\d+)$/.exec(ref);
+  if (!m) return null;
+  const entry = colors[m[1]];
+  if (!entry || typeof entry !== "object") return null;
+  return entry[m[2]] ?? null;
+}
+function resolveColorRefs(colors) {
+  const out = {};
+  for (const [key, val] of Object.entries(colors)) {
+    if (typeof val === "string") {
+      out[key] = resolveOneRef(val, colors) ?? val;
+    } else {
+      const shades = {};
+      for (const [shade, hex] of Object.entries(val)) {
+        shades[shade] = resolveOneRef(hex, colors) ?? hex;
+      }
+      out[key] = shades;
+    }
+  }
+  return out;
+}
 function buildConfig(userConfig) {
   let theme = { ...defaultTheme };
   if (userConfig.theme) {
@@ -2228,6 +2310,7 @@ function buildConfig(userConfig) {
       }
     }
   }
+  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
   const resolved = {
     darkMode: userConfig.darkMode ?? "attribute",
     theme,
@@ -2306,7 +2389,7 @@ var customVariants = new Proxy(
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";
-function getStore() {
+function getStore2() {
   const g = globalThis;
   if (!g[KEY]) {
     g[KEY] = { isDark: false, lastNotified: false, subscribers: /* @__PURE__ */ new Set() };
@@ -2314,20 +2397,20 @@ function getStore() {
   return g[KEY];
 }
 function syncGlobalDarkMode(isDark) {
-  getStore().isDark = isDark;
+  getStore2().isDark = isDark;
 }
 function setGlobalDarkMode(isDark) {
-  const store = getStore();
+  const store = getStore2();
   store.isDark = isDark;
   if (store.lastNotified === isDark) return;
   store.lastNotified = isDark;
   for (const sub of store.subscribers) sub();
 }
 function getGlobalDarkMode() {
-  return getStore().isDark;
+  return getStore2().isDark;
 }
 function subscribeGlobalDarkMode(callback) {
-  const store = getStore();
+  const store = getStore2();
   store.subscribers.add(callback);
   return () => store.subscribers.delete(callback);
 }
@@ -2363,12 +2446,36 @@ function ThemeProvider({
   children,
   defaultMode = "system",
   colorScheme,
+  windowWidth: windowWidthProp,
   config: configOverride,
   disablePersistence = false
 }) {
   const [resolvedConfig, setResolvedConfig] = (0, import_react3.useState)(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
+  const [webWidth, setWebWidth] = (0, import_react3.useState)(
+    () => isWeb && typeof window !== "undefined" ? window.innerWidth : 0
+  );
+  const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
+  syncGlobalWidth(effectiveWidth);
+  syncGlobalScreens(resolvedConfig.theme.screens);
+  (0, import_react3.useEffect)(() => {
+    if (!isWeb || typeof window === "undefined") return;
+    let raf = 0;
+    const update = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const w = window.innerWidth;
+        setWebWidth(w);
+        setGlobalWidth(w);
+      });
+    };
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      cancelAnimationFrame(raf);
+    };
+  }, []);
   const [webScheme, setWebScheme] = (0, import_react3.useState)(() => {
     if (isWeb && typeof window !== "undefined") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -2637,33 +2744,59 @@ function styled(Component, baseClasses = "") {
 }
 
 // src/useStyles.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
+
+// src/useGlobalWidth.ts
+var import_react6 = __toESM(require("react"));
+var useSyncExternalStore = import_react6.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react6.default.useReducer((n) => n + 1, 0);
+  import_react6.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+var NOOP_SUB = (_) => () => {
+};
+var ZERO_SNAP = () => 0;
+var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+function useGlobalWidth() {
+  return useSyncExternalStore(subscribeGlobalWidth, getGlobalWidth, ZERO_SNAP);
+}
+function useConditionalWidth(active) {
+  return useSyncExternalStore(
+    active ? subscribeGlobalWidth : NOOP_SUB,
+    active ? getGlobalWidth : ZERO_SNAP,
+    ZERO_SNAP
+  );
+}
+
+// src/useStyles.ts
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
+  const width = useGlobalWidth();
+  const breakpoints = isWeb ? EMPTY_BREAKPOINTS : getActiveBreakpoints(width);
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react6.useMemo)(() => {
+  return (0, import_react7.useMemo)(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
-    return flatten(resolved, isDark, state);
-  }, [normalised, isDark, config, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
+    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]);
 }
 function useResolvedStyle(classString) {
   const { config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react6.useMemo)(
+  return (0, import_react7.useMemo)(
     () => resolve(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
 // src/useGlobalDarkMode.ts
-var import_react7 = __toESM(require("react"));
-var useSyncExternalStore = import_react7.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react7.default.useReducer((n) => n + 1, 0);
-  import_react7.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+var import_react8 = __toESM(require("react"));
+var useSyncExternalStore2 = import_react8.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react8.default.useReducer((n) => n + 1, 0);
+  import_react8.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
   return getSnapshot();
 };
 function useGlobalDarkMode() {
-  return useSyncExternalStore(
+  return useSyncExternalStore2(
     subscribeGlobalDarkMode,
     getGlobalDarkMode,
     () => false
@@ -2671,15 +2804,47 @@ function useGlobalDarkMode() {
   );
 }
 
+// src/useBreakpoint.ts
+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);
+  for (const [name, minW] of sorted) {
+    if (width >= minW) return name;
+  }
+  return "xs";
+}
+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;
+}
+
 // src/InteractiveWrapper.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 function chain(original, extra) {
   return (...args) => {
     original?.(...args);
     extra();
   };
 }
-var InteractiveWrapper = (0, import_react8.forwardRef)(
+var RESPONSIVE_MODS2 = /* @__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_MODS2.has(mod)) return true;
+    }
+  }
+  return false;
+}
+var InteractiveWrapper = (0, import_react9.forwardRef)(
   function InteractiveWrapper2({
     Component,
     resolvedStyle,
@@ -2694,18 +2859,22 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
     ...rest
   }, ref) {
     const isDark = useGlobalDarkMode();
-    const [pressed, setPressed] = (0, import_react8.useState)(false);
-    const [hovered, setHovered] = (0, import_react8.useState)(false);
-    const [focused, setFocused] = (0, import_react8.useState)(false);
-    const handlePressIn = (0, import_react8.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react8.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handleMouseEnter = (0, import_react8.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react8.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react8.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react8.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
-    const computedStyle = (0, import_react8.useMemo)(
-      () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }),
-      [resolvedStyle, isDark, pressed, hovered, focused]
+    const needsWidth = !isWeb && hasResponsiveBuckets(resolvedStyle);
+    const width = useConditionalWidth(needsWidth);
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+    const [pressed, setPressed] = (0, import_react9.useState)(false);
+    const [hovered, setHovered] = (0, import_react9.useState)(false);
+    const [focused, setFocused] = (0, import_react9.useState)(false);
+    const handlePressIn = (0, import_react9.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = (0, import_react9.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handleMouseEnter = (0, import_react9.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = (0, import_react9.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = (0, import_react9.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = (0, import_react9.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const computedStyle = (0, import_react9.useMemo)(
+      () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints),
+      [resolvedStyle, isDark, pressed, hovered, focused, width]
+      // eslint-disable-line react-hooks/exhaustive-deps
     );
     const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const { children, ...restWithoutChildren } = rest;
@@ -2721,7 +2890,7 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
       onFocus: handleFocus,
       onBlur: handleBlur
     };
-    return Array.isArray(children) ? import_react8.default.createElement(Component, componentProps, ...children) : import_react8.default.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? import_react9.default.createElement(Component, componentProps, ...children) : import_react9.default.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
@@ -2757,10 +2926,12 @@ function cx(...classes) {
   resolve,
   styled,
   updateConfig,
+  useBreakpoint,
   useColors,
   useGlobalDarkMode,
   useIsDark,
   useResolvedStyle,
+  useResponsive,
   useStyles,
   useTheme,
   wrapColors

package/dist/index.mjs

@@ -1,10 +1,12 @@
 import {
+  EMPTY_BREAKPOINTS,
   InteractiveWrapper,
   __require,
   buildConfig,
   defaultColors,
   defaultTheme,
   flatten,
+  getActiveBreakpoints,
   getConfig,
   initConfig,
   isWeb,
@@ -13,10 +15,14 @@ import {
   parseClasses,
   resolve,
   setGlobalDarkMode,
+  setGlobalWidth,
   syncGlobalDarkMode,
+  syncGlobalScreens,
+  syncGlobalWidth,
   updateConfig,
-  useGlobalDarkMode
-} from "./chunk-7XL6VQDW.mjs";
+  useGlobalDarkMode,
+  useGlobalWidth
+} from "./chunk-6YT4ECUI.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -129,12 +135,36 @@ function ThemeProvider({
   children,
   defaultMode = "system",
   colorScheme,
+  windowWidth: windowWidthProp,
   config: configOverride,
   disablePersistence = false
 }) {
   const [resolvedConfig, setResolvedConfig] = useState(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
+  const [webWidth, setWebWidth] = useState(
+    () => isWeb && typeof window !== "undefined" ? window.innerWidth : 0
+  );
+  const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
+  syncGlobalWidth(effectiveWidth);
+  syncGlobalScreens(resolvedConfig.theme.screens);
+  useEffect(() => {
+    if (!isWeb || typeof window === "undefined") return;
+    let raf = 0;
+    const update = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const w = window.innerWidth;
+        setWebWidth(w);
+        setGlobalWidth(w);
+      });
+    };
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      cancelAnimationFrame(raf);
+    };
+  }, []);
   const [webScheme, setWebScheme] = useState(() => {
     if (isWeb && typeof window !== "undefined") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -411,11 +441,13 @@ function styled(Component, baseClasses = "") {
 import { useMemo as useMemo4 } from "react";
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
+  const width = useGlobalWidth();
+  const breakpoints = isWeb ? EMPTY_BREAKPOINTS : getActiveBreakpoints(width);
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
   return useMemo4(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
-    return flatten(resolved, isDark, state);
-  }, [normalised, isDark, config, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
+    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]);
 }
 function useResolvedStyle(classString) {
   const { config } = useTheme();
@@ -426,6 +458,28 @@ function useResolvedStyle(classString) {
   );
 }
 
+// src/useBreakpoint.ts
+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);
+  for (const [name, minW] of sorted) {
+    if (width >= minW) return name;
+  }
+  return "xs";
+}
+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;
+}
+
 // src/kb.ts
 function kb(classString, isDark = false) {
   const config = getConfig();
@@ -456,10 +510,12 @@ export {
   resolve,
   styled,
   updateConfig,
+  useBreakpoint,
   useColors,
   useGlobalDarkMode,
   useIsDark,
   useResolvedStyle,
+  useResponsive,
   useStyles,
   useTheme,
   wrapColors