@dust-tt/sparkle 0.5.0 → 0.5.2-rc-1

package/src/components/ScrollArea.tsx

@@ -4,8 +4,9 @@ import { useMemo } from "react";
 
 import { cn } from "@sparkle/lib/utils";
 
-interface ScrollAreaProps
-  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.Root
+> {
   hideScrollBar?: boolean;
   orientation?: "vertical" | "horizontal";
   scrollBarClassName?: string;
@@ -128,10 +129,9 @@ const scrollBarSizes = {
 
 type ScrollBarSize = keyof typeof scrollBarSizes;
 
-interface ScrollBarProps
-  extends React.ComponentPropsWithoutRef<
-    typeof ScrollAreaPrimitive.ScrollAreaScrollbar
-  > {
+interface ScrollBarProps extends React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+> {
   size?: ScrollBarSize;
 }
 

package/src/components/Sheet.tsx

@@ -82,8 +82,9 @@ const sheetVariants = cva(
   }
 );
 
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {
+interface SheetContentProps extends React.ComponentPropsWithoutRef<
+  typeof SheetPrimitive.Content
+> {
   size?: SheetSizeType;
   trapFocusScope?: boolean;
   side?: SheetSideType;
@@ -300,8 +301,9 @@ const SheetFooter = ({
 };
 SheetFooter.displayName = "SheetFooter";
 
-interface SheetTitleProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> {
+interface SheetTitleProps extends React.ComponentPropsWithoutRef<
+  typeof SheetPrimitive.Title
+> {
   icon?: React.ComponentType;
 }
 

package/src/components/TextArea.tsx

@@ -7,8 +7,7 @@ const RESIZE_DIRECTIONS = ["none", "vertical", "horizontal", "both"] as const;
 
 type ResizeDirectionType = (typeof RESIZE_DIRECTIONS)[number];
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   resize?: ResizeDirectionType;
   error?: string | null;
   showErrorLabel?: boolean;

package/src/components/Timeline.tsx

@@ -82,7 +82,8 @@ function Timeline({
 }
 
 export interface TimelineItemProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof markerVariants> {
   title?: string;
   description?: React.ReactNode;

package/src/components/Tooltip.tsx

@@ -11,8 +11,9 @@ const TooltipPortal = TooltipPrimitive.Portal;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-interface TooltipContentProps
-  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+interface TooltipContentProps extends React.ComponentPropsWithoutRef<
+  typeof TooltipPrimitive.Content
+> {
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
 }

package/src/components/markdown/CodeBlockWithExtendedSupport.tsx

@@ -1,4 +1,3 @@
-import mermaid from "mermaid";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import {
   amber,
@@ -176,7 +175,13 @@ const MermaidGraph: React.FC<{ chart: string }> = ({ chart }) => {
   const graphRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (graphRef.current) {
+    const renderMermaid = async () => {
+      if (!graphRef.current) {
+        return;
+      }
+
+      const mermaid = (await import("mermaid")).default;
+
       mermaid.initialize({
         startOnLoad: false,
         theme: "base",
@@ -278,8 +283,10 @@ const MermaidGraph: React.FC<{ chart: string }> = ({ chart }) => {
       });
 
       graphRef.current.textContent = chart;
-      void mermaid.run(undefined);
-    }
+      await mermaid.run(undefined);
+    };
+
+    void renderMermaid();
   }, [chart]);
 
   return (
@@ -352,6 +359,7 @@ export function CodeBlockWithExtendedSupport({
     if (language === "mermaid") {
       const checkValidMermaid = async () => {
         try {
+          const mermaid = (await import("mermaid")).default;
           await mermaid.parse(validChildrenContent);
           setIsValidMermaid(true);
           setShowMermaid(true);

package/src/stories/Avatar.stories.tsx

@@ -425,6 +425,85 @@ export const AvatarStackExample: Story = {
           ]}
         />
       </div>
+
+      <div className="s-mt-8 s-text-lg s-font-semibold">
+        Vertical Orientation
+      </div>
+      <div className="s-flex s-flex-row s-items-start s-gap-4">
+        <Avatar.Stack
+          size="xs"
+          nbVisibleItems={3}
+          isRounded
+          orientation="vertical"
+          avatars={[
+            {
+              name: "Isabelle Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+            },
+            {
+              name: "Rafael Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+            },
+            {
+              name: "Aria Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
+            },
+            {
+              name: "Omar Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+            },
+          ]}
+        />
+
+        <Avatar.Stack
+          size="sm"
+          nbVisibleItems={4}
+          isRounded
+          orientation="vertical"
+          avatars={[
+            {
+              name: "Isabelle Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+            },
+            {
+              name: "Rafael Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+            },
+            {
+              name: "Aria Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
+            },
+            {
+              name: "Omar Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+            },
+          ]}
+        />
+
+        <Avatar.Stack
+          nbVisibleItems={3}
+          size="md"
+          orientation="vertical"
+          avatars={[
+            {
+              name: "Isabelle Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+            },
+            {
+              name: "Rafael Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+            },
+            {
+              name: "Aria Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
+            },
+            {
+              name: "Omar Doe",
+              visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+            },
+          ]}
+        />
+      </div>
     </div>
   ),
 };

package/src/stories/NavigationList.stories.tsx

@@ -9,9 +9,12 @@ import {
   NavigationList,
   NavigationListItem,
   NavigationListItemAction,
+  NavigationListCollapsibleSection,
   NavigationListLabel,
+  NavigationListLabelButton,
   PencilSquareIcon,
   TrashIcon,
+  MoreIcon,
 } from "../index_with_tw_base";
 
 const meta = {
@@ -155,6 +158,151 @@ export const Demo = () => {
   );
 };
 
+export const CollapsibleSection = () => {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [conversationTitles, setConversationTitles] = useState<
+    { label: string; items: string[] }[]
+  >([]);
+
+  useEffect(() => {
+    setConversationTitles([
+      { label: "Today", items: getRandomTitles(5) },
+      { label: "Yesterday", items: getRandomTitles(10) },
+      { label: "Last Week", items: getRandomTitles(8) },
+    ]);
+  }, []);
+
+  const allItems = conversationTitles.flatMap((section) => section.items);
+
+  const getMoreMenu = (title: string) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <NavigationListItemAction />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem
+          label={`Rename ${title}`}
+          icon={PencilSquareIcon}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        />
+        <DropdownMenuItem
+          label="Delete"
+          icon={TrashIcon}
+          variant="warning"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+  return (
+    <div className="s-flex s-h-[500px] s-w-full s-flex-row s-gap-12 s-bg-muted">
+      <div className="s-h-[500px] s-w-[240px]">
+        <NavigationList className="s-relative s-h-full s-w-full s-px-3 dark:s-bg-muted-background-night">
+          {conversationTitles.map((section, sectionIndex) => (
+            <>
+              <NavigationListLabel label="Hello" key={0} />
+              <NavigationListCollapsibleSection
+                key={sectionIndex}
+                label={section.label}
+                defaultOpen={sectionIndex === 0}
+              >
+                {section.items.map((title, index) => {
+                  const itemIndex = allItems.indexOf(title);
+                  const getStatus = (idx: number) => {
+                    if (idx % 5 === 0) {
+                      return "unread";
+                    }
+                    if (idx % 3 === 0) {
+                      return "blocked";
+                    }
+                    return "idle";
+                  };
+                  return (
+                    <NavigationListItem
+                      key={index}
+                      href={index % 2 === 0 ? "#" : undefined}
+                      selected={itemIndex === selectedIndex}
+                      onClick={(e) => {
+                        if (!e.defaultPrevented) {
+                          e.preventDefault();
+                          setSelectedIndex(itemIndex);
+                        }
+                      }}
+                      label={title}
+                      className="s-w-full"
+                      moreMenu={getMoreMenu(title)}
+                      status={getStatus(index)}
+                    />
+                  );
+                })}
+              </NavigationListCollapsibleSection>
+            </>
+          ))}
+        </NavigationList>
+      </div>
+      <div className="s-h-[500px] s-w-[240px]">
+        <NavigationList className="s-relative s-h-full s-w-full s-px-3 dark:s-bg-muted-background-night">
+          {conversationTitles.map((section, sectionIndex) => (
+            <NavigationListCollapsibleSection
+              key={sectionIndex}
+              label={section.label}
+              defaultOpen={sectionIndex === 0}
+              action={
+                <NavigationListLabelButton
+                  icon={MoreIcon}
+                  aria-label="Add new item"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // Add action logic here
+                  }}
+                />
+              }
+            >
+              {section.items.map((title, index) => {
+                const itemIndex = allItems.indexOf(title);
+                const getStatus = (idx: number) => {
+                  if (idx % 5 === 0) {
+                    return "unread";
+                  }
+                  if (idx % 3 === 0) {
+                    return "blocked";
+                  }
+                  return "idle";
+                };
+                return (
+                  <NavigationListItem
+                    key={index}
+                    href={index % 2 === 0 ? "#" : undefined}
+                    selected={itemIndex === selectedIndex}
+                    onClick={(e) => {
+                      if (!e.defaultPrevented) {
+                        e.preventDefault();
+                        setSelectedIndex(itemIndex);
+                      }
+                    }}
+                    label={title}
+                    className="s-w-full"
+                    moreMenu={getMoreMenu(title)}
+                    status={getStatus(index)}
+                  />
+                );
+              })}
+            </NavigationListCollapsibleSection>
+          ))}
+        </NavigationList>
+      </div>
+    </div>
+  );
+};
+
 const fakeTitles = [
   "Project Kickoff Meeting",
   "Budget Review Discussion",

package/src/styles/global.css

@@ -24,7 +24,8 @@
 
 @layer utilities {
   .s-checkerboard {
-    background-image: linear-gradient(
+    background-image:
+      linear-gradient(
         45deg,
         var(--tw-checker-color) 25%,
         transparent 25%,