clxx 2.1.6 → 2.1.8

package/build/CitySelect/index.d.ts

@@ -0,0 +1,17 @@
+export interface SelectedCity {
+    name: string;
+    code: string;
+    province: {
+        name: string;
+        code: string;
+    };
+}
+export interface CitySelectProps {
+    onClose?: () => void;
+    onSelect?: (city: SelectedCity) => void;
+    onLetterChange?: (letter: string) => void;
+    getLocation?: () => string | null | undefined | Promise<string | null | undefined>;
+    primary?: string;
+}
+export declare function CitySelect(props: CitySelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function showCitySelect(options?: Pick<CitySelectProps, "onSelect" | "onLetterChange" | "getLocation" | "primary">): void;

package/build/CitySelect/index.js

@@ -0,0 +1,335 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CitySelect = CitySelect;
+exports.showCitySelect = showCitySelect;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const dom_1 = require("../utils/dom");
+const data_1 = require("./data");
+const search_1 = require("./search");
+const style_1 = require("./style");
+const Col_1 = require("../Flex/Col");
+const Row_1 = require("../Flex/Row");
+const Clickable_1 = require("../Clickable");
+// 在 cityData 中按 code 或 name 查找城市
+// name 匹配时允许省略末尾的"市"，如"北京" 匹配 "北京市"
+function findCity(key) {
+    if (!key)
+        return null;
+    const k = key.trim();
+    if (!k)
+        return null;
+    const kNoCity = k.endsWith("市") ? k.slice(0, -1) : k;
+    for (const letter of Object.keys(data_1.cityData)) {
+        for (const item of data_1.cityData[letter]) {
+            if (item.code === k)
+                return item;
+            const nameNoCity = item.name.endsWith("市")
+                ? item.name.slice(0, -1)
+                : item.name;
+            if (nameNoCity === kNoCity)
+                return item;
+        }
+    }
+    return null;
+}
+// 滑入/滑出动画在 style.inner 的 transition 中定义
+function CitySelect(props) {
+    const { onClose, onSelect, onLetterChange, getLocation, primary = style_1.DEFAULT_PRIMARY, } = props;
+    const style = (0, react_1.useMemo)(() => (0, style_1.createStyle)(primary), [primary]);
+    const letters = (0, react_1.useMemo)(() => Object.keys(data_1.cityData), []);
+    // 定位解析结果：null 表示尚未解析或失败/未匹配；非空时展示快捷入口
+    const [locatedCity, setLocatedCity] = (0, react_1.useState)(null);
+    // 首次挂载时调用一次外部定位；异步失败或匹配不到均保持不展示
+    const getLocationRef = (0, react_1.useRef)(getLocation);
+    getLocationRef.current = getLocation;
+    (0, react_1.useEffect)(() => {
+        const fn = getLocationRef.current;
+        if (!fn)
+            return;
+        let cancelled = false;
+        try {
+            Promise.resolve(fn())
+                .then((key) => {
+                if (cancelled)
+                    return;
+                const city = findCity(key !== null && key !== void 0 ? key : undefined);
+                if (city)
+                    setLocatedCity(city);
+            })
+                .catch(() => {
+                // 定位失败：保持不展示
+            });
+        }
+        catch (_a) {
+            // 同步抛错：保持不展示
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const sidebarRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    const sectionRefs = (0, react_1.useRef)({});
+    // 缓存每个字母区块在列表内的 offsetTop，避免每次 scroll 都 layout
+    const sectionOffsetsRef = (0, react_1.useRef)([]);
+    // 触摸期间抽帧 set scrollTop，标记忽略 scroll 回调，避免抗抽
+    const isTouchScrollRef = (0, react_1.useRef)(false);
+    const [activeLetter, setActiveLetter] = (0, react_1.useState)(() => { var _a; return (_a = letters[0]) !== null && _a !== void 0 ? _a : null; });
+    const [touching, setTouching] = (0, react_1.useState)(false);
+    const [keyword, setKeyword] = (0, react_1.useState)("");
+    const [composing, setComposing] = (0, react_1.useState)(false);
+    // 动画状态：entering 刚挂载还未滑入；active 已滑入到位；exiting 正在滑出
+    const [phase, setPhase] = (0, react_1.useState)("entering");
+    // IME 合成期间不触发搜索，避免中文输入时的拼音中间态干扰结果
+    const searchResult = (0, react_1.useMemo)(() => {
+        if (composing)
+            return null;
+        return keyword.trim() ? (0, search_1.searchCity)(keyword) : null;
+    }, [keyword, composing]);
+    const isSearching = searchResult !== null;
+    // 用 ref 保存最新值，避免 effect 依赖变化而反复解绑/绑定
+    const lettersRef = (0, react_1.useRef)(letters);
+    lettersRef.current = letters;
+    const onLetterChangeRef = (0, react_1.useRef)(onLetterChange);
+    onLetterChangeRef.current = onLetterChange;
+    // 进入动画：下一帧切换到 active，触发 CSS transition
+    (0, react_1.useEffect)(() => {
+        const id = requestAnimationFrame(() => {
+            // 再套一层，确保初始 transform 已被浏览器应用
+            requestAnimationFrame(() => setPhase("active"));
+        });
+        return () => cancelAnimationFrame(id);
+    }, []);
+    // 触发退出动画，真正的 onClose 在 transitionend 中触发
+    const triggerClose = () => {
+        if (phase === "exiting")
+            return;
+        // 进入动画未完成前退出：进入态和退出态 transform 相同，
+        // 切到 exiting 不会产生 transform 变化，transitionend 不会触发；
+        // 此时面板尚未滑入，直接调用 onClose 即可
+        if (phase === "entering") {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            return;
+        }
+        setPhase("exiting");
+    };
+    // 监听 inner 的 transform 过渡结束，退出阶段调用 onClose
+    const handleTransitionEnd = (e) => {
+        if (e.target !== e.currentTarget)
+            return;
+        if (e.propertyName !== "transform")
+            return;
+        if (phase === "exiting")
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    // 选中城市：回调后触发退出动画
+    const handleSelect = (city) => {
+        var _a;
+        const province = data_1.provinceData[city.pcode];
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+            name: city.name,
+            code: city.code,
+            province: {
+                name: (_a = province === null || province === void 0 ? void 0 : province.name) !== null && _a !== void 0 ? _a : "",
+                code: city.pcode,
+            },
+        });
+        triggerClose();
+    };
+    const measureSections = () => {
+        const listEl = listRef.current;
+        if (!listEl)
+            return;
+        const offsets = [];
+        for (const letter of lettersRef.current) {
+            const el = sectionRefs.current[letter];
+            if (el)
+                offsets.push({ letter, top: el.offsetTop });
+        }
+        sectionOffsetsRef.current = offsets;
+    };
+    (0, react_1.useLayoutEffect)(() => {
+        if (isSearching)
+            return;
+        measureSections();
+        const listEl = listRef.current;
+        if (!listEl || typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(() => measureSections());
+        ro.observe(listEl);
+        return () => ro.disconnect();
+    }, [isSearching]);
+    // 根据 scrollTop 通过二分查找定位当前粘滞字母
+    const getLetterByScrollTop = (scrollTop) => {
+        const offsets = sectionOffsetsRef.current;
+        if (offsets.length === 0)
+            return null;
+        let lo = 0;
+        let hi = offsets.length - 1;
+        let idx = 0;
+        // 1px 容差
+        const target = scrollTop + 1;
+        while (lo <= hi) {
+            const mid = (lo + hi) >> 1;
+            if (offsets[mid].top <= target) {
+                idx = mid;
+                lo = mid + 1;
+            }
+            else {
+                hi = mid - 1;
+            }
+        }
+        return offsets[idx].letter;
+    };
+    // 滚动列表到对应字母区块的上边缘
+    const scrollToLetter = (letter) => {
+        const listEl = listRef.current;
+        const sectionEl = sectionRefs.current[letter];
+        if (!listEl || !sectionEl)
+            return;
+        const target = sectionEl.offsetTop;
+        // scrollTop 未变化时不会派发 scroll 事件，
+        // 若此时置 flag 为 true 会导致后续首次真实滚动被误吞
+        if (listEl.scrollTop === target)
+            return;
+        isTouchScrollRef.current = true;
+        listEl.scrollTop = target;
+    };
+    (0, react_1.useEffect)(() => {
+        const el = sidebarRef.current;
+        if (!el)
+            return;
+        let lastLetter = null;
+        const updateByY = (clientY) => {
+            var _a;
+            const list = lettersRef.current;
+            if (list.length === 0)
+                return;
+            const rect = el.getBoundingClientRect();
+            const itemHeight = rect.height / list.length;
+            let index = Math.floor((clientY - rect.top) / itemHeight);
+            if (index < 0)
+                index = 0;
+            if (index > list.length - 1)
+                index = list.length - 1;
+            const letter = list[index];
+            if (letter !== lastLetter) {
+                lastLetter = letter;
+                setActiveLetter(letter);
+                scrollToLetter(letter);
+                (_a = onLetterChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onLetterChangeRef, letter);
+            }
+        };
+        // 优先使用触摸事件；不支持触摸才回退到鼠标事件，避免两套并存冲突
+        const isTouch = typeof window !== "undefined" &&
+            ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+        if (isTouch) {
+            const handleTouchStart = (e) => {
+                setTouching(true);
+                updateByY(e.touches[0].clientY);
+            };
+            const handleTouchMove = (e) => {
+                // 阻止滚动，需要非 passive 监听器
+                e.preventDefault();
+                updateByY(e.touches[0].clientY);
+            };
+            const handleTouchEnd = () => {
+                setTouching(false);
+                lastLetter = null;
+            };
+            el.addEventListener("touchstart", handleTouchStart, { passive: false });
+            el.addEventListener("touchmove", handleTouchMove, { passive: false });
+            el.addEventListener("touchend", handleTouchEnd);
+            el.addEventListener("touchcancel", handleTouchEnd);
+            return () => {
+                el.removeEventListener("touchstart", handleTouchStart);
+                el.removeEventListener("touchmove", handleTouchMove);
+                el.removeEventListener("touchend", handleTouchEnd);
+                el.removeEventListener("touchcancel", handleTouchEnd);
+            };
+        }
+        // 鼠标端：按下后拖动，move/up 绑在 document 以支持拖出 sidebar
+        let dragging = false;
+        const handleMouseDown = (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            dragging = true;
+            setTouching(true);
+            updateByY(e.clientY);
+        };
+        const handleMouseMove = (e) => {
+            if (!dragging)
+                return;
+            updateByY(e.clientY);
+        };
+        const handleMouseUp = () => {
+            if (!dragging)
+                return;
+            dragging = false;
+            setTouching(false);
+            lastLetter = null;
+        };
+        el.addEventListener("mousedown", handleMouseDown);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            el.removeEventListener("mousedown", handleMouseDown);
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [isSearching]);
+    // 手动滚动城市列表时，根据当前最靠上的区块激活对应字母（rAF 节流）
+    (0, react_1.useEffect)(() => {
+        if (isSearching)
+            return;
+        const listEl = listRef.current;
+        if (!listEl)
+            return;
+        let rafId = 0;
+        const handleScroll = () => {
+            // 触摸导航主动设置 scrollTop 时不覆盖 activeLetter
+            if (isTouchScrollRef.current) {
+                isTouchScrollRef.current = false;
+                return;
+            }
+            if (rafId)
+                return;
+            rafId = requestAnimationFrame(() => {
+                rafId = 0;
+                const letter = getLetterByScrollTop(listEl.scrollTop);
+                if (!letter)
+                    return;
+                setActiveLetter((prev) => (prev === letter ? prev : letter));
+            });
+        };
+        listEl.addEventListener("scroll", handleScroll, { passive: true });
+        return () => {
+            listEl.removeEventListener("scroll", handleScroll);
+            if (rafId)
+                cancelAnimationFrame(rafId);
+        };
+    }, [isSearching]);
+    return ((0, jsx_runtime_1.jsx)("div", { css: [style.container], children: (0, jsx_runtime_1.jsxs)("div", { css: [
+                style.inner,
+                phase === "entering" && style.innerEnter,
+                phase === "active" && style.innerActive,
+                phase === "exiting" && style.innerExit,
+            ], onTransitionEnd: handleTransitionEnd, children: [(0, jsx_runtime_1.jsxs)(Col_1.ColStart, { css: style.original, alignItems: "stretch", children: [(0, jsx_runtime_1.jsx)("div", { css: style.top, children: (0, jsx_runtime_1.jsxs)(Row_1.RowStart, { children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 1024 1024", css: style.icon, children: (0, jsx_runtime_1.jsx)("path", { d: "M896 870.4l-128-128c55.467-68.267 89.6-149.333 89.6-238.933 0-98.134-38.4-192-110.933-264.534-149.334-149.333-384-149.333-533.334-4.266-145.066 145.066-145.066 384 0 529.066 72.534 72.534 166.4 110.934 264.534 110.934 89.6 0 174.933-29.867 238.933-89.6l128 128c4.267 4.266 12.8 8.533 21.333 8.533s17.067-4.267 21.334-8.533c17.066-8.534 17.066-29.867 8.533-42.667zM260.267 721.067c-119.467-123.734-119.467-320 0-439.467 59.733-59.733 140.8-89.6 217.6-89.6 81.066 0 157.866 29.867 217.6 89.6 59.733 59.733 89.6 136.533 89.6 217.6 0 81.067-34.134 162.133-89.6 217.6-55.467 59.733-132.267 93.867-217.6 93.867-81.067 0-157.867-34.134-217.6-89.6z" }) }), (0, jsx_runtime_1.jsx)("input", { css: style.input, placeholder: "\u8BF7\u8F93\u5165\u5B57\u6BCD\u6216\u6C49\u5B57\u641C\u7D22\u57CE\u5E02", value: keyword, onChange: (e) => setKeyword(e.target.value), onCompositionStart: () => setComposing(true), onCompositionEnd: (e) => {
+                                            setComposing(false);
+                                            setKeyword(e.currentTarget.value);
+                                        } }), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.exit, onClick: triggerClose, children: "\u9000\u51FA" })] }) }), !isSearching && locatedCity && ((0, jsx_runtime_1.jsxs)(Clickable_1.Clickable, { css: style.locate, onClick: () => handleSelect(locatedCity), children: [(0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 1024 1024", css: style.locateIcon, children: [(0, jsx_runtime_1.jsx)("path", { d: "M512 128C352 128 224 256 224 416c0 115.2 70.4 204.8 160 320 32 44.8 70.4 89.6 102.4 147.2C492.8 889.6 499.2 896 512 896l0 0c12.8 0 19.2-6.4 25.6-12.8 32-51.2 70.4-96 102.4-140.8 89.6-121.6 160-211.2 160-326.4C800 256 672 128 512 128zM588.8 704c-25.6 32-51.2 64-76.8 102.4-25.6-38.4-57.6-76.8-76.8-108.8-83.2-108.8-147.2-192-147.2-281.6C288 294.4 390.4 192 512 192s224 102.4 224 224C736 505.6 672 595.2 588.8 704z" }), (0, jsx_runtime_1.jsx)("path", { d: "M512 416m-96 0a1.5 1.5 0 1 0 192 0 1.5 1.5 0 1 0-192 0Z" })] }), (0, jsx_runtime_1.jsx)("span", { css: style.locateLabel, children: "\u5F53\u524D\u5B9A\u4F4D" }), (0, jsx_runtime_1.jsx)("span", { css: style.locateName, children: locatedCity.name })] })), isSearching ? (searchResult.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { css: style.searchList, children: searchResult.map((item) => ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.item, onClick: () => handleSelect(item), children: item.name }, item.code))) })) : ((0, jsx_runtime_1.jsx)("div", { css: style.empty, children: "\u6CA1\u6709\u5339\u914D\u7684\u57CE\u5E02" }))) : ((0, jsx_runtime_1.jsx)("div", { ref: listRef, css: style.list, children: letters.map((k) => {
+                                return (
+                                // 每个字母对应一个区块，包含该字母开头的城市列表
+                                (0, jsx_runtime_1.jsxs)("div", { ref: (el) => {
+                                        sectionRefs.current[k] = el;
+                                    }, children: [(0, jsx_runtime_1.jsx)("div", { css: style.title, children: k.toUpperCase() }), data_1.cityData[k].map((item) => ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.item, onClick: () => handleSelect(item), children: item.name }, item.code)))] }, k));
+                            }) }))] }), !isSearching && ((0, jsx_runtime_1.jsx)("div", { ref: sidebarRef, css: style.sidebar, children: letters.map((k) => ((0, jsx_runtime_1.jsx)("div", { css: [style.letter, activeLetter === k && style.letterActive], children: k.toUpperCase() }, k))) })), touching && activeLetter && !isSearching && ((0, jsx_runtime_1.jsx)("div", { css: style.bigLetter, children: activeLetter.toUpperCase() }))] }) }));
+}
+function showCitySelect(options = {}) {
+    const container = (0, dom_1.createPortalDOM)();
+    container.mount((0, jsx_runtime_1.jsx)(CitySelect, Object.assign({}, options, { onClose: () => {
+            container.unmount();
+        } })));
+}

package/build/CitySelect/search.d.ts

@@ -0,0 +1,2 @@
+import type { CityItem } from "./type";
+export declare function searchCity(keyword: string): CityItem[];

package/build/CitySelect/search.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchCity = searchCity;
+const data_1 = require("./data");
+/**
+ * 城市搜索：根据输入的关键词前缀匹配 pinyin / pinyinShort / name 字段
+ * - 输入为空返回空数组
+ * - 英文字母不区分大小写
+ * - 使用首字符索引，避免遍历全部城市，保持 O(k) 级别的候选规模
+ */
+const __allCities = Object.keys(data_1.cityData)
+    .sort()
+    .flatMap((k) => data_1.cityData[k]);
+// 按首字符建立索引：同一个城市的 pinyin、pinyinShort、name 首字符分别入桶
+const __cityIndex = (() => {
+    const map = new Map();
+    const put = (key, item) => {
+        if (!key)
+            return;
+        let arr = map.get(key);
+        if (!arr) {
+            arr = [];
+            map.set(key, arr);
+        }
+        // 同一 key 下去重（同一城市多字段首字符相同时只入一次）
+        if (arr[arr.length - 1] !== item)
+            arr.push(item);
+    };
+    for (const item of __allCities) {
+        put(item.pinyin[0], item);
+        put(item.pinyinShort[0], item);
+        put(item.name[0], item);
+    }
+    return map;
+})();
+function searchCity(keyword) {
+    if (!keyword)
+        return [];
+    const kw = keyword.trim();
+    if (!kw)
+        return [];
+    const first = kw[0];
+    // 英文按小写匹配 pinyin / pinyinShort；中文按原字符匹配 name
+    const isAscii = first.charCodeAt(0) < 128;
+    const lookupKey = isAscii ? first.toLowerCase() : first;
+    const candidates = __cityIndex.get(lookupKey);
+    if (!candidates)
+        return [];
+    if (isAscii) {
+        const lower = kw.toLowerCase();
+        const seen = new Set();
+        const out = [];
+        for (const item of candidates) {
+            if (seen.has(item))
+                continue;
+            if (item.pinyin.startsWith(lower) || item.pinyinShort.startsWith(lower)) {
+                seen.add(item);
+                out.push(item);
+            }
+        }
+        return out;
+    }
+    // 中文前缀匹配 name
+    const out = [];
+    for (const item of candidates) {
+        if (item.name.startsWith(kw))
+            out.push(item);
+    }
+    return out;
+}

package/build/CitySelect/style.d.ts

@@ -0,0 +1,4 @@
+import { Interpolation, Theme } from "@emotion/react";
+export type CitySelectStyle = Record<string, Interpolation<Theme>>;
+export declare function createStyle(primary: string): CitySelectStyle;
+export declare const DEFAULT_PRIMARY = "#2f7dff";

package/build/CitySelect/style.js

@@ -0,0 +1,237 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PRIMARY = void 0;
+exports.createStyle = createStyle;
+const react_1 = require("@emotion/react");
+// 设计变量（除 primary 外集中管理）
+const textPrimary = "#1f2328";
+const textSecondary = "#6b7280";
+const textTertiary = "#9ca3af";
+const bgPage = "#ffffff";
+const bgSubtle = "#f5f6f8";
+const border = "#e5e7eb";
+const fontStack = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
+// 将 #rrggbb 颜色按比例变暗，用于派生 primaryActive
+function darken(hex, amount) {
+    const m = hex.replace("#", "");
+    if (m.length !== 6)
+        return hex;
+    const r = parseInt(m.slice(0, 2), 16);
+    const g = parseInt(m.slice(2, 4), 16);
+    const b = parseInt(m.slice(4, 6), 16);
+    const f = (v) => Math.max(0, Math.min(255, Math.round(v * (1 - amount))));
+    const toHex = (v) => f(v).toString(16).padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+// 根据 primary 色值生成一整套样式；primaryActive 由 primary 派生
+function createStyle(primary) {
+    const primaryActive = darken(primary, 0.15);
+    return {
+        container: (0, react_1.css)({
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: 9999,
+            overflow: "hidden",
+            userSelect: "none",
+            color: textPrimary,
+            fontFamily: fontStack,
+            WebkitFontSmoothing: "antialiased",
+            MozOsxFontSmoothing: "grayscale",
+        }),
+        inner: (0, react_1.css)({
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundColor: bgPage,
+            transition: "transform .3s cubic-bezier(.22,.61,.36,1)",
+            willChange: "transform",
+        }),
+        innerEnter: (0, react_1.css)({
+            transform: "translateX(100%)",
+        }),
+        innerActive: (0, react_1.css)({
+            transform: "translateX(0)",
+        }),
+        innerExit: (0, react_1.css)({
+            transform: "translateX(100%)",
+        }),
+        sidebar: (0, react_1.css)({
+            position: "absolute",
+            top: "50%",
+            right: ".12rem",
+            transform: "translateY(-50%)",
+            zIndex: 2,
+            padding: ".1rem .06rem",
+            borderRadius: ".3rem",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: ".02rem",
+        }),
+        letter: (0, react_1.css)({
+            width: ".36rem",
+            height: ".36rem",
+            lineHeight: ".36rem",
+            textAlign: "center",
+            fontSize: ".22rem",
+            fontFamily: "Arial, sans-serif",
+            fontWeight: 500,
+            borderRadius: "50%",
+            color: textSecondary,
+            transition: "background-color .15s, color .15s, transform .15s",
+        }),
+        letterActive: (0, react_1.css)({
+            backgroundColor: primary,
+            color: "#fff",
+            transform: "scale(1.08)",
+        }),
+        bigLetter: (0, react_1.css)({
+            zIndex: 3,
+            position: "absolute",
+            fontFamily: "Arial, sans-serif",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            backgroundColor: "rgba(17,24,39,0.6)",
+            color: "#fff",
+            fontSize: ".6rem",
+            width: "1.4rem",
+            height: "1.4rem",
+            lineHeight: "1.4rem",
+            textAlign: "center",
+            borderRadius: ".24rem",
+            pointerEvents: "none",
+        }),
+        original: (0, react_1.css)({
+            height: "100%",
+            backgroundColor: bgPage,
+        }),
+        top: (0, react_1.css)({
+            padding: ".24rem .3rem",
+            borderBottom: `1px solid ${border}`,
+            "& > div": {
+                height: ".72rem",
+                backgroundColor: bgSubtle,
+                padding: "0 .24rem",
+                borderRadius: ".36rem",
+            },
+        }),
+        icon: (0, react_1.css)({
+            width: ".32rem",
+            height: ".32rem",
+            fill: textTertiary,
+            marginRight: ".15rem",
+            fontSize: 0,
+            flexShrink: 0,
+        }),
+        input: (0, react_1.css)({
+            flexGrow: 1,
+            height: "100%",
+            minWidth: 0,
+            fontSize: ".28rem",
+            lineHeight: ".72rem",
+            color: textPrimary,
+            fontFamily: "inherit",
+            border: "none",
+            outline: "none",
+            backgroundColor: "transparent",
+            padding: 0,
+            "&::placeholder": {
+                color: textTertiary,
+                lineHeight: ".72rem",
+            },
+        }),
+        exit: (0, react_1.css)({
+            whiteSpace: "nowrap",
+            marginLeft: ".2rem",
+            lineHeight: ".72rem",
+            fontSize: ".28rem",
+            color: primary,
+            cursor: "pointer",
+            transition: "opacity .15s, color .15s",
+            "&:active": {
+                color: primaryActive,
+                opacity: 0.75,
+            },
+        }),
+        list: (0, react_1.css)({
+            height: 0,
+            flexGrow: 1,
+            overflow: "auto",
+            position: "relative",
+            WebkitOverflowScrolling: "touch",
+        }),
+        locate: (0, react_1.css)({
+            display: "flex",
+            alignItems: "center",
+            padding: ".2rem .23rem",
+            borderBottom: `1px solid ${border}`,
+            backgroundColor: bgPage,
+            transition: "background-color .12s",
+            "&:active": {
+                backgroundColor: bgSubtle,
+            },
+        }),
+        locateIcon: (0, react_1.css)({
+            width: ".32rem",
+            height: ".32rem",
+            fill: primary,
+            marginRight: ".16rem",
+            fontSize: 0,
+            flexShrink: 0,
+        }),
+        locateLabel: (0, react_1.css)({
+            fontSize: ".24rem",
+            color: textTertiary,
+            marginRight: ".16rem",
+        }),
+        locateName: (0, react_1.css)({
+            fontSize: ".24rem",
+            color: primary,
+        }),
+        title: (0, react_1.css)({
+            padding: ".08rem .3rem",
+            fontSize: ".22rem",
+            fontWeight: 600,
+            color: textSecondary,
+            letterSpacing: ".02rem",
+            textTransform: "uppercase",
+            backgroundColor: bgSubtle,
+            position: "sticky",
+            top: 0,
+            zIndex: 1,
+        }),
+        item: (0, react_1.css)({
+            padding: ".24rem .3rem",
+            fontSize: ".3rem",
+            color: textPrimary,
+            borderBottom: `1px solid ${border}`,
+            backgroundColor: bgPage,
+            transition: "background-color .12s",
+            "&:active": {
+                backgroundColor: bgSubtle,
+            },
+        }),
+        searchList: (0, react_1.css)({
+            height: 0,
+            flexGrow: 1,
+            overflow: "auto",
+            WebkitOverflowScrolling: "touch",
+        }),
+        empty: (0, react_1.css)({
+            height: 0,
+            flexGrow: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: textTertiary,
+            fontSize: ".26rem",
+        }),
+    };
+}
+exports.DEFAULT_PRIMARY = "#2f7dff";