baaz-custom-components 5.1.0 → 5.1.2

package/dist/index.css

@@ -43,6 +43,7 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --tracking-wide: 0.025em;
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --radius-xs: 0.125rem;
@@ -488,9 +489,6 @@
     width: 100%;
     height: 100%;
   }
-  .h-1 {
-    height: calc(var(--spacing) * 1);
-  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -509,6 +507,9 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -581,8 +582,8 @@
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
+  .w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
   }
   .w-2 {
     width: calc(var(--spacing) * 2);
@@ -602,6 +603,9 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -784,9 +788,6 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
-  .gap-2\.5 {
-    gap: calc(var(--spacing) * 2.5);
-  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -825,9 +826,6 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
-  .rounded {
-    border-radius: 0.25rem;
-  }
   .rounded-\[2px\] {
     border-radius: 2px;
   }
@@ -921,6 +919,12 @@
   .border-primary {
     border-color: var(--primary);
   }
+  .border-primary\/30 {
+    border-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
+    }
+  }
   .border-sidebar-border {
     border-color: var(--sidebar-border);
   }
@@ -1005,6 +1009,12 @@
   .bg-primary {
     background-color: var(--primary);
   }
+  .bg-primary\/30 {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--primary) 30%, transparent);
+    }
+  }
   .bg-red-700 {
     background-color: var(--color-red-700);
   }
@@ -1020,9 +1030,6 @@
   .bg-sidebar-border {
     background-color: var(--sidebar-border);
   }
-  .bg-surface-alt {
-    background-color: var(--surface-alt);
-  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1047,15 +1054,9 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
-  .p-1\.5 {
-    padding: calc(var(--spacing) * 1.5);
-  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
-  .p-2\.5 {
-    padding: calc(var(--spacing) * 2.5);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1107,9 +1108,15 @@
   .py-2\.5 {
     padding-block: calc(var(--spacing) * 2.5);
   }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1156,8 +1163,11 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .text-\[9px\] {
-    font-size: 9px;
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+  .text-\[13px\] {
+    font-size: 13px;
   }
   .leading-none {
     --tw-leading: 1;
@@ -1183,22 +1193,22 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-\[0\.1em\] {
-    --tw-tracking: 0.1em;
-    letter-spacing: 0.1em;
-  }
-  .tracking-\[0\.14em\] {
-    --tw-tracking: 0.14em;
-    letter-spacing: 0.14em;
+  .tracking-\[0\.12em\] {
+    --tw-tracking: 0.12em;
+    letter-spacing: 0.12em;
   }
-  .tracking-\[0\.15em\] {
-    --tw-tracking: 0.15em;
-    letter-spacing: 0.15em;
+  .tracking-\[0\.16em\] {
+    --tw-tracking: 0.16em;
+    letter-spacing: 0.16em;
   }
   .tracking-\[0\.25rem\] {
     --tw-tracking: 0.25rem;
     letter-spacing: 0.25rem;
   }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
   .tracking-wider {
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
@@ -1225,16 +1235,22 @@
   .text-foreground {
     color: var(--foreground);
   }
-  .text-foreground\/25 {
+  .text-foreground\/30 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 30%, transparent);
+    }
+  }
+  .text-foreground\/35 {
     color: var(--foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--foreground) 25%, transparent);
+      color: color-mix(in oklab, var(--foreground) 35%, transparent);
     }
   }
-  .text-foreground\/30 {
+  .text-foreground\/40 {
     color: var(--foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--foreground) 30%, transparent);
+      color: color-mix(in oklab, var(--foreground) 40%, transparent);
     }
   }
   .text-foreground\/50 {
@@ -1243,10 +1259,10 @@
       color: color-mix(in oklab, var(--foreground) 50%, transparent);
     }
   }
-  .text-foreground\/70 {
+  .text-foreground\/60 {
     color: var(--foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--foreground) 70%, transparent);
+      color: color-mix(in oklab, var(--foreground) 60%, transparent);
     }
   }
   .text-green-800 {
@@ -1507,9 +1523,9 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .duration-100 {
-    --tw-duration: 100ms;
-    transition-duration: 100ms;
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
   }
   .duration-200 {
     --tw-duration: 200ms;
@@ -1552,13 +1568,10 @@
       opacity: 100%;
     }
   }
-  .group-hover\:text-foreground\/90 {
+  .group-hover\:text-primary {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
-        color: var(--foreground);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--foreground) 90%, transparent);
-        }
+        color: var(--primary);
       }
     }
   }
@@ -1916,13 +1929,6 @@
       }
     }
   }
-  .hover\:bg-border {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--border);
-      }
-    }
-  }
   .hover\:bg-card-foreground {
     &:hover {
       @media (hover: hover) {
@@ -2063,6 +2069,14 @@
       }
     }
   }
+  .hover\:brightness-110 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-brightness: brightness(110%);
+        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+      }
+    }
+  }
   .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar {
     &:hover {
       @media (hover: hover) {
@@ -7925,6 +7939,9 @@ i.wx-U0Bx7pIR {
 .wx-4VuBwK2D:last-child {
   border-bottom: 0.1px solid rgb(56, 64, 71);
 }
+.wx-table-box.wx-4VuBwK2D {
+  border: none;
+}
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }

package/dist/index.js

@@ -2376,7 +2376,7 @@ var GridHeader = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md border-l border-r border-t", children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between items-center gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         filters_default,
@@ -2530,7 +2530,7 @@ var Grid = (0, import_react7.forwardRef)(
             if (!isNaN(currentWidth)) {
               api.exec("resize-column", {
                 id: col.id,
-                width: currentWidth + extra - 0.3
+                width: currentWidth + extra
               });
             }
           });
@@ -2540,7 +2540,7 @@ var Grid = (0, import_react7.forwardRef)(
         columns.forEach((col) => {
           api.exec("resize-column", {
             id: col.id,
-            width: columnWidth - 0.3
+            width: columnWidth
           });
         });
       }
@@ -2601,7 +2601,7 @@ var Grid = (0, import_react7.forwardRef)(
           children
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.Grid, __spreadProps(__spreadValues({}, rest), { data, columns, init })) }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1 w-full border border-border overflow-hidden", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.Grid, __spreadProps(__spreadValues({}, rest), { data, columns, init })) }) }) })
     ] });
   }
 );
@@ -2692,7 +2692,7 @@ function Pagination({
   const handlePageSizeChange = (size) => {
     onPageSizeChange == null ? void 0 : onPageSizeChange(size);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col-reverse gap-2 md:flex-row items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col-reverse gap-2 md:flex-row items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md border-l border-r border-b", children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between w-full md:w-auto items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { children: [
         "Showing ",
@@ -2787,6 +2787,16 @@ var SlideToolbar = ({
     onAction == null ? void 0 : onAction(item.id);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("style", { children: `
+        @keyframes bounceX {
+          0%, 100% { transform: translateX(0px); }
+          40%       { transform: translateX(4px); }
+          60%       { transform: translateX(2px); }
+        }
+        .chevron-bounce {
+          animation: bounceX 1.4s ease-in-out infinite;
+        }
+      ` }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
@@ -2794,13 +2804,20 @@ var SlideToolbar = ({
         tabIndex: 0,
         "aria-label": `Open ${title}`,
         onClick: () => setOpen(true),
+        onKeyDown: (e) => e.key === "Enter" && setOpen(true),
         className: [
           "absolute inset-y-0 left-0 z-20 w-[18px] flex items-center justify-center",
-          "bg-card border-r border-border cursor-pointer",
-          "hover:bg-surface-alt transition-all duration-200",
+          "bg-primary/30 border-r border-primary/30 cursor-pointer",
+          "hover:brightness-110 transition-all duration-200",
           open ? "opacity-0 pointer-events-none !w-0 border-r-0" : "opacity-100 pointer-events-auto"
         ].join(" "),
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.ChevronRight, { className: "text-foreground/50", size: 50 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_lucide_react16.ChevronRight,
+          {
+            className: "text-primary-foreground chevron-bounce",
+            size: 16
+          }
+        )
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
@@ -2820,52 +2837,36 @@ var SlideToolbar = ({
         ].join(" "),
         style: { width: `${panelWidth}px` },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-3 py-2.5 bg-surface-alt border-b border-border shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs font-semibold tracking-[0.15em] uppercase text-foreground", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-semibold text-foreground tracking-wide", children: title }),
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
                 onClick: () => setOpen(false),
                 "aria-label": "Close toolbar",
-                className: "flex items-center justify-center w-5 h-5 rounded cursor-pointer\n                       text-foreground hover:text-foreground hover:bg-border\n                       transition-colors duration-100",
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.X, { size: 14 })
+                className: "flex items-center justify-center w-6 h-6 rounded-md\n                       text-foreground/50 hover:text-foreground hover:bg-surface-alt\n                       transition-all duration-150 cursor-pointer",
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.X, { size: 13 })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 overflow-y-auto overflow-x-hidden p-1.5 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "p-2 text-xs font-semibold tracking-[0.14em] uppercase text-foreground/30", children: "Actions" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("nav", { className: "flex flex-col gap-2", children: resolvedItems.map((item) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-                "button",
-                {
-                  onClick: () => handleItem(item),
-                  className: [
-                    "group flex items-center gap-2.5 p-2.5 rounded w-full",
-                    "text-left text-sm cursor-pointer border-l-2",
-                    "transition-colors duration-100",
-                    "border-transparent text-foreground/70 hover:text-foreground hover:bg-surface-alt hover:border-primary"
-                  ].join(" "),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                      "span",
-                      {
-                        className: [
-                          "flex shrink-0 transition-colors duration-100",
-                          "text-foreground/70 group-hover:text-foreground/90"
-                        ].join(" "),
-                        children: item.icon
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "flex-1 leading-none", children: item.label })
-                  ]
-                },
-                item.id
-              );
-            }) })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "px-4 pt-1 pb-2 text-[10px] font-semibold tracking-[0.16em] uppercase text-foreground/35", children: "Actions" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("nav", { className: "flex flex-col px-2", children: resolvedItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+              "button",
+              {
+                onClick: () => handleItem(item),
+                className: "group flex items-center gap-3 px-3 py-2.5 rounded-lg w-full\n                               text-left text-[13px] font-medium cursor-pointer\n                               text-foreground/60 hover:text-foreground hover:bg-surface-alt\n                               transition-all duration-150 border-l-2 border-transparent\n                               hover:border-primary",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "flex shrink-0 text-foreground/40 group-hover:text-primary transition-colors duration-150", children: item.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "flex-1 leading-none", children: item.label })
+                ]
+              },
+              item.id
+            )) })
           ] }) : children }),
-          footerLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-t border-border bg-surface-alt shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "w-1 h-1 rounded-full bg-foreground/20 shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-[9px] tracking-[0.1em] uppercase text-foreground/25", children: footerLabel })
+          footerLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-foreground/20 shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-[10px] tracking-[0.12em] uppercase text-foreground/30 font-medium", children: footerLabel })
           ] })
         ]
       }

package/dist/index.mjs

@@ -2350,7 +2350,7 @@ var GridHeader = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md border-l border-r border-t", children: [
     /* @__PURE__ */ jsxs18("div", { className: "flex justify-between items-center gap-3", children: [
       /* @__PURE__ */ jsx24(
         filters_default,
@@ -2504,7 +2504,7 @@ var Grid = forwardRef(
             if (!isNaN(currentWidth)) {
               api.exec("resize-column", {
                 id: col.id,
-                width: currentWidth + extra - 0.3
+                width: currentWidth + extra
               });
             }
           });
@@ -2514,7 +2514,7 @@ var Grid = forwardRef(
         columns.forEach((col) => {
           api.exec("resize-column", {
             id: col.id,
-            width: columnWidth - 0.3
+            width: columnWidth
           });
         });
       }
@@ -2575,7 +2575,7 @@ var Grid = forwardRef(
           children
         }
       ),
-      /* @__PURE__ */ jsx25("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ jsx25(WillowDark, { fonts, children: /* @__PURE__ */ jsx25("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ jsx25("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ jsx25("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ jsx25(SvarGrid, __spreadProps(__spreadValues({}, rest), { data, columns, init })) }) }) })
+      /* @__PURE__ */ jsx25("div", { className: "flex-1 w-full border border-border overflow-hidden", ref: containerRef, children: /* @__PURE__ */ jsx25(WillowDark, { fonts, children: /* @__PURE__ */ jsx25("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ jsx25("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ jsx25("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ jsx25(SvarGrid, __spreadProps(__spreadValues({}, rest), { data, columns, init })) }) }) })
     ] });
   }
 );
@@ -2666,7 +2666,7 @@ function Pagination({
   const handlePageSizeChange = (size) => {
     onPageSizeChange == null ? void 0 : onPageSizeChange(size);
   };
-  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col-reverse gap-2 md:flex-row items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md", children: [
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col-reverse gap-2 md:flex-row items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md border-l border-r border-b", children: [
     /* @__PURE__ */ jsxs21("div", { className: "flex justify-between w-full md:w-auto items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
       /* @__PURE__ */ jsxs21("span", { children: [
         "Showing ",
@@ -2761,6 +2761,16 @@ var SlideToolbar = ({
     onAction == null ? void 0 : onAction(item.id);
   };
   return /* @__PURE__ */ jsxs22(Fragment3, { children: [
+    /* @__PURE__ */ jsx28("style", { children: `
+        @keyframes bounceX {
+          0%, 100% { transform: translateX(0px); }
+          40%       { transform: translateX(4px); }
+          60%       { transform: translateX(2px); }
+        }
+        .chevron-bounce {
+          animation: bounceX 1.4s ease-in-out infinite;
+        }
+      ` }),
     /* @__PURE__ */ jsx28(
       "div",
       {
@@ -2768,13 +2778,20 @@ var SlideToolbar = ({
         tabIndex: 0,
         "aria-label": `Open ${title}`,
         onClick: () => setOpen(true),
+        onKeyDown: (e) => e.key === "Enter" && setOpen(true),
         className: [
           "absolute inset-y-0 left-0 z-20 w-[18px] flex items-center justify-center",
-          "bg-card border-r border-border cursor-pointer",
-          "hover:bg-surface-alt transition-all duration-200",
+          "bg-primary/30 border-r border-primary/30 cursor-pointer",
+          "hover:brightness-110 transition-all duration-200",
           open ? "opacity-0 pointer-events-none !w-0 border-r-0" : "opacity-100 pointer-events-auto"
         ].join(" "),
-        children: /* @__PURE__ */ jsx28(ChevronRight4, { className: "text-foreground/50", size: 50 })
+        children: /* @__PURE__ */ jsx28(
+          ChevronRight4,
+          {
+            className: "text-primary-foreground chevron-bounce",
+            size: 16
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsxs22(
@@ -2794,52 +2811,36 @@ var SlideToolbar = ({
         ].join(" "),
         style: { width: `${panelWidth}px` },
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-3 py-2.5 bg-surface-alt border-b border-border shrink-0", children: [
-            /* @__PURE__ */ jsx28("span", { className: "text-xs font-semibold tracking-[0.15em] uppercase text-foreground", children: title }),
+          /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsx28("span", { className: "text-sm font-semibold text-foreground tracking-wide", children: title }),
             /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: () => setOpen(false),
                 "aria-label": "Close toolbar",
-                className: "flex items-center justify-center w-5 h-5 rounded cursor-pointer\n                       text-foreground hover:text-foreground hover:bg-border\n                       transition-colors duration-100",
-                children: /* @__PURE__ */ jsx28(X4, { size: 14 })
+                className: "flex items-center justify-center w-6 h-6 rounded-md\n                       text-foreground/50 hover:text-foreground hover:bg-surface-alt\n                       transition-all duration-150 cursor-pointer",
+                children: /* @__PURE__ */ jsx28(X4, { size: 13 })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx28("div", { className: "flex-1 overflow-y-auto overflow-x-hidden p-1.5 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
-            /* @__PURE__ */ jsx28("p", { className: "p-2 text-xs font-semibold tracking-[0.14em] uppercase text-foreground/30", children: "Actions" }),
-            /* @__PURE__ */ jsx28("nav", { className: "flex flex-col gap-2", children: resolvedItems.map((item) => {
-              return /* @__PURE__ */ jsxs22(
-                "button",
-                {
-                  onClick: () => handleItem(item),
-                  className: [
-                    "group flex items-center gap-2.5 p-2.5 rounded w-full",
-                    "text-left text-sm cursor-pointer border-l-2",
-                    "transition-colors duration-100",
-                    "border-transparent text-foreground/70 hover:text-foreground hover:bg-surface-alt hover:border-primary"
-                  ].join(" "),
-                  children: [
-                    /* @__PURE__ */ jsx28(
-                      "span",
-                      {
-                        className: [
-                          "flex shrink-0 transition-colors duration-100",
-                          "text-foreground/70 group-hover:text-foreground/90"
-                        ].join(" "),
-                        children: item.icon
-                      }
-                    ),
-                    /* @__PURE__ */ jsx28("span", { className: "flex-1 leading-none", children: item.label })
-                  ]
-                },
-                item.id
-              );
-            }) })
+          /* @__PURE__ */ jsx28("div", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
+            /* @__PURE__ */ jsx28("p", { className: "px-4 pt-1 pb-2 text-[10px] font-semibold tracking-[0.16em] uppercase text-foreground/35", children: "Actions" }),
+            /* @__PURE__ */ jsx28("nav", { className: "flex flex-col px-2", children: resolvedItems.map((item) => /* @__PURE__ */ jsxs22(
+              "button",
+              {
+                onClick: () => handleItem(item),
+                className: "group flex items-center gap-3 px-3 py-2.5 rounded-lg w-full\n                               text-left text-[13px] font-medium cursor-pointer\n                               text-foreground/60 hover:text-foreground hover:bg-surface-alt\n                               transition-all duration-150 border-l-2 border-transparent\n                               hover:border-primary",
+                children: [
+                  /* @__PURE__ */ jsx28("span", { className: "flex shrink-0 text-foreground/40 group-hover:text-primary transition-colors duration-150", children: item.icon }),
+                  /* @__PURE__ */ jsx28("span", { className: "flex-1 leading-none", children: item.label })
+                ]
+              },
+              item.id
+            )) })
           ] }) : children }),
-          footerLabel && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 px-3 py-2 border-t border-border bg-surface-alt shrink-0", children: [
-            /* @__PURE__ */ jsx28("span", { className: "w-1 h-1 rounded-full bg-foreground/20 shrink-0" }),
-            /* @__PURE__ */ jsx28("span", { className: "text-[9px] tracking-[0.1em] uppercase text-foreground/25", children: footerLabel })
+          footerLabel && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border shrink-0", children: [
+            /* @__PURE__ */ jsx28("span", { className: "w-1.5 h-1.5 rounded-full bg-foreground/20 shrink-0" }),
+            /* @__PURE__ */ jsx28("span", { className: "text-[10px] tracking-[0.12em] uppercase text-foreground/30 font-medium", children: footerLabel })
           ] })
         ]
       }