@carto/ps-react-ui 4.2.7 → 5.0.0-widgets.1

package/dist/types/widgets/_shared/chart-config/option-builders.d.ts

@@ -0,0 +1,34 @@
+import { Theme } from '@mui/material';
+import { LegendComponentOption } from 'echarts';
+/**
+ * Shared EChart configuration builders for chart widgets
+ */
+/**
+ * Builds standard legend configuration for chart widgets
+ *
+ * @param hasLegend - Whether to show the legend
+ * @returns Legend configuration object
+ */
+export declare function buildLegendConfig(hasLegend: boolean): LegendComponentOption;
+/**
+ * Builds standard grid configuration with legend-aware spacing
+ *
+ * @param hasLegend - Whether the chart has a legend
+ * @param theme - MUI theme for spacing
+ * @param additionalConfig - Additional grid configuration to merge
+ * @returns Grid configuration object
+ */
+export declare function buildGridConfig(hasLegend: boolean, theme: Theme): {
+    bottom?: number | undefined;
+};
+/**
+ * Creates a tooltip position calculator that handles overflow
+ * Used by bar, histogram, and scatterplot widgets
+ *
+ * @param theme - MUI theme for spacing
+ * @returns Tooltip position function
+ */
+export declare function createTooltipPositioner(theme: Theme): (point: [number, number], _params: unknown, _dom: unknown, _rect: unknown, size: {
+    contentSize: [number, number];
+    viewSize: [number, number];
+}) => Record<string, number>;

package/dist/types/widgets/_shared/skeleton/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Shared skeleton styles for chart widgets
+ */
+export { baseSkeletonStyles } from './styles';

package/dist/types/widgets/_shared/skeleton/styles.d.ts

@@ -0,0 +1,19 @@
+import { Theme } from '@mui/material';
+/**
+ * Base skeleton styles shared across all chart widgets
+ */
+export declare const baseSkeletonStyles: {
+    readonly graph: {
+        /**
+         * Common container style for chart widget skeletons
+         */
+        readonly container: {
+            readonly display: "flex";
+            readonly alignItems: "center";
+            readonly justifyContent: "space-between";
+            readonly flexDirection: "column";
+            readonly gap: ({ spacing }: Theme) => string;
+            readonly height: ({ spacing }: Theme) => string;
+        };
+    };
+};

package/dist/types/widgets/actions/change-column/change-column-icon.d.ts

@@ -0,0 +1 @@
+export declare const ChangeColumnIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/change-column/change-column.d.ts

@@ -0,0 +1,16 @@
+import { ChangeColumnProps } from './types';
+/**
+ * Widget action to reorder columns in a table widget via drag-and-drop.
+ *
+ * This action reads the columns from the widget store and allows users to
+ * drag and drop columns to reorder them. All columns are displayed and
+ * can be reordered.
+ *
+ * Returns null if there are fewer than 2 columns.
+ *
+ * @example
+ * ```tsx
+ * <ChangeColumn id="my-table-widget" />
+ * ```
+ */
+export declare function ChangeColumn({ id, labels, Icon, IconButtonProps, MenuProps, }: ChangeColumnProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets/actions/change-column/sortable-column-item.d.ts

@@ -0,0 +1,9 @@
+import { TableColumn } from '../../table/types';
+export interface SortableColumnItemProps {
+    column: TableColumn;
+}
+/**
+ * A draggable menu item for column reordering.
+ * Uses @dnd-kit/sortable for drag-and-drop functionality.
+ */
+export declare function SortableColumnItem({ column }: SortableColumnItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/change-column/types.d.ts

@@ -0,0 +1,19 @@
+import { IconButtonProps, MenuProps } from '@mui/material';
+import { ReactNode } from 'react';
+export interface ChangeColumnProps {
+    /** Widget ID to update column configuration in the widget store */
+    id: string;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip label */
+        tooltip?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Props passed to the Menu component */
+    MenuProps?: Partial<MenuProps>;
+    /** Custom icon to display */
+    Icon?: ReactNode;
+}

package/dist/types/widgets/actions/download/download.d.ts

@@ -0,0 +1,2 @@
+import { DownloadProps } from './types';
+export declare function Download({ id, items, labels, Icon, IconButtonProps, }: DownloadProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/download/exports.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'react';
+import { DownloadItem } from './types';
+export declare const downloadToCSV: DownloadItem<unknown[][]>;
+export declare const downloadToPNG: Omit<DownloadItem, 'modifier'> & {
+    modifier: (ref: Ref<HTMLElement | null> | undefined) => Promise<string | undefined>;
+};

package/dist/types/widgets/actions/download/types.d.ts

@@ -0,0 +1,21 @@
+import { JSX, ReactNode } from 'react';
+import { IconButtonProps } from '@mui/material';
+import { WidgetState } from '../../stores/types';
+export interface DownloadItem<D = unknown> {
+    id: string;
+    label: string;
+    icon?: JSX.Element;
+    disabled?: boolean;
+    filename?: string;
+    modifier: (data: D) => Promise<string | undefined>;
+    callback?: (data: string) => void;
+}
+export interface DownloadProps {
+    id: WidgetState['id'];
+    items: DownloadItem[];
+    labels?: {
+        ariaLabel?: string;
+    };
+    IconButtonProps?: IconButtonProps;
+    Icon?: ReactNode;
+}

package/dist/types/widgets/actions/fullscreen/fullscreen.d.ts

@@ -0,0 +1,2 @@
+import { FullScreenProps } from './types';
+export declare function FullScreen({ id, labels, children, Icon, IconButtonProps, DialogContentProps: { sx, ...DialogContentProps }, }: FullScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/fullscreen/styles.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    title: {
+        container: {
+            display: "flex";
+            alignItems: "center";
+            justifyContent: "space-between";
+            gap: number;
+        };
+    };
+    content: {
+        display: "flex";
+        flexDirection: "column";
+        gap: ({ spacing }: Theme) => string;
+    };
+};

package/dist/types/widgets/actions/fullscreen/types.d.ts

@@ -0,0 +1,20 @@
+import { DialogContentProps, IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { BaseWidgetState } from '../../../widgets/stores/types';
+export type FullScreenState<T = unknown> = BaseWidgetState<T & FullScreenConfigProps & {
+    title: string;
+}>;
+export interface FullScreenConfig {
+    isFullScreen?: boolean;
+}
+export type FullScreenConfigProps = FullScreenConfig;
+export interface FullScreenProps {
+    id: FullScreenState['id'];
+    labels?: {
+        ariaLabel?: string;
+    };
+    children: ReactNode;
+    DialogContentProps?: DialogContentProps;
+    IconButtonProps?: IconButtonProps;
+    Icon?: ReactNode;
+}

package/dist/types/widgets/actions/index.d.ts

@@ -0,0 +1,18 @@
+export { FullScreen } from './fullscreen/fullscreen';
+export type { FullScreenState, FullScreenConfig } from './fullscreen/types';
+export { Download } from './download/download';
+export type { DownloadItem, DownloadProps } from './download/types';
+export { downloadToCSV, downloadToPNG } from './download/exports';
+export { RelativeData, RELATIVE_DATA_TOOL_ID, } from './relative-data/relative-data';
+export type { RelativeDataProps } from './relative-data/types';
+export { ZoomToggle } from './zoom-toggle/zoom-toggle';
+export type { ZoomToggleProps, ZoomState, ZoomConfig, } from './zoom-toggle/types';
+export { StackToggle } from './stack-toggle/stack-toggle';
+export type { StackToggleProps, StackToggleState } from './stack-toggle/types';
+export { Searcher, SEARCHER_TOOL_ID } from './searcher/searcher';
+export { SearcherToggle } from './searcher/searcher-toggle';
+export type { SearcherToggleProps, SearcherProps, SearcherFilterFn, SearcherState, } from './searcher/types';
+export { ChangeColumn } from './change-column/change-column';
+export type { ChangeColumnProps } from './change-column/types';
+export { LockSelection, LOCK_SELECTION_TOOL_ID, } from './lock-selection/lock-selection';
+export type { LockSelectionProps, LockSelectionState, } from './lock-selection/types';

package/dist/types/widgets/actions/lock-selection/lock-selection.d.ts

@@ -0,0 +1,19 @@
+import { LockSelectionProps } from './types';
+export declare const LOCK_SELECTION_TOOL_ID = "lock-selection";
+/**
+ * Widget action button to lock the current selection.
+ *
+ * When locked, the widget data is filtered to only show the selected items.
+ * The button is only visible when there are selected items.
+ * Registers a transformation tool in the widget pipeline when mounted.
+ *
+ * @example
+ * ```tsx
+ * <LockSelection
+ *   id="my-widget"
+ *   order={30}
+ *   selectedItems={selectedItems}
+ * />
+ * ```
+ */
+export declare function LockSelection({ id, selectedItems, order, labels, Icon, IconButtonProps, }: LockSelectionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets/actions/lock-selection/types.d.ts

@@ -0,0 +1,38 @@
+import { IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { BaseWidgetState } from '../../stores/types';
+/**
+ * Lock selection specific state properties.
+ */
+export interface LockSelectionStateProps {
+    /** Whether the selection is currently locked */
+    isLocked?: boolean;
+    /** The items that are locked (by name) */
+    lockedItems?: string[];
+}
+/**
+ * Widget state extension for lock selection functionality.
+ * Extends the base widget state with lock-specific properties.
+ */
+export type LockSelectionState<T = object> = BaseWidgetState<T & LockSelectionStateProps>;
+export interface LockSelectionProps {
+    /** Widget ID to store lock selection state */
+    id: string;
+    /** Currently selected items (by name) */
+    selectedItems: string[];
+    /** Execution order in the tool pipeline. Lower values execute first. Defaults to 30. */
+    order?: number;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when unlocked (button will lock selection) */
+        lock?: string;
+        /** Tooltip when locked (button will unlock selection) */
+        unlock?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display */
+    Icon?: ReactNode;
+}

package/dist/types/widgets/actions/relative-data/relative-data.d.ts

@@ -0,0 +1,18 @@
+import { RelativeDataProps } from './types';
+export declare const RELATIVE_DATA_TOOL_ID = "relative-data";
+/**
+ * Widget action to toggle between relative (percentage) and absolute data display.
+ *
+ * Registers a transformation tool in the widget pipeline when mounted.
+ * When relative mode is active, transforms data to percentages via the pipeline.
+ *
+ * @example
+ * ```tsx
+ * <RelativeData
+ *   id="my-widget"
+ *   order={20}
+ *   defaultIsRelative={false}
+ * />
+ * ```
+ */
+export declare function RelativeData({ id, order, defaultIsRelative, labels, Icon, IconButtonProps, }: RelativeDataProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/relative-data/style.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    trigger: {
+        '&[data-active="true"]': {
+            background: (theme: Theme) => string;
+        };
+    };
+};

package/dist/types/widgets/actions/relative-data/types.d.ts

@@ -0,0 +1,27 @@
+import { IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { BaseWidgetState } from '../../stores/types';
+export interface RelativeDataProps {
+    /** Widget ID to update data in the widget store */
+    id: string;
+    /** Execution order in the tool pipeline. Lower values execute first. Defaults to 20. */
+    order?: number;
+    /** Initial toggle state - when true, shows relative (percentage) values */
+    defaultIsRelative?: boolean;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when showing absolute values (button will switch to relative) */
+        relative?: string;
+        /** Tooltip when showing relative values (button will switch to absolute) */
+        absolute?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display */
+    Icon?: ReactNode;
+}
+export type RelativeDataState<T = unknown> = BaseWidgetState<T & {
+    isRelative?: boolean;
+}>;

package/dist/types/widgets/actions/relative-data/utils.d.ts

@@ -0,0 +1,9 @@
+import { EchartWidgetData } from '../../echart/types';
+/**
+ * Calculates the sum of all numeric values in the data
+ */
+export declare function calculateTotal(data: EchartWidgetData): number;
+/**
+ * Transforms data to relative (percentage) values
+ */
+export declare function toRelativeData(data: EchartWidgetData, total: number): EchartWidgetData;

package/dist/types/widgets/actions/relative-data/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/widgets/actions/searcher/searcher-toggle.d.ts

@@ -0,0 +1,18 @@
+import { SearcherToggleProps } from './types';
+/**
+ * Widget action button to toggle search functionality.
+ *
+ * Stores the enabled state in the widget store using the provided id.
+ * When search is active, the button shows an active state with a light background.
+ * Use in conjunction with the Searcher component to display the search input.
+ *
+ * @example
+ * ```tsx
+ * <SearcherToggle id="my-widget" />
+ * <Searcher
+ *   id="my-widget"
+ *   data={widgetData}
+ * />
+ * ```
+ */
+export declare function SearcherToggle({ id, defaultEnabled, labels, Icon, IconButtonProps, }: SearcherToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/searcher/searcher.d.ts

@@ -0,0 +1,21 @@
+import { SearcherProps } from './types';
+export declare const SEARCHER_TOOL_ID = "searcher";
+/**
+ * Search input component that works with SearcherToggle.
+ *
+ * Registers a transformation tool in the widget pipeline when mounted.
+ * Reads the enabled state from the widget store using the provided id.
+ * Uses a debounced search to filter data via the transformation pipeline.
+ * Auto-focuses when enabled becomes true.
+ *
+ * @example
+ * ```tsx
+ * <SearcherToggle id="my-widget" />
+ * <Searcher
+ *   id="my-widget"
+ *   order={10}
+ *   labels={{ placeholder: 'Search categories...' }}
+ * />
+ * ```
+ */
+export declare function Searcher({ id, filterFn, order, labels, TextFieldProps, ClearIcon, }: SearcherProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets/actions/searcher/types.d.ts

@@ -0,0 +1,62 @@
+import { IconButtonProps, TextFieldProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { EchartWidgetData } from '../../echart/types';
+import { BaseWidgetState } from '../../stores/types';
+/**
+ * Filter function type for custom search filtering logic.
+ * Receives the original data and search text, returns filtered data.
+ * Can be synchronous or asynchronous to support remote filtering.
+ */
+export type SearcherFilterFn = (data: EchartWidgetData, searchText: string) => Promise<EchartWidgetData> | EchartWidgetData;
+/**
+ * Searcher-specific state properties.
+ */
+export interface SearcherStateProps {
+    /** Whether search is currently enabled */
+    isSearchEnabled?: boolean;
+    /** Current search text */
+    searchText?: string;
+}
+/**
+ * Widget state extension for searcher functionality.
+ * Extends the base widget state with search-specific properties.
+ */
+export type SearcherState<T = object> = BaseWidgetState<T & SearcherStateProps>;
+export interface SearcherToggleProps {
+    /** Widget ID to store search enabled state */
+    id: string;
+    /** Initial search enabled state. Defaults to false */
+    defaultEnabled?: boolean;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when search is disabled (button will enable search) */
+        enable?: string;
+        /** Tooltip when search is enabled (button will disable search) */
+        disable?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display */
+    Icon?: ReactNode;
+}
+export interface SearcherProps {
+    /** Widget ID to update filtered data in the widget store */
+    id: string;
+    /** Custom filter function. Defaults to case-insensitive search across all string fields */
+    filterFn?: SearcherFilterFn;
+    /** Execution order in the tool pipeline. Lower values execute first. Defaults to 10. */
+    order?: number;
+    /** Custom labels for the searcher input */
+    labels?: {
+        /** Placeholder text for the input */
+        placeholder?: string;
+        /** Accessibility label for clear button */
+        clearAriaLabel?: string;
+    };
+    /** Props passed to the TextField component */
+    TextFieldProps?: Omit<TextFieldProps, 'value' | 'onChange' | 'size'>;
+    /** Custom icon for clear button */
+    ClearIcon?: ReactNode;
+}

package/dist/types/widgets/actions/shared/styles.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@mui/material';
+/**
+ * Shared styles for widget action buttons
+ */
+export declare const actionButtonStyles: {
+    trigger: {
+        '&[data-active="true"]': {
+            background: (theme: Theme) => string;
+        };
+    };
+};

package/dist/types/widgets/actions/stack-toggle/grouped-bar-chart-icon.d.ts

@@ -0,0 +1 @@
+export declare const GroupedBarChartIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/stack-toggle/stack-toggle.d.ts

@@ -0,0 +1,16 @@
+import { StackToggleProps } from './types';
+/**
+ * Widget action to toggle stacking behavior in ECharts bar and histogram widgets.
+ *
+ * Stores the stack state in the widget store and updates the ECharts option
+ * using getEChartStackConfig to apply stacking to all series.
+ *
+ * @example
+ * ```tsx
+ * <StackToggle
+ *   id="my-widget"
+ *   defaultIsStacked={false}
+ * />
+ * ```
+ */
+export declare function StackToggle({ id, defaultIsStacked, labels, Icon, IconButtonProps, }: StackToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/stack-toggle/types.d.ts

@@ -0,0 +1,25 @@
+import { IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { BaseWidgetState } from '../../stores/types';
+export interface StackToggleProps {
+    /** Widget ID to update stack configuration in the widget store */
+    id: string;
+    /** Initial toggle state - when true, starts with stacking enabled */
+    defaultIsStacked?: boolean;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when stacking is disabled (button will enable stacking) */
+        stacked?: string;
+        /** Tooltip when stacking is enabled (button will disable stacking) */
+        unstacked?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display */
+    Icon?: ReactNode;
+}
+export type StackToggleState<T = unknown> = BaseWidgetState<T & {
+    isStacked?: boolean;
+}>;

package/dist/types/widgets/actions/zoom-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { ZoomToggle } from './zoom-toggle';
+export type { ZoomToggleProps, ZoomState, ZoomConfig } from './types';

package/dist/types/widgets/actions/zoom-toggle/style.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    container: {
+        display: "flex";
+        alignItems: "center";
+        gap: ({ spacing }: Theme) => string;
+    };
+    trigger: {
+        '&[data-active="true"]': {
+            background: (theme: Theme) => string;
+        };
+    };
+};

package/dist/types/widgets/actions/zoom-toggle/types.d.ts

@@ -0,0 +1,41 @@
+import { IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { BaseWidgetState } from '../../stores/types';
+/**
+ * State stored in widget store for zoom functionality
+ */
+export interface ZoomConfig {
+    zoom?: boolean;
+    /** Start percentage for zoom range (0-100) */
+    zoomStart?: number;
+    /** End percentage for zoom range (0-100) */
+    zoomEnd?: number;
+}
+export type ZoomState<T = unknown> = BaseWidgetState<T & ZoomConfig>;
+export interface ZoomToggleProps {
+    /** Widget ID to update zoom state in the widget store */
+    id: string;
+    /** Initial zoom state - when true, zoom is enabled */
+    defaultZoom?: boolean;
+    /** Initial start percentage for zoom range (0-100) */
+    defaultZoomStart?: number;
+    /** Initial end percentage for zoom range (0-100) */
+    defaultZoomEnd?: number;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when zoom is disabled (button will enable zoom) */
+        enable?: string;
+        /** Tooltip when zoom is enabled (button will disable zoom) */
+        disable?: string;
+        /** Tooltip for reset button */
+        reset?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display for zoom toggle */
+    Icon?: ReactNode;
+    /** Custom icon to display for reset button */
+    ResetIcon?: ReactNode;
+}

package/dist/types/widgets/actions/zoom-toggle/zoom-toggle.d.ts

@@ -0,0 +1,18 @@
+import { ZoomToggleProps } from './types';
+/**
+ * Widget action to toggle EChart zoom functionality.
+ *
+ * When zoom is active, displays an inline reset button to disable zoom.
+ * Only intended for use in fullscreen ToolbarActions for bar and histogram widgets.
+ *
+ * @example
+ * ```tsx
+ * <ZoomToggle
+ *   id="my-widget"
+ *   defaultZoom={false}
+ *   zoomStart={0}
+ *   zoomEnd={100}
+ * />
+ * ```
+ */
+export declare function ZoomToggle({ id, defaultZoom, defaultZoomStart, defaultZoomEnd, labels, Icon, ResetIcon, IconButtonProps, }: ZoomToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/bar/config.d.ts

@@ -0,0 +1,5 @@
+import { BarConfig, BarWidgetConfig, BarWidgetData } from './types';
+import { DownloadItem } from '../actions';
+import { ConfigProps } from '../root/types';
+export declare function barDownloadConfig({ refUI, }: ConfigProps): DownloadItem<BarWidgetData>[];
+export declare function barConfig(props: BarConfig): BarWidgetConfig;

package/dist/types/widgets/bar/index.d.ts

@@ -0,0 +1,3 @@
+export { barConfig, barDownloadConfig } from './config';
+export { BarSkeleton } from './skeleton';
+export type { BarWidgetData, BarWidgetState, BarConfig, BarWidgetConfig, } from './types';

package/dist/types/widgets/bar/skeleton.d.ts

@@ -0,0 +1 @@
+export declare function BarSkeleton(): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/bar/style.d.ts

@@ -0,0 +1,37 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    skeleton: {
+        item: {
+            flex: number;
+            maxWidth: ({ spacing }: Theme) => string;
+            '& + &': {
+                marginLeft: ({ spacing }: Theme) => string;
+            };
+        };
+        graph: {
+            grid: {
+                display: "flex";
+                justifyContent: "space-between";
+                flex: "1 1 auto";
+                alignItems: "flex-end";
+                width: "100%";
+            };
+            container: {
+                readonly display: "flex";
+                readonly alignItems: "center";
+                readonly justifyContent: "space-between";
+                readonly flexDirection: "column";
+                readonly gap: ({ spacing }: Theme) => string;
+                readonly height: ({ spacing }: Theme) => string;
+            };
+        };
+        mask: {
+            gray: {
+                backgroundColor: ({ palette }: Theme) => string;
+            };
+            white: {
+                backgroundColor: ({ palette }: Theme) => string;
+            };
+        };
+    };
+};

package/dist/types/widgets/bar/types.d.ts

@@ -0,0 +1,9 @@
+import { EchartWidgetData, EchartWidgetState } from '../echart';
+import { EchartWidgetOptionProps, EchartWidgetProps } from '../echart/types';
+import { ConfigProps } from '../root';
+export type BarWidgetData = EchartWidgetData;
+export type BarWidgetState = EchartWidgetState;
+export type BarWidgetConfig = EchartWidgetProps & {
+    type: 'bar';
+};
+export type BarConfig = ConfigProps & EchartWidgetOptionProps<BarWidgetData>;