@compill/admin 1.0.113 → 1.0.116

package/dist/index.js

@@ -1,29 +1,31 @@
 import { jsx, jsxs, Fragment } from '@soperio/jsx-runtime';
 import { useApiQuery, useApiMutation, useMutate, useInvalidateMutation, useInvalidateQuery, useInvalidateParentMutation, useApiQueries } from '@compill/api';
-import { Shimmer, FlexCenter, QueryLoadingState, RetryOnError, TabContainer, ModalLoadingOverlay } from '@compill/components';
-import { mdiCircleSmall, mdiDatabaseRefreshOutline, mdiPost, mdiEye, mdiEyeOff, mdiCloudUpload, mdiOpenInNew, mdiArrowUpBoldBox, mdiArrowDownBoldBox, mdiPlusThick, mdiFilter, mdiRefresh, mdiPublish, mdiPublishOff, mdiDelete, mdiPencil, mdiCog, mdiDotsVertical, mdiLogout, mdiArrowLeft } from '@mdi/js';
-import { Icon, Button, Container, Tile, Popover, Collapse, Modal, Avatar, IconButton, Popup, Checkbox, Badge } from '@valerya/ui';
+import { Shimmer, ButtonBarButton, FlexCenter, ButtonBar, TabContainer, ButtonBarDialogButton, DialogButton } from '@compill/components';
+import { mdiCircleSmall, mdiDatabaseRefreshOutline, mdiPost, mdiEye, mdiEyeOff, mdiCloudUpload, mdiOpenInNew, mdiArrowUpBoldBox, mdiArrowDownBoldBox, mdiPlusThick, mdiFilter, mdiRefresh, mdiPublish, mdiPublishOff, mdiDelete, mdiPencil, mdiArrowLeft } from '@mdi/js';
+import { Icon, Button, Container, Tile, Popover, Collapse, IconButton, Modal, Checkbox, Badge } from '@valerya/ui';
 import Link from 'next/link.js';
-import { useParams, useNavigate, Outlet, useLocation, useMatch, Link as Link$1 } from 'react-router-dom';
-import React from 'react';
+import { useParams, useNavigate, Outlet } from 'react-router-dom';
 import { INVALIDATE_API, API, useInvalidatePage } from '@compill/admin-api';
-import { useFormikContext, Formik, Form } from 'formik';
+import React from 'react';
 import { toast } from 'react-toastify';
+import { ButtonBarSubmitButton, ItemEditDialog, ItemEditWrappedDialog, ItemEditMultiWrappedDialog, ItemDeleteDialog } from '@compill/form-components';
+import { useFormikContext } from 'formik';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { FormProvider, TextArea, FormRenderer, mergeInitialFormValues, FieldLabel, SubmitButton } from '@compill/form';
 import { createContext, runIfFn, isFunction } from '@soperio/react';
 import { FormEditor } from '@compill/form-editor';
 import { ImageExtension } from '@compill/editor';
+import { QueryLoadingState, RetryOnError, ModalLoadingOverlay } from '@compill/components-state';
 import { createPortal } from 'react-dom';
 import { useRouter } from 'next/router.js';
 import { TableContextProvider, useTableContext, Table } from '@compill/table';
-import { isEqual, capitalize, sortBy } from 'es-toolkit';
+import { isEqual, sortBy } from 'es-toolkit';
 import { useOpenLink, useBoolean } from '@compill/hooks';
 import { AppEnv } from '@compill/env';
 import { createColumnHelper } from '@tanstack/react-table';
 import { useQueryClient } from '@tanstack/react-query';
+import { SidebarMenu, SidebarMenuUserBlock } from '@brikka/layout';
 import Image from 'next/image.js';
-import { useSessionUser, useSessionLogout } from '@compill/auth';
 
 function SectionTitle({ children, ...props }) {
   return /* @__PURE__ */ jsx("h2", { textSize: "xl", fontWeight: "600", textColor: "slate-800", ...props, children });
@@ -67,99 +69,6 @@ function BreadcrumbItem({ breadcrumb, showSeparator }) {
   ] });
 }
 
-function DialogButton({ buildDialog, ...props }) {
-  const [showDialog, setShowDialog] = React.useState(false);
-  const onShowDialog = React.useCallback((event) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    setShowDialog(true);
-  }, [setShowDialog]);
-  const onCloseDialog = React.useCallback(() => {
-    setShowDialog(false);
-  }, [setShowDialog]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { onClick: onShowDialog, ...props }),
-    showDialog && buildDialog(onCloseDialog)
-  ] });
-}
-
-function ButtonBar({ children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { dflex: true, border: "1px", borderColor: "zinc-200", divideX: "1px", divideColor: "zinc-200", rounded: "lg", overflow: "hidden", ...props, children });
-}
-const ButtonBarButton = React.forwardRef(
-  function({ icon, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxs(
-      Button,
-      {
-        scheme: "dark",
-        size: "sm",
-        aspectRatio: icon && !children ? "square" : void 0,
-        variant: "borderless",
-        dflex: true,
-        alignItems: "center",
-        placeContent: "center",
-        corners: "square",
-        gap: "2",
-        ...props,
-        ref,
-        children: [
-          icon && /* @__PURE__ */ jsx(Icon, { path: icon }),
-          children
-        ]
-      }
-    );
-  }
-);
-const ButtonBarSubmitButton = React.forwardRef(
-  function({ useDirty, disabled, icon, children, ...props }, ref) {
-    const { dirty, handleSubmit } = useFormikContext() ?? { dirty: false, handleSubmit: void 0};
-    const onSubmit = React.useCallback(() => handleSubmit(), [handleSubmit]);
-    return /* @__PURE__ */ jsxs(
-      Button,
-      {
-        scheme: "dark",
-        size: "sm",
-        aspectRatio: icon && !children ? "square" : void 0,
-        variant: "borderless",
-        dflex: true,
-        alignItems: "center",
-        placeContent: "center",
-        corners: "square",
-        gap: "2",
-        disabled: useDirty && !dirty || disabled,
-        onClick: onSubmit,
-        ...props,
-        ref,
-        children: [
-          icon && /* @__PURE__ */ jsx(Icon, { path: icon }),
-          children
-        ]
-      }
-    );
-  }
-);
-function ButtonBarDialogButton({ icon, children, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    DialogButton,
-    {
-      scheme: "dark",
-      size: "sm",
-      aspectRatio: icon && !children ? "square" : void 0,
-      variant: "borderless",
-      dflex: true,
-      alignItems: "center",
-      placeContent: "center",
-      corners: "square",
-      gap: "2",
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx(Icon, { path: icon }),
-        children
-      ]
-    }
-  );
-}
-
 function InvalidateButton({ pathOrPermalink, ...props }) {
   const api = INVALIDATE_API.new(pathOrPermalink);
   const mutation = useApiMutation(api.invalidate, api.queryKey);
@@ -739,172 +648,14 @@ function TableMassActions({ actions }) {
   return /* @__PURE__ */ jsx(Collapse, { in: showMassActions, style: { overflow: showMassActions ? "initial" : "hidden" }, children: /* @__PURE__ */ jsx("div", { dflex: true, gap: "3", flexWrap: true, alignItems: "center", px: "8", pt: "5", children: actions.map((action, index) => /* @__PURE__ */ jsx("div", { children: action.type == "button" && !action.showConfirmationDialog && /* @__PURE__ */ jsx(ActionButton$1, { label: action.label, queryFn: action.queryFn, queryKey: action.queryKey, buttonProps: action.buttonProps }) }, index)) }) });
 }
 
-const defaultErrorMsg$1 = "Oops, something went wrong...";
-function nonNullValues(data) {
-  if (data) {
-    const nonNullData = { ...data };
-    for (const key in data)
-      nonNullData[key] = nonNullData[key] ?? "";
-    return nonNullData;
-  }
-  return data;
-}
-function ItemEditDialog({
-  initialValues,
-  itemLabel,
-  queryId = "",
-  api,
-  queryFetchOptions,
-  querySaveOptions,
-  onSuccess,
-  onFetchError,
-  fetchErrorMsg = defaultErrorMsg$1,
-  onSaveError,
-  saveErrorMsg = defaultErrorMsg$1,
-  fetchToFormData,
-  formToQueryData,
-  invalidateQueriesOnSuccess = true,
-  invalidateQueryKey,
-  retryText = "Retry",
-  cancelLabel = "Cancel",
-  saveLabel,
-  size = "lg",
-  title,
-  form,
-  show,
-  onClose,
-  formikProps,
-  ...props
-}) {
-  const { isInitialLoading, isFetching, data, isError, error, refetch } = useApiQuery(api.queryKey, api.get, queryId, {
-    enabled: !/*queryId == 0 || */
-    (queryId == "" || queryId == null || queryId == void 0),
-    // means than this query is only enabled if the id is defined
-    onError: onFetchError,
-    ...queryFetchOptions
-  });
-  const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(api.upsert, invalidateQueryKey ?? api.queryKey, querySaveOptions) : useApiMutation(api.upsert, api.queryKey, queryId, querySaveOptions);
-  const retry = React.useCallback(() => refetch(), [refetch]);
-  const saveItem = React.useCallback(async (item, actions) => {
-    mutation.reset();
-    const formItem = formToQueryData ? formToQueryData(item) : { ...item };
-    await mutation.mutateAsync(formItem).then((response) => {
-      if (onSuccess)
-        onSuccess(formItem, response);
-      else
-        toast.success(`${title ? title(formItem) : formItem.name ?? formItem.title} ${queryId ? "saved" : "created"}`);
-      onClose?.();
-    }).catch((error2) => {
-      console.error("on error", error2);
-      if (onSaveError)
-        onSaveError(item);
-      else
-        toast.error(`Couldn't save ${title ? title(formItem) : formItem.name ?? formItem.title}`);
-      actions.setSubmitting(false);
-    });
-  }, [mutation, formToQueryData, onSuccess, onSaveError, onClose]);
-  return /* @__PURE__ */ jsxs(
-    Modal,
-    {
-      size,
-      show,
-      onClose,
-      scheme: "light",
-      transition: true,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(Modal.Header, { children: [
-          !isInitialLoading && queryId && `Edit ${title ? title(data) : data?.["name"] ?? data?.["title"] ?? data?.["name"] ?? ""}`,
-          !queryId && `Create new ${itemLabel ?? "item"}`,
-          Array.isArray(form) && /* @__PURE__ */ jsx(Fragment, {})
-        ] }),
-        isInitialLoading && /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(QueryLoadingState, { minW: "72" }) }),
-        isError && /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) }),
-        !isInitialLoading && !isError && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-          Formik,
-          {
-            initialValues: fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(initialValues(data)) ?? {},
-            onSubmit: saveItem,
-            ...formikProps,
-            children: ({ setFieldValue, dirty, handleSubmit, isValid, values }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Modal.Body, { pb: "6", children: /* @__PURE__ */ jsxs(Form, { children: [
-                React.isValidElement(form) && form,
-                Array.isArray(form) && /* @__PURE__ */ jsx(FormRenderer, { form }),
-                isFunction(form) && /* @__PURE__ */ jsx(FormRenderer, { form: form(data ?? values) })
-              ] }) }),
-              /* @__PURE__ */ jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    disabled: mutation.isLoading,
-                    onClick: onClose,
-                    variant: "borderless",
-                    me: "2",
-                    children: cancelLabel
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "submit",
-                    disabled: !dirty || mutation.isLoading,
-                    onClick: () => handleSubmit(),
-                    children: saveLabel ? saveLabel : queryId ? "Update" : "Create"
-                  }
-                )
-              ] })
-            ] })
-          }
-        ) }),
-        mutation.isLoading && /* @__PURE__ */ jsx(ModalLoadingOverlay, {})
-      ]
-    }
-  );
-}
-
-function QueryWrapperDialog({ api, fn, transformFn, config, onClose, queryId, invalidateQueryKey }) {
-  const { data, isFetching } = useApiQuery(
-    api.queryKey,
-    fn === "get" || fn === "getTransformed" ? api.get : api.getAll,
-    void 0,
-    { retryOnMount: false, refetchOnMount: false, refetchOnWindowFocus: false }
-  );
-  const transformedData = React.useMemo(() => {
-    if (data && (fn === "getTransformed" || fn === "getAllTransformed")) {
-      if (!transformFn)
-        console.warn(`QueryWrapperDialog: you forgot to pass transformFn as parameter for fn ${fn}`);
-      return transformFn?.(data);
-    }
-    return data;
-  }, [data, fn, transformFn]);
-  if (isFetching)
-    return null;
-  return /* @__PURE__ */ jsx(ItemEditDialog, { ...config(transformedData), queryId, invalidateQueryKey, show: true, onClose });
-}
-
-function MultiQueryWrapperDialog({ queries, config, onClose, queryId, invalidateQueryKey }) {
-  const { data, isFetching, isError } = useApiQueries(queries.map((q) => ({
-    queryKey: q.api.queryKey,
-    queryFn: q.fn == "get" ? q.api.get : q.api.getAll,
-    queryOptions: {
-      cacheTime: q.cache === false ? 0 : void 0,
-      staleTime: q.cache === false ? 0 : void 0
-    }
-  })));
-  const transformedData = React.useMemo(() => {
-    return data?.map((d, index) => queries[index]?.transformFn ? queries[index]?.transformFn?.(d) : d);
-  }, [data, queries]);
-  return /* @__PURE__ */ jsx(ItemEditDialog, { isPreloading: isFetching, ...config(...transformedData), queryId, invalidateQueryKey, show: true, onClose });
-}
-
 function DialogRenderer({ config, onClose, invalidateQueryKey, queryId }) {
   const { type, ...props } = config;
   if (config.type === "dialog")
     return /* @__PURE__ */ jsx(ItemEditDialog, { ...props, queryId, invalidateQueryKey, show: true, onClose });
   if (config.type === "query")
-    return /* @__PURE__ */ jsx(QueryWrapperDialog, { ...props, queryId, invalidateQueryKey, onClose });
+    return /* @__PURE__ */ jsx(ItemEditWrappedDialog, { ...props, queryId, invalidateQueryKey, onClose });
   if (config.type === "multiQuery")
-    return /* @__PURE__ */ jsx(MultiQueryWrapperDialog, { ...props, queryId, invalidateQueryKey, onClose });
+    return /* @__PURE__ */ jsx(ItemEditMultiWrappedDialog, { ...props, queryId, invalidateQueryKey, onClose });
   return null;
 }
 
@@ -914,67 +665,6 @@ function RefreshButton({ queryKey }) {
   return /* @__PURE__ */ jsx(ButtonBarButton, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", onClick: invalidate, children: /* @__PURE__ */ jsx(Icon, { path: mdiRefresh }) });
 }
 
-function ItemDeleteDialog({
-  title,
-  actionButtonLabel,
-  closeActionButtonLabel = "Cancel",
-  itemLabel,
-  queryId = "",
-  api,
-  apiFn,
-  invalidateQueriesOnSuccess = true,
-  invalidateQueryKey,
-  size = "lg",
-  md_boxSizing,
-  msg,
-  show,
-  onClose,
-  onSuccess,
-  ...props
-}) {
-  const fn = apiFn ? api[apiFn] : api.delete;
-  const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(fn, invalidateQueryKey ?? api.queryKey) : useApiMutation(fn, api.queryKey);
-  const mutate = useMutate(mutation, { onSuccess: () => {
-    onClose?.();
-    onSuccess?.();
-  } });
-  const handleDelete = React.useCallback(() => mutate(queryId), [mutate, queryId]);
-  return /* @__PURE__ */ jsxs(
-    Modal,
-    {
-      size,
-      show,
-      onClose,
-      scheme: "danger",
-      variant: "glass",
-      transition: true,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Modal.Header, { children: title || `Delete ${itemLabel}` }),
-        /* @__PURE__ */ jsxs(Modal.Body, { pb: "6", children: [
-          !msg && `Do you really want to delete ${itemLabel}?`,
-          msg && runIfFn(msg, itemLabel)
-        ] }),
-        /* @__PURE__ */ jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              disabled: mutation.isPending,
-              onClick: onClose,
-              variant: "borderless",
-              scheme: "dark",
-              me: "2",
-              children: closeActionButtonLabel
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { scheme: "danger", disabled: mutation.isPending, onClick: handleDelete, children: actionButtonLabel || "Delete" })
-        ] }),
-        mutation.isPending && /* @__PURE__ */ jsx(ModalLoadingOverlay, {})
-      ]
-    }
-  );
-}
-
 const [provider, useContext] = createContext();
 function TableViewProvider({ editView, deleteItem, queryKey, children }) {
   const openLink = useOpenLink();
@@ -1323,283 +1013,6 @@ function Content({ ...props }) {
   return /* @__PURE__ */ jsx("div", { w: "100%", h: "100%", overflowY: "auto", ...props, children: /* @__PURE__ */ jsx(Outlet, {}) });
 }
 
-function SelectedIndicator({ darkMode }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      position: "absolute",
-      bgColor: darkMode ? "white" : "black",
-      bgOpacity: "90",
-      w: "0.5",
-      h: "6",
-      top: "1.5",
-      start: "-4"
-    }
-  );
-}
-
-function MenuButton({ depth, darkMode, icon, selected, children, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      as: "li",
-      minH: "8",
-      ms: `${(depth ?? 0) * 2}`,
-      p: "2",
-      font: "title",
-      textColor: darkMode ? "white" : "black",
-      fontWeight: "600",
-      rounded: "lg",
-      textSize: "sm",
-      variant: "borderless",
-      hover_bgColor: darkMode ? "white" : "black",
-      hover_bgOpacity: "10",
-      hover_textColor: darkMode ? "white" : "zinc-800",
-      cursor: "pointer",
-      dflex: true,
-      alignItems: "center",
-      gap: "3",
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx(Icon, { path: icon, opacity: selected ? "100" : "60" }),
-        children
-      ]
-    }
-  );
-}
-
-function MenuItem$1({ icon, path, depth, darkMode, subMenu, ...props }) {
-  const location = useLocation();
-  const selected = path == "/" ? location.pathname == "/" : location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
-  const match = useMatch("/" + path) != null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Link$1, { to: path, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx(
-        MenuButton,
-        {
-          depth,
-          darkMode,
-          icon,
-          selected,
-          ...props
-        }
-      ),
-      match && /* @__PURE__ */ jsx(SelectedIndicator, { darkMode })
-    ] }),
-    subMenu?.map((item, index) => /* @__PURE__ */ jsx(
-      MenuItem$1,
-      {
-        icon: item.icon,
-        path: item.path,
-        depth: (depth ?? 0) + 1,
-        darkMode,
-        subMenu: item.children,
-        children: item.label
-      },
-      index
-    ))
-  ] });
-}
-
-function NextMenuItem({ icon, path, depth, darkMode, subMenu, ...props }) {
-  const { pathname } = useRouter();
-  const selected = path == "/" ? pathname == "/" : pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
-  const match = path == "/" ? pathname == "/" : pathname == (path.startsWith("/") ? path : `/${path}`);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Link, { href: path, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx(
-        MenuButton,
-        {
-          depth,
-          darkMode,
-          icon,
-          selected,
-          ...props
-        }
-      ),
-      match && /* @__PURE__ */ jsx(SelectedIndicator, { darkMode })
-    ] }),
-    subMenu?.map((item, index) => /* @__PURE__ */ jsx(
-      NextMenuItem,
-      {
-        icon: item.icon,
-        path: item.path,
-        depth: (depth ?? 0) + 1,
-        darkMode,
-        subMenu: item.children,
-        children: item.label
-      },
-      index
-    ))
-  ] });
-}
-
-function Menu({ darkMode, config, useNextRouter, ...props }) {
-  const Comp = useNextRouter ? NextMenuItem : MenuItem$1;
-  return /* @__PURE__ */ jsx("ul", { ...props, children: config.map((item, index) => {
-    if (item.type == "divider")
-      return /* @__PURE__ */ jsx(Divider, { title: item.label }, index);
-    if (item.type == "item") {
-      return /* @__PURE__ */ jsx(
-        Comp,
-        {
-          icon: item.icon,
-          path: item.path,
-          depth: 0,
-          darkMode,
-          subMenu: item.children,
-          children: item.label
-        },
-        index
-      );
-    }
-  }) });
-}
-function Divider({ title }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      px: "2",
-      mt: "5",
-      mb: "2",
-      opacity: "75",
-      textTransform: "capitalize",
-      letterSpacing: "widest",
-      fontWeight: "700",
-      textSize: "xs",
-      children: title
-    }
-  );
-}
-
-function UserBlock({ color, darkMode, menuConfig, path }) {
-  const { isLoading, user } = useSessionUser();
-  const navigate = useNavigate();
-  const handleClick = React.useCallback(() => navigate(path), [navigate, path]);
-  if (isLoading)
-    return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      dflex: true,
-      alignItems: "center",
-      border: "0.5",
-      borderColor: `${color}-${darkMode ? "800" : "200"}`,
-      ps: "3",
-      py: "1.5",
-      textSize: "md",
-      rounded: "lg",
-      hover_bgColor: `${color}-${darkMode ? "800" : "200"}`,
-      cursor: "pointer",
-      textColor: darkMode ? "white" : "slate-800",
-      onClick: handleClick,
-      children: [
-        /* @__PURE__ */ jsx(Avatar, { size: "sm", src: user?.media?.url ?? "", name: `${user?.firstname} ${user?.lastname}` }),
-        /* @__PURE__ */ jsx("span", { flexGrow: true, ms: "2", children: `${capitalize(user?.firstname || user?.lastname || "")}` }),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            variant: "borderless",
-            corners: "pill",
-            scheme: "dark",
-            textColor: darkMode ? "white" : "slate-800",
-            hover_textColor: darkMode ? "white" : "slate-800",
-            hover_bgColor: `${color}-${darkMode ? "900" : "200"}`,
-            icon: mdiCog,
-            onClick: handleClick
-          }
-        ),
-        /* @__PURE__ */ jsx(OverflowMenu, { color, darkMode, menuConfig })
-      ]
-    }
-  );
-}
-function OverflowMenu({ color, darkMode, menuConfig }) {
-  const [showPopup, setShowPopup] = React.useState(false);
-  const navigate = useNavigate();
-  const logout = useSessionLogout(false);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Popup,
-    {
-      show: showPopup,
-      position: "relative",
-      side: "bottom-end",
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setShowPopup((show) => !show);
-      },
-      onHide: () => setShowPopup(false),
-      children: [
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            icon: mdiDotsVertical,
-            variant: "borderless",
-            corners: "pill",
-            scheme: "dark",
-            textColor: darkMode ? "white" : "slate-800",
-            hover_textColor: darkMode ? "white" : "slate-800",
-            hover_bgColor: `${color}-${darkMode ? "900" : "200"}`
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            bgColor: "white",
-            rounded: "sm",
-            overflow: "hidden",
-            shadow: true,
-            mt: "1",
-            border: "px",
-            borderColor: "gray-200",
-            divideColor: "gray-200",
-            divideY: "px",
-            minW: "40",
-            children: [
-              menuConfig && menuConfig.length > 0 && menuConfig.map((item, index) => {
-                if (item.type == "item") {
-                  return /* @__PURE__ */ jsx(MenuItem, { icon: item.icon, onClick: () => navigate(item.path), children: item.label }, index);
-                }
-                return null;
-              }),
-              /* @__PURE__ */ jsx(MenuItem, { icon: mdiLogout, onClick: logout, children: "Logout" })
-            ]
-          }
-        )
-      ]
-    }
-  ) });
-}
-function MenuItem({ icon, onClick, children, ...props }) {
-  const handleClick = React.useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onClick?.(e);
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant: "borderless",
-      scheme: "dark",
-      size: "sm",
-      alignItems: "center",
-      dflex: true,
-      gap: "2",
-      px: "2",
-      py: "1.5",
-      w: "full",
-      onClick: handleClick,
-      textColor: "slate-700",
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx(Icon, { path: icon, size: "md" }),
-        children
-      ]
-    }
-  );
-}
-
 function Sidebar({ show, logo, title, menuConfig, userMenuConfig, userSettingsPath, color, darkMode, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1629,8 +1042,8 @@ function Sidebar({ show, logo, title, menuConfig, userMenuConfig, userSettingsPa
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Menu, { overflowY: "auto", flexGrow: "1", p: "4", darkMode, config: menuConfig }),
-        /* @__PURE__ */ jsx("div", { p: "2", children: /* @__PURE__ */ jsx(UserBlock, { darkMode, color, menuConfig: userMenuConfig, path: userSettingsPath }) })
+        /* @__PURE__ */ jsx(SidebarMenu, { overflowY: "auto", flexGrow: "1", p: "4", darkMode, config: menuConfig }),
+        /* @__PURE__ */ jsx("div", { p: "2", children: /* @__PURE__ */ jsx(SidebarMenuUserBlock, { darkMode, color, menuConfig: userMenuConfig, path: userSettingsPath }) })
       ]
     }
   );
@@ -2064,4 +1477,4 @@ function TableRowPublishPostButton({ id, api, status, invalidateQueryKey, ...pro
   return /* @__PURE__ */ jsx(TableRowActionButton, { icon: isDraft ? mdiPublish : mdiPublishOff, onClick: publish, ...props });
 }
 
-export { AdminLayout, AttachDialog, Breadcrumbs, ButtonBar, ButtonBarButton, ButtonBarDialogButton, ButtonBarSubmitButton, DialogButton, FormActionDialog, InvalidateButton, ItemDeleteDialog, ItemEditDialog, Menu, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowActionButton, TableRowActionDialogButton, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };
+export { AdminLayout, AttachDialog, Breadcrumbs, FormActionDialog, InvalidateButton, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowActionButton, TableRowActionDialogButton, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };

package/dist/lib/buttons/InvalidateButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBarButtonProps } from "../layout/ButtonBar";
+import { ButtonBarButtonProps } from "@compill/components";
 interface InvalidateButtonProps extends ButtonBarButtonProps {
     pathOrPermalink: string;
 }

package/dist/lib/buttons/ViewButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBarButtonProps } from "../layout/ButtonBar";
+import { ButtonBarButtonProps } from "@compill/components";
 export declare function ViewButton({ label, path, icon, ...props }: ButtonBarButtonProps & {
     label?: string;
     path: string;