layerchart 2.0.0-next.6 → 2.0.0-next.61

package/dist/components/Area/Area.base.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { AreaProps } from './Area.shared.svelte.js';
+
+  export type AreaBaseLayerComponents = {
+    Path: Component<any>;
+    Spline: Component<any>;
+  };
+
+  export type AreaBaseProps = AreaProps & AreaBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import { AreaState } from './Area.shared.svelte.js';
+
+  let {
+    Path,
+    Spline,
+    curve,
+    data,
+    defined,
+    fill,
+    stroke = 'none',
+    line = false,
+    pathData,
+    motion,
+    x,
+    y0,
+    y1,
+    seriesKey,
+    ...restProps
+  }: AreaBaseProps = $props();
+
+  const c = new AreaState(
+    () =>
+      ({
+        curve,
+        data,
+        defined,
+        fill,
+        stroke,
+        line,
+        pathData,
+        motion,
+        x,
+        y0,
+        y1,
+        seriesKey,
+      }) as AreaProps
+  );
+</script>
+
+{#if line}
+  <Spline
+    data={data ?? c.seriesData}
+    {x}
+    y={c.lineYAccessor}
+    {seriesKey}
+    {curve}
+    {defined}
+    {motion}
+    {...extractLayerProps(line, 'lc-area-line')}
+  />
+{/if}
+
+<Path
+  pathData={c.tweenedPath}
+  fill={fill ?? c.series?.color}
+  {stroke}
+  opacity={c.pathOpacity}
+  {...extractLayerProps(restProps, 'lc-area-path')}
+/>

package/dist/components/Area/Area.base.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { AreaProps } from './Area.shared.svelte.js';
+export type AreaBaseLayerComponents = {
+    Path: Component<any>;
+    Spline: Component<any>;
+};
+export type AreaBaseProps = AreaProps & AreaBaseLayerComponents;
+declare const Area: Component<AreaBaseProps, {}, "">;
+type Area = ReturnType<typeof Area>;
+export default Area;

package/dist/components/Area/Area.canvas.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { AreaProps, AreaPropsWithoutHTML } from './Area.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import AreaBase from './Area.base.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+  import Spline from '../Spline/Spline.canvas.svelte';
+
+  import type { AreaProps } from './Area.shared.svelte.js';
+
+  let props: AreaProps = $props();
+</script>
+
+<AreaBase {Path} {Spline} {...props} />

package/dist/components/Area/Area.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { AreaProps, AreaPropsWithoutHTML } from './Area.shared.svelte.js';
+import type { AreaProps } from './Area.shared.svelte.js';
+declare const Area: import("svelte").Component<AreaProps, {}, "">;
+type Area = ReturnType<typeof Area>;
+export default Area;

package/dist/components/Area/Area.shared.svelte.d.ts

@@ -0,0 +1,57 @@
+import type { ComponentProps } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import { type Area as D3Area, type CurveFactory } from 'd3-shape';
+import type { Without } from '../../utils/types.js';
+import { type Accessor } from '../../utils/common.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type Spline from '../Spline/Spline.svelte';
+import type { PathProps } from '../Path/Path.shared.svelte.js';
+export type AreaPropsWithoutHTML = {
+    /** Override data instead of using context */
+    data?: any;
+    /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
+    pathData?: string | null;
+    /** Override x accessor */
+    x?: Accessor;
+    /** Override y0 accessor. Defaults to max($yRange) */
+    y0?: Accessor;
+    /** Override y1 accessor. Defaults to y accessor */
+    y1?: Accessor;
+    /** Series key to use for accessor. */
+    seriesKey?: string;
+    /** Whether to tween the interpolated path data using d3-interpolate-path */
+    motion?: MotionProp;
+    curve?: CurveFactory;
+    defined?: Parameters<D3Area<any>['defined']>[0];
+    /** Enable showing line @default false */
+    line?: boolean | Partial<ComponentProps<typeof Spline>>;
+} & Omit<PathProps, 'x' | 'y' | 'y0' | 'y1'>;
+export type AreaProps = AreaPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, AreaPropsWithoutHTML>;
+/**
+ * Reactive state shared by every per-layer Area variant. Holds the
+ * computed `d` (path data), tween state, accessors, and `lineYAccessor`.
+ */
+export declare class AreaState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => AreaProps);
+    series: import("../index.js").SeriesData<any, any> | undefined;
+    seriesData: any[] | undefined;
+    seriesAccessor: string | number | ((d: any) => any) | Accessor<any>[] | undefined;
+    stackAccessors: {
+        y0: (d: any) => number;
+        y1: (d: any) => number;
+        value: (d: any) => [number, number] | null;
+    } | null;
+    xAccessor: (d: any) => any;
+    y0Accessor: (d: any) => any;
+    y1Accessor: (d: any) => any;
+    resolvedData: any;
+    xOffset: number;
+    yOffset: number;
+    d: string | undefined;
+    get tweenedPath(): any;
+    lineYAccessor: ((d: any) => any) | undefined;
+    pathOpacity: number;
+}

package/dist/components/Area/Area.shared.svelte.js

@@ -0,0 +1,157 @@
+import { area as d3Area, areaRadial, } from 'd3-shape';
+import { min } from 'd3-array';
+import { interpolatePath } from 'd3-interpolate-path';
+import { accessor } from '../../utils/common.js';
+import { isScaleBand } from '../../utils/scales.svelte.js';
+import { flattenPathData } from '../../utils/path.js';
+import { createMotion, extractTweenConfig, } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+/**
+ * Reactive state shared by every per-layer Area variant. Holds the
+ * computed `d` (path data), tween state, accessors, and `lineYAccessor`.
+ */
+export class AreaState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    #tweenState;
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        this.ctx.registerComponent({
+            name: 'Area',
+            kind: 'composite-mark',
+            markInfo: () => {
+                const p = getProps();
+                return {
+                    data: p.data,
+                    x: p.x,
+                    y: p.y1 ?? p.y0,
+                    seriesKey: p.seriesKey,
+                    color: p.fill,
+                };
+            },
+        });
+        const extractedTween = extractTweenConfig(initial.motion);
+        const tweenOptions = extractedTween
+            ? {
+                type: extractedTween.type,
+                options: { interpolate: interpolatePath, ...extractedTween.options },
+            }
+            : undefined;
+        this.#tweenState = createMotion(this.#defaultPathData(tweenOptions), () => this.d, tweenOptions);
+    }
+    series = $derived(this.ctx.series.series.find((s) => s.key === this.#getProps().seriesKey));
+    seriesData = $derived(this.series?.data);
+    seriesAccessor = $derived(this.series?.value ?? (this.series?.data ? undefined : this.series?.key));
+    stackAccessors = $derived.by(() => {
+        const seriesKey = this.#getProps().seriesKey;
+        return seriesKey && this.ctx.series.isStacked
+            ? this.ctx.series.getStackAccessors(seriesKey)
+            : null;
+    });
+    xAccessor = $derived.by(() => {
+        const x = this.#getProps().x;
+        return x ? accessor(x) : this.ctx.x;
+    });
+    y0Accessor = $derived.by(() => {
+        const props = this.#getProps();
+        if (props.y0)
+            return accessor(props.y0);
+        if (this.stackAccessors)
+            return this.stackAccessors.y0;
+        if (Array.isArray(this.seriesAccessor))
+            return accessor(this.seriesAccessor[0]);
+        if (Array.isArray(this.ctx.config.y) && this.ctx.config.y[0] === 0) {
+            return (d) => this.ctx.y(d)[0];
+        }
+        if (this.ctx.props.yBaseline != null)
+            return () => this.ctx.props.yBaseline;
+        return () => min(this.ctx.yScale.domain());
+    });
+    y1Accessor = $derived.by(() => {
+        const props = this.#getProps();
+        if (props.y1)
+            return accessor(props.y1);
+        if (this.stackAccessors)
+            return this.stackAccessors.y1;
+        if (Array.isArray(this.seriesAccessor))
+            return accessor(this.seriesAccessor[1]);
+        if (this.seriesAccessor)
+            return accessor(this.seriesAccessor);
+        if (Array.isArray(this.ctx.config.y) && this.ctx.config.y[1] === 1) {
+            return (d) => this.ctx.y(d)[1];
+        }
+        return this.ctx.y;
+    });
+    resolvedData = $derived(this.#getProps().data ?? this.seriesData ?? this.ctx.data);
+    xOffset = $derived(isScaleBand(this.ctx.xScale) ? this.ctx.xScale.bandwidth() / 2 : 0);
+    yOffset = $derived(isScaleBand(this.ctx.yScale) ? this.ctx.yScale.bandwidth() / 2 : 0);
+    #defaultPathData(tweenOptions) {
+        const props = this.#getProps();
+        if (!tweenOptions)
+            return '';
+        if (props.pathData) {
+            return flattenPathData(props.pathData, Math.min(this.ctx.yScale(0), this.ctx.yRange[0]));
+        }
+        if (this.ctx.config.x) {
+            const path = this.ctx.radial
+                ? areaRadial()
+                    .angle((d) => this.ctx.xScale(this.xAccessor(d)))
+                    .innerRadius(() => Math.min(this.ctx.yScale(0), this.ctx.yRange[0]))
+                    .outerRadius(() => Math.min(this.ctx.yScale(0), this.ctx.yRange[0]))
+                : d3Area()
+                    .x((d) => this.ctx.xScale(this.xAccessor(d)) + this.xOffset)
+                    .y0(() => Math.min(this.ctx.yScale(0), this.ctx.yRange[0]))
+                    .y1(() => Math.min(this.ctx.yScale(0), this.ctx.yRange[0]));
+            path.defined(props.defined ?? ((d) => this.xAccessor(d) != null && this.y1Accessor(d) != null));
+            if (props.curve)
+                path.curve(props.curve);
+            return path(this.resolvedData) ?? '';
+        }
+        return '';
+    }
+    d = $derived.by(() => {
+        const props = this.#getProps();
+        const _path = this.ctx.radial
+            ? areaRadial()
+                .angle((d) => this.ctx.xScale(this.xAccessor(d)))
+                .innerRadius((d) => this.ctx.yScale(this.y0Accessor(d)))
+                .outerRadius((d) => this.ctx.yScale(this.y1Accessor(d)))
+            : d3Area()
+                .x((d) => this.ctx.xScale(this.xAccessor(d)) + this.xOffset)
+                .y0((d) => this.ctx.yScale(this.y0Accessor(d)) + this.yOffset)
+                .y1((d) => this.ctx.yScale(this.y1Accessor(d)) + this.yOffset);
+        _path.defined(props.defined ?? ((d) => this.xAccessor(d) != null && this.y1Accessor(d) != null));
+        if (props.curve)
+            _path.curve(props.curve);
+        return props.pathData ?? _path(this.resolvedData) ?? '';
+    });
+    get tweenedPath() {
+        return this.#tweenState.current;
+    }
+    lineYAccessor = $derived.by(() => {
+        const props = this.#getProps();
+        if (this.stackAccessors && this.ctx.series.stackLayout === 'stackDiverging') {
+            const firstPoint = this.resolvedData?.[0];
+            if (firstPoint) {
+                const val = this.stackAccessors.value(firstPoint);
+                if (val && val[1] <= 0)
+                    return this.y0Accessor;
+            }
+        }
+        return props.y1 ||
+            this.stackAccessors ||
+            Array.isArray(this.seriesAccessor) ||
+            this.seriesAccessor
+            ? this.y1Accessor
+            : undefined;
+    });
+    pathOpacity = $derived.by(() => {
+        if (this.series?.key == null ||
+            this.ctx.series.visibleSeries.length <= 1 ||
+            this.ctx.series.isHighlighted(this.series.key, true)) {
+            return 1;
+        }
+        return 0.1;
+    });
+}

package/dist/components/Area/Area.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { AreaProps, AreaPropsWithoutHTML } from './Area.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import AreaSvg from './Area.svg.svelte';
+  import AreaCanvas from './Area.canvas.svelte';
+  import type { AreaProps } from './Area.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: AreaProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <AreaSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <AreaCanvas {...props} />
+{/if}

package/dist/components/Area/Area.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { AreaProps, AreaPropsWithoutHTML } from './Area.shared.svelte.js';
+import type { AreaProps } from './Area.shared.svelte.js';
+declare const Area: import("svelte").Component<AreaProps, {}, "">;
+type Area = ReturnType<typeof Area>;
+export default Area;

package/dist/components/Area/Area.svg.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { AreaProps, AreaPropsWithoutHTML } from './Area.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import AreaBase from './Area.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+  import Spline from '../Spline/Spline.svg.svelte';
+
+  import type { AreaProps } from './Area.shared.svelte.js';
+
+  let props: AreaProps = $props();
+</script>
+
+<AreaBase {Path} {Spline} {...props} />

package/dist/components/Area/Area.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { AreaProps, AreaPropsWithoutHTML } from './Area.shared.svelte.js';
+import type { AreaProps } from './Area.shared.svelte.js';
+declare const Area: import("svelte").Component<AreaProps, {}, "">;
+type Area = ReturnType<typeof Area>;
+export default Area;

package/dist/components/Axis/Axis.base.svelte

@@ -0,0 +1,195 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { Transition } from '../../utils/types.js';
+  import type { AxisProps } from './Axis.shared.svelte.js';
+
+  /**
+   * Per-layer primitive components a `<Axis.base>` consumer must inject.
+   * Each per-layer variant (`Axis.svg.svelte`, etc.) imports the matching
+   * primitive variants and forwards them here so the template stays in
+   * one place.
+   */
+  export type AxisBaseLayerComponents = {
+    Group: Component<any>;
+    Line: Component<any>;
+    Text: Component<any>;
+    Rule: Component<any>;
+  };
+
+  export type AxisBaseProps<In extends Transition = Transition> = AxisProps<In> &
+    AxisBaseLayerComponents;
+</script>
+
+<script lang="ts" generics="T extends Transition = Transition">
+  import { cls } from '@layerstack/tailwind';
+
+  import { extractLayerProps } from '../../utils/attributes.js';
+
+  import { AxisState } from './Axis.shared.svelte.js';
+
+  let {
+    Group,
+    Line,
+    Text,
+    Rule,
+    placement,
+    label = '',
+    labelPlacement = 'middle',
+    labelProps,
+    rule = false,
+    grid = false,
+    ticks,
+    tickSpacing,
+    tickMultiline = false,
+    tickLength = 4,
+    tickMarks = true,
+    format,
+    tickLabelProps,
+    stroke,
+    fill,
+    motion,
+    transitionIn,
+    transitionInParams,
+    scale,
+    classes = {},
+    class: className,
+    tickLabel,
+    ...restProps
+  }: AxisBaseProps<T> = $props();
+
+  const c = new AxisState(
+    () =>
+      ({
+        placement,
+        label,
+        labelPlacement,
+        labelProps,
+        rule,
+        grid,
+        ticks,
+        tickSpacing,
+        tickMultiline,
+        tickLength,
+        tickMarks,
+        format,
+        tickLabelProps,
+        stroke,
+        fill,
+        motion,
+        scale,
+        classes,
+      }) as AxisProps
+  );
+</script>
+
+<Group
+  {...restProps}
+  data-placement={placement}
+  class={cls('lc-axis', `placement-${placement}`, classes.root, className)}
+>
+  {#if rule !== false}
+    <Rule
+      x={placement === 'left' ? '$left' : placement === 'right' ? '$right' : placement === 'angle'}
+      y={placement === 'top' ? '$top' : placement === 'bottom' ? '$bottom' : placement === 'radius'}
+      {stroke}
+      {motion}
+      {...extractLayerProps(rule, 'lc-axis-rule', classes.rule ?? '')}
+    />
+  {/if}
+
+  {#if typeof label === 'function'}
+    {@render label({ props: c.resolvedLabelProps })}
+  {:else if label}
+    <Text {...c.resolvedLabelProps} />
+  {/if}
+
+  {#each c.tickItems as item, index (item.key)}
+    <Group {transitionIn} {transitionInParams} class="lc-axis-tick-group">
+      {#if grid !== false}
+        <Rule
+          x={c.orientation === 'horizontal' || c.orientation === 'angle' ? item.tick : false}
+          y={c.orientation === 'vertical' || c.orientation === 'radius' ? item.tick : false}
+          {stroke}
+          {motion}
+          {...extractLayerProps(grid, 'lc-axis-grid', classes.rule ?? '')}
+        />
+      {/if}
+
+      {#if tickMarks}
+        {@const tickClasses = cls('lc-axis-tick', classes.tick)}
+        {#if c.orientation === 'horizontal'}
+          <Line
+            x1={item.tickCoordsX}
+            y1={item.tickCoordsY}
+            x2={item.tickCoordsX}
+            y2={item.tickCoordsY + (placement === 'top' ? -tickLength : tickLength)}
+            {stroke}
+            {motion}
+            class={tickClasses}
+          />
+        {:else if c.orientation === 'vertical'}
+          <Line
+            x1={item.tickCoordsX}
+            y1={item.tickCoordsY}
+            x2={item.tickCoordsX + (placement === 'left' ? -tickLength : tickLength)}
+            y2={item.tickCoordsY}
+            {stroke}
+            {motion}
+            class={tickClasses}
+          />
+        {:else if c.orientation === 'angle'}
+          <Line
+            x1={item.radialTickCoordsX}
+            y1={item.radialTickCoordsY}
+            x2={item.radialTickMarkCoordsX}
+            y2={item.radialTickMarkCoordsY}
+            {stroke}
+            {motion}
+            class={tickClasses}
+          />
+        {/if}
+      {/if}
+
+      {#if tickLabel}
+        {@render tickLabel({ props: item.tickLabelProps, index })}
+      {:else}
+        <Text {...item.tickLabelProps} />
+      {/if}
+    </Group>
+  {/each}
+</Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-axis-rule)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-tick)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-grid)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-label, .lc-axis-tick-label)) {
+      font-size: 10px;
+      stroke: var(--color-surface-100, light-dark(white, black));
+      stroke-width: 2px;
+      font-weight: 300;
+    }
+  }
+</style>

package/dist/components/Axis/Axis.base.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Component } from 'svelte';
+import type { Transition } from '../../utils/types.js';
+import type { AxisProps } from './Axis.shared.svelte.js';
+/**
+ * Per-layer primitive components a `<Axis.base>` consumer must inject.
+ * Each per-layer variant (`Axis.svg.svelte`, etc.) imports the matching
+ * primitive variants and forwards them here so the template stays in
+ * one place.
+ */
+export type AxisBaseLayerComponents = {
+    Group: Component<any>;
+    Line: Component<any>;
+    Text: Component<any>;
+    Rule: Component<any>;
+};
+export type AxisBaseProps<In extends Transition = Transition> = AxisProps<In> & AxisBaseLayerComponents;
+declare function $$render<T extends Transition = Transition>(): {
+    props: AxisBaseProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Transition = Transition> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Transition = Transition>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Transition = Transition>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Axis: $$IsomorphicComponent;
+type Axis<T extends Transition = Transition> = InstanceType<typeof Axis<T>>;
+export default Axis;

package/dist/components/Axis/Axis.canvas.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  export type { AxisProps, AxisPropsWithoutHTML } from './Axis.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T extends Transition = Transition">
+  import AxisBase from './Axis.base.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+  import Line from '../Line/Line.canvas.svelte';
+  import Text from '../Text/Text.canvas.svelte';
+  import Rule from '../Rule/Rule.canvas.svelte';
+
+  import type { Transition } from '../../utils/types.js';
+  import type { AxisProps } from './Axis.shared.svelte.js';
+
+  let props: AxisProps<T> = $props();
+</script>
+
+<AxisBase {Group} {Line} {Text} {Rule} {...props} />

package/dist/components/Axis/Axis.canvas.svelte.d.ts

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

package/dist/components/Axis/Axis.html.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  export type { AxisProps, AxisPropsWithoutHTML } from './Axis.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T extends Transition = Transition">
+  import AxisBase from './Axis.base.svelte';
+  import Group from '../Group/Group.html.svelte';
+  import Line from '../Line/Line.html.svelte';
+  import Text from '../Text/Text.html.svelte';
+  import Rule from '../Rule/Rule.html.svelte';
+
+  import type { Transition } from '../../utils/types.js';
+  import type { AxisProps } from './Axis.shared.svelte.js';
+
+  let props: AxisProps<T> = $props();
+</script>
+
+<AxisBase {Group} {Line} {Text} {Rule} {...props} />