@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/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, AnchorHTMLAttributes, ReactElement } from 'react';
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 (ADR 0002), so one Skin reproduces the
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$1 = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
37
+ type SpaceStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
38
38
  interface StackProps {
39
39
  direction?: 'row' | 'column';
40
- gap?: SpaceStep$1;
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$1;
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
- interface LinkButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
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 (ADR 0007). */
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 (ADR 0007). */
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
- interface LeaderboardSkeletonProps {
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 { Affix, type AffixEdge, type AffixOffset, type AffixProps, Anchor, type AnchorItem, type AnchorOrientation, type AnchorProps, type AnchorSize, AnchorSkeleton, type AnchorSkeletonProps, type AnchorTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarMini, type BarMiniProps, Breadcrumb, type BreadcrumbsProps, Card, type CardGridProps, type CardMetaProps, type CardProps, type CardSkeletonProps, Container, type ContainerProps, type Crumb, type DecorHue, Descriptions, type DescriptionsItemProps, type DescriptionsProps, type DescriptionsSize, type DescriptionsSkeletonProps, Divider, type DividerProps, Donut, type DonutArc, type DonutProps, type DonutSlice, Empty, type EmptyStateProps, Flex, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, type LeaderboardSkeletonProps, LinkButton, type LinkButtonProps, Listy, type ListyGroup, type ListyProps, ListySkeleton, type ListySkeletonProps, Masonry, type MasonryColumns, type MasonryProps, MasonrySkeleton, type MasonrySkeletonProps, type MasonryStep, Notification, type NotificationProps, NotificationSkeleton, type NotificationSkeletonProps, type NotificationTone, PageContainer, type PageContainerProps, PageContainerSkeleton, type PageContainerSkeletonProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, QRCode, type QRCodeErrorCorrection, type QRCodeProps, Result, type ResultProps, ResultSkeleton, type ResultStatus, type RingGeometry, type Size, Skeleton, type SkeletonProps, type SkeletonTextProps, Space, type SpaceAlign, type SpaceCompactProps, type SpaceDirection, type SpaceProps, type SpaceSize, SpaceSkeleton, type SpaceSkeletonProps, type SpaceStep, Sparkline, type SparklineGeometry, type SparklineProps, Spin, type SpinnerProps, type StackProps, type StatCardProps, type StatCardSkeletonProps, Statistic, type Step, type StepperProps, Steps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, Timeline, type TimelineEntry, type TimelineProps, type TimelineSkeletonProps, type Tone, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };
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 };