@pisell/materials 6.7.4 → 6.8.2

package/es/components/PisellProcedure/hooks/useElementSize.js

@@ -0,0 +1,237 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+/**
+ * useElementSize Hook 配置
+ */
+
+/**
+ * 元素尺寸信息
+ */
+
+/**
+ * 元素尺寸计算 Hook（宽度和高度）
+ * 
+ * @description 计算指定元素的宽度和高度，并监听尺寸变化自动更新
+ * 使用 ResizeObserver 和防抖机制优化性能，减少不必要的更新
+ * 
+ * @example
+ * const { width, height } = useElementSize({ 
+ *   selector: '.modal-container',
+ *   defaultWidth: 0,
+ *   defaultHeight: 0
+ * });
+ */
+export var useElementSize = function useElementSize(_ref) {
+  var selector = _ref.selector,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    _ref$defaultWidth = _ref.defaultWidth,
+    defaultWidth = _ref$defaultWidth === void 0 ? 0 : _ref$defaultWidth,
+    _ref$defaultHeight = _ref.defaultHeight,
+    defaultHeight = _ref$defaultHeight === void 0 ? 0 : _ref$defaultHeight,
+    _ref$threshold = _ref.threshold,
+    threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
+    _ref$debounceMs = _ref.debounceMs,
+    debounceMs = _ref$debounceMs === void 0 ? 100 : _ref$debounceMs;
+  var _useState = useState({
+      width: defaultWidth,
+      height: defaultHeight
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var previousSizeRef = useRef({
+    width: defaultWidth,
+    height: defaultHeight
+  });
+  var debounceTimerRef = useRef(null);
+  var resizeObserverRef = useRef(null);
+  var elementRef = useRef(null);
+
+  /**
+   * 计算元素尺寸（带防抖和阈值检查）
+   */
+  var calculateSize = useCallback(function () {
+    if (!enabled || typeof window === 'undefined' || typeof document === 'undefined') {
+      setSize({
+        width: defaultWidth,
+        height: defaultHeight
+      });
+      return;
+    }
+
+    // 如果选择器为空，使用默认尺寸
+    if (!selector || !selector.trim()) {
+      setSize({
+        width: defaultWidth,
+        height: defaultHeight
+      });
+      return;
+    }
+    try {
+      var element = document.querySelector(selector);
+      if (element) {
+        var rect = element.getBoundingClientRect();
+        var newWidth = rect.width;
+        var newHeight = rect.height;
+        var previousSize = previousSizeRef.current;
+
+        // 只有尺寸变化超过阈值时才更新
+        var widthDiff = Math.abs(newWidth - previousSize.width);
+        var heightDiff = Math.abs(newHeight - previousSize.height);
+        if (widthDiff >= threshold || heightDiff >= threshold) {
+          var newSize = {
+            width: newWidth,
+            height: newHeight
+          };
+          previousSizeRef.current = newSize;
+          setSize(newSize);
+        }
+      } else {
+        // 元素不存在时，如果当前尺寸不是默认尺寸，则更新
+        if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
+          var _newSize = {
+            width: defaultWidth,
+            height: defaultHeight
+          };
+          previousSizeRef.current = _newSize;
+          setSize(_newSize);
+        }
+      }
+    } catch (error) {
+      // 选择器无效时，使用默认尺寸
+      console.warn("Invalid selector in useElementSize: ".concat(selector), error);
+      if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
+        var _newSize2 = {
+          width: defaultWidth,
+          height: defaultHeight
+        };
+        previousSizeRef.current = _newSize2;
+        setSize(_newSize2);
+      }
+    }
+  }, [selector, enabled, defaultWidth, defaultHeight, threshold]);
+
+  /**
+   * 防抖版本的 calculateSize
+   */
+  var debouncedCalculateSize = useCallback(function () {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    debounceTimerRef.current = setTimeout(function () {
+      calculateSize();
+    }, debounceMs);
+  }, [calculateSize, debounceMs]);
+
+  // 初始化和监听元素尺寸变化
+  useEffect(function () {
+    if (!enabled || typeof window === 'undefined' || typeof document === 'undefined') {
+      return;
+    }
+
+    // 如果选择器为空，使用默认尺寸
+    if (!selector || !selector.trim()) {
+      setSize({
+        width: defaultWidth,
+        height: defaultHeight
+      });
+      previousSizeRef.current = {
+        width: defaultWidth,
+        height: defaultHeight
+      };
+      return;
+    }
+    var element = null;
+    try {
+      element = document.querySelector(selector);
+    } catch (error) {
+      console.warn("Invalid selector in useElementSize: ".concat(selector), error);
+      setSize({
+        width: defaultWidth,
+        height: defaultHeight
+      });
+      previousSizeRef.current = {
+        width: defaultWidth,
+        height: defaultHeight
+      };
+      return;
+    }
+    if (!element) {
+      setSize({
+        width: defaultWidth,
+        height: defaultHeight
+      });
+      previousSizeRef.current = {
+        width: defaultWidth,
+        height: defaultHeight
+      };
+      return;
+    }
+    elementRef.current = element;
+
+    // 立即同步计算一次初始尺寸（不使用防抖），避免初始渲染时尺寸为0导致的抖动
+    calculateSize();
+
+    // 延迟计算，等待 DOM 完全渲染完成后再更新一次（使用防抖版本）
+    var initialTimer = setTimeout(function () {
+      debouncedCalculateSize();
+    }, 200);
+
+    // 使用 ResizeObserver 监听元素尺寸变化（性能更好，更精确）
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserverRef.current = new ResizeObserver(function () {
+        debouncedCalculateSize();
+      });
+      resizeObserverRef.current.observe(element);
+    } else {
+      // 降级方案：使用 MutationObserver 和 window resize
+      var mutationObserver = new MutationObserver(function () {
+        debouncedCalculateSize();
+      });
+
+      // 只观察目标元素的变化，而不是整个 body
+      mutationObserver.observe(element, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style', 'class']
+      });
+
+      // 监听窗口大小变化
+      var handleResize = function handleResize() {
+        debouncedCalculateSize();
+      };
+      window.addEventListener('resize', handleResize);
+      return function () {
+        clearTimeout(initialTimer);
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+        mutationObserver.disconnect();
+        if (typeof window !== 'undefined') {
+          window.removeEventListener('resize', handleResize);
+        }
+      };
+    }
+
+    // 清理函数
+    return function () {
+      clearTimeout(initialTimer);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      if (resizeObserverRef.current && elementRef.current) {
+        resizeObserverRef.current.unobserve(elementRef.current);
+        resizeObserverRef.current.disconnect();
+      }
+    };
+  }, [selector, enabled, defaultWidth, defaultHeight, calculateSize, debouncedCalculateSize]);
+  return size;
+};

package/es/components/PisellProcedure/hooks/useOverflowActions.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { MenuProps } from 'antd';
+/**
+ * useOverflowActions Hook 配置
+ */
+export interface UseOverflowActionsOptions {
+    /** 操作按钮子元素 */
+    children?: React.ReactNode;
+    /** 按钮间距 */
+    gap?: number;
+    /** More 按钮文案 */
+    moreText?: string;
+}
+/**
+ * useOverflowActions Hook 返回值
+ */
+export interface UseOverflowActionsReturn {
+    /** 容器 ref */
+    containerRef: React.RefObject<HTMLDivElement>;
+    /** 测量容器 ref */
+    measureRef: React.RefObject<HTMLDivElement>;
+    /** More 按钮测量 ref */
+    moreButtonRef: React.RefObject<HTMLDivElement>;
+    /** 左侧插槽 ref（用于测量宽度） */
+    leftSlotRef: React.RefObject<HTMLDivElement>;
+    /** 所有操作项 */
+    actionItems: React.ReactNode[];
+    /** 可见的操作项 */
+    visibleActions: React.ReactNode[];
+    /** 溢出的操作项 */
+    overflowActions: React.ReactNode[];
+    /** 是否有溢出 */
+    hasOverflow: boolean;
+    /** More 菜单项 */
+    moreMenuItems: MenuProps['items'];
+    /** 可用宽度（用于调试） */
+    availableWidth: number;
+}
+/**
+ * 溢出收纳 Hook
+ * @description 处理操作按钮的溢出收纳逻辑，支持左侧自定义内容
+ */
+export declare const useOverflowActions: (options: UseOverflowActionsOptions) => UseOverflowActionsReturn;

package/es/components/PisellProcedure/hooks/useOverflowActions.js

@@ -0,0 +1,297 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Children, isValidElement, cloneElement, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { extractButtonLabel } from "../utils/extractText";
+
+/**
+ * useOverflowActions Hook 配置
+ */
+
+/**
+ * useOverflowActions Hook 返回值
+ */
+
+/**
+ * 溢出收纳 Hook
+ * @description 处理操作按钮的溢出收纳逻辑，支持左侧自定义内容
+ */
+export var useOverflowActions = function useOverflowActions(options) {
+  var children = options.children,
+    _options$gap = options.gap,
+    gap = _options$gap === void 0 ? 16 : _options$gap,
+    _options$moreText = options.moreText,
+    moreText = _options$moreText === void 0 ? 'More' : _options$moreText;
+  var containerRef = useRef(null);
+  var measureRef = useRef(null);
+  var moreButtonRef = useRef(null);
+  var leftSlotRef = useRef(null);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    itemWidths = _useState2[0],
+    setItemWidths = _useState2[1];
+  var _useState3 = useState(80),
+    _useState4 = _slicedToArray(_useState3, 2),
+    moreButtonWidth = _useState4[0],
+    setMoreButtonWidth = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    availableWidth = _useState6[0],
+    setAvailableWidth = _useState6[1];
+
+  /**
+   * 将 children 转换为数组
+   */
+  var actionItems = useMemo(function () {
+    var items = [];
+    Children.forEach(children, function (child, index) {
+      if ( /*#__PURE__*/isValidElement(child)) {
+        var _child$key;
+        items.push( /*#__PURE__*/cloneElement(child, {
+          key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index
+        }));
+      }
+    });
+    return items;
+  }, [children]);
+
+  /**
+   * 测量所有按钮的宽度
+   */
+  var measureWidths = useCallback(function () {
+    if (typeof window === 'undefined' || !measureRef.current || !moreButtonRef.current) return;
+    try {
+      // 测量所有按钮宽度（向上取整）
+      var buttons = measureRef.current.querySelectorAll('[data-measure-item]');
+      var widths = [];
+      buttons.forEach(function (btn) {
+        var rect = btn.getBoundingClientRect();
+        if (rect) {
+          widths.push(Math.ceil(rect.width));
+        }
+      });
+      setItemWidths(widths);
+
+      // 测量 More 按钮宽度（向上取整）
+      var moreBtnRect = moreButtonRef.current.getBoundingClientRect();
+      if (moreBtnRect) {
+        var moreBtnWidth = Math.ceil(moreBtnRect.width);
+        setMoreButtonWidth(moreBtnWidth);
+      }
+    } catch (error) {
+      // 静默处理错误，避免影响渲染
+      console.warn('Failed to measure button widths:', error);
+    }
+  }, []);
+
+  /**
+   * 更新可用宽度
+   * 计算逻辑：容器宽度 - 左侧插槽宽度 - 间距
+   * 
+   * 注意：统一使用 getBoundingClientRect() 来获取宽度，
+   * 因为 offsetWidth 返回 CSS 像素不受缩放影响，
+   * 而 getBoundingClientRect() 返回视觉像素（受缩放影响）。
+   * 混用会导致在页面缩放时计算错误。
+   */
+  var updateAvailableWidth = useCallback(function () {
+    if (!containerRef.current || typeof window === 'undefined') return;
+    var parent = containerRef.current.parentElement;
+    if (!parent) {
+      var containerRect = containerRef.current.getBoundingClientRect();
+      setAvailableWidth(Math.floor(containerRect.width));
+      return;
+    }
+    var parentStyle = window.getComputedStyle(parent);
+    var parentRect = parent.getBoundingClientRect();
+
+    // 计算缩放比例，用于将 CSS 像素值（如 padding）转换为视觉像素
+    // offsetWidth 是 CSS 像素，getBoundingClientRect().width 是视觉像素
+    var scale = parent.offsetWidth > 0 ? parentRect.width / parent.offsetWidth : 1;
+
+    // padding 从 getComputedStyle 获取的是 CSS 像素，需要乘以缩放比例
+    var paddingLeft = (parseFloat(parentStyle.paddingLeft) || 0) * scale;
+    var paddingRight = (parseFloat(parentStyle.paddingRight) || 0) * scale;
+    var parentGap = (parseFloat(parentStyle.gap) || gap) * scale;
+
+    // 计算左侧插槽占用的宽度（getBoundingClientRect 已经是视觉像素）
+    var leftSlotWidth = 0;
+    if (leftSlotRef.current) {
+      leftSlotWidth = Math.ceil(leftSlotRef.current.getBoundingClientRect().width);
+      // 如果左侧有内容，加上间距
+      if (leftSlotWidth > 0) {
+        leftSlotWidth += parentGap;
+      }
+    }
+
+    // 计算其他兄弟元素（如 summaryButton）的宽度
+    var otherSiblingWidth = 0;
+    var siblings = parent.children;
+    for (var i = 0; i < siblings.length; i++) {
+      var sibling = siblings[i];
+      // 排除当前容器和隐藏的测量元素
+      if (sibling !== containerRef.current && sibling !== leftSlotRef.current && !sibling.hasAttribute('aria-hidden')) {
+        var siblingWidth = Math.ceil(sibling.getBoundingClientRect().width);
+        if (siblingWidth > 0) {
+          otherSiblingWidth += siblingWidth + parentGap;
+        }
+      }
+    }
+
+    // 可用宽度 = 父容器宽度（视觉像素） - padding - 左侧插槽 - 其他兄弟元素
+    var totalWidth = parentRect.width - paddingLeft - paddingRight;
+    var width = Math.floor(totalWidth - leftSlotWidth - otherSiblingWidth);
+    setAvailableWidth(Math.max(0, width));
+  }, [gap]);
+
+  /**
+   * 初始化测量
+   */
+  useEffect(function () {
+    var rafId = requestAnimationFrame(function () {
+      measureWidths();
+      updateAvailableWidth();
+    });
+    return function () {
+      return cancelAnimationFrame(rafId);
+    };
+  }, [actionItems, measureWidths, updateAvailableWidth]);
+
+  /**
+   * 监听尺寸变化
+   */
+  useEffect(function () {
+    var _containerRef$current;
+    if (typeof window === 'undefined') return;
+    var handleResize = function handleResize() {
+      measureWidths();
+      updateAvailableWidth();
+    };
+    window.addEventListener('resize', handleResize);
+    var parent = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.parentElement;
+    var resizeObserver = null;
+    if (parent && typeof ResizeObserver !== 'undefined') {
+      try {
+        resizeObserver = new ResizeObserver(function () {
+          measureWidths();
+          updateAvailableWidth();
+        });
+        resizeObserver.observe(parent);
+      } catch (error) {
+        console.warn('Failed to create ResizeObserver:', error);
+      }
+    }
+
+    // 也监听左侧插槽的尺寸变化
+    if (leftSlotRef.current && typeof ResizeObserver !== 'undefined') {
+      try {
+        var leftObserver = new ResizeObserver(function () {
+          return updateAvailableWidth();
+        });
+        leftObserver.observe(leftSlotRef.current);
+        return function () {
+          var _resizeObserver;
+          window.removeEventListener('resize', handleResize);
+          (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || _resizeObserver.disconnect();
+          leftObserver.disconnect();
+        };
+      } catch (error) {
+        console.warn('Failed to create ResizeObserver for leftSlot:', error);
+      }
+    }
+    return function () {
+      var _resizeObserver2;
+      window.removeEventListener('resize', handleResize);
+      (_resizeObserver2 = resizeObserver) === null || _resizeObserver2 === void 0 || _resizeObserver2.disconnect();
+    };
+  }, [measureWidths, updateAvailableWidth]);
+
+  /**
+   * 计算可见项数量
+   * 根据可用宽度计算能显示多少个按钮
+   */
+  var visibleCount = useMemo(function () {
+    if (itemWidths.length === 0 || availableWidth === 0) {
+      return actionItems.length;
+    }
+    var totalItems = itemWidths.length;
+    var totalButtonsWidth = itemWidths.reduce(function (sum, w) {
+      return sum + w;
+    }, 0);
+    var totalGapsWidth = (totalItems - 1) * gap;
+    var allButtonsWidth = totalButtonsWidth + totalGapsWidth;
+
+    // 所有按钮都能放下
+    if (allButtonsWidth <= availableWidth) {
+      return totalItems;
+    }
+
+    // 需要 More 按钮，预留 More 按钮的空间
+    var spaceForButtons = availableWidth - moreButtonWidth - gap;
+    if (spaceForButtons <= 0) {
+      // 空间不足时，不保留任何按钮，全部收纳到 More 菜单
+      return 0;
+    }
+
+    // 从右边开始计算能放下多少个按钮（保留主要操作）
+    var usedWidth = 0;
+    var count = 0;
+    for (var i = totalItems - 1; i >= 0; i--) {
+      var itemWidth = itemWidths[i];
+      var gapWidth = count > 0 ? gap : 0;
+      var requiredWidth = itemWidth + gapWidth;
+      if (usedWidth + requiredWidth <= spaceForButtons) {
+        usedWidth += requiredWidth;
+        count++;
+      } else {
+        break;
+      }
+    }
+
+    // 不强制保留最后一个按钮，空间不足时全部收纳到 More 菜单
+    return count;
+  }, [itemWidths, availableWidth, gap, moreButtonWidth, actionItems.length]);
+
+  // 计算溢出项和可见项
+  var overflowCount = Math.max(0, actionItems.length - visibleCount);
+  var overflowActions = actionItems.slice(0, overflowCount);
+  var visibleActions = actionItems.slice(overflowCount);
+  var hasOverflow = overflowCount > 0;
+
+  /**
+   * 构建 More 菜单项
+   */
+  var moreMenuItems = useMemo(function () {
+    return overflowActions.map(function (action, index) {
+      if (! /*#__PURE__*/isValidElement(action)) return null;
+      var buttonProps = action.props;
+      var label = extractButtonLabel(buttonProps, "\u64CD\u4F5C ".concat(index + 1));
+      var originalOnClick = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick;
+      return {
+        key: "overflow-".concat(index),
+        label: label,
+        onClick: originalOnClick ? function () {
+          return originalOnClick({});
+        } : undefined,
+        disabled: (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled) || (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.loading),
+        danger: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.danger,
+        icon: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.icon,
+        title: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title
+      };
+    }).filter(Boolean);
+  }, [overflowActions]);
+  return {
+    containerRef: containerRef,
+    measureRef: measureRef,
+    moreButtonRef: moreButtonRef,
+    leftSlotRef: leftSlotRef,
+    actionItems: actionItems,
+    visibleActions: visibleActions,
+    overflowActions: overflowActions,
+    hasOverflow: hasOverflow,
+    moreMenuItems: moreMenuItems,
+    availableWidth: availableWidth
+  };
+};

package/es/components/PisellProcedure/hooks/useResponsiveClass.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 使用响应式类名的 Hook
+ *
+ * @description 根据容器宽度计算响应式类名，延迟应用以避免宽度抖动
+ */
+export declare const useResponsiveClass: (containerWidth: number) => string;