@dust-tt/sparkle 0.2.474-rc-4 → 0.2.474-rc

package/src/components/DoubleIcon.tsx

@@ -19,6 +19,32 @@ const positionVariants = cva("s-flex s-absolute", {
   },
 });
 
+const sizeVariants = cva("s-relative", {
+  variants: {
+    size: {
+      md: "s-h-6 s-w-6",
+      lg: "s-h-8 s-w-8 s-p-0.5",
+      xl: "s-h-10 s-w-10",
+    },
+  },
+  defaultVariants: {
+    size: "lg",
+  },
+});
+
+const iconSizeVariants = cva("s-absolute", {
+  variants: {
+    size: {
+      md: "s-bottom-0 s-right-0",
+      lg: "s-bottom-0 s-right-0",
+      xl: "s-bottom-0 s-right-0",
+    },
+  },
+  defaultVariants: {
+    size: "lg",
+  },
+});
+
 export interface DoubleIconProps extends VariantProps<typeof positionVariants> {
   mainIconProps: IconProps;
   secondaryIconProps: IconProps;
@@ -41,3 +67,33 @@ export const DoubleIcon = ({
     </div>
   );
 };
+
+export interface SimpleDoubleIconProps
+  extends VariantProps<typeof sizeVariants> {
+  mainIcon: React.ComponentType;
+  secondaryIcon: React.ComponentType;
+  size?: "md" | "lg" | "xl";
+  className?: string;
+}
+
+export const SimpleDoubleIcon = ({
+  mainIcon,
+  secondaryIcon,
+  className,
+  size = "lg",
+}: SimpleDoubleIconProps) => {
+  return (
+    <div className={cn(sizeVariants({ size }), className)}>
+      <Icon
+        className="s-text-foreground dark:s-text-foreground-night"
+        size={size === "md" ? "sm" : size === "lg" ? "md" : "lg"}
+        visual={mainIcon}
+      />
+      <Icon
+        size={size === "md" ? "xs" : size === "lg" ? "xs" : "md"}
+        visual={secondaryIcon}
+        className={cn("s-absolute", iconSizeVariants({ size }))}
+      />
+    </div>
+  );
+};

package/src/components/Dropdown.tsx

@@ -3,10 +3,8 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { useRef } from "react";
 
-import { DoubleIcon } from "@sparkle/components/DoubleIcon";
 import { Icon } from "@sparkle/components/Icon";
 import { LinkWrapper, LinkWrapperProps } from "@sparkle/components/LinkWrapper";
-import { ScrollArea } from "@sparkle/components/ScrollArea";
 import { SearchInput, SearchInputProps } from "@sparkle/components/SearchInput";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
@@ -22,7 +20,7 @@ export const menuStyleClasses = {
     "s-border s-border-border dark:s-border-border-night",
     "s-bg-background dark:s-bg-muted-background-night",
     "s-text-foreground dark:s-text-foreground-night",
-    "s-z-50 s-min-w-[8rem]",
+    "s-z-50 s-min-w-[8rem] s-overflow-hidden",
     "data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0 data-[state=closed]:s-zoom-out-95 data-[state=open]:s-zoom-in-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2"
   ),
   item: cva(
@@ -85,7 +83,7 @@ const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
 interface LabelAndIconProps {
   label: string;
-  icon?: React.ComponentType;
+  icon?: React.ComponentType | React.ReactNode;
 }
 
 type Simplify<T> = { [K in keyof T]: T[K] };
@@ -100,19 +98,27 @@ type MutuallyExclusiveProps<BaseProps, ExtraProps> = Simplify<
 
 interface ItemWithLabelIconAndDescriptionProps {
   label?: string;
-  icon?: React.ComponentType;
-  extraIcon?: React.ComponentType;
+  icon?: React.ComponentType | React.ReactNode;
   description?: string;
   children?: React.ReactNode;
   truncate?: boolean;
 }
 
+const renderIcon = (
+  icon: React.ComponentType | React.ReactNode,
+  size: "xs" | "sm" = "xs"
+) => {
+  if (!icon) {
+    return null;
+  }
+  return typeof icon === "function" ? <Icon size={size} visual={icon} /> : icon;
+};
+
 const ItemWithLabelIconAndDescription = <
   T extends ItemWithLabelIconAndDescriptionProps,
 >({
   label,
   icon,
-  extraIcon,
   description,
   truncate,
   children,
@@ -121,30 +127,7 @@ const ItemWithLabelIconAndDescription = <
     <>
       {label && (
         <div className="s-grid s-grid-cols-[auto,1fr,auto] s-items-center s-gap-x-2.5">
-          {(icon || extraIcon) && (
-            <div
-              className={cn(
-                "s-flex",
-                description ? "s-items-start s-pt-0.5" : "s-items-center"
-              )}
-            >
-              {icon && extraIcon ? (
-                <DoubleIcon
-                  mainIconProps={{
-                    visual: icon,
-                    size: "sm",
-                  }}
-                  secondaryIconProps={{
-                    visual: extraIcon,
-                    size: "xs",
-                  }}
-                  position="bottom-right"
-                />
-              ) : icon ? (
-                <Icon size="sm" visual={icon} />
-              ) : null}
-            </div>
-          )}
+          {renderIcon(icon, "sm")}
           <div className="s-flex s-flex-col">
             <span className={truncate ? "s-line-clamp-1" : undefined}>
               {label}
@@ -187,7 +170,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   >
     {label && (
       <>
-        {icon && <Icon size="xs" visual={icon} />}
+        {renderIcon(icon)}
         {label}
         <span className={menuStyleClasses.subTrigger.default}>
           <Icon size="xs" visual={ChevronRightIcon} />
@@ -217,7 +200,6 @@ interface DropdownMenuContentProps
   extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
-  dropdownHeaders?: React.ReactNode;
 }
 
 const DropdownMenuContent = React.forwardRef<
@@ -230,8 +212,6 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset = 4,
       mountPortal = true,
       mountPortalContainer,
-      dropdownHeaders,
-      children,
       ...props
     },
     ref
@@ -240,26 +220,9 @@ const DropdownMenuContent = React.forwardRef<
       <DropdownMenuPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}
-        className={cn(
-          menuStyleClasses.container,
-          "s-flex s-flex-col s-p-0 s-shadow-md",
-          className
-        )}
+        className={cn(menuStyleClasses.container, "s-shadow-md", className)}
         {...props}
-      >
-        <div className="s-sticky s-top-0 s-bg-background dark:s-bg-background-night">
-          {dropdownHeaders && dropdownHeaders}
-        </div>
-        <ScrollArea
-          className="s-w-full s-flex-1"
-          viewportClassName={cn(
-            "s-flex-1",
-            "s-max-h-[var(--radix-dropdown-menu-content-available-height)]"
-          )}
-        >
-          {children}
-        </ScrollArea>
-      </DropdownMenuPrimitive.Content>
+      />
     );
 
     const [container, setContainer] = React.useState<Element | undefined>(
@@ -294,7 +257,6 @@ export type DropdownMenuItemProps = MutuallyExclusiveProps<
   } & Omit<LinkWrapperProps, "children" | "className">,
   LabelAndIconProps & {
     description?: string;
-    extraIcon?: React.ComponentType;
     truncateText?: boolean;
   }
 >;
@@ -311,7 +273,6 @@ const DropdownMenuItem = React.forwardRef<
       className,
       inset,
       icon,
-      extraIcon,
       truncateText,
       label,
       href,
@@ -347,7 +308,6 @@ const DropdownMenuItem = React.forwardRef<
           <ItemWithLabelIconAndDescription
             label={label}
             icon={icon}
-            extraIcon={extraIcon}
             description={description}
             truncate={truncateText}
           >

package/src/components/Tree.tsx

@@ -79,7 +79,7 @@ export function Tree({
 const treeItemStyleClasses = {
   base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-h-9",
   isNavigatableBase:
-    "s-rounded-xl s-pl-1 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
+    "s-rounded-xl s-pl-1.5 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
   isNavigatableUnselected: cn(
     "s-bg-primary-100/0 dark:s-bg-primary-100-night/0",
     "hover:s-bg-primary-100 dark:hover:s-bg-primary-100-night"

package/src/stories/DoubleIcon.stories.tsx

@@ -2,8 +2,10 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import { DoubleIcon } from "@sparkle/components";
+import { SimpleDoubleIcon } from "@sparkle/components/DoubleIcon";
 import {
   ChatBubbleBottomCenterTextIcon,
+  ChatBubbleThoughtIcon,
   CheckCircleIcon,
   DocumentIcon,
   FolderIcon,
@@ -13,7 +15,7 @@ import {
   StarIcon,
   UserIcon,
 } from "@sparkle/icons/app";
-import { SlackLogo } from "@sparkle/logo";
+import { DriveLogo, NotionLogo, SlackLogo } from "@sparkle/logo";
 
 const meta = {
   title: "Primitives/DoubleIcon",
@@ -24,6 +26,57 @@ export default meta;
 
 export const IconPositions = () => (
   <div className="s-flex s-flex-col s-gap-8">
+    <div className="s-flex s-items-center s-gap-8">
+      <SimpleDoubleIcon
+        size="xl"
+        mainIcon={FolderIcon}
+        secondaryIcon={DriveLogo}
+      />{" "}
+      <SimpleDoubleIcon
+        size="xl"
+        mainIcon={DocumentIcon}
+        secondaryIcon={NotionLogo}
+      />{" "}
+      <SimpleDoubleIcon
+        size="xl"
+        mainIcon={ChatBubbleThoughtIcon}
+        secondaryIcon={SlackLogo}
+      />
+    </div>
+    <div className="s-flex s-items-center s-gap-8">
+      <SimpleDoubleIcon
+        size="lg"
+        mainIcon={FolderIcon}
+        secondaryIcon={DriveLogo}
+      />{" "}
+      <SimpleDoubleIcon
+        size="lg"
+        mainIcon={DocumentIcon}
+        secondaryIcon={NotionLogo}
+      />{" "}
+      <SimpleDoubleIcon
+        size="lg"
+        mainIcon={ChatBubbleThoughtIcon}
+        secondaryIcon={SlackLogo}
+      />
+    </div>
+    <div className="s-flex s-items-center s-gap-8">
+      <SimpleDoubleIcon
+        size="md"
+        mainIcon={FolderIcon}
+        secondaryIcon={DriveLogo}
+      />{" "}
+      <SimpleDoubleIcon
+        size="md"
+        mainIcon={DocumentIcon}
+        secondaryIcon={NotionLogo}
+      />{" "}
+      <SimpleDoubleIcon
+        size="md"
+        mainIcon={ChatBubbleThoughtIcon}
+        secondaryIcon={SlackLogo}
+      />
+    </div>
     <div className="s-flex s-items-center s-gap-16">
       <div className="s-flex s-flex-col s-items-center s-gap-2">
         <DoubleIcon
@@ -93,7 +146,6 @@ export const IconPositions = () => (
         <span className="s-text-xs s-text-muted-foreground">top-left</span>
       </div>
     </div>
-
     <div className="s-flex s-items-center s-gap-16">
       <div className="s-flex s-flex-col s-items-center s-gap-2">
         <DoubleIcon

package/src/stories/Dropdown.stories.tsx

@@ -2,6 +2,7 @@ import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
 import type { Meta } from "@storybook/react";
 import React from "react";
 
+import { SimpleDoubleIcon } from "@sparkle/components/DoubleIcon";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -12,7 +13,6 @@ import {
   DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
-  DropdownMenuSearchbar,
   DropdownMenuSeparator,
   DropdownMenuStaticItem,
   DropdownMenuSub,
@@ -56,6 +56,7 @@ import {
   MagnifyingGlassIcon,
   PlusIcon,
   RobotIcon,
+  ScrollArea,
   SearchInput,
   SuitcaseIcon,
   UserGroupIcon,
@@ -518,77 +519,84 @@ function AttachFileDemo() {
             <Button icon={ArrowUpOnSquareIcon} label="Upload File" />
           </div>
           <DropdownMenuSeparator />
-          {searchText ? (
-            filteredItems.map((item) => {
-              const randomMainIcon =
-                mainIcons[Math.floor(Math.random() * mainIcons.length)];
-              const randomExtraIcon =
-                extraIcons[Math.floor(Math.random() * extraIcons.length)];
-              return (
-                <DropdownMenuItem
-                  key={item}
-                  label={item}
-                  description="Company Space/Notion"
-                  icon={randomMainIcon}
-                  extraIcon={randomExtraIcon}
-                  onClick={() => {
-                    setSelectedItem(item);
-                    setSearchText("");
-                  }}
-                  truncateText
-                />
-              );
-            })
-          ) : (
-            <div className="s-flex s-h-full s-w-full s-items-center s-justify-center s-py-8">
-              <div className="s-flex s-flex-col s-items-center s-justify-center s-gap-0 s-text-center s-text-base s-font-semibold s-text-primary-400">
-                <Icon visual={MagnifyingGlassIcon} size="sm" />
-                Search in Dust
+          <ScrollArea className="s-h-[380px]">
+            {searchText ? (
+              filteredItems.map((item) => {
+                const randomMainIcon =
+                  mainIcons[Math.floor(Math.random() * mainIcons.length)];
+                const randomExtraIcon =
+                  extraIcons[Math.floor(Math.random() * extraIcons.length)];
+                return (
+                  <DropdownMenuItem
+                    key={item}
+                    label={item}
+                    description="Company Space/Notion"
+                    icon={
+                      <SimpleDoubleIcon
+                        size="lg"
+                        mainIcon={randomMainIcon}
+                        secondaryIcon={randomExtraIcon}
+                      />
+                    }
+                    onClick={() => {
+                      setSelectedItem(item);
+                      setSearchText("");
+                    }}
+                    truncateText
+                  />
+                );
+              })
+            ) : (
+              <div className="s-flex s-h-full s-w-full s-items-center s-justify-center s-py-8">
+                <div className="s-flex s-flex-col s-items-center s-justify-center s-gap-0 s-text-center s-text-base s-font-semibold s-text-primary-400">
+                  <Icon visual={MagnifyingGlassIcon} size="sm" />
+                  Search in Dust
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </ScrollArea>
         </DropdownMenuContent>
       </DropdownMenu>
       <DropdownMenu open={openAgents} onOpenChange={setOpenAgents}>
         <DropdownMenuTrigger asChild>
           <Button icon={RobotIcon} variant="outline" size="sm" isSelect />
         </DropdownMenuTrigger>
-        <DropdownMenuContent
-          className="s-h-96 s-w-[380px]"
-          dropdownHeaders={
-            <DropdownMenuSearchbar
+        <DropdownMenuContent className="s-w-[380px]">
+          <div className="s-flex s-gap-1.5 s-p-1.5">
+            <SearchInput
               ref={agentsSearchInputRef}
               name="search"
               onChange={() => {}}
               onKeyDown={() => {}}
               placeholder="Search Agents"
               value=""
-              button={<Button icon={PlusIcon} label="Create" />}
             />
-          }
-        >
+            <Button icon={PlusIcon} label="Create" />
+          </div>
           <DropdownMenuSeparator />
-          {filteredAgents.map((agent) => {
-            return (
-              <DropdownMenuItem
-                key={agent.name}
-                label={agent.name}
-                description={agent.description}
-                icon={() => (
-                  <Avatar
-                    size="sm"
-                    emoji={agent.emoji}
-                    backgroundColor={agent.backgroundColor}
-                  />
-                )}
-                onClick={() => {
-                  setSelectedItem(agent.name);
-                  setSearchText("");
-                }}
-                truncateText
-              />
-            );
-          })}
+          <ScrollArea className="s-h-[380px]">
+            {filteredAgents.map((agent) => {
+              return (
+                <DropdownMenuItem
+                  key={agent.name}
+                  label={agent.name}
+                  description={agent.description}
+                  icon={() => (
+                    <Avatar
+                      size="sm"
+                      emoji={agent.emoji}
+                      backgroundColor={agent.backgroundColor}
+                    />
+                  )}
+                  onClick={() => {
+                    setSelectedItem(agent.name);
+                    setSearchText("");
+                  }}
+                  truncateText
+                />
+              );
+            })}
+          </ScrollArea>
         </DropdownMenuContent>
       </DropdownMenu>
       <DropdownMenu open={openToolsets} onOpenChange={setOpenToolsets}>
@@ -600,36 +608,36 @@ function AttachFileDemo() {
             size="sm"
           />
         </DropdownMenuTrigger>
-        <DropdownMenuContent
-          className="s-h-96 s-w-[380px]"
-          dropdownHeaders={
-            <DropdownMenuSearchbar
+        <DropdownMenuContent className="s-w-[380px]">
+          <div className="s-flex s-gap-1.5 s-p-1.5">
+            <SearchInput
               ref={toolsetsSearchInputRef}
               name="search"
               onChange={() => {}}
               onKeyDown={() => {}}
               placeholder="Search Tools"
               value=""
-              button={<Button icon={PlusIcon} label="Add MCP Server" />}
             />
-          }
-        >
+            <Button icon={PlusIcon} label="Add MCP Server" />
+          </div>
           <DropdownMenuSeparator />
-          {filteredToolsetList.map((toolset) => {
-            return (
-              <DropdownMenuItem
-                key={toolset.name}
-                label={toolset.name}
-                description={toolset.description}
-                icon={() => <Avatar size="sm" icon={toolset.icon} />}
-                onClick={() => {
-                  setSelectedItem(toolset.name);
-                  setSearchText("");
-                }}
-                truncateText
-              />
-            );
-          })}
+          <ScrollArea className="s-h-[380px]">
+            {filteredToolsetList.map((toolset) => {
+              return (
+                <DropdownMenuItem
+                  key={toolset.name}
+                  label={toolset.name}
+                  description={toolset.description}
+                  icon={() => <Avatar size="sm" icon={toolset.icon} />}
+                  onClick={() => {
+                    setSelectedItem(toolset.name);
+                    setSearchText("");
+                  }}
+                  truncateText
+                />
+              );
+            })}
+          </ScrollArea>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>