@economic/taco 14.0.0-tanstack-virtual-update.0 → 14.0.1-EC-83852-types.0

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

@@ -6,114 +6,125 @@ import { CenteredLabel } from "./CenteredLabel.js";
 import { Legend } from "./Legend.js";
 import { HOVER_DONUT_WIDTH, DONUT_WIDTH } from "./util.js";
 const Segment = (_) => null;
-const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onClick, label }) {
-  const ref = React__default.useRef(null);
-  const [radius, setRadius] = React__default.useState(0);
-  const [hoveredItem, setHoveredItem] = React__default.useState([]);
-  const [selectedItem, setSelectedItem] = React__default.useState([]);
-  React__default.useEffect(() => {
-    if (ref.current) {
-      const rect = ref.current.parentElement?.getBoundingClientRect();
-      if (rect) {
-        const width = rect.width / 2;
-        const max = rect.height < width ? rect.height : width;
-        setRadius(max / 2);
-      }
-    }
-  }, [ref.current]);
-  const diameter = radius * 2;
-  const data = React__default.Children.map(children, (child) => ({
-    id: child.props.id,
-    color: child.props.color,
-    label: child.props.label,
-    value: child.props.value
-  }));
-  const total = data.reduce((accum, entry) => accum + entry.value, 0);
-  const handleLegendClick = (entry) => {
-    const nextSelectedItem = Array.isArray(entry) ? entry.map((entryItem) => entryItem.id) : [entry.id];
-    const isCurrentSegmentActive = selectedItem.slice().sort().join(",") === nextSelectedItem.sort().join(",");
-    if (onClick && !isCurrentSegmentActive) {
-      onClick(entry);
-    }
-    setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
-  };
-  const handlePieClick = React__default.useCallback(
-    (pieId) => {
-      if (onClick && pieId !== void 0) {
-        const pieProps = data.find((item) => item.id === pieId);
-        onClick(pieProps);
+const LegacyDonutChart = Object.assign(
+  function LegacyDonutChart2({ children, formatter, onClick, label }) {
+    const ref = React__default.useRef(null);
+    const [radius, setRadius] = React__default.useState(0);
+    const [hoveredItem, setHoveredItem] = React__default.useState([]);
+    const [selectedItem, setSelectedItem] = React__default.useState([]);
+    React__default.useEffect(() => {
+      if (ref.current) {
+        const rect = ref.current.parentElement?.getBoundingClientRect();
+        if (rect) {
+          const width = rect.width / 2;
+          const max = rect.height < width ? rect.height : width;
+          setRadius(max / 2);
+        }
       }
-    },
-    [onClick, data]
-  );
-  const activeShapeColor = React__default.useMemo(() => {
-    const getSegmentColor = (item) => item.reduce((colors, itemId) => {
-      const visibleHoveredItem = data.find((dataItem) => dataItem.id === itemId);
-      if (visibleHoveredItem) {
-        colors[visibleHoveredItem.id] = visibleHoveredItem.color;
+    }, [ref.current]);
+    const diameter = radius * 2;
+    const data = React__default.Children.map(children, (child) => ({
+      id: child.props.id,
+      color: child.props.color,
+      label: child.props.label,
+      value: child.props.value
+    }));
+    const total = data.reduce((accum, entry) => accum + entry.value, 0);
+    const handleLegendClick = (entry) => {
+      const nextSelectedItem = Array.isArray(entry) ? entry.map((entryItem) => entryItem.id) : [entry.id];
+      const isCurrentSegmentActive = selectedItem.slice().sort().join(",") === nextSelectedItem.sort().join(",");
+      if (onClick && !isCurrentSegmentActive) {
+        onClick(entry);
       }
-      return colors;
-    }, {});
-    const hoveredSegmentColor = getSegmentColor(hoveredItem);
-    const selectedSegmentColor = getSegmentColor(selectedItem);
-    return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;
-  }, [hoveredItem, selectedItem]);
-  if (ref.current && !radius) {
-    return null;
-  }
-  const getActiveIndex = () => {
-    if (hoveredItem.length > 0) {
-      return hoveredItem.map((itemId) => data.findIndex((element) => element.id === itemId));
-    }
-    return selectedItem.map((selectedItemId) => data.findIndex((element) => element.id === selectedItemId));
-  };
-  const content = () => {
-    const elements = React__default.Children.toArray(children).filter(
-      (child) => React__default.isValidElement(child)
+      setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
+    };
+    const handlePieClick = React__default.useCallback(
+      (pieId) => {
+        if (onClick && pieId !== void 0) {
+          const pieProps = data.find((item) => item.id === pieId);
+          onClick(pieProps);
+        }
+      },
+      [onClick, data]
     );
-    return elements.length > 0 ? elements.map((child, index) => {
-      return /* @__PURE__ */ React__default.createElement(
-        RechartsPrimitive.Cell,
-        {
-          key: `cell-${index}`,
-          name: child.props.label,
-          fill: getThemeColor(child.props.color) ?? getThemeColor("blue-300")
+    const activeShapeColor = React__default.useMemo(() => {
+      const getSegmentColor = (item) => item.reduce((colors, itemId) => {
+        const visibleHoveredItem = data.find((dataItem) => dataItem.id === itemId);
+        if (visibleHoveredItem) {
+          colors[visibleHoveredItem.id] = visibleHoveredItem.color;
         }
-      );
-    }) : /* @__PURE__ */ React__default.createElement(RechartsPrimitive.Cell, { key: "empty-chart", name: "", fill: getThemeColor("grey-200") });
-  };
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative flex h-full w-full", ref }, /* @__PURE__ */ React__default.createElement(CenteredLabel, { radius, label, total, formatter }), /* @__PURE__ */ React__default.createElement(RechartsPrimitive.PieChart, { data, height: diameter, width: diameter, style: { transform: "rotate(90deg) scale(-1,1)" } }, /* @__PURE__ */ React__default.createElement(
-    RechartsPrimitive.Pie,
-    {
-      isAnimationActive: false,
-      activeIndex: getActiveIndex(),
-      activeShape: /* @__PURE__ */ React__default.createElement(ActiveShape, { pieColors: activeShapeColor, onClick: handlePieClick }),
-      data: data.length > 0 ? data : [],
-      dataKey: "value",
-      innerRadius: radius - HOVER_DONUT_WIDTH - DONUT_WIDTH,
-      onMouseEnter: (segment) => data.length > 0 && setHoveredItem([segment.id]),
-      onMouseLeave: () => setHoveredItem([]),
-      outerRadius: radius - HOVER_DONUT_WIDTH,
-      paddingAngle: 2.5,
-      stroke: "0",
-      rootTabIndex: -1
-    },
-    content()
-  )), /* @__PURE__ */ React__default.createElement(
-    Legend,
-    {
-      data,
-      onClick: handleLegendClick,
-      total,
-      setHoveredItem,
-      label,
-      hoveredItem,
-      selectedItem,
-      formatter
+        return colors;
+      }, {});
+      const hoveredSegmentColor = getSegmentColor(hoveredItem);
+      const selectedSegmentColor = getSegmentColor(selectedItem);
+      return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;
+    }, [hoveredItem, selectedItem]);
+    if (ref.current && !radius) {
+      return null;
     }
-  ));
-};
-LegacyDonutChart.Segment = Segment;
+    const getActiveIndex = () => {
+      if (hoveredItem.length > 0) {
+        return hoveredItem.map((itemId) => data.findIndex((element) => element.id === itemId));
+      }
+      return selectedItem.map((selectedItemId) => data.findIndex((element) => element.id === selectedItemId));
+    };
+    const content = () => {
+      const elements = React__default.Children.toArray(children).filter(
+        (child) => React__default.isValidElement(child)
+      );
+      return elements.length > 0 ? elements.map((child, index) => {
+        return /* @__PURE__ */ React__default.createElement(
+          RechartsPrimitive.Cell,
+          {
+            key: `cell-${index}`,
+            name: child.props.label,
+            fill: getThemeColor(child.props.color) ?? getThemeColor("blue-300")
+          }
+        );
+      }) : /* @__PURE__ */ React__default.createElement(RechartsPrimitive.Cell, { key: "empty-chart", name: "", fill: getThemeColor("grey-200") });
+    };
+    return /* @__PURE__ */ React__default.createElement("div", { className: "relative flex h-full w-full", ref }, /* @__PURE__ */ React__default.createElement(CenteredLabel, { radius, label, total, formatter }), /* @__PURE__ */ React__default.createElement(
+      RechartsPrimitive.PieChart,
+      {
+        data,
+        height: diameter,
+        width: diameter,
+        style: { transform: "rotate(90deg) scale(-1,1)" }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        RechartsPrimitive.Pie,
+        {
+          isAnimationActive: false,
+          activeIndex: getActiveIndex(),
+          activeShape: /* @__PURE__ */ React__default.createElement(ActiveShape, { pieColors: activeShapeColor, onClick: handlePieClick }),
+          data: data.length > 0 ? data : [],
+          dataKey: "value",
+          innerRadius: radius - HOVER_DONUT_WIDTH - DONUT_WIDTH,
+          onMouseEnter: (segment) => data.length > 0 && setHoveredItem([segment.id]),
+          onMouseLeave: () => setHoveredItem([]),
+          outerRadius: radius - HOVER_DONUT_WIDTH,
+          paddingAngle: 2.5,
+          stroke: "0",
+          rootTabIndex: -1
+        },
+        content()
+      )
+    ), /* @__PURE__ */ React__default.createElement(
+      Legend,
+      {
+        data,
+        onClick: handleLegendClick,
+        total,
+        setHoveredItem,
+        label,
+        hoveredItem,
+        selectedItem,
+        formatter
+      }
+    ));
+  },
+  { Segment }
+);
 export {
   LegacyDonutChart
 };

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

@@ -1 +1 @@
-{"version":3,"file":"LegacyDonutChart.js","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\nimport type { Color } from '@/charts/utils/color';\nimport { getThemeColor } from '@/charts/utils/color';\n\nimport { ActiveShape } from './ActiveShape';\nimport { CenteredLabel } from './CenteredLabel';\nimport { Legend } from './Legend';\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","React","Recharts"],"mappings":"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"}
+{"version":3,"file":"LegacyDonutChart.js","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\nimport type { Color } from '@/charts/utils/color';\nimport { getThemeColor } from '@/charts/utils/color';\n\nimport { ActiveShape } from './ActiveShape';\nimport { CenteredLabel } from './CenteredLabel';\nimport { Legend } from './Legend';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: LegacyDonutChartSegmentProps) => null;\n\n/**\n * @deprecated\n */\nexport type LegacyDonutChartSegmentProps = {\n    color: Color;\n    id: string;\n    label: string;\n    value: number;\n};\n\n/**\n * @deprecated\n */\nexport type LegacyDonutSegmentIds = string[];\n\n/**\n * @deprecated\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\n/**\n * @deprecated Use DonutChart component instead\n */\nexport const LegacyDonutChart = Object.assign(\n    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\n                    data={data}\n                    height={diameter}\n                    width={diameter}\n                    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    { Segment }\n);\n"],"names":["LegacyDonutChart","React","Recharts"],"mappings":"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"}

package/dist/charts/components/Legend.cjs

@@ -50,7 +50,7 @@ function Legend(props) {
           onMouseEnter: () => handleMouseEnter(item, index),
           onMouseLeave: () => handleMouseLeave()
         },
-        /* @__PURE__ */ React.createElement("span", { className, style }, item.isHidden ? null : /* @__PURE__ */ React.createElement(Icon.Icon, { name: "tick-bold", className: "!h-full !w-full text-white" })),
+        /* @__PURE__ */ React.createElement("span", { className, style }, !item.isHidden ? /* @__PURE__ */ React.createElement(Icon.Icon, { name: "tick-bold", className: "!h-full !w-full text-white" }) : null),
         item.label
       );
     }))

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.cjs","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors, getThemeColor } from '@/charts/utils/color';\nimport { Icon, LegacyButton, OverflowGroup } from '@/components';\n\nimport type { ChartChildProps } from './types';\n\nexport type LegendProps<TData extends object> = {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n};\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <LegacyButton appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </LegacyButton>\n    );\n\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"flex items-center rounded px-1 !text-xs hover:bg-gray-100 focus-visible:yt-focus\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {item.isHidden ? null : <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["color","colors","getThemeColor","LegacyButton","OverflowGroup","Icon"],"mappings":";;;;;;;AAcA,SAAS,oBAAoBA,SAA2B;AACpD,QAAM,YAAY,OAAO,KAAKC,YAAM,EAAE,KAAK,CAAA,SAAQA,MAAAA,OAAO,IAAI,MAAMD,OAAK;AAEzE,MAAI,CAAC,WAAW;AACZ,WAAO;AAAA,EACX;AAEA,SAAOE,MAAAA,cAAc,UAAU,QAAQ,SAAS,MAAM,CAAC;AAC3D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEhE,QAAM,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IACJ;AAEA,gBAAY,KAAK;AAAA,EACrB;AACA,QAAM,mBAAmB,MAAM,YAAY,MAAS;AAEpD,QAAM,cAAc,CAAC,SAAiC;AAElD,QAAI,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IACzB;AAEA,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEA,QAAM,aAAa,CAAC,mBAChB,sBAAA,cAACC,OAAAA,gBAAa,YAAW,eAAc,WAAU,sDAAA,GAC5C,cACL;AAGJ;AAAA;AAAA,IAEI,sBAAA,cAACC,+BAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,YAAM,YAAY;AAClB,YAAM,QAA6B,CAAA;AACnC,YAAM,mBAAmB,oBAAoB,KAAK,KAAK;AAEvD,UAAI,CAAC,KAAK,UAAU;AAChB,cAAM,kBAAkB,KAAK;AAC7B,cAAM,cAAc;AAAA,MACxB;AAEA,aACI,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAC3B,WAAU;AAAA,UACV,SAAS,CAAA,UAAS;AACd,mBAAO,eAAA;AACP,wBAAY,IAAI;AAAA,UACpB;AAAA,UACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,UAChD,cAAc,MAAM,iBAAA;AAAA,QAAiB;AAAA,QACrC,sBAAA,cAAC,QAAA,EAAK,WAAsB,MAAA,GACvB,KAAK,WAAW,OAAO,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAK,aAAY,WAAU,8BAA6B,CAC1F;AAAA,QACC,KAAK;AAAA,MAAA;AAAA,IAGlB,CAAC,CACL;AAAA;AAER;;"}
+{"version":3,"file":"Legend.cjs","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors, getThemeColor } from '@/charts/utils/color';\nimport { Icon, LegacyButton, OverflowGroup } from '@/components';\n\nimport type { ChartChildProps } from './types';\n\nexport type LegendProps<TData extends object> = {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n};\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <LegacyButton appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </LegacyButton>\n    );\n\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"flex items-center rounded px-1 !text-xs hover:bg-gray-100 focus-visible:yt-focus\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {!item.isHidden ? <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" /> : null}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["color","colors","getThemeColor","LegacyButton","OverflowGroup","Icon"],"mappings":";;;;;;;AAcA,SAAS,oBAAoBA,SAA2B;AACpD,QAAM,YAAY,OAAO,KAAKC,YAAM,EAAE,KAAK,CAAA,SAAQA,MAAAA,OAAO,IAAI,MAAMD,OAAK;AAEzE,MAAI,CAAC,WAAW;AACZ,WAAO;AAAA,EACX;AAEA,SAAOE,MAAAA,cAAc,UAAU,QAAQ,SAAS,MAAM,CAAC;AAC3D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEhE,QAAM,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IACJ;AAEA,gBAAY,KAAK;AAAA,EACrB;AACA,QAAM,mBAAmB,MAAM,YAAY,MAAS;AAEpD,QAAM,cAAc,CAAC,SAAiC;AAElD,QAAI,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IACzB;AAEA,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEA,QAAM,aAAa,CAAC,mBAChB,sBAAA,cAACC,OAAAA,gBAAa,YAAW,eAAc,WAAU,sDAAA,GAC5C,cACL;AAGJ;AAAA;AAAA,IAEI,sBAAA,cAACC,+BAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,YAAM,YAAY;AAClB,YAAM,QAA6B,CAAA;AACnC,YAAM,mBAAmB,oBAAoB,KAAK,KAAK;AAEvD,UAAI,CAAC,KAAK,UAAU;AAChB,cAAM,kBAAkB,KAAK;AAC7B,cAAM,cAAc;AAAA,MACxB;AAEA,aACI,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAC3B,WAAU;AAAA,UACV,SAAS,CAAA,UAAS;AACd,mBAAO,eAAA;AACP,wBAAY,IAAI;AAAA,UACpB;AAAA,UACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,UAChD,cAAc,MAAM,iBAAA;AAAA,QAAiB;AAAA,QACrC,sBAAA,cAAC,QAAA,EAAK,WAAsB,MAAA,GACvB,CAAC,KAAK,WAAW,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAK,aAAY,WAAU,6BAAA,CAA6B,IAAK,IACzF;AAAA,QACC,KAAK;AAAA,MAAA;AAAA,IAGlB,CAAC,CACL;AAAA;AAER;;"}

package/dist/charts/components/Legend.js

@@ -48,7 +48,7 @@ function Legend(props) {
           onMouseEnter: () => handleMouseEnter(item, index),
           onMouseLeave: () => handleMouseLeave()
         },
-        /* @__PURE__ */ React__default.createElement("span", { className, style }, item.isHidden ? null : /* @__PURE__ */ React__default.createElement(Icon, { name: "tick-bold", className: "!h-full !w-full text-white" })),
+        /* @__PURE__ */ React__default.createElement("span", { className, style }, !item.isHidden ? /* @__PURE__ */ React__default.createElement(Icon, { name: "tick-bold", className: "!h-full !w-full text-white" }) : null),
         item.label
       );
     }))

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors, getThemeColor } from '@/charts/utils/color';\nimport { Icon, LegacyButton, OverflowGroup } from '@/components';\n\nimport type { ChartChildProps } from './types';\n\nexport type LegendProps<TData extends object> = {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n};\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <LegacyButton appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </LegacyButton>\n    );\n\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"flex items-center rounded px-1 !text-xs hover:bg-gray-100 focus-visible:yt-focus\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {item.isHidden ? null : <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["React"],"mappings":";;;;;AAcA,SAAS,oBAAoB,OAA2B;AACpD,QAAM,YAAY,OAAO,KAAK,MAAM,EAAE,KAAK,CAAA,SAAQ,OAAO,IAAI,MAAM,KAAK;AAEzE,MAAI,CAAC,WAAW;AACZ,WAAO;AAAA,EACX;AAEA,SAAO,cAAc,UAAU,QAAQ,SAAS,MAAM,CAAC;AAC3D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEhE,QAAM,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IACJ;AAEA,gBAAY,KAAK;AAAA,EACrB;AACA,QAAM,mBAAmB,MAAM,YAAY,MAAS;AAEpD,QAAM,cAAc,CAAC,SAAiC;AAElD,QAAI,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IACzB;AAEA,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEA,QAAM,aAAa,CAAC,mBAChBA,+BAAA,cAAC,gBAAa,YAAW,eAAc,WAAU,sDAAA,GAC5C,cACL;AAGJ;AAAA;AAAA,IAEIA,+BAAA,cAAC,iBAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,YAAM,YAAY;AAClB,YAAM,QAA6B,CAAA;AACnC,YAAM,mBAAmB,oBAAoB,KAAK,KAAK;AAEvD,UAAI,CAAC,KAAK,UAAU;AAChB,cAAM,kBAAkB,KAAK;AAC7B,cAAM,cAAc;AAAA,MACxB;AAEA,aACIA,+BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAC3B,WAAU;AAAA,UACV,SAAS,CAAA,UAAS;AACd,mBAAO,eAAA;AACP,wBAAY,IAAI;AAAA,UACpB;AAAA,UACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,UAChD,cAAc,MAAM,iBAAA;AAAA,QAAiB;AAAA,QACrCA,+BAAA,cAAC,QAAA,EAAK,WAAsB,MAAA,GACvB,KAAK,WAAW,OAAOA,+BAAA,cAAC,MAAA,EAAK,MAAK,aAAY,WAAU,8BAA6B,CAC1F;AAAA,QACC,KAAK;AAAA,MAAA;AAAA,IAGlB,CAAC,CACL;AAAA;AAER;"}
+{"version":3,"file":"Legend.js","sources":["../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors, getThemeColor } from '@/charts/utils/color';\nimport { Icon, LegacyButton, OverflowGroup } from '@/components';\n\nimport type { ChartChildProps } from './types';\n\nexport type LegendProps<TData extends object> = {\n    items: ChartChildProps<TData>[];\n    hoverIndex: number | undefined;\n    onHover: (index: number | undefined) => void;\n    onToggle: (name: keyof TData) => void;\n};\n\nfunction getDarkerThemeColor(color: string | undefined) {\n    const colorName = Object.keys(colors).find(name => colors[name] === color);\n\n    if (!colorName) {\n        return undefined;\n    }\n\n    return getThemeColor(colorName.replace(/-\\d+$/, '-300'));\n}\n\nexport function Legend<TData extends object>(props: LegendProps<TData>) {\n    const { items, onHover: handleHover, onToggle: handleToggle } = props;\n\n    const handleMouseEnter = (item: ChartChildProps<TData>, index: number) => {\n        if (item.isHidden) {\n            return;\n        }\n\n        handleHover(index);\n    };\n    const handleMouseLeave = () => handleHover(undefined);\n\n    const handleClick = (item: ChartChildProps<TData>) => {\n        // remove hover if hiding the item\n        if (!item.isHidden) {\n            handleHover(undefined);\n        }\n\n        handleToggle(item.dataKey);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <LegacyButton appearance=\"transparent\" className=\"!h-5 !min-h-[1.25rem] !px-1.5 text-xs text-gray-700\">\n            {moreButtonText}\n        </LegacyButton>\n    );\n\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <OverflowGroup className=\"mt-3 w-full gap-x-1\" moreButton={moreButton}>\n            {items.map((item, index) => {\n                const className = 'mr-1 flex h-3.5 w-3.5 rounded-sm border';\n                const style: React.CSSProperties = {};\n                const darkerThemeColor = getDarkerThemeColor(item.color);\n\n                if (!item.isHidden) {\n                    style.backgroundColor = item.color;\n                    style.borderColor = darkerThemeColor;\n                }\n\n                return (\n                    <button\n                        key={`${item.label}_${index}`}\n                        className=\"flex items-center rounded px-1 !text-xs hover:bg-gray-100 focus-visible:yt-focus\"\n                        onClick={event => {\n                            event?.preventDefault();\n                            handleClick(item);\n                        }}\n                        onMouseEnter={() => handleMouseEnter(item, index)}\n                        onMouseLeave={() => handleMouseLeave()}>\n                        <span className={className} style={style}>\n                            {!item.isHidden ? <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" /> : null}\n                        </span>\n                        {item.label}\n                    </button>\n                );\n            })}\n        </OverflowGroup>\n    );\n}\n"],"names":["React"],"mappings":";;;;;AAcA,SAAS,oBAAoB,OAA2B;AACpD,QAAM,YAAY,OAAO,KAAK,MAAM,EAAE,KAAK,CAAA,SAAQ,OAAO,IAAI,MAAM,KAAK;AAEzE,MAAI,CAAC,WAAW;AACZ,WAAO;AAAA,EACX;AAEA,SAAO,cAAc,UAAU,QAAQ,SAAS,MAAM,CAAC;AAC3D;AAEO,SAAS,OAA6B,OAA2B;AACpE,QAAM,EAAE,OAAO,SAAS,aAAa,UAAU,iBAAiB;AAEhE,QAAM,mBAAmB,CAAC,MAA8B,UAAkB;AACtE,QAAI,KAAK,UAAU;AACf;AAAA,IACJ;AAEA,gBAAY,KAAK;AAAA,EACrB;AACA,QAAM,mBAAmB,MAAM,YAAY,MAAS;AAEpD,QAAM,cAAc,CAAC,SAAiC;AAElD,QAAI,CAAC,KAAK,UAAU;AAChB,kBAAY,MAAS;AAAA,IACzB;AAEA,iBAAa,KAAK,OAAO;AAAA,EAC7B;AAEA,QAAM,aAAa,CAAC,mBAChBA,+BAAA,cAAC,gBAAa,YAAW,eAAc,WAAU,sDAAA,GAC5C,cACL;AAGJ;AAAA;AAAA,IAEIA,+BAAA,cAAC,iBAAc,WAAU,uBAAsB,cAC1C,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,YAAM,YAAY;AAClB,YAAM,QAA6B,CAAA;AACnC,YAAM,mBAAmB,oBAAoB,KAAK,KAAK;AAEvD,UAAI,CAAC,KAAK,UAAU;AAChB,cAAM,kBAAkB,KAAK;AAC7B,cAAM,cAAc;AAAA,MACxB;AAEA,aACIA,+BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAC3B,WAAU;AAAA,UACV,SAAS,CAAA,UAAS;AACd,mBAAO,eAAA;AACP,wBAAY,IAAI;AAAA,UACpB;AAAA,UACA,cAAc,MAAM,iBAAiB,MAAM,KAAK;AAAA,UAChD,cAAc,MAAM,iBAAA;AAAA,QAAiB;AAAA,QACrCA,+BAAA,cAAC,QAAA,EAAK,WAAsB,MAAA,GACvB,CAAC,KAAK,WAAWA,+BAAA,cAAC,MAAA,EAAK,MAAK,aAAY,WAAU,6BAAA,CAA6B,IAAK,IACzF;AAAA,QACC,KAAK;AAAA,MAAA;AAAA,IAGlB,CAAC,CACL;AAAA;AAER;"}

package/dist/charts/components/Line/LineChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.cjs","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<LineChartProps<TData>>(props);\n\n    const className = cn('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-line\">\n                <RechartsPrimitive.LineChart\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                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: any[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAA2C,KAAK;AAEpD,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,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,IACT;AAAA,IACA,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,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACG,sBAAA,cAACC,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAe,WAAoB,OAAO,OAAkB,cAAc;AAClG,SAAO,OAAO,IAAI,CAAA,8CACbH,6BAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;;"}
+{"version":3,"file":"LineChart.cjs","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { type ChartShape, useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, LineChartProps<TData>>(props);\n\n    const className = cn('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-line\">\n                <RechartsPrimitive.LineChart\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                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: ChartShape[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,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,IACT;AAAA,IACA,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,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACG,sBAAA,cAACC,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAsB,WAAoB,OAAO,OAAkB,cAAc;AACzG,SAAO,OAAO,IAAI,CAAA,8CACbH,6BAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;;"}

package/dist/charts/components/Line/LineChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { ChartChildProps, CartesianChartProps, CurveType } from '../types';
+import { ChartShape } from '../useChartData';
 export type LineChartProps<TData extends object> = {
     /** Show dots for each data point
      * @default false
@@ -17,5 +18,5 @@ export declare namespace LineChart {
 /**
  * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.
  */
-export declare const renderLines: (shapes: any[], showDots?: boolean, type?: CurveType) => React.JSX.Element[];
+export declare const renderLines: (shapes: ChartShape[], showDots?: boolean, type?: CurveType) => React.JSX.Element[];
 export type LineChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;

package/dist/charts/components/Line/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<LineChartProps<TData>>(props);\n\n    const className = cn('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-line\">\n                <RechartsPrimitive.LineChart\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                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: any[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["React"],"mappings":";;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAA2C,KAAK;AAEpD,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,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,IACT;AAAA,IACAA,+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,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAe,WAAoB,OAAO,OAAkB,cAAc;AAClG,SAAO,OAAO,IAAI,CAAA,uDACb,kBAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}
+{"version":3,"file":"LineChart.js","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { type ChartShape, useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, LineChartProps<TData>>(props);\n\n    const className = cn('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-line\">\n                <RechartsPrimitive.LineChart\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                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: ChartShape[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["React"],"mappings":";;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,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,IACT;AAAA,IACAA,+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,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAsB,WAAoB,OAAO,OAAkB,cAAc;AACzG,SAAO,OAAO,IAAI,CAAA,uDACb,kBAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}

package/dist/charts/components/Pie/PieChart.cjs

@@ -40,10 +40,10 @@ function Segment(_) {
 PieChart.Segment = Segment;
 const RADIAN = Math.PI / 180;
 function Label(props) {
-  const { cx, cy, midAngle, name, innerRadius, outerRadius } = props;
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.7;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  const { cx = 0, cy = 0, midAngle = 0, name, innerRadius = 0, outerRadius = 0 } = props;
+  const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.7;
+  const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);
+  const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);
   return /* @__PURE__ */ React.createElement(
     "text",
     {

package/dist/charts/components/Pie/PieChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.cjs","sources":["../../../../src/charts/components/Pie/PieChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, PolarChartProps } from '../types';\n\nimport { usePieChart } from './util';\n\nexport type PieChartProps = {\n    /** Show labels inside each segment\n     * @default false\n     */\n    showLabels?: boolean;\n} & PolarChartProps;\n\nexport function PieChart<TData extends object>(props: PieChartProps) {\n    const { children, formatter, showLabels = false, showLegend = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart<TData>(children, {\n        formatter,\n        unit,\n    });\n    const className = cn('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-pie\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} label={showLabels ? <Label /> : undefined} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\nexport type PieChartSegmentProps<TData extends object> = {\n    value: number;\n} & Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'>;\n\nfunction Segment<TData extends object>(_: PieChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nPieChart.Segment = Segment;\n\nconst RADIAN = Math.PI / 180;\n\nfunction Label(props: any) {\n    const { cx, cy, midAngle, name, innerRadius, outerRadius } = props;\n    const radius = innerRadius + (outerRadius - innerRadius) * 0.7;\n    const x = cx + radius * Math.cos(-midAngle * RADIAN);\n    const y = cy + radius * Math.sin(-midAngle * RADIAN);\n\n    return (\n        <text\n            x={x}\n            y={y}\n            fontSize={12}\n            fill={getInverseThemeColor(props.payload?.payload?.color ?? '')}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\">\n            {name}\n        </text>\n    );\n}\n"],"names":["usePieChart","ChartWrapper","RechartsPrimitive","Tooltip","Legend","getInverseThemeColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,SAAS,SAA+B,OAAsB;AACjE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,aAAa,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC3G,QAAM,EAAE,UAAU,WAAW,OAAO,aAAa,gBAAgB,WAAA,IAAeA,KAAAA,YAAmB,UAAU;AAAA,IACzG;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,YAAY,GAAG,iBAAiB,WAAW,SAAS;AAE1D,SACI,sBAAA,cAAC,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,GAChC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,aAAY,YAAY,UAAA,GAClF,sBAAA,cAACC,6BAAkB,UAAlB,MACG,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,GAAI,GACtE,sBAAA,cAACD,6BAAkB,KAAlB,EAAuB,GAAG,UAAU,OAAO,aAAa,sBAAA,cAAC,OAAA,IAAM,IAAK,OAAA,CAAW,CACpF,CACJ,GACC,aACG,sBAAA,cAACE,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAMA,SAAS,QAA8B,GAA0D;AAC7F,SAAO;AACX;AACA,SAAS,UAAU;AAEnB,MAAM,SAAS,KAAK,KAAK;AAEzB,SAAS,MAAM,OAAY;AACvB,QAAM,EAAE,IAAI,IAAI,UAAU,MAAM,aAAa,gBAAgB;AAC7D,QAAM,SAAS,eAAe,cAAc,eAAe;AAC3D,QAAM,IAAI,KAAK,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AACnD,QAAM,IAAI,KAAK,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAEnD,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAMC,MAAAA,qBAAqB,MAAM,SAAS,SAAS,SAAS,EAAE;AAAA,MAC9D,YAAW;AAAA,MACX,kBAAiB;AAAA,IAAA;AAAA,IAChB;AAAA,EAAA;AAGb;;"}
+{"version":3,"file":"PieChart.cjs","sources":["../../../../src/charts/components/Pie/PieChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieLabelRenderProps } from 'recharts/types/polar/Pie';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, PolarChartProps } from '../types';\n\nimport { usePieChart } from './util';\n\nexport type PieChartProps = {\n    /** Show labels inside each segment\n     * @default false\n     */\n    showLabels?: boolean;\n} & PolarChartProps;\n\nexport function PieChart<TData extends object>(props: PieChartProps) {\n    const { children, formatter, showLabels = false, showLegend = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart<TData>(children, {\n        formatter,\n        unit,\n    });\n    const className = cn('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-pie\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} label={showLabels ? <Label /> : undefined} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\nexport type PieChartSegmentProps<TData extends object> = {\n    value: number;\n} & Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'>;\n\nfunction Segment<TData extends object>(_: PieChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nPieChart.Segment = Segment;\n\nconst RADIAN = Math.PI / 180;\n\n// Recharts injects the render props when it clones this element, so they're all optional here.\nfunction Label(props: Partial<PieLabelRenderProps>) {\n    const { cx = 0, cy = 0, midAngle = 0, name, innerRadius = 0, outerRadius = 0 } = props;\n    const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.7;\n    const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);\n    const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);\n\n    return (\n        <text\n            x={x}\n            y={y}\n            fontSize={12}\n            fill={getInverseThemeColor(props.payload?.payload?.color ?? '')}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\">\n            {name}\n        </text>\n    );\n}\n"],"names":["usePieChart","ChartWrapper","RechartsPrimitive","Tooltip","Legend","getInverseThemeColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,SAAS,SAA+B,OAAsB;AACjE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,aAAa,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC3G,QAAM,EAAE,UAAU,WAAW,OAAO,aAAa,gBAAgB,WAAA,IAAeA,KAAAA,YAAmB,UAAU;AAAA,IACzG;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,YAAY,GAAG,iBAAiB,WAAW,SAAS;AAE1D,SACI,sBAAA,cAAC,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,GAChC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,aAAY,YAAY,UAAA,GAClF,sBAAA,cAACC,6BAAkB,UAAlB,MACG,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,GAAI,GACtE,sBAAA,cAACD,6BAAkB,KAAlB,EAAuB,GAAG,UAAU,OAAO,aAAa,sBAAA,cAAC,OAAA,IAAM,IAAK,OAAA,CAAW,CACpF,CACJ,GACC,aACG,sBAAA,cAACE,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAMA,SAAS,QAA8B,GAA0D;AAC7F,SAAO;AACX;AACA,SAAS,UAAU;AAEnB,MAAM,SAAS,KAAK,KAAK;AAGzB,SAAS,MAAM,OAAqC;AAChD,QAAM,EAAE,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,MAAM,cAAc,GAAG,cAAc,EAAA,IAAM;AACjF,QAAM,SAAS,OAAO,WAAW,KAAK,OAAO,WAAW,IAAI,OAAO,WAAW,KAAK;AACnF,QAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAC3D,QAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAE3D,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAMC,MAAAA,qBAAqB,MAAM,SAAS,SAAS,SAAS,EAAE;AAAA,MAC9D,YAAW;AAAA,MACX,kBAAiB;AAAA,IAAA;AAAA,IAChB;AAAA,EAAA;AAGb;;"}

package/dist/charts/components/Pie/PieChart.js

@@ -21,10 +21,10 @@ function Segment(_) {
 PieChart.Segment = Segment;
 const RADIAN = Math.PI / 180;
 function Label(props) {
-  const { cx, cy, midAngle, name, innerRadius, outerRadius } = props;
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.7;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  const { cx = 0, cy = 0, midAngle = 0, name, innerRadius = 0, outerRadius = 0 } = props;
+  const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.7;
+  const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);
+  const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);
   return /* @__PURE__ */ React__default.createElement(
     "text",
     {

package/dist/charts/components/Pie/PieChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.js","sources":["../../../../src/charts/components/Pie/PieChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, PolarChartProps } from '../types';\n\nimport { usePieChart } from './util';\n\nexport type PieChartProps = {\n    /** Show labels inside each segment\n     * @default false\n     */\n    showLabels?: boolean;\n} & PolarChartProps;\n\nexport function PieChart<TData extends object>(props: PieChartProps) {\n    const { children, formatter, showLabels = false, showLegend = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart<TData>(children, {\n        formatter,\n        unit,\n    });\n    const className = cn('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-pie\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} label={showLabels ? <Label /> : undefined} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\nexport type PieChartSegmentProps<TData extends object> = {\n    value: number;\n} & Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'>;\n\nfunction Segment<TData extends object>(_: PieChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nPieChart.Segment = Segment;\n\nconst RADIAN = Math.PI / 180;\n\nfunction Label(props: any) {\n    const { cx, cy, midAngle, name, innerRadius, outerRadius } = props;\n    const radius = innerRadius + (outerRadius - innerRadius) * 0.7;\n    const x = cx + radius * Math.cos(-midAngle * RADIAN);\n    const y = cy + radius * Math.sin(-midAngle * RADIAN);\n\n    return (\n        <text\n            x={x}\n            y={y}\n            fontSize={12}\n            fill={getInverseThemeColor(props.payload?.payload?.color ?? '')}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\">\n            {name}\n        </text>\n    );\n}\n"],"names":["React"],"mappings":";;;;;;;;AAoBO,SAAS,SAA+B,OAAsB;AACjE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,aAAa,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC3G,QAAM,EAAE,UAAU,WAAW,OAAO,aAAa,gBAAgB,WAAA,IAAe,YAAmB,UAAU;AAAA,IACzG;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,YAAY,GAAG,iBAAiB,WAAW,SAAS;AAE1D,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,GAChCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,aAAY,YAAY,UAAA,GAClFA,+BAAA,cAAC,kBAAkB,UAAlB,MACGA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,GAAI,GACtEA,+BAAA,cAAC,kBAAkB,KAAlB,EAAuB,GAAG,UAAU,OAAO,aAAaA,+BAAA,cAAC,OAAA,IAAM,IAAK,OAAA,CAAW,CACpF,CACJ,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAMA,SAAS,QAA8B,GAA0D;AAC7F,SAAO;AACX;AACA,SAAS,UAAU;AAEnB,MAAM,SAAS,KAAK,KAAK;AAEzB,SAAS,MAAM,OAAY;AACvB,QAAM,EAAE,IAAI,IAAI,UAAU,MAAM,aAAa,gBAAgB;AAC7D,QAAM,SAAS,eAAe,cAAc,eAAe;AAC3D,QAAM,IAAI,KAAK,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AACnD,QAAM,IAAI,KAAK,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAEnD,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAM,qBAAqB,MAAM,SAAS,SAAS,SAAS,EAAE;AAAA,MAC9D,YAAW;AAAA,MACX,kBAAiB;AAAA,IAAA;AAAA,IAChB;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"PieChart.js","sources":["../../../../src/charts/components/Pie/PieChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieLabelRenderProps } from 'recharts/types/polar/Pie';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, PolarChartProps } from '../types';\n\nimport { usePieChart } from './util';\n\nexport type PieChartProps = {\n    /** Show labels inside each segment\n     * @default false\n     */\n    showLabels?: boolean;\n} & PolarChartProps;\n\nexport function PieChart<TData extends object>(props: PieChartProps) {\n    const { children, formatter, showLabels = false, showLegend = false, tooltipTitle, unit, ...attributes } = props;\n    const { pieProps, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart<TData>(children, {\n        formatter,\n        unit,\n    });\n    const className = cn('aspect-square', attributes.className);\n\n    return (\n        <div className=\"relative\" data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className={className} data-taco=\"chart-pie\" onSetWidth={setRadius}>\n                <RechartsPrimitive.PieChart>\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.Pie {...pieProps} label={showLabels ? <Label /> : undefined} />\n                </RechartsPrimitive.PieChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\nexport type PieChartSegmentProps<TData extends object> = {\n    value: number;\n} & Omit<ChartChildProps<TData>, 'dataKey' | 'formatter' | 'unit'>;\n\nfunction Segment<TData extends object>(_: PieChartSegmentProps<TData>): React.JSX.Element | null {\n    return null;\n}\nPieChart.Segment = Segment;\n\nconst RADIAN = Math.PI / 180;\n\n// Recharts injects the render props when it clones this element, so they're all optional here.\nfunction Label(props: Partial<PieLabelRenderProps>) {\n    const { cx = 0, cy = 0, midAngle = 0, name, innerRadius = 0, outerRadius = 0 } = props;\n    const radius = Number(innerRadius) + (Number(outerRadius) - Number(innerRadius)) * 0.7;\n    const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);\n    const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);\n\n    return (\n        <text\n            x={x}\n            y={y}\n            fontSize={12}\n            fill={getInverseThemeColor(props.payload?.payload?.color ?? '')}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\">\n            {name}\n        </text>\n    );\n}\n"],"names":["React"],"mappings":";;;;;;;;AAqBO,SAAS,SAA+B,OAAsB;AACjE,QAAM,EAAE,UAAU,WAAW,aAAa,OAAO,aAAa,OAAO,cAAc,MAAM,GAAG,WAAA,IAAe;AAC3G,QAAM,EAAE,UAAU,WAAW,OAAO,aAAa,gBAAgB,WAAA,IAAe,YAAmB,UAAU;AAAA,IACzG;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,YAAY,GAAG,iBAAiB,WAAW,SAAS;AAE1D,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAU,YAAW,aAAU,gBAAA,GAChCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAsB,aAAU,aAAY,YAAY,UAAA,GAClFA,+BAAA,cAAC,kBAAkB,UAAlB,MACGA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,GAAI,GACtEA,+BAAA,cAAC,kBAAkB,KAAlB,EAAuB,GAAG,UAAU,OAAO,aAAaA,+BAAA,cAAC,OAAA,IAAM,IAAK,OAAA,CAAW,CACpF,CACJ,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAMA,SAAS,QAA8B,GAA0D;AAC7F,SAAO;AACX;AACA,SAAS,UAAU;AAEnB,MAAM,SAAS,KAAK,KAAK;AAGzB,SAAS,MAAM,OAAqC;AAChD,QAAM,EAAE,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,MAAM,cAAc,GAAG,cAAc,EAAA,IAAM;AACjF,QAAM,SAAS,OAAO,WAAW,KAAK,OAAO,WAAW,IAAI,OAAO,WAAW,KAAK;AACnF,QAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAC3D,QAAM,IAAI,OAAO,EAAE,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW,MAAM;AAE3D,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAM,qBAAqB,MAAM,SAAS,SAAS,SAAS,EAAE;AAAA,MAC9D,YAAW;AAAA,MACX,kBAAiB;AAAA,IAAA;AAAA,IAChB;AAAA,EAAA;AAGb;"}

package/dist/charts/components/Pie/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../../src/charts/components/Pie/util.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport type { useChartOptions } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst PIE_ACTIVE_WIDTH = 10;\nconst PIE_ACTIVE_WIDTH_OFFSET = 2;\n\nexport function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem } = useChart<TData>(children, options);\n    const [radius, _setRadius] = React.useState<number>(0);\n\n    function setRadius(width: number) {\n        _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);\n    }\n\n    const pieProps = {\n        activeIndex,\n        activeShape: (props: any) => <ActiveShape {...props} />,\n        children: shapes.map(shape => <RechartsPrimitive.Cell key={shape.dataKey} color={shape.color} fill={shape.fill} />),\n        // data props\n        data: items.filter(item => !item.isHidden),\n        dataKey: 'value',\n        nameKey: 'label',\n        // style props\n        isAnimationActive: false,\n        startAngle: 90,\n        endAngle: -270,\n        stroke: '0',\n        labelLine: false,\n        outerRadius: radius,\n    };\n\n    return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem, shapes };\n}\n\nconst PIE_CHART_HOVER = 10;\nconst PIE_CHART_HOVER_OFFSET = 2;\n\ntype ActiveShapeProps = {\n    pieColors: Record<string, string>;\n} & PieSectorDataItem;\n\nfunction ActiveShape(props: ActiveShapeProps) {\n    const { outerRadius = 0, ...attributes } = props;\n\n    return (\n        <>\n            <RechartsPrimitive.Sector {...attributes} outerRadius={outerRadius} />\n            <RechartsPrimitive.Sector\n                {...attributes}\n                innerRadius={outerRadius + PIE_CHART_HOVER_OFFSET}\n                outerRadius={outerRadius + PIE_CHART_HOVER}\n                opacity={0.4}\n            />\n        </>\n    );\n}\n"],"names":["useChart","RechartsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,mBAAmB;AACzB,MAAM,0BAA0B;AAEzB,SAAS,YAAkC,UAA2B,SAA2B;AACpG,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,eAAeA,aAAAA,SAAgB,UAAU,OAAO;AACrH,QAAM,CAAC,QAAQ,UAAU,IAAI,MAAM,SAAiB,CAAC;AAErD,WAAS,UAAU,OAAe;AAC9B,gBAAY,QAAQ,KAAK,mBAAmB,4BAA4B,CAAC;AAAA,EAC7E;AAEA,QAAM,WAAW;AAAA,IACb;AAAA,IACA,aAAa,CAAC,UAAe,sBAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACrD,UAAU,OAAO,IAAI,CAAA,UAAS,sBAAA,cAACC,6BAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAS,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA,IAElH,MAAM,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ;AAAA,IACzC,SAAS;AAAA,IACT,SAAS;AAAA;AAAA,IAET,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,EAAA;AAGjB,SAAO,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,YAAY,OAAA;AAC3G;AAEA,MAAM,kBAAkB;AACxB,MAAM,yBAAyB;AAM/B,SAAS,YAAY,OAAyB;AAC1C,QAAM,EAAE,cAAc,GAAG,GAAG,eAAe;AAE3C,SACI,sBAAA,cAAA,MAAA,UAAA,0CACKA,6BAAkB,QAAlB,EAA0B,GAAG,YAAY,aAA0B,GACpE,sBAAA;AAAA,IAACA,6BAAkB;AAAA,IAAlB;AAAA,MACI,GAAG;AAAA,MACJ,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;;"}
+{"version":3,"file":"util.cjs","sources":["../../../../src/charts/components/Pie/util.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport type { useChartOptions } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst PIE_ACTIVE_WIDTH = 10;\nconst PIE_ACTIVE_WIDTH_OFFSET = 2;\n\nexport function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem } = useChart<TData>(children, options);\n    const [radius, _setRadius] = React.useState<number>(0);\n\n    function setRadius(width: number) {\n        _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);\n    }\n\n    const pieProps = {\n        activeIndex,\n        activeShape: (props: PieSectorDataItem) => <ActiveShape {...props} />,\n        children: shapes.map(shape => <RechartsPrimitive.Cell key={shape.dataKey} color={shape.color} fill={shape.fill} />),\n        // data props\n        data: items.filter(item => !item.isHidden),\n        dataKey: 'value',\n        nameKey: 'label',\n        // style props\n        isAnimationActive: false,\n        startAngle: 90,\n        endAngle: -270,\n        stroke: '0',\n        labelLine: false,\n        outerRadius: radius,\n    };\n\n    return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem, shapes };\n}\n\nconst PIE_CHART_HOVER = 10;\nconst PIE_CHART_HOVER_OFFSET = 2;\n\nfunction ActiveShape(props: PieSectorDataItem) {\n    const { outerRadius = 0, ...attributes } = props;\n\n    return (\n        <>\n            <RechartsPrimitive.Sector {...attributes} outerRadius={outerRadius} />\n            <RechartsPrimitive.Sector\n                {...attributes}\n                innerRadius={outerRadius + PIE_CHART_HOVER_OFFSET}\n                outerRadius={outerRadius + PIE_CHART_HOVER}\n                opacity={0.4}\n            />\n        </>\n    );\n}\n"],"names":["useChart","RechartsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,mBAAmB;AACzB,MAAM,0BAA0B;AAEzB,SAAS,YAAkC,UAA2B,SAA2B;AACpG,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,eAAeA,aAAAA,SAAgB,UAAU,OAAO;AACrH,QAAM,CAAC,QAAQ,UAAU,IAAI,MAAM,SAAiB,CAAC;AAErD,WAAS,UAAU,OAAe;AAC9B,gBAAY,QAAQ,KAAK,mBAAmB,4BAA4B,CAAC;AAAA,EAC7E;AAEA,QAAM,WAAW;AAAA,IACb;AAAA,IACA,aAAa,CAAC,UAA6B,sBAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACnE,UAAU,OAAO,IAAI,CAAA,UAAS,sBAAA,cAACC,6BAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAS,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA,IAElH,MAAM,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ;AAAA,IACzC,SAAS;AAAA,IACT,SAAS;AAAA;AAAA,IAET,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,EAAA;AAGjB,SAAO,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,YAAY,OAAA;AAC3G;AAEA,MAAM,kBAAkB;AACxB,MAAM,yBAAyB;AAE/B,SAAS,YAAY,OAA0B;AAC3C,QAAM,EAAE,cAAc,GAAG,GAAG,eAAe;AAE3C,SACI,sBAAA,cAAA,MAAA,UAAA,0CACKA,6BAAkB,QAAlB,EAA0B,GAAG,YAAY,aAA0B,GACpE,sBAAA;AAAA,IAACA,6BAAkB;AAAA,IAAlB;AAAA,MACI,GAAG;AAAA,MACJ,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;;"}

package/dist/charts/components/Pie/util.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
+import { PieSectorDataItem } from 'recharts/types/polar/Pie';
 import { useChartOptions } from '../useChartData';
 export declare function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions): {
     pieProps: {
         activeIndex: number | undefined;
-        activeShape: (props: any) => React.JSX.Element;
+        activeShape: (props: PieSectorDataItem) => React.JSX.Element;
         children: React.JSX.Element[];
         data: import('../types').ChartChildProps<TData>[];
         dataKey: string;

package/dist/charts/components/Pie/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/charts/components/Pie/util.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport type { useChartOptions } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst PIE_ACTIVE_WIDTH = 10;\nconst PIE_ACTIVE_WIDTH_OFFSET = 2;\n\nexport function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem } = useChart<TData>(children, options);\n    const [radius, _setRadius] = React.useState<number>(0);\n\n    function setRadius(width: number) {\n        _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);\n    }\n\n    const pieProps = {\n        activeIndex,\n        activeShape: (props: any) => <ActiveShape {...props} />,\n        children: shapes.map(shape => <RechartsPrimitive.Cell key={shape.dataKey} color={shape.color} fill={shape.fill} />),\n        // data props\n        data: items.filter(item => !item.isHidden),\n        dataKey: 'value',\n        nameKey: 'label',\n        // style props\n        isAnimationActive: false,\n        startAngle: 90,\n        endAngle: -270,\n        stroke: '0',\n        labelLine: false,\n        outerRadius: radius,\n    };\n\n    return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem, shapes };\n}\n\nconst PIE_CHART_HOVER = 10;\nconst PIE_CHART_HOVER_OFFSET = 2;\n\ntype ActiveShapeProps = {\n    pieColors: Record<string, string>;\n} & PieSectorDataItem;\n\nfunction ActiveShape(props: ActiveShapeProps) {\n    const { outerRadius = 0, ...attributes } = props;\n\n    return (\n        <>\n            <RechartsPrimitive.Sector {...attributes} outerRadius={outerRadius} />\n            <RechartsPrimitive.Sector\n                {...attributes}\n                innerRadius={outerRadius + PIE_CHART_HOVER_OFFSET}\n                outerRadius={outerRadius + PIE_CHART_HOVER}\n                opacity={0.4}\n            />\n        </>\n    );\n}\n"],"names":["React"],"mappings":";;;AAOA,MAAM,mBAAmB;AACzB,MAAM,0BAA0B;AAEzB,SAAS,YAAkC,UAA2B,SAA2B;AACpG,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,eAAe,SAAgB,UAAU,OAAO;AACrH,QAAM,CAAC,QAAQ,UAAU,IAAIA,eAAM,SAAiB,CAAC;AAErD,WAAS,UAAU,OAAe;AAC9B,gBAAY,QAAQ,KAAK,mBAAmB,4BAA4B,CAAC;AAAA,EAC7E;AAEA,QAAM,WAAW;AAAA,IACb;AAAA,IACA,aAAa,CAAC,UAAeA,+BAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACrD,UAAU,OAAO,IAAI,CAAA,UAASA,+BAAA,cAAC,kBAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAS,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA,IAElH,MAAM,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ;AAAA,IACzC,SAAS;AAAA,IACT,SAAS;AAAA;AAAA,IAET,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,EAAA;AAGjB,SAAO,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,YAAY,OAAA;AAC3G;AAEA,MAAM,kBAAkB;AACxB,MAAM,yBAAyB;AAM/B,SAAS,YAAY,OAAyB;AAC1C,QAAM,EAAE,cAAc,GAAG,GAAG,eAAe;AAE3C,SACIA,+BAAA,cAAAA,eAAA,UAAA,mDACK,kBAAkB,QAAlB,EAA0B,GAAG,YAAY,aAA0B,GACpEA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACI,GAAG;AAAA,MACJ,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;"}
+{"version":3,"file":"util.js","sources":["../../../../src/charts/components/Pie/util.tsx"],"sourcesContent":["import React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { PieSectorDataItem } from 'recharts/types/polar/Pie';\n\nimport type { useChartOptions } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst PIE_ACTIVE_WIDTH = 10;\nconst PIE_ACTIVE_WIDTH_OFFSET = 2;\n\nexport function usePieChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem } = useChart<TData>(children, options);\n    const [radius, _setRadius] = React.useState<number>(0);\n\n    function setRadius(width: number) {\n        _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);\n    }\n\n    const pieProps = {\n        activeIndex,\n        activeShape: (props: PieSectorDataItem) => <ActiveShape {...props} />,\n        children: shapes.map(shape => <RechartsPrimitive.Cell key={shape.dataKey} color={shape.color} fill={shape.fill} />),\n        // data props\n        data: items.filter(item => !item.isHidden),\n        dataKey: 'value',\n        nameKey: 'label',\n        // style props\n        isAnimationActive: false,\n        startAngle: 90,\n        endAngle: -270,\n        stroke: '0',\n        labelLine: false,\n        outerRadius: radius,\n    };\n\n    return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, globalFormatter, toggleItem, shapes };\n}\n\nconst PIE_CHART_HOVER = 10;\nconst PIE_CHART_HOVER_OFFSET = 2;\n\nfunction ActiveShape(props: PieSectorDataItem) {\n    const { outerRadius = 0, ...attributes } = props;\n\n    return (\n        <>\n            <RechartsPrimitive.Sector {...attributes} outerRadius={outerRadius} />\n            <RechartsPrimitive.Sector\n                {...attributes}\n                innerRadius={outerRadius + PIE_CHART_HOVER_OFFSET}\n                outerRadius={outerRadius + PIE_CHART_HOVER}\n                opacity={0.4}\n            />\n        </>\n    );\n}\n"],"names":["React"],"mappings":";;;AAOA,MAAM,mBAAmB;AACzB,MAAM,0BAA0B;AAEzB,SAAS,YAAkC,UAA2B,SAA2B;AACpG,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,eAAe,SAAgB,UAAU,OAAO;AACrH,QAAM,CAAC,QAAQ,UAAU,IAAIA,eAAM,SAAiB,CAAC;AAErD,WAAS,UAAU,OAAe;AAC9B,gBAAY,QAAQ,KAAK,mBAAmB,4BAA4B,CAAC;AAAA,EAC7E;AAEA,QAAM,WAAW;AAAA,IACb;AAAA,IACA,aAAa,CAAC,UAA6BA,+BAAA,cAAC,aAAA,EAAa,GAAG,OAAO;AAAA,IACnE,UAAU,OAAO,IAAI,CAAA,UAASA,+BAAA,cAAC,kBAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAS,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,CAAE;AAAA;AAAA,IAElH,MAAM,MAAM,OAAO,CAAA,SAAQ,CAAC,KAAK,QAAQ;AAAA,IACzC,SAAS;AAAA,IACT,SAAS;AAAA;AAAA,IAET,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,EAAA;AAGjB,SAAO,EAAE,UAAU,QAAQ,WAAW,OAAO,aAAa,gBAAgB,iBAAiB,YAAY,OAAA;AAC3G;AAEA,MAAM,kBAAkB;AACxB,MAAM,yBAAyB;AAE/B,SAAS,YAAY,OAA0B;AAC3C,QAAM,EAAE,cAAc,GAAG,GAAG,eAAe;AAE3C,SACIA,+BAAA,cAAAA,eAAA,UAAA,mDACK,kBAAkB,QAAlB,EAA0B,GAAG,YAAY,aAA0B,GACpEA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACI,GAAG;AAAA,MACJ,aAAa,cAAc;AAAA,MAC3B,aAAa,cAAc;AAAA,MAC3B,SAAS;AAAA,IAAA;AAAA,EAAA,CAEjB;AAER;"}

package/dist/charts/components/types.d.ts

@@ -1,6 +1,7 @@
 import { Payload } from 'recharts/types/component/DefaultLegendContent';
 import { ScaleType } from 'recharts/types/util/types';
 import { Color } from '../utils/color';
+export type { ChartShape } from './useChartData';
 export type ActiveChartItems<TType> = Record<keyof TType & string, boolean>;
 export type PayloadType<TType> = Payload & {
     dataKey: keyof TType & string;
@@ -11,7 +12,7 @@ export type LegacyChartChildProps = {
     label: string;
 };
 export type ChartValueFormatter = (value: number) => string | React.JSX.Element;
-export type TickFormatter = (value: any) => string;
+export type TickFormatter<TValue = any> = (value: TValue) => string;
 export type CurveType = 'natural' | 'linear' | 'step';
 export type ChartProps = {
     /** Show a legend below the chart, hidden by default