@rnaga/wp-next-ui 1.0.1

package/SelectWPUser.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Autocomplete } from "@mui/material";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { Typography } from "./Typography";
+import { SelectAutocomplete } from "./SelectAutocomplete";
+const sxSelectAutocomplete = SelectAutocomplete.sx;
+const SelectAutocompleteTextField = SelectAutocomplete.TextField;
+const RenderOption = SelectAutocomplete.RenderOption;
+const getArgs = (args) => {
+    args = {
+        ...args,
+        exclude_anonymous: true,
+        per_page: 20,
+    };
+    return [args, { context: "view" }];
+};
+export const SelectWPUser = (props) => {
+    const { onChange, defaultValue, blogId, userOptions, userArgs, slotSxProps, size, } = props;
+    const { actions, parse, safeParse } = useServerActions();
+    const [users, setUsers] = useState();
+    const [currentUser, setCurrentUser] = useState();
+    useEffect(() => {
+        (async () => {
+            let currentUser;
+            if (defaultValue) {
+                [currentUser] = ((await actions.user
+                    .list(...getArgs({
+                    blog_id: blogId,
+                    include: [defaultValue],
+                    per_page: 1,
+                }))
+                    .then(parse)) ?? [])[0];
+                setCurrentUser(currentUser);
+            }
+            const [users] = await actions.user
+                .list(...getArgs({
+                blog_id: blogId,
+                exclude: defaultValue ? [defaultValue] : undefined,
+            }))
+                .then(parse);
+            setUsers(currentUser ? [...users, currentUser] : users);
+        })();
+    }, []);
+    const handleSearch = async (value) => {
+        const response = await actions.user
+            .list(...getArgs({
+            blog_id: blogId,
+            search: value,
+        }))
+            .then(safeParse);
+        if (!response.success) {
+            return;
+        }
+        setUsers(response.data);
+    };
+    const arePostsEqual = (a, b) => {
+        return a.ID === b.ID;
+    };
+    const getUserKey = (user) => `${Math.random()}-${user.ID}`;
+    if (!users || (defaultValue && !currentUser)) {
+        return _jsx(Typography, { children: "Loading.." });
+    }
+    let value = currentUser;
+    return (_jsx(SelectAutocomplete.Wrapper, { size: size, slotSxProps: slotSxProps, children: _jsx(Autocomplete, { size: "small", 
+            //freeSolo={freeSolo}
+            disableClearable: true, value: value, onChange: (e, v) => {
+                const user = v;
+                console.log("onChange", v);
+                setCurrentUser(user);
+                onChange(user);
+            }, onInputChange: (event, value, reason) => {
+                if (typeof value === "string") {
+                    const newValue = {
+                        ID: 0,
+                        user_nicename: value,
+                    };
+                    onChange(newValue);
+                    setCurrentUser(newValue);
+                }
+                if (reason === "input") {
+                    handleSearch(value);
+                }
+            }, getOptionKey: getUserKey, getOptionLabel: (option) => {
+                if (typeof option === "string") {
+                    return option;
+                }
+                return typeof option !== "string" ? option.user_nicename : "";
+            }, 
+            // getOptionLabel={(option) => option.post_title}
+            isOptionEqualToValue: arePostsEqual, options: [...users], renderInput: (params) => (_jsx(SelectAutocompleteTextField, { params: params, size: size, sx: slotSxProps?.textField })), sx: sxSelectAutocomplete({
+                size: size ?? "small",
+                sx: slotSxProps?.input,
+            }), renderOption: (props, option, state) => {
+                const postId = option.ID;
+                return (_jsx(RenderOption, { props: props, option: {
+                        label: option.user_nicename,
+                        id: `${postId}`,
+                    }, state: state }, postId));
+            } }, `user-${defaultValue ?? 0}`) }));
+};

package/SortableList.d.ts

@@ -0,0 +1,28 @@
+import { SxProps } from "@mui/material";
+import { JSX, RefObject } from "react";
+export type SortableListItemType<T = string> = {
+    index: number;
+    value: T;
+    label: string;
+    ref: RefObject<HTMLElement | null>;
+};
+type DisplayType = "vertical" | "horizontal" | "grid" | "horizontal-fit";
+export type SortableListProps = Parameters<typeof SortableList>[0];
+export declare const SortableList: <T extends any = string>(props: {
+    enum: {
+        value: T;
+        label: string;
+    }[];
+    size?: "small" | "medium";
+    sx?: SxProps;
+    slotSxProps?: {
+        label?: SxProps;
+    };
+    displayType: DisplayType;
+    renderItem?: (item: SortableListItemType<T>) => JSX.Element;
+    onDelete?: (index: number) => void;
+    onEdit?: (index: number) => void;
+    onChange?: (items: SortableListItemType<T>[]) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SortableList.d.ts.map

package/SortableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../src/SortableList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmC,OAAO,EAAE,MAAM,eAAe,CAAC;AAGzE,OAAO,EAEL,GAAG,EACH,SAAS,EAKV,MAAM,OAAO,CAAC;AAQf,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,MAAM,IAAI;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACpC,CAAC;AAEF,KAAK,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,gBAAgB,CAAC;AAgOzE,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,GAAG,GAAG,MAAM,EAAE,OAAO;IAC1D,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;IACF,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;CACvD,4CAmGA,CAAC"}

package/SortableList.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconButton, List, ListItem } from "@mui/material";
+import { Typography } from "./Typography";
+import { useMouseMove } from "./hooks/use-mouse-move";
+import { createContext, useContext, useEffect, useRef, useState, } from "react";
+import { Close } from "@mui/icons-material";
+import EditIcon from "@mui/icons-material/Edit";
+import { useWPTheme } from "./ThemeRegistry";
+const Context = createContext({});
+const SortableListItem = (props) => {
+    const { index, size } = props;
+    const ref = useRef(null);
+    const { findItem, swapItems, refPos, targetRef, items, displayType, renderItem, onDelete, onEdit, } = useContext(Context);
+    const item = findItem(index);
+    const { wpTheme } = useWPTheme();
+    const handleDeltaChange = (e, delta) => {
+        // Get the rect of the item being dragged
+        const rect = ref.current?.getBoundingClientRect();
+        if (!rect) {
+            console.warn("SortableListItem ref is not set or does not have a bounding rect.");
+            return;
+        }
+        let newY, newX, transformValues = [];
+        //if (displayType === "horizontal" || displayType === "grid") {
+        if (["horizontal", "horizontal-fit", "grid"].includes(displayType)) {
+            newX = refPos.current.x + delta.x; // Update the X position relative to the element
+            transformValues.push(`translateX(${newX}px)`);
+            refPos.current.x = newX; // Update the reference position
+        }
+        if (displayType === "vertical" || displayType === "grid") {
+            newY = refPos.current.y + delta.y; // Update the Y position relative to the element
+            transformValues.push(`translateY(${newY}px)`);
+            refPos.current.y = newY; // Update the reference position
+        }
+        ref.current.style.transform = transformValues.join(" ");
+        // Get elements on the currrent moust position
+        const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
+        // timeoutId.current = setTimeout(() => {
+        for (const element of elementsAtPoint) {
+            // get the data attribute
+            const itemIndex = element.getAttribute("data-sortable-item-index");
+            if (!itemIndex) {
+                // Skip if the element does not have the data attribute
+                continue;
+            }
+            // Skip if itemValue is null or the same as the current value
+            if (itemIndex === String(index)) {
+                if (targetRef.current) {
+                    targetRef.current.style.removeProperty("border");
+                    targetRef.current = null;
+                }
+                continue;
+            }
+            const itemIndexNumber = parseInt(itemIndex);
+            if (itemIndexNumber < 0 || itemIndexNumber >= items.length) {
+                continue; // Skip invalid indices
+            }
+            if (targetRef.current) {
+                targetRef.current.style.removeProperty("border");
+            }
+            targetRef.current = element;
+            targetRef.current.style.border = "1px solid red";
+            break;
+        }
+    };
+    const handleMouseDown = (e) => {
+        console.log("mouse down on item", index, e);
+        const rect = ref.current?.getBoundingClientRect();
+        if (rect) {
+            refPos.current.y = e.clientY - rect.top - rect.height / 2; // Calculate the initial Y offset
+            refPos.current.x = 0;
+            ref.current.style.zIndex = "100000"; // Bring the item to the front
+            ref.current.style.transform = `translate(${refPos.current.x}px, ${refPos.current.y}px)`;
+        }
+    };
+    const handleMouseUp = (e) => {
+        refPos.current.y = 0; // Reset Y position
+        refPos.current.x = 0; // Reset X position
+        ref.current?.style.removeProperty("transform");
+        ref.current?.style.removeProperty("z-index");
+        if (targetRef.current) {
+            const toItemIndex = targetRef.current.getAttribute("data-sortable-item-index");
+            swapItems(e, index, toItemIndex ? parseInt(toItemIndex) : -1);
+            targetRef.current?.style.removeProperty("border");
+            targetRef.current = null;
+        }
+    };
+    const { initMouseMove } = useMouseMove({
+        onDeltaChange: handleDeltaChange,
+        onMouseUp: handleMouseUp,
+        onMouseDown: handleMouseDown,
+        cursor: "grabbing",
+        threshold: 1,
+    });
+    // Assign the ref to the item
+    useEffect(() => {
+        item.ref = ref;
+    }, [item]);
+    return (_jsxs(ListItem, { ref: ref, value: item.value, onMouseDown: initMouseMove(ref), "data-sortable-item-index": index, sx: {
+            position: "relative",
+            cursor: "move",
+            "&:hover": {
+                backgroundColor: wpTheme.background.hoverColor, // Use theme hover color
+            },
+            border: (theme) => `1px solid ${theme.palette.divider}`,
+            p: 0,
+            width: displayType === "horizontal" ? "auto" : "100%",
+            display: "flex",
+        }, children: [_jsx(Box, { sx: { flexGrow: 1, display: "flex", alignItems: "center" }, children: renderItem ? (renderItem(item)) : (_jsx(Typography, { size: size, sx: {
+                        p: 0.5,
+                    }, children: item.label })) }), onEdit && (_jsx(IconButton, { size: "small", sx: {
+                    height: "100%",
+                }, onMouseDown: (e) => {
+                    e.stopPropagation();
+                    onEdit?.(index);
+                }, children: _jsx(EditIcon, { sx: {
+                        fontSize: size === "small" ? "small" : "medium",
+                    } }) })), onDelete && (_jsx(IconButton, { size: "small", sx: {
+                    height: "100%",
+                }, onMouseDown: (e) => {
+                    e.stopPropagation();
+                    console.log("Removing item at index", index);
+                    onDelete?.(index);
+                }, children: _jsx(Close, { sx: {
+                        fontSize: size === "small" ? "small" : "medium",
+                    } }) }))] }));
+};
+export const SortableList = (props) => {
+    const { size = "small", displayType = "vertical", renderItem, onDelete, onChange, onEdit, } = props;
+    const [items, setItems] = useState([]);
+    const targetRef = useRef(null);
+    const refPos = useRef({ x: 0, y: 0 });
+    const findItem = (index) => {
+        return items.find((item) => item.index === index);
+    };
+    const swapItems = (e, fromIndex, toIndex) => {
+        console.log("Swapping items", fromIndex, toIndex);
+        if (fromIndex < 0 ||
+            toIndex < 0 ||
+            fromIndex >= items.length ||
+            toIndex >= items.length) {
+            return;
+        }
+        // Swap items in the state
+        const newItems = [...items];
+        const temp = newItems[fromIndex];
+        newItems[fromIndex] = newItems[toIndex];
+        newItems[toIndex] = temp;
+        newItems[fromIndex].index = fromIndex; // Update index after swap
+        newItems[toIndex].index = toIndex; // Update index after swap
+        setItems(newItems);
+        onChange?.(newItems);
+    };
+    useEffect(() => {
+        // Initialize items from the enum prop
+        const initialItems = props.enum.map((item, index) => ({
+            index,
+            value: item.value,
+            label: item.label,
+            ref: null,
+        }));
+        setItems(initialItems);
+    }, [props.enum]);
+    let sx = {};
+    if (props.displayType === "horizontal") {
+        sx = {
+            display: "flex",
+            flexDirection: "row",
+        };
+    }
+    else if (props.displayType === "horizontal-fit") {
+        sx = {
+            display: "flex",
+            flexDirection: "row",
+        };
+    }
+    else if (props.displayType === "grid") {
+        sx = {
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+            gap: 1,
+        };
+    }
+    return (_jsx(Context, { value: {
+            items,
+            findItem: findItem,
+            swapItems,
+            refPos,
+            targetRef,
+            displayType,
+            renderItem: renderItem,
+            onDelete,
+            onEdit,
+        }, children: _jsx(List, { sx: { ...sx, ...props.sx }, children: items.map((item, index) => (_jsx(SortableListItem, { index: index, size: size }, item.index))) }) }));
+};

package/Tabs.d.ts

@@ -0,0 +1,17 @@
+import { SxProps } from "@mui/material";
+import React from "react";
+export declare const Tabs: (props: {
+    items: {
+        label: string;
+        content: React.ReactNode;
+    }[];
+    size?: "small" | "medium" | "large";
+    slotSxProps?: {
+        tab: SxProps;
+        typography?: SxProps;
+    };
+    sx?: SxProps;
+    tabIndex?: number;
+    onChange?: (index: number) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

package/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,OAAO,EAAE,MAAM,eAAe,CAAC;AAG7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,IAAI,GAAI,OAAO;IAC1B,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;KAC1B,EAAE,CAAC;IACJ,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,WAAW,CAAC,EAAE;QACZ,GAAG,EAAE,OAAO,CAAC;QACb,UAAU,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;IACF,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,4CAgEA,CAAC"}

package/Tabs.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tab, Tabs as MuiTabs } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Typography } from "./Typography";
+export const Tabs = (props) => {
+    const { items, size, tabIndex, onChange } = props;
+    const [elementTabIndex, setElementTabIndex] = useState(tabIndex ?? 0);
+    const handleElementTabClick = (event, newValue) => {
+        // Handle element click logic here
+        setElementTabIndex(newValue);
+        onChange?.(newValue);
+    };
+    useEffect(() => {
+        if (typeof tabIndex === "number" && elementTabIndex !== tabIndex) {
+            setElementTabIndex(tabIndex);
+        }
+    }, [tabIndex]);
+    const selectedContent = items[elementTabIndex]?.content;
+    if (!selectedContent) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(MuiTabs, { value: elementTabIndex, onChange: handleElementTabClick, sx: {
+                    ...props.sx,
+                }, children: items.map((item, index) => (_jsx(Tab, { label: _jsx(Typography, { size: size, bold: true, fontSize: !size || size === "small" ? 9 : "inherit", sx: {
+                            ...props.slotSxProps?.typography,
+                        }, children: item.label }), value: index, sx: {
+                        textTransform: "none",
+                        p: 0,
+                        "&.MuiTab-root": {
+                            width: `calc(100% / ${items.length})`,
+                            minWidth: "unset",
+                        },
+                        ...props.slotSxProps?.tab,
+                    } }, index))) }), selectedContent] }));
+};

package/ThemeRegistry.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type * as types from "./types";
+export declare const useWPTheme: () => {
+    mode: "dark" | "light" | "system";
+    wpTheme: types.WPThemeProps;
+    muiTheme: import("@mui/material").Theme;
+    wpRawTheme: types.WPTheme;
+};
+export declare const baseMaterialTheme: any[];
+export default function ThemeRegistry({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeRegistry.d.ts.map

package/ThemeRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeRegistry.d.ts","sourceRoot":"","sources":["../src/ThemeRegistry.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,KAAK,KAAK,MAAM,SAAS,CAAC;AAItC,eAAO,MAAM,UAAU;;;;;CAatB,CAAC;AAEF,eAAO,MAAM,iBAAiB,OAAK,CAAC;AAEpC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CA4BA"}

package/ThemeRegistry.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ThemeProvider as MuiThemeProvider, createTheme as createMuiTheme, Experimental_CssVarsProvider as MaterialCssVarsProvider, THEME_ID as MATERIAL_THEME_ID, useColorScheme as useMaterialColorScheme, useTheme, } from "@mui/material/styles";
+import { useWP } from "@rnaga/wp-next-core/client/wp";
+import { wpTheme } from "./wp-theme";
+import { CssBaseline } from "@mui/material";
+const WPThemeContext = React.createContext(wpTheme);
+export const useWPTheme = () => {
+    const theme = React.useContext(WPThemeContext);
+    const { mode } = useMaterialColorScheme();
+    const muiTheme = useTheme();
+    const wpTheme = mode === "dark" ? theme.dark : theme.global;
+    return {
+        mode,
+        wpTheme,
+        muiTheme,
+        wpRawTheme: theme,
+    };
+};
+export const baseMaterialTheme = [];
+export default function ThemeRegistry({ children, }) {
+    const { wpHooks } = useWP();
+    const initWPTheme = React.useContext(WPThemeContext);
+    const themes = wpHooks.filter.apply("next_ui_theme", {
+        mui: baseMaterialTheme,
+        wp: initWPTheme,
+    });
+    const muiThemeWithOverrides = createMuiTheme({
+        colorSchemes: {
+            dark: true,
+        },
+    });
+    const wpTheme = themes.wp;
+    return (_jsx(MaterialCssVarsProvider, { theme: { [MATERIAL_THEME_ID]: muiThemeWithOverrides }, children: _jsx(MuiThemeProvider, { theme: muiThemeWithOverrides, children: _jsxs(WPThemeContext, { value: wpTheme, children: [_jsx(CssBaseline, {}), children] }) }) }));
+}

package/Typography.d.ts

@@ -0,0 +1,9 @@
+import { Typography as MuiTypography } from "@mui/material";
+export declare const Typography: (props: {
+    size?: "small" | "medium" | "large" | "xlarge";
+    children: React.ReactNode;
+    bold?: boolean;
+    fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    component?: React.ElementType;
+} & Omit<Parameters<typeof MuiTypography>[0], "children">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Typography.d.ts.map

package/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../src/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAE5D,eAAO,MAAM,UAAU,GACrB,OAAO;IACL,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACjE,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CAC/B,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,4CAsB1D,CAAC"}

package/Typography.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography as MuiTypography } from "@mui/material";
+export const Typography = (props) => {
+    const { size, children, bold, fontWeight, component, ...rest } = props;
+    return (_jsx(MuiTypography, { component: component, variant: size === "large" ? "body1" : undefined, fontWeight: fontWeight ? fontWeight : bold ? "bold" : "normal", fontSize: size === "large"
+            ? undefined
+            : size === "xlarge"
+                ? 20
+                : size === "medium"
+                    ? 14
+                    : 12, ...rest, children: children }));
+};

package/Viewport.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export declare const Viewport: (props: {
+    device: "desktop" | "mobile";
+    children: ReactNode;
+}) => ReactNode;
+//# sourceMappingURL=Viewport.d.ts.map

package/Viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.d.ts","sourceRoot":"","sources":["../src/Viewport.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,QAAQ,GAAI,OAAO;IAC9B,MAAM,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,cAYA,CAAC"}

package/Viewport.js

@@ -0,0 +1,10 @@
+import { useViewport } from "./hooks/use-viewport";
+export const Viewport = (props) => {
+    const { device, children } = props;
+    const viewport = useViewport();
+    if ((device == "desktop" && viewport.isDesktop) ||
+        (device == "mobile" && viewport.isMobile)) {
+        return children;
+    }
+    return null;
+};

package/hooks/use-form-data.d.ts

@@ -0,0 +1,39 @@
+import { FormEvent } from "react";
+type FormRecord = Record<string, any>;
+export declare const useFormDataContext: <T extends FormRecord>(key: string) => {
+    formData: T extends Partial<any> ? T : Partial<T>;
+    setFormData: <Key extends keyof T>(input: T | Record<Key, T[Key]>, options?: Partial<{
+        ready: boolean;
+    }>) => void;
+    resetFormData: () => void;
+    validation: {
+        valid: boolean;
+        error?: string;
+        errors?: Record<string, any>;
+    };
+    setFormReady: (ready: boolean) => void;
+    formReady: boolean;
+};
+type Validator<T> = (data: T) => boolean | [false, string] | [false, string, Record<string, any>];
+export declare function useFormData<T extends FormRecord>(key: string, options?: {
+    initialValue?: T | undefined;
+    initialReady?: boolean;
+}): {
+    formData: T extends Partial<any> ? T : Partial<T>;
+    setFormData: <Key extends keyof T>(input: Record<Key, T[Key]> | T, options?: Partial<{
+        ready: boolean;
+    }>) => void;
+    resetFormData: () => void;
+    umount: () => void;
+    submit: (callback: (data: T extends Partial<any> ? T : Partial<T>) => any | Promise<any>, validator?: Validator<T extends Partial<any> ? T : Partial<T>>) => (e: FormEvent<HTMLFormElement>) => void;
+    validation: {
+        valid: boolean;
+        error?: string;
+        errors?: Record<string, any>;
+    };
+    value: () => /*elided*/ any;
+    formReady: boolean;
+    setFormReady: (ready: boolean) => void;
+};
+export {};
+//# sourceMappingURL=use-form-data.d.ts.map

package/hooks/use-form-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form-data.d.ts","sourceRoot":"","sources":["../../src/hooks/use-form-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAInE,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAgBtC,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,UAAU,EAAE,KAAK,MAAM;;kBAyC7C,GAAG;eAGb,OAAO;;;;eAhBT,OAAO;gBACN,MAAM;iBACL,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;0BAwBD,OAAO;;CA3CrC,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,IAAI,CAClB,IAAI,EAAE,CAAC,KACJ,OAAO,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;AAEtE,wBAAgB,WAAW,CAAC,CAAC,SAAS,UAAU,EAC9C,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE;IACR,YAAY,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;;kBAmBoB,GAAG,SAAS,MAAM,CAAC,SAC/B,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,YACpB,OAAO,CAAC;QAChB,KAAK,EAAE,OAAO,CAAC;KAChB,CAAC;;;uBAwBU,CAAC,IAAI,yCAAiB,KAAK,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,cAC3C,SAAS,yCAAiB,MAEvC,GAAG,SAAS,CAAC,eAAe,CAAC;;eA5CvB,OAAO;gBACN,MAAM;iBACL,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;eAwFL,OAAO;0BAhEH,OAAO;EAuErC"}

package/hooks/use-form-data.js

@@ -0,0 +1,91 @@
+import { useContext, useEffect, useState } from "react";
+import { FormDataContext } from "../FormDataProvider";
+const useFormDataMap = (key) => {
+    const formDataMap = useContext(FormDataContext);
+    const formData = formDataMap.get(key);
+    if (!formData) {
+        console.log("formDataMap.keys()", formDataMap.keys());
+        throw new Error(`Form Data not found - ${key}`);
+    }
+    return formData ?? {};
+};
+export const useFormDataContext = (key) => {
+    const context = useFormDataMap(key);
+    return {
+        formData: context.formData,
+        setFormData: context.setFormData,
+        resetFormData: context.resetFormData,
+        validation: context.validation,
+        setFormReady: context.setFormReady,
+        formReady: context.formReady,
+    };
+};
+export function useFormData(key, options) {
+    const { initialValue, initialReady = false } = options ?? {};
+    const formDataMap = useContext(FormDataContext);
+    const [validation, setValidation] = useState();
+    const [formData, setFormDataState] = useState({ ...(initialValue ?? {}), ___ready: initialReady });
+    const resetFormData = () => {
+        setFormDataState({});
+    };
+    const setFormData = (input, options) => {
+        setFormDataState({
+            ...formData,
+            ...input,
+            ___ready: formData.___ready === true ? true : options?.ready ?? false,
+        });
+    };
+    const setFormReady = (ready) => {
+        setFormDataState({ ...formData, ___ready: ready });
+    };
+    const umount = () => {
+        //console.log("umount", key);
+        //formDataMap.delete(key);
+    };
+    useEffect(() => {
+        return umount();
+    }, []);
+    const submit = (callback, validator) => (e) => {
+        e.preventDefault();
+        const data = {
+            ...formData,
+            ...Object.fromEntries(new FormData(e.currentTarget)),
+        };
+        let isValid = true;
+        if (validator) {
+            const result = validator(data);
+            const newState = result === true
+                ? {
+                    valid: true,
+                    error: undefined,
+                    errors: undefined,
+                }
+                : {
+                    valid: false,
+                    error: Array.isArray(result) ? result[1] : undefined,
+                    errors: Array.isArray(result) ? result[2] : undefined,
+                };
+            setValidation(newState);
+            isValid = result === true;
+        }
+        if (!isValid) {
+            return;
+        }
+        setValidation({ valid: true, error: undefined, errors: undefined });
+        callback(data);
+    };
+    const { ___ready, ...formDataState } = formData;
+    const value = {
+        formData: formDataState,
+        setFormData,
+        resetFormData,
+        umount,
+        submit,
+        validation,
+        value: () => value,
+        formReady: ___ready,
+        setFormReady,
+    };
+    formDataMap.set(key, value);
+    return value;
+}

package/hooks/use-media-selector.d.ts

@@ -0,0 +1,10 @@
+import type * as wpCoreTypes from "@rnaga/wp-next-core/types";
+type OnSelected = NonNullable<NonNullable<wpCoreTypes.client.GlobalState["media-selector-modal"]>["onSelected"]>;
+export declare const useMediaSelector: () => {
+    open: (...args: [OnSelected] | [string[], OnSelected]) => void;
+    close: () => void;
+    select: (post: wpCoreTypes.actions.Posts[number]) => void;
+    isOpen: boolean;
+};
+export {};
+//# sourceMappingURL=use-media-selector.d.ts.map

package/hooks/use-media-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-selector.d.ts","sourceRoot":"","sources":["../../src/hooks/use-media-selector.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAE9D,KAAK,UAAU,GAAG,WAAW,CAC3B,WAAW,CACT,WAAW,CAAC,MAAM,CAAC,WAAW,CAAC,sBAAsB,CAAC,CACvD,CAAC,YAAY,CAAC,CAChB,CAAC;AAEF,eAAO,MAAM,gBAAgB;oBAIJ,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,UAAU,CAAC;;mBAqBtC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC;;CAUxD,CAAC"}