@dust-tt/sparkle 0.2.470 → 0.2.472-rc1

package/dist/sparkle.css

@@ -1608,6 +1608,10 @@ select {
   width: var(--radix-popover-trigger-width);
 }
 
+.s-w-\[--radix-popper-anchor-width\] {
+  width: var(--radix-popper-anchor-width);
+}
+
 .s-w-\[100\%\] {
   width: 100%;
 }
@@ -1726,6 +1730,10 @@ select {
   max-width: 56rem;
 }
 
+.s-max-w-\[200px\] {
+  max-width: 200px;
+}
+
 .s-max-w-\[380px\] {
   max-width: 380px;
 }
@@ -2381,6 +2389,10 @@ select {
   border-color: rgb(255 195 223 / 0.3);
 }
 
+.s-border-border-warning\/40 {
+  border-color: rgb(255 195 223 / 0.4);
+}
+
 .s-border-border\/0 {
   border-color: rgb(238 238 239 / 0);
 }
@@ -4888,6 +4900,10 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.s-ring-inset {
+  --tw-ring-inset: inset;
+}
+
 .s-ring-highlight-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(122 198 255 / var(--tw-ring-opacity));
@@ -5168,6 +5184,14 @@ select {
   color: rgb(17 20 24 / var(--tw-text-opacity));
 }
 
+.placeholder\:s-italic::-moz-placeholder {
+  font-style: italic;
+}
+
+.placeholder\:s-italic::placeholder {
+  font-style: italic;
+}
+
 .placeholder\:s-text-muted-foreground::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(84 93 108 / var(--tw-text-opacity));
@@ -5530,6 +5554,10 @@ select {
   --tw-ring-color: rgb(225 67 34 / 0.1);
 }
 
+.focus-visible\:s-ring-offset-0:focus-visible {
+  --tw-ring-offset-width: 0px;
+}
+
 .focus-visible\:s-ring-offset-1:focus-visible {
   --tw-ring-offset-width: 1px;
 }
@@ -5733,6 +5761,16 @@ select {
   color: rgb(28 145 255 / var(--tw-text-opacity));
 }
 
+.s-group:hover .group-hover\:s-text-primary-400 {
+  --tw-text-opacity: 1;
+  color: rgb(150 156 165 / var(--tw-text-opacity));
+}
+
+.s-group:hover .group-hover\:s-text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(84 93 108 / var(--tw-text-opacity));
+}
+
 .s-group\/card:hover .group-hover\/card\:s-opacity-100 {
   opacity: 1;
 }
@@ -5764,6 +5802,11 @@ select {
   background-color: rgb(238 238 239 / 0.6);
 }
 
+.s-group:active .group-active\:s-text-primary-950 {
+  --tw-text-opacity: 1;
+  color: rgb(17 20 24 / var(--tw-text-opacity));
+}
+
 .s-group:active .group-active\:s-brightness-90 {
   --tw-brightness: brightness(.9);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -8409,10 +8452,20 @@ select {
   color: rgb(28 145 255 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .s-group:hover .dark\:group-hover\:s-text-muted-foreground-night) {
+  --tw-text-opacity: 1;
+  color: rgb(150 156 165 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .s-group:active .dark\:group-active\:s-bg-primary-100-night\/60) {
   background-color: rgb(28 34 45 / 0.6);
 }
 
+:is(.s-dark .s-group:active .dark\:group-active\:s-text-primary-950-night) {
+  --tw-text-opacity: 1;
+  color: rgb(238 238 239 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:data-\[state\=checked\]\:s-bg-primary-night[data-state=checked]) {
   --tw-bg-opacity: 1;
   background-color: rgb(211 213 217 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.470",
+  "version": "0.2.472-rc1",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Button.tsx

@@ -35,8 +35,8 @@ export type ButtonSizeType = (typeof BUTTON_SIZES)[number];
 // Define button styling with cva
 const buttonVariants = cva(
   cn(
-    "s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-ring-offset-background s-transition-colors",
-    "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-2",
+    "s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-ring-offset-background s-transition-colors s-ring-inset",
+    "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-0",
     "dark:focus-visible:s-ring-0 dark:focus-visible:s-ring-offset-1"
   ),
   {

package/src/components/Dropdown.tsx

@@ -1,6 +1,7 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 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";
@@ -214,26 +215,55 @@ DropdownMenuSubContent.displayName =
 interface DropdownMenuContentProps
   extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
   mountPortal?: boolean;
+  mountPortalContainer?: HTMLElement;
 }
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   DropdownMenuContentProps
->(({ className, sideOffset = 4, mountPortal = true, ...props }, ref) => {
-  const content = (
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(menuStyleClasses.container, "s-shadow-md", className)}
-      {...props}
-    />
-  );
-  return mountPortal ? (
-    <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>
-  ) : (
-    content
-  );
-});
+>(
+  (
+    {
+      className,
+      sideOffset = 4,
+      mountPortal = true,
+      mountPortalContainer,
+      ...props
+    },
+    ref
+  ) => {
+    const content = (
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(menuStyleClasses.container, "s-shadow-md", className)}
+        {...props}
+      />
+    );
+
+    const [container, setContainer] = React.useState<Element | undefined>(
+      mountPortalContainer
+    );
+
+    React.useEffect(() => {
+      if (mountPortal && !container) {
+        const dialogElements = document.querySelectorAll(
+          ".s-sheet[role=dialog][data-state=open]"
+        );
+        const defaultContainer = dialogElements[dialogElements.length - 1];
+        setContainer(defaultContainer);
+      }
+    }, []);
+
+    return mountPortal ? (
+      <DropdownMenuPrimitive.Portal container={container}>
+        {content}
+      </DropdownMenuPrimitive.Portal>
+    ) : (
+      content
+    );
+  }
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 export type DropdownMenuItemProps = MutuallyExclusiveProps<
@@ -412,7 +442,10 @@ const DropdownMenuShortcut = ({
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
-interface DropdownMenuSearchbarProps extends SearchInputProps {}
+interface DropdownMenuSearchbarProps extends SearchInputProps {
+  button?: React.ReactNode;
+  autoFocus?: boolean;
+}
 
 const DropdownMenuSearchbar = React.forwardRef<
   HTMLInputElement,
@@ -427,18 +460,34 @@ const DropdownMenuSearchbar = React.forwardRef<
       name,
       className,
       disabled = false,
+      button,
+      autoFocus,
     },
     ref
   ) => {
+    const internalRef = useRef<HTMLInputElement>(null);
+    React.useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+      ref,
+      () => internalRef.current
+    );
+
+    React.useEffect(() => {
+      if (autoFocus) {
+        setTimeout(() => {
+          internalRef.current?.focus();
+        }, 0);
+      }
+    }, [autoFocus]);
+
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
       e.stopPropagation();
       onKeyDown?.(e);
     };
 
     return (
-      <div className={cn("s-px-1 s-py-1", className)}>
+      <div className={cn("s-flex s-gap-1.5 s-p-1.5", className)}>
         <SearchInput
-          ref={ref}
+          ref={internalRef}
           placeholder={placeholder}
           name={name}
           value={value}
@@ -446,6 +495,7 @@ const DropdownMenuSearchbar = React.forwardRef<
           onKeyDown={handleKeyDown}
           disabled={disabled}
         />
+        {button}
       </div>
     );
   }

package/src/components/Input.tsx

@@ -45,7 +45,7 @@ const stateVariantStyles: Record<InputStateType, string> = {
     "disabled:s-border-border dark:disabled:s-border-border-night"
   ),
   error: cn(
-    "s-border-border-warning/30 dark:s-border-border-warning-night/60",
+    "s-border-border-warning/40 dark:s-border-border-warning-night/60",
     "s-ring-warning/0 dark:s-ring-warning-night/0",
     "focus-visible:s-border-border-warning dark:focus-visible:s-border-border-warning-night",
     "focus-visible:s-outline-none focus-visible:s-ring-2",
@@ -69,7 +69,7 @@ const inputStyleClasses = cva(
     "s-bg-muted-background dark:s-bg-muted-background-night",
     "s-border focus-visible:s-ring",
     "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground",
-    "placeholder:s-text-muted-foreground dark:placeholder:s-text-muted-foreground-night"
+    "placeholder:s-text-muted-foreground placeholder:s-italic dark:placeholder:s-text-muted-foreground-night"
   ),
   {
     variants: {
@@ -110,7 +110,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         )}
         <input
           ref={ref}
-          className={cn(inputStyleClasses({ state }), className)}
+          className={cn(
+            "s-ring-inset",
+            inputStyleClasses({ state }),
+            className
+          )}
           data-1p-ignore={props.type !== "password"}
           value={value ?? undefined}
           disabled={disabled}

package/src/components/SearchDropdownMenu.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { useRef, useState } from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@sparkle/components/Dropdown";
+import { SearchInput } from "@sparkle/components/SearchInput";
+
+type SearchDropdownMenuProps = {
+  searchInputValue: string;
+  setSearchInputValue: (value: string) => void;
+  children: React.ReactNode;
+  disabled?: boolean;
+  minLengthToOpen?: number;
+};
+
+export function SearchDropdownMenu({
+  searchInputValue,
+  setSearchInputValue,
+  disabled,
+  minLengthToOpen = 1,
+  children,
+}: SearchDropdownMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <DropdownMenu
+      open={isOpen && searchInputValue.length >= minLengthToOpen}
+      modal={false}
+      onOpenChange={(open) => {
+        if (!open) {
+          setIsOpen(open);
+        }
+      }}
+    >
+      <DropdownMenuTrigger asChild>
+        <SearchInput
+          ref={searchInputRef}
+          name="search"
+          placeholder="Search"
+          value={searchInputValue}
+          disabled={disabled}
+          onFocus={() => {
+            if (!isOpen) {
+              setIsOpen(searchInputValue.length >= minLengthToOpen);
+              setTimeout(() => {
+                searchInputRef.current?.focus();
+              }, 0);
+            }
+          }}
+          onChange={(value) => {
+            setSearchInputValue(value);
+            setIsOpen(value.length >= minLengthToOpen);
+            setTimeout(() => {
+              searchInputRef.current?.focus();
+            }, 0);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              setIsOpen(false);
+            }
+            if (e.key === "Tab" || e.key === "ArrowDown") {
+              e.preventDefault();
+              const firstItem = document.querySelector('[role="menuitem"]');
+              if (firstItem instanceof HTMLElement) {
+                firstItem.focus();
+              }
+            }
+          }}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        side="bottom"
+        align="start"
+        className="s-w-[--radix-popper-anchor-width]"
+        onFocusOutside={(e) => {
+          // Prevent closing when search input is focused
+          if (e.target === searchInputRef.current) {
+            e.preventDefault();
+          }
+        }}
+        onInteractOutside={(e) => {
+          // Prevent closing when clicking on the search input
+          if (e.target === searchInputRef.current) {
+            e.preventDefault();
+          }
+        }}
+      >
+        {children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/SearchInput.tsx

@@ -222,7 +222,7 @@ function BaseSearchInputWithPopover<T>(
         mountPortalContainer={mountPortalContainer}
       >
         <div className="s-flex s-flex-col">
-          {items.length > 0 && (
+          {items.length > 0 && (displayItemCount || onSelectAll) && (
             <div className="s-flex s-items-center s-justify-between s-p-2 s-text-sm s-text-gray-500">
               <div>
                 {displayItemCount && (

package/src/components/index.ts

@@ -118,6 +118,7 @@ export {
   ResizablePanelGroup,
 } from "./Resizable";
 export { ScrollArea, ScrollBar } from "./ScrollArea";
+export { SearchDropdownMenu } from "./SearchDropdownMenu";
 export { SearchInput, SearchInputWithPopover } from "./SearchInput";
 export { Separator } from "./Separator";
 export {

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"