haze-ui 1.30.0 → 1.32.0

package/dist/types/hooks/useResizeObserver.d.ts

@@ -0,0 +1,48 @@
+import type { RefCallback } from 'react';
+type UseResizeObserverOptions = {
+    /**
+     * 触发时机盒子，同 ResizeObserver 的 box 选项（'content-box' |
+     * 'border-box' | 'device-pixel-content-box'）。默认 'content-box'。
+     */
+    box?: ResizeObserverBoxOptions;
+    /**
+     * 是否启用。默认 `true`；`false` 时快照冻结为最后一次观测值，
+     * 不建立观察器。
+     */
+    enabled?: boolean;
+};
+type UseResizeObserverResult = UseResizeObserverResultWithT;
+/**
+ * 底层 ResizeObserver 订阅原语：返回 ref + 最新 entry。
+ *
+ * ```tsx
+ * const [ref, entry] = useResizeObserver<HTMLDivElement>();
+ * const width = entry?.contentRect.width ?? 0;
+ * return <div ref={ref} style={{minWidth: 200}} />;
+ * ```
+ *
+ * - ref 每次指向新元素时自动解挂旧观察；卸载/禁用时只断开观察，
+ *   entry 保留最后一次值（冻结语义，与 useElementSize 的清零语义
+ *   相反——entry 是结构化快照，冻结便于消费方在禁用/卸载后仍读取
+ *   最后时刻的布局；size 是原始数据，清零更安全）。
+ * - ref 回调身份稳定（useCallback([box, enabled])）：React 19 对每个
+ *   新 ref 函数会 null-detach + re-attach，不记忆化会导致每渲染
+ *   disconnect + 重建观察器 + 重新 observe，而 ResizeObserver 每次
+ *   observe 后回调的都是新 entry 实例——setEntry 恒触发重渲染，形成
+ *   无限重渲染循环（jsdom 无 RO，测试测不出，真实浏览器直接卡死）。
+ * - enabled 切换无需 effect：true→false 由 ref 身份变化触发的
+ *   detach(null) 断开观察；false→true 由 re-attach(node) 重建观察。
+ * - SSR：不观察，entry 恒 `null`。
+ * - 引擎无 `ResizeObserver`（jsdom ≤23）：不抛错，entry 恒 `null`、
+ *   ref 是 no-op——消费端可以安全 mock/降级。
+ *
+ * @param options 见 {@link UseResizeObserverOptions}。
+ * @returns `[ref, entry]`：ref 挂上元素即开始观察；entry 为最后一次
+ *   通知的 ResizeObserverEntry，未观察/初次渲染为 `null`。
+ */
+type UseResizeObserverResultWithT<T extends Element = Element> = [
+    ref: RefCallback<T>,
+    entry: ResizeObserverEntry | null
+];
+export declare function useResizeObserver<T extends Element = Element>(options?: UseResizeObserverOptions): UseResizeObserverResultWithT<T>;
+export type { UseResizeObserverOptions, UseResizeObserverResult, UseResizeObserverResultWithT, };

package/dist/types/index.d.ts

@@ -10,14 +10,14 @@ export { motion, motionPresets } from './tokens/motion';
 export type { MotionPreset } from './tokens/motion';
 export { TOKEN_REGISTRY, COMPONENT_TOKENS } from './tokens/registry';
 export type { TokenDef } from './tokens/registry';
-export { gregoryAdapter, islamicUmalquraAdapter, getAdapter, formatInTimeZone, getZonedParts } from './dates';
+export { gregoryAdapter, islamicUmalquraAdapter, persianAdapter, hebrewAdapter, japaneseAdapter, buddhistAdapter, ethiopicAdapter, getAdapter, formatInTimeZone, getZonedParts, } from './dates';
 export type { HazeDateAdapter, CivilDateParts, HazeCalendarIdentifier, MonthNameStyle, ZonedParts, } from './dates';
 export { Button, ButtonLink, buttonVariants, buttonSizes } from './components/Button';
 export type { ButtonProps, ButtonLinkProps } from './components/Button';
 export { Input, InputCore } from './components/Input';
 export type { InputProps, InputCoreProps } from './components/Input';
 export { Select, Option, SelectCore, OptionGroup } from './components/Select';
-export type { SelectProps, OptionProps, SelectCoreProps, OptionGroupProps } from './components/Select';
+export type { SelectProps, SelectClassNames, OptionProps, SelectCoreProps, OptionGroupProps } from './components/Select';
 export { Checkbox, CheckboxCore } from './components/Checkbox';
 export type { CheckboxProps, CheckboxCoreProps } from './components/Checkbox';
 export { Switch, SwitchCore } from './components/Switch';
@@ -40,8 +40,8 @@ export { Textarea, TextareaCore } from './components/Textarea';
 export type { TextareaProps, TextareaCoreProps } from './components/Textarea';
 export { Slider, SliderCore } from './components/Slider';
 export type { SliderProps, SliderCoreProps } from './components/Slider';
-export { Tabs, TabList, Tab, TabPanel } from './components/Tabs';
-export type { TabsProps, TabsClassNames, TabListProps, TabProps, TabPanelProps, } from './components/Tabs';
+export { Tabs, TabList, Tab, TabPanel, SortableTabList } from './components/Tabs';
+export type { TabsProps, TabsClassNames, TabListProps, TabProps, TabPanelProps, TabStatus, SortableTabListProps, } from './components/Tabs';
 export { Accordion, AccordionItem } from './components/Accordion';
 export type { AccordionProps, AccordionItemProps, } from './components/Accordion';
 export { Alert } from './components/Alert';
@@ -73,7 +73,7 @@ export type { ToastProps, ToastContainerProps, ToastOptions, ToastVariant, Toast
 export { List, ListItem } from './components/List';
 export type { ListProps, ListItemProps } from './components/List';
 export { Combobox, ComboboxOption, ComboboxGroup } from './components/Combobox';
-export type { ComboboxProps, ComboboxOptionProps, ComboboxGroupProps, ComboboxOptionData, ComboboxVirtualizedConfig } from './components/Combobox';
+export type { ComboboxProps, ComboboxClassNames, ComboboxOptionProps, ComboboxGroupProps, ComboboxOptionData, ComboboxVirtualizedConfig } from './components/Combobox';
 export { Table, TableHead, TableBody, TableRow, TableCell, } from './components/Table';
 export type { TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableCellProps, } from './components/Table';
 export { Carousel, CarouselSlide } from './components/Carousel';
@@ -99,7 +99,7 @@ export type { PaginationProps } from './components/Pagination';
 export { Grid, GridItem } from './components/Grid';
 export type { GridProps, GridItemProps } from './components/Grid';
 export { Drawer } from './components/Drawer';
-export type { DrawerProps, DrawerHandle } from './components/Drawer';
+export type { DrawerProps, DrawerClassNames, DrawerHandle } from './components/Drawer';
 export { Stepper, Step } from './components/Stepper';
 export type { StepperProps, StepProps } from './components/Stepper';
 export { Command, CommandInput, CommandList, CommandItem, CommandGroup, CommandDialog } from './components/Command';
@@ -127,6 +127,8 @@ export { Ellipsis } from './components/Ellipsis';
 export type { EllipsisProps } from './components/Ellipsis';
 export { CountUp } from './components/CountUp';
 export type { CountUpProps } from './components/CountUp';
+export { Sparkline, sparklineToneStrokes, sparklineToneFills } from './components/Sparkline';
+export type { SparklineProps } from './components/Sparkline';
 export type { StatProps, StatGroupProps } from './components/Stat';
 export { Segmented, SegmentedCore } from './components/Segmented';
 export type { SegmentedProps, SegmentedCoreProps } from './components/Segmented';
@@ -164,8 +166,8 @@ export { Container } from './components/Container';
 export type { ContainerProps } from './components/Container';
 export { Banner } from './components/Banner';
 export type { BannerProps } from './components/Banner';
-export { ConfirmDialog } from './components/ConfirmDialog';
-export type { ConfirmDialogProps } from './components/ConfirmDialog';
+export { ConfirmDialog, confirm } from './components/ConfirmDialog';
+export type { ConfirmDialogProps, ConfirmOptions } from './components/ConfirmDialog';
 export { CodeBlock } from './components/CodeBlock';
 export type { CodeBlockProps, Highlighter } from './components/CodeBlock';
 export { AspectRatio } from './components/AspectRatio';
@@ -173,7 +175,7 @@ export type { AspectRatioProps } from './components/AspectRatio';
 export { VirtualList } from './components/VirtualList';
 export type { VirtualListProps, VirtualListHandle, VirtualListGroup, VirtualListAlign, VirtualListOrientation } from './components/VirtualList';
 export { TagGroup, TagGroupItem, SortableTagGroup } from './components/TagGroup';
-export type { TagGroupProps, TagGroupItemProps, SortableTagGroupProps } from './components/TagGroup';
+export type { TagGroupProps, TagGroupClassNames, TagGroupItemProps, SortableTagGroupProps } from './components/TagGroup';
 export { BottomSheet } from './components/BottomSheet';
 export type { BottomSheetProps, BottomSheetHandle } from './components/BottomSheet';
 export { SwipeAction } from './components/SwipeAction';
@@ -202,6 +204,32 @@ export { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggle } from './compo
 export type { ToolbarProps, ToolbarButtonProps, ToolbarSeparatorProps, ToolbarToggleProps } from './components/Toolbar';
 export { AppShell } from './components/AppShell';
 export type { AppShellProps } from './components/AppShell';
+export { ActivityRail, ActivityRailItem } from './components/ActivityRail';
+export type { ActivityRailProps, ActivityRailItemProps } from './components/ActivityRail';
+export { StatusBar, StatusItem } from './components/StatusBar';
+export type { StatusBarProps, StatusItemProps } from './components/StatusBar';
+export { TabBar, TabBarItem } from './components/TabBar';
+export type { TabBarProps, TabBarItemProps } from './components/TabBar';
+export { Workbench } from './components/Workbench';
+export type { WorkbenchProps } from './components/Workbench';
+export { VisuallyHidden } from './components/VisuallyHidden';
+export type { VisuallyHiddenProps } from './components/VisuallyHidden';
+export { Mark } from './components/Mark';
+export type { MarkProps } from './components/Mark';
+export { Highlight } from './components/Highlight';
+export type { HighlightProps } from './components/Highlight';
+export { NumberFormatter } from './components/NumberFormatter';
+export type { NumberFormatterProps } from './components/NumberFormatter';
+export { Fieldset } from './components/Fieldset';
+export type { FieldsetProps } from './components/Fieldset';
+export { LoadingOverlay } from './components/LoadingOverlay';
+export type { LoadingOverlayProps } from './components/LoadingOverlay';
+export { Indicator } from './components/Indicator';
+export type { IndicatorProps } from './components/Indicator';
+export { Spoiler } from './components/Spoiler';
+export type { SpoilerProps } from './components/Spoiler';
+export { DateTimePicker } from './components/DateTimePicker';
+export type { DateTimePickerProps } from './components/DateTimePicker';
 export { Cascader } from './components/Cascader';
 export type { CascaderProps, CascaderOption } from './components/Cascader';
 export { Sidebar, SidebarGroup, SidebarItem, SidebarFooter, SidebarToggle } from './components/Sidebar';

package/dist/types/utils/sortable.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { DragStartEvent } from '@dnd-kit/core';
 import type { SortingStrategy } from '@dnd-kit/sortable';
 /**
  * Internal sortable wrapper components (the non-component primitives live
@@ -14,12 +15,18 @@ type SortableRegionProps = {
     /** Index move resolved from a completed drag; never called when the drop
      * lands back on the origin item. */
     onMove: (from: number, to: number) => void;
+    /** Drag lifecycle passthrough — SortableTabList uses the pair to
+     * run its edge auto-scroll loop while a tab is airborne. The start
+     * callback receives the dnd-kit event so consumers can tell pointer
+     * lifts from keyboard lifts (`event.activatorEvent`). */
+    onDragStart?: (event: DragStartEvent) => void;
+    onDragEnd?: () => void;
     children: ReactNode;
 };
 /** DndContext + SortableContext wiring with the shared sensors and
  * closest-center collision. Renders no DOM of its own, so it can wrap a
  * ul or a chip row without changing layout or semantics. */
-export declare function SortableRegion({ ids, strategy, onMove, children }: SortableRegionProps): import("react").JSX.Element;
+export declare function SortableRegion({ ids, strategy, onMove, onDragStart, onDragEnd, children, }: SortableRegionProps): import("react").JSX.Element;
 type SortableItemProps = {
     id: string | number;
     className?: string;

package/dist/types/utils/use-end-reached.d.ts

@@ -0,0 +1,56 @@
+import type { RefObject } from 'react';
+type UseEndReachedOptions = {
+    /** Scrollport element whose end is watched. */
+    ref: RefObject<HTMLElement | null>;
+    /**
+     * Fired when the scroll offset comes within `threshold` px of the
+     * content's end along the scroll axis — the infinite-scroll "load the
+     * next page" trigger. Semantics: entering the zone fires once; staying
+     * inside it does not re-fire; scrolling back out re-arms, and content
+     * growth (`contentUnits` increasing) re-arms too, so a list that is
+     * still short after a page load chains straight into the next one.
+     * Content that does not fill the port on initial mount counts as being
+     * in the zone and fires once.
+     */
+    onEndReached?: () => void;
+    /** Distance in px from the content end that arms the trigger. */
+    threshold: number;
+    /**
+     * Count of content units (items, entries, children). Only growth
+     * matters: an increase re-arms the trigger and re-checks immediately.
+     */
+    contentUnits: number;
+    /** Scroll axis; `'y'` (default) or `'x'`. */
+    axis?: 'x' | 'y';
+    /**
+     * Mirror the end edge onto the scroll start (VirtualList `reverse`
+     * mode): content anchors to the end edge, so the logical end of the
+     * list sits at the physical start of the scroll range and the
+     * remaining distance is the offset itself. The mount check is skipped
+     * in this mode — the consumer anchors the start position first
+     * (VirtualList's stick-to-end glue) and then calls `check()`.
+     */
+    fromStart?: boolean;
+    /**
+     * Viewport-extent fallback for environments where clientHeight /
+     * clientWidth read 0 (no layout engine, e.g. jsdom): the consumer's
+     * declared port size.
+     */
+    extentFallback?: number;
+    /**
+     * Attach the hook's own passive scroll listener (default). VirtualList
+     * passes `false` and calls the returned `check()` from its existing
+     * scroll handler instead.
+     */
+    attach?: boolean;
+};
+/**
+ * End-reached pagination trigger for a scrollport. Shared by VirtualList
+ * (`onEndReached`) and the plain scroll containers that forward the same
+ * semantics (LogViewer / ConversationList `onLoadMore`); returns `check()`
+ * for consumers that drive it from their own scroll handler. Zero
+ * overhead when `onEndReached` is not provided: no listener, no
+ * per-scroll work.
+ */
+export declare function useEndReached({ ref, onEndReached, threshold, contentUnits, axis, fromStart, extentFallback, attach, }: UseEndReachedOptions): () => void;
+export {};

package/dist/types/utils/viewport.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 虚拟键盘对视口的遮挡高度（px）：以布局视口为参照度量
+ * （`innerHeight - visualViewport.height - offsetTop`，向下钳 0——桌面
+ * 窗口缩放时 innerHeight 与视口同步变化，inset 恒为 0）。
+ *
+ * - `window.visualViewport` 不存在（SSR/jsdom）时静默保持 0，调用方的
+ *   `dvh` 基线继续生效；
+ * - `enabled` 为 false（如 sheet 收起）时不订阅，翻回 true 时重新
+ *   measure 订阅；
+ * - 监听器 passive（measure 从不 preventDefault），卸载时成对清理。
+ */
+export declare function useVisualViewportInset(enabled?: boolean): number;

package/dist/utils/sortable-shared.js

@@ -1,10 +1,10 @@
 "use client";
-import { KeyboardSensor as e, PointerSensor as t, useSensor as n, useSensors as r } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates as i } from "@dnd-kit/sortable";
+import { sortableKeyboardCoordinates as e } from "@dnd-kit/sortable";
+import { KeyboardSensor as t, PointerSensor as n, useSensor as r, useSensors as i } from "@dnd-kit/core";
 import { CSS as a } from "@dnd-kit/utilities";
 //#region src/lib/utils/sortable-shared.ts
 function o() {
-	return r(n(t, { activationConstraint: { distance: 8 } }), n(e, { coordinateGetter: i }));
+	return i(r(n, { activationConstraint: { distance: 8 } }), r(t, { coordinateGetter: e }));
 }
 function s(e, t) {
 	return {

package/dist/utils/sortable.js

@@ -5,30 +5,31 @@ import { SortableHandleContext as t } from "./sortable-handle.js";
 import { sortableItemStyle as n, useSortableSensors as r } from "./sortable-shared.js";
 /* empty css                   */
 import { jsx as i } from "react/jsx-runtime";
-import { DndContext as a, closestCenter as o } from "@dnd-kit/core";
-import { SortableContext as s, useSortable as c } from "@dnd-kit/sortable";
+import { SortableContext as a, useSortable as o } from "@dnd-kit/sortable";
+import { DndContext as s, closestCenter as c } from "@dnd-kit/core";
 //#region src/lib/utils/sortable.tsx
-function l({ ids: e, strategy: t, onMove: n, children: c }) {
-	let l = r();
-	return /* @__PURE__ */ i(a, {
-		sensors: l,
-		collisionDetection: o,
+function l({ ids: e, strategy: t, onMove: n, onDragStart: o, onDragEnd: l, children: u }) {
+	let d = r();
+	return /* @__PURE__ */ i(s, {
+		sensors: d,
+		collisionDetection: c,
+		onDragStart: o,
 		onDragEnd: ({ active: t, over: r }) => {
-			r && t.id !== r.id && n(e.indexOf(t.id), e.indexOf(r.id));
+			l?.(), r && t.id !== r.id && n(e.indexOf(t.id), e.indexOf(r.id));
 		},
-		children: i(s, {
+		children: i(a, {
 			items: e,
 			strategy: t,
-			children: c
+			children: u
 		})
 	});
 }
 var u = "haze-sortable__sortableNode", d = "haze-sortable__sortableNodeDragging";
-function f({ id: r, className: a, children: o }) {
-	let { attributes: s, listeners: l, setNodeRef: f, transform: p, transition: m, isDragging: h } = c({ id: r });
+function f({ id: r, className: a, children: s }) {
+	let { attributes: c, listeners: l, setNodeRef: f, transform: p, transition: m, isDragging: h } = o({ id: r });
 	return /* @__PURE__ */ i(t.Provider, {
 		value: {
-			attributes: s,
+			attributes: c,
 			listeners: l
 		},
 		children: i("span", {
@@ -40,7 +41,7 @@ function f({ id: r, className: a, children: o }) {
 				h && d,
 				a
 			]),
-			children: o
+			children: s
 		})
 	});
 }

package/dist/utils/use-end-reached.js

@@ -0,0 +1,46 @@
+"use client";
+import { getDirection as e } from "./direction.js";
+import { useCallback as t, useEffect as n, useRef as r } from "react";
+//#region src/lib/utils/use-end-reached.ts
+function i({ ref: i, onEndReached: a, threshold: o, contentUnits: s, axis: c = "y", fromStart: l = !1, extentFallback: u, attach: d = !0 }) {
+	let f = r(a);
+	n(() => {
+		f.current = a;
+	});
+	let p = a !== void 0, m = r(!0), h = r(null), g = t(() => {
+		let t = f.current;
+		if (!t) return;
+		let n = i.current;
+		if (!n) return;
+		let r = c === "y" ? n.scrollTop : n.scrollLeft, a = c === "x" && e(n) === "rtl" ? -r : r, s = c === "y" ? n.scrollHeight : n.scrollWidth, d = (c === "y" ? n.clientHeight : n.clientWidth) || u || 0;
+		(l ? a : s - d - a) <= o ? m.current && (m.current = !1, t()) : m.current = !0;
+	}, [
+		i,
+		c,
+		l,
+		u,
+		o
+	]), _ = r(!1);
+	return n(() => {
+		let e = h.current, t = _.current;
+		h.current = s, _.current = p, p && (t && e !== null && s <= e || (!l || e !== null && t) && (m.current = !0, g()));
+	}, [
+		s,
+		g,
+		p,
+		l
+	]), n(() => {
+		if (!d || !p) return;
+		let e = i.current;
+		if (!e) return;
+		let t = () => g();
+		return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
+	}, [
+		d,
+		p,
+		g,
+		i
+	]), g;
+}
+//#endregion
+export { i as useEndReached };

package/dist/utils/viewport.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect as e, useState as t } from "react";
+//#region src/lib/utils/viewport.ts
+function n(n = !0) {
+	let [r, i] = t(0);
+	return e(() => {
+		if (!n) return;
+		let e = window.visualViewport;
+		if (!e) return;
+		let t = () => {
+			let t = Math.max(0, Math.round(window.innerHeight - e.height - e.offsetTop));
+			i((e) => e === t ? e : t);
+		};
+		return t(), e.addEventListener("resize", t, { passive: !0 }), e.addEventListener("scroll", t, { passive: !0 }), () => {
+			e.removeEventListener("resize", t), e.removeEventListener("scroll", t);
+		};
+	}, [n]), r;
+}
+//#endregion
+export { n as useVisualViewportInset };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.30.0",
+  "version": "1.32.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -121,6 +121,8 @@
     "@babel/preset-env": "^8.0.2",
     "@babel/preset-typescript": "^8.0.1",
     "@for-fun/event-emitter": "^1.1.0",
+    "@guidepup/guidepup": "^0.34.0",
+    "@guidepup/playwright": "^0.19.1",
     "@linaria/core": "^8.2.0",
     "@native-router/core": "^1.17.0",
     "@native-router/react": "^1.16.1",
@@ -173,7 +175,7 @@
       "name": "Button only (bundled from barrel)",
       "path": "dist/index.js",
       "import": "{Button}",
-      "limit": "2 KB"
+      "limit": "5.75 KB"
     },
     {
       "name": "TagGroup+TagGroupItem only — dnd-free (bundled from barrel)",
@@ -197,16 +199,16 @@
       "name": "Dashboard profile: Button + Input + Select + Dialog + Toast + Pagination",
       "path": "dist/index.js",
       "import": "{Button, Input, Select, Dialog, Toast, Pagination}",
-      "limit": "17.5 KB"
+      "limit": "18.5 KB"
     },
     {
       "name": "CSS aggregate (dist/haze-ui.css, brotli)",
       "path": "dist/haze-ui.css",
-      "limit": "23.75 KB"
+      "limit": "26.25 KB"
     },
     {
       "path": "dist/haze-ui.css",
-      "limit": "30.25 KB",
+      "limit": "35 KB",
       "gzip": true
     },
     {
@@ -227,6 +229,12 @@
       "limit": "0.3 KB",
       "gzip": true
     },
+    {
+      "name": "CSS family ratchet: sparkline",
+      "path": "dist/css/sparkline.css",
+      "limit": "0.3 KB",
+      "gzip": true
+    },
     {
       "name": "CSS family ratchet: result",
       "path": "dist/css/result.css",