@mamrp/components 1.7.17 → 1.7.18

package/dist/charts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/charts/index.ts","../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["export { default as BarChart } from \"./bar\";\nexport { default as PieChart } from \"./pie\";\n","import * as React from \"react\";\nexport { React };\n","\"use client\";\r\nimport { Chart } from \"react-chartjs-2\";\r\nimport {\r\n  Chart as ChartJS,\r\n  CategoryScale,\r\n  LinearScale,\r\n  BarElement,\r\n  LineElement,\r\n  PointElement,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  LineController,\r\n  Chart as ChartType,\r\n} from \"chart.js\";\r\nimport { Box } from \"@mui/material\";\r\n\r\nChartJS.register(\r\n  CategoryScale,\r\n  LinearScale,\r\n  BarElement,\r\n  LineElement,\r\n  PointElement,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  LineController\r\n);\r\n\r\ninterface Props {\r\n  labels: string[];\r\n  datasets: {\r\n    label: string;\r\n    data: (number | null)[];\r\n    backgroundColor: string;\r\n    borderColor?: string;\r\n    borderWidth?: number;\r\n    type?: \"line\";\r\n    order?: number;\r\n    tension?: number;\r\n    pointRadius?: number;\r\n    fill?: boolean;\r\n  }[];\r\n  height?: number;\r\n}\r\n/**\r\n * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)\r\n *\r\n * @component BarChart\r\n *\r\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).\r\n * @param {Array<{\r\n *   label: string,\r\n *   data: number[],\r\n *   backgroundColor: string,\r\n *   borderColor?: string,\r\n *   borderWidth?: number,\r\n *   type?: \"line\",\r\n *   order?: number,\r\n *   tension?: number,\r\n *   pointRadius?: number,\r\n *   fill?: boolean\r\n * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.\r\n *   - label: عنوان داده‌ها (نمایش در legend)\r\n *   - data: آرایه‌ای از مقادیر هر سری\r\n *   - backgroundColor: رنگ میله یا خط\r\n *   - borderColor: (اختیاری) رنگ خط دور میله یا خط\r\n *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\r\n *   - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)\r\n *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)\r\n *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)\r\n *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)\r\n *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)\r\n *\r\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\r\n *\r\n * @description\r\n * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.\r\n * - پشتیبانی از فونت وزیر و راست‌چین\r\n * - ریسپانسیو و مناسب صفحات فارسی\r\n * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)\r\n * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری\r\n *\r\n * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی\r\n *\r\n * @example\r\n * ```jsx\r\n * <BarChart\r\n *   labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\r\n *   datasets={[\r\n *     {\r\n *       label: \"فروش\",\r\n *       data: [10, 20, 15],\r\n *       backgroundColor: \"rgba(75,192,192,0.7)\",\r\n *     },\r\n *     {\r\n *       label: \"میانگین\",\r\n *       data: [12, 18, 14],\r\n *       borderColor: \"red\",\r\n *       backgroundColor: \"transparent\",\r\n *       type: \"line\",\r\n *       order: 0,\r\n *       borderWidth: 3,\r\n *       tension: 0.4,\r\n *       pointRadius: 4,\r\n *       fill: false,\r\n *     },\r\n *   ]}\r\n *   height={400}\r\n * />\r\n * ```\r\n */\r\nexport default function BarChart({ labels, datasets, height }: Props) {\r\n  const options = {\r\n    responsive: true,\r\n    maintainAspectRatio: false,\r\n    scales: {\r\n      y: {\r\n        ticks: {\r\n          font: {\r\n            family: \"'Vazir', sans-serif\",\r\n            size: 14,\r\n          },\r\n        },\r\n      },\r\n      x: {\r\n        ticks: {\r\n          autoSkip: false,\r\n          font: {\r\n            family: \"'Vazir', sans-serif\",\r\n            size: 13,\r\n          },\r\n        },\r\n      },\r\n    },\r\n    plugins: {\r\n      datalabels: {\r\n        display: false, // ← غیرفعال\r\n      },\r\n      tooltip: {\r\n        bodyFont: {\r\n          family: \"'Vazir', sans-serif\",\r\n          size: 14,\r\n        },\r\n        titleFont: {\r\n          family: \"'Vazir', sans-serif\",\r\n          size: 16,\r\n        },\r\n      },\r\n      legend: {\r\n        labels: {\r\n          generateLabels: function (chart: ChartType) {\r\n            const labels =\r\n              ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\r\n            return labels.map((label) => ({\r\n              ...label,\r\n              text: \"     \" + label.text + \" \",\r\n              boxWidth: 40,\r\n              boxHeight: 20,\r\n            }));\r\n          },\r\n          padding: 15,\r\n          usePointStyle: true,\r\n          font: {\r\n            size: 16,\r\n            family: \"'Vazir', sans-serif\",\r\n          },\r\n          boxWidth: 40,\r\n          paddingBottom: 10,\r\n        },\r\n      },\r\n    },\r\n  };\r\n\r\n  return (\r\n    <Box height={height ?? 600}>\r\n      <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\r\n    </Box>\r\n  );\r\n}\r\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n  labels: string[];\n  datasets: {\n    label: string;\n    data: number[];\n    backgroundColor: string | string[];\n    borderWidth?: number;\n  }[];\n  height?: number;\n  disableLogo?: boolean;\n  logoSRC?: string;\n  showDataLabels?: boolean;\n  showPercentage?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسب‌های داده‌ها\n * @param {boolean} [showPercentage] - نمایش درصد به جای مقدار عددی در برچسب‌های داده‌ها (در صورت فعال بودن showDataLabels). درصد بر اساس داده‌های قابل مشاهده محاسبه می‌شود.\n * @param {Array<{\n *   label: string,\n *   data: number[],\n *   backgroundColor: string[],\n *   borderWidth?: number\n * }>} datasets - آرایه‌ای شامل یک آبجکت داده برای مقداردهی بخش‌های نمودار.\n *   - label: عنوان داده‌ها (نمایش در legend)\n *   - data: آرایه‌ای از مقادیر هر بخش\n *   - backgroundColor: آرایه‌ای از رنگ‌ها برای هر بخش\n *   - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایره‌ای با قابلیت شخصی‌سازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n * - امکان نمایش درصد یا مقدار عددی در برچسب‌های داده‌ها بر اساس داده‌های قابل مشاهده\n *\n * @returns {JSX.Element} یک نمودار دایره‌ای با داده‌های ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n *   labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n *   datasets={[\n *     {\n *       label: \"مقدار\",\n *       data: [10, 20, 30],\n *       backgroundColor: [\n *         \"rgba(75,192,192,1)\",\n *         \"rgba(255,99,132,1)\",\n *         \"rgba(153,102,255,1)\",\n *       ],\n *       borderWidth: 2,\n *     },\n *   ]}\n *   showDataLabels={true}\n *   showPercentage={true}\n * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = false,\n  showPercentage = false,\n}: Props) {\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    cutout: !disableLogo ? \"59%\" : \"0%\",\n    plugins: {\n      tooltip: {\n        bodyFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 14,\n        },\n        titleFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 16,\n        },\n      },\n      legend: {\n        labels: {\n          padding: 15,\n          usePointStyle: true,\n          color: '#666', // رنگ متن legend را نرم‌تر می‌کند\n          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n          generateLabels: (chart: any) => {\n            const data = chart.data;\n            const meta = chart.getDatasetMeta(0);\n            return data.labels.map((label: string, index: number) => {\n              const hidden = meta.data[index] ? meta.data[index].hidden : false;\n              return {\n                text: label,\n                fillStyle: data.datasets[0].backgroundColor[index] || '#000',\n                hidden: hidden,\n                index: index,\n                datasetIndex: 0,\n                textDecoration: hidden ? 'line-through' : undefined,\n              };\n            });\n          },\n        },\n        onClick: (e: any, legendItem: any, legend: any) => {\n          const ci = legend.chart;\n          const meta = ci.getDatasetMeta(legendItem.datasetIndex || 0);\n          const index = legendItem.index;\n          if (meta.data[index]) {\n            meta.data[index].hidden = !meta.data[index].hidden;\n          }\n          ci.update();\n        },\n      },\n      datalabels: {\n        display: (context: any) => {\n          return showDataLabels && !context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].hidden;\n        },\n        color: \"#fff\",\n        font: {\n          size: 14,\n          weight: \"bold\",\n          family: \"'Vazir', sans-serif\",\n        } as const,\n        anchor: \"center\" as const, // ← روی مرکز هر تکه\n        align: \"center\" as const,\n        offset: 20, // فاصله از مرکز (می‌تونی کم/زیاد کنی)\n        formatter: showPercentage\n          ? (value: number, context: any) => {\n            if (value === 0) return \"\";\n            // محاسبه مجموع داده‌های قابل مشاهده\n            const total = context.chart.data.datasets[context.datasetIndex].data.reduce(\n              (sum: number, val: number, index: number) => {\n                const meta = context.chart.getDatasetMeta(context.datasetIndex);\n                if (!meta.data[index] || meta.data[index].hidden !== true) {\n                  return sum + val;\n                }\n                return sum;\n              },\n              0\n            );\n            const percentage = ((value / total) * 100).toFixed(1);\n            return percentage + \"%\";\n          }\n          : (value: number) => (value === 0 ? \"\" : value),\n      },\n    },\n  };\n\n  // کامپوننتی که می‌خواهید در مرکز نمودار نمایش داده شود\n  const CenterComponent = () => {\n    return (\n      <div\n        style={{\n          padding: \"10px\",\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n          width: 220,\n        }}\n      >\n        <Image\n          alt=\"\"\n          width={220}\n          height={220}\n          src={logoSRC ?? \"/assets/images/pilogo.png\"}\n          unoptimized\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n      <Pie\n        data={{\n          labels: labels,\n          datasets: datasets,\n        }}\n        options={options}\n      />\n      {!disableLogo && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"53%\",\n            left: \"50%\",\n            transform: \"translate(-50%, -50%)\",\n            pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n          }}\n        >\n          <CenterComponent />\n        </div>\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["ChartJS","labels","import_react_chartjs_2","import_chart","import_material","ChartJS","ChartDataLabels","Image"]}
+{"version":3,"sources":["../../src/charts/index.ts","../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["export { default as BarChart } from \"./bar\";\nexport { default as PieChart } from \"./pie\";\n","import * as React from \"react\";\nexport { React };\n","\"use client\";\nimport { Chart } from \"react-chartjs-2\";\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  Tooltip,\n  Legend,\n  BarController,\n  LineController,\n  Chart as ChartType,\n} from \"chart.js\";\nimport { Box } from \"@mui/material\";\n\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  Tooltip,\n  Legend,\n  BarController,\n  LineController\n);\n\ninterface Props {\n  labels: string[];\n  datasets: {\n    label: string;\n    data: (number | null)[];\n    backgroundColor: string;\n    borderColor?: string;\n    borderWidth?: number;\n    type?: \"line\";\n    order?: number;\n    tension?: number;\n    pointRadius?: number;\n    fill?: boolean;\n  }[];\n  height?: number;\n}\n/**\n * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)\n *\n * @component BarChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).\n * @param {Array<{\n *   label: string,\n *   data: number[],\n *   backgroundColor: string,\n *   borderColor?: string,\n *   borderWidth?: number,\n *   type?: \"line\",\n *   order?: number,\n *   tension?: number,\n *   pointRadius?: number,\n *   fill?: boolean\n * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.\n *   - label: عنوان داده‌ها (نمایش در legend)\n *   - data: آرایه‌ای از مقادیر هر سری\n *   - backgroundColor: رنگ میله یا خط\n *   - borderColor: (اختیاری) رنگ خط دور میله یا خط\n *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\n *   - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)\n *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)\n *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)\n *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)\n *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)\n *\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.\n * - پشتیبانی از فونت وزیر و راست‌چین\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)\n * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری\n *\n * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی\n *\n * @example\n * ```jsx\n * <BarChart\n *   labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\n *   datasets={[\n *     {\n *       label: \"فروش\",\n *       data: [10, 20, 15],\n *       backgroundColor: \"rgba(75,192,192,0.7)\",\n *     },\n *     {\n *       label: \"میانگین\",\n *       data: [12, 18, 14],\n *       borderColor: \"red\",\n *       backgroundColor: \"transparent\",\n *       type: \"line\",\n *       order: 0,\n *       borderWidth: 3,\n *       tension: 0.4,\n *       pointRadius: 4,\n *       fill: false,\n *     },\n *   ]}\n *   height={400}\n * />\n * ```\n */\nexport default function BarChart({ labels, datasets, height }: Props) {\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    scales: {\n      y: {\n        ticks: {\n          font: {\n            family: \"'Vazir', sans-serif\",\n            size: 14,\n          },\n        },\n      },\n      x: {\n        ticks: {\n          autoSkip: false,\n          font: {\n            family: \"'Vazir', sans-serif\",\n            size: 13,\n          },\n        },\n      },\n    },\n    plugins: {\n      datalabels: {\n        display: false, // ← غیرفعال\n      },\n      tooltip: {\n        bodyFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 14,\n        },\n        titleFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 16,\n        },\n      },\n      legend: {\n        labels: {\n          generateLabels: function (chart: ChartType) {\n            const labels =\n              ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\n            return labels.map((label) => ({\n              ...label,\n              text: \"     \" + label.text + \" \",\n              boxWidth: 40,\n              boxHeight: 20,\n            }));\n          },\n          padding: 15,\n          usePointStyle: true,\n          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n        },\n      },\n    },\n  };\n\n  return (\n    <Box height={height ?? 600}>\n      <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\n    </Box>\n  );\n}\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n  labels: string[];\n  datasets: {\n    label: string;\n    data: number[];\n    backgroundColor: string | string[];\n    borderWidth?: number;\n  }[];\n  height?: number;\n  disableLogo?: boolean;\n  logoSRC?: string;\n  showDataLabels?: boolean;\n  showPercentage?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسب‌های داده‌ها\n * @param {boolean} [showPercentage] - نمایش درصد به جای مقدار عددی در برچسب‌های داده‌ها (در صورت فعال بودن showDataLabels). درصد بر اساس داده‌های قابل مشاهده محاسبه می‌شود.\n * @param {Array<{\n *   label: string,\n *   data: number[],\n *   backgroundColor: string[],\n *   borderWidth?: number\n * }>} datasets - آرایه‌ای شامل یک آبجکت داده برای مقداردهی بخش‌های نمودار.\n *   - label: عنوان داده‌ها (نمایش در legend)\n *   - data: آرایه‌ای از مقادیر هر بخش\n *   - backgroundColor: آرایه‌ای از رنگ‌ها برای هر بخش\n *   - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایره‌ای با قابلیت شخصی‌سازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n * - امکان نمایش درصد یا مقدار عددی در برچسب‌های داده‌ها بر اساس داده‌های قابل مشاهده\n *\n * @returns {JSX.Element} یک نمودار دایره‌ای با داده‌های ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n *   labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n *   datasets={[\n *     {\n *       label: \"مقدار\",\n *       data: [10, 20, 30],\n *       backgroundColor: [\n *         \"rgba(75,192,192,1)\",\n *         \"rgba(255,99,132,1)\",\n *         \"rgba(153,102,255,1)\",\n *       ],\n *       borderWidth: 2,\n *     },\n *   ]}\n *   showDataLabels={true}\n *   showPercentage={true}\n * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = false,\n  showPercentage = false,\n}: Props) {\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    cutout: !disableLogo ? \"59%\" : \"0%\",\n    plugins: {\n      tooltip: {\n        bodyFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 14,\n        },\n        titleFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 16,\n        },\n      },\n      legend: {\n        labels: {\n          padding: 15,\n          usePointStyle: true,\n          color: '#666', // رنگ متن legend را نرم‌تر می‌کند\n          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n          generateLabels: (chart: any) => {\n            const data = chart.data;\n            const meta = chart.getDatasetMeta(0);\n            return data.labels.map((label: string, index: number) => {\n              const hidden = meta.data[index] ? meta.data[index].hidden : false;\n              return {\n                text: label,\n                fillStyle: data.datasets[0].backgroundColor[index] || '#000',\n                hidden: hidden,\n                index: index,\n                datasetIndex: 0,\n                textDecoration: hidden ? 'line-through' : undefined,\n              };\n            });\n          },\n        },\n        onClick: (e: any, legendItem: any, legend: any) => {\n          const ci = legend.chart;\n          const meta = ci.getDatasetMeta(legendItem.datasetIndex || 0);\n          const index = legendItem.index;\n          if (meta.data[index]) {\n            meta.data[index].hidden = !meta.data[index].hidden;\n          }\n          ci.update();\n        },\n      },\n      datalabels: {\n        display: (context: any) => {\n          return showDataLabels && !context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].hidden;\n        },\n        color: \"#fff\",\n        font: {\n          size: 14,\n          weight: \"bold\",\n          family: \"'Vazir', sans-serif\",\n        } as const,\n        anchor: \"center\" as const, // ← روی مرکز هر تکه\n        align: \"center\" as const,\n        offset: 20, // فاصله از مرکز (می‌تونی کم/زیاد کنی)\n        formatter: showPercentage\n          ? (value: number, context: any) => {\n            if (value === 0) return \"\";\n            // محاسبه مجموع داده‌های قابل مشاهده\n            const total = context.chart.data.datasets[context.datasetIndex].data.reduce(\n              (sum: number, val: number, index: number) => {\n                const meta = context.chart.getDatasetMeta(context.datasetIndex);\n                if (!meta.data[index] || meta.data[index].hidden !== true) {\n                  return sum + val;\n                }\n                return sum;\n              },\n              0\n            );\n            const percentage = ((value / total) * 100).toFixed(1);\n            return percentage + \"%\";\n          }\n          : (value: number) => (value === 0 ? \"\" : value),\n      },\n    },\n  };\n\n  // کامپوننتی که می‌خواهید در مرکز نمودار نمایش داده شود\n  const CenterComponent = () => {\n    return (\n      <div\n        style={{\n          padding: \"10px\",\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n          width: 220,\n        }}\n      >\n        <Image\n          alt=\"\"\n          width={220}\n          height={220}\n          src={logoSRC ?? \"/assets/images/pilogo.png\"}\n          unoptimized\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n      <Pie\n        data={{\n          labels: labels,\n          datasets: datasets,\n        }}\n        options={options}\n      />\n      {!disableLogo && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"53%\",\n            left: \"50%\",\n            transform: \"translate(-50%, -50%)\",\n            pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n          }}\n        >\n          <CenterComponent />\n        </div>\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["ChartJS","labels","import_react_chartjs_2","import_chart","import_material","ChartJS","ChartDataLabels","Image"]}

package/dist/charts/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["import * as React from \"react\";\nexport { React };\n","\"use client\";\r\nimport { Chart } from \"react-chartjs-2\";\r\nimport {\r\n  Chart as ChartJS,\r\n  CategoryScale,\r\n  LinearScale,\r\n  BarElement,\r\n  LineElement,\r\n  PointElement,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  LineController,\r\n  Chart as ChartType,\r\n} from \"chart.js\";\r\nimport { Box } from \"@mui/material\";\r\n\r\nChartJS.register(\r\n  CategoryScale,\r\n  LinearScale,\r\n  BarElement,\r\n  LineElement,\r\n  PointElement,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  LineController\r\n);\r\n\r\ninterface Props {\r\n  labels: string[];\r\n  datasets: {\r\n    label: string;\r\n    data: (number | null)[];\r\n    backgroundColor: string;\r\n    borderColor?: string;\r\n    borderWidth?: number;\r\n    type?: \"line\";\r\n    order?: number;\r\n    tension?: number;\r\n    pointRadius?: number;\r\n    fill?: boolean;\r\n  }[];\r\n  height?: number;\r\n}\r\n/**\r\n * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)\r\n *\r\n * @component BarChart\r\n *\r\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).\r\n * @param {Array<{\r\n *   label: string,\r\n *   data: number[],\r\n *   backgroundColor: string,\r\n *   borderColor?: string,\r\n *   borderWidth?: number,\r\n *   type?: \"line\",\r\n *   order?: number,\r\n *   tension?: number,\r\n *   pointRadius?: number,\r\n *   fill?: boolean\r\n * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.\r\n *   - label: عنوان داده‌ها (نمایش در legend)\r\n *   - data: آرایه‌ای از مقادیر هر سری\r\n *   - backgroundColor: رنگ میله یا خط\r\n *   - borderColor: (اختیاری) رنگ خط دور میله یا خط\r\n *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\r\n *   - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)\r\n *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)\r\n *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)\r\n *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)\r\n *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)\r\n *\r\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\r\n *\r\n * @description\r\n * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.\r\n * - پشتیبانی از فونت وزیر و راست‌چین\r\n * - ریسپانسیو و مناسب صفحات فارسی\r\n * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)\r\n * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری\r\n *\r\n * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی\r\n *\r\n * @example\r\n * ```jsx\r\n * <BarChart\r\n *   labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\r\n *   datasets={[\r\n *     {\r\n *       label: \"فروش\",\r\n *       data: [10, 20, 15],\r\n *       backgroundColor: \"rgba(75,192,192,0.7)\",\r\n *     },\r\n *     {\r\n *       label: \"میانگین\",\r\n *       data: [12, 18, 14],\r\n *       borderColor: \"red\",\r\n *       backgroundColor: \"transparent\",\r\n *       type: \"line\",\r\n *       order: 0,\r\n *       borderWidth: 3,\r\n *       tension: 0.4,\r\n *       pointRadius: 4,\r\n *       fill: false,\r\n *     },\r\n *   ]}\r\n *   height={400}\r\n * />\r\n * ```\r\n */\r\nexport default function BarChart({ labels, datasets, height }: Props) {\r\n  const options = {\r\n    responsive: true,\r\n    maintainAspectRatio: false,\r\n    scales: {\r\n      y: {\r\n        ticks: {\r\n          font: {\r\n            family: \"'Vazir', sans-serif\",\r\n            size: 14,\r\n          },\r\n        },\r\n      },\r\n      x: {\r\n        ticks: {\r\n          autoSkip: false,\r\n          font: {\r\n            family: \"'Vazir', sans-serif\",\r\n            size: 13,\r\n          },\r\n        },\r\n      },\r\n    },\r\n    plugins: {\r\n      datalabels: {\r\n        display: false, // ← غیرفعال\r\n      },\r\n      tooltip: {\r\n        bodyFont: {\r\n          family: \"'Vazir', sans-serif\",\r\n          size: 14,\r\n        },\r\n        titleFont: {\r\n          family: \"'Vazir', sans-serif\",\r\n          size: 16,\r\n        },\r\n      },\r\n      legend: {\r\n        labels: {\r\n          generateLabels: function (chart: ChartType) {\r\n            const labels =\r\n              ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\r\n            return labels.map((label) => ({\r\n              ...label,\r\n              text: \"     \" + label.text + \" \",\r\n              boxWidth: 40,\r\n              boxHeight: 20,\r\n            }));\r\n          },\r\n          padding: 15,\r\n          usePointStyle: true,\r\n          font: {\r\n            size: 16,\r\n            family: \"'Vazir', sans-serif\",\r\n          },\r\n          boxWidth: 40,\r\n          paddingBottom: 10,\r\n        },\r\n      },\r\n    },\r\n  };\r\n\r\n  return (\r\n    <Box height={height ?? 600}>\r\n      <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\r\n    </Box>\r\n  );\r\n}\r\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n  labels: string[];\n  datasets: {\n    label: string;\n    data: number[];\n    backgroundColor: string | string[];\n    borderWidth?: number;\n  }[];\n  height?: number;\n  disableLogo?: boolean;\n  logoSRC?: string;\n  showDataLabels?: boolean;\n  showPercentage?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسب‌های داده‌ها\n * @param {boolean} [showPercentage] - نمایش درصد به جای مقدار عددی در برچسب‌های داده‌ها (در صورت فعال بودن showDataLabels). درصد بر اساس داده‌های قابل مشاهده محاسبه می‌شود.\n * @param {Array<{\n *   label: string,\n *   data: number[],\n *   backgroundColor: string[],\n *   borderWidth?: number\n * }>} datasets - آرایه‌ای شامل یک آبجکت داده برای مقداردهی بخش‌های نمودار.\n *   - label: عنوان داده‌ها (نمایش در legend)\n *   - data: آرایه‌ای از مقادیر هر بخش\n *   - backgroundColor: آرایه‌ای از رنگ‌ها برای هر بخش\n *   - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایره‌ای با قابلیت شخصی‌سازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n * - امکان نمایش درصد یا مقدار عددی در برچسب‌های داده‌ها بر اساس داده‌های قابل مشاهده\n *\n * @returns {JSX.Element} یک نمودار دایره‌ای با داده‌های ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n *   labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n *   datasets={[\n *     {\n *       label: \"مقدار\",\n *       data: [10, 20, 30],\n *       backgroundColor: [\n *         \"rgba(75,192,192,1)\",\n *         \"rgba(255,99,132,1)\",\n *         \"rgba(153,102,255,1)\",\n *       ],\n *       borderWidth: 2,\n *     },\n *   ]}\n *   showDataLabels={true}\n *   showPercentage={true}\n * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = false,\n  showPercentage = false,\n}: Props) {\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    cutout: !disableLogo ? \"59%\" : \"0%\",\n    plugins: {\n      tooltip: {\n        bodyFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 14,\n        },\n        titleFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 16,\n        },\n      },\n      legend: {\n        labels: {\n          padding: 15,\n          usePointStyle: true,\n          color: '#666', // رنگ متن legend را نرم‌تر می‌کند\n          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n          generateLabels: (chart: any) => {\n            const data = chart.data;\n            const meta = chart.getDatasetMeta(0);\n            return data.labels.map((label: string, index: number) => {\n              const hidden = meta.data[index] ? meta.data[index].hidden : false;\n              return {\n                text: label,\n                fillStyle: data.datasets[0].backgroundColor[index] || '#000',\n                hidden: hidden,\n                index: index,\n                datasetIndex: 0,\n                textDecoration: hidden ? 'line-through' : undefined,\n              };\n            });\n          },\n        },\n        onClick: (e: any, legendItem: any, legend: any) => {\n          const ci = legend.chart;\n          const meta = ci.getDatasetMeta(legendItem.datasetIndex || 0);\n          const index = legendItem.index;\n          if (meta.data[index]) {\n            meta.data[index].hidden = !meta.data[index].hidden;\n          }\n          ci.update();\n        },\n      },\n      datalabels: {\n        display: (context: any) => {\n          return showDataLabels && !context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].hidden;\n        },\n        color: \"#fff\",\n        font: {\n          size: 14,\n          weight: \"bold\",\n          family: \"'Vazir', sans-serif\",\n        } as const,\n        anchor: \"center\" as const, // ← روی مرکز هر تکه\n        align: \"center\" as const,\n        offset: 20, // فاصله از مرکز (می‌تونی کم/زیاد کنی)\n        formatter: showPercentage\n          ? (value: number, context: any) => {\n            if (value === 0) return \"\";\n            // محاسبه مجموع داده‌های قابل مشاهده\n            const total = context.chart.data.datasets[context.datasetIndex].data.reduce(\n              (sum: number, val: number, index: number) => {\n                const meta = context.chart.getDatasetMeta(context.datasetIndex);\n                if (!meta.data[index] || meta.data[index].hidden !== true) {\n                  return sum + val;\n                }\n                return sum;\n              },\n              0\n            );\n            const percentage = ((value / total) * 100).toFixed(1);\n            return percentage + \"%\";\n          }\n          : (value: number) => (value === 0 ? \"\" : value),\n      },\n    },\n  };\n\n  // کامپوننتی که می‌خواهید در مرکز نمودار نمایش داده شود\n  const CenterComponent = () => {\n    return (\n      <div\n        style={{\n          padding: \"10px\",\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n          width: 220,\n        }}\n      >\n        <Image\n          alt=\"\"\n          width={220}\n          height={220}\n          src={logoSRC ?? \"/assets/images/pilogo.png\"}\n          unoptimized\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n      <Pie\n        data={{\n          labels: labels,\n          datasets: datasets,\n        }}\n        options={options}\n      />\n      {!disableLogo && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"53%\",\n            left: \"50%\",\n            transform: \"translate(-50%, -50%)\",\n            pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n          }}\n        >\n          <CenterComponent />\n        </div>\n      )}\n    </Box>\n  );\n}\n"],"mappings":";AAAA,YAAY,WAAW;;;ACCvB,SAAS,aAAa;AACtB;AAAA,EACE,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,WAAW;AAEpB,QAAQ;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAqFe,SAAR,SAA0B,EAAE,QAAQ,UAAU,OAAO,GAAU;AACpE,QAAM,UAAU;AAAA,IACd,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,QAAQ;AAAA,MACN,GAAG;AAAA,QACD,OAAO;AAAA,UACL,MAAM;AAAA,YACJ,QAAQ;AAAA,YACR,MAAM;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,MACA,GAAG;AAAA,QACD,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAM;AAAA,YACJ,QAAQ;AAAA,YACR,MAAM;AAAA,UACR;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,QACV,SAAS;AAAA;AAAA,MACX;AAAA,MACA,SAAS;AAAA,QACP,UAAU;AAAA,UACR,QAAQ;AAAA,UACR,MAAM;AAAA,QACR;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,QACR;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,gBAAgB,SAAU,OAAkB;AAC1C,kBAAMA,UACJ,QAAQ,SAAS,QAAQ,OAAO,OAAO,eAAe,KAAK;AAC7D,mBAAOA,QAAO,IAAI,CAAC,WAAW;AAAA,cAC5B,GAAG;AAAA,cACH,MAAM,UAAU,MAAM,OAAO;AAAA,cAC7B,UAAU;AAAA,cACV,WAAW;AAAA,YACb,EAAE;AAAA,UACJ;AAAA,UACA,SAAS;AAAA,UACT,eAAe;AAAA,UACf,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,QAAQ;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE,oCAAC,OAAI,QAAQ,UAAU,OACrB,oCAAC,SAAM,MAAK,OAAM,MAAM,EAAE,QAAQ,SAAS,GAAG,SAAkB,CAClE;AAEJ;;;AClLA,SAAS,WAAW;AACpB,SAAS,SAASC,UAAS,YAAY,WAAAC,UAAS,UAAAC,eAAqB;AAErE,SAAS,OAAAC,YAAW;AACpB,OAAO,WAAW;AAClB,OAAO,qBAAqB;AAE5BH,SAAQ,SAAS,YAAYC,UAASC,SAAQ,eAAe;AAiE9C,SAAR,SAA0B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GAAU;AACR,QAAM,UAAU;AAAA,IACd,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,QAAQ,CAAC,cAAc,QAAQ;AAAA,IAC/B,SAAS;AAAA,MACP,SAAS;AAAA,QACP,UAAU;AAAA,UACR,QAAQ;AAAA,UACR,MAAM;AAAA,QACR;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,QACR;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,eAAe;AAAA,UACf,OAAO;AAAA;AAAA,UACP,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,QAAQ;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV,eAAe;AAAA,UACf,gBAAgB,CAAC,UAAe;AAC9B,kBAAM,OAAO,MAAM;AACnB,kBAAM,OAAO,MAAM,eAAe,CAAC;AACnC,mBAAO,KAAK,OAAO,IAAI,CAAC,OAAe,UAAkB;AACvD,oBAAM,SAAS,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,KAAK,EAAE,SAAS;AAC5D,qBAAO;AAAA,gBACL,MAAM;AAAA,gBACN,WAAW,KAAK,SAAS,CAAC,EAAE,gBAAgB,KAAK,KAAK;AAAA,gBACtD;AAAA,gBACA;AAAA,gBACA,cAAc;AAAA,gBACd,gBAAgB,SAAS,iBAAiB;AAAA,cAC5C;AAAA,YACF,CAAC;AAAA,UACH;AAAA,QACF;AAAA,QACA,SAAS,CAAC,GAAQ,YAAiB,WAAgB;AACjD,gBAAM,KAAK,OAAO;AAClB,gBAAM,OAAO,GAAG,eAAe,WAAW,gBAAgB,CAAC;AAC3D,gBAAM,QAAQ,WAAW;AACzB,cAAI,KAAK,KAAK,KAAK,GAAG;AACpB,iBAAK,KAAK,KAAK,EAAE,SAAS,CAAC,KAAK,KAAK,KAAK,EAAE;AAAA,UAC9C;AACA,aAAG,OAAO;AAAA,QACZ;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS,CAAC,YAAiB;AACzB,iBAAO,kBAAkB,CAAC,QAAQ,MAAM,eAAe,QAAQ,YAAY,EAAE,KAAK,QAAQ,SAAS,EAAE;AAAA,QACvG;AAAA,QACA,OAAO;AAAA,QACP,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,QAAQ;AAAA,QACV;AAAA,QACA,QAAQ;AAAA;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,QACR,WAAW,iBACP,CAAC,OAAe,YAAiB;AACjC,cAAI,UAAU,EAAG,QAAO;AAExB,gBAAM,QAAQ,QAAQ,MAAM,KAAK,SAAS,QAAQ,YAAY,EAAE,KAAK;AAAA,YACnE,CAAC,KAAa,KAAa,UAAkB;AAC3C,oBAAM,OAAO,QAAQ,MAAM,eAAe,QAAQ,YAAY;AAC9D,kBAAI,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,EAAE,WAAW,MAAM;AACzD,uBAAO,MAAM;AAAA,cACf;AACA,qBAAO;AAAA,YACT;AAAA,YACA;AAAA,UACF;AACA,gBAAM,cAAe,QAAQ,QAAS,KAAK,QAAQ,CAAC;AACpD,iBAAO,aAAa;AAAA,QACtB,IACE,CAAC,UAAmB,UAAU,IAAI,KAAK;AAAA,MAC7C;AAAA,IACF;AAAA,EACF;AAGA,QAAM,kBAAkB,MAAM;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,cAAc;AAAA,UACd,WAAW;AAAA,UACX,OAAO;AAAA,QACT;AAAA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,KAAK,WAAW;AAAA,UAChB,aAAW;AAAA;AAAA,MACb;AAAA,IACF;AAAA,EAEJ;AAEA,SACE,oCAACC,MAAA,EAAI,QAAQ,UAAU,KAAK,IAAI,EAAE,UAAU,WAAW,KACrD;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA;AAAA,EACF,GACC,CAAC,eACA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW;AAAA,QACX,eAAe;AAAA;AAAA,MACjB;AAAA;AAAA,IAEA,oCAAC,qBAAgB;AAAA,EACnB,CAEJ;AAEJ;","names":["labels","ChartJS","Tooltip","Legend","Box"]}
+{"version":3,"sources":["../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["import * as React from \"react\";\nexport { React };\n","\"use client\";\nimport { Chart } from \"react-chartjs-2\";\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  Tooltip,\n  Legend,\n  BarController,\n  LineController,\n  Chart as ChartType,\n} from \"chart.js\";\nimport { Box } from \"@mui/material\";\n\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  Tooltip,\n  Legend,\n  BarController,\n  LineController\n);\n\ninterface Props {\n  labels: string[];\n  datasets: {\n    label: string;\n    data: (number | null)[];\n    backgroundColor: string;\n    borderColor?: string;\n    borderWidth?: number;\n    type?: \"line\";\n    order?: number;\n    tension?: number;\n    pointRadius?: number;\n    fill?: boolean;\n  }[];\n  height?: number;\n}\n/**\n * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)\n *\n * @component BarChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).\n * @param {Array<{\n *   label: string,\n *   data: number[],\n *   backgroundColor: string,\n *   borderColor?: string,\n *   borderWidth?: number,\n *   type?: \"line\",\n *   order?: number,\n *   tension?: number,\n *   pointRadius?: number,\n *   fill?: boolean\n * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.\n *   - label: عنوان داده‌ها (نمایش در legend)\n *   - data: آرایه‌ای از مقادیر هر سری\n *   - backgroundColor: رنگ میله یا خط\n *   - borderColor: (اختیاری) رنگ خط دور میله یا خط\n *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\n *   - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)\n *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)\n *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)\n *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)\n *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)\n *\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.\n * - پشتیبانی از فونت وزیر و راست‌چین\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)\n * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری\n *\n * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی\n *\n * @example\n * ```jsx\n * <BarChart\n *   labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\n *   datasets={[\n *     {\n *       label: \"فروش\",\n *       data: [10, 20, 15],\n *       backgroundColor: \"rgba(75,192,192,0.7)\",\n *     },\n *     {\n *       label: \"میانگین\",\n *       data: [12, 18, 14],\n *       borderColor: \"red\",\n *       backgroundColor: \"transparent\",\n *       type: \"line\",\n *       order: 0,\n *       borderWidth: 3,\n *       tension: 0.4,\n *       pointRadius: 4,\n *       fill: false,\n *     },\n *   ]}\n *   height={400}\n * />\n * ```\n */\nexport default function BarChart({ labels, datasets, height }: Props) {\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    scales: {\n      y: {\n        ticks: {\n          font: {\n            family: \"'Vazir', sans-serif\",\n            size: 14,\n          },\n        },\n      },\n      x: {\n        ticks: {\n          autoSkip: false,\n          font: {\n            family: \"'Vazir', sans-serif\",\n            size: 13,\n          },\n        },\n      },\n    },\n    plugins: {\n      datalabels: {\n        display: false, // ← غیرفعال\n      },\n      tooltip: {\n        bodyFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 14,\n        },\n        titleFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 16,\n        },\n      },\n      legend: {\n        labels: {\n          generateLabels: function (chart: ChartType) {\n            const labels =\n              ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\n            return labels.map((label) => ({\n              ...label,\n              text: \"     \" + label.text + \" \",\n              boxWidth: 40,\n              boxHeight: 20,\n            }));\n          },\n          padding: 15,\n          usePointStyle: true,\n          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n        },\n      },\n    },\n  };\n\n  return (\n    <Box height={height ?? 600}>\n      <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\n    </Box>\n  );\n}\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n  labels: string[];\n  datasets: {\n    label: string;\n    data: number[];\n    backgroundColor: string | string[];\n    borderWidth?: number;\n  }[];\n  height?: number;\n  disableLogo?: boolean;\n  logoSRC?: string;\n  showDataLabels?: boolean;\n  showPercentage?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسب‌های داده‌ها\n * @param {boolean} [showPercentage] - نمایش درصد به جای مقدار عددی در برچسب‌های داده‌ها (در صورت فعال بودن showDataLabels). درصد بر اساس داده‌های قابل مشاهده محاسبه می‌شود.\n * @param {Array<{\n *   label: string,\n *   data: number[],\n *   backgroundColor: string[],\n *   borderWidth?: number\n * }>} datasets - آرایه‌ای شامل یک آبجکت داده برای مقداردهی بخش‌های نمودار.\n *   - label: عنوان داده‌ها (نمایش در legend)\n *   - data: آرایه‌ای از مقادیر هر بخش\n *   - backgroundColor: آرایه‌ای از رنگ‌ها برای هر بخش\n *   - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایره‌ای با قابلیت شخصی‌سازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n * - امکان نمایش درصد یا مقدار عددی در برچسب‌های داده‌ها بر اساس داده‌های قابل مشاهده\n *\n * @returns {JSX.Element} یک نمودار دایره‌ای با داده‌های ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n *   labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n *   datasets={[\n *     {\n *       label: \"مقدار\",\n *       data: [10, 20, 30],\n *       backgroundColor: [\n *         \"rgba(75,192,192,1)\",\n *         \"rgba(255,99,132,1)\",\n *         \"rgba(153,102,255,1)\",\n *       ],\n *       borderWidth: 2,\n *     },\n *   ]}\n *   showDataLabels={true}\n *   showPercentage={true}\n * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = false,\n  showPercentage = false,\n}: Props) {\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    cutout: !disableLogo ? \"59%\" : \"0%\",\n    plugins: {\n      tooltip: {\n        bodyFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 14,\n        },\n        titleFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 16,\n        },\n      },\n      legend: {\n        labels: {\n          padding: 15,\n          usePointStyle: true,\n          color: '#666', // رنگ متن legend را نرم‌تر می‌کند\n          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n          generateLabels: (chart: any) => {\n            const data = chart.data;\n            const meta = chart.getDatasetMeta(0);\n            return data.labels.map((label: string, index: number) => {\n              const hidden = meta.data[index] ? meta.data[index].hidden : false;\n              return {\n                text: label,\n                fillStyle: data.datasets[0].backgroundColor[index] || '#000',\n                hidden: hidden,\n                index: index,\n                datasetIndex: 0,\n                textDecoration: hidden ? 'line-through' : undefined,\n              };\n            });\n          },\n        },\n        onClick: (e: any, legendItem: any, legend: any) => {\n          const ci = legend.chart;\n          const meta = ci.getDatasetMeta(legendItem.datasetIndex || 0);\n          const index = legendItem.index;\n          if (meta.data[index]) {\n            meta.data[index].hidden = !meta.data[index].hidden;\n          }\n          ci.update();\n        },\n      },\n      datalabels: {\n        display: (context: any) => {\n          return showDataLabels && !context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].hidden;\n        },\n        color: \"#fff\",\n        font: {\n          size: 14,\n          weight: \"bold\",\n          family: \"'Vazir', sans-serif\",\n        } as const,\n        anchor: \"center\" as const, // ← روی مرکز هر تکه\n        align: \"center\" as const,\n        offset: 20, // فاصله از مرکز (می‌تونی کم/زیاد کنی)\n        formatter: showPercentage\n          ? (value: number, context: any) => {\n            if (value === 0) return \"\";\n            // محاسبه مجموع داده‌های قابل مشاهده\n            const total = context.chart.data.datasets[context.datasetIndex].data.reduce(\n              (sum: number, val: number, index: number) => {\n                const meta = context.chart.getDatasetMeta(context.datasetIndex);\n                if (!meta.data[index] || meta.data[index].hidden !== true) {\n                  return sum + val;\n                }\n                return sum;\n              },\n              0\n            );\n            const percentage = ((value / total) * 100).toFixed(1);\n            return percentage + \"%\";\n          }\n          : (value: number) => (value === 0 ? \"\" : value),\n      },\n    },\n  };\n\n  // کامپوننتی که می‌خواهید در مرکز نمودار نمایش داده شود\n  const CenterComponent = () => {\n    return (\n      <div\n        style={{\n          padding: \"10px\",\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n          width: 220,\n        }}\n      >\n        <Image\n          alt=\"\"\n          width={220}\n          height={220}\n          src={logoSRC ?? \"/assets/images/pilogo.png\"}\n          unoptimized\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n      <Pie\n        data={{\n          labels: labels,\n          datasets: datasets,\n        }}\n        options={options}\n      />\n      {!disableLogo && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"53%\",\n            left: \"50%\",\n            transform: \"translate(-50%, -50%)\",\n            pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n          }}\n        >\n          <CenterComponent />\n        </div>\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["labels","ChartJS","Tooltip","Legend","Box"]}

package/dist/index.d.mts

@@ -632,10 +632,16 @@ interface CustomDialogProps {
     onClose: () => void;
     maxWidth?: DialogProps["maxWidth"];
     fullWidth?: boolean;
+    fullScreen?: boolean;
     children: ReactNode;
     actions?: ReactNode;
     isSubmiting?: boolean;
+    sx?: SxProps<Theme>;
+    paperSx?: SxProps<Theme>;
+    contentSx?: SxProps<Theme>;
+    titleSx?: SxProps<Theme>;
+    actionsSx?: SxProps<Theme>;
 }
-declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, children, actions, isSubmiting, }: CustomDialogProps): React$1.JSX.Element;
+declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, fullScreen, children, actions, isSubmiting, sx, paperSx, contentSx, titleSx, actionsSx, }: CustomDialogProps): React$1.JSX.Element;
 
 export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };

package/dist/index.d.ts

@@ -632,10 +632,16 @@ interface CustomDialogProps {
     onClose: () => void;
     maxWidth?: DialogProps["maxWidth"];
     fullWidth?: boolean;
+    fullScreen?: boolean;
     children: ReactNode;
     actions?: ReactNode;
     isSubmiting?: boolean;
+    sx?: SxProps<Theme>;
+    paperSx?: SxProps<Theme>;
+    contentSx?: SxProps<Theme>;
+    titleSx?: SxProps<Theme>;
+    actionsSx?: SxProps<Theme>;
 }
-declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, children, actions, isSubmiting, }: CustomDialogProps): React$1.JSX.Element;
+declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, fullScreen, children, actions, isSubmiting, sx, paperSx, contentSx, titleSx, actionsSx, }: CustomDialogProps): React$1.JSX.Element;
 
 export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };

package/dist/index.js

@@ -5233,9 +5233,15 @@ function CustomDialog({
   onClose,
   maxWidth = "sm",
   fullWidth = true,
+  fullScreen = false,
   children,
   actions,
-  isSubmiting = false
+  isSubmiting = false,
+  sx,
+  paperSx,
+  contentSx,
+  titleSx,
+  actionsSx
 }) {
   const handleClose = (event, reason) => {
     if (isSubmiting) {
@@ -5250,73 +5256,150 @@ function CustomDialog({
       onClose: handleClose,
       maxWidth,
       fullWidth,
-      PaperComponent: DraggablePaper,
-      disableScrollLock: true
+      fullScreen,
+      PaperComponent: fullScreen ? void 0 : DraggablePaper,
+      disableScrollLock: true,
+      sx: [
+        fullScreen ? {
+          "& .MuiDialog-container": {
+            alignItems: "flex-start"
+          }
+        } : {},
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      PaperProps: {
+        sx: [
+          fullScreen ? {
+            height: "100vh",
+            maxHeight: "100vh",
+            width: "100%",
+            maxWidth: "100%",
+            margin: 0,
+            borderRadius: 0,
+            overflow: "hidden"
+          } : {
+            maxHeight: "calc(100vh - 64px)"
+          },
+          ...Array.isArray(paperSx) ? paperSx : [paperSx]
+        ]
+      }
     },
     /* @__PURE__ */ React.createElement(
-      import_material32.DialogTitle,
+      import_material32.Box,
       {
-        fontWeight: 700,
-        fontSize: "1.2rem",
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-        sx: { cursor: "move" },
-        id: "draggable-dialog"
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: fullScreen ? "100%" : "auto"
+        }
       },
-      /* @__PURE__ */ React.createElement(import_material32.Stack, { direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(import_material32.Box, null, Icon && /* @__PURE__ */ React.createElement(
-        import_material32.Stack,
+      /* @__PURE__ */ React.createElement(
+        import_material32.DialogTitle,
         {
+          fontWeight: 700,
+          fontSize: "1.2rem",
+          display: "flex",
           alignItems: "center",
-          sx: {
-            color: iconColor ? (theme3) => {
-              const paletteColors = [
-                "primary",
-                "secondary",
-                "error",
-                "warning",
-                "info",
-                "success",
-                "tertiary",
-                "accent",
-                "successLight",
-                "orange",
-                "indigo",
-                "teal",
-                "pinkLight",
-                "aqua",
-                "customRed"
-              ];
-              if (paletteColors.includes(iconColor)) {
-                const palette = theme3.palette;
-                return palette[iconColor]?.main || iconColor;
-              }
-              return iconColor;
-            } : (theme3) => theme3.palette.info.main,
-            pr: 0.5
-          }
+          gap: "4px",
+          sx: [
+            fullScreen ? { cursor: "default" } : { cursor: "move" },
+            {
+              flexShrink: 0,
+              py: 2,
+              px: 3
+            },
+            ...Array.isArray(titleSx) ? titleSx : [titleSx]
+          ],
+          id: fullScreen ? void 0 : "draggable-dialog"
         },
-        /* @__PURE__ */ React.createElement(Icon, { size: 20 })
-      )), /* @__PURE__ */ React.createElement(import_material32.Box, null, title))
-    ),
-    /* @__PURE__ */ React.createElement(import_material32.Tooltip, { title: "\u0628\u0633\u062A\u0646" }, /* @__PURE__ */ React.createElement(
-      import_material32.IconButton,
-      {
-        "aria-label": "close",
-        onClick: onClose,
-        sx: {
-          position: "absolute",
-          right: 8,
-          top: 8,
-          color: (theme3) => theme3.palette.grey[500]
+        /* @__PURE__ */ React.createElement(import_material32.Stack, { direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(import_material32.Box, null, Icon && /* @__PURE__ */ React.createElement(
+          import_material32.Stack,
+          {
+            alignItems: "center",
+            sx: {
+              color: iconColor ? (theme3) => {
+                const paletteColors = [
+                  "primary",
+                  "secondary",
+                  "error",
+                  "warning",
+                  "info",
+                  "success",
+                  "tertiary",
+                  "accent",
+                  "successLight",
+                  "orange",
+                  "indigo",
+                  "teal",
+                  "pinkLight",
+                  "aqua",
+                  "customRed"
+                ];
+                if (paletteColors.includes(iconColor)) {
+                  const palette = theme3.palette;
+                  return palette[iconColor]?.main || iconColor;
+                }
+                return iconColor;
+              } : (theme3) => theme3.palette.info.main,
+              pr: 0.5
+            }
+          },
+          /* @__PURE__ */ React.createElement(Icon, { size: 20 })
+        )), /* @__PURE__ */ React.createElement(import_material32.Box, null, title))
+      ),
+      /* @__PURE__ */ React.createElement(import_material32.Tooltip, { title: "\u0628\u0633\u062A\u0646" }, /* @__PURE__ */ React.createElement(
+        import_material32.IconButton,
+        {
+          "aria-label": "close",
+          onClick: onClose,
+          sx: [
+            {
+              position: "absolute",
+              right: 8,
+              top: 8,
+              color: (theme3) => theme3.palette.grey[500]
+            },
+            fullScreen && {
+              top: 12,
+              right: 12
+            }
+          ],
+          disabled: isSubmiting
         },
-        disabled: isSubmiting
-      },
-      /* @__PURE__ */ React.createElement(import_md10.MdClose, null)
-    )),
-    /* @__PURE__ */ React.createElement(import_material32.Divider, null),
-    /* @__PURE__ */ React.createElement(import_material32.DialogContent, null, children),
-    actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material32.DialogActions, null, actions))
+        /* @__PURE__ */ React.createElement(import_md10.MdClose, null)
+      )),
+      /* @__PURE__ */ React.createElement(import_material32.Divider, { sx: { flexShrink: 0 } }),
+      /* @__PURE__ */ React.createElement(
+        import_material32.DialogContent,
+        {
+          sx: [
+            {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "auto",
+              p: 0
+            },
+            ...Array.isArray(contentSx) ? contentSx : [contentSx]
+          ]
+        },
+        /* @__PURE__ */ React.createElement(import_material32.Box, { sx: { p: fullScreen ? 3 : 2, flex: 1, overflow: "auto" } }, children)
+      ),
+      actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        import_material32.DialogActions,
+        {
+          sx: [
+            {
+              flexShrink: 0,
+              py: 2,
+              px: 3
+            },
+            ...Array.isArray(actionsSx) ? actionsSx : [actionsSx]
+          ]
+        },
+        actions
+      ))
+    )
   );
 }
 // Annotate the CommonJS export names for ESM import in node: