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

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

@@ -0,0 +1,330 @@
+import { extent } from 'd3-array';
+import { pointRadial } from 'd3-shape';
+import { timeDay, timeHour, timeMillisecond, timeMinute, timeSecond, timeYear } from 'd3-time';
+import { unique, PeriodType } from '@layerstack/utils';
+import { cls } from '@layerstack/tailwind';
+import { isScaleBand } from '../../utils/scales.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+import {} from '../../utils/motion.svelte.js';
+import { autoTickVals, autoTickFormat } from '../../utils/ticks.js';
+/**
+ * Reactive state shared by every per-layer Axis variant.
+ */
+export class AxisState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    constructor(getProps) {
+        this.#getProps = getProps;
+        this.ctx.registerComponent({ name: 'Axis', kind: 'composite-mark' });
+    }
+    // --- Derived from placement ---
+    orientation = $derived.by(() => {
+        const placement = this.#getProps().placement;
+        return placement === 'angle'
+            ? 'angle'
+            : placement === 'radius'
+                ? 'radius'
+                : ['top', 'bottom'].includes(placement)
+                    ? 'horizontal'
+                    : 'vertical';
+    });
+    scale = $derived.by(() => {
+        const scaleProp = this.#getProps().scale;
+        return scaleProp ?? (['horizontal', 'angle'].includes(this.orientation) ? this.ctx.xScale : this.ctx.yScale);
+    });
+    interval = $derived(['horizontal', 'angle'].includes(this.orientation) ? this.ctx.xInterval : this.ctx.yInterval);
+    defaultTickSpacing = $derived.by(() => {
+        const placement = this.#getProps().placement;
+        return ['top', 'bottom', 'angle'].includes(placement)
+            ? 80
+            : ['left', 'right', 'radius'].includes(placement)
+                ? 50
+                : undefined;
+    });
+    tickSpacing = $derived.by(() => {
+        const tickSpacingProp = this.#getProps().tickSpacing;
+        if (tickSpacingProp !== undefined)
+            return tickSpacingProp;
+        if (isScaleBand(this.scale) && this.interval == null)
+            return null;
+        return this.defaultTickSpacing;
+    });
+    resolvedFormat = $derived.by(() => {
+        const format = this.#getProps().format;
+        if (format !== undefined)
+            return format;
+        if (this.ctx.series.stackLayout === 'stackExpand') {
+            const isValueAxis = (this.ctx.valueAxis === 'x' && ['horizontal', 'angle'].includes(this.orientation)) ||
+                (this.ctx.valueAxis === 'y' && ['vertical', 'radius'].includes(this.orientation));
+            if (isValueAxis) {
+                return 'percentRound';
+            }
+        }
+        return undefined;
+    });
+    xRangeMinMax = $derived(extent(this.ctx.xRange));
+    yRangeMinMax = $derived(extent(this.ctx.yRange));
+    ctxSize = $derived.by(() => {
+        if (this.orientation === 'vertical')
+            return this.ctx.height;
+        if (this.orientation === 'horizontal')
+            return this.ctx.width;
+        if (this.orientation === 'radius')
+            return this.ctx.height / 2;
+        if (this.orientation === 'angle')
+            return this.ctx.width;
+        return null;
+    });
+    // For band scales with domain-mode transform, scale up effective size by the zoom factor
+    // so that more tick labels appear as bands get wider when zoomed in
+    effectiveSize = $derived.by(() => {
+        if (!this.ctxSize)
+            return this.ctxSize;
+        const ts = this.ctx.transformState;
+        if (ts?.mode === 'domain' && isScaleBand(this.scale) && ts.scale > 1) {
+            return this.ctxSize * ts.scale;
+        }
+        return this.ctxSize;
+    });
+    tickCount = $derived.by(() => {
+        const ticks = this.#getProps().ticks;
+        if (typeof ticks === 'number')
+            return ticks;
+        if (this.tickSpacing && this.effectiveSize)
+            return Math.round(this.effectiveSize / this.tickSpacing);
+        return undefined;
+    });
+    formatCount = $derived.by(() => {
+        const ticks = this.#getProps().ticks;
+        if (typeof ticks === 'number')
+            return ticks;
+        if (this.defaultTickSpacing && this.effectiveSize)
+            return Math.round(this.effectiveSize / this.defaultTickSpacing);
+        return undefined;
+    });
+    tickVals = $derived.by(() => {
+        const ticks = this.#getProps().ticks;
+        let tickVals = autoTickVals(this.scale, ticks, this.tickCount);
+        if (this.interval != null) {
+            // Remove last tick when interval is provided (such as for bar charts with center aligned (offset) ticks)
+            tickVals.pop();
+        }
+        // Use format to filter ticks (helpful to keep ticks above a threshold for wide charts or short durations)
+        const formatType = typeof this.resolvedFormat === 'object' ? this.resolvedFormat?.type : this.resolvedFormat;
+        if (formatType === 'integer') {
+            tickVals = tickVals.filter(Number.isInteger);
+        }
+        else if (formatType === 'year' || formatType === PeriodType.CalendarYear) {
+            tickVals = tickVals.filter((val) => +timeYear.floor(val) === +val);
+        }
+        else if (formatType === 'month' ||
+            formatType === PeriodType.Month ||
+            formatType === PeriodType.MonthYear) {
+            tickVals = tickVals.filter((val) => val.getDate() < 7); // first week of the month
+        }
+        else if (formatType === 'day' || formatType === PeriodType.Day) {
+            tickVals = tickVals.filter((val) => +timeDay.floor(val) === +val);
+        }
+        else if (formatType === 'hour' || formatType === PeriodType.Hour) {
+            tickVals = tickVals.filter((val) => +timeHour.floor(val) === +val);
+        }
+        else if (formatType === 'minute' || formatType === PeriodType.Minute) {
+            tickVals = tickVals.filter((val) => +timeMinute.floor(val) === +val);
+        }
+        else if (formatType === 'second' || formatType === PeriodType.Second) {
+            tickVals = tickVals.filter((val) => +timeSecond.floor(val) === +val);
+        }
+        else if (formatType === 'millisecond' || formatType === PeriodType.Millisecond) {
+            tickVals = tickVals.filter((val) => +timeMillisecond.floor(val) === +val);
+        }
+        return unique(tickVals);
+    });
+    tickFormat = $derived.by(() => autoTickFormat({
+        scale: this.scale,
+        ticks: this.#getProps().ticks,
+        count: this.formatCount,
+        formatType: this.resolvedFormat,
+        multiline: this.#getProps().tickMultiline ?? false,
+        placement: this.#getProps().placement,
+    }));
+    getCoords(tick) {
+        const placement = this.#getProps().placement;
+        const scale = this.scale;
+        switch (placement) {
+            case 'top':
+            case 'bottom':
+                return {
+                    x: scale(tick) +
+                        (isScaleBand(scale)
+                            ? scale.bandwidth() / 2
+                            : this.ctx.xInterval
+                                ? (scale(this.ctx.xInterval.offset(tick)) - scale(tick)) / 2
+                                : 0),
+                    y: placement === 'top' ? this.yRangeMinMax[0] : this.yRangeMinMax[1],
+                };
+            case 'left':
+            case 'right':
+                return {
+                    x: placement === 'left' ? this.xRangeMinMax[0] : this.xRangeMinMax[1],
+                    y: scale(tick) +
+                        (isScaleBand(scale)
+                            ? scale.bandwidth() / 2
+                            : this.ctx.yInterval
+                                ? (scale(this.ctx.yInterval.offset(tick)) - scale(tick)) / 2
+                                : 0),
+                };
+            case 'angle':
+                return {
+                    x: scale(tick),
+                    y: this.yRangeMinMax[1],
+                };
+            case 'radius':
+                return {
+                    x: this.xRangeMinMax[0],
+                    y: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
+                };
+        }
+        return { x: 0, y: 0 };
+    }
+    getDefaultTickLabelProps(tick) {
+        const { placement, tickLength = 4 } = this.#getProps();
+        switch (placement) {
+            case 'top':
+                return {
+                    textAnchor: 'middle',
+                    verticalAnchor: 'end',
+                    dy: -tickLength,
+                };
+            case 'bottom':
+                return {
+                    textAnchor: 'middle',
+                    verticalAnchor: 'start',
+                    dy: tickLength,
+                };
+            case 'left':
+                return {
+                    textAnchor: 'end',
+                    verticalAnchor: 'middle',
+                    dx: -tickLength,
+                };
+            case 'right':
+                return {
+                    textAnchor: 'start',
+                    verticalAnchor: 'middle',
+                    dx: tickLength,
+                };
+            case 'angle': {
+                const xValue = this.scale(tick);
+                return {
+                    textAnchor: xValue === 0 ||
+                        Math.abs(xValue - Math.PI) < 0.01 ||
+                        Math.abs(xValue - Math.PI * 2) < 0.01
+                        ? 'middle'
+                        : xValue > Math.PI
+                            ? 'end'
+                            : 'start',
+                    verticalAnchor: 'middle',
+                    dx: Math.sin(xValue) * tickLength,
+                    dy: -Math.cos(xValue) * (tickLength + 4),
+                };
+            }
+            case 'radius':
+                return {
+                    textAnchor: 'middle',
+                    verticalAnchor: 'middle',
+                    dx: 2,
+                };
+        }
+        return {};
+    }
+    resolvedLabelX = $derived.by(() => {
+        const { placement, labelPlacement = 'middle' } = this.#getProps();
+        if (placement === 'left' || (this.orientation === 'horizontal' && labelPlacement === 'start')) {
+            return -this.ctx.padding.left;
+        }
+        else if (placement === 'right' ||
+            (this.orientation === 'horizontal' && labelPlacement === 'end')) {
+            return this.ctx.width + this.ctx.padding.right;
+        }
+        return this.ctx.width / 2;
+    });
+    resolvedLabelY = $derived.by(() => {
+        const { placement, labelPlacement = 'middle' } = this.#getProps();
+        if (placement === 'top' || (this.orientation === 'vertical' && labelPlacement === 'start')) {
+            return -this.ctx.padding.top;
+        }
+        else if (this.orientation === 'vertical' && labelPlacement === 'middle') {
+            return this.ctx.height / 2;
+        }
+        else if (placement === 'bottom' || labelPlacement === 'end') {
+            return this.ctx.height + this.ctx.padding.bottom;
+        }
+        return '0';
+    });
+    resolvedLabelTextAnchor = $derived.by(() => {
+        const { placement, labelPlacement = 'middle' } = this.#getProps();
+        if (labelPlacement === 'middle')
+            return 'middle';
+        if (placement === 'right' || (this.orientation === 'horizontal' && labelPlacement === 'end'))
+            return 'end';
+        return 'start';
+    });
+    resolvedLabelVerticalAnchor = $derived.by(() => {
+        const { placement, labelPlacement = 'middle' } = this.#getProps();
+        if (placement === 'top' ||
+            (this.orientation === 'vertical' && labelPlacement === 'start') ||
+            (placement === 'left' && labelPlacement === 'middle')) {
+            return 'start';
+        }
+        return 'end';
+    });
+    resolvedLabelProps = $derived.by(() => {
+        const { label = '', labelPlacement = 'middle', labelProps, stroke, fill, classes = {}, } = this.#getProps();
+        return {
+            value: typeof label === 'function' ? '' : label,
+            x: this.resolvedLabelX,
+            y: this.resolvedLabelY,
+            textAnchor: this.resolvedLabelTextAnchor,
+            verticalAnchor: this.resolvedLabelVerticalAnchor,
+            rotate: this.orientation === 'vertical' && labelPlacement === 'middle' ? -90 : 0,
+            capHeight: '7px',
+            lineHeight: '11px',
+            fill,
+            stroke,
+            ...labelProps,
+            class: cls('lc-axis-label', classes.label, labelProps?.class),
+        };
+    });
+    tickItems = $derived.by(() => {
+        const { motion, stroke, fill, tickLabelProps, classes = {}, } = this.#getProps();
+        return this.tickVals.map((tick, index) => {
+            const tickCoords = this.getCoords(tick);
+            const [radialTickCoordsX, radialTickCoordsY] = pointRadial(tickCoords.x, tickCoords.y);
+            const [radialTickMarkCoordsX, radialTickMarkCoordsY] = pointRadial(tickCoords.x, tickCoords.y + (this.#getProps().tickLength ?? 4));
+            const labelProps = {
+                x: this.orientation === 'angle' ? radialTickCoordsX : tickCoords.x,
+                y: this.orientation === 'angle' ? radialTickCoordsY : tickCoords.y,
+                value: this.tickFormat(tick, index),
+                ...this.getDefaultTickLabelProps(tick),
+                motion,
+                capHeight: '7px',
+                lineHeight: '11px',
+                fill,
+                stroke,
+                ...tickLabelProps,
+                class: cls('lc-axis-tick-label', classes.tickLabel, tickLabelProps?.class),
+            };
+            return {
+                key: tick.valueOf(),
+                tick,
+                tickCoordsX: tickCoords.x,
+                tickCoordsY: tickCoords.y,
+                radialTickCoordsX,
+                radialTickCoordsY,
+                radialTickMarkCoordsX,
+                radialTickMarkCoordsY,
+                tickLabelProps: labelProps,
+            };
+        });
+    });
+}

package/dist/components/Axis/Axis.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  export type { AxisProps, AxisPropsWithoutHTML } from './Axis.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T extends Transition = Transition">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import AxisSvg from './Axis.svg.svelte';
+  import AxisCanvas from './Axis.canvas.svelte';
+  import AxisHtml from './Axis.html.svelte';
+  import type { AxisProps } from './Axis.shared.svelte.js';
+  import type { Transition } from '../../utils/types.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: AxisProps<T> = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <AxisSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <AxisCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <AxisHtml {...props} />
+{/if}

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

@@ -0,0 +1,27 @@
+export type { AxisProps, AxisPropsWithoutHTML } from './Axis.shared.svelte.js';
+import type { AxisProps } from './Axis.shared.svelte.js';
+import type { Transition } from '../../utils/types.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.svg.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.svg.svelte';
+  import Line from '../Line/Line.svg.svelte';
+  import Text from '../Text/Text.svg.svelte';
+  import Rule from '../Rule/Rule.svg.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.svg.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/Bar/Bar.base.svelte

@@ -0,0 +1,132 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { BarProps } from './Bar.shared.svelte.js';
+
+  export type BarBaseLayerComponents = {
+    Rect: Component<any>;
+    /**
+     * Used only when the chart is radial. Optional because the HTML layer
+     * doesn't support radial charts and therefore doesn't need to bundle Arc.
+     */
+    Arc?: Component<any>;
+  };
+
+  export type BarBaseProps = BarProps & BarBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import type { PointerEventHandler } from 'svelte/elements';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import { BarState } from './Bar.shared.svelte.js';
+
+  let {
+    Rect,
+    Arc,
+    data,
+    x: xProp,
+    y: yProp,
+    x1: x1Prop,
+    y1: y1Prop,
+    seriesKey,
+    stackPadding = 0,
+    fill,
+    fillOpacity,
+    stroke: strokeProp = 'black',
+    strokeWidth = 0,
+    opacity,
+    radius = 0,
+    rounded = 'all',
+    motion,
+    insets,
+    initialX,
+    initialY,
+    initialHeight,
+    initialWidth,
+    width,
+    height,
+    tooltip,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    ...restProps
+  }: BarBaseProps = $props();
+
+  const stroke = $derived(strokeProp === null || strokeProp === undefined ? 'black' : strokeProp);
+
+  const c = new BarState(
+    () =>
+      ({
+        data,
+        x: xProp,
+        y: yProp,
+        x1: x1Prop,
+        y1: y1Prop,
+        seriesKey,
+        stackPadding,
+        radius,
+        rounded,
+        motion,
+        insets,
+        initialX,
+        initialY,
+        initialHeight,
+        initialWidth,
+        width,
+        height,
+        tooltip,
+      }) as BarProps
+  );
+
+  const onPointerEnter: PointerEventHandler<Element> = (e) => {
+    onpointerenter?.(e);
+    if (tooltip) c.ctx.tooltip.show(e, data);
+  };
+
+  const onPointerMove: PointerEventHandler<Element> = (e) => {
+    onpointermove?.(e);
+    if (tooltip) c.ctx.tooltip.show(e, data);
+  };
+
+  const onPointerLeave: PointerEventHandler<Element> = (e) => {
+    onpointerleave?.(e);
+    if (tooltip) c.ctx.tooltip.hide();
+  };
+</script>
+
+{#if c.ctx.radial && Arc}
+  <Arc
+    innerRadius={c.dimensions.y}
+    outerRadius={c.dimensions.y + c.dimensions.height}
+    startAngle={c.dimensions.x}
+    endAngle={c.dimensions.x + c.dimensions.width}
+    {fill}
+    {fillOpacity}
+    {stroke}
+    {strokeWidth}
+    {opacity}
+    cornerRadius={radius}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
+    {...extractLayerProps(restProps, 'lc-bar')}
+  />
+{:else}
+  <Rect
+    {fill}
+    {fillOpacity}
+    {stroke}
+    {strokeWidth}
+    {opacity}
+    corners={c.corners}
+    {motion}
+    initialX={c.resolvedInitialX}
+    initialY={c.resolvedInitialY}
+    initialHeight={c.resolvedInitialHeight}
+    initialWidth={c.resolvedInitialWidth}
+    {...c.dimensions}
+    onpointerenter={onPointerEnter}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
+    {...extractLayerProps(restProps, 'lc-bar')}
+  />
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+import type { BarProps } from './Bar.shared.svelte.js';
+export type BarBaseLayerComponents = {
+    Rect: Component<any>;
+    /**
+     * Used only when the chart is radial. Optional because the HTML layer
+     * doesn't support radial charts and therefore doesn't need to bundle Arc.
+     */
+    Arc?: Component<any>;
+};
+export type BarBaseProps = BarProps & BarBaseLayerComponents;
+declare const Bar: Component<BarBaseProps, {}, "">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/components/Bar/Bar.canvas.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BarBase from './Bar.base.svelte';
+  import Rect from '../Rect/Rect.canvas.svelte';
+  import Arc from '../Arc/Arc.canvas.svelte';
+
+  import type { BarProps } from './Bar.shared.svelte.js';
+
+  let props: BarProps = $props();
+</script>
+
+<BarBase {Rect} {Arc} {...props} />

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

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

package/dist/components/Bar/Bar.html.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { BarProps, BarPropsWithoutHTML } from './Bar.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import BarBase from './Bar.base.svelte';
+  import Rect from '../Rect/Rect.html.svelte';
+
+  import type { BarProps } from './Bar.shared.svelte.js';
+
+  let props: BarProps = $props();
+</script>
+
+<!-- Arc is intentionally omitted: radial charts aren't supported on the HTML layer. -->
+<BarBase {Rect} {...props} />

package/dist/components/Bar/Bar.html.svelte.d.ts

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