baaz-custom-components 5.0.9 → 5.0.12

package/dist/index.css

@@ -42,6 +42,7 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --radius-xs: 0.125rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -382,6 +383,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mr-auto {
+    margin-right: auto;
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -575,12 +579,12 @@
   .w-full {
     width: 100%;
   }
+  .w-grid {
+    width: calc(100% - 2px);
+  }
   .w-max {
     width: max-content;
   }
-  .w-screen {
-    width: 100vw;
-  }
   .max-w-\(--skeleton-width\) {
     max-width: var(--skeleton-width);
   }
@@ -590,9 +594,6 @@
   .max-w-max {
     max-width: max-content;
   }
-  .\!min-w-\[30rem\] {
-    min-width: 30rem !important;
-  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -847,6 +848,12 @@
   .bg-destructive {
     background-color: var(--destructive);
   }
+  .bg-destructive\/40 {
+    background-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
   .bg-input {
     background-color: var(--input);
   }
@@ -946,9 +953,6 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
-  .py-3 {
-    padding-block: calc(var(--spacing) * 3);
-  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -1026,6 +1030,10 @@
     --tw-tracking: 0.25rem;
     letter-spacing: 0.25rem;
   }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -1173,6 +1181,9 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .filter {
+    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,);
+  }
   .transition {
     transition-property:
       color,
@@ -1662,6 +1673,13 @@
       }
     }
   }
+  .hover\:bg-destructive {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--destructive);
+      }
+    }
+  }
   .hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
@@ -7500,10 +7518,25 @@ i.wx-U0Bx7pIR {
   --wx-table-editor-dropdown-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.6);
   --wx-background: var(--background);
 }
+.wx-theme {
+  height: 100%;
+  overflow-y: hidden;
+}
 .wx-willow-dark-theme .menu {
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.6);
   outline: var(--wx-border);
 }
+.baaz-custom-components {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.main {
+  flex: 1;
+  overflow-y: auto;
+  height: 100%;
+  padding: clamp(12px, 3.4vh, 32px) clamp(12px, 1.8vw, 32px);
+}
 @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; }
@@ -7536,6 +7569,19 @@ i.wx-U0Bx7pIR {
 @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-blur { syntax: "*"; inherits: false; }
+@property --tw-brightness { syntax: "*"; inherits: false; }
+@property --tw-contrast { syntax: "*"; inherits: false; }
+@property --tw-grayscale { syntax: "*"; inherits: false; }
+@property --tw-hue-rotate { syntax: "*"; inherits: false; }
+@property --tw-invert { syntax: "*"; inherits: false; }
+@property --tw-opacity { syntax: "*"; inherits: false; }
+@property --tw-saturate { syntax: "*"; inherits: false; }
+@property --tw-sepia { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
 @property --tw-duration { syntax: "*"; inherits: false; }
 @property --tw-ease { syntax: "*"; inherits: false; }
 @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; }
@@ -7596,6 +7642,19 @@ i.wx-U0Bx7pIR {
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";

package/dist/index.d.mts

@@ -57,4 +57,73 @@ type BreadcrumbProps = {
 
 declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => react.JSX.Element;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, type RouteTree, type RouterAdapter, type UserData };
+type SortOrder = "asc" | "desc";
+type GridColumn = {
+    id: string;
+    header: string;
+    sortable?: boolean;
+    flexgrow?: number;
+    resize?: boolean;
+};
+type Filters = {
+    columnName: string;
+    operators: {
+        label: string;
+        value: "input" | "date" | "select" | "date-range" | null;
+        options?: {
+            label: string;
+            value: string;
+        }[];
+    }[];
+};
+type GridProps = {
+    data: Record<string, any>[];
+    columns: GridColumn[];
+    sortKey?: string | null;
+    sortOrder?: SortOrder | null;
+    onSortChange?: (key: string, order: SortOrder) => void;
+    multiselect?: boolean;
+    reorder?: boolean;
+    overlay?: React.FC | string;
+    init?: any;
+    onupdatecell?: any;
+    fonts?: boolean;
+    autoConfig?: boolean | {};
+    downloadable?: boolean;
+    fileNmae?: string;
+    search: boolean;
+    searchkey: string;
+    searchValue: string;
+    onExportPdf?: () => void;
+    onExportExcel?: () => void;
+    onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    filterList: Filters[];
+    onFilterChange: (filter: ActiveFilter) => void;
+};
+type ActiveFilter = {
+    column?: string | null;
+    operator?: string | null;
+    value?: string | null;
+    startDate?: string | null;
+    endDate?: string | null;
+};
+
+declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, fileNmae, fonts, onFilterChange, ...rest }: GridProps): react.JSX.Element;
+
+type Pagination$1 = {
+    totalCount: number;
+    count?: number | null;
+    currentPage: number;
+    totalPages: number;
+    pageSize: number;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    showSizeChanger?: boolean;
+    sizeChangerOptions?: number[];
+};
+
+declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1 & {
+    sizeChangerOptions?: number[];
+}): react.JSX.Element | null;
+
+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, type UserData };

package/dist/index.d.ts

@@ -57,4 +57,73 @@ type BreadcrumbProps = {
 
 declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => react.JSX.Element;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, type RouteTree, type RouterAdapter, type UserData };
+type SortOrder = "asc" | "desc";
+type GridColumn = {
+    id: string;
+    header: string;
+    sortable?: boolean;
+    flexgrow?: number;
+    resize?: boolean;
+};
+type Filters = {
+    columnName: string;
+    operators: {
+        label: string;
+        value: "input" | "date" | "select" | "date-range" | null;
+        options?: {
+            label: string;
+            value: string;
+        }[];
+    }[];
+};
+type GridProps = {
+    data: Record<string, any>[];
+    columns: GridColumn[];
+    sortKey?: string | null;
+    sortOrder?: SortOrder | null;
+    onSortChange?: (key: string, order: SortOrder) => void;
+    multiselect?: boolean;
+    reorder?: boolean;
+    overlay?: React.FC | string;
+    init?: any;
+    onupdatecell?: any;
+    fonts?: boolean;
+    autoConfig?: boolean | {};
+    downloadable?: boolean;
+    fileNmae?: string;
+    search: boolean;
+    searchkey: string;
+    searchValue: string;
+    onExportPdf?: () => void;
+    onExportExcel?: () => void;
+    onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    filterList: Filters[];
+    onFilterChange: (filter: ActiveFilter) => void;
+};
+type ActiveFilter = {
+    column?: string | null;
+    operator?: string | null;
+    value?: string | null;
+    startDate?: string | null;
+    endDate?: string | null;
+};
+
+declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, fileNmae, fonts, onFilterChange, ...rest }: GridProps): react.JSX.Element;
+
+type Pagination$1 = {
+    totalCount: number;
+    count?: number | null;
+    currentPage: number;
+    totalPages: number;
+    pageSize: number;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    showSizeChanger?: boolean;
+    sizeChangerOptions?: number[];
+};
+
+declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1 & {
+    sizeChangerOptions?: number[];
+}): react.JSX.Element | null;
+
+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, type UserData };