@vavt/react-ui 1.0.0

package/README.md

@@ -0,0 +1,137 @@
+# @vavt/react-ui
+
+面向 React 18/19 的 TypeScript 组件库，提供 ESM、CommonJS、NodeNext 兼容声明文件以及全量/按组件 CSS 入口。
+
+## 安装
+
+```bash
+npm install @vavt/react-ui
+```
+
+## 使用
+
+```tsx
+import { VlButton, VlCard } from '@vavt/react-ui';
+import '@vavt/react-ui/styles.css';
+
+export default function Example() {
+  return (
+    <VlCard>
+      <VlButton status="primary">开始使用</VlButton>
+    </VlCard>
+  );
+}
+```
+
+组件子路径和单组件样式也可以直接引用：
+
+```tsx
+import { VlButton } from '@vavt/react-ui/components/Button';
+import '@vavt/react-ui/base.css';
+import '@vavt/react-ui/components/Button/style.css';
+```
+
+全量样式入口 `styles.css` 已包含基础主题与所有组件样式，因此不要再同时引入 `base.css` 或单组件 CSS。
+
+## Next.js SSR / App Router
+
+发布后的 ESM 根入口和组件子路径都声明为 Client Component，Next.js App Router 可以直接从 Server Component 导入并继续获得服务端预渲染。若项目还通过源码别名或旧缓存消费，也可以用一个显式 `'use client'` wrapper 固定边界：
+
+```tsx
+// components/ui.ts
+'use client';
+
+export { VlButton, VlModal, VlSelect } from '@vavt/react-ui';
+```
+
+全局样式放在 `app/layout.tsx` 或其他全局入口中：
+
+```tsx
+import '@vavt/react-ui/styles.css';
+```
+
+Announcement、Dropdown、Tooltip 等可由受控状态打开的浮层会在 hydration 首轮保持结构一致，并在客户端挂载后迁移到 `document.body`；Modal、Drawer 和 MessageBox 的 Portal 内容仍属于客户端增强内容。命令式 `VlMessageBox.alert/confirm` 只可在浏览器事件或客户端组件中调用；服务端导入 `@vavt/react-ui/register` 不会再修改 Node 进程级 `globalThis`，如需注册请显式调用 `registerGlobalComponents(target)`。
+
+## 自动按需导入
+
+Vite 项目可安装独立的构建插件：
+
+```bash
+npm install -D @vavt/component-resolver
+```
+
+```ts
+// vite.config.ts
+import react from '@vitejs/plugin-react';
+import Components from '@vavt/component-resolver';
+
+export default {
+  plugins: [react(), Components()]
+};
+```
+
+配置后可以继续使用根入口命名导入：
+
+```tsx
+import { VlButton, VlCard } from '@vavt/react-ui';
+```
+
+构建时会转换为 Button、Card 的组件子路径，并注入各自的样式入口 `components/Button/style`，不会加载其他组件样式。此时不要再手动导入全量 `styles.css`。
+
+样式入口负责基础样式和跨组件样式依赖，因此不需要另外导入 `base.css`。例如 Table 内部会渲染 Scrollbar 与 Tooltip，只引用 Table 就会自动带上它们的样式；同页再单独使用 Tooltip 时，打包器按模块地址去重，不会产生重复规则。
+
+插件也支持直接使用未导入的 `<VlButton />`；该模式需要在 `tsconfig.json` 的原有 `types` 中追加 `@vavt/react-ui/global`。`@vavt/component-resolver` 是消费端可选工具，不是本包的依赖。
+
+## 受控 API 迁移
+
+当前版本统一使用 React 语义的受控属性；这是破坏性变更，旧的 Vue 风格模型属性已移除。
+
+| 组件                                               | 受控属性  | 非受控初始属性   |
+| -------------------------------------------------- | --------- | ---------------- |
+| Input、Textarea、NumberInput、Select、Slider、Tabs | `value`   | `defaultValue`   |
+| Checkbox、Switch                                   | `checked` | `defaultChecked` |
+| Modal、MessageBox、Drawer、Dropdown、Tooltip       | `open`    | `defaultOpen`    |
+
+Checkbox 数组选择使用 `VlCheckboxGroup`，其 `value/defaultValue` 为 `CheckboxValue[]`；Checkbox 的 `onChange` 返回 `(value, checked)`。Radio 使用 `VlRadioGroup` 管理单个 `RadioValue`，Radio 和 Switch 的事件也分别遵循各自组件的值语义。
+
+## 全局注册与类型提示
+
+在应用入口导入运行时注册和全量样式：
+
+```tsx
+import '@vavt/react-ui/register';
+import '@vavt/react-ui/styles.css';
+```
+
+在 `tsconfig.json` 的已有 `types` 中追加 `@vavt/react-ui/global`：
+
+```json
+{
+  "compilerOptions": {
+    "types": ["vite/client", "@vavt/react-ui/global"]
+  }
+}
+```
+
+现在可以直接使用全局组件，TypeScript 会同时检查组件名和 Props：
+
+```tsx
+export default function App() {
+  return <VlButton status="primary">开始使用</VlButton>;
+}
+```
+
+如果项目没有配置 `compilerOptions.types`，也可以在应用的 `.d.ts` 文件中添加：
+
+```ts
+/// <reference types="@vavt/react-ui/global" />
+```
+
+`registerGlobalComponents()` 也从包根入口导出，支持传入自定义对象；默认注册到 `globalThis`。全局注册会加载整个组件集合，按需场景仍建议使用组件子路径。
+
+## Peer dependencies
+
+- `react ^18.2 || ^19`
+- `react-dom ^18.2 || ^19`
+
+仓库开发说明见项目根目录 `docs/` 下的 [`Manual.md`](../../docs/Manual.md)。

package/dist/Alert-BGyLKuv0.js

@@ -0,0 +1,52 @@
+import { t as e } from "./icon-Cbvuv4yF.js";
+import { CircleAlert as t, CircleCheck as n, CircleX as r, Info as i, X as a } from "lucide-react";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region components/Alert/Alert.tsx
+var l = {
+	info: i,
+	success: n,
+	warning: t,
+	error: r
+}, u = o((t, n) => {
+	let { status: r = "info", title: i, icon: o, closable: u = !1, onClose: d, className: f, role: p = "alert", children: m, ...h } = t, g = [
+		"vl-alert",
+		`is-${r}`,
+		i ? "has-title" : "is-content-only",
+		f || ""
+	].filter(Boolean).join(" "), _ = o === void 0 ? l[r] : o, v = (e) => {
+		d?.(e);
+	};
+	return /* @__PURE__ */ c("div", {
+		ref: n,
+		className: g,
+		role: p,
+		...h,
+		children: [
+			_ ? e(_, "vl-alert__icon") : null,
+			/* @__PURE__ */ c("div", {
+				className: "vl-alert__body",
+				children: [i ? /* @__PURE__ */ s("div", {
+					className: "vl-alert__title",
+					children: i
+				}) : null, m === void 0 ? null : /* @__PURE__ */ s("div", {
+					className: "vl-alert__content",
+					children: m
+				})]
+			}),
+			u ? /* @__PURE__ */ s("button", {
+				type: "button",
+				className: "vl-alert__close",
+				"aria-label": "关闭提示",
+				onClick: v,
+				children: /* @__PURE__ */ s(a, { "aria-hidden": "true" })
+			}) : null
+		]
+	});
+});
+u.displayName = "VlAlert";
+//#endregion
+//#region components/Alert/index.ts
+var d = u, f = u;
+//#endregion
+export { d as n, f as t };

package/dist/Alert-tPSJmCXK.cjs

@@ -0,0 +1 @@
+const e=require("./icon-DRLyKu8p.cjs");let t=require("lucide-react"),n=require("react"),r=require("react/jsx-runtime");var i={info:t.Info,success:t.CircleCheck,warning:t.CircleAlert,error:t.CircleX},a=(0,n.forwardRef)((n,a)=>{let{status:o=`info`,title:s,icon:c,closable:l=!1,onClose:u,className:d,role:f=`alert`,children:p,...m}=n,h=[`vl-alert`,`is-${o}`,s?`has-title`:`is-content-only`,d||``].filter(Boolean).join(` `),g=c===void 0?i[o]:c,_=e=>{u?.(e)};return(0,r.jsxs)(`div`,{ref:a,className:h,role:f,...m,children:[g?e.t(g,`vl-alert__icon`):null,(0,r.jsxs)(`div`,{className:`vl-alert__body`,children:[s?(0,r.jsx)(`div`,{className:`vl-alert__title`,children:s}):null,p===void 0?null:(0,r.jsx)(`div`,{className:`vl-alert__content`,children:p})]}),l?(0,r.jsx)(`button`,{type:`button`,className:`vl-alert__close`,"aria-label":`关闭提示`,onClick:_,children:(0,r.jsx)(t.X,{"aria-hidden":`true`})}):null]})});a.displayName=`VlAlert`;var o=a,s=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});

package/dist/Anchor-QZROepM_.js

@@ -0,0 +1,197 @@
+import { t as e } from "./effect-nifYL_rH.js";
+import { n as t, t as n } from "./state-oH-YwB7_.js";
+import { forwardRef as r, useCallback as i, useEffect as a, useImperativeHandle as o, useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region components/Anchor/Anchor.tsx
+var f = (e) => e.flatMap((e) => [e, ...e.children ? f(e.children) : []]), p = (e) => e.startsWith("#") && e.length > 1, m = (e) => {
+	if (!p(e)) return null;
+	try {
+		return decodeURIComponent(e.slice(1));
+	} catch {
+		return e.slice(1);
+	}
+}, h = (e) => typeof e == "function" ? e() : e ?? null, g = (e) => e[0]?.href, _ = (e, t) => !!(t && e?.some((e) => e.href === t || _(e.children, t))), v = r((r, p) => {
+	let { items: v = [], title: y, activeHref: b, defaultActiveHref: x, getContainer: S, offsetTop: C = 0, scrollBehavior: w = "smooth", className: T, id: E, "aria-label": D = "锚点导航", onChange: O, ...k } = r, A = c(null), [j, M] = l(0), [N, P] = l({
+		top: 0,
+		height: 0
+	}), F = s(() => f(v), [v]), I = n(r, "activeHref"), L = s(() => {
+		if (typeof window < "u") {
+			let e = window.location.hash;
+			if (e && F.some((t) => t.href === e)) return e;
+		}
+		return x ?? g(F);
+	}, [x, F]), [R, z] = t({
+		value: b,
+		defaultValue: L,
+		controlled: I,
+		onChange: (e) => {
+			e !== void 0 && O?.(e);
+		}
+	}), B = c(R), V = c(z), H = c(/* @__PURE__ */ new Map()), U = c(void 0);
+	a(() => {
+		B.current = R, V.current = z;
+	}, [R, z]);
+	let W = i((e) => {
+		!e || e === B.current || (B.current = e, V.current(e));
+	}, []), G = i(() => h(S), [S]), K = i(() => {
+		if (typeof document > "u") return;
+		let e = G(), t = e?.getBoundingClientRect(), n = (t?.top ?? 0) + Math.max(0, C), r = t?.bottom ?? window.innerHeight, i = F.map((e) => {
+			let t = m(e.href), n = t ? document.getElementById(t) : null;
+			return n ? {
+				href: e.href,
+				top: n.getBoundingClientRect().top
+			} : null;
+		}).filter((e) => !!e);
+		if (!i.length) return;
+		if (e ? e.scrollTop + e.clientHeight >= e.scrollHeight - 1 : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1) {
+			W(i[i.length - 1]?.href);
+			return;
+		}
+		let a = i.filter((e) => e.top <= n + (r - n) * .3), o = (a.length ? a[a.length - 1] : i[0])?.href;
+		W(o);
+	}, [
+		F,
+		C,
+		G,
+		W
+	]);
+	a(() => {
+		if (typeof document > "u") return;
+		let e = G(), t = e ?? window, n = F.map((e) => {
+			let t = m(e.href);
+			return t ? document.getElementById(t) : null;
+		}).filter((e) => !!e);
+		if (!n.length) return;
+		if (t.addEventListener("scroll", K, { passive: !0 }), K(), typeof IntersectionObserver > "u") return () => t.removeEventListener("scroll", K);
+		let r = new IntersectionObserver(K, {
+			root: e ?? null,
+			rootMargin: `-${Math.max(0, C)}px 0px -70% 0px`,
+			threshold: [0, 1]
+		});
+		return n.forEach((e) => r.observe(e)), () => {
+			r.disconnect(), t.removeEventListener("scroll", K);
+		};
+	}, [
+		F,
+		C,
+		j,
+		G,
+		K
+	]), a(() => {
+		if (typeof window > "u") return;
+		let e = () => {
+			let e = F.some((e) => e.href === window.location.hash) ? window.location.hash : void 0;
+			W(e);
+		};
+		return window.addEventListener("hashchange", e), () => window.removeEventListener("hashchange", e);
+	}, [F, W]), a(() => {
+		I || R && F.some((e) => e.href === R) || W(g(F));
+	}, [
+		R,
+		F,
+		I,
+		W
+	]);
+	let q = i(() => M((e) => e + 1), []);
+	o(p, () => ({ refresh: q }), [q]);
+	let J = i(() => {
+		let e = A.current, t = R ? H.current.get(R) : void 0;
+		if (!e || !t) return;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = {
+			top: r.top - n.top,
+			height: r.height
+		};
+		P((e) => e.top === i.top && e.height === i.height ? e : i);
+	}, [R]), Y = i(() => {
+		typeof window > "u" || (U.current !== void 0 && window.cancelAnimationFrame(U.current), U.current = window.requestAnimationFrame(() => {
+			U.current = void 0, J();
+		}));
+	}, [J]);
+	e(() => {
+		Y();
+		let e = A.current;
+		if (!e || typeof ResizeObserver > "u") return () => {
+			U.current !== void 0 && window.cancelAnimationFrame(U.current);
+		};
+		let t = new ResizeObserver(Y);
+		return t.observe(e), () => {
+			t.disconnect(), U.current !== void 0 && window.cancelAnimationFrame(U.current);
+		};
+	}, [
+		F,
+		j,
+		Y,
+		y
+	]);
+	let X = (e, t) => {
+		if (t.defaultPrevented || t.button !== 0 || t.metaKey || t.ctrlKey || t.shiftKey || t.altKey) return;
+		let n = m(e.href);
+		if (!n || typeof document > "u") return;
+		let r = document.getElementById(n);
+		if (!r) return;
+		t.preventDefault();
+		let i = G();
+		if (i) {
+			let e = r.getBoundingClientRect(), t = i.getBoundingClientRect(), n = Math.max(0, i.scrollTop + e.top - t.top - Math.max(0, C));
+			i.scrollTo({
+				top: n,
+				behavior: w
+			});
+		} else {
+			let e = Math.max(0, window.scrollY + r.getBoundingClientRect().top - Math.max(0, C));
+			window.scrollTo({
+				top: e,
+				behavior: w
+			});
+		}
+		window.history.pushState(null, "", e.href), W(e.href);
+	}, Z = (e) => /* @__PURE__ */ u("ul", {
+		className: "vl-anchor__list",
+		children: e.map((e) => {
+			let t = R === e.href, n = t || _(e.children, R);
+			return /* @__PURE__ */ d("li", {
+				className: `vl-anchor__item${n ? " is-active" : ""}`,
+				children: [/* @__PURE__ */ u("a", {
+					ref: (t) => {
+						t ? H.current.set(e.href, t) : H.current.delete(e.href), t && e.href === R && Y();
+					},
+					className: `vl-anchor__link${n ? " is-active" : ""}`,
+					href: e.href,
+					"aria-current": t ? "location" : void 0,
+					onClick: (t) => X(e, t),
+					children: e.title
+				}), e.children?.length ? Z(e.children) : null]
+			}, e.href);
+		})
+	}), Q = ["vl-anchor", T || ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ d("nav", {
+		id: E,
+		className: Q,
+		"aria-label": D,
+		...k,
+		children: [y ? /* @__PURE__ */ u("div", {
+			className: "vl-anchor__title",
+			children: y
+		}) : null, /* @__PURE__ */ d("div", {
+			ref: A,
+			className: "vl-anchor__body",
+			children: [/* @__PURE__ */ u("span", {
+				className: "vl-anchor__rail",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ u("span", {
+					className: "vl-anchor__indicator",
+					style: {
+						top: N.top,
+						height: N.height
+					}
+				})
+			}), Z(v)]
+		})]
+	});
+});
+v.displayName = "VlAnchor";
+//#endregion
+//#region components/Anchor/index.ts
+var y = v, b = v;
+//#endregion
+export { y as n, b as t };

package/dist/Anchor-iriRYxEs.cjs

@@ -0,0 +1 @@
+const e=require("./effect-BpNxm_06.cjs"),t=require("./state-ZBA75xZ_.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=e=>e.flatMap(e=>[e,...e.children?i(e.children):[]]),a=e=>e.startsWith(`#`)&&e.length>1,o=e=>{if(!a(e))return null;try{return decodeURIComponent(e.slice(1))}catch{return e.slice(1)}},s=e=>typeof e==`function`?e():e??null,c=e=>e[0]?.href,l=(e,t)=>!!(t&&e?.some(e=>e.href===t||l(e.children,t))),u=(0,n.forwardRef)((a,u)=>{let{items:d=[],title:f,activeHref:p,defaultActiveHref:m,getContainer:h,offsetTop:g=0,scrollBehavior:_=`smooth`,className:v,id:y,"aria-label":b=`锚点导航`,onChange:x,...S}=a,C=(0,n.useRef)(null),[w,T]=(0,n.useState)(0),[E,D]=(0,n.useState)({top:0,height:0}),O=(0,n.useMemo)(()=>i(d),[d]),k=t.t(a,`activeHref`),A=(0,n.useMemo)(()=>{if(typeof window<`u`){let e=window.location.hash;if(e&&O.some(t=>t.href===e))return e}return m??c(O)},[m,O]),[j,M]=t.n({value:p,defaultValue:A,controlled:k,onChange:e=>{e!==void 0&&x?.(e)}}),N=(0,n.useRef)(j),P=(0,n.useRef)(M),F=(0,n.useRef)(new Map),I=(0,n.useRef)(void 0);(0,n.useEffect)(()=>{N.current=j,P.current=M},[j,M]);let L=(0,n.useCallback)(e=>{!e||e===N.current||(N.current=e,P.current(e))},[]),R=(0,n.useCallback)(()=>s(h),[h]),z=(0,n.useCallback)(()=>{if(typeof document>`u`)return;let e=R(),t=e?.getBoundingClientRect(),n=(t?.top??0)+Math.max(0,g),r=t?.bottom??window.innerHeight,i=O.map(e=>{let t=o(e.href),n=t?document.getElementById(t):null;return n?{href:e.href,top:n.getBoundingClientRect().top}:null}).filter(e=>!!e);if(!i.length)return;if(e?e.scrollTop+e.clientHeight>=e.scrollHeight-1:window.scrollY+window.innerHeight>=document.documentElement.scrollHeight-1){L(i[i.length-1]?.href);return}let a=i.filter(e=>e.top<=n+(r-n)*.3),s=(a.length?a[a.length-1]:i[0])?.href;L(s)},[O,g,R,L]);(0,n.useEffect)(()=>{if(typeof document>`u`)return;let e=R(),t=e??window,n=O.map(e=>{let t=o(e.href);return t?document.getElementById(t):null}).filter(e=>!!e);if(!n.length)return;if(t.addEventListener(`scroll`,z,{passive:!0}),z(),typeof IntersectionObserver>`u`)return()=>t.removeEventListener(`scroll`,z);let r=new IntersectionObserver(z,{root:e??null,rootMargin:`-${Math.max(0,g)}px 0px -70% 0px`,threshold:[0,1]});return n.forEach(e=>r.observe(e)),()=>{r.disconnect(),t.removeEventListener(`scroll`,z)}},[O,g,w,R,z]),(0,n.useEffect)(()=>{if(typeof window>`u`)return;let e=()=>{let e=O.some(e=>e.href===window.location.hash)?window.location.hash:void 0;L(e)};return window.addEventListener(`hashchange`,e),()=>window.removeEventListener(`hashchange`,e)},[O,L]),(0,n.useEffect)(()=>{k||j&&O.some(e=>e.href===j)||L(c(O))},[j,O,k,L]);let B=(0,n.useCallback)(()=>T(e=>e+1),[]);(0,n.useImperativeHandle)(u,()=>({refresh:B}),[B]);let V=(0,n.useCallback)(()=>{let e=C.current,t=j?F.current.get(j):void 0;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i={top:r.top-n.top,height:r.height};D(e=>e.top===i.top&&e.height===i.height?e:i)},[j]),H=(0,n.useCallback)(()=>{typeof window>`u`||(I.current!==void 0&&window.cancelAnimationFrame(I.current),I.current=window.requestAnimationFrame(()=>{I.current=void 0,V()}))},[V]);e.t(()=>{H();let e=C.current;if(!e||typeof ResizeObserver>`u`)return()=>{I.current!==void 0&&window.cancelAnimationFrame(I.current)};let t=new ResizeObserver(H);return t.observe(e),()=>{t.disconnect(),I.current!==void 0&&window.cancelAnimationFrame(I.current)}},[O,w,H,f]);let U=(e,t)=>{if(t.defaultPrevented||t.button!==0||t.metaKey||t.ctrlKey||t.shiftKey||t.altKey)return;let n=o(e.href);if(!n||typeof document>`u`)return;let r=document.getElementById(n);if(!r)return;t.preventDefault();let i=R();if(i){let e=r.getBoundingClientRect(),t=i.getBoundingClientRect(),n=Math.max(0,i.scrollTop+e.top-t.top-Math.max(0,g));i.scrollTo({top:n,behavior:_})}else{let e=Math.max(0,window.scrollY+r.getBoundingClientRect().top-Math.max(0,g));window.scrollTo({top:e,behavior:_})}window.history.pushState(null,``,e.href),L(e.href)},W=e=>(0,r.jsx)(`ul`,{className:`vl-anchor__list`,children:e.map(e=>{let t=j===e.href,n=t||l(e.children,j);return(0,r.jsxs)(`li`,{className:`vl-anchor__item${n?` is-active`:``}`,children:[(0,r.jsx)(`a`,{ref:t=>{t?F.current.set(e.href,t):F.current.delete(e.href),t&&e.href===j&&H()},className:`vl-anchor__link${n?` is-active`:``}`,href:e.href,"aria-current":t?`location`:void 0,onClick:t=>U(e,t),children:e.title}),e.children?.length?W(e.children):null]},e.href)})}),G=[`vl-anchor`,v||``].filter(Boolean).join(` `);return(0,r.jsxs)(`nav`,{id:y,className:G,"aria-label":b,...S,children:[f?(0,r.jsx)(`div`,{className:`vl-anchor__title`,children:f}):null,(0,r.jsxs)(`div`,{ref:C,className:`vl-anchor__body`,children:[(0,r.jsx)(`span`,{className:`vl-anchor__rail`,"aria-hidden":`true`,children:(0,r.jsx)(`span`,{className:`vl-anchor__indicator`,style:{top:E.top,height:E.height}})}),W(d)]})]})});u.displayName=`VlAnchor`;var d=u,f=u;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return f}});

package/dist/Announcement-D_NccvTm.js

@@ -0,0 +1,212 @@
+import { t as e } from "./icon-Cbvuv4yF.js";
+import { t } from "./effect-nifYL_rH.js";
+import { n, t as r } from "./state-oH-YwB7_.js";
+import { t as ee } from "./client-pj_wzx28.js";
+import { n as te } from "./refs-D5IYOBaf.js";
+import { Megaphone as ne, X as re } from "lucide-react";
+import { forwardRef as i, useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l, useSyncExternalStore as u } from "react";
+import { Fragment as ie, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { createPortal as ae } from "react-dom";
+//#region components/Announcement/host.ts
+var p = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Map(), h = null, g = 0, _ = null, v = () => p.forEach((e) => e()), y = () => {
+	let e = null, t = -Infinity;
+	return m.forEach((n, r) => {
+		n >= t && (e = r, t = n);
+	}), e;
+}, oe = () => ++g, se = (e, t = 0) => {
+	m.delete(e), m.set(e, t);
+	let n = h === null ? -Infinity : m.get(h) ?? -Infinity;
+	(h === null || t >= n) && (h = e), v();
+}, ce = (e) => {
+	m.delete(e), h === e && (h = y(), v());
+}, le = (e) => u((e) => (p.add(e), () => p.delete(e)), () => h === e, () => !1), ue = () => typeof document > "u" ? null : ((!_ || !document.body.contains(_)) && (_ = document.createElement("div"), _.className = "vl-announcement-host", document.body.appendChild(_)), _), de = () => {
+	m.size > 0 || !_ || (_.remove(), _ = null);
+}, fe = 280, pe = "data-vl-announcement-global", me = () => {
+	let [e, t] = l(!1);
+	return o(() => {
+		let e = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		if (!e) return;
+		let n = () => t(e.matches);
+		return n(), e.addEventListener?.("change", n), () => e.removeEventListener?.("change", n);
+	}, []), e;
+}, b = i((i, u) => {
+	let { items: p, activeKey: m, defaultActiveKey: h, open: g, defaultOpen: _ = !0, autoPlay: v = !0, interval: y = 5e3, pauseOnHover: b = !0, pauseOnFocus: x = !0, status: S = "info", icon: C = ne, closable: he = !1, renderItem: w, className: T, role: ge = "region", tabIndex: _e, "aria-label": ve = "公告", "aria-live": ye, onMouseEnter: be, onMouseLeave: xe, onFocusCapture: Se, onBlurCapture: Ce, onActiveChange: we, onOpenChange: Te, onClose: Ee, onItemClick: E, ...D } = i, O = D[pe] === "true", [k] = l(oe), A = c(null), j = c(null), De = ee(), Oe = s(() => te(j, u), [u]), [M, ke] = l(null), [Ae, je] = l(0), N = le(k), Me = r(i, "activeKey"), Ne = r(i, "open"), [P, F] = n({
+		value: m,
+		defaultValue: h ?? p[0]?.key,
+		controlled: Me,
+		onChange: (e) => {
+			let t = p.findIndex((t) => t.key === e), n = p[t];
+			n && we?.(n.key, n, t);
+		}
+	}), [I, Pe] = n({
+		value: !!g,
+		defaultValue: _,
+		controlled: Ne,
+		onChange: Te
+	}), [Fe, L] = l(!1), [Ie, R] = l(!1), [Le, Re] = l(() => typeof document > "u" || !document.hidden), [ze, z] = l(void 0), [Be, B] = l(!1), V = c(void 0), H = c(void 0), U = c(void 0), W = me(), G = p.findIndex((e) => e.key === P), K = G >= 0 ? G : p.length ? 0 : -1, q = K >= 0 ? p[K] : void 0, J = q?.key, Y = p.findIndex((e) => e.key === ze), X = Y >= 0 ? p[Y] : void 0, Ve = !Le || b && Fe || x && Ie, Z = N && I && v && y > 0 && p.length > 1 && !Ve, He = s(() => [
+		"vl-announcement",
+		`is-${S}`,
+		T || ""
+	].filter(Boolean).join(" "), [T, S]), Q = a((e) => {
+		F(e.key);
+	}, [F]);
+	o(() => {
+		J !== void 0 && J !== P && Q(q);
+	}, [
+		q,
+		P,
+		J,
+		Q
+	]), o(() => {
+		let e = ue();
+		if (e) return ke(e), se(k, +!!O), () => {
+			ce(k), de();
+		};
+	}, [k, O]), o(() => {
+		if (!N || !I || !j.current || !A.current) {
+			je(0);
+			return;
+		}
+		let e = () => je(j.current?.getBoundingClientRect().height ?? 0);
+		if (e(), typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(e);
+		return t.observe(j.current), () => t.disconnect();
+	}, [
+		N,
+		I,
+		J,
+		C,
+		he,
+		w
+	]), o(() => {
+		let e = () => Re(!document.hidden);
+		return document.addEventListener("visibilitychange", e), () => document.removeEventListener("visibilitychange", e);
+	}, []), o(() => {
+		if (!Z || !q) return;
+		let e = window.setTimeout(() => {
+			let e = p[(K + 1) % p.length];
+			e && Q(e);
+		}, y);
+		return () => window.clearTimeout(e);
+	}, [
+		q,
+		y,
+		p,
+		K,
+		Q,
+		Z
+	]);
+	let $ = a(() => {
+		H.current !== void 0 && window.cancelAnimationFrame(H.current), U.current !== void 0 && window.clearTimeout(U.current), H.current = void 0, U.current = void 0, B(!1), z(void 0);
+	}, []);
+	t(() => {
+		if (J === void 0) {
+			V.current = void 0, $();
+			return;
+		}
+		let e = V.current;
+		if (V.current = J, e === void 0 || e === J || W) {
+			$();
+			return;
+		}
+		if (!p.some((t) => t.key === e)) {
+			$();
+			return;
+		}
+		$(), z(e), H.current = window.requestAnimationFrame(() => {
+			B(!0), U.current = window.setTimeout($, fe);
+		});
+	}, [
+		$,
+		p,
+		W,
+		J
+	]), o(() => $, [$]);
+	let Ue = () => {
+		Pe(!1), Ee?.();
+	}, We = (e) => {
+		R(!0), Se?.(e);
+	}, Ge = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || R(!1), Ce?.(e);
+	}, Ke = (e, t) => {
+		let n = w ? w(e, t) : e.content, r = (n) => {
+			E?.(e, t, n);
+		};
+		if (e.href) {
+			let t = e.rel ?? (e.target === "_blank" ? "noopener noreferrer" : void 0);
+			return /* @__PURE__ */ d("a", {
+				className: "vl-announcement__link",
+				href: e.href,
+				target: e.target,
+				rel: t,
+				onClick: r,
+				children: n
+			});
+		}
+		return E ? /* @__PURE__ */ d("button", {
+			type: "button",
+			className: "vl-announcement__link",
+			onClick: r,
+			children: n
+		}) : /* @__PURE__ */ d("span", {
+			className: "vl-announcement__text",
+			children: n
+		});
+	};
+	if (!I || !q) return null;
+	let qe = _e ?? (v && p.length > 1 ? 0 : void 0), Je = /* @__PURE__ */ f("div", {
+		ref: Oe,
+		className: He,
+		role: ge,
+		tabIndex: qe,
+		"aria-label": ve,
+		onMouseEnter: (e) => {
+			L(!0), be?.(e);
+		},
+		onMouseLeave: (e) => {
+			L(!1), xe?.(e);
+		},
+		onFocusCapture: We,
+		onBlurCapture: Ge,
+		...D,
+		children: [
+			C ? e(C, "vl-announcement__icon") : null,
+			/* @__PURE__ */ d("div", {
+				className: "vl-announcement__viewport",
+				"aria-live": ye ?? (Z && !Me ? "off" : "polite"),
+				"aria-atomic": "true",
+				children: /* @__PURE__ */ f("div", {
+					className: ["vl-announcement__track", Be ? "is-animating" : ""].filter(Boolean).join(" "),
+					children: [X ? /* @__PURE__ */ d("div", {
+						className: "vl-announcement__item is-outgoing",
+						"aria-hidden": "true",
+						children: Ke(X, Y)
+					}) : null, /* @__PURE__ */ d("div", {
+						className: `vl-announcement__item${X ? " is-incoming" : ""}`,
+						onTransitionEnd: $,
+						children: Ke(q, K)
+					}, `${typeof q.key}-${q.key}`)]
+				})
+			}),
+			he ? /* @__PURE__ */ d("button", {
+				type: "button",
+				className: "vl-announcement__close",
+				"aria-label": "关闭公告",
+				onClick: Ue,
+				children: /* @__PURE__ */ d(re, { "aria-hidden": "true" })
+			}) : null
+		]
+	});
+	return De ? /* @__PURE__ */ f(ie, { children: [N ? /* @__PURE__ */ d("div", {
+		ref: A,
+		className: "vl-announcement-placeholder",
+		"aria-hidden": "true",
+		style: { blockSize: Ae ? `${Ae}px` : void 0 }
+	}) : null, N && M ? ae(Je, M) : null] }) : Je;
+});
+b.displayName = "VlAnnouncement";
+//#endregion
+//#region components/Announcement/index.ts
+var x = b, S = b;
+//#endregion
+export { x as n, S as t };

package/dist/Announcement-XjJyJ28N.cjs

@@ -0,0 +1 @@
+const e=require("./icon-DRLyKu8p.cjs"),t=require("./effect-BpNxm_06.cjs"),n=require("./state-ZBA75xZ_.cjs"),r=require("./client-BkoqeUs3.cjs"),ee=require("./refs-DCqd87V8.cjs");let te=require("lucide-react"),i=require("react"),a=require("react/jsx-runtime"),ne=require("react-dom");var o=new Set,s=new Map,c=null,l=0,u=null,d=()=>o.forEach(e=>e()),f=()=>{let e=null,t=-1/0;return s.forEach((n,r)=>{n>=t&&(e=r,t=n)}),e},re=()=>++l,ie=(e,t=0)=>{s.delete(e),s.set(e,t);let n=c===null?-1/0:s.get(c)??-1/0;(c===null||t>=n)&&(c=e),d()},ae=e=>{s.delete(e),c===e&&(c=f(),d())},oe=e=>(0,i.useSyncExternalStore)(e=>(o.add(e),()=>o.delete(e)),()=>c===e,()=>!1),se=()=>typeof document>`u`?null:((!u||!document.body.contains(u))&&(u=document.createElement(`div`),u.className=`vl-announcement-host`,document.body.appendChild(u)),u),ce=()=>{s.size>0||!u||(u.remove(),u=null)},le=280,ue=`data-vl-announcement-global`,de=()=>{let[e,t]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{let e=window.matchMedia?.(`(prefers-reduced-motion: reduce)`);if(!e)return;let n=()=>t(e.matches);return n(),e.addEventListener?.(`change`,n),()=>e.removeEventListener?.(`change`,n)},[]),e},p=(0,i.forwardRef)((o,s)=>{let{items:c,activeKey:l,defaultActiveKey:u,open:d,defaultOpen:f=!0,autoPlay:p=!0,interval:m=5e3,pauseOnHover:h=!0,pauseOnFocus:fe=!0,status:g=`info`,icon:_=te.Megaphone,closable:v=!1,renderItem:y,className:b,role:pe=`region`,tabIndex:me,"aria-label":he=`公告`,"aria-live":ge,onMouseEnter:_e,onMouseLeave:ve,onFocusCapture:ye,onBlurCapture:be,onActiveChange:xe,onOpenChange:Se,onClose:Ce,onItemClick:x,...S}=o,C=S[ue]===`true`,[w]=(0,i.useState)(re),T=(0,i.useRef)(null),E=(0,i.useRef)(null),we=r.t(),Te=(0,i.useMemo)(()=>ee.n(E,s),[s]),[D,Ee]=(0,i.useState)(null),[O,k]=(0,i.useState)(0),A=oe(w),j=n.t(o,`activeKey`),De=n.t(o,`open`),[M,N]=n.n({value:l,defaultValue:u??c[0]?.key,controlled:j,onChange:e=>{let t=c.findIndex(t=>t.key===e),n=c[t];n&&xe?.(n.key,n,t)}}),[P,Oe]=n.n({value:!!d,defaultValue:f,controlled:De,onChange:Se}),[ke,F]=(0,i.useState)(!1),[Ae,I]=(0,i.useState)(!1),[je,Me]=(0,i.useState)(()=>typeof document>`u`||!document.hidden),[Ne,L]=(0,i.useState)(void 0),[Pe,R]=(0,i.useState)(!1),z=(0,i.useRef)(void 0),B=(0,i.useRef)(void 0),V=(0,i.useRef)(void 0),H=de(),U=c.findIndex(e=>e.key===M),W=U>=0?U:c.length?0:-1,G=W>=0?c[W]:void 0,K=G?.key,q=c.findIndex(e=>e.key===Ne),J=q>=0?c[q]:void 0,Fe=!je||h&&ke||fe&&Ae,Y=A&&P&&p&&m>0&&c.length>1&&!Fe,Ie=(0,i.useMemo)(()=>[`vl-announcement`,`is-${g}`,b||``].filter(Boolean).join(` `),[b,g]),X=(0,i.useCallback)(e=>{N(e.key)},[N]);(0,i.useEffect)(()=>{K!==void 0&&K!==M&&X(G)},[G,M,K,X]),(0,i.useEffect)(()=>{let e=se();if(e)return Ee(e),ie(w,+!!C),()=>{ae(w),ce()}},[w,C]),(0,i.useEffect)(()=>{if(!A||!P||!E.current||!T.current){k(0);return}let e=()=>k(E.current?.getBoundingClientRect().height??0);if(e(),typeof ResizeObserver>`u`)return;let t=new ResizeObserver(e);return t.observe(E.current),()=>t.disconnect()},[A,P,K,_,v,y]),(0,i.useEffect)(()=>{let e=()=>Me(!document.hidden);return document.addEventListener(`visibilitychange`,e),()=>document.removeEventListener(`visibilitychange`,e)},[]),(0,i.useEffect)(()=>{if(!Y||!G)return;let e=window.setTimeout(()=>{let e=c[(W+1)%c.length];e&&X(e)},m);return()=>window.clearTimeout(e)},[G,m,c,W,X,Y]);let Z=(0,i.useCallback)(()=>{B.current!==void 0&&window.cancelAnimationFrame(B.current),V.current!==void 0&&window.clearTimeout(V.current),B.current=void 0,V.current=void 0,R(!1),L(void 0)},[]);t.t(()=>{if(K===void 0){z.current=void 0,Z();return}let e=z.current;if(z.current=K,e===void 0||e===K||H){Z();return}if(!c.some(t=>t.key===e)){Z();return}Z(),L(e),B.current=window.requestAnimationFrame(()=>{R(!0),V.current=window.setTimeout(Z,le)})},[Z,c,H,K]),(0,i.useEffect)(()=>Z,[Z]);let Le=()=>{Oe(!1),Ce?.()},Re=e=>{I(!0),ye?.(e)},ze=e=>{e.currentTarget.contains(e.relatedTarget)||I(!1),be?.(e)},Q=(e,t)=>{let n=y?y(e,t):e.content,r=n=>{x?.(e,t,n)};if(e.href){let t=e.rel??(e.target===`_blank`?`noopener noreferrer`:void 0);return(0,a.jsx)(`a`,{className:`vl-announcement__link`,href:e.href,target:e.target,rel:t,onClick:r,children:n})}return x?(0,a.jsx)(`button`,{type:`button`,className:`vl-announcement__link`,onClick:r,children:n}):(0,a.jsx)(`span`,{className:`vl-announcement__text`,children:n})};if(!P||!G)return null;let Be=me??(p&&c.length>1?0:void 0),$=(0,a.jsxs)(`div`,{ref:Te,className:Ie,role:pe,tabIndex:Be,"aria-label":he,onMouseEnter:e=>{F(!0),_e?.(e)},onMouseLeave:e=>{F(!1),ve?.(e)},onFocusCapture:Re,onBlurCapture:ze,...S,children:[_?e.t(_,`vl-announcement__icon`):null,(0,a.jsx)(`div`,{className:`vl-announcement__viewport`,"aria-live":ge??(Y&&!j?`off`:`polite`),"aria-atomic":`true`,children:(0,a.jsxs)(`div`,{className:[`vl-announcement__track`,Pe?`is-animating`:``].filter(Boolean).join(` `),children:[J?(0,a.jsx)(`div`,{className:`vl-announcement__item is-outgoing`,"aria-hidden":`true`,children:Q(J,q)}):null,(0,a.jsx)(`div`,{className:`vl-announcement__item${J?` is-incoming`:``}`,onTransitionEnd:Z,children:Q(G,W)},`${typeof G.key}-${G.key}`)]})}),v?(0,a.jsx)(`button`,{type:`button`,className:`vl-announcement__close`,"aria-label":`关闭公告`,onClick:Le,children:(0,a.jsx)(te.X,{"aria-hidden":`true`})}):null]});return we?(0,a.jsxs)(a.Fragment,{children:[A?(0,a.jsx)(`div`,{ref:T,className:`vl-announcement-placeholder`,"aria-hidden":`true`,style:{blockSize:O?`${O}px`:void 0}}):null,A&&D?(0,ne.createPortal)($,D):null]}):$});p.displayName=`VlAnnouncement`;var m=p,h=p;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return h}});