@rnaga/wp-next-ui 1.0.1

package/Accordion.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as MuiAccordion, AccordionSummary as MuiAccordionSummary } from "@mui/material";
+export declare const Accordion: (props: Parameters<typeof MuiAccordion>[0]) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionSummary: (props: Parameters<typeof MuiAccordionSummary>[0]) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Accordion.d.ts.map

package/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../src/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,YAAY,EACzB,gBAAgB,IAAI,mBAAmB,EACxC,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,4CAgBlE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,4CAOjD,CAAC"}

package/Accordion.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion as MuiAccordion, AccordionSummary as MuiAccordionSummary, } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+export const Accordion = (props) => {
+    return (_jsx(MuiAccordion, { disableGutters: true, elevation: 0, square: true, sx: {
+            backgroundColor: "transparent",
+            my: 0,
+            ...props.sx,
+        }, ...props, children: props.children }));
+};
+export const AccordionSummary = (props) => {
+    return (_jsx(MuiAccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, {}), children: props.children }));
+};

package/Accordions.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from "react";
+import { Accordion, AccordionSummary as MuiAccodionSummary, SxProps } from "@mui/material";
+import { Typography } from "./Typography";
+export declare const Accordions: (props: {
+    items: {
+        title: string;
+        content: JSX.Element;
+    }[];
+    defaultExpanded?: number[];
+    allowSingleExpanded?: boolean;
+    height?: number;
+    sx?: SxProps;
+    slotProps?: {
+        summary?: Parameters<typeof MuiAccodionSummary>[0];
+        title?: Parameters<typeof Typography>[0];
+    };
+    size?: "small" | "medium";
+} & Omit<Parameters<typeof Accordion>[0], "sx" | "defaultExpanded" | "children">) => import("react/jsx-runtime").JSX.Element[];
+//# sourceMappingURL=Accordions.d.ts.map

package/Accordions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordions.d.ts","sourceRoot":"","sources":["../src/Accordions.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAM,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,SAAS,EAET,gBAAgB,IAAI,kBAAkB,EACtC,OAAO,EACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,eAAO,MAAM,UAAU,GACrB,OAAO;IACL,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC;KACtB,EAAE,CAAC;IACJ,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;KAC1C,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,EAC/B,IAAI,GAAG,iBAAiB,GAAG,UAAU,CACtC,8CA2EF,CAAC"}

package/Accordions.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Accordion, AccordionDetails, AccordionSummary as MuiAccodionSummary, } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Typography } from "./Typography";
+import { useWPTheme } from "./ThemeRegistry";
+export const Accordions = (props) => {
+    const { items, defaultExpanded, sx, height, allowSingleExpanded = false, slotProps, size, ...rest } = props;
+    const [expdanded, setExpanded] = React.useState(defaultExpanded ? defaultExpanded[0] : -1);
+    const { wpTheme } = useWPTheme();
+    const { sx: summarySx, ...summarySlotProps } = slotProps?.summary || {};
+    const { sx: titleSx, ...titleSlotProps } = slotProps?.title || {};
+    return items.map((item, index) => {
+        return (_jsxs(Accordion, { expanded: allowSingleExpanded ? expdanded === index : undefined, ...(!allowSingleExpanded && {
+                defaultExpanded: defaultExpanded
+                    ? defaultExpanded.includes(index)
+                    : true,
+            }), disableGutters: true, elevation: 0, square: true, sx: {
+                //backgroundColor: wpTheme.background.color,
+                ...sx,
+            }, ...rest, children: [_jsx(MuiAccodionSummary, { expandIcon: _jsx(ExpandMoreIcon, {}), sx: {
+                        minHeight: height ?? 20,
+                        "& .MuiAccordionSummary-content": {
+                            my: 0.5,
+                        },
+                        //color: wpTheme.text.color,
+                        ...summarySx,
+                    }, onClick: () => {
+                        if (allowSingleExpanded) {
+                            setExpanded(index === expdanded ? undefined : index);
+                        }
+                    }, ...summarySlotProps, children: _jsx(Typography, { size: size, sx: {
+                            fontWeight: 600,
+                            lineHeight: "20px",
+                            my: 1,
+                            ...titleSx,
+                        }, ...titleSlotProps, children: item.title }) }), _jsx(AccordionDetails, { children: item.content })] }, index));
+    });
+};

package/Background.d.ts

@@ -0,0 +1,5 @@
+export declare const Background: (props: {
+    zIndex?: number;
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Background.d.ts.map

package/Background.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../src/Background.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,GAAI,OAAO;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,4CAqBzE,CAAC"}

package/Background.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+export const Background = (props) => {
+    const { zIndex = 999, onClose } = props;
+    return (_jsx(Box, { sx: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100vw",
+            height: "100vh",
+            zIndex,
+            // background color a little lighter than the background
+            backgroundColor: "rgba(0,0,0,0.1)",
+        }, onMouseDown: (e) => {
+            e.stopPropagation();
+            onClose();
+        } }));
+};

package/BadgeOnMouseOver.d.ts

@@ -0,0 +1,12 @@
+import { Badge, SxProps } from "@mui/material";
+import { CSSProperties } from "react";
+export declare const BadgeOnMouseOver: (props: {
+    label: string;
+    ref: React.RefObject<HTMLElement | null>;
+    onClick: (e: React.MouseEvent) => void;
+    slotSxProps?: {
+        badgeContent?: SxProps;
+        badge?: CSSProperties;
+    };
+} & Omit<Parameters<typeof Badge>[0], "onClick" | "ref">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BadgeOnMouseOver.d.ts.map

package/BadgeOnMouseOver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeOnMouseOver.d.ts","sourceRoot":"","sources":["../src/BadgeOnMouseOver.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAO,OAAO,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGhD,eAAO,MAAM,gBAAgB,GAC3B,OAAO;IACL,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE;QACZ,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;CACH,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC,4CA0DzD,CAAC"}

package/BadgeOnMouseOver.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge, Box } from "@mui/material";
+import { useState } from "react";
+export const BadgeOnMouseOver = (props) => {
+    const { onClick, label, children, ref, sx, color, ...rest } = props;
+    const [invisible, setInvisible] = useState(true);
+    return (_jsx(Badge, { ref: (e) => {
+            if (!e)
+                return;
+            ref.current = e;
+            e.addEventListener("mouseover", () => {
+                setInvisible(false);
+            });
+            e.addEventListener("mouseleave", () => {
+                setInvisible(true);
+            });
+        }, invisible: invisible, badgeContent: _jsx(Box, { onClick: (e) => {
+                onClick(e);
+            }, sx: {
+                minWidth: 55,
+                ...props.slotSxProps?.badgeContent,
+            }, children: label }), anchorOrigin: {
+            vertical: "top",
+            horizontal: "right",
+        }, sx: {
+            "& .MuiBadge-badge": {
+                top: -11,
+                right: 30,
+                fontSize: 9,
+                opacity: 0.8,
+                borderRadius: 1,
+                cursor: "pointer",
+                "&:hover": {
+                    opacity: 1,
+                },
+                ...props.slotSxProps?.badge,
+            },
+            ...sx,
+        }, color: color ?? "info", ...rest, children: children }));
+};

package/BasicMenuButton.d.ts

@@ -0,0 +1,17 @@
+import { Button } from "./Button";
+import { RefObject } from "react";
+export type BasicMenuButtonItem = {
+    label: string;
+    value: string;
+};
+export declare const BasicMenuButton: (props: {
+    ref?: RefObject<HTMLElement | null>;
+    items: BasicMenuButtonItem[];
+    onChange: (value: string, item: BasicMenuButtonItem) => void;
+    label?: string;
+    size?: "small" | "medium";
+    value?: string;
+    showArrowIcon?: boolean;
+    disabled?: boolean;
+} & Omit<Parameters<typeof Button>[0], "onChange" | "ref" | "label" | "value" | "children" | "disabled">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BasicMenuButton.d.ts.map

package/BasicMenuButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicMenuButton.d.ts","sourceRoot":"","sources":["../src/BasicMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAKlC,OAAO,EAAY,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIzE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO;IACL,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CACN,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,EAC5B,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CACjE,4CAwHF,CAAC"}

package/BasicMenuButton.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import { Fragment, useEffect, useState } from "react";
+import { Typography } from "./Typography";
+import { useWPTheme } from "./ThemeRegistry";
+export const BasicMenuButton = (props) => {
+    const { onChange, label, ref: buttonRef, size, showArrowIcon = true, disabled = false, ...rest } = props;
+    const fontSize = size == "medium" ? 14 : 12;
+    const { wpTheme } = useWPTheme();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const [buttonValue, setButtonValue] = useState();
+    const [buttonWidth, setButtonWidth] = useState("100px");
+    const [items, setItems] = useState();
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    useEffect(() => {
+        setButtonValue(label);
+    }, [label]);
+    useEffect(() => {
+        setItems(props.items);
+    }, [props.items]);
+    return (_jsxs(Fragment, { children: [_jsxs(Button, { ...rest, id: "basic-button", size: "small", disabled: disabled, "aria-controls": open ? "basic-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, onClick: handleClick, sx: {
+                    textTransform: "none",
+                    border: "1px solid",
+                    borderColor: wpTheme.border.color,
+                    justifyContent: "space-between",
+                    height: size == "medium" ? 32 : 24,
+                    //color: (theme) => theme.palette.text.primary,
+                    backgroundColor: wpTheme.background.color,
+                    color: wpTheme.text.color,
+                    ...rest.sx,
+                }, ref: (ref) => {
+                    if (ref) {
+                        setButtonWidth(ref.clientWidth + "px");
+                        if (buttonRef) {
+                            buttonRef.current = ref;
+                        }
+                    }
+                }, children: [_jsx(Typography, { fontSize: fontSize, sx: {
+                            ...(disabled ? { opacity: 0.5 } : {}),
+                        }, children: buttonValue }), disabled === false && (_jsxs(_Fragment, { children: [showArrowIcon && !open && _jsx(ArrowDropDownIcon, { fontSize: "small" }), showArrowIcon && open && _jsx(ArrowDropUpIcon, { fontSize: "small" })] }))] }), _jsx(Menu, { id: "basic-menu", anchorEl: anchorEl, open: disabled === true ? false : open, onClose: handleClose, sx: {
+                    width: "100%",
+                }, children: items?.map((item, index) => (_jsx(MenuItem, { onClick: (e) => {
+                        onChange(item.value, item);
+                        setButtonValue(item.label);
+                        handleClose();
+                    }, sx: {
+                        width: buttonWidth,
+                    }, children: _jsx(Typography, { fontSize: fontSize, sx: {
+                            minHeight: size == "medium" ? 20 : 16,
+                        }, component: "div", children: item.label }) }, index))) })] }, label));
+};

package/Button.d.ts

@@ -0,0 +1,10 @@
+import { Button as MuiButton } from "@mui/material";
+export declare const Button: (props: {
+    children: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    component?: React.ElementType;
+    bold?: boolean;
+    loading?: boolean;
+    color?: "info" | "success" | "warning" | "error" | "primary" | "secondary";
+} & Omit<Parameters<typeof MuiButton>[0], "children" | "size">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AAIpD,eAAO,MAAM,MAAM,GACjB,OAAO;IACL,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;CAC5E,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,4CAwB/D,CAAC"}

package/Button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as MuiButton } from "@mui/material";
+import { CircularProgress } from "@mui/material";
+import { useWPTheme } from "./ThemeRegistry";
+export const Button = (props) => {
+    const { children, size, component, bold, loading, color, ...rest } = props;
+    const { wpTheme } = useWPTheme();
+    return (_jsx(MuiButton, { ...rest, component: component, variant: "contained", size: "small", disableElevation: true, disabled: loading, sx: {
+            textTransform: "none",
+            fontSize: size === "large" ? 16 : size === "medium" ? 14 : 12,
+            ...(bold ? { fontWeight: "bold" } : {}),
+            ...(color ? { backgroundColor: wpTheme.colors[color] } : {}),
+            ...rest.sx,
+        }, endIcon: loading ? _jsx(CircularProgress, { size: 20 }) : null, children: children }));
+};

package/Card.d.ts

@@ -0,0 +1,6 @@
+import { Card as MuiCard } from "@mui/material";
+export declare const Card: (props: {
+    children: React.ReactNode;
+    sx?: React.CSSProperties;
+} & React.ComponentProps<typeof MuiCard>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,IAAI,GACf,OAAO;IACL,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,4CAmBzC,CAAC"}

package/Card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card as MuiCard } from "@mui/material";
+export const Card = (props) => {
+    const { children, sx, ...rest } = props;
+    return (_jsx(MuiCard, { sx: {
+            padding: 2,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            gap: 2,
+            ...sx,
+        }, ...rest, children: children }));
+};

package/CardImage.d.ts

@@ -0,0 +1,10 @@
+import { Card } from "@mui/material";
+export declare const CardImage: (props: {
+    src?: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    component?: string;
+    placeholder?: string;
+} & Parameters<typeof Card>[0]) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardImage.d.ts.map

package/CardImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardImage.d.ts","sourceRoot":"","sources":["../src/CardImage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,IAAI,EAAa,MAAM,eAAe,CAAC;AAOrD,eAAO,MAAM,SAAS,GACpB,OAAO;IACL,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,4CAgE/B,CAAC"}

package/CardImage.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Card, CardMedia } from "@mui/material";
+import { useWPTheme } from "./ThemeRegistry";
+import { Typography } from "./Typography";
+import { getMimeType } from "@rnaga/wp-next-core/client/utils/media";
+import DocumentScannerOutlinedIcon from "@mui/icons-material/DocumentScannerOutlined";
+export const CardImage = (props) => {
+    const { src, alt, width, height, sx, placeholder, component, ...rest } = props;
+    const { wpTheme } = useWPTheme();
+    const mimeType = getMimeType(src || "").split("/")[0];
+    const componentString = mimeType === "image" ? "img" : mimeType === "video" ? "video" : undefined;
+    return (_jsx(Card, { component: component || "li", variant: "outlined", sx: {
+            flexGrow: 1,
+            flexShrink: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            cursor: "pointer",
+            ...sx,
+        }, ...rest, children: !src ? (_jsx(Box, { sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                width: width || 120,
+                height: height || 120,
+            }, children: _jsx(Typography, { children: placeholder || "No image selected" }) })) : componentString ? (_jsx(CardMedia, { component: componentString, sx: {
+                maxWidth: "100%",
+                maxHeight: height || 200,
+                objectFit: "cover",
+            }, image: src, alt: alt || "Selected media" })) : (_jsx(DocumentScannerOutlinedIcon, { sx: {
+                width: width || 120,
+                height: height || 200,
+            } })) }));
+};

package/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import { Checkbox as MuiCheckbox } from "@mui/material";
+export declare const Checkbox: (props: {
+    label?: string;
+    size?: "small" | "medium";
+} & Parameters<typeof MuiCheckbox>[0]) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAG7D,eAAO,MAAM,QAAQ,GACnB,OAAO;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,4CAoBtC,CAAC"}

package/Checkbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Checkbox as MuiCheckbox } from "@mui/material";
+import { Typography } from "./Typography";
+export const Checkbox = (props) => {
+    const { label, size, ...rest } = props;
+    return (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [_jsx(MuiCheckbox, { size: "small", ...rest, sx: {
+                    "& .MuiFormControlLabel-label": {
+                        fontSize: "0.875rem",
+                    },
+                    height: size === "small" ? 16 : 20,
+                    ...rest.sx,
+                } }), label && _jsx(Typography, { size: size, children: label })] }));
+};

package/Chip.d.ts

@@ -0,0 +1,10 @@
+import { SxProps } from "@mui/material";
+export declare const Chip: (props: {
+    size?: "small" | "medium" | "large";
+    color?: "yellow" | "orange" | "purple" | "grey";
+    label: string | number;
+    opacity?: number;
+    sx?: SxProps;
+    onClick?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chip.d.ts.map

package/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,OAAO,EAAkB,MAAM,eAAe,CAAC;AAI9E,eAAO,MAAM,IAAI,GAAI,OAAO;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,4CAwDA,CAAC"}

package/Chip.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { Typography } from "./Typography";
+export const Chip = (props) => {
+    const { size = "medium", label, sx, color, opacity, onClick } = props;
+    const defaultColor = "240, 240, 240";
+    const baseColor = color === "yellow"
+        ? "212, 178, 0"
+        : color === "orange"
+            ? "240, 101, 41"
+            : color === "purple"
+                ? "86, 61, 124"
+                : color === "grey"
+                    ? "211, 211, 211" // lighter grey
+                    : defaultColor;
+    const backgroundColor = baseColor !== undefined
+        ? `rgba(${baseColor}, ${opacity !== undefined ? opacity : 1})`
+        : undefined;
+    return (_jsx(Box, { sx: {
+            fontSize: size === "large" ? 12 : size === "medium" ? 10 : 8,
+            backgroundColor,
+            //color: backgroundColor == undefined ? undefined : "white",
+            display: "inline-flex",
+            justifyContent: "center",
+            alignItems: "center",
+            //width: size === "large" ? 32 : size === "medium" ? 24 : 20,
+            //height: size === "large" ? 32 : size === "medium" ? 24 : 20,
+            //borderRadius: "50%",
+            p: 0.5,
+            borderRadius: 1.5,
+            ...(onClick && {
+                cursor: "pointer",
+            }),
+            ...sx,
+        }, onClick: onClick, children: _jsx(Typography, { variant: "caption", sx: {
+                fontSize: size === "large" ? 12 : size === "medium" ? 10 : 8,
+                color: color === "grey" || !color ? "black" : "white",
+                m: 0,
+                p: 0,
+            }, bold: true, children: label }) }));
+};

package/DateTimePicker.d.ts

@@ -0,0 +1,6 @@
+export declare const DateTimePicker: (props: {
+    value?: string | Date;
+    onChange?: (value: string | Date) => void;
+    size?: "small" | "medium" | "large";
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DateTimePicker.d.ts.map

package/DateTimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../src/DateTimePicker.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,GAAI,OAAO;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,4CAiDA,CAAC"}

package/DateTimePicker.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DateTimePicker as MuiDateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import dayjs from "dayjs";
+import { useWPTheme } from "./ThemeRegistry";
+export const DateTimePicker = (props) => {
+    const { value, onChange, size } = props;
+    const { wpTheme } = useWPTheme();
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsx(MuiDateTimePicker, { value: dayjs(value), onChange: (newValue) => {
+                onChange && onChange(newValue?.toDate() || "");
+            }, slotProps: {
+                textField: {
+                    size: "small",
+                    slotProps: {
+                        input: { disableUnderline: true, sx: { fontSize: 0.1 } },
+                    },
+                    sx: {
+                        "& .MuiInputBase-input": {
+                            py: 0.5,
+                            px: 1,
+                        },
+                        "& .MuiOutlinedInput-root": {
+                            fontSize: size === "large" ? 16 : size === "medium" ? 14 : 12,
+                            height: size === "large" ? 36 : size == "medium" ? 32 : 24,
+                            border: `1px solid ${wpTheme.border.color}`,
+                            "& fieldset": {
+                                border: "none",
+                            },
+                            "&.Mui-focused fieldset": {
+                                border: "none",
+                            },
+                            "&:hover fieldset": {
+                                border: "none",
+                            },
+                        },
+                        "& .MuiSvgIcon-root": {
+                            fontSize: size === "large" ? 26 : size === "medium" ? 22 : 18,
+                        },
+                    },
+                },
+            }, sx: {
+                width: "100%",
+            } }) }));
+};

package/DraggableBox.d.ts

@@ -0,0 +1,39 @@
+/**
+ * A draggable component that displays content in a floating container.
+ *
+ * Props:
+ * - children: The content to be displayed inside the draggable box.
+ * - open: Controls whether the box is visible or not.
+ * - onClose: Callback to close the box.
+ * - offset: Optional initial offset for the box's X and Y coordinates.
+ * - title: Optional title to display in the header.
+ * - size: Sets the Typography size ("small" | "medium").
+ * - targetRef: Reference to an element whose relative position determines the box's initial placement.
+ * - sx: Style overrides for the outer Box wrapping the content.
+ * - slotSxProps: Style overrides for the header and title.
+ */
+import React, { RefObject } from "react";
+import { SxProps } from "@mui/material";
+type SlotSxProps = {
+    header?: SxProps;
+    title?: SxProps;
+};
+export declare const DraggableBox: (props: {
+    children: React.ReactNode;
+    open: boolean;
+    onClose: VoidFunction;
+    offset?: {
+        left?: number;
+        top?: number;
+    };
+    title?: string;
+    size?: "small" | "medium";
+    targetRef?: RefObject<HTMLElement | null>;
+    ref?: RefObject<HTMLElement | null>;
+    sx?: SxProps;
+    slotSxProps?: SlotSxProps;
+    zIndexLayer?: number;
+    placement?: "target" | "left";
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DraggableBox.d.ts.map

package/DraggableBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableBox.d.ts","sourceRoot":"","sources":["../src/DraggableBox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAMtD,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC/B,4CAqNA,CAAC"}