gbs-add-block 1.2.6 → 1.2.7

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.2.6)
+# GBS Building Blocks 2.0 (v1.2.7)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://gramprokit.vercel.app)
 
-## What's New 🎉 (Ver 1.2.6)
+## What's New 🎉 (Ver 1.2.7)
 
 - UI Update (Canditate update for next major change 2.0.0)
 

package/index.cjs

@@ -50,6 +50,7 @@ const copyCommonFiles = async (destPath) => {
   const commonFiles = [
     { src: ["..", "utils.ts"], dest: "utils.ts" },
     { src: ["..", "globalStyle.ts"], dest: "globalStyle.ts" },
+    { src: ["..", "theme.ts"], dest: "theme.ts" },
     { src: ["..", "icon"], dest: "icon" },
   ];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/button/index.tsx

@@ -7,8 +7,8 @@
 
 import React, { type ButtonHTMLAttributes, type ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
-import { buttonStyles } from "../../globalStyle";
-import type { ComponentSize, ComponentVariant } from "../../theme";
+import { buttonStyles } from "../globalStyle";
+import type { ComponentSize, ComponentVariant } from "../theme";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: ReactNode;

package/source/components/card/index.tsx

@@ -1,6 +1,6 @@
 import React, { type HTMLAttributes, type ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
-import { cardStyles } from "../../globalStyle";
+import { cardStyles } from "../globalStyle";
 
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;

package/source/components/checkbox/index.tsx

@@ -16,7 +16,7 @@ export const Checkbox = ({
     <input
       type="checkbox"
       className={twMerge(
-        "h-5 w-5 cursor-pointer rounded border-slate-300 text-sky-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-55",
+        "h-5 w-5 cursor-pointer rounded border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 text-black dark:text-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-55",
         className
       )}
       {...props}

package/source/components/datagrid/context/GridContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext } from "react";
 import type { GridContextType, GridProps } from "../type";
+import { gridStyles } from "../../globalStyle";
 import {
   useDataSource,
   useColumns,
@@ -18,7 +19,6 @@ export const GridProvider: React.FC<{
   const {
     dataSource,
     columns = [],
-    pageSettings,
     enableSearch = false,
     lazy = false,
     enableExcelExport = false,
@@ -26,18 +26,11 @@ export const GridProvider: React.FC<{
     enablePdfExport = false,
     pdfName = "data",
     pdfOptions = {},
-    gridButtonClass = "px-1 py-2 text-xs rounded bg-zinc-200 dark:bg-zinc-700 cursor-pointer",
     selectAll = false,
     onSelectRow,
     isFetching,
-    tableHeaderStyle = "text-left px-2 py-4 bg-zinc-200 dark:bg-zinc-800",
-    gridContainerClass = "flex flex-col rounded-md overflow-hidden dark:text-white",
     gridColumnStyleSelectAll = "px-4 text-xs",
     gridColumnStyle = "p-2 text-xs",
-    rowChange = () => {},
-    pageStatus = () => {},
-    activeFilterArrayValue,
-    searchParamValue = () => {},
     showTotalPages = false,
     onSearch = () => {},
     onToolbarButtonClick = () => {},
@@ -45,6 +38,29 @@ export const GridProvider: React.FC<{
     initialSearchParam = "",
   } = props;
 
+  // Resolve pageSize with fallbacks
+  const resolvedPageSize = props.pageSize || props.pageSettings?.pageNumber || 10;
+  const resolvedPageSettings = {
+    pageNumber: resolvedPageSize,
+    totalCount: props.pageSettings?.totalCount,
+  };
+
+  // Resolve callback aliases
+  const resolvedRowChange = props.onRowClick || props.rowChange || (() => {});
+  const resolvedPageStatus = props.onPageChange || props.pageStatus || (() => {});
+  const resolvedActiveFilterArrayValue = props.onFilterChange || props.activeFilterArrayValue;
+  const resolvedSearchParamValue = props.onSearchChange || props.searchParamValue || (() => {});
+
+  // Resolve CSS classes using design tokens from theme presets
+  const gridContainerClass = props.gridContainerClass || gridStyles.container;
+  const gridButtonClass = props.gridButtonClass || gridStyles.button;
+  const tableHeaderStyle = props.tableHeaderStyle || gridStyles.tableHeader;
+  const gridToolbarClass = props.gridToolbarClass || gridStyles.toolbar;
+  const gridPaginationClass = props.gridPaginationClass || gridStyles.pagination;
+  const gridRowEvenClass = props.gridRowEvenClass || gridStyles.rowEven;
+  const gridRowOddClass = props.gridRowOddClass || gridStyles.rowOdd;
+  const gridRowSelectedClass = props.gridRowSelectedClass || gridStyles.rowSelected;
+
   // Data source management
   const {
     workingDataSource,
@@ -52,7 +68,7 @@ export const GridProvider: React.FC<{
     fallbackSourceData,
     totalPages,
     setTotalPages,
-  } = useDataSource(dataSource, pageSettings, lazy);
+  } = useDataSource(dataSource, resolvedPageSettings, lazy);
 
   // Column management
   const { workingColumns, setWorkingColumns } = useColumns(
@@ -75,8 +91,7 @@ export const GridProvider: React.FC<{
     totalPages,
     lazy,
     workingDataSource,
-    pageSettings,
-    pageStatus,
+    resolvedPageStatus,
   );
 
   // Search functionality
@@ -86,10 +101,10 @@ export const GridProvider: React.FC<{
     fallbackSourceData,
     dataSource,
     lazy,
-    pageSettings,
+    pageSettings: resolvedPageSettings,
     resetPage,
     setTotalPages,
-    searchParamValue,
+    searchParamValue: resolvedSearchParamValue,
     initialSearchParam,
   });
 
@@ -110,8 +125,8 @@ export const GridProvider: React.FC<{
     fallbackSourceData,
     resetPage,
     setTotalPages,
-    pageSettings,
-    activeFilterArrayValue,
+    pageSettings: resolvedPageSettings,
+    activeFilterArrayValue: resolvedActiveFilterArrayValue,
     lazy,
     initialFilters,
   });
@@ -160,7 +175,8 @@ export const GridProvider: React.FC<{
 
     // Grid settings
     columns,
-    pageSettings,
+    pageSettings: resolvedPageSettings,
+    pageSize: resolvedPageSize,
     enableSearch,
     enableExcelExport,
     enablePdfExport,
@@ -171,9 +187,14 @@ export const GridProvider: React.FC<{
     selectAll,
     tableHeaderStyle,
     gridContainerClass,
+    gridToolbarClass,
+    gridPaginationClass,
+    gridRowEvenClass,
+    gridRowOddClass,
+    gridRowSelectedClass,
     gridColumnStyleSelectAll,
     gridColumnStyle,
-    rowChange,
+    rowChange: resolvedRowChange,
     showTotalPages,
     onSearch,
     onToolbarButtonClick,

package/source/components/datagrid/createTemplate.tsx

@@ -26,7 +26,7 @@ export const createTemplate = (
             type={config.type || "text"}
             className={
               config.className ||
-              "p-1 text-xs outline-none w-full rounded focus:border-b-2 border-blue-600"
+              "p-1 text-xs outline-none w-full rounded focus:border-b-2 border-black dark:border-white dark:bg-zinc-900"
             }
             placeholder={config.placeholder || `Enter ${field}`}
             defaultValue={rowData[field]}
@@ -41,7 +41,7 @@ export const createTemplate = (
             key={`${field}-${rowData.id}`}
             className={
               config.className ||
-              "p-1 w-full text-xs rounded outline-none focus:border-b-2 border-blue-600 dark:bg-zinc-900"
+              "p-1 w-full text-xs rounded outline-none focus:border-b-2 border-black dark:border-white dark:bg-zinc-900"
             }
             defaultValue={rowData[field]}
             onChange={handleSelectChange}

package/source/components/datagrid/hooks/usePagination.ts

@@ -4,13 +4,11 @@ export const usePagination = (
   totalPages: number,
   lazy: boolean,
   dataSource?: any[],
-  pageSettings?: { pageNumber: number },
   pageStatus?: ({ currentPage }: { currentPage: number }) => void
 ) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [pageStart, setPageStart] = useState(0);
   const [pageEnd, setPageEnd] = useState(10);
-  const [prevDataLength, setPrevDataLength] = useState(0);
 
   // Update page range based on current page
   const updatePageRange = useCallback(
@@ -38,12 +36,6 @@ export const usePagination = (
     }
   }, [currentPage, pageStatus]);
 
-  // This will handle the case when dataSource changes
-  // and adjust the current page accordingly in managed workflow
-  useEffect(() => {
-    setPrevDataLength(dataSource?.length || 0);
-  }, [dataSource?.length]);
-
   // Defensive check: if current page is out of bounds due to totalPages shrinking, reset to 0
   useEffect(() => {
     if (totalPages > 0 && currentPage >= totalPages) {

package/source/components/datagrid/hooks/useSearch.ts

@@ -60,9 +60,9 @@ export const useSearch = ({
       if (!lazy) {
         const filteredData = workingDataSource.filter((item: any) =>
           Object.values(item).some((val: any) => {
-            const trimmedVal = val.toString().toLowerCase().trim();
-            const trimmedSearchParam = searchParam.toLowerCase().trim();
-            return trimmedVal.includes(trimmedSearchParam);
+            const trimmedVal = val?.toString()?.toLowerCase()?.trim();
+            const trimmedSearchParam = searchParam?.toLowerCase()?.trim();
+            return trimmedVal?.includes(trimmedSearchParam);
           })
         );
         setWorkingDataSource(filteredData);

package/source/components/datagrid/index.tsx

@@ -17,7 +17,8 @@ const DataGrid = memo(GridComponent, (prevProps, nextProps) => {
   return (
     prevProps.dataSource === nextProps.dataSource &&
     prevProps.columns === nextProps.columns &&
-    prevProps.pageSettings.pageNumber === nextProps.pageSettings.pageNumber &&
+    prevProps.pageSize === nextProps.pageSize &&
+    prevProps.pageSettings?.pageNumber === nextProps.pageSettings?.pageNumber &&
     prevProps.enableSearch === nextProps.enableSearch &&
     prevProps.enablePdfExport === nextProps.enablePdfExport &&
     prevProps.enableExcelExport === nextProps.enableExcelExport

package/source/components/datagrid/layout/GridBody.tsx

@@ -1,4 +1,4 @@
-import React, { act } from "react";
+import React from "react";
 import { useGridContext } from "../context/GridContext";
 import FilterPopup from "./FilterPopup";
 import Icon from "../../icon/Icon";
@@ -24,6 +24,9 @@ const GridBody = () => {
     handleSelectAll,
     handleSelect,
     isRowSelected,
+    gridRowEvenClass,
+    gridRowOddClass,
+    gridRowSelectedClass,
   } = useGridContext();
 
   const renderCell = (rowData: any, column: Column, rowIndex: number) => {
@@ -140,10 +143,10 @@ const GridBody = () => {
                 key={rowIndex}
                 className={
                   isRowSelected(rowData)
-                    ? "bg-blue-100 dark:bg-blue-900"
+                    ? gridRowSelectedClass
                     : rowIndex % 2 === 0
-                    ? "bg-gray-50 dark:bg-zinc-800 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-700"
-                    : "bg-white dark:bg-zinc-900 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-700"
+                    ? gridRowEvenClass
+                    : gridRowOddClass
                 }
                 onClick={() => rowChange(rowData)}
               >

package/source/components/datagrid/layout/GridPagination.tsx

@@ -23,10 +23,11 @@ const Pagination = () => {
     lazy,
     pageSettings,
     showTotalPages,
+    gridPaginationClass,
   } = useGridContext();
 
   return (
-    <div className="w-full flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-zinc-100 dark:bg-zinc-900 gap-2 md:gap-4">
+    <div className={gridPaginationClass}>
       <div className="flex text-xs">
         Showing {currentPage + 1} of {totalPages} pages
         {showTotalPages && (
@@ -76,7 +77,7 @@ const Pagination = () => {
                 className={`hidden md:block px-2 py-1 text-sm rounded-md transition-colors duration-200 ease-in-out ${
                   currentPage === pageStart + i
                     ? "bg-black text-white dark:bg-white dark:text-black"
-                    : "bg-gray-200 dark:bg-zinc-700 hover:bg-gray-300 dark:hover:bg-zinc-600"
+                    : "bg-gray-200 dark:bg-zinc-700 text-black dark:text-white hover:bg-gray-300 dark:hover:bg-zinc-600"
                 }`}
               >
                 {pageStart + i + 1}

package/source/components/datagrid/layout/GridToolbar.tsx

@@ -24,6 +24,7 @@ const GridToolbar = () => {
     gridButtonClass,
     onToolbarButtonClick,
     lazy,
+    gridToolbarClass,
   } = useGridContext();
 
   if (!enableSearch && !enableExcelExport && !enablePdfExport) {
@@ -31,7 +32,7 @@ const GridToolbar = () => {
   }
 
   return (
-    <div className="flex bg-zinc-100 dark:bg-zinc-900 justify-end space-x-2 px-2 py-4">
+    <div className={gridToolbarClass}>
       {/* Search input */}
       {enableSearch && (
         <div className="flex">

package/source/components/datagrid/type.ts

@@ -14,7 +14,8 @@ export interface ActiveFilterArrayValue {
 export type GridProps = {
   dataSource: any[] | string;
   columns?: any[];
-  pageSettings: PageSettingsProps;
+  pageSettings?: PageSettingsProps;
+  pageSize?: number;
   enableSearch?: boolean;
   lazy?: boolean;
   enableExcelExport?: boolean;
@@ -24,6 +25,11 @@ export type GridProps = {
   gridContainerClass?: string;
   gridButtonClass?: string;
   gridHeaderClass?: string;
+  gridToolbarClass?: string;
+  gridPaginationClass?: string;
+  gridRowEvenClass?: string;
+  gridRowOddClass?: string;
+  gridRowSelectedClass?: string;
   gridGlobalSearchButtonClass?: string;
   gridPaginationButtonClass?: string;
   pdfOptions?: any;
@@ -34,10 +40,14 @@ export type GridProps = {
   tableHeaderStyle?: string;
   gridColumnStyleSelectAll?: string;
   gridColumnStyle?: string;
-  rowChange?: any;
+  rowChange?: (rowData: any) => void;
+  onRowClick?: (rowData: any) => void;
   pageStatus?: ({ currentPage }: { currentPage: number }) => void;
+  onPageChange?: ({ currentPage }: { currentPage: number }) => void;
   activeFilterArrayValue?: ActiveFilterArrayValue[] | any;
+  onFilterChange?: (filters: ActiveFilterArrayValue[]) => void;
   searchParamValue?: (value: string) => void;
+  onSearchChange?: (value: string) => void;
   showTotalPages?: boolean;
   onSearch?: (value: string) => void;
   onToolbarButtonClick?: (action: string) => void;
@@ -163,6 +173,7 @@ export interface GridContextType {
   // Grid settings
   columns: any[];
   pageSettings: any;
+  pageSize: number;
   enableSearch: boolean;
   enableExcelExport: boolean;
   enablePdfExport: boolean;
@@ -173,6 +184,11 @@ export interface GridContextType {
   selectAll: boolean;
   tableHeaderStyle: string;
   gridContainerClass: string;
+  gridToolbarClass: string;
+  gridPaginationClass: string;
+  gridRowEvenClass: string;
+  gridRowOddClass: string;
+  gridRowSelectedClass: string;
   gridColumnStyleSelectAll: string;
   gridColumnStyle: string;
   rowChange: (rowData: any) => void;

package/source/components/datepicker/index.tsx

@@ -17,7 +17,7 @@ import {
 import Icon from "../icon/Icon";
 import { calender, down, leftArrow, rightArrow, x } from "../icon/iconPaths";
 import type { DatePickerProps } from "./types";
-import { iconClass, popUp, primary } from "../../globalStyle";
+import { iconClass, popUp, primary } from "../globalStyle";
 
 export const DatePicker = ({
   selectedDateValue,
@@ -325,14 +325,14 @@ export const DatePicker = ({
                     key={index}
                     onClick={() => !isDisabled && selectDate(day)}
                     disabled={isDisabled}
-                    className={`text-center text-xs p-1 w-8 h-8 cursor-pointer rounded-md hover:bg-gray-200 transition duration-150 ease-in-out ${
+                    className={`text-center text-xs p-1 w-8 h-8 cursor-pointer rounded-md transition duration-150 ease-in-out ${
                       isSelected
-                        ? "bg-black text-white hover:bg-gray-800 dark:bg-zinc-500"
-                        : ""
+                        ? "bg-black text-white hover:bg-zinc-900 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
+                        : "hover:bg-gray-200 dark:hover:bg-zinc-800"
                     } ${
                       isDisabled
-                        ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                        : "hover:bg-gray-200"
+                        ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-zinc-900 dark:text-zinc-600"
+                        : ""
                     }`}
                   >
                     {day.getDate()}
@@ -345,7 +345,7 @@ export const DatePicker = ({
             <button
               type="button"
               onClick={goToToday}
-              className="text-black hover:text-blue-600 transition duration-150 ease-in-out dark:text-gray-500"
+              className="text-black hover:text-zinc-650 transition duration-150 ease-in-out dark:text-zinc-400 dark:hover:text-zinc-200 font-semibold"
             >
               Today
             </button>

package/source/components/input/index.tsx

@@ -10,7 +10,7 @@ import { twMerge } from "tailwind-merge";
 import Icon from "../icon/Icon";
 import { eye, search } from "../icon/iconPaths";
 import type { InputProps } from "./types";
-import { iconClass, inputStyles, primary } from "../../globalStyle";
+import { iconClass, inputStyles, primary } from "../globalStyle";
 
 export const Input = ({
   OTPField = false,

package/source/components/multiselect/PortalDropDown.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { popUp } from "../../globalStyle";
+import { popUp } from "../globalStyle";
 
 export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });

package/source/components/multiselect/index.tsx

@@ -21,8 +21,8 @@ import {
 } from "@grampro/headless-helpers";
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
-import { iconClass, primary } from "../../globalStyle";
-import { selectStyle } from "../../globalStyle";
+import { iconClass, primary } from "../globalStyle";
+import { selectStyle } from "../globalStyle";
 import { PortalDropdown } from "./PortalDropDown";
 
 const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
@@ -153,7 +153,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
                 <Icon
                   elements={check}
                   svgClass={`h-4 w-4 fill-none ${
-                    selected.includes(value) ? "stroke-gray-500" : ""
+                    selected.includes(value) ? "stroke-black dark:stroke-white" : ""
                   }`}
                 />
                 {label.length > 20 ? `${label.substring(0, 20)}...` : label}
@@ -179,7 +179,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
             return (
               <span
                 key={index}
-                className="bg-slate-800 text-white px-2 py-1 rounded flex items-center gap-1 text-xs whitespace-nowrap"
+                className="bg-black text-white dark:bg-zinc-900 px-2 py-1 rounded flex items-center gap-1 text-xs whitespace-nowrap border border-transparent dark:border-zinc-800"
               >
                 {label.length > 15 ? `${label.substring(0, 15)}...` : label}
                 <span
@@ -187,7 +187,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
                     e.stopPropagation();
                     handleSelect(value);
                   }}
-                  className="cursor-pointer hover:bg-slate-700 rounded p-0.5"
+                  className="cursor-pointer hover:bg-zinc-800 dark:hover:bg-zinc-700 rounded p-0.5"
                 >
                   <Icon elements={x} svgClass="h-3 w-3 stroke-white" />
                 </span>
@@ -195,7 +195,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
             );
           })}
         {truncate && selected.length > 3 && (
-          <span className="bg-slate-800 text-white px-2 py-1 rounded text-xs whitespace-nowrap">
+          <span className="bg-black text-white dark:bg-zinc-900 px-2 py-1 rounded text-xs whitespace-nowrap border border-transparent dark:border-zinc-800">
             +{selected.length - 3} more
           </span>
         )}

package/source/components/navbar/AuthSection.tsx

@@ -27,7 +27,7 @@ const AuthSection: React.FC<AuthSectionProps> = ({
               alt={userProfile.name}
             />
           ) : (
-            <div className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
+            <div className="h-8 w-8 rounded-full bg-black dark:bg-white text-white dark:text-black flex items-center justify-center font-bold">
               {userProfile.name.charAt(0).toUpperCase()}
             </div>
           )}
@@ -75,11 +75,11 @@ const AuthSection: React.FC<AuthSectionProps> = ({
       <button
         onClick={onLogin}
         className={`
-          px-4 py-2 text-sm font-medium rounded-md
+          px-4 py-2 text-sm font-medium rounded-md border border-zinc-300 dark:border-zinc-700
           ${
             variant === "dark"
-              ? "text-white hover:bg-gray-700"
-              : "text-blue-600 hover:bg-blue-50"
+              ? "text-white hover:bg-zinc-850"
+              : "text-black hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-900"
           }
         `}
       >
@@ -87,7 +87,7 @@ const AuthSection: React.FC<AuthSectionProps> = ({
       </button>
       <button
         onClick={onSignup}
-        className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
+        className="px-4 py-2 text-sm font-medium text-white bg-black dark:bg-white dark:text-black rounded-md hover:bg-zinc-900 dark:hover:bg-zinc-100 transition-colors"
       >
         Sign up
       </button>

package/source/components/navbar/NavItemComponent.tsx

@@ -38,7 +38,7 @@ const NavItemComponent: React.FC<NavItemComponentProps> = ({
                 onClick={(e) => toggleSubmenu(item.id, e)}
                 className={`
                   flex items-center justify-between px-3 py-2 rounded-md
-                  ${item.highlight ? "font-medium text-blue-600" : ""}
+                  ${item.highlight ? "font-bold text-black dark:text-white" : ""}
                   ${
                     isMobile
                       ? "w-full text-left"
@@ -92,7 +92,7 @@ const NavItemComponent: React.FC<NavItemComponentProps> = ({
               href={item.href}
               className={`
                 flex items-center px-3 py-2 rounded-md
-                ${item.highlight ? "font-medium text-blue-600" : ""}
+                ${item.highlight ? "font-bold text-black dark:text-white" : ""}
                 ${
                   isMobile
                     ? "block w-full"

package/source/components/select/PortalDropDown.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { popUp } from "../../globalStyle";
+import { popUp } from "../globalStyle";
 
 export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });

package/source/components/select/index.tsx

@@ -16,8 +16,8 @@ import React, {
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
 import type { ItemsProps, SelectHandle, SelectProps } from "./types";
-import { selectStyle } from "../../globalStyle";
-import { iconClass, primary } from "../../globalStyle";
+import { selectStyle } from "../globalStyle";
+import { iconClass, primary } from "../globalStyle";
 import {
   useSelectState,
   useSelectData,
@@ -40,7 +40,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
     error = undefined,
     onFiltering,
     disabled = false,
-    className = "",
+    className = "",
   } = props;
 
   applyScrollbarStyles();
@@ -164,7 +164,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
                 }
               }}
               className={`${selectStyle["filter-button"]} ${
-                focusedIndex === index ? "bg-sky-50 text-sky-700 dark:bg-sky-950" : ""
+                focusedIndex === index ? "bg-zinc-100 text-black dark:bg-zinc-900 dark:text-white" : ""
               }`}
               onClick={() => handleSelect({ value, label })}
               onMouseEnter={() => setFocusedIndex(index)}
@@ -172,7 +172,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
               <Icon
                 elements={check}
                 svgClass={`h-4 w-4 fill-none ${
-                  selectedItem === value ? "stroke-sky-600" : ""
+                  selectedItem === value ? "stroke-black dark:stroke-white" : ""
                 }`}
               />
               {label.length > 20 ? `${label.substring(0, 20)}...` : label}

package/source/components/spinner/index.tsx

@@ -11,8 +11,8 @@ import type { SpinnerProps } from "./types";
 
 export const Spinner: React.FC<SpinnerProps> = ({
   size = "h-10 w-10",
-  color = "border-blue-600",
-  fullCircleColor = "border-t-red-400",
+  color = "border-blue-500",
+  fullCircleColor = "border-t-blue-400",
   dotColor = "bg-blue-500",
   duration = "duration-500",
   type = "circle",

package/source/components/tabs/index.tsx

@@ -36,8 +36,8 @@ export function Tabs({
         className={twMerge(
           "flex gap-1",
           isPills
-            ? "rounded-lg bg-slate-100 p-1 dark:bg-slate-900"
-            : "border-b border-slate-200 dark:border-slate-700"
+            ? "rounded-lg bg-zinc-100 p-1 dark:bg-zinc-900"
+            : "border-b border-zinc-200 dark:border-zinc-800"
         )}
       >
         {tabs.map((tab) => {
@@ -49,14 +49,14 @@ export function Tabs({
               type="button"
               disabled={tab.disabled}
               className={twMerge(
-                "min-h-9 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 disabled:cursor-not-allowed disabled:text-slate-300",
+                "min-h-9 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white disabled:cursor-not-allowed disabled:text-zinc-400",
                 isPills ? "rounded-md" : "-mb-px border-b-2 border-transparent",
                 isActive && isPills
-                  ? "bg-white text-slate-950 shadow-sm dark:bg-slate-800 dark:text-white"
+                  ? "bg-white text-zinc-950 shadow-sm dark:bg-zinc-800 dark:text-white"
                   : "",
                 isActive && !isPills
-                  ? "border-sky-600 text-sky-700"
-                  : "text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-100"
+                  ? "border-black text-black dark:border-white dark:text-white"
+                  : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-100"
               )}
               onClick={() => !tab.disabled && handleTabChange(tab.id)}
             >

package/source/components/textarea/index.tsx

@@ -39,21 +39,21 @@ export const TextArea = ({
   const variantClasses = {
     default: {
       textarea:
-        "border border-slate-300 bg-white text-slate-900 shadow-sm hover:border-slate-400 focus:border-sky-500 focus:ring-sky-500/20 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100",
-      label: "mb-2 block text-sm font-medium text-slate-700 dark:text-slate-200",
+        "border border-zinc-300 bg-white text-zinc-900 shadow-sm hover:border-zinc-400 focus:border-black focus:ring-black/20 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100 dark:focus:border-white dark:focus:ring-white/20",
+      label: "mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300",
     },
     minimal: {
       textarea:
-        "border-0 border-b-2 border-slate-200 bg-transparent px-0 shadow-none focus:border-sky-500 dark:border-slate-700 dark:text-slate-100",
+        "border-0 border-b-2 border-zinc-200 bg-transparent px-0 shadow-none focus:border-black dark:border-zinc-800 dark:text-zinc-100 dark:focus:border-white",
       label: twMerge(
         "absolute left-0 pointer-events-none transition-all duration-200",
-        isFloating ? "-top-5 text-xs text-sky-600" : "top-3 text-sm text-slate-400"
+        isFloating ? "-top-5 text-xs text-black dark:text-white font-semibold" : "top-3 text-sm text-zinc-400"
       ),
     },
     glass: {
       textarea:
-        "border border-white/40 bg-white/70 text-slate-900 shadow-sm backdrop-blur hover:border-white/70 focus:border-sky-500 focus:ring-sky-500/20 dark:border-white/10 dark:bg-slate-950/70 dark:text-slate-100",
-      label: "mb-2 block text-sm font-medium text-slate-700 dark:text-slate-200",
+        "border border-white/40 bg-white/70 text-zinc-900 shadow-sm backdrop-blur hover:border-white/70 focus:border-black focus:ring-black/20 dark:border-white/10 dark:bg-zinc-950/70 dark:text-zinc-100 dark:focus:border-white dark:focus:ring-white/20",
+      label: "mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300",
     },
   }[variant];
 
@@ -79,7 +79,7 @@ export const TextArea = ({
           required={required}
           disabled={disabled}
           className={twMerge(
-            "w-full resize-none rounded-lg px-3 py-3 text-sm outline-none transition-all duration-200 focus:ring-2 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-60",
+            "w-full resize-none rounded-lg px-3 py-3 text-sm outline-none transition-all duration-200 focus:ring-2 disabled:cursor-not-allowed disabled:bg-zinc-50 dark:disabled:bg-zinc-900 disabled:opacity-60",
             variantClasses.textarea,
             error ? "border-rose-500 focus:border-rose-500 focus:ring-rose-500/20" : ""
           )}
@@ -102,14 +102,14 @@ export const TextArea = ({
           {error ? (
             <p className="text-xs font-medium text-rose-600">{error}</p>
           ) : helperText ? (
-            <p className="text-xs text-slate-500">{helperText}</p>
+            <p className="text-xs text-zinc-500">{helperText}</p>
           ) : null}
         </div>
 
         {maxLength && (
           <span
             className={twMerge(
-              "shrink-0 text-xs text-slate-400",
+              "shrink-0 text-xs text-zinc-400",
               charCount > maxLength * 0.9 ? "text-amber-600" : "",
               charCount === maxLength ? "text-rose-600" : ""
             )}

package/source/components/toast/ToastComponent.tsx

@@ -7,35 +7,28 @@ interface ToastProps {
   toast: Toast;
 }
 
-const bgColors = {
-  default: "bg-white hover:bg-gray-50",
-  success: "bg-green-50 hover:bg-green-100",
-  error: "bg-red-50 hover:bg-red-100",
-  warning: "bg-yellow-50 hover:bg-yellow-100",
-} as const;
-
-const toastAnimation = {
-  default: "",
-  error: "animate-shake animate-once animate-duration-200",
-  success: "animate-jump-in animate-once animate-duration-200",
-  warning: "animate-jump-in animate-once animate-duration-200",
+const leftBorderColors = {
+  default: "border-l-zinc-550 dark:border-l-zinc-600",
+  success: "border-l-emerald-500",
+  error: "border-l-rose-500",
+  warning: "border-l-amber-500",
 } as const;
 
 const CloseButton = ({ onDismiss }: { onDismiss: () => void }) => (
   <button
     onClick={onDismiss}
-    className="shrink-0 rounded-lg p-1 transition-colors hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-black/10"
+    className="shrink-0 rounded-md p-1 transition-colors text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-900 focus:outline-none"
   >
     <svg
-      className="h-4 w-4"
+      className="h-3.5 w-3.5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2.5}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
         d="M6 18L18 6M6 6l12 12"
       />
     </svg>
@@ -58,7 +51,7 @@ export function ToastComponent({ toast }: ToastProps) {
 
   if (toast.content) {
     return (
-      <div className="relative">
+      <div className="relative pointer-events-auto rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 shadow-lg">
         {toast.content}
         <div className="absolute top-2 right-2">
           <CloseButton onDismiss={handleDismiss} />
@@ -67,32 +60,40 @@ export function ToastComponent({ toast }: ToastProps) {
     );
   }
 
+  const borderClass = leftBorderColors[toast.type || "default"];
+
   return (
     <div
       className={`
-        ${bgColors[toast.type || "default"]}
-        ${toastAnimation[toast.type || "default"]}
         transform transition-all duration-300 ease-in-out
-        pointer-events-auto relative flex w-full items-center justify-between
-        overflow-hidden rounded-full border px-4 py-3 shadow-lg
+        pointer-events-auto relative flex w-full items-start justify-between
+        overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-4 py-3.5 shadow-lg
+        border-l-4 ${borderClass}
+        animate-fade-in
       `}
       role="alert"
     >
       <div className="flex items-start gap-3 w-full">
-        <ToastIcon type={toast.type} />
-        <div className="flex-1">
+        <div className="mt-0.5 shrink-0">
+          <ToastIcon type={toast.type} />
+        </div>
+        <div className="flex-1 min-w-0">
           {toast.title && (
-            <div className="font-medium text-sm text-gray-900">
+            <div className="font-bold text-sm text-zinc-900 dark:text-white tracking-tight leading-none">
               {toast.title}
             </div>
           )}
           {toast.description && (
-            <div className="text-sm text-gray-500 mt-1">
+            <div className="text-xs font-medium text-zinc-500 dark:text-zinc-400 mt-1">
               {toast.description}
             </div>
           )}
         </div>
-        {toast.action}
+        {toast.action && (
+          <div className="shrink-0 flex items-center gap-2">
+            {toast.action}
+          </div>
+        )}
         <CloseButton onDismiss={handleDismiss} />
       </div>
     </div>

package/source/components/toast/ToastIcon.tsx

@@ -4,20 +4,20 @@ const ToastIcon = ({ type }: { type: Toast["type"] }) => {
   if (!type) return null;
 
   const iconColors = {
-    default: "text-gray-800",
-    success: "text-green-600",
-    error: "text-red-600",
-    warning: "text-yellow-600",
+    default: "text-zinc-500",
+    success: "text-emerald-500",
+    error: "text-rose-500",
+    warning: "text-amber-500",
   } as const;
 
   return (
-    <div className={`h-5 w-5 ${iconColors[type]}`}>
+    <div className={`h-4.5 w-4.5 ${iconColors[type]}`}>
       {type === "success" && (
         <svg
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          strokeWidth="2"
+          strokeWidth="2.5"
         >
           <path
             strokeLinecap="round"
@@ -31,7 +31,7 @@ const ToastIcon = ({ type }: { type: Toast["type"] }) => {
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          strokeWidth="2"
+          strokeWidth="2.5"
         >
           <path
             strokeLinecap="round"
@@ -45,7 +45,7 @@ const ToastIcon = ({ type }: { type: Toast["type"] }) => {
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          strokeWidth="2"
+          strokeWidth="2.5"
         >
           <path
             strokeLinecap="round"

package/source/components/uploader/ProgressAnimation.tsx

@@ -30,7 +30,7 @@ const AestheticProcessingAnimationWithStyles = ({
   progressPercentage,
 }: AestheticProcessingAnimationProps) => (
   <>
-    <style jsx global>{`
+    <style dangerouslySetInnerHTML={{ __html: `
       @keyframes processing {
         0% {
           transform: translateX(-100%);
@@ -42,7 +42,7 @@ const AestheticProcessingAnimationWithStyles = ({
       .animate-processing {
         animation: processing 2s ease-in-out infinite;
       }
-    `}</style>
+    ` }} />
     <AestheticProcessingAnimation progressPercentage={progressPercentage} />
   </>
 );

package/source/components/uploader/UploadedFilePreview.tsx

@@ -105,7 +105,7 @@ export default function UploadedFilePreview({
                 <Icon
                   dimensions={{ width: "18", height: "18" }}
                   elements={cloudDownload}
-                  svgClass={"stroke-blue-800 fill-none dark:stroke-white"}
+                  svgClass={"stroke-zinc-700 dark:stroke-zinc-400 fill-none"}
                 />
               </button>
               {isRemovable && (

package/source/components/uploader/index.tsx

@@ -223,7 +223,7 @@ export const FileUploader = ({
         ref={dropZoneRef}
         className={`flex flex-col items-center border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
           isDragging
-            ? "border-blue-500 bg-blue-50"
+            ? "border-black bg-zinc-50 dark:border-white dark:bg-zinc-900"
             : "border-gray-300 hover:border-gray-400"
         }`}
         onClick={() => fileInputRef.current.click()}

package/source/components/uploader/uploaderIcon.tsx

@@ -27,7 +27,7 @@ export const GetFileIcon = ({ file, showImagePreview, previewUrls }: any) => {
       <Icon
         dimensions={{ width: "26", height: "26" }}
         elements={fileimage}
-        svgClass={"stroke-blue-500 fill-none dark:stroke-white"}
+        svgClass={"stroke-zinc-500 fill-none dark:stroke-white"}
       />
     );
   if (file.type === "application/pdf" || file.type.includes("pdf"))

package/source/globalStyle.ts

@@ -8,10 +8,8 @@ export const primary = {
 };
 
 export const popUp = {
-  "pop-up-style":
-    `${preset.surface.overlay} w-full absolute overflow-y-auto rounded-lg mt-1 scrollbar z-[90] h-44 text-sm text-slate-700 dark:text-slate-100 animate-fade-down animate-once animate-duration-200`,
-  "pop-up-style-calender":
-    `${preset.surface.overlay} w-full absolute overflow-y-auto rounded-lg mt-1 scrollbar z-[90] h-[370px] text-slate-700 dark:text-slate-100 animate-fade-down animate-once animate-duration-200`,
+  "pop-up-style": `${preset.surface.overlay} w-full absolute overflow-y-auto rounded-lg mt-1 scrollbar z-[90] h-44 text-sm text-slate-700 dark:text-slate-100 animate-fade-down animate-once animate-duration-200`,
+  "pop-up-style-calender": `${preset.surface.overlay} w-full absolute overflow-y-auto rounded-lg mt-1 scrollbar z-[90] h-[370px] text-slate-700 dark:text-slate-100 animate-fade-down animate-once animate-duration-200`,
 };
 
 export const iconClass = {
@@ -28,14 +26,13 @@ export const inputStyles = {
 };
 
 export const selectStyle = {
-  "select-button":
-    `${preset.control} ${preset.radius} ${preset.focusRing} flex min-h-10 w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm font-medium shadow-sm`,
+  "select-button": `${preset.control} ${preset.radius} ${preset.focusRing} flex min-h-10 w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm font-medium shadow-sm`,
   "filter-button":
-    "mt-1 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-slate-700 transition-colors hover:bg-sky-50 hover:text-sky-700 dark:text-slate-100 dark:hover:bg-sky-950",
+    "mt-1 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-zinc-700 transition-colors hover:bg-zinc-100 hover:text-black dark:text-zinc-300 dark:hover:bg-zinc-900 dark:hover:text-white",
   "input-parent":
-    "sticky top-0 z-50 flex w-full items-center gap-1 border-b border-slate-200 bg-white px-1 py-1 text-sm dark:border-slate-700 dark:bg-slate-950",
+    "sticky top-0 z-50 flex w-full items-center gap-1 border-b border-zinc-200 bg-white px-1 py-1 text-sm dark:border-zinc-800 dark:bg-zinc-950",
   "selectedDisplay-Button":
-    "absolute right-8 top-1/2 z-20 flex -translate-y-1/2 items-center rounded-md p-1 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800",
+    "absolute right-8 top-1/2 z-20 flex -translate-y-1/2 items-center rounded-md p-1 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800",
 };
 
 export const buttonStyles = {
@@ -46,16 +43,32 @@ export const buttonStyles = {
     lg: "h-11 px-5 text-base",
   },
   variants: {
-    primary: "bg-slate-950 text-white hover:bg-slate-800 dark:bg-white dark:text-slate-950 dark:hover:bg-slate-200",
-    secondary: "bg-sky-600 text-white hover:bg-sky-700",
-    outline: "border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:hover:bg-slate-900",
-    ghost: "text-slate-700 hover:bg-slate-100 dark:text-slate-100 dark:hover:bg-slate-800",
+    primary:
+      "bg-black text-white hover:bg-zinc-900 dark:bg-white dark:text-black dark:hover:bg-zinc-100",
+    secondary:
+      "bg-zinc-900 text-white hover:bg-zinc-850 dark:bg-zinc-100 dark:text-black dark:hover:bg-zinc-200",
+    outline:
+      "border border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-50 dark:border-zinc-850 dark:bg-black dark:text-zinc-100 dark:hover:bg-zinc-900",
+    ghost:
+      "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900",
     danger: "bg-rose-600 text-white hover:bg-rose-700",
   },
 };
 
 export const cardStyles = {
   base: `${preset.surface.raised} rounded-lg p-4`,
-  interactive:
-    "transition-shadow hover:shadow-md hover:shadow-slate-900/10",
-};
+  interactive: "transition-shadow hover:shadow-md hover:shadow-zinc-950/10",
+};
+
+export const gridStyles = {
+  container: `${preset.surface.raised} flex flex-col rounded-md overflow-hidden dark:text-white`,
+  toolbar: `flex bg-white dark:bg-black justify-end space-x-2 px-4 py-3 border-b border-zinc-200 dark:border-zinc-900`,
+  pagination: `w-full flex flex-wrap justify-between items-center text-xs px-4 py-3 bg-white dark:bg-black gap-2 md:gap-4 border-t border-zinc-200 dark:border-zinc-900`,
+  tableHeader: `bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 font-bold border-b border-zinc-200 dark:border-zinc-900 px-4 py-3 text-left text-xs uppercase tracking-wider`,
+  button: `border border-zinc-300 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded px-3 py-1.5 text-xs font-semibold cursor-pointer transition`,
+  rowEven:
+    "bg-white dark:bg-black hover:bg-zinc-50/50 dark:hover:bg-zinc-900/60 transition-colors text-black dark:text-white",
+  rowOdd:
+    "bg-zinc-50/20 dark:bg-zinc-950/20 hover:bg-zinc-50/50 dark:hover:bg-zinc-900/60 transition-colors",
+  rowSelected: "bg-zinc-100 dark:bg-zinc-900 font-semibold",
+};

package/source/theme.ts

@@ -16,23 +16,23 @@ export const componentPresets = {
     id: "gbs-basic",
     radius: "rounded-lg",
     focusRing:
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2",
     disabled: "disabled:cursor-not-allowed disabled:opacity-55",
     text: {
-      label: "text-sm font-medium text-slate-700",
-      helper: "text-xs text-slate-500",
+      label: "text-sm font-medium text-zinc-700 dark:text-zinc-300",
+      helper: "text-xs text-zinc-500",
       error: "text-xs font-medium text-rose-600",
     },
     surface: {
       raised:
-        "border border-slate-200 bg-white shadow-sm shadow-slate-900/5 dark:border-slate-700 dark:bg-slate-950",
+        "border border-zinc-200 bg-white shadow-sm shadow-zinc-950/5 dark:border-zinc-900 dark:bg-black",
       subtle:
-        "border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-900",
+        "border border-zinc-200 bg-zinc-50 dark:border-zinc-900 dark:bg-zinc-950",
       overlay:
-        "border border-slate-200 bg-white shadow-xl shadow-slate-900/10 dark:border-slate-700 dark:bg-slate-950",
+        "border border-zinc-200 bg-white shadow-xl shadow-zinc-950/10 dark:border-zinc-900 dark:bg-zinc-950",
     },
     control:
-      "border border-slate-300 bg-white text-slate-900 transition-colors placeholder:text-slate-400 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100",
+      "border border-zinc-300 bg-white text-zinc-900 transition-colors placeholder:text-zinc-400 hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
   },
 } as const;