@mamrp/components 1.4.2 → 1.4.4

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}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [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 * @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 * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = 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          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n        },\n      },\n      datalabels: {\n        display: showDataLabels,\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: (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}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [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 * @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 * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = 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          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n        },\n      },\n      datalabels: {\n        display: showDataLabels,\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: (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}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [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 * @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 * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = 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          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n        },\n      },\n      datalabels: {\n        display: showDataLabels,\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: (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}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [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 * @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 * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = 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          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n        },\n      },\n      datalabels: {\n        display: showDataLabels,\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: (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

@@ -372,39 +372,224 @@ interface DraggablePaperProps extends PaperProps {
 }
 declare function DraggablePaper({ handle, cancel, ...props }: DraggablePaperProps): React$1.JSX.Element;
 
+/**
+ * Props کامپوننت DataTable
+ *
+ * این اینترفیس تمام گزینه‌های قابل تنظیم برای کامپوننت DataTable را تعریف می‌کند
+ * و مستقیماً با خروجی useTableState سازگار است
+ *
+ * @template T - نوع داده‌های جدول (مثال: Car، User، Product)
+ */
 type DataTableProps<T extends Record<string, any>> = {
+    /** آرایه داده‌های جدول */
     data: T[];
+    /** تعریف ستون‌های جدول */
     columns: MRT_ColumnDef<T>[];
+    /** آیا جدول در حال بارگذاری است */
     isLoading?: boolean;
+    /** آیا داده‌ها در حال به‌روزرسانی هستند */
     isRefetching?: boolean;
+    /** وضعیت صفحه‌بندی (مستقیماً از useTableState) */
     pagination: MRT_PaginationState;
+    /** تابع تغییر صفحه‌بندی (setPagination از useTableState) */
     onPaginationChange: (updater: MRT_PaginationState | ((old: MRT_PaginationState) => MRT_PaginationState)) => void;
+    /** تعداد کل رکوردها (از API response) */
     totalRows: number;
+    /** فعال‌سازی صفحه‌بندی دستی (پیش‌فرض: true) */
     manualPagination?: boolean;
+    /** فیلترهای ستون (columnFilters از useTableState) */
     columnFilters?: MRT_ColumnFiltersState;
+    /** تابع تغییر فیلترهای ستون */
     onColumnFiltersChange?: (filters: MRT_ColumnFiltersState | ((old: MRT_ColumnFiltersState) => MRT_ColumnFiltersState)) => void;
+    /** فعال‌سازی فیلترینگ دستی (پیش‌فرض: true) */
     manualFiltering?: boolean;
+    /** تابع پاک کردن فیلترها (clearFilters از useTableState) */
     onClearFilters?: () => void;
+    /** نمایش دکمه پاک کردن فیلترها */
     showClearFiltersButton?: boolean;
+    /** وضعیت مرتب‌سازی (sorting از useTableState) */
     sorting?: MRT_SortingState;
+    /** تابع تغییر مرتب‌سازی (setSorting از useTableState) */
     onSortingChange?: (sorting: MRT_SortingState | ((old: MRT_SortingState) => MRT_SortingState)) => void;
+    /** فعال‌سازی مرتب‌سازی دستی (پیش‌فرض: false) */
     manualSorting?: boolean;
+    /** وضعیت نمایش ستون‌ها (columnVisibility از useTableState) */
+    columnVisibility?: Record<string, boolean>;
+    /** تابع تغییر نمایش ستون‌ها (setColumnVisibility از useTableState) */
+    onColumnVisibilityChange?: (visibility: Record<string, boolean> | ((old: Record<string, boolean>) => Record<string, boolean>)) => void;
+    /** ترتیب ستون‌ها */
+    columnOrder?: string[];
+    /** تابع تغییر ترتیب ستون‌ها */
+    onColumnOrderChange?: (order: string[] | ((old: string[]) => string[])) => void;
+    /** فعال‌سازی header چسبان */
     enableStickyHeader?: boolean;
+    /** حداکثر ارتفاع جدول */
     maxHeight?: string;
+    /** تراکم جدول */
     density?: "comfortable" | "compact" | "spacious";
+    /** امکان تغییر ترتیب ستون‌ها */
     enableColumnOrdering?: boolean;
+    /** فعال‌سازی جستجوی سراسری */
     enableGlobalFilter?: boolean;
+    /** فعال‌سازی انواع فیلتر ستون */
     enableColumnFilterModes?: boolean;
+    /** فعال‌سازی انتخاب سطر */
     enableRowSelection?: boolean;
+    /** رندر کردن اکشن‌های سفارشی بالای جدول */
     renderTopToolbarCustomActions?: (props: {
         table: any;
     }) => React.ReactNode;
+    /** رندر کردن اکشن‌های سفارشی پایین جدول */
     renderBottomToolbarCustomActions?: (props: {
         table: any;
     }) => React.ReactNode;
+    /** گزینه‌های اضافی جدول */
     tableOptions?: Partial<MRT_TableOptions<T>>;
+    /** لوکالیزیشن سفارشی */
     localization?: Record<string, string>;
 };
-declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, }: DataTableProps<T>) => React$1.JSX.Element;
+/**
+ * کامپوننت DataTable - جدول پیشرفته با قابلیت‌های کامل
+ *
+ * این کامپوننت یک wrapper پیشرفته برای Material React Table است که:
+ * - مستقیماً با useTableState یکپارچه می‌شود
+ * - تمام ویژگی‌های مدرن جدول را پشتیبانی می‌کند
+ * - لوکالیزیشن کامل فارسی دارد
+ * - بهینه‌سازی شده برای عملکرد بالا
+ *
+ * ## راهنمای استفاده با useTableState:
+ *
+ * ### مرحله 1: تنظیم useTableState
+ * ```tsx
+ * const tableState = useTableState("my-table", {
+ *   initialPageSize: 25,
+ *   debounceTime: 500,
+ *   sortMapping: {
+ *     name: "NameOrdering",
+ *     status: "StatusOrdering"
+ *   }
+ * });
+ * ```
+ *
+ * ### مرحله 2: فراخوانی API
+ * ```tsx
+ * const { data } = useGetData({
+ *   PageNumber: tableState.pagination.pageIndex + 1,
+ *   PageSize: tableState.pagination.pageSize,
+ *   ...tableState.debouncedFiltring,
+ *   ...tableState.mappedSorting,
+ * });
+ * ```
+ *
+ * ### مرحله 3: تعریف ستون‌ها با فیلتر
+ * ```tsx
+ * const columns = useMemo<MRT_ColumnDef<DataType>[]>(() => [
+ *   {
+ *     accessorKey: "name",
+ *     header: "نام",
+ *     Filter: ({ column }) => (
+ *       <FormInputText
+ *         control={control}
+ *         name="NameFiltering"
+ *         placeholder="فیلتر نام"
+ *       />
+ *     ),
+ *   },
+ *   // سایر ستون‌ها...
+ * ], [control]);
+ * ```
+ *
+ * ### مرحله 4: رندر DataTable
+ * ```tsx
+ * return (
+ *   <DataTable
+ *     data={data?.items || []}
+ *     columns={columns}
+ *     isLoading={isLoading}
+ *     pagination={tableState.pagination}
+ *     onPaginationChange={tableState.setPagination}
+ *     totalRows={data?.totalRecords || 0}
+ *     sorting={tableState.sorting}
+ *     onSortingChange={tableState.setSorting}
+ *     columnVisibility={tableState.columnVisibility}
+ *     onColumnVisibilityChange={tableState.setColumnVisibility}
+ *     onClearFilters={handleClearFilters}
+ *     manualSorting={true}
+ *   />
+ * );
+ * ```
+ *
+ * ## ویژگی‌های کلیدی:
+ *
+ * 📄 **صفحه‌بندی هوشمند**: صفحه‌بندی سمت سرور با همگام‌سازی خودکار
+ * 🔍 **فیلترینگ پیشرفته**: فیلترهای سفارشی با debouncing
+ * 🔀 **مرتب‌سازی قدرتمند**: مرتب‌سازی با نگاشت بک‌اند
+ * 👁️ **مدیریت ستون‌ها**: نمایش/مخفی کردن ستون‌ها با localStorage
+ * 🌍 **لوکالیزیشن**: پشتیبانی کامل از زبان فارسی
+ * ⚡ **بهینه‌سازی**: رندرینگ بهینه با useMemo
+ * 🎨 **قابل تنظیم**: ظاهر و رفتار کاملاً قابل تنظیم
+ *
+ * @template T - نوع داده‌های جدول
+ *
+ * @example
+ * ```tsx
+ * // مثال کامل استفاده
+ * function UsersTable() {
+ *   const { control, watch, reset } = useForm();
+ *
+ *   const tableState = useTableState<UserFilter>("users-table", {
+ *     initialPageSize: 50,
+ *     watch,
+ *     syncFormToFilters: true,
+ *     sortMapping: {
+ *       name: "NameOrdering",
+ *       email: "EmailOrdering"
+ *     }
+ *   });
+ *
+ *   const { data, isLoading } = useGetUsers({
+ *     PageNumber: tableState.pagination.pageIndex + 1,
+ *     PageSize: tableState.pagination.pageSize,
+ *     ...tableState.debouncedFiltring,
+ *     ...tableState.mappedSorting,
+ *   });
+ *
+ *   const columns = useMemo(() => [
+ *     {
+ *       accessorKey: "name",
+ *       header: "نام کاربر",
+ *       Filter: () => (
+ *         <FormInputText
+ *           control={control}
+ *           name="NameFiltering"
+ *           placeholder="جستجو نام"
+ *         />
+ *       ),
+ *     }
+ *   ], [control]);
+ *
+ *   return (
+ *     <DataTable
+ *       data={data?.users || []}
+ *       columns={columns}
+ *       isLoading={isLoading}
+ *       pagination={tableState.pagination}
+ *       onPaginationChange={tableState.setPagination}
+ *       totalRows={data?.totalCount || 0}
+ *       sorting={tableState.sorting}
+ *       onSortingChange={tableState.setSorting}
+ *       columnVisibility={tableState.columnVisibility}
+ *       onColumnVisibilityChange={tableState.setColumnVisibility}
+ *       onClearFilters={() => {
+ *         tableState.clearFilters();
+ *         reset();
+ *       }}
+ *       manualSorting={true}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+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, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, }: DataTableProps<T>) => React$1.JSX.Element;
 
 export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, 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, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };

package/dist/index.d.ts

@@ -372,39 +372,224 @@ interface DraggablePaperProps extends PaperProps {
 }
 declare function DraggablePaper({ handle, cancel, ...props }: DraggablePaperProps): React$1.JSX.Element;
 
+/**
+ * Props کامپوننت DataTable
+ *
+ * این اینترفیس تمام گزینه‌های قابل تنظیم برای کامپوننت DataTable را تعریف می‌کند
+ * و مستقیماً با خروجی useTableState سازگار است
+ *
+ * @template T - نوع داده‌های جدول (مثال: Car، User، Product)
+ */
 type DataTableProps<T extends Record<string, any>> = {
+    /** آرایه داده‌های جدول */
     data: T[];
+    /** تعریف ستون‌های جدول */
     columns: MRT_ColumnDef<T>[];
+    /** آیا جدول در حال بارگذاری است */
     isLoading?: boolean;
+    /** آیا داده‌ها در حال به‌روزرسانی هستند */
     isRefetching?: boolean;
+    /** وضعیت صفحه‌بندی (مستقیماً از useTableState) */
     pagination: MRT_PaginationState;
+    /** تابع تغییر صفحه‌بندی (setPagination از useTableState) */
     onPaginationChange: (updater: MRT_PaginationState | ((old: MRT_PaginationState) => MRT_PaginationState)) => void;
+    /** تعداد کل رکوردها (از API response) */
     totalRows: number;
+    /** فعال‌سازی صفحه‌بندی دستی (پیش‌فرض: true) */
     manualPagination?: boolean;
+    /** فیلترهای ستون (columnFilters از useTableState) */
     columnFilters?: MRT_ColumnFiltersState;
+    /** تابع تغییر فیلترهای ستون */
     onColumnFiltersChange?: (filters: MRT_ColumnFiltersState | ((old: MRT_ColumnFiltersState) => MRT_ColumnFiltersState)) => void;
+    /** فعال‌سازی فیلترینگ دستی (پیش‌فرض: true) */
     manualFiltering?: boolean;
+    /** تابع پاک کردن فیلترها (clearFilters از useTableState) */
     onClearFilters?: () => void;
+    /** نمایش دکمه پاک کردن فیلترها */
     showClearFiltersButton?: boolean;
+    /** وضعیت مرتب‌سازی (sorting از useTableState) */
     sorting?: MRT_SortingState;
+    /** تابع تغییر مرتب‌سازی (setSorting از useTableState) */
     onSortingChange?: (sorting: MRT_SortingState | ((old: MRT_SortingState) => MRT_SortingState)) => void;
+    /** فعال‌سازی مرتب‌سازی دستی (پیش‌فرض: false) */
     manualSorting?: boolean;
+    /** وضعیت نمایش ستون‌ها (columnVisibility از useTableState) */
+    columnVisibility?: Record<string, boolean>;
+    /** تابع تغییر نمایش ستون‌ها (setColumnVisibility از useTableState) */
+    onColumnVisibilityChange?: (visibility: Record<string, boolean> | ((old: Record<string, boolean>) => Record<string, boolean>)) => void;
+    /** ترتیب ستون‌ها */
+    columnOrder?: string[];
+    /** تابع تغییر ترتیب ستون‌ها */
+    onColumnOrderChange?: (order: string[] | ((old: string[]) => string[])) => void;
+    /** فعال‌سازی header چسبان */
     enableStickyHeader?: boolean;
+    /** حداکثر ارتفاع جدول */
     maxHeight?: string;
+    /** تراکم جدول */
     density?: "comfortable" | "compact" | "spacious";
+    /** امکان تغییر ترتیب ستون‌ها */
     enableColumnOrdering?: boolean;
+    /** فعال‌سازی جستجوی سراسری */
     enableGlobalFilter?: boolean;
+    /** فعال‌سازی انواع فیلتر ستون */
     enableColumnFilterModes?: boolean;
+    /** فعال‌سازی انتخاب سطر */
     enableRowSelection?: boolean;
+    /** رندر کردن اکشن‌های سفارشی بالای جدول */
     renderTopToolbarCustomActions?: (props: {
         table: any;
     }) => React.ReactNode;
+    /** رندر کردن اکشن‌های سفارشی پایین جدول */
     renderBottomToolbarCustomActions?: (props: {
         table: any;
     }) => React.ReactNode;
+    /** گزینه‌های اضافی جدول */
     tableOptions?: Partial<MRT_TableOptions<T>>;
+    /** لوکالیزیشن سفارشی */
     localization?: Record<string, string>;
 };
-declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, }: DataTableProps<T>) => React$1.JSX.Element;
+/**
+ * کامپوننت DataTable - جدول پیشرفته با قابلیت‌های کامل
+ *
+ * این کامپوننت یک wrapper پیشرفته برای Material React Table است که:
+ * - مستقیماً با useTableState یکپارچه می‌شود
+ * - تمام ویژگی‌های مدرن جدول را پشتیبانی می‌کند
+ * - لوکالیزیشن کامل فارسی دارد
+ * - بهینه‌سازی شده برای عملکرد بالا
+ *
+ * ## راهنمای استفاده با useTableState:
+ *
+ * ### مرحله 1: تنظیم useTableState
+ * ```tsx
+ * const tableState = useTableState("my-table", {
+ *   initialPageSize: 25,
+ *   debounceTime: 500,
+ *   sortMapping: {
+ *     name: "NameOrdering",
+ *     status: "StatusOrdering"
+ *   }
+ * });
+ * ```
+ *
+ * ### مرحله 2: فراخوانی API
+ * ```tsx
+ * const { data } = useGetData({
+ *   PageNumber: tableState.pagination.pageIndex + 1,
+ *   PageSize: tableState.pagination.pageSize,
+ *   ...tableState.debouncedFiltring,
+ *   ...tableState.mappedSorting,
+ * });
+ * ```
+ *
+ * ### مرحله 3: تعریف ستون‌ها با فیلتر
+ * ```tsx
+ * const columns = useMemo<MRT_ColumnDef<DataType>[]>(() => [
+ *   {
+ *     accessorKey: "name",
+ *     header: "نام",
+ *     Filter: ({ column }) => (
+ *       <FormInputText
+ *         control={control}
+ *         name="NameFiltering"
+ *         placeholder="فیلتر نام"
+ *       />
+ *     ),
+ *   },
+ *   // سایر ستون‌ها...
+ * ], [control]);
+ * ```
+ *
+ * ### مرحله 4: رندر DataTable
+ * ```tsx
+ * return (
+ *   <DataTable
+ *     data={data?.items || []}
+ *     columns={columns}
+ *     isLoading={isLoading}
+ *     pagination={tableState.pagination}
+ *     onPaginationChange={tableState.setPagination}
+ *     totalRows={data?.totalRecords || 0}
+ *     sorting={tableState.sorting}
+ *     onSortingChange={tableState.setSorting}
+ *     columnVisibility={tableState.columnVisibility}
+ *     onColumnVisibilityChange={tableState.setColumnVisibility}
+ *     onClearFilters={handleClearFilters}
+ *     manualSorting={true}
+ *   />
+ * );
+ * ```
+ *
+ * ## ویژگی‌های کلیدی:
+ *
+ * 📄 **صفحه‌بندی هوشمند**: صفحه‌بندی سمت سرور با همگام‌سازی خودکار
+ * 🔍 **فیلترینگ پیشرفته**: فیلترهای سفارشی با debouncing
+ * 🔀 **مرتب‌سازی قدرتمند**: مرتب‌سازی با نگاشت بک‌اند
+ * 👁️ **مدیریت ستون‌ها**: نمایش/مخفی کردن ستون‌ها با localStorage
+ * 🌍 **لوکالیزیشن**: پشتیبانی کامل از زبان فارسی
+ * ⚡ **بهینه‌سازی**: رندرینگ بهینه با useMemo
+ * 🎨 **قابل تنظیم**: ظاهر و رفتار کاملاً قابل تنظیم
+ *
+ * @template T - نوع داده‌های جدول
+ *
+ * @example
+ * ```tsx
+ * // مثال کامل استفاده
+ * function UsersTable() {
+ *   const { control, watch, reset } = useForm();
+ *
+ *   const tableState = useTableState<UserFilter>("users-table", {
+ *     initialPageSize: 50,
+ *     watch,
+ *     syncFormToFilters: true,
+ *     sortMapping: {
+ *       name: "NameOrdering",
+ *       email: "EmailOrdering"
+ *     }
+ *   });
+ *
+ *   const { data, isLoading } = useGetUsers({
+ *     PageNumber: tableState.pagination.pageIndex + 1,
+ *     PageSize: tableState.pagination.pageSize,
+ *     ...tableState.debouncedFiltring,
+ *     ...tableState.mappedSorting,
+ *   });
+ *
+ *   const columns = useMemo(() => [
+ *     {
+ *       accessorKey: "name",
+ *       header: "نام کاربر",
+ *       Filter: () => (
+ *         <FormInputText
+ *           control={control}
+ *           name="NameFiltering"
+ *           placeholder="جستجو نام"
+ *         />
+ *       ),
+ *     }
+ *   ], [control]);
+ *
+ *   return (
+ *     <DataTable
+ *       data={data?.users || []}
+ *       columns={columns}
+ *       isLoading={isLoading}
+ *       pagination={tableState.pagination}
+ *       onPaginationChange={tableState.setPagination}
+ *       totalRows={data?.totalCount || 0}
+ *       sorting={tableState.sorting}
+ *       onSortingChange={tableState.setSorting}
+ *       columnVisibility={tableState.columnVisibility}
+ *       onColumnVisibilityChange={tableState.setColumnVisibility}
+ *       onClearFilters={() => {
+ *         tableState.clearFilters();
+ *         reset();
+ *       }}
+ *       manualSorting={true}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+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, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, }: DataTableProps<T>) => React$1.JSX.Element;
 
 export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, 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, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };