@timbal-ai/timbal-react 1.6.0 → 1.7.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 +39 -0
- package/README.md +8 -0
- package/dist/app.cjs +167 -75
- package/dist/app.d.cts +3 -3
- package/dist/app.d.ts +3 -3
- package/dist/app.esm.js +5 -5
- package/dist/{chart-artifact-VAqgH-My.d.cts → chart-artifact-CuTiCITz.d.cts} +230 -15
- package/dist/{chart-artifact-C2pZQsaP.d.ts → chart-artifact-U-x0UNJm.d.ts} +230 -15
- package/dist/chat.esm.js +3 -3
- package/dist/{chunk-YYEI6XME.esm.js → chunk-22KWC2LS.esm.js} +5 -5
- package/dist/{chunk-MBS7XHV2.esm.js → chunk-45NXD3IG.esm.js} +3 -3
- package/dist/{chunk-24B4I4XC.esm.js → chunk-64RHAJVG.esm.js} +1 -1
- package/dist/{chunk-WQIQW7EM.esm.js → chunk-7AGIAQE6.esm.js} +1 -1
- package/dist/{chunk-NO5AWNWT.esm.js → chunk-7WU3IKAN.esm.js} +1 -1
- package/dist/{chunk-6SQMTBPL.esm.js → chunk-M5IBJBEY.esm.js} +109 -23
- package/dist/{chunk-HSL36SJ4.esm.js → chunk-PMMI7LBV.esm.js} +20 -8
- package/dist/{chunk-TMP7RIA7.esm.js → chunk-VKXOHVDE.esm.js} +2 -2
- package/dist/{chunk-ELEY66OH.esm.js → chunk-XOCOZU7J.esm.js} +11 -1
- package/dist/cli/timbal-ui-lint.mjs +534 -0
- package/dist/index.cjs +303 -200
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +9 -9
- package/dist/{kanban-FFBeaZPS.d.cts → kanban-BQxWliCS.d.cts} +17 -0
- package/dist/{kanban-FFBeaZPS.d.ts → kanban-BQxWliCS.d.ts} +17 -0
- package/dist/studio.cjs +104 -85
- package/dist/studio.esm.js +6 -6
- package/dist/ui.cjs +6 -6
- package/dist/ui.d.cts +1 -1
- package/dist/ui.d.ts +1 -1
- package/dist/ui.esm.js +4 -4
- package/package.json +13 -3
package/dist/app.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { A as AppDensity, a as AppDensityClassKey, S as StatusBadgeTone } from './chart-artifact-
|
|
2
|
-
export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppPageWidth, m as AppShell, n as AppShellChatControls, o as AppShellChatTrigger, p as AppShellChatTriggerProps, q as AppShellNavControls, r as AppShellProps, s as AppShellSidebarTrigger, t as AppShellSidebarTriggerProps, B as BreadcrumbEntry, u as BreadcrumbItem, v as Breadcrumbs, w as BreadcrumbsProps, C as CHART_PALETTE, x as COLOR_UTILITY_PREFIXES, y as ChartArtifactView, z as ChartLayout, D as ChartMargin, E as ChartPanel, F as ChartPanelProps, G as ChartSeries, H as ChartTooltipIndicator, I as ChartVariant, J as ConnectionRow, K as ConnectionRowList, L as ConnectionRowListProps, M as ConnectionRowProps, N as DangerZone, O as DangerZoneAction, P as DangerZoneActionProps, Q as DangerZoneProps, R as DataTable, T as DataTableColumn, U as DataTableProps, V as DataTableSort, W as DataTableSortDirection, X as DescriptionItem, Y as DescriptionList, Z as DescriptionListProps, _ as EmptyState, $ as EmptyStateProps, a0 as ExpandableSection, a1 as ExpandableSectionProps, a2 as Field, a3 as FieldInput, a4 as FieldInputProps, a5 as FieldProps, a6 as FieldRow, a7 as FieldRowProps, a8 as FieldSelect, a9 as FieldSelectProps, aa as FieldSwitch, ab as FieldSwitchProps, ac as FieldTextarea, ad as FieldTextareaProps, ae as FilterBar, af as FilterBarProps, ag as FilterDatePreset, ah as FilterDateRangeValue, ai as FilterDropdown, aj as FilterDropdownProps, ak as FilterField, al as FilterFieldDef, am as FilterFieldProps, an as FilterFieldType, ao as FilterNumericOperatorOption, ap as FilterNumericValue, aq as FilterSelectOption, ar as FilterValue, as as FilterValues, at as FloatingUnsavedChangesBar, au as FloatingUnsavedChangesBarProps, av as FormSection, aw as FormSectionProps, ax as HOUSE_RULES, ay as HouseRule, az as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, aA as InfoCard, aB as InfoCardProps, aC as InfoCardTone, aD as IntegrationCard, aE as IntegrationCardProps, aF as IntegrationCardStatus, aG as IntegrationsEmptyState, aH as IntegrationsEmptyStateProps, aI as LineAreaChart, aJ as LineAreaChartProps, aK as LintFinding, aL as LintOptions, aM as LintResult, aN as LintSeverity, aO as MetricChartCard, aP as MetricChartCardProps, aQ as MetricChartMetric, aR as MetricRow, aS as MetricRowItem, aT as MetricRowProps, aU as MetricTile, aV as MetricTileProps, aW as NumericOperator, aX as Page, aY as PageHeader, aZ as PageHeaderProps, a_ as PageProps, a$ as PieChart, b0 as PieChartProps, b1 as PlanBadge, b2 as PlanBadgeProps, b3 as PlanBadgeTone, b4 as RESERVED_GRADIENT_TOKENS, b5 as RadarChart, b6 as RadarChartProps, b7 as RadialChart, b8 as RadialChartProps, b9 as ResourceCard, ba as ResourceCardProps, bb as ReviewResult, bc as SEMANTIC_COLOR_TOKENS, bd as SLOP_BUDGETS, be as SearchInput, bf as SearchInputProps, bg as Section, bh as SectionProps, bi as SemanticColorToken, bj as SettingsSection, bk as SettingsSectionHeader, bl as SettingsSectionHeaderProps, bm as SettingsSectionProps, bn as Sparkline, bo as SparklineProps, bp as Stack, bq as StackAlign, br as StackGap, bs as StackJustify, bt as StackProps, bu as StatTile, bv as StatTileProps, bw as StatTileTone, bx as StatusBadge, by as StatusBadgeProps, bz as StatusDot, bA as StatusDotProps, bB as StatusDotTone, bC as SubNav, bD as SubNavItem, bE as SubNavProps, bF as SurfaceCard, bG as SurfaceCardProps, bH as SurfaceCardTone, bI as SurfaceCardVariant, bJ as TAILWIND_PALETTE_COLORS, bK as THEME_AGENT_INSTRUCTIONS, bL as TIMBAL_THEME_PRESETS, bM as ThemeShadow, bN as ThemeToCssOptions, bO as ThemeTokenMap, bP as TimbalThemeIntent, bQ as TimbalThemePreset, bR as TimbalThemePresetId, bS as TimbalThemeStyle, bT as TimbalThemeStyleProps, bU as TimbalThemeTokens, bV as TimbalThemeTypography, bW as UI_REVIEW_AGENT_INSTRUCTIONS, bX as UseLiveQueryOptions, bY as UseLiveQueryResult, bZ as appDensityClass, b_ as appFilterBarClass, b$ as appPageColumnClass, c0 as appSearchInputClass, c1 as appShellInsetTopClass, c2 as appShellTopbarInsetClass, c3 as appStatTileClass, c4 as appSurfaceCardClass, c5 as applyThemePreset, c6 as applyTimbalTheme, c7 as clearTimbalTheme, c8 as connectionRowListClass, c9 as createTimbalTheme, ca as ensureThemeFontLink, cb as flushBarCategoryGap, cc as flushLineAreaEdgeToEdge, cd as formatLintReport, ce as getStoredThemePreset, cf as getThemePreset, cg as lintGeneratedUi, ch as resolveChartMargin, ci as resolveTooltipCategory, cj as reviewGeneratedUi, ck as themeToCss, cl as useAppCopilotContext, cm as useAppShellChat, cn as useAppShellNav, co as useInterval, cp as useLiveQuery } from './chart-artifact-
|
|
1
|
+
import { A as AppDensity, a as AppDensityClassKey, S as StatusBadgeTone } from './chart-artifact-CuTiCITz.cjs';
|
|
2
|
+
export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppPageWidth, m as AppShell, n as AppShellChatControls, o as AppShellChatTrigger, p as AppShellChatTriggerProps, q as AppShellNavControls, r as AppShellProps, s as AppShellSidebarTrigger, t as AppShellSidebarTriggerProps, B as BreadcrumbEntry, u as BreadcrumbItem, v as Breadcrumbs, w as BreadcrumbsProps, C as CHART_PALETTE, x as COLOR_UTILITY_PREFIXES, y as ChartArtifactView, z as ChartLayout, D as ChartMargin, E as ChartPanel, F as ChartPanelProps, G as ChartSeries, H as ChartTooltipIndicator, I as ChartVariant, J as ConnectionRow, K as ConnectionRowList, L as ConnectionRowListProps, M as ConnectionRowProps, N as DangerZone, O as DangerZoneAction, P as DangerZoneActionProps, Q as DangerZoneProps, R as DataTable, T as DataTableColumn, U as DataTableProps, V as DataTableSort, W as DataTableSortDirection, X as DescriptionItem, Y as DescriptionList, Z as DescriptionListProps, _ as EmptyState, $ as EmptyStateProps, a0 as ExpandableSection, a1 as ExpandableSectionProps, a2 as Field, a3 as FieldInput, a4 as FieldInputProps, a5 as FieldProps, a6 as FieldRow, a7 as FieldRowProps, a8 as FieldSelect, a9 as FieldSelectProps, aa as FieldSwitch, ab as FieldSwitchProps, ac as FieldTextarea, ad as FieldTextareaProps, ae as FilterBar, af as FilterBarProps, ag as FilterDatePreset, ah as FilterDateRangeValue, ai as FilterDropdown, aj as FilterDropdownProps, ak as FilterField, al as FilterFieldDef, am as FilterFieldProps, an as FilterFieldType, ao as FilterNumericOperatorOption, ap as FilterNumericValue, aq as FilterSelectOption, ar as FilterValue, as as FilterValues, at as FloatingUnsavedChangesBar, au as FloatingUnsavedChangesBarProps, av as FormSection, aw as FormSectionProps, ax as HOUSE_RULES, ay as HouseRule, az as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, aA as InfoCard, aB as InfoCardProps, aC as InfoCardTone, aD as IntegrationCard, aE as IntegrationCardProps, aF as IntegrationCardStatus, aG as IntegrationsEmptyState, aH as IntegrationsEmptyStateProps, aI as LineAreaChart, aJ as LineAreaChartProps, aK as LintFinding, aL as LintOptions, aM as LintResult, aN as LintSeverity, aO as MetricChartCard, aP as MetricChartCardProps, aQ as MetricChartMetric, aR as MetricRow, aS as MetricRowItem, aT as MetricRowProps, aU as MetricTile, aV as MetricTileProps, aW as NumericOperator, aX as Page, aY as PageHeader, aZ as PageHeaderProps, a_ as PageProps, a$ as PieChart, b0 as PieChartProps, b1 as PlanBadge, b2 as PlanBadgeProps, b3 as PlanBadgeTone, b4 as RESERVED_GRADIENT_TOKENS, b5 as RadarChart, b6 as RadarChartProps, b7 as RadialChart, b8 as RadialChartProps, b9 as ResourceCard, ba as ResourceCardProps, bb as ReviewResult, bc as SEMANTIC_COLOR_TOKENS, bd as SLOP_BUDGETS, be as SearchInput, bf as SearchInputProps, bg as Section, bh as SectionProps, bi as SemanticColorToken, bj as SettingsSection, bk as SettingsSectionHeader, bl as SettingsSectionHeaderProps, bm as SettingsSectionProps, bn as Sparkline, bo as SparklineProps, bp as Stack, bq as StackAlign, br as StackGap, bs as StackJustify, bt as StackProps, bu as StatTile, bv as StatTileProps, bw as StatTileTone, bx as StatusBadge, by as StatusBadgeProps, bz as StatusDot, bA as StatusDotProps, bB as StatusDotTone, bC as SubNav, bD as SubNavItem, bE as SubNavProps, bF as SurfaceCard, bG as SurfaceCardProps, bH as SurfaceCardTone, bI as SurfaceCardVariant, bJ as TAILWIND_PALETTE_COLORS, bK as THEME_AGENT_INSTRUCTIONS, bL as TIMBAL_THEME_PRESETS, bM as ThemeShadow, bN as ThemeToCssOptions, bO as ThemeTokenMap, bP as TimbalThemeIntent, bQ as TimbalThemePreset, bR as TimbalThemePresetId, bS as TimbalThemeStyle, bT as TimbalThemeStyleProps, bU as TimbalThemeTokens, bV as TimbalThemeTypography, bW as UI_REVIEW_AGENT_INSTRUCTIONS, bX as UseLiveQueryOptions, bY as UseLiveQueryResult, bZ as appDensityClass, b_ as appFilterBarClass, b$ as appPageColumnClass, c0 as appSearchInputClass, c1 as appShellInsetTopClass, c2 as appShellTopbarInsetClass, c3 as appStatTileClass, c4 as appSurfaceCardClass, c5 as applyThemePreset, c6 as applyTimbalTheme, c7 as clearTimbalTheme, c8 as connectionRowListClass, c9 as createTimbalTheme, ca as ensureThemeFontLink, cb as flushBarCategoryGap, cc as flushLineAreaEdgeToEdge, cd as formatLintReport, ce as getStoredThemePreset, cf as getThemePreset, cg as lintGeneratedUi, ch as resolveChartMargin, ci as resolveTooltipCategory, cj as reviewGeneratedUi, ck as themeToCss, cl as useAppCopilotContext, cm as useAppShellChat, cn as useAppShellNav, co as useInterval, cp as useLiveQuery } from './chart-artifact-CuTiCITz.cjs';
|
|
3
3
|
import { FC, ReactNode } from 'react';
|
|
4
|
-
export { a as Avatar, b as AvatarFallback, c as AvatarImage, D as AvatarVariant, B as Banner, d as BannerProps, h as Button, i as ButtonColor, K as Kanban, j as KanbanCardData, k as KanbanCardVariant, l as KanbanColumnData, m as KanbanDensity, n as KanbanDragHandleProps, o as KanbanLocation, p as KanbanMoveEvent, q as KanbanProps, r as KanbanRenderCardContext, s as KanbanTone, T as Timeline, t as TimelineItem, u as TimelineProps, U as UntitledButton, w as UntitledButtonColor, x as UntitledButtonProps, y as UntitledButtonSize } from './kanban-
|
|
4
|
+
export { a as Avatar, b as AvatarFallback, c as AvatarImage, D as AvatarVariant, B as Banner, d as BannerProps, h as Button, i as ButtonColor, K as Kanban, j as KanbanCardData, k as KanbanCardVariant, l as KanbanColumnData, m as KanbanDensity, n as KanbanDragHandleProps, o as KanbanLocation, p as KanbanMoveEvent, q as KanbanProps, r as KanbanRenderCardContext, s as KanbanTone, T as Timeline, t as TimelineItem, u as TimelineProps, U as UntitledButton, w as UntitledButtonColor, x as UntitledButtonProps, y as UntitledButtonSize } from './kanban-BQxWliCS.cjs';
|
|
5
5
|
export { B as ChartArtifact, D as ChartSeriesConfig, p as ThreadVariant, s as TimbalChat, t as TimbalChatProps } from './chat-DDsp-Vzz.cjs';
|
|
6
6
|
import 'react/jsx-runtime';
|
|
7
7
|
import 'class-variance-authority/types';
|
package/dist/app.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { A as AppDensity, a as AppDensityClassKey, S as StatusBadgeTone } from './chart-artifact-
|
|
2
|
-
export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppPageWidth, m as AppShell, n as AppShellChatControls, o as AppShellChatTrigger, p as AppShellChatTriggerProps, q as AppShellNavControls, r as AppShellProps, s as AppShellSidebarTrigger, t as AppShellSidebarTriggerProps, B as BreadcrumbEntry, u as BreadcrumbItem, v as Breadcrumbs, w as BreadcrumbsProps, C as CHART_PALETTE, x as COLOR_UTILITY_PREFIXES, y as ChartArtifactView, z as ChartLayout, D as ChartMargin, E as ChartPanel, F as ChartPanelProps, G as ChartSeries, H as ChartTooltipIndicator, I as ChartVariant, J as ConnectionRow, K as ConnectionRowList, L as ConnectionRowListProps, M as ConnectionRowProps, N as DangerZone, O as DangerZoneAction, P as DangerZoneActionProps, Q as DangerZoneProps, R as DataTable, T as DataTableColumn, U as DataTableProps, V as DataTableSort, W as DataTableSortDirection, X as DescriptionItem, Y as DescriptionList, Z as DescriptionListProps, _ as EmptyState, $ as EmptyStateProps, a0 as ExpandableSection, a1 as ExpandableSectionProps, a2 as Field, a3 as FieldInput, a4 as FieldInputProps, a5 as FieldProps, a6 as FieldRow, a7 as FieldRowProps, a8 as FieldSelect, a9 as FieldSelectProps, aa as FieldSwitch, ab as FieldSwitchProps, ac as FieldTextarea, ad as FieldTextareaProps, ae as FilterBar, af as FilterBarProps, ag as FilterDatePreset, ah as FilterDateRangeValue, ai as FilterDropdown, aj as FilterDropdownProps, ak as FilterField, al as FilterFieldDef, am as FilterFieldProps, an as FilterFieldType, ao as FilterNumericOperatorOption, ap as FilterNumericValue, aq as FilterSelectOption, ar as FilterValue, as as FilterValues, at as FloatingUnsavedChangesBar, au as FloatingUnsavedChangesBarProps, av as FormSection, aw as FormSectionProps, ax as HOUSE_RULES, ay as HouseRule, az as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, aA as InfoCard, aB as InfoCardProps, aC as InfoCardTone, aD as IntegrationCard, aE as IntegrationCardProps, aF as IntegrationCardStatus, aG as IntegrationsEmptyState, aH as IntegrationsEmptyStateProps, aI as LineAreaChart, aJ as LineAreaChartProps, aK as LintFinding, aL as LintOptions, aM as LintResult, aN as LintSeverity, aO as MetricChartCard, aP as MetricChartCardProps, aQ as MetricChartMetric, aR as MetricRow, aS as MetricRowItem, aT as MetricRowProps, aU as MetricTile, aV as MetricTileProps, aW as NumericOperator, aX as Page, aY as PageHeader, aZ as PageHeaderProps, a_ as PageProps, a$ as PieChart, b0 as PieChartProps, b1 as PlanBadge, b2 as PlanBadgeProps, b3 as PlanBadgeTone, b4 as RESERVED_GRADIENT_TOKENS, b5 as RadarChart, b6 as RadarChartProps, b7 as RadialChart, b8 as RadialChartProps, b9 as ResourceCard, ba as ResourceCardProps, bb as ReviewResult, bc as SEMANTIC_COLOR_TOKENS, bd as SLOP_BUDGETS, be as SearchInput, bf as SearchInputProps, bg as Section, bh as SectionProps, bi as SemanticColorToken, bj as SettingsSection, bk as SettingsSectionHeader, bl as SettingsSectionHeaderProps, bm as SettingsSectionProps, bn as Sparkline, bo as SparklineProps, bp as Stack, bq as StackAlign, br as StackGap, bs as StackJustify, bt as StackProps, bu as StatTile, bv as StatTileProps, bw as StatTileTone, bx as StatusBadge, by as StatusBadgeProps, bz as StatusDot, bA as StatusDotProps, bB as StatusDotTone, bC as SubNav, bD as SubNavItem, bE as SubNavProps, bF as SurfaceCard, bG as SurfaceCardProps, bH as SurfaceCardTone, bI as SurfaceCardVariant, bJ as TAILWIND_PALETTE_COLORS, bK as THEME_AGENT_INSTRUCTIONS, bL as TIMBAL_THEME_PRESETS, bM as ThemeShadow, bN as ThemeToCssOptions, bO as ThemeTokenMap, bP as TimbalThemeIntent, bQ as TimbalThemePreset, bR as TimbalThemePresetId, bS as TimbalThemeStyle, bT as TimbalThemeStyleProps, bU as TimbalThemeTokens, bV as TimbalThemeTypography, bW as UI_REVIEW_AGENT_INSTRUCTIONS, bX as UseLiveQueryOptions, bY as UseLiveQueryResult, bZ as appDensityClass, b_ as appFilterBarClass, b$ as appPageColumnClass, c0 as appSearchInputClass, c1 as appShellInsetTopClass, c2 as appShellTopbarInsetClass, c3 as appStatTileClass, c4 as appSurfaceCardClass, c5 as applyThemePreset, c6 as applyTimbalTheme, c7 as clearTimbalTheme, c8 as connectionRowListClass, c9 as createTimbalTheme, ca as ensureThemeFontLink, cb as flushBarCategoryGap, cc as flushLineAreaEdgeToEdge, cd as formatLintReport, ce as getStoredThemePreset, cf as getThemePreset, cg as lintGeneratedUi, ch as resolveChartMargin, ci as resolveTooltipCategory, cj as reviewGeneratedUi, ck as themeToCss, cl as useAppCopilotContext, cm as useAppShellChat, cn as useAppShellNav, co as useInterval, cp as useLiveQuery } from './chart-artifact-
|
|
1
|
+
import { A as AppDensity, a as AppDensityClassKey, S as StatusBadgeTone } from './chart-artifact-U-x0UNJm.js';
|
|
2
|
+
export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppPageWidth, m as AppShell, n as AppShellChatControls, o as AppShellChatTrigger, p as AppShellChatTriggerProps, q as AppShellNavControls, r as AppShellProps, s as AppShellSidebarTrigger, t as AppShellSidebarTriggerProps, B as BreadcrumbEntry, u as BreadcrumbItem, v as Breadcrumbs, w as BreadcrumbsProps, C as CHART_PALETTE, x as COLOR_UTILITY_PREFIXES, y as ChartArtifactView, z as ChartLayout, D as ChartMargin, E as ChartPanel, F as ChartPanelProps, G as ChartSeries, H as ChartTooltipIndicator, I as ChartVariant, J as ConnectionRow, K as ConnectionRowList, L as ConnectionRowListProps, M as ConnectionRowProps, N as DangerZone, O as DangerZoneAction, P as DangerZoneActionProps, Q as DangerZoneProps, R as DataTable, T as DataTableColumn, U as DataTableProps, V as DataTableSort, W as DataTableSortDirection, X as DescriptionItem, Y as DescriptionList, Z as DescriptionListProps, _ as EmptyState, $ as EmptyStateProps, a0 as ExpandableSection, a1 as ExpandableSectionProps, a2 as Field, a3 as FieldInput, a4 as FieldInputProps, a5 as FieldProps, a6 as FieldRow, a7 as FieldRowProps, a8 as FieldSelect, a9 as FieldSelectProps, aa as FieldSwitch, ab as FieldSwitchProps, ac as FieldTextarea, ad as FieldTextareaProps, ae as FilterBar, af as FilterBarProps, ag as FilterDatePreset, ah as FilterDateRangeValue, ai as FilterDropdown, aj as FilterDropdownProps, ak as FilterField, al as FilterFieldDef, am as FilterFieldProps, an as FilterFieldType, ao as FilterNumericOperatorOption, ap as FilterNumericValue, aq as FilterSelectOption, ar as FilterValue, as as FilterValues, at as FloatingUnsavedChangesBar, au as FloatingUnsavedChangesBarProps, av as FormSection, aw as FormSectionProps, ax as HOUSE_RULES, ay as HouseRule, az as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, aA as InfoCard, aB as InfoCardProps, aC as InfoCardTone, aD as IntegrationCard, aE as IntegrationCardProps, aF as IntegrationCardStatus, aG as IntegrationsEmptyState, aH as IntegrationsEmptyStateProps, aI as LineAreaChart, aJ as LineAreaChartProps, aK as LintFinding, aL as LintOptions, aM as LintResult, aN as LintSeverity, aO as MetricChartCard, aP as MetricChartCardProps, aQ as MetricChartMetric, aR as MetricRow, aS as MetricRowItem, aT as MetricRowProps, aU as MetricTile, aV as MetricTileProps, aW as NumericOperator, aX as Page, aY as PageHeader, aZ as PageHeaderProps, a_ as PageProps, a$ as PieChart, b0 as PieChartProps, b1 as PlanBadge, b2 as PlanBadgeProps, b3 as PlanBadgeTone, b4 as RESERVED_GRADIENT_TOKENS, b5 as RadarChart, b6 as RadarChartProps, b7 as RadialChart, b8 as RadialChartProps, b9 as ResourceCard, ba as ResourceCardProps, bb as ReviewResult, bc as SEMANTIC_COLOR_TOKENS, bd as SLOP_BUDGETS, be as SearchInput, bf as SearchInputProps, bg as Section, bh as SectionProps, bi as SemanticColorToken, bj as SettingsSection, bk as SettingsSectionHeader, bl as SettingsSectionHeaderProps, bm as SettingsSectionProps, bn as Sparkline, bo as SparklineProps, bp as Stack, bq as StackAlign, br as StackGap, bs as StackJustify, bt as StackProps, bu as StatTile, bv as StatTileProps, bw as StatTileTone, bx as StatusBadge, by as StatusBadgeProps, bz as StatusDot, bA as StatusDotProps, bB as StatusDotTone, bC as SubNav, bD as SubNavItem, bE as SubNavProps, bF as SurfaceCard, bG as SurfaceCardProps, bH as SurfaceCardTone, bI as SurfaceCardVariant, bJ as TAILWIND_PALETTE_COLORS, bK as THEME_AGENT_INSTRUCTIONS, bL as TIMBAL_THEME_PRESETS, bM as ThemeShadow, bN as ThemeToCssOptions, bO as ThemeTokenMap, bP as TimbalThemeIntent, bQ as TimbalThemePreset, bR as TimbalThemePresetId, bS as TimbalThemeStyle, bT as TimbalThemeStyleProps, bU as TimbalThemeTokens, bV as TimbalThemeTypography, bW as UI_REVIEW_AGENT_INSTRUCTIONS, bX as UseLiveQueryOptions, bY as UseLiveQueryResult, bZ as appDensityClass, b_ as appFilterBarClass, b$ as appPageColumnClass, c0 as appSearchInputClass, c1 as appShellInsetTopClass, c2 as appShellTopbarInsetClass, c3 as appStatTileClass, c4 as appSurfaceCardClass, c5 as applyThemePreset, c6 as applyTimbalTheme, c7 as clearTimbalTheme, c8 as connectionRowListClass, c9 as createTimbalTheme, ca as ensureThemeFontLink, cb as flushBarCategoryGap, cc as flushLineAreaEdgeToEdge, cd as formatLintReport, ce as getStoredThemePreset, cf as getThemePreset, cg as lintGeneratedUi, ch as resolveChartMargin, ci as resolveTooltipCategory, cj as reviewGeneratedUi, ck as themeToCss, cl as useAppCopilotContext, cm as useAppShellChat, cn as useAppShellNav, co as useInterval, cp as useLiveQuery } from './chart-artifact-U-x0UNJm.js';
|
|
3
3
|
import { FC, ReactNode } from 'react';
|
|
4
|
-
export { a as Avatar, b as AvatarFallback, c as AvatarImage, D as AvatarVariant, B as Banner, d as BannerProps, h as Button, i as ButtonColor, K as Kanban, j as KanbanCardData, k as KanbanCardVariant, l as KanbanColumnData, m as KanbanDensity, n as KanbanDragHandleProps, o as KanbanLocation, p as KanbanMoveEvent, q as KanbanProps, r as KanbanRenderCardContext, s as KanbanTone, T as Timeline, t as TimelineItem, u as TimelineProps, U as UntitledButton, w as UntitledButtonColor, x as UntitledButtonProps, y as UntitledButtonSize } from './kanban-
|
|
4
|
+
export { a as Avatar, b as AvatarFallback, c as AvatarImage, D as AvatarVariant, B as Banner, d as BannerProps, h as Button, i as ButtonColor, K as Kanban, j as KanbanCardData, k as KanbanCardVariant, l as KanbanColumnData, m as KanbanDensity, n as KanbanDragHandleProps, o as KanbanLocation, p as KanbanMoveEvent, q as KanbanProps, r as KanbanRenderCardContext, s as KanbanTone, T as Timeline, t as TimelineItem, u as TimelineProps, U as UntitledButton, w as UntitledButtonColor, x as UntitledButtonProps, y as UntitledButtonSize } from './kanban-BQxWliCS.js';
|
|
5
5
|
export { B as ChartArtifact, D as ChartSeriesConfig, p as ThreadVariant, s as TimbalChat, t as TimbalChatProps } from './chat-DDsp-Vzz.js';
|
|
6
6
|
import 'react/jsx-runtime';
|
|
7
7
|
import 'class-variance-authority/types';
|
package/dist/app.esm.js
CHANGED
|
@@ -91,8 +91,8 @@ import {
|
|
|
91
91
|
useAppShellNav,
|
|
92
92
|
useInterval,
|
|
93
93
|
useLiveQuery
|
|
94
|
-
} from "./chunk-
|
|
95
|
-
import "./chunk-
|
|
94
|
+
} from "./chunk-M5IBJBEY.esm.js";
|
|
95
|
+
import "./chunk-XOCOZU7J.esm.js";
|
|
96
96
|
import {
|
|
97
97
|
CHART_PALETTE,
|
|
98
98
|
ChartArtifactView,
|
|
@@ -105,20 +105,20 @@ import {
|
|
|
105
105
|
flushLineAreaEdgeToEdge,
|
|
106
106
|
resolveChartMargin,
|
|
107
107
|
resolveTooltipCategory
|
|
108
|
-
} from "./chunk-
|
|
108
|
+
} from "./chunk-7AGIAQE6.esm.js";
|
|
109
109
|
import {
|
|
110
110
|
Banner,
|
|
111
111
|
Kanban,
|
|
112
112
|
Timeline,
|
|
113
113
|
UntitledButton
|
|
114
|
-
} from "./chunk-
|
|
114
|
+
} from "./chunk-7WU3IKAN.esm.js";
|
|
115
115
|
import "./chunk-R4RQT2XQ.esm.js";
|
|
116
116
|
import {
|
|
117
117
|
Avatar,
|
|
118
118
|
AvatarFallback,
|
|
119
119
|
AvatarImage,
|
|
120
120
|
Button
|
|
121
|
-
} from "./chunk-
|
|
121
|
+
} from "./chunk-45NXD3IG.esm.js";
|
|
122
122
|
import "./chunk-EDEKQYSU.esm.js";
|
|
123
123
|
export {
|
|
124
124
|
APP_DENSITY_CHART_HEIGHT,
|
|
@@ -81,6 +81,15 @@ interface HouseRule {
|
|
|
81
81
|
slop?: string;
|
|
82
82
|
/** The tasteful equivalent. */
|
|
83
83
|
good?: string;
|
|
84
|
+
/**
|
|
85
|
+
* How the rule is enforced. `"lint"` (the default) means `ui-lint.ts` has a
|
|
86
|
+
* deterministic check for it; `"prompt-only"` means the pattern can't be
|
|
87
|
+
* detected with high enough precision to gate on, so it's taught in the
|
|
88
|
+
* prompt but deliberately not linted (a low-precision check would false-flag
|
|
89
|
+
* legitimate UIs under the strict gate). Keeping this explicit lets a test
|
|
90
|
+
* assert every rule made a coverage decision — see `ui-lint.test.ts`.
|
|
91
|
+
*/
|
|
92
|
+
enforcement?: "lint" | "prompt-only";
|
|
84
93
|
}
|
|
85
94
|
declare const HOUSE_RULES: readonly HouseRule[];
|
|
86
95
|
|
|
@@ -424,6 +433,20 @@ interface AppShellProps {
|
|
|
424
433
|
/** Uncontrolled initial mobile-nav open state. Default: `false`. */
|
|
425
434
|
defaultNavOpen?: boolean;
|
|
426
435
|
onNavOpenChange?: (open: boolean) => void;
|
|
436
|
+
/**
|
|
437
|
+
* How the mobile hamburger that opens the `sidebar` drawer is provided.
|
|
438
|
+
* - `"auto"` (default): the shell renders a floating hamburger (top-left,
|
|
439
|
+
* `md:hidden`) whenever there's a `sidebar` but no `topbar` — so a sidebar
|
|
440
|
+
* dashboard works on mobile with **no topbar and no wiring**.
|
|
441
|
+
* - `"topbar"`: you place `<AppShellSidebarTrigger />` in the `topbar`
|
|
442
|
+
* yourself; the shell renders no floating hamburger.
|
|
443
|
+
* - `"none"`: the shell renders no hamburger (you provide your own via
|
|
444
|
+
* `useAppShellNav()`).
|
|
445
|
+
*
|
|
446
|
+
* When a `topbar` is present, `"auto"` behaves like `"topbar"` (the topbar is
|
|
447
|
+
* assumed to host the trigger) to avoid a duplicate control.
|
|
448
|
+
*/
|
|
449
|
+
mobileSidebarTrigger?: "auto" | "topbar" | "none";
|
|
427
450
|
className?: string;
|
|
428
451
|
mainClassName?: string;
|
|
429
452
|
/**
|
|
@@ -461,20 +484,28 @@ interface AppShellChatControls {
|
|
|
461
484
|
}
|
|
462
485
|
declare function useAppShellChat(): AppShellChatControls | null;
|
|
463
486
|
|
|
464
|
-
|
|
487
|
+
/** Mobile-nav drawer controls owned by an enclosing shell (e.g. `AppShell`). */
|
|
488
|
+
interface ShellNavControls {
|
|
465
489
|
/** Mobile nav drawer open state. */
|
|
466
490
|
open: boolean;
|
|
467
491
|
setOpen: (open: boolean) => void;
|
|
468
492
|
toggle: () => void;
|
|
469
493
|
}
|
|
494
|
+
|
|
495
|
+
/** Mobile-nav drawer controls exposed by `AppShell`. */
|
|
496
|
+
type AppShellNavControls = ShellNavControls;
|
|
470
497
|
/**
|
|
471
|
-
* Read the `AppShell`-owned mobile nav controls. Use to wire
|
|
472
|
-
*
|
|
473
|
-
* re-implementing the open-state + resize boilerplate:
|
|
498
|
+
* Read the `AppShell`-owned mobile nav controls. Use to wire a custom hamburger
|
|
499
|
+
* or a sidebar that doesn't auto-detect the shell.
|
|
474
500
|
*
|
|
501
|
+
* Note: inside `AppShell`, `StudioSidebar` already syncs to these controls
|
|
502
|
+
* automatically (no `mobileOpen` wiring needed), and `AppShell` renders the
|
|
503
|
+
* mobile hamburger itself when there's no topbar — so most apps never call this.
|
|
504
|
+
*
|
|
505
|
+
* @example
|
|
475
506
|
* ```tsx
|
|
476
507
|
* const nav = useAppShellNav();
|
|
477
|
-
* <
|
|
508
|
+
* <button onClick={nav.toggle}>Menu</button>
|
|
478
509
|
* ```
|
|
479
510
|
*
|
|
480
511
|
* Returns a no-op fallback when used outside `AppShell`, so it's always safe to call.
|
|
@@ -745,11 +776,26 @@ declare const statusBadgeToneClass: {
|
|
|
745
776
|
type StatusBadgeTone = keyof typeof statusBadgeToneClass;
|
|
746
777
|
interface StatusBadgeProps {
|
|
747
778
|
children: ReactNode;
|
|
779
|
+
/**
|
|
780
|
+
* Tone tint. One of `default | primary | success | warn | danger | muted`.
|
|
781
|
+
* (Different vocabulary from `StatusDot`, which uses `online | busy | …`.)
|
|
782
|
+
*/
|
|
748
783
|
tone?: StatusBadgeTone;
|
|
749
784
|
/** Render a small leading status dot in the tone color. */
|
|
750
785
|
dot?: boolean;
|
|
751
786
|
className?: string;
|
|
752
787
|
}
|
|
788
|
+
/**
|
|
789
|
+
* A labeled status **pill** (soft tint + ring) for a record's state — order
|
|
790
|
+
* status, plan tier, health. For a tiny presence/liveness indicator (online /
|
|
791
|
+
* busy / offline) use `StatusDot` instead.
|
|
792
|
+
*
|
|
793
|
+
* @example
|
|
794
|
+
* ```tsx
|
|
795
|
+
* <StatusBadge tone="success">Paid</StatusBadge>
|
|
796
|
+
* <StatusBadge tone="warn" dot>Pending</StatusBadge>
|
|
797
|
+
* ```
|
|
798
|
+
*/
|
|
753
799
|
declare const StatusBadge: FC<StatusBadgeProps>;
|
|
754
800
|
|
|
755
801
|
interface AppConfirmDialogProps {
|
|
@@ -790,6 +836,10 @@ declare const InfoCard: FC<InfoCardProps>;
|
|
|
790
836
|
|
|
791
837
|
type StatusDotTone = "online" | "busy" | "offline" | "error" | "neutral";
|
|
792
838
|
interface StatusDotProps {
|
|
839
|
+
/**
|
|
840
|
+
* Presence/liveness tone. One of `online | busy | offline | error | neutral`.
|
|
841
|
+
* (Different vocabulary from `StatusBadge`, which uses `success | warn | …`.)
|
|
842
|
+
*/
|
|
793
843
|
tone?: StatusDotTone;
|
|
794
844
|
/** Optional label rendered to the right of the dot. */
|
|
795
845
|
label?: ReactNode;
|
|
@@ -797,7 +847,17 @@ interface StatusDotProps {
|
|
|
797
847
|
pulse?: boolean;
|
|
798
848
|
className?: string;
|
|
799
849
|
}
|
|
800
|
-
/**
|
|
850
|
+
/**
|
|
851
|
+
* Tiny presence/liveness indicator dot, optionally labeled and pulsing — agent
|
|
852
|
+
* online, service up/down. For a labeled state pill (Paid / Pending / Failed)
|
|
853
|
+
* use `StatusBadge` instead.
|
|
854
|
+
*
|
|
855
|
+
* @example
|
|
856
|
+
* ```tsx
|
|
857
|
+
* <StatusDot tone="online" label="Online" pulse />
|
|
858
|
+
* <StatusDot tone="offline" label="Offline" />
|
|
859
|
+
* ```
|
|
860
|
+
*/
|
|
801
861
|
declare const StatusDot: FC<StatusDotProps>;
|
|
802
862
|
|
|
803
863
|
interface DescriptionItem {
|
|
@@ -1085,6 +1145,23 @@ interface FieldSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
|
1085
1145
|
fieldClassName?: string;
|
|
1086
1146
|
children: ReactNode;
|
|
1087
1147
|
}
|
|
1148
|
+
/**
|
|
1149
|
+
* A labeled form select — a native `<select>` wrapped in a `Field` (label,
|
|
1150
|
+
* hint, error), styled to match the kit's inputs. Children are plain `<option>`
|
|
1151
|
+
* elements. Use this in forms.
|
|
1152
|
+
*
|
|
1153
|
+
* For a rich, searchable/custom-rendered dropdown (Radix), compose `Select` +
|
|
1154
|
+
* `SelectTrigger` / `SelectContent` / `SelectItem` from `@timbal-ai/timbal-react/ui`
|
|
1155
|
+
* instead.
|
|
1156
|
+
*
|
|
1157
|
+
* @example
|
|
1158
|
+
* ```tsx
|
|
1159
|
+
* <FieldSelect label="Environment" defaultValue="prod">
|
|
1160
|
+
* <option value="prod">Production</option>
|
|
1161
|
+
* <option value="staging">Staging</option>
|
|
1162
|
+
* </FieldSelect>
|
|
1163
|
+
* ```
|
|
1164
|
+
*/
|
|
1088
1165
|
declare const FieldSelect: FC<FieldSelectProps>;
|
|
1089
1166
|
|
|
1090
1167
|
interface FieldSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
@@ -1219,8 +1296,11 @@ interface DataTableColumn<T> {
|
|
|
1219
1296
|
truncate?: boolean;
|
|
1220
1297
|
}
|
|
1221
1298
|
interface DataTableProps<T> {
|
|
1299
|
+
/** Column definitions. Each has an `id`, a `header`, and a `cell(row)` renderer. */
|
|
1222
1300
|
columns: DataTableColumn<T>[];
|
|
1301
|
+
/** The data array. Note: the prop is `rows` (not `data`). */
|
|
1223
1302
|
rows: T[];
|
|
1303
|
+
/** Stable key per row (required) — e.g. `(row) => row.id`. Drives selection + React keys. */
|
|
1224
1304
|
getRowKey: (row: T) => string;
|
|
1225
1305
|
emptyTitle?: ReactNode;
|
|
1226
1306
|
emptyDescription?: ReactNode;
|
|
@@ -1265,6 +1345,22 @@ interface DataTableProps<T> {
|
|
|
1265
1345
|
defaultPageIndex?: number;
|
|
1266
1346
|
onPageChange?: (pageIndex: number) => void;
|
|
1267
1347
|
}
|
|
1348
|
+
/**
|
|
1349
|
+
* Sortable, optionally selectable + paginated data table. Place it **directly**
|
|
1350
|
+
* on a `Page` / `Section` — never inside a `Card` (it owns its own chrome).
|
|
1351
|
+
*
|
|
1352
|
+
* The data prop is `rows` (not `data`), and `getRowKey` is required.
|
|
1353
|
+
*
|
|
1354
|
+
* @example
|
|
1355
|
+
* ```tsx
|
|
1356
|
+
* type Order = { id: string; customer: string; status: string };
|
|
1357
|
+
* const columns: DataTableColumn<Order>[] = [
|
|
1358
|
+
* { id: "customer", header: "Customer", cell: (r) => r.customer, sortable: true, sortValue: (r) => r.customer },
|
|
1359
|
+
* { id: "status", header: "Status", cell: (r) => <StatusBadge tone={r.status === "Paid" ? "success" : "warn"}>{r.status}</StatusBadge> },
|
|
1360
|
+
* ];
|
|
1361
|
+
* <DataTable columns={columns} rows={orders} getRowKey={(r) => r.id} defaultSort={{ columnId: "customer", direction: "asc" }} />
|
|
1362
|
+
* ```
|
|
1363
|
+
*/
|
|
1268
1364
|
declare function DataTable<T>({ columns, rows, getRowKey, emptyTitle, emptyDescription, emptyMode, className, sort: sortProp, defaultSort, onSortChange, showRowCount, rowCountLabel, footer, onRowClick, stickyHeader, dense, caption, loading, loadingRows, selectable, selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, selectAllAriaLabel, pageSize, pageIndex: pageIndexProp, defaultPageIndex, onPageChange, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
1269
1365
|
|
|
1270
1366
|
interface ChartPanelProps {
|
|
@@ -1281,8 +1377,20 @@ interface ChartPanelProps {
|
|
|
1281
1377
|
className?: string;
|
|
1282
1378
|
}
|
|
1283
1379
|
/**
|
|
1284
|
-
*
|
|
1285
|
-
*
|
|
1380
|
+
* A titled card wrapping a single chart — pass a built-in `artifact` or your
|
|
1381
|
+
* own chart as `children`. Use this when you just need "a chart in a card."
|
|
1382
|
+
*
|
|
1383
|
+
* Choosing between the two chart cards:
|
|
1384
|
+
* - `ChartPanel` — one chart in a titled shell. The simple, common case.
|
|
1385
|
+
* - `MetricChartCard` — a selectable KPI row **above** a chart, where clicking a
|
|
1386
|
+
* metric swaps the series. Use only when you need that interaction.
|
|
1387
|
+
*
|
|
1388
|
+
* @example
|
|
1389
|
+
* ```tsx
|
|
1390
|
+
* <ChartPanel title="Revenue" description="Last 6 months">
|
|
1391
|
+
* <LineAreaChart data={rows} xKey="month" series={["revenue"]} />
|
|
1392
|
+
* </ChartPanel>
|
|
1393
|
+
* ```
|
|
1286
1394
|
*/
|
|
1287
1395
|
declare const ChartPanel: FC<ChartPanelProps>;
|
|
1288
1396
|
|
|
@@ -1382,6 +1490,20 @@ interface MetricRowProps extends MetricCardHeaderProps {
|
|
|
1382
1490
|
* Platform-style KPI strip in one elevated card — no chart.
|
|
1383
1491
|
* Use for overview rows; pair with `MetricChartCard` when you need the plot below.
|
|
1384
1492
|
* Fully supports background sparklines and rich inline trend metadata.
|
|
1493
|
+
*
|
|
1494
|
+
* Each metric needs a stable `id`, a `label`, and a `value`. Add `onMetricChange`
|
|
1495
|
+
* (or `activeMetricId`) to make the tiles selectable.
|
|
1496
|
+
*
|
|
1497
|
+
* @example
|
|
1498
|
+
* ```tsx
|
|
1499
|
+
* <MetricRow
|
|
1500
|
+
* metrics={[
|
|
1501
|
+
* { id: "mrr", label: "MRR", value: "$48.2k", trend: "+12%" },
|
|
1502
|
+
* { id: "active", label: "Active users", value: "1,204" },
|
|
1503
|
+
* { id: "churn", label: "Churn", value: "1.8%" },
|
|
1504
|
+
* ]}
|
|
1505
|
+
* />
|
|
1506
|
+
* ```
|
|
1385
1507
|
*/
|
|
1386
1508
|
declare const MetricRow: FC<MetricRowProps>;
|
|
1387
1509
|
|
|
@@ -1417,9 +1539,17 @@ declare function resolveTooltipCategory(label: unknown, payload: TooltipRow[] |
|
|
|
1417
1539
|
*/
|
|
1418
1540
|
declare const CHART_PALETTE: readonly ["var(--chart-1, #4f46e5)", "var(--chart-2, #3b82f6)", "var(--chart-3, #0ea5e9)", "var(--chart-4, #6366f1)", "var(--chart-5, #60a5fa)", "var(--chart-6, #2563eb)"];
|
|
1419
1541
|
interface ChartSeries {
|
|
1542
|
+
/** Key in each data row holding this series' numeric value. */
|
|
1420
1543
|
dataKey: string;
|
|
1544
|
+
/** Legend / tooltip label. Defaults to `dataKey`. */
|
|
1421
1545
|
label?: string;
|
|
1422
|
-
/**
|
|
1546
|
+
/**
|
|
1547
|
+
* CSS color for the series. Defaults to the `--chart-N` palette by index, so
|
|
1548
|
+
* you usually omit it. If you set it, pass a token **directly** —
|
|
1549
|
+
* `"var(--chart-3)"` or `"var(--destructive)"` — never `"hsl(var(--chart-3))"`:
|
|
1550
|
+
* the tokens are already OKLCH colors, so wrapping them in `hsl()/rgb()` is
|
|
1551
|
+
* invalid CSS and renders an empty chart.
|
|
1552
|
+
*/
|
|
1423
1553
|
color?: string;
|
|
1424
1554
|
}
|
|
1425
1555
|
type ChartVariant = "area" | "line" | "bar";
|
|
@@ -1475,6 +1605,36 @@ interface LineAreaChartProps {
|
|
|
1475
1605
|
* and bar charts (vertical or horizontal), with stacking, curve interpolation,
|
|
1476
1606
|
* dots, grid control, and the shared `ChartTooltipContent` / `ChartLegendContent`
|
|
1477
1607
|
* chrome. Series colors flow from the theme `--chart-N` tokens via `ChartConfig`.
|
|
1608
|
+
*
|
|
1609
|
+
* Pass `data` as an array of rows and (optionally) `series` to pick which keys
|
|
1610
|
+
* to plot — both `xKey` and `series` are inferred from the data when omitted.
|
|
1611
|
+
* Colors come from the `--chart-N` tokens automatically; don't hand-author them.
|
|
1612
|
+
*
|
|
1613
|
+
* @example
|
|
1614
|
+
* ```tsx
|
|
1615
|
+
* // Stacked area, colors inferred from the theme:
|
|
1616
|
+
* <LineAreaChart
|
|
1617
|
+
* data={[
|
|
1618
|
+
* { month: "Jan", desktop: 186, mobile: 80 },
|
|
1619
|
+
* { month: "Feb", desktop: 305, mobile: 200 },
|
|
1620
|
+
* ]}
|
|
1621
|
+
* xKey="month"
|
|
1622
|
+
* series={["desktop", "mobile"]}
|
|
1623
|
+
* variant="area"
|
|
1624
|
+
* stacked
|
|
1625
|
+
* />
|
|
1626
|
+
* ```
|
|
1627
|
+
* @example
|
|
1628
|
+
* ```tsx
|
|
1629
|
+
* // Horizontal bar with a custom token color on one series:
|
|
1630
|
+
* <LineAreaChart
|
|
1631
|
+
* data={rows}
|
|
1632
|
+
* xKey="team"
|
|
1633
|
+
* series={[{ dataKey: "wins", color: "var(--chart-2)" }]}
|
|
1634
|
+
* variant="bar"
|
|
1635
|
+
* orientation="horizontal"
|
|
1636
|
+
* />
|
|
1637
|
+
* ```
|
|
1478
1638
|
*/
|
|
1479
1639
|
declare const LineAreaChart: FC<LineAreaChartProps>;
|
|
1480
1640
|
|
|
@@ -1524,9 +1684,13 @@ interface MetricChartCardProps {
|
|
|
1524
1684
|
className?: string;
|
|
1525
1685
|
}
|
|
1526
1686
|
/**
|
|
1527
|
-
* Analytics card: selectable KPI row over a flush area chart —
|
|
1528
|
-
* timbal-platform `MetricsRowCard` /
|
|
1529
|
-
*
|
|
1687
|
+
* Analytics card: a selectable KPI row over a flush area chart — clicking a
|
|
1688
|
+
* metric tile swaps the plotted series (the timbal-platform `MetricsRowCard` /
|
|
1689
|
+
* Studio analytics pattern). Supports background sparklines and rich inline
|
|
1690
|
+
* trend metadata.
|
|
1691
|
+
*
|
|
1692
|
+
* If you only need a single chart in a titled card (no selectable KPI row), use
|
|
1693
|
+
* `ChartPanel` instead.
|
|
1530
1694
|
*/
|
|
1531
1695
|
declare const MetricChartCard: FC<MetricChartCardProps>;
|
|
1532
1696
|
|
|
@@ -1580,6 +1744,7 @@ interface UseLiveQueryResult<T> {
|
|
|
1580
1744
|
declare function useLiveQuery<T>(fetcher: () => Promise<T>, options?: UseLiveQueryOptions): UseLiveQueryResult<T>;
|
|
1581
1745
|
|
|
1582
1746
|
interface PieChartProps {
|
|
1747
|
+
/** One row per slice. */
|
|
1583
1748
|
data: Array<Record<string, unknown>>;
|
|
1584
1749
|
/** Category / label key. Inferred from the first non-numeric field if omitted. */
|
|
1585
1750
|
nameKey?: string;
|
|
@@ -1587,7 +1752,11 @@ interface PieChartProps {
|
|
|
1587
1752
|
dataKey?: string;
|
|
1588
1753
|
/** Donut hole radius as a fraction of the outer radius (0 = full pie). Default 0. */
|
|
1589
1754
|
innerRadius?: number;
|
|
1590
|
-
/**
|
|
1755
|
+
/**
|
|
1756
|
+
* Per-slice colors. Defaults to the theme `--chart-N` palette (recommended).
|
|
1757
|
+
* If you override, pass tokens directly (`["var(--chart-1)", "var(--chart-2)"]`)
|
|
1758
|
+
* — never `"hsl(var(--chart-1))"` (the tokens are already OKLCH).
|
|
1759
|
+
*/
|
|
1591
1760
|
colors?: string[];
|
|
1592
1761
|
/** Plot height in px. Default 260. */
|
|
1593
1762
|
height?: number;
|
|
@@ -1610,6 +1779,23 @@ interface PieChartProps {
|
|
|
1610
1779
|
* Pie / donut chart on recharts. Pass `innerRadius` (0–1 fraction) for a donut
|
|
1611
1780
|
* and `centerValue` / `centerLabel` to fill the hole with a KPI. Slice colors
|
|
1612
1781
|
* come from the theme `--chart-N` palette (or `colors`).
|
|
1782
|
+
*
|
|
1783
|
+
* @example
|
|
1784
|
+
* ```tsx
|
|
1785
|
+
* // Donut with a total in the hole:
|
|
1786
|
+
* <PieChart
|
|
1787
|
+
* data={[
|
|
1788
|
+
* { browser: "Chrome", visitors: 275 },
|
|
1789
|
+
* { browser: "Safari", visitors: 200 },
|
|
1790
|
+
* { browser: "Firefox", visitors: 187 },
|
|
1791
|
+
* ]}
|
|
1792
|
+
* nameKey="browser"
|
|
1793
|
+
* dataKey="visitors"
|
|
1794
|
+
* innerRadius={0.6}
|
|
1795
|
+
* centerValue="662"
|
|
1796
|
+
* centerLabel="Visitors"
|
|
1797
|
+
* />
|
|
1798
|
+
* ```
|
|
1613
1799
|
*/
|
|
1614
1800
|
declare const PieChart: FC<PieChartProps>;
|
|
1615
1801
|
|
|
@@ -1621,7 +1807,10 @@ interface RadialChartProps {
|
|
|
1621
1807
|
dataKey?: string;
|
|
1622
1808
|
/** Value that maps to a full ring. Default: the data max (so the largest fills). */
|
|
1623
1809
|
maxValue?: number;
|
|
1624
|
-
/**
|
|
1810
|
+
/**
|
|
1811
|
+
* Per-arc colors. Defaults to the theme `--chart-N` palette (recommended).
|
|
1812
|
+
* Override with tokens directly (`["var(--chart-1)"]`) — never `"hsl(var(--chart-1))"`.
|
|
1813
|
+
*/
|
|
1625
1814
|
colors?: string[];
|
|
1626
1815
|
height?: number;
|
|
1627
1816
|
/** Thickness of each ring in px. Default 16. */
|
|
@@ -1639,6 +1828,19 @@ interface RadialChartProps {
|
|
|
1639
1828
|
* Radial (progress ring) chart on recharts — one concentric ring per data
|
|
1640
1829
|
* point, each filled proportional to its value against `maxValue`. Pass
|
|
1641
1830
|
* `centerValue` / `centerLabel` to fill the middle. Theme-driven colors.
|
|
1831
|
+
*
|
|
1832
|
+
* @example
|
|
1833
|
+
* ```tsx
|
|
1834
|
+
* // Single progress ring (e.g. a gauge) — colors from the theme:
|
|
1835
|
+
* <RadialChart
|
|
1836
|
+
* data={[{ label: "Uptime", value: 92 }]}
|
|
1837
|
+
* nameKey="label"
|
|
1838
|
+
* dataKey="value"
|
|
1839
|
+
* maxValue={100}
|
|
1840
|
+
* centerValue="92%"
|
|
1841
|
+
* centerLabel="Uptime"
|
|
1842
|
+
* />
|
|
1843
|
+
* ```
|
|
1642
1844
|
*/
|
|
1643
1845
|
declare const RadialChart: FC<RadialChartProps>;
|
|
1644
1846
|
|
|
@@ -1662,7 +1864,20 @@ interface RadarChartProps {
|
|
|
1662
1864
|
/**
|
|
1663
1865
|
* Radar (spider) chart on recharts — one axis per data point, one polygon per
|
|
1664
1866
|
* series. Theme-driven colors. Good for comparing a handful of metrics across
|
|
1665
|
-
* two or three entities.
|
|
1867
|
+
* two or three entities. Needs at least 3 data rows (axes).
|
|
1868
|
+
*
|
|
1869
|
+
* @example
|
|
1870
|
+
* ```tsx
|
|
1871
|
+
* <RadarChart
|
|
1872
|
+
* data={[
|
|
1873
|
+
* { metric: "Speed", a: 120, b: 90 },
|
|
1874
|
+
* { metric: "Power", a: 98, b: 130 },
|
|
1875
|
+
* { metric: "Range", a: 86, b: 70 },
|
|
1876
|
+
* ]}
|
|
1877
|
+
* nameKey="metric"
|
|
1878
|
+
* series={["a", "b"]}
|
|
1879
|
+
* />
|
|
1880
|
+
* ```
|
|
1666
1881
|
*/
|
|
1667
1882
|
declare const RadarChart: FC<RadarChartProps>;
|
|
1668
1883
|
|