clxx 3.0.2 → 3.0.4

package/AGENTS.md

@@ -1,3 +1,49 @@
-- 所有回答用中文
-- 任意修改都要检查是否创造了新的bug，如果有bug则修复
-- 一个文件只能有一个React组件
+# AGENTS.md
+
+本仓库是面向移动端 H5 的基础组件库 `clxx`（React 19 + TypeScript + @emotion/react），以下规则对所有 AI Agent 在本工程内的工作均有效。
+
+## 1. 沟通约定
+
+- 所有回复使用中文。
+- 不主动 push 到远程；除非用户显式要求，否则只做本地改动。
+- 任务执行完成后，需自检产物：不允许遗留报错（编译 / 类型 / Lint），除非用户主动要求保留。
+
+## 2. 项目结构
+
+- `src/`：组件库源码，按 PascalCase 目录组织，每个组件一个目录（如 `Toast/`、`MapLocationSelection/`）。
+  - 目录内常见文件：`index.tsx`（导出入口）、`style.ts`（emotion 样式）、子组件 `*.tsx`。
+  - `src/Effect/` 存放自定义 hooks，`src/utils/` 存放无 React 依赖的工具函数。
+  - 对外导出统一在 `src/index.ts` 维护。
+- `test/`：基于 Vite 的本地预览工程，**只用于演示与人工验证 `src/` 下的组件**，不得承载业务逻辑。
+  - 子目录使用 kebab-case（如 `map-location-selection/`），与 `src` 下的 PascalCase 目录一一对应。
+
+## 3. 代码规范
+
+- **一个文件只允许导出一个 React 组件**；同一文件内的辅助子组件必须拆分到独立文件。
+- 组件文件使用 `.tsx`，纯逻辑 / 类型 / 工具使用 `.ts`。
+- 样式优先使用 `@emotion/react`，写在同目录的 `style.ts` 中；避免引入新的 CSS-in-JS 方案。
+- 公共依赖：`react@^19`、`@emotion/react`、`dayjs`、`lodash`、`history`；新增第三方依赖前先确认是否已有等价能力。
+- TypeScript 严格类型：禁止用 `any` 屏蔽类型问题；导出的 props/类型放在组件文件顶部并显式 `export`。
+- 注释只解释「为什么」与不易看出的约束，禁止逐行翻译代码。
+
+## 4. Container 约束（强制）
+
+本库所有组件的 `rem` 自适应、最大宽度居中、CSS 变量 `--clxx-max-width` 等能力均由 `src/Container` 提供。
+
+- 任何使用本库的页面 / Demo / 测试入口，**必须把 `Container` 作为根组件**包裹其它组件，否则尺寸会失真。
+- 修改 `Container` 时需同时验证 `Overlay`、`Fixed`、弹窗类组件（`Dialog`、`Toast`、`Alert`、`Loading`、`*Picker` 等）在 PC 端居中与最大宽度限制下的表现。
+
+## 5. 测试与本地运行
+
+- `test/` 工程：`cd test && npm run dev` 启动本地预览。
+- 库本身：`npm run dev`（tsc watch）/ `npm run build`（清理后产出到 `build/`）。
+- 新增 / 修改组件时，应在 `test/src/<对应目录>/` 下补充或更新最小可运行 Demo。
+- 临时为调试创建、与正常逻辑无关的测试文件 / 代码，**任务完成前必须删除**。
+
+## 6. 质量门禁
+
+- 任何修改完成后，先自检：
+  1. 是否引入新 bug 或破坏既有用例；如有，**必须修复**。
+  2. 是否影响公共导出（`src/index.ts`）的兼容性。
+  3. 是否在 `Container` 之外破坏了自适应行为。
+- 涉及 `peerDependencies`（React/ReactDOM）相关 API 的改动，需确保仍兼容 React 19。

package/build/Alert/style.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = void 0;
 const theme_1 = require("../utils/theme");
+const rem_1 = require("../utils/rem");
 // 1px 硬边框（高清屏 hairline）
 const hairline = 1 / (typeof window !== "undefined" ? window.devicePixelRatio : 1);
 // iOS 风色板
@@ -13,20 +14,20 @@ exports.style = {
         position: "relative",
         overflow: "hidden",
         backgroundColor: "#ffffff",
-        borderRadius: ".28rem",
-        width: (750 * 0.78) / 100 + "rem",
+        borderRadius: (0, rem_1.r)(28),
+        width: (0, rem_1.r)(750 * 0.78),
         fontFamily: theme_1.fontStack,
         color: textPrimary,
         WebkitFontSmoothing: "antialiased",
         MozOsxFontSmoothing: "grayscale",
-        boxShadow: "0 .2rem .6rem rgba(0,0,0,.18)",
+        boxShadow: `0 ${(0, rem_1.r)(20)} ${(0, rem_1.r)(60)} rgba(0,0,0,.18)`,
     },
     content: {
         position: "relative",
-        paddingTop: ".4rem",
-        paddingBottom: ".4rem",
-        paddingLeft: ".36rem",
-        paddingRight: ".36rem",
+        paddingTop: (0, rem_1.r)(40),
+        paddingBottom: (0, rem_1.r)(40),
+        paddingLeft: (0, rem_1.r)(36),
+        paddingRight: (0, rem_1.r)(36),
         "&:after,&::after": {
             content: "''",
             position: "absolute",
@@ -43,21 +44,21 @@ exports.style = {
         textAlign: "center",
         lineHeight: 1.45,
         color: textPrimary,
-        fontSize: ".34rem",
+        fontSize: (0, rem_1.r)(34),
         fontWeight: 600,
-        letterSpacing: ".01rem",
+        letterSpacing: (0, rem_1.r)(1),
     },
     desc: {
         textAlign: "center",
         lineHeight: 1.55,
         color: textSecondary,
-        fontSize: ".28rem",
-        marginTop: ".18rem",
+        fontSize: (0, rem_1.r)(28),
+        marginTop: (0, rem_1.r)(18),
         wordBreak: "break-word",
     },
     btnBox: {
         position: "relative",
-        height: ".92rem",
+        height: (0, rem_1.r)(92),
     },
     btnBoxWithCancel: {
         "&:after,&::after": {
@@ -79,9 +80,9 @@ exports.style = {
         alignItems: "center",
         justifyContent: "center",
         userSelect: "none",
-        fontSize: ".32rem",
+        fontSize: (0, rem_1.r)(32),
         fontWeight: 500,
-        letterSpacing: ".01rem",
+        letterSpacing: (0, rem_1.r)(1),
         cursor: "pointer",
         transition: "background-color .12s",
     },

package/build/CarouselNotice/style.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.Bubble = void 0;
 const react_1 = require("@emotion/react");
+const rem_1 = require("../utils/rem");
 // translate 走百分比；fill-mode: forwards 保证动画结束后定格在 -50%，
 // 与 React 的 setState 提交顺序解耦，杜绝"动画结束帧"回弹到 0 造成的闪烁
 exports.Bubble = (0, react_1.keyframes) `
@@ -16,7 +17,7 @@ exports.style = {
     box: {
         position: "relative",
         overflow: "hidden",
-        height: ".8rem",
+        height: (0, rem_1.r)(80),
     },
     wrapper: {
         position: "absolute",

package/build/CitySelect/style.js

@@ -5,6 +5,7 @@ exports.createStyle = createStyle;
 const react_1 = require("@emotion/react");
 const color_1 = require("../utils/color");
 const theme_1 = require("../utils/theme");
+const rem_1 = require("../utils/rem");
 // 设计变量
 const textPrimary = "#1f2328";
 const textSecondary = "#6b7280";
@@ -32,22 +33,22 @@ function createStyle(primary) {
         sidebar: (0, react_1.css)({
             position: "absolute",
             top: "50%",
-            right: ".12rem",
+            right: (0, rem_1.r)(12),
             transform: "translateY(-50%)",
             zIndex: 2,
-            padding: ".1rem .06rem",
-            borderRadius: ".3rem",
+            padding: `${(0, rem_1.r)(10)} ${(0, rem_1.r)(6)}`,
+            borderRadius: (0, rem_1.r)(30),
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            gap: ".02rem",
+            gap: (0, rem_1.r)(2),
         }),
         letter: (0, react_1.css)({
-            width: ".36rem",
-            height: ".36rem",
-            lineHeight: ".36rem",
+            width: (0, rem_1.r)(36),
+            height: (0, rem_1.r)(36),
+            lineHeight: (0, rem_1.r)(36),
             textAlign: "center",
-            fontSize: ".22rem",
+            fontSize: (0, rem_1.r)(22),
             fontFamily: "Arial, sans-serif",
             fontWeight: 500,
             borderRadius: "50%",
@@ -68,12 +69,12 @@ function createStyle(primary) {
             transform: "translate(-50%, -50%)",
             backgroundColor: "rgba(0,0,0,0.55)",
             color: "#fff",
-            fontSize: ".6rem",
-            width: "1.4rem",
-            height: "1.4rem",
-            lineHeight: "1.4rem",
+            fontSize: (0, rem_1.r)(60),
+            width: (0, rem_1.r)(140),
+            height: (0, rem_1.r)(140),
+            lineHeight: (0, rem_1.r)(140),
             textAlign: "center",
-            borderRadius: ".24rem",
+            borderRadius: (0, rem_1.r)(24),
             pointerEvents: "none",
         }),
         original: (0, react_1.css)({
@@ -81,20 +82,20 @@ function createStyle(primary) {
             backgroundColor: bgPage,
         }),
         top: (0, react_1.css)({
-            padding: ".24rem .3rem",
+            padding: `${(0, rem_1.r)(24)} ${(0, rem_1.r)(30)}`,
             borderBottom: `1px solid ${border}`,
             "& > div": {
-                height: ".72rem",
+                height: (0, rem_1.r)(72),
                 backgroundColor: bgSubtle,
-                padding: "0 .24rem",
-                borderRadius: ".36rem",
+                padding: `0 ${(0, rem_1.r)(24)}`,
+                borderRadius: (0, rem_1.r)(36),
             },
         }),
         icon: (0, react_1.css)({
-            width: ".32rem",
-            height: ".32rem",
+            width: (0, rem_1.r)(32),
+            height: (0, rem_1.r)(32),
             fill: textTertiary,
-            marginRight: ".15rem",
+            marginRight: (0, rem_1.r)(15),
             fontSize: 0,
             flexShrink: 0,
         }),
@@ -102,8 +103,8 @@ function createStyle(primary) {
             flexGrow: 1,
             height: "100%",
             minWidth: 0,
-            fontSize: ".28rem",
-            lineHeight: ".72rem",
+            fontSize: (0, rem_1.r)(28),
+            lineHeight: (0, rem_1.r)(72),
             color: textPrimary,
             fontFamily: "inherit",
             border: "none",
@@ -112,14 +113,14 @@ function createStyle(primary) {
             padding: 0,
             "&::placeholder": {
                 color: textTertiary,
-                lineHeight: ".72rem",
+                lineHeight: (0, rem_1.r)(72),
             },
         }),
         exit: (0, react_1.css)({
             whiteSpace: "nowrap",
-            marginLeft: ".2rem",
-            lineHeight: ".72rem",
-            fontSize: ".28rem",
+            marginLeft: (0, rem_1.r)(20),
+            lineHeight: (0, rem_1.r)(72),
+            fontSize: (0, rem_1.r)(28),
             color: primary,
             cursor: "pointer",
             transition: "opacity .15s, color .15s",
@@ -138,7 +139,7 @@ function createStyle(primary) {
         locate: (0, react_1.css)({
             display: "flex",
             alignItems: "center",
-            padding: ".2rem .23rem",
+            padding: `${(0, rem_1.r)(20)} ${(0, rem_1.r)(23)}`,
             borderBottom: `1px solid ${border}`,
             backgroundColor: bgPage,
             transition: "background-color .12s",
@@ -147,28 +148,28 @@ function createStyle(primary) {
             },
         }),
         locateIcon: (0, react_1.css)({
-            width: ".32rem",
-            height: ".32rem",
+            width: (0, rem_1.r)(32),
+            height: (0, rem_1.r)(32),
             fill: primary,
-            marginRight: ".16rem",
+            marginRight: (0, rem_1.r)(16),
             fontSize: 0,
             flexShrink: 0,
         }),
         locateLabel: (0, react_1.css)({
-            fontSize: ".24rem",
+            fontSize: (0, rem_1.r)(24),
             color: textTertiary,
-            marginRight: ".16rem",
+            marginRight: (0, rem_1.r)(16),
         }),
         locateName: (0, react_1.css)({
-            fontSize: ".24rem",
+            fontSize: (0, rem_1.r)(24),
             color: primary,
         }),
         title: (0, react_1.css)({
-            padding: ".08rem .3rem",
-            fontSize: ".22rem",
+            padding: `${(0, rem_1.r)(8)} ${(0, rem_1.r)(30)}`,
+            fontSize: (0, rem_1.r)(22),
             fontWeight: 600,
             color: textSecondary,
-            letterSpacing: ".02rem",
+            letterSpacing: (0, rem_1.r)(2),
             textTransform: "uppercase",
             backgroundColor: bgSubtle,
             position: "sticky",
@@ -176,8 +177,8 @@ function createStyle(primary) {
             zIndex: 1,
         }),
         item: (0, react_1.css)({
-            padding: ".24rem .3rem",
-            fontSize: ".3rem",
+            padding: `${(0, rem_1.r)(24)} ${(0, rem_1.r)(30)}`,
+            fontSize: (0, rem_1.r)(30),
             color: textPrimary,
             borderBottom: `1px solid ${border}`,
             backgroundColor: bgPage,
@@ -199,7 +200,7 @@ function createStyle(primary) {
             alignItems: "center",
             justifyContent: "center",
             color: textTertiary,
-            fontSize: ".26rem",
+            fontSize: (0, rem_1.r)(26),
         }),
     };
 }

package/build/Container/index.js

@@ -91,6 +91,25 @@ function Container(props) {
             document.body.removeEventListener("touchstart", noop);
         };
     }, []);
+    // --clxx-px：库内组件统一基于 750 设计稿做尺寸（用 utils/rem.ts 的 r() helper），
+    // 与用户的 designWidth 完全解耦。否则用户传 designWidth=375 时，库内写死的
+    // ".28rem"（按 750 设计稿出）会被 html fontSize 放大一倍，导致整个库视觉错位。
+    //
+    // 计算口径：1 个「750 设计稿 px」在当前视口下应该渲染成多少 css px：
+    //   --clxx-px = clamp(viewport, maxWidth) / 750
+    //   视口 750  → 1
+    //   视口 375  → 0.5
+    //   视口 1080 → 1.44
+    // r(28) = calc(28 * var(--clxx-px)) = 视口比例下的 28 设计稿 px。
+    const LIB_DESIGN_WIDTH = 750;
+    const clxxPx = (0, react_2.useMemo)(() => {
+        // 字号缩放修正同样要应用：浏览器把 html 字号放大 N 倍时，rem 字面量会跟着放大；
+        // --clxx-px 也必须 / scaleFactor 才能保持库内尺寸的稳定。
+        const raw = viewportWidth / LIB_DESIGN_WIDTH;
+        const fixed = scaleFactor === 1 ? raw : raw / scaleFactor;
+        // 4 位小数已远超 1 设备 px 精度，避免浮点串导致 css 变量频繁字符串变化
+        return Math.round(fixed * 10000) / 10000;
+    }, [viewportWidth, scaleFactor]);
     // 全局样式：fontSize 写入 html，rem 自动跟随
     // body 以 maxWidth 居中，保证 PC 端上页面不超过设计宽度，两侧留白
     // CSS 变量 --clxx-max-width 供 Overlay/Fixed 等使用 fixed 定位的组件读取
@@ -100,6 +119,7 @@ function Container(props) {
         {
             ":root": {
                 "--clxx-max-width": hasMaxWidth ? `${maxWidth}px` : "100%",
+                "--clxx-px": `${clxxPx}px`,
             },
             "*": {
                 boxSizing: "border-box",
@@ -114,6 +134,6 @@ function Container(props) {
             body: Object.assign({ fontSize: "16px", margin: "0 auto" }, (hasMaxWidth ? { maxWidth: `${maxWidth}px` } : null)),
         },
         globalStyle,
-    ], [fontSize, maxWidth, hasMaxWidth, globalStyle]);
+    ], [fontSize, maxWidth, hasMaxWidth, clxxPx, globalStyle]);
     return ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: globalStyles }), children] }));
 }

package/build/DatePicker/style.d.ts

@@ -1,5 +1,5 @@
 import { Interpolation, Theme } from "@emotion/react";
-export declare const ITEM_HEIGHT_REM = 0.8;
+export declare const ITEM_HEIGHT_PX = 80;
 export declare const VISIBLE_ROWS = 5;
 export type DatePickerStyle = Record<string, Interpolation<Theme>>;
 export declare function createStyle(primary: string, rounded?: boolean): DatePickerStyle;

package/build/DatePicker/style.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_PRIMARY = exports.VISIBLE_ROWS = exports.ITEM_HEIGHT_REM = void 0;
+exports.DEFAULT_PRIMARY = exports.VISIBLE_ROWS = exports.ITEM_HEIGHT_PX = void 0;
 exports.createStyle = createStyle;
 const react_1 = require("@emotion/react");
 const color_1 = require("../utils/color");
 const theme_1 = require("../utils/theme");
+const rem_1 = require("../utils/rem");
 // 与 CitySelect 一致的设计变量（带线条风格）
 const textPrimary = "#1f2328";
 const textSecondary = "#6b7280";
@@ -12,13 +13,13 @@ const textTertiary = "#9ca3af";
 const bgPage = "#ffffff";
 const bgSubtle = "#f5f6f8";
 const border = "#e5e7eb";
-// 可见行数 = 5，单元高度 = .8rem
-exports.ITEM_HEIGHT_REM = 0.8;
+// 可见行数 = 5，单元高度 = 80px @ 750 设计稿
+exports.ITEM_HEIGHT_PX = 80;
 exports.VISIBLE_ROWS = 5;
 function createStyle(primary, rounded = true) {
     const primaryActive = (0, color_1.darken)(primary, 0.15);
-    const sheetRadius = rounded ? ".24rem" : "0";
-    const indicatorRadius = rounded ? ".12rem" : "0";
+    const sheetRadius = rounded ? (0, rem_1.r)(24) : "0";
+    const indicatorRadius = rounded ? (0, rem_1.r)(12) : "0";
     return {
         // 内容容器：动画/全屏/居中由 Dialog 提供，这里只保留视觉与排版
         sheet: (0, react_1.css)({
@@ -35,27 +36,27 @@ function createStyle(primary, rounded = true) {
         }),
         // 标题栏：底部 hairline 与 body 区分
         header: (0, react_1.css)({
-            height: ".92rem",
+            height: (0, rem_1.r)(92),
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            padding: "0 .16rem",
+            padding: `0 ${(0, rem_1.r)(16)}`,
             borderBottom: `1px solid ${border}`,
         }),
         title: (0, react_1.css)({
             flex: 1,
             textAlign: "center",
-            fontSize: ".3rem",
+            fontSize: (0, rem_1.r)(30),
             fontWeight: 600,
             color: textPrimary,
-            letterSpacing: ".01rem",
+            letterSpacing: (0, rem_1.r)(1),
         }),
         btn: (0, react_1.css)({
-            minWidth: "1.1rem",
-            padding: "0 .08rem",
-            fontSize: ".28rem",
+            minWidth: (0, rem_1.r)(110),
+            padding: `0 ${(0, rem_1.r)(8)}`,
+            fontSize: (0, rem_1.r)(28),
             fontWeight: 400,
-            lineHeight: ".92rem",
+            lineHeight: (0, rem_1.r)(92),
             cursor: "pointer",
             transition: "opacity .15s, color .15s",
         }),
@@ -73,16 +74,16 @@ function createStyle(primary, rounded = true) {
         body: (0, react_1.css)({
             position: "relative",
             display: "flex",
-            height: `${exports.ITEM_HEIGHT_REM * exports.VISIBLE_ROWS}rem`,
-            padding: "0 .16rem .12rem",
+            height: (0, rem_1.r)(exports.ITEM_HEIGHT_PX * exports.VISIBLE_ROWS),
+            padding: `0 ${(0, rem_1.r)(16)} ${(0, rem_1.r)(12)}`,
         }),
         // 选中条：浅灰底 + 上下 hairline，与 CitySelect 列表观感一致
         indicator: (0, react_1.css)({
             position: "absolute",
-            left: ".16rem",
-            right: ".16rem",
-            top: `${exports.ITEM_HEIGHT_REM * 2}rem`,
-            height: `${exports.ITEM_HEIGHT_REM}rem`,
+            left: (0, rem_1.r)(16),
+            right: (0, rem_1.r)(16),
+            top: (0, rem_1.r)(exports.ITEM_HEIGHT_PX * 2),
+            height: (0, rem_1.r)(exports.ITEM_HEIGHT_PX),
             pointerEvents: "none",
             backgroundColor: bgSubtle,
             borderTop: `1px solid ${border}`,
@@ -109,13 +110,13 @@ function createStyle(primary, rounded = true) {
             willChange: "transform",
         }),
         item: (0, react_1.css)({
-            height: `${exports.ITEM_HEIGHT_REM}rem`,
-            lineHeight: `${exports.ITEM_HEIGHT_REM}rem`,
-            fontSize: ".32rem",
+            height: (0, rem_1.r)(exports.ITEM_HEIGHT_PX),
+            lineHeight: (0, rem_1.r)(exports.ITEM_HEIGHT_PX),
+            fontSize: (0, rem_1.r)(32),
             fontWeight: 400,
             fontFamily: theme_1.numberFontStack,
             fontVariantNumeric: "tabular-nums",
-            letterSpacing: ".01rem",
+            letterSpacing: (0, rem_1.r)(1),
             textAlign: "center",
             color: textTertiary,
             transition: "color .18s ease",
@@ -125,7 +126,7 @@ function createStyle(primary, rounded = true) {
             fontWeight: 600,
         }),
         spacer: (0, react_1.css)({
-            height: `${exports.ITEM_HEIGHT_REM * 2}rem`,
+            height: (0, rem_1.r)(exports.ITEM_HEIGHT_PX * 2),
             pointerEvents: "none",
         }),
     };

package/build/Indicator/index.js

@@ -16,6 +16,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
 const react_2 = require("react");
 const cssUtil_1 = require("../utils/cssUtil");
+const rem_1 = require("../utils/rem");
 const style_1 = require("./style");
 /**
  * iOS 风菊花转圈指示器（仿 UIActivityIndicatorView 节奏）。
@@ -31,7 +32,7 @@ function Indicator(props) {
         { fontSize: 0, display: "inline-block", lineHeight: 0 },
         size !== undefined
             ? { width: (0, cssUtil_1.normalizeUnit)(size), height: (0, cssUtil_1.normalizeUnit)(size) }
-            : { width: ".4rem", height: ".4rem" },
+            : { width: (0, rem_1.r)(40), height: (0, rem_1.r)(40) },
     ], [size]);
     const svgCss = (0, react_2.useMemo)(() => (0, react_1.css)({
         width: "100%",

package/build/Loading/Wrapper.js

@@ -6,6 +6,7 @@ const style_1 = require("./style");
 const Indicator_1 = require("../Indicator");
 const Row_1 = require("../Flex/Row");
 const Overlay_1 = require("../Overlay");
+const rem_1 = require("../utils/rem");
 function Wrapper(props) {
     const { status = 'show', hint, overlay, indicator, onHide, containerStyle, } = props;
     // 覆盖层样式
@@ -17,9 +18,9 @@ function Wrapper(props) {
     if (typeof overlay === 'object') {
         overlayProps = Object.assign(Object.assign({}, overlayProps), overlay);
     }
-    // 指示器样式：默认 size .48rem，保证带文字 / 不带文字两态指示器大小一致
+    // 指示器样式：默认 size = 48px @ 750 设计稿，保证带文字 / 不带文字两态指示器大小一致
     let indicatorProps = {
-        size: '.48rem',
+        size: (0, rem_1.r)(48),
         barWidth: 5,
         barHeight: 25,
         barCount: 14,

package/build/Loading/style.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.LoadingHide = exports.LoadingShow = void 0;
 const react_1 = require("@emotion/react");
+const rem_1 = require("../utils/rem");
 exports.LoadingShow = (0, react_1.keyframes) `
   from {
     opacity: 0;
@@ -21,13 +22,13 @@ exports.LoadingHide = (0, react_1.keyframes) `
 exports.style = {
     boxCommon: {
         backgroundColor: `rgba(0, 0, 0, .72)`,
-        borderRadius: '.2rem',
+        borderRadius: (0, rem_1.r)(20),
         backdropFilter: 'blur(20px) saturate(160%)',
         WebkitBackdropFilter: 'blur(20px) saturate(160%)',
     },
     box: {
-        width: '1.6rem',
-        height: '1.6rem',
+        width: (0, rem_1.r)(160),
+        height: (0, rem_1.r)(160),
     },
     boxShow: {
         animation: `${exports.LoadingShow} 200ms`,
@@ -36,13 +37,13 @@ exports.style = {
         animation: `${exports.LoadingHide} 200ms`,
     },
     boxWithExtra: {
-        padding: '.3rem',
+        padding: (0, rem_1.r)(30),
     },
     hint: {
         color: "#ffffff",
         whiteSpace: "nowrap",
-        fontSize: '.28rem',
-        marginLeft: '.2rem',
+        fontSize: (0, rem_1.r)(28),
+        marginLeft: (0, rem_1.r)(20),
         fontWeight: 500,
     },
 };

package/build/MapLocationSelection/buildSelectedLocation.d.ts

@@ -0,0 +1,16 @@
+import { type POIItem, type SelectedLocation } from "./types";
+import type { ReverseGeocodeResult } from "./provider";
+export declare const NEAREST_POI_FALLBACK_RADIUS_M = 80;
+export declare function splitAdcode(adcode?: string): {
+    provinceCode: string;
+    cityCode: string;
+    districtCode: string;
+} | undefined;
+export interface BuildSelectedLocationOptions {
+    pickedPoi?: {
+        name?: string;
+        address?: string;
+    };
+    candidatePoi?: POIItem | null;
+}
+export declare function buildSelectedLocation(center: [number, number], geo: ReverseGeocodeResult | null, options?: BuildSelectedLocationOptions): SelectedLocation;