@mirror-physics/fractal-ui 0.2.0-next.7 → 0.2.0-next.71
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/dist/index.cjs +1683 -288
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1473 -88
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +318 -11
- package/dist/index.d.ts +318 -11
- package/dist/index.js +1647 -285
- package/dist/index.js.map +1 -1
- package/dist/lattice-FAYE5KWW.svg +3 -0
- package/dist/tokens.css +5 -3
- package/package.json +7 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
|
|
3
3
|
import { ClassValue } from 'clsx';
|
|
4
4
|
|
|
5
5
|
type ButtonType = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
@@ -21,6 +21,48 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
21
21
|
}
|
|
22
22
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
23
23
|
|
|
24
|
+
interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
|
|
25
|
+
/** Code or structured text displayed by the component. */
|
|
26
|
+
value: string;
|
|
27
|
+
/** Language name or common alias, such as `json`, `typescript`, `python`, or `bash`. */
|
|
28
|
+
language?: string;
|
|
29
|
+
/** Optional file name. Used for display and language detection when `language` is omitted. */
|
|
30
|
+
fileName?: string;
|
|
31
|
+
/** Optional title shown in the toolbar. */
|
|
32
|
+
label?: ReactNode;
|
|
33
|
+
/** Enables editing. Read-only viewer mode is the default. */
|
|
34
|
+
editable?: boolean;
|
|
35
|
+
/** Called when an editable block changes. */
|
|
36
|
+
onChange?: (value: string) => void;
|
|
37
|
+
/** Shows line numbers and a fold gutter. */
|
|
38
|
+
lineNumbers?: boolean;
|
|
39
|
+
/** Wraps long lines instead of requiring horizontal scrolling. */
|
|
40
|
+
wrap?: boolean;
|
|
41
|
+
/** Shows a copy action in the toolbar. */
|
|
42
|
+
copyable?: boolean;
|
|
43
|
+
/** Accessible name for the editing or viewing surface. */
|
|
44
|
+
ariaLabel?: string;
|
|
45
|
+
/** CodeMirror height constraints. Any valid CSS length is accepted. */
|
|
46
|
+
height?: string;
|
|
47
|
+
minHeight?: string;
|
|
48
|
+
maxHeight?: string;
|
|
49
|
+
placeholder?: string;
|
|
50
|
+
autoFocus?: boolean;
|
|
51
|
+
}
|
|
52
|
+
declare function CodeBlock({ value, language, fileName, label, editable, onChange, lineNumbers, wrap, copyable, ariaLabel, height, minHeight, maxHeight, placeholder, autoFocus, className, ...props }: CodeBlockProps): React.JSX.Element;
|
|
53
|
+
|
|
54
|
+
interface BreadcrumbItem {
|
|
55
|
+
label: React.ReactNode;
|
|
56
|
+
href?: string;
|
|
57
|
+
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
58
|
+
}
|
|
59
|
+
interface BreadcrumbsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
|
|
60
|
+
items: BreadcrumbItem[];
|
|
61
|
+
ariaLabel?: string;
|
|
62
|
+
separator?: React.ReactNode;
|
|
63
|
+
}
|
|
64
|
+
declare function Breadcrumbs({ items, ariaLabel, separator, className, ...props }: BreadcrumbsProps): React.JSX.Element | null;
|
|
65
|
+
|
|
24
66
|
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
25
67
|
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
26
68
|
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
@@ -60,6 +102,25 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
60
102
|
}
|
|
61
103
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
62
104
|
|
|
105
|
+
type TableSearchType = 'text' | 'glob';
|
|
106
|
+
interface TableSearchProps extends Omit<InputProps, 'type'> {
|
|
107
|
+
/** Controls the search affordance. Filtering remains controlled by the table's data owner. */
|
|
108
|
+
searchType?: TableSearchType;
|
|
109
|
+
inputClassName?: string;
|
|
110
|
+
}
|
|
111
|
+
declare const TableSearch: React.ForwardRefExoticComponent<TableSearchProps & React.RefAttributes<HTMLInputElement>>;
|
|
112
|
+
|
|
113
|
+
interface NumberInputProps extends Omit<InputProps, 'type'> {
|
|
114
|
+
unit?: string;
|
|
115
|
+
}
|
|
116
|
+
declare function NumberInput({ unit, className, value, defaultValue, disabled, readOnly, min, max, ...props }: NumberInputProps): React.JSX.Element;
|
|
117
|
+
|
|
118
|
+
interface PasswordInputProps extends Omit<InputProps, 'type'> {
|
|
119
|
+
showPasswordLabel?: string;
|
|
120
|
+
hidePasswordLabel?: string;
|
|
121
|
+
}
|
|
122
|
+
declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
123
|
+
|
|
63
124
|
interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
64
125
|
}
|
|
65
126
|
declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
|
|
@@ -94,11 +155,18 @@ interface ModalProps {
|
|
|
94
155
|
footer?: React.ReactNode;
|
|
95
156
|
/** When true, prevents closing via overlay click or Escape. */
|
|
96
157
|
noClose?: boolean;
|
|
158
|
+
/** Keeps the close control visible but disables every dismissal route. */
|
|
159
|
+
closeDisabled?: boolean;
|
|
97
160
|
/** Modal width: 'sm' (420px), 'md' (756px), 'lg' (near-fullscreen). */
|
|
98
161
|
size?: 'sm' | 'md' | 'lg';
|
|
162
|
+
/** Replaces the body with a whole-surface loading state while retaining the modal chrome. */
|
|
163
|
+
loading?: boolean;
|
|
164
|
+
loadingLabel?: string;
|
|
165
|
+
/** Constrains the modal to the viewport, scrolls the body, and separates the fixed footer with a full-width divider. */
|
|
166
|
+
scrollable?: boolean;
|
|
99
167
|
className?: string;
|
|
100
168
|
}
|
|
101
|
-
declare function Modal({ open, onClose, title, children, danger, warn, footer, noClose, size, className }: ModalProps): React.ReactPortal | null;
|
|
169
|
+
declare function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled, size, loading, loadingLabel, scrollable, className }: ModalProps): React.ReactPortal | null;
|
|
102
170
|
|
|
103
171
|
interface DataTableColumn<T> {
|
|
104
172
|
key: string;
|
|
@@ -129,10 +197,14 @@ interface DropdownProps {
|
|
|
129
197
|
selectedValue: string;
|
|
130
198
|
onSelect: (value: string) => void;
|
|
131
199
|
triggerLabel?: string;
|
|
132
|
-
direction?: 'up' | 'down';
|
|
200
|
+
direction?: 'up' | 'down' | 'left' | 'right';
|
|
133
201
|
align?: 'left' | 'right';
|
|
202
|
+
/** Arranges the trigger content vertically without rotating the dropdown panel. */
|
|
203
|
+
triggerOrientation?: 'horizontal' | 'vertical';
|
|
134
204
|
triggerContent?: React.ReactNode;
|
|
135
205
|
label?: React.ReactNode;
|
|
206
|
+
/** Renders the trigger as a square icon button. Requires an accessible triggerLabel. */
|
|
207
|
+
iconOnly?: boolean;
|
|
136
208
|
noChevron?: boolean;
|
|
137
209
|
size?: 'sm' | 'md';
|
|
138
210
|
triggerVariant?: 'outline' | 'tertiary';
|
|
@@ -140,8 +212,9 @@ interface DropdownProps {
|
|
|
140
212
|
triggerClassName?: string;
|
|
141
213
|
panelClassName?: string;
|
|
142
214
|
closeOnSelect?: boolean;
|
|
215
|
+
disabled?: boolean;
|
|
143
216
|
}
|
|
144
|
-
declare function Dropdown({ items, selectedValue, onSelect, triggerLabel, direction, align, triggerContent, label, noChevron, size, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, }: DropdownProps): React.JSX.Element | null;
|
|
217
|
+
declare function Dropdown({ items, selectedValue, onSelect, triggerLabel, direction, align, triggerOrientation, triggerContent, label, iconOnly, noChevron, size, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
|
|
145
218
|
|
|
146
219
|
type LinkTheme = 'default' | 'muted' | 'accent';
|
|
147
220
|
type LinkSize = 'sm' | 'md' | 'lg';
|
|
@@ -157,7 +230,18 @@ interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
157
230
|
}
|
|
158
231
|
declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;
|
|
159
232
|
|
|
233
|
+
interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
234
|
+
checked: boolean;
|
|
235
|
+
indeterminate?: boolean;
|
|
236
|
+
onCheckedChange: (checked: boolean) => void;
|
|
237
|
+
}
|
|
238
|
+
declare function Checkbox({ checked, indeterminate, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }: CheckboxProps): React.JSX.Element;
|
|
239
|
+
|
|
160
240
|
type SortDirection = 'asc' | 'desc' | null;
|
|
241
|
+
interface SortableTableDefaultSort {
|
|
242
|
+
key: string;
|
|
243
|
+
direction: Exclude<SortDirection, null>;
|
|
244
|
+
}
|
|
161
245
|
interface SortableTableColumn<T> {
|
|
162
246
|
key: string;
|
|
163
247
|
header: string;
|
|
@@ -167,23 +251,68 @@ interface SortableTableColumn<T> {
|
|
|
167
251
|
render: (row: T, index: number) => ReactNode;
|
|
168
252
|
align?: 'left' | 'right';
|
|
169
253
|
}
|
|
254
|
+
interface SortableTableRowAction<T> {
|
|
255
|
+
label: (row: T, index: number) => string;
|
|
256
|
+
icon: (row: T, index: number) => ReactNode;
|
|
257
|
+
}
|
|
258
|
+
interface SortableTableSelection<T> {
|
|
259
|
+
/** Returns whether a row is selected. Selection is controlled by the consumer. */
|
|
260
|
+
isSelected: (row: T) => boolean;
|
|
261
|
+
/** Called when an individual row changes selection. */
|
|
262
|
+
onSelectedChange: (row: T, selected: boolean) => void;
|
|
263
|
+
/**
|
|
264
|
+
* Handles the complete selectable row set in one update when the header
|
|
265
|
+
* checkbox changes. Falls back to `onSelectedChange` for each row when omitted.
|
|
266
|
+
*/
|
|
267
|
+
onSelectAllChange?: (rows: T[], selected: boolean) => void;
|
|
268
|
+
/** Accessible name for an individual row's checkbox. */
|
|
269
|
+
getRowLabel: (row: T) => string;
|
|
270
|
+
/** Accessible name for the header checkbox. */
|
|
271
|
+
selectAllLabel?: string;
|
|
272
|
+
}
|
|
273
|
+
interface SortableTablePagination {
|
|
274
|
+
page: number;
|
|
275
|
+
pageSize: number;
|
|
276
|
+
}
|
|
170
277
|
interface SortableTableProps<T> {
|
|
171
278
|
columns: SortableTableColumn<T>[];
|
|
172
279
|
data: T[];
|
|
280
|
+
/** Accessible name applied to the underlying table element. */
|
|
281
|
+
'aria-label'?: string;
|
|
173
282
|
emptyMessage?: string;
|
|
174
283
|
header?: ReactNode;
|
|
175
284
|
size?: 'sm' | 'md' | 'lg';
|
|
285
|
+
/** Removes the table's outer border and radius for use inside another framed surface. */
|
|
286
|
+
embedded?: boolean;
|
|
176
287
|
className?: string;
|
|
288
|
+
/** Required baseline row ordering that does not appear as an active user sort. */
|
|
289
|
+
defaultSort: SortableTableDefaultSort;
|
|
290
|
+
/** Initial visible user sort state. */
|
|
177
291
|
defaultSortKey?: string;
|
|
178
292
|
defaultSortDirection?: SortDirection;
|
|
179
293
|
sortKey?: string | null;
|
|
180
294
|
sortDirection?: SortDirection;
|
|
181
295
|
onSortChange?: (key: string | null, direction: SortDirection) => void;
|
|
296
|
+
/**
|
|
297
|
+
* Slices the globally sorted dataset for display. Always pass the complete
|
|
298
|
+
* filtered dataset in `data`; sorting is applied before pagination.
|
|
299
|
+
*/
|
|
300
|
+
pagination?: SortableTablePagination;
|
|
182
301
|
highlightRow?: (row: T, index: number) => boolean;
|
|
302
|
+
/** Adds a leading checkbox column with controlled row selection. */
|
|
303
|
+
selection?: SortableTableSelection<T>;
|
|
304
|
+
/** Disabled rows remain visible but cannot be selected or activated. */
|
|
305
|
+
isRowDisabled?: (row: T) => boolean;
|
|
306
|
+
/** Disables only a row's selection control while preserving row activation. */
|
|
307
|
+
isRowSelectionDisabled?: (row: T) => boolean;
|
|
183
308
|
/** Invoked when a row is selected. Enables pointer and keyboard row activation. */
|
|
184
309
|
onRowClick?: (row: T, index: number) => void;
|
|
310
|
+
/** Invoked when a row is double-clicked. */
|
|
311
|
+
onRowDoubleClick?: (row: T, index: number) => void;
|
|
312
|
+
/** Directional affordance displayed over the right edge of an interactive row. */
|
|
313
|
+
rowAction?: SortableTableRowAction<T>;
|
|
185
314
|
}
|
|
186
|
-
declare function SortableTable<T>({ columns, data, emptyMessage, header, size, className, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, onRowClick, }: SortableTableProps<T>): React.JSX.Element;
|
|
315
|
+
declare function SortableTable<T>({ columns, data, 'aria-label': ariaLabel, emptyMessage, header, size, embedded, className, defaultSort, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, pagination, highlightRow, selection, isRowDisabled, isRowSelectionDisabled, onRowClick, onRowDoubleClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
|
|
187
316
|
|
|
188
317
|
interface TabItem {
|
|
189
318
|
id: string;
|
|
@@ -191,6 +320,7 @@ interface TabItem {
|
|
|
191
320
|
content: ReactNode;
|
|
192
321
|
disabled?: boolean;
|
|
193
322
|
}
|
|
323
|
+
type TabsVariant = 'line' | 'surface';
|
|
194
324
|
interface TabsProps {
|
|
195
325
|
items: TabItem[];
|
|
196
326
|
defaultValue?: string;
|
|
@@ -198,8 +328,27 @@ interface TabsProps {
|
|
|
198
328
|
onValueChange?: (id: string) => void;
|
|
199
329
|
className?: string;
|
|
200
330
|
ariaLabel?: string;
|
|
331
|
+
/** Extends a subtle divider across the entire tab list. */
|
|
332
|
+
divider?: boolean;
|
|
333
|
+
/** Visual treatment. Surface tabs sit on a full-width secondary surface with the active tab connected to its panel. */
|
|
334
|
+
variant?: TabsVariant;
|
|
335
|
+
}
|
|
336
|
+
declare function Tabs({ items, defaultValue, value: controlledValue, onValueChange, className, ariaLabel, divider, variant, }: TabsProps): React.JSX.Element;
|
|
337
|
+
|
|
338
|
+
interface ContentSwitcherItem {
|
|
339
|
+
value: string;
|
|
340
|
+
label: React.ReactNode;
|
|
341
|
+
disabled?: boolean;
|
|
201
342
|
}
|
|
202
|
-
|
|
343
|
+
interface ContentSwitcherProps {
|
|
344
|
+
items: ContentSwitcherItem[];
|
|
345
|
+
value: string;
|
|
346
|
+
onValueChange: (value: string) => void;
|
|
347
|
+
ariaLabel: string;
|
|
348
|
+
fullWidth?: boolean;
|
|
349
|
+
className?: string;
|
|
350
|
+
}
|
|
351
|
+
declare function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth, className }: ContentSwitcherProps): React.JSX.Element;
|
|
203
352
|
|
|
204
353
|
interface DisclosureProps {
|
|
205
354
|
title: ReactNode;
|
|
@@ -208,18 +357,136 @@ interface DisclosureProps {
|
|
|
208
357
|
defaultOpen?: boolean;
|
|
209
358
|
open?: boolean;
|
|
210
359
|
onOpenChange?: (open: boolean) => void;
|
|
360
|
+
disabled?: boolean;
|
|
211
361
|
className?: string;
|
|
212
362
|
variant?: 'card' | 'plain';
|
|
213
363
|
}
|
|
214
|
-
declare function Disclosure({ title, meta, children, defaultOpen, open: controlledOpen, onOpenChange, className, variant, }: DisclosureProps): React.JSX.Element;
|
|
364
|
+
declare function Disclosure({ title, meta, children, defaultOpen, open: controlledOpen, onOpenChange, disabled, className, variant, }: DisclosureProps): React.JSX.Element;
|
|
365
|
+
|
|
366
|
+
interface LatticeLoaderProps extends HTMLAttributes<HTMLSpanElement> {
|
|
367
|
+
label?: string;
|
|
368
|
+
}
|
|
369
|
+
declare function LatticeLoader({ className, label, ...props }: LatticeLoaderProps): React.JSX.Element;
|
|
370
|
+
|
|
371
|
+
type UILoaderTone = 'neutral' | 'blue' | 'green';
|
|
372
|
+
interface UILoaderProps {
|
|
373
|
+
/** Visual height. Width follows the mark's aspect ratio. */
|
|
374
|
+
size?: number | string;
|
|
375
|
+
tone?: UILoaderTone;
|
|
376
|
+
className?: string;
|
|
377
|
+
style?: CSSProperties;
|
|
378
|
+
label?: string;
|
|
379
|
+
/** Use when another nearby element already announces loading. */
|
|
380
|
+
ariaHidden?: boolean;
|
|
381
|
+
}
|
|
382
|
+
/** A branded shine loader for whole UI surfaces, not component-level content. */
|
|
383
|
+
declare function UILoader({ size, tone, className, style, label, ariaHidden }: UILoaderProps): React.JSX.Element;
|
|
384
|
+
|
|
385
|
+
type GhostLength = number | string;
|
|
386
|
+
interface GhostProps extends HTMLAttributes<HTMLDivElement> {
|
|
387
|
+
/** Width of the placeholder. Numbers are interpreted as pixels. */
|
|
388
|
+
width?: GhostLength;
|
|
389
|
+
/** Height of the placeholder. Numbers are interpreted as pixels. */
|
|
390
|
+
height?: GhostLength;
|
|
391
|
+
/** Border radius override. */
|
|
392
|
+
radius?: GhostLength;
|
|
393
|
+
}
|
|
394
|
+
interface GhostLineProps extends Omit<GhostProps, 'height'> {
|
|
395
|
+
/** Text-line size. */
|
|
396
|
+
size?: 'sm' | 'md' | 'lg';
|
|
397
|
+
}
|
|
398
|
+
/**
|
|
399
|
+
* An intentionally content-free, shimmering placeholder. Use the composed
|
|
400
|
+
* ghosts below for standard Fractal components; use this primitive for custom
|
|
401
|
+
* product layouts.
|
|
402
|
+
*/
|
|
403
|
+
declare function Ghost({ className, width, height, radius, style, ...props }: GhostProps): React.JSX.Element;
|
|
404
|
+
declare function GhostLine({ className, size, width, ...props }: GhostLineProps): React.JSX.Element;
|
|
405
|
+
interface ButtonGhostProps extends Omit<GhostProps, 'height'> {
|
|
406
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
407
|
+
iconOnly?: boolean;
|
|
408
|
+
}
|
|
409
|
+
declare function ButtonGhost({ className, size, iconOnly, width, ...props }: ButtonGhostProps): React.JSX.Element;
|
|
410
|
+
interface CardGhostProps extends HTMLAttributes<HTMLDivElement> {
|
|
411
|
+
lines?: number;
|
|
412
|
+
showHeader?: boolean;
|
|
413
|
+
}
|
|
414
|
+
declare function CardGhost({ className, lines, showHeader, ...props }: CardGhostProps): React.JSX.Element;
|
|
415
|
+
interface DataTableGhostProps extends HTMLAttributes<HTMLDivElement> {
|
|
416
|
+
/** Display placeholder cells for a header that is itself still loading. */
|
|
417
|
+
showHeader?: boolean;
|
|
418
|
+
/** Static header labels to retain while only rows are loading. */
|
|
419
|
+
headers?: ReactNode[];
|
|
420
|
+
/** Number of column placeholders. */
|
|
421
|
+
columns?: number;
|
|
422
|
+
/** Number of data row placeholders. */
|
|
423
|
+
rows?: number;
|
|
424
|
+
/** Optional CSS widths mirroring the eventual table columns. */
|
|
425
|
+
columnWidths?: string[];
|
|
426
|
+
size?: 'sm' | 'md' | 'lg';
|
|
427
|
+
}
|
|
428
|
+
declare function DataTableGhost({ className, showHeader, headers, columns, rows, columnWidths, size, ...props }: DataTableGhostProps): React.JSX.Element;
|
|
429
|
+
interface FormFieldGhostProps extends HTMLAttributes<HTMLDivElement> {
|
|
430
|
+
labelWidth?: GhostLength;
|
|
431
|
+
multiline?: boolean;
|
|
432
|
+
}
|
|
433
|
+
declare function InputGhost({ className, labelWidth, ...props }: FormFieldGhostProps): React.JSX.Element;
|
|
434
|
+
declare function TextareaGhost({ className, labelWidth, ...props }: FormFieldGhostProps): React.JSX.Element;
|
|
435
|
+
declare function LabelGhost({ className, width, ...props }: Omit<GhostLineProps, 'size'>): React.JSX.Element;
|
|
436
|
+
declare function AlertGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
437
|
+
declare function CheckboxGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
438
|
+
declare const ToggleGhost: typeof CheckboxGhost;
|
|
439
|
+
declare function ChipGhost({ className, width, ...props }: Omit<GhostProps, 'height'>): React.JSX.Element;
|
|
440
|
+
declare function LinkGhost({ className, width, ...props }: Omit<GhostLineProps, 'size'>): React.JSX.Element;
|
|
441
|
+
declare const TextButtonGhost: typeof LinkGhost;
|
|
442
|
+
declare function DropdownGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
443
|
+
declare function ContentSwitcherGhost({ className, options, ...props }: HTMLAttributes<HTMLDivElement> & {
|
|
444
|
+
options?: number;
|
|
445
|
+
}): React.JSX.Element;
|
|
446
|
+
declare const TabsGhost: typeof ContentSwitcherGhost;
|
|
447
|
+
declare function DisclosureGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
448
|
+
declare function PaginationGhost({ className, pages, ...props }: HTMLAttributes<HTMLDivElement> & {
|
|
449
|
+
pages?: number;
|
|
450
|
+
}): React.JSX.Element;
|
|
451
|
+
declare function FileDropzoneGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
452
|
+
declare function PromptCardGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
453
|
+
type ConversationGhostProps = HTMLAttributes<HTMLDivElement>;
|
|
454
|
+
declare function ConversationGhost({ className, 'aria-label': ariaLabel, ...props }: ConversationGhostProps): React.JSX.Element;
|
|
455
|
+
declare function SortableTableGhost(props: DataTableGhostProps): React.JSX.Element;
|
|
456
|
+
interface SidebarGhostProps extends HTMLAttributes<HTMLDivElement> {
|
|
457
|
+
items?: number;
|
|
458
|
+
}
|
|
459
|
+
declare function SidebarGhost({ className, items, ...props }: SidebarGhostProps): React.JSX.Element;
|
|
460
|
+
interface SurfaceGhostProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
461
|
+
title?: ReactNode;
|
|
462
|
+
lines?: number;
|
|
463
|
+
}
|
|
464
|
+
declare function ModalGhost({ className, title, lines, ...props }: SurfaceGhostProps): React.JSX.Element;
|
|
465
|
+
declare function SidePanelGhost({ className, title, lines, ...props }: SurfaceGhostProps): React.JSX.Element;
|
|
215
466
|
|
|
216
467
|
interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
|
|
217
468
|
/** Fixed sidebar width. Defaults to the standard application width. */
|
|
218
469
|
width?: string;
|
|
470
|
+
/** Collapses the sidebar to an icon rail until it is hovered or receives focus. */
|
|
471
|
+
compact?: boolean;
|
|
219
472
|
}
|
|
220
473
|
declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
|
|
221
474
|
declare const SidebarHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
222
475
|
declare const SidebarBrand: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
|
|
476
|
+
interface SidebarAccountMenuProps {
|
|
477
|
+
/** Person or workspace label shown in the sidebar header. */
|
|
478
|
+
name: string;
|
|
479
|
+
/** Available account actions. */
|
|
480
|
+
items: DropdownItem[];
|
|
481
|
+
/** Invoked when an account action is selected. */
|
|
482
|
+
onSelect: (value: string) => void;
|
|
483
|
+
/** Accessible label for the account actions menu. */
|
|
484
|
+
triggerLabel?: string;
|
|
485
|
+
/** Leading profile or workspace mark. */
|
|
486
|
+
icon?: React.ReactNode;
|
|
487
|
+
className?: string;
|
|
488
|
+
}
|
|
489
|
+
declare function SidebarAccountMenu({ name, items, onSelect, triggerLabel, icon, className, }: SidebarAccountMenuProps): React.JSX.Element;
|
|
223
490
|
declare const SidebarNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
|
|
224
491
|
declare const SidebarSection: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
225
492
|
interface SidebarNavItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -240,16 +507,56 @@ interface SidePanelProps {
|
|
|
240
507
|
description?: React.ReactNode;
|
|
241
508
|
children: React.ReactNode;
|
|
242
509
|
footer?: React.ReactNode;
|
|
243
|
-
/** Panel width: sm (420px), md (540px),
|
|
244
|
-
size?: 'sm' | 'md' | 'lg';
|
|
510
|
+
/** Panel width: sm (420px), md (540px), lg (680px), or xl (960px). */
|
|
511
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
512
|
+
/** Replaces the body with a whole-surface loading state while retaining the panel header. */
|
|
513
|
+
loading?: boolean;
|
|
514
|
+
loadingLabel?: string;
|
|
245
515
|
className?: string;
|
|
246
516
|
}
|
|
247
|
-
declare function SidePanel({ open, onClose, title, description, children, footer, size, className }: SidePanelProps): React.ReactPortal | null;
|
|
517
|
+
declare function SidePanel({ open, onClose, title, description, children, footer, size, loading, loadingLabel, className }: SidePanelProps): React.ReactPortal | null;
|
|
248
518
|
|
|
249
519
|
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
250
520
|
}
|
|
251
521
|
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
252
522
|
|
|
523
|
+
type TextButtonSize = 'sm' | 'md';
|
|
524
|
+
type TextButtonIconPosition = 'start' | 'end';
|
|
525
|
+
type TextButtonTone = 'primary' | 'secondary';
|
|
526
|
+
interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
527
|
+
icon?: React.ReactNode;
|
|
528
|
+
iconPosition?: TextButtonIconPosition;
|
|
529
|
+
size?: TextButtonSize;
|
|
530
|
+
tone?: TextButtonTone;
|
|
531
|
+
}
|
|
532
|
+
declare const TextButton: React.ForwardRefExoticComponent<TextButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
533
|
+
|
|
534
|
+
interface FileDropzoneProps {
|
|
535
|
+
files: File[];
|
|
536
|
+
onFilesChange: (files: File[]) => void;
|
|
537
|
+
accept?: string;
|
|
538
|
+
multiple?: boolean;
|
|
539
|
+
disabled?: boolean;
|
|
540
|
+
title?: React.ReactNode;
|
|
541
|
+
description?: React.ReactNode;
|
|
542
|
+
className?: string;
|
|
543
|
+
}
|
|
544
|
+
declare function FileDropzone({ files, onFilesChange, accept, multiple, disabled, title, description, className, }: FileDropzoneProps): React.JSX.Element;
|
|
545
|
+
|
|
546
|
+
interface PaginationProps {
|
|
547
|
+
/** One-based active page. */
|
|
548
|
+
page: number;
|
|
549
|
+
pageSize: number;
|
|
550
|
+
totalItems: number;
|
|
551
|
+
onPageChange: (page: number) => void;
|
|
552
|
+
/** Optional page sizes, rendered as an unframed selector in the pagination footer. */
|
|
553
|
+
pageSizeOptions?: number[];
|
|
554
|
+
onPageSizeChange?: (pageSize: number) => void;
|
|
555
|
+
ariaLabel?: string;
|
|
556
|
+
className?: string;
|
|
557
|
+
}
|
|
558
|
+
declare function Pagination({ page, pageSize, totalItems, onPageChange, pageSizeOptions, onPageSizeChange, ariaLabel, className, }: PaginationProps): React.JSX.Element;
|
|
559
|
+
|
|
253
560
|
/**
|
|
254
561
|
* Register an Escape-key dismiss handler with the global priority stack.
|
|
255
562
|
*
|
|
@@ -261,4 +568,4 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
|
|
|
261
568
|
|
|
262
569
|
declare function cn(...inputs: ClassValue[]): string;
|
|
263
570
|
|
|
264
|
-
export { Alert, AlertDescription, AlertTitle, Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chip, type ChipProps, type ChipTone, DataTable, type DataTableColumn, type DataTableProps, Disclosure, type DisclosureProps, Dropdown, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FolderCard, type FolderCardProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, type LinkSize, type LinkTheme, Modal, type ModalProps, PromptCard, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, type SidePanelProps, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableProps, type TabItem, Tabs, type TabsProps, Textarea, type TextareaProps, Toggle, type ToggleProps, cn, useEscapeDismiss };
|
|
571
|
+
export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, CodeBlock, type CodeBlockProps, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, ConversationGhost, type ConversationGhostProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, NumberInput, type NumberInputProps, Pagination, PaginationGhost, type PaginationProps, PasswordInput, type PasswordInputProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTablePagination, type SortableTableProps, type SortableTableRowAction, type SortableTableSelection, type SurfaceGhostProps, type TabItem, TableSearch, type TableSearchProps, type TableSearchType, Tabs, TabsGhost, type TabsProps, type TabsVariant, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };
|