@dust-tt/sparkle 0.5.10 → 0.5.12

package/src/icons/app/Inbox.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgInbox = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="M22 17.5 12 23 2 17.5V15l10 5.5L22 15v2.5Z" />
+    <path fill="currentColor" d="m22 13-10 5.5L2 13v-2.5L12 16l10-5.5V13Z" />
+    <path fill="currentColor" d="M22 6.5v2L12 14 2 8.5v-2L12 1l10 5.5Z" />
+  </svg>
+);
+export default SvgInbox;

package/src/icons/app/SpaceClosed.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgSpaceClosed = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M22 17.5 12 23 2 17.5v-9L12 14l10-5.5v9Zm0-11L12 12 2 6.5 12 1l10 5.5Z"
+    />
+  </svg>
+);
+export default SvgSpaceClosed;

package/src/icons/app/SpaceOpen.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgSpaceOpen = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M22 6.5v11L12 23 2 17.5v-11L12 1l10 5.5ZM4.073 7.64 12 12l7.926-4.36L12 3.282l-7.927 4.36Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgSpaceOpen;

package/src/icons/app/Spaces.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgSpaces = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M17 5.75V11l5 2.75v5.5L17 22l-5-2.75L7 22l-5-2.75v-5.5L7 11V5.75L12 3l5 2.75ZM4.073 14.89 7 16.5l2.926-1.61L7 13.282l-2.927 1.61Zm10 0L17 16.5l2.926-1.61L17 13.282l-2.927 1.61Zm-5-8L12 8.5l2.926-1.61L12 5.282l-2.927 1.61Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgSpaces;

package/src/icons/app/index.ts

@@ -88,6 +88,7 @@ export { default as HexagonIcon } from "./Hexagon";
 export { default as HistoryIcon } from "./History";
 export { default as HomeIcon } from "./Home";
 export { default as ImageIcon } from "./Image";
+export { default as InboxIcon } from "./Inbox";
 export { default as InformationCircleIcon } from "./InformationCircle";
 export { default as ItalicIcon } from "./Italic";
 export { default as LightbulbIcon } from "./Lightbulb";
@@ -129,6 +130,9 @@ export { default as SidebarLeftCloseIcon } from "./SidebarLeftClose";
 export { default as SidebarLeftOpenIcon } from "./SidebarLeftOpen";
 export { default as SidebarRightCloseIcon } from "./SidebarRightClose";
 export { default as SidebarRightOpenIcon } from "./SidebarRightOpen";
+export { default as SpaceClosedIcon } from "./SpaceClosed";
+export { default as SpaceOpenIcon } from "./SpaceOpen";
+export { default as SpacesIcon } from "./Spaces";
 export { default as SparklesIcon } from "./Sparkles";
 export { default as SquareIcon } from "./Square";
 export { default as Square3Stack3DIcon } from "./Square3Stack3D";

package/src/icons/src/app/inbox.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 17.5L12 23L2 17.5V15L12 20.5L22 15V17.5Z" fill="#111418"/>
+<path d="M22 13L12 18.5L2 13V10.5L12 16L22 10.5V13Z" fill="#111418"/>
+<path d="M22 6.5V8.5L12 14L2 8.5V6.5L12 1L22 6.5Z" fill="#111418"/>
+</svg>

package/src/icons/src/app/space-closed.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 17.5L12 23L2 17.5V8.5L12 14L22 8.5V17.5ZM22 6.5L12 12L2 6.5L12 1L22 6.5Z" fill="#111418"/>
+</svg>

package/src/icons/src/app/space-open.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 6.5V17.5L12 23L2 17.5V6.5L12 1L22 6.5ZM4.07324 7.64062L12 12L19.9258 7.64062L12 3.28125L4.07324 7.64062Z" fill="#111418"/>
+</svg>

package/src/icons/src/app/spaces.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 5.75V11L22 13.75V19.25L17 22L12 19.25L7 22L2 19.25V13.75L7 11V5.75L12 3L17 5.75ZM4.07324 14.8906L7 16.5L9.92578 14.8906L7 13.2812L4.07324 14.8906ZM14.0732 14.8906L17 16.5L19.9258 14.8906L17 13.2812L14.0732 14.8906ZM9.07324 6.89062L12 8.5L14.9258 6.89062L12 5.28125L9.07324 6.89062Z" fill="#111418"/>
+</svg>

package/src/stories/AttachmentChip.stories.tsx

@@ -85,7 +85,7 @@ export const LongLabel: Story = {
 export const WithDoubleIcon: Story = {
   args: {
     label: "My Drive Folder",
-    icon: { mainIcon: FolderIcon, secondaryIcon: DriveLogo, size: "sm" },
+    doubleIcon: { mainIcon: FolderIcon, secondaryIcon: DriveLogo, size: "sm" },
   },
   decorators: [
     (Story) => (
@@ -99,7 +99,11 @@ export const WithDoubleIcon: Story = {
 export const WithDoubleIconAndLink: Story = {
   args: {
     label: "Notion Document",
-    icon: { mainIcon: DocumentIcon, secondaryIcon: NotionLogo, size: "sm" },
+    doubleIcon: {
+      mainIcon: DocumentIcon,
+      secondaryIcon: NotionLogo,
+      size: "sm",
+    },
     href: "https://notion.so",
     target: "_blank",
   },

package/src/stories/Avatar.stories.tsx

@@ -257,7 +257,6 @@ export const AvatarStackExample: Story = {
         <Avatar.Stack
           size="xs"
           nbVisibleItems={3}
-          isRounded
           avatars={[
             {
               name: "Isabelle Doe",
@@ -321,7 +320,6 @@ export const AvatarStackExample: Story = {
         <Avatar.Stack
           size="sm"
           nbVisibleItems={4}
-          isRounded
           avatars={[
             {
               name: "Isabelle Doe",
@@ -433,16 +431,17 @@ export const AvatarStackExample: Story = {
         <Avatar.Stack
           size="xs"
           nbVisibleItems={3}
-          isRounded
           orientation="vertical"
           avatars={[
             {
               name: "Isabelle Doe",
               visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+              isRounded: true,
             },
             {
               name: "Rafael Doe",
               visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+              isRounded: true,
             },
             {
               name: "Aria Doe",
@@ -458,7 +457,6 @@ export const AvatarStackExample: Story = {
         <Avatar.Stack
           size="sm"
           nbVisibleItems={4}
-          isRounded
           orientation="vertical"
           avatars={[
             {
@@ -468,6 +466,7 @@ export const AvatarStackExample: Story = {
             {
               name: "Rafael Doe",
               visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+              isRounded: true,
             },
             {
               name: "Aria Doe",
@@ -476,6 +475,7 @@ export const AvatarStackExample: Story = {
             {
               name: "Omar Doe",
               visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+              isRounded: true,
             },
           ]}
         />
@@ -488,6 +488,7 @@ export const AvatarStackExample: Story = {
             {
               name: "Isabelle Doe",
               visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+              isRounded: true,
             },
             {
               name: "Rafael Doe",
@@ -500,6 +501,7 @@ export const AvatarStackExample: Story = {
             {
               name: "Omar Doe",
               visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+              isRounded: true,
             },
           ]}
         />

package/src/stories/NavigationList.stories.tsx

@@ -1,7 +1,10 @@
 import type { Meta } from "@storybook/react";
 import React, { useEffect, useState } from "react";
 
+import { ActionInboxIcon } from "@sparkle/icons/actions";
 import {
+  Avatar,
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -11,10 +14,14 @@ import {
   NavigationListItemAction,
   NavigationListCollapsibleSection,
   NavigationListLabel,
-  NavigationListLabelButton,
   PencilSquareIcon,
   TrashIcon,
   MoreIcon,
+  InboxIcon,
+  CollapsibleContent,
+  Collapsible,
+  CollapsibleTrigger,
+  PlusIcon,
 } from "../index_with_tw_base";
 
 const meta = {
@@ -50,7 +57,7 @@ export const Demo = () => {
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuItem
-          label={`Rename ${title}`}
+          label="Rename"
           icon={PencilSquareIcon}
           onClick={(e) => {
             e.preventDefault();
@@ -181,7 +188,7 @@ export const CollapsibleSection = () => {
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuItem
-          label={`Rename ${title}`}
+          label="Rename"
           icon={PencilSquareIcon}
           onClick={(e) => {
             e.preventDefault();
@@ -202,69 +209,111 @@ export const CollapsibleSection = () => {
   );
 
   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) => (
+    <div className="s-dark:bg-muted-background-night s-flex s-h-[800px] s-w-[240px] s-flex-row s-border-r s-border-border s-bg-muted-background">
+      <NavigationList className="s-relative s-h-full s-w-full s-px-2 s-py-2 dark:s-bg-muted-background-night">
+        <NavigationListItem
+          icon={InboxIcon}
+          label="Inbox"
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+          }}
+        />
+        <NavigationListLabel label="Hello" />
+        <NavigationListCollapsibleSection
+          label="Agents"
+          defaultOpen={true}
+          action={
             <>
-              <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>
+              <Button
+                size="xmini"
+                icon={PlusIcon}
+                variant="ghost"
+                aria-label="Add new item"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  // Add action logic here
+                }}
+              />
+              <Button
+                size="xmini"
+                icon={MoreIcon}
+                variant="ghost"
+                aria-label="Add new item"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  // Add action logic here
+                }}
+              />
             </>
+          }
+        >
+          {[
+            {
+              handle: "alex",
+              name: "Alex",
+              emoji: "🤖",
+              color: "s-bg-blue-300",
+            },
+            {
+              handle: "sam",
+              name: "Sam",
+              emoji: "🎨",
+              color: "s-bg-violet-300",
+            },
+            {
+              handle: "taylor",
+              name: "Taylor",
+              emoji: "🚀",
+              color: "s-bg-pink-300",
+            },
+            {
+              handle: "jordan",
+              name: "Jordan",
+              emoji: "⚡",
+              color: "s-bg-orange-300",
+            },
+            {
+              handle: "riley",
+              name: "Riley",
+              emoji: "🌟",
+              color: "s-bg-golden-300",
+            },
+            {
+              handle: "casey",
+              name: "Casey",
+              emoji: "💡",
+              color: "s-bg-emerald-300",
+            },
+          ].map((agent, index) => (
+            <NavigationListItem
+              key={agent.handle}
+              href="#"
+              selected={false}
+              onClick={(e) => {
+                e.preventDefault();
+              }}
+              label={agent.name}
+              avatar={
+                <Avatar
+                  size="xxs"
+                  name={agent.handle}
+                  emoji={agent.emoji}
+                  backgroundColor={agent.color}
+                />
+              }
+              className="s-w-full"
+            />
           ))}
-        </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>
+        {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);
@@ -296,9 +345,9 @@ export const CollapsibleSection = () => {
                 );
               })}
             </NavigationListCollapsibleSection>
-          ))}
-        </NavigationList>
-      </div>
+          </>
+        ))}
+      </NavigationList>
     </div>
   );
 };

package/dist/esm/icons/src/app/brain copie.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.5 2C6.567 2 5 3.567 5 5.5C5 5.68016 5.01364 5.85714 5.03993 6.02997C3.32436 6.25523 2 7.72295 2 9.5C2 10.4793 2.40223 11.3647 3.05051 12C2.40223 12.6353 2 13.5207 2 14.5C2 15.9018 2.82359 17.1104 4.01353 17.6693C4.00457 17.7785 4 17.8888 4 18C4 20.2091 5.79086 22 8 22C9.19469 22 10.2671 21.4762 11 20.6458V3.05051C10.3647 2.40223 9.47934 2 8.5 2ZM13 3.05051V20.6458C13.7329 21.4762 14.8053 22 16 22C18.2091 22 20 20.2091 20 18C20 17.8888 19.9954 17.7785 19.9865 17.6693C21.1764 17.1104 22 15.9018 22 14.5C22 13.5207 21.5978 12.6353 20.9495 12C21.5978 11.3647 22 10.4793 22 9.5C22 7.72295 20.6756 6.25523 18.9601 6.02997C18.9864 5.85714 19 5.68016 19 5.5C19 3.567 17.433 2 15.5 2C14.5207 2 13.6353 2.40223 13 3.05051Z" fill="#111418"/>
-</svg>

package/src/icons/src/app/brain copie.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.5 2C6.567 2 5 3.567 5 5.5C5 5.68016 5.01364 5.85714 5.03993 6.02997C3.32436 6.25523 2 7.72295 2 9.5C2 10.4793 2.40223 11.3647 3.05051 12C2.40223 12.6353 2 13.5207 2 14.5C2 15.9018 2.82359 17.1104 4.01353 17.6693C4.00457 17.7785 4 17.8888 4 18C4 20.2091 5.79086 22 8 22C9.19469 22 10.2671 21.4762 11 20.6458V3.05051C10.3647 2.40223 9.47934 2 8.5 2ZM13 3.05051V20.6458C13.7329 21.4762 14.8053 22 16 22C18.2091 22 20 20.2091 20 18C20 17.8888 19.9954 17.7785 19.9865 17.6693C21.1764 17.1104 22 15.9018 22 14.5C22 13.5207 21.5978 12.6353 20.9495 12C21.5978 11.3647 22 10.4793 22 9.5C22 7.72295 20.6756 6.25523 18.9601 6.02997C18.9864 5.85714 19 5.68016 19 5.5C19 3.567 17.433 2 15.5 2C14.5207 2 13.6353 2.40223 13 3.05051Z" fill="#111418"/>
-</svg>