@dust-tt/sparkle 0.2.454 → 0.2.456

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.454",
+  "version": "0.2.456",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/AnimatedText.tsx

@@ -4,30 +4,75 @@ import React, { ReactNode } from "react";
 import { cn } from "@sparkle/lib/utils";
 
 const ANIMATED_TEXT_VARIANTS = [
+  "primary",
   "muted",
+  "white",
   "highlight",
+  "success",
+  "warning",
+  "info",
+  "green",
+  "blue",
+  "rose",
+  "golden",
+  //to be removed
   "emerald",
   "amber",
   "slate",
   "purple",
-  "warning",
   "sky",
   "pink",
   "red",
-  "white",
 ] as const;
 
 type AnimatedTextVariantType = (typeof ANIMATED_TEXT_VARIANTS)[number];
 
 const animatedVariants: Record<AnimatedTextVariantType, string> = {
+  primary: cn(
+    "s-from-primary-800 s-via-primary-950 s-via-50% s-to-primary-800",
+    "dark:s-from-primary-800-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-800-night"
+  ),
   muted: cn(
     "s-from-transparent s-via-primary-950/80 s-via-50% s-to-transparent",
     "dark:s-from-transparent dark:s-via-primary-50/80 dark:s-via-50% dark:s-to-transparent"
   ),
+  white: cn(
+    "s-from-primary-600 s-via-primary-950 s-via-50% s-to-primary-600",
+    "dark:s-from-primary-600-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-600-night"
+  ),
   highlight: cn(
     "s-from-highlight s-via-highlight-800 s-via-50% s-to-highlight",
     "dark:s-from-highlight-night dark:s-via-highlight-800-night dark:s-via-50% dark:s-to-highlight-night"
   ),
+  warning: cn(
+    "s-from-warning-800 s-via-warning-950 s-via-50% s-to-warning-800",
+    "dark:s-from-warning-800-night dark:s-via-warning-950-night dark:s-via-50% dark:s-to-warning-800-night"
+  ),
+  success: cn(
+    "s-from-success-800 s-via-success-950 s-via-50% s-to-success-800",
+    "dark:s-from-success-800-night dark:s-via-success-950-night dark:s-via-50% dark:s-to-success-800-night"
+  ),
+  info: cn(
+    "s-from-info-800 s-via-info-950 s-via-50% s-to-info-800",
+    "dark:s-from-info-800-night dark:s-via-info-950-night dark:s-via-50% dark:s-to-info-800-night"
+  ),
+  green: cn(
+    "s-from-emerald-800 s-via-emerald-950 s-via-50% s-to-emerald-800",
+    "dark:s-from-emerald-800-night dark:s-via-emerald-950-night dark:s-via-50% dark:s-to-emerald-800-night"
+  ),
+  blue: cn(
+    "s-from-sky-800 s-via-sky-950 s-via-50% s-to-sky-800",
+    "dark:s-from-sky-800-night dark:s-via-sky-950-night dark:s-via-50% dark:s-to-sky-800-night"
+  ),
+  rose: cn(
+    "s-from-rose-800 s-via-rose-950 s-via-50% s-to-rose-800",
+    "dark:s-from-rose-800-night dark:s-via-rose-950-night dark:s-via-50% dark:s-to-rose-800-night"
+  ),
+  golden: cn(
+    "s-from-golden-800 s-via-golden-950 s-via-50% s-to-golden-800",
+    "dark:s-from-golden-800-night dark:s-via-golden-950-night dark:s-via-50% dark:s-to-golden-800-night"
+  ),
+  // To be removed
   emerald: cn(
     "s-from-emerald-800 s-via-emerald-950 s-via-50% s-to-emerald-800",
     "dark:s-from-emerald-800-night dark:s-via-emerald-950-night dark:s-via-50% dark:s-to-emerald-800-night"
@@ -36,9 +81,13 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "s-from-amber-800 s-via-amber-950 s-via-50% s-to-amber-800",
     "dark:s-from-amber-800-night dark:s-via-amber-950-night dark:s-via-50% dark:s-to-amber-800-night"
   ),
-  white: cn(
-    "s-from-primary-600 s-via-primary-950 s-via-50% s-to-primary-600",
-    "dark:s-from-primary-600-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-600-night"
+  red: cn(
+    "s-from-red-800 s-via-red-950 s-via-50% s-to-red-800",
+    "dark:s-from-red-800-night dark:s-via-red-950-night dark:s-via-50% dark:s-to-red-800-night"
+  ),
+  sky: cn(
+    "s-from-sky-800 s-via-sky-950 s-via-50% s-to-sky-800",
+    "dark:s-from-sky-800-night dark:s-via-sky-950-night dark:s-via-50% dark:s-to-sky-800-night"
   ),
   slate: cn(
     "s-from-primary-600 s-via-primary-950 s-via-50% s-to-primary-600",
@@ -48,22 +97,10 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "s-from-purple-800 s-via-purple-950 s-via-50% s-to-purple-800",
     "dark:s-from-purple-800-night dark:s-via-purple-950-night dark:s-via-50% dark:s-to-purple-800-night"
   ),
-  warning: cn(
-    "s-from-warning-800 s-via-warning-950 s-via-50% s-to-warning-800",
-    "dark:s-from-warning-800-night dark:s-via-warning-950-night dark:s-via-50% dark:s-to-warning-800-night"
-  ),
-  sky: cn(
-    "s-from-sky-800 s-via-sky-950 s-via-50% s-to-sky-800",
-    "dark:s-from-sky-800-night dark:s-via-sky-950-night dark:s-via-50% dark:s-to-sky-800-night"
-  ),
   pink: cn(
     "s-from-pink-800 s-via-pink-950 s-via-50% s-to-pink-800",
     "dark:s-from-pink-800-night dark:s-via-pink-950-night dark:s-via-50% dark:s-to-pink-800-night"
   ),
-  red: cn(
-    "s-from-red-800 s-via-red-950 s-via-50% s-to-red-800",
-    "dark:s-from-red-800-night dark:s-via-red-950-night dark:s-via-50% dark:s-to-red-800-night"
-  ),
 };
 
 const animVariants = cva(
@@ -79,14 +116,22 @@ const animVariants = cva(
 );
 
 const animatedTextVariants: Record<AnimatedTextVariantType, string> = {
+  primary: "s-text-primary-800 dark:s-text-primary-800-night",
+  white: "s-text-muted-foreground dark:s-text-muted-foreground-night",
   muted: "s-text-muted-foreground dark:s-text-muted-foreground-night",
   highlight: "s-text-highlight dark:s-text-highlight-night",
+  success: "s-text-success-800 dark:s-text-success-800-night",
+  info: "s-text-info-800 dark:s-text-info-800-night",
+  warning: "s-text-warning-800 dark:s-text-warning-800-night",
+  green: "s-text-emerald-800 dark:s-text-emerald-800-night",
+  blue: "s-text-sky-800 dark:s-text-sky-800-night",
+  rose: "s-text-rose-800 dark:s-text-rose-800-night",
+  golden: "s-text-golden-800 dark:s-text-rose-golden-night",
+  //To be removed
   emerald: "s-text-emerald-800 dark:s-text-emerald-800-night",
   amber: "s-text-amber-800 dark:s-text-amber-800-night",
   slate: "s-text-muted-foreground dark:s-text-muted-foreground-night",
-  white: "s-text-muted-foreground dark:s-text-muted-foreground-night",
   purple: "s-text-purple-800 dark:s-text-purple-800-night",
-  warning: "s-text-warning-800 dark:s-text-warning-800-night",
   sky: "s-text-sky-800 dark:s-text-sky-800-night",
   pink: "s-text-pink-800 dark:s-text-pink-800-night",
   red: "s-text-red-800 dark:s-text-red-800-night",

package/src/components/Avatar.tsx

@@ -106,22 +106,14 @@ const getColor = (name: string) => {
     hash = name.charCodeAt(i) + ((hash << 5) - hash);
   }
   const colors = [
+    "s-bg-blue-300",
+    "s-bg-violet-300",
+    "s-bg-pink-300",
     "s-bg-red-300",
     "s-bg-orange-300",
-    "s-bg-amber-300",
-    "s-bg-yellow-300",
+    "s-bg-golden-300",
     "s-bg-lime-300",
-    "s-bg-green-300",
     "s-bg-emerald-300",
-    "s-bg-teal-300",
-    "s-bg-cyan-300",
-    "s-bg-sky-300",
-    "s-bg-blue-300",
-    "s-bg-indigo-300",
-    "s-bg-violet-300",
-    "s-bg-purple-300",
-    "s-bg-fuchsia-300",
-    "s-bg-rose-300",
   ];
   return colors[Math.abs(hash) % colors.length];
 };
@@ -135,22 +127,14 @@ const getTextVariant = (name: string) => {
     hash = name.charCodeAt(i) + ((hash << 5) - hash);
   }
   const txtColors = [
+    "s-text-blue-700",
+    "s-text-violet-700",
+    "s-text-pink-700",
     "s-text-red-700",
     "s-text-orange-700",
-    "s-text-amber-700",
-    "s-text-yellow-700",
+    "s-text-golden-700",
     "s-text-lime-700",
-    "s-text-green-700",
     "s-text-emerald-700",
-    "s-text-teal-700",
-    "s-text-cyan-700",
-    "s-text-sky-700",
-    "s-text-blue-700",
-    "s-text-indigo-700",
-    "s-text-violet-700",
-    "s-text-purple-700",
-    "s-text-fuchsia-700",
-    "s-text-rose-700",
   ];
   return txtColors[Math.abs(hash) % txtColors.length];
 };

package/src/components/Chip.tsx

@@ -16,15 +16,23 @@ export const CHIP_SIZES = ["xs", "sm"] as const;
 type ChipSizeType = (typeof CHIP_SIZES)[number];
 
 export const CHIP_COLORS = [
+  "primary",
+  "white",
+  "success",
+  "warning",
+  "info",
+  "highlight",
+  "green",
+  "blue",
+  "rose",
+  "golden",
   "emerald",
   "amber",
   "slate",
-  "purple",
-  "warning",
   "sky",
   "pink",
   "red",
-  "white",
+  "purple",
 ] as const;
 
 type ChipColorType = (typeof CHIP_COLORS)[number];
@@ -35,6 +43,55 @@ const sizeVariants: Record<ChipSizeType, string> = {
 };
 
 const backgroundVariants: Record<ChipColorType, string> = {
+  primary: cn(
+    "s-bg-muted-background s-border-border",
+    "dark:s-bg-muted-background-night dark:s-border-border-night"
+  ),
+  white: cn(
+    "s-bg-background s-border-border",
+    "dark:s-bg-muted-background-night dark:s-border-border-night"
+  ),
+  highlight: cn(
+    "s-bg-highlight-100 s-border-highlight-200",
+    "dark:s-bg-highlight-100-night dark:s-border-highlight-200-night"
+  ),
+  success: cn(
+    "s-bg-success-100 s-border-success-200",
+    "dark:s-bg-success-100-night dark:s-border-success-200-night"
+  ),
+  info: cn(
+    "s-bg-info-100 s-border-info-200",
+    "dark:s-bg-info-100-night dark:s-border-info-200-night"
+  ),
+  warning: cn(
+    "s-bg-warning-100 s-border-warning-200",
+    "dark:s-bg-warning-100-night dark:s-border-warning-200-night"
+  ),
+  green: cn(
+    "s-bg-green-100 s-border-green-200",
+    "dark:s-bg-green-100-night dark:s-border-green-200-night"
+  ),
+  blue: cn(
+    "s-bg-sky-100 s-border-sky-200",
+    "dark:s-bg-sky-100-night dark:s-border-sky-200-night"
+  ),
+  rose: cn(
+    "s-bg-rose-100 s-border-rose-200",
+    "dark:s-bg-rose-100-night dark:s-border-rose-200-night"
+  ),
+  golden: cn(
+    "s-bg-golden-100 s-border-golden-200",
+    "dark:s-bg-golden-100-night dark:s-border-golden-200-night"
+  ),
+  // To be removed
+  slate: cn(
+    "s-bg-muted-background s-border-border",
+    "dark:s-bg-muted-background-night dark:s-border-border-night"
+  ),
+  red: cn(
+    "s-bg-red-100 s-border-red-200",
+    "dark:s-bg-red-100-night dark:s-border-red-200-night"
+  ),
   emerald: cn(
     "s-bg-emerald-100 s-border-emerald-200",
     "dark:s-bg-emerald-100-night dark:s-border-emerald-200-night"
@@ -43,22 +100,10 @@ const backgroundVariants: Record<ChipColorType, string> = {
     "s-bg-amber-100 s-border-amber-200",
     "dark:s-bg-amber-100-night dark:s-border-amber-200-night"
   ),
-  slate: cn(
-    "s-bg-muted-background s-border-border",
-    "dark:s-bg-muted-background-night dark:s-border-border-night"
-  ),
   purple: cn(
     "s-bg-purple-100 s-border-purple-200",
     "dark:s-bg-purple-100-night dark:s-border-purple-200-night"
   ),
-  white: cn(
-    "s-bg-background s-border-border",
-    "dark:s-bg-muted-background-night dark:s-border-border-night"
-  ),
-  warning: cn(
-    "s-bg-warning-100 s-border-warning-200",
-    "dark:s-bg-warning-100-night dark:s-border-warning-200-night"
-  ),
   sky: cn(
     "s-bg-sky-100 s-border-sky-200",
     "dark:s-bg-sky-100-night dark:s-border-sky-200-night"
@@ -67,22 +112,27 @@ const backgroundVariants: Record<ChipColorType, string> = {
     "s-bg-pink-100 s-border-pink-200",
     "dark:s-bg-pink-100-night dark:s-border-pink-200-night"
   ),
-  red: cn(
-    "s-bg-red-100 s-border-red-200",
-    "dark:s-bg-red-100-night dark:s-border-red-200-night"
-  ),
 };
 
 const textVariants: Record<ChipColorType, string> = {
+  primary: "s-text-primary-900 dark:s-text-primary-900-night",
+  white: "s-text-foreground dark:s-text-foreground-night",
+  highlight: "s-text-highlight-900 dark:s-text-highlight-900-night",
+  success: "s-text-success-900 dark:s-text-success-900-night",
+  warning: "s-text-warning-900 dark:s-text-warning-900-night",
+  info: "s-text-info-900 dark:s-text-info-900-night",
+  green: "s-text-green-900 dark:s-text-green-900-night",
+  blue: "s-text-sky-900 dark:s-text-sky-900-night",
+  rose: "s-text-rose-900 dark:s-text-rose-900-night",
+  golden: "s-text-golden-900 dark:s-text-golden-900-night",
+  // To be removed
   emerald: "s-text-emerald-900 dark:s-text-emerald-900-night",
   amber: "s-text-amber-900 dark:s-text-amber-900-night",
   slate: "s-text-foreground dark:s-text-foreground-night",
-  purple: "s-text-purple-900 dark:s-text-purple-900-night",
-  warning: "s-text-warning-900 dark:s-text-warning-900-night",
   sky: "s-text-sky-900 dark:s-text-sky-900-night",
   pink: "s-text-pink-900 dark:s-text-pink-900-night",
   red: "s-text-red-900 dark:s-text-red-900-night",
-  white: "s-text-foreground dark:s-text-foreground-night",
+  purple: "s-text-purple-900 dark:s-text-purple-900-night",
 };
 
 const chipVariants = cva("s-inline-flex s-box-border s-items-center", {

package/src/components/ColorPicker.tsx

@@ -24,7 +24,7 @@ export function ColorPicker<T extends string>({
   onColorSelect,
 }: ColorPickerProps<T>) {
   return (
-    <div className="s-grid-rows-20 w-auto s-grid s-grid-cols-8 s-gap-1.5 s-rounded s-p-2 s-shadow-lg">
+    <div className="s-grid-rows-20 w-auto s-grid s-grid-cols-8 s-gap-1.5 s-rounded s-p-2">
       {colors.map((color) => {
         return (
           <ColorSwatch

package/src/components/ContentMessage.tsx

@@ -9,11 +9,20 @@ const CONTENT_MESSAGE_VARIANTS = [
   "amber",
   "slate",
   "purple",
-  "warning",
   "sky",
   "pink",
   "action",
   "red",
+  //New variants
+  "primary",
+  "warning",
+  "success",
+  "highlight",
+  "info",
+  "green",
+  "blue",
+  "rose",
+  "golden",
 ] as const;
 
 type ContentMessageVariantType = (typeof CONTENT_MESSAGE_VARIANTS)[number];
@@ -23,20 +32,38 @@ const CONTENT_MESSAGE_SIZES = ["sm", "md", "lg"] as const;
 type ContentMessageSizeType = (typeof CONTENT_MESSAGE_SIZES)[number];
 
 const contentMessageVariants = cva(
-  "s-flex s-flex-col s-gap-1 s-rounded-2xl s-p-4",
+  "s-flex s-flex-col s-gap-1 s-rounded-2xl s-p-4 s-border",
   {
     variants: {
       variant: {
-        emerald: "s-bg-green-100 dark:s-bg-green-100-night",
-        amber: "s-bg-golden-100 dark:s-bg-golden-100-night",
+        emerald:
+          "s-bg-green-100 dark:s-bg-green-100-night s-border-transparent",
+        amber:
+          "s-bg-golden-100 dark:s-bg-golden-100-night s-border-transparent",
         slate:
           "s-bg-muted-background dark:s-bg-muted-background-night s-border s-border-border dark:s-border-border-night",
-        purple: "s-bg-purple-100 dark:s-bg-purple-100-night",
-        warning: "s-bg-warning-100 dark:s-bg-warning-100-night",
-        sky: "s-bg-sky-100 dark:s-bg-sky-100-night",
-        pink: "s-bg-pink-100 dark:s-bg-pink-100-night",
-        action: "s-bg-highlight-100 dark:s-bg-highlight-100-night",
-        red: "s-bg-red-100 dark:s-bg-red-100-night",
+        purple:
+          "s-bg-purple-100 dark:s-bg-purple-100-night s-border-transparent",
+        sky: "s-bg-sky-100 dark:s-bg-sky-100-night s-border-transparent",
+        pink: "s-bg-pink-100 dark:s-bg-pink-100-night s-border-transparent",
+        action:
+          "s-bg-highlight-100 dark:s-bg-highlight-100-night s-border-transparent",
+        red: "s-bg-red-100 dark:s-bg-red-100-night s-border-transparent",
+        // tbr
+        primary:
+          "s-bg-muted-background dark:s-bg-muted-background-night s-border-border dark:s-border-border-night",
+        success:
+          "s-bg-success-100 dark:s-bg-success-100-night s-border-transparent",
+        warning:
+          "s-bg-warning-100 dark:s-bg-warning-100-night s-border-transparent",
+        highlight:
+          "s-bg-highlight-100 dark:s-bg-highlight-100-night s-border-transparent",
+        info: "s-bg-info-100 dark:s-bg-info-100-night s-border-transparent",
+        green: "s-bg-green-100 dark:s-bg-green-100-night s-border-transparent",
+        blue: "s-bg-blue-100 dark:s-bg-blue-100-night s-border-transparent",
+        rose: "s-bg-rose-100 dark:s-bg-rose-100-night s-border-transparent",
+        golden:
+          "s-bg-golden-100 dark:s-bg-golden-100-night s-border-transparent",
       },
       size: {
         lg: "",
@@ -45,7 +72,7 @@ const contentMessageVariants = cva(
       },
     },
     defaultVariants: {
-      variant: "amber",
+      variant: "info",
       size: "md",
     },
   }
@@ -58,11 +85,20 @@ const iconVariants = cva("s-shrink-0", {
       amber: "s-text-golden-800 dark:s-text-golden-800-night",
       slate: "s-text-primary-800 dark:s-text-primary-800-night",
       purple: "s-text-purple-800 dark:s-text-purple-800-night",
-      warning: "s-text-warning-800 dark:s-text-warning-800-night",
       sky: "s-text-sky-800 dark:s-text-sky-800-night",
       pink: "s-text-pink-800 dark:s-text-pink-800-night",
       action: "s-text-highlight-800 dark:s-text-highlight-800-night",
       red: "s-text-red-800 dark:s-text-red-800-night",
+      // tbr
+      primary: "s-text-primary-800 dark:s-text-primary-800-night",
+      warning: "s-text-warning-800 dark:s-text-warning-800-night",
+      success: "s-text-success-800 dark:s-text-success-800-night",
+      highlight: "s-text-highlight-800 dark:s-text-highlight-800-night",
+      info: "s-text-info-800 dark:s-text-info-800-night",
+      green: "s-text-green-800 dark:s-text-green-800-night",
+      blue: "s-text-blue-800 dark:s-text-blue-800-night",
+      rose: "s-text-rose-800 dark:s-text-rose-800-night",
+      golden: "s-text-golden-800 dark:s-text-golden-800-night",
     },
   },
 });
@@ -74,11 +110,20 @@ const titleVariants = cva("s-text-sm s-font-semibold", {
       amber: "s-text-golden-800 dark:s-text-golden-800-night",
       slate: "s-text-foreground dark:s-text-foreground-night",
       purple: "s-text-purple-800 dark:s-text-purple-800-night",
-      warning: "s-text-warning-800 dark:s-text-warning-800-night",
       sky: "s-text-sky-800 dark:s-text-sky-800-night",
       pink: "s-text-pink-800 dark:s-text-pink-800-night",
       action: "s-text-highlight-800 dark:s-text-highlight-800-night",
       red: "s-text-red-800 dark:s-text-red-800-night",
+      // tbr
+      primary: "s-text-foreground dark:s-text-foreground-night",
+      warning: "s-text-warning-800 dark:s-text-warning-800-night",
+      success: "s-text-success-800 dark:s-text-success-800-night",
+      highlight: "s-text-highlight-800 dark:s-text-highlight-800-night",
+      info: "s-text-info-800 dark:s-text-info-800-night",
+      green: "s-text-green-800 dark:s-text-green-800-night",
+      blue: "s-text-blue-800 dark:s-text-blue-800-night",
+      rose: "s-text-rose-800 dark:s-text-rose-800-night",
+      golden: "s-text-golden-800 dark:s-text-golden-800-night",
     },
   },
 });
@@ -90,11 +135,20 @@ const textVariants = cva("s-text-sm", {
       amber: "s-text-golden-950 dark:s-text-golden-950-night",
       slate: "s-text-muted-foreground dark:s-text-muted-foreground-night",
       purple: "s-text-purple-950 dark:s-text-purple-950-night",
-      warning: "s-text-warning-950 dark:s-text-warning-950-night",
       sky: "s-text-sky-950 dark:s-text-sky-950-night",
       pink: "s-text-pink-950 dark:s-text-pink-950-night",
       action: "s-text-highlight-950 dark:s-text-highlight-950-night",
       red: "s-text-red-950 dark:s-text-red-950-night",
+      // tbr
+      primary: "s-text-muted-foreground dark:s-text-muted-foreground-night",
+      warning: "s-text-warning-950 dark:s-text-warning-950-night",
+      success: "s-text-success-950 dark:s-text-success-950-night",
+      highlight: "s-text-highlight-950 dark:s-text-highlight-950-night",
+      info: "s-text-info-950 dark:s-text-info-950-night",
+      green: "s-text-green-950 dark:s-text-green-950-night",
+      blue: "s-text-blue-950 dark:s-text-blue-950-night",
+      rose: "s-text-rose-950 dark:s-text-rose-950-night",
+      golden: "s-text-golden-950 dark:s-text-golden-950-night",
     },
   },
 });

package/src/components/DataTable.tsx

@@ -8,6 +8,8 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   PaginationState,
+  Row,
+  RowSelectionState,
   type SortingState,
   Updater,
   useReactTable,
@@ -18,6 +20,7 @@ import React, { ReactNode, useEffect, useRef, useState } from "react";
 import {
   Avatar,
   Button,
+  Checkbox,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
@@ -95,6 +98,9 @@ interface DataTableProps<TData extends TBaseData> {
   setSorting?: (sorting: SortingState) => void;
   isServerSideSorting?: boolean;
   disablePaginationNumbers?: boolean;
+  rowSelection?: RowSelectionState;
+  setRowSelection?: (rowSelection: RowSelectionState) => void;
+  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
 }
 
 export function DataTable<TData extends TBaseData>({
@@ -113,6 +119,9 @@ export function DataTable<TData extends TBaseData>({
   setSorting,
   isServerSideSorting = false,
   disablePaginationNumbers = false,
+  rowSelection,
+  setRowSelection,
+  enableRowSelection = false,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
 
@@ -140,6 +149,15 @@ export function DataTable<TData extends TBaseData>({
         }
       : undefined;
 
+  const onRowSelectionChange =
+    rowSelection && setRowSelection
+      ? (updater: Updater<RowSelectionState>) => {
+          const newValue =
+            typeof updater === "function" ? updater(rowSelection) : updater;
+          setRowSelection(newValue);
+        }
+      : undefined;
+
   const table = useReactTable({
     data,
     columns,
@@ -157,17 +175,20 @@ export function DataTable<TData extends TBaseData>({
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange,
     state: {
       columnFilters,
       ...(isServerSideSorting && {
         sorting,
       }),
       pagination,
+      rowSelection,
     },
     initialState: {
       sorting,
     },
     onPaginationChange,
+    enableRowSelection,
   });
 
   useEffect(() => {
@@ -235,6 +256,7 @@ export function DataTable<TData extends TBaseData>({
               widthClassName={widthClassName}
               key={row.id}
               onClick={row.original.onClick}
+              data-selected={row.getIsSelected()}
             >
               {row.getVisibleCells().map((cell) => {
                 const breakpoint = columnsBreakpoints[cell.column.id];
@@ -291,6 +313,9 @@ export function ScrollableDataTable<TData extends TBaseData>({
   maxHeight = "s-h-100",
   onLoadMore,
   isLoading = false,
+  rowSelection,
+  setRowSelection,
+  enableRowSelection,
 }: ScrollableDataTableProps<TData>) {
   const windowSize = useWindowSize();
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -316,12 +341,26 @@ export function ScrollableDataTable<TData extends TBaseData>({
     };
   }, []);
 
+  const onRowSelectionChange =
+    rowSelection && setRowSelection
+      ? (updater: Updater<RowSelectionState>) => {
+          const newValue =
+            typeof updater === "function" ? updater(rowSelection) : updater;
+          setRowSelection(newValue);
+        }
+      : undefined;
+
   const table = useReactTable({
     data,
     columns,
     rowCount: totalRowCount,
     getCoreRowModel: getCoreRowModel(),
     enableColumnResizing: true,
+    onRowSelectionChange,
+    enableRowSelection,
+    state: {
+      rowSelection,
+    },
   });
 
   useEffect(() => {
@@ -466,6 +505,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
                     widthClassName={widthClassName}
                     onClick={row.original.onClick}
                     className="s-absolute s-w-full"
+                    data-selected={row.getIsSelected()}
                     style={{
                       transform: `translateY(${virtualRow.start}px)`,
                     }}
@@ -616,6 +656,7 @@ interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   children: ReactNode;
   onClick?: () => void;
   widthClassName: string;
+  "data-selected"?: boolean;
 }
 
 DataTable.Row = function Row({
@@ -633,6 +674,8 @@ DataTable.Row = function Row({
         onClick
           ? "s-cursor-pointer hover:s-bg-muted dark:hover:s-bg-muted-night"
           : "",
+        props["data-selected"] &&
+          "s-bg-highlight-50 dark:s-bg-highlight-900/10",
         widthClassName,
         className
       )}
@@ -1013,3 +1056,47 @@ DataTable.Caption = function Caption({
     </caption>
   );
 };
+
+export function createSelectionColumn<TData>(): ColumnDef<TData> {
+  return {
+    id: "select",
+    enableSorting: false,
+    enableHiding: false,
+    header: ({ table }) => (
+      <Checkbox
+        size="xs"
+        checked={
+          table.getIsAllRowsSelected()
+            ? true
+            : table.getIsSomeRowsSelected()
+              ? "partial"
+              : false
+        }
+        onCheckedChange={(state) => {
+          if (state === "indeterminate") {
+            return;
+          }
+          table.toggleAllRowsSelected(state);
+        }}
+      />
+    ),
+    cell: ({ row }) => (
+      <div className="s-flex s-h-full s-w-full s-items-center">
+        <Checkbox
+          size="xs"
+          checked={row.getIsSelected()}
+          disabled={!row.getCanSelect()}
+          onCheckedChange={(state) => {
+            if (state === "indeterminate") {
+              return;
+            }
+            row.toggleSelected(state);
+          }}
+        />
+      </div>
+    ),
+    meta: {
+      className: "s-w-10",
+    },
+  };
+}