@openviking/react 0.1.2 → 0.1.3

package/dist/shared/components/resizable/clamp.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 把宽度夹到 `[min, max]` 之间，并取整。
+ *
+ * 上限可能小于下限——容器被压得很窄时就会这样。此时以下限为准：面板宁可把
+ * 邻居挤小，也不该缩到看不见内容。
+ *
+ * Clamps a width into `[min, max]` and rounds it.
+ *
+ * The maximum can fall below the minimum when the container is squeezed hard. The
+ * minimum wins then: a panel may crowd its neighbour rather than shrink until
+ * nothing is readable.
+ */
+export declare function clampResizableWidth(width: number, min: number, max: number): number;

package/dist/shared/components/resizable/index.d.ts

@@ -0,0 +1,2 @@
+export { ResizableHandle, clampResizableWidth } from './resizable-handle.js';
+export type { ResizableHandleProps, ResizeDirection, } from './resizable-handle.js';

package/dist/shared/components/resizable/resizable-handle.d.ts

@@ -0,0 +1,25 @@
+import type { ResizableHandleProps } from './types.js';
+export type { ResizableHandleProps, ResizeDirection } from './types.js';
+export { clampResizableWidth } from './clamp.js';
+/**
+ * 一条可拖拽的分隔条，用来改相邻面板的宽度。
+ *
+ * 宽度是受控的：组件只上报夹取后的新值，面板多宽由调用方决定。拖动期间用
+ * 指针捕获接住后续事件，因此不需要往 `window` 上挂监听，也不留全局副作用
+ * ——`preventDefault` 已经挡住拖动引起的文字选中。方向键同样能改宽，键盘用户
+ * 不必依赖指针。
+ *
+ * 省略 `onResize` 时退化成一根装饰线：不可拖动、不可聚焦，也不播报宽度。
+ *
+ * A draggable divider that resizes the neighbouring panel.
+ *
+ * The width is controlled: this only reports a clamped new value and the caller
+ * decides how wide the panel is. Pointer capture receives the rest of the drag, so
+ * nothing is bound to `window` and no global state is touched — `preventDefault`
+ * already stops the drag from selecting text. The arrow keys resize too, so a
+ * keyboard user never needs a pointer.
+ *
+ * Without `onResize` it degrades to a decorative rule: not draggable, not
+ * focusable, and it announces no width.
+ */
+export declare function ResizableHandle({ label, min, max, value, step, direction, onResize, className, ...rest }: ResizableHandleProps): import("react").JSX.Element;

package/dist/shared/components/resizable/types.d.ts

@@ -0,0 +1,48 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * 拖动方向：向右拖动让面板变宽为 `1`，变窄为 `-1`。
+ *
+ * 面板在分隔条左侧时用 `1`，在右侧时用 `-1`，否则往右拖反而变小。
+ *
+ * Drag direction: `1` widens the panel as the pointer moves right, `-1` narrows
+ * it. A panel left of the divider uses `1`, one on its right uses `-1`; the
+ * wrong sign makes a rightward drag shrink the panel.
+ */
+export type ResizeDirection = 1 | -1;
+/**
+ * 分隔条的属性。
+ *
+ * 它是一个 `role="separator"` 的可聚焦控件：拖动改宽，左右方向键也能改，屏幕
+ * 阅读器通过 `aria-valuenow` 读到当前宽度。宽度本身由调用方持有，这里只上报
+ * 夹取后的新值——面板多宽属于布局，不属于分隔条。
+ *
+ * Props of the divider.
+ *
+ * It is a focusable `role="separator"` control: drag to resize, or use the left
+ * and right arrow keys, with a screen reader reading the current width from
+ * `aria-valuenow`. The width itself belongs to the caller; this only reports the
+ * clamped new value, because how wide a panel is is layout, not a divider's own
+ * state.
+ */
+export interface ResizableHandleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'defaultValue'> {
+    /** 无障碍名称，例如「调整目录树宽度」。 Accessible name, such as "Resize the directory tree". */
+    label: string;
+    /** 最小宽度，单位像素。 Minimum width in pixels. */
+    min: number;
+    /** 最大宽度，单位像素。 Maximum width in pixels. */
+    max: number;
+    /** 当前宽度，单位像素。 Current width in pixels. */
+    value: number;
+    /** 方向键每次调整的像素数，缺省 16。 Pixels per arrow-key press, 16 by default. */
+    step?: number;
+    /** 拖动方向，缺省 `1`。 Drag direction, `1` by default. */
+    direction?: ResizeDirection;
+    /**
+     * 拖动或按键产生新宽度时触发，参数已夹到 `[min, max]`。省略时分隔条只作为
+     * 装饰线存在，不可拖动也不可聚焦。
+     *
+     * Fires with a new width already clamped to `[min, max]`. Omitting it leaves the
+     * divider as a decorative rule: not draggable and not focusable.
+     */
+    onResize?: (width: number) => void;
+}

package/dist/shared/components/tooltip/types.d.ts

@@ -1,11 +1,11 @@
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { OverlayPlacement } from '../overlay/types.js';
 /**
- * 浮层相对触发元素的方位。空间不足时会自动翻到对侧。
- *
- * Where the surface sits relative to its trigger. It flips to the opposite side
- * when there is not enough room.
+ * 提示相对触发元素的方位，与浮层共用一套取值。空间不足时自动翻到对侧。
+ * Where the hint sits relative to its trigger, sharing the overlay's values. It
+ * flips to the opposite side when there is not enough room.
  */
-export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipPlacement = OverlayPlacement;
 /**
  * 触发方式。`hover` 悬停与聚焦都展示，适合按钮提示；`click` 点击切换，
  * 适合放可交互的内容。