@mamrp/components 1.7.24 → 1.7.26

package/dist/index.d.mts

@@ -404,6 +404,8 @@ type DataTableProps<T extends Record<string, any>> = {
     totalRows: number;
     /** فعال‌سازی صفحه‌بندی دستی (پیش‌فرض: true) */
     manualPagination?: boolean;
+    /** غیرفعال کردن نمایش پیجینیشن (پیش‌فرض: false) */
+    disablePagination?: boolean;
     /** فیلترهای ستون (columnFilters از useTableState) */
     columnFilters?: MRT_ColumnFiltersState;
     /** تابع تغییر فیلترهای ستون */
@@ -462,8 +464,14 @@ type DataTableProps<T extends Record<string, any>> = {
     enableColumnVirtualization?: boolean;
     /** گزینه‌های مجازی‌سازی ستون‌ها */
     columnVirtualizerOptions?: MRT_TableOptions<T>["columnVirtualizerOptions"];
-    /** فعال‌سازی تغییر اندازه ستون‌ها */
+    /** فعال‌سازی تغییر اندازه ستون‌ها (پیش‌فرض: false) */
     enableColumnResizing?: boolean;
+    /** حالت چیدمان جدول برای کنترل عرض ستون‌ها (پیش‌فرض: "semantic") */
+    layoutMode?: "semantic" | "grid" | "grid-no-grow";
+    /** رندر کردن پنل جزئیات برای هر سطر (expandable rows) */
+    renderDetailPanel?: MRT_TableOptions<T>["renderDetailPanel"];
+    /** تابع برای تازه‌سازی داده‌ها - دکمه refresh در تولبار نمایش داده می‌شود */
+    refetch?: () => void;
 };
 /**
  * کامپوننت DataTable - جدول پیشرفته با قابلیت‌های کامل
@@ -490,7 +498,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *
  * ### مرحله 2: فراخوانی API
  * ```tsx
- * const { data } = useGetData({
+ * const { data, refetch } = useGetData({
  *   PageNumber: tableState.pagination.pageIndex + 1,
  *   PageSize: tableState.pagination.pageSize,
  *   ...tableState.debouncedFiltring,
@@ -504,6 +512,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *   {
  *     accessorKey: "name",
  *     header: "نام",
+ *     size: 200, // عرض ستون
  *     Filter: ({ column }) => (
  *       <FormInputText
  *         control={control}
@@ -534,6 +543,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *     onShowColumnFiltersChange={setShowFilters}
  *     onClearFilters={handleClearFilters}
  *     manualSorting={true}
+ *     refetch={refetch}
  *   />
  * );
  * ```
@@ -547,12 +557,69 @@ type DataTableProps<T extends Record<string, any>> = {
  * 🌍 **لوکالیزیشن**: پشتیبانی کامل از زبان فارسی
  * ⚡ **بهینه‌سازی**: رندرینگ بهینه با useMemo و مجازی‌سازی ستون‌ها برای عملکرد بالا
  * 🎨 **قابل تنظیم**: ظاهر و رفتار کاملاً قابل تنظیم
+ * 🔄 **تازه‌سازی**: دکمه refresh برای بارگذاری مجدد داده‌ها
+ * 📐 **تغییر اندازه ستون‌ها**: امکان تغییر عرض ستون‌ها توسط کاربر
+ * 📋 **پنل جزئیات**: نمایش جزئیات بیشتر برای هر سطر (expandable rows)
+ *
+ * ## Props مهم:
+ *
+ * | Prop | نوع | پیش‌فرض | توضیحات |
+ * |------|-----|---------|---------|
+ * | `data` | `T[]` | - | آرایه داده‌های جدول |
+ * | `columns` | `MRT_ColumnDef<T>[]` | - | تعریف ستون‌های جدول |
+ * | `pagination` | `MRT_PaginationState` | - | وضعیت صفحه‌بندی |
+ * | `totalRows` | `number` | - | تعداد کل رکوردها |
+ * | `isLoading` | `boolean` | `false` | وضعیت بارگذاری |
+ * | `disablePagination` | `boolean` | `false` | غیرفعال کردن پیجینیشن |
+ * | `manualSorting` | `boolean` | `false` | مرتب‌سازی سمت سرور |
+ * | `enableColumnResizing` | `boolean` | `false` | امکان تغییر عرض ستون |
+ * | `layoutMode` | `string` | `"semantic"` | حالت چیدمان (`"grid"` برای عرض ثابت) |
+ * | `refetch` | `() => void` | - | تابع تازه‌سازی داده‌ها |
  *
  * @template T - نوع داده‌های جدول
  *
  * @example
  * ```tsx
- * // مثال کامل استفاده
+ * // مثال ساده
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   pagination={{ pageIndex: 0, pageSize: 10 }}
+ *   onPaginationChange={setPagination}
+ *   totalRows={100}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // مثال با تغییر اندازه ستون
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   pagination={pagination}
+ *   onPaginationChange={setPagination}
+ *   totalRows={100}
+ *   enableColumnResizing={true}
+ *   layoutMode="grid"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // مثال بدون پیجینیشن
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   pagination={{ pageIndex: 0, pageSize: 100 }}
+ *   onPaginationChange={() => {}}
+ *   totalRows={users.length}
+ *   disablePagination={true}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // مثال کامل با همه قابلیت‌ها
  * function UsersTable() {
  *   const { control, watch, reset } = useForm();
  *
@@ -566,7 +633,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *     }
  *   });
  *
- *   const { data, isLoading } = useGetUsers({
+ *   const { data, isLoading, refetch } = useGetUsers({
  *     PageNumber: tableState.pagination.pageIndex + 1,
  *     PageSize: tableState.pagination.pageSize,
  *     ...tableState.debouncedFiltring,
@@ -577,6 +644,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *     {
  *       accessorKey: "name",
  *       header: "نام کاربر",
+ *       size: 200,
  *       Filter: () => (
  *         <FormInputText
  *           control={control}
@@ -604,12 +672,20 @@ type DataTableProps<T extends Record<string, any>> = {
  *         reset();
  *       }}
  *       manualSorting={true}
+ *       enableColumnResizing={true}
+ *       layoutMode="grid"
+ *       refetch={refetch}
+ *       renderDetailPanel={({ row }) => (
+ *         <Box p={2}>
+ *           <Typography>جزئیات کاربر: {row.original.name}</Typography>
+ *         </Box>
+ *       )}
  *     />
  *   );
  * }
  * ```
  */
-declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, showColumnFilters, onShowColumnFiltersChange, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, enableColumnVirtualization, columnVirtualizerOptions, enableColumnResizing, }: DataTableProps<T>) => React$1.JSX.Element;
+declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, disablePagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, showColumnFilters, onShowColumnFiltersChange, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, enableColumnVirtualization, columnVirtualizerOptions, enableColumnResizing, layoutMode, renderDetailPanel, refetch, }: DataTableProps<T>) => React$1.JSX.Element;
 
 declare function imgViewer({ open, handleClose, src, isLoading, title, noResetBtn, noRotate, noZoom, unoptimized, }: {
     open: boolean;

package/dist/index.d.ts

@@ -404,6 +404,8 @@ type DataTableProps<T extends Record<string, any>> = {
     totalRows: number;
     /** فعال‌سازی صفحه‌بندی دستی (پیش‌فرض: true) */
     manualPagination?: boolean;
+    /** غیرفعال کردن نمایش پیجینیشن (پیش‌فرض: false) */
+    disablePagination?: boolean;
     /** فیلترهای ستون (columnFilters از useTableState) */
     columnFilters?: MRT_ColumnFiltersState;
     /** تابع تغییر فیلترهای ستون */
@@ -462,8 +464,14 @@ type DataTableProps<T extends Record<string, any>> = {
     enableColumnVirtualization?: boolean;
     /** گزینه‌های مجازی‌سازی ستون‌ها */
     columnVirtualizerOptions?: MRT_TableOptions<T>["columnVirtualizerOptions"];
-    /** فعال‌سازی تغییر اندازه ستون‌ها */
+    /** فعال‌سازی تغییر اندازه ستون‌ها (پیش‌فرض: false) */
     enableColumnResizing?: boolean;
+    /** حالت چیدمان جدول برای کنترل عرض ستون‌ها (پیش‌فرض: "semantic") */
+    layoutMode?: "semantic" | "grid" | "grid-no-grow";
+    /** رندر کردن پنل جزئیات برای هر سطر (expandable rows) */
+    renderDetailPanel?: MRT_TableOptions<T>["renderDetailPanel"];
+    /** تابع برای تازه‌سازی داده‌ها - دکمه refresh در تولبار نمایش داده می‌شود */
+    refetch?: () => void;
 };
 /**
  * کامپوننت DataTable - جدول پیشرفته با قابلیت‌های کامل
@@ -490,7 +498,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *
  * ### مرحله 2: فراخوانی API
  * ```tsx
- * const { data } = useGetData({
+ * const { data, refetch } = useGetData({
  *   PageNumber: tableState.pagination.pageIndex + 1,
  *   PageSize: tableState.pagination.pageSize,
  *   ...tableState.debouncedFiltring,
@@ -504,6 +512,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *   {
  *     accessorKey: "name",
  *     header: "نام",
+ *     size: 200, // عرض ستون
  *     Filter: ({ column }) => (
  *       <FormInputText
  *         control={control}
@@ -534,6 +543,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *     onShowColumnFiltersChange={setShowFilters}
  *     onClearFilters={handleClearFilters}
  *     manualSorting={true}
+ *     refetch={refetch}
  *   />
  * );
  * ```
@@ -547,12 +557,69 @@ type DataTableProps<T extends Record<string, any>> = {
  * 🌍 **لوکالیزیشن**: پشتیبانی کامل از زبان فارسی
  * ⚡ **بهینه‌سازی**: رندرینگ بهینه با useMemo و مجازی‌سازی ستون‌ها برای عملکرد بالا
  * 🎨 **قابل تنظیم**: ظاهر و رفتار کاملاً قابل تنظیم
+ * 🔄 **تازه‌سازی**: دکمه refresh برای بارگذاری مجدد داده‌ها
+ * 📐 **تغییر اندازه ستون‌ها**: امکان تغییر عرض ستون‌ها توسط کاربر
+ * 📋 **پنل جزئیات**: نمایش جزئیات بیشتر برای هر سطر (expandable rows)
+ *
+ * ## Props مهم:
+ *
+ * | Prop | نوع | پیش‌فرض | توضیحات |
+ * |------|-----|---------|---------|
+ * | `data` | `T[]` | - | آرایه داده‌های جدول |
+ * | `columns` | `MRT_ColumnDef<T>[]` | - | تعریف ستون‌های جدول |
+ * | `pagination` | `MRT_PaginationState` | - | وضعیت صفحه‌بندی |
+ * | `totalRows` | `number` | - | تعداد کل رکوردها |
+ * | `isLoading` | `boolean` | `false` | وضعیت بارگذاری |
+ * | `disablePagination` | `boolean` | `false` | غیرفعال کردن پیجینیشن |
+ * | `manualSorting` | `boolean` | `false` | مرتب‌سازی سمت سرور |
+ * | `enableColumnResizing` | `boolean` | `false` | امکان تغییر عرض ستون |
+ * | `layoutMode` | `string` | `"semantic"` | حالت چیدمان (`"grid"` برای عرض ثابت) |
+ * | `refetch` | `() => void` | - | تابع تازه‌سازی داده‌ها |
  *
  * @template T - نوع داده‌های جدول
  *
  * @example
  * ```tsx
- * // مثال کامل استفاده
+ * // مثال ساده
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   pagination={{ pageIndex: 0, pageSize: 10 }}
+ *   onPaginationChange={setPagination}
+ *   totalRows={100}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // مثال با تغییر اندازه ستون
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   pagination={pagination}
+ *   onPaginationChange={setPagination}
+ *   totalRows={100}
+ *   enableColumnResizing={true}
+ *   layoutMode="grid"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // مثال بدون پیجینیشن
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   pagination={{ pageIndex: 0, pageSize: 100 }}
+ *   onPaginationChange={() => {}}
+ *   totalRows={users.length}
+ *   disablePagination={true}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // مثال کامل با همه قابلیت‌ها
  * function UsersTable() {
  *   const { control, watch, reset } = useForm();
  *
@@ -566,7 +633,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *     }
  *   });
  *
- *   const { data, isLoading } = useGetUsers({
+ *   const { data, isLoading, refetch } = useGetUsers({
  *     PageNumber: tableState.pagination.pageIndex + 1,
  *     PageSize: tableState.pagination.pageSize,
  *     ...tableState.debouncedFiltring,
@@ -577,6 +644,7 @@ type DataTableProps<T extends Record<string, any>> = {
  *     {
  *       accessorKey: "name",
  *       header: "نام کاربر",
+ *       size: 200,
  *       Filter: () => (
  *         <FormInputText
  *           control={control}
@@ -604,12 +672,20 @@ type DataTableProps<T extends Record<string, any>> = {
  *         reset();
  *       }}
  *       manualSorting={true}
+ *       enableColumnResizing={true}
+ *       layoutMode="grid"
+ *       refetch={refetch}
+ *       renderDetailPanel={({ row }) => (
+ *         <Box p={2}>
+ *           <Typography>جزئیات کاربر: {row.original.name}</Typography>
+ *         </Box>
+ *       )}
  *     />
  *   );
  * }
  * ```
  */
-declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, showColumnFilters, onShowColumnFiltersChange, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, enableColumnVirtualization, columnVirtualizerOptions, enableColumnResizing, }: DataTableProps<T>) => React$1.JSX.Element;
+declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, disablePagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, showColumnFilters, onShowColumnFiltersChange, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, enableColumnVirtualization, columnVirtualizerOptions, enableColumnResizing, layoutMode, renderDetailPanel, refetch, }: DataTableProps<T>) => React$1.JSX.Element;
 
 declare function imgViewer({ open, handleClose, src, isLoading, title, noResetBtn, noRotate, noZoom, unoptimized, }: {
     open: boolean;

package/dist/index.js

@@ -4918,6 +4918,7 @@ var import_material30 = require("@mui/material");
 var import_material_react_table = require("material-react-table");
 var import_fa4 = require("material-react-table/locales/fa");
 var import_react30 = require("react");
+var import_md9 = require("react-icons/md");
 var customLocalization = {
   ...import_fa4.MRT_Localization_FA,
   mrt_columns_showHide_resetOrder: "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC \u062A\u0631\u062A\u06CC\u0628"
@@ -4931,6 +4932,7 @@ var DataTable = ({
   onPaginationChange,
   totalRows,
   manualPagination = true,
+  disablePagination = false,
   columnFilters = [],
   onColumnFiltersChange,
   manualFiltering = true,
@@ -4958,22 +4960,26 @@ var DataTable = ({
   localization = customLocalization,
   enableColumnVirtualization = false,
   columnVirtualizerOptions = { overscan: 10 },
-  enableColumnResizing = false
+  enableColumnResizing = false,
+  layoutMode = "semantic",
+  renderDetailPanel,
+  refetch
 }) => {
   const memoizedColumns = (0, import_react30.useMemo)(() => columns, [columns]);
   const memoizedData = (0, import_react30.useMemo)(() => data, [data]);
   const defaultRenderTopToolbarCustomActions = ({ table: table2 }) => {
     const currentShowFilters = showColumnFilters !== void 0 ? showColumnFilters : table2.getState().showColumnFilters;
-    if (!currentShowFilters || !showClearFiltersButton || !onClearFilters)
-      return null;
-    return /* @__PURE__ */ React.createElement(import_material30.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(
+    const showClearButton = currentShowFilters && showClearFiltersButton && onClearFilters;
+    return /* @__PURE__ */ React.createElement(
       import_material30.Box,
       {
         display: "flex",
         alignItems: "center",
-        justifyContent: "flex-start"
+        justifyContent: "flex-start",
+        gap: 1
       },
-      /* @__PURE__ */ React.createElement(
+      refetch && /* @__PURE__ */ React.createElement(import_material30.Tooltip, { arrow: true, title: "\u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06CC" }, /* @__PURE__ */ React.createElement(import_material30.IconButton, { onClick: () => refetch() }, /* @__PURE__ */ React.createElement(import_md9.MdOutlineRefresh, null))),
+      showClearButton && /* @__PURE__ */ React.createElement(
         import_material30.Button,
         {
           color: "secondary",
@@ -4982,21 +4988,24 @@ var DataTable = ({
         },
         "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC \u0641\u06CC\u0644\u062A\u0631\u0647\u0627"
       )
-    ));
+    );
   };
   const columnVirtualizerInstanceRef = (0, import_react30.useRef)(null);
   const table = (0, import_material_react_table.useMaterialReactTable)({
     columns: memoizedColumns,
     data: memoizedData,
     localization,
-    enableColumnResizing: false,
+    enableColumnResizing,
+    layoutMode,
     enableColumnVirtualization,
     columnVirtualizerInstanceRef,
     columnVirtualizerOptions,
+    enableKeyboardShortcuts: false,
     // === صفحه‌بندی ===
-    manualPagination,
-    onPaginationChange,
-    pageCount: manualPagination ? Math.ceil(totalRows / pagination.pageSize) : void 0,
+    enablePagination: !disablePagination,
+    manualPagination: disablePagination ? false : manualPagination,
+    onPaginationChange: disablePagination ? void 0 : onPaginationChange,
+    pageCount: !disablePagination && manualPagination ? Math.ceil(totalRows / pagination.pageSize) : void 0,
     rowCount: totalRows ?? 0,
     // === فیلترینگ ===
     manualFiltering,
@@ -5026,12 +5035,22 @@ var DataTable = ({
     ...onShowColumnFiltersChange && { onShowColumnFiltersChange },
     ...onColumnOrderChange && { onColumnOrderChange },
     // === استایل‌دهی ===
-    muiTablePaperProps: { sx: { direction: "ltr" } },
-    muiTableBodyCellProps: { sx: { textAlign: "center" } },
+    columnResizeDirection: "ltr",
+    muiTableBodyCellProps: {
+      sx: {
+        textAlign: "center",
+        "&:focus": {
+          outline: "none"
+        }
+      }
+    },
     muiTableHeadCellProps: {
       sx: {
+        "&:focus": {
+          outline: "none"
+        },
         "& .Mui-TableHeadCell-Content": {
-          flexDirection: "row-reverse",
+          flexDirection: "row",
           justifyContent: "center"
         }
       }
@@ -5045,6 +5064,8 @@ var DataTable = ({
     initialState: {
       density
     },
+    // === قابلیت‌ها ===
+    renderDetailPanel: renderDetailPanel ? ({ row, table: table2 }) => renderDetailPanel({ row, table: table2 }) : void 0,
     // === تولبارهای سفارشی ===
     renderTopToolbarCustomActions: renderTopToolbarCustomActions || defaultRenderTopToolbarCustomActions,
     renderBottomToolbarCustomActions,
@@ -5057,7 +5078,7 @@ var data_table_default = DataTable;
 
 // src/img-viewer/index.tsx
 var import_material31 = require("@mui/material");
-var import_md9 = require("react-icons/md");
+var import_md10 = require("react-icons/md");
 var import_image6 = __toESM(require("next/image"));
 var import_react31 = require("react");
 function imgViewer({
@@ -5161,15 +5182,15 @@ function imgViewer({
             alignItems: "center"
           }
         },
-        /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: handleClose }, /* @__PURE__ */ React.createElement(import_md9.MdClose, { color: "white" })),
+        /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: handleClose }, /* @__PURE__ */ React.createElement(import_md10.MdClose, { color: "white" })),
         !noResetBtn && /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: reset }, /* @__PURE__ */ React.createElement("span", { style: { color: "white", fontSize: "0.9rem" } }, "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC")),
-        !noRotate && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setRotate((r) => r - 90) }, /* @__PURE__ */ React.createElement(import_md9.MdRotateLeft, { color: "white" })), /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setRotate((r) => r + 90) }, /* @__PURE__ */ React.createElement(import_md9.MdRotateRight, { color: "white" }))),
-        !noZoom && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setZoom((z) => z + 0.2) }, /* @__PURE__ */ React.createElement(import_md9.MdZoomIn, { color: "white" })), /* @__PURE__ */ React.createElement(
+        !noRotate && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setRotate((r) => r - 90) }, /* @__PURE__ */ React.createElement(import_md10.MdRotateLeft, { color: "white" })), /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setRotate((r) => r + 90) }, /* @__PURE__ */ React.createElement(import_md10.MdRotateRight, { color: "white" }))),
+        !noZoom && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setZoom((z) => z + 0.2) }, /* @__PURE__ */ React.createElement(import_md10.MdZoomIn, { color: "white" })), /* @__PURE__ */ React.createElement(
           import_material31.IconButton,
           {
             onClick: () => setZoom((z) => Math.max(0.2, z - 0.2))
           },
-          /* @__PURE__ */ React.createElement(import_md9.MdZoomOut, { color: "white" })
+          /* @__PURE__ */ React.createElement(import_md10.MdZoomOut, { color: "white" })
         )),
         /* @__PURE__ */ React.createElement(import_material31.Typography, { color: "white" }, title)
       ),
@@ -5224,7 +5245,7 @@ function imgViewer({
 
 // src/custom-dialog/index.tsx
 var import_material32 = require("@mui/material");
-var import_md10 = require("react-icons/md");
+var import_md11 = require("react-icons/md");
 function CustomDialog({
   title,
   icon: Icon,
@@ -5312,7 +5333,7 @@ function CustomDialog({
         },
         disabled: isSubmiting
       },
-      /* @__PURE__ */ React.createElement(import_md10.MdClose, null)
+      /* @__PURE__ */ React.createElement(import_md11.MdClose, null)
     )),
     /* @__PURE__ */ React.createElement(import_material32.Divider, null),
     /* @__PURE__ */ React.createElement(import_material32.DialogContent, null, children),