@dust-tt/sparkle 0.2.254 → 0.2.256

package/src/components/Searchbar.tsx

@@ -26,11 +26,9 @@ type SearchbarProps = {
   size?: "xs" | "sm" | "md";
   disabled?: boolean;
   className?: string;
-}
+};
 
-export const Searchbar = forwardRef<
-  HTMLInputElement, SearchbarProps
->(
+export const Searchbar = forwardRef<HTMLInputElement, SearchbarProps>(
   (
     {
       placeholder,

package/src/components/Tab.tsx

@@ -199,7 +199,7 @@ export function Tab<E>({
         tab.label ? (
           <React.Fragment key={`tab-${i}`}>
             <div className={tabSizingClasses[tab.sizing ?? "hug"]}>
-              <Tooltip label={tab.label}>{content}</Tooltip>
+              <Tooltip trigger={content} label={tab.label} />
             </div>
             {tab.hasSeparator && (
               <div className="s-flex s-h-full s-grow" key={`sep-${i}`} />

package/src/components/Tooltip.tsx

@@ -1,86 +1,56 @@
-import React, { useEffect, useState } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
-export interface TooltipProps {
-  children: React.ReactNode;
-  label?: string;
-  position?: "above" | "below";
-  contentChildren?: React.ReactNode;
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const TooltipRoot = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+interface TooltipContentProps
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {}
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={classNames(
+      "s-bg-primary-50 s-text-primary-700 s-z-50 s-max-w-xs s-overflow-hidden s-rounded-md s-border s-bg-white s-px-3 s-py-1.5 s-text-sm s-shadow-md",
+      "s-animate-in s-fade-in-0 s-zoom-in-95",
+      "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-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",
+      className || ""
+    )}
+    {...props}
+  />
+));
+
+interface TooltipProps extends TooltipContentProps {
+  trigger: React.ReactNode;
+  label: React.ReactNode;
 }
 
-export function Tooltip({
-  children,
-  label,
-  position = "above",
-  contentChildren,
-}: TooltipProps) {
-  const [isHovered, setIsHovered] = useState(false);
-  const [timerId, setTimerId] = useState<number | null>(null);
-  const [isTouchDevice, setIsTouchDevice] = useState(false);
-
-  const handleMouseOver = () => {
-    const id = window.setTimeout(() => {
-      setIsHovered(true);
-    }, 600);
-    setTimerId(id);
-  };
-
-  const handleMouseLeave = () => {
-    if (timerId !== null) {
-      clearTimeout(timerId);
-    }
-    setIsHovered(false);
-  };
-
-  useEffect(() => {
-    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
-    return () => {
-      if (timerId) {
-        window.clearTimeout(timerId);
-      }
-    };
-  }, [timerId]);
-
-  if (isTouchDevice) {
-    return <>{children}</>;
-  }
-
-  const baseClasses = classNames(
-    "s-absolute s-z-10 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform",
-    "s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark"
-  );
-  const hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none"; // Added s-pointer-events-none
-  const visibleClasses = "-s-translate-y-0 s-opacity-100";
-  const hiddenOnMobileClasses = "s-hidden sm:s-block";
-  const tooltipCenterClasses = "s-left-1/2 -s-translate-x-1/2";
-  const tooltipPositionClasses =
-    position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
-
-  // if tooltip text is too long we need to wrap it
-  const labelLength = label?.length || 0;
-  const labelClasses = labelLength > 80 ? "s-w-[38em]" : "s-whitespace-nowrap";
-
+function Tooltip({ trigger, label, ...props }: TooltipProps) {
   return (
-    <div
-      onMouseEnter={handleMouseOver}
-      onMouseLeave={handleMouseLeave}
-      className="s-relative s-inline-block"
-    >
-      {children}
-      <div
-        className={classNames(
-          `${isHovered ? visibleClasses : hiddenClasses}`,
-          baseClasses,
-          hiddenOnMobileClasses,
-          tooltipPositionClasses,
-          tooltipCenterClasses,
-          contentChildren ? "" : labelClasses
-        )}
-        onAnimationEnd={() => setIsHovered(false)}
-      >
-        {contentChildren || label}
-      </div>
-    </div>
+    <TooltipProvider>
+      <TooltipRoot>
+        <TooltipTrigger>{trigger}</TooltipTrigger>
+        <TooltipContent {...props}>{label}</TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
   );
 }
+
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+};

package/src/components/Tree.tsx

@@ -222,5 +222,9 @@ interface TreeEmptyProps {
 }
 
 Tree.Empty = function ({ label }: TreeEmptyProps) {
-  return <div className="s-pl-4 s-text-sm s-text-element-600">{label}</div>;
+  return (
+    <div className="s-py-1 s-pl-6 s-text-sm s-font-medium s-text-element-700">
+      {label}
+    </div>
+  );
 };

package/src/components/index.ts

@@ -43,6 +43,12 @@ export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
 export { Tab } from "./Tab";
 export { TextArea } from "./TextArea";
-export { Tooltip } from "./Tooltip";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from "./Tooltip";
 export { Tree } from "./Tree";
 export { ZoomableImageCitationWrapper } from "./ZoomableImageCitationWrapper";

package/src/icons/solid/Dot.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgDot = (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="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
+  </svg>
+);
+export default SvgDot;

package/src/icons/solid/MagnifyingGlass.tsx

@@ -11,7 +11,13 @@ const SvgMagnifyingGlass = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M11 2c4.968 0 9 4.032 9 9s-4.032 9-9 9-9-4.032-9-9 4.032-9 9-9Zm8.485 16.071 2.829 2.828-1.415 1.415-2.828-2.829 1.414-1.414Z"
+      fillRule="evenodd"
+      d="M17.364 17.364A9 9 0 1 1 4.636 4.636a9 9 0 0 1 12.728 12.728Zm-2.121-2.121a6 6 0 1 1-8.486-8.485 6 6 0 0 1 8.486 8.485Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="m22.374 20.253-3.535-3.535-2.121 2.12 3.535 3.536 2.121-2.121Z"
     />
   </svg>
 );

package/src/icons/solid/index.ts

@@ -48,6 +48,7 @@ export { default as DocumentDuplicateIcon } from "./DocumentDuplicate";
 export { default as DocumentPileIcon } from "./DocumentPile";
 export { default as DocumentPlusIcon } from "./DocumentPlus";
 export { default as DocumentTextIcon } from "./DocumentText";
+export { default as DotIcon } from "./Dot";
 export { default as DustIcon } from "./Dust";
 export { default as EmotionLaughIcon } from "./EmotionLaugh";
 export { default as EqualizerIcon } from "./Equalizer";

package/src/icons/src/solid/dot.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="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/magnifying-glass.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z" fill="#020617"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.364 17.364C13.8492 20.8787 8.15075 20.8787 4.63604 17.364C1.12133 13.8492 1.12132 8.15076 4.63604 4.63604C8.15076 1.12132 13.8492 1.12133 17.364 4.63604C20.8787 8.15075 20.8787 13.8492 17.364 17.364ZM15.2426 15.2426C12.8995 17.5858 9.10051 17.5858 6.75736 15.2426C4.4142 12.8995 4.41421 9.1005 6.75736 6.75736C9.1005 4.41421 12.8995 4.4142 15.2426 6.75736C17.5858 9.10051 17.5858 12.8995 15.2426 15.2426Z" fill="#020617"/>
+<path d="M22.3744 20.253L18.8388 16.7175L16.7175 18.8388L20.253 22.3744L22.3744 20.253Z" fill="#020617"/>
 </svg>

package/src/icons/src/stroke/dot.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="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="#020617"/>
+</svg>

package/src/icons/stroke/Dot.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgDot = (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="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm4-2a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgDot;

package/src/icons/stroke/index.ts

@@ -48,6 +48,7 @@ export { default as DocumentDuplicateStrokeIcon } from "./DocumentDuplicate";
 export { default as DocumentPileStrokeIcon } from "./DocumentPile";
 export { default as DocumentPlusStrokeIcon } from "./DocumentPlus";
 export { default as DocumentTextStrokeIcon } from "./DocumentText";
+export { default as DotStrokeIcon } from "./Dot";
 export { default as DustStrokeIcon } from "./Dust";
 export { default as EmotionLaughStrokeIcon } from "./EmotionLaugh";
 export { default as EqualizerStrokeIcon } from "./Equalizer";

package/src/stories/Button.stories.tsx

@@ -1,7 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import { Button, Cog6ToothIcon } from "../index_with_tw_base";
+import {
+  Button,
+  Cog6ToothIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from "../index_with_tw_base";
 
 const meta = {
   title: "Primitives/Button",
@@ -564,6 +572,42 @@ export const ButtonSelectExamples = () => (
   </div>
 );
 
+export const ButtonWithTooltipManualInstantiation = () => {
+  return (
+    <TooltipProvider>
+      <TooltipRoot>
+        <TooltipTrigger>
+          <Button
+            labelVisible={true}
+            label="New conversation"
+            icon={Cog6ToothIcon}
+            hasMagnifying={false}
+          />
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Hello</p>
+        </TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  );
+};
+
+export const ButtonWithTooltip = () => {
+  return (
+    <Tooltip
+      trigger={
+        <Button
+          labelVisible={true}
+          label="New conversation"
+          icon={Cog6ToothIcon}
+          hasMagnifying={false}
+        />
+      }
+      label={"Hello"}
+    />
+  );
+};
+
 export const Primary: Story = {
   args: {
     variant: "primary",
@@ -622,7 +666,7 @@ export const IconOnlyPlusTooltip: Story = {
     labelVisible: false,
     icon: Cog6ToothIcon,
     disabled: false,
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
   },
 };
 
@@ -634,7 +678,7 @@ export const IconOnlyNoTooltip: Story = {
     labelVisible: false,
     icon: Cog6ToothIcon,
     disabled: false,
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
     disabledTooltip: true,
   },
 };

package/src/stories/Citation.stories.tsx

@@ -133,7 +133,7 @@ export const CitationsExample = () => (
         type="google_drive"
         index="3"
         href="https://www.google.com"
-        description="Write a 120 character description of the citation here to be displayed in the citation list."
+        description="Write a 120 character description of the citation here to be displayed in the citation list. Write a 120 character description of the citation here to be displayed in the citation list. Write a 120 character description of the citation here to be displayed in the citation list."
         isBlinking={true}
       />
       <Citation

package/src/stories/DataTable.stories.tsx

@@ -161,7 +161,9 @@ const columns: ColumnDef<Data>[] = [
       width: "100px",
     },
     cell: (info) => (
-      <DataTable.CellContentWithCopy>{info.row.original.addedBy}</DataTable.CellContentWithCopy>
+      <DataTable.CellContentWithCopy>
+        {info.row.original.addedBy}
+      </DataTable.CellContentWithCopy>
     ),
   },
   {

package/src/stories/Dialog.stories.tsx

@@ -26,6 +26,7 @@ export const DialogExample = () => {
           cancelLabel="Cancel"
           onValidate={() => setisOpen1(false)}
           onCancel={() => setisOpen1(false)}
+          validateVariant="primary"
         >
           <div>I'm the modal content</div>
         </Dialog>

package/src/stories/DropdownMenu.stories.tsx

@@ -48,7 +48,10 @@ export const DropdownExample = () => {
       <div className="s-flex s-gap-6">
         <div className="s-text-sm">Action</div>
         <DropdownMenu>
-          <DropdownMenu.Button label="Action" onClick={() => console.log("CLICK")}/>
+          <DropdownMenu.Button
+            label="Action"
+            onClick={() => console.log("CLICK")}
+          />
           <DropdownMenu.Items width={220}>
             <DropdownMenu.SectionHeader label="Edition" />
             <DropdownMenu.Item
@@ -311,7 +314,7 @@ export const DropdownExample = () => {
           <DropdownMenu.Button
             icon={ChatBubbleBottomCenterTextIcon}
             tooltip="Moonlab"
-            tooltipPosition="below"
+            tooltipPosition="bottom"
           />
           <DropdownMenu.Items origin="topLeft" width={120}>
             <DropdownMenu.Item label="item 1 is longish" link={{ href: "#" }} />
@@ -355,7 +358,7 @@ export const DropdownExample = () => {
           <DropdownMenu.Button
             icon={ChatBubbleBottomCenterTextIcon}
             tooltip="Moonlab"
-            tooltipPosition="below"
+            tooltipPosition="bottom"
           />
           <DropdownMenu.Items origin="topLeft">
             <DropdownMenu.Item label="item 1" link={{ href: "#" }} />

package/src/stories/IconButton.stories.tsx

@@ -22,7 +22,7 @@ export const IconButtonWithTooltip: Story = {
   args: {
     variant: "primary",
     tooltip: "Your settings",
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },
 };
@@ -31,7 +31,7 @@ export const IconButtonSecondary: Story = {
   args: {
     variant: "secondary",
     tooltip: "This a secondary IconButton",
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },
 };
@@ -40,7 +40,7 @@ export const IconButtonTertiary: Story = {
   args: {
     variant: "tertiary",
     tooltip: "This a tertiary IconButton",
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },
 };

package/src/stories/TextArea.stories.tsx

@@ -23,8 +23,13 @@ export const TextAreaExample = () => {
         <TextArea
           placeholder="placeholder"
           onChange={(e) => {
-            console.log(e.target.value)
-            setTextValues([e.target.value, textValues[1], textValues[2], textValues[3]])
+            console.log(e.target.value);
+            setTextValues([
+              e.target.value,
+              textValues[1],
+              textValues[2],
+              textValues[3],
+            ]);
           }}
           minRows={2}
           defaultValue={textValues[0]}
@@ -34,7 +39,12 @@ export const TextAreaExample = () => {
           defaultValue={textValues[1]}
           error={"errored because blah"}
           onChange={(e) =>
-            setTextValues([textValues[0], e.target.value, textValues[2], textValues[3]])
+            setTextValues([
+              textValues[0],
+              e.target.value,
+              textValues[2],
+              textValues[3],
+            ])
           }
           showErrorLabel
         />
@@ -42,7 +52,12 @@ export const TextAreaExample = () => {
           placeholder="placeholder"
           defaultValue={textValues[2]}
           onChange={(e) =>
-            setTextValues([textValues[0], textValues[1], e.target.value, textValues[3]])
+            setTextValues([
+              textValues[0],
+              textValues[1],
+              e.target.value,
+              textValues[3],
+            ])
           }
           error={"errored because blah"}
         />

package/src/stories/Tooltip.stories.tsx

@@ -1,62 +1,43 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { Tooltip } from "../index_with_tw_base";
+import {
+  Icon,
+  RobotIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from "../index_with_tw_base";
 
 const meta = {
   title: "Primitives/Tooltip",
-  component: Tooltip,
-} satisfies Meta<typeof Tooltip>;
+  component: TooltipProvider,
+} satisfies Meta<typeof TooltipProvider>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-export const TooltipAbove: Story = {
-  args: {
-    label: "This is a tooltip",
-    children: "Hover me",
-    position: "above",
-  },
-};
-
-export const TooltipBelow: Story = {
-  args: {
-    label: "This is a tooltip",
-    children: "Hover me",
-    position: "below",
-  },
-};
-
-export const ToolTipWithContent = () => (
-  <div className="s-pl-32">
-    <Tooltip
-      contentChildren={
-        <div className="s-w-64">
-          <div className="s-flex s-flex-col s-gap-y-2 s-break-words">
-            <div className="s-flex s-font-semibold">
-              This is a more complex tooltip:
-            </div>
-            <div className="s-flex s-flex-wrap s-break-words">
-              It has some content that is long here and describes something
-              about the content associated with this.
-            </div>
-          </div>
-        </div>
-      }
-      position="below"
-    >
-      Hover me
-    </Tooltip>
-  </div>
+export const TooltipExample = () => (
+  <Tooltip trigger={<div>Hover</div>} label={<p>Add to library</p>} />
 );
 
-export const TooltipLongLabel = () => (
-  <div className="s-pl-64">
-    <Tooltip
-      label="This is a tooltip with a very long label that should wrap onto multiple lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
-      position="below"
+export const TooltipWithManual = () => (
+  <TooltipProvider delayDuration={800} skipDelayDuration={500}>
+    <TooltipRoot
+      onOpenChange={(open: boolean) => {
+        console.log(`Is open: ${open}`);
+      }}
     >
-      Hover me
-    </Tooltip>
-  </div>
+      <TooltipTrigger>
+        <Icon visual={RobotIcon} size="xs" />
+      </TooltipTrigger>
+      <TooltipContent side="right" sideOffset={50}>
+        This is a tooltip with a very long label that should wrap onto multiple
+        lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
+        risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
+        ultricies sed, dolor.
+      </TooltipContent>
+    </TooltipRoot>
+  </TooltipProvider>
 );

package/src/stories/Tree.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { DustIcon } from "@sparkle/icons/solid";
 import {
   DriveLogo,
   IntercomLogo,
@@ -15,6 +14,7 @@ import {
   CloudArrowDownIcon,
   Cog6ToothIcon,
   DocumentIcon,
+  DustIcon,
   EyeIcon,
   FolderIcon,
   IconButton,
@@ -89,7 +89,17 @@ export const TreeExample = () => {
                     visual={FolderIcon}
                     collapsed={false}
                   >
-                    <Tree.Empty label="No documents"/>
+                    <Tree.Item
+                      label="Item 3"
+                      type="leaf"
+                      visual={DocumentIcon}
+                    />
+                    <Tree.Item
+                      label="Item 3"
+                      type="leaf"
+                      visual={DocumentIcon}
+                    />
+                    <Tree.Empty label="(+ 4 items)" />
                   </Tree.Item>
                 </Tree>
               </Tree.Item>