@endfield-ui/react 1.2.0 → 1.2.1

package/README.md

@@ -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） |
 
 ## 使用
@@ -942,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 的类名顺序也不归它管。
@@ -954,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 };

package/dist/components/calendar/Calendar.d.ts

@@ -0,0 +1,57 @@
+
+import { ComponentProps } from "react";
+//#region src/components/calendar/Calendar.d.ts
+/** 一段日期：`[起, 止]`，两头都包含。只有一天时两个一样 */
+export type DateRange = [start: string, end: string];
+type CalendarBaseProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
+  /** 现在显示的月份，`YYYY-MM`。不传时跟着选中的那一天（没选就是今天） */
+  month?: string;
+  defaultMonth?: string;
+  onMonthChange?: (month: string) => void;
+  /** 能选的最早一天 */
+  min?: string;
+  /** 能选的最晚一天 */
+  max?: string;
+  /** 返回真的日子不可选（比如周末、已经约满的日子） */
+  isDateDisabled?: (date: string) => boolean;
+  /** 一周从哪天开始：1 是星期一（默认），0 是星期日 */
+  weekStartsOn?: 0 | 1;
+  /** 月份标题、星期、读屏听到的日期名称按它走。默认 `zh-CN` */
+  locale?: string;
+  /** 哪一天算"今天"。默认取本地时间；服务端渲染或要一个固定的今天时自己传 */
+  today?: string;
+  previousLabel?: string;
+  nextLabel?: string;
+};
+export type CalendarSingleProps = CalendarBaseProps & {
+  range?: false;
+  /** 选中的那一天，`YYYY-MM-DD`；没选是 `null` */
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string) => void;
+  startLabel?: never;
+  endLabel?: never;
+  pendingLabel?: never;
+};
+export type CalendarRangeProps = CalendarBaseProps & {
+  /** 选一段：点两下，第一下定起始日，第二下定结束日 */
+  range: true;
+  /** 选中的那一段，`[起, 止]`；没选是 `null` */
+  value?: DateRange | null;
+  defaultValue?: DateRange | null;
+  /** 只在一段选完时触发；后点的那天更早也会排成先后 */
+  onValueChange?: (value: DateRange) => void;
+  /** 读屏在两端那两天的名称后面听到的词，默认"起始日""结束日" */
+  startLabel?: string;
+  endLabel?: string;
+  /** 起始日定了之后的那句播报，默认"再选结束日" */
+  pendingLabel?: string;
+};
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+/**
+ * 月历：选一天；加 `range` 是选一段。日期是 `YYYY-MM-DD` 的字符串。
+ * 要一个带面板的字段用 `DatePicker` / `DateRangePicker`。
+ */
+export declare function Calendar({ range, value: valueProp, defaultValue, onValueChange, month: monthProp, defaultMonth, onMonthChange, min, max, isDateDisabled, weekStartsOn, locale, today: todayProp, previousLabel, nextLabel, startLabel, endLabel, pendingLabel, className, ...props }: CalendarProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/calendar/Calendar.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRingInset as t}from"../../lib/focus-ring.js";import{useControllableState as n}from"../../hooks/useControllableState.js";import{ChevronLeft as r}from"../../icons/ChevronLeft.js";import{ChevronRight as i}from"../../icons/ChevronRight.js";import{IconButton as a}from"../icon-button/IconButton.js";import{addDays as o,addMonths as s,addMonthsToMonth as c,clampDate as l,dateParts as ee,monthGrid as u,monthOf as d,orderDates as f,startOfWeek as p,toDateObject as m,today as te}from"../../lib/date.js";import{useEffect as h,useId as ne,useLayoutEffect as re,useMemo as g,useRef as _,useState as v}from"react";import{jsx as y,jsxs as b}from"react/jsx-runtime";const x={timeZone:`UTC`},S=e=>e===null?``:typeof e==`string`?e:e.join(`/`);function ie(e,t,n){switch(e.key){case`ArrowLeft`:return o(t,-1);case`ArrowRight`:return o(t,1);case`ArrowUp`:return o(t,-7);case`ArrowDown`:return o(t,7);case`Home`:return p(t,n);case`End`:return o(p(t,n),6);case`PageUp`:return s(t,e.shiftKey?-12:-1);case`PageDown`:return s(t,e.shiftKey?12:1);default:return null}}function C({range:p=!1,value:C,defaultValue:ae=null,onValueChange:oe,month:se,defaultMonth:ce,onMonthChange:le,min:w,max:T,isDateDisabled:ue,weekStartsOn:E=1,locale:D=`zh-CN`,today:O,previousLabel:de=`上个月`,nextLabel:fe=`下个月`,startLabel:k=`起始日`,endLabel:pe=`结束日`,pendingLabel:me=`再选结束日`,className:he,...ge}){let A=ne(),j=_(null),[_e]=v(()=>O??te()),M=O??_e,[N,ve]=n({value:C,defaultValue:ae,onChange:e=>{e!==null&&oe?.(e)}}),P=N===null?null:typeof N==`string`?[N,N]:N,[F,I]=v(null),[ye,L]=v(null),[R,z]=v(()=>l(P?.[0]??M,w,T)),[B,V]=n({value:se,defaultValue:ce??d(R),onChange:le}),H=_(!1),U=S(N),W=_(U),G=P?.[0]??null;h(()=>{U!==W.current&&(W.current=U,I(null),G!==null&&(z(G),V(d(G))))},[U,G,V]),h(()=>{H.current&&(H.current=!1,j.current?.querySelector(`[data-date="${R}"]`)?.focus())},[R,B]);let be=_({month:B,until:0,length:0});re(()=>{let e=be.current;if(e.month===B)return;let t=B>e.month;e.month=B;let n=j.current;if(!n)return;let r=performance.now();if(delete n.dataset.turn,r<e.until){e.until=r+e.length;return}n.offsetWidth,n.dataset.turn=t?`next`:`previous`;let i=typeof n.getAnimations==`function`?n.getAnimations()[0]:void 0;e.length=Number(i?.effect?.getComputedTiming().endTime??0),e.until=r+e.length},[B]);let K=g(()=>u(B,E),[B,E]),q=g(()=>({title:new Intl.DateTimeFormat(D,{...x,year:`numeric`,month:`long`}),weekdayShort:new Intl.DateTimeFormat(D,{...x,weekday:`narrow`}),weekdayLong:new Intl.DateTimeFormat(D,{...x,weekday:`long`}),day:new Intl.DateTimeFormat(D,{...x,dateStyle:`full`})}),[D]),J=e=>w!==void 0&&e<w||T!==void 0&&e>T||(ue?.(e)??!1),xe=e=>{let t=l(e,w,T);H.current=!0,z(t),d(t)!==B&&V(d(t))},Y=e=>{W.current=S(e),ve(e)},Se=e=>{J(e)||(z(e),d(e)!==B&&V(d(e)),p?F===null?I(e):(I(null),Y(f(F,e))):Y(e))},X=e=>{let t=c(B,e);V(t),z(l(s(R,e),w,T))},Z=`${B}-01`,Ce=w!==void 0&&o(Z,-1)<w,we=T!==void 0&&s(Z,1)>T,Te=K.flat().includes(R)?R:Z,Q=F===null?P:[F,F],$=F===null?null:f(F,ye??R);return/* @__PURE__ */ b(`div`,{...ge,"data-month":B,"data-range":p?``:void 0,"data-pending":F===null?void 0:``,className:e(`inline-flex flex-col gap-1 text-ink`,he),children:[/* @__PURE__ */ b(`div`,{className:`flex items-center justify-between gap-2`,children:[/* @__PURE__ */ y(a,{size:`sm`,"aria-label":de,disabled:Ce,onClick:()=>X(-1),children:/* @__PURE__ */ y(r,{})}),/* @__PURE__ */ y(`div`,{id:A,"aria-live":`polite`,className:`text-sm font-bold tabular-nums`,children:q.title.format(m(Z))}),/* @__PURE__ */ y(a,{size:`sm`,"aria-label":fe,disabled:we,onClick:()=>X(1),children:/* @__PURE__ */ y(i,{})})]}),/* @__PURE__ */ b(`table`,{role:`grid`,"aria-labelledby":A,"aria-multiselectable":p||void 0,className:`border-separate border-spacing-0`,children:[/* @__PURE__ */ y(`thead`,{children:/* @__PURE__ */ y(`tr`,{children:K[0].map(e=>/* @__PURE__ */ y(`th`,{scope:`col`,abbr:q.weekdayLong.format(m(e)),className:`h-8 w-10 text-xs font-normal text-ink-tertiary`,children:q.weekdayShort.format(m(e))},e))})}),/* @__PURE__ */ y(`tbody`,{ref:j,className:`data-turn:animate-shift-in data-[turn=next]:[--shift-x:var(--motion-shift-lg)] data-[turn=previous]:[--shift-x:calc(var(--motion-shift-lg)*-1)]`,onPointerLeave:()=>L(null),onKeyDown:e=>{if(e.key===`Escape`&&F!==null){I(null);return}let t=ie(e,R,E);t!==null&&(e.preventDefault(),L(null),xe(t))},children:K.map(n=>/* @__PURE__ */ y(`tr`,{children:n.map(n=>{let r=Q!==null&&n===Q[0],i=Q!==null&&n===Q[1],a=r||i,o=Q!==null&&n>Q[0]&&n<Q[1],s=$!==null&&!a&&n>=$[0]&&n<=$[1],c=n===M,l=d(n)!==B,u=J(n),f=[q.day.format(m(n)),p&&r&&k,p&&i&&pe].filter(Boolean).join(`，`);return/* @__PURE__ */ y(`td`,{role:`gridcell`,"aria-selected":a||o,className:`p-0`,children:/* @__PURE__ */ y(`button`,{type:`button`,"data-date":n,"data-today":c?``:void 0,"data-outside":l?``:void 0,"data-range-start":p&&r?``:void 0,"data-range-end":p&&i?``:void 0,"data-in-range":o?``:void 0,"data-preview":s?``:void 0,tabIndex:n===Te?0:-1,"aria-label":f,"aria-current":c?`date`:void 0,"aria-disabled":u||void 0,onClick:()=>Se(n),onFocus:()=>z(n),onPointerEnter:p?()=>L(n):void 0,className:e(`relative flex size-10 items-center justify-center font-tech text-sm tabular-nums`,`transition-colors duration-(--duration-fast) ease-standard`,t,a?`bg-surface-inverse font-bold text-ink-inverse focus-visible:outline-accent-ink-inverse forced-colors:forced-color-adjust-none forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:focus-visible:-outline-offset-4 forced-colors:focus-visible:outline-[HighlightText]`:[o?`bg-ink/10 forced-colors:border-y-2 forced-colors:border-[Highlight]`:s&&`bg-ink/5`,u?`cursor-not-allowed text-ink-disabled line-through`:[l?`text-ink-tertiary`:`text-ink`,o?`hover:bg-ink/15`:`hover:bg-ink/5`]],c&&`after:absolute after:bottom-1.5 after:left-1/2 after:h-0.5 after:w-3 after:-translate-x-1/2 after:content-['']`,c&&(a?`after:bg-accent-ink-inverse forced-colors:after:bg-[HighlightText]`:`after:bg-accent-ink forced-colors:after:bg-[CanvasText]`)),children:ee(n).day})},n)})},n[0]))})]}),p&&/* @__PURE__ */ y(`div`,{"aria-live":`polite`,className:`sr-only`,children:F!==null&&`${q.day.format(m(F))}，${k}。${me}`})]})}export{C as Calendar};

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

@@ -0,0 +1,3 @@
+
+import { Calendar, CalendarProps, CalendarRangeProps, CalendarSingleProps, DateRange } from "./Calendar.js";
+export { Calendar, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type DateRange };

package/dist/components/carousel/Carousel.d.ts

@@ -0,0 +1,38 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/carousel/Carousel.d.ts
+export type CarouselRatio = "16/9" | "4/3" | "1/1" | "3/4" | "21/9";
+export type CarouselProps = Omit<ComponentProps<"section">, "aria-label" | "onChange"> & {
+  /** 这组媒体是什么，比如"玩法介绍" */
+  "aria-label": string;
+  /** 现在是第几张，从 0 起 */
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** 到头之后绕回另一头。默认到头时翻页钮禁用 */
+  loop?: boolean;
+  /** 媒体的宽高比，默认 `16/9` */
+  ratio?: CarouselRatio;
+  /** 计数旁边再加一排进度短横 */
+  indicator?: boolean;
+  previousLabel?: string;
+  nextLabel?: string;
+  /** 直接放 `CarouselSlide` */
+  children: ReactNode;
+};
+/**
+ * 媒体轮播：一次看一张的大幅媒体，前后翻。不自动播放。
+ * 轨道是原生的横向滚动加滚动吸附，触屏滑动是浏览器自带的。
+ */
+export declare function Carousel({ index: indexProp, defaultIndex, onIndexChange, loop, ratio, indicator, previousLabel, nextLabel, className, children, ...props }: CarouselProps): import("react").JSX.Element;
+export type CarouselSlideProps = Omit<ComponentProps<"div">, "title"> & {
+  /** 这一张的标题，显示在媒体下方 */
+  title?: ReactNode;
+  /** 标题下面的一段正文 */
+  description?: ReactNode;
+  /** 媒体：一张图或一段视频，铺满并裁切 */
+  children: ReactNode;
+};
+/** 轮播里的一张。直接放在 `Carousel` 里。 */
+export declare function CarouselSlide({ title: _title, description: _description, className, children, ...props }: CarouselSlideProps): import("react").JSX.Element;
+//#endregion

package/dist/components/carousel/Carousel.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{createLazyContext as n}from"../../lib/create-lazy-context.js";import{useControllableState as r}from"../../hooks/useControllableState.js";import{ChevronLeft as i}from"../../icons/ChevronLeft.js";import{ChevronRight as a}from"../../icons/ChevronRight.js";import{IconButton as o}from"../icon-button/IconButton.js";import{DashIndicator as s}from"../dash-indicator/DashIndicator.js";import{useSnapTrack as c}from"./snap-track.js";import{Children as l,isValidElement as u,useContext as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m={"16/9":`aspect-video`,"4/3":`aspect-4/3`,"1/1":`aspect-square`,"3/4":`aspect-3/4`,"21/9":`aspect-21/9`},h=/* @__PURE__ */ n(null);function g({index:n,defaultIndex:d=0,onIndexChange:g,loop:_=!1,ratio:v=`16/9`,indicator:y=!1,previousLabel:b=`上一张`,nextLabel:x=`下一张`,className:S,children:C,...w}){let T=h(),E=l.toArray(C).filter(e=>u(e)),D=E.length,O=Math.max(0,D-1),[k,A]=r({value:n,defaultValue:d,onChange:g}),j=Math.min(Math.max(k,0),O),{trackRef:M,onScroll:N}=c({index:j,count:D,onSettle:A}),P=e=>{if(D===0)return;let t=_?(e+D)%D:Math.min(Math.max(e,0),O);A(t),!_&&(t===0||t===O)&&document.activeElement instanceof HTMLButtonElement&&M.current?.parentElement?.contains(document.activeElement)&&M.current.focus({preventScroll:!0})},F=e=>{let t={ArrowLeft:j-1,ArrowRight:j+1,Home:0,End:O}[e.key];t!==void 0&&(e.preventDefault(),P(t))},I=E[j],L=`第 ${j+1} 张，共 ${D} 张`;return/* @__PURE__ */ p(`section`,{...w,role:`group`,"aria-roledescription":`轮播`,"data-ratio":v,className:e(`flex flex-col gap-3 text-ink`,S),children:[/* @__PURE__ */ p(`div`,{className:`relative isolate`,children:[/* @__PURE__ */ f(`div`,{ref:M,tabIndex:0,onScroll:N,onKeyDown:e=>{e.target===e.currentTarget&&F(e)},className:e(`flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain bg-surface-muted [scrollbar-width:none]`,t,m[v]),children:E.map((e,t)=>/* @__PURE__ */ f(T.Provider,{value:{position:t,count:D,current:t===j},children:e},t))}),/* @__PURE__ */ p(`div`,{onKeyDown:F,className:`absolute bottom-3 left-3 z-1 flex gap-2`,children:[/* @__PURE__ */ f(o,{variant:`floating`,"aria-label":b,disabled:!_&&j<=0,onClick:()=>P(j-1),children:/* @__PURE__ */ f(i,{})}),/* @__PURE__ */ f(o,{variant:`floating`,"aria-label":x,disabled:!_&&j>=O,onClick:()=>P(j+1),children:/* @__PURE__ */ f(a,{})})]})]}),/* @__PURE__ */ p(`div`,{className:`flex flex-col gap-1`,children:[/* @__PURE__ */ p(`div`,{"aria-hidden":`true`,className:`flex items-center gap-3`,children:[/* @__PURE__ */ f(`span`,{className:`shrink-0 font-tech text-xs whitespace-nowrap text-ink-secondary tabular-nums`,children:`${j+1} / ${D}`}),y&&/* @__PURE__ */ f(s,{count:D,index:j})]}),/* @__PURE__ */ p(`div`,{"aria-live":`polite`,className:`flex flex-col gap-1`,children:[/* @__PURE__ */ f(`span`,{className:`sr-only`,children:L}),I?.props.title&&/* @__PURE__ */ f(`p`,{className:`text-lg font-bold wrap-anywhere`,children:I.props.title}),I?.props.description&&/* @__PURE__ */ f(`p`,{className:`text-sm text-ink-secondary`,children:I.props.description})]})]})]})}function _({title:t,description:n,className:r,children:i,...a}){let o=d(h());if(!o)throw Error(`CarouselSlide 要直接放在 Carousel 里面`);return/* @__PURE__ */ f(`div`,{...a,role:`group`,"aria-roledescription":`幻灯片`,"aria-label":`第 ${o.position+1} 张，共 ${o.count} 张`,inert:!o.current,"data-current":o.current?``:void 0,className:e(`relative size-full shrink-0 snap-start overflow-clip *:size-full *:object-cover`,r),children:i})}export{g as Carousel,_ as CarouselSlide};