@dust-tt/sparkle 0.2.457 → 0.2.459

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];
@@ -357,10 +361,13 @@ export function ScrollableDataTable<TData extends TBaseData>({
     getCoreRowModel: getCoreRowModel(),
     enableColumnResizing: true,
     onRowSelectionChange,
-    enableRowSelection,
+    ...(enableRowSelection && {
+      onRowSelectionChange,
+    }),
     state: {
-      rowSelection,
+      ...(enableRowSelection && { rowSelection }),
     },
+    enableRowSelection,
   });
 
   useEffect(() => {
@@ -505,7 +512,9 @@ export function ScrollableDataTable<TData extends TBaseData>({
                     widthClassName={widthClassName}
                     onClick={row.original.onClick}
                     className="s-absolute s-w-full"
-                    data-selected={row.getIsSelected()}
+                    {...(enableRowSelection && {
+                      "data-selected": row.getIsSelected(),
+                    })}
                     style={{
                       transform: `translateY(${virtualRow.start}px)`,
                     }}

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}