@dust-tt/sparkle 0.2.469 → 0.2.471

package/src/stories/Chip.stories.tsx

@@ -72,5 +72,90 @@ export const ThinkingChip = () => (
 );
 
 export const RemovableChip = () => (
-  <Chip size="sm" label="Remove me" onRemove={() => alert("Removed")} />
+  <div className="s-space-x-2">
+    <Chip
+      size="xs"
+      color="golden"
+      label="Remove me"
+      onRemove={() => alert("Removed")}
+    />
+    <Chip
+      size="sm"
+      color="golden"
+      label="Remove me"
+      onRemove={() => alert("Removed")}
+    />
+  </div>
+);
+
+export const AllColors = () => (
+  <div className="s-flex s-flex-col s-gap-4">
+    <div className="s-flex s-flex-wrap s-gap-2">
+      <Chip size="sm" color="primary" label="Primary" />
+      <Chip size="sm" color="highlight" label="Highlight" />
+      <Chip size="sm" color="success" label="Success" />
+      <Chip size="sm" color="warning" label="Warning" />
+      <Chip size="sm" color="info" label="Info" />
+      <Chip size="sm" color="green" label="Green" />
+      <Chip size="sm" color="blue" label="Blue" />
+      <Chip size="sm" color="rose" label="Rose" />
+      <Chip size="sm" color="golden" label="Golden" />
+    </div>
+    <div className="s-flex s-flex-wrap s-gap-2">
+      <Chip
+        size="sm"
+        color="primary"
+        label="Primary"
+        onRemove={() => alert("Removed")}
+      />
+      <Chip
+        size="sm"
+        color="highlight"
+        label="Highlight"
+        onRemove={() => alert("Removed")}
+      />
+      <Chip
+        size="sm"
+        color="success"
+        label="Success"
+        onRemove={() => alert("Removed")}
+      />
+      <Chip
+        size="sm"
+        color="warning"
+        label="Warning"
+        onRemove={() => alert("Removed")}
+      />
+      <Chip
+        size="sm"
+        color="info"
+        label="Info"
+        onRemove={() => alert("Removed")}
+      />
+      <Chip
+        size="sm"
+        color="green"
+        label="Green"
+        onRemove={() => alert("Removed")}
+      />
+      <Chip
+        size="sm"
+        color="blue"
+        label="Blue"
+        onRemove={() => alert("Removed")}
+      />
+      <Chip
+        size="sm"
+        color="rose"
+        label="Rose"
+        onRemove={() => alert("Removed")}
+      />
+      <Chip
+        size="sm"
+        color="golden"
+        label="Golden"
+        onRemove={() => alert("Removed")}
+      />
+    </div>
+  </div>
 );

package/src/stories/ContentMessage.stories.tsx

@@ -106,3 +106,42 @@ export const MultiParagraph: Story = {
     size: "md",
   },
 };
+
+export const ColorVariants: Story = {
+  render: () => (
+    <div className="s-grid s-grid-cols-1 s-gap-4 sm:s-grid-cols-2 lg:s-grid-cols-3">
+      {[
+        "primary",
+        "warning",
+        "success",
+        "highlight",
+        "info",
+        "green",
+        "blue",
+        "rose",
+        "golden",
+      ].map((variant) => (
+        <ContentMessage
+          key={variant}
+          title={`${variant.charAt(0).toUpperCase() + variant.slice(1)} Variant`}
+          variant={
+            variant as
+              | "primary"
+              | "warning"
+              | "success"
+              | "highlight"
+              | "info"
+              | "green"
+              | "blue"
+              | "rose"
+              | "golden"
+          }
+          size="md"
+        >
+          This is a {variant} variant message. It shows how the component looks
+          with this color scheme.
+        </ContentMessage>
+      ))}
+    </div>
+  ),
+};

package/src/stories/Dropdown.stories.tsx

@@ -609,7 +609,7 @@ function AttachFileDemo() {
               name="search"
               onChange={() => {}}
               onKeyDown={() => {}}
-              placeholder="Search Toolsets"
+              placeholder="Search Tools"
               value=""
             />
             <Button icon={PlusIcon} label="Add MCP Server" />

package/src/stories/Playground.stories.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 
-import { Button, FlexSplitButton } from "@sparkle/components";
+import { Avatar, Button, FlexSplitButton, Icon } from "@sparkle/components";
 import { ArrowUpIcon, ChevronDownIcon } from "@sparkle/icons/app";
+import { cn } from "@sparkle/lib";
 
 export default {
   title: "Playground/Demo",
@@ -9,7 +10,31 @@ export default {
 
 export const Demo = () => {
   return (
-    <div className="s-flex s-h-full s-w-full s-flex-col s-gap-2">
+    <div className="s-flex s-h-full s-w-full s-cursor-pointer s-flex-col s-gap-2">
+      <div className="s-group s-flex s-max-w-[200px] s-items-center s-gap-2 s-bg-muted-background s-p-4">
+        <Avatar
+          size="sm"
+          visual="https://lh3.googleusercontent.com/a/ACg8ocItxZ3wFv94own6Sh86W9zOFy4RA_L9A0NtNz2sM0uftazvbhU=s96-c"
+          clickable
+        />
+        <div className="s-flex s-flex-col s-items-start">
+          <span
+            className={cn(
+              "s-heading-sm s-transition-colors s-duration-200",
+              "s-text-foreground group-hover:s-text-primary-600 group-active:s-text-primary-950 dark:s-text-foreground-night dark:group-hover:s-text-muted-foreground-night dark:group-active:s-text-primary-950-night"
+            )}
+          >
+            Edouard
+          </span>
+          <span className="-s-mt-1 s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
+            Dust
+          </span>
+        </div>
+        <Icon
+          visual={ChevronDownIcon}
+          className="s-text-muted-foreground group-hover:s-text-primary-400 group-active:s-text-primary-950 dark:s-text-foreground-night dark:group-hover:s-text-muted-foreground-night dark:group-active:s-text-primary-950-night"
+        />
+      </div>
       <div className="s-flex s-gap-3">
         <FlexSplitButton
           label="Send"