@wikex/admin-kit 0.5.0 → 0.7.0

package/dist/chunk-PPWCNGRB.js

@@ -0,0 +1,303 @@
+'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: {
+      MuiAppBar: {
+        styleOverrides: {
+          root: {
+            backgroundImage: "none",
+            boxShadow: "none"
+          }
+        }
+      },
+      MuiButton: {
+        defaultProps: { disableElevation: true },
+        styleOverrides: {
+          root: { borderRadius: 8, minHeight: 36, paddingInline: 12 },
+          containedPrimary: {
+            boxShadow: `0 8px 16px 0 ${alpha(minimalPalette.primary.dark, 0.24)}`
+          }
+        }
+      },
+      MuiCard: {
+        defaultProps: { elevation: 0 },
+        styleOverrides: {
+          root: {
+            backgroundImage: "none",
+            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 } }
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: { borderRadius: 8, fontWeight: 600 }
+        }
+      },
+      MuiDialog: {
+        styleOverrides: {
+          paper: { borderRadius: 16 }
+        }
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: { borderColor: alpha(grey[500], 0.2), borderStyle: "dashed" }
+        }
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            "&:hover": { backgroundColor: alpha(grey[500], 0.08) }
+          }
+        }
+      },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: 8,
+            color: isDark ? grey[500] : grey[600],
+            marginBottom: 4,
+            "&:hover": {
+              backgroundColor: alpha(grey[500], 0.08),
+              color: isDark ? "#FFFFFF" : grey[800]
+            },
+            "&.Mui-selected": {
+              backgroundColor: alpha(minimalPalette.primary.main, 0.08),
+              color: isDark ? minimalPalette.primary.light : minimalPalette.primary.dark,
+              "&:hover": { backgroundColor: alpha(minimalPalette.primary.main, 0.16) }
+            }
+          }
+        }
+      },
+      MuiListSubheader: {
+        styleOverrides: {
+          root: {
+            backgroundColor: "transparent",
+            color: grey[500],
+            fontSize: 11,
+            fontWeight: 700,
+            letterSpacing: "0.06em",
+            lineHeight: "36px",
+            textTransform: "uppercase"
+          }
+        }
+      },
+      MuiMenu: {
+        styleOverrides: {
+          paper: {
+            borderRadius: 12,
+            boxShadow: `0 0 2px 0 ${alpha(grey[500], 0.2)}, 0 20px 40px -4px ${alpha(
+              grey[500],
+              0.24
+            )}`,
+            minWidth: 200,
+            padding: 8
+          },
+          list: { padding: 0 }
+        }
+      },
+      MuiMenuItem: {
+        styleOverrides: {
+          root: { borderRadius: 8, fontSize: 14, minHeight: 40 }
+        }
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            borderRadius: 8,
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: alpha(grey[500], 0.32)
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: isDark ? grey[400] : grey[800]
+            }
+          }
+        }
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: { backgroundImage: "none" }
+        }
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          root: { height: 40, padding: 8, width: 54 },
+          switchBase: {
+            "&.Mui-checked": {
+              color: "#FFFFFF",
+              "& + .MuiSwitch-track": {
+                backgroundColor: minimalPalette.primary.main,
+                opacity: 1
+              }
+            }
+          },
+          thumb: { boxShadow: `0 1px 4px ${alpha(grey[900], 0.24)}` },
+          track: {
+            backgroundColor: isDark ? grey[700] : grey[300],
+            borderRadius: 12,
+            opacity: 1
+          }
+        }
+      },
+      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) }
+          }
+        }
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            backgroundColor: grey[800],
+            borderRadius: 8,
+            fontSize: 12
+          },
+          arrow: { color: grey[800] }
+        }
+      }
+    }
+  });
+};
+
+// 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-PPWCNGRB.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-PPWCNGRB.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.7.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",