@embeddable.com/remarkable-ui 0.0.13 → 0.0.15

package/README.md

@@ -1,6 +1,6 @@
 # Remarkable UI
 
-**Remarkable UI** is an open-source library of **beautiful components** for analytics – charts, controls, tables, and more – designed to be styled with **granular CSS variables**.  
+**Remarkable UI** is an open-source library of **beautiful components** for analytics – charts, controls, tables, and more – designed to be styled with **granular CSS variables**.
 
 👉 Remarkable UI forms part of the [Embeddable](https://embeddable.com) ecosystem but can also be used independently.
 
@@ -11,16 +11,14 @@ Every part of a Remarkable UI component can be styled with granular CSS variable
 There are **three layers** of variables in our system:
 
 1. **Base variables**
-    – Raw CSS primitives (colors, spacing, type scales)    
-    – *Don’t override*—they’re the foundation.
-    
-2. **Semantic variables**    
-    – “Meaningful” tokens built from base vars (e.g. --background-default, --foreground-error, --font-default)    
-    – Control *global* look-and-feel: light vs. dark palettes, brand colors, default text styles.
-    
-3. **Component variables**    
-    – Element-specific tokens (namespaced by component, e.g. --icn-btn-background-hover, --dropdown-padding)    
-    – Fine-tune individual components without touching global semantics.
+   – Raw CSS primitives (colors, spacing, type scales)  
+   – _Don’t override_—they’re the foundation.
+2. **Semantic variables**  
+   – “Meaningful” tokens built from base vars (e.g. --background-default, --foreground-error, --font-default)  
+   – Control _global_ look-and-feel: light vs. dark palettes, brand colors, default text styles.
+3. **Component variables**  
+   – Element-specific tokens (namespaced by component, e.g. --icn-btn-background-hover, --dropdown-padding)  
+   – Fine-tune individual components without touching global semantics.
 
 ## 🛠 Contributing
 

package/dist/BarChartPro.js

@@ -0,0 +1,355 @@
+import { g as i, a as n, c as j, m as c, b as g, C as D, d as P, L as T, B as H, e as I, p as F, f as _, h as E, j as m, s as X, i as N, k as W, l as q, n as G, r as Y, o as J, q as K, t as Q, u as U, v as Z, w as ee, x as te, y as ae, z as re, A as se, D as ie, E as oe, F as le, G as ne, H as de, V as ce, I as he } from "./component.constants-gz--XNdD.js";
+import { useTheme as ge, defineComponent as me } from "@embeddable.com/react";
+import { r as ue, g as xe, a as C, C as pe } from "./styles.utils-CCN3caTf.js";
+import { useRef as be } from "react";
+import { g as y } from "./formatter.utils-rh4NsBc4.js";
+const A = {
+  ...j,
+  scales: {
+    x: {
+      title: {
+        display: !0,
+        color: n("--em-chart-grid-font-color-default"),
+        font: {
+          size: i("--em-chart-grid-font-title-size"),
+          weight: i("--em-chart-grid-font-title-weight"),
+          // TODO: fix family on dedicated ticket
+          // family: getStyle('--em-chart-grid-font-font-family'),
+          lineHeight: `${i("--em-chart-grid-font-line-height")}px`
+        }
+      },
+      ticks: {
+        font: {
+          size: i("--em-chart-grid-font-subtitle-size"),
+          weight: i("--em-chart-grid-font-label-weight"),
+          // TODO: fix family on dedicated ticket
+          // family: getStyle('--em-chart-grid-font-font-family'),
+          lineHeight: `${i("--em-chart-grid-font-line-height")}px`
+        }
+      },
+      grid: {
+        display: !1,
+        color: n("--em-chart-grid-line-color-light"),
+        lineWidth: i("--em-chart-grid-line-width-default")
+      },
+      border: {
+        display: !1
+      }
+    },
+    y: {
+      title: {
+        display: !0,
+        color: n("--em-chart-grid-font-color-default"),
+        font: {
+          size: i("--em-chart-grid-font-title-size"),
+          weight: i("--em-chart-grid-font-title-weight"),
+          // TODO: fix family on dedicated ticket
+          // family: getStyle('--em-chart-grid-font-font-family'),
+          lineHeight: `${i("--em-chart-grid-font-line-height")}px`
+        }
+      },
+      ticks: {
+        font: {
+          size: i("--em-chart-grid-font-subtitle-size"),
+          weight: i("--em-chart-grid-font-label-weight"),
+          // TODO: fix family on dedicated ticket
+          // family: getStyle('--em-chart-grid-font-font-family'),
+          lineHeight: `${i("--em-chart-grid-font-line-height")}px`
+        }
+      },
+      grid: {
+        display: !1,
+        color: n("--em-chart-grid-line-color-light"),
+        lineWidth: i("--em-chart-grid-line-width-default")
+      },
+      border: {
+        display: !1
+      }
+    }
+  }
+}, fe = (e) => {
+  var t;
+  return {
+    ...e,
+    datasets: (t = e.datasets) == null ? void 0 : t.map((o, r) => {
+      const a = g[r % g.length], s = {
+        ...o,
+        backgroundColor: a,
+        borderColor: a,
+        borderRadius: i("--em-chart-style-border-radius-default")
+      };
+      return c(s, o);
+    })
+  };
+}, Ce = (e) => c(A, {
+  indexAxis: "x",
+  scales: {
+    y: {
+      grid: { display: !0 },
+      ticks: {
+        color: n("--em-chart-grid-font-color-muted")
+      },
+      min: e.yAxisRangeMin,
+      max: e.yAxisRangeMax,
+      type: e.showLogarithmicScale ? "logarithmic" : "linear",
+      title: {
+        text: e.yAxisLabel ?? ""
+      }
+    },
+    x: {
+      ticks: {
+        color: n("--em-chart-grid-font-color-default")
+      },
+      reverse: e.reverseXAxis,
+      title: {
+        text: e.xAxisLabel ?? ""
+      }
+    }
+  }
+}), ye = (e) => c(A, {
+  indexAxis: "y",
+  scales: {
+    x: {
+      grid: { display: !0 },
+      ticks: {
+        color: n("--em-chart-grid-font-color-muted")
+      },
+      min: e.xAxisRangeMin,
+      max: e.xAxisRangeMax,
+      type: e.showLogarithmicScale ? "logarithmic" : "linear",
+      title: {
+        text: e.xAxisLabel ?? ""
+      }
+    },
+    y: {
+      ticks: {
+        color: n("--em-chart-grid-font-color-default")
+      },
+      reverse: e.reverseYAxis,
+      title: {
+        text: e.yAxisLabel ?? ""
+      }
+    }
+  }
+}), Ae = (e) => {
+  const {
+    horizontal: t = !1,
+    showLegend: o = !1,
+    showTooltips: r = !0,
+    showValueLabels: a = !1
+  } = e, l = (t ? ye : Ce)(e);
+  return c(l, {
+    layout: {
+      padding: {
+        // Hack: dataLabels can get cut off if they are at the edge of the chart
+        top: !t && a ? 30 : 0,
+        right: t && a ? 30 : 0
+      }
+    },
+    plugins: {
+      legend: { display: o },
+      datalabels: {
+        display: a,
+        anchor: "end",
+        align: "end"
+      },
+      tooltip: {
+        enabled: r
+      }
+    }
+  });
+};
+D.register(P, T, H, I, F, _, E);
+const we = ({ data: e, onSegmentClick: t, options: o = {}, ...r }) => {
+  const a = be(null), s = c(Ae(r), o), l = (h) => {
+    const d = W(h, a);
+    t == null || t(d);
+  };
+  return /* @__PURE__ */ m.jsx("div", { className: X.chartContainer, children: /* @__PURE__ */ m.jsx(
+    N,
+    {
+      ref: a,
+      data: fe(e),
+      options: s,
+      onClick: l
+    }
+  ) });
+}, ke = (e, t = ue) => {
+  const o = y(t);
+  if (!e.data)
+    return {
+      labels: [],
+      datasets: [{ data: [] }]
+    };
+  const r = xe(
+    e.data,
+    e.dimension,
+    e.measures[0],
+    e.xAxisMaxItems
+  );
+  return {
+    labels: r.map((a) => {
+      const s = a[e.dimension.name], l = o.data(e.dimension, s);
+      return s === l ? q.t(s) : l;
+    }),
+    datasets: e.measures.map((a, s) => {
+      const l = C(
+        `${t.id}.charts.backgroundColors`,
+        a.name,
+        t.charts.backgroundColors ?? g,
+        s
+      ), h = C(
+        `${t.id}.charts.borderColors`,
+        a.name,
+        t.charts.borderColors ?? g,
+        s
+      );
+      return {
+        label: a.title,
+        data: r.map((d) => d[a.name]),
+        backgroundColor: l,
+        borderColor: h,
+        datalabels: {
+          color: "black",
+          anchor: "end",
+          align: "top",
+          formatter: (d) => o.data(a, d)
+        }
+      };
+    })
+  };
+}, Le = (e, t) => {
+  const o = y(e);
+  return {
+    plugins: {
+      tooltip: {
+        callbacks: {
+          label(r) {
+            const a = r.raw;
+            return `${r.dataset.label || ""}: ${o.data(t, a)}`;
+          }
+        }
+      }
+    },
+    scales: {
+      y: {
+        ticks: {
+          callback: (r) => o.data(t, r)
+        }
+      }
+    }
+  };
+}, Be = (e) => {
+  var u, x;
+  const t = ge();
+  G(t);
+  const {
+    description: o,
+    dimension: r,
+    xAxisMaxItems: a,
+    measures: s,
+    results: l,
+    showLegend: h,
+    showTooltips: d,
+    showValueLabels: w,
+    showLogarithmicScale: k,
+    xAxisLabel: L,
+    yAxisLabel: B,
+    reverseXAxis: v,
+    yAxisRangeMin: M,
+    yAxisRangeMax: S,
+    title: R,
+    onSegmentClick: z
+  } = Y(e), V = ke(
+    { data: l.data, dimension: r, measures: s, xAxisMaxItems: a },
+    t
+  ), O = c(
+    Le(t, s[0]),
+    // Format Y axis based on first measure
+    ((x = (u = t.charts) == null ? void 0 : u.barChartPro) == null ? void 0 : x.options) || {}
+  ), $ = (p) => {
+    var b, f;
+    z({
+      dimensionValue: p === void 0 || (f = (b = l.data) == null ? void 0 : b[p]) == null ? void 0 : f[r.name]
+    });
+  };
+  return /* @__PURE__ */ m.jsx(
+    pe,
+    {
+      data: l,
+      dimensionsAndMeasures: [r, ...s],
+      errorMessage: l.error,
+      subtitle: o,
+      title: R,
+      children: /* @__PURE__ */ m.jsx(
+        we,
+        {
+          data: V,
+          onSegmentClick: $,
+          showLegend: h,
+          showTooltips: d,
+          showValueLabels: w,
+          showLogarithmicScale: k,
+          xAxisLabel: L,
+          yAxisLabel: B,
+          reverseXAxis: v,
+          yAxisRangeMin: M,
+          yAxisRangeMax: S,
+          options: O
+        }
+      )
+    }
+  );
+}, ve = {
+  name: "BarChartPro",
+  label: "Bar Chart",
+  category: "Bar Charts",
+  inputs: [
+    J,
+    K,
+    Q,
+    U,
+    Z,
+    ee,
+    te,
+    ae,
+    re,
+    se,
+    ie,
+    oe,
+    le,
+    ne,
+    de
+  ],
+  events: [
+    {
+      name: "onSegmentClick",
+      label: "A segment is clicked",
+      properties: [
+        {
+          name: "dimensionValue",
+          label: "Clicked Dimension",
+          type: "string"
+        }
+      ]
+    }
+  ]
+}, Oe = me(Be, ve, {
+  props: (e) => ({
+    ...e,
+    results: he({
+      from: e.dataset,
+      select: [...e.measures, e.dimension]
+    })
+  }),
+  events: {
+    onSegmentClick: (e) => ({
+      dimensionValue: e.dimensionValue || ce.noFilter()
+    })
+  }
+});
+export {
+  Oe as default,
+  ve as meta
+};
+//# sourceMappingURL=BarChartPro.js.map

package/dist/BarChartPro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartPro.js","sources":["../src/remarkable-ui/charts/bars/bars.constants.ts","../src/remarkable-ui/charts/bars/bars.utils.ts","../src/remarkable-ui/charts/bars/BarChart.tsx","../src/remarkable-pro/components/charts/bars/bars.utils.ts","../src/remarkable-pro/components/charts/bars/BarChartPro/index.tsx","../src/remarkable-pro/components/charts/bars/BarChartPro/BarChartPro.emb.ts"],"sourcesContent":["import { ChartOptions } from 'chart.js';\nimport { getStyle, getStyleNumber } from '../../styles/styles.utils';\nimport { chartjsOptions } from '../chartjs.constants';\n\nexport const defaultBarChartOptions: Partial<ChartOptions<'bar'>> = {\n  ...chartjsOptions,\n  scales: {\n    x: {\n      title: {\n        display: true,\n        color: getStyle('--em-chart-grid-font-color-default'),\n        font: {\n          size: getStyleNumber('--em-chart-grid-font-title-size'),\n          weight: getStyleNumber('--em-chart-grid-font-title-weight'),\n          // TODO: fix family on dedicated ticket\n          // family: getStyle('--em-chart-grid-font-font-family'),\n          lineHeight: `${getStyleNumber('--em-chart-grid-font-line-height')}px`,\n        },\n      },\n      ticks: {\n        font: {\n          size: getStyleNumber('--em-chart-grid-font-subtitle-size'),\n          weight: getStyleNumber('--em-chart-grid-font-label-weight'),\n          // TODO: fix family on dedicated ticket\n          // family: getStyle('--em-chart-grid-font-font-family'),\n          lineHeight: `${getStyleNumber('--em-chart-grid-font-line-height')}px`,\n        },\n      },\n      grid: {\n        display: false,\n        color: getStyle('--em-chart-grid-line-color-light'),\n        lineWidth: getStyleNumber('--em-chart-grid-line-width-default'),\n      },\n      border: {\n        display: false,\n      },\n    },\n    y: {\n      title: {\n        display: true,\n        color: getStyle('--em-chart-grid-font-color-default'),\n        font: {\n          size: getStyleNumber('--em-chart-grid-font-title-size'),\n          weight: getStyleNumber('--em-chart-grid-font-title-weight'),\n          // TODO: fix family on dedicated ticket\n          // family: getStyle('--em-chart-grid-font-font-family'),\n          lineHeight: `${getStyleNumber('--em-chart-grid-font-line-height')}px`,\n        },\n      },\n      ticks: {\n        font: {\n          size: getStyleNumber('--em-chart-grid-font-subtitle-size'),\n          weight: getStyleNumber('--em-chart-grid-font-label-weight'),\n          // TODO: fix family on dedicated ticket\n          // family: getStyle('--em-chart-grid-font-font-family'),\n          lineHeight: `${getStyleNumber('--em-chart-grid-font-line-height')}px`,\n        },\n      },\n      grid: {\n        display: false,\n        color: getStyle('--em-chart-grid-line-color-light'),\n        lineWidth: getStyleNumber('--em-chart-grid-line-width-default'),\n      },\n      border: {\n        display: false,\n      },\n    },\n  },\n};\n","import { ChartData, ChartOptions } from 'chart.js';\nimport { chartColors } from '../charts.constants';\nimport { getStyle, getStyleNumber } from '../../styles/styles.utils';\nimport { mergician } from 'mergician';\nimport { BarChartConfigurationProps, BarChartHorizontalConfigurationProps } from './bars.types';\nimport { defaultBarChartOptions } from './bars.constants';\n\nexport const getBarChartData = (data: ChartData<'bar'>): ChartData<'bar'> => {\n  return {\n    ...data,\n    datasets: data.datasets?.map((dataset, index) => {\n      const colors = chartColors[index % chartColors.length];\n      const defaultDataset = {\n        ...dataset,\n        backgroundColor: colors,\n        borderColor: colors,\n        borderRadius: getStyleNumber('--em-chart-style-border-radius-default'),\n      };\n\n      return mergician(defaultDataset, dataset) as typeof dataset;\n    }),\n  };\n};\n\nconst getBarVerticalChartOptions = (\n  config: BarChartConfigurationProps,\n): Partial<ChartOptions<'bar'>> => {\n  return mergician(defaultBarChartOptions, {\n    indexAxis: 'x',\n    scales: {\n      y: {\n        grid: { display: true },\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-muted'),\n        },\n        min: config.yAxisRangeMin,\n        max: config.yAxisRangeMax,\n        type: config.showLogarithmicScale ? 'logarithmic' : 'linear',\n        title: {\n          text: config.yAxisLabel ?? '',\n        },\n      },\n      x: {\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-default'),\n        },\n        reverse: config.reverseXAxis,\n        title: {\n          text: config.xAxisLabel ?? '',\n        },\n      },\n    },\n  });\n};\n\nconst getBarHorizontalChartOptions = (\n  config: BarChartHorizontalConfigurationProps,\n): Partial<ChartOptions<'bar'>> => {\n  return mergician(defaultBarChartOptions, {\n    indexAxis: 'y',\n    scales: {\n      x: {\n        grid: { display: true },\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-muted'),\n        },\n        min: config.xAxisRangeMin,\n        max: config.xAxisRangeMax,\n        type: config.showLogarithmicScale ? 'logarithmic' : 'linear',\n        title: {\n          text: config.xAxisLabel ?? '',\n        },\n      },\n      y: {\n        ticks: {\n          color: getStyle('--em-chart-grid-font-color-default'),\n        },\n        reverse: config.reverseYAxis,\n        title: {\n          text: config.yAxisLabel ?? '',\n        },\n      },\n    },\n  });\n};\n\nexport const getBarChartOptions = (\n  props: BarChartConfigurationProps,\n): Partial<ChartOptions<'bar'>> => {\n  const {\n    horizontal = false,\n    showLegend = false,\n    showTooltips = true,\n    showValueLabels = false,\n  } = props;\n\n  const getOptions = horizontal ? getBarHorizontalChartOptions : getBarVerticalChartOptions;\n  const options = getOptions(props);\n\n  return mergician(options, {\n    layout: {\n      padding: {\n        // Hack: dataLabels can get cut off if they are at the edge of the chart\n        top: !horizontal && showValueLabels ? 30 : 0,\n        right: horizontal && showValueLabels ? 30 : 0,\n      },\n    },\n    plugins: {\n      legend: { display: showLegend },\n      datalabels: {\n        display: showValueLabels,\n        anchor: 'end',\n        align: 'end',\n      },\n      tooltip: {\n        enabled: showTooltips,\n      },\n    },\n  });\n};\n","import { FC, useRef } from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  Title,\n  Tooltip,\n  Legend,\n  LogarithmicScale,\n} from 'chart.js';\nimport { BaseBarChartProps } from './bars.types';\nimport { getSegmentIndexClicked } from '../chartjs.utils';\nimport { getBarChartData, getBarChartOptions } from './bars.utils';\nimport styles from '../charts.module.css';\nimport { mergician } from 'mergician';\n\nChartJS.register(CategoryScale, LinearScale, BarElement, LogarithmicScale, Title, Tooltip, Legend);\n\nexport type BarChartProps = BaseBarChartProps;\n\nexport const BarChart: FC<BarChartProps> = ({ data, onSegmentClick, options = {}, ...props }) => {\n  const chartRef = useRef(null);\n\n  const barChartOptions = mergician(getBarChartOptions(props), options);\n\n  const handleSegmentClick = (event: React.MouseEvent<HTMLCanvasElement>) => {\n    const indexClicked = getSegmentIndexClicked(event, chartRef);\n    onSegmentClick?.(indexClicked);\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <Bar\n        ref={chartRef}\n        data={getBarChartData(data)}\n        options={barChartOptions}\n        onClick={handleSegmentClick}\n      />\n    </div>\n  );\n};\n","import { DataResponse, Dimension, Measure } from '@embeddable.com/core';\nimport { Theme } from '../../../theme/theme.types';\nimport { remarkableTheme } from '../../../theme/theme.constants';\nimport { ChartData, ChartOptions } from 'chart.js';\nimport { getThemeFormatter } from '../../../theme/formatter/formatter.utils';\nimport { groupTailAsOther } from '../charts.utils';\nimport { i18n } from '../../../theme/i18n/i18n';\nimport { getColor } from '../../../theme/styles/styles.utils';\nimport { chartColors } from '../../../../remarkable-ui';\n\nexport const getBarChartProData = (\n  props: {\n    data: DataResponse['data'];\n    dimension: Dimension;\n    measures: Measure[];\n    xAxisMaxItems?: number;\n  },\n  theme: Theme = remarkableTheme,\n): ChartData<'bar'> => {\n  const themeFormatter = getThemeFormatter(theme);\n\n  if (!props.data) {\n    return {\n      labels: [],\n      datasets: [{ data: [] }],\n    };\n  }\n\n  const groupedData = groupTailAsOther(\n    props.data,\n    props.dimension,\n    props.measures[0]!,\n    props.xAxisMaxItems,\n  );\n\n  return {\n    labels: groupedData.map((item) => {\n      const value = item[props.dimension.name];\n      const formattedValue = themeFormatter.data(props.dimension, value);\n\n      // If formatter did not work, try i18n translation\n      if (value === formattedValue) {\n        return i18n.t(value);\n      }\n      return formattedValue;\n    }),\n    datasets: props.measures.map((measure, index) => {\n      const backgroundColor = getColor(\n        `${theme.id}.charts.backgroundColors`,\n        measure.name,\n        theme.charts.backgroundColors ?? chartColors,\n        index,\n      );\n\n      const borderColor = getColor(\n        `${theme.id}.charts.borderColors`,\n        measure.name,\n        theme.charts.borderColors ?? chartColors,\n        index,\n      );\n\n      return {\n        label: measure.title,\n        data: groupedData.map((item) => item[measure.name]),\n        backgroundColor,\n        borderColor,\n        datalabels: {\n          color: 'black',\n          anchor: 'end',\n          align: 'top',\n          formatter: (value) => themeFormatter.data(measure, value),\n        },\n      };\n    }),\n  };\n};\n\nexport const getBarChartProOptions = (\n  theme: Theme,\n  measure: Measure,\n): Partial<ChartOptions<'bar'>> => {\n  const themeFormatter = getThemeFormatter(theme);\n  return {\n    plugins: {\n      tooltip: {\n        callbacks: {\n          label(context) {\n            const raw = context.raw as number;\n            return `${context.dataset.label || ''}: ${themeFormatter.data(measure, raw)}`;\n          },\n        },\n      },\n    },\n    scales: {\n      y: {\n        ticks: {\n          callback: (value) => themeFormatter.data(measure, value),\n        },\n      },\n    },\n  };\n};\n","import { useTheme } from '@embeddable.com/react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { i18nSetup } from '../../../../theme/i18n/i18n';\nimport { ChartCard } from '../../shared/ChartCard/ChartCard';\nimport { resolveI18nProps } from '../../../component.utils';\nimport { BarChart } from '../../../../../remarkable-ui/charts/bars/BarChart';\nimport { getBarChartProData, getBarChartProOptions } from '../bars.utils';\nimport { mergician } from 'mergician';\nimport { DataResponse, Dimension, Measure } from '@embeddable.com/core';\n\ntype BarChartProProps = {\n  description: string;\n  dimension: Dimension;\n  xAxisMaxItems: number;\n  measures: Measure[];\n  results: DataResponse;\n  showLegend: boolean;\n  showTooltips: boolean;\n  showValueLabels: boolean;\n  showLogarithmicScale: boolean;\n  xAxisLabel: string;\n  yAxisLabel: string;\n  reverseXAxis: boolean;\n  title: string;\n  yAxisRangeMin?: number;\n  yAxisRangeMax?: number;\n  onSegmentClick: (args: { dimensionValue: string | null }) => void;\n};\n\nconst BarChartPro = (props: BarChartProProps) => {\n  const theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const {\n    description,\n    dimension,\n    xAxisMaxItems,\n    measures,\n    results,\n    showLegend,\n    showTooltips,\n    showValueLabels,\n    showLogarithmicScale,\n    xAxisLabel,\n    yAxisLabel,\n    reverseXAxis,\n    yAxisRangeMin,\n    yAxisRangeMax,\n    title,\n    onSegmentClick,\n  } = resolveI18nProps(props);\n\n  const data = getBarChartProData(\n    { data: results.data, dimension, measures, xAxisMaxItems },\n    theme,\n  );\n\n  const options = mergician(\n    getBarChartProOptions(theme, measures[0]!), // Format Y axis based on first measure\n    theme.charts?.barChartPro?.options || {},\n  );\n\n  const handleSegmentClick = (index: number | undefined) => {\n    onSegmentClick({\n      dimensionValue: index === undefined ? undefined : results.data?.[index]?.[dimension.name],\n    });\n  };\n\n  return (\n    <ChartCard\n      data={results}\n      dimensionsAndMeasures={[dimension, ...measures]}\n      errorMessage={results.error}\n      subtitle={description}\n      title={title}\n    >\n      <BarChart\n        data={data}\n        onSegmentClick={handleSegmentClick}\n        showLegend={showLegend}\n        showTooltips={showTooltips}\n        showValueLabels={showValueLabels}\n        showLogarithmicScale={showLogarithmicScale}\n        xAxisLabel={xAxisLabel}\n        yAxisLabel={yAxisLabel}\n        reverseXAxis={reverseXAxis}\n        yAxisRangeMin={yAxisRangeMin}\n        yAxisRangeMax={yAxisRangeMax}\n        options={options}\n      />\n    </ChartCard>\n  );\n};\n\nexport default BarChartPro;\n","import { Value, loadData } from '@embeddable.com/core';\nimport { defineComponent, EmbeddedComponentMeta, Inputs } from '@embeddable.com/react';\nimport BarChartPro from './index';\nimport {\n  dataset,\n  description,\n  dimension,\n  showLegend,\n  showTooltips,\n  showValueLabels,\n  title,\n  measures,\n  showLogarithmicScale,\n  xAxisLabel,\n  yAxisLabel,\n  reverseXAxis,\n  yAxisRangeMin,\n  yAxisRangeMax,\n  xAxisMaxItems,\n} from '../../../component.constants';\n\nexport const meta = {\n  name: 'BarChartPro',\n  label: 'Bar Chart',\n  category: 'Bar Charts',\n  inputs: [\n    dataset,\n    measures,\n    dimension,\n    title,\n    description,\n    showLegend,\n    showTooltips,\n    showValueLabels,\n    showLogarithmicScale,\n    xAxisLabel,\n    yAxisLabel,\n    reverseXAxis,\n    yAxisRangeMin,\n    yAxisRangeMax,\n    xAxisMaxItems,\n  ],\n  events: [\n    {\n      name: 'onSegmentClick',\n      label: 'A segment is clicked',\n      properties: [\n        {\n          name: 'dimensionValue',\n          label: 'Clicked Dimension',\n          type: 'string',\n        },\n      ],\n    },\n  ],\n} as const satisfies EmbeddedComponentMeta;\n\nexport default defineComponent(BarChartPro, meta, {\n  props: (inputs: Inputs<typeof meta>) => {\n    return {\n      ...inputs,\n      results: loadData({\n        from: inputs.dataset,\n        select: [...inputs.measures, inputs.dimension],\n      }),\n    };\n  },\n  events: {\n    onSegmentClick: (value) => {\n      return {\n        dimensionValue: value.dimensionValue || Value.noFilter(),\n      };\n    },\n  },\n});\n"],"names":["defaultBarChartOptions","chartjsOptions","getStyle","getStyleNumber","getBarChartData","data","_a","dataset","index","colors","chartColors","defaultDataset","mergician","getBarVerticalChartOptions","config","getBarHorizontalChartOptions","getBarChartOptions","props","horizontal","showLegend","showTooltips","showValueLabels","options","ChartJS","CategoryScale","LinearScale","BarElement","LogarithmicScale","Title","Tooltip","Legend","BarChart","onSegmentClick","chartRef","useRef","barChartOptions","handleSegmentClick","event","indexClicked","getSegmentIndexClicked","jsx","styles","Bar","getBarChartProData","theme","remarkableTheme","themeFormatter","getThemeFormatter","groupedData","groupTailAsOther","item","value","formattedValue","i18n","measure","backgroundColor","getColor","borderColor","getBarChartProOptions","context","raw","BarChartPro","useTheme","i18nSetup","description","dimension","xAxisMaxItems","measures","results","showLogarithmicScale","xAxisLabel","yAxisLabel","reverseXAxis","yAxisRangeMin","yAxisRangeMax","title","resolveI18nProps","_b","ChartCard","meta","BarChartPro_emb","defineComponent","inputs","loadData","Value"],"mappings":"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"}

package/dist/DateRangeSelectFieldPro.js

@@ -1,6 +1,6 @@
 import { defineComponent as l } from "@embeddable.com/react";
-import { x as o, y as n, F as r, V as t } from "./component.constants-DLcmipcp.js";
-import { D as i, l as a } from "./index-BmX2mh4Y.js";
+import { u as o, v as n, M as r, V as t } from "./component.constants-gz--XNdD.js";
+import { D as i, l as a } from "./index-D63sy5ao.js";
 const d = {
   name: "DateRangeSelectFieldPro",
   label: "Date Range Select Field",

package/dist/DonutChartPro.js

@@ -1,6 +1,6 @@
-import { u as a, w as s, v as t, x as o, y as n, z as r, E as i, A as m, B as l, V as d, G as u } from "./component.constants-DLcmipcp.js";
+import { o as a, J as s, t, u as o, v as n, w as r, K as i, x as m, y as l, V as d, I as u } from "./component.constants-gz--XNdD.js";
 import { defineComponent as c } from "@embeddable.com/react";
-import { D as p } from "./index-DqVAuVBE.js";
+import { D as p } from "./index-GncP7ibH.js";
 const C = {
   name: "DonutChartPro",
   label: "Donut Chart",

package/dist/DonutLabelChartPro.js

@@ -1,5 +1,5 @@
-import { D as n } from "./index-B1ql-3g7.js";
-import { u as s, w as a, v as r, x as o, y as l, z as i, E as m, A as d, B as u, V as b, G as t } from "./component.constants-DLcmipcp.js";
+import { D as n } from "./index-BIZ50gnp.js";
+import { o as s, J as a, t as r, u as o, v as l, w as i, K as m, x as d, y as u, V as b, I as t } from "./component.constants-gz--XNdD.js";
 import { defineComponent as c } from "@embeddable.com/react";
 const p = {
   name: "DonutLabelChartPro",

package/dist/EditorCard-0MZ3LzXU.js

@@ -0,0 +1,62 @@
+import { aa as l, j as r, N as u, n as m, O as p, Q as _, P as x, R as f, l as h, ac as C } from "./component.constants-gz--XNdD.js";
+import { useEffect as j } from "react";
+import { useTheme as S } from "@embeddable.com/react";
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const b = [["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M21 21l-6 -6", key: "svg-1" }]], g = l("outline", "search", "Search", b), v = "_listOptions_2o1ip_1", y = "_disabled_2o1ip_6", a = {
+  listOptions: v,
+  disabled: y
+}, k = ({ children: t, disabled: e, ...s }) => /* @__PURE__ */ r.jsx("div", { className: u(a.listOptions, e && a.disabled), ...s, children: t });
+function R(t, e = 300) {
+  let s;
+  return (...o) => {
+    clearTimeout(s), s = setTimeout(() => {
+      t(...o);
+    }, e);
+  };
+}
+const A = (t, e) => {
+  j(() => {
+    t && setTimeout(() => {
+      var s;
+      (s = e.current) == null || s.focus();
+    }, 100);
+  }, [t, e]);
+}, N = "_error_1xvr5_1", O = "_card_1xvr5_7", n = {
+  error: N,
+  card: O
+}, D = ({
+  title: t,
+  subtitle: e,
+  children: s,
+  errorMessage: o,
+  ...c
+}) => {
+  const i = S();
+  m(i);
+  const d = () => o ? /* @__PURE__ */ r.jsx(
+    f,
+    {
+      className: n.error,
+      icon: C,
+      title: h.t("editors.errorTitle"),
+      message: o
+    }
+  ) : s;
+  return /* @__PURE__ */ r.jsxs(p, { className: n.card, ...c, children: [
+    /* @__PURE__ */ r.jsx(_, { title: t, subtitle: e }),
+    /* @__PURE__ */ r.jsx(x, { children: d() })
+  ] });
+};
+export {
+  D as E,
+  g as I,
+  k as S,
+  R as d,
+  A as u
+};
+//# sourceMappingURL=EditorCard-0MZ3LzXU.js.map

package/dist/EditorCard-0MZ3LzXU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorCard-0MZ3LzXU.js","sources":["../node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs","../src/remarkable-ui/editors/select/shared/SelectList/SelectListOptions/SelectListOptions.tsx","../src/remarkable-ui/utils/debounce.utils.ts","../src/remarkable-ui/editors/select/shared/useSelectSearchFocus.hook.ts","../src/remarkable-pro/components/editors/shared/EditorCard/EditorCard.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.34.1 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M21 21l-6 -6\", \"key\": \"svg-1\" }]];\nconst IconSearch = createReactComponent(\"outline\", \"search\", \"Search\", __iconNode);\n\nexport { __iconNode, IconSearch as default };\n//# sourceMappingURL=IconSearch.mjs.map\n","import { FC } from 'react';\nimport styles from './SelectListOptions.module.css';\nimport clsx from 'clsx';\n\nexport type SelectListOptionsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n  disabled?: boolean;\n};\n\nexport const SelectListOptions: FC<SelectListOptionsProps> = ({ children, disabled, ...props }) => {\n  return (\n    <div className={clsx(styles.listOptions, disabled && styles.disabled)} {...props}>\n      {children}\n    </div>\n  );\n};\n","// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function debounce<T extends (...args: any[]) => void>(\n  fn: T,\n  delay = 300,\n): (...args: Parameters<T>) => void {\n  let timer: NodeJS.Timeout;\n  return (...args: Parameters<T>) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => {\n      fn(...args);\n    }, delay);\n  };\n}\n","import { useEffect } from 'react';\n\nexport const useSelectSearchFocus = (\n  isOpen: boolean,\n  searchFieldRef: React.RefObject<HTMLInputElement | null>,\n) => {\n  useEffect(() => {\n    if (isOpen) {\n      setTimeout(() => {\n        (searchFieldRef.current as unknown as HTMLInputElement)?.focus();\n      }, 100);\n    }\n  }, [isOpen, searchFieldRef]);\n};\n","import { useTheme } from '@embeddable.com/react';\nimport { i18n, i18nSetup } from '../../../../theme/i18n/i18n';\nimport styles from './EditorCard.module.css';\nimport { FC } from 'react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { Card, CardContent, CardContentInfo, CardHeader } from '../../../../../remarkable-ui';\nimport { IconAlertCircle } from '@tabler/icons-react';\n\ntype EditorCardProps = {\n  title?: string;\n  subtitle?: string;\n  children: React.ReactNode;\n  errorMessage?: string;\n};\n\nexport const EditorCard: FC<EditorCardProps> = ({\n  title,\n  subtitle,\n  children,\n  errorMessage,\n  ...props\n}) => {\n  const theme: Theme = useTheme() as Theme;\n  i18nSetup(theme);\n\n  const getDisplay = () => {\n    if (errorMessage) {\n      return (\n        <CardContentInfo\n          className={styles.error}\n          icon={IconAlertCircle}\n          title={i18n.t('editors.errorTitle')}\n          message={errorMessage}\n        />\n      );\n    }\n\n    return children;\n  };\n\n  return (\n    <Card className={styles.card} {...props}>\n      <CardHeader title={title} subtitle={subtitle} />\n      <CardContent>{getDisplay()}</CardContent>\n    </Card>\n  );\n};\n"],"names":["__iconNode","IconSearch","createReactComponent","SelectListOptions","children","disabled","props","jsx","clsx","styles","debounce","fn","delay","timer","args","useSelectSearchFocus","isOpen","searchFieldRef","useEffect","_a","EditorCard","title","subtitle","errorMessage","theme","useTheme","i18nSetup","getDisplay","CardContentInfo","IconAlertCircle","i18n","Card","CardHeader","CardContent"],"mappings":";;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,MAAMA,IAAa,CAAC,CAAC,QAAQ,EAAE,GAAK,8CAA8C,KAAO,QAAO,CAAE,GAAG,CAAC,QAAQ,EAAE,GAAK,gBAAgB,KAAO,QAAO,CAAE,CAAC,GAChJC,IAAaC,EAAqB,WAAW,UAAU,UAAUF,CAAU;;;GCDpEG,IAAgD,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,GAAGC,QAEnFC,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAWC,EAAKC,EAAO,aAAaJ,KAAYI,EAAO,QAAQ,GAAI,GAAGH,GACxE,UAAAF,EAAA,CACH;ACZG,SAASM,EACdC,GACAC,IAAQ,KAC0B;AAClC,MAAIC;AACJ,SAAO,IAAIC,MAAwB;AACjC,iBAAaD,CAAK,GAClBA,IAAQ,WAAW,MAAM;AACvB,MAAAF,EAAG,GAAGG,CAAI;AAAA,IACZ,GAAGF,CAAK;AAAA,EACV;AACF;ACVO,MAAMG,IAAuB,CAClCC,GACAC,MACG;AACH,EAAAC,EAAU,MAAM;AACd,IAAIF,KACF,WAAW,MAAM;;AACd,OAAAG,IAAAF,EAAe,YAAf,QAAAE,EAAwD;AAAA,IAC3D,GAAG,GAAG;AAAA,EAEV,GAAG,CAACH,GAAQC,CAAc,CAAC;AAC7B;;;GCEaG,IAAkC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAlB;AAAA,EACA,cAAAmB;AAAA,EACA,GAAGjB;AACL,MAAM;AACJ,QAAMkB,IAAeC,EAAA;AACrB,EAAAC,EAAUF,CAAK;AAEf,QAAMG,IAAa,MACbJ,IAEAhB,gBAAAA,EAAAA;AAAAA,IAACqB;AAAA,IAAA;AAAA,MACC,WAAWnB,EAAO;AAAA,MAClB,MAAMoB;AAAA,MACN,OAAOC,EAAK,EAAE,oBAAoB;AAAA,MAClC,SAASP;AAAA,IAAA;AAAA,EAAA,IAKRnB;AAGT,gCACG2B,GAAA,EAAK,WAAWtB,EAAO,MAAO,GAAGH,GAChC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACyB,GAAA,EAAW,OAAAX,GAAc,UAAAC,EAAA,CAAoB;AAAA,IAC9Cf,gBAAAA,EAAAA,IAAC0B,GAAA,EAAa,UAAAN,EAAA,EAAW,CAAE;AAAA,EAAA,GAC7B;AAEJ;","x_google_ignoreList":[0]}

package/dist/MultiSelectFieldPro.js

@@ -1,6 +1,6 @@
 import { defineComponent as i } from "@embeddable.com/react";
-import { u as r, v as s, x as d, y as u, F as m, V as t, G as c } from "./component.constants-DLcmipcp.js";
-import { a as p, b as f } from "./index-B7vfUPY1.js";
+import { o as r, t as s, u as d, v as u, M as m, V as t, I as c } from "./component.constants-gz--XNdD.js";
+import { M as p, a as f } from "./index-CfwN2oS1.js";
 const g = {
   name: "MultiSelectFieldPro",
   label: "Multi Select Field",

package/dist/PieChartPro.js

@@ -1,6 +1,6 @@
-import { u as a, w as s, v as t, x as o, y as n, z as i, E as r, A as m, B as l, V as d, G as c } from "./component.constants-DLcmipcp.js";
+import { o as a, J as s, t, u as o, v as n, w as i, K as r, x as m, y as l, V as d, I as c } from "./component.constants-gz--XNdD.js";
 import { defineComponent as p } from "@embeddable.com/react";
-import { P as u } from "./index-iZ4ZiouG.js";
+import { P as u } from "./index-a8uFwHQw.js";
 const C = {
   name: "PieChartPro",
   label: "Pie Chart",

package/dist/{SingleSelectField-BMXt2zwl.js → SingleSelectField-SswXqqUp.js}

@@ -1,21 +1,21 @@
-import { J as l, D, e as R, K as E, S as h, d as K } from "./component.constants-DLcmipcp.js";
-import { useState as i, useRef as k, useEffect as w, useMemo as B } from "react";
-import { u as J, d as M, I as N, S as P } from "./EditorCard-Cj1V2vRg.js";
-const A = ({
+import { j as l, U as R, Y as D, ae as E, W as h, X as k } from "./component.constants-gz--XNdD.js";
+import { useState as i, useRef as w, useEffect as B, useMemo as K } from "react";
+import { u as M, d as N, I as P, S as T } from "./EditorCard-0MZ3LzXU.js";
+const Y = ({
   value: t = "",
-  startIcon: j,
+  startIcon: p,
   options: a,
   disabled: d,
-  placeholder: p,
+  placeholder: C,
   isSearchable: u,
-  isClearable: C,
+  isClearable: S,
   isLoading: o,
   noOptionsMessage: g = "No options available",
   onChange: L,
   onSearch: s
 }) => {
-  const [f, v] = i(!1), [b, x] = i(""), [O, c] = i(t), m = k(null);
-  J(f, m), w(() => {
+  const [f, v] = i(!1), [b, x] = i(""), [O, c] = i(t), m = w(null);
+  M(f, m), B(() => {
     if (!t) {
       c("");
       return;
@@ -23,7 +23,7 @@ const A = ({
     const e = a.find((r) => r.value === t);
     e && c(e.label);
   }, [t, a]);
-  const n = B(() => s ? M(s) : void 0, [s]), F = u && !s ? a.filter((e) => e.label.toLowerCase().includes(b.toLowerCase())) : a, S = (e) => {
+  const n = K(() => s ? N(s) : void 0, [s]), F = u && !s ? a.filter((e) => e.label.toLowerCase().includes(b.toLowerCase())) : a, j = (e) => {
     if (x(""), L(e ?? ""), s == null || s(""), e === "")
       c("");
     else {
@@ -34,30 +34,30 @@ const A = ({
     x(e), n == null || n(e);
   };
   return /* @__PURE__ */ l.jsx(
-    D,
+    R,
     {
       open: f,
       onOpenChange: v,
       disabled: d,
       triggerComponent: /* @__PURE__ */ l.jsx(
-        K,
+        k,
         {
-          startIcon: j,
+          startIcon: p,
           "aria-label": "Select option",
-          placeholder: p,
+          placeholder: C,
           disabled: d,
           valueLabel: O,
-          onClear: () => S(""),
-          isClearable: C,
+          onClear: () => j(""),
+          isClearable: S,
           isLoading: o
         }
       ),
-      children: /* @__PURE__ */ l.jsxs(R, { children: [
+      children: /* @__PURE__ */ l.jsxs(D, { children: [
         u && /* @__PURE__ */ l.jsx(
           E,
           {
             ref: m,
-            startIcon: N,
+            startIcon: P,
             "aria-label": "Search options",
             placeholder: "Search…",
             role: "searchbox",
@@ -66,11 +66,11 @@ const A = ({
             onChange: I
           }
         ),
-        /* @__PURE__ */ l.jsxs(P, { disabled: o, children: [
+        /* @__PURE__ */ l.jsxs(T, { disabled: o, children: [
           F.map((e) => /* @__PURE__ */ l.jsx(
             h,
             {
-              onClick: () => S(e == null ? void 0 : e.value),
+              onClick: () => j(e == null ? void 0 : e.value),
               isSelected: e.value === t,
               ...e
             },
@@ -83,6 +83,6 @@ const A = ({
   );
 };
 export {
-  A as S
+  Y as S
 };
-//# sourceMappingURL=SingleSelectField-BMXt2zwl.js.map
+//# sourceMappingURL=SingleSelectField-SswXqqUp.js.map