@dust-tt/sparkle 0.2.274 → 0.2.276

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.274",
+  "version": "0.2.276",
   "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/AssistantPreview.tsx

@@ -146,13 +146,9 @@ const MinimalVariantContent = ({
 }: MinimalVariantAssistantPreviewProps) => {
   const actionButton = actionElement ?? (
     <Button
-      label=""
       icon={MoreIcon}
-      variant="tertiary"
+      variant="ghost"
       size="sm"
-      labelVisible={false}
-      hasMagnifying={false}
-      disabledTooltip={true}
       onClick={(e) => {
         e.stopPropagation();
         onActionClick?.();

package/src/components/Banner.tsx

@@ -50,7 +50,7 @@ export function Banner({
           <IconButton
             icon={XMarkIcon}
             size="sm"
-            variant="secondary"
+            variant="outline"
             onClick={() => {
               setIsDismissed(true);
               if (onDismiss) {

package/src/components/BarHeader.tsx

@@ -83,9 +83,8 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
         <Button
           size="sm"
           icon={ChevronLeftIcon}
-          variant="tertiary"
-          label="Back"
-          labelVisible={false}
+          variant="ghost"
+          tooltip="Back"
           onClick={props.onBack}
         />
       );
@@ -94,9 +93,8 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
         <Button
           size="sm"
           icon={XMarkIcon}
-          variant="tertiary"
-          label="Close"
-          labelVisible={false}
+          variant="ghost"
+          tooltip="Close"
           onClick={props.onClose}
         />
       );
@@ -106,7 +104,7 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
           <Button
             size="sm"
             label="Cancel"
-            variant="tertiary"
+            variant="ghost"
             onClick={props.onCancel}
             disabled={!props.onCancel || props.isSaving}
           />
@@ -128,17 +126,16 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
         <>
           <Button
             size="sm"
-            label="Delete"
             icon={TrashIcon}
-            variant="tertiary"
-            labelVisible={false}
+            tooltip="Delete"
+            variant="ghost"
             onClick={props.onDelete}
           />
           <Button
             size="sm"
             label="Share"
             icon={ArrowUpOnSquareIcon}
-            variant="tertiary"
+            variant="ghost"
             onClick={props.onShare}
           />
         </>

package/src/components/Button.tsx

@@ -1,261 +1,193 @@
-import React, {
-  Children,
-  cloneElement,
-  ComponentType,
-  MouseEvent,
-  ReactNode,
-} from "react";
-
-import { Tooltip } from "@sparkle/components/Tooltip";
-import { ChevronDownIcon, ChevronUpDownIcon } from "@sparkle/icons/solid";
-import { classNames } from "@sparkle/lib/utils";
-
-import { Icon, IconProps } from "./Icon";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import {
+  Icon,
+  Spinner,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from "@sparkle/components";
+import { SpinnerProps } from "@sparkle/components/Spinner";
+import { ChevronDownIcon } from "@sparkle/icons";
+import { cn } from "@sparkle/lib/utils";
 
 const BUTTON_VARIANTS = [
   "primary",
-  "primaryWarning",
-  "secondary",
-  "secondaryWarning",
-  "tertiary",
+  "highlight",
+  "warning",
+  "outline",
+  "ghost",
+  "white",
 ] 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;
-  disabled?: boolean;
-  hasMagnifying?: boolean;
-  label: string;
-  labelVisible?: boolean;
-  icon?: ComponentType;
-  className?: string;
-  tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
-  disabledTooltip?: boolean;
+const BUTTON_SIZES = ["xs", "sm", "md"] as const;
+
+type ButtonSizeType = (typeof BUTTON_SIZES)[number];
+
+const styleVariants: Record<ButtonVariantType, string> = {
+  primary:
+    "s-bg-primary s-text-white hover:s-bg-primary-light active:s-bg-primary-dark disabled:s-bg-primary-muted",
+  highlight:
+    "s-bg-highlight s-text-white hover:s-bg-highlight-light active:s-bg-highlight-dark disabled:s-bg-highlight-muted",
+  warning:
+    "s-bg-warning s-text-white hover:s-bg-warning-light active:s-bg-warning-dark disabled:s-bg-warning-muted",
+  outline:
+    "s-border s-text-primary-dark s-border-border-dark hover:s-text-primary hover:s-bg-primary-100 hover:s-border-primary-200 active:s-bg-primary-300 disabled:s-text-primary-muted disabled:s-border-structure-100",
+  ghost:
+    "s-border s-border-primary-200/0 s-text-primary-950 hover:s-bg-primary-100 hover:s-text-primary-900 active:s-bg-primary-200 hover:s-border-primary-200 disabled:s-text-primary-400",
+  white:
+    "s-bg-white s-text-primary-dark s-border s-border-border-dark hover:s-bg-primary-100 hover:s-border-primary-200 active:s-bg-primary-300 disabled:s-text-primary-muted",
 };
 
-const textClasses = {
-  xs: "s-text-xs s-font-semibold s-rounded-lg",
-  sm: "s-text-sm s-font-semibold s-rounded-xl",
-  md: "s-text-base s-font-bold s-rounded-2xl",
-  lg: "s-text-lg s-font-bold s-rounded-3xl",
+const sizeVariants: Record<ButtonSizeType, string> = {
+  xs: "s-h-7 s-px-2.5 s-rounded-lg s-text-xs s-gap-1.5",
+  sm: "s-h-9 s-px-3 s-rounded-xl s-text-sm s-gap-2",
+  md: "s-h-12 s-px-4 s-py-2 s-rounded-2xl s-text-base s-gap-2.5",
 };
 
-const sizeClasses = {
-  xs: "s-gap-x-1 s-px-2 s-h-7",
-  sm: "s-gap-x-1 s-px-3 s-h-9",
-  md: "s-gap-x-1.5 s-px-4 s-h-12",
-  lg: "s-gap-x-3 s-px-5 s-h-16",
-};
+const buttonVariants = cva(
+  "s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-font-medium 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 " +
+    "disabled:s-pointer-events-none",
+  {
+    variants: {
+      variant: styleVariants,
+      size: sizeVariants,
+    },
+  }
+);
 
-const containerClasses = {
-  xs: "s-px-0.5",
-  sm: "s-px-1",
-  md: "s-px-1",
-  lg: "s-px-1",
-};
+type SpinnerVariant = NonNullable<SpinnerProps["variant"]>;
 
-const variantClasses = {
-  primary: {
-    base: "s-text-white s-bg-action-500 s-border-action-600",
-    hover: "hover:s-bg-action-400 hover:s-border-action-500",
-    active: "active:s-bg-action-600 active:s-border-action-700",
-    disabled: "s-text-white s-bg-action-200 s-border-action-200",
-    dark: {
-      base: "",
-      hover: "",
-      active: "",
-      disabled:
-        "dark:s-text-action-700-dark dark:s-bg-action-100-dark dark:s-border-action-200-dark dark:s-saturate-50",
-    },
-  },
-  primaryWarning: {
-    base: "s-text-white s-bg-warning-500 s-border-warning-600",
-    hover: "hover:s-bg-warning-400 hover:s-border-warning-500",
-    active: "active:s-bg-warning-600 active:s-border-warning-700",
-    disabled: "s-text-white s-bg-warning-200 s-border-warning-200",
-    dark: {
-      base: "",
-      hover: "",
-      active: "",
-      disabled:
-        "dark:s-text-warning-700-dark dark:s-bg-warning-100-dark dark:s-border-warning-200-dark dark:s-saturate-50",
-    },
-  },
-  secondary: {
-    base: "s-text-action-500 s-border-structure-200 s-bg-structure-0",
-    hover: "hover:s-bg-action-50 hover:s-border-action-200",
-    active: "active:s-bg-action-100 active:s-border-action-500",
-    disabled: "s-text-action-300 s-border-structure-200 s-bg-structure-0",
-    dark: {
-      base: "dark:s-text-action-600-dark dark:s-border-structure-200-dark dark:s-bg-structure-100-dark",
-      hover:
-        "dark:hover:s-text-action-700-dark dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
-      active:
-        "dark:active:s-bg-action-100-dark dark:active:s-border-action-500-dark",
-      disabled:
-        "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
-    },
-  },
-  secondaryWarning: {
-    base: "s-text-warning-500 s-border-structure-200 s-bg-structure-0",
-    hover: "hover:s-bg-warning-50 hover:s-border-warning-200",
-    active: "active:s-bg-warning-100 active:s-border-warning-500",
-    disabled: "s-text-warning-300 s-border-structure-200 s-bg-structure-0",
-    dark: {
-      base: "dark:s-text-warning-600-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
-      hover:
-        "dark:hover:s-bg-warning-50-dark dark:hover:s-border-warning-300-dark",
-      active:
-        "dark:active:s-bg-warning-100-dark dark:active:s-border-warning-500-dark",
-      disabled:
-        "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
-    },
-  },
-  tertiary: {
-    base: "s-text-element-800 s-border-structure-200 s-bg-structure-0",
-    hover:
-      "hover:s-bg-action-50 hover:s-text-action-500 hover:s-border-action-200",
-    active:
-      "active:s-bg-action-100 active:s-text-action-600 active:s-border-action-500",
-    disabled: "s-text-element-500 s-border-structure-200 s-bg-structure-0",
-    dark: {
-      base: "dark:s-text-element-800-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
-      hover:
-        "dark:hover:s-text-action-300 dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
-      active:
-        "dark:active:s-bg-action-100-dark dark:active:s-border-action-500-dark",
-      disabled:
-        "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
-    },
-  },
+const spinnerVariantsMap: Record<ButtonVariantType, SpinnerVariant> = {
+  primary: "light",
+  highlight: "light",
+  warning: "light",
+  outline: "dark",
+  ghost: "dark",
+  white: "light",
 };
 
-const transitionClasses =
-  "s-transition-all s-ease-out s-duration-200 s-cursor-pointer";
+const spinnerVariantsMapIsLoading: Record<ButtonVariantType, SpinnerVariant> = {
+  primary: "light",
+  highlight: "light",
+  warning: "light",
+  white: "light",
+  outline: "slate400",
+  ghost: "slate400",
+};
 
-const magnifyingClasses =
-  "hover:s-scale-105 hover:s-drop-shadow-md active:s-scale-100 active:s-drop-shadow-none";
+interface MetaButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  hasVisual?: boolean;
+  variant?: ButtonVariantType;
+}
 
-export function Button({
-  variant = "primary",
-  type = "button",
-  size = "sm",
-  onClick,
-  disabled = false,
-  labelVisible = true,
-  label,
-  icon,
-  className = "",
-  tooltipPosition,
-  hasMagnifying = false,
-  disabledTooltip = false,
-}: ButtonProps) {
-  let buttonClasses = classNames(
-    "s-inline-flex s-items-center s-border s-scale-100 s-box-border s-whitespace-nowrap",
-    sizeClasses[size],
-    textClasses[size],
-    className
-  );
-  if (disabled) {
-    buttonClasses = classNames(
-      buttonClasses,
-      variantClasses[variant]?.disabled,
-      variantClasses[variant]?.dark.disabled,
-      disabled ? "s-cursor-default" : ""
-    );
-  } else {
-    buttonClasses = classNames(
-      buttonClasses,
-      transitionClasses,
-      hasMagnifying ? magnifyingClasses : "",
-      variantClasses[variant]?.base,
-      variantClasses[variant]?.hover,
-      variantClasses[variant]?.active,
-      variantClasses[variant]?.dark?.base,
-      variantClasses[variant]?.dark?.hover,
-      variantClasses[variant]?.dark?.active
+const MetaButton = React.forwardRef<HTMLButtonElement, MetaButtonProps>(
+  (
+    { className, variant, size = "sm", asChild = false, children, ...props },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size }), className)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Comp>
     );
   }
-
-  const finalContainerClasses = classNames(containerClasses[size]);
-
-  const buttonBase = (
-    <button
-      type="button"
-      className={buttonClasses}
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={label}
-    >
-      {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
-      {labelVisible ? (
-        <div className={classNames("s-truncate", finalContainerClasses)}>
-          {label}
-        </div>
-      ) : null}
-      {type === "menu" && (
-        <Icon
-          className="s-opacity-50"
-          visual={ChevronDownIcon}
-          size={size as IconProps["size"]}
-        />
-      )}
-      {type === "select" && (
-        <Icon
-          className="s-opacity-60"
-          visual={ChevronUpDownIcon}
-          size={size as IconProps["size"]}
-        />
-      )}
-    </button>
-  );
-
-  return labelVisible || disabledTooltip ? (
-    buttonBase
-  ) : (
-    <Tooltip
-      trigger={buttonBase}
-      label={label}
-      side={tooltipPosition}
-      tooltipTriggerAsChild
-    />
-  );
+);
+MetaButton.displayName = "MetaButton";
+
+export interface ButtonProps extends MetaButtonProps {
+  label?: string;
+  icon?: React.ComponentType;
+  isSelect?: boolean;
+  isLoading?: boolean;
+  isPulsing?: boolean;
+  tooltip?: string;
 }
 
-interface ButtonListProps {
-  children: ReactNode;
-  isWrapping?: boolean;
-  className?: string;
-}
-
-Button.List = function ({
-  children,
-  isWrapping = false,
-  className,
-}: ButtonListProps) {
-  const modifiedChildren = Children.map(children, (child) => {
-    // Check if this child is a Button
-    if (React.isValidElement<ButtonProps>(child) && child.type === Button) {
-      // Clone the element with hasMagnifying set to false
-      return cloneElement(child, { hasMagnifying: false });
-    }
-    return child;
-  });
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      label,
+      icon,
+      isLoading = false,
+      variant = "primary",
+      tooltip,
+      isSelect = false,
+      isPulsing = false,
+      size,
+      ...props
+    },
+    ref
+  ) => {
+    const buttonSize = size || "sm";
+    const spinnerVariant = isLoading
+      ? spinnerVariantsMapIsLoading[variant] || "slate400"
+      : spinnerVariantsMap[variant] || "slate400";
+
+    const renderIcon = (visual: React.ComponentType, extraClass = "") => (
+      <Icon visual={visual} size={buttonSize} className={extraClass} />
+    );
 
-  return (
-    <div className={classNames(className ? className : "", "s-flex")}>
-      <div
-        className={classNames(
-          "s-flex s-flex-row s-gap-2",
-          isWrapping ? "s-flex-wrap" : "s-flex-nowrap"
+    const content = (
+      <>
+        {isLoading ? (
+          <div className="-s-mx-0.5">
+            <Spinner size={buttonSize} variant={spinnerVariant} />
+          </div>
+        ) : (
+          icon && renderIcon(icon, "-s-mx-0.5")
         )}
+        {label}
+        {isSelect && renderIcon(ChevronDownIcon, isLoading ? "" : "-s-mr-1")}
+      </>
+    );
+
+    const buttonElement = (
+      <MetaButton
+        ref={ref}
+        size={buttonSize}
+        variant={variant}
+        disabled={isLoading || props.disabled}
+        hasVisual={!!icon || isLoading}
+        className={isPulsing ? "s-animate-pulse" : ""}
+        style={
+          {
+            "--pulse-color": "#93C5FD",
+            "--duration": "1.5s",
+          } as React.CSSProperties
+        }
+        {...props}
       >
-        {modifiedChildren}
-      </div>
-    </div>
-  );
-};
+        {content}
+      </MetaButton>
+    );
+
+    return tooltip ? (
+      <TooltipProvider>
+        <TooltipRoot>
+          <TooltipTrigger>{buttonElement}</TooltipTrigger>
+          <TooltipContent>{tooltip}</TooltipContent>
+        </TooltipRoot>
+      </TooltipProvider>
+    ) : (
+      buttonElement
+    );
+  }
+);
+
+export { Button, buttonVariants, MetaButton };

package/src/components/Citation.tsx

@@ -128,7 +128,7 @@ export function Citation({
           >
             <IconButton
               icon={XCircleIcon}
-              variant={type === "image" ? "white" : "tertiary"}
+              variant={type === "image" ? "primary" : "ghost"}
               onClick={onClose}
             />
           </div>

package/src/components/ConversationMessageActions.tsx

@@ -28,10 +28,9 @@ export function ConversationMessageActions({
   const buttonNodes = buttons?.map((button, i) => (
     <Button
       key={`message-button-${i}`}
-      variant="tertiary"
+      variant="outline"
       size="xs"
       label={button.label}
-      labelVisible={false}
       icon={button.icon}
       onClick={button.onClick}
       disabled={button.disabled || false}
@@ -165,13 +164,10 @@ function EmojiSelector({
       trigger={
         <div ref={buttonRef}>
           <Button
-            variant="tertiary"
+            variant="outline"
             size="xs"
             icon={ReactionIcon}
-            labelVisible={false}
-            label="Reaction picker"
-            disabledTooltip
-            type="menu"
+            isSelect
             disabled={isSubmittingEmoji}
           />
         </div>

package/src/components/DataTable.tsx

@@ -358,7 +358,7 @@ DataTable.Row = function Row({
               <IconButton
                 icon={MoreIcon}
                 size="sm"
-                variant="tertiary"
+                variant="outline"
                 className="s-m-1"
               />
             </DropdownMenu.Button>
@@ -518,7 +518,7 @@ DataTable.CellContentWithCopy = function CellContentWithCopy({
       <span className="s-truncate">{children}</span>
       <IconButton
         icon={isCopied ? ClipboardCheckIcon : ClipboardIcon}
-        variant="tertiary"
+        variant="outline"
         onClick={async (e) => {
           e.stopPropagation();
           await handleCopy();

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,7 +16,7 @@ export type BaseDialogProps = {
   onValidate: () => void;
   title: string;
   validateLabel?: string;
-  validateVariant?: ButtonVariantType;
+  validateVariant?: React.ComponentProps<typeof Button>["variant"];
   cancelLabel?: string;
 };
 
@@ -89,13 +89,13 @@ export function Dialog({
                 </HeadlessDialog.Title>
                 <div className="s-text-base s-text-element-700">{children}</div>
                 <div className="s-flex s-w-full s-justify-end">
-                  <Button.List>
+                  <div className="s-flex s-gap-2">
                     {!isSaving && (
                       <>
                         {props.onCancel && (
                           <Button
                             label={props.cancelLabel ?? "Cancel"}
-                            variant="tertiary"
+                            variant="outline"
                             onClick={props.onCancel}
                           />
                         )}
@@ -108,7 +108,7 @@ export function Dialog({
                       </>
                     )}
                     {isSaving && <Spinner variant="color" />}
-                  </Button.List>
+                  </div>
                 </div>
                 {backgroundType !== "none" && (
                   <div className="s-absolute s-bottom-0 s-left-0 s-right-0 s-top-0 s-z-0">

package/src/components/FilterChips.tsx

@@ -34,10 +34,9 @@ export function FilterChips<T extends string>({
       {filters.map((filterName) => (
         <Button
           label={filterName}
-          variant={selectedFilter === filterName ? "primary" : "tertiary"}
+          variant={selectedFilter === filterName ? "primary" : "ghost"}
           key={filterName}
           size="xs"
-          hasMagnifying={false}
           onClick={() => handleFilterClick(filterName)}
         />
       ))}