@kaizen/components 0.0.0-canary-useContainerQuery-20251123222018 → 0.0.0-canary-useContainerQuery-20251125222037

package/dist/cjs/src/utils/useContainerQueries.cjs

@@ -3,12 +3,6 @@
 var tslib = require('tslib');
 var React = require('react');
 var useDebounce = require('use-debounce');
-function _interopDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
-}
-var React__default = /*#__PURE__*/_interopDefault(React);
 var DEFAULT_DEBOUNCE_MS = 500;
 /**
  * Tailwind CSS default container query breakpoints in pixels
@@ -50,21 +44,17 @@ var parseBreakpointValue = function (value) {
  *
  * @returns An object containing:
  *   - containerRef: A ref to attach to your container element
- *   - queries: Boolean flags for each breakpoint (isXs, isSm, isMd, etc.) and custom queries
- *   - components: React components for conditional rendering (XsOnly, SmOrLarger, etc.)
+ *   - queries: Boolean flags for each breakpoint (isXsOrLarger, isSmOrLarger, isMdOrLarger, etc.) and custom queries
  *
  * @example
  * ```tsx
  * const MyComponent = () => {
- *   const { containerRef, queries, components } = useContainerQueries()
- *   const { MdOrLarger } = components
+ *   const { containerRef, queries } = useContainerQueries()
  *
  *   return (
  *     <div ref={containerRef}>
- *       {queries.isSm && <p>Small container</p>}
- *       <MdOrLarger>
- *         <p>Medium or larger container</p>
- *       </MdOrLarger>
+ *       {queries.isSmOrLarger && <p>Small container</p>}
+ *       {queries.isMdOrLarger && <p>Medium or larger container</p>}
  *     </div>
  *   )
  * }
@@ -72,16 +62,15 @@ var parseBreakpointValue = function (value) {
  *
  * @example With custom queries
  * ```tsx
- * const { containerRef, queries, components } = useContainerQueries({
+ * const { containerRef, queries } = useContainerQueries({
  *   compact: '400px',
  *   spacious: '800px',
  * })
- * const { Compact, Spacious } = components
  *
  * return (
  *   <div ref={containerRef}>
- *     <Compact><p>Compact view</p></Compact>
- *     <Spacious><p>Spacious view</p></Spacious>
+ *     {queries.compact && <p>Compact view</p>}
+ *     {queries.spacious && <p>Spacious view</p>}
  *   </div>
  * )
  * ```
@@ -90,76 +79,7 @@ var useContainerQueries = function (propQueries) {
   if (propQueries === void 0) {
     propQueries = {};
   }
-  // SSR support - return safe defaults when window is undefined
-  if (typeof window === 'undefined') {
-    return {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      containerRef: function () {},
-      queries: {
-        isXs: false,
-        isSm: false,
-        isMd: false,
-        isLg: false,
-        isXl: false,
-        is2xl: false,
-        is3xl: false,
-        is4xl: false,
-        is5xl: false,
-        is6xl: false,
-        is7xl: true // Default to largest for SSR
-      },
-      components: {
-        'XsOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        'SmOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        'MdOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        'LgOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        'XlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '2xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '3xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '4xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '5xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '6xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '7xlOnly': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'XsOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'SmOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'MdOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'LgOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'XlOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        }
-      }
-    };
-  }
+  var isClient = typeof window !== 'undefined';
   // Parse custom queries
   var customQueriesPx = React.useMemo(function () {
     return Object.entries(propQueries).reduce(function (acc, _a) {
@@ -181,6 +101,8 @@ var useContainerQueries = function (propQueries) {
   }, DEFAULT_DEBOUNCE_MS);
   // Callback ref for the container element
   var containerRef = React.useCallback(function (node) {
+    // Skip if SSR
+    if (!isClient) return;
     // Cleanup previous observer
     if (resizeObserverRef.current) {
       resizeObserverRef.current.disconnect();
@@ -202,7 +124,7 @@ var useContainerQueries = function (propQueries) {
       var width = node.getBoundingClientRect().width;
       setContainerWidth(width);
     }
-  }, [debouncedSetContainerWidth]);
+  }, [debouncedSetContainerWidth, isClient]);
   // Cleanup on unmount
   React.useEffect(function () {
     return function () {
@@ -214,17 +136,17 @@ var useContainerQueries = function (propQueries) {
   // Calculate breakpoint matches based on container width
   var breakpointMatches = React.useMemo(function () {
     return {
-      isXs: containerWidth >= DEFAULT_BREAKPOINTS.xs,
-      isSm: containerWidth >= DEFAULT_BREAKPOINTS.sm,
-      isMd: containerWidth >= DEFAULT_BREAKPOINTS.md,
-      isLg: containerWidth >= DEFAULT_BREAKPOINTS.lg,
-      isXl: containerWidth >= DEFAULT_BREAKPOINTS.xl,
-      is2xl: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
-      is3xl: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
-      is4xl: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
-      is5xl: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
-      is6xl: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
-      is7xl: containerWidth >= DEFAULT_BREAKPOINTS['7xl']
+      isXsOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xs,
+      isSmOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.sm,
+      isMdOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.md,
+      isLgOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.lg,
+      isXlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xl,
+      is2xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
+      is3xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
+      is4xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
+      is5xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
+      is6xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
+      is7xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['7xl']
     };
   }, [containerWidth]);
   // Calculate custom query matches
@@ -236,85 +158,9 @@ var useContainerQueries = function (propQueries) {
       return acc;
     }, {});
   }, [containerWidth, customQueriesPx]);
-  // Helper function to check if container is at exact breakpoint (not larger)
-  var isExactBreakpoint = React.useCallback(function (breakpoint) {
-    var sortedBreakpoints = Object.entries(DEFAULT_BREAKPOINTS).sort(function (_a, _b) {
-      var a = _a[1];
-      var b = _b[1];
-      return a - b;
-    });
-    var currentIndex = sortedBreakpoints.findIndex(function (_a) {
-      var key = _a[0];
-      return key === breakpoint;
-    });
-    var nextBreakpoint = sortedBreakpoints[currentIndex + 1];
-    var minWidth = DEFAULT_BREAKPOINTS[breakpoint];
-    var maxWidth = nextBreakpoint ? nextBreakpoint[1] : Infinity;
-    return containerWidth >= minWidth && containerWidth < maxWidth;
-  }, [containerWidth]);
-  // Create helper components for Tailwind breakpoints
-  var components = React.useMemo(function () {
-    return tslib.__assign({
-      'XsOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('xs') && props.children);
-      },
-      'SmOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('sm') && props.children);
-      },
-      'MdOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('md') && props.children);
-      },
-      'LgOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('lg') && props.children);
-      },
-      'XlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('xl') && props.children);
-      },
-      '2xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('2xl') && props.children);
-      },
-      '3xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('3xl') && props.children);
-      },
-      '4xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('4xl') && props.children);
-      },
-      '5xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('5xl') && props.children);
-      },
-      '6xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('6xl') && props.children);
-      },
-      '7xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('7xl') && props.children);
-      },
-      'XsOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isXs && props.children);
-      },
-      'SmOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isSm && props.children);
-      },
-      'MdOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isMd && props.children);
-      },
-      'LgOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isLg && props.children);
-      },
-      'XlOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isXl && props.children);
-      }
-    }, Object.keys(customQueriesPx).reduce(function (acc, key) {
-      var componentName = key.charAt(0).toUpperCase() + key.slice(1);
-      acc[componentName] = function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, customMatches[key] && props.children);
-      };
-      return acc;
-    }, {}));
-  }, [breakpointMatches, customMatches, isExactBreakpoint, customQueriesPx]);
   return {
     containerRef: containerRef,
-    queries: tslib.__assign(tslib.__assign({}, breakpointMatches), customMatches),
-    components: components
+    queries: tslib.__assign(tslib.__assign({}, breakpointMatches), customMatches)
   };
 };
 exports.useContainerQueries = useContainerQueries;

package/dist/esm/src/utils/useContainerQueries.mjs

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 var DEFAULT_DEBOUNCE_MS = 500;
 /**
@@ -42,21 +42,17 @@ var parseBreakpointValue = function (value) {
  *
  * @returns An object containing:
  *   - containerRef: A ref to attach to your container element
- *   - queries: Boolean flags for each breakpoint (isXs, isSm, isMd, etc.) and custom queries
- *   - components: React components for conditional rendering (XsOnly, SmOrLarger, etc.)
+ *   - queries: Boolean flags for each breakpoint (isXsOrLarger, isSmOrLarger, isMdOrLarger, etc.) and custom queries
  *
  * @example
  * ```tsx
  * const MyComponent = () => {
- *   const { containerRef, queries, components } = useContainerQueries()
- *   const { MdOrLarger } = components
+ *   const { containerRef, queries } = useContainerQueries()
  *
  *   return (
  *     <div ref={containerRef}>
- *       {queries.isSm && <p>Small container</p>}
- *       <MdOrLarger>
- *         <p>Medium or larger container</p>
- *       </MdOrLarger>
+ *       {queries.isSmOrLarger && <p>Small container</p>}
+ *       {queries.isMdOrLarger && <p>Medium or larger container</p>}
  *     </div>
  *   )
  * }
@@ -64,16 +60,15 @@ var parseBreakpointValue = function (value) {
  *
  * @example With custom queries
  * ```tsx
- * const { containerRef, queries, components } = useContainerQueries({
+ * const { containerRef, queries } = useContainerQueries({
  *   compact: '400px',
  *   spacious: '800px',
  * })
- * const { Compact, Spacious } = components
  *
  * return (
  *   <div ref={containerRef}>
- *     <Compact><p>Compact view</p></Compact>
- *     <Spacious><p>Spacious view</p></Spacious>
+ *     {queries.compact && <p>Compact view</p>}
+ *     {queries.spacious && <p>Spacious view</p>}
  *   </div>
  * )
  * ```
@@ -82,76 +77,7 @@ var useContainerQueries = function (propQueries) {
   if (propQueries === void 0) {
     propQueries = {};
   }
-  // SSR support - return safe defaults when window is undefined
-  if (typeof window === 'undefined') {
-    return {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      containerRef: function () {},
-      queries: {
-        isXs: false,
-        isSm: false,
-        isMd: false,
-        isLg: false,
-        isXl: false,
-        is2xl: false,
-        is3xl: false,
-        is4xl: false,
-        is5xl: false,
-        is6xl: false,
-        is7xl: true // Default to largest for SSR
-      },
-      components: {
-        'XsOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        'SmOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        'MdOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        'LgOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        'XlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '2xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '3xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '4xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '5xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '6xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '7xlOnly': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'XsOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'SmOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'MdOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'LgOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'XlOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        }
-      }
-    };
-  }
+  var isClient = typeof window !== 'undefined';
   // Parse custom queries
   var customQueriesPx = useMemo(function () {
     return Object.entries(propQueries).reduce(function (acc, _a) {
@@ -173,6 +99,8 @@ var useContainerQueries = function (propQueries) {
   }, DEFAULT_DEBOUNCE_MS);
   // Callback ref for the container element
   var containerRef = useCallback(function (node) {
+    // Skip if SSR
+    if (!isClient) return;
     // Cleanup previous observer
     if (resizeObserverRef.current) {
       resizeObserverRef.current.disconnect();
@@ -194,7 +122,7 @@ var useContainerQueries = function (propQueries) {
       var width = node.getBoundingClientRect().width;
       setContainerWidth(width);
     }
-  }, [debouncedSetContainerWidth]);
+  }, [debouncedSetContainerWidth, isClient]);
   // Cleanup on unmount
   useEffect(function () {
     return function () {
@@ -206,17 +134,17 @@ var useContainerQueries = function (propQueries) {
   // Calculate breakpoint matches based on container width
   var breakpointMatches = useMemo(function () {
     return {
-      isXs: containerWidth >= DEFAULT_BREAKPOINTS.xs,
-      isSm: containerWidth >= DEFAULT_BREAKPOINTS.sm,
-      isMd: containerWidth >= DEFAULT_BREAKPOINTS.md,
-      isLg: containerWidth >= DEFAULT_BREAKPOINTS.lg,
-      isXl: containerWidth >= DEFAULT_BREAKPOINTS.xl,
-      is2xl: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
-      is3xl: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
-      is4xl: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
-      is5xl: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
-      is6xl: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
-      is7xl: containerWidth >= DEFAULT_BREAKPOINTS['7xl']
+      isXsOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xs,
+      isSmOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.sm,
+      isMdOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.md,
+      isLgOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.lg,
+      isXlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xl,
+      is2xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
+      is3xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
+      is4xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
+      is5xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
+      is6xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
+      is7xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['7xl']
     };
   }, [containerWidth]);
   // Calculate custom query matches
@@ -228,85 +156,9 @@ var useContainerQueries = function (propQueries) {
       return acc;
     }, {});
   }, [containerWidth, customQueriesPx]);
-  // Helper function to check if container is at exact breakpoint (not larger)
-  var isExactBreakpoint = useCallback(function (breakpoint) {
-    var sortedBreakpoints = Object.entries(DEFAULT_BREAKPOINTS).sort(function (_a, _b) {
-      var a = _a[1];
-      var b = _b[1];
-      return a - b;
-    });
-    var currentIndex = sortedBreakpoints.findIndex(function (_a) {
-      var key = _a[0];
-      return key === breakpoint;
-    });
-    var nextBreakpoint = sortedBreakpoints[currentIndex + 1];
-    var minWidth = DEFAULT_BREAKPOINTS[breakpoint];
-    var maxWidth = nextBreakpoint ? nextBreakpoint[1] : Infinity;
-    return containerWidth >= minWidth && containerWidth < maxWidth;
-  }, [containerWidth]);
-  // Create helper components for Tailwind breakpoints
-  var components = useMemo(function () {
-    return __assign({
-      'XsOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('xs') && props.children);
-      },
-      'SmOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('sm') && props.children);
-      },
-      'MdOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('md') && props.children);
-      },
-      'LgOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('lg') && props.children);
-      },
-      'XlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('xl') && props.children);
-      },
-      '2xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('2xl') && props.children);
-      },
-      '3xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('3xl') && props.children);
-      },
-      '4xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('4xl') && props.children);
-      },
-      '5xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('5xl') && props.children);
-      },
-      '6xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('6xl') && props.children);
-      },
-      '7xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('7xl') && props.children);
-      },
-      'XsOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isXs && props.children);
-      },
-      'SmOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isSm && props.children);
-      },
-      'MdOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isMd && props.children);
-      },
-      'LgOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isLg && props.children);
-      },
-      'XlOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isXl && props.children);
-      }
-    }, Object.keys(customQueriesPx).reduce(function (acc, key) {
-      var componentName = key.charAt(0).toUpperCase() + key.slice(1);
-      acc[componentName] = function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, customMatches[key] && props.children);
-      };
-      return acc;
-    }, {}));
-  }, [breakpointMatches, customMatches, isExactBreakpoint, customQueriesPx]);
   return {
     containerRef: containerRef,
-    queries: __assign(__assign({}, breakpointMatches), customMatches),
-    components: components
+    queries: __assign(__assign({}, breakpointMatches), customMatches)
   };
 };
 export { useContainerQueries };

package/dist/types/utils/useContainerQueries.d.ts

@@ -1,41 +1,19 @@
-import React, { type ReactNode } from 'react';
+import type React from 'react';
 type Props = Record<string, string>;
-type GenericChildrenType = {
-    children?: ReactNode;
-};
 type ContainerQueries = {
-    isXs: boolean;
-    isSm: boolean;
-    isMd: boolean;
-    isLg: boolean;
-    isXl: boolean;
-    is2xl: boolean;
-    is3xl: boolean;
-    is4xl: boolean;
-    is5xl: boolean;
-    is6xl: boolean;
-    is7xl: boolean;
+    isXsOrLarger: boolean;
+    isSmOrLarger: boolean;
+    isMdOrLarger: boolean;
+    isLgOrLarger: boolean;
+    isXlOrLarger: boolean;
+    is2xlOrLarger: boolean;
+    is3xlOrLarger: boolean;
+    is4xlOrLarger: boolean;
+    is5xlOrLarger: boolean;
+    is6xlOrLarger: boolean;
+    is7xlOrLarger: boolean;
     [key: string]: boolean;
 };
-type ContainerComponents = {
-    'XsOnly': (props: GenericChildrenType) => JSX.Element;
-    'SmOnly': (props: GenericChildrenType) => JSX.Element;
-    'MdOnly': (props: GenericChildrenType) => JSX.Element;
-    'LgOnly': (props: GenericChildrenType) => JSX.Element;
-    'XlOnly': (props: GenericChildrenType) => JSX.Element;
-    '2xlOnly': (props: GenericChildrenType) => JSX.Element;
-    '3xlOnly': (props: GenericChildrenType) => JSX.Element;
-    '4xlOnly': (props: GenericChildrenType) => JSX.Element;
-    '5xlOnly': (props: GenericChildrenType) => JSX.Element;
-    '6xlOnly': (props: GenericChildrenType) => JSX.Element;
-    '7xlOnly': (props: GenericChildrenType) => JSX.Element;
-    'XsOrLarger': (props: GenericChildrenType) => JSX.Element;
-    'SmOrLarger': (props: GenericChildrenType) => JSX.Element;
-    'MdOrLarger': (props: GenericChildrenType) => JSX.Element;
-    'LgOrLarger': (props: GenericChildrenType) => JSX.Element;
-    'XlOrLarger': (props: GenericChildrenType) => JSX.Element;
-    [key: string]: (props: GenericChildrenType) => JSX.Element;
-};
 /**
  * A React hook for responding to container size changes using Tailwind CSS container query breakpoints.
  *
@@ -47,21 +25,17 @@ type ContainerComponents = {
  *
  * @returns An object containing:
  *   - containerRef: A ref to attach to your container element
- *   - queries: Boolean flags for each breakpoint (isXs, isSm, isMd, etc.) and custom queries
- *   - components: React components for conditional rendering (XsOnly, SmOrLarger, etc.)
+ *   - queries: Boolean flags for each breakpoint (isXsOrLarger, isSmOrLarger, isMdOrLarger, etc.) and custom queries
  *
  * @example
  * ```tsx
  * const MyComponent = () => {
- *   const { containerRef, queries, components } = useContainerQueries()
- *   const { MdOrLarger } = components
+ *   const { containerRef, queries } = useContainerQueries()
  *
  *   return (
  *     <div ref={containerRef}>
- *       {queries.isSm && <p>Small container</p>}
- *       <MdOrLarger>
- *         <p>Medium or larger container</p>
- *       </MdOrLarger>
+ *       {queries.isSmOrLarger && <p>Small container</p>}
+ *       {queries.isMdOrLarger && <p>Medium or larger container</p>}
  *     </div>
  *   )
  * }
@@ -69,16 +43,15 @@ type ContainerComponents = {
  *
  * @example With custom queries
  * ```tsx
- * const { containerRef, queries, components } = useContainerQueries({
+ * const { containerRef, queries } = useContainerQueries({
  *   compact: '400px',
  *   spacious: '800px',
  * })
- * const { Compact, Spacious } = components
  *
  * return (
  *   <div ref={containerRef}>
- *     <Compact><p>Compact view</p></Compact>
- *     <Spacious><p>Spacious view</p></Spacious>
+ *     {queries.compact && <p>Compact view</p>}
+ *     {queries.spacious && <p>Spacious view</p>}
  *   </div>
  * )
  * ```
@@ -86,6 +59,5 @@ type ContainerComponents = {
 export declare const useContainerQueries: (propQueries?: Props) => {
     containerRef: React.RefCallback<HTMLElement>;
     queries: ContainerQueries;
-    components: ContainerComponents;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-useContainerQuery-20251123222018",
+  "version": "0.0.0-canary-useContainerQuery-20251125222037",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/utils/useContainerQueries.spec.tsx

@@ -4,22 +4,16 @@ import { vi } from 'vitest'
 import { useContainerQueries } from './useContainerQueries'
 
 const ExampleComponent = (): JSX.Element => {
-  const { containerRef, queries, components } = useContainerQueries({
+  const { containerRef, queries } = useContainerQueries({
     compact: '400px',
     wide: '800px',
   })
-  const { MdOrLarger, Compact } = components
 
   return (
     <div ref={containerRef} data-testid="container">
-      {queries.isSm && <button type="button">Small query boolean</button>}
-      <MdOrLarger>
-        <button type="button">Medium or larger component</button>
-      </MdOrLarger>
+      {queries.isSmOrLarger && <button type="button">Small query boolean</button>}
+      {queries.isMdOrLarger && <button type="button">Medium or larger query</button>}
       {queries.compact && <button type="button">Compact query boolean</button>}
-      <Compact>
-        <button type="button">Compact component</button>
-      </Compact>
     </div>
   )
 }
@@ -129,7 +123,7 @@ describe('useContainerQueries()', () => {
     // Initially at 300px, should not show sm (384px) or md (448px) content
     expect(screen.queryByRole('button', { name: /Small query boolean/i })).not.toBeInTheDocument()
     expect(
-      screen.queryByRole('button', { name: /Medium or larger component/i }),
+      screen.queryByRole('button', { name: /Medium or larger query/i }),
     ).not.toBeInTheDocument()
 
     // Trigger resize to 400px (sm breakpoint is 384px)
@@ -141,7 +135,7 @@ describe('useContainerQueries()', () => {
 
     expect(screen.queryByRole('button', { name: /Small query boolean/i })).toBeInTheDocument()
     expect(
-      screen.queryByRole('button', { name: /Medium or larger component/i }),
+      screen.queryByRole('button', { name: /Medium or larger query/i }),
     ).not.toBeInTheDocument()
 
     // Trigger resize to 500px (md breakpoint is 448px)
@@ -152,9 +146,7 @@ describe('useContainerQueries()', () => {
     })
 
     expect(screen.queryByRole('button', { name: /Small query boolean/i })).toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: /Medium or larger component/i }),
-    ).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Medium or larger query/i })).toBeInTheDocument()
   })
 
   it('shows and hides content based on custom queries', async () => {
@@ -178,7 +170,6 @@ describe('useContainerQueries()', () => {
 
     // Initially at 300px, custom 'compact' query (400px) should not match
     expect(screen.queryByRole('button', { name: /Compact query boolean/i })).not.toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: /Compact component/i })).not.toBeInTheDocument()
 
     // Trigger resize to 450px (compact is 400px)
     await act(async () => {
@@ -188,7 +179,6 @@ describe('useContainerQueries()', () => {
     })
 
     expect(screen.queryByRole('button', { name: /Compact query boolean/i })).toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: /Compact component/i })).toBeInTheDocument()
   })
 
   it('returns SSR-safe defaults when window is undefined', () => {

package/src/utils/useContainerQueries.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import type React from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 
 type Props = Record<string, string>
-type GenericChildrenType = { children?: ReactNode }
 
 const DEFAULT_DEBOUNCE_MS = 500
 
@@ -38,45 +37,21 @@ const parseBreakpointValue = (value: string): number => {
   return parseFloat(value)
 }
 
-type HelperComponentProps = {
-  children?: ReactNode
-}
-
 type ContainerQueries = {
-  isXs: boolean
-  isSm: boolean
-  isMd: boolean
-  isLg: boolean
-  isXl: boolean
-  is2xl: boolean
-  is3xl: boolean
-  is4xl: boolean
-  is5xl: boolean
-  is6xl: boolean
-  is7xl: boolean
+  isXsOrLarger: boolean
+  isSmOrLarger: boolean
+  isMdOrLarger: boolean
+  isLgOrLarger: boolean
+  isXlOrLarger: boolean
+  is2xlOrLarger: boolean
+  is3xlOrLarger: boolean
+  is4xlOrLarger: boolean
+  is5xlOrLarger: boolean
+  is6xlOrLarger: boolean
+  is7xlOrLarger: boolean
   [key: string]: boolean
 }
 
-type ContainerComponents = {
-  'XsOnly': (props: GenericChildrenType) => JSX.Element
-  'SmOnly': (props: GenericChildrenType) => JSX.Element
-  'MdOnly': (props: GenericChildrenType) => JSX.Element
-  'LgOnly': (props: GenericChildrenType) => JSX.Element
-  'XlOnly': (props: GenericChildrenType) => JSX.Element
-  '2xlOnly': (props: GenericChildrenType) => JSX.Element
-  '3xlOnly': (props: GenericChildrenType) => JSX.Element
-  '4xlOnly': (props: GenericChildrenType) => JSX.Element
-  '5xlOnly': (props: GenericChildrenType) => JSX.Element
-  '6xlOnly': (props: GenericChildrenType) => JSX.Element
-  '7xlOnly': (props: GenericChildrenType) => JSX.Element
-  'XsOrLarger': (props: GenericChildrenType) => JSX.Element
-  'SmOrLarger': (props: GenericChildrenType) => JSX.Element
-  'MdOrLarger': (props: GenericChildrenType) => JSX.Element
-  'LgOrLarger': (props: GenericChildrenType) => JSX.Element
-  'XlOrLarger': (props: GenericChildrenType) => JSX.Element
-  [key: string]: (props: GenericChildrenType) => JSX.Element
-}
-
 /**
  * A React hook for responding to container size changes using Tailwind CSS container query breakpoints.
  *
@@ -88,21 +63,17 @@ type ContainerComponents = {
  *
  * @returns An object containing:
  *   - containerRef: A ref to attach to your container element
- *   - queries: Boolean flags for each breakpoint (isXs, isSm, isMd, etc.) and custom queries
- *   - components: React components for conditional rendering (XsOnly, SmOrLarger, etc.)
+ *   - queries: Boolean flags for each breakpoint (isXsOrLarger, isSmOrLarger, isMdOrLarger, etc.) and custom queries
  *
  * @example
  * ```tsx
  * const MyComponent = () => {
- *   const { containerRef, queries, components } = useContainerQueries()
- *   const { MdOrLarger } = components
+ *   const { containerRef, queries } = useContainerQueries()
  *
  *   return (
  *     <div ref={containerRef}>
- *       {queries.isSm && <p>Small container</p>}
- *       <MdOrLarger>
- *         <p>Medium or larger container</p>
- *       </MdOrLarger>
+ *       {queries.isSmOrLarger && <p>Small container</p>}
+ *       {queries.isMdOrLarger && <p>Medium or larger container</p>}
  *     </div>
  *   )
  * }
@@ -110,16 +81,15 @@ type ContainerComponents = {
  *
  * @example With custom queries
  * ```tsx
- * const { containerRef, queries, components } = useContainerQueries({
+ * const { containerRef, queries } = useContainerQueries({
  *   compact: '400px',
  *   spacious: '800px',
  * })
- * const { Compact, Spacious } = components
  *
  * return (
  *   <div ref={containerRef}>
- *     <Compact><p>Compact view</p></Compact>
- *     <Spacious><p>Spacious view</p></Spacious>
+ *     {queries.compact && <p>Compact view</p>}
+ *     {queries.spacious && <p>Spacious view</p>}
  *   </div>
  * )
  * ```
@@ -129,46 +99,8 @@ export const useContainerQueries = (
 ): {
   containerRef: React.RefCallback<HTMLElement>
   queries: ContainerQueries
-  components: ContainerComponents
 } => {
-  // SSR support - return safe defaults when window is undefined
-  if (typeof window === 'undefined') {
-    return {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      containerRef: () => {},
-      queries: {
-        isXs: false,
-        isSm: false,
-        isMd: false,
-        isLg: false,
-        isXl: false,
-        is2xl: false,
-        is3xl: false,
-        is4xl: false,
-        is5xl: false,
-        is6xl: false,
-        is7xl: true, // Default to largest for SSR
-      },
-      components: {
-        'XsOnly': () => <></>,
-        'SmOnly': () => <></>,
-        'MdOnly': () => <></>,
-        'LgOnly': () => <></>,
-        'XlOnly': () => <></>,
-        '2xlOnly': () => <></>,
-        '3xlOnly': () => <></>,
-        '4xlOnly': () => <></>,
-        '5xlOnly': () => <></>,
-        '6xlOnly': () => <></>,
-        '7xlOnly': (props: HelperComponentProps) => <>{props.children}</>,
-        'XsOrLarger': (props: HelperComponentProps) => <>{props.children}</>,
-        'SmOrLarger': (props: HelperComponentProps) => <>{props.children}</>,
-        'MdOrLarger': (props: HelperComponentProps) => <>{props.children}</>,
-        'LgOrLarger': (props: HelperComponentProps) => <>{props.children}</>,
-        'XlOrLarger': (props: HelperComponentProps) => <>{props.children}</>,
-      },
-    }
-  }
+  const isClient = typeof window !== 'undefined'
 
   // Parse custom queries
   const customQueriesPx = useMemo(
@@ -197,6 +129,9 @@ export const useContainerQueries = (
   // Callback ref for the container element
   const containerRef = useCallback(
     (node: HTMLElement | null) => {
+      // Skip if SSR
+      if (!isClient) return
+
       // Cleanup previous observer
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect()
@@ -220,7 +155,7 @@ export const useContainerQueries = (
         setContainerWidth(width)
       }
     },
-    [debouncedSetContainerWidth],
+    [debouncedSetContainerWidth, isClient],
   )
 
   // Cleanup on unmount
@@ -236,17 +171,17 @@ export const useContainerQueries = (
   // Calculate breakpoint matches based on container width
   const breakpointMatches = useMemo(
     () => ({
-      isXs: containerWidth >= DEFAULT_BREAKPOINTS.xs,
-      isSm: containerWidth >= DEFAULT_BREAKPOINTS.sm,
-      isMd: containerWidth >= DEFAULT_BREAKPOINTS.md,
-      isLg: containerWidth >= DEFAULT_BREAKPOINTS.lg,
-      isXl: containerWidth >= DEFAULT_BREAKPOINTS.xl,
-      is2xl: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
-      is3xl: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
-      is4xl: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
-      is5xl: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
-      is6xl: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
-      is7xl: containerWidth >= DEFAULT_BREAKPOINTS['7xl'],
+      isXsOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xs,
+      isSmOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.sm,
+      isMdOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.md,
+      isLgOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.lg,
+      isXlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xl,
+      is2xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
+      is3xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
+      is4xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
+      is5xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
+      is6xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
+      is7xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['7xl'],
     }),
     [containerWidth],
   )
@@ -264,68 +199,8 @@ export const useContainerQueries = (
     [containerWidth, customQueriesPx],
   )
 
-  // Helper function to check if container is at exact breakpoint (not larger)
-  const isExactBreakpoint = useCallback(
-    (breakpoint: keyof typeof DEFAULT_BREAKPOINTS): boolean => {
-      const sortedBreakpoints = Object.entries(DEFAULT_BREAKPOINTS).sort(([, a], [, b]) => a - b)
-      const currentIndex = sortedBreakpoints.findIndex(([key]) => key === breakpoint)
-      const nextBreakpoint = sortedBreakpoints[currentIndex + 1]
-
-      const minWidth = DEFAULT_BREAKPOINTS[breakpoint]
-      const maxWidth = nextBreakpoint ? nextBreakpoint[1] : Infinity
-
-      return containerWidth >= minWidth && containerWidth < maxWidth
-    },
-    [containerWidth],
-  )
-
-  // Create helper components for Tailwind breakpoints
-  const components = useMemo(
-    () => ({
-      'XsOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('xs') && props.children}</>,
-      'SmOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('sm') && props.children}</>,
-      'MdOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('md') && props.children}</>,
-      'LgOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('lg') && props.children}</>,
-      'XlOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('xl') && props.children}</>,
-      '2xlOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('2xl') && props.children}</>,
-      '3xlOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('3xl') && props.children}</>,
-      '4xlOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('4xl') && props.children}</>,
-      '5xlOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('5xl') && props.children}</>,
-      '6xlOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('6xl') && props.children}</>,
-      '7xlOnly': (props: HelperComponentProps) => <>{isExactBreakpoint('7xl') && props.children}</>,
-      'XsOrLarger': (props: HelperComponentProps) => (
-        <>{breakpointMatches.isXs && props.children}</>
-      ),
-      'SmOrLarger': (props: HelperComponentProps) => (
-        <>{breakpointMatches.isSm && props.children}</>
-      ),
-      'MdOrLarger': (props: HelperComponentProps) => (
-        <>{breakpointMatches.isMd && props.children}</>
-      ),
-      'LgOrLarger': (props: HelperComponentProps) => (
-        <>{breakpointMatches.isLg && props.children}</>
-      ),
-      'XlOrLarger': (props: HelperComponentProps) => (
-        <>{breakpointMatches.isXl && props.children}</>
-      ),
-      // Custom query components
-      ...Object.keys(customQueriesPx).reduce(
-        (acc, key) => {
-          const componentName = key.charAt(0).toUpperCase() + key.slice(1)
-          acc[componentName] = (props: HelperComponentProps): JSX.Element => (
-            <>{customMatches[key] && props.children}</>
-          )
-          return acc
-        },
-        {} as Record<string, (props: GenericChildrenType) => JSX.Element>,
-      ),
-    }),
-    [breakpointMatches, customMatches, isExactBreakpoint, customQueriesPx],
-  )
-
   return {
     containerRef,
     queries: { ...breakpointMatches, ...customMatches },
-    components,
   }
 }