@dust-tt/sparkle 0.2.254 → 0.2.256

package/dist/sparkle.css

@@ -805,18 +805,10 @@ select {
   bottom: 1.5rem;
 }
 
-.s-bottom-full {
-  bottom: 100%;
-}
-
 .s-left-0 {
   left: 0px;
 }
 
-.s-left-1\/2 {
-  left: 50%;
-}
-
 .s-right-0 {
   right: 0px;
 }
@@ -829,10 +821,6 @@ select {
   top: 0px;
 }
 
-.s-top-full {
-  top: 100%;
-}
-
 .s-z-0 {
   z-index: 0;
 }
@@ -905,10 +893,6 @@ select {
   margin-bottom: 0.25rem;
 }
 
-.s-mb-2 {
-  margin-bottom: 0.5rem;
-}
-
 .s-ml-1 {
   margin-left: 0.25rem;
 }
@@ -949,10 +933,6 @@ select {
   margin-top: 4rem;
 }
 
-.s-mt-2 {
-  margin-top: 0.5rem;
-}
-
 .s-mt-4 {
   margin-top: 1rem;
 }
@@ -1202,10 +1182,6 @@ select {
   width: 320px;
 }
 
-.s-w-\[38em\] {
-  width: 38em;
-}
-
 .s-w-auto {
   width: auto;
 }
@@ -1307,16 +1283,6 @@ select {
   transform-origin: top right;
 }
 
-.-s-translate-x-1\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-s-translate-y-0 {
-  --tw-translate-y: -0px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-s-translate-y-5 {
   --tw-translate-y: -1.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1352,11 +1318,6 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.s-translate-y-2 {
-  --tw-translate-y: 0.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .s-translate-y-4 {
   --tw-translate-y: 1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1620,10 +1581,6 @@ select {
        column-gap: 1rem;
 }
 
-.s-gap-y-2 {
-  row-gap: 0.5rem;
-}
-
 .s-gap-y-3 {
   row-gap: 0.75rem;
 }
@@ -1706,10 +1663,6 @@ select {
   white-space: pre-wrap;
 }
 
-.s-break-words {
-  overflow-wrap: break-word;
-}
-
 .s-rounded {
   border-radius: 0.25rem;
 }
@@ -3195,10 +3148,6 @@ select {
   padding-left: 0.75rem;
 }
 
-.s-pl-32 {
-  padding-left: 8rem;
-}
-
 .s-pl-4 {
   padding-left: 1rem;
 }
@@ -3211,10 +3160,6 @@ select {
   padding-left: 1.5rem;
 }
 
-.s-pl-64 {
-  padding-left: 16rem;
-}
-
 .s-pl-7 {
   padding-left: 1.75rem;
 }
@@ -4111,10 +4056,6 @@ select {
   transition-duration: 300ms;
 }
 
-.s-duration-500 {
-  transition-duration: 500ms;
-}
-
 .s-duration-75 {
   transition-duration: 75ms;
 }
@@ -4140,6 +4081,70 @@ select {
   display: none;
 }
 
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+.s-animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+.s-fade-in-0 {
+  --tw-enter-opacity: 0;
+}
+
+.s-zoom-in-95 {
+  --tw-enter-scale: .95;
+}
+
+.s-duration-100 {
+  animation-duration: 100ms;
+}
+
+.s-duration-150 {
+  animation-duration: 150ms;
+}
+
+.s-duration-200 {
+  animation-duration: 200ms;
+}
+
+.s-duration-300 {
+  animation-duration: 300ms;
+}
+
+.s-duration-75 {
+  animation-duration: 75ms;
+}
+
+.s-ease-in {
+  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.s-ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.s-ease-out {
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
 @keyframes bgblink {
   0%,
   100% {
@@ -4562,6 +4567,40 @@ select {
   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);
 }
 
+.data-\[state\=closed\]\:s-animate-out[data-state=closed] {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+.data-\[state\=closed\]\:s-fade-out-0[data-state=closed] {
+  --tw-exit-opacity: 0;
+}
+
+.data-\[state\=closed\]\:s-zoom-out-95[data-state=closed] {
+  --tw-exit-scale: .95;
+}
+
+.data-\[side\=bottom\]\:s-slide-in-from-top-2[data-side=bottom] {
+  --tw-enter-translate-y: -0.5rem;
+}
+
+.data-\[side\=left\]\:s-slide-in-from-right-2[data-side=left] {
+  --tw-enter-translate-x: 0.5rem;
+}
+
+.data-\[side\=right\]\:s-slide-in-from-left-2[data-side=right] {
+  --tw-enter-translate-x: -0.5rem;
+}
+
+.data-\[side\=top\]\:s-slide-in-from-bottom-2[data-side=top] {
+  --tw-enter-translate-y: 0.5rem;
+}
+
 :is(.s-dark .dark\:s-border-action-200-dark) {
   --tw-border-opacity: 1;
   border-color: rgb(30 64 175 / var(--tw-border-opacity));
@@ -4600,11 +4639,6 @@ select {
   border-color: rgb(71 85 105 / 0.3);
 }
 
-:is(.s-dark .dark\:s-border-structure-50-dark) {
-  --tw-border-opacity: 1;
-  border-color: rgb(15 23 42 / var(--tw-border-opacity));
-}
-
 :is(.s-dark .dark\:s-border-warning-200-dark) {
   --tw-border-opacity: 1;
   border-color: rgb(153 27 27 / var(--tw-border-opacity));
@@ -4975,10 +5009,6 @@ select {
 }
 
 @media (min-width: 640px) {
-  .sm\:s-block {
-    display: block;
-  }
-
   .sm\:s-w-64 {
     width: 16rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.254",
+  "version": "0.2.256",
   "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",
@@ -66,6 +66,7 @@
     "tailwindcss": "^3.2.4",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.4.5",
+    "tailwindcss-animate": "^1.0.7",
     "typescript-transform-paths": "^3.4.7",
     "uuid": "^9.0.1"
   },
@@ -87,6 +88,8 @@
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.19",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-table": "^8.13.0",
     "emoji-mart": "^5.5.2",
     "esbuild": "^0.20.0",

package/src/components/BarHeader.tsx

@@ -85,7 +85,6 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
           icon={ChevronLeftIcon}
           variant="tertiary"
           label="Back"
-          tooltipPosition="below"
           labelVisible={false}
           onClick={props.onBack}
         />
@@ -97,7 +96,6 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
           icon={XMarkIcon}
           variant="tertiary"
           label="Close"
-          tooltipPosition="below"
           labelVisible={false}
           onClick={props.onClose}
         />
@@ -134,7 +132,6 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
             icon={TrashIcon}
             variant="tertiary"
             labelVisible={false}
-            tooltipPosition="below"
             onClick={props.onDelete}
           />
           <Button

package/src/components/Breadcrumbs.tsx

@@ -106,9 +106,9 @@ export function Breadcrumbs({ items }: BreadcrumbProps) {
 function truncateWithTooltip(text: string, length: number) {
   return text.length > length ? (
     <Tooltip
+      trigger={`${text.substring(0, length - 1)}${ELLIPSIS_STRING}`}
       label={text}
-      position="below"
-    >{`${text.substring(0, length - 1)}…`}</Tooltip>
+    />
   ) : (
     text
   );

package/src/components/Button.tsx

@@ -6,22 +6,26 @@ import React, {
   ReactNode,
 } from "react";
 
+import { Tooltip } from "@sparkle/components/Tooltip";
 import { ChevronDownIcon, ChevronUpDownIcon } from "@sparkle/icons/solid";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Avatar } from "./Avatar";
 import { Icon, IconProps } from "./Icon";
-import { Tooltip, TooltipProps } from "./Tooltip";
 
-export type ButtonProps = {
-  variant?:
-    | "primary"
-    | "primaryWarning"
-    | "secondary"
-    | "secondaryWarning"
-    | "tertiary"
-    | "avatar";
+const BUTTON_VARIANTS = [
+  "primary",
+  "primaryWarning",
+  "secondary",
+  "secondaryWarning",
+  "tertiary",
+  "avatar",
+] as const;
+
+export type ButtonVariantType = (typeof BUTTON_VARIANTS)[number];
 
+export type ButtonProps = {
+  variant?: ButtonVariantType;
   type?: "button" | "menu" | "select";
   size?: "xs" | "sm" | "md" | "lg";
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -32,7 +36,7 @@ export type ButtonProps = {
   icon?: ComponentType;
   avatar?: string;
   className?: string;
-  tooltipPosition?: TooltipProps["position"];
+  tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
   disabledTooltip?: boolean;
 };
 
@@ -173,7 +177,7 @@ export function Button({
   label,
   icon,
   className = "",
-  tooltipPosition = "above",
+  tooltipPosition,
   hasMagnifying = true,
   disabledTooltip = false,
   avatar,
@@ -242,9 +246,7 @@ export function Button({
   return labelVisible || disabledTooltip ? (
     buttonBase
   ) : (
-    <Tooltip label={label} position={tooltipPosition}>
-      {buttonBase}
-    </Tooltip>
+    <Tooltip trigger={buttonBase} label={label} side={tooltipPosition} />
   );
 }
 

package/src/components/Citation.tsx

@@ -172,11 +172,5 @@ export function Citation({
       <div className={isLoading ? "s-opacity-50" : ""}>{cardContent}</div>
     </CardButton>
   );
-  return href ? (
-    <Tooltip label={title} position="above">
-      {cardButton}
-    </Tooltip>
-  ) : (
-    cardButton
-  );
+  return href ? <Tooltip trigger={cardButton} label={title} /> : cardButton;
 }

package/src/components/DataTable.tsx

@@ -441,14 +441,17 @@ DataTable.CellContent = function CellContent({
       {...props}
     >
       {avatarUrl && avatarTooltipLabel && (
-        <Tooltip label={avatarTooltipLabel} position="above">
-          <Avatar
-            visual={avatarUrl}
-            size="xs"
-            className="s-mr-2"
-            isRounded={roundedAvatar ?? false}
-          />
-        </Tooltip>
+        <Tooltip
+          trigger={
+            <Avatar
+              visual={avatarUrl}
+              size="xs"
+              className="s-mr-2"
+              isRounded={roundedAvatar ?? false}
+            />
+          }
+          label={avatarTooltipLabel}
+        />
       )}
       {avatarUrl && !avatarTooltipLabel && (
         <Avatar

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 } from "./Button";
+import { Button, ButtonVariantType } from "./Button";
 
 export type BaseDialogProps = {
   backgroundType?: "confetti" | "snow" | "none";
@@ -16,19 +16,19 @@ export type BaseDialogProps = {
   onValidate: () => void;
   title: string;
   validateLabel?: string;
-  validateVariant?: "primary" | "primaryWarning";
+  validateVariant?: ButtonVariantType;
   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

@@ -22,7 +22,7 @@ import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
 import { Item as StandardItem, LinkProps } from "./Item";
-import { Tooltip, TooltipProps } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
 
 const ButtonRefContext =
   React.createContext<MutableRefObject<HTMLButtonElement | null> | null>(null);
@@ -98,7 +98,7 @@ export interface DropdownButtonProps {
   type?: "menu" | "submenu" | "select";
   size?: "sm" | "md";
   tooltip?: string;
-  tooltipPosition?: TooltipProps["position"];
+  tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
   icon?: ComponentType;
   className?: string;
   disabled?: boolean;
@@ -116,7 +116,7 @@ DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
       tooltip,
       icon,
       children,
-      tooltipPosition = "above",
+      tooltipPosition = "top",
       className = "",
       disabled = false,
       onClick,
@@ -178,9 +178,11 @@ DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
           onClick={(e) => e.stopPropagation()}
         >
           {tooltip ? (
-            <Tooltip position={tooltipPosition} label={tooltip}>
-              {children}
-            </Tooltip>
+            <Tooltip
+              trigger={children}
+              label={tooltip}
+              side={tooltipPosition}
+            />
           ) : (
             children
           )}
@@ -198,31 +200,39 @@ DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
     return (
       <>
         {tooltip ? (
-          <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>
+          <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}
+          />
         ) : (
           <Menu.Button
             disabled={disabled}

package/src/components/ElementDialog.tsx

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

package/src/components/IconButton.tsx

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

package/src/components/IconToggleButton.tsx

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

package/src/components/Input.tsx

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