baaz-custom-components 5.0.33 → 5.1.1

package/dist/index.css

@@ -47,6 +47,7 @@
     --tracking-widest: 0.1em;
     --radius-xs: 0.125rem;
     --radius-2xl: 1rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -247,6 +248,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -342,6 +346,9 @@
   .z-20 {
     z-index: 20;
   }
+  .z-30 {
+    z-index: 30;
+  }
   .z-40 {
     z-index: 40;
   }
@@ -481,6 +488,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -562,12 +572,18 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .\!w-0 {
+    width: calc(var(--spacing) * 0) !important;
+  }
   .\!w-md {
     width: var(--container-md) !important;
   }
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -598,6 +614,9 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
   .w-\[40px\] {
     width: 40px;
   }
@@ -671,10 +690,18 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-px {
     --tw-translate-x: -1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-\[-50\%\] {
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -757,6 +784,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -795,6 +825,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-\[2px\] {
     border-radius: 2px;
   }
@@ -851,6 +884,10 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
   }
+  .border-r-0 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -867,6 +904,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -880,9 +921,18 @@
   .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);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
@@ -937,6 +987,12 @@
   .bg-destructive {
     background-color: var(--destructive);
   }
+  .bg-foreground\/20 {
+    background-color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--foreground) 20%, transparent);
+    }
+  }
   .bg-input {
     background-color: var(--input);
   }
@@ -955,6 +1011,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);
   }
@@ -970,6 +1032,9 @@
   .bg-sidebar-border {
     background-color: var(--sidebar-border);
   }
+  .bg-surface-alt {
+    background-color: var(--surface-alt);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -994,9 +1059,15 @@
   .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);
   }
@@ -1045,6 +1116,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -1094,6 +1168,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[9px\] {
+    font-size: 9px;
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -1118,6 +1195,18 @@
     --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\.15em\] {
+    --tw-tracking: 0.15em;
+    letter-spacing: 0.15em;
+  }
   .tracking-\[0\.25rem\] {
     --tw-tracking: 0.25rem;
     letter-spacing: 0.25rem;
@@ -1148,6 +1237,24 @@
   .text-foreground {
     color: var(--foreground);
   }
+  .text-foreground\/25 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 25%, transparent);
+    }
+  }
+  .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\/70 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 70%, transparent);
+    }
+  }
   .text-green-800 {
     color: var(--color-green-800);
   }
@@ -1184,6 +1291,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .uppercase {
+    text-transform: uppercase;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -1195,12 +1305,18 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -1219,6 +1335,15 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .shadow-\[4px_0_24px_rgba\(0\,0\,0\,0\.5\)\] {
+    --tw-shadow: 4px 0 24px var(--tw-shadow-color, rgba(0,0,0,0.5));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -1388,6 +1513,10 @@
     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-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1404,6 +1533,10 @@
     --tw-ease: linear;
     transition-timing-function: linear;
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .fade-in-0 {
     --tw-enter-opacity: calc(0/100);
     --tw-enter-opacity: 0;
@@ -1425,6 +1558,16 @@
       opacity: 100%;
     }
   }
+  .group-hover\:text-foreground\/90 {
+    &: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);
+        }
+      }
+    }
+  }
   .group-hover\/menu-item\:opacity-100 {
     &:is(:where(.group\/menu-item):hover *) {
       @media (hover: hover) {
@@ -1765,6 +1908,13 @@
       }
     }
   }
+  .hover\:border-primary {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--primary);
+      }
+    }
+  }
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
@@ -1772,6 +1922,13 @@
       }
     }
   }
+  .hover\:bg-border {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--border);
+      }
+    }
+  }
   .hover\:bg-card-foreground {
     &:hover {
       @media (hover: hover) {
@@ -1840,6 +1997,13 @@
       }
     }
   }
+  .hover\:bg-surface-alt {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-alt);
+      }
+    }
+  }
   .hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -1905,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) {
@@ -7760,6 +7932,7 @@ i.wx-U0Bx7pIR {
 .main {
   flex: 1;
   overflow-y: auto;
+  position: relative;
   height: 100%;
   padding: clamp(12px, 3.4vh, 32px) clamp(12px, 1.8vw, 32px);
 }

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { IApi } from '@svar-ui/react-grid';
 
 type NavbarData = NavbarEntry[];
@@ -157,4 +158,22 @@ type Pagination$1 = {
 
 declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SortableHeaderCell, type UserData };
+interface ToolbarItem {
+    id: string;
+    label: string;
+    icon: ReactNode;
+}
+interface SlideToolbarProps {
+    items?: ToolbarItem[];
+    children?: ReactNode;
+    onAction?: (id: string) => void;
+    title?: string;
+    footerLabel?: string;
+    panelWidth?: number;
+    closeOnBackdrop?: boolean;
+    className?: string;
+}
+
+declare const SlideToolbar: React.FC<SlideToolbarProps>;
+
+export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SlideToolbar, type SlideToolbarProps, SortableHeaderCell, type ToolbarItem, type UserData };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { IApi } from '@svar-ui/react-grid';
 
 type NavbarData = NavbarEntry[];
@@ -157,4 +158,22 @@ type Pagination$1 = {
 
 declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SortableHeaderCell, type UserData };
+interface ToolbarItem {
+    id: string;
+    label: string;
+    icon: ReactNode;
+}
+interface SlideToolbarProps {
+    items?: ToolbarItem[];
+    children?: ReactNode;
+    onAction?: (id: string) => void;
+    title?: string;
+    footerLabel?: string;
+    panelWidth?: number;
+    closeOnBackdrop?: boolean;
+    className?: string;
+}
+
+declare const SlideToolbar: React.FC<SlideToolbarProps>;
+
+export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SlideToolbar, type SlideToolbarProps, SortableHeaderCell, type ToolbarItem, type UserData };

package/dist/index.js

@@ -63,6 +63,7 @@ __export(index_exports, {
   Grid: () => grid_default,
   Navbar: () => Navbar,
   Pagination: () => pagination_default,
+  SlideToolbar: () => toolbar_default,
   SortableHeaderCell: () => sortableHeaderCell_default
 });
 module.exports = __toCommonJS(index_exports);
@@ -2754,11 +2755,136 @@ function Pagination({
   ] });
 }
 var pagination_default = Pagination;
+
+// src/components/custom/toolbar/index.tsx
+var import_lucide_react16 = require("lucide-react");
+var import_react8 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var SlideToolbar = ({
+  items,
+  children,
+  onAction,
+  title = "Toolbar",
+  footerLabel,
+  panelWidth = 210,
+  closeOnBackdrop = true,
+  className = ""
+}) => {
+  const resolvedItems = items != null ? items : children ? void 0 : [];
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const panelRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (!open || !closeOnBackdrop) return;
+    const handlePointerDown = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open, closeOnBackdrop]);
+  const handleItem = (item) => {
+    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",
+      {
+        role: "button",
+        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-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-primary-foreground chevron-bounce",
+            size: 16
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-label": title,
+        "aria-hidden": !open,
+        className: [
+          "absolute inset-y-0 left-0 z-30 flex flex-col",
+          "bg-card border-r border-border",
+          "shadow-[4px_0_24px_rgba(0,0,0,0.5)]",
+          "transition-transform duration-200 ease-out",
+          open ? "translate-x-0" : "-translate-x-full",
+          className
+        ].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.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 })
+              }
+            )
+          ] }),
+          /* @__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) => /* @__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", 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 })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+var toolbar_default = SlideToolbar;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CustomBreadcrumb,
   Grid,
   Navbar,
   Pagination,
+  SlideToolbar,
   SortableHeaderCell
 });