haze-ui 1.34.0 → 1.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -0
- package/dist/THIRD-PARTY-NOTICES.md +2 -1
- package/dist/components/Anchor/Anchor.js +84 -65
- package/dist/components/BackToTop/BackToTop.js +18 -12
- package/dist/components/Combobox/Combobox.js +109 -99
- package/dist/components/CopyButton/CopyButton.js +13 -12
- package/dist/components/DataTable/DataTable.js +16 -16
- package/dist/components/FloatButton/FloatButton.js +11 -19
- package/dist/components/FollowUpSuggestions/FollowUpSuggestions.js +45 -0
- package/dist/components/FollowUpSuggestions/index.js +3 -0
- package/dist/components/LocaleProvider/ar-sa.js +9 -0
- package/dist/components/LocaleProvider/de-de.js +9 -0
- package/dist/components/LocaleProvider/es-es.js +9 -0
- package/dist/components/LocaleProvider/fr-fr.js +9 -0
- package/dist/components/LocaleProvider/it-it.js +9 -0
- package/dist/components/LocaleProvider/ja-jp.js +9 -0
- package/dist/components/LocaleProvider/ko-kr.js +9 -0
- package/dist/components/LocaleProvider/locale.js +9 -0
- package/dist/components/LocaleProvider/pt-br.js +9 -0
- package/dist/components/LocaleProvider/ru-ru.js +9 -0
- package/dist/components/LocaleProvider/zh-cn.js +9 -0
- package/dist/components/NavigationBar/NavLink.js +15 -16
- package/dist/components/NotificationCenter/NotificationCenter.js +294 -0
- package/dist/components/NotificationCenter/index.js +3 -0
- package/dist/components/Tabs/Tab.js +58 -50
- package/dist/components/TaskList/TaskList.js +96 -0
- package/dist/components/TaskList/index.js +3 -0
- package/dist/components/Toggle/Toggle.js +8 -8
- package/dist/components/Toggle/ToggleCore.js +4 -5
- package/dist/components/Toolbar/ToolbarButton.js +7 -7
- package/dist/components/Toolbar/ToolbarToggle.js +9 -9
- package/dist/components/Tree/Tree.js +159 -137
- package/dist/components/Tree/index.js +2 -1
- package/dist/components/Tree/useTree.js +32 -0
- package/dist/components/Tree/utils.js +21 -11
- package/dist/css/anchor.css +1 -1
- package/dist/css/combobox.css +1 -1
- package/dist/css/copy-button.css +1 -1
- package/dist/css/data-table.css +1 -1
- package/dist/css/follow-up-suggestions.css +4 -0
- package/dist/css/notification-center.css +5 -0
- package/dist/css/task-list.css +4 -0
- package/dist/css/tokens.css +1 -0
- package/dist/css-manifest.json +21 -0
- package/dist/haze-ui.css +18 -4
- package/dist/headless/index.js +2 -1
- package/dist/hooks/index.js +25 -0
- package/dist/hooks/useAnchorSpy.js +49 -0
- package/dist/hooks/useElementSize.js +31 -0
- package/dist/hooks/useIdle.js +45 -0
- package/dist/hooks/useMutationObserver.js +31 -0
- package/dist/hooks/useNetwork.js +28 -0
- package/dist/hooks/useOrientation.js +27 -0
- package/dist/hooks/useResizeObserver.js +16 -0
- package/dist/icons/index.js +9 -0
- package/dist/index.js +323 -318
- package/dist/mcp-docs.json +535 -13
- package/dist/registry.json +387 -7
- package/dist/sitemap.xml +6 -0
- package/dist/tokens/index.js +2 -1
- package/dist/tokens/zoom.js +6 -0
- package/dist/types/components/Anchor/Anchor.d.ts +5 -1
- package/dist/types/components/BackToTop/BackToTop.d.ts +23 -5
- package/dist/types/components/Combobox/Combobox.d.ts +17 -1
- package/dist/types/components/ConfigProvider/ConfigContext.d.ts +6 -0
- package/dist/types/components/CopyButton/CopyButton.d.ts +16 -4
- package/dist/types/components/DataTable/DataTable.bench.d.ts +1 -0
- package/dist/types/components/FloatButton/FloatButton.d.ts +25 -5
- package/dist/types/components/FollowUpSuggestions/FollowUpSuggestions.d.ts +27 -0
- package/dist/types/components/FollowUpSuggestions/index.d.ts +2 -0
- package/dist/types/components/LocaleProvider/locale.d.ts +9 -0
- package/dist/types/components/NavigationBar/NavLink.d.ts +24 -32
- package/dist/types/components/NotificationCenter/NotificationCenter.d.ts +111 -0
- package/dist/types/components/NotificationCenter/index.d.ts +2 -0
- package/dist/types/components/Select/Select.bench.d.ts +1 -0
- package/dist/types/components/Tabs/Tab.d.ts +26 -4
- package/dist/types/components/TaskList/TaskList.d.ts +50 -0
- package/dist/types/components/TaskList/index.d.ts +2 -0
- package/dist/types/components/Toggle/Toggle.d.ts +15 -8
- package/dist/types/components/Toggle/ToggleCore.d.ts +16 -7
- package/dist/types/components/Toolbar/ToolbarButton.d.ts +17 -5
- package/dist/types/components/Toolbar/ToolbarToggle.d.ts +22 -5
- package/dist/types/components/Tree/Tree.d.ts +1 -1
- package/dist/types/components/Tree/index.d.ts +4 -1
- package/dist/types/components/Tree/types.d.ts +20 -0
- package/dist/types/components/Tree/useTree.d.ts +96 -0
- package/dist/types/components/Tree/utils.d.ts +7 -0
- package/dist/types/components/VirtualList/VirtualList.bench.d.ts +1 -0
- package/dist/types/headless/index.d.ts +16 -0
- package/dist/types/hooks/index.d.ts +4 -0
- package/dist/types/hooks/useAnchorSpy.d.ts +62 -0
- package/dist/types/icons/index.d.ts +138 -0
- package/dist/types/index.d.ts +10 -2
- package/dist/types/tokens/index.d.ts +1 -0
- package/dist/types/tokens/zoom.d.ts +33 -0
- package/dist/types/utils/deprecate.d.ts +13 -0
- package/dist/types/utils/portal.d.ts +29 -0
- package/dist/utils/portal.js +13 -0
- package/package.json +40 -8
package/dist/sitemap.xml
CHANGED
|
@@ -3,12 +3,15 @@
|
|
|
3
3
|
<url><loc>https://wmzy.github.io/haze-ui/</loc></url>
|
|
4
4
|
<url><loc>https://wmzy.github.io/haze-ui/getting-started</loc></url>
|
|
5
5
|
<url><loc>https://wmzy.github.io/haze-ui/recipes</loc></url>
|
|
6
|
+
<url><loc>https://wmzy.github.io/haze-ui/recipes/ai-elements</loc></url>
|
|
6
7
|
<url><loc>https://wmzy.github.io/haze-ui/blocks</loc></url>
|
|
7
8
|
<url><loc>https://wmzy.github.io/haze-ui/guides/dark-mode</loc></url>
|
|
8
9
|
<url><loc>https://wmzy.github.io/haze-ui/guides/density</loc></url>
|
|
9
10
|
<url><loc>https://wmzy.github.io/haze-ui/guides/a11y</loc></url>
|
|
10
11
|
<url><loc>https://wmzy.github.io/haze-ui/guides/a11y-contracts</loc></url>
|
|
12
|
+
<url><loc>https://wmzy.github.io/haze-ui/guides/a11y-statement</loc></url>
|
|
11
13
|
<url><loc>https://wmzy.github.io/haze-ui/guides/migration</loc></url>
|
|
14
|
+
<url><loc>https://wmzy.github.io/haze-ui/guides/deprecation-policy</loc></url>
|
|
12
15
|
<url><loc>https://wmzy.github.io/haze-ui/guides/streaming-a11y</loc></url>
|
|
13
16
|
<url><loc>https://wmzy.github.io/haze-ui/guides/motion</loc></url>
|
|
14
17
|
<url><loc>https://wmzy.github.io/haze-ui/guides/figma-tokens</loc></url>
|
|
@@ -28,6 +31,7 @@
|
|
|
28
31
|
<url><loc>https://wmzy.github.io/haze-ui/components/tooltip</loc></url>
|
|
29
32
|
<url><loc>https://wmzy.github.io/haze-ui/components/popconfirm</loc></url>
|
|
30
33
|
<url><loc>https://wmzy.github.io/haze-ui/components/popover</loc></url>
|
|
34
|
+
<url><loc>https://wmzy.github.io/haze-ui/components/notification-center</loc></url>
|
|
31
35
|
<url><loc>https://wmzy.github.io/haze-ui/components/card</loc></url>
|
|
32
36
|
<url><loc>https://wmzy.github.io/haze-ui/components/radio</loc></url>
|
|
33
37
|
<url><loc>https://wmzy.github.io/haze-ui/components/textarea</loc></url>
|
|
@@ -68,6 +72,7 @@
|
|
|
68
72
|
<url><loc>https://wmzy.github.io/haze-ui/components/chat-container</loc></url>
|
|
69
73
|
<url><loc>https://wmzy.github.io/haze-ui/components/chat-input</loc></url>
|
|
70
74
|
<url><loc>https://wmzy.github.io/haze-ui/components/streaming-text</loc></url>
|
|
75
|
+
<url><loc>https://wmzy.github.io/haze-ui/components/task-list</loc></url>
|
|
71
76
|
<url><loc>https://wmzy.github.io/haze-ui/components/markdown-renderer</loc></url>
|
|
72
77
|
<url><loc>https://wmzy.github.io/haze-ui/components/tool-call-card</loc></url>
|
|
73
78
|
<url><loc>https://wmzy.github.io/haze-ui/components/thinking-indicator</loc></url>
|
|
@@ -140,6 +145,7 @@
|
|
|
140
145
|
<url><loc>https://wmzy.github.io/haze-ui/components/schedule</loc></url>
|
|
141
146
|
<url><loc>https://wmzy.github.io/haze-ui/components/sources</loc></url>
|
|
142
147
|
<url><loc>https://wmzy.github.io/haze-ui/components/file-preview</loc></url>
|
|
148
|
+
<url><loc>https://wmzy.github.io/haze-ui/components/follow-up-suggestions</loc></url>
|
|
143
149
|
<url><loc>https://wmzy.github.io/haze-ui/components/inline-completion</loc></url>
|
|
144
150
|
<url><loc>https://wmzy.github.io/haze-ui/components/float-button</loc></url>
|
|
145
151
|
<url><loc>https://wmzy.github.io/haze-ui/components/masonry</loc></url>
|
package/dist/tokens/index.js
CHANGED
|
@@ -5,4 +5,5 @@ import { spacing as f } from "./spacing.js";
|
|
|
5
5
|
import { compact as p } from "./density.js";
|
|
6
6
|
import { typography as m } from "./typography.js";
|
|
7
7
|
import { motion as h, motionPresets as g } from "./motion.js";
|
|
8
|
-
|
|
8
|
+
import { remScale as _ } from "./zoom.js";
|
|
9
|
+
export { l as PRIMITIVES, u as SEMANTIC_COLOR_TOKENS, e as autoTheme, p as compact, d as createBrandTheme, t as darkTheme, r as deltaE, i as formatOklch, n as lightTheme, h as motion, g as motionPresets, a as oklchToHex, o as parseHex, s as parseOklch, _ as remScale, f as spacing, m as typography, c as wcagContrast };
|
|
@@ -5,6 +5,8 @@ export type AnchorItem = {
|
|
|
5
5
|
id: string;
|
|
6
6
|
/** Link content. */
|
|
7
7
|
label: ReactNode;
|
|
8
|
+
/** Nested second-level items, rendered as an indented sub-list. */
|
|
9
|
+
children?: AnchorItem[];
|
|
8
10
|
};
|
|
9
11
|
type AnchorProps = {
|
|
10
12
|
/** Anchor sections, in document order. */
|
|
@@ -19,7 +21,9 @@ type AnchorProps = {
|
|
|
19
21
|
bounds?: number;
|
|
20
22
|
/** Scroll container; defaults to `window`. */
|
|
21
23
|
getContainer?: () => HTMLElement | Window;
|
|
24
|
+
/** Renders a sliding indicator line along the active item (transform transition; no transition under prefers-reduced-motion). Default `false`. */
|
|
25
|
+
indicator?: boolean;
|
|
22
26
|
className?: string;
|
|
23
27
|
} & Omit<ComponentPropsWithoutRef<'nav'>, 'className' | 'onClick' | 'children'>;
|
|
24
|
-
export default function Anchor({ items, activeId: activeIdControl, onClick, offsetTop, bounds, getContainer, className, ...rest }: AnchorProps): import("react").JSX.Element;
|
|
28
|
+
export default function Anchor({ items, activeId: activeIdControl, onClick, indicator, offsetTop, bounds, getContainer, className, ...rest }: AnchorProps): import("react").JSX.Element;
|
|
25
29
|
export type { AnchorProps };
|
|
@@ -1,7 +1,25 @@
|
|
|
1
|
-
type
|
|
1
|
+
import type { ComponentPropsWithRef, ElementType, MouseEvent } from 'react';
|
|
2
|
+
type BackToTopOwnProps = {
|
|
3
|
+
/** Scroll offset that reveals the button, px. Defaults to 300. */
|
|
2
4
|
threshold?: number;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Element-agnostic click: whatever element `as` rendered, the
|
|
7
|
+
* consumer's handler fires first — the scroll-to-top wiring rides
|
|
8
|
+
* after it.
|
|
9
|
+
*/
|
|
10
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
5
11
|
};
|
|
6
|
-
|
|
7
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Polymorphic like Button's `as`: the fixed-corner skin, the scroll
|
|
14
|
+
* watching and the scroll-to-top click wiring always land on the
|
|
15
|
+
* rendered element — `as='a' href='#top'` keeps link semantics (⌘/
|
|
16
|
+
* middle-click, crawlers) while a click still scrolls. `type='button'`
|
|
17
|
+
* is gated to the native-button shape.
|
|
18
|
+
*/
|
|
19
|
+
type BackToTopProps<T extends ElementType = 'button'> = BackToTopOwnProps & {
|
|
20
|
+
/** Render element — 'button' (default), 'a', or any component that
|
|
21
|
+
* forwards props and ref to a DOM element. */
|
|
22
|
+
as?: T;
|
|
23
|
+
} & Omit<ComponentPropsWithRef<T>, keyof BackToTopOwnProps | 'as' | 'type'>;
|
|
24
|
+
export default function BackToTop<T extends ElementType = 'button'>({ threshold, as, className, children, onClick, ...rest }: BackToTopProps<T>): import("react").JSX.Element;
|
|
25
|
+
export type { BackToTopOwnProps, BackToTopProps };
|
|
@@ -54,6 +54,22 @@ type ComboboxProps<T extends string | number = string> = {
|
|
|
54
54
|
* selected chip.
|
|
55
55
|
*/
|
|
56
56
|
multiple?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Multiple mode only: cap the selectable count. Once the selection
|
|
59
|
+
* reaches `maxCount`, options that are not selected are disabled —
|
|
60
|
+
* dimmed, `aria-disabled`, clicks and Enter rejected — until
|
|
61
|
+
* something is deselected (selected options stay removable, and the
|
|
62
|
+
* creatable row is suppressed at the cap). Works the same
|
|
63
|
+
* controlled and uncontrolled; single mode ignores it.
|
|
64
|
+
*/
|
|
65
|
+
maxCount?: number;
|
|
66
|
+
/**
|
|
67
|
+
* Multiple mode only: cap the rendered chips; the rest collapse into
|
|
68
|
+
* a `+N` badge whose `title` tooltip lists the overflow labels.
|
|
69
|
+
* Selection semantics are unchanged — the badge is presentational
|
|
70
|
+
* (removal stays through the panel, a chip's ×, or Backspace).
|
|
71
|
+
*/
|
|
72
|
+
maxTagCount?: number;
|
|
57
73
|
/**
|
|
58
74
|
* Value callback for both modes — `T` in single mode, `T[]` when
|
|
59
75
|
* `multiple` is set — fired after the value updates.
|
|
@@ -138,5 +154,5 @@ type ComboboxProps<T extends string | number = string> = {
|
|
|
138
154
|
*/
|
|
139
155
|
ref?: Ref<HTMLInputElement>;
|
|
140
156
|
};
|
|
141
|
-
export default function Combobox<T extends string | number = string>({ value: valueControl, open: openControl, options, children, multiple, onValuesChange, creatable, onCreate, onSearch, loading, empty, highlightMatches, maxHeight, placeholder, virtualThreshold, virtualized: virtualizedProp, className, classNames, ref, }: ComboboxProps<T>): import("react").JSX.Element;
|
|
157
|
+
export default function Combobox<T extends string | number = string>({ value: valueControl, open: openControl, options, children, multiple, maxCount, maxTagCount, onValuesChange, creatable, onCreate, onSearch, loading, empty, highlightMatches, maxHeight, placeholder, virtualThreshold, virtualized: virtualizedProp, className, classNames, ref, }: ComboboxProps<T>): import("react").JSX.Element;
|
|
142
158
|
export type { ComboboxClassNames, ComboboxProps, ComboboxVirtualizedConfig, ComboboxOptionData };
|
|
@@ -3,6 +3,7 @@ import type { SelectClassNames } from '../Select/Select.js';
|
|
|
3
3
|
import type { ComboboxClassNames } from '../Combobox/Combobox.js';
|
|
4
4
|
import type { TagGroupClassNames } from '../TagGroup/TagGroup.js';
|
|
5
5
|
import type { MenuClassNames } from '../Menu/MenuContext.js';
|
|
6
|
+
import type { NotificationCenterClassNames } from '../NotificationCenter/NotificationCenter.js';
|
|
6
7
|
import type { ToastPlacement } from '../Toast/ToastContainer.js';
|
|
7
8
|
import type { CalendarPickerMode } from '../Calendar/Calendar.js';
|
|
8
9
|
import type { TimePickerFormat } from '../TimePicker/time.js';
|
|
@@ -112,6 +113,11 @@ type ComponentDefaultsSections = {
|
|
|
112
113
|
Menu: {
|
|
113
114
|
classNames?: MenuClassNames;
|
|
114
115
|
};
|
|
116
|
+
/** `NotificationCenter` slot classes — merged under an explicit
|
|
117
|
+
* `classNames` prop. */
|
|
118
|
+
NotificationCenter: {
|
|
119
|
+
classNames?: NotificationCenterClassNames;
|
|
120
|
+
};
|
|
115
121
|
/** `Pagination` prop defaults. */
|
|
116
122
|
Pagination: {
|
|
117
123
|
/** Default `size` when the prop is omitted (built-in `'md'`). */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
1
|
+
import type { ElementType, MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import type { ButtonProps } from '../Button/index.js';
|
|
3
3
|
/** Semantic slot classes for CopyButton (AntD v6 `classNames` shape;
|
|
4
4
|
* keys follow the data-slot names). */
|
|
@@ -23,15 +23,27 @@ type CopyButtonOwnProps = {
|
|
|
23
23
|
copiedLabel?: string;
|
|
24
24
|
/** Slot classes (see {@link CopyButtonClassNames}). */
|
|
25
25
|
classNames?: CopyButtonClassNames;
|
|
26
|
+
/**
|
|
27
|
+
* Element-agnostic click: whatever element `as` rendered, the
|
|
28
|
+
* consumer's handler fires first — the copy wiring rides after it.
|
|
29
|
+
*/
|
|
30
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
26
31
|
};
|
|
27
|
-
type CopyButtonProps = CopyButtonOwnProps & {
|
|
32
|
+
type CopyButtonProps<T extends ElementType = 'button'> = CopyButtonOwnProps & {
|
|
28
33
|
/**
|
|
29
34
|
* Icon or label. Defaults to the copy/check glyph pair; a function
|
|
30
35
|
* receives the copied state so text labels can switch their own
|
|
31
36
|
* wording (`(copied) => copied ? 'Copied!' : 'Copy'`).
|
|
32
37
|
*/
|
|
33
38
|
children?: ReactNode | ((copied: boolean) => ReactNode);
|
|
34
|
-
|
|
39
|
+
/**
|
|
40
|
+
* Render element, delegated to the underlying `Button`'s polymorphism:
|
|
41
|
+
* `as='a'` renders a real anchor wearing the copy skin (`href` and the
|
|
42
|
+
* rest of the anchor surface type-check), any component works as long
|
|
43
|
+
* as it forwards props and ref to a DOM element.
|
|
44
|
+
*/
|
|
45
|
+
as?: T;
|
|
46
|
+
} & Omit<ButtonProps<T>, keyof CopyButtonOwnProps | 'children' | 'as'>;
|
|
35
47
|
/**
|
|
36
48
|
* A `Button` that copies text to the clipboard on click and flips into
|
|
37
49
|
* a copied state for `copiedTimeout` ms (default 2000): the glyph
|
|
@@ -52,5 +64,5 @@ type CopyButtonProps = CopyButtonOwnProps & {
|
|
|
52
64
|
* `aria-label` passed through the rest props overrides the swapped
|
|
53
65
|
* `copyLabel`/`copiedLabel` naming (statically, for both states).
|
|
54
66
|
*/
|
|
55
|
-
export default function CopyButton({ value, getValue, copiedTimeout, copyLabel, copiedLabel, variant, square, size, classNames, className, children, onClick, ...rest }: CopyButtonProps): import("react").JSX.Element;
|
|
67
|
+
export default function CopyButton<T extends ElementType = 'button'>({ value, getValue, copiedTimeout, copyLabel, copiedLabel, variant, square, size, classNames, className, as, children, onClick, ...rest }: CopyButtonProps<T>): import("react").JSX.Element;
|
|
56
68
|
export type { CopyButtonClassNames, CopyButtonProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
1
|
+
import type { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, MouseEvent, ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* A floating action button pinned to the inline-end / block-end screen
|
|
4
4
|
* corner — the "primary action" affordance material design popularized.
|
|
@@ -25,7 +25,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
|
25
25
|
* An icon-only FloatButton has no accessible name — pass `aria-label`
|
|
26
26
|
* (it spreads through like any native attribute) or a `description`.
|
|
27
27
|
*/
|
|
28
|
-
type
|
|
28
|
+
type FloatButtonOwnProps = {
|
|
29
29
|
/** Icon slot; defaults to a plus glyph. Purely decorative (hidden
|
|
30
30
|
* from AT) — the accessible name comes from `description` or
|
|
31
31
|
* `aria-label`. */
|
|
@@ -38,6 +38,26 @@ type FloatButtonProps = {
|
|
|
38
38
|
variant?: 'solid' | 'outline' | 'ghost';
|
|
39
39
|
/** Render an anchor navigating to this URL instead of a button. */
|
|
40
40
|
href?: string;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
/**
|
|
42
|
+
* Element-agnostic click: whatever element `as` rendered, the
|
|
43
|
+
* consumer's handler fires first — the group's close-menu wiring
|
|
44
|
+
* rides after it.
|
|
45
|
+
*/
|
|
46
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Polymorphic like Button's `as`: the FAB skin, the group wiring and
|
|
50
|
+
* the fixed anchor always land on the rendered element. `as` wins over
|
|
51
|
+
* the href duality's element choice (`as='a'` plus `href`, or a router
|
|
52
|
+
* Link component); without `as`, `href` alone still renders an anchor —
|
|
53
|
+
* the long-standing shape. `type='button'` is gated to the
|
|
54
|
+
* native-button shape, so anchors never carry it.
|
|
55
|
+
*/
|
|
56
|
+
type FloatButtonProps<T extends ElementType = 'button'> = FloatButtonOwnProps & {
|
|
57
|
+
/** Render element — overrides the href duality's button/anchor
|
|
58
|
+
* choice; any component that forwards props and ref to a DOM element
|
|
59
|
+
* works (a router Link is the canonical case). */
|
|
60
|
+
as?: T;
|
|
61
|
+
} & Omit<ComponentPropsWithRef<T>, keyof FloatButtonOwnProps | 'as' | 'type'> & Omit<ComponentPropsWithoutRef<'a'>, keyof FloatButtonOwnProps | 'children' | 'type' | 'onClick' | 'className'>;
|
|
62
|
+
export default function FloatButton<T extends ElementType = 'button'>({ icon, description, shape, variant, href, as, className, onClick, ...rest }: FloatButtonProps<T>): import("react").JSX.Element;
|
|
63
|
+
export type { FloatButtonOwnProps, FloatButtonProps };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { ComponentPropsWithoutRef, Ref } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* AI chat follow-up suggestions ("猜你想问"): a horizontally wrapping
|
|
4
|
+
* row of clickable prompt chips shown after an answer. Chips wear
|
|
5
|
+
* Button's outline sm skin — Chip is display-only (a span), so Button
|
|
6
|
+
* supplies the native button semantics keyboard users need. Stateless:
|
|
7
|
+
* the caller owns the selection flow via `onSelect`.
|
|
8
|
+
*/
|
|
9
|
+
type FollowUpSuggestionsProps = {
|
|
10
|
+
/** Candidate prompts; one chip per entry, rendered in order. */
|
|
11
|
+
suggestions: string[];
|
|
12
|
+
/** Fired with the clicked chip's text. */
|
|
13
|
+
onSelect?: (value: string) => void;
|
|
14
|
+
/** Disables every chip (pointer and keyboard). */
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Swaps the chips for skeleton placeholders — one per suggestion, or
|
|
18
|
+
* three when the list is still empty — so the row keeps its layout
|
|
19
|
+
* while the suggestions stream in.
|
|
20
|
+
*/
|
|
21
|
+
loading?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
/** Forwarded to the root list div. */
|
|
24
|
+
ref?: Ref<HTMLDivElement>;
|
|
25
|
+
} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onSelect'>;
|
|
26
|
+
export default function FollowUpSuggestions({ suggestions, onSelect, disabled, loading, className, ref, ...rest }: FollowUpSuggestionsProps): import("react").JSX.Element;
|
|
27
|
+
export type { FollowUpSuggestionsProps };
|
|
@@ -189,6 +189,15 @@ declare const defaultStrings: {
|
|
|
189
189
|
modelPicker: {
|
|
190
190
|
label: string;
|
|
191
191
|
};
|
|
192
|
+
notificationCenter: {
|
|
193
|
+
triggerLabel: string;
|
|
194
|
+
triggerLabelUnread: string;
|
|
195
|
+
panelTitle: string;
|
|
196
|
+
markAllRead: string;
|
|
197
|
+
clearAll: string;
|
|
198
|
+
empty: string;
|
|
199
|
+
unreadLabel: string;
|
|
200
|
+
};
|
|
192
201
|
numberInput: {
|
|
193
202
|
decrease: string;
|
|
194
203
|
increase: string;
|
|
@@ -1,42 +1,34 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ComponentPropsWithRef, ElementType, MouseEvent } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* Extends the native
|
|
4
|
-
*
|
|
5
|
-
*
|
|
3
|
+
* Extends the rendered element's native attributes (anchor by default):
|
|
4
|
+
* everything not listed below is spread onto it, so callers can inject
|
|
5
|
+
* `target`, `rel`, `aria-*`, and friends.
|
|
6
6
|
*/
|
|
7
|
-
type
|
|
7
|
+
type NavLinkOwnProps = {
|
|
8
8
|
href?: string;
|
|
9
9
|
/**
|
|
10
10
|
* Explicit active state. Falls back to `aria-current="page"` when omitted,
|
|
11
11
|
* letting routers drive highlighting through the standard aria attribute.
|
|
12
12
|
*/
|
|
13
13
|
active?: boolean;
|
|
14
|
-
children: ReactNode;
|
|
15
14
|
/**
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* button semantics (see the onClick handler below).
|
|
15
|
+
* Element-agnostic click: whatever element `as` rendered, the
|
|
16
|
+
* consumer's handler sees the event first — the placeholder-href
|
|
17
|
+
* `preventDefault` rides after it.
|
|
20
18
|
*/
|
|
21
|
-
onClick?: (event: MouseEvent<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
*/
|
|
38
|
-
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
39
|
-
className?: string;
|
|
40
|
-
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "children" | "className" | "onClick" | "href"> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
41
|
-
export default _default;
|
|
42
|
-
export type { NavLinkProps };
|
|
19
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Polymorphic like Button's `as` (the anchor default mirrors NavLink's
|
|
23
|
+
* native root): the link skin, the `aria-current` wiring and the
|
|
24
|
+
* placeholder-href click handling always land on the rendered element —
|
|
25
|
+
* `as` with a router Link keeps NavLink's active styling while the
|
|
26
|
+
* router owns navigation.
|
|
27
|
+
*/
|
|
28
|
+
type NavLinkProps<T extends ElementType = 'a'> = NavLinkOwnProps & {
|
|
29
|
+
/** Render element — 'a' (default) or any component that forwards
|
|
30
|
+
* props and ref to a DOM element (a router Link). */
|
|
31
|
+
as?: T;
|
|
32
|
+
} & Omit<ComponentPropsWithRef<T>, keyof NavLinkOwnProps | 'as'>;
|
|
33
|
+
export default function NavLink<T extends ElementType = 'a'>({ href, active, as, className, 'aria-current': ariaCurrent, onClick, children, ...rest }: NavLinkProps<T>): import("react").JSX.Element;
|
|
34
|
+
export type { NavLinkOwnProps, NavLinkProps };
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
|
|
2
|
+
import type { ControlOrValue } from 'react-use-control';
|
|
3
|
+
/**
|
|
4
|
+
* Persistent notification center: a bell trigger with an unread-count
|
|
5
|
+
* badge opening a floating panel that lists notifications — the durable
|
|
6
|
+
* counterpart to Toast's transient stack (AntD `notification` /
|
|
7
|
+
* Mantine `notifications` shape, declarative data instead of an
|
|
8
|
+
* imperative `open()` API: the `items` prop is the source of truth and
|
|
9
|
+
* `onMarkAllRead` / `onClearAll` hand the mutations back to the app).
|
|
10
|
+
*
|
|
11
|
+
* Panel positioning, light-dismiss and Escape ride the shared floating
|
|
12
|
+
* engine (`utils/floating.tsx`); keyboard navigation reuses the Menu
|
|
13
|
+
* system (`utils/menuKeyboard`) — arrows / Home / End / typeahead walk
|
|
14
|
+
* the rows and the footer actions as one roving list, Escape / Tab
|
|
15
|
+
* close and return focus to the trigger. No z-index is declared here:
|
|
16
|
+
* every tier the panel can render on already resolves through the
|
|
17
|
+
* `tokens/z-index.ts` ladder inside the floating path classes.
|
|
18
|
+
*/
|
|
19
|
+
/** Semantic status of a notification — tints the kind icon. */
|
|
20
|
+
type NotificationCenterSeverity = 'info' | 'success' | 'warning' | 'danger';
|
|
21
|
+
/** Origin of a notification (the AI-workbench differentiation): picks
|
|
22
|
+
* the leading glyph through the shared `Icon` wrapper. */
|
|
23
|
+
type NotificationCenterKind = 'task' | 'agent' | 'system';
|
|
24
|
+
/** One notification entry of the data-driven `items` prop. */
|
|
25
|
+
type NotificationCenterItem = {
|
|
26
|
+
/** Stable identity (React key). */
|
|
27
|
+
key: string;
|
|
28
|
+
/** Primary line. */
|
|
29
|
+
title: ReactNode;
|
|
30
|
+
/** Secondary line under the title. */
|
|
31
|
+
description?: ReactNode;
|
|
32
|
+
/** Muted trailing line/label (already formatted — "2m ago"). */
|
|
33
|
+
timestamp?: ReactNode;
|
|
34
|
+
/** Status tint of the kind icon (built-in `'info'`). */
|
|
35
|
+
severity?: NotificationCenterSeverity;
|
|
36
|
+
/** Leading glyph (built-in `'system'`). */
|
|
37
|
+
kind?: NotificationCenterKind;
|
|
38
|
+
/** Read state — unread entries carry the dot accent and feed the
|
|
39
|
+
* trigger's badge count (built-in unread, like a fresh feed). */
|
|
40
|
+
read?: boolean;
|
|
41
|
+
};
|
|
42
|
+
/**
|
|
43
|
+
* Semantic slot classes (AntD v6 `classNames` shape), mirroring the
|
|
44
|
+
* data-slot names: consumer classes append at the end of each part's
|
|
45
|
+
* class list. A ConfigProvider `NotificationCenter.classNames` section
|
|
46
|
+
* merges under the prop, per key.
|
|
47
|
+
*/
|
|
48
|
+
type NotificationCenterClassNames = {
|
|
49
|
+
/** The wrapper `<span>` (`data-slot='notification-center'`). */
|
|
50
|
+
root?: string;
|
|
51
|
+
/** The bell `<button>` (`data-slot='trigger'`). */
|
|
52
|
+
trigger?: string;
|
|
53
|
+
/** The count badge wrapper (`data-slot='badge'`). */
|
|
54
|
+
badge?: string;
|
|
55
|
+
/** The floating panel (`data-slot='content'`). */
|
|
56
|
+
panel?: string;
|
|
57
|
+
/** The panel heading row (`data-slot='header'`). */
|
|
58
|
+
header?: string;
|
|
59
|
+
/** The heading itself (`data-slot='title'`). */
|
|
60
|
+
title?: string;
|
|
61
|
+
/** The list (`data-slot='list'`). */
|
|
62
|
+
list?: string;
|
|
63
|
+
/** Every notification row (`data-slot='notification-item'`). */
|
|
64
|
+
item?: string;
|
|
65
|
+
/** The kind/severity icon wrap (`data-slot='item-icon'`). */
|
|
66
|
+
itemIcon?: string;
|
|
67
|
+
/** A row's title/description column (`data-slot='item-body'`). */
|
|
68
|
+
itemBody?: string;
|
|
69
|
+
/** A row title (`data-slot='item-title'`). */
|
|
70
|
+
itemTitle?: string;
|
|
71
|
+
/** A row description (`data-slot='item-description'`). */
|
|
72
|
+
itemDescription?: string;
|
|
73
|
+
/** A row timestamp (`data-slot='item-timestamp'`). */
|
|
74
|
+
itemTimestamp?: string;
|
|
75
|
+
/** The unread dot (`data-slot='unread-dot'`). */
|
|
76
|
+
unreadDot?: string;
|
|
77
|
+
/** The footer action row (`data-slot='actions'`). */
|
|
78
|
+
actions?: string;
|
|
79
|
+
/** The mark-all-read button (`data-slot='mark-all-read'`). */
|
|
80
|
+
markAllRead?: string;
|
|
81
|
+
/** The clear-all button (`data-slot='clear-all'`). */
|
|
82
|
+
clearAll?: string;
|
|
83
|
+
/** The empty state (`data-slot='empty'`). */
|
|
84
|
+
empty?: string;
|
|
85
|
+
};
|
|
86
|
+
type NotificationCenterProps = {
|
|
87
|
+
/** The notification feed — declarative source of truth. */
|
|
88
|
+
items?: NotificationCenterItem[];
|
|
89
|
+
/** Panel visibility — controlled or uncontrolled, default closed. */
|
|
90
|
+
open?: ControlOrValue<boolean>;
|
|
91
|
+
/**
|
|
92
|
+
* Badge count ceiling: higher unread counts render as `{max}+`
|
|
93
|
+
* (built-in `99`; `0` keeps the badge rendered with a bare count).
|
|
94
|
+
*/
|
|
95
|
+
maxBadgeCount?: number;
|
|
96
|
+
/** Fires when the footer's mark-all-read is activated. */
|
|
97
|
+
onMarkAllRead?: () => void;
|
|
98
|
+
/** Fires when the footer's clear-all is activated. */
|
|
99
|
+
onClearAll?: () => void;
|
|
100
|
+
/**
|
|
101
|
+
* Slot classes (see {@link NotificationCenterClassNames}); merged
|
|
102
|
+
* over any ConfigProvider `NotificationCenter.classNames` section,
|
|
103
|
+
* per key.
|
|
104
|
+
*/
|
|
105
|
+
classNames?: NotificationCenterClassNames;
|
|
106
|
+
className?: string;
|
|
107
|
+
/** Forwarded to the root wrapper `<span>`. */
|
|
108
|
+
ref?: Ref<HTMLSpanElement>;
|
|
109
|
+
} & Omit<ComponentPropsWithoutRef<'span'>, 'className' | 'children'>;
|
|
110
|
+
export default function NotificationCenter({ items, open: openControl, maxBadgeCount, onMarkAllRead, onClearAll, classNames, className, ref, ...rest }: NotificationCenterProps): import("react").JSX.Element;
|
|
111
|
+
export type { NotificationCenterClassNames, NotificationCenterItem, NotificationCenterKind, NotificationCenterProps, NotificationCenterSeverity, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
|
|
1
|
+
import type { ComponentPropsWithRef, ElementType, KeyboardEvent as ReactKeyboardEvent, MouseEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
|
|
2
2
|
/** Document-tab status flavors — each maps to a dot color (see `TabStatusDot`). */
|
|
3
3
|
type TabStatus = 'dirty' | 'error' | 'syncing';
|
|
4
|
-
type
|
|
4
|
+
type TabOwnProps = {
|
|
5
5
|
value: string;
|
|
6
6
|
/**
|
|
7
7
|
* Inline-start icon slot, decorative (`aria-hidden`) — pair it with a
|
|
@@ -31,6 +31,12 @@ type TabProps = {
|
|
|
31
31
|
* tab is disabled stays the consumer's story to tell.
|
|
32
32
|
*/
|
|
33
33
|
disabled?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Element-agnostic click: whatever element the plain (non-closable)
|
|
36
|
+
* tab rendered — `button` by default, any `as` element otherwise —
|
|
37
|
+
* the consumer's handler fires first, selection wiring after it.
|
|
38
|
+
*/
|
|
39
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
34
40
|
/**
|
|
35
41
|
* Renders the × close affordance. Purely notifying: activating it
|
|
36
42
|
* calls `onClose` and nothing else — removing the tab from the
|
|
@@ -55,6 +61,22 @@ type TabProps = {
|
|
|
55
61
|
className?: string;
|
|
56
62
|
children: ReactNode;
|
|
57
63
|
};
|
|
64
|
+
/**
|
|
65
|
+
* Polymorphic like Button's `as`: the tab skin and the tablist wiring
|
|
66
|
+
* (`role='tab'`, `aria-selected`, the roving `tabIndex`, selection on
|
|
67
|
+
* click) always land on the rendered element — `as='a'` renders a
|
|
68
|
+
* link-shaped tab (tabs-as-routes) that keeps the strip's roving
|
|
69
|
+
* keyboard model. `type='button'` and the `disabled` attribute are
|
|
70
|
+
* gated to the native-button shape (anchors report through
|
|
71
|
+
* `aria-disabled`). Closable tabs keep their `div[role='tab']`
|
|
72
|
+
* promotion regardless — the nested × constraint dictates that shape.
|
|
73
|
+
*/
|
|
74
|
+
type TabProps<T extends ElementType = 'button'> = TabOwnProps & {
|
|
75
|
+
/** Render element for the plain (non-closable) tab — 'button'
|
|
76
|
+
* (default), 'a', or any component that forwards props and ref to a
|
|
77
|
+
* DOM element (a router Link). */
|
|
78
|
+
as?: T;
|
|
79
|
+
} & Omit<ComponentPropsWithRef<T>, keyof TabOwnProps | 'as' | 'type'>;
|
|
58
80
|
/**
|
|
59
81
|
* The decorative status dot shared by `Tab` and the TabList overflow
|
|
60
82
|
* menu. Color-only by design (`aria-hidden`) — the SR-visible meaning
|
|
@@ -63,5 +85,5 @@ type TabProps = {
|
|
|
63
85
|
export declare function TabStatusDot({ status }: {
|
|
64
86
|
status: TabStatus;
|
|
65
87
|
}): import("react").JSX.Element;
|
|
66
|
-
export default function Tab({ value, icon, status, statusLabel, closable, closeLabel, onClose, disabled, className, children, }: TabProps): import("react").JSX.Element;
|
|
67
|
-
export type { TabProps, TabStatus };
|
|
88
|
+
export default function Tab<T extends ElementType = 'button'>({ value, icon, status, statusLabel, closable, closeLabel, onClose, disabled, as, className, children, onClick, ...rest }: TabProps<T>): import("react").JSX.Element;
|
|
89
|
+
export type { TabOwnProps, TabProps, TabStatus };
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import type { ComponentPropsWithoutRef, Key, ReactNode } from 'react';
|
|
2
|
+
import type { ControlOrValue } from 'react-use-control';
|
|
3
|
+
type TaskListProps = {
|
|
4
|
+
/** `TaskList.Item` elements. */
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* Data-driven mode: renders one `TaskList.Item` per entry — the
|
|
8
|
+
* compound path underneath, so every entry keeps the full checkbox
|
|
9
|
+
* machinery (`useControl` wiring, completion styling). Mutually
|
|
10
|
+
* exclusive with compound `children`; when both are given, `items`
|
|
11
|
+
* wins and a dev-time console.error explains the conflict (the Tabs
|
|
12
|
+
* `items` precedent).
|
|
13
|
+
*/
|
|
14
|
+
items?: TaskData[];
|
|
15
|
+
className?: string;
|
|
16
|
+
} & Omit<ComponentPropsWithoutRef<'ul'>, 'children'>;
|
|
17
|
+
type TaskListItemProps = {
|
|
18
|
+
/** Completion state — controlled or uncontrolled, default `false`. */
|
|
19
|
+
checked?: ControlOrValue<boolean>;
|
|
20
|
+
/** Fires on every check transition, whatever drove it. */
|
|
21
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
22
|
+
/** Task summary; strikes through and dims once `checked`. */
|
|
23
|
+
title: ReactNode;
|
|
24
|
+
/** Secondary line under the title (agent output, links, timing). */
|
|
25
|
+
description?: ReactNode;
|
|
26
|
+
/** Replaces the default checkbox toggle — e.g. a `Spinner` for a
|
|
27
|
+
* running task. The row stops being interactive: no checkbox
|
|
28
|
+
* renders, the title keeps reflecting `checked`. */
|
|
29
|
+
indicator?: ReactNode;
|
|
30
|
+
/** Trailing affordances (copy/retry buttons), kept outside the
|
|
31
|
+
* toggle label so activating them never toggles the task. */
|
|
32
|
+
actions?: ReactNode;
|
|
33
|
+
className?: string;
|
|
34
|
+
} & Omit<ComponentPropsWithoutRef<'li'>, 'children' | 'title'>;
|
|
35
|
+
type TaskData = {
|
|
36
|
+
/** React key of the rendered item (the Tabs `value` precedent). */
|
|
37
|
+
key: Key;
|
|
38
|
+
checked?: ControlOrValue<boolean>;
|
|
39
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
40
|
+
title: ReactNode;
|
|
41
|
+
description?: ReactNode;
|
|
42
|
+
indicator?: ReactNode;
|
|
43
|
+
actions?: ReactNode;
|
|
44
|
+
className?: string;
|
|
45
|
+
};
|
|
46
|
+
declare function TaskListItem({ checked: checkedControl, onCheckedChange, title, description, indicator, actions, className, ...rest }: TaskListItemProps): import("react").JSX.Element;
|
|
47
|
+
declare function TaskList({ items, children, className, ...rest }: TaskListProps): import("react").JSX.Element;
|
|
48
|
+
export default TaskList;
|
|
49
|
+
export { TaskListItem };
|
|
50
|
+
export type { TaskListProps, TaskListItemProps, TaskData };
|