@moduix/solid-tailwind 1.0.0

package/dist/components/chart/Chart.js

@@ -0,0 +1,450 @@
+import { Portal, className as web_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 { For, Show, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+var _tmpl$ = /*#__PURE__*/ template('<span aria-hidden=true data-slot=chart-tooltip-swatch class="size-2.5 rounded-full shadow-[inset_0_0_0_1px_rgb(0_0_0_/_8%)]">'), _tmpl$2 = /*#__PURE__*/ template('<div data-slot=chart-tooltip-title class="flex items-center gap-2 font-semibold text-popover-foreground">'), _tmpl$3 = /*#__PURE__*/ template('<div data-slot=chart-tooltip-rows class="grid gap-1">'), _tmpl$4 = /*#__PURE__*/ template('<div data-slot=chart-tooltip-body class="grid gap-1">'), _tmpl$5 = /*#__PURE__*/ template('<div data-slot=chart-tooltip-row class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 data-[has-swatch]:grid-cols-[0.625rem_minmax(0,1fr)_auto]"><span data-slot=chart-tooltip-label class="min-w-0 text-muted-foreground"></span><span data-slot=chart-tooltip-value class="text-right font-semibold whitespace-nowrap text-popover-foreground tabular-nums">'), _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%>"), _tmpl$11 = /*#__PURE__*/ template('<span aria-hidden=true class="size-2.5 shrink-0 rounded-full bg-muted-foreground shadow-[inset_0_0_0_1px_rgb(0_0_0_/_8%)]">');
+const defaultChartRenderer = motion({
+    transition: {
+        type: 'spring',
+        stiffness: 260,
+        damping: 30,
+        mass: 0.8
+    }
+});
+function mergeTooltipClassName(className) {
+    return cn('!rounded-md !border !border-border !bg-popover !p-3 !font-sans !text-xs !leading-4 !font-medium !text-popover-foreground !shadow-lg', className);
+}
+function withTooltipStyles(definition) {
+    const tooltip = definition.tooltip;
+    if (!tooltip) return definition;
+    const styledTooltip = 'object' == typeof tooltip && 'use' in tooltip ? {
+        ...tooltip,
+        className: mergeTooltipClassName(tooltip.className)
+    } : {
+        use: tooltip,
+        className: mergeTooltipClassName()
+    };
+    return {
+        ...definition,
+        tooltip: styledTooltip
+    };
+}
+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 cn('grid w-full min-w-0 gap-5 rounded-lg border border-border bg-card p-5 text-card-foreground shadow-sm', 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)=>setStyleProperty(_el$3, "background-color", props.content().color));
+                        return _el$3;
+                    }
+                }), null);
+                insert(_el$2, ()=>props.content().title, null);
+                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)=>setStyleProperty(_el$6, "background-color", row.color));
+                                    return _el$6;
+                                }
+                            }), _el$7);
+                            insert(_el$7, ()=>row.label);
+                            insert(_el$8, ()=>row.value);
+                            effect(()=>setAttribute(_el$5, "data-has-swatch", row.color ? '' : void 0));
+                            return _el$5;
+                        })()
+                }));
+                return _el$4;
+            }
+        }), null);
+        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,
+            definition: withTooltipStyles(props.definition),
+            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$ = cn('ts-chart-host', props.class), _v$2 = {
+                    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$ !== _p$.e && web_className(_el$15, _p$.e = _v$);
+                _p$.t = style(_el$15, _v$2, _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 cn('[&_.ts-chart:focus-visible]:outline-offset-0.5 min-w-0 text-muted-foreground [&_.ts-chart]:rounded-md [&_.ts-chart]:outline-none [&_.ts-chart:focus-visible]:outline-2 [&_.ts-chart:focus-visible]:outline-ring', 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 cn('grid gap-1', 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 cn('text-lg font-semibold', 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 cn('text-sm text-muted-foreground', 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 cn('flex flex-wrap gap-3', local.class);
+        }
+    }));
+}
+function ChartLegendItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        '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 cn('inline-flex items-center gap-2 text-sm text-muted-foreground', local.class);
+        },
+        get style () {
+            return local.style;
+        },
+        get children () {
+            return memo(()=>!!local.asChild)() ? local.children : [
+                (()=>{
+                    var _el$17 = _tmpl$11();
+                    effect((_$p)=>style(_el$17, local.color ? {
+                            'background-color': local.color
+                        } : void 0, _$p));
+                    return _el$17;
+                })(),
+                memo(()=>local.children)
+            ];
+        }
+    }));
+}
+const Chart = Object.assign(ChartRoot, {
+    Root: ChartRoot,
+    Plot: ChartPlot,
+    Header: ChartHeader,
+    Title: ChartTitle,
+    Description: ChartDescription,
+    Legend: ChartLegend,
+    LegendItem: ChartLegendItem
+});
+export { Chart };