@codefast/ui 0.3.9 → 0.3.10

package/dist/components/carousel.js

@@ -1,2 +1,152 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"embla-carousel-react";import{ArrowLeftIcon as o,ArrowRightIcon as l}from"lucide-react";import{useCallback as a,useEffect as s,useState as i}from"react";import{Button as n}from"./button.js";import{cn as c}from"@codefast/tailwind-variants";import{createContextScope as u}from"@radix-ui/react-context";let d="Carousel",[m,f]=u(d),[p,v]=m(d);function x({__scopeCarousel:t,children:o,className:l,opts:n,orientation:u,plugins:d,setApi:m,...f}){let[v,x]=r({...n,axis:"vertical"===u?"y":"x"},d),[h,C]=i(!1),[N,b]=i(!1),w=a(e=>{e&&(C(e.canScrollPrev()),b(e.canScrollNext()))},[]),y=a(()=>{x?.scrollPrev()},[x]),z=a(()=>{x?.scrollNext()},[x]),P=a(e=>{"ArrowLeft"===e.key?(e.preventDefault(),y()):"ArrowRight"===e.key&&(e.preventDefault(),z())},[y,z]);return s(()=>{x&&m&&m(x)},[x,m]),s(()=>{if(x)return queueMicrotask(()=>{w(x)}),x.on("reInit",w),x.on("select",w),()=>{x.off("select",w)}},[x,w]),e(p,{api:x,canScrollNext:N,canScrollPrev:h,carouselRef:v,opts:n,orientation:u??(n?.axis==="y"?"vertical":"horizontal"),scope:t,scrollNext:z,scrollPrev:y,children:e("div",{className:c("relative",l),"data-slot":"carousel",onKeyDownCapture:P,...f,children:o})})}function h({__scopeCarousel:t,className:r,classNames:o,...l}){let{carouselRef:a,orientation:s}=v("CarouselContent",t);return e("div",{ref:a,className:c("overflow-hidden",o?.wrapper),"data-slot":"carousel-content",children:e("div",{className:c("flex","horizontal"===s?"-ml-4":"-mt-4 flex-col",o?.content,r),...l})})}function C({__scopeCarousel:t,className:r,...o}){let{orientation:l}=v("CarouselItem",t);return e("div",{"aria-roledescription":"slide",className:c("min-w-0 shrink-0 grow-0 basis-full","horizontal"===l?"pl-4":"pt-4",r),"data-slot":"carousel-item",role:"group",...o})}function N({__scopeCarousel:r,className:l,size:a="icon",variant:s="outline",...i}){let{canScrollPrev:u,orientation:d,scrollPrev:m}=v("CarouselPrevious",r);return t(n,{"aria-label":"Previous slide",className:c("absolute size-8 shadow-none","horizontal"===d?"top-1/2 -left-12 -translate-y-1/2":"-top-12 left-1/2 -translate-x-1/2 rotate-90",l),"data-slot":"carousel-previous",disabled:!u,size:a,variant:s,onClick:m,...i,children:[e(o,{}),e("span",{className:"sr-only",children:"Previous slide"})]})}function b({__scopeCarousel:r,className:o,size:a="icon",variant:s="outline",...i}){let{canScrollNext:u,orientation:d,scrollNext:m}=v("CarouselNext",r);return t(n,{"aria-label":"Next slide",className:c("absolute size-8 shadow-none","horizontal"===d?"top-1/2 -right-12 -translate-y-1/2":"-bottom-12 left-1/2 -translate-x-1/2 rotate-90",o),"data-slot":"carousel-next",disabled:!u,size:a,variant:s,onClick:m,...i,children:[e(l,{}),e("span",{className:"sr-only",children:"Next slide"})]})}export{x as Carousel,h as CarouselContent,C as CarouselItem,b as CarouselNext,N as CarouselPrevious,f as createCarouselScope};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@codefast/tailwind-variants";
+import { createContextScope } from "@radix-ui/react-context";
+import embla_carousel_react from "embla-carousel-react";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "./button.js";
+const CAROUSEL_NAME = 'Carousel';
+const [createCarouselContext, createCarouselScope] = createContextScope(CAROUSEL_NAME);
+const [CarouselContextProvider, useCarouselContext] = createCarouselContext(CAROUSEL_NAME);
+function Carousel({ __scopeCarousel, children, className, opts, orientation, plugins, setApi, ...props }) {
+    const [carouselRef, api] = embla_carousel_react({
+        ...opts,
+        axis: 'vertical' === orientation ? 'y' : 'x'
+    }, plugins);
+    const [canScrollPrevious, setCanScrollPrevious] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const onSelect = useCallback((carouselApi)=>{
+        if (!carouselApi) return;
+        setCanScrollPrevious(carouselApi.canScrollPrev());
+        setCanScrollNext(carouselApi.canScrollNext());
+    }, []);
+    const scrollPrevious = useCallback(()=>{
+        api?.scrollPrev();
+    }, [
+        api
+    ]);
+    const scrollNext = useCallback(()=>{
+        api?.scrollNext();
+    }, [
+        api
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        if ('ArrowLeft' === event.key) {
+            event.preventDefault();
+            scrollPrevious();
+        } else if ('ArrowRight' === event.key) {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [
+        scrollPrevious,
+        scrollNext
+    ]);
+    useEffect(()=>{
+        if (!api || !setApi) return;
+        setApi(api);
+    }, [
+        api,
+        setApi
+    ]);
+    useEffect(()=>{
+        if (!api) return;
+        queueMicrotask(()=>{
+            onSelect(api);
+        });
+        api.on('reInit', onSelect);
+        api.on('select', onSelect);
+        return ()=>{
+            api.off('select', onSelect);
+        };
+    }, [
+        api,
+        onSelect
+    ]);
+    return /*#__PURE__*/ jsx(CarouselContextProvider, {
+        api: api,
+        canScrollNext: canScrollNext,
+        canScrollPrev: canScrollPrevious,
+        carouselRef: carouselRef,
+        opts: opts,
+        orientation: orientation ?? (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scope: __scopeCarousel,
+        scrollNext: scrollNext,
+        scrollPrev: scrollPrevious,
+        children: /*#__PURE__*/ jsx("div", {
+            className: cn('relative', className),
+            "data-slot": "carousel",
+            onKeyDownCapture: handleKeyDown,
+            ...props,
+            children: children
+        })
+    });
+}
+const CAROUSEL_CONTENT_NAME = 'CarouselContent';
+function CarouselContent({ __scopeCarousel, className, classNames, ...props }) {
+    const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
+    return /*#__PURE__*/ jsx("div", {
+        ref: carouselRef,
+        className: cn('overflow-hidden', classNames?.wrapper),
+        "data-slot": "carousel-content",
+        children: /*#__PURE__*/ jsx("div", {
+            className: cn('flex', 'horizontal' === orientation ? '-ml-4' : '-mt-4 flex-col', classNames?.content, className),
+            ...props
+        })
+    });
+}
+const CAROUSEL_ITEM_NAME = 'CarouselItem';
+function CarouselItem({ __scopeCarousel, className, ...props }) {
+    const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
+    return /*#__PURE__*/ jsx("div", {
+        "aria-roledescription": "slide",
+        className: cn('min-w-0 shrink-0 grow-0 basis-full', 'horizontal' === orientation ? 'pl-4' : 'pt-4', className),
+        "data-slot": "carousel-item",
+        role: "group",
+        ...props
+    });
+}
+const CAROUSEL_PREVIOUS_NAME = 'CarouselPrevious';
+function CarouselPrevious({ __scopeCarousel, className, size = 'icon', variant = 'outline', ...props }) {
+    const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
+    return /*#__PURE__*/ jsxs(Button, {
+        "aria-label": "Previous slide",
+        className: cn('absolute size-8 shadow-none', 'horizontal' === orientation ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90', className),
+        "data-slot": "carousel-previous",
+        disabled: !canScrollPrev,
+        size: size,
+        variant: variant,
+        onClick: scrollPrev,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(ArrowLeftIcon, {}),
+            /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: "Previous slide"
+            })
+        ]
+    });
+}
+const CAROUSEL_NEXT_NAME = 'CarouselNext';
+function CarouselNext({ __scopeCarousel, className, size = 'icon', variant = 'outline', ...props }) {
+    const { canScrollNext, orientation, scrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
+    return /*#__PURE__*/ jsxs(Button, {
+        "aria-label": "Next slide",
+        className: cn('absolute size-8 shadow-none', 'horizontal' === orientation ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', className),
+        "data-slot": "carousel-next",
+        disabled: !canScrollNext,
+        size: size,
+        variant: variant,
+        onClick: scrollNext,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(ArrowRightIcon, {}),
+            /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: "Next slide"
+            })
+        ]
+    });
+}
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, createCarouselScope };

package/dist/components/chart.cjs

@@ -1,4 +1,251 @@
+"use strict";
 "use client";
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,t)=>{for(var r in t)__webpack_require__.o(t,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ChartContainer:()=>ChartContainer,ChartLegend:()=>ChartLegend,ChartTooltipContent:()=>ChartTooltipContent,ChartLegendContent:()=>ChartLegendContent,createChartScope:()=>createChartScope,ChartTooltip:()=>ChartTooltip,ChartStyle:()=>ChartStyle});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_react_namespaceObject=require("react"),external_recharts_namespaceObject=require("recharts"),tailwind_variants_namespaceObject=require("@codefast/tailwind-variants"),react_context_namespaceObject=require("@radix-ui/react-context"),THEMES={dark:".dark",light:""},CHART_PROVIDER_NAME="ChartProvider",[createChartContext,createChartScope]=(0,react_context_namespaceObject.createContextScope)(CHART_PROVIDER_NAME),[ChartContextProvider,useChartContext]=createChartContext(CHART_PROVIDER_NAME);function ChartContainer({__scopeChart:e,children:t,className:r,config:a,id:n,...o}){let c=(0,external_react_namespaceObject.useId)(),s=`chart-${n??c}`;return(0,jsx_runtime_namespaceObject.jsx)(ChartContextProvider,{config:a,scope:e,children:(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,tailwind_variants_namespaceObject.cn)("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",r),"data-chart":s,"data-slot":"chart",...o,children:[(0,jsx_runtime_namespaceObject.jsx)(ChartStyle,{config:a,id:s}),(0,jsx_runtime_namespaceObject.jsx)(external_recharts_namespaceObject.ResponsiveContainer,{children:t})]})})}function ChartStyle({config:e,id:t}){let r=Object.entries(e).filter(([,e])=>e.theme??e.color);return 0===r.length?null:(0,jsx_runtime_namespaceObject.jsx)("style",{dangerouslySetInnerHTML:{__html:generateChartStyles(t,r)}})}const ChartTooltip=external_recharts_namespaceObject.Tooltip,CHART_TOOLTIP_CONTENT_NAME="ChartTooltipContent";function ChartTooltipContent({__scopeChart:e,active:t,className:r,color:a,formatter:n,hideIndicator:o=!1,hideLabel:c=!1,indicator:s="dot",label:i,labelClassName:_,labelFormatter:l,labelKey:d,nameKey:p,payload:u=[]}){let{config:m}=useChartContext("ChartTooltipContent",e),h=(0,external_react_namespaceObject.useMemo)(()=>{if(c||0===u.length)return null;let[e]=u,t=safeToString(d??e.dataKey??e.name??"value"),r=getPayloadConfigFromPayload(m,e,t),a=d||"string"!=typeof i?r?.label:i in m?m[i].label??i:i;return l?(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("font-medium",_),children:l(a,u)}):a?(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("font-medium",_),children:a}):null},[i,l,u,c,_,m,d]);if(!t||0===u.length)return null;let b=1===u.length&&"dot"!==s;return(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,tailwind_variants_namespaceObject.cn)("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",r),children:[b?null:h,(0,jsx_runtime_namespaceObject.jsx)("div",{className:"grid gap-1.5",children:u.map((e,t)=>{let r=safeToString(p??e.name??e.dataKey??"value"),c=getPayloadConfigFromPayload(m,e,r),i=a??(isRecord(e.payload)&&"fill"in e.payload&&"string"==typeof e.payload.fill?e.payload.fill:void 0)??e.color;return(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5","dot"===s&&"items-center"),children:n&&void 0!==e.value&&e.name?n(e.value,e.name,e,t,[e]):(0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment,{children:[c?.icon?(0,jsx_runtime_namespaceObject.jsx)(c.icon,{}):!o&&(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)",{"h-2.5 w-2.5":"dot"===s,"my-0.5":b&&"dashed"===s,"w-0 border-[1.5px] border-dashed bg-transparent":"dashed"===s,"w-1":"line"===s}),style:{"--color-bg":i,"--color-border":i}}),(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,tailwind_variants_namespaceObject.cn)("flex flex-1 justify-between leading-none",b?"items-end":"items-center"),children:[(0,jsx_runtime_namespaceObject.jsxs)("div",{className:"grid gap-1.5",children:[b?h:null,(0,jsx_runtime_namespaceObject.jsx)("span",{className:"text-muted-foreground",children:c?.label??e.name})]}),null!=e.value&&(0,jsx_runtime_namespaceObject.jsx)("span",{className:"text-foreground font-mono font-medium tabular-nums",children:"number"==typeof e.value?e.value.toLocaleString():safeToString(e.value)})]})]})},r)})})]})}const ChartLegend=external_recharts_namespaceObject.Legend,CHART_LEGEND_CONTENT_NAME="ChartLegendContent";function ChartLegendContent({__scopeChart:e,className:t,hideIcon:r=!1,nameKey:a,payload:n,verticalAlign:o="bottom"}){let{config:c}=useChartContext("ChartLegendContent",e);return n?.length?(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,tailwind_variants_namespaceObject.cn)("flex items-center justify-center gap-4","top"===o?"pb-3":"pt-3",t),children:n.map(e=>{let t="value";a?t=a:null!=e.dataKey&&(t=safeToString(e.dataKey));let n=getPayloadConfigFromPayload(c,e,t);return(0,jsx_runtime_namespaceObject.jsxs)("div",{className:(0,tailwind_variants_namespaceObject.cn)("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3"),children:[n?.icon&&!r?(0,jsx_runtime_namespaceObject.jsx)(n.icon,{}):(0,jsx_runtime_namespaceObject.jsx)("div",{className:"size-2 shrink-0 rounded-md",style:{backgroundColor:e.color}}),n?.label]},a?safeToString(n?.color??""):safeToString(e.value??""))})}):null}function isRecord(e){return"object"==typeof e&&null!==e}function getStringValue(e,t){if(t in e){let r=e[t];return"string"==typeof r?r:void 0}}function safeToString(e){return"string"==typeof e?e:"number"==typeof e?e.toString():null==e?"":"boolean"==typeof e||"bigint"==typeof e||"symbol"==typeof e?e.toString():""}function getPayloadConfigFromPayload(e,t,r){if(!isRecord(t))return;let a=isRecord(t.payload)?t.payload:void 0,n=r,o=getStringValue(t,r);if(o)n=o;else if(a){let e=getStringValue(a,r);e&&(n=e)}return n in e?e[n]:e[r]}function generateCssVariable(e,t,r){let a=t.theme?.[r]??t.color;return a?`  --color-${e}: ${a};`:null}function generateThemeStyles(e,t,r,a){let n=a.map(([t,r])=>generateCssVariable(t,r,e)).filter(Boolean).join("\n");return`${t} [data-chart=${r}] {
-${n}
-}`}function generateChartStyles(e,t){return Object.entries(THEMES).map(([r,a])=>generateThemeStyles(r,a,e,t)).join("\n\n")}for(var __webpack_i__ in exports.ChartContainer=__webpack_exports__.ChartContainer,exports.ChartLegend=__webpack_exports__.ChartLegend,exports.ChartLegendContent=__webpack_exports__.ChartLegendContent,exports.ChartStyle=__webpack_exports__.ChartStyle,exports.ChartTooltip=__webpack_exports__.ChartTooltip,exports.ChartTooltipContent=__webpack_exports__.ChartTooltipContent,exports.createChartScope=__webpack_exports__.createChartScope,__webpack_exports__)-1===["ChartContainer","ChartLegend","ChartLegendContent","ChartStyle","ChartTooltip","ChartTooltipContent","createChartScope"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ChartContainer: ()=>ChartContainer,
+    ChartLegend: ()=>ChartLegend,
+    ChartTooltipContent: ()=>ChartTooltipContent,
+    ChartLegendContent: ()=>ChartLegendContent,
+    createChartScope: ()=>createChartScope,
+    ChartTooltip: ()=>ChartTooltip,
+    ChartStyle: ()=>ChartStyle
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants");
+const react_context_namespaceObject = require("@radix-ui/react-context");
+const external_react_namespaceObject = require("react");
+const external_recharts_namespaceObject = require("recharts");
+const THEMES = {
+    dark: '.dark',
+    light: ''
+};
+const CHART_PROVIDER_NAME = 'ChartProvider';
+const [createChartContext, createChartScope] = (0, react_context_namespaceObject.createContextScope)(CHART_PROVIDER_NAME);
+const [ChartContextProvider, useChartContext] = createChartContext(CHART_PROVIDER_NAME);
+function ChartContainer({ __scopeChart, children, className, config, id, ...props }) {
+    const uniqueId = (0, external_react_namespaceObject.useId)();
+    const chartId = `chart-${id ?? uniqueId}`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChartContextProvider, {
+        config: config,
+        scope: __scopeChart,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: (0, tailwind_variants_namespaceObject.cn)("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+            "data-chart": chartId,
+            "data-slot": "chart",
+            ...props,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChartStyle, {
+                    config: config,
+                    id: chartId
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_recharts_namespaceObject.ResponsiveContainer, {
+                    children: children
+                })
+            ]
+        })
+    });
+}
+function ChartStyle({ config, id }) {
+    const colorConfig = Object.entries(config).filter(([, itemConfig])=>itemConfig.theme ?? itemConfig.color);
+    if (0 === colorConfig.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("style", {
+        dangerouslySetInnerHTML: {
+            __html: generateChartStyles(id, colorConfig)
+        }
+    });
+}
+const ChartTooltip = external_recharts_namespaceObject.Tooltip;
+const CHART_TOOLTIP_CONTENT_NAME = 'ChartTooltipContent';
+function ChartTooltipContent({ __scopeChart, active, className, color, formatter, hideIndicator = false, hideLabel = false, indicator = 'dot', label, labelClassName, labelFormatter, labelKey, nameKey, payload = [] }) {
+    const { config } = useChartContext(CHART_TOOLTIP_CONTENT_NAME, __scopeChart);
+    const tooltipLabel = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (hideLabel || 0 === payload.length) return null;
+        const [item] = payload;
+        const key = safeToString(labelKey ?? item.dataKey ?? item.name ?? 'value');
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = labelKey || 'string' != typeof label ? itemConfig?.label : label in config ? config[label].label ?? label : label;
+        if (labelFormatter) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, tailwind_variants_namespaceObject.cn)('font-medium', labelClassName),
+            children: labelFormatter(value, payload)
+        });
+        if (!value) return null;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, tailwind_variants_namespaceObject.cn)('font-medium', labelClassName),
+            children: value
+        });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey
+    ]);
+    if (!active || 0 === payload.length) return null;
+    const nestLabel = 1 === payload.length && 'dot' !== indicator;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, tailwind_variants_namespaceObject.cn)('border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', className),
+        children: [
+            nestLabel ? null : tooltipLabel,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "grid gap-1.5",
+                children: payload.map((item, index)=>{
+                    const key = safeToString(nameKey ?? item.name ?? item.dataKey ?? 'value');
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color ?? (isRecord(item.payload) && 'fill' in item.payload && 'string' == typeof item.payload.fill ? item.payload.fill : void 0) ?? item.color;
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: (0, tailwind_variants_namespaceObject.cn)('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5', 'dot' === indicator && 'items-center'),
+                        children: formatter && void 0 !== item.value && item.name ? formatter(item.value, item.name, item, index, [
+                            item
+                        ]) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            children: [
+                                itemConfig?.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: (0, tailwind_variants_namespaceObject.cn)('shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)', {
+                                        'h-2.5 w-2.5': 'dot' === indicator,
+                                        'my-0.5': nestLabel && 'dashed' === indicator,
+                                        'border-1.5 w-0 border-dashed bg-transparent': 'dashed' === indicator,
+                                        'w-1': 'line' === indicator
+                                    }),
+                                    style: {
+                                        '--color-bg': indicatorColor,
+                                        '--color-border': indicatorColor
+                                    }
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: (0, tailwind_variants_namespaceObject.cn)('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'),
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                            className: "grid gap-1.5",
+                                            children: [
+                                                nestLabel ? tooltipLabel : null,
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                    className: "text-muted-foreground",
+                                                    children: itemConfig?.label ?? item.name
+                                                })
+                                            ]
+                                        }),
+                                        null != item.value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: "text-foreground font-mono font-medium tabular-nums",
+                                            children: 'number' == typeof item.value ? item.value.toLocaleString() : safeToString(item.value)
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }, key);
+                })
+            })
+        ]
+    });
+}
+const ChartLegend = external_recharts_namespaceObject.Legend;
+const CHART_LEGEND_CONTENT_NAME = 'ChartLegendContent';
+function ChartLegendContent({ __scopeChart, className, hideIcon = false, nameKey, payload, verticalAlign = 'bottom' }) {
+    const { config } = useChartContext(CHART_LEGEND_CONTENT_NAME, __scopeChart);
+    if (!payload?.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, tailwind_variants_namespaceObject.cn)('flex items-center justify-center gap-4', 'top' === verticalAlign ? 'pb-3' : 'pt-3', className),
+        children: payload.map((item)=>{
+            let key = 'value';
+            if (nameKey) key = nameKey;
+            else if (null != item.dataKey) key = safeToString(item.dataKey);
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, tailwind_variants_namespaceObject.cn)('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3'),
+                children: [
+                    itemConfig?.icon && !hideIcon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "size-2 shrink-0 rounded-md",
+                        style: {
+                            backgroundColor: item.color
+                        }
+                    }),
+                    itemConfig?.label
+                ]
+            }, nameKey ? safeToString(itemConfig?.color ?? '') : safeToString(item.value ?? ''));
+        })
+    });
+}
+function isRecord(value) {
+    return 'object' == typeof value && null !== value;
+}
+function getStringValue(record, key) {
+    if (key in record) {
+        const value = record[key];
+        return 'string' == typeof value ? value : void 0;
+    }
+}
+function safeToString(value) {
+    if ('string' == typeof value) return value;
+    if ('number' == typeof value) return value.toString();
+    if (null == value) return '';
+    if ('boolean' == typeof value) return value.toString();
+    if ('bigint' == typeof value) return value.toString();
+    if ('symbol' == typeof value) return value.toString();
+    return '';
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (!isRecord(payload)) return;
+    const payloadPayload = isRecord(payload.payload) ? payload.payload : void 0;
+    let configLabelKey = key;
+    const payloadValue = getStringValue(payload, key);
+    if (payloadValue) configLabelKey = payloadValue;
+    else if (payloadPayload) {
+        const nestedValue = getStringValue(payloadPayload, key);
+        if (nestedValue) configLabelKey = nestedValue;
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+function generateCssVariable(key, itemConfig, theme) {
+    const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+}
+function generateThemeStyles(theme, prefix, id, colorConfig) {
+    const cssVariables = colorConfig.map(([key, itemConfig])=>generateCssVariable(key, itemConfig, theme)).filter(Boolean).join('\n');
+    return `${prefix} [data-chart=${id}] {\n${cssVariables}\n}`;
+}
+function generateChartStyles(id, colorConfig) {
+    return Object.entries(THEMES).map(([theme, prefix])=>generateThemeStyles(theme, prefix, id, colorConfig)).join('\n\n');
+}
+exports.ChartContainer = __webpack_exports__.ChartContainer;
+exports.ChartLegend = __webpack_exports__.ChartLegend;
+exports.ChartLegendContent = __webpack_exports__.ChartLegendContent;
+exports.ChartStyle = __webpack_exports__.ChartStyle;
+exports.ChartTooltip = __webpack_exports__.ChartTooltip;
+exports.ChartTooltipContent = __webpack_exports__.ChartTooltipContent;
+exports.createChartScope = __webpack_exports__.createChartScope;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ChartContainer",
+    "ChartLegend",
+    "ChartLegendContent",
+    "ChartStyle",
+    "ChartTooltip",
+    "ChartTooltipContent",
+    "createChartScope"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/chart.d.ts

@@ -1,7 +1,7 @@
-import type { ComponentProps, ComponentType, JSX, ReactNode } from "react";
-import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
-import * as RechartsPrimitive from "recharts";
-import type { Scope } from "@radix-ui/react-context";
+import type { Scope } from '@radix-ui/react-context';
+import type { ComponentProps, ComponentType, JSX, ReactNode } from 'react';
+import type { NameType, Payload, ValueType } from 'recharts/types/component/DefaultTooltipContent';
+import * as RechartsPrimitive from 'recharts';
 type ExtractProps<T> = T extends (props: infer P) => ReactNode ? P : never;
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 declare const THEMES: {
@@ -22,8 +22,8 @@ type ScopedProps<P> = P & {
     __scopeChart?: Scope;
 };
 declare const createChartScope: import("@radix-ui/react-context").CreateScope;
-interface ChartContainerProps extends ComponentProps<"div"> {
-    children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+interface ChartContainerProps extends ComponentProps<'div'> {
+    children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
     config: ChartConfig;
 }
 declare function ChartContainer({ __scopeChart, children, className, config, id, ...props }: ScopedProps<ChartContainerProps>): JSX.Element;
@@ -34,10 +34,10 @@ interface ChartStyleProps {
 declare function ChartStyle({ config, id }: ChartStyleProps): ReactNode;
 type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = ComponentProps<typeof RechartsPrimitive.Tooltip<TValue, TName>>;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType> = Omit<MakeOptional<ExtractProps<ComponentProps<typeof RechartsPrimitive.Tooltip<TValue, TName>>["content"]>, "accessibilityLayer" | "active" | "activeIndex" | "coordinate" | "payload">, "payload"> & {
+type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType> = Omit<MakeOptional<ExtractProps<ComponentProps<typeof RechartsPrimitive.Tooltip<TValue, TName>>['content']>, 'accessibilityLayer' | 'active' | 'activeIndex' | 'coordinate' | 'payload'>, 'payload'> & {
     hideIndicator?: boolean;
     hideLabel?: boolean;
-    indicator?: "dashed" | "dot" | "line";
+    indicator?: 'dashed' | 'dot' | 'line';
     labelKey?: string;
     nameKey?: string;
     color?: string | undefined;
@@ -47,7 +47,7 @@ type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType>
 declare function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({ __scopeChart, active, className, color, formatter, hideIndicator, hideLabel, indicator, label, labelClassName, labelFormatter, labelKey, nameKey, payload, }: ScopedProps<ChartTooltipContentProps<TValue, TName>>): ReactNode;
 type ChartLegendProps = ComponentProps<typeof RechartsPrimitive.Legend>;
 declare const ChartLegend: typeof RechartsPrimitive.Legend;
-type ChartLegendContentProps = ComponentProps<"div"> & ExtractProps<RechartsPrimitive.LegendProps["content"]> & {
+type ChartLegendContentProps = ComponentProps<'div'> & ExtractProps<RechartsPrimitive.LegendProps['content']> & {
     hideIcon?: boolean;
     nameKey?: string;
 };