@hanwenbo/x-taro-ui 0.0.1

package/es/components/dimensions/dimensions.js

@@ -0,0 +1,412 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { useTokens } from "../../theme";
+import { classNames } from "../../utils";
+import { useConfigProvider } from "../configProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_BREAKPOINTS = {
+  sm: 320,
+  md: 375,
+  lg: 414,
+  xl: 768
+};
+var EMPTY_ELEMENT_DIMENSIONS = {
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0
+};
+function renderNode(content, textStyle) {
+  if (typeof content === 'string' || typeof content === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      children: content
+    });
+  }
+  return content;
+}
+function readSystemInfo() {
+  try {
+    var _ref, _windowInfo$windowWid, _ref2, _windowInfo$windowHei, _ref3, _systemInfo$screenWid, _ref4, _systemInfo$screenHei, _systemInfo$safeArea$, _systemInfo$safeArea, _systemInfo$pixelRati, _ref5, _systemInfo$platform, _systemInfo$statusBar, _systemInfo$safeArea$2, _systemInfo$safeArea2;
+    var systemInfo = typeof Taro.getSystemInfoSync === 'function' ? Taro.getSystemInfoSync() : {};
+    var runtime = Taro;
+    var windowInfo = typeof runtime.getWindowInfo === 'function' ? runtime.getWindowInfo() : systemInfo;
+    var windowWidth = Number((_ref = (_windowInfo$windowWid = windowInfo.windowWidth) !== null && _windowInfo$windowWid !== void 0 ? _windowInfo$windowWid : systemInfo.windowWidth) !== null && _ref !== void 0 ? _ref : 0);
+    var windowHeight = Number((_ref2 = (_windowInfo$windowHei = windowInfo.windowHeight) !== null && _windowInfo$windowHei !== void 0 ? _windowInfo$windowHei : systemInfo.windowHeight) !== null && _ref2 !== void 0 ? _ref2 : 0);
+    var screenWidth = Number((_ref3 = (_systemInfo$screenWid = systemInfo.screenWidth) !== null && _systemInfo$screenWid !== void 0 ? _systemInfo$screenWid : windowInfo.screenWidth) !== null && _ref3 !== void 0 ? _ref3 : windowWidth);
+    var screenHeight = Number((_ref4 = (_systemInfo$screenHei = systemInfo.screenHeight) !== null && _systemInfo$screenHei !== void 0 ? _systemInfo$screenHei : windowInfo.screenHeight) !== null && _ref4 !== void 0 ? _ref4 : windowHeight);
+    var safeAreaBottom = Number((_systemInfo$safeArea$ = (_systemInfo$safeArea = systemInfo.safeArea) === null || _systemInfo$safeArea === void 0 ? void 0 : _systemInfo$safeArea.bottom) !== null && _systemInfo$safeArea$ !== void 0 ? _systemInfo$safeArea$ : 0);
+    return {
+      windowWidth: windowWidth,
+      windowHeight: windowHeight,
+      screenWidth: screenWidth,
+      screenHeight: screenHeight,
+      pixelRatio: Number((_systemInfo$pixelRati = systemInfo.pixelRatio) !== null && _systemInfo$pixelRati !== void 0 ? _systemInfo$pixelRati : 1) || 1,
+      platform: String((_ref5 = (_systemInfo$platform = systemInfo.platform) !== null && _systemInfo$platform !== void 0 ? _systemInfo$platform : systemInfo.system) !== null && _ref5 !== void 0 ? _ref5 : 'unknown'),
+      statusBarHeight: Number((_systemInfo$statusBar = systemInfo.statusBarHeight) !== null && _systemInfo$statusBar !== void 0 ? _systemInfo$statusBar : 0),
+      safeAreaTop: Number((_systemInfo$safeArea$2 = (_systemInfo$safeArea2 = systemInfo.safeArea) === null || _systemInfo$safeArea2 === void 0 ? void 0 : _systemInfo$safeArea2.top) !== null && _systemInfo$safeArea$2 !== void 0 ? _systemInfo$safeArea$2 : 0),
+      safeAreaBottom: safeAreaBottom > 0 && screenHeight > 0 ? Math.max(0, screenHeight - safeAreaBottom) : 0
+    };
+  } catch (_unused) {
+    return {
+      windowWidth: 0,
+      windowHeight: 0,
+      screenWidth: 0,
+      screenHeight: 0,
+      pixelRatio: 1,
+      platform: 'unknown',
+      statusBarHeight: 0,
+      safeAreaTop: 0,
+      safeAreaBottom: 0
+    };
+  }
+}
+function subscribeWindowResize(listener) {
+  var runtime = Taro;
+  if (typeof runtime.onWindowResize !== 'function') return undefined;
+  runtime.onWindowResize(listener);
+  return function () {
+    var _runtime$offWindowRes;
+    return (_runtime$offWindowRes = runtime.offWindowResize) === null || _runtime$offWindowRes === void 0 ? void 0 : _runtime$offWindowRes.call(runtime, listener);
+  };
+}
+function getWindowDimensions() {
+  var snapshot = readSystemInfo();
+  return {
+    width: snapshot.windowWidth,
+    height: snapshot.windowHeight,
+    scale: snapshot.pixelRatio || 1,
+    fontScale: 1
+  };
+}
+function getScreenDimensions() {
+  var snapshot = readSystemInfo();
+  return {
+    width: snapshot.screenWidth,
+    height: snapshot.screenHeight,
+    scale: snapshot.pixelRatio || 1,
+    fontScale: 1
+  };
+}
+export function useWindowDimensions() {
+  var _useState = useState(function () {
+      var snapshot = readSystemInfo();
+      return {
+        width: snapshot.windowWidth,
+        height: snapshot.windowHeight
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  useEffect(function () {
+    return subscribeWindowResize(function () {
+      var snapshot = readSystemInfo();
+      setDimensions({
+        width: snapshot.windowWidth,
+        height: snapshot.windowHeight
+      });
+    });
+  }, []);
+  return dimensions;
+}
+export function useScreenDimensions() {
+  var _useState3 = useState(function () {
+      var snapshot = readSystemInfo();
+      return {
+        width: snapshot.screenWidth,
+        height: snapshot.screenHeight,
+        availWidth: snapshot.windowWidth,
+        availHeight: snapshot.windowHeight
+      };
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dimensions = _useState4[0],
+    setDimensions = _useState4[1];
+  useEffect(function () {
+    return subscribeWindowResize(function () {
+      var snapshot = readSystemInfo();
+      setDimensions({
+        width: snapshot.screenWidth,
+        height: snapshot.screenHeight,
+        availWidth: snapshot.windowWidth,
+        availHeight: snapshot.windowHeight
+      });
+    });
+  }, []);
+  return dimensions;
+}
+export function useElementDimensions(selector) {
+  var elementRef = useRef(null);
+  var _useState5 = useState(EMPTY_ELEMENT_DIMENSIONS),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dimensions = _useState6[0],
+    setDimensions = _useState6[1];
+  var updateDimensions = useCallback(function () {
+    var _elementRef$current, _elementRef$current$g;
+    var rect = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || (_elementRef$current$g = _elementRef$current.getBoundingClientRect) === null || _elementRef$current$g === void 0 ? void 0 : _elementRef$current$g.call(_elementRef$current);
+    if (rect) {
+      setDimensions({
+        width: Number(rect.width) || 0,
+        height: Number(rect.height) || 0,
+        x: Number(rect.left) || 0,
+        y: Number(rect.top) || 0
+      });
+      return;
+    }
+    if (!selector || typeof Taro.createSelectorQuery !== 'function') return;
+    Taro.createSelectorQuery().select(selector).boundingClientRect().exec(function (result) {
+      var _measured$left, _measured$top;
+      var measured = result === null || result === void 0 ? void 0 : result[0];
+      if (!measured) return;
+      setDimensions({
+        width: Number(measured.width) || 0,
+        height: Number(measured.height) || 0,
+        x: Number((_measured$left = measured.left) !== null && _measured$left !== void 0 ? _measured$left : measured.x) || 0,
+        y: Number((_measured$top = measured.top) !== null && _measured$top !== void 0 ? _measured$top : measured.y) || 0
+      });
+    });
+  }, [selector]);
+  useEffect(function () {
+    updateDimensions();
+    return subscribeWindowResize(updateDimensions);
+  }, [updateDimensions]);
+  return {
+    elementRef: elementRef,
+    dimensions: dimensions,
+    updateDimensions: updateDimensions
+  };
+}
+function fallbackMediaMatch(query, width) {
+  var minWidth = query.match(/min-width\s*:\s*(\d+(?:\.\d+)?)px/i);
+  var maxWidth = query.match(/max-width\s*:\s*(\d+(?:\.\d+)?)px/i);
+  if (minWidth && width < Number(minWidth[1])) return false;
+  if (maxWidth && width > Number(maxWidth[1])) return false;
+  return Boolean(minWidth || maxWidth);
+}
+function evaluateMediaQuery(query) {
+  var runtime = globalThis;
+  if (typeof runtime.matchMedia === 'function') {
+    return runtime.matchMedia.call(globalThis, query).matches;
+  }
+  return fallbackMediaMatch(query, readSystemInfo().windowWidth);
+}
+export function useMediaQuery(query) {
+  var _useState7 = useState(function () {
+      return evaluateMediaQuery(query);
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    matches = _useState8[0],
+    setMatches = _useState8[1];
+  useEffect(function () {
+    var _runtime$matchMedia;
+    var runtime = globalThis;
+    var mediaQuery = (_runtime$matchMedia = runtime.matchMedia) === null || _runtime$matchMedia === void 0 ? void 0 : _runtime$matchMedia.call(globalThis, query);
+    if (mediaQuery) {
+      var _mediaQuery$addListen;
+      var handleChange = function handleChange(event) {
+        return setMatches(event.matches);
+      };
+      setMatches(mediaQuery.matches);
+      if (mediaQuery.addEventListener) {
+        mediaQuery.addEventListener('change', handleChange);
+        return function () {
+          var _mediaQuery$removeEve;
+          return (_mediaQuery$removeEve = mediaQuery.removeEventListener) === null || _mediaQuery$removeEve === void 0 ? void 0 : _mediaQuery$removeEve.call(mediaQuery, 'change', handleChange);
+        };
+      }
+      (_mediaQuery$addListen = mediaQuery.addListener) === null || _mediaQuery$addListen === void 0 || _mediaQuery$addListen.call(mediaQuery, handleChange);
+      return function () {
+        var _mediaQuery$removeLis;
+        return (_mediaQuery$removeLis = mediaQuery.removeListener) === null || _mediaQuery$removeLis === void 0 ? void 0 : _mediaQuery$removeLis.call(mediaQuery, handleChange);
+      };
+    }
+    setMatches(evaluateMediaQuery(query));
+    return subscribeWindowResize(function () {
+      return setMatches(evaluateMediaQuery(query));
+    });
+  }, [query]);
+  return matches;
+}
+export function useBreakpoint() {
+  var isMobile = useMediaQuery('(max-width: 640px)');
+  var isTablet = useMediaQuery('(min-width: 641px) and (max-width: 1024px)');
+  var isDesktop = useMediaQuery('(min-width: 1025px)');
+  return {
+    isMobile: isMobile,
+    isTablet: isTablet,
+    isDesktop: isDesktop,
+    breakpoint: isMobile ? 'mobile' : isTablet ? 'tablet' : 'desktop'
+  };
+}
+var DimensionsPanel = function DimensionsPanel(_ref6) {
+  var title = _ref6.title,
+    _ref6$data = _ref6.data,
+    data = _ref6$data === void 0 ? [] : _ref6$data,
+    _ref6$breakpoints = _ref6.breakpoints,
+    breakpoints = _ref6$breakpoints === void 0 ? DEFAULT_BREAKPOINTS : _ref6$breakpoints,
+    _ref6$columns = _ref6.columns,
+    columns = _ref6$columns === void 0 ? 2 : _ref6$columns,
+    _ref6$compact = _ref6.compact,
+    compact = _ref6$compact === void 0 ? false : _ref6$compact,
+    _ref6$showWindow = _ref6.showWindow,
+    showWindow = _ref6$showWindow === void 0 ? true : _ref6$showWindow,
+    _ref6$showScreen = _ref6.showScreen,
+    showScreen = _ref6$showScreen === void 0 ? true : _ref6$showScreen,
+    _ref6$showPlatform = _ref6.showPlatform,
+    showPlatform = _ref6$showPlatform === void 0 ? true : _ref6$showPlatform,
+    _ref6$showPixelRatio = _ref6.showPixelRatio,
+    showPixelRatio = _ref6$showPixelRatio === void 0 ? true : _ref6$showPixelRatio,
+    _ref6$showSafeArea = _ref6.showSafeArea,
+    showSafeArea = _ref6$showSafeArea === void 0 ? false : _ref6$showSafeArea,
+    onSnapshot = _ref6.onSnapshot,
+    children = _ref6.children,
+    className = _ref6.className,
+    style = _ref6.style;
+  var config = useConfigProvider();
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    radius = _useTokens.radius;
+  var _useState9 = useState(readSystemInfo),
+    _useState10 = _slicedToArray(_useState9, 2),
+    snapshot = _useState10[0],
+    setSnapshot = _useState10[1];
+  var snapshotHandlerRef = useRef(onSnapshot);
+  snapshotHandlerRef.current = onSnapshot;
+  useEffect(function () {
+    return subscribeWindowResize(function () {
+      setSnapshot(readSystemInfo());
+    });
+  }, []);
+  useEffect(function () {
+    var _snapshotHandlerRef$c;
+    (_snapshotHandlerRef$c = snapshotHandlerRef.current) === null || _snapshotHandlerRef$c === void 0 || _snapshotHandlerRef$c.call(snapshotHandlerRef, snapshot);
+  }, [snapshot]);
+  var activeBreakpoint = useMemo(function () {
+    var entries = Object.entries(breakpoints).sort(function (first, second) {
+      return first[1] - second[1];
+    });
+    var matched = entries.filter(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+        width = _ref8[1];
+      return snapshot.windowWidth >= width;
+    }).pop();
+    return matched ? "".concat(matched[0], " (").concat(matched[1], "px)") : '--';
+  }, [breakpoints, snapshot.windowWidth]);
+  var metrics = [].concat(_toConsumableArray(showWindow ? [{
+    label: 'Window',
+    value: "".concat(snapshot.windowWidth, " x ").concat(snapshot.windowHeight),
+    description: '当前可用视口'
+  }] : []), _toConsumableArray(showScreen ? [{
+    label: 'Screen',
+    value: "".concat(snapshot.screenWidth, " x ").concat(snapshot.screenHeight),
+    description: '设备屏幕尺寸'
+  }] : []), _toConsumableArray(showPlatform ? [{
+    label: 'Platform',
+    value: snapshot.platform,
+    description: "Breakpoint ".concat(activeBreakpoint)
+  }] : []), _toConsumableArray(showPixelRatio ? [{
+    label: 'Pixel Ratio',
+    value: snapshot.pixelRatio || '--',
+    description: '像素密度'
+  }] : []), _toConsumableArray(showSafeArea ? [{
+    label: 'Safe Area',
+    value: "".concat(snapshot.safeAreaTop, " / ").concat(snapshot.safeAreaBottom),
+    description: '上 / 下安全区'
+  }, {
+    label: 'Status Bar',
+    value: snapshot.statusBarHeight || '--',
+    description: '状态栏高度'
+  }] : []), _toConsumableArray(data));
+  return /*#__PURE__*/_jsxs(View, {
+    className: classNames("".concat(config.prefixCls, "-dimensions"), className),
+    style: _objectSpread({
+      display: 'flex',
+      flexDirection: 'column',
+      gap: compact ? 12 : 16,
+      padding: compact ? 20 : 24,
+      borderRadius: radius.xl,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: colors.border,
+      backgroundColor: colors.card
+    }, style),
+    children: [title !== undefined && title !== null ? renderNode(title, {
+      fontSize: 16,
+      fontWeight: 600,
+      color: colors.foreground
+    }) : null, /*#__PURE__*/_jsx(View, {
+      className: "".concat(config.prefixCls, "-dimensions__grid"),
+      style: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginLeft: compact ? -4 : -6,
+        marginRight: compact ? -4 : -6
+      },
+      children: metrics.map(function (metric, index) {
+        return /*#__PURE__*/_jsx(View, {
+          className: "".concat(config.prefixCls, "-dimensions__metric"),
+          style: {
+            width: columns === 1 ? '100%' : '50%',
+            minWidth: 0,
+            boxSizing: 'border-box',
+            padding: compact ? 4 : 6
+          },
+          children: /*#__PURE__*/_jsxs(View, {
+            style: {
+              boxSizing: 'border-box',
+              minHeight: compact ? 72 : 86,
+              padding: compact ? 12 : 14,
+              borderRadius: radius.xl,
+              backgroundColor: colors.muted,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 6
+            },
+            children: [renderNode(metric.label, {
+              fontSize: 12,
+              color: colors['muted-foreground']
+            }), renderNode(metric.value, {
+              fontSize: 18,
+              fontWeight: 600,
+              color: colors.foreground,
+              wordBreak: 'break-word'
+            }), metric.description ? renderNode(metric.description, {
+              fontSize: 12,
+              lineHeight: 1.5,
+              color: colors['muted-foreground']
+            }) : null]
+          })
+        }, index);
+      })
+    }), children]
+  });
+};
+DimensionsPanel.displayName = 'Dimensions';
+export var Dimensions = Object.assign(DimensionsPanel, {
+  getWindowDimensions: getWindowDimensions,
+  getScreenDimensions: getScreenDimensions,
+  set: function set(_dimensions) {
+    console.warn('Dimensions.set is not supported in Taro runtime');
+  }
+});
+export default Dimensions;

package/es/components/dimensions/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { Dimensions, useWindowDimensions, useElementDimensions, useScreenDimensions, useMediaQuery, useBreakpoint } from './dimensions';
+export { default } from './dimensions';
+//# sourceMappingURL=index.d.ts.map

package/es/components/dimensions/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { Dimensions, useWindowDimensions, useElementDimensions, useScreenDimensions, useMediaQuery, useBreakpoint } from "./dimensions";
+export { default } from "./dimensions";

package/es/components/dimensions/types.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Dimensions Component Types
+ *
+ * @description
+ * Design system aligned dimensions component types
+ */
+import { ReactNode } from 'react';
+export interface DimensionsMetric {
+    /** Metric label */
+    label: ReactNode;
+    /** Metric value */
+    value: ReactNode;
+    /** Optional helper text */
+    description?: ReactNode;
+}
+export interface DimensionsSnapshot {
+    windowWidth: number;
+    windowHeight: number;
+    screenWidth: number;
+    screenHeight: number;
+    pixelRatio: number;
+    platform: string;
+    statusBarHeight: number;
+    safeAreaTop: number;
+    safeAreaBottom: number;
+}
+export interface WindowDimensionsValue {
+    width: number;
+    height: number;
+}
+export interface ScreenDimensionsValue {
+    width: number;
+    height: number;
+    availWidth: number;
+    availHeight: number;
+}
+export interface ElementDimensionsValue {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}
+export interface NativeDimensionsValue {
+    width: number;
+    height: number;
+    scale: number;
+    fontScale: number;
+}
+export interface BreakpointValue {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    breakpoint: 'mobile' | 'tablet' | 'desktop';
+}
+export interface DimensionsProps {
+    /** Section heading */
+    title?: ReactNode;
+    /** Additional metrics to render */
+    data?: DimensionsMetric[];
+    /** Breakpoint map */
+    breakpoints?: Record<string, number>;
+    /** Display layout columns */
+    columns?: 1 | 2;
+    /** Compact spacing mode */
+    compact?: boolean;
+    /** Show window metrics */
+    showWindow?: boolean;
+    /** Show screen metrics */
+    showScreen?: boolean;
+    /** Show platform metrics */
+    showPlatform?: boolean;
+    /** Show pixel density */
+    showPixelRatio?: boolean;
+    /** Show safe-area metrics */
+    showSafeArea?: boolean;
+    /** Snapshot callback after mount */
+    onSnapshot?: (snapshot: DimensionsSnapshot) => void;
+    /** Component children */
+    children?: ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/dimensions/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/divider/divider.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Divider Component
+ */
+import React from 'react';
+import type { DividerProps } from './types';
+export declare const Divider: React.FC<DividerProps>;
+export default Divider;
+//# sourceMappingURL=divider.d.ts.map

package/es/components/divider/divider.js

@@ -0,0 +1,149 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Divider Component
+ */
+
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import { classNames } from "../../utils";
+import { useTokens } from "../../theme";
+import { useConfigProvider } from "../configProvider";
+import { useDividerStyle, useDividerTextStyle } from "./tokens";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MOBILE_ROOT_REM_SCALE = 14 / 16;
+export var Divider = function Divider(_ref) {
+  var _ref2;
+  var _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+    direction = _ref.direction,
+    type = _ref.type,
+    _ref$textPosition = _ref.textPosition,
+    textPosition = _ref$textPosition === void 0 ? 'center' : _ref$textPosition,
+    position = _ref.position,
+    _ref$dashed = _ref.dashed,
+    dashed = _ref$dashed === void 0 ? false : _ref$dashed,
+    color = _ref.color,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  var config = useConfigProvider();
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors;
+  var resolvedOrientation = (_ref2 = type !== null && type !== void 0 ? type : direction) !== null && _ref2 !== void 0 ? _ref2 : orientation;
+  var resolvedTextPosition = position !== null && position !== void 0 ? position : textPosition;
+  var dividerStyle = useDividerStyle(resolvedOrientation, dashed, color);
+  var textStyles = useDividerTextStyle(resolvedTextPosition, dashed, color);
+  var isHorizontal = resolvedOrientation === 'horizontal';
+
+  // Without children - simple line
+  var hasContent = children !== undefined && children !== null && children !== false;
+  if (!hasContent) {
+    return /*#__PURE__*/_jsx(View, {
+      role: "separator",
+      "aria-orientation": resolvedOrientation,
+      "data-slot": "divider",
+      className: classNames("".concat(config.prefixCls, "-divider"), "".concat(config.prefixCls, "-divider--").concat(resolvedOrientation), dashed && "".concat(config.prefixCls, "-divider--dashed"), className),
+      style: _objectSpread(_objectSpread(_objectSpread({}, isHorizontal ? {
+        marginTop: 16 * MOBILE_ROOT_REM_SCALE,
+        marginBottom: 16 * MOBILE_ROOT_REM_SCALE
+      } : {
+        marginLeft: 8 * MOBILE_ROOT_REM_SCALE,
+        marginRight: 8 * MOBILE_ROOT_REM_SCALE,
+        alignSelf: 'stretch'
+      }), dividerStyle), style)
+    });
+  }
+
+  // With children - text divider
+  if (isHorizontal) {
+    return /*#__PURE__*/_jsxs(View, {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      "data-slot": "divider",
+      className: classNames("".concat(config.prefixCls, "-divider"), "".concat(config.prefixCls, "-divider--with-text"), "".concat(config.prefixCls, "-divider--text-").concat(resolvedTextPosition), className),
+      style: _objectSpread({
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        marginTop: 16 * MOBILE_ROOT_REM_SCALE,
+        marginBottom: 16 * MOBILE_ROOT_REM_SCALE
+      }, style),
+      children: [/*#__PURE__*/_jsx(View, {
+        "data-slot": "divider-line-left",
+        className: "".concat(config.prefixCls, "-divider__line ").concat(config.prefixCls, "-divider__line--left"),
+        style: textStyles.before
+      }), typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/_jsx(Text, {
+        "data-slot": "divider-text",
+        className: "".concat(config.prefixCls, "-divider__text"),
+        style: textStyles.text,
+        children: children
+      }) : /*#__PURE__*/_jsx(View, {
+        "data-slot": "divider-text",
+        className: "".concat(config.prefixCls, "-divider__text"),
+        style: textStyles.text,
+        children: children
+      }), /*#__PURE__*/_jsx(View, {
+        "data-slot": "divider-line-right",
+        className: "".concat(config.prefixCls, "-divider__line ").concat(config.prefixCls, "-divider__line--right"),
+        style: textStyles.after
+      })]
+    });
+  }
+
+  // Vertical with children - just show children
+  return /*#__PURE__*/_jsxs(View, {
+    role: "separator",
+    "aria-orientation": "vertical",
+    "data-slot": "divider",
+    className: classNames("".concat(config.prefixCls, "-divider"), "".concat(config.prefixCls, "-divider--vertical"), className),
+    style: _objectSpread({
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      height: '100%',
+      marginLeft: 8 * MOBILE_ROOT_REM_SCALE,
+      marginRight: 8 * MOBILE_ROOT_REM_SCALE
+    }, style),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        width: 0,
+        borderLeftWidth: dashed ? 2 : 1,
+        borderLeftStyle: dashed ? 'dashed' : 'solid',
+        borderLeftColor: dividerStyle.borderLeftColor
+      }
+    }), typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/_jsx(Text, {
+      "data-slot": "divider-text",
+      className: "".concat(config.prefixCls, "-divider__text"),
+      style: {
+        padding: "".concat(4 * MOBILE_ROOT_REM_SCALE, "px 0"),
+        fontSize: 12,
+        lineHeight: '18px',
+        color: colors['muted-foreground']
+      },
+      children: children
+    }) : /*#__PURE__*/_jsx(View, {
+      "data-slot": "divider-text",
+      className: "".concat(config.prefixCls, "-divider__text"),
+      style: {
+        padding: "".concat(4 * MOBILE_ROOT_REM_SCALE, "px 0")
+      },
+      children: children
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        width: 0,
+        borderLeftWidth: dashed ? 2 : 1,
+        borderLeftStyle: dashed ? 'dashed' : 'solid',
+        borderLeftColor: dividerStyle.borderLeftColor
+      }
+    })]
+  });
+};
+export default Divider;

package/es/components/divider/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Divider Component Export
+ */
+export { Divider } from './divider';
+export type { DividerProps, DividerOrientation, DividerTextPosition } from './types';
+export { useDividerColors, useDividerStyle, useDividerTextStyle } from './tokens';
+//# sourceMappingURL=index.d.ts.map