layerchart 2.0.0-next.60 → 2.0.0-next.61

package/dist/components/charts/ArcChart/ArcChart.canvas.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { ArcChartProps } from './ArcChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import ArcChartBase from './ArcChart.base.svelte';
+  import Chart from '../../Chart/Chart.canvas.svelte';
+  import Arc from '../../Arc/Arc.canvas.svelte';
+  import ArcLabel from '../../ArcLabel/ArcLabel.canvas.svelte';
+  import Group from '../../Group/Group.canvas.svelte';
+  import type { ArcChartProps } from './ArcChart.shared.svelte.js';
+
+  let props: ArcChartProps<TData> = $props();
+</script>
+
+<ArcChartBase {Chart} {Arc} {ArcLabel} {Group} {...props} />

package/dist/components/charts/ArcChart/ArcChart.canvas.svelte.d.ts

@@ -0,0 +1,26 @@
+export type { ArcChartProps } from './ArcChart.shared.svelte.js';
+import type { ArcChartProps } from './ArcChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: ArcChartProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ArcChart: $$IsomorphicComponent;
+type ArcChart<TData> = InstanceType<typeof ArcChart<TData>>;
+export default ArcChart;

package/dist/components/charts/{ArcChart.svelte.d.ts → ArcChart/ArcChart.shared.svelte.d.ts}

@@ -1,19 +1,18 @@
-import type { ComponentProps, Snippet } from 'svelte';
-import type { ChartProps } from '../Chart.svelte';
-import type { ChartState } from '../../contexts/chart.js';
-import type { ArcPropsWithoutHTML } from '../Arc.svelte';
-import type { Accessor } from '../../utils/common.js';
-import type { SeriesData } from './types.js';
-import Arc from '../Arc.svelte';
-import { type ArcLabelConfig } from '../ArcLabel.svelte';
-import Group from '../Group.svelte';
+import type { Component, Snippet } from 'svelte';
+import type { ChartProps } from '../../Chart/Chart.shared.svelte.js';
+import type { ChartState } from '../../../contexts/chart.js';
+import type { ArcProps, ArcPropsWithoutHTML } from '../../Arc/Arc.shared.svelte.js';
+import type { ArcLabelConfig } from '../../ArcLabel/ArcLabel.shared.svelte.js';
+import type { GroupProps } from '../../Group/Group.shared.svelte.js';
+import type { Accessor } from '../../../utils/common.js';
+import type { SeriesData } from '../types.js';
 export type ArcChartExtraSnippetProps<TData> = {
     key: Accessor<TData>;
     label: Accessor<TData>;
     value: Accessor<TData>;
     visibleData: TData[];
-    getGroupProps: () => ComponentProps<typeof Group>;
-    getArcProps: (s: SeriesData<TData, typeof Arc>, i: number) => ComponentProps<typeof Arc>;
+    getGroupProps: () => GroupProps;
+    getArcProps: (s: SeriesData<TData, Component<ArcProps>>, i: number) => ArcProps;
 };
 export type ArcChartProps<TData> = {
     /**
@@ -34,7 +33,7 @@ export type ArcChartProps<TData> = {
     /**
      * The series data to be used for the chart.
      */
-    series?: SeriesData<TData, typeof Arc>[];
+    series?: SeriesData<TData, Component<ArcProps>>[];
     /**
      * Key accessor
      *
@@ -82,13 +81,13 @@ export type ArcChartProps<TData> = {
      */
     onArcClick?: (e: MouseEvent, detail: {
         data: any;
-        series: SeriesData<TData, typeof Arc>;
+        series: SeriesData<TData, Component<ArcProps>>;
     }) => void;
     arc?: Snippet<[
         {
             context: ChartState<TData>;
         } & ArcChartExtraSnippetProps<TData> & {
-            props: ComponentProps<typeof Arc>;
+            props: ArcProps;
             /**
              * The index of the series currently being iterated over.
              */
@@ -101,27 +100,3 @@ export type ArcChartProps<TData> = {
      */
     profile?: boolean;
 };
-declare function $$render<TData>(): {
-    props: ArcChartProps<TData>;
-    exports: {};
-    bindings: "context";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TData> {
-    props(): ReturnType<typeof $$render<TData>>['props'];
-    events(): ReturnType<typeof $$render<TData>>['events'];
-    slots(): ReturnType<typeof $$render<TData>>['slots'];
-    bindings(): "context";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
-    } & ReturnType<__sveltets_Render<TData>['exports']>;
-    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const ArcChart: $$IsomorphicComponent;
-type ArcChart<TData> = InstanceType<typeof ArcChart<TData>>;
-export default ArcChart;

package/dist/components/charts/ArcChart/ArcChart.shared.svelte.js

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

package/dist/components/charts/ArcChart/ArcChart.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { ArcChartProps } from './ArcChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import ArcChartBase from './ArcChart.base.svelte';
+  import Chart from '../../Chart/Chart.svelte';
+  import Arc from '../../Arc/Arc.svelte';
+  import ArcLabel from '../../ArcLabel/ArcLabel.svelte';
+  import Group from '../../Group/Group.svelte';
+  import type { ArcChartProps } from './ArcChart.shared.svelte.js';
+
+  let { context = $bindable(), ...props }: ArcChartProps<TData> = $props();
+</script>
+
+<ArcChartBase {Chart} {Arc} {ArcLabel} {Group} bind:context {...props} />

package/dist/components/charts/ArcChart/ArcChart.svelte.d.ts

@@ -0,0 +1,26 @@
+export type { ArcChartProps } from './ArcChart.shared.svelte.js';
+import type { ArcChartProps } from './ArcChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: ArcChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "context";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ArcChart: $$IsomorphicComponent;
+type ArcChart<TData> = InstanceType<typeof ArcChart<TData>>;
+export default ArcChart;

package/dist/components/charts/ArcChart/ArcChart.svg.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { ArcChartProps } from './ArcChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import ArcChartBase from './ArcChart.base.svelte';
+  import Chart from '../../Chart/Chart.svg.svelte';
+  import Arc from '../../Arc/Arc.svg.svelte';
+  import ArcLabel from '../../ArcLabel/ArcLabel.svg.svelte';
+  import Group from '../../Group/Group.svg.svelte';
+  import type { ArcChartProps } from './ArcChart.shared.svelte.js';
+
+  let props: ArcChartProps<TData> = $props();
+</script>
+
+<ArcChartBase {Chart} {Arc} {ArcLabel} {Group} {...props} />

package/dist/components/charts/ArcChart/ArcChart.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export type { ArcChartProps } from './ArcChart.shared.svelte.js';
+import type { ArcChartProps } from './ArcChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: ArcChartProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ArcChart: $$IsomorphicComponent;
+type ArcChart<TData> = InstanceType<typeof ArcChart<TData>>;
+export default ArcChart;

package/dist/components/charts/{AreaChart.svelte → AreaChart/AreaChart.base.svelte}

@@ -1,53 +1,23 @@
 <script lang="ts" module>
-  import type { ChartProps } from '../Chart.svelte';
-  import type { HighlightPoint } from '../Highlight.svelte';
-  import type { SeriesData } from './types.js';
+  import type { Component } from 'svelte';
+  import type { AreaChartProps } from './AreaChart.shared.svelte.js';
 
-  import Area from '../Area.svelte';
+  export type AreaChartBaseLayerComponents = {
+    Chart: Component<any>;
+    Area: Component<any>;
+  };
 
-  // Use explicit data prop for TData inference, with rest from ChartPropsWithoutHTML<any>
-  export type AreaChartProps<TData> = {
-    /**
-     * The data for the chart
-     */
-    data?: TData[] | readonly TData[];
-  } & Omit<ChartProps<any>, 'data'> & {
-      /**
-       * The series data to be used for the chart.
-       * @default [{ key: 'default', value: y, color: 'var(--color-primary)' }]
-       */
-      series?: SeriesData<TData, typeof Area>[];
-
-      /**
-       * The layout of the series.
-       * @default 'overlap'
-       */
-      seriesLayout?: 'overlap' | 'stack' | 'stackExpand' | 'stackDiverging';
-
-      /**
-       * A callback function called when a point in the chart is clicked.
-       *
-       * @param e - the original event that triggered the `onPointClick`
-       * @param details - an object containing the highlighted point and data
-       */
-      onPointClick?: (e: MouseEvent, details: { point: HighlightPoint; data: any }) => void;
-
-      /**
-       * Enable profiling to measure render time.
-       * @default false
-       */
-      profile?: boolean;
-    };
+  export type AreaChartBaseProps<TData> = AreaChartProps<TData> & AreaChartBaseLayerComponents;
 </script>
 
 <script lang="ts" generics="TData">
   import { onMount } from 'svelte';
 
-  import Chart from '../Chart.svelte';
-
-  import { getObjectOrNull } from '../../utils/common.js';
+  import { getObjectOrNull } from '../../../utils/common.js';
 
   let {
+    Chart,
+    Area,
     data = [],
     y,
     xDomain,
@@ -68,7 +38,7 @@
     tooltip: tooltipProp,
     context = $bindable(),
     ...restProps
-  }: AreaChartProps<TData> = $props();
+  }: AreaChartBaseProps<TData> = $props();
 
   const series = $derived(
     seriesProp === undefined
@@ -131,7 +101,7 @@
     },
   }}
 >
-  {#snippet marks({ context })}
+  {#snippet marks({ context }: { context: any })}
     {#if typeof marks === 'function'}
       {@render marks({ context })}
     {:else}

package/dist/components/charts/AreaChart/AreaChart.base.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Component } from 'svelte';
+import type { AreaChartProps } from './AreaChart.shared.svelte.js';
+export type AreaChartBaseLayerComponents = {
+    Chart: Component<any>;
+    Area: Component<any>;
+};
+export type AreaChartBaseProps<TData> = AreaChartProps<TData> & AreaChartBaseLayerComponents;
+declare function $$render<TData>(): {
+    props: AreaChartBaseProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "context";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AreaChart: $$IsomorphicComponent;
+type AreaChart<TData> = InstanceType<typeof AreaChart<TData>>;
+export default AreaChart;

package/dist/components/charts/AreaChart/AreaChart.canvas.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { AreaChartProps } from './AreaChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import AreaChartBase from './AreaChart.base.svelte';
+  import Chart from '../../Chart/Chart.canvas.svelte';
+  import Area from '../../Area/Area.canvas.svelte';
+  import type { AreaChartProps } from './AreaChart.shared.svelte.js';
+
+  let props: AreaChartProps<TData> = $props();
+</script>
+
+<AreaChartBase {Chart} {Area} {...props} />

package/dist/components/charts/AreaChart/AreaChart.canvas.svelte.d.ts

@@ -0,0 +1,26 @@
+export type { AreaChartProps } from './AreaChart.shared.svelte.js';
+import type { AreaChartProps } from './AreaChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: AreaChartProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AreaChart: $$IsomorphicComponent;
+type AreaChart<TData> = InstanceType<typeof AreaChart<TData>>;
+export default AreaChart;

package/dist/components/charts/AreaChart/AreaChart.shared.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Component } from 'svelte';
+import type { ChartProps } from '../../Chart/Chart.shared.svelte.js';
+import type { HighlightPoint } from '../../Highlight/Highlight.shared.svelte.js';
+import type { AreaProps } from '../../Area/Area.shared.svelte.js';
+import type { SeriesData } from '../types.js';
+export type AreaChartProps<TData> = {
+    /**
+     * The data for the chart
+     */
+    data?: TData[] | readonly TData[];
+} & Omit<ChartProps<any>, 'data'> & {
+    /**
+     * The series data to be used for the chart.
+     * @default [{ key: 'default', value: y, color: 'var(--color-primary)' }]
+     */
+    series?: SeriesData<TData, Component<AreaProps>>[];
+    /**
+     * The layout of the series.
+     * @default 'overlap'
+     */
+    seriesLayout?: 'overlap' | 'stack' | 'stackExpand' | 'stackDiverging';
+    /**
+     * A callback function called when a point in the chart is clicked.
+     *
+     * @param e - the original event that triggered the `onPointClick`
+     * @param details - an object containing the highlighted point and data
+     */
+    onPointClick?: (e: MouseEvent, details: {
+        point: HighlightPoint;
+        data: any;
+    }) => void;
+    /**
+     * Enable profiling to measure render time.
+     * @default false
+     */
+    profile?: boolean;
+};

package/dist/components/charts/AreaChart/AreaChart.shared.svelte.js

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

package/dist/components/charts/AreaChart/AreaChart.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { AreaChartProps } from './AreaChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import AreaChartBase from './AreaChart.base.svelte';
+  import Chart from '../../Chart/Chart.svelte';
+  import Area from '../../Area/Area.svelte';
+  import type { AreaChartProps } from './AreaChart.shared.svelte.js';
+
+  let { context = $bindable(), ...props }: AreaChartProps<TData> = $props();
+</script>
+
+<AreaChartBase {Chart} {Area} bind:context {...props} />

package/dist/components/charts/{AreaChart.svelte.d.ts → AreaChart/AreaChart.svelte.d.ts}

@@ -1,39 +1,5 @@
-import type { ChartProps } from '../Chart.svelte';
-import type { HighlightPoint } from '../Highlight.svelte';
-import type { SeriesData } from './types.js';
-import Area from '../Area.svelte';
-export type AreaChartProps<TData> = {
-    /**
-     * The data for the chart
-     */
-    data?: TData[] | readonly TData[];
-} & Omit<ChartProps<any>, 'data'> & {
-    /**
-     * The series data to be used for the chart.
-     * @default [{ key: 'default', value: y, color: 'var(--color-primary)' }]
-     */
-    series?: SeriesData<TData, typeof Area>[];
-    /**
-     * The layout of the series.
-     * @default 'overlap'
-     */
-    seriesLayout?: 'overlap' | 'stack' | 'stackExpand' | 'stackDiverging';
-    /**
-     * A callback function called when a point in the chart is clicked.
-     *
-     * @param e - the original event that triggered the `onPointClick`
-     * @param details - an object containing the highlighted point and data
-     */
-    onPointClick?: (e: MouseEvent, details: {
-        point: HighlightPoint;
-        data: any;
-    }) => void;
-    /**
-     * Enable profiling to measure render time.
-     * @default false
-     */
-    profile?: boolean;
-};
+export type { AreaChartProps } from './AreaChart.shared.svelte.js';
+import type { AreaChartProps } from './AreaChart.shared.svelte.js';
 declare function $$render<TData>(): {
     props: AreaChartProps<TData>;
     exports: {};

package/dist/components/charts/AreaChart/AreaChart.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { AreaChartProps } from './AreaChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import AreaChartBase from './AreaChart.base.svelte';
+  import Chart from '../../Chart/Chart.svg.svelte';
+  import Area from '../../Area/Area.svg.svelte';
+  import type { AreaChartProps } from './AreaChart.shared.svelte.js';
+
+  let props: AreaChartProps<TData> = $props();
+</script>
+
+<AreaChartBase {Chart} {Area} {...props} />

package/dist/components/charts/AreaChart/AreaChart.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export type { AreaChartProps } from './AreaChart.shared.svelte.js';
+import type { AreaChartProps } from './AreaChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: AreaChartProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AreaChart: $$IsomorphicComponent;
+type AreaChart<TData> = InstanceType<typeof AreaChart<TData>>;
+export default AreaChart;

package/dist/components/charts/AreaChart.svelte.test.js

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
-import AreaChart from './AreaChart.svelte';
+import AreaChart from './AreaChart/AreaChart.svelte';
 const seriesData = [
     { date: new Date('2024-01-01'), one: 10, two: 20, three: 15 },
     { date: new Date('2024-01-02'), one: 15, two: 25, three: 20 },

package/dist/components/charts/{BarChart.svelte → BarChart/BarChart.base.svelte}

@@ -1,81 +1,21 @@
 <script lang="ts" module>
-  import type { ChartProps } from '../Chart.svelte';
-  import type { SeriesData } from './types.js';
+  import type { Component } from 'svelte';
+  import type { BarChartProps } from './BarChart.shared.svelte.js';
 
-  import Bars from '../Bars.svelte';
+  export type BarChartBaseLayerComponents = {
+    Chart: Component<any>;
+    Bars: Component<any>;
+  };
 
-  // Use explicit data prop for TData inference, with rest from ChartPropsWithoutHTML<any>
-  export type BarChartProps<TData> = {
-    /**
-     * The data for the chart
-     */
-    data?: TData[] | readonly TData[];
-  } & Omit<ChartProps<any>, 'data'> & {
-      /**
-       * The orientation of the chart.  Sets which axis is the value axis.
-       *
-       * @default 'vertical'
-       */
-      orientation?: 'horizontal' | 'vertical';
-
-      /**
-       * The series data to be used for the chart.
-       * @default [{ key: 'default', value: y, color: 'var(--color-primary)' }]
-       */
-      series?: SeriesData<TData, typeof Bars>[];
-
-      /**
-       * The layout of the series.
-       *
-       * @default 'overlap'
-       */
-      seriesLayout?: 'overlap' | 'stack' | 'stackExpand' | 'stackDiverging' | 'group';
-
-      /**
-       * Padding between primary x or y bands/bars, applied to scaleBand().padding()
-       *
-       * @default 0.4
-       */
-      bandPadding?: number;
-
-      /**
-       * Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding()
-       *
-       * @default 0
-       */
-      groupPadding?: number;
-
-      /**
-       * Padding between series items within bars when using 'seriesLayout="stack"'
-       *
-       * @default 0
-       */
-      stackPadding?: number;
-
-      /**
-       * A callback function that is called when a bar is clicked.
-       * @param e - The original event that triggered the callback
-       * @param detail - An object containing the bar's data and series information
-       */
-      onBarClick?: (
-        event: MouseEvent,
-        detail: { data: any; series: SeriesData<TData, typeof Bars> }
-      ) => void;
-
-      /**
-       * Enable profiling to measure render time.
-       * @default false
-       */
-      profile?: boolean;
-    };
+  export type BarChartBaseProps<TData> = BarChartProps<TData> & BarChartBaseLayerComponents;
 </script>
 
 <script lang="ts" generics="TData">
   import { onMount } from 'svelte';
 
-  import Chart from '../Chart.svelte';
-
   let {
+    Chart,
+    Bars,
     data = [],
     x: xProp,
     y: yProp,
@@ -102,7 +42,7 @@
     marks,
     context = $bindable(),
     ...restProps
-  }: BarChartProps<TData> = $props();
+  }: BarChartBaseProps<TData> = $props();
 
   const valueAxis = $derived(orientation === 'horizontal' ? 'x' : 'y');
 
@@ -174,15 +114,15 @@
   highlight={highlight as any}
   {props}
 >
-  {#snippet marks({ context })}
+  {#snippet marks({ context }: { context: any })}
     {#if typeof marks === 'function'}
       {@render marks({ context })}
     {:else}
       {#each context.series.visibleSeries as s, i (s.key)}
         <Bars
           seriesKey={s.key}
-          x1={valueAxis === 'y' && isGroupSeries ? (d) => s.value ?? s.key : undefined}
-          y1={valueAxis === 'x' && isGroupSeries ? (d) => s.value ?? s.key : undefined}
+          x1={valueAxis === 'y' && isGroupSeries ? (d: any) => s.value ?? s.key : undefined}
+          y1={valueAxis === 'x' && isGroupSeries ? (d: any) => s.value ?? s.key : undefined}
           rounded={context.series.divergingEdgeKeys
             ? context.series.divergingEdgeKeys.has(s.key)
               ? 'edge'
@@ -196,7 +136,7 @@
           strokeWidth={1}
           {stackPadding}
           opacity={context.series.isHighlighted(s.key, true) ? 1 : 0.1}
-          onBarClick={(e, detail) => onBarClick(e, { ...detail, series: s })}
+          onBarClick={(e: MouseEvent, detail: any) => onBarClick(e, { ...detail, series: s })}
           {...props.bars}
           {...s.props}
         />