@rnaga/wp-next-ui 1.0.1

package/media/MediaThumbnail.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DocumentScannerOutlinedIcon from "@mui/icons-material/DocumentScannerOutlined";
+import MusicVideoIcon from "@mui/icons-material/MusicVideo";
+import VideoFileOutlinedIcon from "@mui/icons-material/VideoFileOutlined";
+import { Icon } from "@mui/material";
+import { getMimeType } from "@rnaga/wp-next-core/client/utils/media";
+export const MediaThumbnail = (props) => {
+    const { uri } = props;
+    if (!uri) {
+        return null;
+    }
+    const mediaType = getMimeType(uri).split("/")[0];
+    const iconSx = { transform: "scale(2)" };
+    return mediaType == "image" ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    _jsx("img", { "data-first-child": true, src: uri, loading: "lazy", alt: "" })) : (_jsx(Icon, { "data-first-child": true, children: mediaType == "audio" ? (_jsx(MusicVideoIcon, { sx: iconSx })) : mediaType == "video" ? (_jsx(VideoFileOutlinedIcon, { sx: iconSx })) : (_jsx(DocumentScannerOutlinedIcon, { sx: iconSx })) }));
+};

package/media/MediaUpload.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const MediaUpload: (props?: Partial<{
+    showCloseButton: boolean;
+    style: React.CSSProperties | undefined;
+    onUploadComplete?: () => void;
+}>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaUpload.d.ts.map

package/media/MediaUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaUpload.d.ts","sourceRoot":"","sources":["../../src/media/MediaUpload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAWvD,eAAO,MAAM,WAAW,GACtB,QAAQ,OAAO,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IACvC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC,4CA+GH,CAAC"}

package/media/MediaUpload.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useTransition } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, IconButton, LinearProgress } from "@mui/material";
+import { Button } from "../Button";
+import { useWPTheme } from "../ThemeRegistry";
+import { Typography } from "../Typography";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { useWP } from "@rnaga/wp-next-core/client/wp";
+export const MediaUpload = (props) => {
+    const { showCloseButton = false, style = {}, onUploadComplete } = props ?? {};
+    const { error, viewport, globalState } = useWP();
+    const { actions, safeParse } = useServerActions();
+    const { wpTheme } = useWPTheme();
+    const [dragBoxColor, setDragBoxColor] = useState(wpTheme.colorScale[100]);
+    const [loading, startTransition] = useTransition();
+    const handleUpload = (files) => {
+        if (!files) {
+            return;
+        }
+        const form = new FormData();
+        for (const [k, file] of Object.entries(files)) {
+            form.append(`file_${k}`, file);
+        }
+        startTransition(async () => {
+            const response = await actions.media.upload(form).then(safeParse);
+            if (response.success) {
+                // overlay.snackbar.open(
+                //   "success",
+                //   "New media has been successfully added"
+                // );
+                // refresh(["main"]);
+                onUploadComplete?.();
+            }
+            else {
+                error.throw(response.error ?? "Failed to upload media");
+            }
+        });
+    };
+    return (_jsxs(Box, { sx: {
+            position: "relative",
+            width: "100%",
+            border: "1px solid",
+            backgroundColor: dragBoxColor,
+            borderColor: (theme) => theme.palette.divider,
+            minHeight: 150,
+            maxHeight: 200,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 10,
+            marginBottom: 20,
+            ...style,
+        }, onDragOver: (e) => {
+            e.preventDefault();
+            dragBoxColor === wpTheme.colorScale[100] &&
+                setDragBoxColor(wpTheme.colorScale[300]);
+        }, onDragLeave: (e) => {
+            dragBoxColor === wpTheme.colorScale[300] &&
+                setDragBoxColor(wpTheme.colorScale[100]);
+        }, onDrop: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            dragBoxColor === wpTheme.colorScale[300] &&
+                setDragBoxColor(wpTheme.colorScale[100]);
+            handleUpload(e.dataTransfer.files);
+        }, children: [showCloseButton && (_jsx(Box, { sx: { position: "absolute", right: 0, top: 0 }, children: _jsx(IconButton, { children: _jsx(CloseIcon, { onClick: () => {
+                            globalState.set("media-upload", { open: false });
+                        } }) }) })), _jsx(Box, { textAlign: "center", sx: { display: "grid", rowGap: 1 }, children: loading ? (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "Uploading..." }), _jsx(LinearProgress, {})] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { fontWeight: 500, children: "Drop files to upload" }), _jsx(Typography, { children: "or" }), _jsxs(Button, { component: "label", role: undefined, children: ["Browse files", _jsx("input", { style: {
+                                        width: "1px",
+                                    }, onChange: (e) => {
+                                        console.log(e.target.files);
+                                        handleUpload(e.target.files);
+                                    }, type: "file" })] })] })) })] }));
+};

package/media/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./MediaGridForm";
+export * from "./MediaThumbnail";
+export * from "./MediaUpload";
+//# sourceMappingURL=index.d.ts.map

package/media/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/media/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/media/index.js

@@ -0,0 +1,3 @@
+export * from "./MediaGridForm";
+export * from "./MediaThumbnail";
+export * from "./MediaUpload";

package/media-selector/MediaSelectorList.d.ts

@@ -0,0 +1,2 @@
+export declare const MediaSelectorList: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaSelectorList.d.ts.map

package/media-selector/MediaSelectorList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaSelectorList.d.ts","sourceRoot":"","sources":["../../src/media-selector/MediaSelectorList.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,iBAAiB,+CAwF7B,CAAC"}

package/media-selector/MediaSelectorList.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useTransition } from "react";
+import { Box, Grid, LinearProgress, Pagination } from "@mui/material";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { CardImage } from "../CardImage";
+import { InputSearch } from "../InputSearch";
+import { Typography } from "../Typography";
+import { useWP } from "@rnaga/wp-next-core/client/wp";
+export const MediaSelectorList = () => {
+    const { viewport, globalState } = useWP();
+    const { actions, parse } = useServerActions();
+    const mimeTypes = globalState.get("media-selector-modal")?.mimeTypes;
+    const [loading, startTransition] = useTransition();
+    const [query, setQuery] = useState({});
+    const [{ posts, info }, setPosts] = useState({
+        posts: undefined,
+        info: undefined,
+    });
+    useEffect(() => {
+        startTransition(async () => {
+            const [posts, info] = await actions.post
+                .list({ ...query, status: ["inherit"], per_page: 20 }, { postTypes: ["attachment"], mimeTypes })
+                .then(parse);
+            setPosts({ posts, info });
+        });
+    }, [query]);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { sx: { my: 2 }, children: _jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: [_jsx(InputSearch, { size: "medium", sx: { flexGrow: viewport.isMobile ? 1 : 0 }, onChange: (value) => setQuery({ ...query, search: value, page: 1 }) }), _jsx(Pagination, { page: parseInt(query.page?.toString() ?? "1"), count: info?.pagination?.totalPage ?? 0, siblingCount: 0, onChange: (e, page) => setQuery({ ...query, page }), variant: "outlined", shape: "rounded" })] }) }), _jsx(Grid, { container: true, spacing: 1, columns: { xs: 2, sm: 12, md: 12, xl: 12 }, children: loading ? (_jsxs(Box, { sx: {
+                        pt: 10,
+                        width: "100%",
+                        display: "grid",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }, children: [_jsx(Typography, { children: "Loading..." }), _jsx(LinearProgress, {})] })) : (posts?.map((post) => (_jsx(Grid, { size: { xs: 1, sm: 4, md: 3, xl: 2 }, gap: 0, children: _jsx(Box, { children: _jsx(CardImage, { src: post.guid, alt: post.post_title, sx: {
+                                width: "100%",
+                                maxHeight: 150,
+                                cursor: "pointer",
+                            }, onClick: () => {
+                                globalState.set({
+                                    "media-target-item": { post },
+                                    "media-selector-preview": { open: true },
+                                });
+                            } }) }) }, post.ID)))) })] }));
+};

package/media-selector/MediaSelectorPreview.d.ts

@@ -0,0 +1,2 @@
+export declare const MediaSelectorPreview: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaSelectorPreview.d.ts.map

package/media-selector/MediaSelectorPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaSelectorPreview.d.ts","sourceRoot":"","sources":["../../src/media-selector/MediaSelectorPreview.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,oBAAoB,+CAiIhC,CAAC"}

package/media-selector/MediaSelectorPreview.js

@@ -0,0 +1,80 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, ClickAwayListener, Grid, IconButton } from "@mui/material";
+import { useUser } from "@rnaga/wp-next-core/client/hooks/use-user";
+import { Button } from "../Button";
+import { CardImage } from "../CardImage";
+import { useWPTheme } from "../ThemeRegistry";
+import { Typography } from "../Typography";
+import { getMetadaList } from "@rnaga/wp-next-core/client/utils/media";
+import { MediaGridForm } from "../media/MediaGridForm";
+import { useWP } from "@rnaga/wp-next-core/client/wp";
+import { useMediaSelector } from "../hooks/use-media-selector";
+export const MediaSelectorPreview = () => {
+    const { globalState, viewport } = useWP();
+    const mediaSelector = useMediaSelector();
+    const { user } = useUser();
+    const { wpTheme } = useWPTheme();
+    const mediaTargetItemState = globalState.get("media-target-item");
+    const previewState = globalState.get("media-selector-preview");
+    const open = previewState?.open;
+    const post = mediaTargetItemState?.post;
+    const [metadataList, setMedataList] = useState();
+    const canEdit = useMemo(() => user?.role.capabilities.has("edit_others_posts"), [post?.ID]);
+    useEffect(() => {
+        if (!post)
+            return;
+        getMetadaList(post).then((medataList) => {
+            setMedataList(medataList);
+        });
+        //return () => globalState.set("media-selector-preview", { open: false });
+    }, [post?.ID]);
+    if (!open || !post) {
+        return null;
+    }
+    return (_jsx(ClickAwayListener, { onClickAway: () => {
+            globalState.set("media-selector-preview", { open: false });
+        }, children: _jsxs(Box, { sx: {
+                borderLeft: 1,
+                borderColor: (theme) => theme.palette.divider,
+                display: open ? "block" : "none",
+                position: "absolute",
+                zIndex: 1000,
+                width: viewport.isMobile ? "100%" : "40vw",
+                minHeight: "100%",
+                maxHeight: "calc(100% - 2 * var(--Card-padding))",
+                overflowY: "auto",
+                top: 0,
+                right: 0,
+                borderRadius: "var(--Card-childRadius)",
+                backgroundColor: wpTheme.colorScale[100],
+            }, children: [_jsxs(Box, { sx: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        px: 2,
+                    }, children: [_jsxs(Button, { size: "medium", onClick: () => {
+                                mediaSelector.select(post);
+                                globalState.set("media-selector-preview", { open: false });
+                                mediaSelector.close();
+                            }, children: ["Select", " "] }), _jsx(IconButton, { onClick: () => {
+                                globalState.set("media-selector-preview", { open: false });
+                            }, children: _jsx(CloseIcon, {}) })] }), _jsxs(Box, { sx: {
+                        gap: 2,
+                        display: "grid",
+                        gridTemplateColumns: "1fr 1fr",
+                        padding: 2,
+                        alignItems: "top",
+                        justifyContent: "center",
+                        //overflow: "auto",
+                    }, children: [_jsx(CardImage, { src: post.guid, alt: post.post_title }), _jsx(Box, { sx: {
+                                display: "grid",
+                                gridTemplateColumns: "0.4fr 1fr",
+                                gap: 0,
+                            }, children: metadataList &&
+                                metadataList
+                                    .filter(([key]) => !["Uploaded on", "Uploaded by"].includes(key))
+                                    .map(([key, value]) => (_jsxs(Fragment, { children: [_jsxs(Typography, { children: [key, ":"] }), _jsx(Typography, { fontWeight: 300, sx: {
+                                                overflowWrap: "break-word",
+                                            }, children: value })] }, key))) })] }), canEdit && (_jsx(Grid, { sx: { mx: 2 }, children: _jsx(MediaGridForm, {}) }))] }) }));
+};

package/media-selector/index.d.ts

@@ -0,0 +1,2 @@
+export declare const MediaSelectorModal: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/media-selector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/media-selector/index.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,kBAAkB,+CAmE9B,CAAC"}

package/media-selector/index.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box } from "@mui/material";
+import { Modal, ModalContent } from "../Modal";
+import { Tabs } from "../Tabs";
+import { Typography } from "../Typography";
+import { MediaUpload } from "../media/MediaUpload";
+import { MediaSelectorList } from "./MediaSelectorList";
+import { MediaSelectorPreview } from "./MediaSelectorPreview";
+import { useWP } from "@rnaga/wp-next-core/client/wp";
+import { useMediaSelector } from "../hooks/use-media-selector";
+export const MediaSelectorModal = () => {
+    const { globalState } = useWP();
+    const mediaSelector = useMediaSelector();
+    const [tabIndex, setTabIndex] = useState(0);
+    useEffect(() => {
+        return () => {
+            handleClose();
+        };
+    }, []);
+    const handleClose = () => {
+        globalState.set({
+            "media-selector-preview": { open: false },
+        });
+        mediaSelector.close();
+    };
+    return (_jsx(Modal, { open: mediaSelector.isOpen, onClose: handleClose, children: _jsxs(ModalContent, { minWidth: "95%", sx: {
+                minHeight: "90%",
+                maxHeight: "90%",
+                overflowY: "auto",
+            }, children: [_jsx(Typography, { size: "large", bold: true, children: "Select or Upload Media" }), _jsxs(Box, { children: [_jsx(MediaSelectorPreview, {}), _jsx(Tabs, { size: "medium", tabIndex: tabIndex, onChange: (index) => {
+                                setTabIndex(index);
+                            }, items: [
+                                {
+                                    label: "Media Library",
+                                    content: _jsx(MediaSelectorList, {}),
+                                },
+                                {
+                                    label: "Upload files",
+                                    content: (_jsx(MediaUpload, { style: {
+                                            minHeight: "50dvh",
+                                        }, onUploadComplete: () => {
+                                            // Switch to the first tab after upload
+                                            setTabIndex(0);
+                                        } })),
+                                },
+                            ] })] })] }) }));
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@rnaga/wp-next-ui",
+  "version": "1.0.1",
+  "scripts": {
+    "build": "node ../../scripts/build-ui.mjs",
+    "release-old": "node ../../scripts/release.mjs",
+    "release": "../../scripts/release.sh"
+  },
+  "keywords": [
+    "ui",
+    "user interface",
+    "components",
+    "material ui",
+    "wordpress"
+  ],
+  "author": "Ryohei Nagatsuka",
+  "license": "MIT",
+  "description": "User Interface components for WP Next",
+  "dependencies": {
+    "@mui/material": "^7.0.2",
+    "@rnaga/wp-next-core": "^1.0"
+  },
+  "devDependencies": {
+    "eslint": "^9.25.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rnaga/wp-next.git"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  }
+}

package/portal/Portal.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const Portal: (props: {
+    children: React.ReactNode;
+    target?: HTMLElement | null;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Portal.d.ts.map

package/portal/Portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../src/portal/Portal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,MAAM,GAAI,OAAO;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B,4CAIA,CAAC"}

package/portal/Portal.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { usePortal } from "./use-portal";
+export const Portal = (props) => {
+    const [target] = usePortal({ target: props.target || document.body });
+    return _jsx(_Fragment, { children: target && createPortal(props.children, target) });
+};

package/portal/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./use-portal";
+export * from "./Portal";
+//# sourceMappingURL=index.d.ts.map

package/portal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/portal/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}

package/portal/index.js

@@ -0,0 +1,2 @@
+export * from "./use-portal";
+export * from "./Portal";

package/portal/use-portal.d.ts

@@ -0,0 +1,4 @@
+export declare const usePortal: (props: {
+    target: HTMLElement | null;
+}) => HTMLElement[];
+//# sourceMappingURL=use-portal.d.ts.map

package/portal/use-portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-portal.d.ts","sourceRoot":"","sources":["../../src/portal/use-portal.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,GAAI,OAAO;IAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,kBAU9D,CAAC"}

package/portal/use-portal.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react";
+export const usePortal = (props) => {
+    const { target = document.body } = props;
+    const [targetState, setTargetState] = useState(null);
+    useEffect(() => {
+        if (target) {
+            setTargetState(target);
+        }
+    }, [target]);
+    return [targetState];
+};

package/types/global-state.d.ts

@@ -0,0 +1,27 @@
+export {};
+import type * as wpCoreTypes from "@rnaga/wp-next-core/types";
+
+declare module "@rnaga/wp-next-core/types/client" {
+  export interface GlobalState {
+    "media-target-item"?: {
+      post?: wpCoreTypes.actions.Posts[number];
+    };
+    "media-upload"?: {
+      open: boolean;
+    };
+    "media-selector-modal"?:
+      | {
+          open: true;
+          onSelected: (post: wpCoreTypes.actions.Posts[number]) => void;
+          mimeTypes?: string[];
+        }
+      | {
+          open: false;
+          onSelected: undefined;
+          mimeTypes: undefined;
+        };
+    "media-selector-preview"?: {
+      open: boolean;
+    };
+  }
+}

package/types/hooks/filters.d.ts

@@ -0,0 +1,20 @@
+import {
+  extendTheme as materialExtendTheme,
+  createTheme,
+} from "@mui/material/styles";
+import type { CSSProperties } from "react";
+import type { WPTheme } from "../wp-theme";
+
+export {};
+
+declare module "@rnaga/wp-next-core/types/hooks/filters.d" {
+  export interface Filters {
+    next_ui_theme: (options: {
+      mui: Parameters<typeof materialExtendTheme>;
+      wp: WPTheme;
+    }) => {
+      mui: Parameters<typeof materialExtendTheme>;
+      wp: WPTheme;
+    };
+  }
+}

package/types/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./filters";

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./wp-theme";
+export * from "./hooks";
+export * from "./global-state";

package/types/wp-theme.d.ts

@@ -0,0 +1,49 @@
+export interface WPThemeNamespace {
+  global: true;
+  dark: true;
+}
+
+export interface WPThemeProps {
+  text: {
+    color: string;
+    colorWhite: string;
+    linkHoverColor: string;
+  };
+  background: {
+    color: string;
+    error: string;
+    hoverColor: string;
+  };
+  colors: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    success: string;
+    warning: string;
+    danger: string;
+    error: string;
+    info: string;
+  };
+  colorScale: {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+  };
+  border: {
+    color: string;
+  };
+  table: {
+    header: {
+      backgroundColor: string;
+      color: string;
+    };
+  };
+}
+
+export type WPTheme = Record<keyof WPThemeNamespace, WPThemeProps>;

package/wp-theme/index.d.ts

@@ -0,0 +1,3 @@
+import type { WPTheme } from "../types";
+export declare const wpTheme: WPTheme;
+//# sourceMappingURL=index.d.ts.map

package/wp-theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/wp-theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,OAsFrB,CAAC"}

package/wp-theme/index.js

@@ -0,0 +1,86 @@
+export const wpTheme = {
+    global: {
+        text: {
+            color: "#000", // black text for light theme
+            colorWhite: "#000", // white text for dark theme
+            linkHoverColor: "rgba(0, 0, 0, 0.04)", // blue color for link hover
+        },
+        colors: {
+            primary: "#0073aa", // blue
+            secondary: "#005177", // dark blue
+            tertiary: "#004166", // darker blue
+            success: "#28a745", // green
+            warning: "#ffc107", // yellow
+            danger: "#dc3545", // red
+            error: "#dc3545", // red
+            info: "#17a2b8", // cyan
+        },
+        colorScale: {
+            100: "#ffffff", // pure white
+            200: "#d9d9d9",
+            300: "#b3b3b3",
+            400: "#8c8c8c",
+            500: "#666666",
+            600: "#404040",
+            700: "#1a1a1a",
+            800: "#0d0d0d",
+            900: "#000000", // pure black
+        },
+        background: {
+            color: "#fff", // dark background
+            error: "#f8d7da", // light red for error background
+            hoverColor: "#f5f5f5", // light gray for hover
+        },
+        border: {
+            color: "rgb(189, 189, 189)", // gray border
+        },
+        table: {
+            header: {
+                backgroundColor: "#dbdadaff", //"rgba(54, 45, 45, 1)", // dark background for table header
+                color: "rgba(0, 0, 0, 1)", // white text for table header
+            },
+        },
+    },
+    dark: {
+        text: {
+            color: "#fff", // white text for dark theme
+            colorWhite: "#fff", // black text for light theme
+            linkHoverColor: "rgba(248, 244, 244, 0.45)", // white color for link hover
+        },
+        colors: {
+            primary: "#0073aa", // blue
+            secondary: "#005177", // dark blue
+            tertiary: "#004166", // darker blue
+            success: "#28a745", // green
+            warning: "#ffc107", // yellow
+            danger: "#dc3545", // red
+            error: "#dc3545", // red
+            info: "#17a2b8", // cyan
+        },
+        colorScale: {
+            100: "#000000", // lightest in dark mode
+            200: "#0d0d0d",
+            300: "#1a1a1a",
+            400: "#404040",
+            500: "#666666",
+            600: "#8c8c8c",
+            700: "#b3b3b3",
+            800: "#d9d9d9",
+            900: "#ffffff", // darkest in dark mode
+        },
+        background: {
+            color: "#0d0d0d", // dark background
+            error: "#f8d7da", // light red for error background
+            hoverColor: "#1a1a1a", // slightly lighter for hover
+        },
+        border: {
+            color: "rgb(189, 189, 189", // gray border
+        },
+        table: {
+            header: {
+                backgroundColor: "rgba(10, 10, 10, 1)", // light background for table header
+                color: "rgba(255, 255, 255, 1)", // black text for table header
+            },
+        },
+    },
+};