@carto/ps-react-ui 4.2.7 → 4.3.0

package/dist/styles-CCZnY17y.js

@@ -0,0 +1,117 @@
+function m(t) {
+  const e = [];
+  if (t.length > 0 && (t[0]?.length ?? 0) > 0) {
+    const n = t?.[0]?.[0] ?? {}, i = Object.keys(n);
+    e.push(i);
+  }
+  return t.forEach((n) => {
+    n.forEach((i) => {
+      const o = Object.values(i).map((r) => String(r));
+      e.push(o);
+    });
+  }), e;
+}
+function y(t) {
+  const e = [];
+  return e.push(["x", "y"]), t.forEach((n) => {
+    n.forEach((i) => {
+      e.push([String(i[0]), String(i[1])]);
+    });
+  }), e;
+}
+function F(t) {
+  return {
+    show: t,
+    icon: "circle",
+    left: 0,
+    bottom: 0,
+    orient: "horizontal",
+    type: "scroll"
+  };
+}
+function v(t, e) {
+  return {
+    ...!t && {
+      bottom: parseInt(e.spacing(3))
+    },
+    ...t && {
+      bottom: parseInt(e.spacing(7))
+    }
+  };
+}
+function x(t) {
+  return function(e, n, i, o, r) {
+    const l = {
+      top: parseInt(t.spacing(0.5))
+    };
+    return r.contentSize[0] < r.viewSize[0] - e[0] ? l.left = e[0] : l.right = r.viewSize[0] - e[0], l;
+  };
+}
+function u(t) {
+  if (t)
+    return (e) => t(e);
+}
+function b(t, e) {
+  let n = u(e);
+  const i = t && !Array.isArray(t), o = t;
+  return (!i || o.type !== "value") && (n = void 0), {
+    ...o,
+    axisLabel: {
+      ...typeof o.axisLabel == "object" && o.axisLabel ? o.axisLabel : {},
+      formatter: n
+    }
+  };
+}
+function d(t) {
+  return (e) => {
+    const n = Array.isArray(e) ? e : [e], i = (s, a) => `<div style="margin: 0px 0 0;line-height:1;">${s ? `<div style="font-size:11px;color:#FFFFFF;font-weight:400;line-height:1; margin-bottom: 10px">${s}</div>` : ""}<div style="margin: 0;line-height:1;">${a}</div><div style="clear:both"></div></div>`, o = n.map((s) => {
+      const {
+        name: a,
+        seriesName: c,
+        marker: f,
+        value: h
+      } = t(s, n);
+      return {
+        name: a,
+        seriesName: c,
+        marker: f,
+        value: h
+      };
+    }), r = o[0]?.name ?? "", p = r || n.length > 1 ? "margin: 10px 0 0;line-height:1;" : "margin: 0;line-height:1;", g = o.map(({
+      seriesName: s,
+      marker: a,
+      value: c
+    }) => `<div style="${p}"><div style="margin: 0px 0 0;line-height:1;">${a}${s ? `<span style="font-size:11px;color:#FFFFFF;font-weight:400;margin-left:2px;margin-right:10px">${s}</span>` : ""}<span style="float:right;margin-left:10px;font-size:11px;color:#FFFFFF;font-weight:900">${c}</span></div></div>`);
+    return i(r, g.join(""));
+  };
+}
+const w = {
+  graph: {
+    /**
+     * Common container style for chart widget skeletons
+     */
+    container: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexDirection: "column",
+      gap: ({
+        spacing: t
+      }) => t(1),
+      height: ({
+        spacing: t
+      }) => t(38)
+    }
+  }
+};
+export {
+  x as a,
+  b,
+  d as c,
+  v as d,
+  F as e,
+  m as f,
+  w as g,
+  y as s
+};
+//# sourceMappingURL=styles-CCZnY17y.js.map

package/dist/styles-CCZnY17y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-CCZnY17y.js","sources":["../src/widgets/_shared/chart-config/csv-modifiers.ts","../src/widgets/_shared/chart-config/option-builders.ts","../src/widgets/_shared/skeleton/styles.ts"],"sourcesContent":["/**\n * Shared CSV export modifiers for chart widgets\n */\n\n/**\n * Flattens object array data into CSV-ready rows.\n * Used by bar, pie, histogram, and timeseries widgets.\n *\n * @param data - Array of series, where each series is an array of data objects\n * @returns CSV rows with headers and values\n */\nexport function flattenObjectArrayToCSV<T extends Record<string, unknown>>(\n  data: T[][],\n): string[][] {\n  const rows: string[][] = []\n\n  // Add headers from first data point if available\n  if (data.length > 0 && (data[0]?.length ?? 0) > 0) {\n    const firstDataPoint = data?.[0]?.[0] ?? {}\n    const headers = Object.keys(firstDataPoint)\n    rows.push(headers)\n  }\n\n  // Add data rows from all series\n  data.forEach((series) => {\n    series.forEach((dataPoint) => {\n      const values = Object.values(dataPoint).map((v) => String(v))\n      rows.push(values)\n    })\n  })\n\n  return rows\n}\n\n/**\n * Creates CSV rows for scatterplot data.\n * Scatterplot uses array format [x, y] instead of objects.\n *\n * @param data - Array of series, where each series is an array of [x, y] tuples\n * @returns CSV rows with ['x', 'y'] headers\n */\nexport function scatterplotDataToCSV(data: number[][][]): string[][] {\n  const rows: string[][] = []\n\n  // Add headers\n  rows.push(['x', 'y'])\n\n  // Add data rows from all series\n  data.forEach((series) => {\n    series.forEach((dataPoint) => {\n      rows.push([String(dataPoint[0]), String(dataPoint[1])])\n    })\n  })\n\n  return rows\n}\n","import type { Theme } from '@mui/material'\nimport type { LegendComponentOption } from 'echarts'\nimport type {\n  CallbackDataParams,\n  TopLevelFormatterParams,\n} from 'node_modules/echarts/types/dist/shared'\n\n/**\n * Shared EChart configuration builders for chart widgets\n */\n\n/**\n * Builds standard legend configuration for chart widgets\n *\n * @param hasLegend - Whether to show the legend\n * @returns Legend configuration object\n */\nexport function buildLegendConfig(hasLegend: boolean): LegendComponentOption {\n  return {\n    show: hasLegend,\n    icon: 'circle' as const,\n    left: 0,\n    bottom: 0,\n    orient: 'horizontal',\n    type: 'scroll',\n  }\n}\n\n/**\n * Builds standard grid configuration with legend-aware spacing\n *\n * @param hasLegend - Whether the chart has a legend\n * @param theme - MUI theme for spacing\n * @param additionalConfig - Additional grid configuration to merge\n * @returns Grid configuration object\n */\nexport function buildGridConfig(hasLegend: boolean, theme: Theme) {\n  return {\n    ...(!hasLegend && { bottom: parseInt(theme.spacing(3)) }),\n    ...(hasLegend && { bottom: parseInt(theme.spacing(7)) }),\n  }\n}\n\n/**\n * Creates a tooltip position calculator that handles overflow\n * Used by bar, histogram, and scatterplot widgets\n *\n * @param theme - MUI theme for spacing\n * @returns Tooltip position function\n */\nexport function createTooltipPositioner(theme: Theme) {\n  return function (\n    point: [number, number],\n    _params: unknown,\n    _dom: unknown,\n    _rect: unknown,\n    size: { contentSize: [number, number]; viewSize: [number, number] },\n  ) {\n    const position = { top: parseInt(theme.spacing(0.5)) } as Record<\n      string,\n      number\n    >\n\n    // Position tooltip left or right based on available space\n    if (size.contentSize[0] < size.viewSize[0] - point[0]) {\n      position.left = point[0]\n    } else {\n      position.right = size.viewSize[0] - point[0]\n    }\n\n    return position\n  }\n}\n\n/**\n * Creates an axis label formatter for ECharts\n * Used to format numeric axis labels with a widget formatter\n *\n * @param formatter - Optional formatter function from widget config\n * @returns Axis label formatter function or undefined\n */\nexport function createAxisLabelFormatter(\n  formatter?: (value: number) => string,\n) {\n  if (!formatter) return undefined\n  return (value: number) => formatter(value)\n}\n\n/**\n * Applies formatter to xAxis configuration\n * Only applies to single axis objects (not arrays) with type 'value'\n *\n * @param xAxis - Existing xAxis configuration\n * @param formatter - Optional formatter function from widget config\n * @returns Updated xAxis configuration or undefined if no changes needed\n */\nexport function applyXAxisFormatter(\n  xAxis: unknown,\n  formatter?: (value: number) => string,\n) {\n  let axisFormatter = createAxisLabelFormatter(formatter)\n\n  const xAxisIsObject = xAxis && !Array.isArray(xAxis)\n  const xAxisTyped = xAxis as { type?: string; axisLabel?: unknown }\n\n  if (!xAxisIsObject || xAxisTyped.type !== 'value') {\n    axisFormatter = undefined\n  }\n\n  return {\n    ...xAxisTyped,\n    axisLabel: {\n      ...(typeof xAxisTyped.axisLabel === 'object' && xAxisTyped.axisLabel\n        ? xAxisTyped.axisLabel\n        : {}),\n      formatter: axisFormatter,\n    },\n  }\n}\n\n/**\n * Applies formatter to yAxis configuration\n * Only applies to single axis objects (not arrays) with type 'value'\n *\n * @param yAxis - Existing yAxis configuration\n * @param formatter - Optional formatter function from widget config\n * @returns Updated yAxis configuration or undefined if no changes needed\n */\nexport function applyYAxisFormatter(\n  yAxis: unknown,\n  formatter?: (value: number) => string,\n) {\n  let axisFormatter = createAxisLabelFormatter(formatter)\n\n  const yAxisIsObject = yAxis && !Array.isArray(yAxis)\n  const yAxisTyped = yAxis as { type?: string; axisLabel?: unknown }\n\n  if (!yAxisIsObject || yAxisTyped.type !== 'value') {\n    axisFormatter = undefined\n  }\n\n  return {\n    ...yAxisTyped,\n    axisLabel: {\n      ...(typeof yAxisTyped.axisLabel === 'object' && yAxisTyped.axisLabel\n        ? yAxisTyped.axisLabel\n        : {}),\n      formatter: axisFormatter,\n    },\n  }\n}\n\n/**\n * Creates a tooltip formatter for ECharts\n * Formats numeric values in tooltip using widget formatter\n * Handles both axis trigger (array) and item trigger (object) modes\n *\n * @param formatter - Optional formatter function from widget config\n * @returns Tooltip formatter function or undefined\n */\nexport function createTooltipFormatter(\n  callback: (\n    item: CallbackDataParams,\n    items: CallbackDataParams[],\n  ) => {\n    name: string\n    seriesName: string\n    marker: string\n    value: string | number\n  },\n) {\n  return (params: TopLevelFormatterParams) => {\n    // Handle both array (axis trigger) and object (item trigger)\n    const items = Array.isArray(params) ? params : [params]\n\n    const tooltip = (name: string, callback: string) =>\n      `<div style=\"margin: 0px 0 0;line-height:1;\">${name ? `<div style=\"font-size:11px;color:#FFFFFF;font-weight:400;line-height:1; margin-bottom: 10px\">${name}</div>` : ''}<div style=\"margin: 0;line-height:1;\">${callback}</div><div style=\"clear:both\"></div></div>`\n\n    const values = items.map((item) => {\n      const { name, seriesName, marker, value } = callback(item, items)\n      return {\n        name,\n        seriesName,\n        marker,\n        value,\n      }\n    })\n\n    const name = values[0]?.name ?? ''\n    // Show margin if name exists or there are multiple items\n    const showMargin = name || items.length > 1\n    const marginStyle = showMargin\n      ? 'margin: 10px 0 0;line-height:1;'\n      : 'margin: 0;line-height:1;'\n\n    const formattedValues = values.map(\n      ({ seriesName, marker, value }) =>\n        `<div style=\"${marginStyle}\"><div style=\"margin: 0px 0 0;line-height:1;\">${marker}${seriesName ? `<span style=\"font-size:11px;color:#FFFFFF;font-weight:400;margin-left:2px;margin-right:10px\">${seriesName}</span>` : ''}<span style=\"float:right;margin-left:10px;font-size:11px;color:#FFFFFF;font-weight:900\">${value}</span></div></div>`,\n    )\n\n    return tooltip(name, formattedValues.join(''))\n  }\n}\n","import type { Theme } from '@mui/material'\n\n/**\n * Base skeleton styles shared across all chart widgets\n */\nexport const baseSkeletonStyles = {\n  graph: {\n    /**\n     * Common container style for chart widget skeletons\n     */\n    container: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      flexDirection: 'column',\n      gap: ({ spacing }: Theme) => spacing(1),\n      height: ({ spacing }: Theme) => spacing(38),\n    },\n  },\n} as const\n"],"names":["flattenObjectArrayToCSV","data","rows","length","firstDataPoint","headers","Object","keys","push","forEach","series","dataPoint","values","map","v","String","scatterplotDataToCSV","buildLegendConfig","hasLegend","show","icon","left","bottom","orient","type","buildGridConfig","theme","parseInt","spacing","createTooltipPositioner","point","_params","_dom","_rect","size","position","top","contentSize","viewSize","right","createAxisLabelFormatter","formatter","value","applyYAxisFormatter","yAxis","axisFormatter","yAxisIsObject","Array","isArray","yAxisTyped","undefined","axisLabel","createTooltipFormatter","callback","params","items","tooltip","name","item","seriesName","marker","marginStyle","formattedValues","join","baseSkeletonStyles","graph","container","display","alignItems","justifyContent","flexDirection","gap","height"],"mappings":"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"}

package/dist/tooltip-BDnrRKrp.js

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as f } from "react/compiler-runtime";
+import { Tooltip as c } from "@mui/material";
+let s = 500;
+function y(i) {
+  const t = f(10);
+  let e, o, r, l;
+  t[0] !== i ? ({
+    children: e,
+    title: l,
+    enterNextDelay: r,
+    ...o
+  } = i, t[0] = i, t[1] = e, t[2] = o, t[3] = r, t[4] = l) : (e = t[1], o = t[2], r = t[3], l = t[4]);
+  const p = r === void 0 ? s : r;
+  let n;
+  return t[5] !== e || t[6] !== p || t[7] !== o || t[8] !== l ? (n = /* @__PURE__ */ a(c, { title: l, enterNextDelay: p, ...o, children: e }), t[5] = e, t[6] = p, t[7] = o, t[8] = l, t[9] = n) : n = t[9], n;
+}
+function D(i) {
+  s = i;
+}
+export {
+  y as T,
+  D as s
+};
+//# sourceMappingURL=tooltip-BDnrRKrp.js.map

package/dist/tooltip-BDnrRKrp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-BDnrRKrp.js","sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as MuiTooltip, type TooltipProps } from '@mui/material'\n\nlet tooltipEnterDelay = 500\n\n/**\n * A wrapper around MUI's Tooltip component with enterNextDelay set to 1000ms by default.\n *\n * This component ensures consistent tooltip behavior across the application.\n *\n * @example\n * <Tooltip title=\"This is a tooltip\">\n *   <Button>Hover me</Button>\n * </Tooltip>\n */\nexport function Tooltip({\n  children,\n  title,\n  enterNextDelay = tooltipEnterDelay,\n  ...props\n}: TooltipProps) {\n  return (\n    <MuiTooltip title={title} enterNextDelay={enterNextDelay} {...props}>\n      {children}\n    </MuiTooltip>\n  )\n}\n\nexport function setTooltipEnterDelay(delay: number) {\n  tooltipEnterDelay = delay\n}\n"],"names":["tooltipEnterDelay","Tooltip","t0","$","_c","children","props","t1","title","enterNextDelay","undefined","t2","MuiTooltip","setTooltipEnterDelay","delay"],"mappings":";;;AAEA,IAAIA,IAAoB;AAYjB,SAAAC,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA;AAAA,MAAAC,GAAAC,GAAAC,GAAAC;AAAA,EAAAL,SAAAD,KAAiB;AAAA,IAAAG,UAAAA;AAAAA,IAAAG,OAAAA;AAAAA,IAAAC,gBAAAF;AAAAA,IAAA,GAAAD;AAAAA,EAAAA,IAAAJ,GAKTC,OAAAD,GAAAC,OAAAE,GAAAF,OAAAG,GAAAH,OAAAI,GAAAJ,OAAAK,MAAAH,IAAAF,EAAA,CAAA,GAAAG,IAAAH,EAAA,CAAA,GAAAI,IAAAJ,EAAA,CAAA,GAAAK,IAAAL,EAAA,CAAA;AAFb,QAAAM,IAAAF,MAAAG,SAAAV,IAAAO;AAAkC,MAAAI;AAAA,SAAAR,EAAA,CAAA,MAAAE,KAAAF,EAAA,CAAA,MAAAM,KAAAN,EAAA,CAAA,MAAAG,KAAAH,SAAAK,KAIhCG,sBAACC,GAAA,EAAkBJ,OAAAA,GAAuBC,gBAAAA,MAAoBH,gBAE9D,GAAaH,OAAAE,GAAAF,OAAAM,GAAAN,OAAAG,GAAAH,OAAAK,GAAAL,OAAAQ,KAAAA,IAAAR,EAAA,CAAA,GAFbQ;AAEa;AAIV,SAASE,EAAqBC,GAAe;AAClDd,EAAAA,IAAoBc;AACtB;"}

package/dist/types/components/measurement-tools/styles.d.ts

@@ -1,5 +1,4 @@
 import { Theme } from '@mui/material';
-import { CSSProperties } from 'react';
 export declare const styles: {
     container: {
         display: "flex";
@@ -48,12 +47,22 @@ export declare const styles: {
                 padding: ({ spacing }: Theme) => string;
                 marginTop: ({ spacing }: Theme) => string;
                 marginBottom: ({ spacing }: Theme) => string;
-                '.MuiToggleButtonGroup-grouped': ({ typography }: Theme) => CSSProperties;
+                '.MuiToggleButtonGroup-grouped': {
+                    typography: string;
+                    fontWeight: number;
+                    margin: number;
+                    '&:first-of-type:not(.MuiDivider-root)': {
+                        marginLeft: number;
+                    };
+                };
+            };
+            subtitle: {
+                typography: string;
+                color: ({ palette }: Theme) => string;
             };
-            subtitle: ({ typography, palette }: Theme) => CSSProperties;
             optionsGroup: {
                 marginLeft: ({ spacing }: Theme) => string;
-                '.MuiTypography-root': ({ typography }: Theme) => CSSProperties;
+                typography: string;
             };
             title: {
                 display: "flex";

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useDebounce } from './use-debounce';
+export { useWidgetRef } from './use-widget-ref';

package/dist/types/hooks/use-debounce.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Custom hook for debouncing a callback function.
+ *
+ * @param callback - The function to debounce
+ * @param delay - The delay in milliseconds (default: 300ms)
+ * @returns A debounced version of the callback
+ *
+ * @example
+ * ```tsx
+ * const debouncedSearch = useDebounce((searchText: string) => {
+ *   // Perform search
+ *   console.log('Searching for:', searchText)
+ * }, 300)
+ *
+ * // Call it anywhere
+ * debouncedSearch('react')
+ * ```
+ */
+export declare function useDebounce<TArgs extends unknown[], TReturn = void>(callback: (...args: TArgs) => TReturn, delay?: number): (...args: TArgs) => void;

package/dist/types/hooks/use-widget-ref.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Custom hook for registering a DOM element ref with the widget store.
+ * This allows other parts of the application to access the widget's DOM element.
+ *
+ * @param widgetId - The widget ID to register the ref under
+ * @returns A ref object to attach to the DOM element
+ *
+ * @example
+ * ```tsx
+ * function MyWidget({ id }: { id: string }) {
+ *   const ref = useWidgetRef<HTMLDivElement>(id)
+ *
+ *   return <div ref={ref}>Widget content</div>
+ * }
+ * ```
+ */
+export declare function useWidgetRef<T extends HTMLElement = HTMLElement>(widgetId: string): import('react').RefObject<T | null>;

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

@@ -0,0 +1,38 @@
+import { EchartOptionsProps, EchartWidgetData } from '../../echart';
+/**
+ * Base configuration interface for chart widgets
+ */
+export interface ChartWidgetBaseConfig<TData = EchartWidgetData> {
+    data?: TData;
+}
+/**
+ * Parameters for creating a chart widget configuration
+ */
+export interface CreateChartWidgetConfigParams<TData = EchartWidgetData, TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>, TType extends string = string> {
+    /** Widget type identifier (e.g., 'bar', 'pie', 'histogram') */
+    type: TType;
+    /** Function to get EChart options from config */
+    getOptions: (config: TConfig) => EchartOptionsProps;
+}
+/**
+ * Return type of the chart widget config function
+ */
+export type ChartWidgetConfigResult<TData = EchartWidgetData, TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>, TType extends string = string> = TConfig & {
+    type: TType;
+};
+/**
+ * Factory function to create a standardized chart widget config function.
+ * This eliminates duplication across chart widgets by providing a common structure.
+ *
+ * @example
+ * ```ts
+ * export const barConfig = createChartWidgetConfig({
+ *   type: 'bar' as const,
+ *   getOptions: ({ data, theme }) => ({
+ *     // EChart configuration
+ *   }),
+ *   csvModifier: (data) => flattenObjectArrayToCSV(data),
+ * })
+ * ```
+ */
+export declare function createChartWidgetConfig<TData = EchartWidgetData, TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>, TType extends string = string>({ type, getOptions, }: CreateChartWidgetConfigParams<TData, TConfig, TType>): (config: TConfig) => ChartWidgetConfigResult<TData, TConfig, TType>;

package/dist/types/widgets/_shared/chart-config/csv-modifiers.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared CSV export modifiers for chart widgets
+ */
+/**
+ * Flattens object array data into CSV-ready rows.
+ * Used by bar, pie, histogram, and timeseries widgets.
+ *
+ * @param data - Array of series, where each series is an array of data objects
+ * @returns CSV rows with headers and values
+ */
+export declare function flattenObjectArrayToCSV<T extends Record<string, unknown>>(data: T[][]): string[][];
+/**
+ * Creates CSV rows for scatterplot data.
+ * Scatterplot uses array format [x, y] instead of objects.
+ *
+ * @param data - Array of series, where each series is an array of [x, y] tuples
+ * @returns CSV rows with ['x', 'y'] headers
+ */
+export declare function scatterplotDataToCSV(data: number[][][]): string[][];

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

@@ -0,0 +1,7 @@
+/**
+ * Shared utilities for chart widget configuration
+ */
+export { createChartWidgetConfig } from './config-factory';
+export type { ChartWidgetBaseConfig, CreateChartWidgetConfigParams, } from './config-factory';
+export { flattenObjectArrayToCSV, scatterplotDataToCSV } from './csv-modifiers';
+export { buildLegendConfig, buildGridConfig, createTooltipPositioner, createAxisLabelFormatter, createTooltipFormatter, applyXAxisFormatter, applyYAxisFormatter, } from './option-builders';

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

@@ -0,0 +1,85 @@
+import { Theme } from '@mui/material';
+import { LegendComponentOption } from 'echarts';
+import { CallbackDataParams, TopLevelFormatterParams } from '../../../../node_modules/echarts/types/dist/shared';
+/**
+ * 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>;
+/**
+ * Creates an axis label formatter for ECharts
+ * Used to format numeric axis labels with a widget formatter
+ *
+ * @param formatter - Optional formatter function from widget config
+ * @returns Axis label formatter function or undefined
+ */
+export declare function createAxisLabelFormatter(formatter?: (value: number) => string): ((value: number) => string) | undefined;
+/**
+ * Applies formatter to xAxis configuration
+ * Only applies to single axis objects (not arrays) with type 'value'
+ *
+ * @param xAxis - Existing xAxis configuration
+ * @param formatter - Optional formatter function from widget config
+ * @returns Updated xAxis configuration or undefined if no changes needed
+ */
+export declare function applyXAxisFormatter(xAxis: unknown, formatter?: (value: number) => string): {
+    axisLabel: {
+        formatter: ((value: number) => string) | undefined;
+    };
+    type?: string;
+};
+/**
+ * Applies formatter to yAxis configuration
+ * Only applies to single axis objects (not arrays) with type 'value'
+ *
+ * @param yAxis - Existing yAxis configuration
+ * @param formatter - Optional formatter function from widget config
+ * @returns Updated yAxis configuration or undefined if no changes needed
+ */
+export declare function applyYAxisFormatter(yAxis: unknown, formatter?: (value: number) => string): {
+    axisLabel: {
+        formatter: ((value: number) => string) | undefined;
+    };
+    type?: string;
+};
+/**
+ * Creates a tooltip formatter for ECharts
+ * Formats numeric values in tooltip using widget formatter
+ * Handles both axis trigger (array) and item trigger (object) modes
+ *
+ * @param formatter - Optional formatter function from widget config
+ * @returns Tooltip formatter function or undefined
+ */
+export declare function createTooltipFormatter(callback: (item: CallbackDataParams, items: CallbackDataParams[]) => {
+    name: string;
+    seriesName: string;
+    marker: string;
+    value: string | number;
+}): (params: TopLevelFormatterParams) => string;

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,36 @@
+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;
+}
+/**
+ * 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;
+}