@endfield-ui/react 1.2.0 → 1.3.0

package/dist/components/table/Table.d.ts

@@ -0,0 +1,96 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/table/Table.d.ts
+export type TableHeaderVariant = "band" | "muted";
+export type TableSize = "sm" | "md";
+export type TableSortDirection = "ascending" | "descending";
+export type TableAlign = "start" | "center" | "end";
+export type TableProps = Omit<ComponentProps<"table">, "aria-label"> & {
+  /** 表格的名称。横向能滚动时，滚动的那一块也用它 */
+  label: string;
+  /**
+   * 表头的画法：
+   * - `band` 反转的标题带（亮色下墨底白字），默认，和面板的标题带是同一个样子。
+   *   表头是一个 `data-theme="inverse"` 的局部主题，里面可以照常放复选框；
+   * - `muted` 浅灰底墨字，页面上已经有很多深色块时用。
+   */
+  headerVariant?: TableHeaderVariant;
+  /** 行高 36 / 44px，默认 `md` */
+  size?: TableSize;
+  /** 横向滚动时冻结第一列。列多、窄屏上要滚着看时打开 */
+  stickyFirstColumn?: boolean;
+  /**
+   * 表身在容器里纵向滚动时，表头留在容器的上沿。
+   * 容器要有一个高度上限才滚得起来：`className="max-h-96"`
+   */
+  stickyHeader?: boolean;
+  /** 每隔五行加重一条线。行数很多时帮眼睛数行 */
+  ruled?: boolean;
+  /** 给外面那层横向滚动的容器；其余属性给 `<table>` */
+  className?: string;
+};
+/**
+ * 表格：原生 `<table>` 套样式。里面放 `TableHead`、`TableBody`、`TableRow`、
+ * `TableHeaderCell`、`TableCell`。
+ *
+ * 放不下时在自己的容器里横向滚动，不撑破页面；给容器一个高度上限，它也能纵向滚动。整行不可点：
+ * 要进详情把名称写成链接，要勾选在第一列放 `Checkbox`，要展开明细给行传 `detail`、
+ * 在格子里放 `TableExpander`。
+ */
+export declare function Table({ label, headerVariant, size, stickyFirstColumn, stickyHeader, ruled, className, ...props }: TableProps): import("react").JSX.Element;
+export type TableHeadProps = ComponentProps<"thead">;
+export declare function TableHead(props: TableHeadProps): import("react").JSX.Element;
+export type TableBodyProps = ComponentProps<"tbody">;
+export declare function TableBody({ className, ...props }: TableBodyProps): import("react").JSX.Element;
+export type TableRowProps = ComponentProps<"tr"> & {
+  /** 选中：浅灰底 + 左缘黄条，输出 `aria-selected`。只用在表身的行上 */
+  selected?: boolean;
+  /**
+   * 这一行的明细。传了这一行就能展开：展开时它出现在这一行下面，通栏。
+   * 展开钮自己放：在某一格里放一个 `TableExpander`
+   */
+  detail?: ReactNode;
+  /** 受控的展开状态 */
+  expanded?: boolean;
+  /** 非受控时一开始是不是展开的 */
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+};
+export declare function TableRow({ selected, detail, expanded: expandedProp, defaultExpanded, onExpandedChange, className, ref, children, ...props }: TableRowProps): import("react").JSX.Element;
+export type TableExpanderProps = Omit<ComponentProps<"button">, "aria-expanded" | "aria-controls" | "children">;
+/**
+ * 展开钮：放在能展开的行（传了 `detail` 的 `TableRow`）的某一格里，通常在名称前面。
+ * 一张表里有很多个，名称写成"TR-2041 的明细"读屏才分得清。放在不能展开的行里不渲染。
+ */
+export declare function TableExpander({ "aria-label": label, type, className, onClick, ...props }: TableExpanderProps): import("react").JSX.Element | null;
+export type TableHeaderCellProps = Omit<ComponentProps<"th">, "align"> & {
+  /** 数字列：右对齐 */
+  numeric?: boolean;
+  /** 对齐，默认靠左；`numeric` 时默认靠右 */
+  align?: TableAlign;
+  /** 这一列现在的排序方向。没按它排就不传 */
+  sort?: TableSortDirection | null;
+  /**
+   * 传了这一列就能排序：列名变成一个按钮，右侧一个小三角。
+   * 拿到的是点了之后该换成的方向——没排或降序时是升序，升序时是降序
+   */
+  onSort?: (next: TableSortDirection) => void;
+};
+/** 列头：`<th scope="col">`。 */
+export declare function TableHeaderCell({ numeric, align, sort, onSort, className, children, ...props }: TableHeaderCellProps): import("react").JSX.Element;
+export type TableCellProps = Omit<ComponentProps<"td">, "align"> & {
+  /** 数字：右对齐、等宽 */
+  numeric?: boolean;
+  /** 对齐，默认靠左；`numeric` 时默认靠右 */
+  align?: TableAlign;
+  /** 这一格是这一行的名称：渲染成 `<th scope="row">` */
+  rowHeader?: boolean;
+  /**
+   * 行内操作：鼠标悬停或键盘聚焦到这一行时才显示。
+   * 触屏上没有悬停，所以常显
+   */
+  reveal?: boolean;
+};
+/** 单元格：`<td>`；`rowHeader` 时是 `<th scope="row">`。 */
+export declare function TableCell({ numeric, align, rowHeader, reveal, className, children, ...props }: TableCellProps): import("react").JSX.Element;
+//#endregion

package/dist/components/table/Table.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRing as t,focusRingInset as n}from"../../lib/focus-ring.js";import{createLazyContext as r}from"../../lib/create-lazy-context.js";import{usePresence as i}from"../../hooks/usePresence.js";import{mergeRefs as a}from"../../lib/merge-refs.js";import{useControllableState as o}from"../../hooks/useControllableState.js";import{TriangleRight as s}from"../../icons/TriangleRight.js";import{collapse as c,collapseInner as l}from"../../lib/motion.js";import{useOverflowing as u}from"../../hooks/useOverflowing.js";import{Children as d,isValidElement as f,useContext as p,useEffect as m,useId as h,useLayoutEffect as g,useMemo as _,useRef as v,useState as y}from"react";import{Fragment as b,jsx as x,jsxs as S}from"react/jsx-runtime";const C=/* @__PURE__ */ r({headerVariant:`band`,size:`md`,sticky:!1,stickyHeader:!1,ruled:!1}),w=/* @__PURE__ */ r(`body`),T=/* @__PURE__ */ r(null);function E({label:t,headerVariant:r=`band`,size:i=`md`,stickyFirstColumn:a=!1,stickyHeader:o=!1,ruled:s=!1,className:c,...l}){let d=C(),[f,p]=u(),h=p.x||p.y;m(()=>{let e=f.current;if(!e||typeof ResizeObserver>`u`)return;let t=()=>e.style.setProperty(`--table-viewport`,`${e.clientWidth}px`);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[f]);let g=_(()=>({headerVariant:r,size:i,sticky:a,stickyHeader:o,ruled:s}),[r,i,a,o,s]);return/* @__PURE__ */ x(d.Provider,{value:g,children:/* @__PURE__ */ x(`div`,{ref:f,"data-overflowing":p.x?``:void 0,...h&&{role:`region`,"aria-label":t,tabIndex:0},className:e(`group/table isolate overflow-auto [--table-surface:var(--ef-surface)]`,n,c),children:/* @__PURE__ */ x(`table`,{...l,"aria-label":t,"data-size":i,"data-header-variant":r,className:`w-full border-separate border-spacing-0 text-left text-sm text-ink`})})})}function D(e){let t=w(),{headerVariant:n}=p(C());return/* @__PURE__ */ x(t.Provider,{value:`head`,children:/* @__PURE__ */ x(`thead`,{"data-theme":n===`band`?`inverse`:void 0,...e})})}const O=[`[&>tr:nth-child(5n_of_:not([data-detail])):not(:has(+tr[data-detail]))>*]:border-line-strong`,`[&>tr:nth-child(5n_of_:not([data-detail]))+tr[data-detail]>*]:border-line-strong`].join(` `);function k({className:t,...n}){let r=w(),{ruled:i}=p(C());return/* @__PURE__ */ x(r.Provider,{value:`body`,children:/* @__PURE__ */ x(`tbody`,{...n,className:e(i&&O,t)})})}const A=[`[--row-bg:var(--table-surface)] hover:bg-ink/5`,`hover:[--row-bg:color-mix(in_srgb,var(--ef-ink)_5%,var(--table-surface))]`].join(` `),j=[`bg-surface-muted [--row-bg:var(--ef-surface-muted)]`,`[&>*:first-child]:shadow-[inset_4px_0_0_var(--ef-action)]`].join(` `);function M({selected:t,detail:n,expanded:r,defaultExpanded:s=!1,onExpandedChange:c,className:l,ref:u,children:d,...f}){let m=T(),g=p(w()),y=v(null),C=h(),[E,D]=o({value:r,defaultValue:s,onChange:c}),O=n!=null&&n!==!1,k=O&&E,M=i(k),F=_(()=>O?{expanded:k,toggle:()=>D(!k),detailId:C}:null,[O,k,D,C]);return g===`head`?/* @__PURE__ */ x(`tr`,{...f,ref:u,className:l,children:d}):/* @__PURE__ */ S(b,{children:[/* @__PURE__ */ x(`tr`,{...f,ref:a(y,u),"aria-selected":t,"data-selected":t?``:void 0,"data-expanded":k?``:void 0,className:e(`group/row transition-colors duration-(--duration-fast) ease-standard`,t?j:A,`[&:has(+tr[data-detail])>*]:border-b-transparent`,l),children:/* @__PURE__ */ x(m.Provider,{value:F,children:d})}),M.mounted&&/* @__PURE__ */ x(P,{id:C,rowRef:y,estimate:N(d),presence:M,children:n})]})}function N(e){let t=0;for(let n of d.toArray(e))f(n)&&(t+=Number(n.props.colSpan??1));return Math.max(t,1)}function P({id:t,rowRef:n,estimate:r,presence:i,children:a}){let[o,s]=y(null);return g(()=>{let e=n.current;if(!e)return;let t=0;for(let n of e.cells)t+=n.colSpan;t>0&&s(t)}),/* @__PURE__ */ x(`tr`,{id:t,"data-detail":``,inert:i.leaving,children:/* @__PURE__ */ x(`td`,{colSpan:o??r,className:`border-b border-line bg-surface-sunken p-0 [tr:last-child>&]:border-b-0`,children:/* @__PURE__ */ x(`div`,{ref:i.ref,"data-leaving":i.leaving?``:void 0,className:e(`sticky left-0 w-[var(--table-viewport,100%)]`,c,i.entered&&`starting:grid-rows-[0fr]`),children:/* @__PURE__ */ x(`div`,{className:l,children:/* @__PURE__ */ x(`div`,{className:`px-4 py-3 text-sm whitespace-normal`,children:a})})})})})}function F({"aria-label":n=`明细`,type:r=`button`,className:i,onClick:a,...o}){let c=p(T());return c?/* @__PURE__ */ x(`button`,{...o,type:r,"aria-label":n,"aria-expanded":c.expanded,"aria-controls":c.expanded?c.detailId:void 0,onClick:e=>{a?.(e),e.defaultPrevented||c.toggle()},className:e(`relative inline-flex size-6 shrink-0 items-center justify-center align-middle text-ink-secondary`,`after:absolute after:-inset-2 after:content-['']`,`transition-colors duration-(--duration-fast) ease-standard`,`hover:bg-ink/5 hover:text-ink`,t,i),children:/* @__PURE__ */ x(s,{size:8,className:e(`transition-transform duration-(--duration-fast) ease-standard`,c.expanded&&`rotate-90`)})}):null}const I={start:`text-left`,center:`text-center`,end:`text-right`},L=`px-3 first:pl-4 last:pr-4`,R=`first:sticky first:left-0 first:z-1`,z={band:`bg-surface text-ink`,muted:`bg-surface-muted text-ink`};function B({numeric:t=!1,align:r=t?`end`:`start`,sort:i,onSort:a,className:o,children:c,...l}){let{headerVariant:u,sticky:d,stickyHeader:f}=p(C());return/* @__PURE__ */ x(`th`,{scope:`col`,...l,"aria-sort":i??void 0,className:e(`h-8 font-medium whitespace-nowrap`,z[u],I[r],a?`p-0`:L,d&&R,f&&[`sticky top-0 z-1`,d&&`first:z-2`],o),children:a?/* @__PURE__ */ S(`button`,{type:`button`,onClick:()=>a(i===`ascending`?`descending`:`ascending`),className:e(`group/sort flex h-8 w-full items-center gap-1.5 font-medium`,r===`end`&&`flex-row-reverse`,r===`center`&&`justify-center`,`px-3 [th:first-child>&]:pl-4 [th:last-child>&]:pr-4`,n),children:[c,/* @__PURE__ */ x(s,{size:8,className:e(`shrink-0 transition-[opacity,rotate] duration-(--duration-fast) ease-standard`,i===`ascending`?`-rotate-90`:`rotate-90`,i?`text-accent-ink`:`opacity-40 group-hover/sort:opacity-100`)})]}):c})}const V={sm:`h-9`,md:`h-11`};function H({numeric:t=!1,align:n=t?`end`:`start`,rowHeader:r=!1,reveal:i=!1,className:a,children:o,...s}){let{size:c,sticky:l}=p(C());return/* @__PURE__ */ x(r?`th`:`td`,{...r&&{scope:`row`},...s,className:e(`border-b border-line py-1 whitespace-nowrap [tr:last-child>&]:border-b-0`,V[c],L,I[n],t&&`font-tech tabular-nums`,r&&`font-medium`,l&&[R,`first:bg-(--row-bg)`,`group-data-overflowing/table:first:border-r`],a),children:i?/* @__PURE__ */ x(`div`,{className:e(`inline-flex items-center gap-1 align-middle transition-opacity duration-(--duration-fast) ease-standard`,`[@media(hover:hover)]:opacity-0 group-focus-within/row:opacity-100 group-hover/row:opacity-100`),children:o}):o})}export{E as Table,k as TableBody,H as TableCell,F as TableExpander,D as TableHead,B as TableHeaderCell,M as TableRow};

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

@@ -0,0 +1,3 @@
+
+import { Table, TableAlign, TableBody, TableBodyProps, TableCell, TableCellProps, TableExpander, TableExpanderProps, TableHead, TableHeadProps, TableHeaderCell, TableHeaderCellProps, TableHeaderVariant, TableProps, TableRow, TableRowProps, TableSize, TableSortDirection } from "./Table.js";
+export { Table, type TableAlign, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableExpander, type TableExpanderProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableHeaderVariant, type TableProps, TableRow, type TableRowProps, type TableSize, type TableSortDirection };

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,39 @@
+
+import { ComponentProps } from "react";
+//#region src/components/tabs/Tabs.d.ts
+export type TabsVariant = "block" | "capsule" | "wedge";
+export type TabsSize = "sm" | "md";
+type TabsOwnProps = {
+  /**
+   * - `block` 直角的格子，之间是不通顶的竖线；激活时文字让位给箭头。默认；
+   * - `capsule` 横向胶囊，选中反转为墨底。筛选、类目切换；
+   * - `wedge` 选中项是黄底墨字、右侧斜切的楔形。游戏风格界面的一级页签。
+   */
+  variant?: TabsVariant;
+  size?: TabsSize;
+  onValueChange?: (value: string) => void;
+} & ({
+  value: string;
+  defaultValue?: never;
+} | {
+  defaultValue: string;
+  value?: never;
+});
+export type TabsProps = Omit<ComponentProps<"div">, keyof TabsOwnProps> & TabsOwnProps;
+export declare function Tabs({ value, defaultValue, onValueChange, variant, size, ...props }: TabsProps): import("react").JSX.Element;
+export type TabListProps = ComponentProps<"div">;
+export declare function TabList({ className, onKeyDown, ref, ...props }: TabListProps): import("react").JSX.Element;
+export type TabProps = Omit<ComponentProps<"button">, "value"> & {
+  value: string;
+};
+export declare function Tab({ value, disabled, className, children, onClick, ...props }: TabProps): import("react").JSX.Element;
+export type TabPanelProps = ComponentProps<"div"> & {
+  value: string;
+};
+/**
+ * 未选中的面板保留一个隐藏的空容器，让页签的 `aria-controls` 始终有所指。
+ * 切过来的面板淡入；一开始就选中的那一块不动。
+ */
+export declare function TabPanel({ value, className, children, ...props }: TabPanelProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRing as t,focusRingInset as n}from"../../lib/focus-ring.js";import{createLazyContext as r}from"../../lib/create-lazy-context.js";import{mergeRefs as i}from"../../lib/merge-refs.js";import{useControllableState as a}from"../../hooks/useControllableState.js";import{capsuleBase as o,capsuleSize as s,capsuleState as c}from"../chip/capsule-style.js";import{TriangleRight as l}from"../../icons/TriangleRight.js";import{indicator as u,indicatorBox as d}from"../../lib/motion.js";import{useIndicator as f}from"../../hooks/useIndicator.js";import{useContext as p,useId as m,useMemo as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=/* @__PURE__ */ r(null);function b(e){let t=p(y());if(!t)throw Error(`<${e}> 必须放在 <Tabs> 里`);return t}function x(e,t,n){return`${e}-${t}-${n.replace(/[^\w-]/g,`_`)}`}function S({value:e,defaultValue:t,onValueChange:n,variant:r=`block`,size:i=`md`,...o}){let s=y(),c=m(),[l,u]=a({value:e,defaultValue:t??``,onChange:n}),[d]=g(l),[f,p]=g(!1);!f&&l!==d&&p(!0);let v=h(()=>({value:l,select:u,baseId:c,variant:r,size:i,switched:f}),[l,u,c,r,i,f]);return/* @__PURE__ */ _(s.Provider,{value:v,children:/* @__PURE__ */ _(`div`,{...o,"data-variant":r})})}function C({className:t,onKeyDown:n,ref:r,...a}){let{variant:o}=b(`TabList`),s=f(o===`capsule`?`[role="tab"][aria-selected="true"]`:null),c=e=>{if(n?.(e),e.defaultPrevented)return;let t=Array.from(e.currentTarget.querySelectorAll(`[role="tab"]:not(:disabled)`)),r=t.indexOf(document.activeElement);if(r===-1)return;let i;switch(e.key){case`ArrowRight`:i=(r+1)%t.length;break;case`ArrowLeft`:i=(r-1+t.length)%t.length;break;case`Home`:i=0;break;case`End`:i=t.length-1;break;default:return}e.preventDefault();let a=t[i];a?.focus(),a?.click()};return/* @__PURE__ */ _(`div`,{...a,ref:i(s,r),role:`tablist`,"aria-orientation":`horizontal`,onKeyDown:c,className:e(`flex overflow-x-auto [scrollbar-width:thin]`,o===`capsule`&&[`gap-2 p-1`,u,d,`after:z-0 after:rounded-full after:bg-surface-inverse`,`forced-colors:after:bg-[Highlight]`],o===`wedge`&&`border-b-2 border-ink`,t)})}const w={sm:`h-9 px-7 text-base`,md:`h-10 px-8 text-lg`},T={sm:`-translate-x-2.5`,md:`-translate-x-3`},E={sm:`right-1.5 size-5 [&_svg]:size-2.5`,md:`right-2 size-6 [&_svg]:size-3`},D={sm:`h-9 pr-8 pl-5 text-base`,md:`h-10 pr-9 pl-6 text-lg`};function O({value:r,disabled:i=!1,className:a,children:u,onClick:d,...f}){let p=b(`Tab`),m=p.value===r,{variant:h,size:g}=p,y={...f,type:`button`,role:`tab`,id:x(p.baseId,`tab`,r),"aria-selected":m,"aria-controls":x(p.baseId,`panel`,r),tabIndex:m?0:-1,disabled:i,"data-selected":m?``:void 0,onClick:e=>{d?.(e),e.defaultPrevented||p.select(r)}};return h===`capsule`?/* @__PURE__ */ _(`button`,{...y,className:e(o,t,s[g],m?[c.selected,`in-data-indicator:bg-transparent forced-colors:in-data-indicator:bg-transparent`]:i?c.disabled:c.rest,a),children:/* @__PURE__ */ _(`span`,{className:`relative z-1 inline-flex items-center gap-[inherit]`,children:u})}):h===`wedge`?/* @__PURE__ */ _(`button`,{...y,className:e(`relative isolate inline-flex shrink-0 items-center justify-center leading-none font-medium whitespace-nowrap`,`transition-colors duration-(--duration-fast) ease-standard`,`before:absolute before:inset-0 before:-z-10 before:wedge-r before:transition-colors before:duration-(--duration-fast) before:ease-standard before:content-['']`,n,D[g],m?`text-on-action before:bg-action focus-visible:-outline-offset-4 focus-visible:outline-on-action forced-colors:forced-color-adjust-none forced-colors:text-[HighlightText] forced-colors:before:bg-[Highlight] forced-colors:focus-visible:-outline-offset-4 forced-colors:focus-visible:outline-[HighlightText]`:i?`cursor-not-allowed text-ink-disabled`:`text-ink hover:before:bg-ink/5`,a),children:u}):/* @__PURE__ */ v(`button`,{...y,className:e(`relative inline-flex shrink-0 items-center justify-center leading-none font-medium whitespace-nowrap`,`transition-colors duration-(--duration-fast) ease-standard`,`before:absolute before:top-1/6 before:left-0 before:h-2/3 before:w-0.5 before:bg-line before:content-[''] first:before:hidden [[data-selected]+&]:before:hidden`,n,w[g],m?`bg-surface-muted text-ink before:hidden`:i?`cursor-not-allowed text-ink-disabled`:`text-ink hover:bg-ink/5`,a),children:[/* @__PURE__ */ _(`span`,{className:e(`transition-[translate] duration-(--duration-base) ease-standard`,m&&T[g]),children:u}),/* @__PURE__ */ _(`span`,{"aria-hidden":`true`,className:e(`pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center bg-surface-raised text-ink`,`transition-opacity duration-(--duration-base) ease-standard`,E[g],m?`opacity-100`:`opacity-0`),children:/* @__PURE__ */ _(l,{})})]})}function k({value:n,className:r,children:i,...a}){let o=b(`TabPanel`),s=o.value===n;return/* @__PURE__ */ _(`div`,{...a,role:`tabpanel`,id:x(o.baseId,`panel`,n),"aria-labelledby":x(o.baseId,`tab`,n),hidden:!s,tabIndex:0,className:e(t,s&&o.switched&&`animate-fade-in [animation-duration:var(--duration-fast)]`,r),children:s?i:null})}export{O as Tab,C as TabList,k as TabPanel,S as Tabs};

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

@@ -0,0 +1,3 @@
+
+import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, TabsSize, TabsVariant } from "./Tabs.js";
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, type TabsSize, type TabsVariant };

package/dist/components/tag/Tag.d.ts

@@ -0,0 +1,25 @@
+
+import { ComponentProps } from "react";
+//#region src/components/tag/Tag.d.ts
+export type TagVariant = "solid" | "outline" | "inverse" | "muted" | "accent" | "gain";
+export type TagSize = "sm" | "md";
+export type TagProps = ComponentProps<"span"> & {
+  /**
+   * 直角标签：归档性的、不变的信息。
+   *
+   * - `solid` 深灰底白字、2px 微圆角，媒体类型（`PV`、`OST`），默认；
+   * - `outline` 白底细边，活动类型、分类；
+   * - `inverse` 墨底白字，日期块、名值对里的"名"；
+   * - `muted` 浅灰底墨字，名值对里的"值"；
+   * - `accent` 黄底墨字，状态签（`NEW`、推荐）；
+   * - `gain` 荧光黄绿底墨字，增益签（`+6%`）。
+   */
+  variant?: TagVariant;
+  size?: TagSize;
+  /** 等宽数字，用于日期、编号 */
+  numeric?: boolean;
+  /** 左上角加一个小红角，标出一组日期块里需要留意的那一个 */
+  marked?: boolean;
+};
+export declare function Tag({ variant, size, numeric, marked, className, ...props }: TagProps): import("react").JSX.Element;
+//#endregion

package/dist/components/tag/Tag.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={sm:`h-5 px-1.5 text-xs`,md:`h-7 px-2.5 text-sm`},r={solid:`rounded-xs bg-control text-on-control`,outline:`border border-line-strong bg-surface text-ink`,inverse:`bg-surface-inverse text-ink-inverse`,muted:`bg-surface-sunken text-ink`,accent:`bg-action text-on-action`,gain:`bg-gain text-neutral-900`};function i({variant:i=`solid`,size:a=`md`,numeric:o=!1,marked:s=!1,className:c,...l}){return/* @__PURE__ */ t(`span`,{...l,"data-variant":i,"data-marked":s?``:void 0,className:e(`inline-flex shrink-0 items-center font-medium leading-none whitespace-nowrap`,n[a],r[i],o&&`font-tech font-bold tabular-nums`,s&&`relative before:absolute before:top-0 before:left-0 before:size-1.5 before:bg-alert before:content-[''] before:[clip-path:polygon(0_0,100%_0,0_100%)]`,c)})}export{i as Tag};

package/dist/components/tag/TagPair.d.ts

@@ -0,0 +1,16 @@
+
+import { TagSize } from "./Tag.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/tag/TagPair.d.ts
+export type TagPairProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 属性名，如"阵营" */
+  name: ReactNode;
+  /** 属性值 */
+  value: ReactNode;
+  /** 一组里需要突出的那一项："名"换成黄底 */
+  emphasis?: boolean;
+  size?: TagSize;
+};
+/** 名值对：两半紧贴，中间没有缝也没有分隔线。多组之间由使用方留 8px。 */
+export declare function TagPair({ name, value, emphasis, size, className, ...props }: TagPairProps): import("react").JSX.Element;
+//#endregion

package/dist/components/tag/TagPair.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{Tag as t}from"./Tag.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";function i({name:i,value:a,emphasis:o=!1,size:s=`md`,className:c,...l}){return/* @__PURE__ */ r(`span`,{...l,className:e(`inline-flex shrink-0`,c),children:[/* @__PURE__ */ n(t,{variant:o?`accent`:`inverse`,size:s,children:i}),/* @__PURE__ */ n(t,{variant:`muted`,size:s,children:a})]})}export{i as TagPair};

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

@@ -0,0 +1,4 @@
+
+import { Tag, TagProps, TagSize, TagVariant } from "./Tag.js";
+import { TagPair, TagPairProps } from "./TagPair.js";
+export { Tag, TagPair, type TagPairProps, type TagProps, type TagSize, type TagVariant };

package/dist/components/tag-input/TagInput.d.ts

@@ -0,0 +1,66 @@
+
+import { ControlSize, ControlVariant } from "../input/control-box.js";
+import { ComponentProps } from "react";
+//#region src/components/tag-input/TagInput.d.ts
+export type TagInputSize = ControlSize;
+export type TagInputVariant = ControlVariant;
+/** 没加成的原因：已经有了、到了上限、没过 `validate` */
+export type TagInputRejectReason = "duplicate" | "max" | "invalid";
+/** 读屏听到的那几句话 */
+export type TagInputLabels = {
+  /** 框里现在有哪些，作为输入框的补充说明 */
+  summary: (tags: readonly string[]) => string;
+  added: (tag: string) => string;
+  removed: (tag: string) => string;
+  duplicate: (tag: string) => string;
+  max: (max: number) => string;
+};
+type OwnProps = {
+  /** 受控的值 */
+  value?: string[];
+  /** 非受控时的初始值 */
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** 表单字段名：每个标签一个同名的隐藏字段 */
+  name?: string;
+  /** 最多几个。传了右端会出现一个计数 */
+  max?: number;
+  /**
+   * 这个词能不能加。返回一句话就是不让加，这句话会交给 `onReject`；
+   * 返回空的就是可以
+   */
+  validate?: (text: string, current: readonly string[]) => string | null | undefined | false;
+  /** 打出这些字符就提交。默认是半角和全角的逗号；回车总是提交 */
+  separators?: readonly string[];
+  /** 离开输入框时把没提交的字也加进去，默认开 */
+  commitOnBlur?: boolean;
+  /** 一个词没加成：已经有了、到了上限、没过 `validate`（这时第三个参数是那句话） */
+  onReject?: (text: string, reason: TagInputRejectReason, message?: string) => void;
+  /**
+   * 外框的画法，和输入框相同：
+   * - `sunken` 凹陷的底 + 一条底边线，默认；
+   * - `outline` 四边描边，放在凹陷底色的区域里时用。
+   */
+  variant?: TagInputVariant;
+  /** 32 / 40 / 56px：这是最小高度，标签多了会换行、外框长高 */
+  size?: TagInputSize;
+  /** 错误态。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+  /** 小块上删除叉的可访问名称，拿到的是这个标签。默认"移除某某" */
+  removeLabel?: (tag: string) => string;
+  /** 读屏听到的那几句话，换哪句传哪句 */
+  labels?: Partial<TagInputLabels>;
+  /** 给外框 */
+  className?: string;
+};
+export type TagInputProps = OwnProps & Omit<ComponentProps<"input">, keyof OwnProps | "defaultValue" | "max" | "size" | "type" | "value">;
+/**
+ * 标签输入：自己打出来的一串短词。回车或者打出分隔符就加一个，粘贴一串会拆开。
+ * 要从现成的选项里挑，用 `Combobox` 的 `multiple`。
+ *
+ * `className` 给外框，其余属性与 `ref` 给里面的 `<input>`。
+ * 每个标签输入都要有标签：放进 `Field`，或者自己传 `aria-label`。
+ */
+export declare function TagInput({ value, defaultValue, onValueChange, name, max, validate, separators, commitOnBlur, onReject, variant, size, invalid: invalidProp, removeLabel, labels: labelsProp, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, placeholder, "aria-describedby": describedByProp, className, ref, onKeyDown, onBlur, onPaste, onCompositionEnd, ...props }: TagInputProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/tag-input/TagInput.js

@@ -0,0 +1,3 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{Close as t}from"../../icons/Close.js";import{StatusDanger as n}from"../../icons/StatusDanger.js";import{mergeRefs as r}from"../../lib/merge-refs.js";import{useControllableState as i}from"../../hooks/useControllableState.js";import{flipBox as a,flipLeaving as o}from"../../lib/motion.js";import{useFieldControl as ee}from"../field/Field.js";import{controlBox as te,controlElement as ne,controlIconSize as s}from"../input/control-box.js";import{multiValueBox as re,valueChip as c,valueChipSize as ie,valueInputHeight as ae}from"../input/value-chip.js";import{useAddedKeys as oe}from"../../hooks/useAddedKeys.js";import{useLingering as se}from"../../hooks/useLingering.js";import{useFlip as ce}from"../../hooks/useFlip.js";import{useEffect as le,useId as ue,useLayoutEffect as de,useMemo as fe,useRef as l,useState as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";const pe={summary:e=>e.length===0?`还没有标签`:`已有 ${e.length} 个标签：${e.join(`、`)}`,added:e=>`已添加${e}`,removed:e=>`已移除${e}`,duplicate:e=>`已经有${e}了`,max:e=>`最多 ${e} 个`},me=[`,`,`，`],he={sm:`h-[30px]`,md:`h-[38px]`,lg:`h-[54px]`};function p({value:p,defaultValue:ge,onValueChange:_e,name:m,max:h,validate:ve,separators:g=me,commitOnBlur:ye=!0,onReject:be,variant:_=`sunken`,size:v=`md`,invalid:xe,removeLabel:Se=e=>`移除${e}`,labels:y,id:b,disabled:x,required:S,readOnly:C=!1,placeholder:w,"aria-describedby":T,className:E,ref:D,onKeyDown:O,onBlur:k,onPaste:A,onCompositionEnd:j,...Ce}){let{id:we,disabled:M,required:N,invalid:P,...Te}=ee({id:b,disabled:x,required:S,invalid:xe,"aria-describedby":T}),F={...pe,...y},I=ue(),L=l(null),R=l(null),[z,B]=i({value:p,defaultValue:ge??[],onChange:_e}),[V,H]=u(``),[U,W]=u(null),[Ee,G]=u(``),De=h!==void 0&&z.length>=h,Oe=oe(z),ke=ce(),K=se(z,z.length<50);le(()=>{if(U===null)return;let e=setTimeout(()=>W(null),400);return()=>clearTimeout(e)},[U]);let q=l(null);de(()=>{let e=q.current;e!==null&&(q.current=null,e===`input`?L.current?.focus():J(e))});let Ae=()=>R.current?.querySelectorAll(`[data-tag] button`)??[],J=e=>{let t=Ae(),n=t[Math.min(e,t.length-1)];n?n.focus():L.current?.focus()},Y=fe(()=>{let e=[...g,`
+`,`\r`].map(e=>e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`));return new RegExp(e.join(`|`))},[g]),X=e=>{let t=e.map(e=>e.trim()).filter(Boolean),n=z,r=``,i=``;for(let e of t){let a=null,o;if(n.includes(e))a=`duplicate`,r=F.duplicate(e),W(e);else if(h!==void 0&&n.length>=h)a=`max`,r=F.max(h);else{let t=ve?.(e,n);t&&(a=`invalid`,o=t,r=t)}a===null?(n=[...n,e],r=F.added(e)):(be?.(e,a,o),t.length===1&&(i=e))}return n!==z&&B(n),r&&G(r),i},Z=(e,t)=>{let n=z[e];n!==void 0&&(q.current=t,B(z.filter((t,n)=>n!==e)),G(F.removed(n)))},Q=e=>{Y.test(e)?H(X(e.split(Y))):H(e)},je=e=>{e.nativeEvent.isComposing?H(e.target.value):Q(e.target.value)},Me=e=>{if(O?.(e),e.defaultPrevented||C||e.nativeEvent.isComposing||e.keyCode===229)return;let t=e.currentTarget;if(e.key===`Enter`){if(V.trim()===``)return;e.preventDefault(),H(X([V]));return}let n=t.selectionStart===0&&t.selectionEnd===0;e.key===`Backspace`&&V===``&&z.length>0?(e.preventDefault(),Z(z.length-1,`input`)):e.key===`ArrowLeft`&&n&&z.length>0&&(e.preventDefault(),J(z.length-1))},Ne=(e,t)=>{switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&J(t-1);break;case`ArrowRight`:e.preventDefault(),t<z.length-1?J(t+1):L.current?.focus();break;case`Backspace`:case`Delete`:e.preventDefault(),Z(t,z.length===1?`input`:t)}},Pe=e=>{if(A?.(e),e.defaultPrevented||C)return;let t=e.clipboardData.getData(`text`);if(!Y.test(t))return;e.preventDefault();let n=e.currentTarget,r=V.slice(0,n.selectionStart??V.length),i=V.slice(n.selectionEnd??V.length);H(X(`${r}${t}${i}`.split(Y)))},$=!M&&!C;return/* @__PURE__ */ f(`div`,{ref:R,"data-variant":_,"data-size":v,"data-invalid":P?``:void 0,"data-disabled":M?``:void 0,onMouseDown:e=>{e.target.closest(`button, input`)||(e.preventDefault(),L.current?.focus())},className:e(te({variant:_,invalid:P,disabled:M,readOnly:C}),`items-center`,re[v],E),children:[/* @__PURE__ */ f(`div`,{ref:r(ke,K.ref),className:e(`flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-2`,a),children:[K.entries.map(({key:n,leaving:r})=>{let i=z.indexOf(n);return/* @__PURE__ */ f(`span`,{"data-tag":r?void 0:``,"data-leaving":r?``:void 0,"data-flash":U===n&&!r?``:void 0,inert:r,"aria-hidden":r||void 0,className:e(c,ie[v],`transition-[color,background-color,translate,opacity] duration-(--duration-fast) ease-standard`,`data-flash:bg-surface-inverse data-flash:text-ink-inverse`,`forced-colors:data-flash:outline-2 forced-colors:data-flash:outline-[Highlight]`,o,Oe.has(n)&&`animate-fade-in [animation-duration:var(--duration-fast)]`,M&&`text-ink-disabled forced-colors:border-[GrayText] forced-colors:text-[GrayText]`,!$&&`pr-2`),children:[/* @__PURE__ */ d(`span`,{className:`min-w-0 truncate`,children:n}),$&&/* @__PURE__ */ d(`button`,{type:`button`,tabIndex:-1,"aria-label":Se(n),onClick:e=>Z(i,e.detail===0&&z.length>1?i:`input`),onKeyDown:e=>Ne(e,i),className:e(`flex aspect-square h-full shrink-0 items-center justify-center text-ink-secondary hover:bg-line hover:text-ink forced-colors:in-data-disabled:text-[GrayText]`,`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus`,U===n&&`text-ink-inverse`),children:/* @__PURE__ */ d(t,{size:12})})]},n)}),/* @__PURE__ */ d(`input`,{...Ce,ref:r(L,D),id:we,type:`text`,value:V,disabled:M,readOnly:C,required:N&&z.length===0,"aria-required":N||void 0,placeholder:z.length===0?w:void 0,"aria-invalid":P||void 0,"aria-describedby":[I,Te[`aria-describedby`]].filter(Boolean).join(` `)||void 0,autoComplete:`off`,onChange:je,onKeyDown:Me,onPaste:Pe,onCompositionEnd:e=>{j?.(e),Q(e.currentTarget.value)},onBlur:e=>{k?.(e),ye&&$&&V.trim()!==``&&H(X([V]))},className:e(ne,`min-w-12 px-1`,ae[v],`transition-[translate] duration-(--duration-fast) ease-standard`)})]}),(P||h!==void 0)&&/* @__PURE__ */ f(`span`,{className:e(`flex shrink-0 items-center gap-2 self-end pr-3 pl-1`,he[v]),children:[P&&/* @__PURE__ */ d(n,{size:s[v],className:`shrink-0 text-danger`}),h!==void 0&&/* @__PURE__ */ d(`span`,{"aria-hidden":`true`,"data-count":``,className:e(`font-tech text-xs tabular-nums`,M?`text-ink-disabled forced-colors:text-[GrayText]`:De?`text-ink`:`text-ink-secondary`),children:`${z.length} / ${h}`})]}),/* @__PURE__ */ d(`span`,{id:I,className:`sr-only`,children:F.summary(z)}),/* @__PURE__ */ d(`span`,{"aria-live":`polite`,className:`sr-only`,children:Ee}),m!==void 0&&z.map(e=>/* @__PURE__ */ d(`input`,{type:`hidden`,name:m,value:e,disabled:M},e))]})}export{p as TagInput};

package/dist/components/tag-input/index.d.ts

@@ -0,0 +1,3 @@
+
+import { TagInput, TagInputLabels, TagInputProps, TagInputRejectReason, TagInputSize, TagInputVariant } from "./TagInput.js";
+export { TagInput, type TagInputLabels, type TagInputProps, type TagInputRejectReason, type TagInputSize, type TagInputVariant };

package/dist/components/term/Term.d.ts

@@ -0,0 +1,19 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/term/Term.d.ts
+export type TermTone = "accent" | "info" | "success" | "warning" | "danger";
+export type TermProps = ComponentProps<"strong"> & {
+  /**
+   * 颜色代表的含义。同一个产品里"颜色 → 含义"的对应必须唯一，并写成一张表。
+   * 默认 `accent`：数值与一般的强调。
+   */
+  tone?: TermTone;
+  /** 词前的小图标，跟着文字的大小与颜色走 */
+  icon?: ReactNode;
+};
+/**
+ * 正文里着色的机制词（技能、属性、数值）。着色的同时加粗，不只靠颜色。
+ * 用在页面表面上；反转块上这些颜色不够亮，不要用。
+ */
+export declare function Term({ tone, icon, className, children, ...props }: TermProps): import("react").JSX.Element;
+//#endregion

package/dist/components/term/Term.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";const r={accent:`text-accent-ink`,info:`text-info`,success:`text-success`,warning:`text-warning`,danger:`text-danger`};function i({tone:i=`accent`,icon:a,className:o,children:s,...c}){return/* @__PURE__ */ n(`strong`,{...c,"data-tone":i,className:e(`font-bold`,r[i],o),children:[a&&/* @__PURE__ */ t(`span`,{"aria-hidden":`true`,className:`mr-[0.2em] inline-flex align-[-0.125em] [&_svg]:size-[1em]`,children:a}),s]})}export{i as Term};

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

@@ -0,0 +1,3 @@
+
+import { Term, TermProps, TermTone } from "./Term.js";
+export { Term, type TermProps, type TermTone };

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,17 @@
+
+import { ControlVariant } from "../input/control-box.js";
+import { ComponentProps } from "react";
+//#region src/components/textarea/Textarea.d.ts
+export type TextareaProps = ComponentProps<"textarea"> & {
+  /** `sunken` 凹陷底 + 底边线（默认），或 `outline` 四边描边 */
+  variant?: ControlVariant;
+  /** 错误态：底边线变红。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+  /** 在右下角显示字数；有 `maxLength` 时显示成 `12 / 200` */
+  showCount?: boolean;
+};
+/**
+ * 多行文本，最少三行。`className` 给外框，其余属性与 `ref` 给里面的 `<textarea>`。
+ */
+export declare function Textarea({ variant, invalid: invalidProp, showCount, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, "aria-describedby": describedByProp, rows, maxLength, value, defaultValue, onChange, className, ...props }: TextareaProps): import("react").JSX.Element;
+//#endregion

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{useFieldControl as t}from"../field/Field.js";import{controlBox as n,controlElement as r}from"../input/control-box.js";import{useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s({variant:s=`sunken`,invalid:c,showCount:l=!1,id:u,disabled:d,required:f,readOnly:p=!1,"aria-describedby":m,rows:h=3,maxLength:g,value:_,defaultValue:v,onChange:y,className:b,...x}){let{id:S,disabled:C,required:w,invalid:T,...E}=t({id:u,disabled:d,required:f,invalid:c,"aria-describedby":m}),[D,O]=i(()=>String(v??``).length),k=_===void 0?D:String(_).length,A=e=>{O(e.target.value.length),y?.(e)};return/* @__PURE__ */ o(`div`,{"data-variant":s,"data-invalid":T?``:void 0,className:e(n({variant:s,invalid:T,disabled:C,readOnly:p}),`flex-col text-base`,b),children:[/* @__PURE__ */ a(`textarea`,{...x,id:S,rows:h,maxLength:g,value:_,defaultValue:v,onChange:A,disabled:C,required:w,readOnly:p,"aria-invalid":T||void 0,"aria-describedby":E[`aria-describedby`],className:e(r,`block min-h-[calc(3lh+1rem)] w-full resize-y px-3 py-2`)}),l&&/* @__PURE__ */ a(`span`,{"data-count":``,className:e(`pointer-events-none self-end px-3 pb-1.5 font-tech text-xs tabular-nums`,C?`text-ink-disabled forced-colors:text-[GrayText]`:`text-ink-secondary`),children:g===void 0?k:`${k} / ${g}`})]})}export{s as Textarea};

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

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

package/dist/components/texture/Texture.d.ts

@@ -0,0 +1,19 @@
+
+import { ComponentProps } from "react";
+//#region src/components/texture/Texture.d.ts
+export type TextureVariant = "dots" | "grid" | "contour";
+export type TextureProps = Omit<ComponentProps<"div">, "children"> & {
+  /**
+   * - `dots` 点阵，印刷网点：弹窗、卡片、面板的底，默认；
+   * - `grid` 工程网格，图纸与坐标：图解、工作台的背景；
+   * - `contour` 等高线，测绘与地形：偏在一角，被容器的边缘截断。
+   */
+  variant?: TextureVariant;
+};
+/**
+ * 铺在内容之下的一层底纹，纯装饰。默认铺满最近的定位祖先：
+ * 父容器要自己写 `relative`，需要裁切时再加 `overflow-clip`。
+ * 一个视口选一种；文字下面垫一层实色，别让底纹穿过正文。
+ */
+export declare function Texture({ variant, className, ...props }: TextureProps): import("react").JSX.Element;
+//#endregion

package/dist/components/texture/Texture.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{decor as t}from"../../lib/decor.js";import{jsx as n}from"react/jsx-runtime";const r={dots:`dot-grid`,grid:`blueprint-grid`,contour:`contour`};function i({variant:i=`dots`,className:a,...o}){return/* @__PURE__ */ n(`div`,{...o,"aria-hidden":`true`,"data-variant":i,className:e(t,`absolute inset-0`,r[i],a)})}export{i as Texture};

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

@@ -0,0 +1,3 @@
+
+import { Texture, TextureProps, TextureVariant } from "./Texture.js";
+export { Texture, type TextureProps, type TextureVariant };

package/dist/components/tick-ring/TickRing.d.ts

@@ -0,0 +1,22 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/tick-ring/TickRing.d.ts
+export type TickRingProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 直径：数字是像素，也可以传 `"100%"` 这类长度（高度跟着宽度走）。默认 240 */
+  size?: number | string;
+  /** 外圈刻度的根数，默认 40 */
+  ticks?: number;
+  /** 整体缓慢匀速旋转（60 秒一圈） */
+  spin?: boolean;
+  /** 被圆环围住的主体，居中 */
+  children?: ReactNode;
+};
+/**
+ * 刻度圆环：细内环 + 一圈刻度 + 两段不对称的粗弧，围住一个主体（模型、头像、地图焦点）。
+ * 纯装饰，只用在展示性的画面上。颜色继承文字：浅色底上是墨与灰，
+ * 压在深色画面上时给它加 `data-theme="dark"`。
+ *
+ * 它不承载数据；表示进度用 `ProgressRing`。
+ */
+export declare function TickRing({ size, ticks, spin, className, style, children, ...props }: TickRingProps): import("react").JSX.Element;
+//#endregion

package/dist/components/tick-ring/TickRing.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{decor as t}from"../../lib/decor.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";function i({size:i=240,ticks:a=40,spin:o=!1,className:s,style:c,children:l,...u}){let d=Math.max(1,Math.round(a));return/* @__PURE__ */ r(`div`,{...u,className:e(`relative inline-grid aspect-square shrink-0 place-items-center text-ink`,s),style:{width:i,...c},children:[/* @__PURE__ */ r(`svg`,{"aria-hidden":`true`,focusable:`false`,viewBox:`0 0 240 240`,fill:`none`,stroke:`currentColor`,className:e(t,`absolute inset-0 size-full`,o&&`animate-spin-slow`),children:[/* @__PURE__ */ n(`circle`,{cx:`120`,cy:`120`,r:`96`,strokeOpacity:.35}),/* @__PURE__ */ n(`circle`,{"data-ticks":d,cx:`120`,cy:`120`,r:`114`,strokeOpacity:.5,strokeWidth:8,pathLength:d*10,strokeDasharray:`1.5 8.5`}),/* @__PURE__ */ n(`path`,{d:`M120 6A114 114 0 0 1 218.7 63M81 227.1A114 114 0 0 1 25.5 183.7`,strokeOpacity:.55,strokeWidth:5})]}),l!==void 0&&/* @__PURE__ */ n(`div`,{className:`relative`,children:l})]})}export{i as TickRing};

package/dist/components/tick-ring/index.d.ts

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

package/dist/components/timeline/Timeline.d.ts

@@ -0,0 +1,22 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/timeline/Timeline.d.ts
+export type TimelineProps = ComponentProps<"ol">;
+/** 竖向时间线的容器，里面只放 `TimelineItem`，按时间顺序排。 */
+export declare function Timeline({ className, ...props }: TimelineProps): import("react").JSX.Element;
+export type TimelineStatus = "past" | "current" | "upcoming";
+export type TimelineItemProps = Omit<ComponentProps<"li">, "title"> & {
+  /**
+   * - `past` 已过：实心菱形，默认；
+   * - `current` 当前：黄色菱形，标题加粗；
+   * - `upcoming` 未到：空心菱形，文字降为次级色。
+   */
+  status?: TimelineStatus;
+  /** 节点旁的日期或时间，等宽小字 */
+  date?: ReactNode;
+  title: ReactNode;
+  /** 标题下的说明 */
+  children?: ReactNode;
+};
+export declare function TimelineItem({ status, date, title, className, children, ...props }: TimelineItemProps): import("react").JSX.Element;
+//#endregion

package/dist/components/timeline/Timeline.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({className:n,...r}){return/* @__PURE__ */ t(`ol`,{...r,className:e(`text-ink`,n)})}const i={past:`bg-ink forced-colors:bg-[CanvasText]`,current:`border border-ink bg-action forced-colors:bg-[Highlight]`,upcoming:`border-2 border-ink-tertiary`},a={past:`text-ink`,current:`font-bold text-ink`,upcoming:`text-ink-secondary`};function o({status:r=`past`,date:o,title:s,className:c,children:l,...u}){let d=o!=null&&o!==!1;return/* @__PURE__ */ n(`li`,{...u,"data-status":r,"aria-current":r===`current`?`step`:void 0,className:e(`group/item flex gap-3`,c),children:[/* @__PURE__ */ n(`span`,{"aria-hidden":`true`,className:e(`flex shrink-0 flex-col items-center`,d?`text-xs`:`text-base`),children:[/* @__PURE__ */ t(`span`,{className:`flex h-[1lh] min-h-4 w-4 items-center justify-center`,children:/* @__PURE__ */ t(`span`,{className:e(`size-[11px] rotate-45`,i[r])})}),/* @__PURE__ */ t(`span`,{className:`w-0.5 flex-1 bg-line-strong group-last/item:hidden forced-colors:bg-[CanvasText]`})]}),/* @__PURE__ */ n(`div`,{className:`min-w-0 flex-1 pb-6 group-last/item:pb-0`,children:[d&&/* @__PURE__ */ t(`div`,{className:`font-tech text-xs text-ink-secondary tabular-nums`,children:o}),/* @__PURE__ */ t(`div`,{className:e(`wrap-anywhere`,a[r]),children:s}),l!==void 0&&/* @__PURE__ */ t(`div`,{className:`mt-1 text-sm text-ink-secondary`,children:l})]})]})}export{r as Timeline,o as TimelineItem};

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

@@ -0,0 +1,3 @@
+
+import { Timeline, TimelineItem, TimelineItemProps, TimelineProps, TimelineStatus } from "./Timeline.js";
+export { Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, type TimelineStatus };

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,45 @@
+
+import { ReactNode } from "react";
+//#region src/components/toast/Toast.d.ts
+export type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
+export type ToastPlacement = "bottom" | "center";
+export type ToastAction = {
+  label: ReactNode;
+  /** 点了之后这条提示随即关掉 */
+  onClick: () => void;
+};
+export type ToastOptions = {
+  /** 一句话 */
+  message: ReactNode;
+  /** 文字前的小图形，区分成功与失败。底色不变。默认 `neutral`：没有图形 */
+  tone?: ToastTone;
+  /** 一个操作，比如"撤销"。带操作的提示多停一会儿，并出现关闭图标 */
+  action?: ToastAction;
+  /** 停留多久，毫秒。`0` 是一直留着，直到被关掉或被下一条替换 */
+  duration?: number;
+};
+export type ToastApi = {
+  /** 弹出一条，返回它的 id。上一条还在的话会被它替换 */
+  (input: ReactNode | ToastOptions): string;
+  /** 关掉指定的一条；不传 id 就关掉当前这条 */
+  dismiss: (id?: string) => void;
+};
+/** 弹出轻提示。要在 `ToastProvider` 里面用。 */
+export declare function useToast(): ToastApi;
+export type ToastProviderProps = {
+  /** 出现在哪：视口底部居中（默认），或者视口正中（官网的做法） */
+  placement?: ToastPlacement;
+  /** 默认停留多久，毫秒。规范是 2 – 4 秒 */
+  duration?: number;
+  /** 提示区域的可访问名称（按 `F6` 可以把焦点移进来） */
+  label?: string;
+  /** 关闭图标的可访问名称 */
+  closeLabel?: string;
+  children: ReactNode;
+};
+/**
+ * 轻提示的容器，包在应用的最外层。里面的任何地方用 `useToast()` 弹出。
+ * 重要的、需要用户处理的信息不要用轻提示，用提示条或弹窗。
+ */
+export declare function ToastProvider({ placement, duration, label, closeLabel, children }: ToastProviderProps): import("react").JSX.Element;
+//#endregion

package/dist/components/toast/Toast.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{createLazyContext as n}from"../../lib/create-lazy-context.js";import{Close as r}from"../../icons/Close.js";import{StatusDanger as i}from"../../icons/StatusDanger.js";import{StatusInfo as a}from"../../icons/StatusInfo.js";import{StatusSuccess as o}from"../../icons/StatusSuccess.js";import{StatusWarning as s}from"../../icons/StatusWarning.js";import{isValidElement as c,useContext as l,useMemo as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{Toast as p}from"@base-ui/react/toast";const m=/* @__PURE__ */ n(null);function h(){let e=l(m());if(!e)throw Error(`useToast 要在 <ToastProvider> 里面用`);return e}const g={info:a,success:o,warning:s,danger:i},_={info:`text-info`,success:`text-success`,warning:`text-warning`,danger:`text-danger`},v={bottom:{viewport:`bottom-6`,root:`bottom-0 transform-[translate(calc(-50%+var(--toast-swipe-movement-x,0px)),var(--toast-swipe-movement-y,0px))] data-starting-style:translate-y-(--motion-shift-lg)`},center:{viewport:`top-1/2`,root:`top-0 transform-[translate(calc(-50%+var(--toast-swipe-movement-x,0px)),calc(-50%+var(--toast-swipe-movement-y,0px)))]`}};function y(e){return typeof e==`object`&&!!e&&!c(e)&&`message`in e}let b=0;function x({placement:n,label:i,closeLabel:a,children:o}){let s=m(),{toasts:c,add:l,close:h}=p.useToastManager(),x=u(()=>{let e=e=>{let{message:t,tone:n=`neutral`,action:r,duration:i}=y(e)?e:{message:e},a=`ef-toast-${++b}`;return h(),l({id:a,title:t,type:n,priority:n===`danger`||n===`warning`?`high`:`low`,timeout:i??(r?8e3:void 0),actionProps:r&&{children:r.label,onClick:()=>{r.onClick(),h(a)}},data:{tone:n,dismissible:r!==void 0||i===0}})};return e.dismiss=e=>h(e),e},[l,h]);return/* @__PURE__ */ f(s.Provider,{value:x,children:[o,/* @__PURE__ */ d(p.Portal,{children:/* @__PURE__ */ d(p.Viewport,{"aria-label":i,className:e(`pointer-events-none fixed inset-x-4 z-(--z-toast) h-0`,v[n].viewport),children:c.map(i=>{let o=i.data?.tone??`neutral`,s=o===`neutral`?null:g[o];return/* @__PURE__ */ d(p.Root,{toast:i,"data-theme":`dark`,className:e(`pointer-events-auto absolute left-1/2 w-max max-w-full`,`bg-black/80 shadow-sm text-base leading-[1.4] text-white`,`forced-colors:border forced-colors:border-[CanvasText]`,`transition-[opacity,translate,transform] duration-[var(--duration-fast),var(--duration-base),var(--duration-fast)] ease-[var(--ease-standard),var(--ease-exit),var(--ease-standard)]`,`data-ending-style:opacity-0 data-starting-style:opacity-0`,`data-swiping:select-none`,t,v[n].root),children:/* @__PURE__ */ f(p.Content,{className:e(`flex items-center gap-3 py-2.5 pl-5`,i.data?.dismissible?`pr-2`:`pr-5`),children:[s&&o!==`neutral`&&/* @__PURE__ */ d(s,{size:16,className:e(`shrink-0`,_[o])}),/* @__PURE__ */ d(p.Title,{render:/* @__PURE__ */ d(`p`,{}),className:`min-w-0 wrap-anywhere`}),i.actionProps&&/* @__PURE__ */ d(p.Action,{className:e(`shrink-0 border-b border-current text-sm font-medium text-accent-ink active:opacity-80`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus`)}),i.data?.dismissible&&/* @__PURE__ */ d(p.Close,{"aria-label":a,className:e(`inline-flex size-8 shrink-0 items-center justify-center text-ink-secondary hover:text-ink`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus`),children:/* @__PURE__ */ d(r,{size:16})})]})},i.id)})})})]})}function S({placement:e=`bottom`,duration:t=3e3,label:n=`通知`,closeLabel:r=`关闭`,children:i}){return/* @__PURE__ */ d(p.Provider,{timeout:t,limit:1,children:/* @__PURE__ */ d(x,{placement:e,label:n,closeLabel:r,children:i})})}export{S as ToastProvider,h as useToast};

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

@@ -0,0 +1,3 @@
+
+import { ToastAction, ToastApi, ToastOptions, ToastPlacement, ToastProvider, ToastProviderProps, ToastTone, useToast } from "./Toast.js";
+export { type ToastAction, type ToastApi, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastTone, useToast };

package/dist/components/toc/Toc.d.ts

@@ -0,0 +1,46 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactNode, RefObject } from "react";
+//#region src/components/toc/Toc.d.ts
+export type TocLevel = 1 | 2 | 3;
+type TocOwnProps = {
+  /** 列表上面的一行小标。有它时目录以它命名 */
+  title?: ReactNode;
+  /**
+   * 视口上沿往下让多少像素才算"到了"。页面有吸顶的页头时传页头的高度，
+   * 并给各节的标题加同样大小的 `scroll-mt-*`
+   */
+  offset?: number;
+  /** 内容在哪个滚动容器里。不传就是整个页面 */
+  target?: RefObject<HTMLElement | null>;
+  /** 当前的小节变了：拿到它的 `id`，一节都还没到时是 `null` */
+  onActiveChange?: (section: string | null) => void;
+  /** `TocItem` */
+  children: ReactNode;
+};
+export type TocProps = TocOwnProps & Omit<ComponentProps<"nav">, keyof TocOwnProps>;
+/**
+ * 页内目录：这一页有哪几节、现在看到了哪一节。里面放 `TocItem`。
+ *
+ * 位置由使用方给，通常是 `className="sticky top-6"`。点一项仍然是点一个锚点链接——
+ * 地址、后退、`scroll-mt` 都是浏览器原生的那一套；它只让这一次跳转滚得平滑
+ * （系统开了"减少动态效果"时照旧直接跳）。
+ */
+export declare function Toc({ title, offset, target, onActiveChange, "aria-label": ariaLabel, className, ref, children, ...props }: TocProps): import("react").JSX.Element;
+type TocItemOwnProps = {
+  /** `#小节的 id`。小节就是按 `#` 后面这一段找的 */
+  href?: string;
+  /** 小节的 `id`。地址在 `render` 那个元素手里时用它 */
+  section?: string;
+  /** 第几级，只影响缩进。默认 1 */
+  level?: TocLevel;
+  /** 用这个元素代替 `<a>`（路由库的链接组件） */
+  render?: LinkRender;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  children: ReactNode;
+};
+export type TocItemProps = TocItemOwnProps & Omit<ComponentProps<"li">, keyof TocItemOwnProps>;
+/** 目录里的一项：一个指向小节的锚点链接。 */
+export declare function TocItem({ href, section, level, render, onClick, children, ...props }: TocItemProps): import("react").JSX.Element;
+//#endregion
+export {};