@mamrp/components 1.7.1 → 1.7.3

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

@@ -28,13 +28,15 @@ interface AdvancedSearchButtonProps {
     setIsShowFilter: React__default.Dispatch<React__default.SetStateAction<boolean>>;
     color?: "black" | "white";
     title?: string;
-    optional?: any;
-    icon?: any;
+    onToggle?: (value: boolean) => void;
+    icon?: React__default.ReactNode;
     borderRadius?: string;
-    paddingY?: string;
+    paddingY?: number;
     fontSize?: string;
+    backgroundColor?: string;
+    border?: boolean;
 }
-declare function AdvancedSearchButton({ isShowFilter, setIsShowFilter, color, title, optional, icon, borderRadius, paddingY, fontSize, }: AdvancedSearchButtonProps): React__default.JSX.Element;
+declare function AdvancedSearchButton({ isShowFilter, setIsShowFilter, color, title, onToggle, icon, borderRadius, paddingY, fontSize, backgroundColor, border, }: AdvancedSearchButtonProps): React__default.JSX.Element;
 
 declare function SkeletonCard(): React__default.JSX.Element;
 

package/dist/index.d.ts

@@ -28,13 +28,15 @@ interface AdvancedSearchButtonProps {
     setIsShowFilter: React__default.Dispatch<React__default.SetStateAction<boolean>>;
     color?: "black" | "white";
     title?: string;
-    optional?: any;
-    icon?: any;
+    onToggle?: (value: boolean) => void;
+    icon?: React__default.ReactNode;
     borderRadius?: string;
-    paddingY?: string;
+    paddingY?: number;
     fontSize?: string;
+    backgroundColor?: string;
+    border?: boolean;
 }
-declare function AdvancedSearchButton({ isShowFilter, setIsShowFilter, color, title, optional, icon, borderRadius, paddingY, fontSize, }: AdvancedSearchButtonProps): React__default.JSX.Element;
+declare function AdvancedSearchButton({ isShowFilter, setIsShowFilter, color, title, onToggle, icon, borderRadius, paddingY, fontSize, backgroundColor, border, }: AdvancedSearchButtonProps): React__default.JSX.Element;
 
 declare function SkeletonCard(): React__default.JSX.Element;
 

package/dist/index.js

@@ -725,7 +725,6 @@ var import_react3 = __toESM(require("react"));
 var import_io = require("react-icons/io");
 var AnimatedIcon = (0, import_material4.styled)(import_io.IoIosArrowUp, {
   shouldForwardProp: (prop) => prop !== "isShowFilter"
-  // Don't pass isShowFilter to the underlying component
 })(({ isShowFilter }) => ({
   transition: "all 0.5s ease",
   transform: `rotate(${isShowFilter ? 0 : "0.5turn"})`
@@ -735,26 +734,36 @@ function AdvancedSearchButton({
   setIsShowFilter,
   color = "black",
   title = "\u0641\u0631\u0645 \u062C\u0633\u062A\u062C\u0648",
-  optional,
+  onToggle,
   icon,
   borderRadius,
   paddingY,
-  fontSize
+  fontSize,
+  backgroundColor,
+  border = false
 }) {
   const theme3 = (0, import_material4.useTheme)();
+  const isDarkMode = theme3.palette.mode === "dark";
   return /* @__PURE__ */ import_react3.default.createElement(
     import_material4.Button,
     {
       onClick: () => {
         setIsShowFilter((prev) => !prev);
-        optional && optional(false);
+        onToggle?.(false);
       },
       startIcon: /* @__PURE__ */ import_react3.default.createElement(AnimatedIcon, { isShowFilter }),
       sx: {
         color: theme3.palette.text.primary ?? color,
-        borderRadius,
+        borderRadius: borderRadius ?? 2,
         paddingY,
-        fontSize
+        fontSize,
+        backgroundColor,
+        ...border && {
+          border: isDarkMode ? `1px solid rgba(255, 255, 255, 0.23)` : `1px solid rgba(0, 0, 0, 0.23)`
+        },
+        "&:hover": {
+          backgroundColor: backgroundColor ? backgroundColor : isDarkMode ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.04)"
+        }
       },
       fullWidth: true
     },