@compill/admin 1.0.45 → 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: "borderless",
-    size: "sm",
+    variant: "glass",
+    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))
+          })]
         })]
-      })]
+      })
     })]
   });
 }
@@ -1450,7 +1452,7 @@ function TableTopBar(_a) {
     flexRow: true,
     alignItems: "center",
     gap: "3",
-    p: "3"
+    p: "8"
   }, props, {
     children: [title && jsxRuntime.jsx("h2", {
       textSize: "x2",
@@ -1926,7 +1928,7 @@ function TableRowPublishPostButton$1(_a) {
   return jsxRuntime.jsx(ui.Button, Object.assign({
     variant: "borderless",
     corners: "square",
-    scheme: "default",
+    scheme: "dark",
     onClick: publish
   }, props, {
     children: jsxRuntime.jsx(ui.Icon, {
@@ -1950,10 +1952,6 @@ function TableRowActionsView({
     alignItems: "stretch",
     placeContent: "end",
     h: "full",
-    divideX: "1px",
-    divideColor: "zinc-100",
-    rounded: "lg",
-    overflow: "hidden",
     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,
@@ -1988,11 +1986,11 @@ function ActionButton$1(_a) {
     alignContent: "center",
     placeContent: "center",
     py: "2.5",
-    px: "2",
+    px: "3",
     h: "full",
     size: "lg",
     variant: "borderless",
-    corners: "square",
+    corners: "default",
     onClick: handleClick
   }, props));
 }
@@ -2006,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) {
@@ -2627,8 +2625,7 @@ function TableWrapper({
     };
   }, [subtitle]);
   return jsxRuntime.jsx(table.Table, Object.assign({}, tableProps, {
-    px: "3",
-    py: "3",
+    p: "8",
     title: _subtitle
   }));
 }
@@ -3259,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: "borderless",
-    size: "sm",
+    variant: "glass",
+    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))
+          })]
         })]
-      })]
+      })
     })]
   });
 }
@@ -1441,7 +1443,7 @@ function TableTopBar(_a) {
     flexRow: true,
     alignItems: "center",
     gap: "3",
-    p: "3"
+    p: "8"
   }, props, {
     children: [title && jsx("h2", {
       textSize: "x2",
@@ -1917,7 +1919,7 @@ function TableRowPublishPostButton$1(_a) {
   return jsx(Button, Object.assign({
     variant: "borderless",
     corners: "square",
-    scheme: "default",
+    scheme: "dark",
     onClick: publish
   }, props, {
     children: jsx(Icon, {
@@ -1941,10 +1943,6 @@ function TableRowActionsView({
     alignItems: "stretch",
     placeContent: "end",
     h: "full",
-    divideX: "1px",
-    divideColor: "zinc-100",
-    rounded: "lg",
-    overflow: "hidden",
     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,
@@ -1979,11 +1977,11 @@ function ActionButton$1(_a) {
     alignContent: "center",
     placeContent: "center",
     py: "2.5",
-    px: "2",
+    px: "3",
     h: "full",
     size: "lg",
     variant: "borderless",
-    corners: "square",
+    corners: "default",
     onClick: handleClick
   }, props));
 }
@@ -1997,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) {
@@ -2618,8 +2616,7 @@ function TableWrapper({
     };
   }, [subtitle]);
   return jsx(Table, Object.assign({}, tableProps, {
-    px: "3",
-    py: "3",
+    p: "8",
     title: _subtitle
   }));
 }
@@ -3250,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.45",
+    "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;