@endfield-ui/react 1.2.0 → 1.3.0

package/dist/components/file-upload/FileUpload.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRingWithin as t}from"../../lib/focus-ring.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{collapse as a}from"../../lib/motion.js";import{useFieldControl as o}from"../field/Field.js";import"../../lib/decor.js";import{formatFileSize as ee,matchesAccept as s,sameFile as te}from"../../lib/file.js";import{FileItem as ne}from"./FileItem.js";import{useAddedKeys as c}from"../../hooks/useAddedKeys.js";import{useLingering as re}from"../../hooks/useLingering.js";import{Upload as ie}from"../../icons/Upload.js";import{useEffect as ae,useLayoutEffect as oe,useRef as l,useState as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";const se={list:`已选的文件`,selected:e=>e===0?`没有文件`:`已选 ${e} 个文件`,rejected:e=>`${e} 个文件没有加进来`,type:`类型不对`,size:e=>`超过 ${e}`,count:e=>`超出个数上限（最多 ${e} 个）`},ce={sm:`min-h-10 flex-wrap gap-x-3 px-3 py-2 text-sm`,md:`gap-3 px-4 py-4`},le=e=>`${e.name}-${e.size}-${e.lastModified}`;function ue(e){let t=[...e.items??[]];return t.length===0?[...e.files]:t.flatMap(e=>e.kind!==`file`||e.webkitGetAsEntry?.()?.isDirectory?[]:e.getAsFile()??[])}function m({leaving:t,entering:n,children:r}){let[i,o]=u(r);return!t&&i!==r&&o(r),/* @__PURE__ */ f(`li`,{"data-leaving":t?``:void 0,inert:t,"aria-hidden":t||void 0,className:e(a,`transition-[grid-template-rows,margin,opacity] duration-(--duration-fast)`,`data-leaving:-mb-1 data-leaving:opacity-0`,n&&`animate-fade-in [animation-duration:var(--duration-fast)]`),children:/* @__PURE__ */ f(`div`,{className:`min-h-0 min-w-0 in-data-leaving:overflow-y-clip`,children:t?i:r})})}function h({value:a,defaultValue:h,onValueChange:de,multiple:g=!1,accept:_,maxSize:v,maxFiles:y,onReject:fe,name:pe,title:me=`把文件拖到这里，或者`,browseLabel:he=`选择文件`,dropLabel:ge=`松开，放进来`,description:b,size:x=`md`,invalid:S,disabled:C,required:w,renderFile:T,removeLabel:E=e=>`移除${e}`,labels:D,id:O,"aria-label":k,"aria-describedby":A,className:j,ref:M}){let{id:N,disabled:P,required:F,invalid:I,...L}=o({id:O,disabled:C,required:w,invalid:S,"aria-describedby":A}),R={...se,...D},z=l(null),B=l(null),[V,H]=i({value:a,defaultValue:h??[],onChange:de}),U=V.map(le),_e=c(U),W=re(U),[G,K]=u([]),[q,J]=u(!1),Y=l(0),[ve,X]=u(0);ae(()=>{let e=z.current;if(e&&typeof DataTransfer<`u`)try{let t=new DataTransfer;for(let e of V)t.items.add(e);e.files=t.files}catch{}},[V,ve]);let Z=l(null);oe(()=>{let e=Z.current;if(e===null)return;Z.current=null;let t=B.current?.querySelectorAll(`li:not([data-leaving]) [data-file-remove]`)??[],n=t[Math.min(e,t.length-1)];n?n.focus():z.current?.focus()});let Q=e=>{let t=[],n=g?[...V]:[];for(let r of e)s(r,_)?v!==void 0&&r.size>v?t.push({file:r,reason:`size`}):g?n.some(e=>te(e,r))||(y!==void 0&&n.length>=y?t.push({file:r,reason:`count`}):n.push(r)):n.length===0?n=[r]:t.push({file:r,reason:`count`}):t.push({file:r,reason:`type`});!g&&n.length===0&&(n=V),(n.length!==V.length||n.some((e,t)=>e!==V[t]))&&H(n),K(t),X(e=>e+1),t.length>0&&fe?.(t)},ye=e=>{Z.current=e,H(V.filter((t,n)=>n!==e)),K([]),X(e=>e+1)},be=e=>{Q([...e.target.files??[]])},$=e=>[...e.dataTransfer.types].includes(`Files`),xe=e=>{!P&&$(e)&&(Y.current+=1,J(!0))},Se=e=>{!P&&$(e)&&(Y.current=Math.max(Y.current-1,0),Y.current===0&&J(!1))},Ce=e=>{$(e)&&e.preventDefault()},we=e=>{$(e)&&(e.preventDefault(),Y.current=0,J(!1),P||Q(ue(e.dataTransfer)))},Te=({reason:e})=>e===`type`?R.type:e===`size`?R.size(ee(v??0)):R.count(g?y??0:1);return/* @__PURE__ */ p(`div`,{"data-size":x,"data-invalid":I?``:void 0,className:e(`flex min-w-0 flex-col gap-2 text-ink`,j),children:[/* @__PURE__ */ p(`div`,{"data-dropzone":``,"data-dragging":q?``:void 0,onDragEnter:xe,onDragLeave:Se,onDragOver:Ce,onDrop:we,className:e(`relative flex items-center border bg-surface-sunken`,`transition-colors duration-(--duration-fast) ease-standard`,t,ce[x],q?`border-solid border-ink`:[`border-dashed`,P?`cursor-not-allowed border-line text-ink-disabled`:I?`border-danger`:`border-line-strong hover:border-ink-secondary`]),children:[/* @__PURE__ */ f(ie,{size:x===`sm`?20:24,className:e(`shrink-0`,P?`text-ink-disabled`:`text-ink-secondary`)}),/* @__PURE__ */ p(`span`,{className:e(`flex min-w-0`,x===`sm`?`flex-1 flex-wrap items-baseline gap-x-3`:`flex-col gap-0.5`),children:[/* @__PURE__ */ f(`span`,{className:`font-medium`,children:q?ge:/* @__PURE__ */ p(d,{children:[me,/* @__PURE__ */ f(`span`,{className:`ml-1 underline underline-offset-4`,children:he})]})}),b&&/* @__PURE__ */ f(`span`,{className:e(`text-sm`,P?`text-ink-disabled`:`text-ink-secondary`),children:b})]}),q&&/* @__PURE__ */ f(`span`,{"aria-hidden":`true`,"data-brackets":``,className:e(`pointer-events-none select-none forced-colors:hidden print:hidden`,`corner-brackets absolute inset-1.5 [--bracket-offset:0px] after:animate-bracket-in`)}),/* @__PURE__ */ f(`input`,{ref:r(z,M),id:N,type:`file`,name:pe,multiple:g,accept:_,disabled:P,required:F,"aria-label":k,"aria-invalid":I||void 0,"aria-describedby":L[`aria-describedby`],title:``,onChange:be,className:`absolute inset-0 size-full cursor-[inherit] opacity-0 outline-none disabled:pointer-events-none`})]}),/* @__PURE__ */ f(`div`,{"aria-live":`polite`,"data-rejections":``,children:G.length>0&&/* @__PURE__ */ p(`p`,{className:`flex items-start gap-1.5 text-sm text-danger`,children:[/* @__PURE__ */ f(n,{size:16,className:`mt-0.5 shrink-0`}),/* @__PURE__ */ f(`span`,{className:`min-w-0 wrap-anywhere`,children:`${R.rejected(G.length)}：${G.map(e=>`${e.file.name} ${Te(e)}`).join(`；`)}`})]})}),W.entries.length>0&&/* @__PURE__ */ f(`ul`,{ref:r(B,W.ref),"aria-label":R.list,"data-emptying":V.length===0?``:void 0,className:`flex flex-col gap-1 transition-[margin] duration-(--duration-fast) ease-standard data-emptying:-mt-2`,children:W.entries.map(({key:e,leaving:t})=>{let n=U.indexOf(e),r=V[n],i={remove:()=>ye(n),index:n};return/* @__PURE__ */ f(m,{leaving:t,entering:_e.has(e),children:r!==void 0&&(T?T(r,i):/* @__PURE__ */ f(ne,{name:r.name,size:r.size,disabled:P,removeLabel:E(r.name),onRemove:i.remove}))},e)})}),/* @__PURE__ */ f(`span`,{"aria-live":`polite`,className:`sr-only`,children:R.selected(V.length)})]})}export{h as FileUpload};

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,4 @@
+
+import { FileItem, FileItemProps, FileItemStatus } from "./FileItem.js";
+import { FileRejectReason, FileRejection, FileUpload, FileUploadLabels, FileUploadProps, FileUploadSize } from "./FileUpload.js";
+export { FileItem, type FileItemProps, type FileItemStatus, type FileRejectReason, type FileRejection, FileUpload, type FileUploadLabels, type FileUploadProps, type FileUploadSize };

package/dist/components/flyout-bar/FlyoutBar.d.ts

@@ -0,0 +1,46 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactElement, ReactNode } from "react";
+//#region src/components/flyout-bar/FlyoutBar.d.ts
+export type FlyoutBarSide = "right" | "left";
+export type FlyoutBarProps = {
+  /**
+   * 触发按钮，通常是 `<IconButton variant="inverse">`。
+   * 它的名称（`aria-label`）同时是这一条的名称，读屏打开时会读出来
+   */
+  trigger: ReactElement<Record<string, unknown>>;
+  /** 展开在触发按钮的哪一侧，放不下时自动翻到另一侧。默认 `right` */
+  side?: FlyoutBarSide;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 给横条本身 */
+  className?: string;
+  /** `FlyoutBarItem` */
+  children: ReactNode;
+};
+/**
+ * 展开条：从一个图标按钮旁边拉开的一条横排操作，比如分享的几个去处。
+ * 语义和键盘都是横向的菜单——左右方向键移动、回车选择、`Esc` 关闭。
+ * 选项多于六个、或者要文字才看得懂时，用 `DropdownMenu`。
+ */
+export declare function FlyoutBar({ trigger, side, open, defaultOpen, onOpenChange, className, children }: FlyoutBarProps): import("react").JSX.Element;
+type ItemOwnProps = {
+  /** 只有图标时必须给：它是这一项的名称 */
+  "aria-label"?: string;
+  disabled?: boolean;
+  /** 点了之后是否关掉。操作项默认关，链接项默认不关 */
+  closeOnClick?: boolean;
+  /** 传了就渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type FlyoutBarItemProps = ItemOwnProps & Omit<ComponentProps<"div">, keyof ItemOwnProps | "id" | "style">;
+/** 展开条里的一项：子元素是图标，可以再带文字；传 `href` 就是一个链接。 */
+export declare function FlyoutBarItem({ "aria-label": ariaLabel, disabled, closeOnClick, href, target, rel, render, onClick, className, children, ...props }: FlyoutBarItemProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/flyout-bar/FlyoutBar.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{defined as n}from"../../lib/defined.js";import{usePortalScope as r}from"../../hooks/usePortalScope.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{Menu as o}from"@base-ui/react/menu";function s({trigger:t,side:n=`right`,open:s,defaultOpen:c,onOpenChange:l,className:u,children:d}){let{anchorRef:f,portalRef:p}=r();return/* @__PURE__ */ a(o.Root,{orientation:`horizontal`,open:s,defaultOpen:c,onOpenChange:l&&(e=>l(e)),children:[/* @__PURE__ */ i(o.Trigger,{ref:f,render:t}),/* @__PURE__ */ i(o.Portal,{ref:p,children:/* @__PURE__ */ i(o.Positioner,{side:n,align:`center`,className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ i(o.Popup,{"data-theme":`dark`,className:e(`flex h-(--anchor-height) min-h-10 items-stretch border border-line bg-surface-raised text-ink-secondary shadow-sm outline-none`,`data-[side=left]:border-r-4 data-[side=left]:border-r-action data-[side=right]:border-l-4 data-[side=right]:border-l-action`,`[clip-path:inset(-12px)] transition-[clip-path] duration-(--duration-base) ease-exit`,`data-[side=right]:data-ending-style:[clip-path:inset(-12px_100%_-12px_-12px)] data-[side=right]:data-starting-style:[clip-path:inset(-12px_100%_-12px_-12px)]`,`data-[side=left]:data-ending-style:[clip-path:inset(-12px_-12px_-12px_100%)] data-[side=left]:data-starting-style:[clip-path:inset(-12px_-12px_-12px_100%)]`,u),children:d})})})]})}const c=/* @__PURE__ */ e(`flex min-w-10 cursor-default items-center justify-center gap-2 px-2.5 text-sm select-none`,`transition-colors duration-(--duration-fast) ease-standard`,`data-disabled:text-ink-disabled data-highlighted:text-ink`,`[&_svg]:size-5 [&_svg]:shrink-0`,t);function l({"aria-label":t,disabled:r,closeOnClick:a,href:s,target:l,rel:u,render:d,onClick:f,className:p,children:m,...h}){let g=e(c,p);return s!==void 0||d!==void 0?/* @__PURE__ */ i(o.LinkItem,{render:d,...n({href:s,target:l,rel:u}),"aria-label":t,label:t,closeOnClick:a,onClick:f,className:g,children:m}):/* @__PURE__ */ i(o.Item,{...h,"aria-label":t,label:t,disabled:r,closeOnClick:a,onClick:f,className:g,children:m})}export{s as FlyoutBar,l as FlyoutBarItem};

package/dist/components/flyout-bar/index.d.ts

@@ -0,0 +1,3 @@
+
+import { FlyoutBar, FlyoutBarItem, FlyoutBarItemProps, FlyoutBarProps, FlyoutBarSide } from "./FlyoutBar.js";
+export { FlyoutBar, FlyoutBarItem, type FlyoutBarItemProps, type FlyoutBarProps, type FlyoutBarSide };

package/dist/components/ghost-text/GhostText.d.ts

@@ -0,0 +1,21 @@
+
+import { ComponentProps } from "react";
+//#region src/components/ghost-text/GhostText.d.ts
+export type GhostTextVariant = "hatch" | "outline" | "solid";
+export type GhostTextProps = ComponentProps<"span"> & {
+  /**
+   * - `hatch` 字形透明，用细斜纹填充。版块分隔、背景，默认；
+   * - `outline` 字形透明，只有一圈浅色描边。章节编号、完成态的庆祝词；
+   * - `solid` 纯墨色，越过容器边界被截断。
+   */
+  variant?: GhostTextVariant;
+};
+/**
+ * 镂空巨字：版面背景层里的一个词或一个编号，不是标题。
+ * 它只管长相与隐藏：放在哪、被谁裁切由使用方定——通常是绝对定位在一个
+ * `relative overflow-clip` 的版块里。字号默认是 `text-ghost`，用 `className` 换。
+ *
+ * 内容要短，写与版块相关的真实词语；一个版块一个；窄屏上往往直接去掉更好。
+ */
+export declare function GhostText({ variant, className, ...props }: GhostTextProps): import("react").JSX.Element;
+//#endregion

package/dist/components/ghost-text/GhostText.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={hatch:`ghost-hatch`,outline:`ghost-outline`,solid:`text-ink`};function i({variant:i=`hatch`,className:a,...o}){return/* @__PURE__ */ n(`span`,{...o,"aria-hidden":`true`,"data-variant":i,className:e(t,`block font-display text-ghost font-extrabold whitespace-nowrap uppercase`,r[i],a)})}export{i as GhostText};

package/dist/components/ghost-text/index.d.ts

@@ -0,0 +1,3 @@
+
+import { GhostText, GhostTextProps, GhostTextVariant } from "./GhostText.js";
+export { GhostText, type GhostTextProps, type GhostTextVariant };

package/dist/components/hatch/Hatch.d.ts

@@ -0,0 +1,18 @@
+
+import { ComponentProps } from "react";
+//#region src/components/hatch/Hatch.d.ts
+export type HatchDensity = "fine" | "mid" | "bold";
+export type HatchProps = Omit<ComponentProps<"div">, "children"> & {
+  /**
+   * - `bold` 粗而淡的斜带（墨色 5%），跟随主题。条带状的表面：工具条、标题栏，默认；
+   * - `mid` 比底色亮一档的斜带，压在深色控件上，不随主题变；
+   * - `fine` 很细的墨色斜带，填未探索的区域、需要"留空"的格子。
+   */
+  density?: HatchDensity;
+};
+/**
+ * 一块 45° 斜纹，纯装饰。尺寸、位置、底色都由 `className` 给。
+ * 把它限制在条带和控件上：不要铺满整个页面，也不要压在正文下面。
+ */
+export declare function Hatch({ density, className, ...props }: HatchProps): import("react").JSX.Element;
+//#endregion

package/dist/components/hatch/Hatch.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={bold:`hatch`,mid:`hatch hatch-mid`,fine:`hatch hatch-fine`};function i({density:i=`bold`,className:a,...o}){return/* @__PURE__ */ n(`div`,{...o,"aria-hidden":`true`,"data-density":i,className:e(t,r[i],a)})}export{i as Hatch};

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

@@ -0,0 +1,3 @@
+
+import { Hatch, HatchDensity, HatchProps } from "./Hatch.js";
+export { Hatch, type HatchDensity, type HatchProps };

package/dist/components/hazard-stripe/HazardStripe.d.ts

@@ -0,0 +1,15 @@
+
+import { ComponentProps } from "react";
+//#region src/components/hazard-stripe/HazardStripe.d.ts
+export type HazardStripeSize = "sm" | "md";
+export type HazardStripeProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 条高 6px 或 12px */
+  size?: HazardStripeSize;
+};
+/**
+ * 警示条纹：黄黑相间的窄条，和红色一样带"危险 / 施工"的含义。
+ * 放在删除确认、不可逆操作这类区域的边缘；一个视口最多一处，普通内容不要用。
+ * 它只是装饰：危险的含义必须另外用文字写出来。
+ */
+export declare function HazardStripe({ size, className, ...props }: HazardStripeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/hazard-stripe/HazardStripe.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={sm:`h-1.5`,md:`h-3`};function i({size:i=`md`,className:a,...o}){return/* @__PURE__ */ n(`div`,{...o,"aria-hidden":`true`,className:e(t,`hazard w-full`,r[i],a)})}export{i as HazardStripe};

package/dist/components/hazard-stripe/index.d.ts

@@ -0,0 +1,3 @@
+
+import { HazardStripe, HazardStripeProps, HazardStripeSize } from "./HazardStripe.js";
+export { HazardStripe, type HazardStripeProps, type HazardStripeSize };

package/dist/components/hover-card/HoverCard.d.ts

@@ -0,0 +1,35 @@
+
+import { ComponentProps, ReactElement, ReactNode } from "react";
+//#region src/components/hover-card/HoverCard.d.ts
+export type HoverCardSide = "top" | "bottom" | "left" | "right";
+export type HoverCardAlign = "start" | "center" | "end";
+export type HoverCardProps = Omit<ComponentProps<"div">, "title" | "children" | "className" | "style"> & {
+  /** 触发元素：一个链接（`<a>`、带 `href` 的按钮、路由库的链接组件） */
+  trigger: ReactElement<Record<string, unknown>>;
+  /** 卡片里的标题 */
+  title?: ReactNode;
+  /** 标题下的一行说明 */
+  description?: ReactNode;
+  /** 卡片出现在链接的哪一侧，放不下时自动翻到对面。默认 `bottom` */
+  side?: HoverCardSide;
+  /** 和链接的哪一边对齐。默认 `start` */
+  align?: HoverCardAlign;
+  /** 指针停住多久后出现，毫秒，默认 600。键盘聚焦时同样要等 */
+  delay?: number;
+  /** 指针离开多久后消失，毫秒，默认 300：够把指针移进卡片里 */
+  closeDelay?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 给卡片 */
+  className?: string;
+  children?: ReactNode;
+};
+/**
+ * 悬浮卡：指针停在一个链接上时，在旁边预览它的去处。面板和气泡卡片是同一块。
+ *
+ * 触屏上不出现，读屏也不会读到它：里面只放"点进去也看得到"的内容，
+ * 不放只有这里才有的信息和操作。要操作的用 `Popover`，一句说明用 `Tooltip`。
+ */
+export declare function HoverCard({ trigger, title, description, side, align, delay, closeDelay, open, defaultOpen, onOpenChange, className, children, ...props }: HoverCardProps): import("react").JSX.Element;
+//#endregion

package/dist/components/hover-card/HoverCard.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{usePortalScope as t}from"../../hooks/usePortalScope.js";import{popoverPanel as n}from"../popover/panel-style.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{PreviewCard as a}from"@base-ui/react/preview-card";function o({trigger:o,title:s,description:c,side:l=`bottom`,align:u=`start`,delay:d=600,closeDelay:f=300,open:p,defaultOpen:m,onOpenChange:h,className:g,children:_,...v}){let{anchorRef:y,portalRef:b}=t();return/* @__PURE__ */ i(a.Root,{open:p,defaultOpen:m,onOpenChange:h&&(e=>h(e)),children:[/* @__PURE__ */ r(a.Trigger,{ref:y,render:o,delay:d,closeDelay:f}),/* @__PURE__ */ r(a.Portal,{ref:b,children:/* @__PURE__ */ r(a.Positioner,{side:l,align:u,sideOffset:4,className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ i(a.Popup,{...v,"data-hover-card":``,className:e(n,g),children:[(s||c)&&/* @__PURE__ */ i(`div`,{className:`flex flex-col gap-1`,children:[s&&/* @__PURE__ */ r(`p`,{className:`text-base font-bold`,children:s}),c&&/* @__PURE__ */ r(`p`,{className:`text-ink-secondary`,children:c})]}),_]})})})]})}export{o as HoverCard};

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1,3 @@
+
+import { HoverCard, HoverCardAlign, HoverCardProps, HoverCardSide } from "./HoverCard.js";
+export { HoverCard, type HoverCardAlign, type HoverCardProps, type HoverCardSide };

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,21 @@
+
+import { ComponentProps } from "react";
+//#region src/components/icon-button/IconButton.d.ts
+export type IconButtonVariant = "plain" | "floating" | "accent" | "inverse";
+export type IconButtonSize = "sm" | "md" | "lg";
+export type IconButtonProps = Omit<ComponentProps<"button">, "aria-label"> & {
+  /** 纯图标控件必须有可访问名称 */
+  "aria-label": string;
+  /**
+   * - `plain` 方形浅灰底，工具栏与顶栏，默认；
+   * - `floating` 圆形白底 + 环境阴影，翻页与浮在图像上的操作；
+   * - `accent` 方形，悬停或激活时变信号黄；
+   * - `inverse` 方形，悬停或激活时变墨底；它打开的菜单、展开条开着的时候也是。
+   */
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+  /** 开关类按钮的激活状态，同时输出 `aria-pressed` */
+  pressed?: boolean;
+};
+export declare function IconButton({ variant, size, pressed, disabled, type, className, children, ...props }: IconButtonProps): import("react").JSX.Element;
+//#endregion

package/dist/components/icon-button/IconButton.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{jsx as n}from"react/jsx-runtime";const r={sm:`size-8 after:absolute after:-inset-1 after:content-[''] forced-colors:after:-inset-[5px] [&_svg]:size-4`,md:`size-10 [&_svg]:size-5`,lg:`size-12 [&_svg]:size-6`},i={plain:`bg-surface-sunken text-ink-secondary hover:bg-surface-muted hover:text-ink active:bg-line`,floating:`bg-neutral-50 text-neutral-900 shadow-sm hover:bg-neutral-200 active:bg-neutral-300`,accent:`bg-surface-sunken text-ink-secondary hover:bg-action hover:text-on-action active:bg-action-pressed`,inverse:`bg-surface-sunken text-ink-secondary hover:bg-surface-inverse hover:text-accent-ink-inverse active:bg-surface-inverse data-popup-open:bg-surface-inverse data-popup-open:text-accent-ink-inverse`},a={plain:`bg-surface-muted text-ink active:bg-line`,floating:`bg-neutral-200 text-neutral-900 shadow-sm active:bg-neutral-300`,accent:`bg-action text-on-action active:bg-action-pressed`,inverse:`bg-surface-inverse text-accent-ink-inverse`},o={plain:`cursor-not-allowed bg-surface-sunken text-ink-disabled`,floating:`cursor-not-allowed bg-neutral-50 text-neutral-400 shadow-sm`,accent:`cursor-not-allowed bg-surface-sunken text-ink-disabled`,inverse:`cursor-not-allowed bg-surface-sunken text-ink-disabled`};function s({variant:s=`plain`,size:c=`md`,pressed:l,disabled:u=!1,type:d=`button`,className:f,children:p,...m}){return/* @__PURE__ */ n(`button`,{...m,type:d,disabled:u,"aria-pressed":l,"data-variant":s,"data-size":c,className:e(`relative inline-flex shrink-0 items-center justify-center`,s===`floating`?`rounded-full`:`rounded-sm`,`transition-colors duration-(--duration-fast) ease-standard`,t,r[c],`forced-colors:border`,u?[o[s],`forced-colors:border-[GrayText]`]:l?[a[s],`forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]`]:[i[s],`forced-colors:border-[ButtonText]`],f),children:p})}export{s as IconButton};

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

@@ -0,0 +1,3 @@
+
+import { IconButton, IconButtonProps, IconButtonSize, IconButtonVariant } from "./IconButton.js";
+export { IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant };

package/dist/components/image-viewer/ImageViewer.d.ts

@@ -0,0 +1,48 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/image-viewer/ImageViewer.d.ts
+export type ImageViewerRatio = "16/9" | "4/3" | "1/1" | "3/4";
+export type ImageViewerProps = Omit<ComponentProps<"ul">, "aria-label"> & {
+  /** 这组图是什么，比如"现场照片"。缩略图的列表和大图层都用它命名 */
+  "aria-label": string;
+  /** 大图层开没开 */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 大图层现在是第几张，从 0 起 */
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** 到头之后绕回另一头。默认到头时翻页钮禁用 */
+  loop?: boolean;
+  /** 缩略图的宽高比，默认 `4/3`。大图不裁切，按原比例整张显示 */
+  ratio?: ImageViewerRatio;
+  /** 缩略图按钮名称的开头，默认"查看大图" */
+  viewLabel?: string;
+  previousLabel?: string;
+  nextLabel?: string;
+  closeLabel?: string;
+  /** 直接放 `ImageViewerItem` */
+  children: ReactNode;
+};
+/**
+ * 图片查看：一组缩略图，点一张放大到整屏看，前后翻。
+ * 大图那一层在亮暗两个主题下都是深色；翻页用的是媒体轮播的那条轨道，触屏可以左右滑。
+ *
+ * `className` 和其余属性给缩略图的列表。
+ */
+export declare function ImageViewer({ "aria-label": label, open: openProp, onOpenChange, index: indexProp, defaultIndex, onIndexChange, loop, ratio, viewLabel, previousLabel, nextLabel, closeLabel, className, children, ...props }: ImageViewerProps): import("react").JSX.Element;
+export type ImageViewerItemProps = Omit<ComponentProps<"li">, "title" | "aria-label"> & {
+  /** 这一张的标题，显示在大图下面；也用来给缩略图按钮起名 */
+  title?: ReactNode;
+  /** 标题下面的一段说明 */
+  description?: ReactNode;
+  /** 另给的小图，放在缩略图里。不传就用同一张图 */
+  thumbnail?: ReactNode;
+  /** 缩略图按钮的可访问名称。默认是"查看大图：标题"，没有文字标题时报第几张 */
+  "aria-label"?: string;
+  /** 图：一个 `<img>`（或 `<video>`）。大图层里按原比例整张显示 */
+  children: ReactNode;
+};
+/** 图片查看里的一张。直接放在 `ImageViewer` 里。 */
+export declare function ImageViewerItem({ title, description: _description, thumbnail, "aria-label": ariaLabel, className, children, ...props }: ImageViewerItemProps): import("react").JSX.Element;
+//#endregion

package/dist/components/image-viewer/ImageViewer.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{Close as r}from"../../icons/Close.js";import{useControllableState as i}from"../../hooks/useControllableState.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{useSnapTrack as c}from"../carousel/snap-track.js";import{overlayClose as l,overlayHeader as u}from"../dialog/overlay-style.js";import{Viewfinder as d}from"../viewfinder/Viewfinder.js";import{Children as f,isValidElement as p,useContext as m,useRef as h,useState as g}from"react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{Dialog as b}from"@base-ui/react/dialog";const x={"16/9":`aspect-video`,"4/3":`aspect-4/3`,"1/1":`aspect-square`,"3/4":`aspect-3/4`},S=/* @__PURE__ */ n(null);function C({"aria-label":t,open:n,onOpenChange:r,index:a,defaultIndex:o=0,onIndexChange:s,loop:c=!1,ratio:l=`4/3`,viewLabel:u=`查看大图`,previousLabel:d=`上一张`,nextLabel:m=`下一张`,closeLabel:g=`关闭`,className:x,children:C,...T}){let E=S(),D=f.toArray(C).filter(e=>p(e)),O=D.length,k=Math.max(0,O-1),[A,j]=i({value:n,defaultValue:!1,onChange:r}),[M,N]=i({value:a,defaultValue:o,onChange:s}),P=Math.min(Math.max(M,0),k),F=h([]),I=e=>{N(e),j(!0)},L=(e,t)=>{F.current[e]=t};return/* @__PURE__ */ y(_,{children:[/* @__PURE__ */ v(`ul`,{...T,"aria-label":t,"data-ratio":l,className:e(`grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-2 text-ink`,x),children:D.map((e,t)=>/* @__PURE__ */ v(E.Provider,{value:{position:t,count:O,ratio:l,viewLabel:u,open:I,register:L},children:e},t))}),/* @__PURE__ */ v(b.Root,{open:A,onOpenChange:e=>j(e),children:/* @__PURE__ */ v(b.Portal,{children:/* @__PURE__ */ v(b.Viewport,{className:`fixed inset-0 z-(--z-overlay)`,children:/* @__PURE__ */ v(w,{label:t,items:D,index:P,setIndex:N,loop:c,previousLabel:d,nextLabel:m,closeLabel:g,thumbs:F,onClose:()=>j(!1)})})})})]})}function w({label:t,items:n,index:i,setIndex:f,loop:p,previousLabel:m,nextLabel:g,closeLabel:_,thumbs:x,onClose:S}){let C=n.length,w=Math.max(0,C-1),{trackRef:E,onScroll:D}=c({index:i,count:C,onSettle:f}),O=h(null),k=h(i);k.current=i;let A=e=>{if(C===0)return;let t=p?(e+C)%C:Math.min(Math.max(e,0),w);f(t),!p&&(t===0||t===w)&&document.activeElement instanceof HTMLButtonElement&&document.activeElement.hasAttribute(`data-image-viewer-nav`)&&O.current?.focus({preventScroll:!0})},j=e=>{if(e.defaultPrevented||e.target.closest(`video, audio, input, textarea`))return;let t={ArrowLeft:i-1,ArrowRight:i+1,Home:0,End:w}[e.key];t!==void 0&&(e.preventDefault(),A(t))},M=n[i]?.props,N=C>1,P=!!(M?.title||M?.description);return/* @__PURE__ */ y(b.Popup,{"data-theme":`dark`,"data-image-viewer":``,ref:O,initialFocus:O,finalFocus:()=>x.current[k.current]??!0,onKeyDown:j,className:e(`flex size-full flex-col bg-surface text-ink outline-none`,`transition-opacity duration-(--duration-fast) ease-standard`,`data-ending-style:opacity-0 data-starting-style:opacity-0`),children:[/* @__PURE__ */ y(`div`,{className:e(u,`h-14 px-4`),children:[/* @__PURE__ */ v(b.Title,{className:`sr-only`,children:t}),N&&/* @__PURE__ */ v(`span`,{"aria-hidden":`true`,"data-count":``,className:`font-tech text-sm text-ink-secondary tabular-nums`,children:`${i+1} / ${C}`}),/* @__PURE__ */ v(b.Close,{"aria-label":_,className:l,children:/* @__PURE__ */ v(r,{size:24})})]}),/* @__PURE__ */ v(d,{size:`md`,animate:!0,className:`min-h-0 flex-1 [--bracket-delay:var(--duration-fast)]`,children:/* @__PURE__ */ v(`div`,{ref:E,"data-image-viewer-track":``,onScroll:D,className:`absolute inset-0 flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain [scrollbar-width:none]`,children:n.map((e,t)=>/* @__PURE__ */ v(T,{label:`第 ${t+1} 张，共 ${C} 张`,current:t===i,onClose:S,children:Math.abs(t-i)<=1?e.props.children:null},t))})}),(N||P)&&/* @__PURE__ */ y(`div`,{className:`flex shrink-0 flex-wrap items-start gap-x-6 gap-y-3 border-t border-line px-4 py-4`,children:[N&&/* @__PURE__ */ y(`div`,{className:`flex shrink-0 gap-2`,children:[/* @__PURE__ */ v(s,{variant:`floating`,"aria-label":m,"data-image-viewer-nav":``,disabled:!p&&i<=0,onClick:()=>A(i-1),children:/* @__PURE__ */ v(a,{})}),/* @__PURE__ */ v(s,{variant:`floating`,"aria-label":g,"data-image-viewer-nav":``,disabled:!p&&i>=w,onClick:()=>A(i+1),children:/* @__PURE__ */ v(o,{})})]}),/* @__PURE__ */ y(`div`,{"aria-live":`polite`,className:`flex min-w-0 flex-1 basis-48 flex-col gap-1`,children:[N&&/* @__PURE__ */ v(`span`,{className:`sr-only`,children:`第 ${i+1} 张，共 ${C} 张`}),M?.title&&/* @__PURE__ */ v(`p`,{className:`text-base font-bold wrap-anywhere`,children:M.title}),M?.description&&/* @__PURE__ */ v(`p`,{className:`max-h-24 overflow-y-auto text-sm wrap-anywhere text-ink-secondary`,children:M.description})]})]})]})}function T({label:t,current:n,onClose:r,children:i}){let[a,o]=g(!1),s=()=>o(!0);return/* @__PURE__ */ v(`div`,{role:`group`,"aria-roledescription":`幻灯片`,"aria-label":t,inert:!n,"data-current":n?``:void 0,"data-loaded":a?``:void 0,onLoadCapture:s,onErrorCapture:s,onClick:e=>{e.target===e.currentTarget&&r()},className:e(`flex size-full shrink-0 snap-start items-center justify-center p-6 sm:p-10`,`*:max-h-full *:max-w-full [&>img]:object-contain [&>video]:object-contain`,`[&>img]:transition-opacity [&>img]:duration-(--duration-fast) [&>img]:ease-standard not-data-loaded:[&>img]:opacity-0`),children:i})}function E({title:n,description:r,thumbnail:i,"aria-label":a,className:o,children:s,...c}){let l=m(S());if(!l)throw Error(`ImageViewerItem 要直接放在 ImageViewer 里面`);let u=a??`${l.viewLabel}：${typeof n==`string`?n:`第 ${l.position+1} 张，共 ${l.count} 张`}`;return/* @__PURE__ */ v(`li`,{...c,className:e(`min-w-0`,o),children:/* @__PURE__ */ y(`button`,{type:`button`,ref:e=>l.register(l.position,e),"aria-label":u,"aria-haspopup":`dialog`,onClick:()=>l.open(l.position),className:e(`group/thumb relative block w-full overflow-clip rounded-md bg-surface-muted`,`[&>img]:size-full [&>img]:object-cover [&>svg]:size-full [&>video]:size-full [&>video]:object-cover`,t,x[l.ratio]),children:[i??s,/* @__PURE__ */ v(`span`,{"aria-hidden":`true`,className:`pointer-events-none absolute inset-x-0 bottom-0 h-1 origin-left scale-x-0 bg-action transition-transform duration-(--duration-base) ease-standard group-hover/thumb:scale-x-100 group-focus-visible/thumb:scale-x-100`})]})})}export{C as ImageViewer,E as ImageViewerItem};

package/dist/components/image-viewer/index.d.ts

@@ -0,0 +1,3 @@
+
+import { ImageViewer, ImageViewerItem, ImageViewerItemProps, ImageViewerProps, ImageViewerRatio } from "./ImageViewer.js";
+export { ImageViewer, ImageViewerItem, type ImageViewerItemProps, type ImageViewerProps, type ImageViewerRatio };

package/dist/components/input/Input.d.ts

@@ -0,0 +1,27 @@
+
+import { ControlSize, ControlVariant } from "./control-box.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/input/Input.d.ts
+export type InputSize = ControlSize;
+export type InputVariant = ControlVariant;
+export type InputProps = Omit<ComponentProps<"input">, "size"> & {
+  /**
+   * - `sunken` 凹陷的底 + 一条底边线，默认；
+   * - `outline` 四边描边，放在凹陷底色的区域（工具条、筛选栏）里时用。
+   */
+  variant?: InputVariant;
+  /** 32 / 40 / 56px 高 */
+  size?: InputSize;
+  /** 框内左端：图标 */
+  start?: ReactNode;
+  /** 框内右端：单位、清除按钮 */
+  end?: ReactNode;
+  /** 错误态：底边线变红，右侧出现菱形图标。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+};
+/**
+ * 单行输入框。`className` 给外框，其余属性与 `ref` 给里面的 `<input>`。
+ * 每个输入框都要有标签：放进 `Field`，或者自己传 `aria-label`。
+ */
+export declare function Input({ variant, size, start, end, invalid: invalidProp, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, "aria-describedby": describedByProp, className, ...props }: InputProps): import("react").JSX.Element;
+//#endregion

package/dist/components/input/Input.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{StatusDanger as t}from"../../icons/StatusDanger.js";import{useFieldControl as n}from"../field/Field.js";import{controlBox as r,controlElement as i,controlIconSize as a,controlSize as o}from"./control-box.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l({variant:l=`sunken`,size:u=`md`,start:d,end:f,invalid:p,id:m,disabled:h,required:g,readOnly:_=!1,"aria-describedby":v,className:y,...b}){let{id:x,disabled:S,required:C,invalid:w,...T}=n({id:m,disabled:h,required:g,invalid:p,"aria-describedby":v});return/* @__PURE__ */ c(`div`,{"data-variant":l,"data-size":u,"data-invalid":w?``:void 0,className:e(r({variant:l,invalid:w,disabled:S,readOnly:_}),`items-center`,o[u],y),children:[d&&/* @__PURE__ */ s(`span`,{className:`flex shrink-0 items-center pl-3 text-ink-secondary`,children:d}),/* @__PURE__ */ s(`input`,{...b,id:x,disabled:S,required:C,readOnly:_,"aria-invalid":w||void 0,"aria-describedby":T[`aria-describedby`],className:e(i,`h-full`,d?`pl-2`:`pl-3`,f||w?`pr-2`:`pr-3`)}),w&&/* @__PURE__ */ s(t,{size:a[u],className:e(`shrink-0 text-danger`,!f&&`mr-3`)}),f&&/* @__PURE__ */ s(`span`,{className:e(`flex shrink-0 items-center pr-3 text-sm text-ink-secondary`,w&&`pl-2`),children:f})]})}export{l as Input};

package/dist/components/input/control-box.d.ts

@@ -0,0 +1,5 @@
+
+//#region src/components/input/control-box.d.ts
+export type ControlVariant = "sunken" | "outline";
+export type ControlSize = "sm" | "md" | "lg";
+//#endregion

package/dist/components/input/control-box.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRingWithin as t}from"../../lib/focus-ring.js";const n={sm:`h-8 text-sm`,md:`h-10 text-base`,lg:`h-14 text-lg`},r={sm:14,md:16,lg:20},i={sunken:`border-b-2`,outline:`border`},a={sunken:`bg-surface-sunken`,outline:`bg-surface`},o={sunken:`before:pointer-events-none before:absolute before:inset-x-0 before:-bottom-[2px] before:h-[2px] before:origin-left before:scale-x-0 before:bg-ink before:content-[''] forced-colors:before:bg-[Highlight]`,outline:`before:pointer-events-none before:absolute before:-inset-px before:border before:border-ink before:[clip-path:inset(0_100%_0_0)] before:content-['']`},s={sunken:`focus-within:before:scale-x-100 has-data-popup-open:before:scale-x-100`,outline:`focus-within:before:[clip-path:inset(0)] has-data-popup-open:before:[clip-path:inset(0)]`};function c(t=`sunken`){return e(o[t],s[t],`before:transition-[scale,clip-path] before:duration-(--duration-fast) before:ease-standard focus-within:before:duration-(--duration-base) focus-within:before:ease-exit has-data-popup-open:before:duration-(--duration-base) has-data-popup-open:before:ease-exit`)}function l({variant:n=`sunken`,invalid:r,disabled:o,readOnly:s}){return e(`relative flex w-full min-w-0 text-ink`,i[n],`transition-colors duration-(--duration-fast) ease-standard`,t,s?`border-transparent bg-transparent`:a[n],s&&!o&&!r&&`forced-colors:border-[Canvas]`,o?`cursor-not-allowed border-line text-ink-disabled`:r?`border-danger`:!s&&`border-line-strong hover:not-focus-within:border-ink-secondary`,!o&&!r&&!s&&c(n))}const u=`min-w-0 flex-1 bg-transparent outline-none placeholder:text-ink-tertiary disabled:cursor-not-allowed disabled:placeholder:text-ink-disabled forced-colors:disabled:text-[GrayText]`,d=`text-ink-disabled forced-colors:text-[GrayText]`;export{l as controlBox,d as controlDisabledText,u as controlElement,r as controlIconSize,c as controlLine,n as controlSize};

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

@@ -0,0 +1,3 @@
+
+import { Input, InputProps, InputSize, InputVariant } from "./Input.js";
+export { Input, type InputProps, type InputSize, type InputVariant };

package/dist/components/input/value-chip.js

@@ -0,0 +1,2 @@
+"use client";
+const e={sm:`h-5 text-xs`,md:`h-6 text-sm`,lg:`h-8 text-base`},t=`flex max-w-full min-w-0 cursor-default items-center bg-surface-muted pl-2 text-ink forced-colors:border forced-colors:border-[ButtonText]`,n=`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]`,r={sm:`h-5`,md:`h-6`,lg:`h-8`},i={sm:`min-h-8 text-sm`,md:`min-h-10 text-base`,lg:`min-h-14 text-lg`};export{i as multiValueBox,t as valueChip,n as valueChipRemove,e as valueChipSize,r as valueInputHeight};

package/dist/components/item-slot/ItemGrid.d.ts

@@ -0,0 +1,12 @@
+
+import { ComponentProps } from "react";
+//#region src/components/item-slot/ItemGrid.d.ts
+export type ItemGridProps = ComponentProps<"div">;
+/**
+ * 物品格的矩阵：一组 `ItemSlot` 排成自动填充的网格，整个矩阵只占一个 Tab 停靠点，
+ * 进去之后用方向键在格子之间走。给它一个 `aria-label`，说明这是哪一组物品。
+ *
+ * 默认每格最小 72px、间距 8px，四周留 4px 给选中格的角括号；用 `className` 改。
+ */
+export declare function ItemGrid({ className, onKeyDown, onFocus, ref: forwardedRef, ...props }: ItemGridProps): import("react").JSX.Element;
+//#endregion

package/dist/components/item-slot/ItemGrid.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{useEffect as n,useRef as r}from"react";import{jsx as i}from"react/jsx-runtime";const a=`[data-slot-control]`,o=`${a}:not(:disabled):not([aria-disabled="true"])`,s=/* @__PURE__ */ new Set([`ArrowLeft`,`ArrowRight`,`ArrowUp`,`ArrowDown`,`Home`,`End`]);function c(e,t,n,r=!1){let i=e[t];if(!i)return t;let a=e.map((e,t)=>t).sort((t,n)=>e[t].top-e[n].top||e[t].left-e[n].left||t-n),o=[];for(let t of a){let n=o.at(-1);n&&e[t].top-e[n[0]].top<=2?n.push(t):o.push([t])}for(let t of o)t.sort((t,n)=>e[t].left-e[n].left||t-n);let s=o.findIndex(e=>e.includes(t)),c=o[s],l=c.indexOf(t),u=n=>{if(!n)return t;let r=n[0];for(let t of n)Math.abs(e[t].left-i.left)<Math.abs(e[r].left-i.left)&&(r=t);return r};switch(n){case`ArrowRight`:return c[l+1]??t;case`ArrowLeft`:return c[l-1]??t;case`ArrowDown`:return u(o[s+1]);case`ArrowUp`:return u(o[s-1]);case`Home`:return r?o[0][0]:c[0];case`End`:return r?o.at(-1).at(-1):c.at(-1);default:return t}}function l({className:l,onKeyDown:u,onFocus:d,ref:f,...p}){let m=r(null);n(()=>{let e=m.current;if(!e)return;let t=()=>{let t=[...e.querySelectorAll(o)],n=t.find(e=>e===document.activeElement)??t.find(e=>e.getAttribute(`tabindex`)===`0`)??t.find(e=>e.matches(`[aria-pressed="true"], [aria-current]`))??t[0];for(let t of e.querySelectorAll(a)){let e=t===n?`0`:`-1`;t.getAttribute(`tabindex`)!==e&&t.setAttribute(`tabindex`,e)}};t();let n=new MutationObserver(t);return n.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`disabled`,`aria-disabled`]}),()=>n.disconnect()},[]);let h=e=>{d?.(e);let t=e.target;if(t.matches(a))for(let n of e.currentTarget.querySelectorAll(a))n.setAttribute(`tabindex`,n===t?`0`:`-1`)},g=e=>{if(u?.(e),e.defaultPrevented||!s.has(e.key)||e.altKey||e.metaKey||e.shiftKey)return;let t=e.ctrlKey;if(t&&e.key!==`Home`&&e.key!==`End`)return;let n=[...e.currentTarget.querySelectorAll(o)],r=n.indexOf(document.activeElement);if(r===-1)return;let i=c(n.map(e=>{let t=e.getBoundingClientRect();return{top:t.top,left:t.left}}),r,e.key,t);e.preventDefault(),i!==r&&n[i].focus()};return/* @__PURE__ */ i(`div`,{role:`group`,...p,ref:t(m,f),onFocus:h,onKeyDown:g,className:e(`grid grid-cols-[repeat(auto-fill,minmax(4.5rem,1fr))] gap-2 p-1`,l)})}export{l as ItemGrid,c as nextSlotIndex};

package/dist/components/item-slot/ItemSlot.d.ts

@@ -0,0 +1,54 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactNode } from "react";
+//#region src/components/item-slot/ItemSlot.d.ts
+export type ItemSlotRarity = 1 | 2 | 3 | 4;
+export type ItemSlotRatio = "1/1" | "4/5";
+type OwnProps = {
+  /** 物品名称。格子里只有图标，名称是给读屏的 */
+  name: string;
+  /** 完整的读屏文字。缺省由名称、数量、稀有度与各状态拼出来 */
+  label?: string;
+  /** 右下角的数量 */
+  count?: ReactNode;
+  /** 稀有度 1 – 4：底部一段向上消散的渐变，左缘另有同样个数的小菱形 */
+  rarity?: ItemSlotRarity;
+  /** 宽高比：正方形（默认）或 4:5 */
+  ratio?: ItemSlotRatio;
+  /** 选中：四角出现角括号 */
+  selected?: boolean;
+  /** 锁定：左下角一个锁，卡面不变灰 */
+  locked?: boolean;
+  /** 未获得（图鉴）：内容换成准星占位符 */
+  unowned?: boolean;
+  /** 新获得：左上角的黄签 */
+  isNew?: boolean;
+  /** 黄签上的字，默认 `NEW` */
+  newLabel?: ReactNode;
+  /** 右上角的小圆位：已装备者的头像 */
+  badge?: ReactNode;
+  /** 售罄 / 不可用：整卡压一层遮罩。传文字（"售罄"）会写在遮罩上 */
+  unavailable?: boolean | ReactNode;
+  /** 传了就整格渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  /** 传了（且没有 `href` 和 `render`）就整格渲染成按钮 */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  disabled?: boolean;
+  /** 图标或缩略图 */
+  children?: ReactNode;
+};
+export type ItemSlotProps = Omit<ComponentProps<"div">, keyof OwnProps> & OwnProps;
+/**
+ * 物品格：矩阵里的一个格子——图标、数量、稀有度。
+ * 整格只有一个可点击元素；宽度跟着所在的网格走，格子之间留 6 – 8px。
+ *
+ * `className` 与其余属性给最外层的盒子。角括号画在盒子之外 4px，
+ * 所以网格容器不能贴着格子裁切。一组格子放进 `ItemGrid`，就能用方向键在里面走。
+ */
+export declare function ItemSlot({ name, label, count, rarity, ratio, selected, locked, unowned, isNew, newLabel, badge, unavailable, href, target, rel, render, onClick, disabled, className, children, ...props }: ItemSlotProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/item-slot/ItemSlot.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import"../../lib/focus-ring.js";import{LinkElement as t}from"../link-element/LinkElement.js";import"../../lib/decor.js";import{Crosshair as n}from"../../icons/Crosshair.js";import{Lock as r}from"../../icons/Lock.js";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";const s={"data-slot-control":``},c={"1/1":`aspect-square`,"4/5":`aspect-4/5`},l={1:`from-rarity-1/55`,2:`from-rarity-2/55`,3:`from-rarity-3/55`,4:`from-rarity-4/55`};function u({name:u,label:d,count:f,rarity:p,ratio:m=`1/1`,selected:h=!1,locked:g=!1,unowned:_=!1,isNew:v=!1,newLabel:y=`NEW`,badge:b,unavailable:x=!1,href:S,target:C,rel:w,render:T,onClick:E,disabled:D=!1,className:O,children:k,...A}){let j=S!==void 0||T!==void 0,M=!j&&E!==void 0,N=(j||M)&&!D,P=f!=null&&f!==!1,F=x!==!1&&x!==null,I=typeof x==`boolean`?void 0:x,L=d??[u,P&&typeof f!=`object`&&`数量 ${f}`,p&&`稀有度 ${p}`,v&&`新获得`,_&&`未获得`,g&&`已锁定`,F&&(typeof I==`string`?I:`不可用`)].filter(Boolean).join(`，`),R=e(`absolute inset-0 block overflow-clip border border-line bg-surface-raised text-left text-ink`,N&&[`transition-colors duration-(--duration-fast) ease-standard hover:border-line-strong`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus`,h&&`focus-visible:outline-offset-[6px]`],D&&`cursor-not-allowed`,h&&`forced-colors:border-2 forced-colors:border-[Highlight]`),z=/* @__PURE__ */ o(i,{children:[p&&/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,className:e(`pointer-events-none select-none forced-colors:hidden print:hidden`,`absolute inset-x-0 bottom-0 h-2/5 bg-linear-to-t to-transparent`,l[p])}),p===4&&/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,className:e(`pointer-events-none select-none forced-colors:hidden print:hidden`,`hatch hatch-fine absolute inset-x-0 bottom-0 h-2/5 opacity-30 [mask-image:linear-gradient(to_top,black,transparent)]`)}),/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,className:`absolute inset-0 flex items-center justify-center p-3`,children:_?/* @__PURE__ */ a(n,{className:`size-1/2 max-h-8 max-w-8 text-ink-tertiary`}):k}),p&&/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,className:`absolute top-1/2 left-1.5 flex -translate-y-1/2 flex-col gap-1`,children:Array.from({length:p},(e,t)=>/* @__PURE__ */ a(`span`,{className:`size-1 rotate-45 bg-ink-secondary`},t))}),v&&/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,className:`cut-br cut-sm absolute top-0 left-0 flex h-4 items-center bg-action pr-2.5 pl-1 font-tech text-micro font-bold text-on-action uppercase`,children:y}),b!==void 0&&/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,className:`absolute top-1 right-1 flex size-5 items-center justify-center overflow-clip rounded-full bg-surface-inverse text-micro font-bold text-ink-inverse`,children:b}),g&&/* @__PURE__ */ a(r,{size:14,className:`absolute bottom-1 left-1 text-ink`}),P&&/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,className:`absolute right-1.5 bottom-1 font-tech text-sm leading-none font-bold tabular-nums`,children:f}),F&&/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,className:`absolute inset-0 flex items-center justify-center bg-scrim text-xs font-medium text-neutral-0`,children:I!==void 0&&/* @__PURE__ */ a(`span`,{className:`bg-neutral-950/80 px-1.5 py-0.5`,children:I})}),/* @__PURE__ */ a(`span`,{className:`sr-only`,children:L})]}),B;return B=j?/* @__PURE__ */ a(t,{render:T,href:D?void 0:S,role:D?`link`:void 0,"aria-disabled":D||void 0,target:C,rel:w,"aria-current":h?`true`:void 0,onClick:D?e=>e.preventDefault():E,className:R,...s,children:z}):M?/* @__PURE__ */ a(`button`,{type:`button`,disabled:D,"aria-pressed":h,onClick:E,className:R,...s,children:z}):/* @__PURE__ */ a(`div`,{className:R,children:z}),/* @__PURE__ */ a(`div`,{...A,"data-selected":h?``:void 0,"data-rarity":p,className:e(`relative`,c[m],h&&`corner-brackets after:animate-bracket-in`,O),children:B})}export{u as ItemSlot};

package/dist/components/item-slot/index.d.ts

@@ -0,0 +1,4 @@
+
+import { ItemGrid, ItemGridProps } from "./ItemGrid.js";
+import { ItemSlot, ItemSlotProps, ItemSlotRarity, ItemSlotRatio } from "./ItemSlot.js";
+export { ItemGrid, type ItemGridProps, ItemSlot, type ItemSlotProps, type ItemSlotRarity, type ItemSlotRatio };

package/dist/components/kbd/Kbd.d.ts

@@ -0,0 +1,15 @@
+
+import { ComponentProps } from "react";
+//#region src/components/kbd/Kbd.d.ts
+export type KbdSize = "sm" | "md";
+export type KbdProps = ComponentProps<"kbd"> & {
+  /** 20px 或 24px 高 */
+  size?: KbdSize;
+};
+/**
+ * 键位提示：一颗小键帽，贴在对应的控件旁。
+ * 只用于真的支持键盘快捷键的地方，触屏界面和普通网页不要伪造键帽。
+ * 组合键分开写：`<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>`。
+ */
+export declare function Kbd({ size, className, ...props }: KbdProps): import("react").JSX.Element;
+//#endregion

package/dist/components/kbd/Kbd.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 min-w-5 px-1 text-xs`,md:`h-6 min-w-6 px-1.5 text-sm`};function r({size:r=`sm`,className:i,...a}){return/* @__PURE__ */ t(`kbd`,{...a,className:e(`inline-flex shrink-0 items-center justify-center bg-surface-inverse font-tech leading-none font-medium whitespace-nowrap text-ink-inverse`,n[r],i)})}export{r as Kbd};

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

@@ -0,0 +1,3 @@
+
+import { Kbd, KbdProps, KbdSize } from "./Kbd.js";
+export { Kbd, type KbdProps, type KbdSize };

package/dist/components/link-element/LinkElement.d.ts

@@ -0,0 +1,6 @@
+
+import { ComponentProps, ReactElement } from "react";
+//#region src/components/link-element/LinkElement.d.ts
+/** 用来代替 `<a>` 的元素，通常是路由库的链接组件：`<Link to="/archive" />` */
+export type LinkRender = ReactElement<Record<string, unknown>>;
+//#endregion

package/dist/components/link-element/LinkElement.js

@@ -0,0 +1,2 @@
+"use client";
+import{defined as e}from"../../lib/defined.js";import{useRender as t}from"@base-ui/react/use-render";function n({render:n,ref:r,...i}){return t({render:n,ref:r,props:n?e(i):i,defaultTagName:`a`})}export{n as LinkElement};

package/dist/components/list/List.d.ts

@@ -0,0 +1,46 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactNode } from "react";
+//#region src/components/list/List.d.ts
+export type ListVariant = "plain" | "band";
+export type ListProps = ComponentProps<"ul"> & {
+  /**
+   * - `plain` 行间一条 1px 的线，默认；
+   * - `band` 浅色画布上一条条固定深色的行，行间留缝；选中行整行反转成白底墨字。
+   */
+  variant?: ListVariant;
+};
+/** 列表行的容器，外圈不描边。里面只放 `ListRow`。 */
+export declare function List({ variant, className, ...props }: ListProps): import("react").JSX.Element;
+export type ListRowSize = "sm" | "md";
+export type ListRowProps = Omit<ComponentProps<"li">, "onClick"> & {
+  /** 行首：图标、日期块、缩略图 */
+  start?: ReactNode;
+  /** 行尾：数值或状态，右对齐、等宽 */
+  end?: ReactNode;
+  /** 标题下的一行次要说明 */
+  description?: ReactNode;
+  /** 选中：浅灰底 + 左缘黄条 + 标题加粗；在 `band` 列表里是整行反转成白底墨字 */
+  selected?: boolean;
+  /** 已完成：整行降一档对比，行尾数值前多一个低对比的描边词，读屏多读一句"已完成" */
+  completed?: boolean;
+  /** 完成态的描边词，默认 `DONE`。纯装饰；传 `null` 去掉 */
+  completedWord?: ReactNode;
+  /** 40px 或 48px 行高 */
+  size?: ListRowSize;
+  /** 传了就整行渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  /** 传了（且没有 `href` 和 `render`）就整行渲染成按钮 */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  disabled?: boolean;
+};
+/**
+ * 一行一个条目。整行可点时只有一个可点击元素，不要在里面再嵌按钮。
+ * 左缘的黄条只表示"选中"，不要拿它表示类目。
+ */
+export declare function ListRow({ start, end, description, selected, completed, completedWord, size, href, target, rel, render, onClick, disabled, className, children, ...props }: ListRowProps): import("react").JSX.Element;
+//#endregion

package/dist/components/list/List.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import"../../lib/focus-ring.js";import{createLazyContext as t}from"../../lib/create-lazy-context.js";import{LinkElement as n}from"../link-element/LinkElement.js";import{GhostText as r}from"../ghost-text/GhostText.js";import{bandCanvas as i,bandGap as a}from"./band-style.js";import{useContext as o}from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=/* @__PURE__ */ t(`plain`);function d({variant:t=`plain`,className:n,...r}){let o=u();return/* @__PURE__ */ c(o.Provider,{value:t,children:/* @__PURE__ */ c(`ul`,{...r,"data-variant":t,className:e(`text-ink`,t===`band`?[`flex flex-col`,i,a]:`divide-y divide-line`,n)})})}const f={sm:`min-h-10 py-2`,md:`min-h-12 py-2.5`},p={sm:`text-lg`,md:`text-xl`};function m({start:t,end:i,description:a,selected:d,completed:m=!1,completedWord:h=`DONE`,size:g=`md`,href:_,target:v,rel:y,render:b,onClick:x,disabled:S=!1,className:C,children:w,...T}){let E=o(u())===`band`,D=_!==void 0||b!==void 0,O=!D&&x!==void 0,k=(D||O)&&!S,A=e(`relative flex w-full items-center gap-3 px-4 text-left`,f[g],m&&`text-ink-secondary`,E&&`border border-line bg-surface text-ink`,d&&!E&&`bg-surface-muted before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-action before:content-['']`,k&&[`transition-colors duration-(--duration-fast) ease-standard`,!d&&(E?`hover:bg-surface-raised active:bg-surface-muted`:`hover:bg-ink/5 active:bg-ink/10`),`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus`],S&&`cursor-not-allowed text-ink-disabled`),j=/* @__PURE__ */ l(s,{children:[t&&/* @__PURE__ */ c(`span`,{className:`flex shrink-0 items-center`,children:t}),/* @__PURE__ */ l(`span`,{className:`min-w-0 flex-1`,children:[/* @__PURE__ */ l(`span`,{className:e(`block truncate`,d&&`font-bold`),children:[w,m&&/* @__PURE__ */ c(`span`,{className:`sr-only`,children:`（已完成）`})]}),a&&/* @__PURE__ */ c(`span`,{className:e(`block truncate text-xs`,S?`text-ink-disabled`:`text-ink-secondary`),children:a})]}),m&&h!==null&&/* @__PURE__ */ c(r,{variant:`outline`,className:e(`hidden shrink-0 leading-none @sm:block`,p[g]),children:h}),i&&/* @__PURE__ */ c(`span`,{className:e(`flex shrink-0 items-center font-tech text-sm tabular-nums`,S?`text-ink-disabled`:d?`text-ink`:`text-ink-secondary`),children:i})]}),M;return M=D?/* @__PURE__ */ c(n,{render:b,href:S?void 0:_,role:S?`link`:void 0,"aria-disabled":S||void 0,target:v,rel:y,"aria-current":d?`true`:void 0,onClick:S?e=>e.preventDefault():x,className:A,children:j}):O?/* @__PURE__ */ c(`button`,{type:`button`,disabled:S,"aria-pressed":d,onClick:x,className:A,children:j}):/* @__PURE__ */ c(`div`,{className:A,children:j}),/* @__PURE__ */ c(`li`,{"data-theme":E?d?`light`:`dark`:void 0,...T,"data-selected":d?``:void 0,"data-completed":m?``:void 0,className:e(`@container`,C),children:M})}export{d as List,m as ListRow};

package/dist/components/list/band-style.js

@@ -0,0 +1,2 @@
+"use client";
+const e=`bg-surface-sunken p-3`,t=`gap-1.5`,n=`border border-line bg-surface text-ink`;export{e as bandCanvas,t as bandGap,n as bandRow};

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

@@ -0,0 +1,3 @@
+
+import { List, ListProps, ListRow, ListRowProps, ListRowSize, ListVariant } from "./List.js";
+export { List, type ListProps, ListRow, type ListRowProps, type ListRowSize, type ListVariant };