@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.
Files changed (32) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/README.md +8 -0
  3. package/dist/app.cjs +167 -75
  4. package/dist/app.d.cts +3 -3
  5. package/dist/app.d.ts +3 -3
  6. package/dist/app.esm.js +5 -5
  7. package/dist/{chart-artifact-VAqgH-My.d.cts → chart-artifact-CuTiCITz.d.cts} +230 -15
  8. package/dist/{chart-artifact-C2pZQsaP.d.ts → chart-artifact-U-x0UNJm.d.ts} +230 -15
  9. package/dist/chat.esm.js +3 -3
  10. package/dist/{chunk-YYEI6XME.esm.js → chunk-22KWC2LS.esm.js} +5 -5
  11. package/dist/{chunk-MBS7XHV2.esm.js → chunk-45NXD3IG.esm.js} +3 -3
  12. package/dist/{chunk-24B4I4XC.esm.js → chunk-64RHAJVG.esm.js} +1 -1
  13. package/dist/{chunk-WQIQW7EM.esm.js → chunk-7AGIAQE6.esm.js} +1 -1
  14. package/dist/{chunk-NO5AWNWT.esm.js → chunk-7WU3IKAN.esm.js} +1 -1
  15. package/dist/{chunk-6SQMTBPL.esm.js → chunk-M5IBJBEY.esm.js} +109 -23
  16. package/dist/{chunk-HSL36SJ4.esm.js → chunk-PMMI7LBV.esm.js} +20 -8
  17. package/dist/{chunk-TMP7RIA7.esm.js → chunk-VKXOHVDE.esm.js} +2 -2
  18. package/dist/{chunk-ELEY66OH.esm.js → chunk-XOCOZU7J.esm.js} +11 -1
  19. package/dist/cli/timbal-ui-lint.mjs +534 -0
  20. package/dist/index.cjs +303 -200
  21. package/dist/index.d.cts +2 -2
  22. package/dist/index.d.ts +2 -2
  23. package/dist/index.esm.js +9 -9
  24. package/dist/{kanban-FFBeaZPS.d.cts → kanban-BQxWliCS.d.cts} +17 -0
  25. package/dist/{kanban-FFBeaZPS.d.ts → kanban-BQxWliCS.d.ts} +17 -0
  26. package/dist/studio.cjs +104 -85
  27. package/dist/studio.esm.js +6 -6
  28. package/dist/ui.cjs +6 -6
  29. package/dist/ui.d.cts +1 -1
  30. package/dist/ui.d.ts +1 -1
  31. package/dist/ui.esm.js +4 -4
  32. 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-VAqgH-My.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-VAqgH-My.cjs';
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-FFBeaZPS.cjs';
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-C2pZQsaP.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-C2pZQsaP.js';
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-FFBeaZPS.js';
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-6SQMTBPL.esm.js";
95
- import "./chunk-ELEY66OH.esm.js";
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-WQIQW7EM.esm.js";
108
+ } from "./chunk-7AGIAQE6.esm.js";
109
109
  import {
110
110
  Banner,
111
111
  Kanban,
112
112
  Timeline,
113
113
  UntitledButton
114
- } from "./chunk-NO5AWNWT.esm.js";
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-MBS7XHV2.esm.js";
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
- interface AppShellNavControls {
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 `StudioSidebar`'s
472
- * `mobileOpen` / `onMobileOpenChange` (and any custom trigger) without
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
- * <StudioSidebar mobileOpen={nav.open} onMobileOpenChange={nav.setOpen} … />
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
- /** Tiny status indicator dot, optionally labeled and pulsing. */
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
- * Chart shell matching `MetricChartCard`title row with side padding, flush
1285
- * plot edge-to-edge with only top inset on the chart region.
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
- /** CSS color (token or literal). Defaults to the palette by index. */
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` / Studio analytics pattern.
1529
- * Fully supports background sparklines and rich inline trend metadata.
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
- /** Per-slice colors. Defaults to the theme palette. */
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
- /** Per-arc colors. Defaults to the theme palette. */
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