@kbach/react 0.3.3 → 0.3.5

package/dist/{chunk-NFPYOE5K.mjs → chunk-2WECG35P.mjs}

@@ -1,21 +1,37 @@
 import {
+  EMPTY_BREAKPOINTS,
   InteractiveWrapper,
   flatten,
+  getActiveBreakpoints,
   getConfig,
   isWeb,
   resolve,
+  useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-7XL6VQDW.mjs";
+} from "./chunk-6YT4ECUI.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
 
 // src/DarkWrapper.tsx
 import React 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;
+}
 var DarkWrapper = React.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
     const isDark = useGlobalDarkMode();
-    const computedStyle = flatten(resolvedStyle, isDark);
+    const needsWidth = !isWeb && hasResponsiveBuckets(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) ? React.createElement(Component, props, ...children) : React.createElement(Component, props, children);
@@ -24,14 +40,56 @@ var DarkWrapper = React.forwardRef(
 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_MODS2 = /* @__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_MODS2.has(mod)) {
+        modeOrResponsive = true;
+        break;
+      }
+    }
+  }
+  return { interactive, modeOrResponsive };
 }
 var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "kb", "__kbachStyles", "__kbachClasses"]);
 function omitConsumed(props) {
@@ -59,7 +117,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 _jsx(InteractiveWrapper, {
       Component: type,
       resolvedStyle: resolved,
@@ -68,10 +127,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 _jsx(DarkWrapper, {
       Component: type,
       resolvedStyle: resolved,

package/dist/{chunk-7XL6VQDW.mjs → chunk-6YT4ECUI.mjs}

@@ -1838,6 +1838,48 @@ var LRUCache = class {
   }
 };
 
+// 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;
@@ -1888,6 +1930,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;
@@ -1897,10 +1940,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(" ") + " " : "";
@@ -1925,6 +1970,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([
@@ -1993,18 +2045,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":
@@ -2042,6 +2094,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;
     }
@@ -2082,6 +2140,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) {
@@ -2100,6 +2180,7 @@ function buildConfig(userConfig) {
       }
     }
   }
+  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
   const resolved = {
     darkMode: userConfig.darkMode ?? "attribute",
     theme,
@@ -2178,7 +2259,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() };
@@ -2186,20 +2267,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);
 }
@@ -2221,13 +2302,47 @@ function useGlobalDarkMode() {
 }
 
 // src/InteractiveWrapper.tsx
-import React2, { forwardRef, useState, useCallback, useMemo } from "react";
+import React3, { forwardRef, useState, useCallback, useMemo } from "react";
+
+// src/useGlobalWidth.ts
+import React2 from "react";
+var useSyncExternalStore2 = React2.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = React2.useReducer((n) => n + 1, 0);
+  React2.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+var NOOP_SUB = (_) => () => {
+};
+var ZERO_SNAP = () => 0;
+var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+function useGlobalWidth() {
+  return useSyncExternalStore2(subscribeGlobalWidth, getGlobalWidth, ZERO_SNAP);
+}
+function useConditionalWidth(active) {
+  return useSyncExternalStore2(
+    active ? subscribeGlobalWidth : NOOP_SUB,
+    active ? getGlobalWidth : ZERO_SNAP,
+    ZERO_SNAP
+  );
+}
+
+// src/InteractiveWrapper.tsx
 function chain(original, extra) {
   return (...args) => {
     original?.(...args);
     extra();
   };
 }
+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 = forwardRef(
   function InteractiveWrapper2({
     Component,
@@ -2243,6 +2358,9 @@ var InteractiveWrapper = forwardRef(
     ...rest
   }, ref) {
     const isDark = useGlobalDarkMode();
+    const needsWidth = !isWeb && hasResponsiveBuckets(resolvedStyle);
+    const width = useConditionalWidth(needsWidth);
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const [pressed, setPressed] = useState(false);
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
@@ -2253,8 +2371,9 @@ var InteractiveWrapper = forwardRef(
     const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
     const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
     const computedStyle = useMemo(
-      () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }),
-      [resolvedStyle, isDark, pressed, hovered, focused]
+      () => 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;
@@ -2270,7 +2389,7 @@ var InteractiveWrapper = forwardRef(
       onFocus: handleFocus,
       onBlur: handleBlur
     };
-    return Array.isArray(children) ? React2.createElement(Component, componentProps, ...children) : React2.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? React3.createElement(Component, componentProps, ...children) : React3.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
@@ -2282,6 +2401,10 @@ export {
   isWeb,
   parseClass,
   parseClasses,
+  syncGlobalWidth,
+  syncGlobalScreens,
+  setGlobalWidth,
+  getActiveBreakpoints,
   resolve,
   flatten,
   getConfig,
@@ -2291,6 +2414,9 @@ export {
   initConfig,
   syncGlobalDarkMode,
   setGlobalDarkMode,
+  EMPTY_BREAKPOINTS,
+  useGlobalWidth,
+  useConditionalWidth,
   useGlobalDarkMode,
   InteractiveWrapper
 };

package/dist/index.d.mts

@@ -100,9 +100,11 @@ declare function resolve(classString: string, theme: ThemeConfig, darkMode?: 'at
  * Flatten a ResolvedStyle into a single StyleValue for the given runtime state.
  * Used by useStyles() and styled().
  *
- * @param resolved    Output of resolve()
- * @param isDark      Whether dark mode is currently active
- * @param state       Interaction state flags
+ * @param resolved      Output of resolve()
+ * @param isDark        Whether dark mode is currently active
+ * @param state         Interaction state flags
+ * @param breakpoints   Active breakpoint names (sm, md, lg, xl, 2xl). On web,
+ *                      pass an empty Set — CSS @media rules handle responsive.
  */
 declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
     hover?: boolean;
@@ -113,7 +115,7 @@ declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
     checked?: boolean;
     visited?: boolean;
     placeholder?: boolean;
-}): StyleValue;
+}, breakpoints?: Set<string>): StyleValue;
 
 /**
  * Load, merge, and cache the resolved config.
@@ -185,12 +187,19 @@ interface ThemeProviderProps {
      * ```
      */
     colorScheme?: 'light' | 'dark' | null;
+    /**
+     * Current window/screen width in pixels for responsive breakpoints.
+     * On web this is read from `window.innerWidth` automatically.
+     * When importing `ThemeProvider` from `@kbach/native` this is provided
+     * automatically from `useWindowDimensions()`.
+     */
+    windowWidth?: number;
     /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
     config?: FrameworkConfig;
     /** Disable persistence to localStorage */
     disablePersistence?: boolean;
 }
-declare function ThemeProvider({ children, defaultMode, colorScheme, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
+declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth: windowWidthProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
 type ToggleVariant = 'button' | 'switch' | 'icon-button';
 interface ThemeToggleProps {
@@ -281,6 +290,26 @@ declare function useResolvedStyle(classString: string | string[]): ResolvedStyle
  */
 declare function useGlobalDarkMode(): boolean;
 
+/**
+ * Returns the name of the currently active breakpoint — the largest breakpoint
+ * whose min-width the window satisfies, or `'xs'` when below all breakpoints.
+ *
+ * ```ts
+ * const bp = useBreakpoint(); // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+ * ```
+ */
+declare function useBreakpoint(): string;
+/**
+ * Returns a record of boolean flags for each breakpoint — `true` when the
+ * window width satisfies that breakpoint's min-width threshold.
+ *
+ * ```ts
+ * const { sm, md, lg } = useResponsive();
+ * const padding = lg ? 32 : sm ? 16 : 8;
+ * ```
+ */
+declare function useResponsive(): Record<string, boolean>;
+
 interface InteractiveWrapperProps {
     /** The real component to render (View, TouchableOpacity, div, a third-party button…) */
     Component: React__default.ComponentType<any> | string;
@@ -342,4 +371,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.d.ts

@@ -100,9 +100,11 @@ declare function resolve(classString: string, theme: ThemeConfig, darkMode?: 'at
  * Flatten a ResolvedStyle into a single StyleValue for the given runtime state.
  * Used by useStyles() and styled().
  *
- * @param resolved    Output of resolve()
- * @param isDark      Whether dark mode is currently active
- * @param state       Interaction state flags
+ * @param resolved      Output of resolve()
+ * @param isDark        Whether dark mode is currently active
+ * @param state         Interaction state flags
+ * @param breakpoints   Active breakpoint names (sm, md, lg, xl, 2xl). On web,
+ *                      pass an empty Set — CSS @media rules handle responsive.
  */
 declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
     hover?: boolean;
@@ -113,7 +115,7 @@ declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
     checked?: boolean;
     visited?: boolean;
     placeholder?: boolean;
-}): StyleValue;
+}, breakpoints?: Set<string>): StyleValue;
 
 /**
  * Load, merge, and cache the resolved config.
@@ -185,12 +187,19 @@ interface ThemeProviderProps {
      * ```
      */
     colorScheme?: 'light' | 'dark' | null;
+    /**
+     * Current window/screen width in pixels for responsive breakpoints.
+     * On web this is read from `window.innerWidth` automatically.
+     * When importing `ThemeProvider` from `@kbach/native` this is provided
+     * automatically from `useWindowDimensions()`.
+     */
+    windowWidth?: number;
     /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
     config?: FrameworkConfig;
     /** Disable persistence to localStorage */
     disablePersistence?: boolean;
 }
-declare function ThemeProvider({ children, defaultMode, colorScheme, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
+declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth: windowWidthProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
 type ToggleVariant = 'button' | 'switch' | 'icon-button';
 interface ThemeToggleProps {
@@ -281,6 +290,26 @@ declare function useResolvedStyle(classString: string | string[]): ResolvedStyle
  */
 declare function useGlobalDarkMode(): boolean;
 
+/**
+ * Returns the name of the currently active breakpoint — the largest breakpoint
+ * whose min-width the window satisfies, or `'xs'` when below all breakpoints.
+ *
+ * ```ts
+ * const bp = useBreakpoint(); // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+ * ```
+ */
+declare function useBreakpoint(): string;
+/**
+ * Returns a record of boolean flags for each breakpoint — `true` when the
+ * window width satisfies that breakpoint's min-width threshold.
+ *
+ * ```ts
+ * const { sm, md, lg } = useResponsive();
+ * const padding = lg ? 32 : sm ? 16 : 8;
+ * ```
+ */
+declare function useResponsive(): Record<string, boolean>;
+
 interface InteractiveWrapperProps {
     /** The real component to render (View, TouchableOpacity, div, a third-party button…) */
     Component: React__default.ComponentType<any> | string;
@@ -342,4 +371,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, flatten, getConfig, initConfig, kb, parseClass, parseClasses, resolve, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };