@dust-tt/sparkle 0.2.271 → 0.2.272-rc-2

package/src/components/IconButton.tsx

@@ -1,17 +1,18 @@
+import { cva } from "class-variance-authority";
 import React, { ComponentType, MouseEventHandler } from "react";
 
-import { classNames } from "@sparkle/lib/utils";
+import { Button, ButtonVariantType } from "@sparkle/components/Button";
 
-import { Icon, IconProps } from "./Icon";
+import { Icon } from "./Icon";
 import { Tooltip } from "./Tooltip";
 
 type IconButtonProps = {
-  variant?: "primary" | "warning" | "secondary" | "tertiary" | "white";
+  variant?: React.ComponentProps<typeof Button>["variant"];
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  size?: "xs" | "sm" | "md";
+  size?: React.ComponentProps<typeof Button>["size"];
   tooltip?: string;
   tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
-  icon?: ComponentType;
+  icon: ComponentType;
   className?: string;
   disabled?: boolean;
 };
@@ -19,100 +20,63 @@ type IconButtonProps = {
 const baseClasses =
   "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
 
-const iconClasses = {
-  primary: {
-    base: "s-text-action-500",
-    hover: "hover:s-text-action-400",
-    active: "active:s-text-action-600",
-    disabled: "s-text-element-500",
-    dark: {
-      base: "dark:s-text-action-500-dark",
-      hover: "dark:hover:s-text-action-500-dark",
-      active: "dark:active:s-text-action-600-dark",
-      disabled: "dark:s-text-element-500-dark",
-    },
-  },
-  warning: {
-    base: "s-text-warning-500",
-    hover: "hover:s-text-warning-400",
-    active: "active:s-text-warning-600",
-    disabled: "s-text-element-500",
-    dark: {
-      base: "dark:s-text-warning-500-dark",
-      hover: "dark:hover:s-text-warning-500-dark",
-      active: "dark:active:s-text-warning-600-dark",
-      disabled: "dark:s-text-element-500-dark",
-    },
-  },
-  secondary: {
-    base: "s-text-element-900",
-    hover: "hover:s-text-action-400",
-    active: "active:s-text-action-600",
-    disabled: "s-text-element-500",
-    dark: {
-      base: "dark:s-text-element-900-dark",
-      hover: "dark:hover:s-text-action-500-dark",
-      active: "dark:active:s-text-action-600-dark",
-      disabled: "dark:s-text-element-500-dark",
-    },
-  },
-  tertiary: {
-    base: "s-text-element-700",
-    hover: "hover:s-text-action-400",
-    active: "active:s-text-action-600",
-    disabled: "s-text-element-500",
-    dark: {
-      base: "dark:s-text-element-700-dark",
-      hover: "dark:hover:s-text-action-500-dark",
-      active: "dark:active:s-text-action-600-dark",
-      disabled: "dark:s-text-element-500-dark",
+const styleVariants: Record<ButtonVariantType, string> = {
+  primary:
+    "s-text-action-500 dark:s-text-action-500-dark" +
+    "hover:s-text-action-400 dark:hover:s-text-action-500-dark" +
+    "active:s-text-action-600 dark:active:s-text-action-600-dark" +
+    "s-text-element-500 dark:s-text-element-500-dark",
+  warning:
+    "s-text-warning-500 dark:s-text-warning-500-dark" +
+    "hover:s-text-warning-400 dark:hover:s-text-warning-500-dark" +
+    "active:s-text-warning-600 dark:active:s-text-warning-600-dark" +
+    "s-text-element-500 dark:s-text-element-500-dark",
+  highlight:
+    "s-text-element-900 dark:s-text-element-900-dark" +
+    "hover:s-text-action-400 dark:hover:s-text-action-500-dark" +
+    "active:s-text-action-600 dark:active:s-text-action-600-dark" +
+    "s-text-element-500 dark:s-text-element-500-dark",
+  outline:
+    "s-text-element-700 dark:s-text-element-700-dark" +
+    "hover:s-text-action-400 dark:hover:s-text-action-500-dark" +
+    "active:s-text-action-600 dark:active:s-text-action-600-dark" +
+    "s-text-element-500 dark:s-text-element-500-dark",
+  ghost:
+    "s-text-white s-text-white" +
+    "hover:s-text-slate-100 hover:s-text-slate-100" +
+    "active:s-text-slate-200 active:s-text-slate-200" +
+    "s-text-white/50 s-text-white/50",
+};
+
+const iconButtonVariants = cva(baseClasses, {
+  variants: {
+    variant: styleVariants,
+    disabled: {
+      true: "s-text-element-500 s-cursor-default hover:s-scale-100",
     },
   },
-  white: {
-    base: "s-text-white",
-    hover: "hover:s-text-slate-100",
-    active: "active:s-text-slate-200",
-    disabled: "s-text-white/50",
-    dark: {
-      base: "s-text-white",
-      hover: "hover:s-text-slate-100",
-      active: "active:s-text-slate-200",
-      disabled: "s-text-white/50",
-    },
+  defaultVariants: {
+    variant: "outline",
+    disabled: false,
   },
-};
+});
 
 export function IconButton({
-  variant = "tertiary",
+  variant,
   onClick,
   disabled = false,
   tooltip,
-  tooltipPosition = "top",
+  tooltipPosition,
   icon,
-  className = "",
-  size = "sm",
+  className,
+  size,
 }: IconButtonProps) {
-  // Choose the correct group of classes based on 'type'
-  const iconGroup = iconClasses[variant];
-
-  const finalIconClasses = classNames(
-    className,
-    baseClasses,
-    iconGroup.base,
-    disabled ? iconGroup.disabled : iconGroup.hover,
-    disabled ? "" : iconGroup.active,
-    iconGroup.dark.base,
-    disabled ? iconGroup.dark.disabled : iconGroup.dark.hover,
-    disabled ? "" : iconGroup.dark.active
-  );
+  const iconSize = size || "sm";
+  const buttonClasses = iconButtonVariants({ variant, disabled, className });
 
   const IconButtonContent = (
-    <button
-      className={finalIconClasses}
-      onClick={disabled ? undefined : onClick}
-      disabled={disabled}
-    >
-      {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
+    <button className={buttonClasses} onClick={onClick} disabled={disabled}>
+      <Icon visual={icon} size={iconSize} />
     </button>
   );
 

package/src/components/Markdown.tsx

@@ -146,13 +146,12 @@ export function Markdown({
               {childrenContent && (
                 <Button
                   size="xs"
-                  variant="tertiary"
+                  variant="ghost"
                   onClick={async (e) => {
                     e.preventDefault();
                     await handleCopy();
                   }}
-                  label="Copy"
-                  labelVisible={false}
+                  tooltip="Copy"
                   icon={isCopied ? ClipboardCheckIcon : ClipboardIcon}
                 />
               )}

package/src/components/Notification.tsx

@@ -57,7 +57,7 @@ export function Notification({
           <IconButton
             icon={XMarkIcon}
             size="sm"
-            variant="tertiary"
+            variant="ghost"
             onClick={onClick}
           />
         </div>

package/src/components/Pagination.tsx

@@ -75,11 +75,8 @@ export function Pagination({
         )}
       >
         <Button
-          variant="tertiary"
+          variant="ghost"
           size={size === "xs" ? "xs" : "sm"}
-          label="previous"
-          labelVisible={false}
-          disabledTooltip={true}
           disabled={!canPreviousPage}
           icon={ChevronLeftIcon}
           onClick={previousPage}
@@ -96,11 +93,8 @@ export function Pagination({
         </div>
 
         <Button
-          variant="tertiary"
+          variant="ghost"
           size={size === "xs" ? "xs" : "sm"}
-          label="next"
-          labelVisible={false}
-          disabledTooltip={true}
           disabled={!canNextPage}
           icon={ChevronRightIcon}
           onClick={nextPage}

package/src/components/Popup.tsx

@@ -51,7 +51,7 @@ export function Popup({
               <IconButton
                 icon={XMarkIcon}
                 onClick={onClose}
-                variant="secondary"
+                variant="outline"
                 size="sm"
               />
             </div>

package/src/components/RadioGroup.tsx

@@ -3,12 +3,11 @@ import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { Tooltip } from "@sparkle/components/Tooltip";
-import { CircleIcon } from "@sparkle/icons";
 import { cn } from "@sparkle/lib/utils";
 
 const radioStyles = cva(
   cn(
-    "s-aspect-square s-h-4 s-w-4 s-rounded-full s-border s-text-foreground s-ring-offset-background",
+    "s-aspect-square s-rounded-full s-border s-border-border-darker s-text-foreground",
     "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-ring-ring",
     "disabled:s-cursor-not-allowed disabled:s-opacity-50",
     "checked:s-ring-0 checked:s-bg-action-500"
@@ -26,6 +25,21 @@ const radioStyles = cva(
   }
 );
 
+const radioIndicatorStyles = cva(
+  "s-bg-primary s-flex s-items-center s-justify-center s-rounded-full",
+  {
+    variants: {
+      size: {
+        xs: "s-h-2 s-w-2 s-ml-[3px]",
+        sm: "s-h-2.5 s-w-2.5 s-ml-1",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+);
+
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
@@ -66,14 +80,9 @@ const RadioGroupItem = React.forwardRef<
                 className={cn(radioStyles({ size }), className)}
                 {...props}
               >
-                <RadioGroupPrimitive.Indicator className="s-flex s-items-center s-justify-center">
-                  <CircleIcon
-                    className={cn(
-                      size === "xs" ? "s-h-2.5 s-w-2.5" : "s-h-3 s-w-3",
-                      "s-fill-current s-text-current focus:s-bg-action-50-dark"
-                    )}
-                  />
-                </RadioGroupPrimitive.Indicator>
+                <RadioGroupPrimitive.Indicator
+                  className={radioIndicatorStyles({ size })}
+                />
               </RadioGroupPrimitive.Item>
             }
             label={<span>{tooltipMessage}</span>}
@@ -84,14 +93,9 @@ const RadioGroupItem = React.forwardRef<
             className={cn(radioStyles({ size }), className)}
             {...props}
           >
-            <RadioGroupPrimitive.Indicator className="s-flex s-items-center s-justify-center">
-              <CircleIcon
-                className={cn(
-                  size === "xs" ? "s-h-2.5 s-w-2.5" : "s-h-3 s-w-3",
-                  "s-fill-current s-text-current focus:s-bg-action-50-dark"
-                )}
-              />
-            </RadioGroupPrimitive.Indicator>
+            <RadioGroupPrimitive.Indicator
+              className={radioIndicatorStyles({ size })}
+            />
           </RadioGroupPrimitive.Item>
         )}
       </div>

package/src/components/Searchbar.tsx

@@ -82,7 +82,7 @@ export const Searchbar = forwardRef<HTMLInputElement, SearchbarProps>(
           {value && onChange ? (
             <IconButton
               icon={XMarkIcon}
-              variant="secondary"
+              variant="outline"
               size={size}
               onClick={clearInputField}
             />

package/src/components/Spinner.tsx

@@ -11,12 +11,27 @@ import animLightXS from "@sparkle/lottie/spinnerLight";
 import animLightLG from "@sparkle/lottie/spinnerLightLG";
 import animSimpleLight from "@sparkle/lottie/spinnerLightXS";
 
+const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "xxl"] as const;
+
+type SpinnerSizeType = (typeof SPINNER_SIZES)[number];
+
+const SPINNER_VARIANTS = [
+  "color",
+  "light",
+  "dark",
+  "pink900",
+  "purple900",
+  "slate400",
+] as const;
+
+type SpinnerVariantType = (typeof SPINNER_VARIANTS)[number];
+
 export interface SpinnerProps {
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-  variant?: "color" | "light" | "dark" | "pink900" | "purple900";
+  size?: SpinnerSizeType;
+  variant?: SpinnerVariantType;
 }
 
-const pxSizeClasses = {
+const pxSizeClasses: Record<SpinnerSizeType, string> = {
   xs: "16",
   sm: "20",
   md: "24",
@@ -27,16 +42,12 @@ const pxSizeClasses = {
 
 type LottieColorType = [number, number, number, number];
 
-const colors: { [key: string]: LottieColorType } = {
-  emerald900: [0.0235, 0.3059, 0.2314, 1], // #064E3B
-  amber900: [0.5725, 0.251, 0.0549, 1], // #92400E
-  slate900: [0.0588, 0.0902, 0.1647, 1], // #0F172A
+const colors: Record<Exclude<SpinnerVariantType, "color">, LottieColorType> = {
+  light: [1, 1, 1, 1],
+  dark: [0.0588, 0.0902, 0.1647, 1],
   purple900: [0.298, 0.1137, 0.5843, 1], // #4C1D95
-  sky900: [0.0471, 0.2902, 0.4314, 1], // #0C4A6E
   pink900: [0.5137, 0.0941, 0.2627, 1], // #831843
-  red900: [0.498, 0.1137, 0.1137, 1], // #7F1D1D
-  warning900: [0.498, 0.1137, 0.1137, 1], // #7F1D1D
-  action900: [0.1176, 0.2275, 0.5412, 1], // #1E3A8A
+  slate400: [0.5647, 0.6314, 0.7176, 1], // #94a3b8
 };
 
 const isColorArray = (arr: unknown): arr is LottieColorType => {
@@ -75,73 +86,39 @@ const Spinner: React.FC<SpinnerProps> = ({
 
   switch (size) {
     case "xs":
-      switch (variant) {
-        case "light":
-          anim = animSimpleLight;
-          break;
-
-        case "dark":
-          anim = animDarkXS;
-          break;
-
-        default:
-          anim = animColorXS;
-      }
+      anim =
+        variant === "light"
+          ? animSimpleLight
+          : variant === "dark"
+            ? animDarkXS
+            : animColorXS;
       break;
-
     case "xl":
     case "xxl":
-      switch (variant) {
-        case "light":
-          anim = animLightLG;
-          break;
-
-        case "dark":
-          anim = animDarkLG;
-          break;
-
-        default:
-          anim = animColorLG;
-      }
+      anim =
+        variant === "light"
+          ? animLightLG
+          : variant === "dark"
+            ? animDarkLG
+            : animColorLG;
       break;
-
     default:
-      switch (variant) {
-        case "light":
-          anim = animLightXS;
-          break;
-
-        case "dark":
-          anim = animDark;
-          break;
-
-        default:
-          anim = animColor;
-      }
+      anim =
+        variant === "light"
+          ? animLightXS
+          : variant === "dark"
+            ? animDark
+            : animColor;
   }
 
-  if (variant && variant in colors) {
-    // Clone the animation data to modify it
-    const animationData = JSON.parse(JSON.stringify(anim));
-    const newColor = colors[variant];
-
-    if (newColor) {
-      replaceColors(animationData, newColor);
-    }
-
-    return (
-      <Lottie
-        animationData={animationData}
-        style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
-        loop
-        autoplay
-      />
-    );
-  }
+  const animationData =
+    variant === "color"
+      ? anim
+      : replaceColors(JSON.parse(JSON.stringify(anim)), colors[variant]);
 
   return (
     <Lottie
-      animationData={anim}
+      animationData={animationData}
       style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
       loop
       autoplay

package/src/components/Tree.tsx

@@ -2,7 +2,7 @@ import React, { ComponentType, ReactNode, useState } from "react";
 
 import Spinner from "@sparkle/components/Spinner";
 import { ArrowDownSIcon, ArrowRightSIcon } from "@sparkle/icons";
-import { classNames } from "@sparkle/lib/utils";
+import { cn } from "@sparkle/lib/utils";
 
 import { Checkbox, CheckboxProps } from "./Checkbox";
 import { Icon } from "./Icon";
@@ -49,11 +49,10 @@ export function Tree({
     </div>
   ) : (
     <div
-      className={classNames(
-        "s-flex s-flex-col s-gap-1 s-overflow-hidden",
-        isBoxed
-          ? "s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4"
-          : ""
+      className={cn(
+        "s-flex s-flex-col s-gap-0.5 s-overflow-hidden",
+        isBoxed &&
+          "s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4"
       )}
     >
       {modifiedChildren}
@@ -62,9 +61,9 @@ export function Tree({
 }
 
 const treeItemStyleClasses = {
-  base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center",
+  base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-1.5",
   isNavigatableBase:
-    "s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
+    "s-rounded-lg s-pl-1.5 s-pr-3 s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
   isNavigatableUnselected:
     "s-border-structure-200/0 s-bg-white/0 hover:s-border-structure-200 hover:s-bg-white",
   isNavigatableSelected: "s-border-structure-200 s-bg-white",
@@ -73,7 +72,6 @@ const treeItemStyleClasses = {
 interface TreeItemProps {
   label?: string;
   type?: "node" | "item" | "leaf";
-  size?: "sm" | "md";
   tailwindIconTextColor?: string;
   visual?: ComponentType<{ className?: string }>;
   checkbox?: CheckboxProps;
@@ -104,7 +102,6 @@ Tree.Item = function ({
   type = "node",
   className = "",
   labelClassName = "",
-  size = "sm",
   tailwindIconTextColor = "s-text-element-800",
   visual,
   checkbox,
@@ -145,25 +142,18 @@ Tree.Item = function ({
   return (
     <>
       <div
-        className={classNames(
-          className ? className : "",
+        className={cn(
           treeItemStyleClasses.base,
           onItemClick ? "s-cursor-pointer" : "",
           isNavigatable ? treeItemStyleClasses.isNavigatableBase : "",
-          isNavigatable
-            ? size === "sm"
-              ? "s-gap-1 s-rounded-lg s-py-1 s-pl-1.5 s-pr-3"
-              : "s-gap-2 s-rounded-lg s-py-2 s-pl-2.5 s-pr-4"
-            : size === "sm"
-              ? "s-gap-1 s-py-1"
-              : "s-gap-2 s-py-2",
           isNavigatable
             ? isSelected
               ? treeItemStyleClasses.isNavigatableSelected
               : treeItemStyleClasses.isNavigatableUnselected
             : "",
           isExpanded ? "is-expanded" : "is-collapsed",
-          type
+          type,
+          className
         )}
         onClick={onItemClick ? onItemClick : undefined}
       >
@@ -171,7 +161,7 @@ Tree.Item = function ({
           <IconButton
             icon={isExpanded ? ArrowDownSIcon : ArrowRightSIcon}
             size="xs"
-            variant="secondary"
+            variant="outline"
             onClick={(e) => {
               e.stopPropagation();
               if (effectiveOnChevronClick) {
@@ -182,28 +172,19 @@ Tree.Item = function ({
         )}
         {type === "leaf" && <div className="s-w-4 s-flex-shrink-0"></div>}
         {checkbox && <Checkbox {...checkbox} size="xs" />}
-        <Icon
-          visual={visual}
-          size={size === "sm" ? "sm" : "md"}
-          className={classNames("s-flex-shrink-0", tailwindIconTextColor)}
-        />
-
+        <Icon visual={visual} size="xs" className={tailwindIconTextColor} />
         <div
-          className={classNames(
-            `s-truncate s-font-medium s-text-element-900 ${labelClassName}`,
-            size === "sm" ? "s-ml-1 s-text-sm" : "s-ml-1 s-text-base"
-          )}
+          className={`s-font-regular s-truncate s-text-sm s-text-element-900 ${labelClassName}`}
         >
           {label}
         </div>
         <div className="s-grow" />
         {actions && (
           <div
-            className={classNames(
+            className={cn(
               "s-flex s-gap-2 s-pl-4",
-              areActionsFading
-                ? "s-transform s-opacity-0 s-duration-300 group-hover/tree:s-opacity-100"
-                : ""
+              areActionsFading &&
+                "s-transform s-opacity-0 s-duration-300 group-hover/tree:s-opacity-100"
             )}
           >
             {actions}
@@ -211,7 +192,7 @@ Tree.Item = function ({
         )}
       </div>
       {React.Children.count(childrenToRender) > 0 && (
-        <div className="s-pl-2.5">{childrenToRender}</div>
+        <div className="s-pl-4">{childrenToRender}</div>
       )}
     </>
   );
@@ -223,7 +204,7 @@ interface TreeEmptyProps {
 
 Tree.Empty = function ({ label }: TreeEmptyProps) {
   return (
-    <div className="s-py-1 s-pl-6 s-text-sm s-font-medium s-text-element-700">
+    <div className="s-font-regular s-py-1.5 s-pl-6 s-text-sm s-text-muted-foreground">
       {label}
     </div>
   );

package/src/components/ZoomableImageCitationWrapper.tsx

@@ -42,7 +42,7 @@ export function ZoomableImageCitationWrapper({
                 <IconButton
                   icon={XCircleIcon}
                   onClick={handleZoomToggle}
-                  variant="white"
+                  variant="ghost"
                 />
               </div>
             </Dialog.Title>

package/src/stories/Banner.stories.tsx

@@ -20,7 +20,7 @@ export const BasicBanner = () => {
           <p>
             Join us in Denver from June 7 – 9 to see what’s coming next&nbsp;
           </p>
-          <Button variant="tertiary" size="sm" label="Register Now" />
+          <Button variant="ghost" size="sm" label="Register Now" />
         </div>
       </Banner>
       <Banner variant="incident">