@a2v2ai/uikit 0.0.41 → 1.1.0

package/DataTable/DataTable.tsx

@@ -16,6 +16,14 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "../Pagination/Pagination"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../Select/Select"
+import { Typography } from "../Typography/Typography"
 import { Skeleton } from "../Skeleton/Skeleton"
 
 interface DataTableColumn<T> {
@@ -33,6 +41,8 @@ interface DataTablePagination {
   pageSize: number
   total: number
   onChange: (page: number) => void
+  pageSizeOptions?: number[]
+  onPageSizeChange?: (size: number) => void
 }
 
 interface DataTableScroll {
@@ -48,6 +58,8 @@ interface DataTableProps<T extends object> {
   scroll?: DataTableScroll
   loading?: boolean
   loadingRows?: number
+  onRowClick?: (record: T, index: number) => void
+  rowsPerPageLabel?: string
 }
 
 const getPageNumbers = (current: number, totalPages: number): (number | "ellipsis")[] => {
@@ -86,6 +98,8 @@ const DataTable = <T extends object>({
   scroll,
   loading,
   loadingRows = 5,
+  onRowClick,
+  rowsPerPageLabel = "Rows per page",
 }: DataTableProps<T>) => {
   const getRowKey = (record: T): string => {
     if (typeof rowKey === "function") {
@@ -136,7 +150,13 @@ const DataTable = <T extends object>({
               </TableRow>
             ))
           : dataSource.map((record, index) => (
-              <TableRow key={getRowKey(record)}>
+              <TableRow
+                key={getRowKey(record)}
+                onClick={
+                  onRowClick ? () => onRowClick(record, index) : undefined
+                }
+                className={onRowClick ? "cursor-pointer" : undefined}
+              >
                 {columns.map((column) => (
                   <TableCell key={column.key}>
                     {getCellValue(record, column, index)}
@@ -161,42 +181,83 @@ const DataTable = <T extends object>({
         tableContent
       )}
 
-      {pagination && totalPages > 1 && (
-        <div className="mt-4">
-          <Pagination>
-            <PaginationContent>
-              <PaginationItem>
-                <PaginationPrevious
-                  disabled={pagination.current === 1}
-                  onClick={() => pagination.onChange(pagination.current - 1)}
-                />
-              </PaginationItem>
-
-              {pageNumbers.map((page, index) => (
-                <PaginationItem key={index}>
-                  {page === "ellipsis" ? (
-                    <PaginationEllipsis />
-                  ) : (
-                    <PaginationLink
-                      isActive={page === pagination.current}
-                      onClick={() => pagination.onChange(page)}
-                    >
-                      {page}
-                    </PaginationLink>
-                  )}
-                </PaginationItem>
-              ))}
-
-              <PaginationItem>
-                <PaginationNext
-                  disabled={pagination.current === totalPages}
-                  onClick={() => pagination.onChange(pagination.current + 1)}
-                />
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-        </div>
-      )}
+      {pagination &&
+        ((pagination.pageSizeOptions && pagination.pageSizeOptions.length > 0) ||
+          totalPages > 1) && (
+          <div className="mt-4 flex items-center justify-between gap-4">
+            {pagination.pageSizeOptions &&
+            pagination.pageSizeOptions.length > 0 ? (
+              <div className="flex items-center gap-2">
+                <Typography
+                  variant="body3"
+                  color="main-700"
+                  className="whitespace-nowrap"
+                >
+                  {rowsPerPageLabel}
+                </Typography>
+                {/* Fixed-width wrapper: SelectTrigger has its own w-full wrapper. */}
+                <div className="w-20">
+                  <Select
+                    value={String(pagination.pageSize)}
+                    onValueChange={(value) =>
+                      pagination.onPageSizeChange?.(Number(value))
+                    }
+                  >
+                    <SelectTrigger size="small">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {pagination.pageSizeOptions.map((option) => (
+                        <SelectItem key={option} value={String(option)}>
+                          {option}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            ) : (
+              <span />
+            )}
+
+            {totalPages > 1 && (
+              <Pagination className="mx-0 w-auto justify-end">
+                <PaginationContent>
+                  <PaginationItem>
+                    <PaginationPrevious
+                      disabled={pagination.current === 1}
+                      onClick={() => pagination.onChange(pagination.current - 1)}
+                    />
+                  </PaginationItem>
+
+                  {pageNumbers.map((page, index) => (
+                    <PaginationItem key={index}>
+                      {page === "ellipsis" ? (
+                        <PaginationEllipsis />
+                      ) : (
+                        <PaginationLink
+                          isActive={page === pagination.current}
+                          onClick={() => pagination.onChange(page)}
+                        >
+                          {page}
+                        </PaginationLink>
+                      )}
+                    </PaginationItem>
+                  ))}
+
+                  <PaginationItem>
+                    <PaginationNext
+                      disabled={pagination.current === totalPages}
+                      onClick={() =>
+                        pagination.onChange(pagination.current + 1)
+                      }
+                    />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+            )}
+          </div>
+        )}
     </div>
   )
 }

package/index.css

@@ -85,6 +85,75 @@
   --color-accent-900: #1E3A8A;
   --color-accent-950: #172554;
 
+  /* Categorical palette — for charts, CRM range bands, and other multi-series
+     UI where the semantic families (success/warning/error/accent) aren't enough.
+     Values mirror the canonical Tailwind ramps so existing usages are unchanged. */
+
+  /* Orange */
+  --color-orange-50: #FFF7ED;
+  --color-orange-100: #FFEDD5;
+  --color-orange-200: #FED7AA;
+  --color-orange-300: #FDBA74;
+  --color-orange-400: #FB923C;
+  --color-orange-500: #F97316;
+  --color-orange-600: #EA580C;
+  --color-orange-700: #C2410C;
+  --color-orange-800: #9A3412;
+  --color-orange-900: #7C2D12;
+  --color-orange-950: #431407;
+
+  /* Purple */
+  --color-purple-50: #FAF5FF;
+  --color-purple-100: #F3E8FF;
+  --color-purple-200: #E9D5FF;
+  --color-purple-300: #D8B4FE;
+  --color-purple-400: #C084FC;
+  --color-purple-500: #A855F7;
+  --color-purple-600: #9333EA;
+  --color-purple-700: #7E22CE;
+  --color-purple-800: #6B21A8;
+  --color-purple-900: #581C87;
+  --color-purple-950: #3B0764;
+
+  /* Pink */
+  --color-pink-50: #FDF2F8;
+  --color-pink-100: #FCE7F3;
+  --color-pink-200: #FBCFE8;
+  --color-pink-300: #F9A8D4;
+  --color-pink-400: #F472B6;
+  --color-pink-500: #EC4899;
+  --color-pink-600: #DB2777;
+  --color-pink-700: #BE185D;
+  --color-pink-800: #9D174D;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+
+  /* Teal */
+  --color-teal-50: #F0FDFA;
+  --color-teal-100: #CCFBF1;
+  --color-teal-200: #99F6E4;
+  --color-teal-300: #5EEAD4;
+  --color-teal-400: #2DD4BF;
+  --color-teal-500: #14B8A6;
+  --color-teal-600: #0D9488;
+  --color-teal-700: #0F766E;
+  --color-teal-800: #115E59;
+  --color-teal-900: #134E4A;
+  --color-teal-950: #042F2E;
+
+  /* Indigo */
+  --color-indigo-50: #EEF2FF;
+  --color-indigo-100: #E0E7FF;
+  --color-indigo-200: #C7D2FE;
+  --color-indigo-300: #A5B4FC;
+  --color-indigo-400: #818CF8;
+  --color-indigo-500: #6366F1;
+  --color-indigo-600: #4F46E5;
+  --color-indigo-700: #4338CA;
+  --color-indigo-800: #3730A3;
+  --color-indigo-900: #312E81;
+  --color-indigo-950: #1E1B4B;
+
 
   /* Neutral colors */
   --color-background-neutral-0: #ffffff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2v2ai/uikit",
-  "version": "0.0.41",
+  "version": "1.1.0",
   "type": "module",
   "author": "Arulraj V & abofficial1997@gmail.com",
   "description": "A React UI component library built with shadcn/ui and Tailwind CSS",