@compill/admin 1.0.44 → 1.0.46

package/index.cjs.js

@@ -170,20 +170,17 @@ function InvalidateButton(_a) {
   const invalidate = api.useMutate(mutation, {
     successMsg: "Page successfully invalidated"
   });
-  return jsxRuntime.jsx(ui.Button, Object.assign({
+  return jsxRuntime.jsx(ui.IconButton, Object.assign({
     scheme: "dark",
     variant: "glass",
-    corners: "pill",
-    w: "10",
-    h: "10",
+    size: "md",
+    corners: "square",
+    aspectRatio: "square",
     title: "Regenerate",
     disabled: mutation.isLoading,
-    onClick: invalidate
-  }, props, {
-    children: jsxRuntime.jsx(ui.Icon, {
-      path: mdiDatabaseRefreshOutline
-    })
-  }));
+    onClick: invalidate,
+    icon: mdiDatabaseRefreshOutline
+  }, props));
 }
 
 function NavigateButton(_a) {
@@ -228,8 +225,8 @@ function PublishButton(_a) {
   return jsxRuntime.jsxs(ui.Button, Object.assign({
     scheme: "secondary",
     variant: "glass",
-    corners: "pill",
-    px: "4",
+    size: "sm",
+    px: "3",
     disabled: mutation.isLoading,
     onClick: publish,
     dflex: true,
@@ -647,8 +644,8 @@ function UpdateButton(_a) {
   }, [dirty, props, handleSubmit]);
   return jsxRuntime.jsxs(form.SubmitButton, Object.assign({
     type: "submit",
-    corners: "pill",
-    px: "4",
+    size: "sm",
+    px: "3",
     dflex: true,
     alignItems: "center",
     gap: "3"
@@ -668,19 +665,14 @@ function ViewButton(_a) {
   const openPage = React__default["default"].useCallback(() => {
     window.open(path, '_blank');
   }, [path]);
-  return jsxRuntime.jsx(ui.Button, Object.assign({
+  return jsxRuntime.jsx(ui.IconButton, Object.assign({
+    icon: icon ? icon : mdiOpenInNew,
     type: "submit",
     scheme: "dark",
     variant: "glass",
-    corners: "pill",
-    w: "10",
-    h: "10",
+    size: "md",
     onClick: openPage
-  }, props, {
-    children: jsxRuntime.jsx(ui.Icon, {
-      path: icon !== null && icon !== void 0 ? icon : mdiOpenInNew
-    })
-  }));
+  }, props));
 }
 
 function OrderCell({
@@ -820,6 +812,8 @@ function PageContentEditor(_a) {
     children: jsxRuntime.jsx(FormEditor, {
       minH: "128",
       minW: "144",
+      maxW: props.maxW,
+      // w={props.w}
       name: name,
       placeHolder: "Write here..."
     })
@@ -883,9 +877,10 @@ function PageSidebarSection(_a) {
   return jsxRuntime.jsxs("div", Object.assign({
     w: "full",
     bgColor: "white",
-    rounded: true,
+    rounded: "lg",
     p: "5",
-    textSize: "sm"
+    textSize: "sm",
+    shadow: true
   }, props, {
     children: [title && jsxRuntime.jsx(admin.PageSectionTitle, {
       children: title
@@ -1157,44 +1152,51 @@ function Internal({
       item: item,
       isLoading: mutation.isLoading,
       trackingRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current
-    }), jsxRuntime.jsxs(PageContainer, {
-      w: editorMaxW ? "auto" : "full",
-      size: "x2",
-      id: "pagecontainer",
-      children: [header, jsxRuntime.jsxs("div", {
-        dflex: true,
-        gap: "8",
-        children: [jsxRuntime.jsxs("div", {
+    }), jsxRuntime.jsx("div", {
+      p: "5",
+      bgColor: "slate-100",
+      rounded: "lg",
+      children: jsxRuntime.jsxs(PageContainer, {
+        w: editorMaxW ? "auto" : "full",
+        size: "x2",
+        id: "pagecontainer",
+        children: [header, jsxRuntime.jsxs("div", {
           dflex: true,
-          flexCol: true,
-          gap: "8",
-          flexGrow: true,
-          children: [(editor === null || editor === void 0 ? void 0 : editor.type) != "textarea" &&
-          // TODO Find a way to make this editor shrink in width when resizing the window...
-          jsxRuntime.jsx(PageContentEditor, {
-            name: "content",
-            w: editorMaxW,
-            maxW: editorMaxW,
-            minW: "144"
-          }), (editor === null || editor === void 0 ? void 0 : editor.type) == "textarea" && jsxRuntime.jsx(form.TextArea, {
-            name: editor === null || editor === void 0 ? void 0 : editor.name,
-            maxW: editorMaxW,
-            minW: editorMaxW,
-            w: editorMaxW,
-            minH: "128",
-            rows: 25,
-            bgColor: "white",
-            border: "0",
-            p: "5",
-            textColor: "slate-800"
-          }), editoFooter]
-        }), jsxRuntime.jsx(PageSidebar, {
-          children: sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsxRuntime.jsx(Section, {
-            section: section,
-            item: item
-          }, index))
+          gap: "5",
+          children: [jsxRuntime.jsxs("div", {
+            dflex: true,
+            flexCol: true,
+            gap: "8",
+            flexGrow: true,
+            children: [(editor === null || editor === void 0 ? void 0 : editor.type) != "textarea" &&
+            // TODO Find a way to make this editor shrink in width when resizing the window...
+            jsxRuntime.jsx(PageContentEditor, {
+              name: "content",
+              maxW: editorMaxW,
+              minW: "144",
+              shadow: true,
+              rounded: "lg"
+            }), (editor === null || editor === void 0 ? void 0 : editor.type) == "textarea" && jsxRuntime.jsx(form.TextArea, {
+              name: editor === null || editor === void 0 ? void 0 : editor.name,
+              maxW: editorMaxW,
+              minW: editorMaxW,
+              w: editorMaxW,
+              minH: "128",
+              rows: 25,
+              bgColor: "white",
+              border: "0",
+              shadow: true,
+              p: "5",
+              textColor: "slate-800"
+            }), editoFooter]
+          }), jsxRuntime.jsx(PageSidebar, {
+            children: sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsxRuntime.jsx(Section, {
+              section: section,
+              item: item
+            }, index))
+          })]
         })]
-      })]
+      })
     })]
   });
 }
@@ -1363,12 +1365,7 @@ function TableContainer(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["initialPageSize", "initialVisibleColumns", "columns", "children"]);
-  return jsxRuntime.jsx(ui.Tile, Object.assign({
-    scheme: "light",
-    shadow: true,
-    rounded: "md",
-    px: "0",
-    py: "4",
+  return jsxRuntime.jsx("div", Object.assign({
     w: "full",
     dflex: true,
     flexCol: true
@@ -1390,10 +1387,10 @@ function TableCreateButton(_a) {
     } = _a,
     props = __rest$1(_a, ["children"]);
   return jsxRuntime.jsx(DialogButton, Object.assign({
-    scheme: "default",
-    corners: "pill",
-    h: "10",
-    variant: "glass"
+    scheme: "dark",
+    size: "sm",
+    aspectRatio: "square",
+    variant: "borderless"
   }, props, {
     children: children !== null && children !== void 0 ? children : jsxRuntime.jsx(ui.Icon, {
       path: mdiPlusThick
@@ -1408,11 +1405,11 @@ function TableFilterButton(_a) {
     side: "bottom-end",
     modal: true,
     children: [jsxRuntime.jsx(ui.Button, Object.assign({
-      scheme: "default",
-      corners: "pill",
-      w: "10",
-      h: "10",
-      variant: "glass"
+      scheme: "dark",
+      size: "sm",
+      aspectRatio: "square",
+      variant: "borderless",
+      corners: "square"
     }, props, {
       children: jsxRuntime.jsx(ui.Icon, {
         path: mdiFilter
@@ -1447,26 +1444,18 @@ function TableFilterButton(_a) {
 function TableTopBar(_a) {
   var {
       title,
-      queryKey,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "queryKey", "children"]);
-  const invalidate = api.useInvalidateQuery(queryKey);
-  useHotkeys('ctrl+r', () => invalidate(), {
-    preventDefault: true
-  }, [invalidate]);
+    props = __rest$1(_a, ["title", "children"]);
   return jsxRuntime.jsxs("div", Object.assign({
     dflex: true,
     flexRow: true,
-    pb: "4",
     alignItems: "center",
     gap: "3",
-    px: "8",
-    borderB: "0.5",
-    borderBColor: "--bg-2"
+    p: "8"
   }, props, {
     children: [title && jsxRuntime.jsx("h2", {
-      textSize: "x3",
+      textSize: "x2",
       fontWeight: "600",
       textColor: "#3f4254",
       textTransform: "capitalize",
@@ -1474,22 +1463,7 @@ function TableTopBar(_a) {
     }), jsxRuntime.jsx("div", {
       flexGrow: true,
       children: "\u00A0"
-    }), jsxRuntime.jsxs("div", {
-      spaceX: "2",
-      dflex: true,
-      alignItems: "center",
-      children: [jsxRuntime.jsx(ui.Button, {
-        scheme: "default",
-        corners: "pill",
-        w: "10",
-        h: "10",
-        variant: "glass",
-        onClick: invalidate,
-        children: jsxRuntime.jsx(ui.Icon, {
-          path: mdiRefresh
-        })
-      }), children]
-    })]
+    }), children]
   }));
 }
 
@@ -1952,15 +1926,14 @@ function TableRowPublishPostButton$1(_a) {
     mutation.mutateAsync(id).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => reactToastify.toast.error(`Error: ${error}`));
   }, [mutation, id]);
   return jsxRuntime.jsx(ui.Button, Object.assign({
-    w: "10",
-    h: "10",
     variant: "borderless",
-    corners: "pill",
-    scheme: "default",
+    corners: "square",
+    scheme: "dark",
     onClick: publish
   }, props, {
     children: jsxRuntime.jsx(ui.Icon, {
-      path: isDraft ? mdiPublish : mdiPublishOff
+      path: isDraft ? mdiPublish : mdiPublishOff,
+      size: "sm"
     })
   }));
 }
@@ -1975,8 +1948,10 @@ function TableRowActionsView({
   const item = row.original;
   return jsxRuntime.jsx("div", {
     dflex: true,
-    spaceX: "1",
+    w: "full",
+    alignItems: "stretch",
     placeContent: "end",
+    h: "full",
     children: rowActions === null || rowActions === void 0 ? void 0 : rowActions.map((action, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [action.type === "publish" && jsxRuntime.jsx(TableRowPublishPostButton$1, {
         id: item.id,
@@ -1989,7 +1964,8 @@ function TableRowActionsView({
         onClick: () => onAction(action, item),
         scheme: schemes$1[action.type],
         children: jsxRuntime.jsx(ui.Icon, {
-          path: icons[action.type]
+          path: icons[action.type],
+          size: "sm"
         })
       })]
     }, index))
@@ -2006,10 +1982,15 @@ function ActionButton$1(_a) {
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [onClick]);
   return jsxRuntime.jsx(ui.Button, Object.assign({
-    w: "10",
-    h: "10",
+    dflex: true,
+    alignContent: "center",
+    placeContent: "center",
+    py: "2.5",
+    px: "3",
+    h: "full",
+    size: "lg",
     variant: "borderless",
-    corners: "pill",
+    corners: "default",
     onClick: handleClick
   }, props));
 }
@@ -2023,11 +2004,11 @@ const icons = {
 };
 const schemes$1 = {
   "link": "dark",
-  "view": "secondary",
-  "edit": "warning",
-  "delete": "danger",
-  "publish": "warning",
-  "custom": "default"
+  "view": "dark",
+  "edit": "dark",
+  "delete": "dark",
+  "publish": "dark",
+  "custom": "dark"
 };
 
 function useTableProps(api, table, rowActions) {
@@ -2505,7 +2486,7 @@ function TableView(_a) {
   const id = useId(queryField);
   const _screen = react.runIfFn(screen, id);
   return jsxRuntime.jsx(PageContainer, Object.assign({
-    p: "5"
+    bgColor: "white"
   }, props, {
     children: jsxRuntime.jsx(TableContainer, {
       columns: _screen.table.columns,
@@ -2544,15 +2525,16 @@ function TT({
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [breadcrumbs && jsxRuntime.jsx(PageTopBar, {
       breadcrumbs: breadcrumbs
-    }), jsxRuntime.jsxs(TableTopBar, {
+    }), jsxRuntime.jsx(TableTopBar, {
       title: title,
-      queryKey: tableApi.queryKey,
-      children: [jsxRuntime.jsx(ButtonBar, {
+      children: jsxRuntime.jsx(ButtonBar, {
         buttonBar: buttonBar,
         createView: createView,
         editView: editView,
-        api: tableApi
-      }), filters && jsxRuntime.jsx(TableFilterButton, {})]
+        api: tableApi,
+        queryKey: tableApi.queryKey,
+        children: filters && jsxRuntime.jsx(TableFilterButton, {})
+      })
     }), filters && jsxRuntime.jsx(TableFilters, {
       form: filters.form,
       initialValues: filters.initialValues,
@@ -2577,10 +2559,16 @@ function TT({
 }
 function ButtonBar({
   buttonBar,
+  queryKey,
   createView,
   editView,
-  api
+  api: api$1,
+  children
 }) {
+  const invalidate = api.useInvalidateQuery(queryKey);
+  useHotkeys('ctrl+r', () => invalidate(), {
+    preventDefault: true
+  }, [invalidate]);
   const createDialog = React__default["default"].useCallback(onClose => {
     const view = createView !== null && createView !== void 0 ? createView : editView;
     if (view.type == "customDialog") return view.render({
@@ -2589,17 +2577,33 @@ function ButtonBar({
     });else return jsxRuntime.jsx(DialogRenderer, {
       config: view,
       onClose: onClose,
-      invalidateQueryKey: api.queryKey
+      invalidateQueryKey: api$1.queryKey
     });
-  }, [editView, api]);
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: buttonBar && buttonBar.map((button, index) => jsxRuntime.jsxs("div", {
+  }, [editView, api$1]);
+  return jsxRuntime.jsxs("div", {
+    dflex: true,
+    border: "1px",
+    borderColor: "zinc-200",
+    divideX: "1px",
+    divideColor: "zinc-200",
+    rounded: "lg",
+    overflow: "hidden",
+    children: [jsxRuntime.jsx(ui.Button, {
+      scheme: "dark",
+      size: "sm",
+      aspectRatio: "square",
+      variant: "borderless",
+      onClick: invalidate,
+      children: jsxRuntime.jsx(ui.Icon, {
+        path: mdiRefresh
+      })
+    }), buttonBar && buttonBar.map((button, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [button.type === "create" && editView && jsxRuntime.jsx(TableCreateButton, {
         buildDialog: createDialog
       }), button.type === "invalidate" && jsxRuntime.jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type === "custom" && button.render()]
-    }, index))
+    }, index)), children]
   });
 }
 function TableWrapper({
@@ -2621,6 +2625,7 @@ function TableWrapper({
     };
   }, [subtitle]);
   return jsxRuntime.jsx(table.Table, Object.assign({}, tableProps, {
+    p: "8",
     title: _subtitle
   }));
 }
@@ -3251,11 +3256,9 @@ function TableRowNavigateButton(_a) {
     navigate(`${path}`);
   }, [navigate, path]);
   return jsxRuntime.jsx(ui.Button, Object.assign({
-    scheme: "secondary",
-    w: "10",
-    h: "10",
+    scheme: "dark",
     variant: "borderless",
-    corners: "pill",
+    corners: "square",
     onClick: handleClick
   }, props, {
     children: jsxRuntime.jsx(ui.Icon, {

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from '@soperio/jsx-runtime';
-import { Icon, Button, Container, Tile, Popover, Modal, Collapse, Checkbox, Badge } from '@valerya/ui';
+import { Icon, Button, IconButton, Container, Tile, Popover, Modal, Collapse, Checkbox, Badge } from '@valerya/ui';
 import Link from 'next/link';
 import React, { useRef, useCallback, useContext as useContext$2, useLayoutEffect, useEffect, createContext } from 'react';
 import { INVALIDATE_API } from '@compill/admin-api';
@@ -161,20 +161,17 @@ function InvalidateButton(_a) {
   const invalidate = useMutate(mutation, {
     successMsg: "Page successfully invalidated"
   });
-  return jsx(Button, Object.assign({
+  return jsx(IconButton, Object.assign({
     scheme: "dark",
     variant: "glass",
-    corners: "pill",
-    w: "10",
-    h: "10",
+    size: "md",
+    corners: "square",
+    aspectRatio: "square",
     title: "Regenerate",
     disabled: mutation.isLoading,
-    onClick: invalidate
-  }, props, {
-    children: jsx(Icon, {
-      path: mdiDatabaseRefreshOutline
-    })
-  }));
+    onClick: invalidate,
+    icon: mdiDatabaseRefreshOutline
+  }, props));
 }
 
 function NavigateButton(_a) {
@@ -219,8 +216,8 @@ function PublishButton(_a) {
   return jsxs(Button, Object.assign({
     scheme: "secondary",
     variant: "glass",
-    corners: "pill",
-    px: "4",
+    size: "sm",
+    px: "3",
     disabled: mutation.isLoading,
     onClick: publish,
     dflex: true,
@@ -638,8 +635,8 @@ function UpdateButton(_a) {
   }, [dirty, props, handleSubmit]);
   return jsxs(SubmitButton, Object.assign({
     type: "submit",
-    corners: "pill",
-    px: "4",
+    size: "sm",
+    px: "3",
     dflex: true,
     alignItems: "center",
     gap: "3"
@@ -659,19 +656,14 @@ function ViewButton(_a) {
   const openPage = React.useCallback(() => {
     window.open(path, '_blank');
   }, [path]);
-  return jsx(Button, Object.assign({
+  return jsx(IconButton, Object.assign({
+    icon: icon ? icon : mdiOpenInNew,
     type: "submit",
     scheme: "dark",
     variant: "glass",
-    corners: "pill",
-    w: "10",
-    h: "10",
+    size: "md",
     onClick: openPage
-  }, props, {
-    children: jsx(Icon, {
-      path: icon !== null && icon !== void 0 ? icon : mdiOpenInNew
-    })
-  }));
+  }, props));
 }
 
 function OrderCell({
@@ -811,6 +803,8 @@ function PageContentEditor(_a) {
     children: jsx(FormEditor, {
       minH: "128",
       minW: "144",
+      maxW: props.maxW,
+      // w={props.w}
       name: name,
       placeHolder: "Write here..."
     })
@@ -874,9 +868,10 @@ function PageSidebarSection(_a) {
   return jsxs("div", Object.assign({
     w: "full",
     bgColor: "white",
-    rounded: true,
+    rounded: "lg",
     p: "5",
-    textSize: "sm"
+    textSize: "sm",
+    shadow: true
   }, props, {
     children: [title && jsx(PageSectionTitle$1, {
       children: title
@@ -1148,44 +1143,51 @@ function Internal({
       item: item,
       isLoading: mutation.isLoading,
       trackingRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current
-    }), jsxs(PageContainer, {
-      w: editorMaxW ? "auto" : "full",
-      size: "x2",
-      id: "pagecontainer",
-      children: [header, jsxs("div", {
-        dflex: true,
-        gap: "8",
-        children: [jsxs("div", {
+    }), jsx("div", {
+      p: "5",
+      bgColor: "slate-100",
+      rounded: "lg",
+      children: jsxs(PageContainer, {
+        w: editorMaxW ? "auto" : "full",
+        size: "x2",
+        id: "pagecontainer",
+        children: [header, jsxs("div", {
           dflex: true,
-          flexCol: true,
-          gap: "8",
-          flexGrow: true,
-          children: [(editor === null || editor === void 0 ? void 0 : editor.type) != "textarea" &&
-          // TODO Find a way to make this editor shrink in width when resizing the window...
-          jsx(PageContentEditor, {
-            name: "content",
-            w: editorMaxW,
-            maxW: editorMaxW,
-            minW: "144"
-          }), (editor === null || editor === void 0 ? void 0 : editor.type) == "textarea" && jsx(TextArea, {
-            name: editor === null || editor === void 0 ? void 0 : editor.name,
-            maxW: editorMaxW,
-            minW: editorMaxW,
-            w: editorMaxW,
-            minH: "128",
-            rows: 25,
-            bgColor: "white",
-            border: "0",
-            p: "5",
-            textColor: "slate-800"
-          }), editoFooter]
-        }), jsx(PageSidebar, {
-          children: sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsx(Section, {
-            section: section,
-            item: item
-          }, index))
+          gap: "5",
+          children: [jsxs("div", {
+            dflex: true,
+            flexCol: true,
+            gap: "8",
+            flexGrow: true,
+            children: [(editor === null || editor === void 0 ? void 0 : editor.type) != "textarea" &&
+            // TODO Find a way to make this editor shrink in width when resizing the window...
+            jsx(PageContentEditor, {
+              name: "content",
+              maxW: editorMaxW,
+              minW: "144",
+              shadow: true,
+              rounded: "lg"
+            }), (editor === null || editor === void 0 ? void 0 : editor.type) == "textarea" && jsx(TextArea, {
+              name: editor === null || editor === void 0 ? void 0 : editor.name,
+              maxW: editorMaxW,
+              minW: editorMaxW,
+              w: editorMaxW,
+              minH: "128",
+              rows: 25,
+              bgColor: "white",
+              border: "0",
+              shadow: true,
+              p: "5",
+              textColor: "slate-800"
+            }), editoFooter]
+          }), jsx(PageSidebar, {
+            children: sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsx(Section, {
+              section: section,
+              item: item
+            }, index))
+          })]
         })]
-      })]
+      })
     })]
   });
 }
@@ -1354,12 +1356,7 @@ function TableContainer(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["initialPageSize", "initialVisibleColumns", "columns", "children"]);
-  return jsx(Tile, Object.assign({
-    scheme: "light",
-    shadow: true,
-    rounded: "md",
-    px: "0",
-    py: "4",
+  return jsx("div", Object.assign({
     w: "full",
     dflex: true,
     flexCol: true
@@ -1381,10 +1378,10 @@ function TableCreateButton(_a) {
     } = _a,
     props = __rest$1(_a, ["children"]);
   return jsx(DialogButton, Object.assign({
-    scheme: "default",
-    corners: "pill",
-    h: "10",
-    variant: "glass"
+    scheme: "dark",
+    size: "sm",
+    aspectRatio: "square",
+    variant: "borderless"
   }, props, {
     children: children !== null && children !== void 0 ? children : jsx(Icon, {
       path: mdiPlusThick
@@ -1399,11 +1396,11 @@ function TableFilterButton(_a) {
     side: "bottom-end",
     modal: true,
     children: [jsx(Button, Object.assign({
-      scheme: "default",
-      corners: "pill",
-      w: "10",
-      h: "10",
-      variant: "glass"
+      scheme: "dark",
+      size: "sm",
+      aspectRatio: "square",
+      variant: "borderless",
+      corners: "square"
     }, props, {
       children: jsx(Icon, {
         path: mdiFilter
@@ -1438,26 +1435,18 @@ function TableFilterButton(_a) {
 function TableTopBar(_a) {
   var {
       title,
-      queryKey,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "queryKey", "children"]);
-  const invalidate = useInvalidateQuery(queryKey);
-  useHotkeys('ctrl+r', () => invalidate(), {
-    preventDefault: true
-  }, [invalidate]);
+    props = __rest$1(_a, ["title", "children"]);
   return jsxs("div", Object.assign({
     dflex: true,
     flexRow: true,
-    pb: "4",
     alignItems: "center",
     gap: "3",
-    px: "8",
-    borderB: "0.5",
-    borderBColor: "--bg-2"
+    p: "8"
   }, props, {
     children: [title && jsx("h2", {
-      textSize: "x3",
+      textSize: "x2",
       fontWeight: "600",
       textColor: "#3f4254",
       textTransform: "capitalize",
@@ -1465,22 +1454,7 @@ function TableTopBar(_a) {
     }), jsx("div", {
       flexGrow: true,
       children: "\u00A0"
-    }), jsxs("div", {
-      spaceX: "2",
-      dflex: true,
-      alignItems: "center",
-      children: [jsx(Button, {
-        scheme: "default",
-        corners: "pill",
-        w: "10",
-        h: "10",
-        variant: "glass",
-        onClick: invalidate,
-        children: jsx(Icon, {
-          path: mdiRefresh
-        })
-      }), children]
-    })]
+    }), children]
   }));
 }
 
@@ -1943,15 +1917,14 @@ function TableRowPublishPostButton$1(_a) {
     mutation.mutateAsync(id).then(() => toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => toast.error(`Error: ${error}`));
   }, [mutation, id]);
   return jsx(Button, Object.assign({
-    w: "10",
-    h: "10",
     variant: "borderless",
-    corners: "pill",
-    scheme: "default",
+    corners: "square",
+    scheme: "dark",
     onClick: publish
   }, props, {
     children: jsx(Icon, {
-      path: isDraft ? mdiPublish : mdiPublishOff
+      path: isDraft ? mdiPublish : mdiPublishOff,
+      size: "sm"
     })
   }));
 }
@@ -1966,8 +1939,10 @@ function TableRowActionsView({
   const item = row.original;
   return jsx("div", {
     dflex: true,
-    spaceX: "1",
+    w: "full",
+    alignItems: "stretch",
     placeContent: "end",
+    h: "full",
     children: rowActions === null || rowActions === void 0 ? void 0 : rowActions.map((action, index) => jsxs(React.Fragment, {
       children: [action.type === "publish" && jsx(TableRowPublishPostButton$1, {
         id: item.id,
@@ -1980,7 +1955,8 @@ function TableRowActionsView({
         onClick: () => onAction(action, item),
         scheme: schemes$1[action.type],
         children: jsx(Icon, {
-          path: icons[action.type]
+          path: icons[action.type],
+          size: "sm"
         })
       })]
     }, index))
@@ -1997,10 +1973,15 @@ function ActionButton$1(_a) {
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [onClick]);
   return jsx(Button, Object.assign({
-    w: "10",
-    h: "10",
+    dflex: true,
+    alignContent: "center",
+    placeContent: "center",
+    py: "2.5",
+    px: "3",
+    h: "full",
+    size: "lg",
     variant: "borderless",
-    corners: "pill",
+    corners: "default",
     onClick: handleClick
   }, props));
 }
@@ -2014,11 +1995,11 @@ const icons = {
 };
 const schemes$1 = {
   "link": "dark",
-  "view": "secondary",
-  "edit": "warning",
-  "delete": "danger",
-  "publish": "warning",
-  "custom": "default"
+  "view": "dark",
+  "edit": "dark",
+  "delete": "dark",
+  "publish": "dark",
+  "custom": "dark"
 };
 
 function useTableProps(api, table, rowActions) {
@@ -2496,7 +2477,7 @@ function TableView(_a) {
   const id = useId(queryField);
   const _screen = runIfFn(screen, id);
   return jsx(PageContainer, Object.assign({
-    p: "5"
+    bgColor: "white"
   }, props, {
     children: jsx(TableContainer, {
       columns: _screen.table.columns,
@@ -2535,15 +2516,16 @@ function TT({
   return jsxs(Fragment, {
     children: [breadcrumbs && jsx(PageTopBar, {
       breadcrumbs: breadcrumbs
-    }), jsxs(TableTopBar, {
+    }), jsx(TableTopBar, {
       title: title,
-      queryKey: tableApi.queryKey,
-      children: [jsx(ButtonBar, {
+      children: jsx(ButtonBar, {
         buttonBar: buttonBar,
         createView: createView,
         editView: editView,
-        api: tableApi
-      }), filters && jsx(TableFilterButton, {})]
+        api: tableApi,
+        queryKey: tableApi.queryKey,
+        children: filters && jsx(TableFilterButton, {})
+      })
     }), filters && jsx(TableFilters, {
       form: filters.form,
       initialValues: filters.initialValues,
@@ -2568,10 +2550,16 @@ function TT({
 }
 function ButtonBar({
   buttonBar,
+  queryKey,
   createView,
   editView,
-  api
+  api,
+  children
 }) {
+  const invalidate = useInvalidateQuery(queryKey);
+  useHotkeys('ctrl+r', () => invalidate(), {
+    preventDefault: true
+  }, [invalidate]);
   const createDialog = React.useCallback(onClose => {
     const view = createView !== null && createView !== void 0 ? createView : editView;
     if (view.type == "customDialog") return view.render({
@@ -2583,14 +2571,30 @@ function ButtonBar({
       invalidateQueryKey: api.queryKey
     });
   }, [editView, api]);
-  return jsx(Fragment, {
-    children: buttonBar && buttonBar.map((button, index) => jsxs("div", {
+  return jsxs("div", {
+    dflex: true,
+    border: "1px",
+    borderColor: "zinc-200",
+    divideX: "1px",
+    divideColor: "zinc-200",
+    rounded: "lg",
+    overflow: "hidden",
+    children: [jsx(Button, {
+      scheme: "dark",
+      size: "sm",
+      aspectRatio: "square",
+      variant: "borderless",
+      onClick: invalidate,
+      children: jsx(Icon, {
+        path: mdiRefresh
+      })
+    }), buttonBar && buttonBar.map((button, index) => jsxs(React.Fragment, {
       children: [button.type === "create" && editView && jsx(TableCreateButton, {
         buildDialog: createDialog
       }), button.type === "invalidate" && jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type === "custom" && button.render()]
-    }, index))
+    }, index)), children]
   });
 }
 function TableWrapper({
@@ -2612,6 +2616,7 @@ function TableWrapper({
     };
   }, [subtitle]);
   return jsx(Table, Object.assign({}, tableProps, {
+    p: "8",
     title: _subtitle
   }));
 }
@@ -3242,11 +3247,9 @@ function TableRowNavigateButton(_a) {
     navigate(`${path}`);
   }, [navigate, path]);
   return jsx(Button, Object.assign({
-    scheme: "secondary",
-    w: "10",
-    h: "10",
+    scheme: "dark",
     variant: "borderless",
-    corners: "pill",
+    corners: "square",
     onClick: handleClick
   }, props, {
     children: jsx(Icon, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.44",
+    "version": "1.0.46",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ButtonProps } from "@valerya/ui";
-interface InvalidateButtonProps extends ButtonProps {
+import { IconButtonProps } from "@valerya/ui";
+interface InvalidateButtonProps extends Omit<IconButtonProps, "icon"> {
     pathOrPermalink: string;
 }
 export declare function InvalidateButton({ pathOrPermalink, ...props }: InvalidateButtonProps): JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ButtonProps } from "@valerya/ui";
-export declare function ViewButton({ path, icon, ...props }: {
+import { IconButtonProps } from "@valerya/ui";
+export declare function ViewButton({ path, icon, ...props }: Omit<IconButtonProps, "icon"> & {
     path: string;
     icon?: string;
-} & ButtonProps): JSX.Element;
+}): JSX.Element;

package/src/lib/table/TableTopBar.d.ts

@@ -2,7 +2,6 @@
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 interface TableTopBarProps extends SoperioComponent, ParentComponent {
     title?: string;
-    queryKey: string[];
 }
-export declare function TableTopBar({ title, queryKey, children, ...props }: TableTopBarProps): JSX.Element;
+export declare function TableTopBar({ title, children, ...props }: TableTopBarProps): JSX.Element;
 export {};