@turtleclub/ui 0.7.0-beta.3 → 0.7.0-beta.30

package/src/components/features/data-table/data-table.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { Fragment, useMemo } from "react";
+import React, { Fragment, useMemo, useState } from "react";
 
 import {
   ColumnDef,
@@ -29,6 +29,8 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Input,
+  Combobox,
 } from "../../ui";
 import SortableHeader from "./sortable-header";
 import { SearchBar } from "../search-bar";
@@ -46,6 +48,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "../../ui/pagination";
+import { useIsMobile } from "@/hooks";
 
 const getScrollAreaHeight = (size: string | "full" | undefined) => {
   if (!size) return "auto";
@@ -77,6 +80,7 @@ type DataTableProps<TData, TValue> = {
   manualFiltering?: boolean;
   manualSorting?: boolean;
   manualPagination?: boolean;
+
   pageCount?: number; // Total page count from server (required when manualPagination is true)
   rowCount?: number; // Total row count from server (optional, for display purposes)
 
@@ -92,14 +96,17 @@ type DataTableProps<TData, TValue> = {
   grid?: {
     displayAsGrid: boolean;
     className?: string;
-    headerSlot: keyof TData;
-    rightSlot?: keyof TData;
-    excludeColumns?: (keyof TData)[];
+    headerSlot: keyof TData | string;
+    rightSlot?: keyof TData | string;
+    excludeColumns?: (keyof TData | string)[];
+    headerTextSize?: string;
+    rightSlotTextSize?: string;
   };
   // ScrollArea size configuration
   size?: string | "full";
   emptyState?: React.ReactNode;
   className?: string;
+  slotClassName?: string;
 };
 
 export function DataTable<TData, TValue>({
@@ -118,6 +125,7 @@ export function DataTable<TData, TValue>({
   grid,
   emptyState,
   className,
+  slotClassName,
   onRowClick,
   // Server-side props
   manualFiltering = false,
@@ -132,22 +140,23 @@ export function DataTable<TData, TValue>({
   pagination: controlledPagination,
   onPaginationChange: onControlledPaginationChange,
 }: DataTableProps<TData, TValue>) {
-  const [columnVisibility, setColumnVisibility] = React.useState(
-    initialColumnVisibility ?? {},
-  );
+  const [columnVisibility, setColumnVisibility] = React.useState(initialColumnVisibility ?? {});
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
   const [expanded, setExpanded] = React.useState<ExpandedState>({});
 
   // Internal state (used when not controlled from outside)
-  const [internalGlobalFilter, setInternalGlobalFilter] =
-    React.useState<string>("");
-  const [internalSorting, setInternalSorting] =
-    React.useState<SortingState>(initialSorting);
-  const [internalPagination, setInternalPagination] =
-    React.useState<PaginationState>({
-      pageIndex: 0,
-      pageSize: 10,
-    });
+  const [internalGlobalFilter, setInternalGlobalFilter] = React.useState<string>("");
+  const [internalSorting, setInternalSorting] = React.useState<SortingState>(initialSorting);
+  const [internalPagination, setInternalPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  // Store the default page size for reset purposes
+  const defaultPageSize = React.useMemo(
+    () => controlledPagination?.pageSize ?? internalPagination.pageSize,
+    [controlledPagination?.pageSize]
+  );
 
   // Use controlled state if provided, otherwise use internal state
   const globalFilter = controlledGlobalFilter ?? internalGlobalFilter;
@@ -162,13 +171,9 @@ export function DataTable<TData, TValue>({
     }
   };
 
-  const setSorting = (
-    updaterOrValue: SortingState | ((old: SortingState) => SortingState),
-  ) => {
+  const setSorting = (updaterOrValue: SortingState | ((old: SortingState) => SortingState)) => {
     const newSorting =
-      typeof updaterOrValue === "function"
-        ? updaterOrValue(sorting)
-        : updaterOrValue;
+      typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
 
     if (onControlledSortingChange) {
       onControlledSortingChange(newSorting);
@@ -178,14 +183,10 @@ export function DataTable<TData, TValue>({
   };
 
   const setPagination = (
-    updaterOrValue:
-      | PaginationState
-      | ((old: PaginationState) => PaginationState),
+    updaterOrValue: PaginationState | ((old: PaginationState) => PaginationState)
   ) => {
     const newPagination =
-      typeof updaterOrValue === "function"
-        ? updaterOrValue(pagination)
-        : updaterOrValue;
+      typeof updaterOrValue === "function" ? updaterOrValue(pagination) : updaterOrValue;
 
     if (onControlledPaginationChange) {
       onControlledPaginationChange(newPagination);
@@ -194,6 +195,8 @@ export function DataTable<TData, TValue>({
     }
   };
 
+  const { isMobile } = useIsMobile();
+
   const table = useReactTable({
     data,
     columns,
@@ -219,7 +222,7 @@ export function DataTable<TData, TValue>({
     getRowCanExpand: enableExpand ? () => true : undefined,
 
     // Server-side control
-    manualFiltering,
+    manualFiltering: manualFiltering,
     manualSorting,
     manualPagination,
     pageCount: manualPagination ? pageCount : undefined,
@@ -231,9 +234,7 @@ export function DataTable<TData, TValue>({
     getFilteredRowModel: !manualFiltering ? getFilteredRowModel() : undefined,
     getSortedRowModel: !manualSorting ? getSortedRowModel() : undefined,
     getPaginationRowModel:
-      enablePagination && !manualPagination
-        ? getPaginationRowModel()
-        : undefined,
+      enablePagination && !manualPagination ? getPaginationRowModel() : undefined,
     getExpandedRowModel: getExpandedRowModel(),
 
     // debugTable: true,
@@ -247,13 +248,13 @@ export function DataTable<TData, TValue>({
         .getHeaderGroups()
         .map((headerGroup) => headerGroup.headers)
         .flat(),
-    [table],
+    [table]
   );
 
   return (
     <div className="space-y-3">
       {slot || enableSearch || (enableSorting && grid?.displayAsGrid) ? (
-        <div className="flex items-center gap-1">
+        <div className={cn("flex items-start gap-1", slotClassName)}>
           {slot}
           <span className="grow" />
           {enableSorting && grid?.displayAsGrid && (
@@ -276,10 +277,7 @@ export function DataTable<TData, TValue>({
           )}
         </div>
       ) : undefined}
-      <ScrollArea
-        style={{ height: getScrollAreaHeight(size) }}
-        className={className}
-      >
+      <ScrollArea style={{ height: getScrollAreaHeight(size) }} className={className}>
         {table.getRowModel().rows?.length || isLoading ? (
           grid?.displayAsGrid ? (
             isLoading ? (
@@ -287,15 +285,15 @@ export function DataTable<TData, TValue>({
                 className={cn(
                   "grid gap-1 pr-1.5",
                   "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
-                  grid.className,
+                  grid.className
                 )}
               />
             ) : (
               <div
                 className={cn(
                   "grid gap-1 pr-1.5",
-                  // "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
-                  grid.className,
+                  "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
+                  grid.className
                 )}
               >
                 {table.getRowModel().rows.map((row) => (
@@ -303,27 +301,20 @@ export function DataTable<TData, TValue>({
                     <Card
                       className={cn(
                         "max-w-none",
-                        onRowClick
-                          ? "hover:bg-neutral-alpha-5 cursor-pointer"
-                          : "",
+                        onRowClick ? "hover:bg-neutral-alpha-5 cursor-pointer" : ""
                       )}
                       data-state={row.getIsSelected() && "selected"}
                       variant="border"
                     >
                       <CardHeader className="flex items-center gap-2">
                         {/* Slot for header, pick the colum you display here */}
-                        <CardTitle className="line-clamp-1 grow text-base">
+                        <CardTitle className={cn("line-clamp-1 grow", grid.headerTextSize || "text-base")}>
                           {row
                             .getVisibleCells()
-                            .filter(
-                              (cell) => cell.column.id === grid.headerSlot,
-                            )
+                            .filter((cell) => cell.column.id === grid.headerSlot)
                             ?.map((cell) => (
                               <Fragment key={cell.id}>
-                                {flexRender(
-                                  cell.column.columnDef.cell,
-                                  cell.getContext(),
-                                )}
+                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
                               </Fragment>
                             ))}
                         </CardTitle>
@@ -332,11 +323,8 @@ export function DataTable<TData, TValue>({
                           .getVisibleCells()
                           .filter((cell) => cell.column.id === grid?.rightSlot)
                           ?.map((cell) => (
-                            <div key={cell.id} className="text-lg">
-                              {flexRender(
-                                cell.column.columnDef.cell,
-                                cell.getContext(),
-                              )}
+                            <div key={cell.id} className={cn(grid.rightSlotTextSize || "text-lg")}>
+                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
                             </div>
                           ))}
                       </CardHeader>
@@ -347,8 +335,7 @@ export function DataTable<TData, TValue>({
                             (cell) =>
                               cell.column.id !== grid.headerSlot &&
                               cell.column.id !== grid.rightSlot &&
-                              // @ts-expect-error I know that column id by defintion is keyof TData
-                              !grid.excludeColumns?.includes(cell.column.id),
+                              !grid.excludeColumns?.includes(cell.column.id)
                           )
                           .map((cell) => {
                             return (
@@ -357,15 +344,10 @@ export function DataTable<TData, TValue>({
                                 title={flexRender(
                                   cell.column.columnDef.header,
                                   headers
-                                    .find(
-                                      (header) => header.id === cell.column.id,
-                                    )
-                                    ?.getContext(),
-                                )}
-                                value={flexRender(
-                                  cell.column.columnDef.cell,
-                                  cell.getContext(),
+                                    .find((header) => header.id === cell.column.id)
+                                    ?.getContext()
                                 )}
+                                value={flexRender(cell.column.columnDef.cell, cell.getContext())}
                                 className="justify-between gap-3 *:text-xs"
                               />
                             );
@@ -390,9 +372,7 @@ export function DataTable<TData, TValue>({
                           minWidth: header.column.columnDef.minSize,
                           maxWidth: header.column.columnDef.maxSize,
                         }}
-                        className={
-                          (header.column.columnDef.meta as any)?.className
-                        }
+                        className={(header.column.columnDef.meta as any)?.className}
                       >
                         <SortableHeader header={header} />
                       </TableHead>
@@ -409,18 +389,11 @@ export function DataTable<TData, TValue>({
                       <TableRow
                         onClick={() => onRowClick?.(row.original)}
                         data-state={row.getIsSelected() && "selected"}
-                        className={
-                          onRowClick
-                            ? "hover:bg-neutral-alpha-5 cursor-pointer"
-                            : ""
-                        }
+                        className={onRowClick ? "hover:bg-neutral-alpha-5 cursor-pointer" : ""}
                       >
                         {row.getVisibleCells().map((cell) => (
                           <ShadTableCell key={cell.id}>
-                            {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext(),
-                            )}
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
                           </ShadTableCell>
                         ))}
                       </TableRow>
@@ -446,10 +419,26 @@ export function DataTable<TData, TValue>({
           ))
         )}
       </ScrollArea>
-      {enablePagination &&
-        (manualPagination
-          ? (pageCount ?? 0) > 1
-          : table.getPageCount() > 1) && (
+      {enablePagination && (
+        <div className={cn(isMobile ? "flex flex-col gap-2" : "flex justify-between gap-1")}>
+          <Combobox
+            options={[10, 20, 30, 40, 50, 100].map((size) => ({
+              label: `Show ${size.toString()} rows per page`,
+              value: size,
+            }))}
+            defaultValue={table.getState().pagination.pageSize}
+            onValueChange={(value) => {
+              // If value is cleared/null/0, reset to default page size
+              const newPageSize = value || defaultPageSize;
+              table.setPageSize(newPageSize);
+            }}
+            autoSize
+            className="h-9"
+            searchable={false}
+            closeOnSelect
+            placeholder="Rows shown per page"
+          />
+
           <Pagination>
             <PaginationContent>
               <PaginationItem>
@@ -462,63 +451,85 @@ export function DataTable<TData, TValue>({
                   }
                 />
               </PaginationItem>
-              {Array.from({ length: table.getPageCount() }, (_, i) => i).map(
-                (pageIndex) => {
-                  const currentPage = table.getState().pagination.pageIndex;
-                  const totalPages = table.getPageCount();
-
-                  // Show first page, last page, current page, and pages around current
-                  const showPage =
-                    pageIndex === 0 ||
-                    pageIndex === totalPages - 1 ||
-                    (pageIndex >= currentPage - 1 &&
-                      pageIndex <= currentPage + 1);
-
-                  // Show ellipsis before current range (but not right after first page)
-                  const showEllipsisBefore =
-                    pageIndex === currentPage - 2 && currentPage > 2;
-
-                  // Show ellipsis after current range (but not right before last page)
-                  const showEllipsisAfter =
-                    pageIndex === currentPage + 2 &&
-                    currentPage < totalPages - 3;
-
-                  if (showEllipsisBefore || showEllipsisAfter) {
-                    return (
-                      <PaginationItem key={pageIndex}>
-                        <PaginationEllipsis />
-                      </PaginationItem>
-                    );
-                  }
+              {Array.from({ length: table.getPageCount() }, (_, i) => i).map((pageIndex) => {
+                const currentPage = table.getState().pagination.pageIndex;
+                const totalPages = table.getPageCount();
+
+                // Show first page, last page, current page, and pages around current
+                const showPage =
+                  pageIndex === 0 ||
+                  pageIndex === totalPages - 1 ||
+                  (pageIndex >= currentPage - 1 && pageIndex <= currentPage + 1);
 
-                  if (!showPage) return null;
+                // Show ellipsis before current range (but not right after first page)
+                const showEllipsisBefore = pageIndex === currentPage - 2 && currentPage > 2;
 
+                // Show ellipsis after current range (but not right before last page)
+                const showEllipsisAfter =
+                  pageIndex === currentPage + 2 && currentPage < totalPages - 3;
+
+                if (showEllipsisBefore || showEllipsisAfter) {
                   return (
                     <PaginationItem key={pageIndex}>
-                      <PaginationLink
-                        onClick={() => table.setPageIndex(pageIndex)}
-                        isActive={currentPage === pageIndex}
-                        className="cursor-pointer"
-                      >
-                        {pageIndex + 1}
-                      </PaginationLink>
+                      <PaginationEllipsis />
                     </PaginationItem>
                   );
-                },
-              )}
+                }
+
+                if (!showPage) return null;
+
+                return (
+                  <PaginationItem key={pageIndex}>
+                    <PaginationLink
+                      onClick={() => table.setPageIndex(pageIndex)}
+                      isActive={currentPage === pageIndex}
+                      className="cursor-pointer"
+                    >
+                      {pageIndex + 1}
+                    </PaginationLink>
+                  </PaginationItem>
+                );
+              })}
               <PaginationItem>
                 <PaginationNext
                   onClick={() => table.nextPage()}
                   className={
-                    !table.getCanNextPage()
-                      ? "pointer-events-none opacity-50"
-                      : "cursor-pointer"
+                    !table.getCanNextPage() ? "pointer-events-none opacity-50" : "cursor-pointer"
                   }
                 />
               </PaginationItem>
             </PaginationContent>
           </Pagination>
-        )}
+
+          <div className="mx-4 flex items-center gap-1">
+            <span className="text-muted-foreground truncate text-xs">Go to page:</span>
+            <Input
+              min={1}
+              max={table.getPageCount()}
+              pattern="[0-9]*"
+              defaultValue={table.getState().pagination.pageIndex + 1}
+              onBlurCapture={(e) => {
+                const page = e.target.value ? Number(e.target.value) - 1 : 0;
+                if (page >= 0 && page < table.getPageCount()) {
+                  table.setPageIndex(page);
+                }
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  const page = e.currentTarget.value ? Number(e.currentTarget.value) - 1 : 0;
+                  if (page >= 0 && page < table.getPageCount()) {
+                    table.setPageIndex(page);
+                  }
+                }
+              }}
+              className="h-9! w-12"
+            />
+            <span className="text-muted-foreground truncate text-xs">
+              of {table.getPageCount()}
+            </span>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/features/data-table/sort-dropdown.tsx

@@ -27,7 +27,7 @@ export function SortDropdown<TData>({
 }: SortDropdownProps<TData>) {
   // Filter only sortable columns
   const sortableHeaders = headers.filter(
-    (header) => header.column.getCanSort() && !header.isPlaceholder,
+    (header) => header.column.getCanSort() && !header.isPlaceholder
   );
 
   const getCurrentSortLabel = () => {
@@ -79,23 +79,20 @@ export function SortDropdown<TData>({
         <DropdownMenuLabel>Sort by</DropdownMenuLabel>
         <DropdownMenuSeparator />
         {sortableHeaders.map((header) => {
-          const isCurrentAsc =
-            currentSort?.id === header.column.id && !currentSort.desc;
-          const isCurrentDesc =
-            currentSort?.id === header.column.id && currentSort.desc;
+          const isCurrentAsc = currentSort?.id === header.column.id && !currentSort.desc;
+          const isCurrentDesc = currentSort?.id === header.column.id && currentSort.desc;
           const isActive = currentSort?.id === header.column.id;
 
           return (
             <DropdownMenuItem
               key={header.column.id}
               onClick={() => handleColumnClick(header.column.id)}
-              className={isActive ? "bg-secondary" : ""}
+              className={
+                isActive ? "bg-secondary flex items-center gap-2" : "flex items-center gap-2"
+              }
             >
-              <span className="flex-1">
-                {flexRender(
-                  header.column.columnDef.header,
-                  header.getContext(),
-                )}
+              <span className="w-fit truncate">
+                {flexRender(header.column.columnDef.header, header.getContext())}
               </span>
               {isActive &&
                 (isCurrentDesc ? (

package/src/components/features/search-bar.tsx

@@ -1,17 +1,20 @@
 import * as React from "react";
 import { Input, InputProps } from "../ui";
 import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 type Props = {
   value: string;
   onChange: (value: string) => void;
   debounce?: number;
+  size?: "default" | "sm";
 } & Omit<InputProps, "onChange">;
 
 export const SearchBar: React.FC<Props> = ({
   value: initialValue,
   onChange,
   debounce = 300,
+  size = "default",
   ...props
 }) => {
   const [value, setValue] = React.useState<string>(initialValue);
@@ -31,12 +34,14 @@ export const SearchBar: React.FC<Props> = ({
     return () => clearTimeout(timeout);
   }, [value]);
 
+  const inputClasses = size === "sm" ? "text-sm" : "";
+
   return (
     <div className="border-border relative w-full max-w-md rounded-full border">
       <Input
         value={value}
         onChange={handleInputChange}
-        className="-my-px h-9"
+        className={cn("-my-px h-9", inputClasses)}
         {...props}
       />
       <button

package/src/components/molecules/swap-input.tsx

@@ -6,8 +6,10 @@ import { Chip } from "@/components/ui/chip";
 import { TokenSelector, type Token } from "./token-selector";
 import { BaseSelector } from "./widget/base-selector";
 
-interface SwapInputProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+interface SwapInputProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> {
   value?: string;
   tokens: Token[];
   selectedToken?: string;
@@ -24,6 +26,9 @@ interface SwapInputProps
   useCustomTokenSelector?: boolean;
   selectedTokenData?: Token | null;
   onCustomTokenSelectorClick?: () => void;
+  showTokenSelectorBalance?: boolean;
+  showInputBalance?: boolean;
+  triggerTokenSelectorWidth?: number;
 }
 
 const SwapInput = React.forwardRef<HTMLDivElement, SwapInputProps>(
@@ -46,6 +51,9 @@ const SwapInput = React.forwardRef<HTMLDivElement, SwapInputProps>(
       useCustomTokenSelector = false,
       selectedTokenData,
       onCustomTokenSelectorClick,
+      showTokenSelectorBalance = true,
+      showInputBalance = true,
+      triggerTokenSelectorWidth,
       ...props
     },
     ref,
@@ -127,40 +135,46 @@ const SwapInput = React.forwardRef<HTMLDivElement, SwapInputProps>(
                 size="sm"
                 variant="default"
                 className="rounded-full"
+                showBalance={showTokenSelectorBalance}
+                triggerWidth={triggerTokenSelectorWidth}
               />
             ))}
         </div>
 
         {/* Bottom row: USD value and balance with MAX */}
-        <div className="text-muted-foreground flex items-center justify-between text-sm">
-          <div>
-            {usdValue ? (
-              <span>≈ {usdValue}</span>
-            ) : value ? (
-              <span className="text-destructive/50">Insufficient balance</span>
-            ) : null}
+        {showInputBalance && (
+          <div className="text-muted-foreground flex items-center justify-between text-sm">
+            <div>
+              {usdValue ? (
+                <span>≈ {usdValue}</span>
+              ) : value ? (
+                <span className="text-destructive/50">
+                  Insufficient balance
+                </span>
+              ) : null}
+            </div>
+            <div className="flex items-center gap-2">
+              {balance && (
+                <span className="text-sm">
+                  Balance: {balance} {currentToken?.symbol || ""}
+                </span>
+              )}
+              {onMaxClick && (
+                <Chip
+                  variant="default"
+                  size="xs"
+                  onClick={onMaxClick}
+                  className={cn(
+                    "hover:bg-primary hover:text-primary-foreground h-5 cursor-pointer px-2 py-0.5 text-xs transition-colors",
+                    disabled && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  MAX
+                </Chip>
+              )}
+            </div>
           </div>
-          <div className="flex items-center gap-2">
-            {balance && (
-              <span className="text-sm">
-                Balance: {balance} {currentToken?.symbol || ""}
-              </span>
-            )}
-            {onMaxClick && (
-              <Chip
-                variant="default"
-                size="xs"
-                onClick={onMaxClick}
-                className={cn(
-                  "hover:bg-primary hover:text-primary-foreground h-5 cursor-pointer px-2 py-0.5 text-xs transition-colors",
-                  disabled && "cursor-not-allowed opacity-50",
-                )}
-              >
-                MAX
-              </Chip>
-            )}
-          </div>
-        </div>
+        )}
       </Card>
     );
   },