@dust-tt/sparkle 0.2.211 → 0.2.213

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.211",
+  "version": "0.2.213",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/components/Checkbox.tsx

@@ -5,10 +5,12 @@ import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
 
+export type CheckBoxCheckedStatus = "checked" | "unchecked" | "partial";
+
 export interface CheckboxProps {
   variant?: "selectable" | "checkable";
   size?: "xs" | "sm";
-  checked?: "checked" | "unchecked" | "partial";
+  checked?: CheckBoxCheckedStatus;
   disabled?: boolean;
   onChange: (checked: boolean) => void;
   className?: string;

package/src/components/ContentMessage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ComponentType } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
@@ -19,6 +19,7 @@ export interface ContentMessageProps {
     | "pink"
     | "action"
     | "red";
+  icon?: ComponentType;
 }
 
 export function ContentMessage({
@@ -27,6 +28,7 @@ export function ContentMessage({
   children,
   size = "md",
   className = "",
+  icon,
 }: ContentMessageProps) {
   const variantClasses = {
     border: `s-border-${variant}-200`,
@@ -52,7 +54,7 @@ export function ContentMessage({
         <>
           <Icon
             size="md"
-            visual={InformationCircleIcon}
+            visual={icon ?? InformationCircleIcon}
             className={classNames("s-shrink-0", variantClasses.iconColor)}
           />
           <div className="s-flex s-flex-col s-gap-2">

package/src/components/Tree.tsx

@@ -177,7 +177,7 @@ Tree.Item = function ({
             }}
           />
         )}
-        {type === "leaf" && <div className="s-w-5"></div>}
+        {type === "leaf" && <div className="s-w-4"></div>}
         {checkbox && <Checkbox {...checkbox} size="xs" />}
         <Icon
           visual={visual}

package/src/stories/ContentMessage.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { ContentMessage } from "../index_with_tw_base";
+import { ContentMessage, HeartIcon } from "../index_with_tw_base";
 
 const meta = {
   title: "Components/ContentMessage",
@@ -19,8 +19,8 @@ export const ContentExample = () => (
     <ContentMessage title="This is a title" variant="pink">
       This is a message. It can be multiple lines long.
     </ContentMessage>
-    <ContentMessage title="This is a title" variant="emerald">
-      This is a message. It can be multiple lines long.
+    <ContentMessage title="This is a cat" variant="purple" icon={HeartIcon}>
+      This is a Soupinou. It is cute.
     </ContentMessage>
     <h2>Size "sm"</h2>
     <ContentMessage title="This is a title" size="sm">