@kbach/react 0.3.3 → 0.3.5

package/dist/jsx-runtime.js

@@ -1870,6 +1870,36 @@ 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 getGlobalScreens() {
+  return getStore().screens;
+}
+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;
@@ -1920,6 +1950,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;
@@ -1929,10 +1960,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(" ") + " " : "";
@@ -1957,6 +1990,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([
@@ -2025,18 +2065,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":
@@ -2074,6 +2114,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;
     }
@@ -2111,6 +2157,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) {
@@ -2129,6 +2197,7 @@ function buildConfig(userConfig) {
       }
     }
   }
+  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
   const resolved = {
     darkMode: userConfig.darkMode ?? "attribute",
     theme,
@@ -2189,7 +2258,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() };
@@ -2197,16 +2266,16 @@ function getStore() {
   return g[KEY];
 }
 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);
 }
 
 // src/InteractiveWrapper.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 
 // src/useGlobalDarkMode.ts
 var import_react = __toESM(require("react"));
@@ -2224,6 +2293,25 @@ function useGlobalDarkMode() {
   );
 }
 
+// src/useGlobalWidth.ts
+var import_react2 = __toESM(require("react"));
+var useSyncExternalStore2 = import_react2.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react2.default.useReducer((n) => n + 1, 0);
+  import_react2.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+var NOOP_SUB = (_) => () => {
+};
+var ZERO_SNAP = () => 0;
+var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+function useConditionalWidth(active) {
+  return useSyncExternalStore2(
+    active ? subscribeGlobalWidth : NOOP_SUB,
+    active ? getGlobalWidth : ZERO_SNAP,
+    ZERO_SNAP
+  );
+}
+
 // src/InteractiveWrapper.tsx
 function chain(original, extra) {
   return (...args) => {
@@ -2231,7 +2319,17 @@ function chain(original, extra) {
     extra();
   };
 }
-var InteractiveWrapper = (0, import_react2.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_react3.forwardRef)(
   function InteractiveWrapper2({
     Component,
     resolvedStyle,
@@ -2246,18 +2344,22 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
     ...rest
   }, ref) {
     const isDark = useGlobalDarkMode();
-    const [pressed, setPressed] = (0, import_react2.useState)(false);
-    const [hovered, setHovered] = (0, import_react2.useState)(false);
-    const [focused, setFocused] = (0, import_react2.useState)(false);
-    const handlePressIn = (0, import_react2.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react2.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handleMouseEnter = (0, import_react2.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react2.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react2.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react2.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
-    const computedStyle = (0, import_react2.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_react3.useState)(false);
+    const [hovered, setHovered] = (0, import_react3.useState)(false);
+    const [focused, setFocused] = (0, import_react3.useState)(false);
+    const handlePressIn = (0, import_react3.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = (0, import_react3.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handleMouseEnter = (0, import_react3.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = (0, import_react3.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = (0, import_react3.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = (0, import_react3.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const computedStyle = (0, import_react3.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;
@@ -2273,33 +2375,88 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       onFocus: handleFocus,
       onBlur: handleBlur
     };
-    return Array.isArray(children) ? import_react2.default.createElement(Component, componentProps, ...children) : import_react2.default.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? import_react3.default.createElement(Component, componentProps, ...children) : import_react3.default.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 
 // src/DarkWrapper.tsx
-var import_react3 = __toESM(require("react"));
-var DarkWrapper = import_react3.default.forwardRef(
+var import_react4 = __toESM(require("react"));
+var RESPONSIVE_MODS3 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+function hasResponsiveBuckets2(resolved) {
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (RESPONSIVE_MODS3.has(mod)) return true;
+    }
+  }
+  return false;
+}
+var DarkWrapper = import_react4.default.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
     const isDark = useGlobalDarkMode();
-    const computedStyle = flatten(resolvedStyle, isDark);
+    const needsWidth = !isWeb && hasResponsiveBuckets2(resolvedStyle);
+    const width = useConditionalWidth(needsWidth);
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+    const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
     const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
-    return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
+    return Array.isArray(children) ? import_react4.default.createElement(Component, props, ...children) : import_react4.default.createElement(Component, props, children);
   }
 );
 DarkWrapper.displayName = "Kbach.DarkWrapper";
 
 // src/jsx-runtime.tsx
-var MODE_BUCKET_RE = /^(not-)?(dark|light)(:(not-)?(dark|light))*$/;
-function hasInteractiveBuckets(resolved) {
-  return Object.keys(resolved).some((key) => {
-    if (key === "base") return false;
-    if (/^(sm|md|lg|xl|2xl)$/.test(key)) return false;
-    if (MODE_BUCKET_RE.test(key)) return false;
-    return true;
-  });
+var INTERACTIVE_MODS = /* @__PURE__ */ new Set([
+  "hover",
+  "not-hover",
+  "focus",
+  "not-focus",
+  "active",
+  "not-active",
+  "pressed",
+  "not-pressed",
+  "disabled",
+  "not-disabled",
+  "checked",
+  "not-checked",
+  "visited",
+  "not-visited",
+  "placeholder",
+  "focus-within",
+  "focus-visible",
+  "group-hover",
+  "group-focus",
+  "peer-hover",
+  "peer-focus",
+  "first",
+  "last",
+  "odd",
+  "even",
+  "only"
+]);
+var RESPONSIVE_MODS4 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+var MODE_MODS_JSX = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
+function bucketMods(resolved) {
+  let interactive = false;
+  let modeOrResponsive = false;
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    const parts = key.split(":");
+    for (const mod of parts) {
+      if (INTERACTIVE_MODS.has(mod)) {
+        interactive = true;
+        break;
+      }
+    }
+    for (const mod of parts) {
+      if (MODE_MODS_JSX.has(mod) || RESPONSIVE_MODS4.has(mod)) {
+        modeOrResponsive = true;
+        break;
+      }
+    }
+  }
+  return { interactive, modeOrResponsive };
 }
 var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "kb", "__kbachStyles", "__kbachClasses"]);
 function omitConsumed(props) {
@@ -2327,7 +2484,8 @@ function processElement(type, rawProps, key, isStaticChildren) {
   const config = getConfig();
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
-  if (hasInteractiveBuckets(resolved)) {
+  const { interactive, modeOrResponsive } = bucketMods(resolved);
+  if (interactive) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
       Component: type,
       resolvedStyle: resolved,
@@ -2336,10 +2494,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...passProps
     }, key);
   }
-  const hasModeVariants = Object.keys(resolved).some(
-    (k) => k !== "base" && MODE_BUCKET_RE.test(k)
-  );
-  if (hasModeVariants) {
+  if (modeOrResponsive) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
       Component: type,
       resolvedStyle: resolved,

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-NFPYOE5K.mjs";
-import "./chunk-7XL6VQDW.mjs";
+} from "./chunk-2WECG35P.mjs";
+import "./chunk-6YT4ECUI.mjs";
 export {
   Fragment,
   jsx,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",