@hxdhxd/harmony-flow-ui 0.1.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/LICENSE +21 -0
- package/README.md +187 -0
- package/dist/index.cjs +3361 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +6312 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +1496 -0
- package/dist/index.d.ts +1496 -0
- package/dist/index.js +3200 -0
- package/dist/index.js.map +1 -0
- package/package.json +102 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,1496 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { CSSProperties, PropsWithChildren, HTMLAttributes, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, AnchorHTMLAttributes, ReactElement, SVGAttributes, SelectHTMLAttributes, FormEvent, TextareaHTMLAttributes, FormHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
interface ThemeTokens {
|
|
5
|
+
colorPrimary: string;
|
|
6
|
+
colorPrimaryHover: string;
|
|
7
|
+
colorBackground: string;
|
|
8
|
+
colorSurface: string;
|
|
9
|
+
colorText: string;
|
|
10
|
+
colorTextMuted: string;
|
|
11
|
+
colorBorder: string;
|
|
12
|
+
radiusMd: string;
|
|
13
|
+
radiusLg: string;
|
|
14
|
+
shadowElevated: string;
|
|
15
|
+
motionDuration: string;
|
|
16
|
+
}
|
|
17
|
+
declare const defaultTheme: ThemeTokens;
|
|
18
|
+
declare const darkTheme: ThemeTokens;
|
|
19
|
+
declare const highContrastTheme: ThemeTokens;
|
|
20
|
+
declare function tokensToStyle(tokens: Partial<ThemeTokens>): CSSProperties;
|
|
21
|
+
|
|
22
|
+
interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
|
|
23
|
+
tokens?: Partial<ThemeTokens>;
|
|
24
|
+
mode?: 'light' | 'dark' | 'high-contrast';
|
|
25
|
+
}
|
|
26
|
+
declare function ThemeProvider({ children, tokens, mode, className, style, ...props }: PropsWithChildren<ThemeProviderProps>): react.JSX.Element;
|
|
27
|
+
|
|
28
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
29
|
+
variant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger';
|
|
30
|
+
size?: 'sm' | 'md' | 'lg';
|
|
31
|
+
shape?: 'rounded' | 'pill' | 'square';
|
|
32
|
+
fullWidth?: boolean;
|
|
33
|
+
loading?: boolean;
|
|
34
|
+
leadingIcon?: ReactNode;
|
|
35
|
+
trailingIcon?: ReactNode;
|
|
36
|
+
iconOnly?: boolean;
|
|
37
|
+
}
|
|
38
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
39
|
+
|
|
40
|
+
interface SplitButtonOption {
|
|
41
|
+
key: string;
|
|
42
|
+
label: ReactNode;
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
danger?: boolean;
|
|
45
|
+
}
|
|
46
|
+
interface SplitButtonProps extends Pick<ButtonProps, 'variant' | 'size' | 'disabled'> {
|
|
47
|
+
label: ReactNode;
|
|
48
|
+
options: readonly SplitButtonOption[];
|
|
49
|
+
onPrimaryAction: () => void;
|
|
50
|
+
onOptionSelect: (key: string) => void;
|
|
51
|
+
}
|
|
52
|
+
declare function SplitButton({ label, options, onPrimaryAction, onOptionSelect, variant, size, disabled }: SplitButtonProps): react.JSX.Element;
|
|
53
|
+
|
|
54
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
|
|
55
|
+
label?: string;
|
|
56
|
+
hint?: string;
|
|
57
|
+
error?: string;
|
|
58
|
+
prefix?: ReactNode;
|
|
59
|
+
}
|
|
60
|
+
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
|
|
61
|
+
|
|
62
|
+
interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
63
|
+
label: string;
|
|
64
|
+
}
|
|
65
|
+
declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
|
|
66
|
+
|
|
67
|
+
interface SegmentOption<T extends string> {
|
|
68
|
+
label: string;
|
|
69
|
+
value: T;
|
|
70
|
+
}
|
|
71
|
+
interface SegmentedControlProps<T extends string> {
|
|
72
|
+
label: string;
|
|
73
|
+
options: readonly SegmentOption<T>[];
|
|
74
|
+
value: T;
|
|
75
|
+
onChange: (value: T) => void;
|
|
76
|
+
className?: string;
|
|
77
|
+
}
|
|
78
|
+
declare function SegmentedControl<T extends string>({ label, options, value, onChange, className }: SegmentedControlProps<T>): react.JSX.Element;
|
|
79
|
+
|
|
80
|
+
interface CardProps extends HTMLAttributes<HTMLElement> {
|
|
81
|
+
title?: string;
|
|
82
|
+
eyebrow?: string;
|
|
83
|
+
action?: ReactNode;
|
|
84
|
+
interactive?: boolean;
|
|
85
|
+
}
|
|
86
|
+
declare function Card({ children, title, eyebrow, action, interactive, className, ...props }: PropsWithChildren<CardProps>): react.JSX.Element;
|
|
87
|
+
|
|
88
|
+
interface ModalProps {
|
|
89
|
+
open: boolean;
|
|
90
|
+
title: string;
|
|
91
|
+
children: ReactNode;
|
|
92
|
+
onClose: () => void;
|
|
93
|
+
footer?: ReactNode;
|
|
94
|
+
}
|
|
95
|
+
declare function Modal({ open, title, children, onClose, footer }: PropsWithChildren<ModalProps>): react.ReactPortal | null;
|
|
96
|
+
|
|
97
|
+
interface ToastProps {
|
|
98
|
+
open: boolean;
|
|
99
|
+
message: string;
|
|
100
|
+
tone?: 'success' | 'info' | 'error';
|
|
101
|
+
duration?: number;
|
|
102
|
+
onClose: () => void;
|
|
103
|
+
}
|
|
104
|
+
declare function Toast({ open, message, tone, duration, onClose }: ToastProps): react.ReactPortal | null;
|
|
105
|
+
|
|
106
|
+
declare function Divider({ orientation, label, className }: {
|
|
107
|
+
orientation?: 'horizontal' | 'vertical';
|
|
108
|
+
label?: ReactNode;
|
|
109
|
+
className?: string;
|
|
110
|
+
}): react.JSX.Element;
|
|
111
|
+
declare function Link({ external, className, children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
112
|
+
external?: boolean;
|
|
113
|
+
}): react.JSX.Element;
|
|
114
|
+
type Tone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
|
|
115
|
+
declare function Badge({ tone, dot, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
|
|
116
|
+
tone?: Tone;
|
|
117
|
+
dot?: boolean;
|
|
118
|
+
}): react.JSX.Element;
|
|
119
|
+
declare function Tag({ tone, onRemove, removeLabel, className, children, ...props }: HTMLAttributes<HTMLSpanElement> & {
|
|
120
|
+
tone?: Tone;
|
|
121
|
+
onRemove?: () => void;
|
|
122
|
+
removeLabel?: string;
|
|
123
|
+
}): react.JSX.Element;
|
|
124
|
+
declare function Avatar({ src, name, alt, size, status, className }: {
|
|
125
|
+
src?: string;
|
|
126
|
+
name: string;
|
|
127
|
+
alt?: string;
|
|
128
|
+
size?: 'sm' | 'md' | 'lg';
|
|
129
|
+
status?: 'online' | 'busy' | 'away';
|
|
130
|
+
className?: string;
|
|
131
|
+
}): react.JSX.Element;
|
|
132
|
+
|
|
133
|
+
interface AccordionItem {
|
|
134
|
+
key: string;
|
|
135
|
+
title: ReactNode;
|
|
136
|
+
content: ReactNode;
|
|
137
|
+
disabled?: boolean;
|
|
138
|
+
}
|
|
139
|
+
interface AccordionProps {
|
|
140
|
+
items: readonly AccordionItem[];
|
|
141
|
+
value?: readonly string[];
|
|
142
|
+
defaultValue?: readonly string[];
|
|
143
|
+
onChange?: (keys: string[]) => void;
|
|
144
|
+
multiple?: boolean;
|
|
145
|
+
}
|
|
146
|
+
declare function Accordion({ items, value, defaultValue, onChange, multiple }: AccordionProps): react.JSX.Element;
|
|
147
|
+
|
|
148
|
+
interface DropdownItem {
|
|
149
|
+
key: string;
|
|
150
|
+
label: ReactNode;
|
|
151
|
+
icon?: ReactNode;
|
|
152
|
+
description?: ReactNode;
|
|
153
|
+
disabled?: boolean;
|
|
154
|
+
danger?: boolean;
|
|
155
|
+
separatorBefore?: boolean;
|
|
156
|
+
}
|
|
157
|
+
interface DropdownProps {
|
|
158
|
+
trigger: ReactElement;
|
|
159
|
+
items: readonly DropdownItem[];
|
|
160
|
+
onSelect: (key: string) => void;
|
|
161
|
+
placement?: 'left' | 'right';
|
|
162
|
+
label?: string;
|
|
163
|
+
}
|
|
164
|
+
declare function Dropdown({ trigger, items, onSelect, placement, label }: DropdownProps): react.JSX.Element;
|
|
165
|
+
|
|
166
|
+
interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
167
|
+
label: string;
|
|
168
|
+
icon: ReactNode;
|
|
169
|
+
variant?: 'primary' | 'secondary' | 'quiet' | 'danger';
|
|
170
|
+
size?: 'sm' | 'md' | 'lg';
|
|
171
|
+
}
|
|
172
|
+
declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
173
|
+
|
|
174
|
+
declare function ButtonGroup({ children, orientation, attached, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLDivElement> & {
|
|
175
|
+
orientation?: 'horizontal' | 'vertical';
|
|
176
|
+
attached?: boolean;
|
|
177
|
+
}>): react.JSX.Element;
|
|
178
|
+
interface ColorPickerProps {
|
|
179
|
+
value: string;
|
|
180
|
+
onChange: (value: string) => void;
|
|
181
|
+
label?: string;
|
|
182
|
+
presets?: readonly string[];
|
|
183
|
+
disabled?: boolean;
|
|
184
|
+
}
|
|
185
|
+
declare function ColorPicker({ value, onChange, label, presets, disabled }: ColorPickerProps): react.JSX.Element;
|
|
186
|
+
interface ContextMenuProps {
|
|
187
|
+
items: readonly DropdownItem[];
|
|
188
|
+
onSelect: (key: string) => void;
|
|
189
|
+
label?: string;
|
|
190
|
+
}
|
|
191
|
+
declare function ContextMenu({ items, onSelect, label, children }: PropsWithChildren<ContextMenuProps>): react.JSX.Element;
|
|
192
|
+
|
|
193
|
+
interface RichTextEditorProps {
|
|
194
|
+
value: string;
|
|
195
|
+
onChange: (html: string) => void;
|
|
196
|
+
label?: string;
|
|
197
|
+
placeholder?: string;
|
|
198
|
+
disabled?: boolean;
|
|
199
|
+
}
|
|
200
|
+
declare function RichTextEditor({ value, onChange, label, placeholder, disabled }: RichTextEditorProps): react.JSX.Element;
|
|
201
|
+
interface MentionOption {
|
|
202
|
+
value: string;
|
|
203
|
+
label: string;
|
|
204
|
+
description?: string;
|
|
205
|
+
}
|
|
206
|
+
interface MentionInputProps {
|
|
207
|
+
value: string;
|
|
208
|
+
onChange: (value: string) => void;
|
|
209
|
+
options: readonly MentionOption[];
|
|
210
|
+
label?: string;
|
|
211
|
+
placeholder?: string;
|
|
212
|
+
disabled?: boolean;
|
|
213
|
+
}
|
|
214
|
+
declare function MentionInput({ value, onChange, options, label, placeholder, disabled }: MentionInputProps): react.JSX.Element;
|
|
215
|
+
interface CodeEditorProps {
|
|
216
|
+
value: string;
|
|
217
|
+
onChange: (value: string) => void;
|
|
218
|
+
language?: string;
|
|
219
|
+
label?: string;
|
|
220
|
+
readOnly?: boolean;
|
|
221
|
+
height?: number;
|
|
222
|
+
}
|
|
223
|
+
declare function CodeEditor({ value, onChange, language, label, readOnly, height }: CodeEditorProps): react.JSX.Element;
|
|
224
|
+
|
|
225
|
+
interface ChatMessageProps {
|
|
226
|
+
role: 'user' | 'assistant' | 'system';
|
|
227
|
+
children: ReactNode;
|
|
228
|
+
avatar?: ReactNode;
|
|
229
|
+
name?: ReactNode;
|
|
230
|
+
timestamp?: ReactNode;
|
|
231
|
+
actions?: ReactNode;
|
|
232
|
+
streaming?: boolean;
|
|
233
|
+
error?: ReactNode;
|
|
234
|
+
}
|
|
235
|
+
declare function ChatMessage({ role, children, avatar, name, timestamp, actions, streaming, error }: ChatMessageProps): react.JSX.Element;
|
|
236
|
+
interface ChatAttachment {
|
|
237
|
+
id: string;
|
|
238
|
+
name: string;
|
|
239
|
+
size?: string;
|
|
240
|
+
icon?: ReactNode;
|
|
241
|
+
}
|
|
242
|
+
interface ChatComposerProps {
|
|
243
|
+
value: string;
|
|
244
|
+
onChange: (value: string) => void;
|
|
245
|
+
onSend: (value: string) => void;
|
|
246
|
+
attachments?: readonly ChatAttachment[];
|
|
247
|
+
onRemoveAttachment?: (id: string) => void;
|
|
248
|
+
onAttach?: () => void;
|
|
249
|
+
placeholder?: string;
|
|
250
|
+
disabled?: boolean;
|
|
251
|
+
sending?: boolean;
|
|
252
|
+
footer?: ReactNode;
|
|
253
|
+
maxLength?: number;
|
|
254
|
+
}
|
|
255
|
+
declare function ChatComposer({ value, onChange, onSend, attachments, onRemoveAttachment, onAttach, placeholder, disabled, sending, footer, maxLength }: ChatComposerProps): react.JSX.Element;
|
|
256
|
+
interface PromptSuggestion {
|
|
257
|
+
id: string;
|
|
258
|
+
title: ReactNode;
|
|
259
|
+
description?: ReactNode;
|
|
260
|
+
icon?: ReactNode;
|
|
261
|
+
prompt?: string;
|
|
262
|
+
}
|
|
263
|
+
interface PromptSuggestionsProps {
|
|
264
|
+
items: readonly PromptSuggestion[];
|
|
265
|
+
onSelect: (item: PromptSuggestion) => void;
|
|
266
|
+
title?: ReactNode;
|
|
267
|
+
columns?: 1 | 2 | 3;
|
|
268
|
+
}
|
|
269
|
+
declare function PromptSuggestions({ items, onSelect, title, columns }: PromptSuggestionsProps): react.JSX.Element;
|
|
270
|
+
type ToolCallStatus = 'queued' | 'running' | 'success' | 'error' | 'cancelled';
|
|
271
|
+
interface ToolCallCardProps {
|
|
272
|
+
name: ReactNode;
|
|
273
|
+
status: ToolCallStatus;
|
|
274
|
+
description?: ReactNode;
|
|
275
|
+
input?: ReactNode;
|
|
276
|
+
output?: ReactNode;
|
|
277
|
+
duration?: ReactNode;
|
|
278
|
+
icon?: ReactNode;
|
|
279
|
+
defaultExpanded?: boolean;
|
|
280
|
+
onRetry?: () => void;
|
|
281
|
+
onCancel?: () => void;
|
|
282
|
+
}
|
|
283
|
+
declare function ToolCallCard({ name, status, description, input, output, duration, icon, defaultExpanded, onRetry, onCancel }: ToolCallCardProps): react.JSX.Element;
|
|
284
|
+
interface CitationItem {
|
|
285
|
+
id: string;
|
|
286
|
+
title: ReactNode;
|
|
287
|
+
url?: string;
|
|
288
|
+
source?: ReactNode;
|
|
289
|
+
excerpt?: ReactNode;
|
|
290
|
+
favicon?: ReactNode;
|
|
291
|
+
}
|
|
292
|
+
interface CitationListProps {
|
|
293
|
+
items: readonly CitationItem[];
|
|
294
|
+
title?: ReactNode;
|
|
295
|
+
onSelect?: (item: CitationItem) => void;
|
|
296
|
+
}
|
|
297
|
+
declare function CitationList({ items, title, onSelect }: CitationListProps): react.JSX.Element;
|
|
298
|
+
type AgentRunStatus = ToolCallStatus;
|
|
299
|
+
interface AgentRunStep {
|
|
300
|
+
id: string;
|
|
301
|
+
title: ReactNode;
|
|
302
|
+
status: AgentRunStatus;
|
|
303
|
+
description?: ReactNode;
|
|
304
|
+
timestamp?: ReactNode;
|
|
305
|
+
detail?: ReactNode;
|
|
306
|
+
}
|
|
307
|
+
interface AgentRunTimelineProps {
|
|
308
|
+
steps: readonly AgentRunStep[];
|
|
309
|
+
activeId?: string;
|
|
310
|
+
onSelect?: (id: string) => void;
|
|
311
|
+
label?: string;
|
|
312
|
+
}
|
|
313
|
+
declare function AgentRunTimeline({ steps, activeId, onSelect, label }: AgentRunTimelineProps): react.JSX.Element;
|
|
314
|
+
|
|
315
|
+
interface MarkdownContentProps {
|
|
316
|
+
content: string;
|
|
317
|
+
className?: string;
|
|
318
|
+
}
|
|
319
|
+
declare function MarkdownContent({ content, className }: MarkdownContentProps): react.JSX.Element;
|
|
320
|
+
interface CodeBlockProps {
|
|
321
|
+
code: string;
|
|
322
|
+
language?: string;
|
|
323
|
+
filename?: ReactNode;
|
|
324
|
+
wrap?: boolean;
|
|
325
|
+
showLineNumbers?: boolean;
|
|
326
|
+
onCopy?: (code: string) => void;
|
|
327
|
+
}
|
|
328
|
+
declare function CodeBlock({ code, language, filename, wrap, showLineNumbers, onCopy }: CodeBlockProps): react.JSX.Element;
|
|
329
|
+
interface VoiceInputProps {
|
|
330
|
+
state?: 'idle' | 'listening' | 'processing' | 'error';
|
|
331
|
+
duration?: string;
|
|
332
|
+
level?: number;
|
|
333
|
+
disabled?: boolean;
|
|
334
|
+
onStart?: () => void;
|
|
335
|
+
onStop?: () => void;
|
|
336
|
+
onCancel?: () => void;
|
|
337
|
+
error?: ReactNode;
|
|
338
|
+
}
|
|
339
|
+
declare function VoiceInput({ state, duration, level, disabled, onStart, onStop, onCancel, error }: VoiceInputProps): react.JSX.Element;
|
|
340
|
+
interface ModelOption {
|
|
341
|
+
id: string;
|
|
342
|
+
name: ReactNode;
|
|
343
|
+
description?: ReactNode;
|
|
344
|
+
icon?: ReactNode;
|
|
345
|
+
tags?: readonly string[];
|
|
346
|
+
disabled?: boolean;
|
|
347
|
+
}
|
|
348
|
+
interface ModelSelectorProps {
|
|
349
|
+
models: readonly ModelOption[];
|
|
350
|
+
value: string;
|
|
351
|
+
onChange: (id: string) => void;
|
|
352
|
+
label?: string;
|
|
353
|
+
disabled?: boolean;
|
|
354
|
+
}
|
|
355
|
+
declare function ModelSelector({ models, value, onChange, label, disabled }: ModelSelectorProps): react.JSX.Element;
|
|
356
|
+
interface ConversationBranchProps {
|
|
357
|
+
current: number;
|
|
358
|
+
total: number;
|
|
359
|
+
onChange: (index: number) => void;
|
|
360
|
+
label?: ReactNode;
|
|
361
|
+
}
|
|
362
|
+
declare function ConversationBranch({ current, total, onChange, label }: ConversationBranchProps): react.JSX.Element;
|
|
363
|
+
interface TokenUsageProps {
|
|
364
|
+
used: number;
|
|
365
|
+
limit: number;
|
|
366
|
+
input?: number;
|
|
367
|
+
output?: number;
|
|
368
|
+
cached?: number;
|
|
369
|
+
label?: ReactNode;
|
|
370
|
+
compact?: boolean;
|
|
371
|
+
}
|
|
372
|
+
declare function TokenUsage({ used, limit, input, output, cached, label, compact }: TokenUsageProps): react.JSX.Element;
|
|
373
|
+
|
|
374
|
+
type PresenceStatus = 'online' | 'away' | 'busy' | 'offline';
|
|
375
|
+
interface PresenceProps {
|
|
376
|
+
status: PresenceStatus;
|
|
377
|
+
label?: ReactNode;
|
|
378
|
+
showLabel?: boolean;
|
|
379
|
+
pulse?: boolean;
|
|
380
|
+
}
|
|
381
|
+
declare function Presence({ status, label, showLabel, pulse }: PresenceProps): react.JSX.Element;
|
|
382
|
+
interface AvatarGroupItem {
|
|
383
|
+
id: string;
|
|
384
|
+
name: string;
|
|
385
|
+
src?: string;
|
|
386
|
+
status?: Exclude<PresenceStatus, 'offline'>;
|
|
387
|
+
}
|
|
388
|
+
interface AvatarGroupProps {
|
|
389
|
+
items: readonly AvatarGroupItem[];
|
|
390
|
+
max?: number;
|
|
391
|
+
size?: 'sm' | 'md' | 'lg';
|
|
392
|
+
onMore?: () => void;
|
|
393
|
+
label?: string;
|
|
394
|
+
}
|
|
395
|
+
declare function AvatarGroup({ items, max, size, onMore, label }: AvatarGroupProps): react.JSX.Element;
|
|
396
|
+
interface CommentItem {
|
|
397
|
+
id: string;
|
|
398
|
+
author: {
|
|
399
|
+
name: string;
|
|
400
|
+
avatar?: string;
|
|
401
|
+
};
|
|
402
|
+
content: ReactNode;
|
|
403
|
+
timestamp?: ReactNode;
|
|
404
|
+
edited?: boolean;
|
|
405
|
+
reactions?: readonly {
|
|
406
|
+
emoji: string;
|
|
407
|
+
count: number;
|
|
408
|
+
active?: boolean;
|
|
409
|
+
}[];
|
|
410
|
+
replies?: readonly CommentItem[];
|
|
411
|
+
}
|
|
412
|
+
interface CommentThreadProps {
|
|
413
|
+
comments: readonly CommentItem[];
|
|
414
|
+
onReply?: (id: string, content: string) => void;
|
|
415
|
+
onReact?: (id: string, emoji: string) => void;
|
|
416
|
+
onDelete?: (id: string) => void;
|
|
417
|
+
empty?: ReactNode;
|
|
418
|
+
}
|
|
419
|
+
declare function CommentThread({ comments, onReply, onReact, onDelete, empty }: CommentThreadProps): react.JSX.Element;
|
|
420
|
+
interface ActivityItem {
|
|
421
|
+
id: string;
|
|
422
|
+
actor: ReactNode;
|
|
423
|
+
action: ReactNode;
|
|
424
|
+
target?: ReactNode;
|
|
425
|
+
timestamp?: ReactNode;
|
|
426
|
+
avatar?: ReactNode;
|
|
427
|
+
icon?: ReactNode;
|
|
428
|
+
detail?: ReactNode;
|
|
429
|
+
}
|
|
430
|
+
interface ActivityFeedProps {
|
|
431
|
+
items: readonly ActivityItem[];
|
|
432
|
+
grouped?: boolean;
|
|
433
|
+
empty?: ReactNode;
|
|
434
|
+
}
|
|
435
|
+
declare function ActivityFeed({ items, grouped, empty }: ActivityFeedProps): react.JSX.Element;
|
|
436
|
+
type ApprovalStatus = 'pending' | 'approved' | 'rejected' | 'skipped';
|
|
437
|
+
interface ApprovalStep {
|
|
438
|
+
id: string;
|
|
439
|
+
title: ReactNode;
|
|
440
|
+
approver?: ReactNode;
|
|
441
|
+
status: ApprovalStatus;
|
|
442
|
+
timestamp?: ReactNode;
|
|
443
|
+
comment?: ReactNode;
|
|
444
|
+
}
|
|
445
|
+
interface ApprovalFlowProps {
|
|
446
|
+
steps: readonly ApprovalStep[];
|
|
447
|
+
currentId?: string;
|
|
448
|
+
onApprove?: (id: string) => void;
|
|
449
|
+
onReject?: (id: string) => void;
|
|
450
|
+
orientation?: 'horizontal' | 'vertical';
|
|
451
|
+
}
|
|
452
|
+
declare function ApprovalFlow({ steps, currentId, onApprove, onReject, orientation }: ApprovalFlowProps): react.JSX.Element;
|
|
453
|
+
interface AuditEvent {
|
|
454
|
+
id: string;
|
|
455
|
+
timestamp: ReactNode;
|
|
456
|
+
actor: ReactNode;
|
|
457
|
+
action: ReactNode;
|
|
458
|
+
resource?: ReactNode;
|
|
459
|
+
result?: 'success' | 'failure' | 'warning';
|
|
460
|
+
ip?: ReactNode;
|
|
461
|
+
detail?: ReactNode;
|
|
462
|
+
}
|
|
463
|
+
interface AuditLogProps {
|
|
464
|
+
events: readonly AuditEvent[];
|
|
465
|
+
onSelect?: (id: string) => void;
|
|
466
|
+
empty?: ReactNode;
|
|
467
|
+
caption?: string;
|
|
468
|
+
}
|
|
469
|
+
declare function AuditLog({ events, onSelect, empty, caption }: AuditLogProps): react.JSX.Element;
|
|
470
|
+
|
|
471
|
+
interface FileItem {
|
|
472
|
+
id: string;
|
|
473
|
+
name: ReactNode;
|
|
474
|
+
type: 'folder' | 'file';
|
|
475
|
+
children?: readonly FileItem[];
|
|
476
|
+
size?: ReactNode;
|
|
477
|
+
modified?: ReactNode;
|
|
478
|
+
icon?: ReactNode;
|
|
479
|
+
}
|
|
480
|
+
declare function FileExplorer({ items, selectedId, onSelect, empty }: {
|
|
481
|
+
items: readonly FileItem[];
|
|
482
|
+
selectedId?: string;
|
|
483
|
+
onSelect?: (id: string) => void;
|
|
484
|
+
empty?: ReactNode;
|
|
485
|
+
}): react.JSX.Element;
|
|
486
|
+
declare function FilePreview({ name, type, children, size, modified, actions, empty }: {
|
|
487
|
+
name?: ReactNode;
|
|
488
|
+
type?: string;
|
|
489
|
+
children?: ReactNode;
|
|
490
|
+
size?: ReactNode;
|
|
491
|
+
modified?: ReactNode;
|
|
492
|
+
actions?: ReactNode;
|
|
493
|
+
empty?: ReactNode;
|
|
494
|
+
}): react.JSX.Element;
|
|
495
|
+
interface VersionItem {
|
|
496
|
+
id: string;
|
|
497
|
+
version: string;
|
|
498
|
+
author: {
|
|
499
|
+
name: string;
|
|
500
|
+
avatar?: string;
|
|
501
|
+
};
|
|
502
|
+
timestamp: ReactNode;
|
|
503
|
+
description?: ReactNode;
|
|
504
|
+
current?: boolean;
|
|
505
|
+
tags?: readonly string[];
|
|
506
|
+
}
|
|
507
|
+
declare function VersionHistory({ versions, selectedId, onSelect, onRestore }: {
|
|
508
|
+
versions: readonly VersionItem[];
|
|
509
|
+
selectedId?: string;
|
|
510
|
+
onSelect?: (id: string) => void;
|
|
511
|
+
onRestore?: (id: string) => void;
|
|
512
|
+
}): react.JSX.Element;
|
|
513
|
+
type PermissionLevel = 'none' | 'view' | 'comment' | 'edit' | 'admin';
|
|
514
|
+
interface PermissionSubject {
|
|
515
|
+
id: string;
|
|
516
|
+
name: ReactNode;
|
|
517
|
+
description?: ReactNode;
|
|
518
|
+
avatar?: ReactNode;
|
|
519
|
+
}
|
|
520
|
+
interface PermissionResource {
|
|
521
|
+
id: string;
|
|
522
|
+
name: ReactNode;
|
|
523
|
+
}
|
|
524
|
+
declare function PermissionMatrix({ subjects, resources, value, onChange, disabled }: {
|
|
525
|
+
subjects: readonly PermissionSubject[];
|
|
526
|
+
resources: readonly PermissionResource[];
|
|
527
|
+
value: Readonly<Record<string, Readonly<Record<string, PermissionLevel>>>>;
|
|
528
|
+
onChange: (subjectId: string, resourceId: string, level: PermissionLevel) => void;
|
|
529
|
+
disabled?: boolean;
|
|
530
|
+
}): react.JSX.Element;
|
|
531
|
+
interface MemberOption {
|
|
532
|
+
id: string;
|
|
533
|
+
name: string;
|
|
534
|
+
avatar?: string;
|
|
535
|
+
description?: ReactNode;
|
|
536
|
+
}
|
|
537
|
+
declare function MemberPicker({ members, value, onChange, label, disabled }: {
|
|
538
|
+
members: readonly MemberOption[];
|
|
539
|
+
value: readonly string[];
|
|
540
|
+
onChange: (ids: string[]) => void;
|
|
541
|
+
label?: string;
|
|
542
|
+
disabled?: boolean;
|
|
543
|
+
}): react.JSX.Element;
|
|
544
|
+
type ShareScope = 'restricted' | 'organization' | 'public';
|
|
545
|
+
declare function SharePanel({ scope, onScopeChange, members, onCopyLink, linkCopied, footer }: {
|
|
546
|
+
scope: ShareScope;
|
|
547
|
+
onScopeChange: (scope: ShareScope) => void;
|
|
548
|
+
members?: ReactNode;
|
|
549
|
+
onCopyLink?: () => void;
|
|
550
|
+
linkCopied?: boolean;
|
|
551
|
+
footer?: ReactNode;
|
|
552
|
+
}): react.JSX.Element;
|
|
553
|
+
|
|
554
|
+
interface ScheduleEvent {
|
|
555
|
+
id: string;
|
|
556
|
+
title: ReactNode;
|
|
557
|
+
start: string;
|
|
558
|
+
end: string;
|
|
559
|
+
color?: string;
|
|
560
|
+
resourceId?: string;
|
|
561
|
+
}
|
|
562
|
+
declare function EventCard({ event, onClick, }: {
|
|
563
|
+
event: ScheduleEvent;
|
|
564
|
+
onClick?: (id: string) => void;
|
|
565
|
+
}): react.JSX.Element;
|
|
566
|
+
declare function Scheduler({ days, events, onEventClick, }: {
|
|
567
|
+
days: readonly string[];
|
|
568
|
+
events: readonly ScheduleEvent[];
|
|
569
|
+
onEventClick?: (id: string) => void;
|
|
570
|
+
}): react.JSX.Element;
|
|
571
|
+
interface CalendarResource {
|
|
572
|
+
id: string;
|
|
573
|
+
name: ReactNode;
|
|
574
|
+
}
|
|
575
|
+
declare function ResourceCalendar({ resources, events, }: {
|
|
576
|
+
resources: readonly CalendarResource[];
|
|
577
|
+
events: readonly ScheduleEvent[];
|
|
578
|
+
}): react.JSX.Element;
|
|
579
|
+
interface RecurrenceValue {
|
|
580
|
+
frequency: "none" | "daily" | "weekly" | "monthly";
|
|
581
|
+
interval: number;
|
|
582
|
+
end?: string;
|
|
583
|
+
}
|
|
584
|
+
declare function RecurrenceEditor({ value, onChange, }: {
|
|
585
|
+
value: RecurrenceValue;
|
|
586
|
+
onChange: (v: RecurrenceValue) => void;
|
|
587
|
+
}): react.JSX.Element;
|
|
588
|
+
interface TimezoneOption {
|
|
589
|
+
value: string;
|
|
590
|
+
label: string;
|
|
591
|
+
offset: string;
|
|
592
|
+
}
|
|
593
|
+
declare function TimezoneSelect({ options, value, onChange, }: {
|
|
594
|
+
options: readonly TimezoneOption[];
|
|
595
|
+
value: string;
|
|
596
|
+
onChange: (v: string) => void;
|
|
597
|
+
}): react.JSX.Element;
|
|
598
|
+
type AvailabilityState = "available" | "busy" | "tentative" | "unavailable";
|
|
599
|
+
declare function AvailabilityGrid({ people, slots, value, }: {
|
|
600
|
+
people: readonly {
|
|
601
|
+
id: string;
|
|
602
|
+
name: ReactNode;
|
|
603
|
+
}[];
|
|
604
|
+
slots: readonly string[];
|
|
605
|
+
value: Readonly<Record<string, Readonly<Record<string, AvailabilityState>>>>;
|
|
606
|
+
}): react.JSX.Element;
|
|
607
|
+
|
|
608
|
+
type IconName = 'check' | 'close' | 'info' | 'warning' | 'error' | 'search' | 'chevron-down' | 'arrow-right' | 'user' | 'inbox';
|
|
609
|
+
interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {
|
|
610
|
+
name: IconName;
|
|
611
|
+
size?: number;
|
|
612
|
+
label?: string;
|
|
613
|
+
}
|
|
614
|
+
declare function Icon({ name, size, label, className, ...props }: IconProps): react.JSX.Element;
|
|
615
|
+
|
|
616
|
+
type TypographyVariant = 'display' | 'h1' | 'h2' | 'h3' | 'body' | 'body-sm' | 'caption' | 'code';
|
|
617
|
+
interface TypographyProps extends HTMLAttributes<HTMLElement> {
|
|
618
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'code';
|
|
619
|
+
variant?: TypographyVariant;
|
|
620
|
+
muted?: boolean;
|
|
621
|
+
truncate?: boolean;
|
|
622
|
+
}
|
|
623
|
+
declare function Typography({ as, variant, muted, truncate, className, ...props }: TypographyProps): react.JSX.Element;
|
|
624
|
+
|
|
625
|
+
interface NavigationItem {
|
|
626
|
+
key: string;
|
|
627
|
+
label: string;
|
|
628
|
+
href?: string;
|
|
629
|
+
icon?: ReactNode;
|
|
630
|
+
description?: string;
|
|
631
|
+
children?: readonly NavigationItem[];
|
|
632
|
+
}
|
|
633
|
+
interface NavigationSelectionProps {
|
|
634
|
+
activeKey?: string;
|
|
635
|
+
onItemSelect?: (item: NavigationItem) => void;
|
|
636
|
+
}
|
|
637
|
+
declare function activateNavigationItem(item: NavigationItem, onItemSelect?: (item: NavigationItem) => void): void;
|
|
638
|
+
|
|
639
|
+
interface FloatingNavProps extends HTMLAttributes<HTMLElement>, NavigationSelectionProps {
|
|
640
|
+
brand: ReactNode;
|
|
641
|
+
items: readonly NavigationItem[];
|
|
642
|
+
action?: ReactNode;
|
|
643
|
+
}
|
|
644
|
+
declare function FloatingNav({ brand, items, action, activeKey, onItemSelect, className, ...props }: FloatingNavProps): react.JSX.Element;
|
|
645
|
+
|
|
646
|
+
interface SidebarProps extends HTMLAttributes<HTMLElement>, NavigationSelectionProps {
|
|
647
|
+
brand?: ReactNode;
|
|
648
|
+
items: readonly NavigationItem[];
|
|
649
|
+
collapsed?: boolean;
|
|
650
|
+
defaultCollapsed?: boolean;
|
|
651
|
+
onCollapsedChange?: (collapsed: boolean) => void;
|
|
652
|
+
appearance?: 'flush' | 'floating' | 'inset';
|
|
653
|
+
}
|
|
654
|
+
declare function Sidebar({ brand, items, activeKey, collapsed, defaultCollapsed, onCollapsedChange, onItemSelect, appearance, className, ...props }: SidebarProps): react.JSX.Element;
|
|
655
|
+
|
|
656
|
+
interface BreadcrumbProps extends HTMLAttributes<HTMLElement>, NavigationSelectionProps {
|
|
657
|
+
items: readonly NavigationItem[];
|
|
658
|
+
separator?: string;
|
|
659
|
+
}
|
|
660
|
+
declare function Breadcrumb({ items, separator, onItemSelect, className, ...props }: BreadcrumbProps): react.JSX.Element;
|
|
661
|
+
|
|
662
|
+
interface BaseMenuProps extends HTMLAttributes<HTMLDivElement>, NavigationSelectionProps {
|
|
663
|
+
label: string;
|
|
664
|
+
items: readonly NavigationItem[];
|
|
665
|
+
}
|
|
666
|
+
declare function DropdownMenu({ label, items, activeKey, onItemSelect, className, ...props }: BaseMenuProps): react.JSX.Element;
|
|
667
|
+
declare function MegaMenu({ label, items, onItemSelect, className, ...props }: BaseMenuProps): react.JSX.Element;
|
|
668
|
+
|
|
669
|
+
interface MobileNavigationProps extends HTMLAttributes<HTMLDivElement>, NavigationSelectionProps {
|
|
670
|
+
brand: ReactNode;
|
|
671
|
+
items: readonly NavigationItem[];
|
|
672
|
+
mode?: 'drawer' | 'fullscreen';
|
|
673
|
+
open?: boolean;
|
|
674
|
+
onOpenChange?: (open: boolean) => void;
|
|
675
|
+
}
|
|
676
|
+
declare function MobileNavigation({ brand, items, mode, activeKey, open, onOpenChange, onItemSelect, className, ...props }: MobileNavigationProps): react.JSX.Element;
|
|
677
|
+
|
|
678
|
+
interface ScrollspyProps extends HTMLAttributes<HTMLElement>, NavigationSelectionProps {
|
|
679
|
+
items: readonly NavigationItem[];
|
|
680
|
+
rootMargin?: string;
|
|
681
|
+
}
|
|
682
|
+
declare function Scrollspy({ items, activeKey, onItemSelect, rootMargin, className, ...props }: ScrollspyProps): react.JSX.Element;
|
|
683
|
+
|
|
684
|
+
interface ShrinkNavProps extends HTMLAttributes<HTMLElement>, NavigationSelectionProps {
|
|
685
|
+
brand: ReactNode;
|
|
686
|
+
items: readonly NavigationItem[];
|
|
687
|
+
threshold?: number;
|
|
688
|
+
action?: ReactNode;
|
|
689
|
+
}
|
|
690
|
+
declare function ShrinkNav({ brand, items, threshold, action, activeKey, onItemSelect, className, ...props }: ShrinkNavProps): react.JSX.Element;
|
|
691
|
+
|
|
692
|
+
interface TabItem<T extends string = string> {
|
|
693
|
+
key: T;
|
|
694
|
+
label: ReactNode;
|
|
695
|
+
content: ReactNode;
|
|
696
|
+
badge?: ReactNode;
|
|
697
|
+
disabled?: boolean;
|
|
698
|
+
icon?: ReactNode;
|
|
699
|
+
}
|
|
700
|
+
interface TabsProps<T extends string = string> {
|
|
701
|
+
items: readonly TabItem<T>[];
|
|
702
|
+
value: T;
|
|
703
|
+
onChange: (value: T) => void;
|
|
704
|
+
variant?: 'line' | 'card' | 'pill' | 'underline' | 'vertical' | 'scroll';
|
|
705
|
+
label?: string;
|
|
706
|
+
}
|
|
707
|
+
declare function Tabs<T extends string>({ items, value, onChange, variant, label }: TabsProps<T>): react.JSX.Element;
|
|
708
|
+
|
|
709
|
+
interface StepItem {
|
|
710
|
+
key: string;
|
|
711
|
+
title: ReactNode;
|
|
712
|
+
description?: ReactNode;
|
|
713
|
+
disabled?: boolean;
|
|
714
|
+
optional?: boolean;
|
|
715
|
+
}
|
|
716
|
+
interface StepsProps {
|
|
717
|
+
items: readonly StepItem[];
|
|
718
|
+
current: string;
|
|
719
|
+
onChange?: (key: string) => void;
|
|
720
|
+
orientation?: 'horizontal' | 'vertical';
|
|
721
|
+
}
|
|
722
|
+
declare function Steps({ items, current, onChange, orientation }: StepsProps): react.JSX.Element;
|
|
723
|
+
|
|
724
|
+
interface CommandItem {
|
|
725
|
+
key: string;
|
|
726
|
+
label: string;
|
|
727
|
+
description?: string;
|
|
728
|
+
group?: string;
|
|
729
|
+
shortcut?: string;
|
|
730
|
+
icon?: ReactNode;
|
|
731
|
+
disabled?: boolean;
|
|
732
|
+
}
|
|
733
|
+
interface CommandPaletteProps {
|
|
734
|
+
open: boolean;
|
|
735
|
+
onOpenChange: (open: boolean) => void;
|
|
736
|
+
items: readonly CommandItem[];
|
|
737
|
+
onSelect: (key: string) => void;
|
|
738
|
+
placeholder?: string;
|
|
739
|
+
}
|
|
740
|
+
declare function CommandPalette({ open, onOpenChange, items, onSelect, placeholder }: CommandPaletteProps): react.ReactPortal | null;
|
|
741
|
+
|
|
742
|
+
interface GridProps extends HTMLAttributes<HTMLDivElement> {
|
|
743
|
+
columns?: number | 'auto';
|
|
744
|
+
minItemWidth?: number;
|
|
745
|
+
gap?: number;
|
|
746
|
+
}
|
|
747
|
+
interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
748
|
+
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
749
|
+
padding?: number;
|
|
750
|
+
}
|
|
751
|
+
declare function Container({ size, padding, className, style, ...props }: PropsWithChildren<ContainerProps>): react.JSX.Element;
|
|
752
|
+
interface StackProps extends HTMLAttributes<HTMLDivElement> {
|
|
753
|
+
direction?: 'row' | 'column';
|
|
754
|
+
gap?: number;
|
|
755
|
+
align?: CSSProperties['alignItems'];
|
|
756
|
+
justify?: CSSProperties['justifyContent'];
|
|
757
|
+
wrap?: boolean;
|
|
758
|
+
}
|
|
759
|
+
declare function Stack({ direction, gap, align, justify, wrap, className, style, ...props }: PropsWithChildren<StackProps>): react.JSX.Element;
|
|
760
|
+
declare function Grid({ columns, minItemWidth, gap, className, style, ...props }: PropsWithChildren<GridProps>): react.JSX.Element;
|
|
761
|
+
interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
|
|
762
|
+
columns?: number;
|
|
763
|
+
minColumnWidth?: number;
|
|
764
|
+
gap?: number;
|
|
765
|
+
}
|
|
766
|
+
declare function Masonry({ columns, minColumnWidth, gap, className, style, children, ...props }: PropsWithChildren<MasonryProps>): react.JSX.Element;
|
|
767
|
+
interface PageLayoutProps extends HTMLAttributes<HTMLDivElement> {
|
|
768
|
+
variant?: 'single' | 'sidebar-left' | 'sidebar-right' | 'split' | 'dashboard' | 'full-screen';
|
|
769
|
+
sidebar?: ReactNode;
|
|
770
|
+
header?: ReactNode;
|
|
771
|
+
sidebarWidth?: number;
|
|
772
|
+
}
|
|
773
|
+
declare function PageLayout({ variant, sidebar, header, sidebarWidth, className, style, children, ...props }: PropsWithChildren<PageLayoutProps>): react.JSX.Element;
|
|
774
|
+
|
|
775
|
+
interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
|
|
776
|
+
width?: number | string;
|
|
777
|
+
height?: number | string;
|
|
778
|
+
radius?: number | string;
|
|
779
|
+
circle?: boolean;
|
|
780
|
+
animated?: boolean;
|
|
781
|
+
}
|
|
782
|
+
declare function Skeleton({ width, height, radius, circle, animated, className, style, ...props }: SkeletonProps): react.JSX.Element;
|
|
783
|
+
|
|
784
|
+
declare function Spinner({ label, size, className }: {
|
|
785
|
+
label?: string;
|
|
786
|
+
size?: number;
|
|
787
|
+
className?: string;
|
|
788
|
+
}): react.JSX.Element;
|
|
789
|
+
declare function LoadingDots({ label }: {
|
|
790
|
+
label?: string;
|
|
791
|
+
}): react.JSX.Element;
|
|
792
|
+
declare function ProgressBar({ value, label, indeterminate, className }: {
|
|
793
|
+
value?: number;
|
|
794
|
+
label?: ReactNode;
|
|
795
|
+
indeterminate?: boolean;
|
|
796
|
+
className?: string;
|
|
797
|
+
}): react.JSX.Element;
|
|
798
|
+
declare function ProgressRing({ value, size, label }: {
|
|
799
|
+
value: number;
|
|
800
|
+
size?: number;
|
|
801
|
+
label?: string;
|
|
802
|
+
}): react.JSX.Element;
|
|
803
|
+
interface LoadingOverlayProps extends HTMLAttributes<HTMLDivElement> {
|
|
804
|
+
active?: boolean;
|
|
805
|
+
label?: string;
|
|
806
|
+
}
|
|
807
|
+
declare function LoadingOverlay({ active, label, className, children, ...props }: PropsWithChildren<LoadingOverlayProps>): react.JSX.Element;
|
|
808
|
+
|
|
809
|
+
interface SelectOption {
|
|
810
|
+
label: ReactNode;
|
|
811
|
+
value: string;
|
|
812
|
+
disabled?: boolean;
|
|
813
|
+
}
|
|
814
|
+
interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
|
|
815
|
+
label?: string;
|
|
816
|
+
hint?: string;
|
|
817
|
+
error?: string;
|
|
818
|
+
options: readonly SelectOption[];
|
|
819
|
+
placeholder?: string;
|
|
820
|
+
}
|
|
821
|
+
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
|
|
822
|
+
|
|
823
|
+
interface MultiSelectProps {
|
|
824
|
+
label?: string;
|
|
825
|
+
options: readonly SelectOption[];
|
|
826
|
+
value: readonly string[];
|
|
827
|
+
onChange: (value: string[]) => void;
|
|
828
|
+
placeholder?: string;
|
|
829
|
+
max?: number;
|
|
830
|
+
hint?: ReactNode;
|
|
831
|
+
disabled?: boolean;
|
|
832
|
+
}
|
|
833
|
+
declare function MultiSelect({ label, options, value, onChange, placeholder, max, hint, disabled }: MultiSelectProps): react.JSX.Element;
|
|
834
|
+
|
|
835
|
+
interface ChoiceOption<T extends string = string> {
|
|
836
|
+
label: ReactNode;
|
|
837
|
+
value: T;
|
|
838
|
+
description?: ReactNode;
|
|
839
|
+
disabled?: boolean;
|
|
840
|
+
}
|
|
841
|
+
interface ChoiceGroupProps<T extends string> {
|
|
842
|
+
label?: string;
|
|
843
|
+
options: readonly ChoiceOption<T>[];
|
|
844
|
+
value?: T | T[];
|
|
845
|
+
defaultValue?: T | T[];
|
|
846
|
+
onChange?: (value: T | T[]) => void;
|
|
847
|
+
type?: 'radio' | 'checkbox';
|
|
848
|
+
direction?: 'row' | 'column';
|
|
849
|
+
disabled?: boolean;
|
|
850
|
+
name?: string;
|
|
851
|
+
}
|
|
852
|
+
declare function ChoiceGroup<T extends string>({ label, options, value, defaultValue, onChange, type, direction, disabled, name }: ChoiceGroupProps<T>): react.JSX.Element;
|
|
853
|
+
declare function RadioGroup<T extends string>(props: Omit<ChoiceGroupProps<T>, 'type' | 'value' | 'defaultValue' | 'onChange'> & {
|
|
854
|
+
value?: T;
|
|
855
|
+
defaultValue?: T;
|
|
856
|
+
onChange?: (value: T) => void;
|
|
857
|
+
}): react.JSX.Element;
|
|
858
|
+
declare function CheckboxGroup<T extends string>(props: Omit<ChoiceGroupProps<T>, 'type' | 'value' | 'defaultValue' | 'onChange'> & {
|
|
859
|
+
value?: T[];
|
|
860
|
+
defaultValue?: T[];
|
|
861
|
+
onChange?: (value: T[]) => void;
|
|
862
|
+
}): react.JSX.Element;
|
|
863
|
+
|
|
864
|
+
interface ValidationRule {
|
|
865
|
+
validate: (value: string) => boolean;
|
|
866
|
+
message: string;
|
|
867
|
+
}
|
|
868
|
+
interface ValidatedInputProps extends Omit<InputProps, 'error' | 'onChange' | 'onBlur'> {
|
|
869
|
+
value: string;
|
|
870
|
+
rules: readonly ValidationRule[];
|
|
871
|
+
validateOn?: 'blur' | 'change';
|
|
872
|
+
onChange: (value: string) => void;
|
|
873
|
+
onValidityChange?: (valid: boolean) => void;
|
|
874
|
+
}
|
|
875
|
+
declare function validateValue(value: string, rules: readonly ValidationRule[]): string | undefined;
|
|
876
|
+
declare function ValidatedInput({ value, rules, validateOn, onChange, onValidityChange, ...props }: ValidatedInputProps): react.JSX.Element;
|
|
877
|
+
declare function validateForm(event: FormEvent<HTMLFormElement>): boolean;
|
|
878
|
+
|
|
879
|
+
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
880
|
+
label?: ReactNode;
|
|
881
|
+
hint?: ReactNode;
|
|
882
|
+
error?: ReactNode;
|
|
883
|
+
resize?: 'none' | 'vertical' | 'both';
|
|
884
|
+
}
|
|
885
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
886
|
+
|
|
887
|
+
declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
888
|
+
label: ReactNode;
|
|
889
|
+
description?: ReactNode;
|
|
890
|
+
} & {
|
|
891
|
+
indeterminate?: boolean;
|
|
892
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
893
|
+
declare const Radio: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
894
|
+
label: ReactNode;
|
|
895
|
+
description?: ReactNode;
|
|
896
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
897
|
+
|
|
898
|
+
interface CalendarProps {
|
|
899
|
+
value?: string;
|
|
900
|
+
onChange?: (value: string) => void;
|
|
901
|
+
min?: string;
|
|
902
|
+
max?: string;
|
|
903
|
+
className?: string;
|
|
904
|
+
}
|
|
905
|
+
declare function Calendar({ value, onChange, min, max, className }: CalendarProps): react.JSX.Element;
|
|
906
|
+
interface DatePickerProps {
|
|
907
|
+
label?: ReactNode;
|
|
908
|
+
value?: string;
|
|
909
|
+
onChange: (value: string) => void;
|
|
910
|
+
placeholder?: string;
|
|
911
|
+
min?: string;
|
|
912
|
+
max?: string;
|
|
913
|
+
error?: ReactNode;
|
|
914
|
+
}
|
|
915
|
+
declare function DatePicker({ label, value, onChange, placeholder, min, max, error, }: DatePickerProps): react.JSX.Element;
|
|
916
|
+
interface TimePickerProps {
|
|
917
|
+
label?: ReactNode;
|
|
918
|
+
value?: string;
|
|
919
|
+
onChange: (value: string) => void;
|
|
920
|
+
step?: number;
|
|
921
|
+
}
|
|
922
|
+
declare function TimePicker({ label, value, onChange, step }: TimePickerProps): react.JSX.Element;
|
|
923
|
+
interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
|
|
924
|
+
label?: ReactNode;
|
|
925
|
+
value: number;
|
|
926
|
+
onChange: (value: number) => void;
|
|
927
|
+
showValue?: boolean;
|
|
928
|
+
}
|
|
929
|
+
declare function Slider({ label, value, min, max, step, onChange, showValue, ...props }: SliderProps): react.JSX.Element;
|
|
930
|
+
|
|
931
|
+
interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
|
|
932
|
+
layout?: 'vertical' | 'horizontal';
|
|
933
|
+
disabled?: boolean;
|
|
934
|
+
}
|
|
935
|
+
declare function Form({ layout, disabled, className, children, ...props }: FormProps): react.JSX.Element;
|
|
936
|
+
interface FormItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
937
|
+
label?: ReactNode;
|
|
938
|
+
required?: boolean;
|
|
939
|
+
hint?: ReactNode;
|
|
940
|
+
error?: ReactNode;
|
|
941
|
+
children: ReactNode;
|
|
942
|
+
}
|
|
943
|
+
declare function FormItem({ label, required, hint, error, children, className, ...props }: FormItemProps): react.JSX.Element;
|
|
944
|
+
|
|
945
|
+
type UploadRejectionReason = 'file-too-large' | 'file-type-not-accepted' | 'too-many-files';
|
|
946
|
+
interface UploadRejection {
|
|
947
|
+
file: File;
|
|
948
|
+
reason: UploadRejectionReason;
|
|
949
|
+
message: string;
|
|
950
|
+
}
|
|
951
|
+
interface UploadValidationOptions {
|
|
952
|
+
accept?: string;
|
|
953
|
+
maxFiles?: number;
|
|
954
|
+
maxSize?: number;
|
|
955
|
+
}
|
|
956
|
+
interface UploadProps extends UploadValidationOptions {
|
|
957
|
+
label?: ReactNode;
|
|
958
|
+
multiple?: boolean;
|
|
959
|
+
onFiles: (files: File[]) => void;
|
|
960
|
+
onReject?: (rejections: UploadRejection[]) => void;
|
|
961
|
+
hint?: ReactNode;
|
|
962
|
+
disabled?: boolean;
|
|
963
|
+
}
|
|
964
|
+
declare function Upload({ label, accept, multiple, maxFiles, maxSize, onFiles, onReject, hint, disabled, }: UploadProps): react.JSX.Element;
|
|
965
|
+
|
|
966
|
+
interface ComboboxOption {
|
|
967
|
+
label: ReactNode;
|
|
968
|
+
value: string;
|
|
969
|
+
keywords?: string;
|
|
970
|
+
disabled?: boolean;
|
|
971
|
+
}
|
|
972
|
+
interface ComboboxProps {
|
|
973
|
+
label?: ReactNode;
|
|
974
|
+
options: readonly ComboboxOption[];
|
|
975
|
+
value?: string;
|
|
976
|
+
onChange: (value: string) => void;
|
|
977
|
+
placeholder?: string;
|
|
978
|
+
hint?: ReactNode;
|
|
979
|
+
error?: ReactNode;
|
|
980
|
+
disabled?: boolean;
|
|
981
|
+
emptyText?: ReactNode;
|
|
982
|
+
}
|
|
983
|
+
declare function Combobox({ label, options, value, onChange, placeholder, hint, error, disabled, emptyText }: ComboboxProps): react.JSX.Element;
|
|
984
|
+
|
|
985
|
+
interface NumberInputProps {
|
|
986
|
+
label?: ReactNode;
|
|
987
|
+
value: number;
|
|
988
|
+
onChange: (value: number) => void;
|
|
989
|
+
min?: number;
|
|
990
|
+
max?: number;
|
|
991
|
+
step?: number;
|
|
992
|
+
prefix?: ReactNode;
|
|
993
|
+
suffix?: ReactNode;
|
|
994
|
+
hint?: ReactNode;
|
|
995
|
+
error?: ReactNode;
|
|
996
|
+
disabled?: boolean;
|
|
997
|
+
}
|
|
998
|
+
declare function NumberInput({ label, value, onChange, min, max, step, prefix, suffix, hint, error, disabled }: NumberInputProps): react.JSX.Element;
|
|
999
|
+
|
|
1000
|
+
interface CascaderOption {
|
|
1001
|
+
value: string;
|
|
1002
|
+
label: string;
|
|
1003
|
+
children?: readonly CascaderOption[];
|
|
1004
|
+
disabled?: boolean;
|
|
1005
|
+
}
|
|
1006
|
+
declare function Cascader({ options, value, onChange, label }: {
|
|
1007
|
+
options: readonly CascaderOption[];
|
|
1008
|
+
value?: readonly string[];
|
|
1009
|
+
onChange: (value: string[]) => void;
|
|
1010
|
+
label?: ReactNode;
|
|
1011
|
+
}): react.JSX.Element;
|
|
1012
|
+
interface TreeSelectOption {
|
|
1013
|
+
key: string;
|
|
1014
|
+
label: string;
|
|
1015
|
+
children?: readonly TreeSelectOption[];
|
|
1016
|
+
disabled?: boolean;
|
|
1017
|
+
}
|
|
1018
|
+
declare function TreeSelect({ options, value, onChange, label, placeholder }: {
|
|
1019
|
+
options: readonly TreeSelectOption[];
|
|
1020
|
+
value?: string;
|
|
1021
|
+
onChange: (value: string) => void;
|
|
1022
|
+
label?: ReactNode;
|
|
1023
|
+
placeholder?: string;
|
|
1024
|
+
}): react.JSX.Element;
|
|
1025
|
+
interface TransferItem {
|
|
1026
|
+
key: string;
|
|
1027
|
+
label: ReactNode;
|
|
1028
|
+
disabled?: boolean;
|
|
1029
|
+
}
|
|
1030
|
+
declare function Transfer({ items, value, onChange, titles }: {
|
|
1031
|
+
items: readonly TransferItem[];
|
|
1032
|
+
value: readonly string[];
|
|
1033
|
+
onChange: (value: string[]) => void;
|
|
1034
|
+
titles?: readonly [string, string];
|
|
1035
|
+
}): react.JSX.Element;
|
|
1036
|
+
declare function DateRangePicker({ label, value, onChange, min, max }: {
|
|
1037
|
+
label?: ReactNode;
|
|
1038
|
+
value: readonly [string, string];
|
|
1039
|
+
onChange: (value: [string, string]) => void;
|
|
1040
|
+
min?: string;
|
|
1041
|
+
max?: string;
|
|
1042
|
+
}): react.JSX.Element;
|
|
1043
|
+
declare function SearchInput({ onSearch, loading, clearable, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
|
|
1044
|
+
onSearch: (value: string) => void;
|
|
1045
|
+
loading?: boolean;
|
|
1046
|
+
clearable?: boolean;
|
|
1047
|
+
}): react.JSX.Element;
|
|
1048
|
+
|
|
1049
|
+
interface DrawerProps {
|
|
1050
|
+
open: boolean;
|
|
1051
|
+
title: string;
|
|
1052
|
+
children: ReactNode;
|
|
1053
|
+
onClose: () => void;
|
|
1054
|
+
footer?: ReactNode;
|
|
1055
|
+
side?: 'left' | 'right' | 'bottom';
|
|
1056
|
+
size?: 'sm' | 'md' | 'lg';
|
|
1057
|
+
}
|
|
1058
|
+
declare function Drawer({ open, title, children, onClose, footer, side, size }: DrawerProps): react.ReactPortal | null;
|
|
1059
|
+
|
|
1060
|
+
interface PopoverProps {
|
|
1061
|
+
trigger: ReactElement;
|
|
1062
|
+
children: ReactNode;
|
|
1063
|
+
open?: boolean;
|
|
1064
|
+
defaultOpen?: boolean;
|
|
1065
|
+
onOpenChange?: (open: boolean) => void;
|
|
1066
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
1067
|
+
label?: string;
|
|
1068
|
+
}
|
|
1069
|
+
declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, placement, label }: PopoverProps): react.JSX.Element;
|
|
1070
|
+
|
|
1071
|
+
type StatusTone = 'info' | 'success' | 'warning' | 'danger';
|
|
1072
|
+
declare function Tooltip({ content, children, placement }: {
|
|
1073
|
+
content: ReactNode;
|
|
1074
|
+
children: ReactElement;
|
|
1075
|
+
placement?: 'top' | 'right' | 'bottom' | 'left';
|
|
1076
|
+
}): react.JSX.Element;
|
|
1077
|
+
declare function Alert({ tone, title, children, onClose, action }: {
|
|
1078
|
+
tone?: StatusTone;
|
|
1079
|
+
title: ReactNode;
|
|
1080
|
+
children?: ReactNode;
|
|
1081
|
+
onClose?: () => void;
|
|
1082
|
+
action?: ReactNode;
|
|
1083
|
+
}): react.JSX.Element;
|
|
1084
|
+
|
|
1085
|
+
interface PopconfirmProps {
|
|
1086
|
+
trigger: ReactElement;
|
|
1087
|
+
title: ReactNode;
|
|
1088
|
+
description?: ReactNode;
|
|
1089
|
+
confirmText?: string;
|
|
1090
|
+
cancelText?: string;
|
|
1091
|
+
tone?: 'primary' | 'danger';
|
|
1092
|
+
onConfirm: () => void;
|
|
1093
|
+
}
|
|
1094
|
+
declare function Popconfirm({ trigger, title, description, confirmText, cancelText, tone, onConfirm }: PopconfirmProps): react.JSX.Element;
|
|
1095
|
+
interface NotificationProps {
|
|
1096
|
+
title: ReactNode;
|
|
1097
|
+
children?: ReactNode;
|
|
1098
|
+
tone?: 'info' | 'success' | 'warning' | 'danger';
|
|
1099
|
+
time?: ReactNode;
|
|
1100
|
+
unread?: boolean;
|
|
1101
|
+
action?: ReactNode;
|
|
1102
|
+
onClose?: () => void;
|
|
1103
|
+
}
|
|
1104
|
+
declare function Notification({ title, children, tone, time, unread, action, onClose }: NotificationProps): react.JSX.Element;
|
|
1105
|
+
interface ResultProps {
|
|
1106
|
+
status?: 'success' | 'error' | 'warning' | 'info' | '404' | '403';
|
|
1107
|
+
title: ReactNode;
|
|
1108
|
+
description?: ReactNode;
|
|
1109
|
+
actions?: ReactNode;
|
|
1110
|
+
extra?: ReactNode;
|
|
1111
|
+
}
|
|
1112
|
+
declare function Result({ status, title, description, actions, extra }: ResultProps): react.JSX.Element;
|
|
1113
|
+
|
|
1114
|
+
interface StatisticCardProps extends HTMLAttributes<HTMLElement> {
|
|
1115
|
+
label: ReactNode;
|
|
1116
|
+
value: ReactNode;
|
|
1117
|
+
trend?: ReactNode;
|
|
1118
|
+
icon?: ReactNode;
|
|
1119
|
+
tone?: 'blue' | 'green' | 'violet' | 'amber';
|
|
1120
|
+
}
|
|
1121
|
+
declare function StatisticCard({ label, value, trend, icon, tone, className, ...props }: StatisticCardProps): react.JSX.Element;
|
|
1122
|
+
/** COMPAT: StatisticCard remains available for existing consumers; Stat is the concise public name. */
|
|
1123
|
+
declare const Stat: typeof StatisticCard;
|
|
1124
|
+
interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
|
|
1125
|
+
value: number;
|
|
1126
|
+
max?: number;
|
|
1127
|
+
label?: ReactNode;
|
|
1128
|
+
showValue?: boolean;
|
|
1129
|
+
size?: 'sm' | 'md' | 'lg';
|
|
1130
|
+
tone?: 'primary' | 'success' | 'warning';
|
|
1131
|
+
}
|
|
1132
|
+
declare function Progress({ value, max, label, showValue, size, tone, className, ...props }: ProgressProps): react.JSX.Element;
|
|
1133
|
+
interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {
|
|
1134
|
+
value: number;
|
|
1135
|
+
max?: number;
|
|
1136
|
+
label?: ReactNode;
|
|
1137
|
+
size?: number;
|
|
1138
|
+
thickness?: number;
|
|
1139
|
+
}
|
|
1140
|
+
declare function CircularProgress({ value, max, label, size, thickness, className, ...props }: CircularProgressProps): react.JSX.Element;
|
|
1141
|
+
interface StepProgressProps extends HTMLAttributes<HTMLOListElement> {
|
|
1142
|
+
steps: readonly ReactNode[];
|
|
1143
|
+
current: number;
|
|
1144
|
+
}
|
|
1145
|
+
declare function StepProgress({ steps, current, className, ...props }: StepProgressProps): react.JSX.Element;
|
|
1146
|
+
interface ActivityIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
|
|
1147
|
+
variant?: 'spinner' | 'dots' | 'radar' | 'wave';
|
|
1148
|
+
label?: string;
|
|
1149
|
+
size?: 'sm' | 'md' | 'lg';
|
|
1150
|
+
}
|
|
1151
|
+
declare function ActivityIndicator({ variant, label, size, className, ...props }: ActivityIndicatorProps): react.JSX.Element;
|
|
1152
|
+
interface SparklineProps extends HTMLAttributes<SVGSVGElement> {
|
|
1153
|
+
data: readonly number[];
|
|
1154
|
+
width?: number;
|
|
1155
|
+
height?: number;
|
|
1156
|
+
label?: string;
|
|
1157
|
+
filled?: boolean;
|
|
1158
|
+
}
|
|
1159
|
+
declare function Sparkline({ data, width, height, label, filled, ...props }: SparklineProps): react.JSX.Element;
|
|
1160
|
+
|
|
1161
|
+
interface TableColumn<T> {
|
|
1162
|
+
key: string;
|
|
1163
|
+
header: ReactNode;
|
|
1164
|
+
render?: (item: T, index: number) => ReactNode;
|
|
1165
|
+
align?: 'left' | 'center' | 'right';
|
|
1166
|
+
width?: number | string;
|
|
1167
|
+
}
|
|
1168
|
+
interface TableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
1169
|
+
columns: readonly TableColumn<T>[];
|
|
1170
|
+
data: readonly T[];
|
|
1171
|
+
rowKey: keyof T | ((item: T, index: number) => string | number);
|
|
1172
|
+
caption?: string;
|
|
1173
|
+
empty?: ReactNode;
|
|
1174
|
+
striped?: boolean;
|
|
1175
|
+
onRowClick?: (item: T, index: number) => void;
|
|
1176
|
+
}
|
|
1177
|
+
declare function Table<T extends object>({ columns, data, rowKey, caption, empty, striped, onRowClick, className, ...props }: TableProps<T>): react.JSX.Element;
|
|
1178
|
+
interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
|
|
1179
|
+
page: number;
|
|
1180
|
+
total: number;
|
|
1181
|
+
pageSize?: number;
|
|
1182
|
+
siblingCount?: number;
|
|
1183
|
+
onChange: (page: number) => void;
|
|
1184
|
+
}
|
|
1185
|
+
declare function Pagination({ page, total, pageSize, siblingCount, onChange, className, ...props }: PaginationProps): react.JSX.Element;
|
|
1186
|
+
interface ListItem {
|
|
1187
|
+
key: string | number;
|
|
1188
|
+
title: ReactNode;
|
|
1189
|
+
description?: ReactNode;
|
|
1190
|
+
leading?: ReactNode;
|
|
1191
|
+
trailing?: ReactNode;
|
|
1192
|
+
}
|
|
1193
|
+
declare function List({ items, divided, className, ...props }: HTMLAttributes<HTMLUListElement> & {
|
|
1194
|
+
items: readonly ListItem[];
|
|
1195
|
+
divided?: boolean;
|
|
1196
|
+
}): react.JSX.Element;
|
|
1197
|
+
interface DescriptionItem {
|
|
1198
|
+
key: string | number;
|
|
1199
|
+
label: ReactNode;
|
|
1200
|
+
value: ReactNode;
|
|
1201
|
+
span?: 1 | 2 | 3;
|
|
1202
|
+
}
|
|
1203
|
+
declare function Descriptions({ items, columns, bordered, className, ...props }: HTMLAttributes<HTMLDListElement> & {
|
|
1204
|
+
items: readonly DescriptionItem[];
|
|
1205
|
+
columns?: 1 | 2 | 3;
|
|
1206
|
+
bordered?: boolean;
|
|
1207
|
+
}): react.JSX.Element;
|
|
1208
|
+
|
|
1209
|
+
interface TimelineItem {
|
|
1210
|
+
key: string;
|
|
1211
|
+
title: ReactNode;
|
|
1212
|
+
description?: ReactNode;
|
|
1213
|
+
time?: ReactNode;
|
|
1214
|
+
status?: 'complete' | 'current' | 'upcoming';
|
|
1215
|
+
}
|
|
1216
|
+
declare function Timeline({ items, label }: {
|
|
1217
|
+
items: readonly TimelineItem[];
|
|
1218
|
+
label?: string;
|
|
1219
|
+
}): react.JSX.Element;
|
|
1220
|
+
interface InsightBoardProps {
|
|
1221
|
+
summary: ReactNode;
|
|
1222
|
+
trend: ReactNode;
|
|
1223
|
+
detail: ReactNode;
|
|
1224
|
+
heading?: ReactNode;
|
|
1225
|
+
filters?: ReactNode;
|
|
1226
|
+
}
|
|
1227
|
+
declare function InsightBoard({ summary, trend, detail, heading, filters }: InsightBoardProps): react.JSX.Element;
|
|
1228
|
+
|
|
1229
|
+
declare function EmptyState({ icon, title, description, action, size }: {
|
|
1230
|
+
icon?: IconName;
|
|
1231
|
+
title: ReactNode;
|
|
1232
|
+
description?: ReactNode;
|
|
1233
|
+
action?: ReactNode;
|
|
1234
|
+
size?: 'sm' | 'md';
|
|
1235
|
+
}): react.JSX.Element;
|
|
1236
|
+
|
|
1237
|
+
interface DataGridColumn<T> {
|
|
1238
|
+
key: string;
|
|
1239
|
+
header: ReactNode;
|
|
1240
|
+
render?: (item: T) => ReactNode;
|
|
1241
|
+
value?: (item: T) => string | number;
|
|
1242
|
+
sortable?: boolean;
|
|
1243
|
+
width?: string | number;
|
|
1244
|
+
}
|
|
1245
|
+
interface DataGridProps<T> {
|
|
1246
|
+
columns: readonly DataGridColumn<T>[];
|
|
1247
|
+
data: readonly T[];
|
|
1248
|
+
rowKey: keyof T | ((item: T) => string);
|
|
1249
|
+
selectedKeys?: readonly string[];
|
|
1250
|
+
onSelectionChange?: (keys: string[]) => void;
|
|
1251
|
+
empty?: ReactNode;
|
|
1252
|
+
caption?: string;
|
|
1253
|
+
}
|
|
1254
|
+
declare function DataGrid<T extends object>({ columns, data, rowKey, selectedKeys, onSelectionChange, empty, caption }: DataGridProps<T>): react.JSX.Element;
|
|
1255
|
+
|
|
1256
|
+
interface TreeNode {
|
|
1257
|
+
key: string;
|
|
1258
|
+
label: ReactNode;
|
|
1259
|
+
children?: readonly TreeNode[];
|
|
1260
|
+
disabled?: boolean;
|
|
1261
|
+
icon?: ReactNode;
|
|
1262
|
+
}
|
|
1263
|
+
interface TreeProps {
|
|
1264
|
+
nodes: readonly TreeNode[];
|
|
1265
|
+
selectedKey?: string;
|
|
1266
|
+
onSelect?: (key: string) => void;
|
|
1267
|
+
defaultExpandedKeys?: readonly string[];
|
|
1268
|
+
label?: string;
|
|
1269
|
+
}
|
|
1270
|
+
declare function Tree({ nodes, selectedKey, onSelect, defaultExpandedKeys, label }: TreeProps): react.JSX.Element;
|
|
1271
|
+
|
|
1272
|
+
interface AuthLayoutProps {
|
|
1273
|
+
children: ReactNode;
|
|
1274
|
+
brand?: ReactNode;
|
|
1275
|
+
aside?: ReactNode;
|
|
1276
|
+
footer?: ReactNode;
|
|
1277
|
+
variant?: 'split' | 'card' | 'immersive' | 'step';
|
|
1278
|
+
backgroundImage?: string;
|
|
1279
|
+
currentStep?: number;
|
|
1280
|
+
steps?: number;
|
|
1281
|
+
}
|
|
1282
|
+
declare function AuthLayout({ children, brand, aside, footer, variant, backgroundImage, currentStep, steps }: AuthLayoutProps): react.JSX.Element;
|
|
1283
|
+
|
|
1284
|
+
interface HeroProps {
|
|
1285
|
+
eyebrow?: ReactNode;
|
|
1286
|
+
title: ReactNode;
|
|
1287
|
+
description?: ReactNode;
|
|
1288
|
+
primaryAction?: ReactNode;
|
|
1289
|
+
secondaryAction?: ReactNode;
|
|
1290
|
+
visual?: ReactNode;
|
|
1291
|
+
proof?: ReactNode;
|
|
1292
|
+
align?: 'left' | 'center';
|
|
1293
|
+
kind?: 'product' | 'personal' | 'event' | 'commerce';
|
|
1294
|
+
}
|
|
1295
|
+
declare function Hero({ eyebrow, title, description, primaryAction, secondaryAction, visual, proof, align, kind }: HeroProps): react.JSX.Element;
|
|
1296
|
+
|
|
1297
|
+
interface ResizablePanelProps {
|
|
1298
|
+
primary: ReactNode;
|
|
1299
|
+
secondary: ReactNode;
|
|
1300
|
+
defaultSize?: number;
|
|
1301
|
+
minSize?: number;
|
|
1302
|
+
maxSize?: number;
|
|
1303
|
+
direction?: 'horizontal' | 'vertical';
|
|
1304
|
+
onResize?: (size: number) => void;
|
|
1305
|
+
}
|
|
1306
|
+
declare function ResizablePanel({ primary, secondary, defaultSize, minSize, maxSize, direction, onResize }: ResizablePanelProps): react.JSX.Element;
|
|
1307
|
+
|
|
1308
|
+
interface NotificationItem extends Omit<NotificationProps, 'onClose'> {
|
|
1309
|
+
key: string;
|
|
1310
|
+
content?: ReactNode;
|
|
1311
|
+
}
|
|
1312
|
+
interface NotificationCenterProps {
|
|
1313
|
+
items: readonly NotificationItem[];
|
|
1314
|
+
onRead?: (key: string) => void;
|
|
1315
|
+
onDismiss?: (key: string) => void;
|
|
1316
|
+
onReadAll?: () => void;
|
|
1317
|
+
empty?: ReactNode;
|
|
1318
|
+
title?: ReactNode;
|
|
1319
|
+
}
|
|
1320
|
+
declare function NotificationCenter({ items, onRead, onDismiss, onReadAll, empty, title }: NotificationCenterProps): react.JSX.Element;
|
|
1321
|
+
|
|
1322
|
+
interface VirtualListProps<T> {
|
|
1323
|
+
items: readonly T[];
|
|
1324
|
+
itemHeight: number;
|
|
1325
|
+
height: number;
|
|
1326
|
+
renderItem: (item: T, index: number) => ReactNode;
|
|
1327
|
+
itemKey: (item: T, index: number) => string | number;
|
|
1328
|
+
overscan?: number;
|
|
1329
|
+
label?: string;
|
|
1330
|
+
}
|
|
1331
|
+
declare function VirtualList<T>({ items, itemHeight, height, renderItem, itemKey, overscan, label }: VirtualListProps<T>): react.JSX.Element;
|
|
1332
|
+
|
|
1333
|
+
interface JsonViewerProps {
|
|
1334
|
+
data: unknown;
|
|
1335
|
+
name?: string;
|
|
1336
|
+
defaultExpanded?: boolean;
|
|
1337
|
+
maxDepth?: number;
|
|
1338
|
+
}
|
|
1339
|
+
declare function JsonViewer({ data, name, defaultExpanded, maxDepth }: JsonViewerProps): react.JSX.Element;
|
|
1340
|
+
interface DiffViewerProps {
|
|
1341
|
+
before: string;
|
|
1342
|
+
after: string;
|
|
1343
|
+
beforeLabel?: string;
|
|
1344
|
+
afterLabel?: string;
|
|
1345
|
+
mode?: 'split' | 'unified';
|
|
1346
|
+
}
|
|
1347
|
+
declare function DiffViewer({ before, after, beforeLabel, afterLabel, mode }: DiffViewerProps): react.JSX.Element;
|
|
1348
|
+
|
|
1349
|
+
interface QueryField {
|
|
1350
|
+
key: string;
|
|
1351
|
+
label: string;
|
|
1352
|
+
type?: 'text' | 'number' | 'date';
|
|
1353
|
+
operators?: readonly QueryOperator[];
|
|
1354
|
+
}
|
|
1355
|
+
interface QueryOperator {
|
|
1356
|
+
value: string;
|
|
1357
|
+
label: string;
|
|
1358
|
+
}
|
|
1359
|
+
interface QueryRule {
|
|
1360
|
+
id: string;
|
|
1361
|
+
field: string;
|
|
1362
|
+
operator: string;
|
|
1363
|
+
value: string;
|
|
1364
|
+
}
|
|
1365
|
+
interface QueryBuilderProps {
|
|
1366
|
+
fields: readonly QueryField[];
|
|
1367
|
+
rules: readonly QueryRule[];
|
|
1368
|
+
onChange: (rules: QueryRule[]) => void;
|
|
1369
|
+
conjunction?: 'and' | 'or';
|
|
1370
|
+
onConjunctionChange?: (value: 'and' | 'or') => void;
|
|
1371
|
+
disabled?: boolean;
|
|
1372
|
+
}
|
|
1373
|
+
declare function QueryBuilder({ fields, rules, onChange, conjunction, onConjunctionChange, disabled }: QueryBuilderProps): react.JSX.Element;
|
|
1374
|
+
|
|
1375
|
+
interface FlowNode {
|
|
1376
|
+
id: string;
|
|
1377
|
+
label: ReactNode;
|
|
1378
|
+
x: number;
|
|
1379
|
+
y: number;
|
|
1380
|
+
status?: 'default' | 'active' | 'success' | 'warning';
|
|
1381
|
+
description?: ReactNode;
|
|
1382
|
+
}
|
|
1383
|
+
interface FlowEdge {
|
|
1384
|
+
id?: string;
|
|
1385
|
+
from: string;
|
|
1386
|
+
to: string;
|
|
1387
|
+
label?: string;
|
|
1388
|
+
}
|
|
1389
|
+
interface FlowCanvasProps {
|
|
1390
|
+
nodes: readonly FlowNode[];
|
|
1391
|
+
edges: readonly FlowEdge[];
|
|
1392
|
+
width?: number;
|
|
1393
|
+
height?: number;
|
|
1394
|
+
selectedId?: string;
|
|
1395
|
+
onSelect?: (id: string) => void;
|
|
1396
|
+
empty?: ReactNode;
|
|
1397
|
+
}
|
|
1398
|
+
declare function FlowCanvas({ nodes, edges, width, height, selectedId, onSelect, empty }: FlowCanvasProps): react.JSX.Element;
|
|
1399
|
+
interface KanbanCard {
|
|
1400
|
+
id: string;
|
|
1401
|
+
title: ReactNode;
|
|
1402
|
+
description?: ReactNode;
|
|
1403
|
+
meta?: ReactNode;
|
|
1404
|
+
tags?: readonly string[];
|
|
1405
|
+
}
|
|
1406
|
+
interface KanbanColumn {
|
|
1407
|
+
id: string;
|
|
1408
|
+
title: ReactNode;
|
|
1409
|
+
cards: readonly KanbanCard[];
|
|
1410
|
+
limit?: number;
|
|
1411
|
+
accent?: string;
|
|
1412
|
+
}
|
|
1413
|
+
interface KanbanBoardProps {
|
|
1414
|
+
columns: readonly KanbanColumn[];
|
|
1415
|
+
onMove?: (cardId: string, fromColumnId: string, toColumnId: string) => void;
|
|
1416
|
+
onCardClick?: (cardId: string, columnId: string) => void;
|
|
1417
|
+
empty?: ReactNode;
|
|
1418
|
+
}
|
|
1419
|
+
declare function KanbanBoard({ columns, onMove, onCardClick, empty }: KanbanBoardProps): react.JSX.Element;
|
|
1420
|
+
interface GanttTask {
|
|
1421
|
+
id: string;
|
|
1422
|
+
label: ReactNode;
|
|
1423
|
+
start: string | Date;
|
|
1424
|
+
end: string | Date;
|
|
1425
|
+
progress?: number;
|
|
1426
|
+
group?: string;
|
|
1427
|
+
color?: string;
|
|
1428
|
+
}
|
|
1429
|
+
interface GanttChartProps {
|
|
1430
|
+
tasks: readonly GanttTask[];
|
|
1431
|
+
start?: string | Date;
|
|
1432
|
+
end?: string | Date;
|
|
1433
|
+
onTaskClick?: (id: string) => void;
|
|
1434
|
+
empty?: ReactNode;
|
|
1435
|
+
}
|
|
1436
|
+
declare function GanttChart({ tasks, start, end, onTaskClick, empty }: GanttChartProps): react.JSX.Element;
|
|
1437
|
+
interface ChartLegendItem {
|
|
1438
|
+
label: ReactNode;
|
|
1439
|
+
color: string;
|
|
1440
|
+
value?: ReactNode;
|
|
1441
|
+
}
|
|
1442
|
+
interface ChartContainerProps {
|
|
1443
|
+
title?: ReactNode;
|
|
1444
|
+
description?: ReactNode;
|
|
1445
|
+
actions?: ReactNode;
|
|
1446
|
+
legend?: readonly ChartLegendItem[];
|
|
1447
|
+
children: ReactNode;
|
|
1448
|
+
height?: number;
|
|
1449
|
+
loading?: boolean;
|
|
1450
|
+
empty?: boolean;
|
|
1451
|
+
emptyContent?: ReactNode;
|
|
1452
|
+
}
|
|
1453
|
+
declare function ChartContainer({ title, description, actions, legend, children, height, loading, empty, emptyContent }: ChartContainerProps): react.JSX.Element;
|
|
1454
|
+
interface PivotValue<T> {
|
|
1455
|
+
key: string;
|
|
1456
|
+
label: ReactNode;
|
|
1457
|
+
value: (item: T) => number;
|
|
1458
|
+
aggregate?: 'sum' | 'average' | 'count';
|
|
1459
|
+
format?: (value: number) => ReactNode;
|
|
1460
|
+
}
|
|
1461
|
+
interface PivotTableProps<T> {
|
|
1462
|
+
data: readonly T[];
|
|
1463
|
+
row: (item: T) => string;
|
|
1464
|
+
column: (item: T) => string;
|
|
1465
|
+
values: readonly PivotValue<T>[];
|
|
1466
|
+
rowLabel?: ReactNode;
|
|
1467
|
+
showTotals?: boolean;
|
|
1468
|
+
empty?: ReactNode;
|
|
1469
|
+
}
|
|
1470
|
+
declare function PivotTable<T>({ data, row, column, values, rowLabel, showTotals, empty }: PivotTableProps<T>): react.JSX.Element;
|
|
1471
|
+
|
|
1472
|
+
interface FilterOption {
|
|
1473
|
+
value: string;
|
|
1474
|
+
label: string;
|
|
1475
|
+
}
|
|
1476
|
+
interface FilterField {
|
|
1477
|
+
key: string;
|
|
1478
|
+
label: string;
|
|
1479
|
+
options?: readonly FilterOption[];
|
|
1480
|
+
type?: 'text' | 'number' | 'date';
|
|
1481
|
+
}
|
|
1482
|
+
interface FilterValue {
|
|
1483
|
+
id: string;
|
|
1484
|
+
field: string;
|
|
1485
|
+
value: string;
|
|
1486
|
+
}
|
|
1487
|
+
interface FilterBuilderProps {
|
|
1488
|
+
fields: readonly FilterField[];
|
|
1489
|
+
value: readonly FilterValue[];
|
|
1490
|
+
onChange: (value: FilterValue[]) => void;
|
|
1491
|
+
disabled?: boolean;
|
|
1492
|
+
addLabel?: string;
|
|
1493
|
+
}
|
|
1494
|
+
declare function FilterBuilder({ fields, value, onChange, disabled, addLabel }: FilterBuilderProps): react.JSX.Element;
|
|
1495
|
+
|
|
1496
|
+
export { Accordion, type AccordionItem, type AccordionProps, ActivityFeed, type ActivityFeedProps, ActivityIndicator, type ActivityIndicatorProps, type ActivityItem, type AgentRunStatus, type AgentRunStep, AgentRunTimeline, type AgentRunTimelineProps, Alert, ApprovalFlow, type ApprovalFlowProps, type ApprovalStatus, type ApprovalStep, type AuditEvent, AuditLog, type AuditLogProps, AuthLayout, type AuthLayoutProps, AvailabilityGrid, type AvailabilityState, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, Badge, Breadcrumb, type BreadcrumbProps, Button, ButtonGroup, type ButtonProps, Calendar, type CalendarProps, type CalendarResource, Card, type CardProps, Cascader, type CascaderOption, ChartContainer, type ChartContainerProps, type ChartLegendItem, type ChatAttachment, ChatComposer, type ChatComposerProps, ChatMessage, type ChatMessageProps, Checkbox, CheckboxGroup, ChoiceGroup, type ChoiceOption, CircularProgress, type CircularProgressProps, type CitationItem, CitationList, type CitationListProps, CodeBlock, type CodeBlockProps, CodeEditor, type CodeEditorProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, type CommentItem, CommentThread, type CommentThreadProps, Container, type ContainerProps, ContextMenu, type ContextMenuProps, ConversationBranch, type ConversationBranchProps, DataGrid, type DataGridColumn, type DataGridProps, DatePicker, type DatePickerProps, DateRangePicker, type DescriptionItem, Descriptions, DiffViewer, type DiffViewerProps, Divider, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownMenu, type DropdownProps, EmptyState, EventCard, FileExplorer, type FileItem, FilePreview, FilterBuilder, type FilterBuilderProps, type FilterField, type FilterOption, type FilterValue, FloatingNav, type FloatingNavProps, FlowCanvas, type FlowCanvasProps, type FlowEdge, type FlowNode, Form, FormItem, type FormItemProps, type FormProps, GanttChart, type GanttChartProps, type GanttTask, Grid, type GridProps, Hero, type HeroProps, Icon, IconButton, type IconButtonProps, type IconName, type IconProps, Input, type InputProps, InsightBoard, type InsightBoardProps, JsonViewer, type JsonViewerProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Link, List, type ListItem, LoadingDots, LoadingOverlay, type LoadingOverlayProps, MarkdownContent, type MarkdownContentProps, Masonry, type MasonryProps, MegaMenu, type MemberOption, MemberPicker, MentionInput, type MentionInputProps, type MentionOption, MobileNavigation, type MobileNavigationProps, Modal, type ModalProps, type ModelOption, ModelSelector, type ModelSelectorProps, MultiSelect, type MultiSelectProps, type NavigationItem, type NavigationSelectionProps, Notification, NotificationCenter, type NotificationCenterProps, type NotificationItem, type NotificationProps, NumberInput, type NumberInputProps, PageLayout, type PageLayoutProps, Pagination, type PaginationProps, type PermissionLevel, PermissionMatrix, type PermissionResource, type PermissionSubject, PivotTable, type PivotTableProps, type PivotValue, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, Presence, type PresenceProps, type PresenceStatus, Progress, ProgressBar, type ProgressProps, ProgressRing, type PromptSuggestion, PromptSuggestions, type PromptSuggestionsProps, QueryBuilder, type QueryBuilderProps, type QueryField, type QueryOperator, type QueryRule, Radio, RadioGroup, RecurrenceEditor, type RecurrenceValue, ResizablePanel, type ResizablePanelProps, ResourceCalendar, Result, type ResultProps, RichTextEditor, type RichTextEditorProps, type ScheduleEvent, Scheduler, Scrollspy, type ScrollspyProps, SearchInput, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SharePanel, type ShareScope, ShrinkNav, type ShrinkNavProps, Sidebar, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, SplitButton, type SplitButtonOption, type SplitButtonProps, Stack, type StackProps, Stat, StatisticCard, type StatisticCardProps, type StepItem, StepProgress, type StepProgressProps, Steps, type StepsProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimezoneOption, TimezoneSelect, Toast, type ToastProps, TokenUsage, type TokenUsageProps, ToolCallCard, type ToolCallCardProps, type ToolCallStatus, Tooltip, Transfer, type TransferItem, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectOption, Typography, type TypographyProps, type TypographyVariant, Upload, type UploadProps, type UploadRejection, type UploadRejectionReason, ValidatedInput, type ValidatedInputProps, type ValidationRule, VersionHistory, type VersionItem, VirtualList, type VirtualListProps, VoiceInput, type VoiceInputProps, activateNavigationItem, darkTheme, defaultTheme, highContrastTheme, tokensToStyle, validateForm, validateValue };
|