@timbal-ai/timbal-react 1.3.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +32 -0
- package/README.md +28 -4
- package/dist/app.cjs +3610 -1489
- package/dist/app.d.cts +75 -30
- package/dist/app.d.ts +75 -30
- package/dist/app.esm.js +29 -7
- package/dist/{chart-artifact-Q5QgMtbj.d.ts → chart-artifact-2OTDTRwM.d.ts} +212 -41
- package/dist/{chart-artifact-WDEW9dHT.d.cts → chart-artifact-CS3qyGIY.d.cts} +212 -41
- package/dist/chat.cjs +264 -107
- package/dist/chat.d.cts +2 -2
- package/dist/chat.d.ts +2 -2
- package/dist/chat.esm.js +4 -3
- package/dist/chunk-5ECRZ5O7.esm.js +899 -0
- package/dist/{chunk-QU7ET55D.esm.js → chunk-AZL2WANO.esm.js} +320 -177
- package/dist/{chunk-OH23AX2V.esm.js → chunk-B4XAC4G7.esm.js} +430 -780
- package/dist/chunk-EDEKQYSU.esm.js +10 -0
- package/dist/{chunk-GQBYZRD7.esm.js → chunk-IGHBLJV3.esm.js} +38 -27
- package/dist/{chunk-OFWC4MIY.esm.js → chunk-JYDJRGDE.esm.js} +5 -3
- package/dist/{chunk-YCXN67SD.esm.js → chunk-SZDYIRMB.esm.js} +1639 -490
- package/dist/chunk-TZI3ID3C.esm.js +232 -0
- package/dist/{chunk-THBA27QY.esm.js → chunk-WMKPT5BV.esm.js} +242 -123
- package/dist/{chunk-VXMM2HX7.esm.js → chunk-ZNYAETFD.esm.js} +1 -1
- package/dist/{circular-progress-Ci8L-Hfa.d.cts → circular-progress-CDsJwIPF.d.cts} +19 -77
- package/dist/{circular-progress-Ci8L-Hfa.d.ts → circular-progress-CDsJwIPF.d.ts} +19 -77
- package/dist/index.cjs +5564 -3612
- package/dist/index.d.cts +7 -6
- package/dist/index.d.ts +7 -6
- package/dist/index.esm.js +45 -33
- package/dist/kanban-U5xNe9py.d.cts +212 -0
- package/dist/kanban-U5xNe9py.d.ts +212 -0
- package/dist/{layout-BTJyU8wd.d.ts → layout-B8r6Jbat.d.ts} +1 -1
- package/dist/{layout-C2G-FcER.d.cts → layout-Cu7Ijn04.d.cts} +1 -1
- package/dist/site.cjs +358 -0
- package/dist/site.d.cts +184 -0
- package/dist/site.d.ts +184 -0
- package/dist/site.esm.js +322 -0
- package/dist/studio.cjs +702 -343
- package/dist/studio.d.cts +1 -1
- package/dist/studio.d.ts +1 -1
- package/dist/studio.esm.js +7 -5
- package/dist/styles.css +56 -0
- package/dist/{timbal-v2-button-CNfdwGq4.d.cts → timbal-v2-button-B7vPs7gg.d.cts} +2 -2
- package/dist/{timbal-v2-button-CNfdwGq4.d.ts → timbal-v2-button-B7vPs7gg.d.ts} +2 -2
- package/dist/ui.cjs +1504 -659
- package/dist/ui.d.cts +11 -4
- package/dist/ui.d.ts +11 -4
- package/dist/ui.esm.js +35 -26
- package/dist/{welcome-DXqsGTwH.d.ts → welcome-DduQAC4K.d.ts} +4 -0
- package/dist/{welcome-BFGRoNfK.d.cts → welcome-NXZlcihe.d.cts} +4 -0
- package/package.json +9 -1
- package/dist/button-BoyX5pM_.d.cts +0 -18
- package/dist/button-BoyX5pM_.d.ts +0 -18
- package/dist/chunk-UCGVL7ZY.esm.js +0 -52
|
@@ -389,7 +389,7 @@ interface AppShellProps {
|
|
|
389
389
|
sidebar?: ReactNode;
|
|
390
390
|
/**
|
|
391
391
|
* Global top bar (login, theme, account) — spans the full shell width (not
|
|
392
|
-
* the page `max-w-6xl` column).
|
|
392
|
+
* the page `max-w-6xl` column).
|
|
393
393
|
*/
|
|
394
394
|
topbar?: ReactNode;
|
|
395
395
|
/** @deprecated Use `topbar`. */
|
|
@@ -426,27 +426,21 @@ interface AppShellProps {
|
|
|
426
426
|
onNavOpenChange?: (open: boolean) => void;
|
|
427
427
|
className?: string;
|
|
428
428
|
mainClassName?: string;
|
|
429
|
+
/**
|
|
430
|
+
* Make the content region a bounded, non-scrolling flex column instead of the
|
|
431
|
+
* default padded scroll area. Use for full-bleed pages that own their own
|
|
432
|
+
* scroll — a full-page chat (`TimbalChat` / `Thread`), a canvas, a map, an
|
|
433
|
+
* editor — so a `h-full` / `flex-1 min-h-0` child fills exactly and a pinned
|
|
434
|
+
* footer (e.g. the chat composer) stays put instead of riding down on scroll.
|
|
435
|
+
* Do **not** combine with `h-[calc(100dvh-…)]` guesses on the child.
|
|
436
|
+
*/
|
|
437
|
+
contentFill?: boolean;
|
|
429
438
|
}
|
|
430
439
|
/**
|
|
431
440
|
* App-first layout: sidebar + topbar + main, with optional **floating** copilot.
|
|
432
441
|
*/
|
|
433
442
|
declare const AppShell: FC<AppShellProps>;
|
|
434
443
|
|
|
435
|
-
interface AppShellTopbarProps {
|
|
436
|
-
/** Leading cluster — mobile menu, product mark, org switcher. */
|
|
437
|
-
start?: ReactNode;
|
|
438
|
-
/** Trailing cluster — theme toggle, login, account menu. */
|
|
439
|
-
actions?: ReactNode;
|
|
440
|
-
/** Optional center content between start and actions. */
|
|
441
|
-
children?: ReactNode;
|
|
442
|
-
className?: string;
|
|
443
|
-
}
|
|
444
|
-
/**
|
|
445
|
-
* Global app chrome row inside `AppShell` — auth, theme, and account actions.
|
|
446
|
-
* Spans the full shell width via the shell’s `topbar` slot (wider than `<Page />`).
|
|
447
|
-
*/
|
|
448
|
-
declare const AppShellTopbar: FC<AppShellTopbarProps>;
|
|
449
|
-
|
|
450
444
|
interface AppShellChatTriggerProps {
|
|
451
445
|
className?: string;
|
|
452
446
|
label?: string;
|
|
@@ -494,7 +488,7 @@ interface AppShellSidebarTriggerProps {
|
|
|
494
488
|
}
|
|
495
489
|
/**
|
|
496
490
|
* Hamburger that opens the `AppShell` mobile nav drawer. Hidden on `md+`
|
|
497
|
-
* (the sidebar is persistent there). Drop it in `
|
|
491
|
+
* (the sidebar is persistent there). Drop it in the `AppShell` topbar
|
|
498
492
|
* slot — it reads the shell nav controls, so no wiring is needed.
|
|
499
493
|
*/
|
|
500
494
|
declare const AppShellSidebarTrigger: FC<AppShellSidebarTriggerProps>;
|
|
@@ -516,6 +510,15 @@ declare const APP_DENSITY_CLASSES: {
|
|
|
516
510
|
readonly default: string;
|
|
517
511
|
readonly compact: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between pb-2 pt-1";
|
|
518
512
|
};
|
|
513
|
+
/**
|
|
514
|
+
* Vertical rhythm between a `Page`'s direct content blocks. Page-level gap so
|
|
515
|
+
* stacked blocks (FilterBar + DataTable, MetricRow + ChartPanel, bare cards)
|
|
516
|
+
* never render flush — the #1 source of gap-less generated layouts.
|
|
517
|
+
*/
|
|
518
|
+
readonly pageStack: {
|
|
519
|
+
readonly default: "flex flex-col gap-6";
|
|
520
|
+
readonly compact: "flex flex-col gap-4";
|
|
521
|
+
};
|
|
519
522
|
readonly section: {
|
|
520
523
|
readonly default: "flex flex-col gap-4 py-4";
|
|
521
524
|
readonly compact: "flex flex-col gap-2 py-2";
|
|
@@ -541,12 +544,12 @@ declare const APP_DENSITY_CLASSES: {
|
|
|
541
544
|
readonly compact: "relative flex min-w-0 flex-1 flex-col gap-1 px-3 py-2 text-left font-normal";
|
|
542
545
|
};
|
|
543
546
|
readonly metricChartRegion: {
|
|
544
|
-
readonly default: "relative min-h-0 w-full overflow-x-hidden
|
|
545
|
-
readonly compact: "relative min-h-0 w-full overflow-x-hidden
|
|
547
|
+
readonly default: "relative min-h-0 w-full overflow-x-hidden pt-2";
|
|
548
|
+
readonly compact: "relative min-h-0 w-full overflow-x-hidden pt-1";
|
|
546
549
|
};
|
|
547
550
|
readonly metricChartPlotRegion: {
|
|
548
|
-
readonly default: "relative min-h-0 w-full overflow-x-hidden
|
|
549
|
-
readonly compact: "relative min-h-0 w-full overflow-x-hidden
|
|
551
|
+
readonly default: "relative min-h-0 w-full overflow-x-hidden px-0 pt-5 pb-3";
|
|
552
|
+
readonly compact: "relative min-h-0 w-full overflow-x-hidden px-0 pt-3 pb-2";
|
|
550
553
|
};
|
|
551
554
|
readonly chartPanelBody: {
|
|
552
555
|
readonly default: "pt-2 pb-3";
|
|
@@ -556,8 +559,46 @@ declare const APP_DENSITY_CLASSES: {
|
|
|
556
559
|
type AppDensityClassKey = keyof typeof APP_DENSITY_CLASSES;
|
|
557
560
|
declare function appDensityClass(key: AppDensityClassKey, density?: AppDensity): string;
|
|
558
561
|
|
|
562
|
+
/**
|
|
563
|
+
* Class composites for the `app` kit (dashboards, settings, data views).
|
|
564
|
+
* Colours via semantic tokens in styles.css — no hardcoded palette literals.
|
|
565
|
+
*/
|
|
566
|
+
/**
|
|
567
|
+
* App page column — centered within the shell content area (right of the
|
|
568
|
+
* sidebar inset). Wide cap so dashboards use the available width instead of
|
|
569
|
+
* leaving large side gutters; the cap only kicks in on ultra-wide displays.
|
|
570
|
+
*/
|
|
571
|
+
declare const appPageColumnClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
|
|
572
|
+
/**
|
|
573
|
+
* Page content width ladder. Every option is a centered column with lateral
|
|
574
|
+
* padding — pick a narrower cap for focused / reading pages instead of always
|
|
575
|
+
* running full-bleed.
|
|
576
|
+
*/
|
|
577
|
+
type AppPageWidth = "full" | "wide" | "default" | "centered" | "narrow" | "prose";
|
|
578
|
+
/**
|
|
579
|
+
* Topbar horizontal inset — aligned with the page column's max-width and
|
|
580
|
+
* lateral padding so controls line up perfectly with the page content.
|
|
581
|
+
*/
|
|
582
|
+
declare const appShellTopbarInsetClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
|
|
583
|
+
/** Top breathing room for `AppShell` — matches timbal-platform list pages (`pt-4 md:pt-6`). */
|
|
584
|
+
declare const appShellInsetTopClass = "pt-4 md:pt-6";
|
|
585
|
+
/** Card surface — same elevated integration look as in-thread artifacts. */
|
|
586
|
+
declare const appSurfaceCardClass: string;
|
|
587
|
+
/** Metric / stat tile. */
|
|
588
|
+
declare const appStatTileClass: string;
|
|
589
|
+
/**
|
|
590
|
+
* Filter bar chrome — horizontal controls row.
|
|
591
|
+
* Bottom-aligns children so an unlabeled `SearchInput` lines up with the
|
|
592
|
+
* control in a labeled `Field` + `Select` (labels extend upward).
|
|
593
|
+
*/
|
|
594
|
+
declare const appFilterBarClass = "flex flex-wrap items-end gap-2";
|
|
595
|
+
/** Search inputs in filter bars — shared control skin (field shape), so a
|
|
596
|
+
* search field and a dropdown placed side by side match exactly. */
|
|
597
|
+
declare const appSearchInputClass: string;
|
|
598
|
+
|
|
559
599
|
interface PageHeaderProps {
|
|
560
|
-
title
|
|
600
|
+
/** Page title. Omit for a headerless page (no `<h1>` rendered). */
|
|
601
|
+
title?: ReactNode;
|
|
561
602
|
description?: ReactNode;
|
|
562
603
|
actions?: ReactNode;
|
|
563
604
|
className?: string;
|
|
@@ -573,6 +614,26 @@ interface PageProps extends PageHeaderProps {
|
|
|
573
614
|
* `compact` tightens page insets, section gaps, and card padding.
|
|
574
615
|
*/
|
|
575
616
|
density?: AppDensity;
|
|
617
|
+
/**
|
|
618
|
+
* Content width cap. Defaults to the density default (wide cap on `default`,
|
|
619
|
+
* full-bleed on `compact`). Use a narrower value (`default`, `narrow`,
|
|
620
|
+
* `prose`, `centered`) for focused or reading pages instead of always
|
|
621
|
+
* stretching full width. Ignored when `fill` is set unless `fillPadded`.
|
|
622
|
+
*/
|
|
623
|
+
width?: AppPageWidth;
|
|
624
|
+
/**
|
|
625
|
+
* Make the page a bounded, full-height flex column instead of a centered,
|
|
626
|
+
* content-sized column. Pair with `AppShell contentFill` for full-bleed pages
|
|
627
|
+
* (a full-page chat, a canvas, an editor) whose body should fill the viewport
|
|
628
|
+
* and own its own scroll. Give the fill child `min-h-0 flex-1`.
|
|
629
|
+
*/
|
|
630
|
+
fill?: boolean;
|
|
631
|
+
/**
|
|
632
|
+
* Keep the centered column (lateral padding + `width` cap) while still
|
|
633
|
+
* filling the viewport height. Use for full-height pages that should not run
|
|
634
|
+
* edge-to-edge (a centered editor, a focused detail view).
|
|
635
|
+
*/
|
|
636
|
+
fillPadded?: boolean;
|
|
576
637
|
className?: string;
|
|
577
638
|
}
|
|
578
639
|
declare const Page: FC<PageProps>;
|
|
@@ -587,6 +648,30 @@ interface SectionProps {
|
|
|
587
648
|
}
|
|
588
649
|
declare const Section: FC<SectionProps>;
|
|
589
650
|
|
|
651
|
+
type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
|
|
652
|
+
type StackAlign = "start" | "center" | "end" | "stretch";
|
|
653
|
+
type StackJustify = "start" | "center" | "end" | "between";
|
|
654
|
+
interface StackProps {
|
|
655
|
+
children: ReactNode;
|
|
656
|
+
/** Flex direction. Default `"vertical"`. */
|
|
657
|
+
direction?: "vertical" | "horizontal";
|
|
658
|
+
/** Spacing between children. Default `"md"`. */
|
|
659
|
+
gap?: StackGap;
|
|
660
|
+
/** Cross-axis alignment. */
|
|
661
|
+
align?: StackAlign;
|
|
662
|
+
/** Main-axis distribution. */
|
|
663
|
+
justify?: StackJustify;
|
|
664
|
+
/** Allow children to wrap (horizontal rows). Default `false`. */
|
|
665
|
+
wrap?: boolean;
|
|
666
|
+
className?: string;
|
|
667
|
+
}
|
|
668
|
+
/**
|
|
669
|
+
* Minimal flex stack with an explicit gap scale — the lightweight option for
|
|
670
|
+
* spacing a small cluster of elements where a full `Section` (title, padding)
|
|
671
|
+
* is too heavy. Prevents flush, gap-less groups inside cards and rows.
|
|
672
|
+
*/
|
|
673
|
+
declare const Stack: FC<StackProps>;
|
|
674
|
+
|
|
590
675
|
type AppCopilotContextValue = Record<string, unknown>;
|
|
591
676
|
interface AppCopilotProviderProps {
|
|
592
677
|
value: AppCopilotContextValue;
|
|
@@ -605,16 +690,31 @@ interface AppChatPanelProps extends Omit<TimbalRuntimeProviderProps, "children">
|
|
|
605
690
|
*/
|
|
606
691
|
declare const AppChatPanel: FC<AppChatPanelProps>;
|
|
607
692
|
|
|
693
|
+
type SurfaceCardVariant = "default" | "muted" | "outline" | "elevated" | "flat" | "hierarchical";
|
|
694
|
+
type SurfaceCardTone = "default" | "primary" | "success" | "warn" | "danger";
|
|
608
695
|
interface SurfaceCardProps {
|
|
609
696
|
children: ReactNode;
|
|
697
|
+
/** Surface chrome. Default `"default"` (elevated gradient). */
|
|
698
|
+
variant?: SurfaceCardVariant;
|
|
699
|
+
/** Accent ring tint. Default `"default"` (none). */
|
|
700
|
+
tone?: SurfaceCardTone;
|
|
701
|
+
/** Makes the card interactive with hover/active transitions. Defaults to true if onClick is provided. */
|
|
702
|
+
hoverable?: boolean;
|
|
703
|
+
/** Callback for when the card is clicked. Renders as a button when provided. */
|
|
704
|
+
onClick?: () => void;
|
|
705
|
+
/** Accessible name for the interactive button. */
|
|
706
|
+
ariaLabel?: string;
|
|
610
707
|
className?: string;
|
|
611
708
|
}
|
|
612
709
|
declare const SurfaceCard: FC<SurfaceCardProps>;
|
|
613
710
|
|
|
711
|
+
type StatTileTone = "default" | "primary" | "success" | "warn" | "danger";
|
|
614
712
|
interface StatTileProps {
|
|
615
713
|
label: ReactNode;
|
|
616
714
|
value: ReactNode;
|
|
617
715
|
hint?: ReactNode;
|
|
716
|
+
/** Tints the value to convey status. Default `"default"` (foreground). */
|
|
717
|
+
tone?: StatTileTone;
|
|
618
718
|
className?: string;
|
|
619
719
|
}
|
|
620
720
|
declare const StatTile: FC<StatTileProps>;
|
|
@@ -624,6 +724,8 @@ interface EmptyStateProps {
|
|
|
624
724
|
description?: ReactNode;
|
|
625
725
|
action?: ReactNode;
|
|
626
726
|
className?: string;
|
|
727
|
+
/** Visual variant of the empty state. Default `"default"`. */
|
|
728
|
+
variant?: "default" | "layered" | "compact";
|
|
627
729
|
}
|
|
628
730
|
declare const EmptyState: FC<EmptyStateProps>;
|
|
629
731
|
|
|
@@ -675,11 +777,14 @@ interface InfoCardProps {
|
|
|
675
777
|
/** Trailing CTA / action. */
|
|
676
778
|
action?: ReactNode;
|
|
677
779
|
tone?: InfoCardTone;
|
|
780
|
+
layout?: "horizontal" | "vertical";
|
|
781
|
+
onClick?: () => void;
|
|
782
|
+
ariaLabel?: string;
|
|
678
783
|
className?: string;
|
|
679
784
|
}
|
|
680
785
|
/**
|
|
681
786
|
* Soft info / callout panel with optional icon, title, body and CTA. For tips,
|
|
682
|
-
* empty hints, upsell nudges, and read-only notices.
|
|
787
|
+
* empty hints, upsell nudges, and read-only notices. Supports horizontal and vertical layouts.
|
|
683
788
|
*/
|
|
684
789
|
declare const InfoCard: FC<InfoCardProps>;
|
|
685
790
|
|
|
@@ -698,6 +803,9 @@ declare const StatusDot: FC<StatusDotProps>;
|
|
|
698
803
|
interface DescriptionItem {
|
|
699
804
|
label: ReactNode;
|
|
700
805
|
value: ReactNode;
|
|
806
|
+
className?: string;
|
|
807
|
+
labelClassName?: string;
|
|
808
|
+
valueClassName?: string;
|
|
701
809
|
}
|
|
702
810
|
interface DescriptionListProps {
|
|
703
811
|
items: DescriptionItem[];
|
|
@@ -740,6 +848,10 @@ interface ResourceCardProps {
|
|
|
740
848
|
/** Accessible name when `title` is not plain text. */
|
|
741
849
|
ariaLabel?: string;
|
|
742
850
|
className?: string;
|
|
851
|
+
/** Visual variant of the card. Default `"default"` (elevated gradient). */
|
|
852
|
+
variant?: "default" | "flat" | "outline";
|
|
853
|
+
/** Shape of the media container. Default `"circle"`. */
|
|
854
|
+
avatarShape?: "circle" | "rounded";
|
|
743
855
|
}
|
|
744
856
|
/**
|
|
745
857
|
* Project / agent / dataset card — same elevated surface as integration catalog tiles.
|
|
@@ -1009,6 +1121,39 @@ interface FilterFieldProps {
|
|
|
1009
1121
|
/** Single filter control with an optional label — use inside `FilterBar`. */
|
|
1010
1122
|
declare const FilterField: FC<FilterFieldProps>;
|
|
1011
1123
|
|
|
1124
|
+
interface ContactItem {
|
|
1125
|
+
id: string;
|
|
1126
|
+
name: string;
|
|
1127
|
+
email: string;
|
|
1128
|
+
initials: string;
|
|
1129
|
+
avatarUrl?: string;
|
|
1130
|
+
}
|
|
1131
|
+
interface FilterState {
|
|
1132
|
+
contacts: string[];
|
|
1133
|
+
walletAddress: string;
|
|
1134
|
+
lastInvoiceDate: string | null;
|
|
1135
|
+
customDateRange?: {
|
|
1136
|
+
from: string;
|
|
1137
|
+
to: string;
|
|
1138
|
+
};
|
|
1139
|
+
lifetimeValue: {
|
|
1140
|
+
operator: "greater_than" | "less_than" | "equals";
|
|
1141
|
+
value: string;
|
|
1142
|
+
} | null;
|
|
1143
|
+
outstanding: {
|
|
1144
|
+
operator: "greater_than" | "less_than" | "equals";
|
|
1145
|
+
value: string;
|
|
1146
|
+
} | null;
|
|
1147
|
+
}
|
|
1148
|
+
interface FilterDropdownProps {
|
|
1149
|
+
filters?: FilterState;
|
|
1150
|
+
onFiltersChange?: (filters: FilterState) => void;
|
|
1151
|
+
initialFilters?: Partial<FilterState>;
|
|
1152
|
+
contacts?: ContactItem[];
|
|
1153
|
+
className?: string;
|
|
1154
|
+
}
|
|
1155
|
+
declare function FilterDropdown({ filters, onFiltersChange, initialFilters, contacts, className, }: FilterDropdownProps): react_jsx_runtime.JSX.Element;
|
|
1156
|
+
|
|
1012
1157
|
type DataTableSortDirection = "asc" | "desc";
|
|
1013
1158
|
interface DataTableSort {
|
|
1014
1159
|
columnId: string;
|
|
@@ -1095,20 +1240,46 @@ interface ChartPanelProps {
|
|
|
1095
1240
|
*/
|
|
1096
1241
|
declare const ChartPanel: FC<ChartPanelProps>;
|
|
1097
1242
|
|
|
1243
|
+
interface SparklineProps {
|
|
1244
|
+
/** Numeric values, or objects from which `dataKey` is read. */
|
|
1245
|
+
data: Array<number | Record<string, unknown>>;
|
|
1246
|
+
dataKey?: string;
|
|
1247
|
+
color?: string;
|
|
1248
|
+
/** Show a soft gradient fill under the line. Default true. */
|
|
1249
|
+
area?: boolean;
|
|
1250
|
+
width?: number;
|
|
1251
|
+
height?: number;
|
|
1252
|
+
strokeWidth?: number;
|
|
1253
|
+
className?: string;
|
|
1254
|
+
ariaLabel?: string;
|
|
1255
|
+
}
|
|
1256
|
+
/** Tiny inline trend line — no axes, no chrome. For table cells and stat tiles. */
|
|
1257
|
+
declare const Sparkline: FC<SparklineProps>;
|
|
1258
|
+
|
|
1098
1259
|
interface MetricTileProps {
|
|
1099
1260
|
label: ReactNode;
|
|
1100
1261
|
value: ReactNode;
|
|
1101
1262
|
/** Small unit suffix next to the value (e.g. "ms", "%"). */
|
|
1102
1263
|
unit?: ReactNode;
|
|
1103
|
-
/** Optional trend pill (e.g. "+8%"). */
|
|
1264
|
+
/** Optional trend pill or text (e.g. "+8%", "↗ 45100.00%"). */
|
|
1104
1265
|
trend?: ReactNode;
|
|
1105
1266
|
trendTone?: "up" | "down" | "neutral";
|
|
1267
|
+
/** Trend presentation variant. Default `"pill"`. */
|
|
1268
|
+
trendVariant?: "pill" | "inline";
|
|
1106
1269
|
/** Selected state — draws the bottom accent bar (for selectable rows). */
|
|
1107
1270
|
active?: boolean;
|
|
1271
|
+
/** Bottom accent bar color variant. Default `"default"`. */
|
|
1272
|
+
activeTone?: "default" | "primary" | "success" | "warn" | "danger" | "neutral";
|
|
1108
1273
|
/** Right divider between cells in a metrics row. */
|
|
1109
1274
|
showDivider?: boolean;
|
|
1110
1275
|
/** Makes the tile a button. Omit for a static tile. */
|
|
1111
1276
|
onSelect?: () => void;
|
|
1277
|
+
/** Sparkline chart data values to render inside the cell. */
|
|
1278
|
+
sparklineData?: Array<number | Record<string, unknown>>;
|
|
1279
|
+
/** Optional config options for the nested `<Sparkline />` component. */
|
|
1280
|
+
sparklineConfig?: Omit<SparklineProps, "data">;
|
|
1281
|
+
/** Custom sparkline component to render (overrides sparklineData). */
|
|
1282
|
+
sparkline?: ReactNode;
|
|
1112
1283
|
/** Override the default accessible name (use when `label` is not plain text). */
|
|
1113
1284
|
ariaLabel?: string;
|
|
1114
1285
|
className?: string;
|
|
@@ -1116,11 +1287,14 @@ interface MetricTileProps {
|
|
|
1116
1287
|
/**
|
|
1117
1288
|
* Single KPI cell — matches timbal-platform `MetricsRowCard` / `MetricCell`.
|
|
1118
1289
|
* Use inside `MetricRow` or `MetricChartCard`, or standalone.
|
|
1290
|
+
* Supports inline trend tags and gorgeous background sparklines matching the premium look.
|
|
1119
1291
|
*/
|
|
1120
1292
|
declare const MetricTile: FC<MetricTileProps>;
|
|
1121
1293
|
|
|
1122
1294
|
interface MetricCardHeaderProps {
|
|
1123
1295
|
title?: ReactNode;
|
|
1296
|
+
/** Tag or label next to the title (e.g. "Last 24 hours"). */
|
|
1297
|
+
titleTag?: ReactNode;
|
|
1124
1298
|
/** Hook for `aria-labelledby` on the parent card `<section>`. */
|
|
1125
1299
|
titleId?: string;
|
|
1126
1300
|
description?: ReactNode;
|
|
@@ -1134,6 +1308,11 @@ interface MetricRowItem {
|
|
|
1134
1308
|
unit?: MetricTileProps["unit"];
|
|
1135
1309
|
trend?: MetricTileProps["trend"];
|
|
1136
1310
|
trendTone?: MetricTileProps["trendTone"];
|
|
1311
|
+
trendVariant?: MetricTileProps["trendVariant"];
|
|
1312
|
+
activeTone?: MetricTileProps["activeTone"];
|
|
1313
|
+
sparklineData?: MetricTileProps["sparklineData"];
|
|
1314
|
+
sparklineConfig?: MetricTileProps["sparklineConfig"];
|
|
1315
|
+
sparkline?: MetricTileProps["sparkline"];
|
|
1137
1316
|
}
|
|
1138
1317
|
interface MetricRowProps extends MetricCardHeaderProps {
|
|
1139
1318
|
metrics: MetricRowItem[];
|
|
@@ -1150,6 +1329,7 @@ interface MetricRowProps extends MetricCardHeaderProps {
|
|
|
1150
1329
|
/**
|
|
1151
1330
|
* Platform-style KPI strip in one elevated card — no chart.
|
|
1152
1331
|
* Use for overview rows; pair with `MetricChartCard` when you need the plot below.
|
|
1332
|
+
* Fully supports background sparklines and rich inline trend metadata.
|
|
1153
1333
|
*/
|
|
1154
1334
|
declare const MetricRow: FC<MetricRowProps>;
|
|
1155
1335
|
|
|
@@ -1253,6 +1433,11 @@ interface MetricChartMetric {
|
|
|
1253
1433
|
unit?: ReactNode;
|
|
1254
1434
|
trend?: ReactNode;
|
|
1255
1435
|
trendTone?: MetricTileProps["trendTone"];
|
|
1436
|
+
trendVariant?: MetricTileProps["trendVariant"];
|
|
1437
|
+
activeTone?: MetricTileProps["activeTone"];
|
|
1438
|
+
sparklineData?: MetricTileProps["sparklineData"];
|
|
1439
|
+
sparklineConfig?: MetricTileProps["sparklineConfig"];
|
|
1440
|
+
sparkline?: MetricTileProps["sparkline"];
|
|
1256
1441
|
/** Time-series for this metric, shown in the chart when selected. */
|
|
1257
1442
|
data?: Array<Record<string, unknown>>;
|
|
1258
1443
|
/** Value field within `data`. Default "value". */
|
|
@@ -1262,6 +1447,7 @@ interface MetricChartMetric {
|
|
|
1262
1447
|
}
|
|
1263
1448
|
interface MetricChartCardProps {
|
|
1264
1449
|
title?: ReactNode;
|
|
1450
|
+
titleTag?: ReactNode;
|
|
1265
1451
|
description?: ReactNode;
|
|
1266
1452
|
/** Trailing header control (e.g. a "See detail" link/button). */
|
|
1267
1453
|
actions?: ReactNode;
|
|
@@ -1288,6 +1474,7 @@ interface MetricChartCardProps {
|
|
|
1288
1474
|
/**
|
|
1289
1475
|
* Analytics card: selectable KPI row over a flush area chart —
|
|
1290
1476
|
* timbal-platform `MetricsRowCard` / Studio analytics pattern.
|
|
1477
|
+
* Fully supports background sparklines and rich inline trend metadata.
|
|
1291
1478
|
*/
|
|
1292
1479
|
declare const MetricChartCard: FC<MetricChartCardProps>;
|
|
1293
1480
|
|
|
@@ -1427,22 +1614,6 @@ interface RadarChartProps {
|
|
|
1427
1614
|
*/
|
|
1428
1615
|
declare const RadarChart: FC<RadarChartProps>;
|
|
1429
1616
|
|
|
1430
|
-
interface SparklineProps {
|
|
1431
|
-
/** Numeric values, or objects from which `dataKey` is read. */
|
|
1432
|
-
data: Array<number | Record<string, unknown>>;
|
|
1433
|
-
dataKey?: string;
|
|
1434
|
-
color?: string;
|
|
1435
|
-
/** Show a soft gradient fill under the line. Default true. */
|
|
1436
|
-
area?: boolean;
|
|
1437
|
-
width?: number;
|
|
1438
|
-
height?: number;
|
|
1439
|
-
strokeWidth?: number;
|
|
1440
|
-
className?: string;
|
|
1441
|
-
ariaLabel?: string;
|
|
1442
|
-
}
|
|
1443
|
-
/** Tiny inline trend line — no axes, no chrome. For table cells and stat tiles. */
|
|
1444
|
-
declare const Sparkline: FC<SparklineProps>;
|
|
1445
|
-
|
|
1446
1617
|
interface ChartArtifactViewProps {
|
|
1447
1618
|
artifact: ChartArtifact;
|
|
1448
1619
|
/**
|
|
@@ -1461,4 +1632,4 @@ interface ChartArtifactViewProps {
|
|
|
1461
1632
|
*/
|
|
1462
1633
|
declare const ChartArtifactView: FC<ChartArtifactViewProps>;
|
|
1463
1634
|
|
|
1464
|
-
export {
|
|
1635
|
+
export { EmptyState as $, type AppDensity as A, type BreadcrumbEntry as B, CHART_PALETTE as C, type ChartMargin as D, ChartPanel as E, type ChartPanelProps as F, type ChartSeries as G, type ChartTooltipIndicator as H, type ChartVariant as I, ConnectionRow as J, ConnectionRowList as K, type ConnectionRowListProps as L, type ConnectionRowProps as M, type ContactItem as N, DangerZone as O, DangerZoneAction as P, type DangerZoneActionProps as Q, type DangerZoneProps as R, type StatusBadgeTone as S, DataTable as T, type DataTableColumn as U, type DataTableProps as V, type DataTableSort as W, type DataTableSortDirection as X, type DescriptionItem as Y, DescriptionList as Z, type DescriptionListProps as _, type AppDensityClassKey as a, RadialChart as a$, type EmptyStateProps as a0, ExpandableSection as a1, type ExpandableSectionProps as a2, Field as a3, FieldInput as a4, type FieldInputProps as a5, type FieldProps as a6, FieldRow as a7, type FieldRowProps as a8, FieldSelect as a9, type IntegrationsEmptyStateProps as aA, LineAreaChart as aB, type LineAreaChartProps as aC, type LintFinding as aD, type LintOptions as aE, type LintResult as aF, type LintSeverity as aG, MetricChartCard as aH, type MetricChartCardProps as aI, type MetricChartMetric as aJ, MetricRow as aK, type MetricRowItem as aL, type MetricRowProps as aM, MetricTile as aN, type MetricTileProps as aO, Page as aP, PageHeader as aQ, type PageHeaderProps as aR, type PageProps as aS, PieChart as aT, type PieChartProps as aU, PlanBadge as aV, type PlanBadgeProps as aW, type PlanBadgeTone as aX, RESERVED_GRADIENT_TOKENS as aY, RadarChart as aZ, type RadarChartProps as a_, type FieldSelectProps as aa, FieldSwitch as ab, type FieldSwitchProps as ac, FieldTextarea as ad, type FieldTextareaProps as ae, FilterBar as af, type FilterBarProps as ag, FilterDropdown as ah, type FilterDropdownProps as ai, FilterField as aj, type FilterFieldProps as ak, type FilterState as al, FloatingUnsavedChangesBar as am, type FloatingUnsavedChangesBarProps as an, FormSection as ao, type FormSectionProps as ap, HOUSE_RULES as aq, type HouseRule as ar, INTEGRATION_CATALOG_CARD_HEIGHT_CLASS as as, InfoCard as at, type InfoCardProps as au, type InfoCardTone as av, IntegrationCard as aw, type IntegrationCardProps as ax, type IntegrationCardStatus as ay, IntegrationsEmptyState as az, APP_DENSITY_CHART_HEIGHT as b, clearTimbalTheme as b$, type RadialChartProps as b0, ResourceCard as b1, type ResourceCardProps as b2, type ReviewResult as b3, SEMANTIC_COLOR_TOKENS as b4, SLOP_BUDGETS as b5, SearchInput as b6, type SearchInputProps as b7, Section as b8, type SectionProps as b9, type SurfaceCardVariant as bA, TAILWIND_PALETTE_COLORS as bB, THEME_AGENT_INSTRUCTIONS as bC, TIMBAL_THEME_PRESETS as bD, type ThemeShadow as bE, type ThemeToCssOptions as bF, type ThemeTokenMap as bG, type TimbalThemeIntent as bH, type TimbalThemePreset as bI, type TimbalThemePresetId as bJ, TimbalThemeStyle as bK, type TimbalThemeStyleProps as bL, type TimbalThemeTokens as bM, type TimbalThemeTypography as bN, UI_REVIEW_AGENT_INSTRUCTIONS as bO, type UseLiveQueryOptions as bP, type UseLiveQueryResult as bQ, appDensityClass as bR, appFilterBarClass as bS, appPageColumnClass as bT, appSearchInputClass as bU, appShellInsetTopClass as bV, appShellTopbarInsetClass as bW, appStatTileClass as bX, appSurfaceCardClass as bY, applyThemePreset as bZ, applyTimbalTheme as b_, type SemanticColorToken as ba, SettingsSection as bb, SettingsSectionHeader as bc, type SettingsSectionHeaderProps as bd, type SettingsSectionProps as be, Sparkline as bf, type SparklineProps as bg, Stack as bh, type StackAlign as bi, type StackGap as bj, type StackJustify as bk, type StackProps as bl, StatTile as bm, type StatTileProps as bn, type StatTileTone as bo, StatusBadge as bp, type StatusBadgeProps as bq, StatusDot as br, type StatusDotProps as bs, type StatusDotTone as bt, SubNav as bu, type SubNavItem as bv, type SubNavProps as bw, SurfaceCard as bx, type SurfaceCardProps as by, type SurfaceCardTone as bz, APP_DENSITY_CLASSES as c, connectionRowListClass as c0, createTimbalTheme as c1, ensureThemeFontLink as c2, flushBarCategoryGap as c3, flushLineAreaEdgeToEdge as c4, formatLintReport as c5, getStoredThemePreset as c6, getThemePreset as c7, lintGeneratedUi as c8, resolveChartMargin as c9, resolveTooltipCategory as ca, reviewGeneratedUi as cb, themeToCss as cc, useAppCopilotContext as cd, useAppShellChat as ce, useAppShellNav as cf, useInterval as cg, useLiveQuery as ch, APP_KIT_AGENT_INSTRUCTIONS as d, AppChatPanel as e, type AppChatPanelProps as f, AppConfirmDialog as g, type AppConfirmDialogProps as h, type AppCopilotContextValue as i, AppCopilotProvider as j, type AppCopilotProviderProps as k, type AppPageWidth as l, AppShell as m, type AppShellChatControls as n, AppShellChatTrigger as o, type AppShellChatTriggerProps as p, type AppShellNavControls as q, type AppShellProps as r, AppShellSidebarTrigger as s, type AppShellSidebarTriggerProps as t, type BreadcrumbItem as u, Breadcrumbs as v, type BreadcrumbsProps as w, COLOR_UTILITY_PREFIXES as x, ChartArtifactView as y, type ChartLayout as z };
|