@ceebee/ui 0.6.0 → 1.0.1
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/THIRD_PARTY_NOTICES.md +28 -0
- package/dist/client.d.ts +27 -1394
- package/dist/client.js +309 -4301
- package/dist/index.d.ts +10 -585
- package/dist/index.js +22 -860
- package/dist/skins/astra.css +1 -1
- package/dist/styles.css +691 -4180
- package/package.json +5 -4
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
/** Joins class names, dropping falsy values. No merge logic: the library never emits
|
|
5
5
|
* conflicting utility classes, so the "last wins" problem tailwind-merge solves does not exist. */
|
|
@@ -29,15 +29,15 @@ interface SurfaceProps {
|
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
31
|
* The panel every raised or tinted thing is built on. Glass and gradient live here as
|
|
32
|
-
* variants rather than being baked into the brand
|
|
32
|
+
* variants rather than being baked into the brand, so one Skin reproduces the
|
|
33
33
|
* reference board and another produces something sober without touching a component.
|
|
34
34
|
*/
|
|
35
35
|
declare function Surface({ variant, glassStyle, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
|
|
36
36
|
|
|
37
|
-
type SpaceStep
|
|
37
|
+
type SpaceStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
38
38
|
interface StackProps {
|
|
39
39
|
direction?: 'row' | 'column';
|
|
40
|
-
gap?: SpaceStep
|
|
40
|
+
gap?: SpaceStep;
|
|
41
41
|
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
42
42
|
justify?: 'start' | 'center' | 'end' | 'between';
|
|
43
43
|
wrap?: boolean;
|
|
@@ -49,7 +49,7 @@ declare function Flex({ direction, gap, align, justify, wrap, className, childre
|
|
|
49
49
|
interface GridProps {
|
|
50
50
|
/** Column count at the widest breakpoint; the grid collapses on its own below it. */
|
|
51
51
|
columns?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
52
|
-
gap?: SpaceStep
|
|
52
|
+
gap?: SpaceStep;
|
|
53
53
|
minItemWidth?: string;
|
|
54
54
|
className?: string;
|
|
55
55
|
children?: ReactNode;
|
|
@@ -81,78 +81,6 @@ interface HeadingProps {
|
|
|
81
81
|
/** Level and size are separate on purpose: document structure is not a font size. */
|
|
82
82
|
declare function Heading({ level, size, className, children }: HeadingProps): react.JSX.Element;
|
|
83
83
|
|
|
84
|
-
interface SpaceSkeletonProps {
|
|
85
|
-
items?: number;
|
|
86
|
-
direction?: SpaceDirection;
|
|
87
|
-
size?: SpaceSize;
|
|
88
|
-
wrap?: boolean;
|
|
89
|
-
className?: string;
|
|
90
|
-
}
|
|
91
|
-
declare function SpaceSkeleton({ items, direction, size, wrap, className }: SpaceSkeletonProps): react.JSX.Element;
|
|
92
|
-
|
|
93
|
-
type SpaceStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
94
|
-
type SpaceSize = SpaceStep | 'small' | 'middle' | 'large';
|
|
95
|
-
type SpaceDirection = 'horizontal' | 'vertical';
|
|
96
|
-
type SpaceAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
|
|
97
|
-
interface SpaceProps {
|
|
98
|
-
direction?: SpaceDirection;
|
|
99
|
-
size?: SpaceSize;
|
|
100
|
-
align?: SpaceAlign;
|
|
101
|
-
wrap?: boolean;
|
|
102
|
-
split?: ReactNode;
|
|
103
|
-
className?: string;
|
|
104
|
-
children?: ReactNode;
|
|
105
|
-
}
|
|
106
|
-
declare function SpaceRoot({ direction, size, align, wrap, split, className, children, }: SpaceProps): react.JSX.Element;
|
|
107
|
-
interface SpaceCompactProps {
|
|
108
|
-
direction?: SpaceDirection;
|
|
109
|
-
className?: string;
|
|
110
|
-
children?: ReactNode;
|
|
111
|
-
}
|
|
112
|
-
declare function SpaceCompact({ direction, className, children }: SpaceCompactProps): react.JSX.Element;
|
|
113
|
-
declare const Space: typeof SpaceRoot & {
|
|
114
|
-
Compact: typeof SpaceCompact;
|
|
115
|
-
Skeleton: typeof SpaceSkeleton;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
interface MasonrySkeletonProps {
|
|
119
|
-
items?: number;
|
|
120
|
-
columns?: MasonryColumns;
|
|
121
|
-
gap?: MasonryStep;
|
|
122
|
-
className?: string;
|
|
123
|
-
}
|
|
124
|
-
declare function MasonrySkeleton({ items, columns, gap, className }: MasonrySkeletonProps): react.JSX.Element;
|
|
125
|
-
|
|
126
|
-
type MasonryColumns = 1 | 2 | 3 | 4;
|
|
127
|
-
type MasonryStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
128
|
-
interface MasonryProps {
|
|
129
|
-
/** Column count at the widest breakpoint; the layout collapses below it. */
|
|
130
|
-
columns?: MasonryColumns;
|
|
131
|
-
/** Gap Token shared by both the column and item axes. */
|
|
132
|
-
gap?: MasonryStep;
|
|
133
|
-
className?: string;
|
|
134
|
-
children?: ReactNode;
|
|
135
|
-
}
|
|
136
|
-
declare function MasonryRoot({ columns, gap, className, children }: MasonryProps): react.JSX.Element;
|
|
137
|
-
declare const Masonry: typeof MasonryRoot & {
|
|
138
|
-
Skeleton: typeof MasonrySkeleton;
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
type AffixEdge = 'top' | 'bottom';
|
|
142
|
-
type AffixOffset = 'sm' | 'md' | 'lg';
|
|
143
|
-
interface AffixProps {
|
|
144
|
-
/** Edge of the nearest scroll container where the content should stick. */
|
|
145
|
-
edge?: AffixEdge;
|
|
146
|
-
/** Spacing Token used as the sticky inset from the selected edge. */
|
|
147
|
-
offset?: AffixOffset;
|
|
148
|
-
children?: ReactNode;
|
|
149
|
-
}
|
|
150
|
-
/**
|
|
151
|
-
* Server-safe sticky layout atom. The nearest scroll container owns the scroll
|
|
152
|
-
* context; Affix only supplies sticky positioning and a semantic stacking rung.
|
|
153
|
-
*/
|
|
154
|
-
declare function Affix({ edge, offset, children }: AffixProps): react.JSX.Element;
|
|
155
|
-
|
|
156
84
|
interface PageContainerSkeletonProps {
|
|
157
85
|
breadcrumb?: boolean;
|
|
158
86
|
subtitle?: boolean;
|
|
@@ -178,281 +106,7 @@ declare const PageContainer: typeof PageContainerRoot & {
|
|
|
178
106
|
Skeleton: typeof PageContainerSkeleton;
|
|
179
107
|
};
|
|
180
108
|
|
|
181
|
-
|
|
182
|
-
variant?: 'solid' | 'soft' | 'outline' | 'ghost';
|
|
183
|
-
tone?: Tone;
|
|
184
|
-
size?: Size;
|
|
185
|
-
iconStart?: ReactNode;
|
|
186
|
-
iconEnd?: ReactNode;
|
|
187
|
-
children?: ReactNode;
|
|
188
|
-
/**
|
|
189
|
-
* Render something else in the anchor's place — a router's own Link, which has
|
|
190
|
-
* to stay itself or client-side navigation is lost. It receives the classes
|
|
191
|
-
* and the tone; everything else it keeps. The same `render` seam Base UI uses
|
|
192
|
-
* elsewhere in this library.
|
|
193
|
-
*/
|
|
194
|
-
render?: ReactElement;
|
|
195
|
-
}
|
|
196
|
-
/**
|
|
197
|
-
* A link wearing a button's clothes.
|
|
198
|
-
*
|
|
199
|
-
* Not a `Button` with an `href`. A link navigates and a button acts, and the
|
|
200
|
-
* difference is not decoration: a link can be opened in a new tab, copied,
|
|
201
|
-
* dragged to a bookmark bar and reached by a screen reader's list of links,
|
|
202
|
-
* while a button can be disabled and submit a form. Those are different
|
|
203
|
-
* contracts, so they are different components (ADR 0014).
|
|
204
|
-
*
|
|
205
|
-
* What they share is the look, and that is shared literally — the same
|
|
206
|
-
* `cb-button` classes rather than a second set that would agree today and drift
|
|
207
|
-
* apart later. It is server-safe: an anchor needs no hook, no handler and no
|
|
208
|
-
* motion, so it stays a Server Component (ADR 0004). The press animation is
|
|
209
|
-
* Button's alone, which is honest: a link does not depress, it goes somewhere.
|
|
210
|
-
*/
|
|
211
|
-
declare function LinkButton({ variant, tone, size, iconStart, iconEnd, className, children, render, ...rest }: LinkButtonProps): react.JSX.Element;
|
|
212
|
-
|
|
213
|
-
interface AnchorSkeletonProps {
|
|
214
|
-
items?: number;
|
|
215
|
-
orientation?: 'vertical' | 'horizontal';
|
|
216
|
-
size?: 'sm' | 'md' | 'lg';
|
|
217
|
-
tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
|
|
218
|
-
'aria-label'?: string;
|
|
219
|
-
}
|
|
220
|
-
/** Matching link geometry for an Anchor whose section labels have not loaded yet. */
|
|
221
|
-
declare function AnchorSkeleton({ items, orientation, size, tone, 'aria-label': ariaLabel, }: AnchorSkeletonProps): react.JSX.Element;
|
|
222
|
-
|
|
223
|
-
type AnchorTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
|
|
224
|
-
type AnchorOrientation = 'vertical' | 'horizontal';
|
|
225
|
-
type AnchorSize = 'sm' | 'md' | 'lg';
|
|
226
|
-
interface AnchorItem {
|
|
227
|
-
id: string;
|
|
228
|
-
label: ReactNode;
|
|
229
|
-
href: `#${string}`;
|
|
230
|
-
children?: AnchorItem[];
|
|
231
|
-
}
|
|
232
|
-
interface AnchorProps {
|
|
233
|
-
items: AnchorItem[];
|
|
234
|
-
activeId?: string;
|
|
235
|
-
orientation?: AnchorOrientation;
|
|
236
|
-
size?: AnchorSize;
|
|
237
|
-
tone?: AnchorTone;
|
|
238
|
-
motion?: boolean;
|
|
239
|
-
'aria-label'?: string;
|
|
240
|
-
}
|
|
241
|
-
/**
|
|
242
|
-
* Server-safe in-page navigation. The consuming app owns active-section observation and routing;
|
|
243
|
-
* Anchor only renders native hash links and exposes the supplied active state.
|
|
244
|
-
*/
|
|
245
|
-
declare function AnchorRoot({ items, activeId, orientation, size, tone, motion, 'aria-label': ariaLabel, }: AnchorProps): react.JSX.Element;
|
|
246
|
-
declare const Anchor: typeof AnchorRoot & {
|
|
247
|
-
Skeleton: typeof AnchorSkeleton;
|
|
248
|
-
};
|
|
249
|
-
|
|
250
|
-
interface DividerProps {
|
|
251
|
-
/** A word or two sitting in the rule, for a section break that names itself. */
|
|
252
|
-
children?: ReactNode;
|
|
253
|
-
orientation?: 'horizontal' | 'vertical';
|
|
254
|
-
className?: string;
|
|
255
|
-
}
|
|
256
|
-
/**
|
|
257
|
-
* A rule between things.
|
|
258
|
-
*
|
|
259
|
-
* `<hr>` when it separates content, because that is what the element means and
|
|
260
|
-
* a screen reader announces it. With a label it becomes a `<div>` carrying the
|
|
261
|
-
* rule in its borders instead — an `<hr>` may not contain anything, and a
|
|
262
|
-
* separator that says which section is starting is worth more than the element.
|
|
263
|
-
*/
|
|
264
|
-
declare function Divider({ children, orientation, className }: DividerProps): react.JSX.Element;
|
|
265
|
-
|
|
266
|
-
interface BadgeProps {
|
|
267
|
-
children: ReactNode;
|
|
268
|
-
tone?: Tone;
|
|
269
|
-
variant?: 'soft' | 'solid' | 'outline';
|
|
270
|
-
size?: 'sm' | 'md';
|
|
271
|
-
/** Leading dot — for status, where the colour alone would be the only signal. */
|
|
272
|
-
dot?: boolean;
|
|
273
|
-
className?: string;
|
|
274
|
-
}
|
|
275
|
-
/** A label, not a button. If it can be clicked or removed, it is a Tag and needs a control. */
|
|
276
|
-
declare function Badge({ children, tone, variant, size, dot, className }: BadgeProps): react.JSX.Element;
|
|
277
|
-
|
|
278
|
-
interface EmptyStateProps {
|
|
279
|
-
title: ReactNode;
|
|
280
|
-
description?: ReactNode;
|
|
281
|
-
icon?: ReactNode;
|
|
282
|
-
actions?: ReactNode;
|
|
283
|
-
/** `search` reads as "nothing matched", `first-run` as "nothing here yet" — they differ. */
|
|
284
|
-
variant?: 'first-run' | 'search' | 'error';
|
|
285
|
-
className?: string;
|
|
286
|
-
}
|
|
287
|
-
declare function Empty({ title, description, icon, actions, variant, className }: EmptyStateProps): react.JSX.Element;
|
|
288
|
-
|
|
289
|
-
/** Matching Result anatomy while the end-state content is loading (ADR 0009). */
|
|
290
|
-
declare function ResultSkeleton(): react.JSX.Element;
|
|
291
|
-
|
|
292
|
-
type ResultStatus = 'success' | 'info' | 'warning' | 'error' | '404' | '403' | '500';
|
|
293
|
-
interface ResultProps {
|
|
294
|
-
title: ReactNode;
|
|
295
|
-
description?: ReactNode;
|
|
296
|
-
status?: ResultStatus;
|
|
297
|
-
icon?: ReactNode;
|
|
298
|
-
extra?: ReactNode;
|
|
299
|
-
children?: ReactNode;
|
|
300
|
-
}
|
|
301
|
-
/** A presentational end state for a completed flow. Actions keep their own interaction contract. */
|
|
302
|
-
declare function ResultRoot({ title, description, status, icon, extra, children }: ResultProps): react.JSX.Element;
|
|
303
|
-
declare const Result: typeof ResultRoot & {
|
|
304
|
-
Skeleton: typeof ResultSkeleton;
|
|
305
|
-
};
|
|
306
|
-
|
|
307
|
-
interface NotificationSkeletonProps {
|
|
308
|
-
lines?: number;
|
|
309
|
-
withActions?: boolean;
|
|
310
|
-
}
|
|
311
|
-
declare function NotificationSkeleton({ lines, withActions }: NotificationSkeletonProps): react.JSX.Element;
|
|
312
|
-
|
|
313
|
-
type NotificationTone = Extract<Tone, 'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
|
|
314
|
-
interface NotificationProps {
|
|
315
|
-
title: ReactNode;
|
|
316
|
-
description?: ReactNode;
|
|
317
|
-
icon?: ReactNode;
|
|
318
|
-
actions?: ReactNode;
|
|
319
|
-
tone?: NotificationTone;
|
|
320
|
-
/** Accessible status announcement. Danger is assertive; every other tone is polite. */
|
|
321
|
-
announce?: boolean;
|
|
322
|
-
}
|
|
323
|
-
/**
|
|
324
|
-
* Persistent rich feedback in normal document flow. The app owns its lifetime, placement, and
|
|
325
|
-
* actions; transient timed feedback remains Toast.
|
|
326
|
-
*/
|
|
327
|
-
declare function NotificationRoot({ title, description, icon, actions, tone, announce, }: NotificationProps): react.JSX.Element;
|
|
328
|
-
declare const Notification: typeof NotificationRoot & {
|
|
329
|
-
Skeleton: typeof NotificationSkeleton;
|
|
330
|
-
};
|
|
331
|
-
|
|
332
|
-
type QRCodeErrorCorrection = 'L' | 'M' | 'Q' | 'H';
|
|
333
|
-
interface QRCodeProps {
|
|
334
|
-
/** Text or URL encoded into the matrix. Must not be empty. */
|
|
335
|
-
value: string;
|
|
336
|
-
/** Accessible description of what scanning the code does. */
|
|
337
|
-
label: string;
|
|
338
|
-
size?: Size;
|
|
339
|
-
errorCorrection?: QRCodeErrorCorrection;
|
|
340
|
-
/** Raises error correction when the same QR version has spare capacity. */
|
|
341
|
-
boostErrorCorrection?: boolean;
|
|
342
|
-
}
|
|
343
|
-
/**
|
|
344
|
-
* Server-safe SVG QR image. uqr owns standards-compliant matrix encoding; Ceebee owns only the
|
|
345
|
-
* accessible SVG and Token-based presentation.
|
|
346
|
-
*/
|
|
347
|
-
declare function QRCode({ value, label, size, errorCorrection, boostErrorCorrection, }: QRCodeProps): react.JSX.Element;
|
|
348
|
-
|
|
349
|
-
interface SpinnerProps {
|
|
350
|
-
size?: 'sm' | 'md' | 'lg';
|
|
351
|
-
tone?: Tone;
|
|
352
|
-
/** Accessible name. Omit only when a nearby live region already says what is loading. */
|
|
353
|
-
label?: string;
|
|
354
|
-
className?: string;
|
|
355
|
-
}
|
|
356
|
-
/** Server-safe: a CSS animation, no state. It stops turning under reduced motion. */
|
|
357
|
-
declare function Spin({ size, tone, label, className }: SpinnerProps): react.JSX.Element;
|
|
358
|
-
interface ProgressBarProps {
|
|
359
|
-
/** Omit for an indeterminate bar — "something is happening, duration unknown". */
|
|
360
|
-
value?: number;
|
|
361
|
-
max?: number;
|
|
362
|
-
tone?: Tone;
|
|
363
|
-
size?: 'sm' | 'md';
|
|
364
|
-
label: string;
|
|
365
|
-
/** Prints the percentage at the end of the track. */
|
|
366
|
-
showValue?: boolean;
|
|
367
|
-
className?: string;
|
|
368
|
-
}
|
|
369
|
-
declare function ProgressBar({ value, max, tone, size, label, showValue, className }: ProgressBarProps): react.JSX.Element;
|
|
370
|
-
|
|
371
|
-
interface TimelineEntry {
|
|
372
|
-
/** When it happened. Already formatted — the library does not decide date format. */
|
|
373
|
-
time: ReactNode;
|
|
374
|
-
title: ReactNode;
|
|
375
|
-
description?: ReactNode;
|
|
376
|
-
icon?: ReactNode;
|
|
377
|
-
tone?: Tone;
|
|
378
|
-
}
|
|
379
|
-
interface TimelineProps {
|
|
380
|
-
entries: TimelineEntry[];
|
|
381
|
-
className?: string;
|
|
382
|
-
}
|
|
383
|
-
/**
|
|
384
|
-
* An ordered list of things that happened. Server-safe, and an `<ol>` rather than divs, so the
|
|
385
|
-
* order is a fact a screen reader reads out rather than a visual convention.
|
|
386
|
-
*/
|
|
387
|
-
declare function TimelineRoot({ entries, className }: TimelineProps): react.JSX.Element;
|
|
388
|
-
interface TimelineSkeletonProps {
|
|
389
|
-
entries?: number;
|
|
390
|
-
className?: string;
|
|
391
|
-
}
|
|
392
|
-
declare function TimelineSkeleton({ entries, className }: TimelineSkeletonProps): react.JSX.Element;
|
|
393
|
-
declare const Timeline: typeof TimelineRoot & {
|
|
394
|
-
Skeleton: typeof TimelineSkeleton;
|
|
395
|
-
};
|
|
396
|
-
|
|
397
|
-
interface SkeletonProps {
|
|
398
|
-
width?: string;
|
|
399
|
-
height?: string;
|
|
400
|
-
radius?: 'sm' | 'md' | 'lg' | 'full';
|
|
401
|
-
className?: string;
|
|
402
|
-
}
|
|
403
|
-
declare function box({ width, height, radius, className }: SkeletonProps): react.JSX.Element;
|
|
404
|
-
interface SkeletonTextProps {
|
|
405
|
-
lines?: number;
|
|
406
|
-
/** Width of the last line, which is short in real text and should be short here too. */
|
|
407
|
-
lastLineWidth?: string;
|
|
408
|
-
className?: string;
|
|
409
|
-
}
|
|
410
|
-
declare function text({ lines, lastLineWidth, className }: SkeletonTextProps): react.JSX.Element;
|
|
411
|
-
declare function circle({ size, className }: {
|
|
412
|
-
size?: string;
|
|
413
|
-
className?: string;
|
|
414
|
-
}): react.JSX.Element;
|
|
415
|
-
/**
|
|
416
|
-
* Placeholder shapes. Free-form cases use these; every Composition also ships its own
|
|
417
|
-
* `.Skeleton` built from the same tokens as the real thing, so the two cannot drift (ADR 0009).
|
|
418
|
-
*/
|
|
419
|
-
declare const Skeleton: typeof box & {
|
|
420
|
-
Text: typeof text;
|
|
421
|
-
Circle: typeof circle;
|
|
422
|
-
Rect: typeof box;
|
|
423
|
-
};
|
|
424
|
-
|
|
425
|
-
interface ProgressRingProps {
|
|
426
|
-
value: number;
|
|
427
|
-
max?: number;
|
|
428
|
-
size?: number;
|
|
429
|
-
thickness?: number;
|
|
430
|
-
tone?: Tone;
|
|
431
|
-
hue?: DecorHue;
|
|
432
|
-
/** Content in the middle of the ring. Defaults to the rounded percentage. */
|
|
433
|
-
children?: ReactNode;
|
|
434
|
-
/** Accessible name; required because a bare percentage tells a screen reader nothing. */
|
|
435
|
-
label: string;
|
|
436
|
-
className?: string;
|
|
437
|
-
}
|
|
438
|
-
/**
|
|
439
|
-
* The 84%-style ring the reference board leans on. Hand-written SVG, no charting
|
|
440
|
-
* dependency — it has no axis and no scale, so it is a Widget, not a Chart (ADR 0007).
|
|
441
|
-
*/
|
|
442
|
-
declare function ProgressRing({ value, max, size, thickness, tone, hue, children, label, className, }: ProgressRingProps): react.JSX.Element;
|
|
443
|
-
|
|
444
|
-
/** The ring's geometry, kept out of the component so it can be asserted (ADR 0012). */
|
|
445
|
-
interface RingGeometry {
|
|
446
|
-
radius: number;
|
|
447
|
-
circumference: number;
|
|
448
|
-
/** Stroke offset that renders `value` of `max` as a filled arc. */
|
|
449
|
-
dashOffset: number;
|
|
450
|
-
/** Value clamped into range, for the accessible label and the printed number. */
|
|
451
|
-
clamped: number;
|
|
452
|
-
}
|
|
453
|
-
declare function ringGeometry(value: number, max: number, size: number, thickness: number): RingGeometry;
|
|
454
|
-
|
|
455
|
-
/** Donut arithmetic, kept pure so the awkward inputs are asserted (ADR 0012). */
|
|
109
|
+
/** Donut arithmetic, kept pure so the awkward inputs are asserted. */
|
|
456
110
|
interface DonutSlice {
|
|
457
111
|
value: number;
|
|
458
112
|
label: string;
|
|
@@ -483,7 +137,7 @@ interface DonutProps {
|
|
|
483
137
|
label: string;
|
|
484
138
|
className?: string;
|
|
485
139
|
}
|
|
486
|
-
/** A proportion widget, not a chart: no axis, no scale, no tooltip
|
|
140
|
+
/** A proportion widget, not a chart: no axis, no scale, no tooltip. */
|
|
487
141
|
declare function Donut({ slices, size, thickness, hues, children, label, className }: DonutProps): react.JSX.Element;
|
|
488
142
|
|
|
489
143
|
interface SparklineProps {
|
|
@@ -499,7 +153,7 @@ interface SparklineProps {
|
|
|
499
153
|
label: string;
|
|
500
154
|
className?: string;
|
|
501
155
|
}
|
|
502
|
-
/** Trend at a glance. No axis, no scale, so it is a Widget rather than a Chart
|
|
156
|
+
/** Trend at a glance. No axis, no scale, so it is a Widget rather than a Chart. */
|
|
503
157
|
declare function Sparkline({ values, width, height, tone, hue, filled, showLast, label, className, }: SparklineProps): react.JSX.Element;
|
|
504
158
|
interface BarMiniProps {
|
|
505
159
|
values: number[];
|
|
@@ -555,235 +209,6 @@ interface LeaderboardProps {
|
|
|
555
209
|
* fact a screen reader reads out rather than a column of numbers it has to infer.
|
|
556
210
|
*/
|
|
557
211
|
declare function LeaderboardRoot({ entries, label, medals, className }: LeaderboardProps): react.JSX.Element;
|
|
558
|
-
|
|
559
|
-
rows?: number;
|
|
560
|
-
className?: string;
|
|
561
|
-
}
|
|
562
|
-
/** Same row geometry as the real list, so the panel does not resize on load (ADR 0009). */
|
|
563
|
-
declare function LeaderboardSkeleton({ rows, className }: LeaderboardSkeletonProps): react.JSX.Element;
|
|
564
|
-
declare const Leaderboard: typeof LeaderboardRoot & {
|
|
565
|
-
Skeleton: typeof LeaderboardSkeleton;
|
|
566
|
-
};
|
|
567
|
-
|
|
568
|
-
interface AvatarProps {
|
|
569
|
-
/** The person or thing. Used for the accessible name, the initials, and the fallback hue. */
|
|
570
|
-
name: string;
|
|
571
|
-
src?: string;
|
|
572
|
-
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
573
|
-
/** Overrides the hue derived from the name. */
|
|
574
|
-
hue?: DecorHue;
|
|
575
|
-
/** Presence dot. */
|
|
576
|
-
status?: 'online' | 'busy' | 'away' | 'offline';
|
|
577
|
-
className?: string;
|
|
578
|
-
}
|
|
579
|
-
/**
|
|
580
|
-
* Server-safe: no image-load state, no hooks. The initials render underneath and the image
|
|
581
|
-
* covers them when it loads, so a broken URL degrades to initials without JavaScript.
|
|
582
|
-
*/
|
|
583
|
-
declare function Avatar({ name, src, size, hue, status, className }: AvatarProps): react.JSX.Element;
|
|
584
|
-
interface AvatarGroupProps {
|
|
585
|
-
children: ReactNode;
|
|
586
|
-
/** Rendered as "+N" after the stack. */
|
|
587
|
-
overflow?: number;
|
|
588
|
-
size?: AvatarProps['size'];
|
|
589
|
-
className?: string;
|
|
590
|
-
}
|
|
591
|
-
declare function AvatarGroup({ children, overflow, size, className }: AvatarGroupProps): react.JSX.Element;
|
|
592
|
-
|
|
593
|
-
/**
|
|
594
|
-
* First letter of the first and last word. Two letters at most, because three stop fitting
|
|
595
|
-
* in the small size and a clipped initial reads as a rendering bug.
|
|
596
|
-
*/
|
|
597
|
-
declare function initialsOf(name: string): string;
|
|
598
|
-
/** Stable hue per name, so the same person keeps their colour across sessions and devices. */
|
|
599
|
-
declare function hueForName(name: string): DecorHue;
|
|
600
|
-
|
|
601
|
-
interface Crumb {
|
|
602
|
-
label: ReactNode;
|
|
603
|
-
href?: string;
|
|
604
|
-
onClick?: () => void;
|
|
605
|
-
}
|
|
606
|
-
interface BreadcrumbsProps {
|
|
607
|
-
items: Crumb[];
|
|
608
|
-
/** Collapses the middle when the trail is longer than this. */
|
|
609
|
-
maxItems?: number;
|
|
610
|
-
className?: string;
|
|
611
|
-
}
|
|
612
|
-
/**
|
|
613
|
-
* Server-safe. The last crumb is the current page: it is text with `aria-current`, not a link,
|
|
614
|
-
* because a link to where you already are is a dead end for keyboard and screen reader users.
|
|
615
|
-
*/
|
|
616
|
-
declare function Breadcrumb({ items, maxItems, className }: BreadcrumbsProps): react.JSX.Element;
|
|
617
|
-
|
|
618
|
-
interface Step {
|
|
619
|
-
label: ReactNode;
|
|
620
|
-
description?: ReactNode;
|
|
621
|
-
}
|
|
622
|
-
interface StepperProps {
|
|
623
|
-
steps: Step[];
|
|
624
|
-
/** Zero-based index of the step in progress. */
|
|
625
|
-
current: number;
|
|
626
|
-
orientation?: 'horizontal' | 'vertical';
|
|
627
|
-
className?: string;
|
|
628
|
-
}
|
|
629
|
-
/**
|
|
630
|
-
* Progress through an ordered sequence — the thing Tabs must not be used for. Server-safe:
|
|
631
|
-
* it displays position, it does not navigate.
|
|
632
|
-
*/
|
|
633
|
-
declare function Steps({ steps, current, orientation, className }: StepperProps): react.JSX.Element;
|
|
634
|
-
|
|
635
|
-
interface StatCardProps {
|
|
636
|
-
label: string;
|
|
637
|
-
value: ReactNode;
|
|
638
|
-
/** Signed change, e.g. `+12.4%`. Direction decides the colour, not the caller. */
|
|
639
|
-
delta?: {
|
|
640
|
-
value: string;
|
|
641
|
-
direction: 'up' | 'down' | 'flat';
|
|
642
|
-
};
|
|
643
|
-
caption?: string;
|
|
644
|
-
hue?: DecorHue;
|
|
645
|
-
icon?: ReactNode;
|
|
646
|
-
/** A Widget (ProgressRing, Sparkline) shown to the side. */
|
|
647
|
-
visual?: ReactNode;
|
|
648
|
-
className?: string;
|
|
649
|
-
}
|
|
650
|
-
/** The tinted metric tile the reference board repeats on every dashboard. */
|
|
651
|
-
declare function Statistic({ label, value, delta, caption, hue, icon, visual, className }: StatCardProps): react.JSX.Element;
|
|
652
|
-
declare namespace Statistic {
|
|
653
|
-
var Skeleton: typeof StatCardSkeleton;
|
|
654
|
-
}
|
|
655
|
-
interface StatCardSkeletonProps {
|
|
656
|
-
withVisual?: boolean;
|
|
657
|
-
className?: string;
|
|
658
|
-
}
|
|
659
|
-
/** Built from Statistic's own spacing, so the tile does not resize when data arrives (ADR 0009). */
|
|
660
|
-
declare function StatCardSkeleton({ withVisual, className }: StatCardSkeletonProps): react.JSX.Element;
|
|
661
|
-
|
|
662
|
-
interface CardSkeletonProps {
|
|
663
|
-
size?: 'sm' | 'md' | 'lg';
|
|
664
|
-
variant?: SurfaceVariant;
|
|
665
|
-
glassStyle?: GlassStyle;
|
|
666
|
-
tone?: Tone;
|
|
667
|
-
hue?: DecorHue;
|
|
668
|
-
elevation?: 'none' | 'sm' | 'md' | 'lg';
|
|
669
|
-
radius?: 'sm' | 'md' | 'lg' | 'xl';
|
|
670
|
-
bordered?: boolean;
|
|
671
|
-
withCover?: boolean;
|
|
672
|
-
withActions?: boolean;
|
|
673
|
-
meta?: boolean;
|
|
674
|
-
lines?: number;
|
|
675
|
-
className?: string;
|
|
676
|
-
}
|
|
677
|
-
/** Matching Card geometry for a whole Card that has not loaded yet (ADR 0009). */
|
|
678
|
-
declare function CardSkeleton({ size, variant, glassStyle, tone, hue, elevation, radius, bordered, withCover, withActions, meta, lines, className, }: CardSkeletonProps): react.JSX.Element;
|
|
679
|
-
|
|
680
|
-
interface CardProps {
|
|
681
|
-
title?: ReactNode;
|
|
682
|
-
extra?: ReactNode;
|
|
683
|
-
cover?: ReactNode;
|
|
684
|
-
/** A composed Tabs instance. Tabs owns selection state and keyboard behaviour. */
|
|
685
|
-
tabs?: ReactNode;
|
|
686
|
-
/** Controls placed in the footer region. Card does not own their behaviour. */
|
|
687
|
-
actions?: ReactNode;
|
|
688
|
-
children?: ReactNode;
|
|
689
|
-
size?: 'sm' | 'md' | 'lg';
|
|
690
|
-
variant?: SurfaceVariant;
|
|
691
|
-
glassStyle?: GlassStyle;
|
|
692
|
-
tone?: Tone;
|
|
693
|
-
hue?: DecorHue;
|
|
694
|
-
elevation?: 'none' | 'sm' | 'md' | 'lg';
|
|
695
|
-
radius?: 'sm' | 'md' | 'lg' | 'xl';
|
|
696
|
-
bordered?: boolean;
|
|
697
|
-
hoverable?: boolean;
|
|
698
|
-
/** Tighter geometry for a Card nested inside another Card. */
|
|
699
|
-
nested?: boolean;
|
|
700
|
-
loading?: boolean;
|
|
701
|
-
asSection?: boolean;
|
|
702
|
-
className?: string;
|
|
703
|
-
}
|
|
704
|
-
declare function CardRoot({ title, extra, cover, tabs, actions, children, size, variant, glassStyle, tone, hue, elevation, radius, bordered, hoverable, nested, loading, asSection, className, }: CardProps): react.JSX.Element;
|
|
705
|
-
interface CardMetaProps {
|
|
706
|
-
avatar?: ReactNode;
|
|
707
|
-
title?: ReactNode;
|
|
708
|
-
description?: ReactNode;
|
|
709
|
-
className?: string;
|
|
710
|
-
}
|
|
711
|
-
declare function CardMeta({ avatar, title, description, className }: CardMetaProps): react.JSX.Element;
|
|
712
|
-
interface CardGridProps extends Omit<GridProps, 'children'> {
|
|
713
|
-
children?: ReactNode;
|
|
714
|
-
}
|
|
715
|
-
declare function CardGrid({ columns, gap, minItemWidth, className, children }: CardGridProps): react.JSX.Element;
|
|
716
|
-
/** A non-interactive Surface composition for content about one subject. */
|
|
717
|
-
declare const Card: typeof CardRoot & {
|
|
718
|
-
Meta: typeof CardMeta;
|
|
719
|
-
Grid: typeof CardGrid;
|
|
720
|
-
Skeleton: typeof CardSkeleton;
|
|
721
|
-
};
|
|
722
|
-
|
|
723
|
-
interface DescriptionsSkeletonProps {
|
|
724
|
-
columns?: 1 | 2 | 3 | 4;
|
|
725
|
-
layout?: 'horizontal' | 'vertical';
|
|
726
|
-
size?: DescriptionsSize;
|
|
727
|
-
bordered?: boolean;
|
|
728
|
-
items?: number;
|
|
729
|
-
className?: string;
|
|
730
|
-
}
|
|
731
|
-
/** Matching label/value geometry for a Descriptions record that has not loaded yet. */
|
|
732
|
-
declare function DescriptionsSkeleton({ columns, layout, size, bordered, items, className, }: DescriptionsSkeletonProps): react.JSX.Element;
|
|
733
|
-
|
|
734
|
-
type DescriptionsSize = 'sm' | 'md' | 'lg';
|
|
735
|
-
interface DescriptionsProps {
|
|
736
|
-
title?: ReactNode;
|
|
737
|
-
extra?: ReactNode;
|
|
738
|
-
children?: ReactNode;
|
|
739
|
-
columns?: 1 | 2 | 3 | 4;
|
|
740
|
-
layout?: 'horizontal' | 'vertical';
|
|
741
|
-
size?: DescriptionsSize;
|
|
742
|
-
bordered?: boolean;
|
|
743
|
-
colon?: boolean;
|
|
744
|
-
className?: string;
|
|
745
|
-
}
|
|
746
|
-
interface DescriptionsItemProps {
|
|
747
|
-
label: ReactNode;
|
|
748
|
-
children?: ReactNode;
|
|
749
|
-
span?: 1 | 2 | 3 | 4;
|
|
750
|
-
className?: string;
|
|
751
|
-
}
|
|
752
|
-
declare function DescriptionsItem({ label, children, span, className }: DescriptionsItemProps): react.JSX.Element;
|
|
753
|
-
declare function DescriptionsRoot({ title, extra, children, columns, layout, size, bordered, colon, className, }: DescriptionsProps): react.JSX.Element;
|
|
754
|
-
declare const Descriptions: typeof DescriptionsRoot & {
|
|
755
|
-
Item: typeof DescriptionsItem;
|
|
756
|
-
Skeleton: typeof DescriptionsSkeleton;
|
|
757
|
-
};
|
|
758
|
-
|
|
759
|
-
interface ListySkeletonProps {
|
|
760
|
-
items?: number;
|
|
761
|
-
grouped?: boolean;
|
|
762
|
-
}
|
|
763
|
-
declare function ListySkeleton({ items, grouped }: ListySkeletonProps): react.JSX.Element;
|
|
764
|
-
|
|
765
|
-
interface ListyGroup {
|
|
766
|
-
/** Stable identity; grouped input must keep every group contiguous. */
|
|
767
|
-
key: string;
|
|
768
|
-
label: ReactNode;
|
|
769
|
-
}
|
|
770
|
-
interface ListyProps<Item> {
|
|
771
|
-
items: Item[];
|
|
772
|
-
/** Stable item identity. Duplicate keys are rejected before rendering. */
|
|
773
|
-
getKey: (item: Item) => string;
|
|
774
|
-
renderItem: (item: Item, index: number) => ReactNode;
|
|
775
|
-
/** Optional presentational grouping. Groups must be contiguous in the supplied item order. */
|
|
776
|
-
getGroup?: (item: Item) => ListyGroup;
|
|
777
|
-
/** Keeps the current group title visible while its native list section scrolls. */
|
|
778
|
-
stickyGroupHeadings?: boolean;
|
|
779
|
-
/** Lets supporting browsers skip off-screen painting; no virtual-scroll or row-height state is owned. */
|
|
780
|
-
optimizeRendering?: boolean;
|
|
781
|
-
'aria-label'?: string;
|
|
782
|
-
}
|
|
783
|
-
/** Server-safe, presentational list. Rendering optimization is browser-native paint containment only. */
|
|
784
|
-
declare function ListyRoot<Item>({ items, getKey, renderItem, getGroup, stickyGroupHeadings, optimizeRendering, 'aria-label': ariaLabel, }: ListyProps<Item>): react.JSX.Element;
|
|
785
|
-
declare const Listy: typeof ListyRoot & {
|
|
786
|
-
Skeleton: typeof ListySkeleton;
|
|
787
|
-
};
|
|
212
|
+
declare const Leaderboard: typeof LeaderboardRoot;
|
|
788
213
|
|
|
789
|
-
export {
|
|
214
|
+
export { BarMini, type BarMiniProps, Container, type ContainerProps, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, Flex, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, PageContainer, type PageContainerProps, PageContainerSkeleton, type PageContainerSkeletonProps, type Size, Sparkline, type SparklineGeometry, type SparklineProps, type StackProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, type Tone, cn, donutArcs, sparklineGeometry };
|