solid-recharts 0.2.1 → 1.0.0

package/src/cartesian/Line.tsx

@@ -20,10 +20,10 @@
 //     `any`); the value comes from `getValueByDataKey`, which is genuinely
 //     untyped, and only x/y are needed to draw. It flows through `scale.map`
 //     (which accepts `unknown`) unchanged.
-import { createEffect, createMemo, createSignal, merge, Show, untrack } from "solid-js";
+import { createMemo, createSignal, Show, untrack, mergeProps, createEffect, on } from "solid-js";
 import { useActiveTooltipDataPoints } from "../hooks";
 import { selectActiveTooltipIndex } from "../state/selectors/tooltipSelectors";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
   AnimatedItems,
@@ -341,7 +341,7 @@ export const lineDefaultProps = {
 
 export const Line = (props: LineProps): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(lineDefaultProps, props);
+  const merged = mergeProps(lineDefaultProps, props);
   const isPanorama = useIsPanorama();
   const layout = useCartesianChartLayout();
   const id = useUniqueId("recharts-line", props.id);
@@ -499,19 +499,21 @@ export const Line = (props: LineProps): JSX.Element => {
   // settled dasharray the new curve's true length — mirroring recharts, which
   // recomputes totalLength on the post-animation re-render.
   createEffect(
-    () => ({ points: points(), showLabels: !isAnimating() }),
-    () => {
-      if (curveEl?.getTotalLength == null) {
-        return;
-      }
-      let length = 0;
-      try {
-        length = curveEl.getTotalLength() || 0;
-      } catch {
-        return; // getTotalLength can throw on detached/empty paths — keep the last value.
-      }
-      setTotalLength(length);
-    },
+    on(
+      () => ({ points: points(), showLabels: !isAnimating() }),
+      () => {
+        if (curveEl?.getTotalLength == null) {
+          return;
+        }
+        let length = 0;
+        try {
+          length = curveEl.getTotalLength() || 0;
+        } catch {
+          return; // getTotalLength can throw on detached/empty paths — keep the last value.
+        }
+        setTotalLength(length);
+      },
+    ),
   );
 
   // Raw user event handlers forwarded to the curve. recharts' StaticCurve spreads

package/src/cartesian/LineDrawShape.tsx

@@ -16,8 +16,8 @@
 //     forwards the element to the parent-supplied `forwardPathRef` so the parent
 //     (<Line>) can drive `shouldUpdatePreviousRef`/`getVisibleLength` off the same
 //     measured length.
-import { createEffect, createSignal, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createSignal, splitProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import { Curve, type CurveProps } from "../shape/Curve";
 import type { ShapeAnimationProps } from "../util/types";
 
@@ -145,14 +145,16 @@ export function LineDrawShape(props: LineDrawShapeProps): JSX.Element {
   // would force a synchronous SVG layout (reflow) each frame for a value nothing
   // reads. Guarding on visibleLength drops those per-frame reflows.
   createEffect(
-    () => ({ points: props.points, visibleLength: props.visibleLength }),
-    (deps) => {
-      if (deps.visibleLength == null || pathEl?.getTotalLength == null) {
-        return;
-      }
-      const length = getTotalLength(pathEl);
-      setTotalLength(length);
-    },
+    on(
+      () => ({ points: props.points, visibleLength: props.visibleLength }),
+      (deps) => {
+        if (deps.visibleLength == null || pathEl?.getTotalLength == null) {
+          return;
+        }
+        const length = getTotalLength(pathEl);
+        setTotalLength(length);
+      },
+    ),
   );
 
   const strokeDasharray = (): string | undefined => {
@@ -170,8 +172,7 @@ export function LineDrawShape(props: LineDrawShapeProps): JSX.Element {
   // Strip the animation-only props before forwarding to <Curve>; we set
   // connectNulls/strokeDasharray/pathRef explicitly below. `omit` keeps the
   // remaining props reactive (no destructuring of `props`).
-  const curveProps = omit(
-    props,
+  const curveProps = splitProps(props, [
     "animationElapsedTime",
     "isAnimating",
     "isEntrance",
@@ -179,7 +180,7 @@ export function LineDrawShape(props: LineDrawShapeProps): JSX.Element {
     "forwardPathRef",
     "strokeDasharray",
     "connectNulls",
-  );
+  ])[1];
 
   return (
     <Curve

package/src/cartesian/ReferenceArea.tsx

@@ -16,8 +16,8 @@
 //  - PERMANENT-N/A (by design, NOT deferred): the custom-element `shape` branch
 //    (React.cloneElement — use the render-function form). <Label>
 //    CHILDREN are not rendered (the `label` prop is).
-import { createMemo, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { Layer } from "../container/Layer";
 import {
   CartesianLabelContextProvider,
@@ -164,7 +164,7 @@ const referenceAreaDefaultProps = {
 } as const satisfies Partial<Props>;
 
 function ReferenceAreaImpl(props: Props): JSX.Element {
-  const merged = merge(referenceAreaDefaultProps, props);
+  const merged = mergeProps(referenceAreaDefaultProps, props);
   const clipPathId = useClipPathId();
   const isPanorama = useIsPanorama();
   const xAxisScale = useAppSelector((s) => selectAxisScale(s, "xAxis", merged.xAxisId, isPanorama));
@@ -243,7 +243,7 @@ export function ReferenceArea<
   XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
   YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
 >(props: Props<XValueType, YValueType>): JSX.Element {
-  const merged = merge(referenceAreaDefaultProps, props);
+  const merged = mergeProps(referenceAreaDefaultProps, props);
   const id = useUniqueId("recharts-reference-area");
   return (
     <>

package/src/cartesian/ReferenceDot.tsx

@@ -12,8 +12,8 @@
 //  - PERMANENT-N/A (by design, NOT deferred): the custom-element `shape` branch
 //    (React.cloneElement — use the render-function form);
 //    `children` is not rendered (CartesianLabelContext).
-import { createMemo, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { Layer } from "../container/Layer";
 import { Dot, type DotProps } from "../shape/Dot";
 import {
@@ -183,7 +183,7 @@ const referenceDotDefaultProps = {
 } as const satisfies Partial<Props>;
 
 function ReferenceDotImpl(props: Props): JSX.Element {
-  const merged = merge(referenceDotDefaultProps, props);
+  const merged = mergeProps(referenceDotDefaultProps, props);
   const clipPathId = useClipPathId();
   const isPanorama = useIsPanorama();
   const xAxisScale = useAppSelector((s) => selectAxisScale(s, "xAxis", merged.xAxisId, isPanorama));
@@ -255,7 +255,7 @@ export function ReferenceDot<
   XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
   YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
 >(props: Props<XValueType, YValueType>): JSX.Element {
-  const merged = merge(referenceDotDefaultProps, props);
+  const merged = mergeProps(referenceDotDefaultProps, props);
   const id = useUniqueId("recharts-reference-dot");
   return (
     <>

package/src/cartesian/ReferenceLine.tsx

@@ -16,8 +16,8 @@
 //    render-function form; the default-`<line>` branch is kept). <Label> CHILDREN
 //    are not rendered (the `label` prop is).
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createMemo, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { Layer } from "../container/Layer";
 import {
   CartesianLabelContextProvider,
@@ -282,7 +282,7 @@ const referenceLineDefaultProps = {
 } as const satisfies Partial<Props>;
 
 function ReferenceLineImpl(props: Props): JSX.Element {
-  const merged = merge(referenceLineDefaultProps, props);
+  const merged = mergeProps(referenceLineDefaultProps, props);
   const isPanorama = useIsPanorama();
   const clipPathId = useClipPathId();
   const viewBox = useViewBox();
@@ -384,7 +384,7 @@ export function ReferenceLine<
   XValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
   YValueType extends ReferenceCoordinateValue = ReferenceCoordinateValue,
 >(props: Props<XValueType, YValueType>): JSX.Element {
-  const merged = merge(referenceLineDefaultProps, props);
+  const merged = mergeProps(referenceLineDefaultProps, props);
   const id = useUniqueId("recharts-reference-line");
   return (
     <>

package/src/cartesian/RenderedTicksReporter.tsx

@@ -1,3 +1,4 @@
+import { createEffect, on } from "solid-js";
 // Ported from recharts 3.8.1 src/cartesian/CartesianAxis.tsx RenderedTicksReporter
 // (commit 7a23854).
 //
@@ -5,8 +6,7 @@
 // useXAxisTicks/useYAxisTicks hooks (and the tick-snap inverse scale) can read
 // them. Solid deviation: useEffect add + cleanup remove → createEffect + onCleanup
 // (the same effect-dispatch idiom the other Report* components use).
-import { createEffect } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAppStore } from "../state/hooks";
 import type { AxisId } from "../state/cartesianAxisSlice";
 import type { CartesianTickItem, TickItem } from "../util/types";
@@ -21,21 +21,23 @@ export function RenderedTicksReporter(props: {
   let prev: { axisType: "xAxis" | "yAxis"; axisId: AxisId } | null = null;
 
   createEffect(
-    (): { axisType: "xAxis" | "yAxis"; axisId: AxisId; ticks: ReadonlyArray<TickItem> } => ({
-      axisType: props.axisType,
-      axisId: props.axisId,
-      // Expose only the external tick shape (drop internal props).
-      ticks: props.ticks.map((t) => ({
-        value: t.value,
-        coordinate: t.coordinate,
-        offset: t.offset,
-        index: t.index,
-      })),
-    }),
-    (payload) => {
-      store?.actions.renderedTicks.setRenderedTicks(payload);
-      prev = { axisType: payload.axisType, axisId: payload.axisId };
-    },
+    on(
+      (): { axisType: "xAxis" | "yAxis"; axisId: AxisId; ticks: ReadonlyArray<TickItem> } => ({
+        axisType: props.axisType,
+        axisId: props.axisId,
+        // Expose only the external tick shape (drop internal props).
+        ticks: props.ticks.map((t) => ({
+          value: t.value,
+          coordinate: t.coordinate,
+          offset: t.offset,
+          index: t.index,
+        })),
+      }),
+      (payload) => {
+        store?.actions.renderedTicks.setRenderedTicks(payload);
+        prev = { axisType: payload.axisType, axisId: payload.axisId };
+      },
+    ),
   );
 
   unregisterOnCleanup(() => {

package/src/cartesian/Scatter.tsx

@@ -10,8 +10,8 @@
 // joint/fitting line) are wired.) Solid deviations:
 // resolveDefaultProps→merge; effect-dispatch registration → createEffect/onCleanup;
 // the `@ts-expect-error`-laden value plumbing is replaced with typed coercion.
-import { createMemo, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { useUniqueId } from "../util/useUniqueId";
@@ -383,7 +383,7 @@ const scatterErrorBarFormatter: ErrorBarDataPointFormatter = (
 
 export const Scatter = (props: ScatterProps): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(scatterDefaultProps, props);
+  const merged = mergeProps(scatterDefaultProps, props);
   const isPanorama = useIsPanorama();
   const id = useUniqueId("recharts-scatter", props.id);
   // `shape` is either a built-in symbol type or a custom render fn; resolve once.

package/src/cartesian/XAxis.tsx

@@ -11,7 +11,7 @@
 // recharts' `resolveDefaultProps`: explicit `undefined` falls back to defaults.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
 import { createMemo, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
   NiceTicksAlgorithm,

package/src/cartesian/YAxis.tsx

@@ -4,8 +4,8 @@
 // via createEffect + defaults resolved like recharts' resolveDefaultProps); the
 // visual `<CartesianAxis>` IS rendered at the bottom of this file.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createEffect, createMemo, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, Show, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import {
   NiceTicksAlgorithm,
@@ -225,42 +225,44 @@ export function YAxis<DataPointType = unknown, DataValueType = unknown>(
   // Dynamic Y-axis width: when `width="auto"` (and the label is not a function/element),
   // recharts measures the rendered tick-value DOM via `getCalculatedYAxisWidth` and feeds
   // the result back into the store with `updateYAxisWidth`. Mirror that with the codebase's
-  // two-arg createEffect(compute, apply): the compute tracks the reactive inputs (ticks +
+  // two-arg createEffect(on(compute, apply)): the compute tracks the reactive inputs (ticks +
   // size), the apply does the DOM measurement and the store write (untracked — so it cannot
   // re-trigger itself; the slice's `updateYAxisWidth` + the Math.round equality also guard
   // oscillation).
   let layerEl: SVGGElement | null = null;
   createEffect(
-    () => ({
-      ticks: ticks(),
-      size: size(),
-      width: props.width,
-      label: props.label,
-      id: yAxisId(),
-    }),
-    (inputs) => {
-      if (inputs.width !== "auto" || isLabelContentAFunction(inputs.label)) {
-        return;
-      }
-      const el = layerEl;
-      if (el == null || inputs.ticks == null || inputs.size == null || store == null) {
-        return;
-      }
-      const tickNodes = el.getElementsByClassName("recharts-cartesian-axis-tick-value");
-      if (tickNodes.length === 0) {
-        return;
-      }
-      const updatedYAxisWidth = getCalculatedYAxisWidth({
-        ticks: tickNodes,
-        label: undefined,
-        labelGapWithTick: 5,
-        tickSize: 6,
-        tickMargin: 2,
-      });
-      if (Math.round(inputs.size.width) !== Math.round(updatedYAxisWidth)) {
-        store.actions.cartesianAxis.updateYAxisWidth({ id: inputs.id, width: updatedYAxisWidth });
-      }
-    },
+    on(
+      () => ({
+        ticks: ticks(),
+        size: size(),
+        width: props.width,
+        label: props.label,
+        id: yAxisId(),
+      }),
+      (inputs) => {
+        if (inputs.width !== "auto" || isLabelContentAFunction(inputs.label)) {
+          return;
+        }
+        const el = layerEl;
+        if (el == null || inputs.ticks == null || inputs.size == null || store == null) {
+          return;
+        }
+        const tickNodes = el.getElementsByClassName("recharts-cartesian-axis-tick-value");
+        if (tickNodes.length === 0) {
+          return;
+        }
+        const updatedYAxisWidth = getCalculatedYAxisWidth({
+          ticks: tickNodes,
+          label: undefined,
+          labelGapWithTick: 5,
+          tickSize: 6,
+          tickMargin: 2,
+        });
+        if (Math.round(inputs.size.width) !== Math.round(updatedYAxisWidth)) {
+          store.actions.cartesianAxis.updateYAxisWidth({ id: inputs.id, width: updatedYAxisWidth });
+        }
+      },
+    ),
   );
 
   return (

package/src/cartesian/ZAxis.tsx

@@ -1,10 +1,11 @@
+import { mergeProps } from "solid-js";
 // Ported from recharts 3.8.1 src/cartesian/ZAxis.tsx (commit 7a23854).
 //
 // REGISTRATION-ONLY: ZAxis never renders (it has no ticks/line); it only pushes
 // settings into the cartesianAxis slice so Scatter can size its points by the z
 // value. Solid deviations: useLayoutEffect/prevRef → createEffect add/replace +
 // onCleanup remove (the XAxis/YAxis idiom); defaults via merge.
-import { merge } from "solid-js";
+
 import { useAppStore } from "../state/hooks";
 import { AxisId, ZAxisSettings } from "../state/cartesianAxisSlice";
 import { implicitZAxis } from "../state/selectors/axisSelectors";
@@ -35,7 +36,7 @@ export function ZAxis<DataPointType = unknown, DataValueType = unknown>(
   props: ZAxisProps<DataPointType, DataValueType>,
 ): null {
   const store = useAppStore();
-  const merged = merge(zAxisDefaultProps, props);
+  const merged = mergeProps(zAxisDefaultProps, props);
 
   if (store != null) {
     registerInStore<ZAxisSettings>(

package/src/chart/AreaChart.tsx

@@ -1,7 +1,7 @@
 // Ported from recharts 3.8.1 src/chart/AreaChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart
 // (mirrors LineChart — differs only in chartName / allowed tooltip event types).
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/BarChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/BarChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/CartesianChart.tsx

@@ -1,11 +1,12 @@
+import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/CartesianChart.tsx (commit 7a23854).
 //
 // Solid deviations: `forwardRef` → `ref` prop; `resolveDefaultProps` → per-field
 // `?? default` accessors (see the defaults-use-solid-merge memory — using
 // explicit nullish-coalescing avoids `merge`'s undefined-override gotcha AND the
 // required-ness typing gap). Provider + Report components mirror recharts.
-import { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { ChartOptions } from "../state/optionsSlice";
 import { RechartsStoreProvider } from "../state/RechartsStoreProvider";
 import { ChartDataContextProvider } from "../context/chartDataContext";
@@ -83,7 +84,7 @@ export const CartesianChart = (props: CartesianChartOptions): JSX.Element => {
       {/* Spread WITHOUT children (a `{...cp()}` spread eagerly evaluates the
           children getter here, before the provider sets context — running them
           outside the store); pass children as a lazy JSX child instead. */}
-      <CategoricalChart {...omit(cp(), "children")} ref={props.ref}>
+      <CategoricalChart {...splitProps(cp(), ["children"])[1]} ref={props.ref}>
         {cp().children}
       </CategoricalChart>
     </RechartsStoreProvider>

package/src/chart/CategoricalChart.tsx

@@ -1,10 +1,11 @@
+import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/CategoricalChart.tsx (commit 7a23854).
 //
 // Solid deviations: `forwardRef` → `ref` prop; no destructuring (omit + props);
 // `className` → `class`. The `compact` (Brush panorama) branch is deferred. Event
 // handlers are not forwarded yet (RechartsWrapper is render-only).
-import { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { RootSurface } from "../container/RootSurface";
 import { RechartsWrapper } from "./RechartsWrapper";
 import { ClipPathProvider } from "../container/ClipPathProvider";
@@ -18,8 +19,7 @@ export interface CategoricalChartProps extends CartesianChartProps {
 export const CategoricalChart = (props: CategoricalChartProps): JSX.Element => {
   const attrs = (): Record<string, unknown> =>
     svgPropertiesNoEventsKeepCase({
-      ...omit(
-        props,
+      ...splitProps(props, [
         "width",
         "height",
         "responsive",
@@ -30,7 +30,7 @@ export const CategoricalChart = (props: CategoricalChartProps): JSX.Element => {
         "title",
         "desc",
         "ref",
-      ),
+      ])[1],
     });
 
   return (

package/src/chart/ComposedChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/ComposedChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/FunnelChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/FunnelChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/LineChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/LineChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; the user-facing convenience wrapper over CartesianChart.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/PieChart.tsx

@@ -1,3 +1,4 @@
+import { mergeProps, splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/PieChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; the user-facing convenience wrapper over PolarChart.
 // `resolveDefaultProps` → Solid `merge` (lazy proxy — does NOT eagerly evaluate
@@ -5,8 +6,8 @@
 // (layout "centric", startAngle 0, endAngle 360) win over PolarChart's polar
 // defaults. `ref` is omitted from categoricalChartProps and passed separately,
 // mirroring the reference's forwardRef split.
-import { merge, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { PolarChart } from "./PolarChart";
 import { PolarChartProps, TooltipEventType } from "../util/types";
@@ -26,7 +27,7 @@ export interface PieChartProps<DataPointType = unknown> extends PolarChartProps<
 export function PieChart<DataPointType = unknown>(
   props: PieChartProps<DataPointType>,
 ): JSX.Element {
-  const categoricalChartProps = merge(defaultPieChartProps, omit(props, "ref"));
+  const categoricalChartProps = mergeProps(defaultPieChartProps, splitProps(props, ["ref"])[1]);
 
   return (
     <PolarChart

package/src/chart/PolarChart.tsx

@@ -1,3 +1,4 @@
+import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/PolarChart.tsx (commit 7a23854).
 //
 // Solid deviations: `forwardRef` → `ref` prop; `resolveDefaultProps` → per-field
@@ -7,8 +8,8 @@
 // The polar geometry props (cx/cy/innerRadius/outerRadius/startAngle/endAngle)
 // pass through to CategoricalChart exactly as in the reference — svgPropertiesNoEvents
 // forwards cx/cy onto the root <svg> (faithful) and drops the rest.
-import { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { ChartOptions } from "../state/optionsSlice";
 import { RechartsStoreProvider } from "../state/RechartsStoreProvider";
 import { ChartDataContextProvider } from "../context/chartDataContext";
@@ -89,7 +90,7 @@ export const PolarChart = (props: PolarChartOptions): JSX.Element => {
       {/* Spread WITHOUT children (a `{...cp()}` spread eagerly evaluates the
           children getter here, before the provider sets context — running them
           outside the store); pass children as a lazy JSX child instead. */}
-      <CategoricalChart {...omit(cp(), "children")} ref={props.ref}>
+      <CategoricalChart {...splitProps(cp(), ["children"])[1]} ref={props.ref}>
         {cp().children}
       </CategoricalChart>
     </RechartsStoreProvider>

package/src/chart/RadarChart.tsx

@@ -1,8 +1,9 @@
+import { mergeProps, splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/RadarChart.tsx (commit 7a23854).
 // `forwardRef`→`ref` prop; `resolveDefaultProps`→`merge` (lazy proxy, see PieChart).
 // RadarChart-specific defaults: layout "centric", startAngle 90, endAngle -270.
-import { merge, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { PolarChart } from "./PolarChart";
 import { PolarChartProps, TooltipEventType } from "../util/types";
@@ -22,7 +23,7 @@ export interface RadarChartProps<DataPointType = unknown> extends PolarChartProp
 export function RadarChart<DataPointType = unknown>(
   props: RadarChartProps<DataPointType>,
 ): JSX.Element {
-  const categoricalChartProps = merge(defaultRadarChartProps, omit(props, "ref"));
+  const categoricalChartProps = mergeProps(defaultRadarChartProps, splitProps(props, ["ref"])[1]);
 
   return (
     <PolarChart

package/src/chart/RadialBarChart.tsx

@@ -1,8 +1,9 @@
+import { mergeProps, splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/RadialBarChart.tsx (commit 7a23854).
 // `forwardRef`→`ref` prop; `resolveDefaultProps`→`merge`. RadialBarChart defaults:
 // layout "radial", startAngle 0, endAngle 360 (PolarChart fills cx/cy/radii).
-import { merge, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { PolarChart } from "./PolarChart";
 import { PolarChartProps, TooltipEventType } from "../util/types";
@@ -24,7 +25,10 @@ export interface RadialBarChartProps<
 export function RadialBarChart<DataPointType = unknown>(
   props: RadialBarChartProps<DataPointType>,
 ): JSX.Element {
-  const categoricalChartProps = merge(defaultRadialBarChartProps, omit(props, "ref"));
+  const categoricalChartProps = mergeProps(
+    defaultRadialBarChartProps,
+    splitProps(props, ["ref"])[1],
+  );
 
   return (
     <PolarChart