@kbach/react 0.4.3 → 0.5.0

package/dist/index.mjs

@@ -1,4 +1,5 @@
 import {
+  EMPTY_BREAKPOINTS,
   InteractiveWrapper,
   __require,
   buildConfig,
@@ -19,9 +20,10 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig,
+  useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-HY6PU2XS.mjs";
+} from "./chunk-LTYLJ4B3.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -370,6 +372,16 @@ import React3, {
   useCallback as useCallback3,
   useMemo as useMemo3
 } from "react";
+var RESPONSIVE_MODS = /* @__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_MODS.has(mod)) return true;
+    }
+  }
+  return false;
+}
 function styled(Component, baseClasses = "") {
   const Styled = forwardRef(
     (props, ref) => {
@@ -414,9 +426,13 @@ function styled(Component, baseClasses = "") {
       }, [onBlur]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
       const resolved = useMemo3(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const needsWidth = hasResponsiveBuckets(resolved);
+      const width = useConditionalWidth(needsWidth);
+      const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
       const computedStyle = useMemo3(
-        () => flatten(resolved, isDark, { pressed, hover: hovered, focus: focused }),
-        [resolved, isDark, pressed, hovered, focused]
+        () => flatten(resolved, isDark, { pressed, hover: hovered, focus: focused }, breakpoints),
+        [resolved, isDark, pressed, hovered, focused, width]
+        // eslint-disable-line react-hooks/exhaustive-deps
       );
       const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
       const finalStyle = extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
@@ -424,6 +440,8 @@ function styled(Component, baseClasses = "") {
         ref,
         ...rest,
         style: finalStyle,
+        // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
+        ...isWeb && combined ? { className: combined } : {},
         // onPressIn / onPressOut are React Native-only events; forwarding them to
         // a DOM element on web triggers React's unknown-prop warning.
         ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },