@wikex/admin-kit 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Các thay đổi đáng chú ý của `@wikex/admin-kit` được ghi tại đây theo Semantic Versioning.
 
+## 0.6.0 - 2026-09-13
+
+- Tích hợp MUI 7 và Emotion bằng App Router cache provider chính thức cho Next.js 16.
+- Thêm Minimal theme gốc, tự đồng bộ light/dark mode với Payload Admin.
+- Thêm `MinimalDataTable`, `MinimalSelect` và `MinimalBlockCard` cho các màn hình admin custom.
+
 ## 0.5.0 - 2026-09-13
 
 - Hoàn thiện admin shell Minimal với navigation mini/mobile, workspace header và account actions.

package/README.md

@@ -53,6 +53,39 @@ export const plugins = [
 ]
 ```
 
+`wikexAdminPlugin` tự đăng ký MUI/Emotion provider của Admin Kit và đồng bộ light/dark
+mode với Payload. Các màn hình custom có thể dùng trực tiếp các primitive Minimal thật:
+
+```tsx
+'use client'
+
+import {
+  MinimalBlockCard,
+  MinimalDataTable,
+  MinimalSelect,
+} from '@wikex/admin-kit/minimal'
+
+export const ProductPanel = () => (
+  <MinimalBlockCard label="Catalog" title="Hàng hóa">
+    <MinimalSelect
+      label="Trạng thái"
+      onChange={(value) => console.log(value)}
+      options={[{ label: 'Đang bán', value: 'active' }]}
+      value="active"
+    />
+    <MinimalDataTable
+      caption="Danh sách hàng hóa"
+      columns={[{ id: 'name', header: 'Tên', render: (row) => row.name }]}
+      rowKey="id"
+      rows={[{ id: 'gold', name: 'Vàng' }]}
+    />
+  </MinimalBlockCard>
+)
+```
+
+Theme dùng palette gốc của Minimal UI (`primary.main = #00A76F`) và không chèn
+`CssBaseline`, nhờ vậy không reset CSS form/document có sẵn của Payload.
+
 Live Preview provider của dự án là adapter khai báo route và component khả dụng:
 
 ```tsx
@@ -104,7 +137,7 @@ Xem consumer không thuộc lĩnh vực bất động sản tại `examples/corp
 ## Cài vào dự án khác — một package, một cấu hình
 
 ```bash
-pnpm add @wikex/admin-kit@0.5.0
+pnpm add @wikex/admin-kit@0.6.0
 ```
 
 Không cần `.npmrc`, GitLab token hay npm token ở dự án consumer. Các peer dependency

package/dist/{chunk-7FEACJUN.js → chunk-5DJKPKJ6.js}

@@ -107,6 +107,7 @@ var wikexAdminPlugin = (options = {}) => {
     const components = admin.components ?? {};
     const beforeDashboard = options.components?.beforeDashboard;
     const provider = options.components?.provider;
+    const providers = appendUnique(components.providers, ["@wikex/admin-kit/minimal/provider"]);
     return {
       ...config,
       admin: {
@@ -130,7 +131,7 @@ var wikexAdminPlugin = (options = {}) => {
           logout: {
             Button: components.logout?.Button ?? "@wikex/admin-kit/admin/logout-button"
           },
-          providers: typeof provider !== "string" ? components.providers : appendUnique(components.providers, [provider])
+          providers: typeof provider !== "string" ? providers : appendUnique(providers, [provider])
         },
         livePreview: admin.livePreview ?? {
           breakpoints: [

package/dist/chunk-AEUBQWCG.js

@@ -0,0 +1,186 @@
+'use client';
+
+// src/minimal/MinimalAdminProvider.tsx
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
+import { ThemeProvider } from "@mui/material/styles";
+import { useTheme as usePayloadTheme } from "@payloadcms/ui";
+import { useMemo } from "react";
+
+// src/minimal/theme.ts
+import { alpha, createTheme } from "@mui/material/styles";
+var grey = {
+  50: "#FCFDFD",
+  100: "#F9FAFB",
+  200: "#F4F6F8",
+  300: "#DFE3E8",
+  400: "#C4CDD5",
+  500: "#919EAB",
+  600: "#637381",
+  700: "#454F5B",
+  800: "#1C252E",
+  900: "#141A21"
+};
+var minimalPalette = {
+  primary: {
+    light: "#5BE49B",
+    main: "#00A76F",
+    dark: "#007867",
+    contrastText: "#FFFFFF"
+  },
+  secondary: {
+    light: "#C684FF",
+    main: "#8E33FF",
+    dark: "#5119B7",
+    contrastText: "#FFFFFF"
+  },
+  info: {
+    light: "#61F3F3",
+    main: "#00B8D9",
+    dark: "#006C9C",
+    contrastText: "#FFFFFF"
+  },
+  success: {
+    light: "#77ED8B",
+    main: "#22C55E",
+    dark: "#118D57",
+    contrastText: "#FFFFFF"
+  },
+  warning: {
+    light: "#FFD666",
+    main: "#FFAB00",
+    dark: "#B76E00",
+    contrastText: grey[800]
+  },
+  error: {
+    light: "#FFAC82",
+    main: "#FF5630",
+    dark: "#B71D18",
+    contrastText: "#FFFFFF"
+  },
+  grey
+};
+var createMinimalAdminTheme = (mode = "light") => {
+  const isDark = mode === "dark";
+  return createTheme({
+    cssVariables: true,
+    palette: {
+      mode,
+      ...minimalPalette,
+      background: {
+        default: isDark ? "#141A21" : "#FFFFFF",
+        paper: isDark ? "#1C252E" : "#FFFFFF"
+      },
+      divider: alpha(grey[500], 0.2),
+      text: {
+        primary: isDark ? "#FFFFFF" : grey[800],
+        secondary: isDark ? grey[500] : grey[600],
+        disabled: grey[500]
+      }
+    },
+    shape: { borderRadius: 8 },
+    typography: {
+      fontFamily: "'Public Sans Variable', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      button: { fontWeight: 700, textTransform: "none" },
+      h6: { fontSize: "1.125rem", fontWeight: 700, lineHeight: 1.5 },
+      subtitle1: { fontWeight: 600 },
+      subtitle2: { fontWeight: 600 },
+      body2: { fontSize: "0.875rem", lineHeight: 1.57143 },
+      caption: { fontSize: "0.75rem", lineHeight: 1.5 }
+    },
+    components: {
+      MuiButton: {
+        defaultProps: { disableElevation: true },
+        styleOverrides: {
+          root: { borderRadius: 8, minHeight: 36 }
+        }
+      },
+      MuiCard: {
+        defaultProps: { elevation: 0 },
+        styleOverrides: {
+          root: {
+            backgroundImage: "none",
+            border: `1px solid ${alpha(grey[500], isDark ? 0.2 : 0.12)}`,
+            borderRadius: 16,
+            boxShadow: `0 0 2px 0 ${alpha(grey[500], 0.2)}, 0 12px 24px -4px ${alpha(
+              grey[500],
+              0.12
+            )}`
+          }
+        }
+      },
+      MuiCardHeader: {
+        styleOverrides: {
+          root: { padding: "24px 24px 16px" },
+          title: { fontSize: "1rem", fontWeight: 700 },
+          subheader: { fontSize: "0.875rem", marginTop: 4 }
+        }
+      },
+      MuiCardContent: {
+        styleOverrides: { root: { padding: 24 } }
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            borderRadius: 8,
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: alpha(grey[500], 0.32)
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: grey[800]
+            }
+          }
+        }
+      },
+      MuiTableContainer: {
+        styleOverrides: {
+          root: {
+            border: `1px solid ${alpha(grey[500], 0.16)}`,
+            borderRadius: 12
+          }
+        }
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          root: {
+            borderBottom: `1px dashed ${alpha(grey[500], 0.2)}`,
+            padding: "16px"
+          },
+          head: {
+            backgroundColor: isDark ? alpha(grey[500], 0.12) : grey[200],
+            color: isDark ? grey[400] : grey[600],
+            fontSize: "0.875rem",
+            fontWeight: 600
+          }
+        }
+      },
+      MuiTableRow: {
+        styleOverrides: {
+          root: {
+            "&:last-child .MuiTableCell-body": { borderBottom: 0 },
+            "&:hover": { backgroundColor: alpha(grey[500], 0.06) }
+          }
+        }
+      }
+    }
+  });
+};
+
+// src/minimal/MinimalAdminProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var MinimalThemeProvider = ({ children, mode = "light" }) => {
+  const theme = useMemo(() => createMinimalAdminTheme(mode), [mode]);
+  return /* @__PURE__ */ jsx(AppRouterCacheProvider, { options: { enableCssLayer: true, key: "wikex-minimal" }, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children }) });
+};
+var MinimalAdminProvider = ({ children }) => {
+  const { theme } = usePayloadTheme();
+  return /* @__PURE__ */ jsx(MinimalThemeProvider, { mode: theme === "dark" ? "dark" : "light", children });
+};
+var MinimalAdminProvider_default = MinimalAdminProvider;
+
+export {
+  minimalPalette,
+  createMinimalAdminTheme,
+  MinimalThemeProvider,
+  MinimalAdminProvider,
+  MinimalAdminProvider_default
+};

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   IMAGE_UPLOAD_GUIDANCE,
   adminExperiencePlugin,
   wikexAdminPlugin
-} from "./chunk-7FEACJUN.js";
+} from "./chunk-5DJKPKJ6.js";
 import {
   createVisualEditorRouteResolver,
   defineWikexProject

package/dist/minimal/index.d.ts

@@ -0,0 +1,107 @@
+export { MinimalAdminProvider, MinimalThemeProvider, MinimalThemeProviderProps } from './provider.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _mui_material from '@mui/material';
+import { CardProps, CardContentProps, TableCellProps, TableProps, FormControlProps, SelectProps } from '@mui/material';
+import { ReactNode, Key } from 'react';
+import { PaletteMode } from '@mui/material/styles';
+
+type MinimalBlockCardProps = Omit<CardProps, 'title'> & {
+    actions?: ReactNode;
+    children: ReactNode;
+    contentProps?: CardContentProps;
+    description?: ReactNode;
+    label?: string;
+    title: ReactNode;
+};
+declare const MinimalBlockCard: ({ actions, children, contentProps, description, label, title, ...cardProps }: MinimalBlockCardProps) => react_jsx_runtime.JSX.Element;
+
+type MinimalTableColumn<Row> = {
+    align?: TableCellProps['align'];
+    header: ReactNode;
+    id: string;
+    render: (row: Row, index: number) => ReactNode;
+    width?: number | string;
+};
+type MinimalDataTableProps<Row> = {
+    caption?: string;
+    columns: MinimalTableColumn<Row>[];
+    emptyText?: string;
+    loading?: boolean;
+    maxHeight?: number | string;
+    rowKey: keyof Row | ((row: Row, index: number) => Key);
+    rows: Row[];
+    size?: TableProps['size'];
+    stickyHeader?: boolean;
+};
+declare const MinimalDataTable: <Row>({ caption, columns, emptyText, loading, maxHeight, rowKey, rows, size, stickyHeader, }: MinimalDataTableProps<Row>) => react_jsx_runtime.JSX.Element;
+
+type MinimalSelectValue = number | string;
+type MinimalSelectOption = {
+    disabled?: boolean;
+    label: string;
+    value: MinimalSelectValue;
+};
+type MinimalSelectProps = Omit<FormControlProps, 'onChange'> & {
+    helperText?: string;
+    label: string;
+    onChange: (value: MinimalSelectValue) => void;
+    options: MinimalSelectOption[];
+    selectProps?: Omit<SelectProps<MinimalSelectValue>, 'label' | 'onChange' | 'value'>;
+    value: MinimalSelectValue;
+};
+declare const MinimalSelect: ({ helperText, label, onChange, options, selectProps, value, ...formControlProps }: MinimalSelectProps) => react_jsx_runtime.JSX.Element;
+
+declare const minimalPalette: {
+    readonly primary: {
+        readonly light: "#5BE49B";
+        readonly main: "#00A76F";
+        readonly dark: "#007867";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly secondary: {
+        readonly light: "#C684FF";
+        readonly main: "#8E33FF";
+        readonly dark: "#5119B7";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly info: {
+        readonly light: "#61F3F3";
+        readonly main: "#00B8D9";
+        readonly dark: "#006C9C";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly success: {
+        readonly light: "#77ED8B";
+        readonly main: "#22C55E";
+        readonly dark: "#118D57";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly warning: {
+        readonly light: "#FFD666";
+        readonly main: "#FFAB00";
+        readonly dark: "#B76E00";
+        readonly contrastText: "#1C252E";
+    };
+    readonly error: {
+        readonly light: "#FFAC82";
+        readonly main: "#FF5630";
+        readonly dark: "#B71D18";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly grey: {
+        readonly 50: "#FCFDFD";
+        readonly 100: "#F9FAFB";
+        readonly 200: "#F4F6F8";
+        readonly 300: "#DFE3E8";
+        readonly 400: "#C4CDD5";
+        readonly 500: "#919EAB";
+        readonly 600: "#637381";
+        readonly 700: "#454F5B";
+        readonly 800: "#1C252E";
+        readonly 900: "#141A21";
+    };
+};
+declare const createMinimalAdminTheme: (mode?: PaletteMode) => _mui_material.Theme;
+type MinimalAdminTheme = ReturnType<typeof createMinimalAdminTheme>;
+
+export { type MinimalAdminTheme, MinimalBlockCard, type MinimalBlockCardProps, MinimalDataTable, type MinimalDataTableProps, MinimalSelect, type MinimalSelectOption, type MinimalSelectProps, type MinimalSelectValue, type MinimalTableColumn, createMinimalAdminTheme, minimalPalette };

package/dist/minimal/index.js

@@ -0,0 +1,132 @@
+'use client';
+"use client";
+import {
+  MinimalAdminProvider,
+  MinimalThemeProvider,
+  createMinimalAdminTheme,
+  minimalPalette
+} from "../chunk-AEUBQWCG.js";
+
+// src/minimal/MinimalBlockCard.tsx
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Chip,
+  Divider,
+  Stack
+} from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MinimalBlockCard = ({
+  actions,
+  children,
+  contentProps,
+  description,
+  label,
+  title,
+  ...cardProps
+}) => /* @__PURE__ */ jsxs(Card, { ...cardProps, children: [
+  /* @__PURE__ */ jsx(
+    CardHeader,
+    {
+      action: actions,
+      subheader: description,
+      title: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsx("span", { children: title }),
+        label ? /* @__PURE__ */ jsx(Chip, { color: "primary", label, size: "small" }) : null
+      ] })
+    }
+  ),
+  /* @__PURE__ */ jsx(Divider, {}),
+  /* @__PURE__ */ jsx(CardContent, { ...contentProps, children })
+] });
+
+// src/minimal/MinimalDataTable.tsx
+import {
+  Box,
+  CircularProgress,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from "@mui/material";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MinimalDataTable = ({
+  caption,
+  columns,
+  emptyText = "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u",
+  loading = false,
+  maxHeight,
+  rowKey,
+  rows,
+  size = "medium",
+  stickyHeader = false
+}) => {
+  const getRowKey = (row, index) => {
+    if (typeof rowKey === "function") return rowKey(row, index);
+    return String(row[rowKey]);
+  };
+  return /* @__PURE__ */ jsx2(TableContainer, { sx: { maxHeight }, children: /* @__PURE__ */ jsxs2(Table, { "aria-label": caption, size, stickyHeader, children: [
+    caption ? /* @__PURE__ */ jsx2("caption", { children: caption }) : null,
+    /* @__PURE__ */ jsx2(TableHead, { children: /* @__PURE__ */ jsx2(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx2(TableCell, { align: column.align, sx: { width: column.width }, children: column.header }, column.id)) }) }),
+    /* @__PURE__ */ jsxs2(TableBody, { children: [
+      loading ? /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(TableCell, { colSpan: columns.length, children: /* @__PURE__ */ jsx2(Box, { alignItems: "center", display: "flex", justifyContent: "center", minHeight: 120, children: /* @__PURE__ */ jsx2(CircularProgress, { "aria-label": "\u0110ang t\u1EA3i d\u1EEF li\u1EC7u", size: 28 }) }) }) }) : null,
+      !loading && rows.length === 0 ? /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(TableCell, { colSpan: columns.length, children: /* @__PURE__ */ jsx2(Typography, { color: "text.secondary", sx: { py: 4, textAlign: "center" }, variant: "body2", children: emptyText }) }) }) : null,
+      !loading ? rows.map((row, rowIndex) => /* @__PURE__ */ jsx2(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx2(TableCell, { align: column.align, children: column.render(row, rowIndex) }, column.id)) }, getRowKey(row, rowIndex))) : null
+    ] })
+  ] }) });
+};
+
+// src/minimal/MinimalSelect.tsx
+import {
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  MenuItem,
+  Select
+} from "@mui/material";
+import { useId } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var MinimalSelect = ({
+  helperText,
+  label,
+  onChange,
+  options,
+  selectProps,
+  value,
+  ...formControlProps
+}) => {
+  const fieldId = useId();
+  const labelId = `${fieldId}-label`;
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs3(FormControl, { fullWidth: true, size: "small", ...formControlProps, children: [
+    /* @__PURE__ */ jsx3(InputLabel, { id: labelId, children: label }),
+    /* @__PURE__ */ jsx3(
+      Select,
+      {
+        ...selectProps,
+        id: fieldId,
+        label,
+        labelId,
+        onChange: handleChange,
+        value,
+        children: options.map((option) => /* @__PURE__ */ jsx3(MenuItem, { disabled: option.disabled, value: option.value, children: option.label }, option.value))
+      }
+    ),
+    helperText ? /* @__PURE__ */ jsx3(FormHelperText, { children: helperText }) : null
+  ] });
+};
+export {
+  MinimalAdminProvider,
+  MinimalBlockCard,
+  MinimalDataTable,
+  MinimalSelect,
+  MinimalThemeProvider,
+  createMinimalAdminTheme,
+  minimalPalette
+};

package/dist/minimal/provider.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type MinimalThemeProviderProps = {
+    children: ReactNode;
+    mode?: 'dark' | 'light';
+};
+declare const MinimalThemeProvider: ({ children, mode }: MinimalThemeProviderProps) => react_jsx_runtime.JSX.Element;
+/** Keeps MUI's color mode aligned with Payload's light/dark theme setting. */
+declare const MinimalAdminProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+export { MinimalAdminProvider, MinimalThemeProvider, type MinimalThemeProviderProps, MinimalAdminProvider as default };

package/dist/minimal/provider.js

@@ -0,0 +1,12 @@
+'use client';
+"use client";
+import {
+  MinimalAdminProvider,
+  MinimalAdminProvider_default,
+  MinimalThemeProvider
+} from "../chunk-AEUBQWCG.js";
+export {
+  MinimalAdminProvider,
+  MinimalThemeProvider,
+  MinimalAdminProvider_default as default
+};

package/dist/starter.js

@@ -1,7 +1,7 @@
 import {
   adminExperiencePlugin,
   wikexAdminPlugin
-} from "./chunk-7FEACJUN.js";
+} from "./chunk-5DJKPKJ6.js";
 import {
   createVisualEditorRouteResolver,
   defineWikexProject

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikex/admin-kit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Reusable Payload CMS admin shell, visual editor and typography tools for Wikex projects",
   "license": "UNLICENSED",
   "private": false,
@@ -20,6 +20,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@emotion/cache": "11.14.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/server": "11.11.0",
+    "@emotion/styled": "11.14.1",
+    "@mui/material": "7.3.6",
+    "@mui/material-nextjs": "7.3.6",
     "@wikex/content-kit": "^0.1.1"
   },
   "exports": {
@@ -33,6 +39,8 @@
     "./admin/theme-toggle": "./dist/admin/theme-toggle.js",
     "./admin/view-site": "./dist/admin/view-site.js",
     "./live-preview": "./dist/live-preview.js",
+    "./minimal": "./dist/minimal/index.js",
+    "./minimal/provider": "./dist/minimal/provider.js",
     "./project": "./dist/project.js",
     "./rich-text": "./dist/rich-text.js",
     "./rich-text/client": "./dist/rich-text-client.js",