@hanwenbo/x-taro-ui 0.0.1

package/lib/components/dimensions/dimensions.js

@@ -0,0 +1,424 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dimensions/dimensions.tsx
+var dimensions_exports = {};
+__export(dimensions_exports, {
+  Dimensions: () => Dimensions,
+  default: () => dimensions_default,
+  useBreakpoint: () => useBreakpoint,
+  useElementDimensions: () => useElementDimensions,
+  useMediaQuery: () => useMediaQuery,
+  useScreenDimensions: () => useScreenDimensions,
+  useWindowDimensions: () => useWindowDimensions
+});
+module.exports = __toCommonJS(dimensions_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_taro = __toESM(require("@tarojs/taro"));
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_configProvider = require("../configProvider");
+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__ */ import_react.default.createElement(import_components.Text, { style: textStyle }, content);
+  }
+  return content;
+}
+function readSystemInfo() {
+  var _a, _b;
+  try {
+    const systemInfo = typeof import_taro.default.getSystemInfoSync === "function" ? import_taro.default.getSystemInfoSync() : {};
+    const runtime = import_taro.default;
+    const windowInfo = typeof runtime.getWindowInfo === "function" ? runtime.getWindowInfo() : systemInfo;
+    const windowWidth = Number(windowInfo.windowWidth ?? systemInfo.windowWidth ?? 0);
+    const windowHeight = Number(windowInfo.windowHeight ?? systemInfo.windowHeight ?? 0);
+    const screenWidth = Number(systemInfo.screenWidth ?? windowInfo.screenWidth ?? windowWidth);
+    const screenHeight = Number(systemInfo.screenHeight ?? windowInfo.screenHeight ?? windowHeight);
+    const safeAreaBottom = Number(((_a = systemInfo.safeArea) == null ? void 0 : _a.bottom) ?? 0);
+    return {
+      windowWidth,
+      windowHeight,
+      screenWidth,
+      screenHeight,
+      pixelRatio: Number(systemInfo.pixelRatio ?? 1) || 1,
+      platform: String(systemInfo.platform ?? systemInfo.system ?? "unknown"),
+      statusBarHeight: Number(systemInfo.statusBarHeight ?? 0),
+      safeAreaTop: Number(((_b = systemInfo.safeArea) == null ? void 0 : _b.top) ?? 0),
+      safeAreaBottom: safeAreaBottom > 0 && screenHeight > 0 ? Math.max(0, screenHeight - safeAreaBottom) : 0
+    };
+  } catch {
+    return {
+      windowWidth: 0,
+      windowHeight: 0,
+      screenWidth: 0,
+      screenHeight: 0,
+      pixelRatio: 1,
+      platform: "unknown",
+      statusBarHeight: 0,
+      safeAreaTop: 0,
+      safeAreaBottom: 0
+    };
+  }
+}
+function subscribeWindowResize(listener) {
+  const runtime = import_taro.default;
+  if (typeof runtime.onWindowResize !== "function") return void 0;
+  runtime.onWindowResize(listener);
+  return () => {
+    var _a;
+    return (_a = runtime.offWindowResize) == null ? void 0 : _a.call(runtime, listener);
+  };
+}
+function getWindowDimensions() {
+  const snapshot = readSystemInfo();
+  return {
+    width: snapshot.windowWidth,
+    height: snapshot.windowHeight,
+    scale: snapshot.pixelRatio || 1,
+    fontScale: 1
+  };
+}
+function getScreenDimensions() {
+  const snapshot = readSystemInfo();
+  return {
+    width: snapshot.screenWidth,
+    height: snapshot.screenHeight,
+    scale: snapshot.pixelRatio || 1,
+    fontScale: 1
+  };
+}
+function useWindowDimensions() {
+  const [dimensions, setDimensions] = (0, import_react.useState)(() => {
+    const snapshot = readSystemInfo();
+    return { width: snapshot.windowWidth, height: snapshot.windowHeight };
+  });
+  (0, import_react.useEffect)(
+    () => subscribeWindowResize(() => {
+      const snapshot = readSystemInfo();
+      setDimensions({ width: snapshot.windowWidth, height: snapshot.windowHeight });
+    }),
+    []
+  );
+  return dimensions;
+}
+function useScreenDimensions() {
+  const [dimensions, setDimensions] = (0, import_react.useState)(() => {
+    const snapshot = readSystemInfo();
+    return {
+      width: snapshot.screenWidth,
+      height: snapshot.screenHeight,
+      availWidth: snapshot.windowWidth,
+      availHeight: snapshot.windowHeight
+    };
+  });
+  (0, import_react.useEffect)(
+    () => subscribeWindowResize(() => {
+      const snapshot = readSystemInfo();
+      setDimensions({
+        width: snapshot.screenWidth,
+        height: snapshot.screenHeight,
+        availWidth: snapshot.windowWidth,
+        availHeight: snapshot.windowHeight
+      });
+    }),
+    []
+  );
+  return dimensions;
+}
+function useElementDimensions(selector) {
+  const elementRef = (0, import_react.useRef)(null);
+  const [dimensions, setDimensions] = (0, import_react.useState)(EMPTY_ELEMENT_DIMENSIONS);
+  const updateDimensions = (0, import_react.useCallback)(() => {
+    var _a, _b;
+    const rect = (_b = (_a = elementRef.current) == null ? void 0 : _a.getBoundingClientRect) == null ? void 0 : _b.call(_a);
+    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 import_taro.default.createSelectorQuery !== "function") return;
+    import_taro.default.createSelectorQuery().select(selector).boundingClientRect().exec((result) => {
+      const measured = result == null ? void 0 : result[0];
+      if (!measured) return;
+      setDimensions({
+        width: Number(measured.width) || 0,
+        height: Number(measured.height) || 0,
+        x: Number(measured.left ?? measured.x) || 0,
+        y: Number(measured.top ?? measured.y) || 0
+      });
+    });
+  }, [selector]);
+  (0, import_react.useEffect)(() => {
+    updateDimensions();
+    return subscribeWindowResize(updateDimensions);
+  }, [updateDimensions]);
+  return { elementRef, dimensions, updateDimensions };
+}
+function fallbackMediaMatch(query, width) {
+  const minWidth = query.match(/min-width\s*:\s*(\d+(?:\.\d+)?)px/i);
+  const 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) {
+  const runtime = globalThis;
+  if (typeof runtime.matchMedia === "function") {
+    return runtime.matchMedia.call(globalThis, query).matches;
+  }
+  return fallbackMediaMatch(query, readSystemInfo().windowWidth);
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = (0, import_react.useState)(() => evaluateMediaQuery(query));
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    const runtime = globalThis;
+    const mediaQuery = (_a = runtime.matchMedia) == null ? void 0 : _a.call(globalThis, query);
+    if (mediaQuery) {
+      const handleChange = (event) => setMatches(event.matches);
+      setMatches(mediaQuery.matches);
+      if (mediaQuery.addEventListener) {
+        mediaQuery.addEventListener("change", handleChange);
+        return () => {
+          var _a2;
+          return (_a2 = mediaQuery.removeEventListener) == null ? void 0 : _a2.call(mediaQuery, "change", handleChange);
+        };
+      }
+      (_b = mediaQuery.addListener) == null ? void 0 : _b.call(mediaQuery, handleChange);
+      return () => {
+        var _a2;
+        return (_a2 = mediaQuery.removeListener) == null ? void 0 : _a2.call(mediaQuery, handleChange);
+      };
+    }
+    setMatches(evaluateMediaQuery(query));
+    return subscribeWindowResize(() => setMatches(evaluateMediaQuery(query)));
+  }, [query]);
+  return matches;
+}
+function useBreakpoint() {
+  const isMobile = useMediaQuery("(max-width: 640px)");
+  const isTablet = useMediaQuery("(min-width: 641px) and (max-width: 1024px)");
+  const isDesktop = useMediaQuery("(min-width: 1025px)");
+  return {
+    isMobile,
+    isTablet,
+    isDesktop,
+    breakpoint: isMobile ? "mobile" : isTablet ? "tablet" : "desktop"
+  };
+}
+var DimensionsPanel = ({
+  title,
+  data = [],
+  breakpoints = DEFAULT_BREAKPOINTS,
+  columns = 2,
+  compact = false,
+  showWindow = true,
+  showScreen = true,
+  showPlatform = true,
+  showPixelRatio = true,
+  showSafeArea = false,
+  onSnapshot,
+  children,
+  className,
+  style
+}) => {
+  const config = (0, import_configProvider.useConfigProvider)();
+  const { colors, radius } = (0, import_theme.useTokens)();
+  const [snapshot, setSnapshot] = (0, import_react.useState)(readSystemInfo);
+  const snapshotHandlerRef = (0, import_react.useRef)(onSnapshot);
+  snapshotHandlerRef.current = onSnapshot;
+  (0, import_react.useEffect)(
+    () => subscribeWindowResize(() => {
+      setSnapshot(readSystemInfo());
+    }),
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    var _a;
+    (_a = snapshotHandlerRef.current) == null ? void 0 : _a.call(snapshotHandlerRef, snapshot);
+  }, [snapshot]);
+  const activeBreakpoint = (0, import_react.useMemo)(() => {
+    const entries = Object.entries(breakpoints).sort((first, second) => first[1] - second[1]);
+    const matched = entries.filter(([, width]) => snapshot.windowWidth >= width).pop();
+    return matched ? `${matched[0]} (${matched[1]}px)` : "--";
+  }, [breakpoints, snapshot.windowWidth]);
+  const metrics = [
+    ...showWindow ? [
+      {
+        label: "Window",
+        value: `${snapshot.windowWidth} x ${snapshot.windowHeight}`,
+        description: "当前可用视口"
+      }
+    ] : [],
+    ...showScreen ? [
+      {
+        label: "Screen",
+        value: `${snapshot.screenWidth} x ${snapshot.screenHeight}`,
+        description: "设备屏幕尺寸"
+      }
+    ] : [],
+    ...showPlatform ? [
+      {
+        label: "Platform",
+        value: snapshot.platform,
+        description: `Breakpoint ${activeBreakpoint}`
+      }
+    ] : [],
+    ...showPixelRatio ? [
+      {
+        label: "Pixel Ratio",
+        value: snapshot.pixelRatio || "--",
+        description: "像素密度"
+      }
+    ] : [],
+    ...showSafeArea ? [
+      {
+        label: "Safe Area",
+        value: `${snapshot.safeAreaTop} / ${snapshot.safeAreaBottom}`,
+        description: "上 / 下安全区"
+      },
+      {
+        label: "Status Bar",
+        value: snapshot.statusBarHeight || "--",
+        description: "状态栏高度"
+      }
+    ] : [],
+    ...data
+  ];
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      className: (0, import_utils.classNames)(`${config.prefixCls}-dimensions`, className),
+      style: {
+        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
+      }
+    },
+    title !== void 0 && title !== null ? renderNode(title, { fontSize: 16, fontWeight: 600, color: colors.foreground }) : null,
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${config.prefixCls}-dimensions__grid`,
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          flexWrap: "wrap",
+          marginLeft: compact ? -4 : -6,
+          marginRight: compact ? -4 : -6
+        }
+      },
+      metrics.map((metric, index) => /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          key: index,
+          className: `${config.prefixCls}-dimensions__metric`,
+          style: {
+            width: columns === 1 ? "100%" : "50%",
+            minWidth: 0,
+            boxSizing: "border-box",
+            padding: compact ? 4 : 6
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.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
+            }
+          },
+          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
+        )
+      ))
+    ),
+    children
+  );
+};
+DimensionsPanel.displayName = "Dimensions";
+var Dimensions = Object.assign(DimensionsPanel, {
+  getWindowDimensions,
+  getScreenDimensions,
+  set: (_dimensions) => {
+    console.warn("Dimensions.set is not supported in Taro runtime");
+  }
+});
+var dimensions_default = Dimensions;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dimensions,
+  useBreakpoint,
+  useElementDimensions,
+  useMediaQuery,
+  useScreenDimensions,
+  useWindowDimensions
+});

package/lib/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/lib/components/dimensions/index.js

@@ -0,0 +1,54 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dimensions/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Dimensions: () => import_dimensions.Dimensions,
+  default: () => import_dimensions2.default,
+  useBreakpoint: () => import_dimensions.useBreakpoint,
+  useElementDimensions: () => import_dimensions.useElementDimensions,
+  useMediaQuery: () => import_dimensions.useMediaQuery,
+  useScreenDimensions: () => import_dimensions.useScreenDimensions,
+  useWindowDimensions: () => import_dimensions.useWindowDimensions
+});
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./types"), module.exports);
+var import_dimensions = require("./dimensions");
+var import_dimensions2 = __toESM(require("./dimensions"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dimensions,
+  useBreakpoint,
+  useElementDimensions,
+  useMediaQuery,
+  useScreenDimensions,
+  useWindowDimensions,
+  ...require("./types")
+});

package/lib/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/lib/components/dimensions/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dimensions/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/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