@dust-tt/sparkle 0.2.254-rc-2 → 0.2.254

package/src/components/Dialog.tsx

@@ -5,7 +5,7 @@ import ConfettiBackground from "@sparkle/components/ConfettiBackground";
 import Spinner from "@sparkle/components/Spinner";
 import { classNames } from "@sparkle/lib/utils";
 
-import { Button, ButtonVariantType } from "./Button";
+import { Button } from "./Button";
 
 export type BaseDialogProps = {
   backgroundType?: "confetti" | "snow" | "none";
@@ -16,19 +16,19 @@ export type BaseDialogProps = {
   onValidate: () => void;
   title: string;
   validateLabel?: string;
-  validateVariant?: ButtonVariantType;
+  validateVariant?: "primary" | "primaryWarning";
   cancelLabel?: string;
 };
 
 export type DialogProps = BaseDialogProps & {
   alertDialog?: false;
   onCancel: () => void;
-};
+}
 
 export type AlertDialogProps = BaseDialogProps & {
   alertDialog: true;
   onCancel?: () => void;
-};
+}
 
 export function Dialog({
   backgroundType = "none",

package/src/components/DropdownMenu.tsx

@@ -1,5 +1,4 @@
 import { Menu, Transition } from "@headlessui/react";
-import { SIDE_OPTIONS } from "@radix-ui/react-popper";
 import React, {
   ComponentType,
   forwardRef,
@@ -23,7 +22,7 @@ import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
 import { Item as StandardItem, LinkProps } from "./Item";
-import { Tooltip } from "./Tooltip";
+import { Tooltip, TooltipProps } from "./Tooltip";
 
 const ButtonRefContext =
   React.createContext<MutableRefObject<HTMLButtonElement | null> | null>(null);
@@ -99,7 +98,7 @@ export interface DropdownButtonProps {
   type?: "menu" | "submenu" | "select";
   size?: "sm" | "md";
   tooltip?: string;
-  tooltipPosition?: (typeof SIDE_OPTIONS)[number];
+  tooltipPosition?: TooltipProps["position"];
   icon?: ComponentType;
   className?: string;
   disabled?: boolean;
@@ -117,7 +116,7 @@ DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
       tooltip,
       icon,
       children,
-      tooltipPosition = "top",
+      tooltipPosition = "above",
       className = "",
       disabled = false,
       onClick,
@@ -179,11 +178,9 @@ DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
           onClick={(e) => e.stopPropagation()}
         >
           {tooltip ? (
-            <Tooltip
-              trigger={children}
-              label={tooltip}
-              side={tooltipPosition}
-            />
+            <Tooltip position={tooltipPosition} label={tooltip}>
+              {children}
+            </Tooltip>
           ) : (
             children
           )}
@@ -201,39 +198,31 @@ DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
     return (
       <>
         {tooltip ? (
-          <Tooltip
-            trigger={
-              <Menu.Button
-                disabled={disabled}
-                ref={aggregatedRef}
-                className={classNames(
-                  disabled ? "s-cursor-default" : "s-cursor-pointer",
-                  className,
-                  "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
-                  label
-                    ? size === "md"
-                      ? "s-gap-2"
-                      : "s-gap-1.5"
-                    : "s-gap-0.5"
-                )}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (onClick) {
-                    onClick();
-                  }
-                }}
-              >
-                <Icon visual={icon} size={size} className={finalIconClasses} />
-                <Icon
-                  visual={chevronIcon}
-                  size={size === "sm" ? "xs" : "sm"}
-                  className={finalChevronClasses}
-                />
-              </Menu.Button>
-            }
-            label={tooltip}
-            side={tooltipPosition}
-          />
+          <Tooltip label={tooltip} position={tooltipPosition}>
+            <Menu.Button
+              disabled={disabled}
+              ref={aggregatedRef}
+              className={classNames(
+                disabled ? "s-cursor-default" : "s-cursor-pointer",
+                className,
+                "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+                label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5"
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (onClick) {
+                  onClick();
+                }
+              }}
+            >
+              <Icon visual={icon} size={size} className={finalIconClasses} />
+              <Icon
+                visual={chevronIcon}
+                size={size === "sm" ? "xs" : "sm"}
+                className={finalChevronClasses}
+              />
+            </Menu.Button>
+          </Tooltip>
         ) : (
           <Menu.Button
             disabled={disabled}

package/src/components/ElementDialog.tsx

@@ -17,7 +17,6 @@ export function ElementDialog<T>({
   closeDialogFn,
   onValidate,
   onCancel,
-  children,
   ...props
 }: ElementDialogProps<T>) {
   const [isClosingTransition, setIsClosingTransition] = useState(false);
@@ -34,8 +33,6 @@ export function ElementDialog<T>({
       onCancel={() => onCancel(transitionOnClose)}
       onValidate={() => onValidate(transitionOnClose)}
       {...props}
-    >
-      {children}
-    </Dialog>
+    />
   );
 }

package/src/components/IconButton.tsx

@@ -1,17 +1,16 @@
-import { SIDE_OPTIONS } from "@radix-ui/react-popper";
 import React, { ComponentType, MouseEventHandler } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon, IconProps } from "./Icon";
-import { Tooltip } from "./Tooltip";
+import { Tooltip, TooltipProps } from "./Tooltip";
 
 type IconButtonProps = {
   variant?: "primary" | "warning" | "secondary" | "tertiary" | "white";
   onClick?: MouseEventHandler<HTMLButtonElement>;
   size?: "xs" | "sm" | "md";
   tooltip?: string;
-  tooltipPosition?: (typeof SIDE_OPTIONS)[number];
+  tooltipPosition?: TooltipProps["position"];
   icon?: ComponentType;
   className?: string;
   disabled?: boolean;
@@ -88,7 +87,7 @@ export function IconButton({
   onClick,
   disabled = false,
   tooltip,
-  tooltipPosition = "top",
+  tooltipPosition = "above",
   icon,
   className = "",
   size = "sm",
@@ -118,11 +117,9 @@ export function IconButton({
   );
 
   return tooltip ? (
-    <Tooltip
-      trigger={IconButtonContent}
-      label={tooltip}
-      side={tooltipPosition}
-    />
+    <Tooltip label={tooltip} position={tooltipPosition}>
+      {IconButtonContent}
+    </Tooltip>
   ) : (
     IconButtonContent
   );

package/src/components/IconToggleButton.tsx

@@ -1,17 +1,16 @@
-import { SIDE_OPTIONS } from "@radix-ui/react-popper";
 import React, { ComponentType, MouseEventHandler } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon, IconProps } from "./Icon";
-import { Tooltip } from "./Tooltip";
+import { Tooltip, TooltipProps } from "./Tooltip";
 
 type IconToggleButtonProps = {
   variant?: "secondary" | "tertiary";
   onClick?: MouseEventHandler<HTMLButtonElement>;
   size?: "xs" | "sm" | "md";
   tooltip?: string;
-  tooltipPosition?: (typeof SIDE_OPTIONS)[number];
+  tooltipPosition?: TooltipProps["position"];
   icon: ComponentType;
   iconSelected?: ComponentType;
   className?: string;
@@ -58,7 +57,7 @@ export function IconToggleButton({
   onClick,
   disabled = false,
   tooltip,
-  tooltipPosition = "top",
+  tooltipPosition = "above",
   icon,
   iconSelected,
   className = "",
@@ -106,11 +105,9 @@ export function IconToggleButton({
   );
 
   return tooltip ? (
-    <Tooltip
-      trigger={IconButtonToggleContent}
-      label={tooltip}
-      side={tooltipPosition}
-    />
+    <Tooltip label={tooltip} position={tooltipPosition}>
+      {IconButtonToggleContent}
+    </Tooltip>
   ) : (
     IconButtonToggleContent
   );

package/src/components/Input.tsx

@@ -92,4 +92,4 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   }
 );
 
-Input.displayName = "Input";
+Input.displayName = "Input"

package/src/components/Searchbar.tsx

@@ -26,9 +26,11 @@ 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 trigger={content} label={tab.label} />
+              <Tooltip label={tab.label}>{content}</Tooltip>
             </div>
             {tab.hasSeparator && (
               <div className="s-flex s-h-full s-grow" key={`sep-${i}`} />

package/src/components/Tooltip.tsx

@@ -1,56 +1,86 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import React, { useEffect, useState } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
-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 interface TooltipProps {
+  children: React.ReactNode;
+  label?: string;
+  position?: "above" | "below";
+  contentChildren?: React.ReactNode;
 }
 
-function Tooltip({ trigger, label, ...props }: TooltipProps) {
-  return (
-    <TooltipProvider>
-      <TooltipRoot>
-        <TooltipTrigger>{trigger}</TooltipTrigger>
-        <TooltipContent {...props}>{label}</TooltipContent>
-      </TooltipRoot>
-    </TooltipProvider>
+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";
 
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+  // 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";
 
-export {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-};
+  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>
+  );
+}

package/src/components/Tree.tsx

@@ -81,6 +81,7 @@ interface TreeItemProps {
   collapsed?: boolean;
   defaultCollapsed?: boolean;
   className?: string;
+  labelClassName?: string;
   actions?: React.ReactNode;
   areActionsFading?: boolean;
   isNavigatable?: boolean;
@@ -102,6 +103,7 @@ Tree.Item = function ({
   label,
   type = "node",
   className = "",
+  labelClassName = "",
   size = "sm",
   tailwindIconTextColor = "s-text-element-800",
   visual,
@@ -188,7 +190,7 @@ Tree.Item = function ({
 
         <div
           className={classNames(
-            "s-truncate s-font-medium s-text-element-900",
+            `s-truncate s-font-medium s-text-element-900 ${labelClassName}`,
             size === "sm" ? "s-ml-1 s-text-sm" : "s-ml-1 s-text-base"
           )}
         >

package/src/components/index.ts

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

package/src/stories/Button.stories.tsx

@@ -1,15 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import {
-  Button,
-  Cog6ToothIcon,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-} from "../index_with_tw_base";
+import { Button, Cog6ToothIcon } from "../index_with_tw_base";
 
 const meta = {
   title: "Primitives/Button",
@@ -572,41 +564,6 @@ 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",
@@ -665,7 +622,7 @@ export const IconOnlyPlusTooltip: Story = {
     labelVisible: false,
     icon: Cog6ToothIcon,
     disabled: false,
-    tooltipPosition: "bottom",
+    tooltipPosition: "below",
   },
 };
 
@@ -677,7 +634,7 @@ export const IconOnlyNoTooltip: Story = {
     labelVisible: false,
     icon: Cog6ToothIcon,
     disabled: false,
-    tooltipPosition: "bottom",
+    tooltipPosition: "below",
     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. 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."
+        description="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,9 +161,7 @@ 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,7 +26,6 @@ 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,10 +48,7 @@ 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
@@ -314,7 +311,7 @@ export const DropdownExample = () => {
           <DropdownMenu.Button
             icon={ChatBubbleBottomCenterTextIcon}
             tooltip="Moonlab"
-            tooltipPosition="bottom"
+            tooltipPosition="below"
           />
           <DropdownMenu.Items origin="topLeft" width={120}>
             <DropdownMenu.Item label="item 1 is longish" link={{ href: "#" }} />
@@ -358,7 +355,7 @@ export const DropdownExample = () => {
           <DropdownMenu.Button
             icon={ChatBubbleBottomCenterTextIcon}
             tooltip="Moonlab"
-            tooltipPosition="bottom"
+            tooltipPosition="below"
           />
           <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: "bottom",
+    tooltipPosition: "below",
     icon: Cog6ToothIcon,
   },
 };
@@ -31,7 +31,7 @@ export const IconButtonSecondary: Story = {
   args: {
     variant: "secondary",
     tooltip: "This a secondary IconButton",
-    tooltipPosition: "bottom",
+    tooltipPosition: "below",
     icon: Cog6ToothIcon,
   },
 };
@@ -40,7 +40,7 @@ export const IconButtonTertiary: Story = {
   args: {
     variant: "tertiary",
     tooltip: "This a tertiary IconButton",
-    tooltipPosition: "bottom",
+    tooltipPosition: "below",
     icon: Cog6ToothIcon,
   },
 };

package/src/stories/TextArea.stories.tsx

@@ -23,13 +23,8 @@ 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]}
@@ -39,12 +34,7 @@ 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
         />
@@ -52,12 +42,7 @@ 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"}
         />