@moduix/solid 1.0.0

package/dist/components/chart/Chart.js

@@ -0,0 +1,453 @@
+import { Portal, className, createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, style, template, use } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { createChartRendererAdapter } from "@tanstack/charts/adapter/renderer";
+import { motion } from "@tanstack/charts/motion";
+import { svgChartRenderer } from "@tanstack/charts/svg/renderer";
+import { clsx } from "clsx";
+import { For, Show, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps } from "solid-js";
+import Chart_module from "./Chart.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<span aria-hidden=true data-slot=chart-tooltip-swatch>"), _tmpl$2 = /*#__PURE__*/ template("<div data-slot=chart-tooltip-title>"), _tmpl$3 = /*#__PURE__*/ template("<div data-slot=chart-tooltip-rows>"), _tmpl$4 = /*#__PURE__*/ template("<div data-slot=chart-tooltip-body>"), _tmpl$5 = /*#__PURE__*/ template("<div data-slot=chart-tooltip-row><span data-slot=chart-tooltip-label></span><span data-slot=chart-tooltip-value>"), _tmpl$6 = /*#__PURE__*/ template("<span data-slot=chart-tooltip-text>"), _tmpl$7 = /*#__PURE__*/ template('<span aria-hidden=true class=ts-chart-tooltip__swatch style="display:block;width:0.55rem;height:0.55rem;border-radius:0.15rem;box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)">'), _tmpl$8 = /*#__PURE__*/ template("<div class=ts-chart-tooltip__title style=display:flex;align-items:center;gap:0.4rem;font-weight:650>"), _tmpl$9 = /*#__PURE__*/ template("<div class=ts-chart-tooltip__rows aria-hidden=true>"), _tmpl$0 = /*#__PURE__*/ template('<div class=ts-chart-tooltip__row style="display:grid;grid-template-columns:0.55rem minmax(0,1fr) auto;align-items:center;column-gap:0.4rem"><span></span><span style=text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap>'), _tmpl$1 = /*#__PURE__*/ template("<span>"), _tmpl$10 = /*#__PURE__*/ template("<div style=position:relative><div class=ts-chart-surface style=width:100%;height:100%>");
+const defaultChartRenderer = motion({
+    transition: {
+        type: 'spring',
+        stiffness: 260,
+        damping: 30,
+        mass: 0.8
+    }
+});
+function ChartRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.figure, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "chart",
+        "data-part": "root",
+        "data-slot": "chart-root",
+        get ["class"] () {
+            return clsx(Chart_module.root, local.class);
+        }
+    }));
+}
+function ModuixTooltipObjectContent(props) {
+    return (()=>{
+        var _el$ = _tmpl$4();
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return props.content().title;
+            },
+            get children () {
+                var _el$2 = _tmpl$2();
+                insert(_el$2, createComponent(Show, {
+                    get when () {
+                        return props.content().color;
+                    },
+                    get children () {
+                        var _el$3 = _tmpl$();
+                        effect((_p$)=>{
+                            var _v$ = Chart_module.tooltipSwatch, _v$2 = props.content().color;
+                            _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+                            _v$2 !== _p$.t && setStyleProperty(_el$3, "background-color", _p$.t = _v$2);
+                            return _p$;
+                        }, {
+                            e: void 0,
+                            t: void 0
+                        });
+                        return _el$3;
+                    }
+                }), null);
+                insert(_el$2, ()=>props.content().title, null);
+                effect(()=>className(_el$2, Chart_module.tooltipTitle));
+                return _el$2;
+            }
+        }), null);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return props.content().rows.length;
+            },
+            get children () {
+                var _el$4 = _tmpl$3();
+                insert(_el$4, createComponent(For, {
+                    get each () {
+                        return props.content().rows;
+                    },
+                    children: (row)=>(()=>{
+                            var _el$5 = _tmpl$5(), _el$7 = _el$5.firstChild, _el$8 = _el$7.nextSibling;
+                            insert(_el$5, createComponent(Show, {
+                                get when () {
+                                    return row.color;
+                                },
+                                get children () {
+                                    var _el$6 = _tmpl$();
+                                    effect((_p$)=>{
+                                        var _v$3 = Chart_module.tooltipSwatch, _v$4 = row.color;
+                                        _v$3 !== _p$.e && className(_el$6, _p$.e = _v$3);
+                                        _v$4 !== _p$.t && setStyleProperty(_el$6, "background-color", _p$.t = _v$4);
+                                        return _p$;
+                                    }, {
+                                        e: void 0,
+                                        t: void 0
+                                    });
+                                    return _el$6;
+                                }
+                            }), _el$7);
+                            insert(_el$7, ()=>row.label);
+                            insert(_el$8, ()=>row.value);
+                            effect((_p$)=>{
+                                var _v$5 = row.color ? '' : void 0, _v$6 = Chart_module.tooltipRow, _v$7 = Chart_module.tooltipLabel, _v$8 = Chart_module.tooltipValue;
+                                _v$5 !== _p$.e && setAttribute(_el$5, "data-has-swatch", _p$.e = _v$5);
+                                _v$6 !== _p$.t && className(_el$5, _p$.t = _v$6);
+                                _v$7 !== _p$.a && className(_el$7, _p$.a = _v$7);
+                                _v$8 !== _p$.o && className(_el$8, _p$.o = _v$8);
+                                return _p$;
+                            }, {
+                                e: void 0,
+                                t: void 0,
+                                a: void 0,
+                                o: void 0
+                            });
+                            return _el$5;
+                        })()
+                }));
+                effect(()=>className(_el$4, Chart_module.tooltipRows));
+                return _el$4;
+            }
+        }), null);
+        effect(()=>className(_el$, Chart_module.defaultTooltipContent));
+        return _el$;
+    })();
+}
+function ModuixTooltipBody(props) {
+    return [
+        createComponent(Show, {
+            get when () {
+                return 'string' == typeof props.content();
+            },
+            get children () {
+                var _el$9 = _tmpl$6();
+                insert(_el$9, ()=>props.content());
+                return _el$9;
+            }
+        }),
+        createComponent(Show, {
+            get when () {
+                return 'string' != typeof props.content();
+            },
+            get children () {
+                return createComponent(ModuixTooltipObjectContent, {
+                    content: ()=>props.content()
+                });
+            }
+        })
+    ];
+}
+function TanStackTooltipSwatch(props) {
+    return (()=>{
+        var _el$0 = _tmpl$7();
+        effect((_$p)=>setStyleProperty(_el$0, "background", props.color));
+        return _el$0;
+    })();
+}
+function TanStackTooltipObjectContent(props) {
+    return [
+        createComponent(Show, {
+            get when () {
+                return props.content().title;
+            },
+            get children () {
+                var _el$1 = _tmpl$8();
+                insert(_el$1, createComponent(Show, {
+                    get when () {
+                        return props.content().color;
+                    },
+                    get children () {
+                        return createComponent(TanStackTooltipSwatch, {
+                            get color () {
+                                return props.content().color;
+                            }
+                        });
+                    }
+                }), null);
+                insert(_el$1, ()=>props.content().title, null);
+                effect((_$p)=>setStyleProperty(_el$1, "margin-bottom", props.content().rows.length ? '0.3rem' : 0));
+                return _el$1;
+            }
+        }),
+        createComponent(Show, {
+            get when () {
+                return props.content().rows.length;
+            },
+            get children () {
+                var _el$10 = _tmpl$9();
+                insert(_el$10, createComponent(For, {
+                    get each () {
+                        return props.content().rows;
+                    },
+                    children: (row)=>(()=>{
+                            var _el$11 = _tmpl$0(), _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
+                            insert(_el$11, (()=>{
+                                var _c$ = memo(()=>!!row.color);
+                                return ()=>_c$() ? createComponent(TanStackTooltipSwatch, {
+                                        get color () {
+                                            return row.color;
+                                        }
+                                    }) : _tmpl$1();
+                            })(), _el$12);
+                            insert(_el$12, ()=>row.label);
+                            insert(_el$13, ()=>row.value);
+                            return _el$11;
+                        })()
+                }));
+                return _el$10;
+            }
+        })
+    ];
+}
+function TanStackTooltipBody(props) {
+    return [
+        createComponent(Show, {
+            get when () {
+                return 'string' == typeof props.content();
+            },
+            get children () {
+                return props.content();
+            }
+        }),
+        createComponent(Show, {
+            get when () {
+                return 'string' != typeof props.content();
+            },
+            get children () {
+                return createComponent(TanStackTooltipObjectContent, {
+                    content: ()=>props.content()
+                });
+            }
+        })
+    ];
+}
+function ChartTooltipBody(props) {
+    const context = {
+        get points () {
+            return props.target().points;
+        },
+        get content () {
+            return props.target().content;
+        },
+        defaultBody: createComponent(TanStackTooltipBody, {
+            content: ()=>props.target().content
+        }),
+        get pinned () {
+            return props.target().pinned;
+        },
+        get dismiss () {
+            return props.target().dismiss;
+        }
+    };
+    return createComponent(Portal, {
+        get mount () {
+            return props.target().element;
+        },
+        get children () {
+            return props.render(context);
+        }
+    });
+}
+const renderDefaultTooltipBody = (context)=>createComponent(ModuixTooltipBody, {
+        content: ()=>context.content
+    });
+function ChartPrimitive(props) {
+    const generatedId = `ts-chart-${createUniqueId().replaceAll(/[^a-zA-Z0-9_-]/g, '')}`;
+    const resolvedRenderer = createMemo(()=>props.renderer ?? (false === props.motion ? svgChartRenderer : defaultChartRenderer));
+    const [tooltipTarget, setTooltipTarget] = createSignal(null);
+    const getOptions = ()=>{
+        const { class: _class, motion: _motion, renderTooltipBody, renderer: _renderer, style: _style, ...others } = props;
+        return {
+            ...others,
+            idPrefix: props.idPrefix ?? generatedId,
+            renderer: resolvedRenderer(),
+            onTooltipBodyChange: renderTooltipBody ? setTooltipTarget : void 0
+        };
+    };
+    const adapter = createChartRendererAdapter(getOptions());
+    const initialMarkup = adapter.prerender();
+    let surface;
+    createEffect(()=>adapter.update(getOptions()));
+    onMount(()=>adapter.mount(surface));
+    onCleanup(()=>adapter.destroy());
+    return [
+        (()=>{
+            var _el$15 = _tmpl$10(), _el$16 = _el$15.firstChild;
+            use((element)=>surface = element, _el$16);
+            _el$16.innerHTML = initialMarkup;
+            effect((_p$)=>{
+                var _v$9 = clsx('ts-chart-host', props.class), _v$0 = {
+                    width: void 0 === props.width ? '100%' : `${props.width}px`,
+                    height: void 0 === props.height ? 'number' == typeof props.aspectRatio && Number.isFinite(props.aspectRatio) && props.aspectRatio > 0 ? void 0 : '320px' : `${props.height}px`,
+                    'aspect-ratio': void 0 === props.height && 'number' == typeof props.aspectRatio && Number.isFinite(props.aspectRatio) && props.aspectRatio > 0 ? props.aspectRatio.toString() : void 0,
+                    ...props.style
+                };
+                _v$9 !== _p$.e && className(_el$15, _p$.e = _v$9);
+                _p$.t = style(_el$15, _v$0, _p$.t);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0
+            });
+            return _el$15;
+        })(),
+        createComponent(Show, {
+            get when () {
+                return props.renderTooltipBody;
+            },
+            keyed: true,
+            children: (render)=>createComponent(Show, {
+                    get when () {
+                        return tooltipTarget();
+                    },
+                    keyed: true,
+                    children: (target)=>createComponent(ChartTooltipBody, {
+                            render: render,
+                            target: ()=>target
+                        })
+                })
+        })
+    ];
+}
+function ChartPlot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'motion',
+        'renderTooltipBody',
+        'renderer',
+        'style'
+    ]);
+    return createComponent(ChartPrimitive, mergeProps(others, {
+        get ["class"] () {
+            return clsx(Chart_module.plot, local.class);
+        },
+        get motion () {
+            return local.motion;
+        },
+        get renderTooltipBody () {
+            return local.renderTooltipBody ?? renderDefaultTooltipBody;
+        },
+        get renderer () {
+            return local.renderer;
+        },
+        get style () {
+            return local.style;
+        }
+    }));
+}
+function ChartHeader(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.figcaption, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "chart",
+        "data-part": "header",
+        "data-slot": "chart-header",
+        get ["class"] () {
+            return clsx(Chart_module.header, local.class);
+        }
+    }));
+}
+function ChartTitle(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.h3, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "chart",
+        "data-part": "title",
+        "data-slot": "chart-title",
+        get ["class"] () {
+            return clsx(Chart_module.title, local.class);
+        }
+    }));
+}
+function ChartDescription(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.p, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "chart",
+        "data-part": "description",
+        "data-slot": "chart-description",
+        get ["class"] () {
+            return clsx(Chart_module.description, local.class);
+        }
+    }));
+}
+function ChartLegend(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.ul, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "chart",
+        "data-part": "legend",
+        "data-slot": "chart-legend",
+        get ["class"] () {
+            return clsx(Chart_module.legend, local.class);
+        }
+    }));
+}
+function ChartLegendItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'color',
+        'style'
+    ]);
+    return createComponent(ark.li, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "chart",
+        "data-part": "legend-item",
+        "data-slot": "chart-legend-item",
+        get ["class"] () {
+            return clsx(Chart_module.legendItem, local.class);
+        },
+        get style () {
+            return memo(()=>!!local.color)() ? {
+                '--moduix-chart-legend-indicator-color': local.color,
+                ...'object' == typeof local.style && local.style ? local.style : {}
+            } : local.style;
+        }
+    }));
+}
+const Chart = Object.assign(ChartRoot, {
+    Root: ChartRoot,
+    Plot: ChartPlot,
+    Header: ChartHeader,
+    Title: ChartTitle,
+    Description: ChartDescription,
+    Legend: ChartLegend,
+    LegendItem: ChartLegendItem
+});
+export { Chart };

package/dist/components/chart/Chart.jsx

@@ -0,0 +1,242 @@
+import { ark } from "@ark-ui/solid/factory";
+import { createChartRendererAdapter } from "@tanstack/charts/adapter/renderer";
+import { motion } from "@tanstack/charts/motion";
+import { svgChartRenderer } from "@tanstack/charts/svg/renderer";
+import { clsx } from "clsx";
+import { For, Show, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
+import Chart_module from "./Chart.module.jsx";
+const defaultChartRenderer = motion({
+    transition: {
+        type: 'spring',
+        stiffness: 260,
+        damping: 30,
+        mass: 0.8
+    }
+});
+function ChartRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.figure asChild={local.asChild} {...others} data-scope="chart" data-part="root" data-slot="chart-root" class={clsx(Chart_module.root, local.class)}/>;
+}
+function ModuixTooltipObjectContent(props) {
+    return <div data-slot="chart-tooltip-body" class={Chart_module.defaultTooltipContent}>
+      <Show when={props.content().title}>
+        <div data-slot="chart-tooltip-title" class={Chart_module.tooltipTitle}>
+          <Show when={props.content().color}>
+            <span aria-hidden="true" data-slot="chart-tooltip-swatch" class={Chart_module.tooltipSwatch} style={{
+        'background-color': props.content().color
+    }}/>
+          </Show>
+          {props.content().title}
+        </div>
+      </Show>
+      <Show when={props.content().rows.length}>
+        <div data-slot="chart-tooltip-rows" class={Chart_module.tooltipRows}>
+          <For each={props.content().rows}>
+            {(row)=><div data-has-swatch={row.color ? '' : void 0} data-slot="chart-tooltip-row" class={Chart_module.tooltipRow}>
+                <Show when={row.color}>
+                  <span aria-hidden="true" data-slot="chart-tooltip-swatch" class={Chart_module.tooltipSwatch} style={{
+            'background-color': row.color
+        }}/>
+                </Show>
+                <span data-slot="chart-tooltip-label" class={Chart_module.tooltipLabel}>
+                  {row.label}
+                </span>
+                <span data-slot="chart-tooltip-value" class={Chart_module.tooltipValue}>
+                  {row.value}
+                </span>
+              </div>}
+          </For>
+        </div>
+      </Show>
+    </div>;
+}
+function ModuixTooltipBody(props) {
+    return <>
+      <Show when={'string' == typeof props.content()}>
+        <span data-slot="chart-tooltip-text">{props.content()}</span>
+      </Show>
+      <Show when={'string' != typeof props.content()}>
+        <ModuixTooltipObjectContent content={()=>props.content()}/>
+      </Show>
+    </>;
+}
+function TanStackTooltipSwatch(props) {
+    return <span aria-hidden="true" class="ts-chart-tooltip__swatch" style={{
+        display: 'block',
+        width: '0.55rem',
+        height: '0.55rem',
+        'border-radius': '0.15rem',
+        'box-shadow': 'inset 0 0 0 1px rgb(0 0 0/.12)',
+        background: props.color
+    }}/>;
+}
+function TanStackTooltipObjectContent(props) {
+    return <>
+      <Show when={props.content().title}>
+        <div class="ts-chart-tooltip__title" style={{
+        display: 'flex',
+        'align-items': 'center',
+        gap: '0.4rem',
+        'font-weight': 650,
+        'margin-bottom': props.content().rows.length ? '0.3rem' : 0
+    }}>
+          <Show when={props.content().color}>
+            <TanStackTooltipSwatch color={props.content().color}/>
+          </Show>
+          {props.content().title}
+        </div>
+      </Show>
+      <Show when={props.content().rows.length}>
+        <div class="ts-chart-tooltip__rows" aria-hidden="true">
+          <For each={props.content().rows}>
+            {(row)=><div class="ts-chart-tooltip__row" style={{
+            display: 'grid',
+            'grid-template-columns': '0.55rem minmax(0,1fr) auto',
+            'align-items': 'center',
+            'column-gap': '0.4rem'
+        }}>
+                {row.color ? <TanStackTooltipSwatch color={row.color}/> : <span/>}
+                <span>{row.label}</span>
+                <span style={{
+            'text-align': 'right',
+            'font-variant-numeric': 'tabular-nums',
+            'white-space': 'nowrap'
+        }}>
+                  {row.value}
+                </span>
+              </div>}
+          </For>
+        </div>
+      </Show>
+    </>;
+}
+function TanStackTooltipBody(props) {
+    return <>
+      <Show when={'string' == typeof props.content()}>{props.content()}</Show>
+      <Show when={'string' != typeof props.content()}>
+        <TanStackTooltipObjectContent content={()=>props.content()}/>
+      </Show>
+    </>;
+}
+function ChartTooltipBody(props) {
+    const context = {
+        get points () {
+            return props.target().points;
+        },
+        get content () {
+            return props.target().content;
+        },
+        defaultBody: <TanStackTooltipBody content={()=>props.target().content}/>,
+        get pinned () {
+            return props.target().pinned;
+        },
+        get dismiss () {
+            return props.target().dismiss;
+        }
+    };
+    return <Portal mount={props.target().element}>{props.render(context)}</Portal>;
+}
+const renderDefaultTooltipBody = (context)=><ModuixTooltipBody content={()=>context.content}/>;
+function ChartPrimitive(props) {
+    const generatedId = `ts-chart-${createUniqueId().replaceAll(/[^a-zA-Z0-9_-]/g, '')}`;
+    const resolvedRenderer = createMemo(()=>props.renderer ?? (false === props.motion ? svgChartRenderer : defaultChartRenderer));
+    const [tooltipTarget, setTooltipTarget] = createSignal(null);
+    const getOptions = ()=>{
+        const { class: _class, motion: _motion, renderTooltipBody, renderer: _renderer, style: _style, ...others } = props;
+        return {
+            ...others,
+            idPrefix: props.idPrefix ?? generatedId,
+            renderer: resolvedRenderer(),
+            onTooltipBodyChange: renderTooltipBody ? setTooltipTarget : void 0
+        };
+    };
+    const adapter = createChartRendererAdapter(getOptions());
+    const initialMarkup = adapter.prerender();
+    let surface;
+    createEffect(()=>adapter.update(getOptions()));
+    onMount(()=>adapter.mount(surface));
+    onCleanup(()=>adapter.destroy());
+    return <>
+      <div class={clsx('ts-chart-host', props.class)} style={{
+        position: 'relative',
+        width: void 0 === props.width ? '100%' : `${props.width}px`,
+        height: void 0 === props.height ? 'number' == typeof props.aspectRatio && Number.isFinite(props.aspectRatio) && props.aspectRatio > 0 ? void 0 : '320px' : `${props.height}px`,
+        'aspect-ratio': void 0 === props.height && 'number' == typeof props.aspectRatio && Number.isFinite(props.aspectRatio) && props.aspectRatio > 0 ? props.aspectRatio.toString() : void 0,
+        ...props.style
+    }}>
+        <div ref={(element)=>surface = element} class="ts-chart-surface" style={{
+        width: '100%',
+        height: '100%'
+    }} innerHTML={initialMarkup}/>
+      </div>
+      <Show when={props.renderTooltipBody} keyed>
+        {(render)=><Show when={tooltipTarget()} keyed>
+            {(target)=><ChartTooltipBody render={render} target={()=>target}/>}
+          </Show>}
+      </Show>
+    </>;
+}
+function ChartPlot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'motion',
+        'renderTooltipBody',
+        'renderer',
+        'style'
+    ]);
+    return <ChartPrimitive {...others} class={clsx(Chart_module.plot, local.class)} motion={local.motion} renderTooltipBody={local.renderTooltipBody ?? renderDefaultTooltipBody} renderer={local.renderer} style={local.style}/>;
+}
+function ChartHeader(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.figcaption asChild={local.asChild} {...others} data-scope="chart" data-part="header" data-slot="chart-header" class={clsx(Chart_module.header, local.class)}/>;
+}
+function ChartTitle(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.h3 asChild={local.asChild} {...others} data-scope="chart" data-part="title" data-slot="chart-title" class={clsx(Chart_module.title, local.class)}/>;
+}
+function ChartDescription(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.p asChild={local.asChild} {...others} data-scope="chart" data-part="description" data-slot="chart-description" class={clsx(Chart_module.description, local.class)}/>;
+}
+function ChartLegend(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.ul asChild={local.asChild} {...others} data-scope="chart" data-part="legend" data-slot="chart-legend" class={clsx(Chart_module.legend, local.class)}/>;
+}
+function ChartLegendItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'color',
+        'style'
+    ]);
+    return <ark.li asChild={local.asChild} {...others} data-scope="chart" data-part="legend-item" data-slot="chart-legend-item" class={clsx(Chart_module.legendItem, local.class)} style={local.color ? {
+        '--moduix-chart-legend-indicator-color': local.color,
+        ...'object' == typeof local.style && local.style ? local.style : {}
+    } : local.style}/>;
+}
+const Chart = Object.assign(ChartRoot, {
+    Root: ChartRoot,
+    Plot: ChartPlot,
+    Header: ChartHeader,
+    Title: ChartTitle,
+    Description: ChartDescription,
+    Legend: ChartLegend,
+    LegendItem: ChartLegendItem
+});
+export { Chart };