@kbach/react 0.3.9 → 0.3.11

package/dist/{chunk-HDKCXMOY.mjs → chunk-PIVTTJGI.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-UG3UVDJA.mjs";
+} from "./chunk-SMSQ7JQV.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
@@ -115,15 +115,6 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
-  if (isWeb && classStr) {
-    resolve(classStr, config.theme, config.darkMode);
-    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
-    return makeElement(isStaticChildren, type, {
-      ...passProps2,
-      className: classStr,
-      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
-    }, key);
-  }
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);

package/dist/{chunk-UG3UVDJA.mjs → chunk-SMSQ7JQV.mjs}

@@ -1134,14 +1134,15 @@ function resolveFontSize(value, fontSizes, isArbitrary) {
 }
 var STANDALONE = {
   // Display
-  // On native, Views are flex containers by default — `display: 'flex'` is a no-op.
+  // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
+  // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
   // `grid`, `inline-*`, `contents`, `flow-root` have no native equivalent.
-  flex: isWeb ? { display: "flex" } : {},
+  flex: { display: "flex" },
   block: isWeb ? { display: "block" } : null,
   "inline-block": isWeb ? { display: "inline-block" } : null,
   inline: isWeb ? { display: "inline" } : null,
   grid: isWeb ? { display: "grid" } : null,
-  "inline-flex": isWeb ? { display: "inline-flex" } : {},
+  "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
   "inline-grid": isWeb ? { display: "inline-grid" } : null,
   hidden: { display: "none" },
   contents: isWeb ? { display: "contents" } : null,
@@ -1533,7 +1534,7 @@ var RESOLVERS = {
   },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
-    if (!value) return isWeb ? { display: "flex" } : {};
+    if (!value) return { display: "flex" };
     if (isArbitrary) {
       const v = parseFloat(value);
       return isNaN(v) ? null : { flex: v };
@@ -2317,13 +2318,45 @@ var NOOP_SUB = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
 var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+var _webListeners = null;
+var _webRaf = 0;
+function _webResizeHandler() {
+  cancelAnimationFrame(_webRaf);
+  _webRaf = requestAnimationFrame(() => {
+    if (_webListeners) for (const cb of _webListeners) cb();
+  });
+}
+function subscribeWebWidth(cb) {
+  if (typeof window === "undefined") return () => {
+  };
+  if (!_webListeners) {
+    _webListeners = /* @__PURE__ */ new Set();
+    window.addEventListener("resize", _webResizeHandler);
+  }
+  _webListeners.add(cb);
+  return () => {
+    _webListeners.delete(cb);
+    if (_webListeners.size === 0) {
+      window.removeEventListener("resize", _webResizeHandler);
+      cancelAnimationFrame(_webRaf);
+      _webListeners = null;
+    }
+  };
+}
+function getWebWidth() {
+  return typeof window !== "undefined" ? window.innerWidth : 0;
+}
 function useGlobalWidth() {
-  return useSyncExternalStore2(subscribeGlobalWidth, getGlobalWidth, ZERO_SNAP);
+  return useSyncExternalStore2(
+    isWeb ? subscribeWebWidth : subscribeGlobalWidth,
+    isWeb ? getWebWidth : getGlobalWidth,
+    ZERO_SNAP
+  );
 }
 function useConditionalWidth(active) {
   return useSyncExternalStore2(
-    active ? subscribeGlobalWidth : NOOP_SUB,
-    active ? getGlobalWidth : ZERO_SNAP,
+    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
+    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
   );
 }

package/dist/index.js

@@ -1300,14 +1300,15 @@ function resolveFontSize(value, fontSizes, isArbitrary) {
 }
 var STANDALONE = {
   // Display
-  // On native, Views are flex containers by default — `display: 'flex'` is a no-op.
+  // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
+  // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
   // `grid`, `inline-*`, `contents`, `flow-root` have no native equivalent.
-  flex: isWeb ? { display: "flex" } : {},
+  flex: { display: "flex" },
   block: isWeb ? { display: "block" } : null,
   "inline-block": isWeb ? { display: "inline-block" } : null,
   inline: isWeb ? { display: "inline" } : null,
   grid: isWeb ? { display: "grid" } : null,
-  "inline-flex": isWeb ? { display: "inline-flex" } : {},
+  "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
   "inline-grid": isWeb ? { display: "inline-grid" } : null,
   hidden: { display: "none" },
   contents: isWeb ? { display: "contents" } : null,
@@ -1699,7 +1700,7 @@ var RESOLVERS = {
   },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
-    if (!value) return isWeb ? { display: "flex" } : {};
+    if (!value) return { display: "flex" };
     if (isArbitrary) {
       const v = parseFloat(value);
       return isNaN(v) ? null : { flex: v };
@@ -2762,13 +2763,45 @@ var NOOP_SUB = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
 var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+var _webListeners = null;
+var _webRaf = 0;
+function _webResizeHandler() {
+  cancelAnimationFrame(_webRaf);
+  _webRaf = requestAnimationFrame(() => {
+    if (_webListeners) for (const cb of _webListeners) cb();
+  });
+}
+function subscribeWebWidth(cb) {
+  if (typeof window === "undefined") return () => {
+  };
+  if (!_webListeners) {
+    _webListeners = /* @__PURE__ */ new Set();
+    window.addEventListener("resize", _webResizeHandler);
+  }
+  _webListeners.add(cb);
+  return () => {
+    _webListeners.delete(cb);
+    if (_webListeners.size === 0) {
+      window.removeEventListener("resize", _webResizeHandler);
+      cancelAnimationFrame(_webRaf);
+      _webListeners = null;
+    }
+  };
+}
+function getWebWidth() {
+  return typeof window !== "undefined" ? window.innerWidth : 0;
+}
 function useGlobalWidth() {
-  return useSyncExternalStore(subscribeGlobalWidth, getGlobalWidth, ZERO_SNAP);
+  return useSyncExternalStore(
+    isWeb ? subscribeWebWidth : subscribeGlobalWidth,
+    isWeb ? getWebWidth : getGlobalWidth,
+    ZERO_SNAP
+  );
 }
 function useConditionalWidth(active) {
   return useSyncExternalStore(
-    active ? subscribeGlobalWidth : NOOP_SUB,
-    active ? getGlobalWidth : ZERO_SNAP,
+    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
+    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
   );
 }

package/dist/index.mjs

@@ -21,7 +21,7 @@ import {
   updateConfig,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-UG3UVDJA.mjs";
+} from "./chunk-SMSQ7JQV.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -1203,14 +1203,15 @@ function resolveFontSize(value, fontSizes, isArbitrary) {
 }
 var STANDALONE = {
   // Display
-  // On native, Views are flex containers by default — `display: 'flex'` is a no-op.
+  // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
+  // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
   // `grid`, `inline-*`, `contents`, `flow-root` have no native equivalent.
-  flex: isWeb ? { display: "flex" } : {},
+  flex: { display: "flex" },
   block: isWeb ? { display: "block" } : null,
   "inline-block": isWeb ? { display: "inline-block" } : null,
   inline: isWeb ? { display: "inline" } : null,
   grid: isWeb ? { display: "grid" } : null,
-  "inline-flex": isWeb ? { display: "inline-flex" } : {},
+  "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
   "inline-grid": isWeb ? { display: "inline-grid" } : null,
   hidden: { display: "none" },
   contents: isWeb ? { display: "contents" } : null,
@@ -1602,7 +1603,7 @@ var RESOLVERS = {
   },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
-    if (!value) return isWeb ? { display: "flex" } : {};
+    if (!value) return { display: "flex" };
     if (isArbitrary) {
       const v = parseFloat(value);
       return isNaN(v) ? null : { flex: v };
@@ -2307,10 +2308,38 @@ var NOOP_SUB = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
 var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+var _webListeners = null;
+var _webRaf = 0;
+function _webResizeHandler() {
+  cancelAnimationFrame(_webRaf);
+  _webRaf = requestAnimationFrame(() => {
+    if (_webListeners) for (const cb of _webListeners) cb();
+  });
+}
+function subscribeWebWidth(cb) {
+  if (typeof window === "undefined") return () => {
+  };
+  if (!_webListeners) {
+    _webListeners = /* @__PURE__ */ new Set();
+    window.addEventListener("resize", _webResizeHandler);
+  }
+  _webListeners.add(cb);
+  return () => {
+    _webListeners.delete(cb);
+    if (_webListeners.size === 0) {
+      window.removeEventListener("resize", _webResizeHandler);
+      cancelAnimationFrame(_webRaf);
+      _webListeners = null;
+    }
+  };
+}
+function getWebWidth() {
+  return typeof window !== "undefined" ? window.innerWidth : 0;
+}
 function useConditionalWidth(active) {
   return useSyncExternalStore2(
-    active ? subscribeGlobalWidth : NOOP_SUB,
-    active ? getGlobalWidth : ZERO_SNAP,
+    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
+    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
   );
 }
@@ -2485,15 +2514,6 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
-  if (isWeb && classStr) {
-    resolve(classStr, config.theme, config.darkMode);
-    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
-    return makeElement(isStaticChildren, type, {
-      ...passProps2,
-      className: classStr,
-      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
-    }, key);
-  }
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-HDKCXMOY.mjs";
-import "./chunk-UG3UVDJA.mjs";
+} from "./chunk-PIVTTJGI.mjs";
+import "./chunk-SMSQ7JQV.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -1202,14 +1202,15 @@ function resolveFontSize(value, fontSizes, isArbitrary) {
 }
 var STANDALONE = {
   // Display
-  // On native, Views are flex containers by default — `display: 'flex'` is a no-op.
+  // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
+  // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
   // `grid`, `inline-*`, `contents`, `flow-root` have no native equivalent.
-  flex: isWeb ? { display: "flex" } : {},
+  flex: { display: "flex" },
   block: isWeb ? { display: "block" } : null,
   "inline-block": isWeb ? { display: "inline-block" } : null,
   inline: isWeb ? { display: "inline" } : null,
   grid: isWeb ? { display: "grid" } : null,
-  "inline-flex": isWeb ? { display: "inline-flex" } : {},
+  "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
   "inline-grid": isWeb ? { display: "inline-grid" } : null,
   hidden: { display: "none" },
   contents: isWeb ? { display: "contents" } : null,
@@ -1601,7 +1602,7 @@ var RESOLVERS = {
   },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
-    if (!value) return isWeb ? { display: "flex" } : {};
+    if (!value) return { display: "flex" };
     if (isArbitrary) {
       const v = parseFloat(value);
       return isNaN(v) ? null : { flex: v };
@@ -2306,10 +2307,38 @@ var NOOP_SUB = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
 var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+var _webListeners = null;
+var _webRaf = 0;
+function _webResizeHandler() {
+  cancelAnimationFrame(_webRaf);
+  _webRaf = requestAnimationFrame(() => {
+    if (_webListeners) for (const cb of _webListeners) cb();
+  });
+}
+function subscribeWebWidth(cb) {
+  if (typeof window === "undefined") return () => {
+  };
+  if (!_webListeners) {
+    _webListeners = /* @__PURE__ */ new Set();
+    window.addEventListener("resize", _webResizeHandler);
+  }
+  _webListeners.add(cb);
+  return () => {
+    _webListeners.delete(cb);
+    if (_webListeners.size === 0) {
+      window.removeEventListener("resize", _webResizeHandler);
+      cancelAnimationFrame(_webRaf);
+      _webListeners = null;
+    }
+  };
+}
+function getWebWidth() {
+  return typeof window !== "undefined" ? window.innerWidth : 0;
+}
 function useConditionalWidth(active) {
   return useSyncExternalStore2(
-    active ? subscribeGlobalWidth : NOOP_SUB,
-    active ? getGlobalWidth : ZERO_SNAP,
+    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
+    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
   );
 }
@@ -2484,15 +2513,6 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
   const config = getConfig();
-  if (isWeb && classStr) {
-    resolve(classStr, config.theme, config.darkMode);
-    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
-    return makeElement(isStaticChildren, type, {
-      ...passProps2,
-      className: classStr,
-      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
-    }, key);
-  }
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-HDKCXMOY.mjs";
-import "./chunk-UG3UVDJA.mjs";
+} from "./chunk-PIVTTJGI.mjs";
+import "./chunk-SMSQ7JQV.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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