@endfield-ui/react 0.1.0 → 0.2.0

package/src/components/image-viewer/index.ts

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

package/src/components/item-slot/ItemSlot.tsx

@@ -33,6 +33,7 @@ type OwnProps = {
   /** 右上角的小圆位：已装备者的头像 */
   badge?: ReactNode;
   /** 售罄 / 不可用：整卡压一层遮罩。传文字（"售罄"）会写在遮罩上 */
+  // oxlint-disable-next-line typescript/no-redundant-type-constituents -- ReactNode 本来就含 boolean，写出来是让人一眼看到两种用法
   unavailable?: boolean | ReactNode;
   /** 传了就整格渲染成链接 */
   href?: string;

package/src/components/otp-input/OtpInput.tsx

@@ -0,0 +1,211 @@
+import { OTPField as BaseOtpField } from "@base-ui/react/otp-field";
+import { Fragment, useId, type ComponentProps } from "react";
+import { cn } from "../../lib/cn";
+import { focusRing } from "../../lib/focus-ring";
+import { useFieldContext, useFieldControl } from "../field/Field";
+import type { ControlSize, ControlVariant } from "../input/control-box";
+
+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;
+};
+
+/* 格子见方；容器窄了宽度可以让，高度不变 */
+const slotSize: Record<ControlSize, string> = {
+  sm: "h-8 w-8 text-base",
+  md: "h-10 w-10 text-lg",
+  lg: "h-14 w-14 text-2xl",
+};
+
+const slotFrame: Record<ControlVariant, string> = {
+  sunken: "border-b-2",
+  outline: "border",
+};
+
+const slotFill: Record<ControlVariant, string> = {
+  sunken: "bg-surface-sunken",
+  outline: "bg-surface",
+};
+
+const gapClass: Record<ControlSize, string> = {
+  sm: "gap-1.5",
+  md: "gap-2",
+  lg: "gap-2",
+};
+
+const defaultSlotLabel = (position: number, length: number) =>
+  `第 ${position} 位，共 ${length} 位`;
+
+const toUpperCase = (value: string) => value.toUpperCase();
+
+/**
+ * 验证码输入：一格一位的短码。每一格是一个真的输入框——打一位跳一格，
+ * 粘贴一整串会分到各格，整组在 Tab 顺序里只停一次。
+ *
+ * 每个都要有标签：放进 `Field`，或者自己传 `aria-label`。
+ * `className` 与 `ref` 给外面那一排。
+ */
+export function OtpInput({
+  length = 6,
+  value,
+  defaultValue,
+  onValueChange,
+  onComplete,
+  type = "numeric",
+  uppercase = false,
+  mask = false,
+  groupSize,
+  size = "md",
+  variant = "sunken",
+  invalid: invalidProp,
+  id: idProp,
+  disabled: disabledProp,
+  required: requiredProp,
+  readOnly = false,
+  name,
+  form,
+  autoSubmit = false,
+  autoFocus = false,
+  slotLabel = defaultSlotLabel,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": describedByProp,
+  className,
+  ...props
+}: OtpInputProps) {
+  const fieldContext = useFieldContext();
+  const { id, disabled, required, invalid, ...field } = useFieldControl({
+    id: idProp,
+    disabled: disabledProp,
+    required: requiredProp,
+    invalid: invalidProp,
+    "aria-describedby": describedByProp,
+  });
+  const describedBy = field["aria-describedby"];
+
+  // 基元不认第一格上的 aria-label（它要一个真的标签）：自己传名称时，
+  // 把它写成一段隐藏的文字，让第一格和整组都指过去
+  const labelId = useId();
+  const ownLabel = ariaLabelledBy ?? (ariaLabel ? labelId : undefined);
+  const groupLabel = ownLabel ?? fieldContext?.labelId;
+
+  const slotClass = cn(
+    "min-w-0 shrink text-center font-tech font-medium tabular-nums text-ink caret-ink",
+    "transition-colors duration-(--duration-fast) ease-standard",
+    focusRing,
+    slotSize[size],
+    slotFrame[variant],
+    readOnly
+      ? // 只读：没有边线、底变透明。边线留透明的，尺寸不跳
+        "border-transparent bg-transparent"
+      : slotFill[variant],
+    disabled
+      ? "cursor-not-allowed border-line text-ink-disabled"
+      : invalid
+        ? "border-danger"
+        : !readOnly &&
+          // 悬停只在没聚焦时生效：聚焦中的格子不会因为鼠标经过而变浅
+          "border-line-strong hover:not-focus:border-ink-secondary focus:border-ink",
+  );
+
+  const group = groupSize !== undefined && groupSize > 0 ? groupSize : 0;
+
+  return (
+    <BaseOtpField.Root
+      {...props}
+      id={id}
+      length={length}
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange && ((next) => onValueChange(next))}
+      onValueComplete={onComplete && ((next) => onComplete(next))}
+      validationType={type}
+      normalizeValue={uppercase ? toUpperCase : undefined}
+      mask={mask}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+      name={name}
+      form={form}
+      autoSubmit={autoSubmit}
+      aria-labelledby={groupLabel}
+      aria-describedby={describedBy}
+      data-size={size}
+      data-variant={variant}
+      data-invalid={invalid ? "" : undefined}
+      className={cn(
+        // 不许比容器宽：放在"靠左对齐"的弹性容器里时它是按内容定宽的，
+        // 没有这一条格子就不会收窄，而是整排伸出去
+        "flex max-w-full min-w-0 items-center",
+        gapClass[size],
+        className,
+      )}
+    >
+      {ariaLabel && !ariaLabelledBy && (
+        <span id={labelId} hidden>
+          {ariaLabel}
+        </span>
+      )}
+      {Array.from({ length }, (_, index) => (
+        <Fragment key={index}>
+          {group > 0 && index > 0 && index % group === 0 && (
+            <span
+              aria-hidden="true"
+              data-separator=""
+              className="h-0.5 w-2 shrink-0 bg-line-strong"
+            />
+          )}
+          <BaseOtpField.Input
+            // 第一格的名称是字段的标签（或者上面那段隐藏的文字），说明文字也挂在它上面
+            {...(index === 0
+              ? { "aria-labelledby": ownLabel, "aria-describedby": describedBy }
+              : { "aria-label": slotLabel(index + 1, length) })}
+            aria-invalid={invalid || undefined}
+            autoFocus={autoFocus && index === 0}
+            autoCapitalize={uppercase ? "characters" : "none"}
+            className={slotClass}
+          />
+        </Fragment>
+      ))}
+    </BaseOtpField.Root>
+  );
+}

package/src/components/otp-input/index.ts

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

package/src/components/page-header/PageHeader.tsx

@@ -0,0 +1,182 @@
+import type { ComponentProps, MouseEvent, ReactNode } from "react";
+import { ArrowLeft } from "../../icons/ArrowLeft";
+import { cn } from "../../lib/cn";
+import { focusRing } from "../../lib/focus-ring";
+import { LinkElement, type LinkRender } from "../link-element/LinkElement";
+
+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;
+  /** 标题下面的一行：页签、几个统计块 */
+  children?: ReactNode;
+};
+
+/**
+ * 页头：这是哪一页、怎么回去、在这一页能做什么。一页一个。
+ * 按自身的宽度响应：行动区放不下时折到标题下面。
+ */
+export function PageHeader({
+  title,
+  level = 1,
+  meta,
+  description,
+  breadcrumb,
+  back,
+  actions,
+  divider = false,
+  sticky = false,
+  className,
+  children,
+  ...props
+}: PageHeaderProps) {
+  const Heading = `h${level}` as const;
+
+  return (
+    <header
+      {...props}
+      data-sticky={sticky ? "" : undefined}
+      className={cn(
+        "@container flex flex-col gap-4 text-ink",
+        divider && !sticky && "border-b border-line pb-6",
+        sticky &&
+          "sticky top-0 z-(--z-float) border-b border-line bg-surface py-4",
+        className,
+      )}
+    >
+      {breadcrumb}
+      <div className="flex flex-col gap-1">
+        {meta && <p className="font-tech text-xs text-ink-secondary">{meta}</p>}
+        <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-4">
+          {/* 标题这一组至少留 16rem：行动区挤不进来就整块折下去，而不是把标题挤成一个字一行 */}
+          <div className="flex min-w-0 flex-1 basis-64 items-start gap-4">
+            {/*
+             * 标题的一行是 40px 高（宽了是 48px）。返回和行动区各放在同样高的一格里居中，
+             * 所以它们对的是标题的第一行——标题折成几行、下面有没有说明都一样
+             */}
+            {back && (
+              <div className="flex h-10 shrink-0 items-center @md:h-12">
+                {back}
+              </div>
+            )}
+            <div className="flex min-w-0 flex-col gap-1">
+              <Heading className="min-w-0 text-2xl leading-10 font-bold wrap-anywhere @md:text-3xl @md:leading-12">
+                {title}
+              </Heading>
+              {description && (
+                <p className="max-w-prose text-sm text-ink-secondary">
+                  {description}
+                </p>
+              )}
+            </div>
+          </div>
+          {actions && (
+            <div
+              data-actions=""
+              className="flex min-h-10 flex-wrap items-center gap-2 @md:min-h-12"
+            >
+              {actions}
+            </div>
+          )}
+        </div>
+      </div>
+      {children}
+    </header>
+  );
+}
+
+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 function PageHeaderBack({
+  "aria-label": label = "返回",
+  href,
+  target,
+  rel,
+  render,
+  onClick,
+  disabled = false,
+  className,
+  ...props
+}: PageHeaderBackProps) {
+  const classes = cn(
+    "relative inline-flex size-10 shrink-0 items-center justify-center",
+    "transition-colors duration-(--duration-fast) ease-standard",
+    focusRing,
+    disabled
+      ? "cursor-not-allowed bg-disabled text-on-disabled"
+      : // 有意不随主题翻转：和 back 按钮是同一块深灰
+        "hatch hatch-mid bg-control text-white shadow-xs hover:bg-neutral-600 active:bg-control-pressed",
+    className,
+  );
+  const icon = <ArrowLeft size={20} />;
+
+  if (href !== undefined || render !== undefined) {
+    return (
+      <LinkElement
+        render={render}
+        // 禁用的链接去掉 href，保留 link 角色，让读屏仍能读出"不可用"
+        href={disabled ? undefined : href}
+        role={disabled ? "link" : undefined}
+        aria-disabled={disabled || undefined}
+        aria-label={label}
+        target={target}
+        rel={rel}
+        onClick={disabled ? (event) => event.preventDefault() : onClick}
+        data-page-header-back=""
+        className={classes}
+      >
+        {icon}
+      </LinkElement>
+    );
+  }
+
+  return (
+    <button
+      {...props}
+      type="button"
+      aria-label={label}
+      disabled={disabled}
+      onClick={onClick}
+      data-page-header-back=""
+      className={classes}
+    >
+      {icon}
+    </button>
+  );
+}

package/src/components/page-header/index.ts

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

package/src/components/popover/Popover.tsx

@@ -2,7 +2,7 @@ import { Popover as BasePopover } from "@base-ui/react/popover";
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { usePortalScope } from "../../hooks/usePortalScope";
 import { cn } from "../../lib/cn";
-import { menuPanel } from "../dropdown-menu/menu-style";
+import { popoverDescription, popoverPanel, popoverTitle } from "./panel-style";
 
 export type PopoverSide = "top" | "bottom" | "left" | "right";
 export type PopoverAlign = "start" | "center" | "end";
@@ -63,24 +63,16 @@ export function Popover({
           sideOffset={4}
           className="z-(--z-overlay) outline-none"
         >
-          <BasePopover.Popup
-            {...props}
-            className={cn(
-              menuPanel,
-              // 面板和下拉菜单是同一份画法，只把上下 4px 的内边距换成四周 16px
-              "flex w-max max-w-[min(20rem,var(--available-width))] flex-col gap-3 p-4 text-sm wrap-anywhere",
-              className,
-            )}
-          >
+          <BasePopover.Popup {...props} className={cn(popoverPanel, className)}>
             {(title || description) && (
               <div className="flex flex-col gap-1">
                 {title && (
-                  <BasePopover.Title className="text-base font-bold">
+                  <BasePopover.Title className={popoverTitle}>
                     {title}
                   </BasePopover.Title>
                 )}
                 {description && (
-                  <BasePopover.Description className="text-ink-secondary">
+                  <BasePopover.Description className={popoverDescription}>
                     {description}
                   </BasePopover.Description>
                 )}

package/src/components/popover/panel-style.ts

@@ -0,0 +1,15 @@
+import { menuPanel } from "../dropdown-menu/menu-style";
+
+/**
+ * 气泡卡片与悬浮卡共用的面板：下拉菜单的那一块，只把上下 4px 的内边距换成四周 16px。
+ * 宽度跟着内容走，最宽 320px，也不超过视口里剩下的地方。
+ * 要经过 `cn()`：后面的 `p-4` 要盖掉菜单面板自带的上下内边距
+ */
+export const popoverPanel = [
+  menuPanel,
+  "flex w-max max-w-[min(20rem,var(--available-width))] flex-col gap-3 p-4 text-sm wrap-anywhere",
+];
+
+/** 面板里的标题和它下面的一行说明 */
+export const popoverTitle = "text-base font-bold";
+export const popoverDescription = "text-ink-secondary";

package/src/components/scroll-area/ScrollArea.tsx

@@ -0,0 +1,137 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type { ComponentProps, CSSProperties, Ref } from "react";
+import { cn } from "../../lib/cn";
+import { focusRingInset } from "../../lib/focus-ring";
+
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+
+export type ScrollAreaProps = Omit<
+  ComponentProps<"div">,
+  "aria-label" | "className" | "style" | "ref"
+> & {
+  /** 这一块是什么。能滚的时候它是一个能聚焦的区域，读屏听到的就是这个名称 */
+  "aria-label": string;
+  /** 哪个方向能滚，默认 `vertical`。只管一个方向时，另一个方向滚不了 */
+  orientation?: ScrollAreaOrientation;
+  /** 真正在滚的那个元素：给页内目录、回到顶部的 `target` */
+  viewportRef?: Ref<HTMLDivElement>;
+  /** 给外框：高度或者高度上限写在这里 */
+  className?: string;
+  style?: CSSProperties;
+  /** 给外框 */
+  ref?: Ref<HTMLDivElement>;
+};
+
+/*
+ * 滚动条：12px 宽的一条是能抓、能点的范围；正中一条 1px 的轨，
+ * 滑块是压在轨上的一段 3px 的粗条——和页内目录、侧轨二级的引线是同一个画法
+ */
+const barClass: Record<"vertical" | "horizontal", string> = {
+  vertical:
+    "w-3 before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-line",
+  horizontal:
+    "h-3 before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-line",
+};
+
+const thumbClass: Record<"vertical" | "horizontal", string> = {
+  vertical:
+    "w-full before:inset-y-0 before:left-1/2 before:w-[3px] before:-translate-x-1/2",
+  horizontal:
+    "h-full before:inset-x-0 before:top-1/2 before:h-[3px] before:-translate-y-1/2",
+};
+
+function Scrollbar({
+  orientation,
+}: {
+  orientation: "vertical" | "horizontal";
+}) {
+  return (
+    <BaseScrollArea.Scrollbar
+      orientation={orientation}
+      className={cn("group/bar flex", barClass[orientation])}
+    >
+      <BaseScrollArea.Thumb
+        className={cn(
+          "relative before:absolute before:bg-ink-secondary before:content-['']",
+          "before:transition-colors before:duration-(--duration-fast) before:ease-standard",
+          "group-hover/bar:before:bg-ink active:before:bg-ink",
+          // 高对比模式下背景色会被系统拿掉：换成系统的文字色，滑块才看得见
+          "forced-colors:before:bg-[CanvasText]",
+          thumbClass[orientation],
+        )}
+      />
+    </BaseScrollArea.Scrollbar>
+  );
+}
+
+/**
+ * 滚动区：一块自己能滚的区域，滚动条是画出来的。高度（或高度上限）由 `className` 给。
+ * 只有真的溢出时才有滚动条，也才是一个能聚焦的区域。
+ *
+ * 整页的滚动留给浏览器，不要把页面主体包进来。
+ * `className` 与 `ref` 给外框，其余属性（`onScroll` 等）给真正在滚的可视区。
+ */
+export function ScrollArea({
+  "aria-label": label,
+  orientation = "vertical",
+  viewportRef,
+  className,
+  style,
+  ref,
+  children,
+  ...props
+}: ScrollAreaProps) {
+  const vertical = orientation !== "horizontal";
+  const horizontal = orientation !== "vertical";
+
+  return (
+    <BaseScrollArea.Root
+      ref={ref}
+      style={style}
+      data-scroll-area=""
+      data-orientation={orientation}
+      // 给了高度上限时内容短就跟着矮：外框是一个竖排的弹性容器，可视区在里面收缩
+      className={cn("flex min-h-0 min-w-0 flex-col text-ink", className)}
+    >
+      <BaseScrollArea.Viewport
+        {...props}
+        ref={viewportRef}
+        // 不管的那个方向不让滚（基元默认两个方向都是 scroll）
+        style={
+          orientation === "vertical"
+            ? { overflowX: "hidden" }
+            : orientation === "horizontal"
+              ? { overflowY: "hidden" }
+              : undefined
+        }
+        className={cn(
+          "min-h-0 flex-auto",
+          focusRingInset,
+          // 溢出的那一侧让出滚动条的位置，内容不会被压住。让的是可视区自己的外边距：
+          // 写成内边距的话，它在滚动容器里是"滚到头才有的留白"，途中内容照样被压住
+          vertical && "data-has-overflow-y:mr-3",
+          horizontal && "data-has-overflow-x:mb-3",
+        )}
+        render={(viewportProps, state) => {
+          const scrollable =
+            (vertical && state.hasOverflowY) ||
+            (horizontal && state.hasOverflowX);
+          return (
+            <div
+              {...viewportProps}
+              // 只有真的能滚时才是一个有名称、能聚焦的区域：键盘要能滚它，
+              // 但不溢出的时候不该白占一个 Tab 停靠点
+              {...(scrollable && { role: "region", "aria-label": label })}
+              tabIndex={scrollable ? 0 : -1}
+            />
+          );
+        }}
+      >
+        <BaseScrollArea.Content>{children}</BaseScrollArea.Content>
+      </BaseScrollArea.Viewport>
+      {vertical && <Scrollbar orientation="vertical" />}
+      {horizontal && <Scrollbar orientation="horizontal" />}
+      {orientation === "both" && <BaseScrollArea.Corner />}
+    </BaseScrollArea.Root>
+  );
+}

package/src/components/scroll-area/index.ts

@@ -0,0 +1,5 @@
+export {
+  ScrollArea,
+  type ScrollAreaOrientation,
+  type ScrollAreaProps,
+} from "./ScrollArea";

package/src/components/table/Table.tsx

@@ -313,6 +313,7 @@ function DetailRow({
   const [measured, setMeasured] = useState<number | null>(null);
 
   // 每次渲染都重新数：列是使用方的，随时可能多一列少一列
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- 不写依赖是有意的；数出来没变时 setMeasured 不会再引出一次渲染
   useLayoutEffect(() => {
     const row = rowRef.current;
     if (!row) return;

package/src/components/tag-input/TagInput.tsx

@@ -287,6 +287,7 @@ export function TagInput({
     onKeyDown?.(event);
     if (event.defaultPrevented || readOnly) return;
     // 输入法正在组字时的回车是在选字，不是提交
+    // oxlint-disable-next-line typescript/no-deprecated -- Safari 上确认选字的那一下回车，isComposing 已经是 false，只有 keyCode 还是 229
     if (event.nativeEvent.isComposing || event.keyCode === 229) return;
     const input = event.currentTarget;
 

package/src/components/toc/Toc.tsx

@@ -99,6 +99,7 @@ export function Toc({
       return active;
     },
     // count 没在里面用到：它变了这个函数就换一个，滚动的监听跟着重新接、重新算一次
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     [target, offset, count],
   );
   const spied = useScrollPosition<string | null>(target, read, null);

package/src/index.ts

@@ -28,7 +28,9 @@ export * from "./components/flyout-bar";
 export * from "./components/ghost-text";
 export * from "./components/hatch";
 export * from "./components/hazard-stripe";
+export * from "./components/hover-card";
 export * from "./components/icon-button";
+export * from "./components/image-viewer";
 export * from "./components/input";
 export * from "./components/item-slot";
 export * from "./components/kbd";
@@ -39,6 +41,8 @@ export * from "./components/media-card";
 export * from "./components/nav-action";
 export * from "./components/nav-menu";
 export * from "./components/navigator";
+export * from "./components/otp-input";
+export * from "./components/page-header";
 export * from "./components/pagination";
 export * from "./components/panel";
 export * from "./components/play-button";
@@ -48,6 +52,7 @@ export * from "./components/radio";
 export * from "./components/rec-indicator";
 export * from "./components/registration-strip";
 export * from "./components/schedule";
+export * from "./components/scroll-area";
 export * from "./components/scroll-hint";
 export * from "./components/section-title";
 export * from "./components/segmented-control";