@rabex-kit/rabex-ui 0.1.55 → 0.2.0

package/dist/hooks/useResponsive.d.ts

@@ -5,5 +5,8 @@ export default function useResponsive(): {
         md?: any;
         lg?: any;
         xl?: any;
+        xxl?: any;
+        xxxl?: any;
     }) => any;
+    currentBreakpoint: string;
 };

package/dist/rabex-ui.cjs.development.js

@@ -652,6 +652,12 @@ function useResponsive() {
   var isXL = useMediaQuery(function (theme) {
     return "(min-width:" + theme.breakpoints.values.xl + "px)";
   });
+  var isXXL = useMediaQuery(function (theme) {
+    return "(min-width:" + theme.breakpoints.values.xxl + "px)";
+  });
+  var isXXXL = useMediaQuery(function (theme) {
+    return "(min-width:" + theme.breakpoints.values.xxxl + "px)";
+  });
   function matches(props) {
     var result = _handleDefaultValue(props);
     if (_hasValue(props.xs) && isXS) result = props.xs;
@@ -659,10 +665,24 @@ function useResponsive() {
     if (_hasValue(props.md) && isMD) result = props.md;
     if (_hasValue(props.lg) && isLG) result = props.lg;
     if (_hasValue(props.xl) && isXL) result = props.xl;
+    if (_hasValue(props.xxl) && isXXL) result = props.xxl;
+    if (_hasValue(props.xxxl) && isXXXL) result = props.xxxl;
     return result;
   }
+  // Determine current breakpoint from media queries
+  var getCurrentBreakpoint = function getCurrentBreakpoint() {
+    if (isXXXL) return 'xxxl';
+    if (isXXL) return 'xxl';
+    if (isXL) return 'xl';
+    if (isLG) return 'lg';
+    if (isMD) return 'md';
+    if (isSM) return 'sm';
+    return 'xs';
+  };
+  var currentBreakpoint = getCurrentBreakpoint();
   return {
-    matches: matches
+    matches: matches,
+    currentBreakpoint: currentBreakpoint
   };
 }