@dust-tt/sparkle 0.2.457 → 0.2.458

package/src/components/AnimatedText.tsx

@@ -6,7 +6,6 @@ import { cn } from "@sparkle/lib/utils";
 const ANIMATED_TEXT_VARIANTS = [
   "primary",
   "muted",
-  "white",
   "highlight",
   "success",
   "warning",
@@ -15,14 +14,6 @@ const ANIMATED_TEXT_VARIANTS = [
   "blue",
   "rose",
   "golden",
-  //to be removed
-  "emerald",
-  "amber",
-  "slate",
-  "purple",
-  "sky",
-  "pink",
-  "red",
 ] as const;
 
 type AnimatedTextVariantType = (typeof ANIMATED_TEXT_VARIANTS)[number];
@@ -36,10 +27,6 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "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"
@@ -72,35 +59,6 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "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"
-  ),
-  amber: cn(
-    "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"
-  ),
-  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",
-    "dark:s-from-primary-600-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-600-night"
-  ),
-  purple: cn(
-    "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"
-  ),
-  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"
-  ),
 };
 
 const animVariants = cva(
@@ -117,7 +75,6 @@ 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",
@@ -127,14 +84,6 @@ const animatedTextVariants: Record<AnimatedTextVariantType, string> = {
   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",
-  purple: "s-text-purple-800 dark:s-text-purple-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",
 };
 
 const textVariants = cva("s-absolute s-inset-0", {

package/src/components/Chip.tsx

@@ -17,7 +17,6 @@ type ChipSizeType = (typeof CHIP_SIZES)[number];
 
 export const CHIP_COLORS = [
   "primary",
-  "white",
   "success",
   "warning",
   "info",
@@ -26,13 +25,6 @@ export const CHIP_COLORS = [
   "blue",
   "rose",
   "golden",
-  "emerald",
-  "amber",
-  "slate",
-  "sky",
-  "pink",
-  "red",
-  "purple",
 ] as const;
 
 type ChipColorType = (typeof CHIP_COLORS)[number];
@@ -47,10 +39,6 @@ const backgroundVariants: Record<ChipColorType, string> = {
     "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"
@@ -83,40 +71,10 @@ const backgroundVariants: Record<ChipColorType, string> = {
     "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"
-  ),
-  amber: cn(
-    "s-bg-amber-100 s-border-amber-200",
-    "dark:s-bg-amber-100-night dark:s-border-amber-200-night"
-  ),
-  purple: cn(
-    "s-bg-purple-100 s-border-purple-200",
-    "dark:s-bg-purple-100-night dark:s-border-purple-200-night"
-  ),
-  sky: cn(
-    "s-bg-sky-100 s-border-sky-200",
-    "dark:s-bg-sky-100-night dark:s-border-sky-200-night"
-  ),
-  pink: cn(
-    "s-bg-pink-100 s-border-pink-200",
-    "dark:s-bg-pink-100-night dark:s-border-pink-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",
@@ -125,14 +83,6 @@ const textVariants: Record<ChipColorType, string> = {
   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",
-  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",
-  purple: "s-text-purple-900 dark:s-text-purple-900-night",
 };
 
 const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
@@ -143,8 +93,8 @@ const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
   },
   defaultVariants: {
     size: "xs",
-    text: "slate",
-    background: "slate",
+    text: "primary",
+    background: "primary",
   },
 });
 

package/src/components/ContentMessage.tsx

@@ -5,15 +5,6 @@ import { Icon } from "@sparkle/components/Icon";
 import { cn } from "@sparkle/lib/utils";
 
 const CONTENT_MESSAGE_VARIANTS = [
-  "emerald",
-  "amber",
-  "slate",
-  "purple",
-  "sky",
-  "pink",
-  "action",
-  "red",
-  //New variants
   "primary",
   "warning",
   "success",
@@ -36,20 +27,6 @@ const contentMessageVariants = cva(
   {
     variants: {
       variant: {
-        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 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:
@@ -81,15 +58,6 @@ const contentMessageVariants = cva(
 const iconVariants = cva("s-shrink-0", {
   variants: {
     variant: {
-      emerald: "s-text-green-800 dark:s-text-green-800-night",
-      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",
-      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",
@@ -106,15 +74,6 @@ const iconVariants = cva("s-shrink-0", {
 const titleVariants = cva("s-text-sm s-font-semibold", {
   variants: {
     variant: {
-      emerald: "s-text-green-800 dark:s-text-green-800-night",
-      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",
-      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",
@@ -131,15 +90,6 @@ const titleVariants = cva("s-text-sm s-font-semibold", {
 const textVariants = cva("s-text-sm", {
   variants: {
     variant: {
-      emerald: "s-text-green-950 dark:s-text-green-950-night",
-      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",
-      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",
@@ -164,7 +114,7 @@ export interface ContentMessageProps {
 
 export function ContentMessage({
   title,
-  variant = "amber",
+  variant = "info",
   children,
   size = "md",
   className = "",

package/src/components/DataTable.tsx

@@ -175,14 +175,16 @@ export function DataTable<TData extends TBaseData>({
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     onColumnFiltersChange: setColumnFilters,
-    onRowSelectionChange,
+    ...(enableRowSelection && {
+      onRowSelectionChange,
+    }),
     state: {
       columnFilters,
       ...(isServerSideSorting && {
         sorting,
       }),
       pagination,
-      rowSelection,
+      ...(enableRowSelection && { rowSelection }),
     },
     initialState: {
       sorting,
@@ -256,7 +258,9 @@ export function DataTable<TData extends TBaseData>({
               widthClassName={widthClassName}
               key={row.id}
               onClick={row.original.onClick}
-              data-selected={row.getIsSelected()}
+              {...(enableRowSelection && {
+                "data-selected": row.getIsSelected(),
+              })}
             >
               {row.getVisibleCells().map((cell) => {
                 const breakpoint = columnsBreakpoints[cell.column.id];

package/src/components/Popup.tsx

@@ -1,7 +1,6 @@
 import { Transition } from "@headlessui/react";
 import React from "react";
 
-import { IconButton } from "@sparkle/components/IconButton";
 import { XMarkIcon } from "@sparkle/icons/solid";
 import { classNames } from "@sparkle/lib/utils";
 
@@ -47,13 +46,13 @@ export function Popup({
         )}
       >
         <div className="s-flex">
-          <Chip color="pink">{chipLabel}</Chip>
+          <Chip color="warning">{chipLabel}</Chip>
           {onClose && (
             <div className="-s-mr-1 -s-mt-1 s-flex s-grow s-items-start s-justify-end">
-              <IconButton
+              <Button
                 icon={XMarkIcon}
                 onClick={onClose}
-                variant="outline"
+                variant="ghost"
                 size="sm"
               />
             </div>

package/src/stories/Chip.stories.tsx

@@ -56,7 +56,7 @@ export const Basic: Story = {
   args: {
     label: "Example Chip",
     size: "sm",
-    color: "slate",
+    color: "primary",
     isBusy: true,
     onRemove: undefined,
   },
@@ -65,7 +65,6 @@ export const Basic: Story = {
 export const ThinkingChip = () => (
   <Chip
     size="sm"
-    color="slate"
     label="Thinking, Searching"
     isBusy
     onClick={() => console.log()}
@@ -73,10 +72,5 @@ export const ThinkingChip = () => (
 );
 
 export const RemovableChip = () => (
-  <Chip
-    size="sm"
-    color="slate"
-    label="Remove me"
-    onRemove={() => alert("Removed")}
-  />
+  <Chip size="sm" label="Remove me" onRemove={() => alert("Removed")} />
 );

package/src/stories/ContentMessage.stories.tsx

@@ -70,7 +70,7 @@ export const Basic: Story = {
 export const WithList: Story = {
   args: {
     title: "Agent Thoughts",
-    variant: "slate",
+    variant: "primary",
     size: "md",
     children: (
       <ul className="s-list-disc s-py-2 s-pl-8 first:s-pt-0 last:s-pb-0">

package/src/stories/ContextItem.stories.tsx

@@ -47,7 +47,7 @@ export const ListItemExample = () => (
         visual={<Icon visual={FolderIcon} size="md" />}
       >
         <div className="s-py-2">
-          <Chip size="xs" label="Last Sync ~7 days ago" color="pink" />
+          <Chip size="xs" label="Last Sync ~7 days ago" color="green" />
         </div>
         <ContextItem.Description description="Lats, pricing, history of contacts, contact message" />
       </ContextItem>
@@ -99,7 +99,7 @@ export const ListItemExample = () => (
       >
         <>
           <div className="s-py-2">
-            <Chip label="Syncing…" color="amber" size="sm" isBusy />
+            <Chip label="Syncing…" color="info" size="sm" isBusy />
           </div>
           <ContextItem.Description description="Teamspaces “General” and “Public”, pages “Engineering”, “Team Life”, “Marketing”, “Brand”, “Getting Started at Dust”, “Brand”, “Design”, “Product Decisions”, “Hiring”, “Man" />
         </>

package/src/stories/SearchInput.stories.tsx

@@ -96,7 +96,7 @@ export function SearchInputWithPopoverScrollableExample() {
       onSelectAll={() => console.log("select all")}
       contentMessage={{
         title: "You can add a custom message here",
-        variant: "pink",
+        variant: "green",
         icon: InformationCircleIcon,
         className: "s-w-full",
         size: "lg",

package/src/stories/Tree.stories.tsx

@@ -739,7 +739,7 @@ export const SelectDataSourceExample = () => {
                     <span className="s-text-sm s-text-muted-foreground">
                       Managed by: Stanislas Polu
                     </span>
-                    <Chip size="sm" color="pink" label="Syncing (235)" />
+                    <Chip size="sm" color="green" label="Syncing (235)" />
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
@@ -759,7 +759,7 @@ export const SelectDataSourceExample = () => {
                     <span className="s-text-sm s-text-muted-foreground">
                       Managed by: Stanislas Polu
                     </span>
-                    <Chip size="sm" color="pink" label="Syncing (235)" />
+                    <Chip size="sm" color="green" label="Syncing (235)" />
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
@@ -778,7 +778,7 @@ export const SelectDataSourceExample = () => {
                     <span className="s-text-sm s-text-muted-foreground">
                       Managed by: Stanislas Polu
                     </span>
-                    <Chip size="sm" color="pink" label="Syncing (235)" />
+                    <Chip size="sm" color="green" label="Syncing (235)" />
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
@@ -806,7 +806,7 @@ export const SelectDataSourceExample = () => {
                     <span className="s-text-sm s-text-muted-foreground">
                       Managed by: Stanislas Polu
                     </span>
-                    <Chip size="sm" color="pink" label="Syncing (235)" />
+                    <Chip size="sm" color="green" label="Syncing (235)" />
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}