@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/README.md

@@ -143,7 +143,7 @@ Three linting layers run across the codebase:
 | **stylelint**    | CSS files (`src/**/*.css`) | Encourages approved design tokens                     |
 | **class-linter** | TSX/TS files               | Flags disallowed class usage (local oxlint JS plugin) |
 
-Stylelint and the class-linter also run as pre-commit hooks via `lint-staged`.
+Stylelint and the class-linter also run as pre-commit hooks via `nano-staged`.
 
 ## Testing
 

package/dist/charts/components/Area/AreaChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.cjs","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { useChart } from '../useChartData';\n\nexport interface AreaChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n}\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        stacked = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<AreaChartProps<TData>>(props);\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n                <RechartsPrimitive.AreaChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {shapes.map(shape => (\n                        <RechartsPrimitive.Area\n                            key={shape.dataKey}\n                            {...shape}\n                            dot={showDots ? shape.dot : false}\n                            fillOpacity={0.4}\n                            stackId={stacked ? 'stack' : undefined}\n                            type={type}\n                        />\n                    ))}\n                </RechartsPrimitive.AreaChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface AreaChartAreaProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): JSX.Element | null {\n    return null;\n}\nAreaChart.Area = Area;\n"],"names":["stripCartesianProps","clsx","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,SAAS,UAAgC,OAA8B;AACpE,QAAA;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAA2C,KAAK;AAEpD,QAAM,YAAYC,GAAAA,KAAK,yBAAyB,EAAE,QAAQ,cAAc,eAAe;AACjF,QAAA,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAW,IAAIC,sBAAgB,QAAQ;AAE3F,SACK,sBAAA,cAAA,OAAA,EAAI,WAAsB,aAAU,gBACjC,GAAA,sBAAA,cAACC,aAAAA,cAAc,EAAA,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAC9D,GAAA,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MACT;AAAA,MACA,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC9C,sBAAA,cAAAA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAU,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAI,CAAA;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CACR,UAAA,sBAAA;AAAA,MAACF,6BAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAEP,CAAA;AAAA,EAAA,CAET,GACC,aACG,sBAAA,cAACG,OAAc,QAAA,EAAA,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAY,CAAA,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAkD;AAC3E,SAAA;AACX;AACA,UAAU,OAAO;;"}
+{"version":3,"file":"AreaChart.cjs","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { useChart } from '../useChartData';\n\nexport interface AreaChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n}\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        stacked = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<AreaChartProps<TData>>(props);\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n                <RechartsPrimitive.AreaChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {shapes.map(shape => (\n                        <RechartsPrimitive.Area\n                            key={shape.dataKey}\n                            {...shape}\n                            dot={showDots ? shape.dot : false}\n                            fillOpacity={0.4}\n                            stackId={stacked ? 'stack' : undefined}\n                            type={type}\n                        />\n                    ))}\n                </RechartsPrimitive.AreaChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface AreaChartAreaProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nAreaChart.Area = Area;\n"],"names":["stripCartesianProps","clsx","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAA2C,KAAK;AAEpD,QAAM,YAAYC,GAAAA,KAAK,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACvF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAE3F,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/C,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAA,UACR,sBAAA;AAAA,MAACF,6BAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACG,sBAAA,cAACG,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;"}

package/dist/charts/components/Area/AreaChart.d.ts

@@ -16,7 +16,7 @@ export interface AreaChartProps<TData extends object> extends CartesianChartProp
 }
 export declare function AreaChart<TData extends object>(props: AreaChartProps<TData>): React.JSX.Element;
 export declare namespace AreaChart {
-    var Area: <TData extends object>(_: AreaChartAreaProps<TData>) => JSX.Element | null;
+    var Area: <TData extends object>(_: AreaChartAreaProps<TData>) => React.JSX.Element | null;
 }
 export interface AreaChartAreaProps<TData extends object> extends ChartChildProps<TData> {
 }

package/dist/charts/components/Area/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.js","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { useChart } from '../useChartData';\n\nexport interface AreaChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n}\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        stacked = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<AreaChartProps<TData>>(props);\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n                <RechartsPrimitive.AreaChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {shapes.map(shape => (\n                        <RechartsPrimitive.Area\n                            key={shape.dataKey}\n                            {...shape}\n                            dot={showDots ? shape.dot : false}\n                            fillOpacity={0.4}\n                            stackId={stacked ? 'stack' : undefined}\n                            type={type}\n                        />\n                    ))}\n                </RechartsPrimitive.AreaChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface AreaChartAreaProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): JSX.Element | null {\n    return null;\n}\nAreaChart.Area = Area;\n"],"names":["React"],"mappings":";;;;;;;;AAyBO,SAAS,UAAgC,OAA8B;AACpE,QAAA;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAA2C,KAAK;AAEpD,QAAM,YAAY,KAAK,yBAAyB,EAAE,QAAQ,cAAc,eAAe;AACjF,QAAA,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAW,IAAI,SAAgB,QAAQ;AAE3F,SACKA,+BAAA,cAAA,OAAA,EAAI,WAAsB,aAAU,gBACjC,GAAAA,+BAAA,cAAC,cAAc,EAAA,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAC9D,GAAAA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MACT;AAAA,MACA,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC9CA,+BAAA,cAAA,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAAUA,+BAAA,cAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAI,CAAA;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CACR,UAAAA,+BAAA;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAEP,CAAA;AAAA,EAAA,CAET,GACC,aACGA,+BAAA,cAAC,QAAc,EAAA,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAY,CAAA,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAkD;AAC3E,SAAA;AACX;AACA,UAAU,OAAO;"}
+{"version":3,"file":"AreaChart.js","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { useChart } from '../useChartData';\n\nexport interface AreaChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n}\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        stacked = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<AreaChartProps<TData>>(props);\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n                <RechartsPrimitive.AreaChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {shapes.map(shape => (\n                        <RechartsPrimitive.Area\n                            key={shape.dataKey}\n                            {...shape}\n                            dot={showDots ? shape.dot : false}\n                            fillOpacity={0.4}\n                            stackId={stacked ? 'stack' : undefined}\n                            type={type}\n                        />\n                    ))}\n                </RechartsPrimitive.AreaChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface AreaChartAreaProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nAreaChart.Area = Area;\n"],"names":["React"],"mappings":";;;;;;;;AAyBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAA2C,KAAK;AAEpD,QAAM,YAAY,KAAK,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACvF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAE3F,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/CA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAA,UACRA,+BAAA;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}

package/dist/charts/components/Bar/BarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.cjs","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { ChartShape, useChart } from '../useChartData';\nimport { getInverseThemeColor } from '../../utils/color';\n\nconst BAR_WIDTH = 18;\nexport interface BarChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n}\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation: _1,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarChartProps<TData>>(props);\n    const isHorizontal = props.orientation === 'horizontal';\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    formatter={shape.formatter}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarChartBarProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["stripCartesianProps","clsx","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend","getInverseThemeColor"],"mappings":"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"}
+{"version":3,"file":"BarChart.cjs","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { ChartShape, useChart } from '../useChartData';\nimport { getInverseThemeColor } from '../../utils/color';\n\nconst BAR_WIDTH = 18;\nexport interface BarChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n}\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation: _1,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarChartProps<TData>>(props);\n    const isHorizontal = props.orientation === 'horizontal';\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    formatter={shape.formatter}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarChartBarProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["stripCartesianProps","clsx","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend","getInverseThemeColor"],"mappings":"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"}

package/dist/charts/components/Bar/BarChart.d.ts

@@ -17,7 +17,7 @@ export interface BarChartProps<TData extends object> extends CartesianChartProps
 }
 export declare function BarChart<TData extends object>(props: BarChartProps<TData>): React.JSX.Element;
 export declare namespace BarChart {
-    var Bar: <TData extends object>(_: BarChartBarProps<TData>) => JSX.Element | null;
+    var Bar: <TData extends object>(_: BarChartBarProps<TData>) => React.JSX.Element | null;
 }
 /**
  * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.

package/dist/charts/components/Bar/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { ChartShape, useChart } from '../useChartData';\nimport { getInverseThemeColor } from '../../utils/color';\n\nconst BAR_WIDTH = 18;\nexport interface BarChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n}\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation: _1,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarChartProps<TData>>(props);\n    const isHorizontal = props.orientation === 'horizontal';\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    formatter={shape.formatter}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarChartBarProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"BarChart.js","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { ChartShape, useChart } from '../useChartData';\nimport { getInverseThemeColor } from '../../utils/color';\n\nconst BAR_WIDTH = 18;\nexport interface BarChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n}\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation: _1,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarChartProps<TData>>(props);\n    const isHorizontal = props.orientation === 'horizontal';\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    formatter={shape.formatter}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarChartBarProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["React"],"mappings":"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"}

package/dist/charts/components/ChartWrapper.cjs

@@ -30,7 +30,7 @@ function ChartWrapper(props) {
       handleSetWidth(rect.width);
     }
   }, [ref]);
-  const className = cn.clsx("flex justify-center m-auto", attributes.className);
+  const className = cn.clsx("m-auto flex justify-center", attributes.className);
   return /* @__PURE__ */ React.createElement("div", { ...attributes, className, ref }, /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.ResponsiveContainer, null, props.children));
 }
 exports.ChartWrapper = ChartWrapper;

package/dist/charts/components/ChartWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChartWrapper.cjs","sources":["../../../src/charts/components/ChartWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport * as RechartsPrimitive from 'recharts';\nimport './style.css';\n\nexport interface ChartWrapperProps extends React.ComponentProps<'div'> {\n    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n    onSetWidth?: (width: number) => void;\n}\nexport function ChartWrapper(props: ChartWrapperProps) {\n    const { onSetWidth: handleSetWidth, ...attributes } = props;\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useLayoutEffect(() => {\n        if (ref.current && typeof handleSetWidth === 'function') {\n            const rect = ref.current.getBoundingClientRect();\n            handleSetWidth(rect.width);\n        }\n    }, [ref]);\n\n    const className = clsx('flex justify-center m-auto', attributes.className);\n\n    return (\n        <div {...attributes} className={className} ref={ref}>\n            <RechartsPrimitive.ResponsiveContainer>{props.children}</RechartsPrimitive.ResponsiveContainer>\n        </div>\n    );\n}\n"],"names":["clsx","RechartsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,YAAY,gBAAgB,GAAG,WAAe,IAAA;AAChD,QAAA,MAAM,MAAM,OAAuB,IAAI;AAE7C,QAAM,gBAAgB,MAAM;AACxB,QAAI,IAAI,WAAW,OAAO,mBAAmB,YAAY;AAC/C,YAAA,OAAO,IAAI,QAAQ,sBAAsB;AAC/C,qBAAe,KAAK,KAAK;AAAA,IAAA;AAAA,EAC7B,GACD,CAAC,GAAG,CAAC;AAER,QAAM,YAAYA,GAAA,KAAK,8BAA8B,WAAW,SAAS;AAEzE,SACK,sBAAA,cAAA,OAAA,EAAK,GAAG,YAAY,WAAsB,IAAA,GACtC,sBAAA,cAAAC,6BAAkB,qBAAlB,MAAuC,MAAM,QAAS,CAC3D;AAER;;"}
+{"version":3,"file":"ChartWrapper.cjs","sources":["../../../src/charts/components/ChartWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport * as RechartsPrimitive from 'recharts';\nimport './style.css';\n\nexport interface ChartWrapperProps extends React.ComponentProps<'div'> {\n    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n    onSetWidth?: (width: number) => void;\n}\nexport function ChartWrapper(props: ChartWrapperProps) {\n    const { onSetWidth: handleSetWidth, ...attributes } = props;\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useLayoutEffect(() => {\n        if (ref.current && typeof handleSetWidth === 'function') {\n            const rect = ref.current.getBoundingClientRect();\n            handleSetWidth(rect.width);\n        }\n    }, [ref]);\n\n    const className = clsx('m-auto flex justify-center', attributes.className);\n\n    return (\n        <div {...attributes} className={className} ref={ref}>\n            <RechartsPrimitive.ResponsiveContainer>{props.children}</RechartsPrimitive.ResponsiveContainer>\n        </div>\n    );\n}\n"],"names":["clsx","RechartsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,YAAY,gBAAgB,GAAG,eAAe;AACtD,QAAM,MAAM,MAAM,OAAuB,IAAI;AAE7C,QAAM,gBAAgB,MAAM;AACxB,QAAI,IAAI,WAAW,OAAO,mBAAmB,YAAY;AACrD,YAAM,OAAO,IAAI,QAAQ,sBAAA;AACzB,qBAAe,KAAK,KAAK;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,YAAYA,GAAAA,KAAK,8BAA8B,WAAW,SAAS;AAEzE,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,IAAA,GACvC,sBAAA,cAACC,6BAAkB,qBAAlB,MAAuC,MAAM,QAAS,CAC3D;AAER;;"}

package/dist/charts/components/ChartWrapper.js

@@ -11,7 +11,7 @@ function ChartWrapper(props) {
       handleSetWidth(rect.width);
     }
   }, [ref]);
-  const className = clsx("flex justify-center m-auto", attributes.className);
+  const className = clsx("m-auto flex justify-center", attributes.className);
   return /* @__PURE__ */ React__default.createElement("div", { ...attributes, className, ref }, /* @__PURE__ */ React__default.createElement(RechartsPrimitive.ResponsiveContainer, null, props.children));
 }
 export {

package/dist/charts/components/ChartWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartWrapper.js","sources":["../../../src/charts/components/ChartWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport * as RechartsPrimitive from 'recharts';\nimport './style.css';\n\nexport interface ChartWrapperProps extends React.ComponentProps<'div'> {\n    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n    onSetWidth?: (width: number) => void;\n}\nexport function ChartWrapper(props: ChartWrapperProps) {\n    const { onSetWidth: handleSetWidth, ...attributes } = props;\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useLayoutEffect(() => {\n        if (ref.current && typeof handleSetWidth === 'function') {\n            const rect = ref.current.getBoundingClientRect();\n            handleSetWidth(rect.width);\n        }\n    }, [ref]);\n\n    const className = clsx('flex justify-center m-auto', attributes.className);\n\n    return (\n        <div {...attributes} className={className} ref={ref}>\n            <RechartsPrimitive.ResponsiveContainer>{props.children}</RechartsPrimitive.ResponsiveContainer>\n        </div>\n    );\n}\n"],"names":["React"],"mappings":";;;;AASO,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,YAAY,gBAAgB,GAAG,WAAe,IAAA;AAChD,QAAA,MAAMA,eAAM,OAAuB,IAAI;AAE7CA,iBAAM,gBAAgB,MAAM;AACxB,QAAI,IAAI,WAAW,OAAO,mBAAmB,YAAY;AAC/C,YAAA,OAAO,IAAI,QAAQ,sBAAsB;AAC/C,qBAAe,KAAK,KAAK;AAAA,IAAA;AAAA,EAC7B,GACD,CAAC,GAAG,CAAC;AAER,QAAM,YAAY,KAAK,8BAA8B,WAAW,SAAS;AAEzE,SACKA,+BAAA,cAAA,OAAA,EAAK,GAAG,YAAY,WAAsB,IAAA,GACtCA,+BAAA,cAAA,kBAAkB,qBAAlB,MAAuC,MAAM,QAAS,CAC3D;AAER;"}
+{"version":3,"file":"ChartWrapper.js","sources":["../../../src/charts/components/ChartWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport * as RechartsPrimitive from 'recharts';\nimport './style.css';\n\nexport interface ChartWrapperProps extends React.ComponentProps<'div'> {\n    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n    onSetWidth?: (width: number) => void;\n}\nexport function ChartWrapper(props: ChartWrapperProps) {\n    const { onSetWidth: handleSetWidth, ...attributes } = props;\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useLayoutEffect(() => {\n        if (ref.current && typeof handleSetWidth === 'function') {\n            const rect = ref.current.getBoundingClientRect();\n            handleSetWidth(rect.width);\n        }\n    }, [ref]);\n\n    const className = clsx('m-auto flex justify-center', attributes.className);\n\n    return (\n        <div {...attributes} className={className} ref={ref}>\n            <RechartsPrimitive.ResponsiveContainer>{props.children}</RechartsPrimitive.ResponsiveContainer>\n        </div>\n    );\n}\n"],"names":["React"],"mappings":";;;;AASO,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,YAAY,gBAAgB,GAAG,eAAe;AACtD,QAAM,MAAMA,eAAM,OAAuB,IAAI;AAE7CA,iBAAM,gBAAgB,MAAM;AACxB,QAAI,IAAI,WAAW,OAAO,mBAAmB,YAAY;AACrD,YAAM,OAAO,IAAI,QAAQ,sBAAA;AACzB,qBAAe,KAAK,KAAK;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,YAAY,KAAK,8BAA8B,WAAW,SAAS;AAEzE,SACIA,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,IAAA,GACvCA,+BAAA,cAAC,kBAAkB,qBAAlB,MAAuC,MAAM,QAAS,CAC3D;AAER;"}

package/dist/charts/components/Composed/BarLineChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarLineChart.cjs","sources":["../../../../src/charts/components/Composed/BarLineChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { useChart } from '../useChartData';\nimport { renderBars } from '../Bar/BarChart';\nimport { renderLines } from '../Line/LineChart';\n\nexport interface BarLineChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Show bar values as labels next to/inside the bar\n     * @default false\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of next to each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Show dots for each data point on lines\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default linear\n     */\n    lineType?: CurveType;\n}\n\nexport function BarLineChart<TData extends object>(props: BarLineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        showDots = false,\n        lineType = 'linear',\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarLineChartProps<TData>>(props);\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    // Separate bars and lines based on child component type to identify bar dataKeys\n    const barChildren = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Bar);\n    // Apply same fallback as useChart: dataKey ?? label\n    const barDataKeys = new Set(\n        barChildren\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const props = (child as React.ReactElement<ChartChildProps<TData>>).props;\n                return props.dataKey ?? props.label;\n            })\n    );\n\n    // Filter shapes from the main useChart call in order to ensure we are not rendering bars or lines that are currently hidden.\n    const barShapes = shapes.filter(shape => barDataKeys.has(shape.dataKey as keyof TData & string));\n    const lineShapes = shapes.filter(shape => !barDataKeys.has(shape.dataKey as keyof TData & string));\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar-line\">\n                <RechartsPrimitive.ComposedChart\n                    data={data}\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 4,\n                        right: 4,\n                        top: 10,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderBars(barShapes, showLabels, stacked, false)}\n                    {renderLines(lineShapes, showDots, lineType)}\n                </RechartsPrimitive.ComposedChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarLineChartBarProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Bar<TData extends object>(_: BarLineChartBarProps<TData>): JSX.Element | null {\n    return null;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarLineChartLineProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Line<TData extends object>(_: BarLineChartLineProps<TData>): JSX.Element | null {\n    return null;\n}\n\n// Attach the marker components to BarLineChart\nBarLineChart.Bar = Bar;\nBarLineChart.Line = Line;\n"],"names":["stripCartesianProps","clsx","useChart","props","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","renderBars","renderLines","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,SAAS,aAAmC,OAAiC;AAC1E,QAAA;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAA8C,KAAK;AAEvD,QAAM,YAAYC,GAAAA,KAAK,yBAAyB,EAAE,QAAQ,cAAc,eAAe;AACjF,QAAA,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAW,IAAIC,sBAAgB,QAAQ;AAG3F,QAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAS,UAAA,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,GAAG;AAEtH,QAAM,cAAc,IAAI;AAAA,IACpB,YACK,OAAO,CAAS,UAAA,MAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAS,UAAA;AACV,YAAMC,SAAS,MAAqD;AAC7DA,aAAAA,OAAM,WAAWA,OAAM;AAAA,IACjC,CAAA;AAAA,EACT;AAGM,QAAA,YAAY,OAAO,OAAO,CAAA,UAAS,YAAY,IAAI,MAAM,OAA+B,CAAC;AACzF,QAAA,aAAa,OAAO,OAAO,CAAA,UAAS,CAAC,YAAY,IAAI,MAAM,OAA+B,CAAC;AAEjG,SACK,sBAAA,cAAA,OAAA,EAAI,WAAsB,aAAU,gBACjC,GAAA,sBAAA,cAACC,aAAAA,cAAc,EAAA,GAAG,YAAY,WAAU,iBAAgB,aAAU,iBAC9D,GAAA,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,QAAQ;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MACT;AAAA,MACA,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC9C,sBAAA,cAAAA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAU,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAI,CAAA;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtDC,SAAAA,WAAW,WAAW,YAAY,SAAS,KAAK;AAAA,IAChDC,sBAAY,YAAY,UAAU,QAAQ;AAAA,EAAA,CAEnD,GACC,aACG,sBAAA,cAACC,OAAc,QAAA,EAAA,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAY,CAAA,IACrG,IACR;AAER;AAKA,SAAS,IAA0B,GAAoD;AAC5E,SAAA;AACX;AAKA,SAAS,KAA2B,GAAqD;AAC9E,SAAA;AACX;AAGA,aAAa,MAAM;AACnB,aAAa,OAAO;;"}
+{"version":3,"file":"BarLineChart.cjs","sources":["../../../../src/charts/components/Composed/BarLineChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { useChart } from '../useChartData';\nimport { renderBars } from '../Bar/BarChart';\nimport { renderLines } from '../Line/LineChart';\n\nexport interface BarLineChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Show bar values as labels next to/inside the bar\n     * @default false\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of next to each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Show dots for each data point on lines\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default linear\n     */\n    lineType?: CurveType;\n}\n\nexport function BarLineChart<TData extends object>(props: BarLineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        showDots = false,\n        lineType = 'linear',\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarLineChartProps<TData>>(props);\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    // Separate bars and lines based on child component type to identify bar dataKeys\n    const barChildren = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Bar);\n    // Apply same fallback as useChart: dataKey ?? label\n    const barDataKeys = new Set(\n        barChildren\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const props = (child as React.ReactElement<ChartChildProps<TData>>).props;\n                return props.dataKey ?? props.label;\n            })\n    );\n\n    // Filter shapes from the main useChart call in order to ensure we are not rendering bars or lines that are currently hidden.\n    const barShapes = shapes.filter(shape => barDataKeys.has(shape.dataKey as keyof TData & string));\n    const lineShapes = shapes.filter(shape => !barDataKeys.has(shape.dataKey as keyof TData & string));\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar-line\">\n                <RechartsPrimitive.ComposedChart\n                    data={data}\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 4,\n                        right: 4,\n                        top: 10,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderBars(barShapes, showLabels, stacked, false)}\n                    {renderLines(lineShapes, showDots, lineType)}\n                </RechartsPrimitive.ComposedChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarLineChartBarProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Bar<TData extends object>(_: BarLineChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarLineChartLineProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Line<TData extends object>(_: BarLineChartLineProps<TData>): React.JSX.Element | null {\n    return null;\n}\n\n// Attach the marker components to BarLineChart\nBarLineChart.Bar = Bar;\nBarLineChart.Line = Line;\n"],"names":["stripCartesianProps","clsx","useChart","props","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","renderBars","renderLines","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,SAAS,aAAmC,OAAiC;AAChF,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAA8C,KAAK;AAEvD,QAAM,YAAYC,GAAAA,KAAK,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACvF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAG3F,QAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAAS,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,GAAG;AAEtH,QAAM,cAAc,IAAI;AAAA,IACpB,YACK,OAAO,CAAA,UAAS,MAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAMC,SAAS,MAAqD;AACpE,aAAOA,OAAM,WAAWA,OAAM;AAAA,IAClC,CAAC;AAAA,EAAA;AAIT,QAAM,YAAY,OAAO,OAAO,CAAA,UAAS,YAAY,IAAI,MAAM,OAA+B,CAAC;AAC/F,QAAM,aAAa,OAAO,OAAO,CAAA,UAAS,CAAC,YAAY,IAAI,MAAM,OAA+B,CAAC;AAEjG,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,iBAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,QAAQ;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/C,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtDC,SAAAA,WAAW,WAAW,YAAY,SAAS,KAAK;AAAA,IAChDC,sBAAY,YAAY,UAAU,QAAQ;AAAA,EAAA,CAEnD,GACC,aACG,sBAAA,cAACC,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,IAA0B,GAA0D;AACzF,SAAO;AACX;AAKA,SAAS,KAA2B,GAA2D;AAC3F,SAAO;AACX;AAGA,aAAa,MAAM;AACnB,aAAa,OAAO;;"}

package/dist/charts/components/Composed/BarLineChart.d.ts

@@ -20,8 +20,8 @@ export interface BarLineChartProps<TData extends object> extends CartesianChartP
 }
 export declare function BarLineChart<TData extends object>(props: BarLineChartProps<TData>): React.JSX.Element;
 export declare namespace BarLineChart {
-    var Bar: <TData extends object>(_: BarLineChartBarProps<TData>) => JSX.Element | null;
-    var Line: <TData extends object>(_: BarLineChartLineProps<TData>) => JSX.Element | null;
+    var Bar: <TData extends object>(_: BarLineChartBarProps<TData>) => React.JSX.Element | null;
+    var Line: <TData extends object>(_: BarLineChartLineProps<TData>) => React.JSX.Element | null;
 }
 export interface BarLineChartBarProps<TData extends object> extends ChartChildProps<TData> {
 }

package/dist/charts/components/Composed/BarLineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarLineChart.js","sources":["../../../../src/charts/components/Composed/BarLineChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { useChart } from '../useChartData';\nimport { renderBars } from '../Bar/BarChart';\nimport { renderLines } from '../Line/LineChart';\n\nexport interface BarLineChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Show bar values as labels next to/inside the bar\n     * @default false\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of next to each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Show dots for each data point on lines\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default linear\n     */\n    lineType?: CurveType;\n}\n\nexport function BarLineChart<TData extends object>(props: BarLineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        showDots = false,\n        lineType = 'linear',\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarLineChartProps<TData>>(props);\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    // Separate bars and lines based on child component type to identify bar dataKeys\n    const barChildren = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Bar);\n    // Apply same fallback as useChart: dataKey ?? label\n    const barDataKeys = new Set(\n        barChildren\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const props = (child as React.ReactElement<ChartChildProps<TData>>).props;\n                return props.dataKey ?? props.label;\n            })\n    );\n\n    // Filter shapes from the main useChart call in order to ensure we are not rendering bars or lines that are currently hidden.\n    const barShapes = shapes.filter(shape => barDataKeys.has(shape.dataKey as keyof TData & string));\n    const lineShapes = shapes.filter(shape => !barDataKeys.has(shape.dataKey as keyof TData & string));\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar-line\">\n                <RechartsPrimitive.ComposedChart\n                    data={data}\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 4,\n                        right: 4,\n                        top: 10,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderBars(barShapes, showLabels, stacked, false)}\n                    {renderLines(lineShapes, showDots, lineType)}\n                </RechartsPrimitive.ComposedChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarLineChartBarProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Bar<TData extends object>(_: BarLineChartBarProps<TData>): JSX.Element | null {\n    return null;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarLineChartLineProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Line<TData extends object>(_: BarLineChartLineProps<TData>): JSX.Element | null {\n    return null;\n}\n\n// Attach the marker components to BarLineChart\nBarLineChart.Bar = Bar;\nBarLineChart.Line = Line;\n"],"names":["React","props"],"mappings":";;;;;;;;;;AA+BO,SAAS,aAAmC,OAAiC;AAC1E,QAAA;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH,oBAA8C,KAAK;AAEvD,QAAM,YAAY,KAAK,yBAAyB,EAAE,QAAQ,cAAc,eAAe;AACjF,QAAA,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAW,IAAI,SAAgB,QAAQ;AAG3F,QAAM,cAAcA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAS,UAAAA,eAAM,eAAe,KAAK,KAAK,MAAM,SAAS,GAAG;AAEtH,QAAM,cAAc,IAAI;AAAA,IACpB,YACK,OAAO,CAAS,UAAAA,eAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAS,UAAA;AACV,YAAMC,SAAS,MAAqD;AAC7DA,aAAAA,OAAM,WAAWA,OAAM;AAAA,IACjC,CAAA;AAAA,EACT;AAGM,QAAA,YAAY,OAAO,OAAO,CAAA,UAAS,YAAY,IAAI,MAAM,OAA+B,CAAC;AACzF,QAAA,aAAa,OAAO,OAAO,CAAA,UAAS,CAAC,YAAY,IAAI,MAAM,OAA+B,CAAC;AAEjG,SACKD,+BAAA,cAAA,OAAA,EAAI,WAAsB,aAAU,gBACjC,GAAAA,+BAAA,cAAC,cAAc,EAAA,GAAG,YAAY,WAAU,iBAAgB,aAAU,iBAC9D,GAAAA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,QAAQ;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MACT;AAAA,MACA,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC9CA,+BAAA,cAAA,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAAUA,+BAAA,cAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAI,CAAA;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,WAAW,WAAW,YAAY,SAAS,KAAK;AAAA,IAChD,YAAY,YAAY,UAAU,QAAQ;AAAA,EAAA,CAEnD,GACC,aACGA,+BAAA,cAAC,QAAc,EAAA,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAY,CAAA,IACrG,IACR;AAER;AAKA,SAAS,IAA0B,GAAoD;AAC5E,SAAA;AACX;AAKA,SAAS,KAA2B,GAAqD;AAC9E,SAAA;AACX;AAGA,aAAa,MAAM;AACnB,aAAa,OAAO;"}
+{"version":3,"file":"BarLineChart.js","sources":["../../../../src/charts/components/Composed/BarLineChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport { clsx } from 'clsx';\nimport { getAxisProps, stripCartesianProps } from '../../utils/common';\nimport { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Tooltip } from '../Tooltip';\nimport { Legend } from '../Legend';\nimport { useChart } from '../useChartData';\nimport { renderBars } from '../Bar/BarChart';\nimport { renderLines } from '../Line/LineChart';\n\nexport interface BarLineChartProps<TData extends object> extends CartesianChartProps<TData> {\n    /** Show bar values as labels next to/inside the bar\n     * @default false\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of next to each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Show dots for each data point on lines\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default linear\n     */\n    lineType?: CurveType;\n}\n\nexport function BarLineChart<TData extends object>(props: BarLineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        showDots = false,\n        lineType = 'linear',\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<BarLineChartProps<TData>>(props);\n\n    const className = clsx('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    // Separate bars and lines based on child component type to identify bar dataKeys\n    const barChildren = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Bar);\n    // Apply same fallback as useChart: dataKey ?? label\n    const barDataKeys = new Set(\n        barChildren\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const props = (child as React.ReactElement<ChartChildProps<TData>>).props;\n                return props.dataKey ?? props.label;\n            })\n    );\n\n    // Filter shapes from the main useChart call in order to ensure we are not rendering bars or lines that are currently hidden.\n    const barShapes = shapes.filter(shape => barDataKeys.has(shape.dataKey as keyof TData & string));\n    const lineShapes = shapes.filter(shape => !barDataKeys.has(shape.dataKey as keyof TData & string));\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar-line\">\n                <RechartsPrimitive.ComposedChart\n                    data={data}\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 4,\n                        right: 4,\n                        top: 10,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderBars(barShapes, showLabels, stacked, false)}\n                    {renderLines(lineShapes, showDots, lineType)}\n                </RechartsPrimitive.ComposedChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarLineChartBarProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Bar<TData extends object>(_: BarLineChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface BarLineChartLineProps<TData extends object> extends ChartChildProps<TData> {}\n\nfunction Line<TData extends object>(_: BarLineChartLineProps<TData>): React.JSX.Element | null {\n    return null;\n}\n\n// Attach the marker components to BarLineChart\nBarLineChart.Bar = Bar;\nBarLineChart.Line = Line;\n"],"names":["React","props"],"mappings":";;;;;;;;;;AA+BO,SAAS,aAAmC,OAAiC;AAChF,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH,oBAA8C,KAAK;AAEvD,QAAM,YAAY,KAAK,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACvF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAG3F,QAAM,cAAcA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAASA,eAAM,eAAe,KAAK,KAAK,MAAM,SAAS,GAAG;AAEtH,QAAM,cAAc,IAAI;AAAA,IACpB,YACK,OAAO,CAAA,UAASA,eAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAMC,SAAS,MAAqD;AACpE,aAAOA,OAAM,WAAWA,OAAM;AAAA,IAClC,CAAC;AAAA,EAAA;AAIT,QAAM,YAAY,OAAO,OAAO,CAAA,UAAS,YAAY,IAAI,MAAM,OAA+B,CAAC;AAC/F,QAAM,aAAa,OAAO,OAAO,CAAA,UAAS,CAAC,YAAY,IAAI,MAAM,OAA+B,CAAC;AAEjG,SACID,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,iBAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,QAAQ;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/CA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,WAAW,WAAW,YAAY,SAAS,KAAK;AAAA,IAChD,YAAY,YAAY,UAAU,QAAQ;AAAA,EAAA,CAEnD,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,IAA0B,GAA0D;AACzF,SAAO;AACX;AAKA,SAAS,KAA2B,GAA2D;AAC3F,SAAO;AACX;AAGA,aAAa,MAAM;AACnB,aAAa,OAAO;"}

package/dist/charts/components/Donut/DonutChart.cjs

@@ -61,7 +61,7 @@ function Total(props) {
     "div",
     {
       ...attributes,
-      className: "absolute-center flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full",
+      className: "flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full absolute-center",
       "data-taco": "chart-donut-total"
     },
     /* @__PURE__ */ React.createElement(Tooltip$1.Tooltip, { title: total }, /* @__PURE__ */ React.createElement("span", { className: "w-full truncate text-center text-lg font-bold tabular-nums" }, total)),

package/dist/charts/components/Donut/DonutChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.cjs","sources":["../../../../src/charts/components/Donut/DonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport * as RechartsPrimitive from 'recharts';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { usePieChart } from '../Pie/util';\nimport { Legend } from '../Legend';\nimport { PieChartSegmentProps } from '../Pie/PieChart';\nimport { ChartValueFormatter, PolarChartProps } from '../types';\nimport { Tooltip } from '../Tooltip';\nimport { Tooltip as TacoTooltip } from '../../../components/Tooltip/Tooltip';\nimport './style.css';\n\nconst DONUT_WIDTH = 20;\n\nexport interface DonutChartProps extends PolarChartProps {\n    /** Show total value in center of Donut\n     * @default false\n     */\n    showTotal?: boolean;\n}\n\nexport function DonutChart<TData extends object>(props: DonutChartProps) {\n    const { children, formatter, showLegend = false, showTotal = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem } = usePieChart<TData>(\n        children,\n        {\n            formatter,\n            unit,\n        }\n    );\n    const className = clsx('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-donut\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} innerRadius={radius - DONUT_WIDTH} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showTotal ? (\n                <Total<TData>\n                    formatter={globalFormatter}\n                    items={items as unknown[] as DonutChartSegmentProps<TData>[]}\n                    unit={unit}\n                    style={{ top: radius + DONUT_WIDTH / 2, width: radius + DONUT_WIDTH * 2 }}\n                />\n            ) : null}\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface DonutChartSegmentProps<TData extends object> extends PieChartSegmentProps<TData> {}\n\nfunction Segment<TData extends object>(_: DonutChartSegmentProps<TData>): JSX.Element | null {\n    return null;\n}\nDonutChart.Segment = Segment;\n\ninterface DonutTotalProps<TData extends object> extends React.ComponentProps<'div'> {\n    formatter: ChartValueFormatter;\n    items: DonutChartSegmentProps<TData>[];\n    unit?: string;\n}\n\nfunction Total<TData extends object>(props: DonutTotalProps<TData>) {\n    const { formatter, items, unit, ...attributes } = props;\n    const total = React.useMemo(() => {\n        const total = items.filter(item => !item.isHidden).reduce((acc, curr) => acc + curr.value, 0);\n        return formatter(total);\n    }, [items]);\n\n    return (\n        <div\n            {...attributes}\n            className=\"absolute-center flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full\"\n            data-taco=\"chart-donut-total\">\n            <TacoTooltip title={total}>\n                <span className=\"w-full truncate text-center text-lg font-bold tabular-nums\">{total}</span>\n            </TacoTooltip>\n            {unit ? <span className=\"-mb-1 -mt-0.5 truncate text-xs text-gray-700\">{unit}</span> : null}\n        </div>\n    );\n}\n"],"names":["usePieChart","clsx","ChartWrapper","RechartsPrimitive","Tooltip","Legend","total","TacoTooltip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,cAAc;AASb,SAAS,WAAiC,OAAwB;AAC/D,QAAA,EAAE,UAAU,WAAW,aAAa,OAAO,YAAY,OAAO,cAAc,MAAM,GAAG,WAAe,IAAA;AACpG,QAAA,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,WAAA,IAAeA,KAAA;AAAA,IACrG;AAAA,IACA;AAAA,MACI;AAAA,MACA;AAAA,IAAA;AAAA,EAER;AACA,QAAM,YAAYC,GAAA,KAAK,iBAAiB,WAAW,SAAS;AAE5D,6CACK,OAAI,EAAA,WAAU,YAAW,aAAU,gBAAA,uCAC/BC,aAAAA,cAAc,EAAA,GAAG,YAAY,WAAsB,aAAU,eAAc,YAAY,UAAA,uCACnFC,6BAAkB,UAAlB,MACI,sBAAA,cAAAA,6BAAkB,SAAlB,EAA0B,SAAU,sBAAA,cAAAC,iBAAA,EAAQ,OAAO,cAAc,EAAA,CAAI,GACrE,sBAAA,cAAAD,6BAAkB,KAAlB,EAAuB,GAAG,UAAU,aAAa,SAAS,aAAa,CAC5E,CACJ,GACC,YACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,OAAO,EAAE,KAAK,SAAS,cAAc,GAAG,OAAO,SAAS,cAAc,EAAE;AAAA,IAAA;AAAA,EAAA,IAE5E,MACH,aACG,sBAAA,cAACE,OAAAA,QAAc,EAAA,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,QAA8B,GAAsD;AAClF,SAAA;AACX;AACA,WAAW,UAAU;AAQrB,SAAS,MAA4B,OAA+B;AAChE,QAAM,EAAE,WAAW,OAAO,MAAM,GAAG,WAAe,IAAA;AAC5C,QAAA,QAAQ,MAAM,QAAQ,MAAM;AAC9B,UAAMC,SAAQ,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ,EAAE,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAC5F,WAAO,UAAUA,MAAK;AAAA,EAAA,GACvB,CAAC,KAAK,CAAC;AAGN,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA,cAACC,UAAAA,WAAY,OAAO,MAAA,uCACf,QAAK,EAAA,WAAU,6DAA8D,GAAA,KAAM,CACxF;AAAA,IACC,OAAQ,sBAAA,cAAA,QAAA,EAAK,WAAU,+CAAA,GAAgD,IAAK,IAAU;AAAA,EAC3F;AAER;;"}
+{"version":3,"file":"DonutChart.cjs","sources":["../../../../src/charts/components/Donut/DonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport * as RechartsPrimitive from 'recharts';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { usePieChart } from '../Pie/util';\nimport { Legend } from '../Legend';\nimport { PieChartSegmentProps } from '../Pie/PieChart';\nimport { ChartValueFormatter, PolarChartProps } from '../types';\nimport { Tooltip } from '../Tooltip';\nimport { Tooltip as TacoTooltip } from '../../../components/Tooltip/Tooltip';\nimport './style.css';\n\nconst DONUT_WIDTH = 20;\n\nexport interface DonutChartProps extends PolarChartProps {\n    /** Show total value in center of Donut\n     * @default false\n     */\n    showTotal?: boolean;\n}\n\nexport function DonutChart<TData extends object>(props: DonutChartProps) {\n    const { children, formatter, showLegend = false, showTotal = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem } = usePieChart<TData>(\n        children,\n        {\n            formatter,\n            unit,\n        }\n    );\n    const className = clsx('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-donut\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} innerRadius={radius - DONUT_WIDTH} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showTotal ? (\n                <Total<TData>\n                    formatter={globalFormatter}\n                    items={items as unknown[] as DonutChartSegmentProps<TData>[]}\n                    unit={unit}\n                    style={{ top: radius + DONUT_WIDTH / 2, width: radius + DONUT_WIDTH * 2 }}\n                />\n            ) : null}\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface DonutChartSegmentProps<TData extends object> extends PieChartSegmentProps<TData> {}\n\nfunction Segment<TData extends object>(_: DonutChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nDonutChart.Segment = Segment;\n\ninterface DonutTotalProps<TData extends object> extends React.ComponentProps<'div'> {\n    formatter: ChartValueFormatter;\n    items: DonutChartSegmentProps<TData>[];\n    unit?: string;\n}\n\nfunction Total<TData extends object>(props: DonutTotalProps<TData>) {\n    const { formatter, items, unit, ...attributes } = props;\n    const total = React.useMemo(() => {\n        const total = items.filter(item => !item.isHidden).reduce((acc, curr) => acc + curr.value, 0);\n        return formatter(total);\n    }, [items]);\n\n    return (\n        <div\n            {...attributes}\n            className=\"flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full absolute-center\"\n            data-taco=\"chart-donut-total\">\n            <TacoTooltip title={total}>\n                <span className=\"w-full truncate text-center text-lg font-bold tabular-nums\">{total}</span>\n            </TacoTooltip>\n            {unit ? <span className=\"-mb-1 -mt-0.5 truncate text-xs text-gray-700\">{unit}</span> : null}\n        </div>\n    );\n}\n"],"names":["usePieChart","clsx","ChartWrapper","RechartsPrimitive","Tooltip","Legend","total","TacoTooltip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,cAAc;AASb,SAAS,WAAiC,OAAwB;AACrE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,YAAY,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC1G,QAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,WAAA,IAAeA,KAAAA;AAAAA,IACrG;AAAA,IACA;AAAA,MACI;AAAA,MACA;AAAA,IAAA;AAAA,EACJ;AAEJ,QAAM,YAAYC,GAAAA,KAAK,iBAAiB,WAAW,SAAS;AAE5D,6CACK,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,uCAC/BC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,eAAc,YAAY,UAAA,uCACnFC,6BAAkB,UAAlB,MACG,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,iBAAA,EAAQ,OAAO,cAAc,EAAA,CAAI,GACtE,sBAAA,cAACD,6BAAkB,KAAlB,EAAuB,GAAG,UAAU,aAAa,SAAS,aAAa,CAC5E,CACJ,GACC,YACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,OAAO,EAAE,KAAK,SAAS,cAAc,GAAG,OAAO,SAAS,cAAc,EAAA;AAAA,IAAE;AAAA,EAAA,IAE5E,MACH,aACG,sBAAA,cAACE,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,QAA8B,GAA4D;AAC/F,SAAO;AACX;AACA,WAAW,UAAU;AAQrB,SAAS,MAA4B,OAA+B;AAChE,QAAM,EAAE,WAAW,OAAO,MAAM,GAAG,eAAe;AAClD,QAAM,QAAQ,MAAM,QAAQ,MAAM;AAC9B,UAAMC,SAAQ,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ,EAAE,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAC5F,WAAO,UAAUA,MAAK;AAAA,EAC1B,GAAG,CAAC,KAAK,CAAC;AAEV,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA,cAACC,UAAAA,WAAY,OAAO,MAAA,uCACf,QAAA,EAAK,WAAU,6DAAA,GAA8D,KAAM,CACxF;AAAA,IACC,OAAO,sBAAA,cAAC,QAAA,EAAK,WAAU,+CAAA,GAAgD,IAAK,IAAU;AAAA,EAAA;AAGnG;;"}

package/dist/charts/components/Donut/DonutChart.d.ts

@@ -9,7 +9,7 @@ export interface DonutChartProps extends PolarChartProps {
 }
 export declare function DonutChart<TData extends object>(props: DonutChartProps): React.JSX.Element;
 export declare namespace DonutChart {
-    var Segment: <TData extends object>(_: DonutChartSegmentProps<TData>) => JSX.Element | null;
+    var Segment: <TData extends object>(_: DonutChartSegmentProps<TData>) => React.JSX.Element | null;
 }
 export interface DonutChartSegmentProps<TData extends object> extends PieChartSegmentProps<TData> {
 }

package/dist/charts/components/Donut/DonutChart.js

@@ -42,7 +42,7 @@ function Total(props) {
     "div",
     {
       ...attributes,
-      className: "absolute-center flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full",
+      className: "flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full absolute-center",
       "data-taco": "chart-donut-total"
     },
     /* @__PURE__ */ React__default.createElement(Tooltip$1, { title: total }, /* @__PURE__ */ React__default.createElement("span", { className: "w-full truncate text-center text-lg font-bold tabular-nums" }, total)),

package/dist/charts/components/Donut/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","sources":["../../../../src/charts/components/Donut/DonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport * as RechartsPrimitive from 'recharts';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { usePieChart } from '../Pie/util';\nimport { Legend } from '../Legend';\nimport { PieChartSegmentProps } from '../Pie/PieChart';\nimport { ChartValueFormatter, PolarChartProps } from '../types';\nimport { Tooltip } from '../Tooltip';\nimport { Tooltip as TacoTooltip } from '../../../components/Tooltip/Tooltip';\nimport './style.css';\n\nconst DONUT_WIDTH = 20;\n\nexport interface DonutChartProps extends PolarChartProps {\n    /** Show total value in center of Donut\n     * @default false\n     */\n    showTotal?: boolean;\n}\n\nexport function DonutChart<TData extends object>(props: DonutChartProps) {\n    const { children, formatter, showLegend = false, showTotal = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem } = usePieChart<TData>(\n        children,\n        {\n            formatter,\n            unit,\n        }\n    );\n    const className = clsx('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-donut\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} innerRadius={radius - DONUT_WIDTH} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showTotal ? (\n                <Total<TData>\n                    formatter={globalFormatter}\n                    items={items as unknown[] as DonutChartSegmentProps<TData>[]}\n                    unit={unit}\n                    style={{ top: radius + DONUT_WIDTH / 2, width: radius + DONUT_WIDTH * 2 }}\n                />\n            ) : null}\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface DonutChartSegmentProps<TData extends object> extends PieChartSegmentProps<TData> {}\n\nfunction Segment<TData extends object>(_: DonutChartSegmentProps<TData>): JSX.Element | null {\n    return null;\n}\nDonutChart.Segment = Segment;\n\ninterface DonutTotalProps<TData extends object> extends React.ComponentProps<'div'> {\n    formatter: ChartValueFormatter;\n    items: DonutChartSegmentProps<TData>[];\n    unit?: string;\n}\n\nfunction Total<TData extends object>(props: DonutTotalProps<TData>) {\n    const { formatter, items, unit, ...attributes } = props;\n    const total = React.useMemo(() => {\n        const total = items.filter(item => !item.isHidden).reduce((acc, curr) => acc + curr.value, 0);\n        return formatter(total);\n    }, [items]);\n\n    return (\n        <div\n            {...attributes}\n            className=\"absolute-center flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full\"\n            data-taco=\"chart-donut-total\">\n            <TacoTooltip title={total}>\n                <span className=\"w-full truncate text-center text-lg font-bold tabular-nums\">{total}</span>\n            </TacoTooltip>\n            {unit ? <span className=\"-mb-1 -mt-0.5 truncate text-xs text-gray-700\">{unit}</span> : null}\n        </div>\n    );\n}\n"],"names":["React","total","TacoTooltip"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc;AASb,SAAS,WAAiC,OAAwB;AAC/D,QAAA,EAAE,UAAU,WAAW,aAAa,OAAO,YAAY,OAAO,cAAc,MAAM,GAAG,WAAe,IAAA;AACpG,QAAA,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,WAAA,IAAe;AAAA,IACrG;AAAA,IACA;AAAA,MACI;AAAA,MACA;AAAA,IAAA;AAAA,EAER;AACA,QAAM,YAAY,KAAK,iBAAiB,WAAW,SAAS;AAE5D,sDACK,OAAI,EAAA,WAAU,YAAW,aAAU,gBAAA,gDAC/B,cAAc,EAAA,GAAG,YAAY,WAAsB,aAAU,eAAc,YAAY,UAAA,gDACnF,kBAAkB,UAAlB,MACIA,+BAAA,cAAA,kBAAkB,SAAlB,EAA0B,SAAUA,+BAAA,cAAA,SAAA,EAAQ,OAAO,cAAc,EAAA,CAAI,GACrEA,+BAAA,cAAA,kBAAkB,KAAlB,EAAuB,GAAG,UAAU,aAAa,SAAS,aAAa,CAC5E,CACJ,GACC,YACGA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,OAAO,EAAE,KAAK,SAAS,cAAc,GAAG,OAAO,SAAS,cAAc,EAAE;AAAA,IAAA;AAAA,EAAA,IAE5E,MACH,aACGA,+BAAA,cAAC,QAAc,EAAA,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,QAA8B,GAAsD;AAClF,SAAA;AACX;AACA,WAAW,UAAU;AAQrB,SAAS,MAA4B,OAA+B;AAChE,QAAM,EAAE,WAAW,OAAO,MAAM,GAAG,WAAe,IAAA;AAC5C,QAAA,QAAQA,eAAM,QAAQ,MAAM;AAC9B,UAAMC,SAAQ,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ,EAAE,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAC5F,WAAO,UAAUA,MAAK;AAAA,EAAA,GACvB,CAAC,KAAK,CAAC;AAGN,SAAAD,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,aAAU;AAAA,IAAA;AAAA,IACVA,+BAAA,cAACE,aAAY,OAAO,MAAA,gDACf,QAAK,EAAA,WAAU,6DAA8D,GAAA,KAAM,CACxF;AAAA,IACC,OAAQF,+BAAA,cAAA,QAAA,EAAK,WAAU,+CAAA,GAAgD,IAAK,IAAU;AAAA,EAC3F;AAER;"}
+{"version":3,"file":"DonutChart.js","sources":["../../../../src/charts/components/Donut/DonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport * as RechartsPrimitive from 'recharts';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { usePieChart } from '../Pie/util';\nimport { Legend } from '../Legend';\nimport { PieChartSegmentProps } from '../Pie/PieChart';\nimport { ChartValueFormatter, PolarChartProps } from '../types';\nimport { Tooltip } from '../Tooltip';\nimport { Tooltip as TacoTooltip } from '../../../components/Tooltip/Tooltip';\nimport './style.css';\n\nconst DONUT_WIDTH = 20;\n\nexport interface DonutChartProps extends PolarChartProps {\n    /** Show total value in center of Donut\n     * @default false\n     */\n    showTotal?: boolean;\n}\n\nexport function DonutChart<TData extends object>(props: DonutChartProps) {\n    const { children, formatter, showLegend = false, showTotal = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem } = usePieChart<TData>(\n        children,\n        {\n            formatter,\n            unit,\n        }\n    );\n    const className = clsx('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-donut\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} innerRadius={radius - DONUT_WIDTH} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showTotal ? (\n                <Total<TData>\n                    formatter={globalFormatter}\n                    items={items as unknown[] as DonutChartSegmentProps<TData>[]}\n                    unit={unit}\n                    style={{ top: radius + DONUT_WIDTH / 2, width: radius + DONUT_WIDTH * 2 }}\n                />\n            ) : null}\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport interface DonutChartSegmentProps<TData extends object> extends PieChartSegmentProps<TData> {}\n\nfunction Segment<TData extends object>(_: DonutChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nDonutChart.Segment = Segment;\n\ninterface DonutTotalProps<TData extends object> extends React.ComponentProps<'div'> {\n    formatter: ChartValueFormatter;\n    items: DonutChartSegmentProps<TData>[];\n    unit?: string;\n}\n\nfunction Total<TData extends object>(props: DonutTotalProps<TData>) {\n    const { formatter, items, unit, ...attributes } = props;\n    const total = React.useMemo(() => {\n        const total = items.filter(item => !item.isHidden).reduce((acc, curr) => acc + curr.value, 0);\n        return formatter(total);\n    }, [items]);\n\n    return (\n        <div\n            {...attributes}\n            className=\"flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full absolute-center\"\n            data-taco=\"chart-donut-total\">\n            <TacoTooltip title={total}>\n                <span className=\"w-full truncate text-center text-lg font-bold tabular-nums\">{total}</span>\n            </TacoTooltip>\n            {unit ? <span className=\"-mb-1 -mt-0.5 truncate text-xs text-gray-700\">{unit}</span> : null}\n        </div>\n    );\n}\n"],"names":["React","total","TacoTooltip"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc;AASb,SAAS,WAAiC,OAAwB;AACrE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,YAAY,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC1G,QAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,WAAA,IAAe;AAAA,IACrG;AAAA,IACA;AAAA,MACI;AAAA,MACA;AAAA,IAAA;AAAA,EACJ;AAEJ,QAAM,YAAY,KAAK,iBAAiB,WAAW,SAAS;AAE5D,sDACK,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,gDAC/B,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,eAAc,YAAY,UAAA,gDACnF,kBAAkB,UAAlB,MACGA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,cAAc,EAAA,CAAI,GACtEA,+BAAA,cAAC,kBAAkB,KAAlB,EAAuB,GAAG,UAAU,aAAa,SAAS,aAAa,CAC5E,CACJ,GACC,YACGA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,OAAO,EAAE,KAAK,SAAS,cAAc,GAAG,OAAO,SAAS,cAAc,EAAA;AAAA,IAAE;AAAA,EAAA,IAE5E,MACH,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,QAA8B,GAA4D;AAC/F,SAAO;AACX;AACA,WAAW,UAAU;AAQrB,SAAS,MAA4B,OAA+B;AAChE,QAAM,EAAE,WAAW,OAAO,MAAM,GAAG,eAAe;AAClD,QAAM,QAAQA,eAAM,QAAQ,MAAM;AAC9B,UAAMC,SAAQ,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ,EAAE,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAC5F,WAAO,UAAUA,MAAK;AAAA,EAC1B,GAAG,CAAC,KAAK,CAAC;AAEV,SACID,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,aAAU;AAAA,IAAA;AAAA,IACVA,+BAAA,cAACE,aAAY,OAAO,MAAA,gDACf,QAAA,EAAK,WAAU,6DAAA,GAA8D,KAAM,CACxF;AAAA,IACC,OAAOF,+BAAA,cAAC,QAAA,EAAK,WAAU,+CAAA,GAAgD,IAAK,IAAU;AAAA,EAAA;AAGnG;"}

package/dist/charts/components/LegacyDonut/ActiveShape.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveShape.cjs","sources":["../../../../src/charts/components/LegacyDonut/ActiveShape.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport cn from 'clsx';\n\nimport { getThemeColor } from '../../utils/color';\nimport { PieSectorDataItem } from 'recharts/types/polar/Pie';\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {\n    onClick: (id: string | undefined) => void;\n    pieColors: Record<string, string>;\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n    const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;\n\n    return (\n        <g onClick={() => onClick(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                fill={fill}\n            />\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                innerRadius={outerRadius + 2}\n                outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n                fill={id === undefined ? getThemeColor('blue-500') : getThemeColor(pieColors[id], 'blue-500')}\n                opacity={0.4}\n            />\n        </g>\n    );\n};\n"],"names":["Recharts","HOVER_DONUT_WIDTH","getThemeColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAaa,MAAA,cAAc,CAAC,UAA4B;AACpD,QAAM,EAAE,IAAI,IAAI,IAAI,aAAa,SAAS,cAAc,GAAG,WAAW,YAAY,UAAU,KAAS,IAAA;AAErG,SACK,sBAAA,cAAA,KAAA,EAAE,SAAS,MAAM,QAAQ,EAAE,GAAG,WAAW,GAAG,EAAE,kBAAkB,CAAC,CAAC,QAAA,CAAS,EACxE,GAAA,sBAAA;AAAA,IAACA,6BAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAAA,sBAAA;AAAA,IAACA,6BAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAcC,KAAA;AAAA,MAC3B,MAAM,OAAO,SAAYC,oBAAc,UAAU,IAAIA,MAAAA,cAAc,UAAU,EAAE,GAAG,UAAU;AAAA,MAC5F,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;;"}
+{"version":3,"file":"ActiveShape.cjs","sources":["../../../../src/charts/components/LegacyDonut/ActiveShape.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport cn from 'clsx';\n\nimport { getThemeColor } from '../../utils/color';\nimport { PieSectorDataItem } from 'recharts/types/polar/Pie';\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {\n    onClick: (id: string | undefined) => void;\n    pieColors: Record<string, string>;\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n    const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;\n\n    return (\n        <g onClick={() => onClick(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                fill={fill}\n            />\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                innerRadius={outerRadius + 2}\n                outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n                fill={id === undefined ? getThemeColor('blue-500') : getThemeColor(pieColors[id], 'blue-500')}\n                opacity={0.4}\n            />\n        </g>\n    );\n};\n"],"names":["Recharts","HOVER_DONUT_WIDTH","getThemeColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,cAAc,CAAC,UAA4B;AACpD,QAAM,EAAE,IAAI,IAAI,IAAI,aAAa,SAAS,cAAc,GAAG,WAAW,YAAY,UAAU,KAAA,IAAS;AAErG,SACI,sBAAA,cAAC,KAAA,EAAE,SAAS,MAAM,QAAQ,EAAE,GAAG,WAAW,GAAG,EAAE,kBAAkB,CAAC,CAAC,QAAA,CAAS,EAAA,GACxE,sBAAA;AAAA,IAACA,6BAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAEJ,sBAAA;AAAA,IAACA,6BAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAcC,KAAAA;AAAAA,MAC3B,MAAM,OAAO,SAAYC,oBAAc,UAAU,IAAIA,MAAAA,cAAc,UAAU,EAAE,GAAG,UAAU;AAAA,MAC5F,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;;"}

package/dist/charts/components/LegacyDonut/ActiveShape.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveShape.js","sources":["../../../../src/charts/components/LegacyDonut/ActiveShape.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport cn from 'clsx';\n\nimport { getThemeColor } from '../../utils/color';\nimport { PieSectorDataItem } from 'recharts/types/polar/Pie';\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {\n    onClick: (id: string | undefined) => void;\n    pieColors: Record<string, string>;\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n    const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;\n\n    return (\n        <g onClick={() => onClick(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                fill={fill}\n            />\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                innerRadius={outerRadius + 2}\n                outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n                fill={id === undefined ? getThemeColor('blue-500') : getThemeColor(pieColors[id], 'blue-500')}\n                opacity={0.4}\n            />\n        </g>\n    );\n};\n"],"names":["React","Recharts"],"mappings":";;;;;AAaa,MAAA,cAAc,CAAC,UAA4B;AACpD,QAAM,EAAE,IAAI,IAAI,IAAI,aAAa,SAAS,cAAc,GAAG,WAAW,YAAY,UAAU,KAAS,IAAA;AAErG,SACKA,+BAAA,cAAA,KAAA,EAAE,SAAS,MAAM,QAAQ,EAAE,GAAG,WAAW,GAAG,EAAE,kBAAkB,CAAC,CAAC,QAAA,CAAS,EACxE,GAAAA,+BAAA;AAAA,IAACC,kBAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAAAD,+BAAA;AAAA,IAACC,kBAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,MAAM,OAAO,SAAY,cAAc,UAAU,IAAI,cAAc,UAAU,EAAE,GAAG,UAAU;AAAA,MAC5F,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;"}
+{"version":3,"file":"ActiveShape.js","sources":["../../../../src/charts/components/LegacyDonut/ActiveShape.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport cn from 'clsx';\n\nimport { getThemeColor } from '../../utils/color';\nimport { PieSectorDataItem } from 'recharts/types/polar/Pie';\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {\n    onClick: (id: string | undefined) => void;\n    pieColors: Record<string, string>;\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n    const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;\n\n    return (\n        <g onClick={() => onClick(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                fill={fill}\n            />\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                innerRadius={outerRadius + 2}\n                outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n                fill={id === undefined ? getThemeColor('blue-500') : getThemeColor(pieColors[id], 'blue-500')}\n                opacity={0.4}\n            />\n        </g>\n    );\n};\n"],"names":["React","Recharts"],"mappings":";;;;;AAaO,MAAM,cAAc,CAAC,UAA4B;AACpD,QAAM,EAAE,IAAI,IAAI,IAAI,aAAa,SAAS,cAAc,GAAG,WAAW,YAAY,UAAU,KAAA,IAAS;AAErG,SACIA,+BAAA,cAAC,KAAA,EAAE,SAAS,MAAM,QAAQ,EAAE,GAAG,WAAW,GAAG,EAAE,kBAAkB,CAAC,CAAC,QAAA,CAAS,EAAA,GACxEA,+BAAA;AAAA,IAACC,kBAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAEJD,+BAAA;AAAA,IAACC,kBAAS;AAAA,IAAT;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,MAAM,OAAO,SAAY,cAAc,UAAU,IAAI,cAAc,UAAU,EAAE,GAAG,UAAU;AAAA,MAC5F,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;"}

package/dist/charts/components/LegacyDonut/CenteredLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CenteredLabel.cjs","sources":["../../../../src/charts/components/LegacyDonut/CenteredLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util';\n\ntype CenteredLabelProps = {\n    radius: number;\n    label: string;\n    total: number;\n    formatter: ((value: number) => string) | undefined;\n};\n\nexport const CenteredLabel = ({ radius, label, total, formatter }: CenteredLabelProps) => {\n    const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;\n    const diameter = radius * 2;\n\n    return (\n        <div\n            className=\"absolute mt-1 flex h-12 flex-col text-center\"\n            style={{\n                top: `calc(${radius}px - (3rem / 2))`, // h-12 is 3rem\n                left: `${totalInset}px`,\n                width: `${diameter - 2 * totalInset}px`,\n            }}>\n            <span className=\"w-full truncate text-lg font-bold\">{formatter ? formatter(total) : total}</span>\n            {label}\n        </div>\n    );\n};\n"],"names":["HOVER_DONUT_WIDTH","DONUT_WIDTH"],"mappings":";;;;AAUO,MAAM,gBAAgB,CAAC,EAAE,QAAQ,OAAO,OAAO,gBAAoC;AAChF,QAAA,aAAaA,yBAAoBC,KAAAA,cAAcA,KAAA;AACrD,QAAM,WAAW,SAAS;AAGtB,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO;AAAA,QACH,KAAK,QAAQ,MAAM;AAAA;AAAA,QACnB,MAAM,GAAG,UAAU;AAAA,QACnB,OAAO,GAAG,WAAW,IAAI,UAAU;AAAA,MAAA;AAAA,IACvC;AAAA,IACA,sBAAA,cAAC,UAAK,WAAU,uCAAqC,YAAY,UAAU,KAAK,IAAI,KAAM;AAAA,IACzF;AAAA,EACL;AAER;;"}
+{"version":3,"file":"CenteredLabel.cjs","sources":["../../../../src/charts/components/LegacyDonut/CenteredLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util';\n\ntype CenteredLabelProps = {\n    radius: number;\n    label: string;\n    total: number;\n    formatter: ((value: number) => string) | undefined;\n};\n\nexport const CenteredLabel = ({ radius, label, total, formatter }: CenteredLabelProps) => {\n    const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;\n    const diameter = radius * 2;\n\n    return (\n        <div\n            className=\"absolute mt-1 flex h-12 flex-col text-center\"\n            style={{\n                top: `calc(${radius}px - (3rem / 2))`, // h-12 is 3rem\n                left: `${totalInset}px`,\n                width: `${diameter - 2 * totalInset}px`,\n            }}>\n            <span className=\"w-full truncate text-lg font-bold\">{formatter ? formatter(total) : total}</span>\n            {label}\n        </div>\n    );\n};\n"],"names":["HOVER_DONUT_WIDTH","DONUT_WIDTH"],"mappings":";;;;AAUO,MAAM,gBAAgB,CAAC,EAAE,QAAQ,OAAO,OAAO,gBAAoC;AACtF,QAAM,aAAaA,yBAAoBC,KAAAA,cAAcA,KAAAA;AACrD,QAAM,WAAW,SAAS;AAE1B,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO;AAAA,QACH,KAAK,QAAQ,MAAM;AAAA;AAAA,QACnB,MAAM,GAAG,UAAU;AAAA,QACnB,OAAO,GAAG,WAAW,IAAI,UAAU;AAAA,MAAA;AAAA,IACvC;AAAA,IACA,sBAAA,cAAC,UAAK,WAAU,uCAAqC,YAAY,UAAU,KAAK,IAAI,KAAM;AAAA,IACzF;AAAA,EAAA;AAGb;;"}

package/dist/charts/components/LegacyDonut/CenteredLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CenteredLabel.js","sources":["../../../../src/charts/components/LegacyDonut/CenteredLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util';\n\ntype CenteredLabelProps = {\n    radius: number;\n    label: string;\n    total: number;\n    formatter: ((value: number) => string) | undefined;\n};\n\nexport const CenteredLabel = ({ radius, label, total, formatter }: CenteredLabelProps) => {\n    const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;\n    const diameter = radius * 2;\n\n    return (\n        <div\n            className=\"absolute mt-1 flex h-12 flex-col text-center\"\n            style={{\n                top: `calc(${radius}px - (3rem / 2))`, // h-12 is 3rem\n                left: `${totalInset}px`,\n                width: `${diameter - 2 * totalInset}px`,\n            }}>\n            <span className=\"w-full truncate text-lg font-bold\">{formatter ? formatter(total) : total}</span>\n            {label}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;AAUO,MAAM,gBAAgB,CAAC,EAAE,QAAQ,OAAO,OAAO,gBAAoC;AAChF,QAAA,aAAa,oBAAoB,cAAc;AACrD,QAAM,WAAW,SAAS;AAGtB,SAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO;AAAA,QACH,KAAK,QAAQ,MAAM;AAAA;AAAA,QACnB,MAAM,GAAG,UAAU;AAAA,QACnB,OAAO,GAAG,WAAW,IAAI,UAAU;AAAA,MAAA;AAAA,IACvC;AAAA,IACAA,+BAAA,cAAC,UAAK,WAAU,uCAAqC,YAAY,UAAU,KAAK,IAAI,KAAM;AAAA,IACzF;AAAA,EACL;AAER;"}
+{"version":3,"file":"CenteredLabel.js","sources":["../../../../src/charts/components/LegacyDonut/CenteredLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util';\n\ntype CenteredLabelProps = {\n    radius: number;\n    label: string;\n    total: number;\n    formatter: ((value: number) => string) | undefined;\n};\n\nexport const CenteredLabel = ({ radius, label, total, formatter }: CenteredLabelProps) => {\n    const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;\n    const diameter = radius * 2;\n\n    return (\n        <div\n            className=\"absolute mt-1 flex h-12 flex-col text-center\"\n            style={{\n                top: `calc(${radius}px - (3rem / 2))`, // h-12 is 3rem\n                left: `${totalInset}px`,\n                width: `${diameter - 2 * totalInset}px`,\n            }}>\n            <span className=\"w-full truncate text-lg font-bold\">{formatter ? formatter(total) : total}</span>\n            {label}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;AAUO,MAAM,gBAAgB,CAAC,EAAE,QAAQ,OAAO,OAAO,gBAAoC;AACtF,QAAM,aAAa,oBAAoB,cAAc;AACrD,QAAM,WAAW,SAAS;AAE1B,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO;AAAA,QACH,KAAK,QAAQ,MAAM;AAAA;AAAA,QACnB,MAAM,GAAG,UAAU;AAAA,QACnB,OAAO,GAAG,WAAW,IAAI,UAAU;AAAA,MAAA;AAAA,IACvC;AAAA,IACAA,+BAAA,cAAC,UAAK,WAAU,uCAAqC,YAAY,UAAU,KAAK,IAAI,KAAM;AAAA,IACzF;AAAA,EAAA;AAGb;"}

package/dist/charts/components/LegacyDonut/LegacyDonutChart.cjs

@@ -31,9 +31,8 @@ const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onCli
   const [hoveredItem, setHoveredItem] = React.useState([]);
   const [selectedItem, setSelectedItem] = React.useState([]);
   React.useEffect(() => {
-    var _a;
     if (ref.current) {
-      const rect = (_a = ref.current.parentElement) == null ? void 0 : _a.getBoundingClientRect();
+      const rect = ref.current.parentElement?.getBoundingClientRect();
       if (rect) {
         const width = rect.width / 2;
         const max = rect.height < width ? rect.height : width;

package/dist/charts/components/LegacyDonut/LegacyDonutChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyDonutChart.cjs","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport { Color, getThemeColor } from '../../utils/color';\nimport { Legend } from './Legend';\nimport { CenteredLabel } from './CenteredLabel';\nimport { ActiveShape } from './ActiveShape';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: LegacyDonutChartSegmentProps) => null;\n\nexport type LegacyDonutChartSegmentProps = {\n    color: Color;\n    id: string;\n    label: string;\n    value: number;\n};\n\nexport type LegacyDonutSegmentIds = string[];\n\nexport type LegacyDonutChartProps = {\n    children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];\n    formatter?: (value: number) => string;\n    onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    label: string;\n};\n\nexport const LegacyDonutChart = function LegacyDonutChart({ children, formatter, onClick, label }: LegacyDonutChartProps) {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [radius, setRadius] = React.useState<number>(0);\n\n    const [hoveredItem, setHoveredItem] = React.useState<LegacyDonutSegmentIds>([]);\n    const [selectedItem, setSelectedItem] = React.useState<LegacyDonutSegmentIds>([]);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const rect = ref.current.parentElement?.getBoundingClientRect();\n\n            if (rect) {\n                const width = rect.width / 2;\n                const max: number = rect.height < width ? rect.height : width;\n                setRadius(max / 2);\n            }\n        }\n    }, [ref.current]);\n\n    const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n    const data: LegacyDonutChartSegmentProps[] = React.Children.map(children, child => ({\n        id: child.props.id,\n        color: child.props.color,\n        label: child.props.label,\n        value: child.props.value,\n    }));\n\n    const total = data.reduce((accum, entry) => accum + entry.value, 0);\n\n    const handleLegendClick = (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]): void => {\n        const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n        // Using slice to avoid mutation of the react state 'selectedItem'\n        const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n        if (onClick && !isCurrentSegmentActive) {\n            onClick(entry);\n        }\n\n        setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n    };\n    const handlePieClick = React.useCallback(\n        (pieId: string | undefined) => {\n            if (onClick && pieId !== undefined) {\n                const pieProps = data.find(item => item.id === pieId);\n\n                onClick(pieProps as LegacyDonutChartSegmentProps);\n            }\n        },\n        [onClick, data]\n    );\n\n    const activeShapeColor = React.useMemo(() => {\n        const getSegmentColor = (item: LegacyDonutSegmentIds) =>\n            item.reduce<Record<string, string>>((colors, itemId) => {\n                const visibleHoveredItem = data.find(dataItem => dataItem.id === itemId);\n\n                if (visibleHoveredItem) {\n                    colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n                }\n\n                return colors;\n            }, {});\n\n        const hoveredSegmentColor = getSegmentColor(hoveredItem);\n        const selectedSegmentColor = getSegmentColor(selectedItem);\n\n        return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;\n    }, [hoveredItem, selectedItem]);\n\n    if (ref.current && !radius) {\n        return null;\n    }\n\n    const getActiveIndex = () => {\n        if (hoveredItem.length > 0) {\n            return hoveredItem.map(itemId => data.findIndex(element => element.id === itemId));\n        }\n\n        return selectedItem.map(selectedItemId => data.findIndex(element => element.id === selectedItemId));\n    };\n\n    const content = () => {\n        const elements = React.Children.toArray(children).filter(\n            (child): child is React.ReactElement<LegacyDonutChartSegmentProps> =>\n                React.isValidElement<LegacyDonutChartSegmentProps>(child)\n        );\n\n        return elements.length > 0 ? (\n            elements.map((child, index) => {\n                return (\n                    <Recharts.Cell\n                        key={`cell-${index}`}\n                        name={child.props.label}\n                        fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n                    />\n                );\n            })\n        ) : (\n            <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n        );\n    };\n\n    return (\n        <div className=\"relative flex h-full w-full\" ref={ref}>\n            <CenteredLabel radius={radius} label={label} total={total} formatter={formatter} />\n            <Recharts.PieChart data={data} height={diameter} width={diameter} style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n                <Recharts.Pie\n                    isAnimationActive={false}\n                    activeIndex={getActiveIndex()}\n                    activeShape={<ActiveShape pieColors={activeShapeColor} onClick={handlePieClick} />}\n                    data={data.length > 0 ? data : []}\n                    dataKey=\"value\"\n                    innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n                    onMouseEnter={(segment: LegacyDonutChartSegmentProps) => data.length > 0 && setHoveredItem([segment.id])}\n                    onMouseLeave={() => setHoveredItem([])}\n                    outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n                    paddingAngle={2.5}\n                    stroke=\"0\"\n                    // Prevents the pie group element from being focusable\n                    rootTabIndex={-1}>\n                    {content()}\n                </Recharts.Pie>\n            </Recharts.PieChart>\n            <Legend\n                data={data}\n                onClick={handleLegendClick}\n                total={total}\n                setHoveredItem={setHoveredItem}\n                label={label}\n                hoveredItem={hoveredItem}\n                selectedItem={selectedItem}\n                formatter={formatter}\n            />\n        </div>\n    );\n};\n\nLegacyDonutChart.Segment = Segment;\n"],"names":["LegacyDonutChart","Recharts","getThemeColor","CenteredLabel","ActiveShape","HOVER_DONUT_WIDTH","DONUT_WIDTH","Legend"],"mappings":"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"}
+{"version":3,"file":"LegacyDonutChart.cjs","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport { Color, getThemeColor } from '../../utils/color';\nimport { Legend } from './Legend';\nimport { CenteredLabel } from './CenteredLabel';\nimport { ActiveShape } from './ActiveShape';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: LegacyDonutChartSegmentProps) => null;\n\nexport type LegacyDonutChartSegmentProps = {\n    color: Color;\n    id: string;\n    label: string;\n    value: number;\n};\n\nexport type LegacyDonutSegmentIds = string[];\n\nexport type LegacyDonutChartProps = {\n    children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];\n    formatter?: (value: number) => string;\n    onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n    label: string;\n};\n\nexport const LegacyDonutChart = function LegacyDonutChart({ children, formatter, onClick, label }: LegacyDonutChartProps) {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [radius, setRadius] = React.useState<number>(0);\n\n    const [hoveredItem, setHoveredItem] = React.useState<LegacyDonutSegmentIds>([]);\n    const [selectedItem, setSelectedItem] = React.useState<LegacyDonutSegmentIds>([]);\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const rect = ref.current.parentElement?.getBoundingClientRect();\n\n            if (rect) {\n                const width = rect.width / 2;\n                const max: number = rect.height < width ? rect.height : width;\n                setRadius(max / 2);\n            }\n        }\n    }, [ref.current]);\n\n    const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n    const data: LegacyDonutChartSegmentProps[] = React.Children.map(children, child => ({\n        id: child.props.id,\n        color: child.props.color,\n        label: child.props.label,\n        value: child.props.value,\n    }));\n\n    const total = data.reduce((accum, entry) => accum + entry.value, 0);\n\n    const handleLegendClick = (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]): void => {\n        const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n        // Using slice to avoid mutation of the react state 'selectedItem'\n        const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n        if (onClick && !isCurrentSegmentActive) {\n            onClick(entry);\n        }\n\n        setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n    };\n    const handlePieClick = React.useCallback(\n        (pieId: string | undefined) => {\n            if (onClick && pieId !== undefined) {\n                const pieProps = data.find(item => item.id === pieId);\n\n                onClick(pieProps as LegacyDonutChartSegmentProps);\n            }\n        },\n        [onClick, data]\n    );\n\n    const activeShapeColor = React.useMemo(() => {\n        const getSegmentColor = (item: LegacyDonutSegmentIds) =>\n            item.reduce<Record<string, string>>((colors, itemId) => {\n                const visibleHoveredItem = data.find(dataItem => dataItem.id === itemId);\n\n                if (visibleHoveredItem) {\n                    colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n                }\n\n                return colors;\n            }, {});\n\n        const hoveredSegmentColor = getSegmentColor(hoveredItem);\n        const selectedSegmentColor = getSegmentColor(selectedItem);\n\n        return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;\n    }, [hoveredItem, selectedItem]);\n\n    if (ref.current && !radius) {\n        return null;\n    }\n\n    const getActiveIndex = () => {\n        if (hoveredItem.length > 0) {\n            return hoveredItem.map(itemId => data.findIndex(element => element.id === itemId));\n        }\n\n        return selectedItem.map(selectedItemId => data.findIndex(element => element.id === selectedItemId));\n    };\n\n    const content = () => {\n        const elements = React.Children.toArray(children).filter(\n            (child): child is React.ReactElement<LegacyDonutChartSegmentProps> =>\n                React.isValidElement<LegacyDonutChartSegmentProps>(child)\n        );\n\n        return elements.length > 0 ? (\n            elements.map((child, index) => {\n                return (\n                    <Recharts.Cell\n                        key={`cell-${index}`}\n                        name={child.props.label}\n                        fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n                    />\n                );\n            })\n        ) : (\n            <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n        );\n    };\n\n    return (\n        <div className=\"relative flex h-full w-full\" ref={ref}>\n            <CenteredLabel radius={radius} label={label} total={total} formatter={formatter} />\n            <Recharts.PieChart data={data} height={diameter} width={diameter} style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n                <Recharts.Pie\n                    isAnimationActive={false}\n                    activeIndex={getActiveIndex()}\n                    activeShape={<ActiveShape pieColors={activeShapeColor} onClick={handlePieClick} />}\n                    data={data.length > 0 ? data : []}\n                    dataKey=\"value\"\n                    innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n                    onMouseEnter={(segment: LegacyDonutChartSegmentProps) => data.length > 0 && setHoveredItem([segment.id])}\n                    onMouseLeave={() => setHoveredItem([])}\n                    outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n                    paddingAngle={2.5}\n                    stroke=\"0\"\n                    // Prevents the pie group element from being focusable\n                    rootTabIndex={-1}>\n                    {content()}\n                </Recharts.Pie>\n            </Recharts.PieChart>\n            <Legend\n                data={data}\n                onClick={handleLegendClick}\n                total={total}\n                setHoveredItem={setHoveredItem}\n                label={label}\n                hoveredItem={hoveredItem}\n                selectedItem={selectedItem}\n                formatter={formatter}\n            />\n        </div>\n    );\n};\n\nLegacyDonutChart.Segment = Segment;\n"],"names":["LegacyDonutChart","Recharts","getThemeColor","CenteredLabel","ActiveShape","HOVER_DONUT_WIDTH","DONUT_WIDTH","Legend"],"mappings":"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"}

package/dist/charts/components/LegacyDonut/LegacyDonutChart.js

@@ -12,9 +12,8 @@ const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onCli
   const [hoveredItem, setHoveredItem] = React__default.useState([]);
   const [selectedItem, setSelectedItem] = React__default.useState([]);
   React__default.useEffect(() => {
-    var _a;
     if (ref.current) {
-      const rect = (_a = ref.current.parentElement) == null ? void 0 : _a.getBoundingClientRect();
+      const rect = ref.current.parentElement?.getBoundingClientRect();
       if (rect) {
         const width = rect.width / 2;
         const max = rect.height < width ? rect.height : width;