@zuilib/charts 0.3.0

package/dist/chart-tooltip.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { F as FormatToken } from './chart-spec-CH0tAkLG.js';
+
+/**
+ * Themed tooltip panel for charts. Recharts' `Tooltip` wires it into the
+ * chart; pass `content={<ChartTooltipPanel />}` to render it on ZUI tokens:
+ *
+ * ```tsx
+ * import { Tooltip } from 'recharts'
+ *
+ * <Tooltip cursor={tooltipCursorDefaults} content={<ChartTooltipPanel />} />
+ * ```
+ */
+
+interface TooltipEntry {
+    dataKey?: string | number;
+    name?: string | number;
+    value?: unknown;
+    color?: string;
+    payload?: Record<string, unknown>;
+}
+interface ChartTooltipPanelProps {
+    /** Injected by Recharts. */
+    active?: boolean;
+    /** Injected by Recharts. */
+    payload?: TooltipEntry[];
+    /** Injected by Recharts: the label row's value (the x value). */
+    label?: string | number;
+    /** Format of the label row (the x value). @default 'none' */
+    labelFormat?: FormatToken;
+    /** Format for rows whose series declares none. @default 'number' */
+    valueFormat?: FormatToken;
+    /** Renders the label row. @default true */
+    showLabel?: boolean;
+    /** Extra classes on the panel. */
+    className?: string;
+}
+/**
+ * Tooltip panel on popover tokens: a color chip per row, values through the
+ * chart's formatters.
+ */
+declare function ChartTooltipPanel({ active, payload, label, labelFormat, valueFormat, showLabel, className, }: ChartTooltipPanelProps): ReactNode;
+
+export { ChartTooltipPanel, type ChartTooltipPanelProps, ChartTooltipPanel as default };

package/dist/chart-tooltip.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  ChartTooltipPanel,
+  chart_tooltip_default
+} from "./chunk-PV27RZSV.js";
+import "./chunk-IPOBQIYU.js";
+import "./chunk-7WJ26NHR.js";
+export {
+  ChartTooltipPanel,
+  chart_tooltip_default as default
+};

package/dist/chart.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { c as ChartLabels, C as ChartConfig } from './chart-frame-B9fxUxGG.js';
+import { FormatterFn, FormatterFactory } from './format.js';
+import { e as ChartSpec, d as ChartRow, c as ChartMarkEvent } from './chart-spec-CH0tAkLG.js';
+import { ChartRegistry, CustomChartSpec, AnyChartSpec } from './registry.js';
+import './authoring.js';
+import './cross-filter.js';
+import 'react/jsx-runtime';
+
+/**
+ * The config-driven renderer: one component that turns a serializable
+ * `ChartSpec` plus rows into a themed, interactive chart. Inside a
+ * `CrossFilterProvider`, mark clicks cross-filter; without one they still
+ * report through `onMarkClick`. Dispatch runs through a `ChartRegistry`
+ * (the built-ins by default), so apps register their own chart types
+ * instead of forking the component.
+ */
+
+interface ChartProps {
+    /** The serializable chart description. */
+    spec: ChartSpec;
+    /** The rows behind the chart. */
+    rows: ChartRow[];
+    /**
+     * The chart types the spec may name. Defaults to the built-ins; pass
+     * `createChartRegistry(defaultChartTypes, yourDefs)` to add or override
+     * types without forking the component.
+     */
+    registry?: ChartRegistry;
+    /** Custom formatter tokens the spec may name (functions stay out of the spec). */
+    formats?: Record<string, FormatterFn | FormatterFactory>;
+    /** BCP 47 tag for formatted values. @default the user's locale */
+    locale?: string;
+    /** Merged onto the container. */
+    className?: string;
+    /** Fixed pixel size (tests, SSR); responsive otherwise. */
+    width?: number;
+    height?: number;
+    /** Responsive width/height ratio when `height` is left out. @default 16/9 */
+    aspect?: number;
+    /** Renders a skeleton instead of the chart. @default false */
+    loading?: boolean;
+    /** Renders an error state instead of the chart. */
+    error?: ReactNode;
+    /** Renders when `rows` is empty. @default the `noData` label */
+    emptyState?: ReactNode;
+    /** Accessible name of the figure. @default the spec's title */
+    ariaLabel?: string;
+    /** Series fields hidden by the legend (controlled; kept internally when left out). */
+    hiddenSeries?: string[];
+    /** Series fields hidden initially when uncontrolled. @default [] */
+    defaultHiddenSeries?: string[];
+    /** Reports the next hidden set on a legend interaction. */
+    onHiddenSeriesChange?: (fields: string[]) => void;
+    /** Every mark click, whether or not a `CrossFilterProvider` is present. */
+    onMarkClick?: (event: ChartMarkEvent) => void;
+    /** String overrides for another language. */
+    labels?: Partial<ChartLabels>;
+    /** Mark entrance animation. @default true, unless the user prefers reduced motion */
+    animate?: boolean;
+}
+/**
+ * `<Chart>` with an app-extended registry: `spec` may be any registered
+ * `type`. The custom-spec escape hatch only opens together with an
+ * explicit `registry`, so built-in specs keep full type checking.
+ */
+interface CustomChartProps extends Omit<ChartProps, 'spec' | 'registry'> {
+    spec: CustomChartSpec;
+    registry: ChartRegistry;
+}
+/** The series config (labels, palette slots, formats) a spec implies. */
+declare function configFromSpec(spec: AnyChartSpec, registry?: ChartRegistry): ChartConfig;
+/** The field mark clicks and the category legend cross-filter on. */
+declare function crossFilterFieldOf(spec: AnyChartSpec, registry?: ChartRegistry): string;
+declare function Chart(props: ChartProps): ReactNode;
+declare function Chart(props: CustomChartProps): ReactNode;
+
+export { Chart, type ChartProps, type CustomChartProps, configFromSpec, crossFilterFieldOf, Chart as default };

package/dist/chart.js

@@ -0,0 +1,24 @@
+"use client";
+import {
+  Chart,
+  chart_default,
+  configFromSpec,
+  crossFilterFieldOf
+} from "./chunk-BFTWWI46.js";
+import "./chunk-YMPZODMC.js";
+import "./chunk-HNJKYOPE.js";
+import "./chunk-G4FXJJ66.js";
+import "./chunk-7WABBHMT.js";
+import "./chunk-3VGLTPGL.js";
+import "./chunk-PV27RZSV.js";
+import "./chunk-SHQZRND7.js";
+import "./chunk-WVWGHGZE.js";
+import "./chunk-UN3XPBZ5.js";
+import "./chunk-IPOBQIYU.js";
+import "./chunk-7WJ26NHR.js";
+export {
+  Chart,
+  configFromSpec,
+  crossFilterFieldOf,
+  chart_default as default
+};

package/dist/chunk-3VGLTPGL.js

@@ -0,0 +1,19 @@
+// src/dev.ts
+function isDev() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (!isDev() || warned.has(key)) return;
+  warned.add(key);
+  console.warn(message);
+}
+
+export {
+  isDev,
+  warnOnce
+};

package/dist/chunk-6QTIAMA3.js

@@ -0,0 +1,169 @@
+import {
+  createFormatters
+} from "./chunk-7WABBHMT.js";
+import {
+  defaultChartLabels
+} from "./chunk-UN3XPBZ5.js";
+import {
+  ChartContext
+} from "./chunk-IPOBQIYU.js";
+import {
+  CHART_COLOR_COUNT,
+  seriesColorProperty
+} from "./chunk-7WJ26NHR.js";
+
+// src/chart-frame.tsx
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { ResponsiveContainer } from "recharts";
+import Alert from "@zuilib/components/alert";
+import { cn } from "@zuilib/components/lib/cn";
+
+// src/legend-toggle.ts
+function legendToggle(allFields, hidden, field, options) {
+  if (options?.additive) {
+    return hidden.includes(field) ? hidden.filter((f) => f !== field) : [...hidden, field];
+  }
+  const visible = allFields.filter((f) => !hidden.includes(f));
+  const isolated = visible.length === 1 && visible[0] === field;
+  return isolated ? [] : allFields.filter((f) => f !== field);
+}
+
+// src/chart-frame.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartFrame = forwardRef(
+  ({
+    config,
+    children,
+    width,
+    height,
+    aspect = 16 / 9,
+    loading = false,
+    error,
+    emptyState,
+    empty = false,
+    ariaLabel,
+    labels: labelOverrides,
+    formats: customFormats,
+    locale,
+    hiddenSeries,
+    defaultHiddenSeries,
+    onHiddenSeriesChange,
+    categoryField,
+    categories,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const chartId = useId().replace(/:/g, "");
+    const labels = useMemo(() => ({ ...defaultChartLabels, ...labelOverrides }), [labelOverrides]);
+    const formats = useMemo(() => createFormatters(locale, customFormats), [locale, customFormats]);
+    const [innerHidden, setInnerHidden] = useState(defaultHiddenSeries ?? []);
+    const hidden = hiddenSeries ?? innerHidden;
+    const allFields = useMemo(() => Object.keys(config), [config]);
+    const onLegendClick = useCallback(
+      (field, options) => {
+        const next = legendToggle(allFields, hiddenSeries ?? innerHidden, field, options);
+        if (hiddenSeries === void 0) setInnerHidden(next);
+        onHiddenSeriesChange?.(next);
+      },
+      [allFields, hiddenSeries, innerHidden, onHiddenSeriesChange]
+    );
+    const context = useMemo(
+      () => ({ config, formats, labels, hiddenSeries: hidden, onLegendClick, categoryField, categories }),
+      [config, formats, labels, hidden, onLegendClick, categoryField, categories]
+    );
+    const colorStyle = useMemo(() => {
+      const vars = {};
+      Object.entries(config).forEach(([field, series], index) => {
+        const slot = Math.min(index + 1, CHART_COLOR_COUNT);
+        vars[seriesColorProperty(field)] = series.color ?? (series.theme ? series.theme.light : `var(--chart-${slot})`);
+      });
+      return vars;
+    }, [config]);
+    const themed = useMemo(
+      () => Object.entries(config).filter((entry) => !!entry[1].theme && !entry[1].color),
+      [config]
+    );
+    const fixedSize = typeof width === "number" && typeof height === "number";
+    let body;
+    if (loading) {
+      body = /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "chart-skeleton",
+          role: "status",
+          "aria-label": labels.loading,
+          className: "bg-muted h-full min-h-32 w-full animate-pulse rounded-md motion-reduce:animate-none"
+        }
+      );
+    } else if (error !== void 0 && error !== null && error !== false) {
+      body = /* @__PURE__ */ jsxs(Alert, { variant: "destructive", "data-slot": "chart-error", children: [
+        /* @__PURE__ */ jsx(Alert.Title, { children: labels.chartError }),
+        typeof error === "boolean" ? null : /* @__PURE__ */ jsx(Alert.Description, { children: error })
+      ] });
+    } else if (empty) {
+      body = /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "chart-empty",
+          className: "text-muted-foreground flex h-full min-h-32 w-full items-center justify-center text-sm",
+          children: emptyState ?? labels.noData
+        }
+      );
+    } else {
+      const chart = Children.only(children);
+      if (fixedSize && isValidElement(chart)) {
+        body = cloneElement(chart, { width, height });
+      } else {
+        body = /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", ...height !== void 0 ? { height } : { aspect }, children: chart });
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "chart",
+        "data-chart": chartId,
+        role: "figure",
+        "aria-label": ariaLabel,
+        className: cn(
+          "text-foreground text-xs [&_.recharts-surface]:outline-none [&_.recharts-sector]:outline-none",
+          fixedSize ? "" : "w-full",
+          className
+        ),
+        style: { ...colorStyle, ...style },
+        ...props,
+        children: [
+          themed.length > 0 && /* @__PURE__ */ jsx(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: [
+                  `[data-chart="${chartId}"]{${themed.map(([field, s]) => `${seriesColorProperty(field)}:${s.theme.light};`).join("")}}`,
+                  `.dark [data-chart="${chartId}"]{${themed.map(([field, s]) => `${seriesColorProperty(field)}:${s.theme.dark};`).join("")}}`
+                ].join("\n")
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(ChartContext.Provider, { value: context, children: body })
+        ]
+      }
+    );
+  }
+);
+ChartFrame.displayName = "ChartFrame";
+var chart_frame_default = ChartFrame;
+
+export {
+  ChartFrame,
+  chart_frame_default
+};

package/dist/chunk-7WABBHMT.js

@@ -0,0 +1,88 @@
+import {
+  isDev
+} from "./chunk-3VGLTPGL.js";
+
+// src/format.ts
+function toNumber(value) {
+  const n = typeof value === "string" ? Number(value) : value;
+  return typeof n === "number" && Number.isFinite(n) ? n : null;
+}
+function toDate(value) {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  if (typeof value === "number" || typeof value === "string") {
+    const d = new Date(value);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  return null;
+}
+function numberFormatter(locale, options) {
+  const nf = new Intl.NumberFormat(locale, options);
+  return (value) => {
+    const n = toNumber(value);
+    return n === null ? String(value ?? "") : nf.format(n);
+  };
+}
+function dateFormatter(locale, options) {
+  const df = new Intl.DateTimeFormat(locale, options);
+  return (value) => {
+    const d = toDate(value);
+    return d === null ? String(value ?? "") : df.format(d);
+  };
+}
+var DATE_STYLES = {
+  short: { month: "short", day: "numeric" },
+  medium: { year: "numeric", month: "short", day: "numeric" },
+  long: { year: "numeric", month: "long", day: "numeric" }
+};
+var DATETIME_STYLES = {
+  short: { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" },
+  medium: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }
+};
+var builtins = {
+  none: () => (value) => String(value ?? ""),
+  number: (_arg, locale) => numberFormatter(locale, { maximumFractionDigits: 2 }),
+  compact: (_arg, locale) => numberFormatter(locale, { notation: "compact", maximumFractionDigits: 1 }),
+  /** Expects a 0–1 fraction (matches `stacked: 'percent'` output). */
+  percent: (_arg, locale) => numberFormatter(locale, { style: "percent", maximumFractionDigits: 1 }),
+  currency: (arg, locale) => numberFormatter(locale, { style: "currency", currency: arg || "USD", maximumFractionDigits: 0 }),
+  date: (arg, locale) => dateFormatter(locale, DATE_STYLES[arg] ?? DATE_STYLES.medium),
+  datetime: (arg, locale) => dateFormatter(locale, DATETIME_STYLES[arg] ?? DATETIME_STYLES.medium)
+};
+var fallbackFormatter = (value) => String(value ?? "");
+function createFormatters(locale, custom) {
+  const entries = { ...builtins, ...custom };
+  const cache = /* @__PURE__ */ new Map();
+  function build(token) {
+    const sep = token.indexOf(":");
+    const name = sep === -1 ? token : token.slice(0, sep);
+    const arg = sep === -1 ? "" : token.slice(sep + 1);
+    const entry = entries[name];
+    if (!entry) return null;
+    const made = entry(arg, locale);
+    return typeof made === "function" ? made : entry;
+  }
+  return {
+    resolve(token, fallback) {
+      const name = token ?? fallback;
+      if (!name || name === "none") return fallbackFormatter;
+      const cached = cache.get(name);
+      if (cached) return cached;
+      let fn = null;
+      try {
+        fn = build(name);
+      } catch {
+        fn = null;
+      }
+      if (!fn) {
+        if (isDev()) console.warn(`@zuilib/charts: unknown format token "${name}"; falling back to String`);
+        fn = fallback && fallback !== name ? this.resolve(fallback) : fallbackFormatter;
+      }
+      cache.set(name, fn);
+      return fn;
+    }
+  };
+}
+
+export {
+  createFormatters
+};

package/dist/chunk-7WJ26NHR.js

@@ -0,0 +1,48 @@
+// src/chart-defaults.ts
+var CHART_COLOR_COUNT = 8;
+function chartColorVar(slot) {
+  const n = Math.min(Math.max(Math.trunc(slot), 1), CHART_COLOR_COUNT);
+  return `var(--chart-${n})`;
+}
+function seriesColorVar(field) {
+  return `var(--color-${sanitizeField(field)})`;
+}
+function seriesColorProperty(field) {
+  return `--color-${sanitizeField(field)}`;
+}
+function sanitizeField(field) {
+  return field.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+var xAxisDefaults = {
+  tickLine: false,
+  axisLine: false,
+  tickMargin: 8,
+  tick: { fill: "var(--muted-foreground)", fontSize: 12 }
+};
+var yAxisDefaults = {
+  tickLine: false,
+  axisLine: false,
+  tickMargin: 8,
+  tick: { fill: "var(--muted-foreground)", fontSize: 12 }
+};
+var cartesianGridDefaults = {
+  stroke: "var(--border)",
+  strokeDasharray: "3 3",
+  vertical: false
+};
+var tooltipCursorDefaults = { fill: "var(--accent)", opacity: 0.5 };
+var tooltipCrosshairDefaults = { stroke: "var(--border)", strokeWidth: 1 };
+var DIMMED_OPACITY = 0.35;
+
+export {
+  CHART_COLOR_COUNT,
+  chartColorVar,
+  seriesColorVar,
+  seriesColorProperty,
+  xAxisDefaults,
+  yAxisDefaults,
+  cartesianGridDefaults,
+  tooltipCursorDefaults,
+  tooltipCrosshairDefaults,
+  DIMMED_OPACITY
+};

package/dist/chunk-BFTWWI46.js

@@ -0,0 +1,148 @@
+import {
+  defaultChartRegistry
+} from "./chunk-YMPZODMC.js";
+import {
+  prefersReducedMotion
+} from "./chunk-HNJKYOPE.js";
+import {
+  chart_frame_default
+} from "./chunk-G4FXJJ66.js";
+import {
+  createFormatters
+} from "./chunk-7WABBHMT.js";
+import {
+  warnOnce
+} from "./chunk-3VGLTPGL.js";
+import {
+  useOptionalCrossFilter
+} from "./chunk-WVWGHGZE.js";
+import {
+  chartColorVar
+} from "./chunk-7WJ26NHR.js";
+
+// src/chart.tsx
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function configFromSpec(spec, registry = defaultChartRegistry) {
+  const fromDef = registry.types.get(spec.type)?.configFrom?.(spec);
+  if (fromDef) return fromDef;
+  if ("series" in spec && Array.isArray(spec.series)) {
+    return Object.fromEntries(
+      spec.series.map((series) => [
+        series.field,
+        {
+          label: series.label ?? series.field,
+          color: series.paletteSlot ? chartColorVar(series.paletteSlot) : void 0,
+          format: series.format
+        }
+      ])
+    );
+  }
+  return {};
+}
+function crossFilterFieldOf(spec, registry = defaultChartRegistry) {
+  const field = registry.types.get(spec.type)?.crossFilterField?.(spec);
+  if (field !== void 0) return field;
+  const xKey = spec.xKey;
+  return typeof xKey === "string" ? xKey : "";
+}
+function categoriesOf(spec, rows, registry) {
+  const field = categoryFieldOf(spec, registry);
+  if (!field) return void 0;
+  const values = [];
+  for (const row of rows) {
+    const value = row[field];
+    if ((typeof value === "string" || typeof value === "number") && !values.includes(value)) values.push(value);
+  }
+  return values.map((value, index) => ({ value, color: chartColorVar(index + 1) }));
+}
+function categoryFieldOf(spec, registry) {
+  return registry.types.get(spec.type)?.categoryField?.(spec);
+}
+function renderSpec(props, registry) {
+  const def = registry.types.get(props.spec.type);
+  if (!def) {
+    warnOnce(`type-${props.spec.type}`, `@zuilib/charts: unknown chart type "${props.spec.type}"`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx(def.render, { ...props });
+}
+function Chart({
+  spec,
+  rows,
+  registry,
+  formats,
+  locale,
+  className,
+  width,
+  height,
+  aspect,
+  loading,
+  error,
+  emptyState,
+  ariaLabel,
+  hiddenSeries,
+  defaultHiddenSeries,
+  onHiddenSeriesChange,
+  onMarkClick,
+  labels,
+  animate
+}) {
+  const chartRegistry = registry ?? defaultChartRegistry;
+  const crossFilter = useOptionalCrossFilter();
+  const formatters = useMemo(() => createFormatters(locale, formats), [locale, formats]);
+  const config = useMemo(() => configFromSpec(spec, chartRegistry), [spec, chartRegistry]);
+  const [innerHidden, setInnerHidden] = useState(defaultHiddenSeries ?? []);
+  const hidden = hiddenSeries ?? innerHidden;
+  const onHiddenChange = (next) => {
+    if (hiddenSeries === void 0) setInnerHidden(next);
+    onHiddenSeriesChange?.(next);
+  };
+  const markInteraction = {
+    field: crossFilterFieldOf(spec, chartRegistry),
+    crossFilter,
+    interaction: spec.interaction ?? "filter",
+    onMarkClick
+  };
+  return /* @__PURE__ */ jsx(
+    chart_frame_default,
+    {
+      config,
+      className,
+      width,
+      height,
+      aspect,
+      loading,
+      error,
+      emptyState,
+      empty: rows.length === 0,
+      ariaLabel: ariaLabel ?? spec.title,
+      labels,
+      formats,
+      locale,
+      hiddenSeries: hidden,
+      onHiddenSeriesChange: onHiddenChange,
+      categoryField: categoryFieldOf(spec, chartRegistry),
+      categories: useMemo(() => categoriesOf(spec, rows, chartRegistry), [spec, rows, chartRegistry]),
+      children: renderSpec(
+        {
+          spec,
+          rows,
+          formats: formatters,
+          hiddenSeries: hidden,
+          markInteraction,
+          animate: animate ?? !prefersReducedMotion()
+        },
+        chartRegistry
+      )
+    }
+  );
+}
+var chart_default = Chart;
+
+export {
+  configFromSpec,
+  crossFilterFieldOf,
+  Chart,
+  chart_default
+};

package/dist/chunk-D7K23UFP.js

@@ -0,0 +1,43 @@
+// src/interop.ts
+function toColumnFilters(state) {
+  return state.filters.filter((f) => f.values.length > 0).map((f) => ({ id: f.field, value: [...f.values] }));
+}
+function fromColumnFilters(columnFilters, fields) {
+  if (!Array.isArray(columnFilters)) return [];
+  const entries = [];
+  for (const field of fields) {
+    const filter = columnFilters.find((f) => f && typeof f === "object" && f.id === field);
+    if (!filter || !Array.isArray(filter.value)) continue;
+    const values = filter.value.filter(
+      (v) => typeof v === "string" || typeof v === "number"
+    );
+    if (values.length) entries.push({ field, values });
+  }
+  return entries;
+}
+function toHighlight(rows, field) {
+  if (!Array.isArray(rows)) return null;
+  const values = [
+    ...new Set(
+      rows.map((row) => row && typeof row === "object" ? row[field] : void 0).filter((v) => typeof v === "string" || typeof v === "number")
+    )
+  ];
+  return values.length ? { field, values } : null;
+}
+function applyFilters(rows, state, options) {
+  const active = state.filters.filter((f) => f.values.length > 0 && f.field !== options?.except);
+  if (!active.length) return [...rows];
+  return rows.filter(
+    (row) => active.every((f) => {
+      const value = row?.[f.field];
+      return (typeof value === "string" || typeof value === "number") && f.values.includes(value);
+    })
+  );
+}
+
+export {
+  toColumnFilters,
+  fromColumnFilters,
+  toHighlight,
+  applyFilters
+};