@dust-tt/sparkle 0.5.12 → 0.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.5.12",
+  "version": "0.5.14",
   "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",
@@ -48,6 +48,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@chromatic-com/storybook": "^3.2.5",
+    "@radix-ui/react-focus-scope": "^1.0.3",
     "@storybook/addon-essentials": "^8.6.4",
     "@storybook/addon-interactions": "^8.6.4",
     "@storybook/addon-links": "^8.6.4",
@@ -68,14 +69,12 @@
     "@types/uuid": "^9.0.6",
     "@typescript-eslint/eslint-plugin": "^8.48.0",
     "@typescript-eslint/parser": "^8.48.0",
-    "@typescript/native-preview": "^7.0.0-dev.20251201.1",
-    "@tanstack/react-virtual": "^3.5.0",
-    "@radix-ui/react-focus-scope": "^1.0.3",
-    "autoprefixer": "^10.4.14",
+    "@typescript/native-preview": "^7.0.0-dev.20260105.1",
+    "autoprefixer": "^10.4.23",
     "babel-loader": "^9.1.3",
     "babel-preset-react-app": "^10.0.1",
     "copyfiles": "^2.4.1",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.25.12",
     "esbuild-plugin-postcss2": "^0.1.2",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
@@ -89,10 +88,10 @@
     "react-dom": "^18.3.1",
     "sass-loader": "^13.3.2",
     "storybook": "^8.6.4",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",
     "tsc-alias": "^1.8.10",
-    "typescript": "^5.4.5",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.0",
     "typescript-transform-paths": "^3.4.7",
     "uuid": "^9.0.1"
@@ -130,6 +129,7 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-table": "^8.13.0",
+    "@tanstack/react-virtual": "^3.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.5.2",

package/src/components/AnimatedText.tsx

@@ -14,6 +14,7 @@ const ANIMATED_TEXT_VARIANTS = [
   "blue",
   "rose",
   "golden",
+  "white",
 ] as const;
 
 type AnimatedTextVariantType = (typeof ANIMATED_TEXT_VARIANTS)[number];
@@ -59,6 +60,10 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "s-from-golden-800 s-via-golden-950 s-via-50% s-to-golden-800",
     "dark:s-from-golden-800-night dark:s-via-golden-950-night dark:s-via-50% dark:s-to-golden-800-night"
   ),
+  white: cn(
+    "s-from-primary-800 s-via-primary-950 s-via-50% s-to-primary-800",
+    "dark:s-from-primary-800-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-800-night"
+  ),
 };
 
 const animVariants = cva(
@@ -84,6 +89,7 @@ const animatedTextVariants: Record<AnimatedTextVariantType, string> = {
   blue: "s-text-sky-800 dark:s-text-sky-800-night",
   rose: "s-text-rose-800 dark:s-text-rose-800-night",
   golden: "s-text-golden-800 dark:s-text-rose-golden-night",
+  white: "s-text-primary-800 dark:s-text-primary-800-night",
 };
 
 const textVariants = cva("s-absolute s-inset-0", {

package/src/components/Chip.tsx

@@ -25,6 +25,7 @@ export const CHIP_COLORS = [
   "blue",
   "rose",
   "golden",
+  "white",
 ] as const;
 
 type ChipColorType = (typeof CHIP_COLORS)[number];
@@ -91,6 +92,12 @@ const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
         "dark:s-bg-golden-100-night dark:s-border-golden-200-night",
         "dark:s-text-golden-900-night"
       ),
+      white: cn(
+        "s-border s-bg-white s-border-border",
+        "s-text-primary-900",
+        "dark:s-bg-background-night dark:s-border-border-night",
+        "dark:s-text-primary-900-night"
+      ),
     },
   },
   defaultVariants: {
@@ -136,8 +143,40 @@ const closeIconVariants: Record<ChipColorType, string> = {
     "s-text-golden-900 hover:s-text-golden-700 active:s-text-golden-950",
     "dark:s-text-golden-900-night dark:hover:s-text-golden-700-night dark:active:s-text-golden-950-night"
   ),
+  white: cn(
+    "s-text-primary-700 hover:s-text-primary-500 active:s-text-primary-950",
+    "dark:s-text-primary-700-night dark:hover:s-text-primary-500-night dark:active:s-text-primary-950-night"
+  ),
 };
 
+interface ChipInternalButtonProps {
+  icon: ComponentType;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  size?: "xs" | "sm";
+  "aria-label"?: string;
+}
+
+const ChipButton = React.forwardRef<HTMLButtonElement, ChipInternalButtonProps>(
+  ({ icon, onClick, className, size = "xs", "aria-label": ariaLabel }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      onClick={onClick}
+      aria-label={ariaLabel}
+      className={cn(
+        "s-rounded-md s-p-0.5",
+        "s-transition-colors s-duration-200",
+        "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring",
+        className
+      )}
+    >
+      <Icon visual={icon} size={size} />
+    </button>
+  )
+);
+ChipButton.displayName = "ChipButton";
+
 type ChipBaseProps = {
   size?: ChipSizeType;
   color?: ChipColorType;
@@ -225,21 +264,16 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
           </span>
         )}
         {onRemove && (
-          <button
+          <ChipButton
+            icon={XMarkIcon}
+            size={size === "mini" ? "xs" : "sm"}
+            className={cn("-s-mr-1", closeIconVariants[color || "primary"])}
+            aria-label="Remove"
             onClick={(e) => {
               e.stopPropagation();
               onRemove();
             }}
-          >
-            <Icon
-              visual={XMarkIcon}
-              size={size === "mini" ? "xs" : (size as IconProps["size"])}
-              className={cn(
-                "s-transition-color -s-mr-1 s-duration-200",
-                closeIconVariants[color || "primary"]
-              )}
-            />
-          </button>
+          />
         )}
       </div>
     );

package/src/components/Citation.tsx

@@ -53,7 +53,7 @@ const Citation = React.forwardRef<HTMLDivElement, CitationProps>(
         variant={variant}
         size="sm"
         className={cn(
-          "s-min-w-24 s-relative s-flex s-flex-none s-flex-col s-overflow-hidden",
+          "s-relative s-flex s-min-w-24 s-flex-none s-flex-col s-overflow-hidden",
           // Use min() to maintain aspect ratio in grid mode (8% of width) while capping
           // padding at 3 (0.75rem) for list mode to prevent excessive top padding on wide items.
           "s-pt-[min(8%,theme(spacing.3))]",

package/src/components/DataTable.tsx

@@ -333,8 +333,9 @@ export function DataTable<TData extends TBaseData>({
   );
 }
 
-export interface ScrollableDataTableProps<TData extends TBaseData>
-  extends DataTableProps<TData> {
+export interface ScrollableDataTableProps<
+  TData extends TBaseData,
+> extends DataTableProps<TData> {
   maxHeight?: string | boolean;
   onLoadMore?: () => void;
   isLoading?: boolean;
@@ -871,8 +872,7 @@ interface BaseMenuItem {
 }
 
 interface RegularMenuItem
-  extends BaseMenuItem,
-    Omit<DropdownMenuItemProps, "children" | "label"> {
+  extends BaseMenuItem, Omit<DropdownMenuItemProps, "children" | "label"> {
   kind: "item";
 }
 
@@ -900,7 +900,7 @@ const renderSubmenuItem = (
     <DropdownMenuPortal>
       <DropdownMenuSubContent>
         <ScrollArea
-          className="s-min-w-24 s-flex s-max-h-72 s-flex-col"
+          className="s-flex s-max-h-72 s-min-w-24 s-flex-col"
           hideScrollBar
         >
           {item.items.map((subItem) => (

package/src/components/Dropdown.tsx

@@ -1,4 +1,5 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { useRef } from "react";
@@ -242,9 +243,8 @@ const DropdownMenuSubContent = React.forwardRef<
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
-interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Content
-> {
+interface DropdownMenuContentProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
   dropdownHeaders?: React.ReactNode;
@@ -487,10 +487,8 @@ const DropdownMenuRadioItem = React.forwardRef<
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-interface DropdownMenuTagItemProps extends Omit<
-  DropdownMenuItemProps,
-  "label" | "icon" | "onClick"
-> {
+interface DropdownMenuTagItemProps
+  extends Omit<DropdownMenuItemProps, "label" | "icon" | "onClick"> {
   label: string;
   size?: React.ComponentProps<typeof Chip>["size"];
   color?: React.ComponentProps<typeof Chip>["color"];
@@ -727,6 +725,104 @@ const DropdownMenuFilters = React.forwardRef<
 
 DropdownMenuFilters.displayName = "DropdownMenuFilters";
 
+// DropdownTooltip: Simple tooltip with consistent layout: optional media at top, description below.
+export interface DropdownTooltipProps {
+  description: string;
+  media?: React.ReactNode;
+}
+
+const DropdownTooltip = ({ description, media }: DropdownTooltipProps) => (
+  <div className="s-space-y-4">
+    {/* Media at top */}
+    {media && <div className="s-rounded-sm">{media}</div>}
+
+    {/* Description */}
+    <p className="text-foreground dark:text-foreground-night s-text-sm s-font-normal">
+      {description}
+    </p>
+  </div>
+);
+
+DropdownTooltip.displayName = "DropdownTooltip";
+
+export interface DropdownTooltipTriggerProps {
+  children: React.ReactElement;
+  className?: string;
+  description: string;
+  media?: React.ReactNode;
+  mountPortal?: boolean;
+  mountPortalContainer?: HTMLElement;
+  onVisibilityChange?: (visible: boolean) => void;
+  side?: "left" | "right" | "top" | "bottom";
+  sideOffset?: number;
+}
+
+const DropdownTooltipTrigger = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Trigger>,
+  DropdownTooltipTriggerProps
+>(
+  (
+    {
+      children,
+      className,
+      description,
+      media,
+      mountPortal = true,
+      mountPortalContainer,
+      onVisibilityChange,
+      side = "right",
+      sideOffset = 8,
+    },
+    ref
+  ) => {
+    const tooltipContent = (
+      <TooltipPrimitive.Content
+        side={side}
+        sideOffset={sideOffset}
+        className={cn(
+          menuStyleClasses.container,
+          "s-w-48 s-max-w-sm s-p-2 s-shadow-lg"
+        )}
+      >
+        <DropdownTooltip description={description} media={media} />
+      </TooltipPrimitive.Content>
+    );
+
+    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);
+      }
+    }, [mountPortal, container]);
+
+    return (
+      <TooltipPrimitive.Provider delayDuration={300}>
+        <TooltipPrimitive.Root onOpenChange={onVisibilityChange}>
+          <TooltipPrimitive.Trigger asChild className={className} ref={ref}>
+            {children}
+          </TooltipPrimitive.Trigger>
+          {mountPortal ? (
+            <TooltipPrimitive.Portal container={container}>
+              {tooltipContent}
+            </TooltipPrimitive.Portal>
+          ) : (
+            tooltipContent
+          )}
+        </TooltipPrimitive.Root>
+      </TooltipPrimitive.Provider>
+    );
+  }
+);
+
+DropdownTooltipTrigger.displayName = "DropdownTooltipTrigger";
+
 interface DropdownMenuStaticItemProps {
   label: string;
   value?: string;
@@ -783,4 +879,5 @@ export {
   DropdownMenuTagItem,
   DropdownMenuTagList,
   DropdownMenuTrigger,
+  DropdownTooltipTrigger,
 };

package/src/components/NavigationList.tsx

@@ -69,7 +69,8 @@ const NavigationList = React.forwardRef<
 NavigationList.displayName = "NavigationList";
 
 interface NavigationListItemProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     Omit<LinkWrapperProps, "children" | "className"> {
   selected?: boolean;
   label?: string;
@@ -178,8 +179,7 @@ const NavigationListItem = React.forwardRef<
 );
 NavigationListItem.displayName = "NavigationListItem";
 
-interface NavigationListItemActionProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface NavigationListItemActionProps extends React.HTMLAttributes<HTMLDivElement> {
   showOnHover?: boolean;
 }
 
@@ -228,7 +228,8 @@ const labelStyles = cva(
 );
 
 interface NavigationListLabelProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof variantStyles> {
   label: string;
   action?: React.ReactNode;
@@ -257,8 +258,7 @@ const NavigationListLabel = React.forwardRef<
 
 NavigationListLabel.displayName = "NavigationListLabel";
 
-interface NavigationListCollapsibleSectionProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface NavigationListCollapsibleSectionProps extends React.HTMLAttributes<HTMLDivElement> {
   label: string;
   action?: React.ReactNode;
   defaultOpen?: boolean;

package/src/components/index.ts

@@ -79,6 +79,8 @@ export {
 export type {
   DropdownMenuFilterOption,
   DropdownMenuItemProps,
+  DropdownTooltipProps,
+  DropdownTooltipTriggerProps,
 } from "./Dropdown";
 export {
   DropdownMenu,
@@ -100,6 +102,7 @@ export {
   DropdownMenuTagItem,
   DropdownMenuTagList,
   DropdownMenuTrigger,
+  DropdownTooltipTrigger,
 } from "./Dropdown";
 export { default as DropzoneOverlay } from "./DropzoneOverlay";
 export type { EmojiMartData } from "./EmojiPicker";

package/src/stories/Dropdown.stories.tsx

@@ -23,6 +23,7 @@ import {
   DropdownMenuTagItem,
   DropdownMenuTagList,
   DropdownMenuTrigger,
+  DropdownTooltipTrigger,
 } from "@sparkle/components/Dropdown";
 import {
   AnthropicLogo,
@@ -927,3 +928,114 @@ export const WithFilters: Story = {
     );
   },
 };
+
+export const WithTooltips: Story = {
+  render: () => {
+    return (
+      <div className="s-flex s-flex-col s-gap-8 s-p-8">
+        <h3 className="s-text-lg s-font-semibold">
+          Dropdown with Rich Tooltips
+        </h3>
+
+        <div className="s-flex s-gap-4">
+          {/* Knowledge Attachment Example */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button label="Skill Builder Actions" variant="outline" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="s-w-64">
+              <DropdownMenuItem label="Configure Settings" />
+              <DropdownTooltipTrigger
+                description="Use company knowledge for context."
+                media={
+                  <img
+                    src="/static/landing/product/Knowledge_Tooltips.jpg"
+                    alt="Knowledge Search Interface"
+                    className="s-aspect-[4/3] s-w-full s-rounded s-object-cover"
+                  />
+                }
+                side="right"
+                sideOffset={8}
+              >
+                <DropdownMenuItem icon={AttachmentIcon} label="Add Knowledge" />
+              </DropdownTooltipTrigger>
+              <DropdownMenuItem label="Save Draft" />
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Data Export Example */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button label="Data Actions" variant="outline" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="s-w-64">
+              <DropdownMenuItem label="View Report" />
+              <DropdownTooltipTrigger
+                description="Export your data in various formats. Choose from CSV, JSON, or PDF depending on your needs."
+                media={
+                  <div className="s-flex s-items-center s-gap-3">
+                    <div className="s-flex s-h-10 s-w-10 s-items-center s-justify-center s-rounded-full s-bg-green-100">
+                      <CloudArrowDownIcon className="s-h-5 s-w-5 s-text-green-600" />
+                    </div>
+                    <div>
+                      <h4 className="s-text-sm s-font-medium s-text-green-800">
+                        Export Status
+                      </h4>
+                      <p className="s-text-xs s-text-green-600">
+                        Ready to export
+                      </p>
+                    </div>
+                  </div>
+                }
+                side="right"
+                sideOffset={8}
+              >
+                <DropdownMenuItem
+                  icon={CloudArrowDownIcon}
+                  label="Export Data"
+                />
+              </DropdownTooltipTrigger>
+              <DropdownMenuItem label="Share Report" />
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Left-side tooltip example */}
+          <div className="s-ml-auto">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button label="Right Side Menu" variant="outline" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="s-w-56">
+                <DropdownMenuItem label="Regular Item" />
+                <DropdownTooltipTrigger
+                  description="This tooltip appears on the left side when the dropdown is positioned on the right side of the screen."
+                  media={
+                    <div className="s-text-center">
+                      <div className="s-mb-2 s-text-2xl">⬅️</div>
+                      <p className="s-text-sm s-font-medium s-text-orange-800">
+                        Positioned Left
+                      </p>
+                      <p className="s-mt-1 s-text-xs s-text-orange-600">
+                        Perfect for right-side menus
+                      </p>
+                    </div>
+                  }
+                  side="left"
+                  sideOffset={8}
+                >
+                  <DropdownMenuItem icon={MagicIcon} label="Help Item" />
+                </DropdownTooltipTrigger>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <p className="s-max-w-lg s-text-sm s-text-gray-600">
+          Hover over menu items with icons to see rich tooltips that provide
+          contextual information and step-by-step instructions. The tooltip
+          positioning automatically adapts based on available space.
+        </p>
+      </div>
+    );
+  },
+};