@endfield-ui/react 1.1.0 → 1.2.1

package/NOTICE.md

@@ -21,7 +21,7 @@
 
 ## Game 实机风格入口的官方图片
 
-组件库有一个单独的入口 `@endfield-ui/react/game`（源码在 `packages/ui/src/game`），收的是照游戏内界面复刻的一组控件。**它带着 25 张官方图片**，这是本仓库里唯一有官方素材的地方：
+组件库有一个单独的入口 `@endfield-ui/react/game`（源码在 `packages/ui/src/game`），收的是照游戏内界面复刻的一组控件，和一个官网的开屏页。**它带着 30 张官方图片**，这是本仓库里唯一有官方素材的地方：
 
 | 用在哪 | 张数 | 位置（相对 `packages/ui/src/game`） | 随 npm 包 |
 | --- | --- | --- | --- |
@@ -29,11 +29,12 @@
 | `BannerAlert`、`FullWidthAlert` 的横幅、底图与标志底图 | 4 | `banner-alert/assets/` | 是 |
 | `ItemCard` 的亮暗背景与稀有度底边 | 12 | `item-card/assets/` | 是 |
 | `ItemTooltipCard` 的标题纹理、详情入口图标、正文底图 | 3 | `item-tooltip-card/assets/` | 是 |
+| `EndfieldSplashScreen` 的底图（横、竖各一张）、游戏标志、微标与三角标 | 5 | `splash-screen/assets/` | 是 |
 | 预览站里物品示例用的图标 | 5 | `item-card/assets/` | 否 |
 
-- 这些图片取自游戏界面与物品图，经社区项目 [EndfieldMap](https://github.com/ArkEndfield/EndfieldMap) 和 EndfieldWiki 转来。**本仓库没有取得授权**，两个上游仓库也没有为它们标明许可。
+- 前四行和最后一行的 25 张取自游戏界面与物品图，经社区项目 [EndfieldMap](https://github.com/ArkEndfield/EndfieldMap) 和 EndfieldWiki 转来；`EndfieldSplashScreen` 的 5 张是 2026-10-14 直接从[官网](https://endfield.hypergryph.com/)首页的加载页取的，原样存。**本仓库没有取得授权**，两个上游仓库也没有为它们标明许可。
 - 它们的权利归鹰角网络及其权利人。**MIT 许可不覆盖这些图片**，本仓库不宣称对它们有任何权利，也给不了使用方使用它们的权利。
-- 其中 `banner-alert/assets/deco_common_logo_bg.png` 里是官方的「终末地 / ENDFIELD INDUSTRIES」标志；`AnimatedDialog` 的装饰条上有代码画的 `ARKNIGHTS:ENDFIELD`、`ENDFIELD` 字样。这两处涉及商标。
+- 其中 `splash-screen/assets/splash_logo.svg` 就是游戏的标志「明日方舟：终末地 / ARKNIGHTS ENDFIELD」；`banner-alert/assets/deco_common_logo_bg.png` 里是官方的「终末地 / ENDFIELD INDUSTRIES」标志；`AnimatedDialog` 的装饰条上有代码画的 `ARKNIGHTS:ENDFIELD`、`ENDFIELD` 字样；`EndfieldSplashScreen` 默认的标语是官网的 `OVER THE FRONTIER / INTO THE FRONT`。前三处涉及商标。
 - 逐张的路径、尺寸、字节数、SHA256 和来源登记在 [`packages/ui/src/game/resource-provenance.json`](packages/ui/src/game/resource-provenance.json)，随包在 `dist/game/resource-provenance.json`。发布的包里，这些图片只在 `dist/game/assets/` 一处。
 - 主入口（`@endfield-ui/react`）、主样式、令牌和母题工具类里没有它们。不引 `@endfield-ui/react/game` 和 `@endfield-ui/react/game.css`，就不会加载其中任何一张。
 - 使用方可以整类关掉这些图片（在 `<html>` 上写 `data-ef-game-images="off"`，控件退回代码画的样子），也可以经变量逐张换成自己的。

package/README.md

@@ -8,7 +8,7 @@
 | --- | --- |
 | 基础 | Button / ButtonGroup、IconButton、Toolbar、Tag / TagPair、Badge、Kbd、SectionTitle、BracketTitle、Tabs、Panel |
 | 表单 | Field、Input、OtpInput、Textarea、Select、Combobox、TagInput、DatePicker / DateRangePicker / Calendar、FileUpload / FileItem、Checkbox、Radio / RadioGroup、SegmentedControl、Switch、Stepper、Slider、FilterChip |
-| 反馈 | Alert、Toast、Progress / ProgressRing、Spinner、Skeleton、EmptyState、Loader、CompletionBanner、RecIndicator |
+| 反馈 | Alert、Toast、Progress / ProgressRing、Spinner、Skeleton、EmptyState、Loader、SplashScreen、CompletionBanner、RecIndicator |
 | 浮层 | Tooltip、Popover、HoverCard、Dialog、Drawer、DropdownMenu、ContextMenu、FlyoutBar |
 | 展示 | Table（行能展开）、Stat、RollingNumber、Sparkline、DataRowList / DataRow、List / ListRow、Accordion、ScrollArea、MediaCard、PlayButton / PlayMark、Carousel、ImageViewer、ItemSlot / ItemGrid、Avatar、Timeline、Schedule、Term、ResourceChip、Countdown、Marquee、ScrollHint |
 | 导航 | SideRail（含二级）、TopBar、NavMenu、NavAction、PageHeader、Breadcrumb、Pagination、Navigator、AvatarSwitcher、DashIndicator、Steps、Toc、BackToTop |
@@ -37,7 +37,7 @@ pnpm add @endfield-ui/react
 | 样式 | Tailwind CSS v4（CSS-first，`@theme` 令牌，不使用 `tailwind.config.js`） |
 | 变体 | 手写的 `Record<Variant, string>` + `cn()`（`clsx` + `tailwind-merge`） |
 | 无障碍基元 | [Base UI](https://base-ui.com)（`@base-ui/react`），用在浮层和几个行为复杂的控件上：文字提示、气泡卡片、悬浮卡、弹窗、抽屉、全屏菜单、图片查看的大图层、轻提示、下拉选择、组合框、日期选择的面板、下拉菜单、右键菜单、展开条、折叠面板、侧轨的二级、工具栏、滑块、验证码输入、滚动区、头像。其余控件建立在原生元素上（月历是手写的：Base UI 还没有公开的日历基元） |
-| 构建 | tsdown（ESM + 类型声明）+ `@tailwindcss/cli`（预编译 CSS） |
+| 构建 | tsdown（ESM + 类型声明）+ `@tailwindcss/node`（预编译 CSS） |
 | 测试 | Vitest + Testing Library（jsdom） |
 
 ## 使用
@@ -321,6 +321,27 @@ import { Loader } from "@endfield-ui/react";
 
 不知道真实进度就不传 `value`。只想盖住页面的一块区域时加 `fullscreen={false}`，并让那块区域带 `relative` 与 `overflow-hidden`。
 
+### 开屏页
+
+`SplashScreen` 是官网首次载入的那一页：一根贴边的进度条，读数跟着它的末端走，画面偏右是标志和标语；就绪后黄色铺满整屏，再整层淡出。库里不带任何图，标志和底图放你自己的：
+
+```tsx
+import { SplashScreen } from "@endfield-ui/react";
+
+<SplashScreen
+  value={progress}
+  open={!ready}
+  logo={<img src="/brand/mark.svg" alt="第七勘探队" />}
+  tagline="SEVENTH SURVEY TEAM / FIELD ARCHIVE"
+  backdrop={<img src="/brand/scene.jpg" alt="" />}
+  onReveal={() => setEntered(true)}
+/>;
+```
+
+- 退场是照官网走的，从 `open` 变成 `false` 到卸载一共 2.4 秒；页面到开始淡出的那一刻（第 1.4 秒）才放开，`onReveal` 同时触发——页面自己的入场从这里起。只要一块简单的整页等待，用上面的 `Loader`。
+- 横排还是竖排，看的是它所在那一块自己的宽高比，尺寸跟着那一块的宽度等比缩放；放进插槽的东西可以用 `--ef-splash-unit`（横排是宽度的 1/160）跟着缩。
+- `caption` 是标语上方那组微标里的微文字；整组微标可以用 `decor` 换掉，传 `null` 是不要。读数下面的状态字用 `status` 换，默认是 `LOADING`。
+
 ### 浮层
 
 文字提示、气泡卡片、悬浮卡、弹窗、抽屉、下拉菜单、展开条、下拉选择、轻提示。焦点的进出与锁定、键盘、定位与翻转都交给 Base UI，这里只管长相；用的时候不用自己拼部件。触发元素作为一个 React 元素传进去：
@@ -824,6 +845,7 @@ import {
 | `BannerAlert`、`FullWidthAlert` | 紧凑卡片与通栏面板两种确认提示，确认、取消都能异步否决 | [确认提示](https://github.com/icaruszezen/endfield-ui/blob/main/docs/design/game/confirmation-alerts.md) |
 | `ItemCard`、`ItemIcon` | 带稀有度、库存的物品卡片与分层图标 | [物品卡片](https://github.com/icaruszezen/endfield-ui/blob/main/docs/design/game/item-cards.md) |
 | `ItemTooltipCard`、`ItemHoverCard`、`ItemHoverCardLayer` | 物品详情卡，单个控件或整片网格的悬浮预览 | [物品悬浮卡](https://github.com/icaruszezen/endfield-ui/blob/main/docs/design/game/item-hover-cards.md) |
+| `EndfieldSplashScreen` | 官网首次载入的开屏页：上面的 `SplashScreen` 填上官方的标志、底图和微标 | [官网开屏页](https://github.com/icaruszezen/endfield-ui/blob/main/docs/design/game/splash-screen.md) |
 
 - `game.css` 用不用 Tailwind 都是这一份，**和主样式一起引**（`tailwind.css` 或 `styles.css`）。从脚本里 `import`，让打包工具去处理里面图片的相对地址。
 - 规则都在 `components` 层：你在 `className`、`classNames` 里写的工具类盖得掉默认值；和主样式谁先加载都一样。
@@ -831,7 +853,7 @@ import {
 - 不想加载官方图片：在 `<html>` 上写 `data-ef-game-images="off"`，整类退回代码画的样子；每张图也能经 `--ef-game-*` 变量单独换掉，变量表见[换掉或关掉图片](https://github.com/icaruszezen/endfield-ui/blob/main/docs/design/game/README.md#换掉或关掉图片)。
 - 主库里名字相近的 `Dialog`、`Select`、`Button`、`SegmentedControl`、`Switch`、`Alert`、`ItemSlot`、`HoverCard` 不因为它而变。
 
-> **这个入口带着 25 张官方图片**（界面纹理、卡片背景、一张官方标志；其中 20 张随包发在 `dist/game/assets`），没有取得授权，MIT 许可不覆盖它们。权利人提出异议时我们会撤下并发补丁版本——这些图片不在语义化版本的承诺之内。不引这个入口，你的产物里不会有其中任何一张，但 npm 包里仍然带着这些文件。用之前请读[风险与处理](https://github.com/icaruszezen/endfield-ui/blob/main/docs/design/game/README.md#风险与处理)。
+> **这个入口带着 30 张官方图片**（界面纹理、卡片背景、开屏页的底图，和两张官方标志——其中一张是游戏的标志本身；25 张随包发在 `dist/game/assets`），没有取得授权，MIT 许可不覆盖它们。权利人提出异议时我们会撤下并发补丁版本——这些图片不在语义化版本的承诺之内。不引这个入口，你的产物里不会有其中任何一张，但 npm 包里仍然带着这些文件。用之前请读[风险与处理](https://github.com/icaruszezen/endfield-ui/blob/main/docs/design/game/README.md#风险与处理)。
 
 ### 主题
 
@@ -920,10 +942,11 @@ packages/ui/
 | --- | --- |
 | `pnpm dev` | 启动 Storybook（`http://localhost:6106`），直接读本包源码，改了即热更新 |
 | `pnpm test` | 跑单元测试 |
+| `pnpm test:package` | 先 `pnpm build`，再检查发布产物、主入口与 Game 共享上下文，以及 Rollup 按需打包（模块版和重新合并的单文件版） |
 | `pnpm test:browser` | 在真的浏览器里测键盘、焦点与布局（先 `pnpm build:docs`），见 [apps/docs](https://github.com/icaruszezen/endfield-ui/blob/main/apps/docs/README.md#浏览器实测) |
 | `pnpm typecheck` | 类型检查全部工作区包 |
 | `pnpm lint` | 用 oxlint 查写错的地方：漏掉的 `await`、钩子的用法、已弃用的接口等 |
-| `pnpm build` | 生成 `dist/index.js`、`dist/index.d.ts`、`dist/styles.css`，以及 Game 入口的 `dist/game.js`、`dist/game.d.ts` 和 `dist/game/`（样式、图片、来源清单） |
+| `pnpm build` | 按源码模块结构输出 JS 与类型声明；保留 `dist/index.js`、`dist/game.js` 两个公共入口，以及主库和 Game 的样式、图片、来源清单 |
 | `pnpm format` | 用 Prettier 格式化全仓库；`pnpm format:check` 只检查不改，CI 跑的是它 |
 
 格式用 Prettier 的默认配置，提交前跑一次 `pnpm format`。Markdown 不在它的范围里（它会把表格逐列补空格对齐）；Tailwind 的类名顺序也不归它管。
@@ -932,11 +955,15 @@ packages/ui/
 
 TypeScript 用的是 7.0。tsdown 在这个版本下生成类型声明时会提示"API 尚不稳定"，目前产物正常；如果以后出问题，退路是 `tsc --emitDeclarationOnly`。
 
+构建保留模块边界并压缩 JS，公共导入路径保持兼容。Context 统一通过 `createLazyContext` 缓存，纯工厂调用保留 tree-shaking 标记。源码用于 Tailwind 扫描，发布包只将 CSS 标为副作用。
+
+`pnpm test:package` 检查真实 npm tarball 的导出、类型、共享上下文，以及六种用量下的模块版和单文件版按需打包，已接入 CI 和 `prepublishOnly`。测量范围与数据见 [PACKAGING.md](PACKAGING.md)。
+
 ### 发布
 
 1. 改本目录 `package.json` 里的 `version`，在根目录的 [CHANGELOG.md](https://github.com/icaruszezen/endfield-ui/blob/main/CHANGELOG.md) 里写上这一版改了什么，提交并推到 `main`，等 CI 跑完。
 2. 打一个和版本号对应的标签推上去：`git tag v1.0.0`，`git push origin v1.0.0`。
-3. [publish.yml](https://github.com/icaruszezen/endfield-ui/blob/main/.github/workflows/publish.yml) 核对标签与版本号，跑类型检查、测试与构建（`prepublishOnly`），然后发布到 npm。
+3. [publish.yml](https://github.com/icaruszezen/endfield-ui/blob/main/.github/workflows/publish.yml) 核对标签与版本号，跑类型检查、单元测试、构建与发布产物检查（`prepublishOnly`），然后发布到 npm。
 
 认证用的是 npm 的 Trusted Publishing，仓库里不存 token：npm 上这个包的设置里登记了本仓库和 `publish.yml` 这个文件名，两边任何一个改名都要同步。
 

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,46 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/accordion/Accordion.d.ts
+export type AccordionSize = "sm" | "md";
+export type AccordionLevel = 2 | 3 | 4 | 5 | 6;
+export type AccordionProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "style"> & {
+  /** 可以同时展开几项。默认开了这个，那个就收起来 */
+  multiple?: boolean;
+  /** 展开着的那几项的 `value` */
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** 标题行高 40 / 48px，默认 `md` */
+  size?: AccordionSize;
+  /** 标题的层级，默认 3（`<h3>`）。按它在页面里的位置给 */
+  level?: AccordionLevel;
+  /**
+   * 收起的内容也留在页面里：浏览器的页内查找找得到，找到时自动展开。
+   * 常见问题这类"来找一句话"的内容值得开
+   */
+  searchable?: boolean;
+  disabled?: boolean;
+  /** `AccordionItem` */
+  children: ReactNode;
+};
+/**
+ * 折叠面板：一摞可以各自展开收起的小节。先问能不能不折叠——
+ * 藏起来的东西有人会找不到。
+ */
+export declare function Accordion({ multiple, value, defaultValue, onValueChange, size, level, searchable, disabled, className, children, ...props }: AccordionProps): import("react").JSX.Element;
+type ItemOwnProps = {
+  /** 这一项的标识：`Accordion` 的 `value` 里放的就是它 */
+  value: string;
+  /** 标题：写成"里面是什么" */
+  title: ReactNode;
+  /** 标题右侧、记号之前的补充：计数、一个标签。它在按钮里，不能放能点的东西 */
+  extra?: ReactNode;
+  disabled?: boolean;
+  /** 内容 */
+  children: ReactNode;
+};
+export type AccordionItemProps = ItemOwnProps & Omit<ComponentProps<"div">, keyof ItemOwnProps | "style">;
+/** 折叠面板里的一节。 */
+export declare function AccordionItem({ value, title, extra, disabled, className, children, ...props }: AccordionItemProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,2 @@
+"use client";
+import{Minus as e}from"../../icons/Minus.js";import{cn as t}from"../../lib/cn.js";import{focusRingInset as n}from"../../lib/focus-ring.js";import{createLazyContext as r}from"../../lib/create-lazy-context.js";import{Accordion as i}from"@base-ui/react/accordion";import{useContext as a,useMemo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=/* @__PURE__ */ r({size:`md`,level:3});function u({multiple:e=!1,value:n,defaultValue:r,onValueChange:a,size:c=`md`,level:u=3,searchable:d=!1,disabled:f,className:p,children:m,...h}){let g=l(),_=o(()=>({size:c,level:u}),[c,u]);return/* @__PURE__ */ s(g.Provider,{value:_,children:/* @__PURE__ */ s(i.Root,{...h,multiple:e,value:n,defaultValue:r,onValueChange:a&&(e=>a(e)),hiddenUntilFound:d,disabled:f,"data-size":c,className:t(`flex flex-col border-t border-line text-ink`,p),children:m})})}const d={sm:`min-h-10 py-1.5 text-sm`,md:`min-h-12 py-2 text-base`};function f({value:r,title:o,extra:u,disabled:f,className:p,children:m,...h}){let{size:g,level:_}=a(l()),v=`h${_}`;return/* @__PURE__ */ c(i.Item,{...h,value:r,disabled:f,className:t(`border-b border-line`,p),children:[/* @__PURE__ */ s(i.Header,{render:/* @__PURE__ */ s(v,{}),className:`flex`,children:/* @__PURE__ */ c(i.Trigger,{render:(e,t)=>/* @__PURE__ */ s(`button`,{...e,disabled:!1,"aria-disabled":t.disabled||void 0}),className:t(`group/trigger flex w-full items-center gap-3 px-4 text-left font-medium`,`transition-colors duration-(--duration-fast) ease-standard`,`hover:bg-ink/5 data-panel-open:font-bold`,`data-disabled:cursor-not-allowed data-disabled:text-ink-disabled data-disabled:hover:bg-transparent`,n,d[g]),children:[/* @__PURE__ */ s(`span`,{className:`min-w-0 flex-1 wrap-anywhere`,children:o}),u&&/* @__PURE__ */ s(`span`,{className:`flex shrink-0 items-center gap-2 text-sm font-normal text-ink-secondary group-data-disabled/trigger:text-ink-disabled`,children:u}),/* @__PURE__ */ c(`span`,{"aria-hidden":`true`,className:`relative flex size-4 shrink-0 items-center justify-center text-ink-secondary group-data-disabled/trigger:text-ink-disabled`,children:[/* @__PURE__ */ s(e,{size:16}),/* @__PURE__ */ s(e,{size:16,className:`absolute rotate-90 transition-transform duration-(--duration-fast) ease-standard group-data-panel-open/trigger:rotate-0`})]})]})}),/* @__PURE__ */ s(i.Panel,{className:t(`h-(--accordion-panel-height) overflow-hidden`,`transition-[height] duration-(--duration-base) ease-standard`,`data-ending-style:h-0 data-starting-style:h-0`),children:/* @__PURE__ */ s(`div`,{className:t(`px-4 pb-4`,g===`sm`&&`text-sm`),children:m})})]})}export{u as Accordion,f as AccordionItem};

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Accordion, AccordionItem, AccordionItemProps, AccordionLevel, AccordionProps, AccordionSize } from "./Accordion.js";
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionLevel, type AccordionProps, type AccordionSize };

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,28 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/alert/Alert.d.ts
+export type AlertTone = "info" | "success" | "warning" | "danger";
+export type AlertProps = Omit<ComponentProps<"div">, "title"> & {
+  /** 色调只点在左缘色条和图标上，底色保持中性。默认 `info` */
+  tone?: AlertTone;
+  /** 加粗的一行标题，可省 */
+  title?: ReactNode;
+  /** 右侧的一个操作，通常是 `text` 按钮 */
+  action?: ReactNode;
+  /**
+   * 传了就出现关闭图标。它只负责通知：显示与否由使用方决定——
+   * 要收起的过程，把 `open` 交给提示条；直接不渲染它就是立刻消失
+   */
+  onClose?: () => void;
+  /** 置为 `false` 时先收起、淡出，再卸载。默认 `true` */
+  open?: boolean;
+  /** 收完、已经卸载之后触发 */
+  onExited?: () => void;
+  /** 关闭图标的可访问名称 */
+  closeLabel?: string;
+  /** 替换默认图标；传 `null` 去掉 */
+  icon?: ReactNode;
+};
+/** 页面内的一条常驻消息。需要用户处理的重要信息用它，不用会消失的轻提示。 */
+export declare function Alert({ tone, title, action, onClose, open, onExited, closeLabel, icon, className, ref, children, ...props }: AlertProps): import("react").JSX.Element | null;
+//#endregion

package/dist/components/alert/Alert.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import"../../lib/focus-ring.js";import{usePresence as t}from"../../hooks/usePresence.js";import{Close as n}from"../../icons/Close.js";import{StatusDanger as r}from"../../icons/StatusDanger.js";import{StatusInfo as i}from"../../icons/StatusInfo.js";import{StatusSuccess as a}from"../../icons/StatusSuccess.js";import{StatusWarning as o}from"../../icons/StatusWarning.js";import{mergeRefs as s}from"../../lib/merge-refs.js";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u={info:i,success:a,warning:o,danger:r},d={info:`border-l-info`,success:`border-l-success`,warning:`border-l-warning`,danger:`border-l-danger`},f={info:`text-info`,success:`text-success`,warning:`text-warning`,danger:`text-danger`};function p(e){let{style:t}=e,n=t.cssText,r=0;if(e.parentElement){let t=getComputedStyle(e.parentElement);(t.display.includes(`grid`)||t.display.includes(`flex`)&&t.flexDirection.startsWith(`column`))&&(r=Number.parseFloat(t.rowGap)||0)}return t.height=`${e.getBoundingClientRect().height}px`,e.getBoundingClientRect(),t.height=`0px`,t.minHeight=`0px`,t.paddingBlock=`0px`,t.borderBlockWidth=`0px`,t.marginTop=`0px`,t.marginBottom=`${-r}px`,t.opacity=`0`,()=>{t.cssText=n}}function m({tone:r=`info`,title:i,action:a,onClose:o,open:m=!0,onExited:h,closeLabel:g=`关闭`,icon:_,className:v,ref:y,children:b,...x}){let{ref:S,mounted:C,leaving:w}=t(m,{onLeave:p,onExited:h});if(!C)return null;let T=u[r],E=_===void 0?/* @__PURE__ */ c(T,{size:20}):_;return/* @__PURE__ */ l(`div`,{role:r===`danger`||r===`warning`?`alert`:`status`,...x,ref:s(S,y),"data-tone":r,inert:w,className:e(`flex items-start gap-3 border-l-4 bg-surface-raised py-3 pr-3 pl-3 text-sm text-ink`,d[r],w&&[`pointer-events-none overflow-hidden`,`transition-[height,padding,margin,border-width,opacity] duration-(--duration-fast) ease-standard`],v),children:[E!==null&&/* @__PURE__ */ c(`span`,{"aria-hidden":`true`,className:e(`shrink-0`,f[r]),children:E}),/* @__PURE__ */ l(`div`,{className:`min-w-0 flex-1 wrap-anywhere`,children:[i&&/* @__PURE__ */ c(`p`,{className:`font-medium`,children:i}),b&&/* @__PURE__ */ c(`div`,{className:e(i&&`mt-0.5 text-ink-secondary`),children:b})]}),a&&/* @__PURE__ */ c(`div`,{className:`shrink-0`,children:a}),o&&/* @__PURE__ */ c(`button`,{type:`button`,"aria-label":g,onClick:o,className:e(`-my-1.5 -mr-1 inline-flex size-8 shrink-0 items-center justify-center text-ink-secondary hover:bg-ink/5 hover:text-ink active:bg-ink/10`,`transition-colors duration-(--duration-fast) ease-standard`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus`),children:/* @__PURE__ */ c(n,{size:16})})]})}export{m as Alert};

package/dist/components/alert/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Alert, AlertProps, AlertTone } from "./Alert.js";
+export { Alert, type AlertProps, type AlertTone };

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,24 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/avatar/Avatar.d.ts
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarProps = Omit<ComponentProps<"span">, "style"> & {
+  /** 名字。没有图时显示它的首字；也是头像默认的可访问名称 */
+  name?: string;
+  /** 图片地址。没给、没加载出来、加载失败时显示首字 */
+  src?: string;
+  /**
+   * 可访问名称，默认取 `name`。
+   * 旁边已经写了名字时传 `""`：头像变成纯装饰，对读屏隐藏
+   */
+  alt?: string;
+  /** 32 / 40 / 56 / 80px，默认 `md` */
+  size?: AvatarSize;
+  /** 选中：外面一圈行动色的环 */
+  selected?: boolean;
+  /** 没有图时显示的东西，代替首字（比如一个图标） */
+  children?: ReactNode;
+};
+/** 头像：代表一个人或一个角色的圆形图。自己不能点。 */
+export declare function Avatar({ name, src, alt, size, selected, className, children, ...props }: AvatarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Avatar as r}from"@base-ui/react/avatar";const i={sm:`size-8 text-xs`,md:`size-10 text-sm`,lg:`size-14 text-lg`,xl:`size-20 text-2xl`},a=`shadow-[0_0_0_2px_var(--ef-surface),0_0_0_5px_var(--ef-action),0_0_0_6px_var(--ef-ink)] forced-colors:border-[3px] forced-colors:border-[Highlight]`;function o(e){let t=e.trim().split(/\s+/).filter(Boolean),n=[...t[0]??``][0];return n?/[a-z]/i.test(n)?(n+(t.length>1?[...t[1]][0]??``:``)).toUpperCase():n:``}function s({name:a,src:s,alt:c=a??``,size:l=`md`,selected:u=!1,className:d,children:f,...p}){let m=c===``;return/* @__PURE__ */ n(r.Root,{...p,...m?{"aria-hidden":!0}:{role:`img`,"aria-label":c},"data-size":l,"data-selected":u?``:void 0,className:e(`relative inline-flex shrink-0 items-center justify-center overflow-clip rounded-full bg-surface-muted font-medium text-ink-secondary select-none`,i[l],u&&`shadow-[0_0_0_2px_var(--ef-surface),0_0_0_5px_var(--ef-action),0_0_0_6px_var(--ef-ink)] forced-colors:border-[3px] forced-colors:border-[Highlight]`,d),children:[s&&/* @__PURE__ */ t(r.Image,{src:s,alt:``,className:`size-full object-cover`}),/* @__PURE__ */ t(r.Fallback,{"aria-hidden":`true`,className:`flex size-full items-center justify-center leading-none [&_svg]:size-1/2`,children:f??(a?o(a):null)})]})}export{s as Avatar,a as avatarSelectedRing,o as initialsOf};

package/dist/components/avatar/AvatarSwitcher.d.ts

@@ -0,0 +1,46 @@
+
+import { AvatarSize } from "./Avatar.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/avatar/AvatarSwitcher.d.ts
+export type AvatarSwitcherOrientation = "vertical" | "horizontal";
+export type AvatarSwitcherProps = Omit<ComponentProps<"div">, "aria-label" | "defaultValue" | "onChange"> & {
+  /** 选的是什么，比如"人员" */
+  "aria-label": string;
+  /** 选中的那一个的 `value` */
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** 竖排（默认）或横排 */
+  orientation?: AvatarSwitcherOrientation;
+  /** 头像的大小，默认 `lg`（56px） */
+  size?: AvatarSize;
+  /** 翻页钮到头之后绕回另一头。默认到头时禁用 */
+  loop?: boolean;
+  /** 表单字段名：选中的值会随表单提交 */
+  name?: string;
+  previousLabel?: string;
+  nextLabel?: string;
+  /** 直接放 `AvatarSwitcherItem` */
+  children: ReactNode;
+};
+/**
+ * 头像切换：一列圆形头像里选一个，两端各一个圆形翻页钮。
+ * 语义是单选组——方向键换人。头像放不下时给它一个高度（横排时是宽度）上限，
+ * 头像在两个翻页钮之间滚动。
+ */
+export declare function AvatarSwitcher({ value: valueProp, defaultValue, onValueChange, orientation, size, loop, name: nameProp, previousLabel, nextLabel, className, children, ...props }: AvatarSwitcherProps): import("react").JSX.Element;
+type ItemOwnProps = {
+  value: string;
+  /** 名字：这一项的可访问名称，没有图时显示它的首字 */
+  label: string;
+  /** 头像的图片地址 */
+  src?: string;
+  disabled?: boolean;
+  /** 没有图时显示的东西，代替首字 */
+  children?: ReactNode;
+};
+export type AvatarSwitcherItemProps = ItemOwnProps & Omit<ComponentProps<"label">, keyof ItemOwnProps>;
+/** 头像切换里的一个头像。 */
+export declare function AvatarSwitcherItem({ value, label, src, disabled, className, children, ...props }: AvatarSwitcherItemProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/avatar/AvatarSwitcher.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{createLazyContext as t}from"../../lib/create-lazy-context.js";import{Avatar as n}from"./Avatar.js";import{useControllableState as r}from"../../hooks/useControllableState.js";import{ChevronDown as i}from"../../icons/ChevronDown.js";import{ChevronLeft as a}from"../../icons/ChevronLeft.js";import{ChevronRight as o}from"../../icons/ChevronRight.js";import{IconButton as s}from"../icon-button/IconButton.js";import{Children as c,isValidElement as l,useContext as u,useEffect as d,useId as f,useMemo as p,useRef as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";const _=/* @__PURE__ */ t(null);function v({value:t,defaultValue:n,onValueChange:u,orientation:v=`vertical`,size:y=`lg`,loop:b=!1,name:x,previousLabel:S=`上一个`,nextLabel:C=`下一个`,className:w,children:T,...E}){let D=_(),O=f(),k=x??O,A=v===`vertical`,j=m(null),[M,N]=r({value:t,defaultValue:n??null,onChange:e=>{e!==null&&u?.(e)}}),P=c.toArray(T).flatMap(e=>{if(!l(e))return[];let{value:t,disabled:n}=e.props;return typeof t==`string`&&!n?[t]:[]}),F=M===null?-1:P.indexOf(M),I=P.length-1,L=e=>{if(P.length===0)return;let t=F===-1?e===1?0:I:b?(F+e+P.length)%P.length:Math.min(I,Math.max(0,F+e));N(P[t])};d(()=>{let e=j.current,t=e?.querySelector(`[data-current]`);if(!e||!t)return;let n=A?t.offsetTop:t.offsetLeft,r=A?t.offsetHeight:t.offsetWidth,i=A?e.clientHeight:e.clientWidth,a=A?e.scrollTop:e.scrollLeft,o=a;n-12<a?o=n-12:n+r+12>a+i&&(o=n+r+12-i),o!==a&&e.scrollTo?.(A?{top:o}:{left:o})},[M,A]);let R=p(()=>({name:k,value:M,size:y,select:N}),[k,M,y,N]),z=A?i:a,B=A?i:o;return/* @__PURE__ */ h(D.Provider,{value:R,children:/* @__PURE__ */ g(`div`,{...E,role:`radiogroup`,"aria-orientation":v,"data-orientation":v,className:e(`inline-flex max-w-full items-center gap-1`,A?`flex-col`:`flex-row`,w),children:[/* @__PURE__ */ h(s,{variant:`floating`,size:`sm`,tabIndex:-1,"aria-label":S,disabled:!b&&F<=0,onClick:()=>L(-1),children:/* @__PURE__ */ h(z,{className:A?`rotate-180`:void 0})}),/* @__PURE__ */ h(`div`,{ref:j,className:e(`relative flex min-h-0 min-w-0 flex-1 gap-4 p-3 [scrollbar-width:none]`,A?`flex-col overflow-x-hidden overflow-y-auto`:`flex-row overflow-x-auto overflow-y-hidden`),children:T}),/* @__PURE__ */ h(s,{variant:`floating`,size:`sm`,tabIndex:-1,"aria-label":C,disabled:!b&&F>=I,onClick:()=>L(1),children:/* @__PURE__ */ h(B,{})})]})})}function y({value:t,label:r,src:i,disabled:a=!1,className:o,children:s,...c}){let l=u(_());if(!l)throw Error(`AvatarSwitcherItem 要放在 AvatarSwitcher 里面`);let d=l.value===t;return/* @__PURE__ */ g(`label`,{...c,"data-current":d?``:void 0,className:e(`relative flex shrink-0 rounded-full`,a?`cursor-not-allowed`:`cursor-pointer`,o),children:[/* @__PURE__ */ h(`input`,{type:`radio`,name:l.name,value:t,checked:d,disabled:a,"aria-label":r,onChange:()=>l.select(t),className:`peer absolute inset-0 size-full cursor-[inherit] appearance-none rounded-full outline-none`}),/* @__PURE__ */ h(n,{name:r,src:i,alt:``,size:l.size,selected:d,className:e(`pointer-events-none transition-opacity duration-(--duration-fast) ease-standard`,!d&&`opacity-60 peer-hover:opacity-100`,a&&`opacity-30 peer-hover:opacity-30`,`peer-focus-visible:outline-2 peer-focus-visible:outline-offset-[7px] peer-focus-visible:outline-focus`),children:s})]})}export{v as AvatarSwitcher,y as AvatarSwitcherItem};

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,4 @@
+
+import { Avatar, AvatarProps, AvatarSize } from "./Avatar.js";
+import { AvatarSwitcher, AvatarSwitcherItem, AvatarSwitcherItemProps, AvatarSwitcherOrientation, AvatarSwitcherProps } from "./AvatarSwitcher.js";
+export { Avatar, type AvatarProps, type AvatarSize, AvatarSwitcher, AvatarSwitcherItem, type AvatarSwitcherItemProps, type AvatarSwitcherOrientation, type AvatarSwitcherProps };

package/dist/components/back-to-top/BackToTop.d.ts

@@ -0,0 +1,21 @@
+
+import { ComponentProps, RefObject } from "react";
+//#region src/components/back-to-top/BackToTop.d.ts
+export type BackToTopSize = "sm" | "md";
+export type BackToTopProps = Omit<ComponentProps<"button">, "children" | "aria-label"> & {
+  /** 默认"回到顶部" */
+  "aria-label"?: string;
+  /** 看哪个滚动容器、回到谁的顶部。不传就是整个页面 */
+  target?: RefObject<HTMLElement | null>;
+  /** 滚过多少像素才出现，默认 400 */
+  threshold?: number;
+  /** 48px（默认）或 40px 见方 */
+  size?: BackToTopSize;
+};
+/**
+ * 回到顶部：滚过一段才出现的悬浮钮，点了回到最上面，焦点也跟着回去。
+ * 默认看整个页面、自己 `fixed` 在视口右下角；放进某个滚动容器时传 `target`，
+ * 并用 `className` 把位置改成相对那个容器的。
+ */
+export declare function BackToTop({ "aria-label": ariaLabel, target, threshold, size, type, className, onClick, ...props }: BackToTopProps): import("react").JSX.Element;
+//#endregion

package/dist/components/back-to-top/BackToTop.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRing as t}from"../../lib/focus-ring.js";import{useScrollPosition as n}from"../../hooks/useScrollPosition.js";import{ArrowRight as r}from"../../icons/ArrowRight.js";import{useCallback as i}from"react";import{jsx as a}from"react/jsx-runtime";const o={sm:`size-10 [&_svg]:size-5`,md:`size-12 [&_svg]:size-6`};function s(e){if(e.hasAttribute(`tabindex`)){e.focus({preventScroll:!0});return}let t=e.style.outline;e.setAttribute(`tabindex`,`-1`),e.style.outline=`none`,e.focus({preventScroll:!0}),e.addEventListener(`blur`,()=>{e.removeAttribute(`tabindex`),e.style.outline=t},{once:!0})}function c({"aria-label":c=`回到顶部`,target:l,threshold:u=400,size:d=`md`,type:f=`button`,className:p,onClick:m,...h}){let g=i(({scrolled:e})=>e>u,[u]),_=n(l,g,!1),v=e=>{if(m?.(e),e.defaultPrevented)return;let t=l?.current??null,n={top:0,behavior:typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches?`instant`:`smooth`};t?t.scrollTo?.(n):window.scrollTo(n),s(t??document.body)};return/* @__PURE__ */ a(`button`,{...h,type:f,"aria-label":c,"data-visible":_?``:void 0,"data-size":d,onClick:v,className:e(`fixed right-[calc(1rem+env(safe-area-inset-right))] bottom-[calc(1rem+env(safe-area-inset-bottom))] z-(--z-float)`,`inline-flex shrink-0 items-center justify-center shadow-md`,`bg-surface-inverse text-ink-inverse hover:bg-action hover:text-on-action active:bg-action-pressed active:text-on-action`,`transition-[opacity,visibility,background-color,color] duration-(--duration-fast) ease-standard`,t,o[d],_?`visible opacity-100`:`invisible opacity-0`,p),children:/* @__PURE__ */ a(r,{className:`-rotate-90`})})}export{c as BackToTop};

package/dist/components/back-to-top/index.d.ts

@@ -0,0 +1,3 @@
+
+import { BackToTop, BackToTopProps, BackToTopSize } from "./BackToTop.js";
+export { BackToTop, type BackToTopProps, type BackToTopSize };

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,20 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/badge/Badge.d.ts
+export type BadgeProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 数量。显示为橙色数字块 */
+  count?: number;
+  /** 超过后显示为 `max+`，默认 99 */
+  max?: number;
+  /** `count` 为 0 时是否仍然显示，默认不显示 */
+  showZero?: boolean;
+  /** 不带数字的提醒：一个橙色菱形 */
+  dot?: boolean;
+  /** 给读屏的完整说明，如"12 条未读"。提供后角标本身对辅助技术隐藏 */
+  label?: string;
+  /** 被标记的元素。角标压在它的右上角，向外偏移半个自身 */
+  children?: ReactNode;
+};
+/** 通知角标：提醒与数量归橙色，不用来表示危险。 */
+export declare function Badge({ count, max, showZero, dot, label, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/badge/Badge.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";function r({count:r,max:i=99,showZero:a=!1,dot:o=!1,label:s,className:c,children:l,...u}){let d=null;o?d=/* @__PURE__ */ t(`span`,{"aria-hidden":`true`,className:`block size-2 rotate-45 bg-notice`,"data-badge":`dot`}):r!==void 0&&(r>0||a)&&(d=/* @__PURE__ */ t(`span`,{"aria-hidden":s?`true`:void 0,className:`inline-flex h-4.5 min-w-4.5 items-center justify-center bg-notice px-1 font-tech text-xs leading-none font-bold text-neutral-900 tabular-nums`,"data-badge":`count`,children:r>i?`${i}+`:r}));let f=d!==null,p=f&&s?/* @__PURE__ */ t(`span`,{className:`sr-only`,children:s}):null;return l===void 0?/* @__PURE__ */ n(`span`,{...u,className:e(`inline-flex items-center`,c),children:[d,p]}):/* @__PURE__ */ n(`span`,{...u,className:e(`relative inline-flex`,c),children:[l,f&&/* @__PURE__ */ n(`span`,{className:`pointer-events-none absolute top-0 right-0 translate-x-1/2 -translate-y-1/2`,children:[d,p]})]})}export{r as Badge};

package/dist/components/badge/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Badge, BadgeProps } from "./Badge.js";
+export { Badge, type BadgeProps };

package/dist/components/bracket-title/BracketTitle.d.ts

@@ -0,0 +1,17 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/bracket-title/BracketTitle.d.ts
+export type BracketTitleProps = Omit<ComponentProps<"h3">, "children"> & {
+  /** 标题层级，默认 3（`<h3>`） */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** 进入视口时播放一次入场：括号先到，名称随后。默认开启 */
+  animate?: boolean;
+  /** 名称 */
+  children: ReactNode;
+};
+/**
+ * 方括号标题 `[ 名称 ]`：人物、地点、物品的名称——"一个被归档的条目"。
+ * 普通的分节标题用 `SectionTitle`。字号用 `className` 改，默认是名称用的 `text-4xl`。
+ */
+export declare function BracketTitle({ level, animate, className, children, ref, ...props }: BracketTitleProps): import("react").JSX.Element;
+//#endregion

package/dist/components/bracket-title/BracketTitle.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{mergeRefs as t}from"../../lib/merge-refs.js";import{useInView as n}from"../../hooks/useInView.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=`font-medium text-ink-tertiary`;function o({level:o=3,animate:s=!0,className:c,children:l,ref:u,...d}){let f=`h${o}`,[p,m]=n({disabled:!s}),h=s&&!m,g=s&&m,_=e(h&&`opacity-0`,g&&`animate-fade-in`);return/* @__PURE__ */ i(f,{...d,ref:t(p,u),className:e(`text-4xl font-bold wrap-anywhere text-ink`,c),children:[/* @__PURE__ */ r(`span`,{"aria-hidden":`true`,className:e(a,`mr-[0.4em]`,_),children:`[`}),/* @__PURE__ */ r(`span`,{className:e(h&&`opacity-0`,g&&`animate-fade-in [animation-delay:100ms]`)||void 0,children:l}),/* @__PURE__ */ r(`span`,{"aria-hidden":`true`,className:e(a,`ml-[0.4em]`,_),children:`]`})]})}export{o as BracketTitle};

package/dist/components/bracket-title/index.d.ts

@@ -0,0 +1,3 @@
+
+import { BracketTitle, BracketTitleProps } from "./BracketTitle.js";
+export { BracketTitle, type BracketTitleProps };

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,26 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/breadcrumb/Breadcrumb.d.ts
+export type BreadcrumbProps = ComponentProps<"nav"> & {
+  /**
+   * 最多显示几项。超出时保留首项和靠后的几项，中间折叠成 `…`，点击展开。
+   * 不传则全部显示。
+   */
+  maxItems?: number;
+  /** 折叠按钮的可访问名称 */
+  expandLabel?: string;
+};
+/** 层级路径：`// 档案 / 干员 / 详情`。双斜杠起头，单斜杠分隔。 */
+export declare function Breadcrumb({ maxItems, expandLabel, "aria-label": ariaLabel, className, children, ...props }: BreadcrumbProps): import("react").JSX.Element;
+export type BreadcrumbItemProps = Omit<ComponentProps<"li">, "children"> & {
+  /** 传了就渲染成链接 */
+  href?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  /** 当前页：加粗、不可点击，输出 `aria-current="page"`。给最后一项 */
+  current?: boolean;
+  children: ReactNode;
+};
+export declare function BreadcrumbItem({ href, render, current, className, children, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
+//#endregion

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRing as t}from"../../lib/focus-ring.js";import{LinkElement as n}from"../link-element/LinkElement.js";import{Children as r,useEffect as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(){return/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:`text-ink-tertiary [li:first-child>&]:hidden`,children:`/`})}function u({maxItems:n,expandLabel:u=`显示完整路径`,"aria-label":d=`面包屑`,className:f,children:p,...m}){let[h,g]=o(!1),_=a(null),v=a(!1),y=r.toArray(p),b=n!==void 0&&n>=2&&y.length>n&&!h;i(()=>{v.current&&(v.current=!1,_.current?.querySelector(`li:nth-child(2) a, li:nth-child(2) button`)?.focus())},[h]);let x=y;return b&&(x=[y[0],/* @__PURE__ */ c(`li`,{className:`flex items-center gap-2`,children:[/* @__PURE__ */ s(l,{}),/* @__PURE__ */ s(`button`,{type:`button`,"aria-label":u,"aria-expanded":!1,onClick:()=>{v.current=!0,g(!0)},className:e(`px-1 text-ink-secondary hover:text-ink`,`transition-colors duration-(--duration-fast) ease-standard`,t),children:`…`})]},`ellipsis`),...y.slice(y.length-(n-1))]),/* @__PURE__ */ c(`nav`,{...m,"aria-label":d,className:e(`flex items-baseline gap-2 text-sm`,f),children:[/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:`shrink-0 text-ink-tertiary`,children:`//`}),/* @__PURE__ */ s(`ol`,{ref:_,className:`flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1`,children:x})]})}function d({href:r,render:i,current:a=!1,className:o,children:u,...d}){let f;return f=a?/* @__PURE__ */ s(`span`,{"aria-current":`page`,className:`font-bold text-ink`,children:u}):r!==void 0||i!==void 0?/* @__PURE__ */ s(n,{render:i,href:r,className:e(`text-ink-secondary underline-offset-4 hover:text-ink hover:underline`,`transition-colors duration-(--duration-fast) ease-standard`,t),children:u}):/* @__PURE__ */ s(`span`,{className:`text-ink-secondary`,children:u}),/* @__PURE__ */ c(`li`,{...d,className:e(`flex min-w-0 items-baseline gap-2`,o),children:[/* @__PURE__ */ s(l,{}),f]})}export{u as Breadcrumb,d as BreadcrumbItem};

package/dist/components/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps } from "./Breadcrumb.js";
+export { Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps };

package/dist/components/button/Button.d.ts

@@ -0,0 +1,50 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/button/Button.d.ts
+export type ButtonVariant = "control" | "action" | "light" | "back" | "text" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+type OwnProps = {
+  /**
+   * - `control` 深灰底 + 黄色竖条，默认；
+   * - `action` 信号黄底，一屏只用一个；
+   * - `light` 白底，用在深色底上或作次要项；
+   * - `back` 深灰斜纹底 + 左箭头，返回上一级；
+   * - `text` 无底、下划线、斜箭头，低强调；
+   * - `danger` 同 `control`，竖条为红色，用于不可逆操作。
+   */
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** 文字左侧的图标 */
+  iconStart?: ReactNode;
+  /** 文字右侧的图标；`text` 变体默认是斜箭头，传 `null` 去掉 */
+  iconEnd?: ReactNode;
+  /** 提交中：记号变成旋转指示，尺寸不变，不响应点击 */
+  loading?: boolean;
+  /** 提交中显示的文字，如"处理中"。传了之后按钮按两段文字里较宽的一段定宽 */
+  loadingText?: ReactNode;
+  /** 撑满容器宽度 */
+  block?: boolean;
+  disabled?: boolean;
+};
+type ButtonAsButton = OwnProps & Omit<ComponentProps<"button">, keyof OwnProps> & {
+  href?: undefined;
+  render?: undefined;
+};
+type ButtonAsLink = OwnProps & Omit<ComponentProps<"a">, keyof OwnProps> & {
+  /** 传了就渲染成链接 */
+  href: string;
+  render?: LinkRender;
+};
+type ButtonAsRendered = OwnProps & Omit<ComponentProps<"a">, keyof OwnProps> & {
+  href?: undefined;
+  /**
+   * 用这个元素代替 `<a>`，给路由库的链接组件用：
+   * `<Button render={<Link to="/archive" />}>`。传了就按链接处理
+   */
+  render: LinkRender;
+};
+export type ButtonProps = ButtonAsButton | ButtonAsLink | ButtonAsRendered;
+export declare function Button(props: ButtonProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/button/Button.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRing as t}from"../../lib/focus-ring.js";import{ChevronLeft as n}from"../../icons/ChevronLeft.js";import{LinkElement as r}from"../link-element/LinkElement.js";import{ArrowCorner as i}from"../../icons/ArrowCorner.js";import{Spinner as a}from"../spinner/Spinner.js";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";const l={control:`bg-action`,light:`bg-neutral-500`,danger:`bg-alert`},u={sm:`h-8 gap-1.5 text-sm`,md:`h-10 gap-2 text-base`,lg:`h-14 gap-2.5 text-lg`},d={sm:`min-w-16 px-7`,md:`min-w-24 px-10`,lg:`min-w-40 px-13`},f={sm:`left-3 h-4 w-2 [--marker-bar:2px]`,md:`left-4 h-5 w-2.5`,lg:`left-6 h-7 w-3`},p={sm:`group-hover:translate-x-1 group-active:translate-x-1`,md:`group-hover:translate-x-1.5 group-active:translate-x-1.5`,lg:`group-hover:translate-x-2 group-active:translate-x-2`},m={sm:`left-3 size-2`,md:`left-4 size-2.5`,lg:`left-6 size-3`},h={sm:`min-w-16 pl-4 pr-8`,md:`min-w-24 pl-6 pr-11`,lg:`min-w-40 pl-8 pr-15`},g={sm:`right-3.5 w-0.5`,md:`right-4.5 w-[3px]`,lg:`right-6 w-[3px]`},_={sm:`right-[3px] size-2`,md:`right-[5px] size-2`,lg:`right-1.5 size-3`},v={sm:`min-w-16 px-3.5`,md:`min-w-24 px-5`,lg:`min-w-40 px-7`},y={sm:14,md:16,lg:20},b={control:`bg-control text-on-control shadow-xs hover:bg-control-hover hover:text-white active:bg-control-pressed active:text-white`,danger:`bg-control text-on-control shadow-xs hover:bg-control-hover hover:text-white active:bg-control-pressed active:text-white`,light:`bg-neutral-0 text-neutral-900 shadow-xs hover:bg-neutral-100 active:bg-neutral-200`,action:`bg-action text-on-action shadow-md active:bg-action-pressed`,back:`hatch hatch-mid bg-control text-white shadow-xs hover:bg-neutral-600 active:bg-control-pressed`,text:`text-ink active:text-ink-secondary`};function x(x){let{variant:S=`control`,size:C=`md`,iconStart:w,iconEnd:T,loading:E=!1,loadingText:D,block:O=!1,disabled:k=!1,className:A,children:j,...M}=x,N=k||E,P=S===`text`,F=l[S],I=y[C],L=k?`forced-colors:bg-[GrayText]`:`forced-colors:bg-[ButtonText]`,R=e(`group relative inline-flex shrink-0 items-center justify-center font-medium leading-none whitespace-nowrap select-none`,`transition-colors duration-(--duration-fast) ease-standard`,t,u[C],F&&d[C],S===`action`&&h[C],S===`back`&&v[C],P&&`h-auto border-b border-current py-1`,k?P?`cursor-not-allowed text-ink-disabled`:`cursor-not-allowed bg-disabled text-on-disabled`:b[S],!P&&`forced-colors:border`,k?`forced-colors:border-[GrayText] forced-colors:text-[GrayText]`:!P&&`forced-colors:border-[ButtonText]`,E&&!k&&`forced-colors:text-[ButtonText]`,E&&`pointer-events-none`,O&&`flex w-full`,A),z=w,B=T;S===`back`&&z===void 0&&(z=E?/* @__PURE__ */ s(`span`,{className:`inline-flex items-center justify-center`,style:{width:I,height:I},children:/* @__PURE__ */ s(a,{label:null,className:e(`size-2`,L)})}):/* @__PURE__ */ s(n,{size:I})),P&&B===void 0&&(B=E?/* @__PURE__ */ s(`span`,{className:`inline-flex items-center justify-center`,style:{width:I,height:I},children:/* @__PURE__ */ s(a,{label:null,className:e(`size-2`,L)})}):/* @__PURE__ */ s(i,{size:I,className:e(`transition-[translate] duration-(--duration-base) ease-standard`,!k&&`group-hover:translate-x-0.5 group-hover:translate-y-0.5`)}));let V=D===void 0?j:/* @__PURE__ */ c(`span`,{className:`grid justify-items-center`,children:[/* @__PURE__ */ s(`span`,{"aria-hidden":E||void 0,className:e(`col-start-1 row-start-1`,E&&`invisible`),children:j}),/* @__PURE__ */ s(`span`,{"aria-hidden":!E||void 0,className:e(`col-start-1 row-start-1`,!E&&`invisible`),children:D})]}),H=/* @__PURE__ */ c(o,{children:[F&&(E?/* @__PURE__ */ s(`span`,{className:e(`pointer-events-none absolute top-1/2 -translate-y-1/2`,m[C]),children:/* @__PURE__ */ s(a,{label:null,className:e(`block size-full`,F,L)})}):/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:e(`marker-bar pointer-events-none absolute top-1/2 -translate-y-1/2`,`transition-[clip-path,translate] duration-(--duration-base) ease-standard`,f[C],L,k?`bg-on-disabled`:[F,`group-hover:marker-arrow group-active:marker-arrow`,p[C]])})),z,V,B,S===`action`&&/* @__PURE__ */ c(o,{children:[/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:e(`pointer-events-none absolute top-[17.5%] h-[65%]`,`transition-colors duration-(--duration-fast) ease-standard`,g[C],k?`bg-on-disabled/20`:[`bg-on-action/10 group-hover:bg-on-action/15 group-active:bg-on-action/20`,`forced-colors:group-hover:bg-[ButtonText] forced-colors:group-active:bg-[ButtonText]`],L)}),E&&/* @__PURE__ */ s(`span`,{className:e(`pointer-events-none absolute top-1/2 -translate-y-1/2`,_[C]),children:/* @__PURE__ */ s(a,{label:null,className:e(`block size-full`,L)})})]})]}),U={className:R,"data-variant":S,"data-size":C,"data-loading":E?``:void 0,"aria-busy":E||void 0};if(M.href!==void 0||M.render!==void 0){let{href:e,render:t,onClick:n,...i}=M,a=e=>{N?e.preventDefault():n?.(e)};return/* @__PURE__ */ s(r,{...i,...U,render:t,href:N?void 0:e,role:N?`link`:i.role,"aria-disabled":N||void 0,onClick:a,children:H})}let{href:W,render:G,onClick:K,type:q=`button`,...J}=M,Y=e=>{N?e.preventDefault():K?.(e)};return/* @__PURE__ */ s(`button`,{...J,...U,type:q,disabled:k,"aria-disabled":E||void 0,onClick:Y,children:H})}export{x as Button};

package/dist/components/button/ButtonGroup.d.ts

@@ -0,0 +1,21 @@
+
+import { ComponentProps } from "react";
+//#region src/components/button/ButtonGroup.d.ts
+export type ButtonGroupAlign = "start" | "end" | "between";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export type ButtonGroupGap = "sm" | "md";
+export type ButtonGroupProps = ComponentProps<"div"> & {
+  /** 横排时靠哪一边。默认 `end`：主要行动放在最右 */
+  align?: ButtonGroupAlign;
+  /** 竖排时按钮等宽，主要行动放在最下 */
+  orientation?: ButtonGroupOrientation;
+  /** 按钮之间 8px 或 12px */
+  gap?: ButtonGroupGap;
+};
+/**
+ * 并排的一组按钮。主要行动写在最后（最右或最下），一组里最多一个 `action`；
+ * "取消 + 确认"用 `light` + `control`，把黄色留给真正重要的时刻。
+ * 放不下时整组换行，不挤压按钮。
+ */
+export declare function ButtonGroup({ align, orientation, gap, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+//#endregion

package/dist/components/button/ButtonGroup.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{jsx as t}from"react/jsx-runtime";const n={start:`justify-start`,end:`justify-end`,between:`justify-between`},r={sm:`gap-2`,md:`gap-3`};function i({align:i=`end`,orientation:a=`horizontal`,gap:o=`md`,className:s,...c}){return/* @__PURE__ */ t(`div`,{role:`group`,...c,"data-orientation":a,className:e(`flex`,r[o],a===`vertical`?`flex-col items-stretch`:[`flex-wrap items-center`,n[i]],s)})}export{i as ButtonGroup};

package/dist/components/button/index.d.ts

@@ -0,0 +1,4 @@
+
+import { Button, ButtonProps, ButtonSize, ButtonVariant } from "./Button.js";
+import { ButtonGroup, ButtonGroupAlign, ButtonGroupGap, ButtonGroupOrientation, ButtonGroupProps } from "./ButtonGroup.js";
+export { Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupGap, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant };