@yamada-ui/charts 2.0.0-next-20240706062355 → 2.0.0-next-20240713062626

package/dist/index.mjs

@@ -1,15 +1,16 @@
 "use client"
 import {
   DonutChart
-} from "./chunk-P4MMHTAP.mjs";
+} from "./chunk-VVR3DSUX.mjs";
 import {
   LineChart
 } from "./chunk-KPKLW25H.mjs";
 import "./chunk-6L73M52L.mjs";
 import {
   PieChart
-} from "./chunk-F2RBOLDY.mjs";
-import "./chunk-YGKNNA34.mjs";
+} from "./chunk-XORRW2KT.mjs";
+import "./chunk-ELXW3EQE.mjs";
+import "./chunk-CPXE3PV4.mjs";
 import {
   RadarChart
 } from "./chunk-CCFQC3T6.mjs";

package/dist/pie-chart-label.d.mts

@@ -0,0 +1,40 @@
+import { HTMLUIProps, CSSUIObject } from '@yamada-ui/core';
+import { Dict } from '@yamada-ui/utils';
+
+type PieChartLabelProps = {
+    className?: string;
+    cx?: number;
+    cy?: number;
+    midAngle?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    middleRadius?: number;
+    percent?: number;
+    value?: number;
+    labelOffset?: number;
+    isParcent?: boolean;
+    labelProps?: HTMLUIProps<"text">;
+    valueFormatter?: (value: number) => string;
+    styles: Dict<CSSUIObject>;
+};
+declare const pieChartLabel: (props: PieChartLabelProps) => React.ReactNode;
+type Point = {
+    x: number;
+    y: number;
+};
+type PieChartLabelLineProps = {
+    className?: string;
+    cx?: number;
+    cy?: number;
+    innerRadius?: number;
+    midAngle?: number;
+    middleRadius?: number;
+    outerRadius?: number;
+    points?: Array<Point>;
+    labelOffset?: number;
+    labelLineProps?: HTMLUIProps<"path">;
+    styles: Dict<CSSUIObject>;
+};
+declare const pieChartLabelLine: (props: PieChartLabelLineProps) => React.ReactElement<SVGElement>;
+
+export { type PieChartLabelLineProps, type PieChartLabelProps, pieChartLabel, pieChartLabelLine };

package/dist/pie-chart-label.d.ts

@@ -0,0 +1,40 @@
+import { HTMLUIProps, CSSUIObject } from '@yamada-ui/core';
+import { Dict } from '@yamada-ui/utils';
+
+type PieChartLabelProps = {
+    className?: string;
+    cx?: number;
+    cy?: number;
+    midAngle?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    middleRadius?: number;
+    percent?: number;
+    value?: number;
+    labelOffset?: number;
+    isParcent?: boolean;
+    labelProps?: HTMLUIProps<"text">;
+    valueFormatter?: (value: number) => string;
+    styles: Dict<CSSUIObject>;
+};
+declare const pieChartLabel: (props: PieChartLabelProps) => React.ReactNode;
+type Point = {
+    x: number;
+    y: number;
+};
+type PieChartLabelLineProps = {
+    className?: string;
+    cx?: number;
+    cy?: number;
+    innerRadius?: number;
+    midAngle?: number;
+    middleRadius?: number;
+    outerRadius?: number;
+    points?: Array<Point>;
+    labelOffset?: number;
+    labelLineProps?: HTMLUIProps<"path">;
+    styles: Dict<CSSUIObject>;
+};
+declare const pieChartLabelLine: (props: PieChartLabelLineProps) => React.ReactElement<SVGElement>;
+
+export { type PieChartLabelLineProps, type PieChartLabelProps, pieChartLabel, pieChartLabelLine };

package/dist/pie-chart-label.js

@@ -0,0 +1,108 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pie-chart-label.tsx
+var pie_chart_label_exports = {};
+__export(pie_chart_label_exports, {
+  pieChartLabel: () => pieChartLabel,
+  pieChartLabelLine: () => pieChartLabelLine
+});
+module.exports = __toCommonJS(pie_chart_label_exports);
+var import_core = require("@yamada-ui/core");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var RADIAN = Math.PI / 180;
+var DEFAULT_LABEL_OFFSET = 22;
+var pieChartLabel = ({
+  className: cellClassName,
+  cx: cxProp = 0,
+  cy: cyProp = 0,
+  midAngle = 0,
+  innerRadius = 0,
+  outerRadius = 0,
+  middleRadius = 0,
+  percent = 0,
+  value = 0,
+  labelOffset: labelOffsetProp,
+  isParcent,
+  labelProps,
+  valueFormatter,
+  styles
+}) => {
+  const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
+  const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
+  const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
+  const textAnchor = x > cxProp ? "start" : x < cxProp ? "end" : "middle";
+  const displayLabel = () => {
+    if (isParcent) {
+      return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
+    } else if (!(0, import_utils.isUndefined)(valueFormatter)) {
+      return valueFormatter(value);
+    } else {
+      return value;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.text,
+    {
+      className: (0, import_utils.cx)(cellClassName, "ui-chart__label"),
+      x,
+      y,
+      textAnchor,
+      dominantBaseline: "central",
+      __css: styles,
+      ...labelProps,
+      children: displayLabel()
+    }
+  );
+};
+var pieChartLabelLine = ({
+  className: cellClassName,
+  cx: cxProp = 0,
+  cy: cyProp = 0,
+  innerRadius = 0,
+  midAngle = 0,
+  middleRadius = 0,
+  outerRadius = 0,
+  points = [{ x: 0, y: 0 }],
+  labelOffset: labelOffsetProp,
+  labelLineProps,
+  styles
+}) => {
+  const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
+  const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
+  const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
+  const d = `M ${points[0].x} ${points[0].y} L ${x} ${y}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.path,
+    {
+      className: (0, import_utils.cx)(cellClassName, "ui-chart__label-line"),
+      d,
+      __css: styles,
+      ...labelLineProps
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pieChartLabel,
+  pieChartLabelLine
+});
+//# sourceMappingURL=pie-chart-label.js.map

package/dist/pie-chart-label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pie-chart-label.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { cx, isUndefined } from \"@yamada-ui/utils\"\n\nconst RADIAN = Math.PI / 180\nconst DEFAULT_LABEL_OFFSET = 22\n\nexport type PieChartLabelProps = {\n  className?: string\n  cx?: number\n  cy?: number\n  midAngle?: number\n  innerRadius?: number\n  outerRadius?: number\n  middleRadius?: number\n  percent?: number\n  value?: number\n  labelOffset?: number\n  isParcent?: boolean\n  labelProps?: HTMLUIProps<\"text\">\n  valueFormatter?: (value: number) => string\n  styles: Dict<CSSUIObject>\n}\n\nexport const pieChartLabel: (props: PieChartLabelProps) => React.ReactNode = ({\n  className: cellClassName,\n  cx: cxProp = 0,\n  cy: cyProp = 0,\n  midAngle = 0,\n  innerRadius = 0,\n  outerRadius = 0,\n  middleRadius = 0,\n  percent = 0,\n  value = 0,\n  labelOffset: labelOffsetProp,\n  isParcent,\n  labelProps,\n  valueFormatter,\n  styles,\n}) => {\n  const labelOffset =\n    labelOffsetProp ?? (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET\n\n  const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN)\n  const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN)\n\n  const textAnchor = x > cxProp ? \"start\" : x < cxProp ? \"end\" : \"middle\"\n  const displayLabel = () => {\n    if (isParcent) {\n      return (\n        parseFloat((percent * 100).toFixed(0)) > 0 &&\n        `${(percent * 100).toFixed(0)}%`\n      )\n    } else if (!isUndefined(valueFormatter)) {\n      return valueFormatter(value)\n    } else {\n      return value\n    }\n  }\n\n  return (\n    <ui.text\n      className={cx(cellClassName, \"ui-chart__label\")}\n      x={x}\n      y={y}\n      textAnchor={textAnchor}\n      dominantBaseline=\"central\"\n      __css={styles}\n      {...labelProps}\n    >\n      {displayLabel()}\n    </ui.text>\n  )\n}\n\ntype Point = { x: number; y: number }\n\nexport type PieChartLabelLineProps = {\n  className?: string\n  cx?: number\n  cy?: number\n  innerRadius?: number\n  midAngle?: number\n  middleRadius?: number\n  outerRadius?: number\n  points?: Array<Point>\n  labelOffset?: number\n  labelLineProps?: HTMLUIProps<\"path\">\n  styles: Dict<CSSUIObject>\n}\n\nexport const pieChartLabelLine: (\n  props: PieChartLabelLineProps,\n) => React.ReactElement<SVGElement> = ({\n  className: cellClassName,\n  cx: cxProp = 0,\n  cy: cyProp = 0,\n  innerRadius = 0,\n  midAngle = 0,\n  middleRadius = 0,\n  outerRadius = 0,\n  points = [{ x: 0, y: 0 }],\n  labelOffset: labelOffsetProp,\n  labelLineProps,\n  styles,\n}) => {\n  const labelOffset =\n    labelOffsetProp ?? (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET\n\n  const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN)\n  const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN)\n\n  const d: string = `M ${points[0].x} ${points[0].y} L ${x} ${y}`\n\n  return (\n    <ui.path\n      className={cx(cellClassName, \"ui-chart__label-line\")}\n      d={d}\n      __css={styles}\n      {...labelLineProps}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAmB;AAEnB,mBAAgC;AA2D5B;AAzDJ,IAAM,SAAS,KAAK,KAAK;AACzB,IAAM,uBAAuB;AAmBtB,IAAM,gBAAgE,CAAC;AAAA,EAC5E,WAAW;AAAA,EACX,IAAI,SAAS;AAAA,EACb,IAAI,SAAS;AAAA,EACb,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,cACJ,6CAAoB,cAAc,eAAe,MAAM;AAEzD,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAC7E,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAE7E,QAAM,aAAa,IAAI,SAAS,UAAU,IAAI,SAAS,QAAQ;AAC/D,QAAM,eAAe,MAAM;AACzB,QAAI,WAAW;AACb,aACE,YAAY,UAAU,KAAK,QAAQ,CAAC,CAAC,IAAI,KACzC,IAAI,UAAU,KAAK,QAAQ,CAAC,CAAC;AAAA,IAEjC,WAAW,KAAC,0BAAY,cAAc,GAAG;AACvC,aAAO,eAAe,KAAK;AAAA,IAC7B,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC,eAAW,iBAAG,eAAe,iBAAiB;AAAA,MAC9C;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAiB;AAAA,MACjB,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,uBAAa;AAAA;AAAA,EAChB;AAEJ;AAkBO,IAAM,oBAEyB,CAAC;AAAA,EACrC,WAAW;AAAA,EACX,IAAI,SAAS;AAAA,EACb,IAAI,SAAS;AAAA,EACb,cAAc;AAAA,EACd,WAAW;AAAA,EACX,eAAe;AAAA,EACf,cAAc;AAAA,EACd,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AAAA,EACxB,aAAa;AAAA,EACb;AAAA,EACA;AACF,MAAM;AACJ,QAAM,cACJ,6CAAoB,cAAc,eAAe,MAAM;AAEzD,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAC7E,QAAM,IAAI,UAAU,eAAe,eAAe,KAAK,IAAI,CAAC,WAAW,MAAM;AAE7E,QAAM,IAAY,KAAK,OAAO,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;AAE7D,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC,eAAW,iBAAG,eAAe,sBAAsB;AAAA,MACnD;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/pie-chart-label.mjs

@@ -0,0 +1,10 @@
+"use client"
+import {
+  pieChartLabel,
+  pieChartLabelLine
+} from "./chunk-CPXE3PV4.mjs";
+export {
+  pieChartLabel,
+  pieChartLabelLine
+};
+//# sourceMappingURL=pie-chart-label.mjs.map

package/dist/pie-chart-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/pie-chart.js

@@ -24,8 +24,8 @@ __export(pie_chart_exports, {
   PieChart: () => PieChart
 });
 module.exports = __toCommonJS(pie_chart_exports);
-var import_core7 = require("@yamada-ui/core");
-var import_utils8 = require("@yamada-ui/utils");
+var import_core8 = require("@yamada-ui/core");
+var import_utils9 = require("@yamada-ui/utils");
 var import_react5 = require("react");
 var import_recharts = require("recharts");
 
@@ -358,13 +358,94 @@ var useChartTooltip = ({
 };
 
 // src/use-pie-chart.ts
+var import_core7 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+var import_react4 = require("react");
+
+// src/pie-chart-label.tsx
 var import_core6 = require("@yamada-ui/core");
 var import_utils7 = require("@yamada-ui/utils");
-var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RADIAN = Math.PI / 180;
+var DEFAULT_LABEL_OFFSET = 22;
+var pieChartLabel = ({
+  className: cellClassName,
+  cx: cxProp = 0,
+  cy: cyProp = 0,
+  midAngle = 0,
+  innerRadius = 0,
+  outerRadius = 0,
+  middleRadius = 0,
+  percent = 0,
+  value = 0,
+  labelOffset: labelOffsetProp,
+  isParcent,
+  labelProps,
+  valueFormatter,
+  styles
+}) => {
+  const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
+  const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
+  const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
+  const textAnchor = x > cxProp ? "start" : x < cxProp ? "end" : "middle";
+  const displayLabel = () => {
+    if (isParcent) {
+      return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
+    } else if (!(0, import_utils7.isUndefined)(valueFormatter)) {
+      return valueFormatter(value);
+    } else {
+      return value;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core6.ui.text,
+    {
+      className: (0, import_utils7.cx)(cellClassName, "ui-chart__label"),
+      x,
+      y,
+      textAnchor,
+      dominantBaseline: "central",
+      __css: styles,
+      ...labelProps,
+      children: displayLabel()
+    }
+  );
+};
+var pieChartLabelLine = ({
+  className: cellClassName,
+  cx: cxProp = 0,
+  cy: cyProp = 0,
+  innerRadius = 0,
+  midAngle = 0,
+  middleRadius = 0,
+  outerRadius = 0,
+  points = [{ x: 0, y: 0 }],
+  labelOffset: labelOffsetProp,
+  labelLineProps,
+  styles
+}) => {
+  const labelOffset = labelOffsetProp != null ? labelOffsetProp : (outerRadius - innerRadius) * 0.5 + DEFAULT_LABEL_OFFSET;
+  const x = cxProp + (middleRadius + labelOffset) * Math.cos(-midAngle * RADIAN);
+  const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
+  const d = `M ${points[0].x} ${points[0].y} L ${x} ${y}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core6.ui.path,
+    {
+      className: (0, import_utils7.cx)(cellClassName, "ui-chart__label-line"),
+      d,
+      __css: styles,
+      ...labelLineProps
+    }
+  );
+};
+
+// src/use-pie-chart.ts
 var usePieChart = ({
   data,
   withLabels = false,
   withLabelLines = false,
+  labelOffset,
+  isParcent = false,
   strokeWidth = 1,
   fillOpacity = 1,
   innerRadius = "0%",
@@ -372,19 +453,20 @@ var usePieChart = ({
   paddingAngle = 0,
   startAngle = 90,
   endAngle = -270,
+  valueFormatter,
   styles,
   ...rest
 }) => {
   var _a, _b;
-  const { theme } = (0, import_core6.useTheme)();
+  const { theme } = (0, import_core7.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react4.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const { dimCell, ...computedCellProps } = (_a = rest.cellProps) != null ? _a : {};
   const {
     activeShape = {},
     inactiveShape = {},
-    label,
-    labelLine,
+    label: labelProps,
+    labelLine: labelLineProps,
     ...computedPieProps
   } = (_b = rest.pieProps) != null ? _b : {};
   const cellColors = (0, import_react4.useMemo)(
@@ -446,13 +528,27 @@ var usePieChart = ({
     )(theme, true),
     [inactiveShape, styles.inactiveShape, theme]
   );
-  const labelClassName = (0, import_react4.useMemo)(
-    () => getClassName({ ...styles.label, ...label })(theme),
-    [label, styles.label, theme]
+  const label = (0, import_react4.useCallback)(
+    (props) => pieChartLabel({
+      labelOffset,
+      isParcent,
+      labelProps,
+      valueFormatter,
+      styles: styles.label,
+      ...props
+    }),
+    [isParcent, labelOffset, labelProps, styles.label, valueFormatter]
   );
-  const labelLineClassName = (0, import_react4.useMemo)(
-    () => getClassName({ ...styles.labelLine, ...labelLine })(theme),
-    [labelLine, styles.labelLine, theme]
+  const labelLine = (0, import_react4.useCallback)(
+    (props) => {
+      return pieChartLabelLine({
+        labelOffset,
+        labelLineProps,
+        styles: styles.labelLine,
+        ...props
+      });
+    },
+    [labelLineProps, labelOffset, styles.labelLine]
   );
   const cellPropList = (0, import_react4.useMemo)(
     () => data.map((props, index) => {
@@ -487,21 +583,16 @@ var usePieChart = ({
   const getPieChartProps = (0, import_react4.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils7.cx)(className, chartClassName),
+      className: (0, import_utils8.cx)(className, chartClassName),
       ...props,
       ...chartProps
     }),
     [chartProps, chartClassName]
   );
   const getPieProps = (0, import_react4.useCallback)(
-    ({
-      className,
-      labelClassName: labelClassNameProp,
-      labelLineClassName: labelLineClassNameProp,
-      ...props
-    }, ref = null) => ({
+    ({ className, ...props }, ref = null) => ({
       ref,
-      className: (0, import_utils7.cx)(className, pieClassName),
+      className: (0, import_utils8.cx)(className, pieClassName),
       dataKey: "value",
       data,
       rootTabIndex: -1,
@@ -511,8 +602,8 @@ var usePieChart = ({
       startAngle,
       endAngle,
       isAnimationActive: false,
-      label: withLabels ? { className: (0, import_utils7.cx)(labelClassNameProp, labelClassName) } : false,
-      labelLine: withLabelLines ? { className: (0, import_utils7.cx)(labelLineClassNameProp, labelLineClassName) } : false,
+      label: withLabels ? label : false,
+      labelLine: withLabelLines ? labelLine : false,
       activeShape: activeShapeProps,
       inactiveShape: inactiveShapeProps,
       ...props,
@@ -527,9 +618,9 @@ var usePieChart = ({
       startAngle,
       endAngle,
       withLabels,
-      labelClassName,
+      label,
       withLabelLines,
-      labelLineClassName,
+      labelLine,
       activeShapeProps,
       inactiveShapeProps,
       pieProps
@@ -540,7 +631,7 @@ var usePieChart = ({
       const { className, color } = cellPropList[index];
       return {
         ref,
-        className: (0, import_utils7.cx)(classNameProp, className),
+        className: (0, import_utils8.cx)(classNameProp, className),
         fill: color,
         stroke: color,
         strokeWidth,
@@ -559,9 +650,9 @@ var usePieChart = ({
 };
 
 // src/pie-chart.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var PieChart = (0, import_core7.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core7.useMultiComponentStyle)("PieChart", props);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PieChart = (0, import_core8.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("PieChart", props);
   const {
     className,
     data,
@@ -583,10 +674,12 @@ var PieChart = (0, import_core7.forwardRef)((props, ref) => {
     endAngle,
     withLabels,
     withLabelLines,
+    labelOffset,
+    isParcent,
     strokeWidth,
     legendProps,
     ...rest
-  } = (0, import_core7.omitThemeProps)(mergedProps);
+  } = (0, import_core8.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -606,6 +699,9 @@ var PieChart = (0, import_core7.forwardRef)((props, ref) => {
     strokeWidth,
     withLabels,
     withLabelLines,
+    labelOffset,
+    isParcent,
+    valueFormatter,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -618,7 +714,7 @@ var PieChart = (0, import_core7.forwardRef)((props, ref) => {
     legendProps
   });
   const cells = (0, import_react5.useMemo)(
-    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_recharts.Cell,
       {
         ...getCellProps({ index, className: "ui-pie-chart__cell" })
@@ -627,38 +723,36 @@ var PieChart = (0, import_core7.forwardRef)((props, ref) => {
     )),
     [data, getCellProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_core7.ui.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_core8.ui.div,
     {
       ref,
-      className: (0, import_utils8.cx)("ui-pie-chart", className),
+      className: (0, import_utils9.cx)("ui-pie-chart", className),
       var: pieVars,
       __css: { ...styles.container },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_recharts.ResponsiveContainer,
         {
           ...getContainerProps({ className: "ui-pie-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             import_recharts.PieChart,
             {
               ...getPieChartProps({ className: "ui-pie-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   import_recharts.Pie,
                   {
                     ...getPieProps({
-                      className: "ui-pie-chart__pie",
-                      labelClassName: "ui-pie-chart__label",
-                      labelLineClassName: "ui-pie-chart__label-line"
+                      className: "ui-pie-chart__pie"
                     }),
                     children: cells
                   }
                 ),
-                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   import_recharts.Legend,
                   {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       ChartLegend,
                       {
                         className: "ui-pie-chart__legend",
@@ -670,10 +764,10 @@ var PieChart = (0, import_core7.forwardRef)((props, ref) => {
                     ...getLegendProps()
                   }
                 ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   import_recharts.Tooltip,
                   {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       ChartTooltip,
                       {
                         className: "ui-pie-chart__tooltip",