@factorialco/f0-react 1.434.0 → 1.436.0

package/dist/f0.d.ts

@@ -39,6 +39,7 @@ import { default as default_2 } from 'react';
 import { DeltaCellValue } from './types/delta';
 import { DotTagCellValue } from './f0';
 import { DotTagCellValue as DotTagCellValue_2 } from './types/dotTag';
+import type * as echarts_2 from 'echarts';
 import { F0AnalyticsDashboardProps as F0AnalyticsDashboardProps_2 } from './types';
 import { F0AvatarCompanyProps as F0AvatarCompanyProps_2 } from './types';
 import { F0AvatarDateProps } from './F0AvatarDate';
@@ -47,6 +48,7 @@ import { F0AvatarIconProps as F0AvatarIconProps_2 } from './F0AvatarIcon';
 import { F0AvatarListProps as F0AvatarListProps_2 } from './types';
 import { F0AvatarPersonProps as F0AvatarPersonProps_2 } from './types';
 import { F0AvatarTeamProps as F0AvatarTeamProps_2 } from './F0AvatarTeam';
+import { F0DataChartProps as F0DataChartProps_2 } from './types';
 import { F0DialogInternalProps } from './internal-types';
 import { F0DurationInputProps as F0DurationInputProps_2 } from './types';
 import { F0FormDefinitionPerSection as F0FormDefinitionPerSection_2 } from './f0';
@@ -110,6 +112,7 @@ import { Props as Props_2 } from './types';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import * as RechartsPrimitive from 'recharts';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { RemoteAudioTrack } from 'livekit-client';
@@ -163,6 +166,17 @@ declare type Action_3 = {
     loading?: boolean;
 };
 
+export declare type ActionBarGroup = {
+    label?: string;
+    items: ActionBarItem[];
+};
+
+export declare type ActionBarItem = ActionType_2;
+
+export declare type ActionBarStatus = (typeof actionBarStatuses)[number];
+
+export declare const actionBarStatuses: readonly ["idle", "loading", "success", "error"];
+
 declare type ActionBaseProps = ActionCommonProps & DataAttributes;
 
 declare type ActionButtonProps = ActionBaseProps & {
@@ -294,6 +308,15 @@ declare const actionSizes: readonly ["sm", "md", "lg"];
 
 export declare type ActionType = "duplicate" | "delete";
 
+declare type ActionType_2 = {
+    label: string;
+    icon?: IconType;
+    onClick?: () => void;
+    disabled?: boolean;
+    critical?: boolean;
+    description?: string;
+};
+
 declare type ActionVariant = (typeof actionVariants)[number];
 
 declare const actionVariants: readonly ["default", "outline", "critical", "neutral", "ghost", "promote", "outlinePromote", "ai", "link", "unstyled", "mention"];
@@ -517,6 +540,10 @@ declare type AiChatProviderReturnValue = {
     inProgress: boolean;
     /** Set the in-progress state (synced from CopilotKit's isLoading) */
     setInProgress: (value: boolean) => void;
+    /** The current clarifying question shown in the textarea, or null if none */
+    clarifyingQuestion: ClarifyingQuestionState | null;
+    /** Set the current clarifying question (or null to dismiss) */
+    setClarifyingQuestion: React.Dispatch<React.SetStateAction<ClarifyingQuestionState | null>>;
 } & Pick<AiChatState, "greeting" | "agent" | "disclaimer" | "resizable" | "entityRefs" | "toolHints" | "credits" | "fileAttachments"> & {
     /** The current canvas content, or null when canvas is closed */
     canvasContent: CanvasContent | null;
@@ -702,6 +729,15 @@ export declare const aiTranslations: {
         };
         readonly attachFile: "Attach file";
         readonly removeFile: "Remove";
+        readonly clarifyingQuestion: {
+            readonly submit: "Submit";
+            readonly next: "Next";
+            readonly back: "Back";
+            readonly typeYourAnswer: "Type your answer…";
+            readonly stepOf: "{{current}} of {{total}}";
+            readonly custom: "own answer";
+            readonly skipped: "skipped";
+        };
         readonly growth: {
             readonly demoCard: {
                 readonly title: "See {{moduleName}} in action";
@@ -925,6 +961,24 @@ export declare interface BarChartConfig extends ChartConfigBase {
     stacked?: boolean;
 }
 
+/**
+ * Skeleton for bar chart content area.
+ *
+ * - `orientation: "vertical"` (default): vertical bars with varying heights.
+ * - `orientation: "horizontal"`: horizontal bars extending left-to-right.
+ * - `stacked: true`: each bar has 2–3 stacked segments.
+ */
+export declare function BarChartSkeleton({ orientation, stacked, showLegend, }?: BarChartSkeletonProps): JSX_2.Element;
+
+declare interface BarChartSkeletonProps {
+    /** Bar orientation. @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** Show stacked bar segments. @default false */
+    stacked?: boolean;
+    /** Show legend below chart. @default true */
+    showLegend?: boolean;
+}
+
 declare type BaseAction = {
     label: string;
     onClick: () => Promise<void> | void;
@@ -1685,6 +1739,87 @@ declare interface CardSecondaryLink extends Pick<F0LinkProps, "href" | "target"
     label: string;
 }
 
+declare type CardSelectableAvatarVariant = AvatarVariant | {
+    type: "emoji";
+    emoji: string;
+} | {
+    type: "file";
+    file: File;
+} | {
+    type: "icon";
+    icon: IconType;
+};
+
+export declare const CardSelectableContainer: CardSelectableContainerGeneric;
+
+declare type CardSelectableContainerGeneric = <T extends CardSelectableValue>(props: CardSelectableContainerProps<T> & WithDataTestIdProps) => ReactElement | null;
+
+export declare type CardSelectableContainerProps<T extends CardSelectableValue> = CardSelectableSingleProps<T> | CardSelectableMultipleProps<T>;
+
+export declare interface CardSelectableItem<T extends CardSelectableValue> {
+    /** Unique value for this option */
+    value: T;
+    /** Main title of the card */
+    title: string;
+    /** Description text below the title */
+    description?: string;
+    /** Avatar to display on the left */
+    avatar?: CardSelectableAvatarVariant;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Whether this item is required (shows asterisk indicator) */
+    required?: boolean;
+    /** Link displayed below the description, typically pointing to external documentation */
+    moreInfoLink?: {
+        href: string;
+        label?: string;
+    };
+}
+
+export declare interface CardSelectableMultipleProps<T extends CardSelectableValue> {
+    /** List of selectable items */
+    items: CardSelectableItem<T>[];
+    /** Multiple selection mode */
+    multiple: true;
+    /** Currently selected values */
+    value?: T[];
+    /** Callback when selection changes */
+    onChange?: (value: T[]) => void;
+    /** Whether the entire selector is disabled */
+    disabled?: boolean;
+    /** Label for the group (used for accessibility) */
+    label?: string;
+    /** Layout direction (default: vertical) */
+    layout?: "vertical" | "horizontal";
+    /** When true, shows a toggle/switch indicator instead of checkbox */
+    isToggle?: boolean;
+    /** When true, items are grouped in a single bordered container with dividers */
+    grouped?: boolean;
+}
+
+export declare interface CardSelectableSingleProps<T extends CardSelectableValue> {
+    /** List of selectable items */
+    items: CardSelectableItem<T>[];
+    /** Single selection mode (default) */
+    multiple?: false;
+    /** Currently selected value */
+    value?: T;
+    /** Callback when selection changes (receives undefined when isToggle and toggling off) */
+    onChange?: (value: T | undefined) => void;
+    /** Whether the entire selector is disabled */
+    disabled?: boolean;
+    /** Label for the group (used for accessibility) */
+    label?: string;
+    /** Layout direction (default: vertical) */
+    layout?: "vertical" | "horizontal";
+    /** When true, shows a toggle/switch indicator instead of radio and allows toggling off */
+    isToggle?: boolean;
+    /** When true, items are grouped in a single bordered container with dividers */
+    grouped?: boolean;
+}
+
+export declare type CardSelectableValue = string | number;
+
 declare type CardVisualizationOptions<T, _Filters extends FiltersDefinition, _Sortings extends SortingsDefinition> = {
     cardProperties: ReadonlyArray<CardPropertyDefinition<T>>;
     title: (record: T) => string;
@@ -1701,13 +1836,13 @@ declare type CardVisualizationOptions<T, _Filters extends FiltersDefinition, _So
 export declare const CategoryBarChart: WithDataTestIdReturnType_5<ForwardRefExoticComponent<Omit<CategoryBarProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLElement | SVGElement>>>;
 
 /** A valid chart color token — one of the 15 chromatic F0 base-color names. */
-declare type ChartColorToken = (typeof chartColorTokens)[number];
+export declare type ChartColorToken = (typeof chartColorTokens)[number];
 
 /**
  * The 15 chromatic color names from the F0 design token palette.
  * These are the only colors allowed for custom series / data-point colors.
  */
-declare const chartColorTokens: readonly ["lilac", "barbie", "smoke", "army", "flubber", "indigo", "camel", "radical", "viridian", "orange", "red", "grass", "malibu", "yellow", "purple"];
+export declare const chartColorTokens: readonly ["lilac", "barbie", "smoke", "army", "flubber", "indigo", "camel", "radical", "viridian", "orange", "red", "grass", "malibu", "yellow", "purple"];
 
 declare interface ChartComputation {
     datasetId: string;
@@ -1720,6 +1855,21 @@ declare interface ChartComputation {
     limit?: number;
 }
 
+declare type ChartConfig_3 = Record<string, ChartConfig_4[keyof ChartConfig_4]>;
+
+declare type ChartConfig_4 = {
+    [k in string]: {
+        label?: React_2.ReactNode;
+        icon?: React_2.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+
 declare interface ChartConfigBase {
     /** Show the legend below the chart. @default true */
     showLegend?: boolean;
@@ -1733,6 +1883,85 @@ declare interface ChartConfigBase {
     categoryFormatter?: (value: string) => string;
 }
 
+declare const ChartContainer: React_2.ForwardRefExoticComponent<Omit<ChartContainerComponentProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+declare interface ChartContainerComponentProps extends React_2.ComponentProps<"div">, VariantProps<typeof variants> {
+    config: ChartConfig_4;
+    children: React_2.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}
+
+declare type ChartItem<K extends ChartConfig_3> = {
+    label: string;
+    values: {
+        [key in keyof K]: number;
+    };
+};
+
+/**
+ * Complete chart theme — everything a chart type needs to render correctly.
+ *
+ * Resolved at runtime from CSS custom properties so that it automatically
+ * adapts to light / dark mode. Every chart type hook receives this object
+ * and passes it through to the shared option builders.
+ */
+export declare interface ChartTheme {
+    /** Current mode — useful for conditional logic in chart-type hooks */
+    mode: "light" | "dark";
+    /** Semantic colors */
+    colors: ChartThemeColors;
+    /** Default series color palette (hex strings) */
+    palette: string[];
+    /** Tooltip visual config */
+    tooltip: ChartThemeTooltip;
+    /** Axis pointer visual config */
+    axisPointer: ChartThemeAxisPointer;
+    /** Base text style applied to the entire ECharts instance */
+    textStyle: ChartThemeTextStyle;
+}
+
+/** Axis pointer visual configuration */
+declare interface ChartThemeAxisPointer {
+    color: string;
+    type: "dashed" | "solid";
+}
+
+/** Semantic colors used by every chart type */
+declare interface ChartThemeColors {
+    /** Primary text — tooltip body, strong labels. Resolves from --neutral-80 */
+    foreground: string;
+    /** Secondary text — legend labels. Resolves from --neutral-50 */
+    foregroundSecondary: string;
+    /** Tertiary text — axis tick labels. Resolves from --neutral-40 */
+    foregroundTertiary: string;
+    /** Grid / split lines, category axis line. Resolves from --neutral-10 */
+    borderSecondary: string;
+    /** Axis pointer line, subtle dividers. Resolves from --neutral-30 */
+    border: string;
+    /** Tooltip background color (CSS rgba string) */
+    tooltipBackground: string;
+    /** Chart container background — used when chart needs to know its own bg */
+    background: string;
+}
+
+/** Typography configuration */
+declare interface ChartThemeTextStyle {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: number;
+}
+
+/** Tooltip visual configuration */
+declare interface ChartThemeTooltip {
+    padding: number[];
+    borderWidth: number;
+    borderRadius: number;
+    transitionDuration: number;
+    /** CSS box-shadow applied via extraCssText */
+    boxShadow: string;
+    /** Full CSS background string (may include rgba + filters) */
+    background: string;
+}
+
 declare interface ChatDashboardBarChartConfig extends ChatDashboardChartConfigBase {
     type: "bar";
     orientation?: "vertical" | "horizontal";
@@ -1963,6 +2192,11 @@ declare type ChildrenPaginationInfo = {
 
 declare type ChildrenResponse<R extends RecordType> = NestedResponseWithType<R>;
 
+/**
+ * @experimental This is an experimental component use it at your own risk
+ */
+export declare const Chip: ({ deactivated, label, variant, onClick, onClose, avatar, icon, }: ChipProps) => JSX_2.Element;
+
 declare type ChipLabel = {
     label: string;
 } & ({
@@ -1976,7 +2210,7 @@ declare type ChipLabel = {
     avatar?: never;
 });
 
-declare type ChipProps = BaseChipProps & ChipVariants & {
+export declare type ChipProps = BaseChipProps & ChipVariants & {
     variant?: "default" | "selected";
 };
 
@@ -1997,7 +2231,7 @@ declare type ChipVariants = {
     icon?: undefined;
 };
 
-declare const chipVariants: (props?: ({
+export declare const chipVariants: (props?: ({
     variant?: "default" | "selected" | undefined;
 } & ({
     class?: ClassValue;
@@ -2007,6 +2241,81 @@ declare const chipVariants: (props?: ({
     className?: ClassValue;
 })) | undefined) => string;
 
+/**
+ * A single selectable option within a clarifying question step.
+ */
+declare interface ClarifyingOption {
+    /** Unique identifier for this option */
+    id: string;
+    /** Display label shown to the user */
+    label: string;
+}
+
+/**
+ * The active clarifying question state pushed into the AiChat context.
+ * When no clarifying question is active the context value is `null`.
+ *
+ * Navigation metadata (currentStepIndex, totalSteps) and callbacks live
+ * here so the panel component stays a pure view of this state.
+ */
+declare interface ClarifyingQuestionState {
+    /** The current step's data + interaction state */
+    currentStep: ClarifyingStepState;
+    /** Zero-based index of the current step */
+    currentStepIndex: number;
+    /** Total number of steps (1 for single-step questions) */
+    totalSteps: number;
+    /** Toggle selection of an option by its ID */
+    toggleOption: (optionId: string) => void;
+    /** Confirm the current step's selection and advance (or submit on final step) */
+    confirm: () => void;
+    /** Go back to the previous step */
+    back: () => void;
+    /** Set the custom answer text */
+    setCustomAnswerText: (text: string) => void;
+    /** Toggle whether the custom answer is included in the submission */
+    setCustomAnswerActive: (active: boolean) => void;
+    /** Activate the custom answer input (in single mode, clears predefined selections) */
+    activateCustomAnswer: () => void;
+}
+
+/**
+ * Selection mode for a clarifying question step.
+ * - "single": only one option can be selected (rendered as radio buttons)
+ * - "multiple": multiple options can be selected (rendered as checkboxes)
+ */
+declare type ClarifyingSelectionMode = "single" | "multiple";
+
+/**
+ * Pure data describing a single clarifying question step.
+ * This is what the AI backend sends — no UI state or callbacks.
+ */
+declare interface ClarifyingStepData {
+    /** The question text displayed to the user */
+    question: string;
+    /** Available options the user can select from */
+    options: ClarifyingOption[];
+    /** Selection mode. Defaults to "single" when omitted */
+    selectionMode?: ClarifyingSelectionMode;
+    /** Whether the user can skip this step without selecting any option */
+    optional?: boolean;
+    /** Whether the user can type a free-text custom answer */
+    allowCustomAnswer?: boolean;
+}
+
+/**
+ * A step enriched with the user's current interaction state.
+ * Used internally by the controller to track selections per step.
+ */
+declare interface ClarifyingStepState extends ClarifyingStepData {
+    /** IDs of currently selected options */
+    selectedOptionIds: string[];
+    /** Current custom answer text (preserved even when deactivated) */
+    customAnswerText?: string;
+    /** Whether the custom answer is currently included in the submission */
+    isCustomAnswerActive: boolean;
+}
+
 declare type ColId = string;
 
 declare interface CollectionComputation {
@@ -3281,6 +3590,15 @@ export declare const defaultTranslations: {
         };
         readonly attachFile: "Attach file";
         readonly removeFile: "Remove";
+        readonly clarifyingQuestion: {
+            readonly submit: "Submit";
+            readonly next: "Next";
+            readonly back: "Back";
+            readonly typeYourAnswer: "Type your answer…";
+            readonly stepOf: "{{current}} of {{total}}";
+            readonly custom: "own answer";
+            readonly skipped: "skipped";
+        };
         readonly growth: {
             readonly demoCard: {
                 readonly title: "See {{moduleName}} in action";
@@ -3855,6 +4173,51 @@ declare type ExtractVisualizationSettings<T> = T extends {
     };
 } ? S : never;
 
+export declare const F0ActionBar: WithDataTestIdReturnType_3<ForwardRefExoticComponent<F0ActionBarProps & RefAttributes<F0ActionBarRef>>>;
+
+declare interface F0ActionBarProps {
+    /**
+     * Whether the action bar is open
+     */
+    isOpen: boolean;
+    /**
+     * The primary action
+     */
+    primaryActions?: ActionBarItem[] | ActionBarGroup[] | ActionBarGroup;
+    /**
+     * The secondary actions
+     */
+    secondaryActions?: ActionBarItem[];
+    /**
+     * The label of the action bar
+     */
+    label?: string;
+    /**
+     * Visual variant of the action bar
+     * - "dark": Dark background with light text (default)
+     * - "light": Light background with dark text
+     * @default "dark"
+     */
+    variant?: "dark" | "light";
+    /**
+     * Custom content to render on the left side (e.g., error navigation)
+     */
+    leftContent?: React.ReactNode;
+    /**
+     * The current status of the action bar.
+     * - "idle": Default state, shows an alert icon (pending changes)
+     * - "loading": Shows a spinner and disables all actions
+     * - "success": Shows a checkmark icon and disables all actions
+     * - "error": Shows an error icon with persistent error styling
+     * @default "idle"
+     */
+    status?: ActionBarStatus;
+}
+
+export declare interface F0ActionBarRef {
+    wiggle: (options?: WiggleOptions) => void;
+}
+
 export declare const F0ActionItem: ({ title, status, inGroup }: F0ActionItemProps) => JSX_2.Element;
 
 /**
@@ -4835,11 +5198,16 @@ declare type F0CustomFieldConfigWithConfig<TValue = unknown, TConfig = unknown>
     fieldType: "custom";
 };
 
+/**
+ * @experimental This is an experimental component use it at your own risk
+ */
+export declare const F0DataChart: (props: F0DataChartProps_2) => JSX_2.Element;
+
 /**
  * A single data point in a bar chart series.
  * Can be a simple number or an object with value and optional target.
  */
-declare type F0DataChartBarDataPoint = number | {
+export declare type F0DataChartBarDataPoint = number | {
     value: number;
     /** When set, renders a gradient fade from the bar top up to the target value */
     target?: number;
@@ -4847,10 +5215,24 @@ declare type F0DataChartBarDataPoint = number | {
     color?: ChartColorToken;
 };
 
+/**
+ * Bar chart variant props.
+ */
+export declare interface F0DataChartBarProps extends F0DataChartBaseProps {
+    /** Chart type */
+    type: "bar";
+    /** One or more data series to render as bars */
+    series: F0DataChartBarSeries[];
+    /** Bar orientation. @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** Stack all series into a single bar per category. @default false */
+    stacked?: boolean;
+}
+
 /**
  * A series of bars to render in the chart.
  */
-declare interface F0DataChartBarSeries {
+export declare interface F0DataChartBarSeries {
     /** Display name used in legend and tooltip */
     name: string;
     /** Data points — one per category */
@@ -4859,11 +5241,28 @@ declare interface F0DataChartBarSeries {
     color?: ChartColorToken;
 }
 
+declare interface F0DataChartBaseProps {
+    /** Labels for the category axis (one per data point) */
+    categories: string[];
+    /** Show the legend below the chart. @default true */
+    showLegend?: boolean;
+    /** Show the background grid lines. @default true */
+    showGrid?: boolean;
+    /** Show value labels on each data point. @default false */
+    showLabels?: boolean;
+    /** Format the value axis tick labels (e.g. `(v) => \`${v}M\`` ) */
+    valueFormatter?: (value: number) => string;
+    /** Format category axis tick labels */
+    categoryFormatter?: (value: string) => string;
+    /** Escape hatch: raw ECharts options merged (shallow) on top of the generated config */
+    echartsOptions?: Partial<echarts_2.EChartsOption>;
+}
+
 /**
  * A single data point in a funnel chart series.
  * Each point has a value and a stage name.
  */
-declare interface F0DataChartFunnelDataPoint {
+export declare interface F0DataChartFunnelDataPoint {
     /** Numeric value for this funnel stage */
     value: number;
     /** Stage label (e.g. "Applied", "Phone Screen", "Hired") */
@@ -4872,10 +5271,49 @@ declare interface F0DataChartFunnelDataPoint {
     color?: ChartColorToken;
 }
 
+/**
+ * Funnel chart variant props.
+ *
+ * Funnels do NOT use category/value axes — stage names come from the data
+ * points themselves. This interface is separate from `F0DataChartBaseProps`.
+ */
+export declare interface F0DataChartFunnelProps {
+    /** Chart type */
+    type: "funnel";
+    /** The funnel series to render */
+    series: F0DataChartFunnelSeries;
+    /** Sort direction of funnel stages. @default "descending" */
+    sort?: "descending" | "ascending" | "none";
+    /** Gap between funnel stages in pixels. @default 0 */
+    gap?: number;
+    /** Funnel orientation. @default "horizontal" */
+    orient?: "horizontal" | "vertical";
+    /** Show the legend below the chart. @default false */
+    showLegend?: boolean;
+    /** Show value labels on each stage. @default true */
+    showLabels?: boolean;
+    /**
+     * Show conversion percentages in labels.
+     * Each stage displays its value as a percentage of the first stage.
+     * The tooltip also shows step-over-step conversion.
+     * @default false
+     */
+    showConversion?: boolean;
+    /** Format the value displayed in labels and tooltip */
+    valueFormatter?: (value: number) => string;
+    /**
+     * Map stage colors to their values using a gradient scale (light→dark).
+     * When enabled, higher values get a more intense color. @default true
+     */
+    colorScale?: boolean;
+    /** Escape hatch: raw ECharts options merged (shallow) on top of the generated config */
+    echartsOptions?: Partial<echarts_2.EChartsOption>;
+}
+
 /**
  * A single funnel series with named data points.
  */
-declare interface F0DataChartFunnelSeries {
+export declare interface F0DataChartFunnelSeries {
     /** Display name used in legend and tooltip */
     name: string;
     /** Data points — one per funnel stage */
@@ -4884,18 +5322,90 @@ declare interface F0DataChartFunnelSeries {
     color?: ChartColorToken;
 }
 
+/**
+ * Gauge/KPI chart variant props.
+ *
+ * A single-value gauge indicator — no axes, no legend.
+ */
+export declare interface F0DataChartGaugeProps {
+    /** Chart type */
+    type: "gauge";
+    /** Current value */
+    value: number;
+    /** Minimum value. @default 0 */
+    min?: number;
+    /** Maximum value. @default 100 */
+    max?: number;
+    /** Label shown below the value */
+    name?: string;
+    /** Override color. Must be an F0 design token name. */
+    color?: ChartColorToken;
+    /** Show the numeric value in the center. @default true */
+    showValue?: boolean;
+    /** Format the value displayed */
+    valueFormatter?: (value: number) => string;
+    /** Escape hatch: raw ECharts options merged (shallow) on top of the generated config */
+    echartsOptions?: Partial<echarts_2.EChartsOption>;
+}
+
+/**
+ * Heatmap chart variant props.
+ *
+ * Renders a grid where each cell's color intensity represents a numeric value.
+ * Uses two category axes (x for columns, y for rows) and a visualMap for
+ * value→color mapping.
+ */
+export declare interface F0DataChartHeatmapProps {
+    /** Chart type */
+    type: "heatmap";
+    /** Column labels (x-axis) */
+    xCategories: string[];
+    /** Row labels (y-axis) */
+    yCategories: string[];
+    /** Data as [xIndex, yIndex, value] tuples */
+    data: [number, number, number][];
+    /** Minimum value for color scale. @default auto from data */
+    min?: number;
+    /** Maximum value for color scale. @default auto from data */
+    max?: number;
+    /** Show value labels inside cells. @default false */
+    showLabels?: boolean;
+    /** Show the visual map (color scale legend). @default false */
+    showVisualMap?: boolean;
+    /** Format values in labels and tooltip */
+    valueFormatter?: (value: number) => string;
+    /** Escape hatch: raw ECharts options merged (shallow) on top of the generated config */
+    echartsOptions?: Partial<echarts_2.EChartsOption>;
+}
+
 /**
  * A single data point in a line chart series.
  * Can be a simple number or an object with a value.
  */
-declare type F0DataChartLineDataPoint = number | {
+export declare type F0DataChartLineDataPoint = number | {
     value: number;
 };
 
+/**
+ * Line chart variant props.
+ */
+export declare interface F0DataChartLineProps extends F0DataChartBaseProps {
+    /** Chart type */
+    type: "line";
+    /** One or more data series to render as lines */
+    series: F0DataChartLineSeries[];
+    /** Line interpolation type. @default "linear" */
+    lineType?: F0DataChartLineType;
+    /** Show gradient area fill below lines. @default true */
+    showArea?: boolean;
+    /** Show data point dots on the lines. @default false */
+    showDots?: boolean;
+}
+
 /**
  * A series of data points to render as a line.
  */
-declare interface F0DataChartLineSeries {
+export declare interface F0DataChartLineSeries {
     /** Display name used in legend and tooltip */
     name: string;
     /** Data points — one per category */
@@ -4911,12 +5421,12 @@ declare interface F0DataChartLineSeries {
 }
 
 /** Line interpolation type */
-declare type F0DataChartLineType = "linear" | "smooth" | "step";
+export declare type F0DataChartLineType = "linear" | "smooth" | "step";
 
 /**
  * A single data point in a pie chart.
  */
-declare interface F0DataChartPieDataPoint {
+export declare interface F0DataChartPieDataPoint {
     /** Numeric value for this segment */
     value: number;
     /** Segment label */
@@ -4925,10 +5435,35 @@ declare interface F0DataChartPieDataPoint {
     color?: ChartColorToken;
 }
 
+/**
+ * Pie/donut chart variant props.
+ *
+ * Pies do NOT use category/value axes — segment names come from the data
+ * points themselves. This interface is separate from `F0DataChartBaseProps`.
+ */
+export declare interface F0DataChartPieProps {
+    /** Chart type */
+    type: "pie";
+    /** The pie series to render */
+    series: F0DataChartPieSeries;
+    /** Inner radius percentage. 0 = pie, >0 = donut. @default 0 */
+    innerRadius?: number;
+    /** Show the legend below the chart. @default true */
+    showLegend?: boolean;
+    /** Show value labels on each segment. @default true */
+    showLabels?: boolean;
+    /** Show percentage in labels. @default false */
+    showPercentage?: boolean;
+    /** Format the value displayed in labels and tooltip */
+    valueFormatter?: (value: number) => string;
+    /** Escape hatch: raw ECharts options merged (shallow) on top of the generated config */
+    echartsOptions?: Partial<echarts_2.EChartsOption>;
+}
+
 /**
  * A single pie series with named data points.
  */
-declare interface F0DataChartPieSeries {
+export declare interface F0DataChartPieSeries {
     /** Display name used in tooltip */
     name: string;
     /** Data points — one per pie segment */
@@ -4937,20 +5472,52 @@ declare interface F0DataChartPieSeries {
     color?: ChartColorToken;
 }
 
+/**
+ * Props for the F0DataChart component.
+ *
+ * A unified chart component that supports bar, line, funnel, pie, radar,
+ * gauge, and heatmap chart types via a discriminated `type` prop.
+ */
+export declare type F0DataChartProps = F0DataChartBarProps | F0DataChartLineProps | F0DataChartFunnelProps | F0DataChartPieProps | F0DataChartRadarProps | F0DataChartGaugeProps | F0DataChartHeatmapProps;
+
 /**
  * A radar chart indicator (axis/dimension).
  */
-declare interface F0DataChartRadarIndicator {
+export declare interface F0DataChartRadarIndicator {
     /** Name of the axis/dimension (e.g. "Performance", "Engagement") */
     name: string;
     /** Maximum value for this axis. @default auto-calculated from data */
     max?: number;
 }
 
+/**
+ * Radar chart variant props.
+ *
+ * Radar charts use a polar coordinate system — no cartesian axes.
+ */
+export declare interface F0DataChartRadarProps {
+    /** Chart type */
+    type: "radar";
+    /** Axes of the radar — defines the dimensions to compare */
+    indicators: F0DataChartRadarIndicator[];
+    /** Series to compare (one or more) */
+    series: F0DataChartRadarSeries[];
+    /** Fill the area of each series with semi-transparent color. @default true */
+    showArea?: boolean;
+    /** Show the legend below the chart. @default true */
+    showLegend?: boolean;
+    /** Show value labels on each vertex. @default false */
+    showLabels?: boolean;
+    /** Format values in labels and tooltip */
+    valueFormatter?: (value: number) => string;
+    /** Escape hatch: raw ECharts options merged (shallow) on top of the generated config */
+    echartsOptions?: Partial<echarts_2.EChartsOption>;
+}
+
 /**
  * A series of data points for a radar chart.
  */
-declare interface F0DataChartRadarSeries {
+export declare interface F0DataChartRadarSeries {
     /** Display name used in legend and tooltip (e.g. "Team A", "Team B") */
     name: string;
     /** Values — one per indicator, in the same order */
@@ -7140,6 +7707,26 @@ export declare interface FunnelChartConfig {
     valueFormatter?: (value: number) => string;
 }
 
+/**
+ * Skeleton for funnel chart content area.
+ *
+ * - `orient: "horizontal"` (default): left-to-right trapezoids with
+ *   decreasing heights, centered vertically.
+ * - `orient: "vertical"`: top-to-bottom trapezoids with decreasing widths,
+ *   centered horizontally.
+ * - `sort: "ascending"`: reverses stage order (smallest first).
+ */
+export declare function FunnelChartSkeleton({ orient, sort, showLegend, }?: FunnelChartSkeletonProps): JSX_2.Element;
+
+declare interface FunnelChartSkeletonProps {
+    /** Funnel orientation. @default "horizontal" */
+    orient?: "horizontal" | "vertical";
+    /** Sort direction. @default "descending" */
+    sort?: "descending" | "ascending" | "none";
+    /** Show legend below chart. @default true */
+    showLegend?: boolean;
+}
+
 /**
  * Gap tokens for spacing between flex/grid children.
  * Uses betweenSpacing (rem) for sm–xl, absoluteSpacing (px) for extended sizes.
@@ -7173,6 +7760,14 @@ export declare interface GaugeChartConfig {
     valueFormatter?: (value: number) => string;
 }
 
+/**
+ * Skeleton for gauge chart content area.
+ *
+ * Renders a 270° arc with rounded caps and a large value placeholder,
+ * matching the real gauge component style (width 18, roundCap, centered value).
+ */
+export declare function GaugeChartSkeleton(): JSX_2.Element;
+
 declare interface GaugeComputation {
     datasetId: string;
     aggregation: AggregationType;
@@ -7407,6 +8002,14 @@ export declare interface HeatmapChartConfig {
     valueFormatter?: (value: number) => string;
 }
 
+/**
+ * Skeleton for heatmap chart content area.
+ *
+ * Renders a 5×4 grid of rectangles with varied opacities to simulate
+ * heatmap data, plus placeholder axis labels.
+ */
+export declare function HeatmapChartSkeleton(): JSX_2.Element;
+
 declare interface HeatmapComputation {
     datasetId: string;
     xAxis: string;
@@ -7833,6 +8436,27 @@ export declare interface LineChartConfig extends ChartConfigBase {
     showDots?: boolean;
 }
 
+/**
+ * Skeleton for line chart content area.
+ *
+ * - `lineType`: controls the SVG path shape (smooth curves, straight lines, or steps).
+ * - `showArea: true` (default): gradient fill below the line.
+ * - `showArea: false`: line only, no fill.
+ * - `showDots: true`: SVG circles at each data point.
+ */
+export declare function LineChartSkeleton({ lineType, showArea, showDots, showLegend, }?: LineChartSkeletonProps): JSX_2.Element;
+
+declare interface LineChartSkeletonProps {
+    /** Line interpolation type. @default "linear" */
+    lineType?: "linear" | "smooth" | "step";
+    /** Show gradient area fill below line. @default true */
+    showArea?: boolean;
+    /** Show data point dots on the line. @default false */
+    showDots?: boolean;
+    /** Show legend below chart. @default true */
+    showLegend?: boolean;
+}
+
 declare type LinkContextValue = {
     currentPath?: string;
     component?: (props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) => JSX.Element;
@@ -8676,6 +9300,21 @@ export declare interface PieChartConfig {
     valueFormatter?: (value: number) => string;
 }
 
+/**
+ * Skeleton for pie/donut chart content area.
+ *
+ * - `innerRadius: 0` (default): solid pie circle.
+ * - `innerRadius > 0`: donut with a hollow center.
+ */
+export declare function PieChartSkeleton({ showLegend, innerRadius, }?: PieChartSkeletonProps): JSX_2.Element;
+
+declare interface PieChartSkeletonProps {
+    /** Show legend below chart. @default true */
+    showLegend?: boolean;
+    /** Inner radius percentage. 0 = pie, >0 = donut. @default 0 */
+    innerRadius?: number;
+}
+
 declare interface PieComputation {
     datasetId: string;
     nameColumn: string;
@@ -8989,6 +9628,16 @@ declare type QuestionPropsToOmit = "onAction" | "onChange" | "onAddNewElement";
 
 export declare type QuestionType = "rating" | "select" | "multi-select" | "dropdown-single" | "dropdown-multi" | "text" | "longText" | "numeric" | "link" | "date" | "file" | "checkbox";
 
+export declare const RadarChart: <K extends ChartConfig_3>(props: RadarChartProps<K> & {
+    dataTestId?: string;
+} & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement | null;
+
+export declare const _RadarChart: <K extends ChartConfig_3>({ data, dataConfig, scaleMin, scaleMax, aspect, dataTestId, }: RadarChartProps<K> & {
+    dataTestId?: string;
+}, ref: ForwardedRef<HTMLDivElement>) => JSX_2.Element;
+
 export declare interface RadarChartConfig {
     type: "radar";
     /** Fill the radar area. @default true */
@@ -9001,6 +9650,26 @@ export declare interface RadarChartConfig {
     valueFormatter?: (value: number) => string;
 }
 
+export declare type RadarChartProps<K extends ChartConfig_3> = {
+    dataConfig: K;
+    data: ChartItem<K>[];
+    scaleMin?: number;
+    scaleMax?: number;
+    aspect?: ComponentProps<typeof ChartContainer>["aspect"];
+};
+
+/**
+ * Skeleton for radar chart content area.
+ *
+ * Renders a hexagonal shape with concentric rings and radial lines.
+ */
+export declare function RadarChartSkeleton({ showLegend, }?: RadarChartSkeletonProps): JSX_2.Element;
+
+declare interface RadarChartSkeletonProps {
+    /** Show legend below chart. @default true */
+    showLegend?: boolean;
+}
+
 declare interface RadarComputation {
     datasetId: string;
     seriesColumn: string;
@@ -10062,6 +10731,11 @@ declare const textVariants: (props?: ({
     className?: ClassValue;
 })) | undefined) => string;
 
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+
 export declare type TimelineRowStatus = (typeof timelineRowStatuses)[number];
 
 export declare const timelineRowStatuses: readonly ["completed", "in-progress", "not-started"];
@@ -10827,6 +11501,16 @@ declare type ValueDisplayVisualizationType = "table" | "card" | "list" | (string
 
 export declare type Variant = (typeof statuses)[number];
 
+declare const variants: (props?: ({
+    aspect?: "small" | "square" | "wide" | undefined;
+} & ({
+    class?: ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: ClassValue;
+})) | undefined) => string;
+
 export declare const VerticalBarChart: WithDataTestIdReturnType_5<ForwardRefExoticComponent<Omit<ChartPropsBase<ChartConfig_2> & {
 label?: boolean;
 showRatio?: boolean;
@@ -10874,6 +11558,10 @@ export declare type WelcomeScreenSuggestion = {
     prompt?: string;
 };
 
+declare interface WiggleOptions {
+    errorHighlight?: boolean;
+}
+
 export declare const withDataTestId: <T extends default_2.ComponentType<any>>(component: T) => WithDataTestIdReturnType<T>;
 
 export declare type WithDataTestIdProps = {
@@ -10970,6 +11658,11 @@ declare module "gridstack" {
 }
 
 
+declare namespace Calendar {
+    var displayName: string;
+}
+
+
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         aiBlock: {
@@ -11017,8 +11710,3 @@ declare module "@tiptap/core" {
         };
     }
 }
-
-
-declare namespace Calendar {
-    var displayName: string;
-}