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

package/dist/components/Polygon/Polygon.canvas.svelte

@@ -0,0 +1,112 @@
+<script lang="ts" module>
+  export type {
+    PolygonProps,
+    PolygonPropsWithoutHTML,
+  } from './Polygon.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from '@layerstack/utils';
+  import { renderPathData, type ComputedStylesOptions } from '../../utils/canvas.js';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { createKey } from '../../utils/key.svelte.js';
+  import { PolygonState, polygonMarkInfo, type PolygonProps } from './Polygon.shared.svelte.js';
+
+  let { ...rest }: PolygonProps = $props();
+
+  const c = new PolygonState(() => rest as PolygonProps);
+
+  function getStyleOptions(
+    styleOverrides: ComputedStylesOptions | undefined,
+    itemFill?: string | undefined,
+    itemStroke?: string | undefined,
+    itemFillOpacity?: number | undefined,
+    itemStrokeWidth?: number | undefined,
+    itemOpacity?: number | undefined,
+    itemClass?: string | undefined
+  ) {
+    return styleOverrides
+      ? merge(
+          { styles: { strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth } },
+          styleOverrides
+        )
+      : {
+          // Use raw `rest.fill` / `rest.stroke` (not `staticFill`) so canvas
+          // accepts non-string values like `CanvasPattern` / `CanvasGradient`.
+          styles: {
+            fill: itemFill ?? (rest.fill as any),
+            fillOpacity: itemFillOpacity ?? c.staticFillOpacity,
+            stroke: itemStroke ?? (rest.stroke as any),
+            strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth,
+            opacity: itemOpacity ?? c.staticOpacity,
+          },
+          classes: cls('lc-polygon', itemClass ?? c.staticClassName),
+          style: (rest as any).style as string | undefined,
+        };
+  }
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    if (c.dataMode) {
+      for (const d of c.resolvedData) {
+        const pathData = c.resolvePolygonPath(d);
+        const resolvedFill = resolveColorProp(rest.fill, d, c.chartCtx.cScale);
+        const resolvedStroke = resolveColorProp(rest.stroke, d, c.chartCtx.cScale);
+        const resolvedFillOpacity = resolveStyleProp(rest.fillOpacity, d);
+        const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, d);
+        const resolvedOpacity = resolveStyleProp(rest.opacity, d);
+        const resolvedClass = resolveStyleProp(rest.class, d);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
+        renderPathData(ctx, pathData, styleOpts);
+      }
+    } else {
+      const styleOpts = getStyleOptions(styleOverrides);
+      renderPathData(ctx, c.tweenedPathData, styleOpts);
+    }
+  }
+
+  const fillKey = createKey(() => rest.fill);
+  const strokeKey = createKey(() => rest.stroke);
+
+  c.chartCtx.registerComponent({
+    name: 'Polygon',
+    kind: 'mark',
+    markInfo: () => polygonMarkInfo(rest as PolygonProps, c.dataMode),
+    canvasRender: {
+      render,
+      events: {
+        click: (rest as any).onclick,
+        pointerenter: (rest as any).onpointerenter,
+        pointermove: (rest as any).onpointermove,
+        pointerleave: (rest as any).onpointerleave,
+        pointerdown: (rest as any).onpointerdown,
+        pointerover: (rest as any).onpointerover,
+        pointerout: (rest as any).onpointerout,
+        touchmove: (rest as any).ontouchmove,
+      },
+      deps: () => [
+        c.dataMode,
+        c.dataMode ? c.resolvedItems : null,
+        fillKey.current,
+        rest.fillOpacity,
+        strokeKey.current,
+        rest.strokeWidth,
+        rest.opacity,
+        rest.class,
+        c.tweenedPathData,
+        (rest as any).style,
+      ],
+    },
+  });
+</script>

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

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

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

@@ -0,0 +1,82 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { DataProp, DataDrivenStyleProps } from '../../utils/dataProp.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GeoState } from '../../states/geo.svelte.js';
+export type PolygonPropsWithoutHTML = {
+    cx?: DataProp;
+    initialCx?: number;
+    cy?: DataProp;
+    initialCy?: number;
+    r?: DataProp;
+    initialR?: number;
+    data?: any[];
+    key?: (d: any, index: number) => any;
+    /** The number of points or explicit points to create the polygon. @default 4 */
+    points?: number | {
+        x: number;
+        y: number;
+    }[];
+    /** The radius of the curve for rounded corners. @default 0 */
+    cornerRadius?: number;
+    /** The rotation of the polygon. @default 0 */
+    rotate?: number;
+    /** The percent to inset the odd points of the star (<1 inset, >1 outset). @default 0 */
+    inset?: number;
+    /** The horizontal stretch factor of the polygon. @default 1 */
+    scaleX?: number;
+    /** The vertical stretch factor of the polygon. @default 1 */
+    scaleY?: number;
+    /** The skew angle in degrees along the X axis. @default 0 */
+    skewX?: number;
+    /** The skew angle in degrees along the Y axis. @default 0 */
+    skewY?: number;
+    /** The tilt factor for x-coordinates. @default 1 */
+    tiltX?: number;
+    /** The tilt factor for y-coordinates. @default 1 */
+    tiltY?: number;
+    /** A bindable reference to the `<path>` element. @bindable */
+    ref?: SVGPathElement;
+    motion?: MotionProp;
+} & DataDrivenStyleProps;
+export type PolygonProps = PolygonPropsWithoutHTML & Without<SVGAttributes<Element>, PolygonPropsWithoutHTML>;
+export declare function polygonMarkInfo(props: PolygonProps, dataMode: boolean): {
+    data?: undefined;
+    x?: undefined;
+    y?: undefined;
+    color?: undefined;
+} | {
+    data: any[] | undefined;
+    x: string | undefined;
+    y: string | undefined;
+    color: string | undefined;
+};
+export declare class PolygonState {
+    #private;
+    chartCtx: ChartState;
+    geo: GeoState;
+    dataMode: boolean;
+    resolvedData: any[];
+    resolvedItems: {
+        d: any;
+        key: any;
+        cx: number;
+        cy: number;
+        r: number;
+    }[];
+    /** Resolve a single data item to a polygon path string. */
+    resolvePolygonPath(d: any): string;
+    get motionCx(): any;
+    get motionCy(): any;
+    get motionR(): any;
+    get tweenedPathData(): any;
+    pixelPathData: string;
+    staticFill: string | undefined;
+    staticFillOpacity: number | undefined;
+    staticStroke: string | undefined;
+    staticStrokeWidth: number | undefined;
+    staticOpacity: number | undefined;
+    staticClassName: string | undefined;
+    constructor(getProps: () => PolygonProps);
+}

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

@@ -0,0 +1,183 @@
+import { untrack } from 'svelte';
+import { interpolatePath } from 'd3-interpolate-path';
+import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair, } from '../../utils/dataProp.js';
+import { chartDataArray } from '../../utils/common.js';
+import { polygon } from '../../utils/shape.js';
+import { roundedPolygonPath } from '../../utils/path.js';
+import { createMotion, createDataMotionMap, extractTweenConfig, } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { getGeoContext } from '../../contexts/geo.js';
+const defaultKey = (_, i) => i;
+export function polygonMarkInfo(props, dataMode) {
+    if (!dataMode)
+        return {};
+    return {
+        data: props.data,
+        x: typeof props.cx === 'string' ? props.cx : undefined,
+        y: typeof props.cy === 'string' ? props.cy : undefined,
+        color: typeof props.fill === 'string'
+            ? props.fill
+            : typeof props.stroke === 'string'
+                ? props.stroke
+                : undefined,
+    };
+}
+export class PolygonState {
+    #getProps = () => ({});
+    chartCtx = getChartContext();
+    geo = getGeoContext();
+    dataMode = $derived(hasAnyDataProp(this.#getProps().cx, this.#getProps().cy, this.#getProps().r));
+    resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
+    resolvedItems = $derived.by(() => {
+        if (!this.dataMode)
+            return [];
+        const props = this.#getProps();
+        const keyFn = props.key ?? defaultKey;
+        return this.resolvedData.map((d, i) => {
+            const key = keyFn(d, i);
+            let resolvedCx, resolvedCy;
+            if (this.geo.projection) {
+                [resolvedCx, resolvedCy] = resolveGeoDataPair(props.cx, props.cy, d, this.geo.projection);
+            }
+            else {
+                resolvedCx = resolveDataProp(props.cx, d, this.chartCtx.xScale, 0);
+                resolvedCy = resolveDataProp(props.cy, d, this.chartCtx.yScale, 0);
+            }
+            const resolvedR = resolveDataProp(props.r, d, this.chartCtx.rScale, typeof props.r === 'number' ? props.r : 1);
+            const animated = this.#dataMotionMap?.get(key);
+            return {
+                d,
+                key,
+                cx: animated?.cx ?? resolvedCx,
+                cy: animated?.cy ?? resolvedCy,
+                r: animated?.r ?? resolvedR,
+            };
+        });
+    });
+    /** Resolve a single data item to a polygon path string. */
+    resolvePolygonPath(d) {
+        const props = this.#getProps();
+        let resolvedCx, resolvedCy;
+        if (this.geo.projection) {
+            [resolvedCx, resolvedCy] = resolveGeoDataPair(props.cx, props.cy, d, this.geo.projection);
+        }
+        else {
+            resolvedCx = resolveDataProp(props.cx, d, this.chartCtx.xScale, 0);
+            resolvedCy = resolveDataProp(props.cy, d, this.chartCtx.yScale, 0);
+        }
+        const resolvedR = resolveDataProp(props.r, d, this.chartCtx.rScale, typeof props.r === 'number' ? props.r : 1);
+        const pts = typeof props.points === 'number' || props.points === undefined
+            ? polygon({
+                cx: resolvedCx,
+                cy: resolvedCy,
+                count: typeof props.points === 'number' ? props.points : 4,
+                radius: resolvedR,
+                rotate: props.rotate ?? 0,
+                inset: props.inset ?? 0,
+                scaleX: props.scaleX ?? 1,
+                scaleY: props.scaleY ?? 1,
+                skewX: props.skewX ?? 0,
+                skewY: props.skewY ?? 0,
+                tiltX: props.tiltX ?? 0,
+                tiltY: props.tiltY ?? 0,
+            })
+            : props.points;
+        return roundedPolygonPath(pts, props.cornerRadius ?? 0);
+    }
+    // Pixel-mode motion sources
+    #dataMotionMap = null;
+    #motionCx;
+    #motionCy;
+    #motionR;
+    #tweenedState;
+    get motionCx() {
+        return this.#motionCx.current;
+    }
+    get motionCy() {
+        return this.#motionCy.current;
+    }
+    get motionR() {
+        return this.#motionR.current;
+    }
+    get tweenedPathData() {
+        return this.#tweenedState.current;
+    }
+    // Pixel-mode polygon path string (depends on motion + transform props)
+    pixelPathData = $derived.by(() => {
+        const props = this.#getProps();
+        const pts = typeof props.points === 'number' || props.points === undefined
+            ? polygon({
+                cx: this.motionCx,
+                cy: this.motionCy,
+                count: typeof props.points === 'number' ? props.points : 4,
+                radius: this.motionR,
+                rotate: props.rotate ?? 0,
+                inset: props.inset ?? 0,
+                scaleX: props.scaleX ?? 1,
+                scaleY: props.scaleY ?? 1,
+                skewX: props.skewX ?? 0,
+                skewY: props.skewY ?? 0,
+                tiltX: props.tiltX ?? 0,
+                tiltY: props.tiltY ?? 0,
+            })
+            : props.points;
+        return roundedPolygonPath(pts, props.cornerRadius ?? 0);
+    });
+    staticFill = $derived(typeof this.#getProps().fill === 'string' ? this.#getProps().fill : undefined);
+    staticFillOpacity = $derived(typeof this.#getProps().fillOpacity === 'number'
+        ? this.#getProps().fillOpacity
+        : undefined);
+    staticStroke = $derived(typeof this.#getProps().stroke === 'string' ? this.#getProps().stroke : undefined);
+    staticStrokeWidth = $derived(typeof this.#getProps().strokeWidth === 'number'
+        ? this.#getProps().strokeWidth
+        : undefined);
+    staticOpacity = $derived(typeof this.#getProps().opacity === 'number'
+        ? this.#getProps().opacity
+        : undefined);
+    staticClassName = $derived(typeof this.#getProps().class === 'string' ? this.#getProps().class : undefined);
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        const initialCx = initial.initialCx ?? (typeof initial.cx === 'number' ? initial.cx : 0);
+        const initialCy = initial.initialCy ?? (typeof initial.cy === 'number' ? initial.cy : 0);
+        const initialR = initial.initialR ?? (typeof initial.r === 'number' ? initial.r : 1);
+        this.#motionCx = createMotion(initialCx, () => (typeof getProps().cx === 'number' ? getProps().cx : 0), initial.motion);
+        this.#motionCy = createMotion(initialCy, () => (typeof getProps().cy === 'number' ? getProps().cy : 0), initial.motion);
+        this.#motionR = createMotion(initialR, () => (typeof getProps().r === 'number' ? getProps().r : 1), initial.motion);
+        const extractedTween = extractTweenConfig(initial.motion);
+        const tweenedOptions = extractedTween
+            ? {
+                type: extractedTween.type,
+                options: { interpolate: interpolatePath, ...extractedTween.options },
+            }
+            : undefined;
+        this.#tweenedState = createMotion(null, () => this.pixelPathData, tweenedOptions);
+        this.#dataMotionMap = createDataMotionMap(initial.motion);
+        if (this.#dataMotionMap) {
+            const motionMap = this.#dataMotionMap;
+            $effect(() => {
+                if (!this.dataMode)
+                    return;
+                const props = getProps();
+                const keyFn = props.key ?? defaultKey;
+                const activeKeys = new Set();
+                for (let i = 0; i < this.resolvedData.length; i++) {
+                    const d = this.resolvedData[i];
+                    const key = keyFn(d, i);
+                    activeKeys.add(key);
+                    let resolvedCx, resolvedCy;
+                    if (this.geo.projection) {
+                        [resolvedCx, resolvedCy] = resolveGeoDataPair(props.cx, props.cy, d, this.geo.projection);
+                    }
+                    else {
+                        resolvedCx = resolveDataProp(props.cx, d, this.chartCtx.xScale, 0);
+                        resolvedCy = resolveDataProp(props.cy, d, this.chartCtx.yScale, 0);
+                    }
+                    const resolvedR = resolveDataProp(props.r, d, this.chartCtx.rScale, typeof props.r === 'number' ? props.r : 1);
+                    untrack(() => motionMap.update(key, { cx: resolvedCx, cy: resolvedCy, r: resolvedR }));
+                }
+                untrack(() => motionMap.cleanup(activeKeys));
+            });
+        }
+    }
+}

package/dist/components/Polygon/Polygon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type {
+    PolygonProps,
+    PolygonPropsWithoutHTML,
+  } from './Polygon.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import PolygonSvg from './Polygon.svg.svelte';
+  import PolygonCanvas from './Polygon.canvas.svelte';
+  import type { PolygonProps } from './Polygon.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let { ref = $bindable(), ...rest }: PolygonProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <PolygonSvg bind:ref {...rest} />
+{:else if layerCtx === 'canvas'}
+  <PolygonCanvas {...rest} />
+{/if}

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

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

package/dist/components/Polygon/Polygon.svelte.test.d.ts

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

package/dist/components/{Polygon.svelte.test.js → Polygon/Polygon.svelte.test.js}

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
-import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import TestHarness, { componentTestId } from '../tests/TestHarness.svelte';
 import Polygon from './Polygon.svelte';
 describe('Polygon', () => {
     describe('pixel mode', () => {

package/dist/components/Polygon/Polygon.svg.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" module>
+  export type {
+    PolygonProps,
+    PolygonPropsWithoutHTML,
+  } from './Polygon.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { PolygonState, polygonMarkInfo, type PolygonProps } from './Polygon.shared.svelte.js';
+
+  let {
+    ref: refProp = $bindable(),
+    ...rest
+  }: PolygonProps = $props();
+
+  const c = new PolygonState(() => rest as PolygonProps);
+
+  let ref = $state<SVGPathElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  c.chartCtx.registerComponent({
+    name: 'Polygon',
+    kind: 'mark',
+    markInfo: () => polygonMarkInfo(rest as PolygonProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedData as d, i (rest.key ? rest.key(d, i) : i)}
+    {@const pathData = c.resolvePolygonPath(d)}
+    {@const resolvedFill = resolveColorProp(rest.fill, d, c.chartCtx.cScale)}
+    {@const resolvedStroke = resolveColorProp(rest.stroke, d, c.chartCtx.cScale)}
+    {@const resolvedFillOpacity = resolveStyleProp(rest.fillOpacity, d)}
+    {@const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, d)}
+    {@const resolvedOpacity = resolveStyleProp(rest.opacity, d)}
+    {@const resolvedClass = resolveStyleProp(rest.class, d)}
+    <path
+      {...rest as any}
+      d={pathData}
+      fill={resolvedFill}
+      fill-opacity={resolvedFillOpacity}
+      stroke={resolvedStroke}
+      stroke-width={resolvedStrokeWidth}
+      opacity={resolvedOpacity}
+      class={cls('lc-polygon', resolvedClass)}
+    />
+  {/each}
+{:else}
+  <path
+    {...rest as any}
+    d={c.tweenedPathData}
+    fill={c.staticFill}
+    fill-opacity={c.staticFillOpacity}
+    stroke={c.staticStroke}
+    stroke-width={c.staticStrokeWidth}
+    opacity={c.staticOpacity}
+    class={cls('lc-polygon', c.staticClassName)}
+    bind:this={ref}
+  />
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-polygon)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+  }
+</style>

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

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

package/dist/components/RadialGradient/RadialGradient.canvas.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  export type {
+    RadialGradientProps,
+    RadialGradientPropsWithoutHTML,
+  } from './RadialGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getComputedStyles } from '../../utils/canvas.js';
+  import { parsePercent } from '../../utils/math.js';
+  import { createId } from '../../utils/createId.js';
+  import type { RadialGradientProps } from './RadialGradient.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('radialGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    cx = '50%',
+    cy = '50%',
+    fx = cx,
+    fy = cy,
+    children,
+    class: className,
+    ...rest
+  }: RadialGradientProps = $props();
+
+  const ctx = getChartContext();
+
+  let canvasGradient = $state<CanvasGradient>();
+
+  function render(_ctx: CanvasRenderingContext2D) {
+    // TODO: Set correct values: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient.
+    // TODO: Memoize `createRadialGradient()` (see LinearGradient)
+    const gradient = _ctx.createRadialGradient(0, 0, 0, 0, 0, 0);
+
+    // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
+    for (let i = 0; i < stops.length; i++) {
+      const stop = stops[i];
+      if (Array.isArray(stop)) {
+        const { fill } = getComputedStyles(_ctx.canvas, {
+          styles: { fill: stop[1] },
+          classes: className,
+        });
+        gradient.addColorStop(parsePercent(stop[0]), fill);
+      } else {
+        const { fill } = getComputedStyles(_ctx.canvas, {
+          styles: { fill: stop },
+          classes: className,
+        });
+        gradient.addColorStop(i / (stops.length - 1), fill);
+      }
+    }
+
+    canvasGradient = gradient;
+  }
+
+  ctx.registerComponent({
+    name: 'Gradient',
+    kind: 'group',
+    canvasRender: {
+      render,
+      deps: () => [stops, cx, cy, fx, fy, ctx.width, ctx.height],
+    },
+  });
+</script>
+
+{@render children?.({ id, gradient: canvasGradient as any })}

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

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

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

@@ -1,41 +1,25 @@
 import type { Snippet } from 'svelte';
-import type { Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
 export type RadialGradientPropsWithoutHTML = {
-    /**
-     * Unique id for radialGradient
-     */
+    /** Unique id for radialGradient */
     id?: string;
     /**
-     * Array array of strings (colors), will equally distributed from 0-100%.
-     * If array of tuples, will use first value as the offset, and second as color
+     * Array of strings (colors), distributed equally from 0-100%.
+     * If array of tuples, will use first value as the offset, and second as color.
      *
      * @default ['var(--tw-gradient-from)', 'var(--tw-gradient-to)']
      */
     stops?: string[] | [string | number, string][];
-    /**
-     * The x coordinate of the center of the gradient
-     * @default '50%'
-     */
+    /** The x coordinate of the center of the gradient @default '50%' */
     cx?: string;
-    /**
-     * The y coordinate of the center of the gradient
-     * @default '50%'
-     */
+    /** The y coordinate of the center of the gradient @default '50%' */
     cy?: string;
-    /**
-     * The x coordinate of the focal point of the gradient
-     * @default cx
-     */
+    /** The x coordinate of the focal point of the gradient @default cx */
     fx?: string;
-    /**
-     * The y coordinate of the focal point of the gradient
-     * @default cy
-     */
+    /** The y coordinate of the focal point of the gradient @default cy */
     fy?: string;
-    /**
-     * The radius of the gradient
-     */
+    /** The radius of the gradient */
     r?: string;
     /**
      * Indicates how the gradient behaves if it starts or ends inside the bounds
@@ -44,9 +28,7 @@ export type RadialGradientPropsWithoutHTML = {
      * @default 'pad'
      */
     spreadMethod?: 'pad' | 'reflect' | 'repeat';
-    /**
-     * Transform attribute for the gradient
-     */
+    /** Transform attribute for the gradient */
     transform?: string | null;
     /**
      * Define the coordinate system for attributes (i.e. gradientUnits)
@@ -58,13 +40,7 @@ export type RadialGradientPropsWithoutHTML = {
         id: string;
         gradient: string;
     }]>;
-    /**
-     * Render as a child of the gradient and will opt out of the default stops
-     * being rendered.
-     */
+    /** Render as a child of the gradient and will opt out of the default stops being rendered. */
     stopsContent?: Snippet;
 };
 export type RadialGradientProps = RadialGradientPropsWithoutHTML & Without<SVGAttributes<SVGRadialGradientElement>, RadialGradientPropsWithoutHTML>;
-declare const RadialGradient: import("svelte").Component<RadialGradientProps, {}, "">;
-type RadialGradient = ReturnType<typeof RadialGradient>;
-export default RadialGradient;

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

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