@mamrp/components 1.7.15 → 1.7.17

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\";\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"]}
+{"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"]}

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\";\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"]}
+{"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":"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","names":["labels","ChartJS","Tooltip","Legend","Box"]}

package/dist/index.d.mts

@@ -331,8 +331,9 @@ type UploadImageProps$1<T extends FieldValues> = {
     height?: string;
     allowGallery?: boolean;
     imageFit?: "contain" | "cover";
+    disableCamera?: boolean;
 };
-declare const UploadImage$1: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, }: UploadImageProps$1<T>) => React__default.JSX.Element;
+declare const UploadImage$1: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, disableCamera, }: UploadImageProps$1<T>) => React__default.JSX.Element;
 
 type UploadImageProps<T extends FieldValues> = {
     placeholder: string;
@@ -610,6 +611,18 @@ type DataTableProps<T extends Record<string, any>> = {
  */
 declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, showColumnFilters, onShowColumnFiltersChange, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, enableColumnVirtualization, columnVirtualizerOptions, enableColumnResizing, }: DataTableProps<T>) => React$1.JSX.Element;
 
+declare function imgViewer({ open, handleClose, src, isLoading, title, noResetBtn, noRotate, noZoom, unoptimized, }: {
+    open: boolean;
+    handleClose: () => void;
+    isLoading: boolean;
+    src: string | undefined;
+    title?: string;
+    unoptimized?: boolean;
+    noResetBtn?: boolean;
+    noRotate?: boolean;
+    noZoom?: boolean;
+}): React$1.JSX.Element;
+
 type PaletteColor = "primary" | "secondary" | "error" | "warning" | "info" | "success" | "tertiary" | "accent" | "successLight" | "orange" | "indigo" | "teal" | "pinkLight" | "aqua" | "customRed";
 interface CustomDialogProps {
     title: string;
@@ -625,4 +638,4 @@ interface CustomDialogProps {
 }
 declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, children, actions, isSubmiting, }: 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, 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 };
+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

@@ -331,8 +331,9 @@ type UploadImageProps$1<T extends FieldValues> = {
     height?: string;
     allowGallery?: boolean;
     imageFit?: "contain" | "cover";
+    disableCamera?: boolean;
 };
-declare const UploadImage$1: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, }: UploadImageProps$1<T>) => React__default.JSX.Element;
+declare const UploadImage$1: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, disableCamera, }: UploadImageProps$1<T>) => React__default.JSX.Element;
 
 type UploadImageProps<T extends FieldValues> = {
     placeholder: string;
@@ -610,6 +611,18 @@ type DataTableProps<T extends Record<string, any>> = {
  */
 declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, showColumnFilters, onShowColumnFiltersChange, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, enableColumnVirtualization, columnVirtualizerOptions, enableColumnResizing, }: DataTableProps<T>) => React$1.JSX.Element;
 
+declare function imgViewer({ open, handleClose, src, isLoading, title, noResetBtn, noRotate, noZoom, unoptimized, }: {
+    open: boolean;
+    handleClose: () => void;
+    isLoading: boolean;
+    src: string | undefined;
+    title?: string;
+    unoptimized?: boolean;
+    noResetBtn?: boolean;
+    noRotate?: boolean;
+    noZoom?: boolean;
+}): React$1.JSX.Element;
+
 type PaletteColor = "primary" | "secondary" | "error" | "warning" | "info" | "success" | "tertiary" | "accent" | "successLight" | "orange" | "indigo" | "teal" | "pinkLight" | "aqua" | "customRed";
 interface CustomDialogProps {
     title: string;
@@ -625,4 +638,4 @@ interface CustomDialogProps {
 }
 declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, children, actions, isSubmiting, }: 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, 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 };
+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

@@ -49,6 +49,7 @@ __export(src_exports, {
   FormInputNumber: () => number_type_default,
   FormInputText: () => text_type_default,
   HorizontalStepper: () => HorizontalStepper,
+  ImgViewer: () => imgViewer,
   LicensePlate: () => LicensePlate,
   MobileDateTimePicker: () => mobile_date_time_picker_default,
   Modal: () => ConfirmationDialog2,
@@ -226,8 +227,8 @@ function LicensePlate({
         sx: {
           backgroundColor: "#172554",
           width: size === "small" ? "30px" : "36px",
-          minHeight: size === "small" ? "40px" : "52px",
-          maxHeight: size === "small" ? "40px" : "52px",
+          minHeight: "52px",
+          maxHeight: "52px",
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -2450,7 +2451,7 @@ function SearchLicensePlate({
         sx: {
           backgroundColor: "#172554",
           width: "2.25rem",
-          height: "3.25rem",
+          height: "3rem",
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -3919,7 +3920,8 @@ var UploadImage = ({
   setValue,
   height,
   allowGallery = false,
-  imageFit = "cover"
+  imageFit = "cover",
+  disableCamera = false
 }) => {
   const compressImage = (file, quality = 0.8, maxWidth = 800, maxHeight = 800) => {
     return new Promise((resolve) => {
@@ -4030,7 +4032,7 @@ var UploadImage = ({
             /* @__PURE__ */ import_react23.default.createElement(import_material22.Box, { sx: { paddingBottom: "0.5rem" } }, /* @__PURE__ */ import_react23.default.createElement(import_gr.GrUpload, null)),
             placeholder
           ),
-          allowGallery && /* @__PURE__ */ import_react23.default.createElement(import_material22.Stack, { spacing: 1.5 }, /* @__PURE__ */ import_react23.default.createElement(
+          allowGallery && /* @__PURE__ */ import_react23.default.createElement(import_material22.Stack, { spacing: 1.5 }, !disableCamera && /* @__PURE__ */ import_react23.default.createElement(
             import_material22.Button,
             {
               sx: { width: "9rem" },
@@ -5053,9 +5055,176 @@ var DataTable = ({
 };
 var data_table_default = DataTable;
 
-// src/custom-dialog/index.tsx
+// src/img-viewer/index.tsx
 var import_material31 = require("@mui/material");
 var import_md9 = require("react-icons/md");
+var import_image6 = __toESM(require("next/image"));
+var import_react31 = require("react");
+function imgViewer({
+  open,
+  handleClose,
+  src,
+  isLoading,
+  title = "",
+  noResetBtn = false,
+  noRotate = false,
+  noZoom = false,
+  unoptimized = false
+}) {
+  const [zoom, setZoom] = (0, import_react31.useState)(1);
+  const [rotate, setRotate] = (0, import_react31.useState)(0);
+  const [loading, setLoading] = (0, import_react31.useState)(true);
+  const [position, setPosition] = (0, import_react31.useState)({ x: 0, y: 0 });
+  const [dragging, setDragging] = (0, import_react31.useState)(false);
+  const [startMouse, setStartMouse] = (0, import_react31.useState)({ x: 0, y: 0 });
+  const [startOffset, setStartOffset] = (0, import_react31.useState)({ x: 0, y: 0 });
+  const reset = () => {
+    setZoom(1);
+    setRotate(0);
+    setPosition({ x: 0, y: 0 });
+  };
+  const handleWheel = (0, import_react31.useCallback)((e) => {
+    e.preventDefault();
+    const delta = -e.deltaY * 1e-3;
+    setZoom((z) => Math.min(5, Math.max(0.2, z + delta)));
+  }, []);
+  const handleMouseDown = (e) => {
+    setDragging(true);
+    setStartMouse({ x: e.clientX, y: e.clientY });
+    setStartOffset({ ...position });
+  };
+  const handleMouseMove = (e) => {
+    if (!dragging) return;
+    const dx = e.clientX - startMouse.x;
+    const dy = e.clientY - startMouse.y;
+    setPosition({
+      x: startOffset.x - dx,
+      y: startOffset.y + dy
+    });
+  };
+  const handleMouseUp = () => setDragging(false);
+  (0, import_react31.useEffect)(() => {
+    if (dragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragging, startMouse, startOffset]);
+  (0, import_react31.useEffect)(() => {
+    if (open) reset();
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(
+    import_material31.Dialog,
+    {
+      open,
+      onClose: handleClose,
+      maxWidth: "xl",
+      fullWidth: true,
+      sx: {
+        "& .MuiPaper-root": {
+          borderRadius: 3,
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      import_material31.Box,
+      {
+        sx: {
+          position: "relative",
+          width: "100%",
+          height: "90vh",
+          bgcolor: "rgba(17,17,17,0.9)",
+          overflow: "hidden",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        onWheel: handleWheel
+      },
+      /* @__PURE__ */ React.createElement(
+        import_material31.Box,
+        {
+          sx: {
+            position: "absolute",
+            top: 10,
+            left: 10,
+            zIndex: 20,
+            display: "flex",
+            gap: 1,
+            alignItems: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: handleClose }, /* @__PURE__ */ React.createElement(import_md9.MdClose, { color: "white" })),
+        !noResetBtn && /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: reset }, /* @__PURE__ */ React.createElement("span", { style: { color: "white", fontSize: "0.9rem" } }, "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC")),
+        !noRotate && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setRotate((r) => r - 90) }, /* @__PURE__ */ React.createElement(import_md9.MdRotateLeft, { color: "white" })), /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setRotate((r) => r + 90) }, /* @__PURE__ */ React.createElement(import_md9.MdRotateRight, { color: "white" }))),
+        !noZoom && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setZoom((z) => z + 0.2) }, /* @__PURE__ */ React.createElement(import_md9.MdZoomIn, { color: "white" })), /* @__PURE__ */ React.createElement(
+          import_material31.IconButton,
+          {
+            onClick: () => setZoom((z) => Math.max(0.2, z - 0.2))
+          },
+          /* @__PURE__ */ React.createElement(import_md9.MdZoomOut, { color: "white" })
+        )),
+        /* @__PURE__ */ React.createElement(import_material31.Typography, { color: "white" }, title)
+      ),
+      (isLoading || loading) && /* @__PURE__ */ React.createElement(
+        import_material31.Box,
+        {
+          sx: {
+            position: "absolute",
+            zIndex: 10,
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            color: "white"
+          }
+        },
+        /* @__PURE__ */ React.createElement(import_material31.CircularProgress, { color: "inherit" })
+      ),
+      /* @__PURE__ */ React.createElement(
+        import_material31.Box,
+        {
+          onMouseDown: handleMouseDown,
+          sx: {
+            position: "relative",
+            cursor: dragging ? "grabbing" : "grab",
+            transform: `translate(${position.x}px, ${position.y}px) scale(${zoom}) rotate(${rotate}deg)`,
+            transition: dragging ? "none" : "transform 0.3s ease",
+            zIndex: 5
+          }
+        },
+        src && !isLoading && /* @__PURE__ */ React.createElement(
+          import_image6.default,
+          {
+            src,
+            alt: title,
+            width: 1e3,
+            height: 800,
+            onLoad: () => setLoading(false),
+            onError: () => setLoading(false),
+            style: {
+              objectFit: "contain",
+              userSelect: "none",
+              pointerEvents: "none"
+            },
+            unoptimized,
+            ...unoptimized ? { loader: ({ src: src2 }) => src2 } : { loader: void 0 }
+          }
+        )
+      )
+    )
+  );
+}
+
+// src/custom-dialog/index.tsx
+var import_material32 = require("@mui/material");
+var import_md10 = require("react-icons/md");
 function CustomDialog({
   title,
   icon: Icon,
@@ -5075,7 +5244,7 @@ function CustomDialog({
     onClose();
   };
   return /* @__PURE__ */ React.createElement(
-    import_material31.Dialog,
+    import_material32.Dialog,
     {
       open,
       onClose: handleClose,
@@ -5085,7 +5254,7 @@ function CustomDialog({
       disableScrollLock: true
     },
     /* @__PURE__ */ React.createElement(
-      import_material31.DialogTitle,
+      import_material32.DialogTitle,
       {
         fontWeight: 700,
         fontSize: "1.2rem",
@@ -5095,8 +5264,8 @@ function CustomDialog({
         sx: { cursor: "move" },
         id: "draggable-dialog"
       },
-      /* @__PURE__ */ React.createElement(import_material31.Stack, { direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(import_material31.Box, null, Icon && /* @__PURE__ */ React.createElement(
-        import_material31.Stack,
+      /* @__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: {
@@ -5128,10 +5297,10 @@ function CustomDialog({
           }
         },
         /* @__PURE__ */ React.createElement(Icon, { size: 20 })
-      )), /* @__PURE__ */ React.createElement(import_material31.Box, null, title))
+      )), /* @__PURE__ */ React.createElement(import_material32.Box, null, title))
     ),
-    /* @__PURE__ */ React.createElement(import_material31.Tooltip, { title: "\u0628\u0633\u062A\u0646" }, /* @__PURE__ */ React.createElement(
-      import_material31.IconButton,
+    /* @__PURE__ */ React.createElement(import_material32.Tooltip, { title: "\u0628\u0633\u062A\u0646" }, /* @__PURE__ */ React.createElement(
+      import_material32.IconButton,
       {
         "aria-label": "close",
         onClick: onClose,
@@ -5143,11 +5312,11 @@ function CustomDialog({
         },
         disabled: isSubmiting
       },
-      /* @__PURE__ */ React.createElement(import_md9.MdClose, null)
+      /* @__PURE__ */ React.createElement(import_md10.MdClose, null)
     )),
-    /* @__PURE__ */ React.createElement(import_material31.Divider, null),
-    /* @__PURE__ */ React.createElement(import_material31.DialogContent, null, children),
-    actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material31.DialogActions, null, actions))
+    /* @__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))
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -5171,6 +5340,7 @@ function CustomDialog({
   FormInputNumber,
   FormInputText,
   HorizontalStepper,
+  ImgViewer,
   LicensePlate,
   MobileDateTimePicker,
   Modal,