baaz-custom-components 5.0.20 → 5.0.23

package/dist/index.css

@@ -46,7 +46,9 @@
     --tracking-widest: 0.1em;
     --radius-xs: 0.125rem;
     --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;
+    --blur-sm: 8px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -347,6 +349,24 @@
   .z-\[1\] {
     z-index: 1;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
@@ -383,9 +403,6 @@
   .mt-auto {
     margin-top: auto;
   }
-  .mr-auto {
-    margin-right: auto;
-  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -492,6 +509,9 @@
   .h-96 {
     height: calc(var(--spacing) * 96);
   }
+  .h-\[40px\] {
+    height: 40px;
+  }
   .h-\[calc\(100dvh-3rem\)\] {
     height: calc(100dvh - 3rem);
   }
@@ -561,8 +581,11 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
-  .w-\[20rem\] {
-    width: 20rem;
+  .w-\[40px\] {
+    width: 40px;
+  }
+  .w-\[90px\] {
+    width: 90px;
   }
   .w-\[94\%\] {
     width: 94%;
@@ -570,6 +593,12 @@
   .w-\[100px\] {
     width: 100px;
   }
+  .w-\[250px\] {
+    width: 250px;
+  }
+  .w-\[650px\] {
+    width: 650px;
+  }
   .w-auto {
     width: auto;
   }
@@ -579,15 +608,15 @@
   .w-full {
     width: 100%;
   }
-  .w-grid {
-    width: calc(100% - 2px);
-  }
   .w-max {
     width: max-content;
   }
   .max-w-\(--skeleton-width\) {
     max-width: var(--skeleton-width);
   }
+  .max-w-\[95vw\] {
+    max-width: 95vw;
+  }
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -666,6 +695,9 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-default {
     cursor: default;
   }
@@ -675,9 +707,6 @@
   .touch-none {
     touch-action: none;
   }
-  .resize {
-    resize: both;
-  }
   .scroll-my-1 {
     scroll-margin-block: calc(var(--spacing) * 1);
   }
@@ -705,9 +734,6 @@
   .justify-center {
     justify-content: center;
   }
-  .justify-end {
-    justify-content: flex-end;
-  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -729,6 +755,20 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -769,6 +809,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -821,6 +865,12 @@
   .bg-background {
     background-color: var(--background);
   }
+  .bg-background\/60 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 60%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -848,12 +898,6 @@
   .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);
   }
@@ -905,9 +949,6 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1184,6 +1225,11 @@
   .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,);
   }
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property:
       color,
@@ -1673,10 +1719,13 @@
       }
     }
   }
-  .hover\:bg-destructive {
+  .hover\:bg-destructive\/30 {
     &:hover {
       @media (hover: hover) {
         background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
+        }
       }
     }
   }
@@ -1690,6 +1739,13 @@
       }
     }
   }
+  .hover\:bg-input {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--input);
+      }
+    }
+  }
   .hover\:bg-muted {
     &:hover {
       @media (hover: hover) {
@@ -7394,6 +7450,9 @@ i.wx-U0Bx7pIR {
   box-shadow: 0 4px 16px #0009;
   outline: var(--wx-border);
 }
+* {
+  box-sizing: border-box;
+}
 :root {
   --radius: 0.625rem;
   --background: oklch(0.2758 0.0182 262.2);
@@ -7410,6 +7469,7 @@ i.wx-U0Bx7pIR {
   --muted-foreground: oklch(0.9851 0 0);
   --accent: oklch(0.6437 0.1913 274.74);
   --accent-foreground: oklch(0.9851 0 0);
+  --surface-alt: oklch(0.305 0.02 260);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.4448 0.0409 263.25);
   --input: oklch(0.4448 0.0409 263.25);
@@ -7502,7 +7562,7 @@ i.wx-U0Bx7pIR {
   }
 }
 .wx-willow-dark-theme {
-  --wx-table-header-background: var(--card);
+  --wx-table-header-background: var(--surface-alt);
   --wx-table-select-background: var(--popover);
   --wx-table-select-focus-background: var(--card-foreground);
   --wx-table-select-border: inset 3px 0 var(--primary);
@@ -7520,7 +7580,8 @@ i.wx-U0Bx7pIR {
 }
 .wx-theme {
   height: 100%;
-  overflow-y: hidden;
+  width: 100%;
+  max-width: 100%;
 }
 .wx-willow-dark-theme .menu {
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.6);
@@ -7545,6 +7606,7 @@ i.wx-U0Bx7pIR {
 @property --tw-rotate-z { syntax: "*"; inherits: false; }
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
+@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-leading { syntax: "*"; inherits: false; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
@@ -7582,9 +7644,23 @@ i.wx-U0Bx7pIR {
 @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-backdrop-blur { syntax: "*"; inherits: false; }
+@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }
+@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }
+@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }
+@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }
+@property --tw-backdrop-invert { syntax: "*"; inherits: false; }
+@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }
+@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }
+@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
 @property --tw-duration { syntax: "*"; inherits: false; }
 @property --tw-ease { syntax: "*"; inherits: false; }
 @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -7618,6 +7694,7 @@ i.wx-U0Bx7pIR {
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
@@ -7655,6 +7732,15 @@ i.wx-U0Bx7pIR {
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";

package/dist/index.d.mts

@@ -68,7 +68,10 @@ type GridColumn = {
     resize?: boolean;
 };
 type Filters = {
-    columnName: string;
+    columnName: {
+        label: string;
+        value: string;
+    };
     operators: {
         label: string;
         value: "input" | "date" | "select" | "date-range" | null;
@@ -92,13 +95,11 @@ type GridProps = {
     fonts?: boolean;
     autoConfig?: boolean | {};
     downloadable?: boolean;
-    fileNmae?: string;
+    fileName?: string;
     search: boolean;
     searchkey: string;
     searchValue: string;
-    autoResize?: boolean;
-    autoResizeMode?: boolean | "data" | "header" | undefined;
-    defaultMinWidth?: number;
+    loading: boolean;
     onExportPdf?: () => void;
     onExportExcel?: () => void;
     onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -114,7 +115,18 @@ type ActiveFilter = {
     endDate?: string | null;
 };
 
-declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, autoResize, autoResizeMode, defaultMinWidth, fileNmae, fonts, onFilterChange, ...rest }: GridProps): react.JSX.Element;
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;
+
+type Props = {
+    cell: {
+        id?: string;
+        text?: string;
+    };
+    sortKey?: string | null;
+    sortOrder?: SortOrder | null;
+    onSortChange?: (key: string, order: SortOrder) => void;
+};
+declare function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }: Props): react.JSX.Element;
 
 type Pagination$1 = {
     totalCount: number;
@@ -130,4 +142,4 @@ type Pagination$1 = {
 
 declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): 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 };
+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 };

package/dist/index.d.ts

@@ -68,7 +68,10 @@ type GridColumn = {
     resize?: boolean;
 };
 type Filters = {
-    columnName: string;
+    columnName: {
+        label: string;
+        value: string;
+    };
     operators: {
         label: string;
         value: "input" | "date" | "select" | "date-range" | null;
@@ -92,13 +95,11 @@ type GridProps = {
     fonts?: boolean;
     autoConfig?: boolean | {};
     downloadable?: boolean;
-    fileNmae?: string;
+    fileName?: string;
     search: boolean;
     searchkey: string;
     searchValue: string;
-    autoResize?: boolean;
-    autoResizeMode?: boolean | "data" | "header" | undefined;
-    defaultMinWidth?: number;
+    loading: boolean;
     onExportPdf?: () => void;
     onExportExcel?: () => void;
     onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -114,7 +115,18 @@ type ActiveFilter = {
     endDate?: string | null;
 };
 
-declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, autoResize, autoResizeMode, defaultMinWidth, fileNmae, fonts, onFilterChange, ...rest }: GridProps): react.JSX.Element;
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;
+
+type Props = {
+    cell: {
+        id?: string;
+        text?: string;
+    };
+    sortKey?: string | null;
+    sortOrder?: SortOrder | null;
+    onSortChange?: (key: string, order: SortOrder) => void;
+};
+declare function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }: Props): react.JSX.Element;
 
 type Pagination$1 = {
     totalCount: number;
@@ -130,4 +142,4 @@ type Pagination$1 = {
 
 declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): 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 };
+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 };