@endfield-ui/react 1.2.0 → 1.2.1

package/dist/components/loader/Loader.d.ts

@@ -0,0 +1,23 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/loader/Loader.d.ts
+export type LoaderProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 真实进度，0 – 100。不知道就不传：显示不确定进度，不显示数字 */
+  value?: number;
+  /** 进度下方的一行标语 */
+  tagline?: ReactNode;
+  /** 置为 `false` 时遮罩向上滑出，结束后卸载。默认 `true` */
+  open?: boolean;
+  /** 铺满视口并锁住页面（默认）；关掉则铺满所在的定位容器 */
+  fullscreen?: boolean;
+  /** 进度条的可访问名称 */
+  label?: string;
+  /** 滑出结束、已经卸载之后触发 */
+  onExited?: () => void;
+};
+/**
+ * 加载页：近黑底、大号等宽百分比、一行标语、黄色进度条。只用于整页的首次加载。
+ * 不伪造进度；内容就绪后立刻把 `open` 置为 `false`，不要为了播完动画而等待。
+ */
+export declare function Loader({ value, tagline, open, fullscreen, label, onExited, onKeyDown, className, ref, ...props }: LoaderProps): import("react").JSX.Element | null;
+//#endregion

package/dist/components/loader/Loader.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{usePresence as t}from"../../hooks/usePresence.js";import{mergeRefs as n}from"../../lib/merge-refs.js";import{useEffect as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o({value:o,tagline:s,open:c=!0,fullscreen:l=!0,label:u=`加载中`,onExited:d,onKeyDown:f,className:p,ref:m,...h}){let{ref:g,mounted:_}=t(c,{onExited:d});if(r(()=>{if(!l||!c)return;let e=document.documentElement,t=e.style.overflow,n=document.activeElement;return e.style.overflow=`hidden`,g.current?.focus({preventScroll:!0}),()=>{e.style.overflow=t,n instanceof HTMLElement&&n.isConnected&&n.focus({preventScroll:!0})}},[l,c,g]),!_)return null;let v=e=>{f?.(e),l&&c&&e.key===`Tab`&&e.preventDefault()},y=o===void 0,b=y?0:Math.min(Math.max(o,0),100);return/* @__PURE__ */ i(`div`,{tabIndex:-1,...h,ref:n(g,m),"data-state":c?`open`:`closing`,onKeyDown:v,className:e(`@container flex flex-col justify-end bg-neutral-950 text-neutral-0 outline-none`,l?`fixed inset-0 z-(--z-loader)`:`absolute inset-0`,`transition-[translate] duration-(--duration-slower) ease-emphasis`,c?`translate-y-0`:`pointer-events-none -translate-y-full`,p),children:/* @__PURE__ */ a(`div`,{className:`flex flex-col gap-4 p-6 @md:p-10`,children:[!y&&/* @__PURE__ */ a(`p`,{"aria-hidden":`true`,className:`font-tech leading-none font-medium tabular-nums`,children:[/* @__PURE__ */ i(`span`,{className:`text-4xl @md:text-5xl`,children:Math.round(b)}),/* @__PURE__ */ i(`span`,{className:`text-2xl font-normal @md:text-4xl`,children:`%`})]}),s!==void 0&&/* @__PURE__ */ i(`p`,{className:`text-base @md:text-xl`,children:s}),/* @__PURE__ */ i(`div`,{role:`progressbar`,"aria-label":u,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":y?void 0:b,className:`relative h-1.5 overflow-hidden rounded-sm bg-neutral-800 forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[CanvasText]`,children:y?/* @__PURE__ */ i(`span`,{className:`absolute inset-y-0 left-0 w-2/5 animate-indeterminate bg-action motion-reduce:translate-x-3/4 forced-colors:bg-[Highlight]`}):/* @__PURE__ */ i(`span`,{className:`absolute inset-0 origin-left bg-action transition-transform duration-(--duration-base) ease-standard forced-colors:bg-[Highlight]`,style:{transform:`scaleX(${b/100})`}})})]})})}export{o as Loader};

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

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

package/dist/components/marquee/Marquee.d.ts

@@ -0,0 +1,22 @@
+
+import { ComponentProps } from "react";
+//#region src/components/marquee/Marquee.d.ts
+export type MarqueeProps = ComponentProps<"div"> & {
+  /** 走完一程的秒数，默认 20。内容越长给得越大 */
+  duration?: number;
+  /** 首尾两份内容之间的间隔，任意 CSS 长度，默认 `2rem` */
+  gap?: string;
+  /** 鼠标悬停或焦点落到里面时暂停，默认开 */
+  pauseOnHover?: boolean;
+  /** 由使用方控制的暂停 */
+  paused?: boolean;
+  /** 只在内容放不下时才动；放得下就是一行普通的文字 */
+  overflowOnly?: boolean;
+};
+/**
+ * 跑马灯：内容复制一份首尾相接，匀速走到一半后停顿一下再循环。
+ * 用在巨字和过长的单行文字上；系统开启"减少动态效果"时静止在起点。
+ * 纯装饰的巨字给它加 `aria-hidden`。
+ */
+export declare function Marquee({ duration, gap, pauseOnHover, paused, overflowOnly, className, children, ...props }: MarqueeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/marquee/Marquee.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{useEffect as t,useRef as n,useState as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o({duration:o=20,gap:s=`2rem`,pauseOnHover:c=!0,paused:l=!1,overflowOnly:u=!1,className:d,children:f,...p}){let m=n(null),h=n(null),[g,_]=r(!0);t(()=>{let e=m.current,t=h.current;if(!u||!e||!t)return;let n=()=>{_(t.getBoundingClientRect().width<=e.clientWidth)};if(n(),typeof ResizeObserver>`u`)return;let r=new ResizeObserver(n);return r.observe(e),r.observe(t),()=>r.disconnect()},[u]);let v=!(u&&g),y=v?{marginRight:s}:void 0;return/* @__PURE__ */ i(`div`,{ref:m,...p,"data-moving":v?``:void 0,className:e(`group/marquee flex overflow-hidden`,d),children:/* @__PURE__ */ a(`div`,{className:e(`flex w-max shrink-0`,v&&`animate-marquee motion-reduce:animate-none`,v&&c&&`group-hover/marquee:[animation-play-state:paused] group-focus-within/marquee:[animation-play-state:paused]`,l&&`[animation-play-state:paused]`),style:v?{animationDuration:`${o}s`}:void 0,children:[/* @__PURE__ */ i(`div`,{ref:h,className:`flex shrink-0 items-center`,style:y,children:f}),v&&/* @__PURE__ */ i(`div`,{"aria-hidden":`true`,inert:!0,className:`flex shrink-0 items-center motion-reduce:hidden`,style:y,children:f})]})})}export{o as Marquee};

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

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

package/dist/components/media-card/MediaCard.d.ts

@@ -0,0 +1,36 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/media-card/MediaCard.d.ts
+export type MediaCardRatio = "16/9" | "4/3" | "1/1" | "3/4";
+export type MediaCardProps = Omit<ComponentProps<"article">, "title"> & {
+  /** 图片、视频封面或任意占位图形，铺满媒体区 */
+  media: ReactNode;
+  /** 媒体区的宽高比 */
+  ratio?: MediaCardRatio;
+  title: ReactNode;
+  /** 微标行里的类目，组件在前面加 `//` */
+  category?: ReactNode;
+  /** 微标行里的日期 */
+  date?: ReactNode;
+  /** 类型标签（如 `PV`），放在图片下方的微标行里，不叠在图上 */
+  tag?: ReactNode;
+  /** 这张卡是一段影像：媒体区左下角多一个播放记号。记号不能点，整卡仍然只有一个链接 */
+  video?: boolean;
+  /** `video` 时加在标题前、读屏才听得到的那个词，默认"视频" */
+  videoLabel?: string;
+  /** 传了就整卡可点：标题是链接，点击范围铺满整张卡 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替标题里的 `<a>`（路由库的链接组件）。传了整卡同样可点 */
+  render?: LinkRender;
+  /** 标题的层级，默认 `h3` */
+  level?: 2 | 3 | 4 | 5 | 6;
+};
+/**
+ * 媒体卡：图片 + 微标行 + 标题。标题和标签都在图片之外。
+ * 整卡只有一个可点击元素，不要在里面再放按钮或链接。
+ */
+export declare function MediaCard({ media, ratio, title, category, date, tag, video, videoLabel, href, target, rel, render, level, className, ...props }: MediaCardProps): import("react").JSX.Element;
+//#endregion

package/dist/components/media-card/MediaCard.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{PlayMark as n}from"../play-button/PlayButton.js";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";const o={"16/9":`aspect-video`,"4/3":`aspect-4/3`,"1/1":`aspect-square`,"3/4":`aspect-3/4`};function s({media:s,ratio:c=`16/9`,title:l,category:u,date:d,tag:f,video:p=!1,videoLabel:m=`视频`,href:h,target:g,rel:_,render:v,level:y=3,className:b,...x}){let S=`h${y}`,C=h!==void 0||v!==void 0,w=u!=null,T=d!=null,E=w||T,D=p?/* @__PURE__ */ a(r,{children:[/* @__PURE__ */ i(`span`,{className:`sr-only`,children:`${m}：`}),l]}):l;return/* @__PURE__ */ a(`article`,{...x,className:e(`group/card relative flex min-w-0 flex-col text-ink`,C&&`has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-focus`,b),children:[/* @__PURE__ */ a(`div`,{className:e(`relative overflow-clip rounded-md bg-surface-muted`,`[&>img]:size-full [&>img]:object-cover [&>svg]:size-full [&>video]:size-full [&>video]:object-cover`,o[c]),children:[s,p&&/* @__PURE__ */ i(n,{className:`pointer-events-none absolute bottom-2 left-2`}),C&&/* @__PURE__ */ i(`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/card:scale-x-100 group-has-focus-visible/card:scale-x-100`})]}),(f!==void 0||E)&&/* @__PURE__ */ a(`p`,{className:`mt-3 flex min-h-5 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-ink-secondary`,children:[f,E&&/* @__PURE__ */ a(`span`,{className:`font-tech`,children:[/* @__PURE__ */ i(`span`,{"aria-hidden":`true`,children:`// `}),u,w&&T&&`　`,d]})]}),/* @__PURE__ */ i(S,{className:`mt-1.5 text-base font-medium wrap-anywhere`,children:C?/* @__PURE__ */ i(t,{render:v,href:h,target:g,rel:_,className:`outline-none after:absolute after:inset-0 after:content-['']`,children:D}):D})]})}export{s as MediaCard};

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

@@ -0,0 +1,3 @@
+
+import { MediaCard, MediaCardProps, MediaCardRatio } from "./MediaCard.js";
+export { MediaCard, type MediaCardProps, type MediaCardRatio };

package/dist/components/nav-action/NavAction.d.ts

@@ -0,0 +1,34 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactNode } from "react";
+//#region src/components/nav-action/NavAction.d.ts
+export type NavActionLayout = "inline" | "block" | "stacked";
+type OwnProps = {
+  /** 换掉默认的实心三角 */
+  icon?: ReactNode;
+  /**
+   * 摆法。放在侧轨、全屏菜单里时由它们决定，一般不用传：
+   * - `inline` 40px 高的横块，顶栏里；
+   * - `block` 48px 高的通宽横条，展开的侧轨和全屏菜单的底部；
+   * - `stacked` 48px 宽、至少 96px 高的竖块，文字竖排，收起的侧轨里。
+   */
+  layout?: NavActionLayout;
+  /** 传了就渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  disabled?: boolean;
+  children: ReactNode;
+};
+export type NavActionProps = OwnProps & Omit<ComponentProps<"button">, keyof OwnProps | "type">;
+/**
+ * 主行动块：整个产品最主要的那一个去处（"前往控制台"）。
+ * 反转的一整块，悬停时变成信号黄。侧轨、顶栏、全屏菜单的底部放的都是它；
+ * 一个界面里只放一个。
+ */
+export declare function NavAction({ icon, layout: layoutProp, href, target, rel, render, onClick, disabled, className, children, ...props }: NavActionProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/nav-action/NavAction.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{LinkElement as r}from"../link-element/LinkElement.js";import{TriangleRight as i}from"../../icons/TriangleRight.js";import{useContext as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";const l=/* @__PURE__ */ n(null),u={inline:`inline-flex h-10 items-center gap-2.5 px-4 text-sm`,block:`flex h-12 w-full items-center gap-3 px-4 text-base`,stacked:`flex min-h-24 w-12 flex-col items-center justify-center gap-2 py-3 text-sm`};function d({icon:n,layout:d,href:f,target:p,rel:m,render:h,onClick:g,disabled:_=!1,className:v,children:y,...b}){let x=a(l()),S=d??x??`inline`,C=S===`stacked`,w=e(`shrink-0 font-medium whitespace-nowrap select-none`,`transition-colors duration-(--duration-fast) ease-standard`,t,u[S],_?`cursor-not-allowed bg-disabled text-on-disabled`:`bg-surface-inverse text-ink-inverse hover:bg-action hover:text-on-action active:bg-action-pressed active:text-on-action`,v),T=/* @__PURE__ */ c(o,{children:[/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:`flex shrink-0 items-center justify-center [&_svg]:size-3`,children:n??/* @__PURE__ */ s(i,{})}),/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:e(`shrink-0 bg-current opacity-30`,C?`h-px w-4`:`h-4 w-px`)}),/* @__PURE__ */ s(`span`,{className:e(C?`tracking-label [writing-mode:vertical-rl]`:`min-w-0 truncate`),children:y})]});return f!==void 0||h!==void 0?/* @__PURE__ */ s(r,{render:h,href:_?void 0:f,role:_?`link`:void 0,"aria-disabled":_||void 0,target:p,rel:m,onClick:_?e=>e.preventDefault():g,"data-layout":S,className:w,children:T}):/* @__PURE__ */ s(`button`,{...b,type:`button`,disabled:_,onClick:g,"data-layout":S,className:w,children:T})}export{d as NavAction,l as getNavActionContext};

package/dist/components/nav-action/index.d.ts

@@ -0,0 +1,3 @@
+
+import { NavAction, NavActionLayout, NavActionProps } from "./NavAction.js";
+export { NavAction, type NavActionLayout, type NavActionProps };

package/dist/components/nav-menu/NavMenu.d.ts

@@ -0,0 +1,57 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactElement, ReactNode } from "react";
+//#region src/components/nav-menu/NavMenu.d.ts
+export type NavMenuProps = {
+  /** 菜单钮，通常是顶栏最右边的 `<IconButton>`。不传就用 `open` / `onOpenChange` 自己控制 */
+  trigger?: ReactElement<Record<string, unknown>>;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 菜单的名称，读屏打开时读它。没有 `brand` 时也显示在最上面一行 */
+  title: ReactNode;
+  /** 最上面一行左边的标志，通常和顶栏的是同一个 */
+  brand?: ReactNode;
+  /** 导航项下面的一排工具按钮 */
+  tools?: ReactNode;
+  /** 底部通宽的按钮：放一到两个 `NavAction` */
+  footer?: ReactNode;
+  /** 背景底部的一行镂空巨字，纯装饰。写一个短词 */
+  ghost?: string;
+  /** 里面那组栏目的名称 */
+  navLabel?: string;
+  /** 关闭钮的可访问名称 */
+  closeLabel?: string;
+  /** 给整块面板 */
+  className?: string;
+  /** `NavMenuItem` */
+  children: ReactNode;
+};
+/**
+ * 全屏菜单：窄屏上顶栏的菜单钮打开的那一整屏栏目。
+ * 打开时焦点移入并被限制在内、背景不可滚动；`Esc` 关闭，焦点回到菜单钮。
+ */
+export declare function NavMenu({ trigger, open, defaultOpen, onOpenChange, title, brand, tools, footer, ghost, navLabel, closeLabel, className, children }: NavMenuProps): import("react").JSX.Element;
+type ItemOwnProps = {
+  /** 图标，后面跟一条竖向的分隔线 */
+  icon?: ReactNode;
+  /** 当前所在的栏目：整条变信号黄，输出 `aria-current="page"` */
+  current?: boolean;
+  disabled?: boolean;
+  /** 点了之后是否关掉菜单，默认关 */
+  closeOnClick?: boolean;
+  /** 传了就渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  /** 没有 `href` 和 `render` 时渲染成按钮 */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  children: ReactNode;
+};
+export type NavMenuItemProps = ItemOwnProps & Omit<ComponentProps<"li">, keyof ItemOwnProps>;
+/** 全屏菜单里的一个栏目。 */
+export declare function NavMenuItem({ icon, current, disabled, closeOnClick, href, target, rel, render, onClick, className, children, ...props }: NavMenuItemProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/nav-menu/NavMenu.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{useControllableState as i}from"../../hooks/useControllableState.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ArrowRight as o}from"../../icons/ArrowRight.js";import{LinkElement as s}from"../link-element/LinkElement.js";import{usePortalScope as c}from"../../hooks/usePortalScope.js";import{GhostText as l}from"../ghost-text/GhostText.js";import{firstFocusableIn as u}from"../dialog/initial-focus.js";import{getNavActionContext as d}from"../nav-action/NavAction.js";import{useContext as f,useRef as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{Dialog as _}from"@base-ui/react/dialog";const v=/* @__PURE__ */ n(()=>{});function y({trigger:t,open:n,defaultOpen:o=!1,onOpenChange:s,title:f,brand:m,tools:y,footer:b,ghost:x,navLabel:S=`主导航`,closeLabel:C=`关闭菜单`,className:w,children:T}){let E=v(),D=d(),[O,k]=i({value:n,defaultValue:o,onChange:s}),{anchorRef:A,portalRef:j}=c(),M=p(null);return/* @__PURE__ */ g(_.Root,{open:O,onOpenChange:e=>k(e),children:[t&&/* @__PURE__ */ h(_.Trigger,{ref:A,render:t}),/* @__PURE__ */ h(_.Portal,{ref:j,children:/* @__PURE__ */ g(_.Popup,{initialFocus:u(M),className:e(`fixed inset-0 z-(--z-overlay) flex flex-col overflow-hidden bg-surface text-ink outline-none`,`transition-opacity duration-(--duration-fast) ease-standard`,`data-ending-style:opacity-0 data-starting-style:opacity-0`,w),children:[/* @__PURE__ */ g(`div`,{className:`flex h-14 shrink-0 items-center gap-2 border-b border-line bg-surface px-4`,children:[/* @__PURE__ */ g(`div`,{className:`flex min-w-0 flex-1 items-center`,children:[m,/* @__PURE__ */ h(_.Title,{className:m?`sr-only`:`truncate text-base font-medium`,children:f})]}),/* @__PURE__ */ h(_.Close,{render:/* @__PURE__ */ h(a,{"aria-label":C,children:/* @__PURE__ */ h(r,{})})})]}),/* @__PURE__ */ g(`div`,{ref:M,className:`flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain`,children:[/* @__PURE__ */ h(E.Provider,{value:()=>k(!1),children:/* @__PURE__ */ h(`nav`,{"aria-label":S,children:/* @__PURE__ */ h(`ul`,{className:`flex flex-col gap-1 p-4`,children:T})})}),y&&/* @__PURE__ */ h(`div`,{className:`mx-4 flex flex-wrap gap-1 bg-surface-muted p-1`,children:y}),/* @__PURE__ */ h(`div`,{"aria-hidden":`true`,className:e(`relative flex-1 overflow-hidden`,x&&`min-h-20`),children:x&&/* @__PURE__ */ h(l,{variant:`outline`,className:`absolute bottom-0 left-4 translate-y-1/4`,children:x})}),b&&/* @__PURE__ */ h(`div`,{className:`flex shrink-0 flex-col gap-2 p-4`,children:/* @__PURE__ */ h(D.Provider,{value:`block`,children:b})})]})]})})]})}const b=[`animate-shift-in [--shift-x:calc(var(--motion-shift-lg)*-1)]`,`[animation-delay:100ms] nth-2:[animation-delay:150ms] nth-3:[animation-delay:200ms]`,`nth-4:[animation-delay:250ms] nth-5:[animation-delay:300ms] nth-[n+6]:[animation-delay:350ms]`].join(` `);function x({icon:n,current:r=!1,disabled:i=!1,closeOnClick:a=!0,href:c,target:l,rel:u,render:d,onClick:p,className:_,children:y,...x}){let S=f(v()),C=c!==void 0||d!==void 0,w=e=>{i?e.preventDefault():(p?.(e),a&&S())},T=e(`relative flex h-14 w-full items-center gap-3 px-4 text-left text-base font-medium`,`transition-colors duration-(--duration-fast) ease-standard`,i?`cursor-not-allowed bg-surface-sunken text-ink-disabled`:r?[`bg-action font-bold text-on-action`,`before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-on-action before:content-['']`,`focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-on-action`]:[`bg-surface-sunken text-ink hover:bg-surface-muted active:bg-line`,t]),E=i?`text-ink-disabled`:r?`text-on-action`:`text-ink-secondary`,D=/* @__PURE__ */ g(m,{children:[n&&/* @__PURE__ */ g(m,{children:[/* @__PURE__ */ h(`span`,{"aria-hidden":`true`,className:e(`flex size-6 shrink-0 items-center justify-center [&_svg]:size-5`,E),children:n}),/* @__PURE__ */ h(`span`,{"aria-hidden":`true`,className:e(`h-5 w-px shrink-0`,r&&!i?`bg-on-action`:`bg-line-strong`)})]}),/* @__PURE__ */ h(`span`,{className:`min-w-0 flex-1 truncate`,children:y}),/* @__PURE__ */ h(o,{size:16,className:e(`shrink-0`,E)})]});return/* @__PURE__ */ h(`li`,{...x,className:e(b,_),children:C?/* @__PURE__ */ h(s,{render:d,href:i?void 0:c,role:i?`link`:void 0,"aria-disabled":i||void 0,target:l,rel:u,"aria-current":r?`page`:void 0,onClick:w,className:T,children:D}):/* @__PURE__ */ h(`button`,{type:`button`,disabled:i,"aria-current":r?`page`:void 0,onClick:w,className:T,children:D})})}export{y as NavMenu,x as NavMenuItem};

package/dist/components/nav-menu/index.d.ts

@@ -0,0 +1,3 @@
+
+import { NavMenu, NavMenuItem, NavMenuItemProps, NavMenuProps } from "./NavMenu.js";
+export { NavMenu, NavMenuItem, type NavMenuItemProps, type NavMenuProps };

package/dist/components/navigator/Navigator.d.ts

@@ -0,0 +1,27 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/navigator/Navigator.d.ts
+export type NavigatorSize = "sm" | "md";
+export type NavigatorProps = Omit<ComponentProps<"div">, "children" | "onChange"> & {
+  /** 各条目的名称，按顺序 */
+  items: ReactNode[];
+  /** 受控的当前条目，从 0 起 */
+  index?: number;
+  /** 非受控时的初始条目，默认 0 */
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** 首尾相接：到最后一项再往后回到第一项。默认到头时按钮禁用 */
+  loop?: boolean;
+  /** 40 或 56px 高 */
+  size?: NavigatorSize;
+  prevLabel?: string;
+  nextLabel?: string;
+  /** 读屏听到的当前位置，默认"第 1 项，共 4 项" */
+  positionLabel?: (position: number, count: number) => string;
+};
+/**
+ * 胶囊导航器：在少量条目间前后切换，并显示当前条目的名称。
+ * 用 `aria-label` 说明翻的是什么（"勘探区"）。
+ */
+export declare function Navigator({ items, index, defaultIndex, onIndexChange, loop, size, prevLabel, nextLabel, positionLabel, className, ...props }: NavigatorProps): import("react").JSX.Element;
+//#endregion

package/dist/components/navigator/Navigator.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{useControllableState as t}from"../../hooks/useControllableState.js";import{ChevronLeft as n}from"../../icons/ChevronLeft.js";import{ChevronRight as r}from"../../icons/ChevronRight.js";import{IconButton as i}from"../icon-button/IconButton.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s={sm:`h-10 gap-1 p-1 text-sm`,md:`h-14 gap-2 p-2 text-base`},c={sm:`sm`,md:`md`},l=(e,t)=>`第 ${e} 项，共 ${t} 项`;function u({items:u,index:d,defaultIndex:f=0,onIndexChange:p,loop:m=!1,size:h=`md`,prevLabel:g=`上一项`,nextLabel:_=`下一项`,positionLabel:v=l,className:y,...b}){let x=u.length,[S,C]=t({value:d,defaultValue:f,onChange:p}),w=Math.min(Math.max(S,0),Math.max(x-1,0)),T=e=>{x!==0&&C(m?(e+x)%x:Math.min(Math.max(e,0),x-1))},E=x<=1;return/* @__PURE__ */ o(`div`,{role:`group`,...b,"data-size":h,className:e(`inline-flex max-w-full items-center rounded-full bg-surface-muted text-ink`,s[h],y),children:[/* @__PURE__ */ a(i,{variant:`floating`,size:c[h],"aria-label":g,disabled:E||!m&&w===0,onClick:()=>T(w-1),children:/* @__PURE__ */ a(n,{})}),/* @__PURE__ */ o(`div`,{"aria-live":`polite`,"aria-atomic":`true`,className:`flex min-w-0 flex-1 items-baseline justify-center gap-2 px-2`,children:[/* @__PURE__ */ o(`span`,{className:`shrink-0 font-tech text-xs font-bold text-accent-ink tabular-nums`,children:[/* @__PURE__ */ a(`span`,{"aria-hidden":`true`,children:`${x===0?0:w+1}/${x}`}),/* @__PURE__ */ a(`span`,{className:`sr-only`,children:v(w+1,x)})]}),/* @__PURE__ */ a(`span`,{className:`grid min-w-0`,children:u.map((t,n)=>/* @__PURE__ */ a(`span`,{"data-current":n===w?``:void 0,className:e(`col-start-1 row-start-1 truncate text-center`,n!==w&&`invisible`),children:t},n))})]}),/* @__PURE__ */ a(i,{variant:`floating`,size:c[h],"aria-label":_,disabled:E||!m&&w===x-1,onClick:()=>T(w+1),children:/* @__PURE__ */ a(r,{})})]})}export{u as Navigator};

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

@@ -0,0 +1,3 @@
+
+import { Navigator, NavigatorProps, NavigatorSize } from "./Navigator.js";
+export { Navigator, type NavigatorProps, type NavigatorSize };

package/dist/components/otp-input/OtpInput.d.ts

@@ -0,0 +1,52 @@
+
+import { ControlSize, ControlVariant } from "../input/control-box.js";
+import { ComponentProps } from "react";
+//#region src/components/otp-input/OtpInput.d.ts
+export type OtpInputType = "numeric" | "alphanumeric";
+export type OtpInputSize = ControlSize;
+export type OtpInputVariant = ControlVariant;
+export type OtpInputProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue" | "children"> & {
+  /** 一共几位，默认 6 */
+  length?: number;
+  /** 拼起来的那一串 */
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** 每一位都填上了。粘贴一整串也算 */
+  onComplete?: (value: string) => void;
+  /** 收哪些字符：`numeric` 只收数字，默认；`alphanumeric` 收字母和数字 */
+  type?: OtpInputType;
+  /** 字母统一成大写：值也是大写，不只是看起来 */
+  uppercase?: boolean;
+  /** 把填进去的字遮成圆点 */
+  mask?: boolean;
+  /** 每几格之间加一道短横，如 6 位的码写 `3` 分成两组。只是画的 */
+  groupSize?: number;
+  /** 32 / 40 / 56px 见方 */
+  size?: OtpInputSize;
+  /** 同输入框：`sunken` 凹陷的底 + 底边线，默认；`outline` 四边描边 */
+  variant?: OtpInputVariant;
+  /** 错误态：每一格的边线变红。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  /** 传了就有一个隐藏字段随表单提交，值是拼起来的那一串 */
+  name?: string;
+  form?: string;
+  /** 填满就提交所在的表单 */
+  autoSubmit?: boolean;
+  /** 挂载后焦点落在第一格 */
+  autoFocus?: boolean;
+  /** 第二格起每一格的可访问名称，默认"第 2 位，共 6 位"。第一格的名称是字段的标签 */
+  slotLabel?: (position: number, length: number) => string;
+};
+/**
+ * 验证码输入：一格一位的短码。每一格是一个真的输入框——打一位跳一格，
+ * 粘贴一整串会分到各格，整组在 Tab 顺序里只停一次。
+ *
+ * 每个都要有标签：放进 `Field`，或者自己传 `aria-label`。
+ * `className` 与 `ref` 给外面那一排。
+ */
+export declare function OtpInput({ length, value, defaultValue, onValueChange, onComplete, type, uppercase, mask, groupSize, size, variant, invalid: invalidProp, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, name, form, autoSubmit, autoFocus, slotLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": describedByProp, className, ...props }: OtpInputProps): import("react").JSX.Element;
+//#endregion

package/dist/components/otp-input/OtpInput.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{useFieldContext as t,useFieldControl as n}from"../field/Field.js";import{controlBox as r,controlElement as i}from"../input/control-box.js";import{Fragment as a,useId as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{OTPField as l}from"@base-ui/react/otp-field";const u={sm:`h-8 w-8`,md:`h-10 w-10`,lg:`h-14 w-14`},d={sm:`text-base`,md:`text-lg`,lg:`text-2xl`},f={sm:`gap-1.5`,md:`gap-2`,lg:`gap-2`},p=(e,t)=>`第 ${e} 位，共 ${t} 位`,m=e=>e.toUpperCase();function h({length:h=6,value:g,defaultValue:_,onValueChange:v,onComplete:y,type:b=`numeric`,uppercase:x=!1,mask:S=!1,groupSize:C,size:w=`md`,variant:T=`sunken`,invalid:E,id:D,disabled:O,required:k,readOnly:A=!1,name:j,form:M,autoSubmit:N=!1,autoFocus:P=!1,slotLabel:F=p,"aria-label":I,"aria-labelledby":L,"aria-describedby":R,className:z,...B}){let V=t(),{id:H,disabled:U,required:W,invalid:G,...K}=n({id:D,disabled:O,required:k,invalid:E,"aria-describedby":R}),q=K[`aria-describedby`],J=o(),Y=L??(I?J:void 0),X=Y??V?.labelId,Z=e(i,`h-full w-full text-center font-tech font-medium tabular-nums caret-ink text-transparent`,`transition-colors duration-(--duration-fast) ease-standard`,U?`data-filled:text-ink-disabled`:`data-filled:text-ink`,d[w]),Q=C!==void 0&&C>0?C:0;return/* @__PURE__ */ c(l.Root,{...B,id:H,length:h,value:g,defaultValue:_,onValueChange:v&&(e=>v(e)),onValueComplete:y&&(e=>y(e)),validationType:b,normalizeValue:x?m:void 0,mask:S,disabled:U,readOnly:A,required:W,name:j,form:M,autoSubmit:N,"aria-labelledby":X,"aria-describedby":q,"data-size":w,"data-variant":T,"data-invalid":G?``:void 0,className:e(`flex max-w-full min-w-0 items-center`,f[w],z),children:[I&&!L&&/* @__PURE__ */ s(`span`,{id:J,hidden:!0,children:I}),Array.from({length:h},(t,n)=>/* @__PURE__ */ c(a,{children:[Q>0&&n>0&&n%Q===0&&/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,"data-separator":``,className:`h-0.5 w-2 shrink-0 bg-line-strong forced-colors:bg-[CanvasText]`}),/* @__PURE__ */ s(`span`,{className:e(r({variant:T,invalid:G,disabled:U,readOnly:A}),`shrink items-center justify-center`,u[w]),children:/* @__PURE__ */ s(l.Input,{...n===0?{"aria-labelledby":Y,"aria-describedby":q}:{"aria-label":F(n+1,h)},"aria-invalid":G||void 0,autoFocus:P&&n===0,autoCapitalize:x?`characters`:`none`,className:Z})})]},n))]})}export{h as OtpInput};

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

@@ -0,0 +1,3 @@
+
+import { OtpInput, OtpInputProps, OtpInputSize, OtpInputType, OtpInputVariant } from "./OtpInput.js";
+export { OtpInput, type OtpInputProps, type OtpInputSize, type OtpInputType, type OtpInputVariant };

package/dist/components/page-header/PageHeader.d.ts

@@ -0,0 +1,56 @@
+
+import { LinkRender } from "../link-element/LinkElement.js";
+import { ComponentProps, MouseEvent, ReactNode } from "react";
+//#region src/components/page-header/PageHeader.d.ts
+export type PageHeaderProps = Omit<ComponentProps<"header">, "title"> & {
+  /** 页面的标题 */
+  title: ReactNode;
+  /** 标题的层级，默认 1（`<h1>`）。页头用在抽屉、分栏里时改小 */
+  level?: 1 | 2 | 3;
+  /** 标题上面的微文字行，如 `// ARCHIVE　共 128 条` */
+  meta?: ReactNode;
+  /** 标题下面的一段说明 */
+  description?: ReactNode;
+  /** 最上面的层级路径：放一个 `Breadcrumb` */
+  breadcrumb?: ReactNode;
+  /** 标题左边的返回：放一个 `PageHeaderBack` */
+  back?: ReactNode;
+  /** 右边的行动区：几个按钮。放不下时折到标题下面 */
+  actions?: ReactNode;
+  /** 底下加一条分隔线 */
+  divider?: boolean;
+  /**
+   * 吸在滚动容器的顶上，带实底和底下那条线。
+   * 上面还有吸顶的顶栏时用 `className` 改 `top`
+   */
+  sticky?: boolean;
+  /** 挂上时播放一次入场：微文字行 → 标题 → 说明。默认开启；`sticky` 时不播 */
+  animate?: boolean;
+  /** 标题下面的一行：页签、几个统计块 */
+  children?: ReactNode;
+};
+/**
+ * 页头：这是哪一页、怎么回去、在这一页能做什么。一页一个。
+ * 按自身的宽度响应：行动区放不下时折到标题下面。
+ */
+export declare function PageHeader({ title, level, meta, description, breadcrumb, back, actions, divider, sticky, animate, className, children, ...props }: PageHeaderProps): import("react").JSX.Element;
+type BackOwnProps = {
+  /** 默认"返回"。建议写成"返回某某" */
+  "aria-label"?: string;
+  /** 传了就渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  disabled?: boolean;
+};
+export type PageHeaderBackProps = BackOwnProps & Omit<ComponentProps<"button">, keyof BackOwnProps | "type" | "children">;
+/**
+ * 页头里的返回：40px 的深灰斜纹方块加一个左箭头，`back` 按钮收成的图标形态。
+ * 放进 `PageHeader` 的 `back`。
+ */
+export declare function PageHeaderBack({ "aria-label": label, href, target, rel, render, onClick, disabled, className, ...props }: PageHeaderBackProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/page-header/PageHeader.js

@@ -0,0 +1,2 @@
+"use client";
+import{cn as e}from"../../lib/cn.js";import{focusRing as t}from"../../lib/focus-ring.js";import{LinkElement as n}from"../link-element/LinkElement.js";import{ArrowLeft as r}from"../../icons/ArrowLeft.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=`animate-shift-in [--shift-x:calc(var(--motion-shift-lg)*-1)]`,s=[o,`${o} [animation-delay:100ms]`,`${o} [animation-delay:200ms]`];function c({title:t,level:n=1,meta:r,description:o,breadcrumb:c,back:l,actions:u,divider:d=!1,sticky:f=!1,animate:p=!0,className:m,children:h,...g}){let _=`h${n}`,v=p&&!f,y=+!!r;return/* @__PURE__ */ a(`header`,{...g,"data-sticky":f?``:void 0,className:e(`@container flex flex-col gap-4 text-ink`,d&&!f&&`border-b border-line pb-6`,f&&`sticky top-0 z-(--z-float) border-b border-line bg-surface py-4`,m),children:[c,/* @__PURE__ */ a(`div`,{className:`flex flex-col gap-1`,children:[r&&/* @__PURE__ */ i(`p`,{className:e(`font-tech text-xs text-ink-secondary`,v&&s[0]),children:r}),/* @__PURE__ */ a(`div`,{className:`flex flex-wrap items-start justify-between gap-x-6 gap-y-4`,children:[/* @__PURE__ */ a(`div`,{className:`flex min-w-0 flex-1 basis-64 items-start gap-4`,children:[l&&/* @__PURE__ */ i(`div`,{className:`flex h-10 shrink-0 items-center @md:h-12`,children:l}),/* @__PURE__ */ a(`div`,{className:`flex min-w-0 flex-col gap-1`,children:[/* @__PURE__ */ i(_,{className:e(`min-w-0 text-2xl leading-10 font-bold wrap-anywhere @md:text-3xl @md:leading-12`,v&&s[y]),children:t}),o&&/* @__PURE__ */ i(`p`,{className:e(`max-w-prose text-sm text-ink-secondary`,v&&s[y+1]),children:o})]})]}),u&&/* @__PURE__ */ i(`div`,{"data-actions":``,className:`flex min-h-10 flex-wrap items-center gap-2 @md:min-h-12`,children:u})]})]}),h]})}function l({"aria-label":a=`返回`,href:o,target:s,rel:c,render:l,onClick:u,disabled:d=!1,className:f,...p}){let m=e(`relative inline-flex size-10 shrink-0 items-center justify-center`,`transition-colors duration-(--duration-fast) ease-standard`,t,d?`cursor-not-allowed bg-disabled text-on-disabled`:`hatch hatch-mid bg-control text-white shadow-xs hover:bg-neutral-600 active:bg-control-pressed`,f),h=/* @__PURE__ */ i(r,{size:20});return o!==void 0||l!==void 0?/* @__PURE__ */ i(n,{render:l,href:d?void 0:o,role:d?`link`:void 0,"aria-disabled":d||void 0,"aria-label":a,target:s,rel:c,onClick:d?e=>e.preventDefault():u,"data-page-header-back":``,className:m,children:h}):/* @__PURE__ */ i(`button`,{...p,type:`button`,"aria-label":a,disabled:d,onClick:u,"data-page-header-back":``,className:m,children:h})}export{c as PageHeader,l as PageHeaderBack};

package/dist/components/page-header/index.d.ts

@@ -0,0 +1,3 @@
+
+import { PageHeader, PageHeaderBack, PageHeaderBackProps, PageHeaderProps } from "./PageHeader.js";
+export { PageHeader, PageHeaderBack, type PageHeaderBackProps, type PageHeaderProps };

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,29 @@
+
+import { ComponentProps } from "react";
+//#region src/components/pagination/Pagination.d.ts
+export type PaginationSize = "md" | "lg";
+export type PaginationProps = Omit<ComponentProps<"nav">, "children" | "onChange"> & {
+  /** 受控的当前页，从 1 起 */
+  page?: number;
+  /** 非受控时的初始页，默认 1 */
+  defaultPage?: number;
+  onPageChange?: (page: number) => void;
+  /** 总页数 */
+  pageCount: number;
+  /** 页码处换成输入框：输入页码后回车或失焦跳页，Esc 还原 */
+  jump?: boolean;
+  /** 条高 48 或 56px */
+  size?: PaginationSize;
+  prevLabel?: string;
+  nextLabel?: string;
+  /** 跳页输入框的可访问名称 */
+  jumpLabel?: string;
+  /** 读屏听到的当前位置，默认"第 1 页，共 12 页" */
+  pageLabel?: (page: number, pageCount: number) => string;
+};
+/**
+ * 分页条：浅灰斜纹条，两端是方钮，中间是 `01 / 12`。
+ * 不列一长串数字按钮；要跳页就打开 `jump`，在页码处直接输入。
+ */
+export declare function Pagination({ page, defaultPage, onPageChange, pageCount, jump, size, prevLabel, nextLabel, jumpLabel, pageLabel, className, ...props }: PaginationProps): import("react").JSX.Element;
+//#endregion

package/dist/components/pagination/Pagination.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{useControllableState as n}from"../../hooks/useControllableState.js";import{ChevronLeft as r}from"../../icons/ChevronLeft.js";import{ChevronRight as i}from"../../icons/ChevronRight.js";import{IconButton as a}from"../icon-button/IconButton.js";import{useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l={md:`h-12`,lg:`h-14`},u={md:`md`,lg:`lg`},d=(e,t)=>`第 ${e} 页，共 ${t} 页`;function f({page:f,defaultPage:p=1,onPageChange:m,pageCount:h,jump:g=!1,size:_=`md`,prevLabel:v=`上一页`,nextLabel:y=`下一页`,jumpLabel:b=`跳到第几页`,pageLabel:x=d,className:S,...C}){let w=Math.max(1,Math.floor(h)),T=e=>Math.min(Math.max(e,1),w),[E,D]=n({value:f,defaultValue:p,onChange:m}),O=T(E),[k,A]=o(null),j=Math.max(2,String(w).length),M=e=>String(e).padStart(j,`0`),N=e=>D(T(e)),P=()=>{if(k===null)return;let e=Number.parseInt(k,10);A(null),Number.isFinite(e)&&N(e)},F=e=>{A(e.target.value.replace(/\D/g,``).slice(0,j+1))},I=e=>{e.key===`Enter`?(e.preventDefault(),P()):e.key===`Escape`&&A(null)},L=`bg-surface-raised shadow-sm`;return/* @__PURE__ */ c(`nav`,{"aria-label":`分页`,...C,"data-size":_,className:e(`@container hatch flex items-center justify-between gap-2 bg-surface-muted px-1 text-ink`,`forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[ButtonText]`,l[_],S),children:[/* @__PURE__ */ s(a,{variant:`accent`,size:u[_],"aria-label":v,disabled:O<=1,onClick:()=>N(O-1),className:L,children:/* @__PURE__ */ s(r,{})}),/* @__PURE__ */ c(`div`,{className:`flex min-w-0 items-center gap-2 font-display text-base leading-none whitespace-nowrap tabular-nums @2xs:text-lg`,children:[/* @__PURE__ */ s(`span`,{className:`sr-only`,"aria-live":`polite`,children:x(O,w)}),g?/* @__PURE__ */ s(`input`,{type:`text`,inputMode:`numeric`,autoComplete:`off`,"aria-label":b,value:k??M(O),onChange:F,onKeyDown:I,onBlur:P,onFocus:e=>e.target.select(),style:{width:`calc(${j}ch + 0.75rem)`},className:e(`h-8 border-b-2 border-line-strong bg-surface-raised text-center font-bold text-ink`,`transition-colors duration-(--duration-fast) ease-standard`,`hover:not-focus:border-ink-secondary focus:border-ink`,t)}):/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:`font-bold`,children:M(O)}),/* @__PURE__ */ s(`span`,{"aria-hidden":`true`,className:`font-medium text-ink-secondary`,children:`/ ${M(w)}`})]}),/* @__PURE__ */ s(a,{variant:`accent`,size:u[_],"aria-label":y,disabled:O>=w,onClick:()=>N(O+1),className:L,children:/* @__PURE__ */ s(i,{})})]})}export{f as Pagination};

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

@@ -0,0 +1,3 @@
+
+import { Pagination, PaginationProps, PaginationSize } from "./Pagination.js";
+export { Pagination, type PaginationProps, type PaginationSize };

package/dist/components/panel/Panel.d.ts

@@ -0,0 +1,36 @@
+
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/panel/Panel.d.ts
+export type PanelProps = ComponentProps<"div"> & {
+  /** 1px 描边，默认有。关掉后只靠底色差分层 */
+  bordered?: boolean;
+};
+/** 围住一组信息的容器：直角、底色只比页面差一档、没有阴影。不要面板套面板。 */
+export declare function Panel({ bordered, className, ...props }: PanelProps): import("react").JSX.Element;
+export type PanelHeaderVariant = "band" | "line";
+export type PanelHeaderProps = Omit<ComponentProps<"div">, "title"> & {
+  /**
+   * - `band` 反转的横带 + 左端短竖条，默认。它是一个 `data-theme="inverse"` 的
+   *   局部主题：里面的按钮、标签、焦点环都按这条带子的底色取值；
+   * - `line` 只有一条细线和小标题，更轻。同一个界面选一种。
+   */
+  variant?: PanelHeaderVariant;
+  /** 标题右侧的计数或一个小操作 */
+  extra?: ReactNode;
+  /** 标题层级，默认 3（`<h3>`） */
+  level?: 2 | 3 | 4 | 5 | 6;
+};
+export declare function PanelHeader({ variant, extra, level, className, children, ...props }: PanelHeaderProps): import("react").JSX.Element;
+export type PanelBodyProps = ComponentProps<"div">;
+export declare function PanelBody({ className, ...props }: PanelBodyProps): import("react").JSX.Element;
+export type PanelRowsProps = ComponentProps<"dl">;
+/** 属性行的容器。里面只放 `PanelRow`。 */
+export declare function PanelRows({ className, ...props }: PanelRowsProps): import("react").JSX.Element;
+export type PanelRowProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 属性名，左对齐 */
+  label: ReactNode;
+  /** 属性值，右对齐、等宽、加粗 */
+  children: ReactNode;
+};
+export declare function PanelRow({ label, children, className, ...props }: PanelRowProps): import("react").JSX.Element;
+//#endregion

package/dist/components/panel/Panel.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({bordered:n=!0,className:r,...i}){return/* @__PURE__ */ t(`div`,{...i,className:e(`bg-surface-raised text-ink`,n&&`border border-line`,r)})}function i({variant:r=`band`,extra:i,level:a=3,className:o,children:s,...c}){let l=`h${a}`;return/* @__PURE__ */ n(`div`,{"data-theme":r===`band`?`inverse`:void 0,...c,className:e(`relative flex items-center justify-between gap-3 px-4 text-sm font-medium text-ink`,r===`band`?`min-h-8 bg-surface`:`min-h-10 border-b border-line`,o),children:[r===`band`&&/* @__PURE__ */ t(`span`,{"aria-hidden":`true`,className:`absolute top-1/2 left-0 h-4 w-1 -translate-y-1/2 bg-accent-ink`}),/* @__PURE__ */ t(l,{className:`min-w-0 truncate`,children:s}),i&&/* @__PURE__ */ t(`div`,{className:`flex shrink-0 items-center gap-2`,children:i})]})}function a({className:n,...r}){return/* @__PURE__ */ t(`div`,{...r,className:e(`p-4`,n)})}function o({className:n,...r}){return/* @__PURE__ */ t(`dl`,{...r,className:e(`px-4`,n)})}function s({label:r,children:i,className:a,...o}){return/* @__PURE__ */ n(`div`,{...o,className:e(`flex items-baseline justify-between gap-4 border-b border-line py-2.5 last:border-b-0`,a),children:[/* @__PURE__ */ t(`dt`,{className:`text-sm text-ink-secondary`,children:r}),/* @__PURE__ */ t(`dd`,{className:`text-right font-tech text-sm font-bold text-ink tabular-nums`,children:i})]})}export{r as Panel,a as PanelBody,i as PanelHeader,s as PanelRow,o as PanelRows};

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

@@ -0,0 +1,3 @@
+
+import { Panel, PanelBody, PanelBodyProps, PanelHeader, PanelHeaderProps, PanelHeaderVariant, PanelProps, PanelRow, PanelRowProps, PanelRows, PanelRowsProps } from "./Panel.js";
+export { Panel, PanelBody, type PanelBodyProps, PanelHeader, type PanelHeaderProps, type PanelHeaderVariant, type PanelProps, PanelRow, type PanelRowProps, PanelRows, type PanelRowsProps };

package/dist/components/play-button/PlayButton.d.ts

@@ -0,0 +1,20 @@
+
+import { ComponentProps } from "react";
+//#region src/components/play-button/PlayButton.d.ts
+export type PlayMarkSize = "sm" | "md" | "lg";
+export type PlayMarkProps = Omit<ComponentProps<"span">, "children"> & {
+  size?: PlayMarkSize;
+};
+/**
+ * 播放记号：只是一个记号，不能点，对读屏隐藏。
+ * 整张卡已经是一个链接时用它（媒体卡的 `video`）；要它自己能点用 `PlayButton`。
+ */
+export declare function PlayMark({ size, className, ...props }: PlayMarkProps): import("react").JSX.Element;
+export type PlayButtonProps = Omit<ComponentProps<"button">, "children" | "aria-label"> & {
+  /** 默认"播放"。一页有好几个时写明播的是什么 */
+  "aria-label"?: string;
+  size?: PlayMarkSize;
+};
+/** 播放钮：和播放记号同一个画法的按钮，给"点了就在原地播放"的封面用。 */
+export declare function PlayButton({ "aria-label": ariaLabel, size, type, disabled, className, ...props }: PlayButtonProps): import("react").JSX.Element;
+//#endregion

package/dist/components/play-button/PlayButton.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{TriangleRight as n}from"../../icons/TriangleRight.js";import{jsx as r}from"react/jsx-runtime";const i={sm:`size-6 [&_svg]:size-3`,md:`size-8 [&_svg]:size-4`,lg:`size-10 [&_svg]:size-5`},a=`inline-flex shrink-0 items-center justify-center rounded-xs bg-action text-on-action`;function o({size:t=`md`,className:o,...s}){return/* @__PURE__ */ r(`span`,{"aria-hidden":`true`,...s,"data-size":t,className:e(a,i[t],o),children:/* @__PURE__ */ r(n,{})})}function s({"aria-label":o=`播放`,size:s=`md`,type:c=`button`,disabled:l=!1,className:u,...d}){return/* @__PURE__ */ r(`button`,{...d,type:c,disabled:l,"aria-label":o,"data-size":s,className:e(`group relative`,a,i[s],`transition-colors duration-(--duration-fast) ease-standard`,t,s===`sm`&&`after:absolute after:-inset-2 after:content-['']`,l?`cursor-not-allowed bg-disabled text-on-disabled`:`active:bg-action-pressed`,u),children:/* @__PURE__ */ r(n,{className:e(`transition-[translate] duration-(--duration-base) ease-standard`,!l&&`group-hover:translate-x-0.5 group-active:translate-x-0.5`)})})}export{s as PlayButton,o as PlayMark};

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

@@ -0,0 +1,3 @@
+
+import { PlayButton, PlayButtonProps, PlayMark, PlayMarkProps, PlayMarkSize } from "./PlayButton.js";
+export { PlayButton, type PlayButtonProps, PlayMark, type PlayMarkProps, type PlayMarkSize };

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,36 @@
+
+import { ComponentProps, ReactElement, ReactNode } from "react";
+//#region src/components/popover/Popover.d.ts
+export type PopoverSide = "top" | "bottom" | "left" | "right";
+export type PopoverAlign = "start" | "center" | "end";
+export type PopoverProps = Omit<ComponentProps<"div">, "title" | "children" | "className" | "style"> & {
+  /** 触发按钮 */
+  trigger: ReactElement<Record<string, unknown>>;
+  /** 标题。有它时它就是面板的可访问名称；没有时自己传 `aria-label` */
+  title?: ReactNode;
+  /** 标题下的一行说明，会关联给读屏 */
+  description?: ReactNode;
+  /** 面板出现在触发按钮的哪一侧，放不下时自动翻到对面。默认 `bottom` */
+  side?: PopoverSide;
+  /** 和触发按钮的哪一边对齐。默认 `start` */
+  align?: PopoverAlign;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 给面板 */
+  className?: string;
+  children?: ReactNode;
+};
+/**
+ * 气泡卡片：点击触发、里面可以操作的一小块面板。不是模态——页面其余部分照常可用，
+ * 点别处、按 `Esc`、焦点移出去都会关。只是一句说明用 `Tooltip`，
+ * 必须做完才能继续的用 `Dialog`。
+ */
+export declare function Popover({ trigger, title, description, side, align, open, defaultOpen, onOpenChange, className, children, ...props }: PopoverProps): import("react").JSX.Element;
+export type PopoverCloseProps = {
+  /** 点了就关掉面板的按钮，比如"完成" */
+  children: ReactElement<Record<string, unknown>>;
+};
+/** 包住面板里"点了就关"的按钮。 */
+export declare function PopoverClose({ children }: PopoverCloseProps): import("react").JSX.Element;
+//#endregion

package/dist/components/popover/Popover.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"./panel-style.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Popover as a}from"@base-ui/react/popover";function o({trigger:o,title:s,description:c,side:l=`bottom`,align:u=`start`,open:d,defaultOpen:f,onOpenChange:p,className:m,children:h,...g}){let{anchorRef:_,portalRef:v}=t();return/* @__PURE__ */ i(a.Root,{open:d,defaultOpen:f,onOpenChange:p&&(e=>p(e)),children:[/* @__PURE__ */ r(a.Trigger,{ref:_,render:o}),/* @__PURE__ */ r(a.Portal,{ref:v,children:/* @__PURE__ */ r(a.Positioner,{side:l,align:u,sideOffset:4,className:`z-(--z-overlay) outline-none`,children:/* @__PURE__ */ i(a.Popup,{...g,className:e(n,m),children:[(s||c)&&/* @__PURE__ */ i(`div`,{className:`flex flex-col gap-1`,children:[s&&/* @__PURE__ */ r(a.Title,{className:`text-base font-bold`,children:s}),c&&/* @__PURE__ */ r(a.Description,{className:`text-ink-secondary`,children:c})]}),h]})})})]})}function s({children:e}){return/* @__PURE__ */ r(a.Close,{render:e})}export{o as Popover,s as PopoverClose};

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

@@ -0,0 +1,3 @@
+
+import { Popover, PopoverAlign, PopoverClose, PopoverCloseProps, PopoverProps, PopoverSide } from "./Popover.js";
+export { Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, type PopoverProps, type PopoverSide };

package/dist/components/popover/panel-style.js

@@ -0,0 +1,2 @@
+"use client";
+import{menuPanel as e}from"../dropdown-menu/menu-style.js";const t=[e,`flex w-max max-w-[min(20rem,var(--available-width))] flex-col gap-3 p-4 text-sm wrap-anywhere`],n=`text-base font-bold`,r=`text-ink-secondary`;export{r as popoverDescription,t as popoverPanel,n as popoverTitle};