haze-ui 1.30.0 → 1.32.0

package/dist/types/components/LogViewer/LogViewer.d.ts

@@ -8,7 +8,16 @@ type LogEntry = {
 type LogViewerProps = {
     logs: LogEntry[];
     filter?: ControlOrValue<LogLevel | null>;
+    /**
+     * Infinite-scroll trigger on the log body's scrollport: fired when the
+     * scroll position comes within 200px of the end. Entering the zone
+     * fires once; staying inside does not re-fire; scrolling back out
+     * re-arms, and growth of the rendered (filtered) entries re-arms too,
+     * so a still-short list chains straight into the next page. Typical
+     * use: append the next page of `logs`. Ignored when not provided.
+     */
+    onLoadMore?: () => void;
     className?: string;
 };
-export default function LogViewer({ logs, filter: filterControl, className }: LogViewerProps): import("react").JSX.Element;
+export default function LogViewer({ logs, filter: filterControl, onLoadMore, className }: LogViewerProps): import("react").JSX.Element;
 export type { LogViewerProps, LogEntry, LogLevel };

package/dist/types/components/Mark/Mark.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from 'react';
+type MarkProps = {
+    /** Highlight tone — maps to the semantic status tokens. */
+    color?: 'warning' | 'primary' | 'success' | 'danger';
+} & Omit<ComponentPropsWithoutRef<'mark'>, 'color'>;
+/**
+ * Text-level highlight — the semantic `<mark>` skinned with the status
+ * tokens. For search-result highlighting of arbitrary substrings use
+ * Highlight, which composes this element.
+ */
+export default function Mark({ color, className, ...rest }: MarkProps): import("react").JSX.Element;
+export type { MarkProps };

package/dist/types/components/Mark/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Mark } from './Mark';
+export type { MarkProps } from './Mark';

package/dist/types/components/Menu/MenuItem.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-type MenuItemProps = {
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+type MenuItemOwnProps = {
     onSelect?: () => void;
     disabled?: boolean;
     /** Danger skin for destructive actions: danger-colored text and interaction states. */
@@ -11,5 +11,16 @@ type MenuItemProps = {
     className?: string;
     children: ReactNode;
 };
-export default function MenuItem({ onSelect, disabled, danger, icon, kbdLabel, className, children, }: MenuItemProps): import("react").JSX.Element;
-export type { MenuItemProps };
+/**
+ * Polymorphic like Button's `as`: the item skin and the menuitem wiring
+ * (role, roving tabIndex, disabled/aria handling) always land on the
+ * rendered element; the target's own props flow through. `as='a'`
+ * renders a navigation menuitem with link semantics (href).
+ */
+type MenuItemProps<T extends ElementType = 'button'> = MenuItemOwnProps & {
+    /** Render element — 'button' (default) or 'a' (or a router Link
+     * component forwarding props to an anchor). */
+    as?: T;
+} & Omit<ComponentPropsWithRef<T>, keyof MenuItemOwnProps | 'as'>;
+export default function MenuItem<T extends ElementType = 'button'>({ onSelect, disabled, danger, icon, kbdLabel, className, children, as, ...rest }: MenuItemProps<T>): import("react").JSX.Element;
+export type { MenuItemOwnProps, MenuItemProps };

package/dist/types/components/NumberFormatter/NumberFormatter.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef } from 'react';
+type NumberFormatterProps = {
+    /** The numeric value to render. */
+    value: number;
+    /** Intl.NumberFormat options minus locale. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Explicit locale. Defaults to the runtime default (SSR-stable).
+     *
+     * Note: this formatter is RSC-safe (no hooks) and therefore does NOT
+     * read the LocaleProvider chain — pass `locale` explicitly inside a
+     * localized tree. */
+    locale?: string;
+    /** Text prepended/appended outside the formatted number. */
+    prefix?: string;
+    suffix?: string;
+} & Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'prefix'>;
+/**
+ * Presentational number formatting — a thin, token-free numeric text
+ * node driven by Intl. Stat's display value is the styled display
+ * surface; this is the formatter for inline text ("共 12,345 条").
+ */
+export default function NumberFormatter({ value, formatOptions, locale, prefix, suffix, ...rest }: NumberFormatterProps): import("react").JSX.Element;
+export type { NumberFormatterProps };

package/dist/types/components/NumberFormatter/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NumberFormatter } from './NumberFormatter';
+export type { NumberFormatterProps } from './NumberFormatter';

package/dist/types/components/Resizable/Resizable.d.ts

@@ -1,18 +1,35 @@
-import type { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
+import type { ControlOrValue } from 'react-use-control';
 type ResizableGroupProps = {
     direction?: 'horizontal' | 'vertical';
     children: ReactNode;
     className?: string;
+    style?: CSSProperties;
+    /** Fired when a drag or keyboard resize ends: the effective px size of
+     * every explicitly sized panel, keyed by panel id — a shape ready to
+     * persist. Collapsed panels report 0. */
+    onResizeCommit?: (sizes: Record<string, number>) => void;
 };
-export declare function ResizableGroup({ direction, children, className, }: ResizableGroupProps): import("react").JSX.Element;
+export declare function ResizableGroup({ direction, children, className, style, onResizeCommit, }: ResizableGroupProps): import("react").JSX.Element;
 type ResizablePanelProps = {
+    /** Stable identity within the group — the key `onResizeCommit` reports. */
+    id: string;
+    /** Initial/fallback px size. Omit to make the panel flexible (it grows
+     * into the space the fixed panels leave). */
     defaultSize?: number;
+    /** px pins honored by both pointer drags and keyboard steps. */
+    minSize?: number;
+    maxSize?: number;
+    /** Opt-in to the collapse feature; without it `collapsed` is inert. */
+    collapsible?: boolean;
+    collapsed?: ControlOrValue<boolean>;
+    onCollapsedChange?: (collapsed: boolean) => void;
     children: ReactNode;
     className?: string;
-};
-export declare function ResizablePanel({ defaultSize, children, className, }: ResizablePanelProps): import("react").JSX.Element;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'id'>;
+export declare function ResizablePanel({ id, defaultSize, minSize, maxSize, collapsible, collapsed: collapsedControl, onCollapsedChange, children, className, style, ...rest }: ResizablePanelProps): import("react").JSX.Element;
 type ResizableHandleProps = {
     className?: string;
-};
-export declare function ResizableHandle({ className }: ResizableHandleProps): import("react").JSX.Element;
-export type { ResizableGroupProps, ResizablePanelProps, ResizableHandleProps };
+} & Omit<ComponentPropsWithoutRef<'div'>, 'className'>;
+export declare function ResizableHandle({ className, ...rest }: ResizableHandleProps): import("react").JSX.Element;
+export type { ResizableGroupProps, ResizablePanelProps, ResizableHandleProps, };

package/dist/types/components/Resizable/index.d.ts

@@ -1,4 +1,4 @@
 export { ResizableGroup, ResizablePanel, ResizableHandle } from './Resizable';
-export type { ResizableGroupProps, ResizablePanelProps, ResizableHandleProps } from './Resizable';
+export type { ResizableGroupProps, ResizablePanelProps, ResizableHandleProps, } from './Resizable';
 export { ResizableGroup as SplitterGroup, ResizablePanel as SplitterPanel, ResizableHandle as SplitterHandle, } from './Resizable';
 export type { ResizableGroupProps as SplitterGroupProps, ResizablePanelProps as SplitterPanelProps, ResizableHandleProps as SplitterHandleProps, } from './Resizable';

package/dist/types/components/Select/Select.d.ts

@@ -1,6 +1,24 @@
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 import type { ControlOrValue } from 'react-use-control';
 import type { SelectVirtualizedConfig } from './SelectFloating';
+/**
+ * Semantic slot classes (AntD v6 `classNames` shape), following the
+ * data-slot names: `trigger` is the focusable control (native `<select>`
+ * in plain mode, trigger `<button>` in floating modes); `content` is the
+ * floating panel; `option`, `clearButton`, `item`, `searchInput` cover
+ * the rest. Slots not rendered by the current mode are ignored. A
+ * ConfigProvider `Select.classNames` section merges under the prop.
+ */
+type SelectClassNames = {
+    trigger?: string;
+    content?: string;
+    option?: string;
+    clearButton?: string;
+    /** Selected-value chip in multiple mode (data-slot='item'). */
+    item?: string;
+    /** Panel-top filter input in searchable mode (data-slot='input'). */
+    searchInput?: string;
+};
 type SelectProps = {
     /** `string` in single mode, `string[]` when `multiple` is set. */
     value?: ControlOrValue<string | string[]>;
@@ -70,6 +88,9 @@ type SelectProps = {
      */
     placeholder?: string;
     size?: 'sm' | 'md' | 'lg';
+    /** Slot classes (see {@link SelectClassNames}); merged over any
+     * ConfigProvider `Select.classNames` section, per key. */
+    classNames?: SelectClassNames;
     /**
      * Forwarded to the focusable element — the native `<select>` in plain
      * and clearable single mode, the trigger `<button>` when `multiple`
@@ -79,5 +100,5 @@ type SelectProps = {
     ref?: Ref<HTMLSelectElement | HTMLButtonElement>;
     children: ReactNode;
 } & Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'size' | 'multiple'>;
-export default function Select({ value: valueControl, multiple, searchable, clearable, loading, onSearch, maxTagCount, virtualized, size, className, children, onChange, onValuesChange, placeholder, ref, ...rest }: SelectProps): import("react").JSX.Element;
-export type { SelectProps };
+export default function Select({ value: valueControl, multiple, searchable, clearable, loading, onSearch, maxTagCount, virtualized, size, className, classNames, children, onChange, onValuesChange, placeholder, ref, ...rest }: SelectProps): import("react").JSX.Element;
+export type { SelectClassNames, SelectProps };

package/dist/types/components/Select/SelectCore.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 import type { SelectVirtualizedConfig } from './SelectFloating';
+import type { SelectClassNames } from './Select';
 type SelectCoreProps = {
     /** `string` in single mode, `string[]` when `multiple` is set. */
     value: string | string[];
@@ -75,6 +76,8 @@ type SelectCoreProps = {
     virtualized?: boolean | SelectVirtualizedConfig;
     children: ReactNode;
     className?: string;
+    /** Slot classes (see SelectProps.classNames in ./Select). */
+    classNames?: SelectClassNames;
     /**
      * Forwarded to the focusable element — the native `<select>` in plain
      * and clearable single mode, the trigger `<button>` when `multiple`
@@ -82,5 +85,5 @@ type SelectCoreProps = {
      */
     ref?: Ref<HTMLSelectElement | HTMLButtonElement>;
 } & Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'onChange' | 'size' | 'multiple'>;
-export default function SelectCore({ value, onChange, onNativeChange, multiple, searchable, clearable, loading, onSearch, maxTagCount, size, virtualized, className, placeholder, children, ref, ...rest }: SelectCoreProps): import("react").JSX.Element;
+export default function SelectCore({ value, onChange, onNativeChange, multiple, searchable, clearable, loading, onSearch, maxTagCount, size, virtualized, className, classNames, placeholder, children, ref, ...rest }: SelectCoreProps): import("react").JSX.Element;
 export type { SelectCoreProps };

package/dist/types/components/Select/SelectFloating.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, Ref } from 'react';
+import type { SelectClassNames } from './Select';
 import type { SelectEntryData } from './select-options';
 /** Metrics override for the `virtualized` option list of the floating
  * Select paths (multiple, or single with `searchable`). */
@@ -37,6 +38,10 @@ type SelectFloatingProps = {
     /** Falls back to the `select.placeholder` locale string. */
     placeholder?: string;
     size?: 'sm' | 'md' | 'lg';
+    /** Slot classes, following data-slot names (see SelectProps.classNames
+     * in ./Select; the Select wrapper merges its ConfigProvider section
+     * under this prop already). */
+    classNames?: SelectClassNames;
     /**
      * Render a search input at the top of the panel that filters the
      * options (case-insensitive substring over the label text). Typing
@@ -90,5 +95,5 @@ type SelectFloatingProps = {
     /** Forwarded to the trigger `<button>` element. */
     ref?: Ref<HTMLButtonElement>;
 } & Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange' | 'size' | 'type' | 'children'>;
-export default function SelectFloating({ value, onChange, entries, multiple, placeholder, searchable, clearable, loading, onSearch, maxTagCount, size, virtualized, className, ref, ...rest }: SelectFloatingProps): import("react").JSX.Element;
+export default function SelectFloating({ value, onChange, entries, multiple, placeholder, searchable, clearable, loading, onSearch, maxTagCount, size, virtualized, className, classNames, ref, ...rest }: SelectFloatingProps): import("react").JSX.Element;
 export type { SelectFloatingProps, SelectVirtualizedConfig };

package/dist/types/components/Select/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Select } from './Select';
-export type { SelectProps } from './Select';
+export type { SelectClassNames, SelectProps } from './Select';
 export { default as SelectCore } from './SelectCore';
 export type { SelectCoreProps } from './SelectCore';
 export { default as Option } from './Option';

package/dist/types/components/Sparkline/Sparkline.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentPropsWithoutRef } from 'react';
+/**
+ * Sparkline — a stateless inline-SVG mini trend chart (no recharts, no
+ * hooks, RSC-safe). Point coordinates are normalized into a square
+ * `0 0 100 100` viewBox stretched by `preserveAspectRatio="none"`, so
+ * `width`/`height` size the rendered box freely without touching geometry;
+ * `vector-effect="non-scaling-stroke"` keeps the 2px stroke crisp under
+ * that non-uniform stretch.
+ *
+ * Accessibility contract: a sparkline is decorative by default — it
+ * renders `aria-hidden="true"` and no role. Naming it (`aria-label` or
+ * `aria-labelledby`) switches it to `role="img"` carrying that name (a
+ * name makes the image addressable; no name keeps it out of the tree
+ * entirely, which axe requires of every meaningful image). Every other
+ * native `<svg>` attribute is forwarded via `...rest`.
+ */
+type SparklineProps = {
+    /** Y values to plot, in series order; at least two points draw a path. */
+    data: readonly number[];
+    /** Rendered box width in px (geometry stays viewBox-normalized). */
+    width?: number;
+    /** Rendered box height in px. */
+    height?: number;
+    /** `area` adds a translucent token fill under the line. */
+    variant?: 'line' | 'area';
+    /** Semantic stroke color for the trend. */
+    tone?: 'primary' | 'success' | 'danger' | 'warning' | 'info';
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<'svg'>, 'children'>;
+export default function Sparkline({ data, width, height, variant, tone, className, ...rest }: SparklineProps): import("react").JSX.Element;
+export type { SparklineProps };

package/dist/types/components/Sparkline/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Sparkline } from './Sparkline';
+export type { SparklineProps } from './Sparkline';
+export { toneStrokes as sparklineToneStrokes, toneFills as sparklineToneFills } from './sparkline-styles';

package/dist/types/components/Sparkline/sparkline-styles.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Shared Sparkline skin — the base class plus tone→stroke / tone→fill
+ * variant maps the `Sparkline` component wears. Living in their own module
+ * keeps the component file free of style internals (react-refresh
+ * boundary) and lets the maps ship as public constants
+ * (`sparklineToneStrokes` / `sparklineToneFills`) for consumers composing
+ * custom SVG elements with the same skin; split-css groups the emitted
+ * CSS into `haze-ui/css/sparkline.css` with them.
+ */
+export declare const base: import("@linaria/core").LinariaClassName;
+/** Stroke color per tone; worn by the line path. */
+export declare const toneStrokes: {
+    readonly primary: import("@linaria/core").LinariaClassName;
+    readonly success: import("@linaria/core").LinariaClassName;
+    readonly danger: import("@linaria/core").LinariaClassName;
+    readonly warning: import("@linaria/core").LinariaClassName;
+    readonly info: import("@linaria/core").LinariaClassName;
+};
+/** Translucent area fill per tone; worn by the fill path of the `area` variant. */
+export declare const toneFills: {
+    readonly primary: import("@linaria/core").LinariaClassName;
+    readonly success: import("@linaria/core").LinariaClassName;
+    readonly danger: import("@linaria/core").LinariaClassName;
+    readonly warning: import("@linaria/core").LinariaClassName;
+    readonly info: import("@linaria/core").LinariaClassName;
+};

package/dist/types/components/Spoiler/Spoiler.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ControlOrValue } from 'react-use-control';
+/**
+ * Collapsed-long-content gate ("show more / less"). The content box is
+ * height-capped while collapsed with a fade at the cut edge; the toggle
+ * button flips the state. Controllable via ControlOrValue<boolean>.
+ */
+type SpoilerProps = {
+    /** Collapsed/expanded state — see useControl (initial boolean). */
+    expanded?: ControlOrValue<boolean>;
+    /** Max height in px of the collapsed content preview. */
+    maxHeight?: number;
+    /** Toggle copy override (defaults to the spoiler locale strings). */
+    showLabel?: string;
+    hideLabel?: string;
+    children: ReactNode;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
+export default function Spoiler({ expanded: expandedControl, maxHeight, showLabel, hideLabel, className, children, ...rest }: SpoilerProps): import("react").JSX.Element;
+export type { SpoilerProps };

package/dist/types/components/Spoiler/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Spoiler } from './Spoiler';
+export type { SpoilerProps } from './Spoiler';

package/dist/types/components/StatusBar/StatusBar.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+type StatusBarProps = {
+    /** Items pinned to the leading edge of the bar. */
+    left?: ReactNode;
+    /** Items pinned to the trailing edge of the bar. */
+    right?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'footer'>, 'children'>;
+type StatusItemProps = {
+    children: ReactNode;
+    /** Keeps the item visible below the mobile breakpoint where lesser items fold away. */
+    priority?: boolean;
+    /** Presence upgrades the item to a real button; called on activation (click, Enter, Space). */
+    onSelect?: () => void;
+} & Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'onSelect'>;
+export default function StatusBar({ left, right, className, ...rest }: StatusBarProps): import("react").JSX.Element;
+declare function StatusItem({ priority, onSelect, className, children, ...rest }: StatusItemProps): import("react").JSX.Element;
+export { StatusItem };
+export type { StatusBarProps, StatusItemProps };

package/dist/types/components/StatusBar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as StatusBar } from './StatusBar';
+export { StatusItem } from './StatusBar';
+export type { StatusBarProps, StatusItemProps } from './StatusBar';

package/dist/types/components/TabBar/TabBar.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+type TabBarProps = {
+    /** TabBarItem list; one row, evenly distributed (scrolls when crowded). */
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'nav'>, 'children'>;
+export default function TabBar({ children, className, ...rest }: TabBarProps): import("react").JSX.Element;
+type TabBarItemProps = {
+    /** Icon content; rendered inside a fixed-size, aria-hidden slot. */
+    icon: ReactNode;
+    /** Visible caption under the icon; also the item's accessible name. */
+    label: string;
+    /** Notification count/dot rendered as a small Badge on the icon corner. */
+    badge?: ReactNode;
+    /** Marks the item as the current view (aria-current="true"). */
+    active?: boolean;
+    /** Called when a non-active item is activated (click or Enter/Space). */
+    onSelect?: () => void;
+    /** Called when the already-active item is activated again — the
+     * "reselect pops back to root" affordance. onSelect is not re-fired. */
+    onReselect?: () => void;
+} & Omit<ComponentPropsWithoutRef<'button'>, 'type' | 'children' | 'onSelect'>;
+export declare function TabBarItem({ icon, label, badge, active, onSelect, onReselect, className, onClick, ...rest }: TabBarItemProps): import("react").JSX.Element;
+export type { TabBarProps, TabBarItemProps };

package/dist/types/components/TabBar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TabBar } from './TabBar';
+export type { TabBarProps } from './TabBar';
+export { TabBarItem } from './TabBar';
+export type { TabBarItemProps } from './TabBar';

package/dist/types/components/Tabs/SortableTabList.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+/**
+ * Drag-and-drop reorderable variant of the Tabs strip — built on the
+ * @dnd-kit dependency (the plain TabList never touches it). It is a
+ * drop-in `<TabList>` replacement inside `<Tabs>`: the strip keeps the
+ * WAI-ARIA tabs model (roving tabindex, arrow-key selection, Home/End)
+ * and every `<Tab>` affordance (closable ×, icon, status dot) renders
+ * exactly as before.
+ *
+ * Keyboard sorting follows the shared sensor seam (`Space` lifts the
+ * focused tab, arrows walk, `Space` drops, `Escape` cancels) — while
+ * inside the sortable strip `Space`/`Enter` lift a drag instead of
+ * activating the tab (selection already follows the arrows per the
+ * tabs pattern, so nothing is lost). A drag never changes which tab is
+ * active: the selection is captured at lift and restored at drop, so
+ * reordering cannot move the selection with an index.
+ *
+ * While a tab is airborne, holding the pointer within
+ * `AUTO_SCROLL_EDGE` of either strip end auto-scrolls the hidden
+ * viewport — the Chrome-tabs gesture for reaching tabs that
+ * compressed past their floor. dnd-kit's own autoScroll is
+ * bypassed in favor of this explicit loop: the strip's flex
+ * compression reflows item rects mid-drag, which the rect-based
+ * detector tracks poorly. The loop arms for pointer drags only —
+ * a keyboard lift never feeds the pointer-position ref, so letting
+ * it run would scroll the strip under a stale clientX.
+ *
+ * The sortable wrappers sit between the tablist and its `<Tab>`
+ * children, which the plain TabList's menu collector cannot see
+ * through — the metas are collected over the unwrapped children
+ * here instead and handed down (`tabMetas`), keeping the ⋯
+ * overflow menu working unchanged.
+ */
+type SortableTabListProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Receives `nextOrder` — the new sequence of original child indices —
+     * after a completed drag. Reorder the `<Tab>` children you pass
+     * accordingly; without a handler a drop only animates back to the
+     * source position.
+     */
+    onReorder?: (nextOrder: number[]) => void;
+};
+export default function SortableTabList({ className, onReorder, children, }: SortableTabListProps): import("react").JSX.Element;
+export type { SortableTabListProps };

package/dist/types/components/Tabs/Tab.d.ts

@@ -1,8 +1,59 @@
-import type { ReactNode } from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+/** Document-tab status flavors — each maps to a dot color (see `TabStatusDot`). */
+type TabStatus = 'dirty' | 'error' | 'syncing';
 type TabProps = {
     value: string;
+    /**
+     * Inline-start icon slot, decorative (`aria-hidden`) — pair it with a
+     * text label so the meaning survives screen readers.
+     */
+    icon?: ReactNode;
+    /**
+     * Document-tab status indicator: a small dot after the label —
+     * `dirty` renders neutral (text-secondary), `error` danger,
+     * `syncing` primary. The dot itself is color-only decoration; the
+     * SR-visible status word appended to the tab's accessible name comes
+     * from `statusLabel` (or its per-status default).
+     */
+    status?: TabStatus;
+    /**
+     * Overrides the status word appended to the accessible name when
+     * `status` is set — the i18n hook for SR users (the dot alone cannot
+     * carry meaning). Defaults come from the `tabs` locale pack
+     * (Unsaved changes / Error / Syncing).
+     */
+    statusLabel?: ReactNode;
+    /**
+     * Renders the × close affordance. Purely notifying: activating it
+     * calls `onClose` and nothing else — removing the tab from the
+     * (controlled) tabs array and picking the next active tab are the
+     * consumer's job. If the active tab is closed and the consumer does
+     * not remove it, the selection stays put on the still-rendered tab.
+     *
+     * Keyboard: the × is a real button, but not a tab stop — the strip
+     * keeps its single roving stop per the tabs pattern, and closing by
+     * keyboard rides the Delete key on the focused tab (APG deletable
+     * tabs).
+     */
+    closable?: boolean;
+    /** Overrides the × button's aria-label (i18n hook). */
+    closeLabel?: string;
+    /**
+     * Called when the user requests a close — × click, or Delete on the
+     * focused tab. The × click is stopped before it can reach the strip,
+     * so closing never selects the tab.
+     */
+    onClose?: (event: ReactMouseEvent<HTMLSpanElement> | ReactKeyboardEvent<HTMLDivElement>) => void;
     className?: string;
     children: ReactNode;
 };
-export default function Tab({ value, className, children }: TabProps): import("react").JSX.Element;
-export type { TabProps };
+/**
+ * The decorative status dot shared by `Tab` and the TabList overflow
+ * menu. Color-only by design (`aria-hidden`) — the SR-visible meaning
+ * rides the tab's accessible name via `statusLabel`.
+ */
+export declare function TabStatusDot({ status }: {
+    status: TabStatus;
+}): import("react").JSX.Element;
+export default function Tab({ value, icon, status, statusLabel, closable, closeLabel, onClose, className, children, }: TabProps): import("react").JSX.Element;
+export type { TabProps, TabStatus };

package/dist/types/components/Tabs/TabList.d.ts

@@ -1,7 +1,22 @@
-import type { ReactNode } from 'react';
+import type { RefObject, ReactNode } from 'react';
+import type { TabMeta } from './tab-metas';
 type TabListProps = {
     className?: string;
+    /** External handle on the strip's scroll viewport. SortableTabList
+     *  passes its own ref so the drag clamp can measure the exact
+     *  element the wrappers report as offsetParent. */
+    listRef?: RefObject<HTMLDivElement | null>;
+    /** Overrides the ⋯ overflow trigger's aria-label (i18n hook). */
+    overflowLabel?: string;
     children: ReactNode;
+    /**
+     * Pre-collected tab metadata for the overflow menu — the
+     * SortableTabList passes its own collection because its
+     * `<Tab>` children sit inside sortable wrappers the
+     * internal collector cannot see through. Omit to collect
+     * from `children` (the plain-strip path).
+     */
+    tabMetas?: TabMeta[];
 };
 /**
  * The tab strip: a roving-tabindex list per the WAI-ARIA tabs pattern —
@@ -9,6 +24,15 @@ type TabListProps = {
  * (selection follows focus), Home/End jump to the ends. Under
  * `dir="rtl"` the horizontal arrows mirror (← advances), read from the
  * DOM at event time so the keys follow the mirrored strip.
+ *
+ * Document-tab overflow: the strip itself stays `overflow-x: auto`
+ * (scrolling is the baseline, and the only gesture on touch), while a
+ * `⋯` menu button appears beside it once the tabs no longer fit. The
+ * menu lists every tab — name, icon and status dot — as a radio group
+ * bound to the active value, so any tab stays selectable even when
+ * scrolled out of view. Overflow is measured from `scrollWidth` vs
+ * `clientWidth` through a ResizeObserver (jsdom has neither layout nor
+ * the observer; there the strip simply renders menu-less).
  */
-export default function TabList({ className, children }: TabListProps): import("react").JSX.Element;
+export default function TabList({ className, listRef: listRefProp, overflowLabel, children, tabMetas, }: TabListProps): import("react").JSX.Element;
 export type { TabListProps };

package/dist/types/components/Tabs/edge-scroll.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Edge auto-scroll math for SortableTabList — sibling module per
+ * the react-refresh only-export-components rule (Button/styles.ts,
+ * Grid/grid-item-styles.ts precedents). Pure so tests can
+ * exercise the gesture without layout. Not part of the barrel.
+ */
+/** Distance from either strip end that arms the auto-scroll, and
+ * the steady scroll pace applied per animation frame. */
+export declare const AUTO_SCROLL_EDGE = 48;
+export declare const AUTO_SCROLL_STEP = 10;
+/** Per-frame auto-scroll delta for a pointer hovering the strip's
+ * ends: positive scrolls toward the right end, negative toward the
+ * left, zero mid-strip. The edge zones are inclusive. */
+export declare function edgeScrollDelta(stripRect: {
+    left: number;
+    right: number;
+}, pointerX: number): number;

package/dist/types/components/Tabs/index.d.ts

@@ -4,6 +4,8 @@ export type { TabsClassNames } from './TabsContext';
 export { default as TabList } from './TabList';
 export type { TabListProps } from './TabList';
 export { default as Tab } from './Tab';
-export type { TabProps } from './Tab';
+export type { TabProps, TabStatus } from './Tab';
 export { default as TabPanel } from './TabPanel';
 export type { TabPanelProps } from './TabPanel';
+export { default as SortableTabList } from './SortableTabList';
+export type { SortableTabListProps } from './SortableTabList';

package/dist/types/components/Tabs/tab-metas.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { TabStatus } from './Tab';
+export type TabMeta = {
+    value: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    status?: TabStatus;
+};
+/**
+ * `<Tab>` children in DOM order for the overflow menu: arrays and
+ * Fragments flatten. Anything else between the tabs is left alone —
+ * it stays reachable through the strip's scroll, it just is not
+ * listed in the menu. Exported so SortableTabList — whose `<Tab>`
+ * children sit inside sortable wrappers this collector cannot see
+ * through — can gather the same metas itself and hand them over.
+ *
+ * Lives in a sibling file (not TabList.tsx) so the component file
+ * keeps a components-only export surface for react-refresh.
+ */
+export declare function collectTabMetas(children: ReactNode): TabMeta[];

package/dist/types/components/TagGroup/SortableTagGroup.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { type TagGroupClassNames } from './TagGroup';
 /**
  * Drag-and-drop reorderable variant of TagGroup — built on @dnd-kit
  * (a haze-ui dependency), so this module statically imports the dnd
@@ -10,6 +11,9 @@ import type { ReactNode } from 'react';
 type SortableTagGroupProps = {
     children: ReactNode;
     className?: string;
+    /** Slot classes — same contract as TagGroup's `classNames`; item-level
+     * keys are inherited by the TagGroupItem children. */
+    classNames?: TagGroupClassNames;
     /**
      * Receives `nextOrder` — the new sequence of original child indices —
      * after a completed drag. Reorder the children you pass accordingly;
@@ -17,5 +21,5 @@ type SortableTagGroupProps = {
      */
     onReorder?: (nextOrder: number[]) => void;
 };
-export default function SortableTagGroup({ children, className, onReorder, }: SortableTagGroupProps): import("react").JSX.Element;
+export default function SortableTagGroup({ children, className, classNames, onReorder, }: SortableTagGroupProps): import("react").JSX.Element;
 export type { SortableTagGroupProps };