@dust-tt/sparkle 0.2.274 → 0.2.276

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,68 @@ 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",
+  white:
+    "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",
+};
+
+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/Input.tsx

@@ -1,3 +1,4 @@
+import { cva } from "class-variance-authority";
 import React, { forwardRef } from "react";
 
 import { cn } from "@sparkle/lib/utils";
@@ -13,51 +14,63 @@ export interface InputProps
   label?: string;
 }
 
-const inputStyleClasses = cn(
-  "s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
-  "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground",
-  "placeholder:s-text-muted-foreground",
-  "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-ring-ring focus-visible:s-border-primary-400",
-  "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground"
+const INPUT_STATES = ["error", "disabled", "default"];
+
+type InputStateType = (typeof INPUT_STATES)[number];
+
+const stateVariantStyles: Record<InputStateType, string> = {
+  default: "focus-visible:s-ring-ring",
+  disabled:
+    "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground",
+  error: "s-border-border-warning focus:s-ring-ring-warning",
+};
+const inputStyleClasses = cva(
+  cn(
+    "s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
+    "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground",
+    "placeholder:s-text-muted-foreground",
+    "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-border-border-dark"
+  ),
+  {
+    variants: {
+      state: stateVariantStyles,
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
 );
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
-    { className, error, value, label, showErrorLabel = false, ...props },
+    {
+      className,
+      error,
+      value,
+      label,
+      disabled,
+      showErrorLabel = false,
+      ...props
+    },
     ref
   ) => {
+    const state = error ? "error" : disabled ? "disabled" : "default";
     return (
       <div className="s-flex s-flex-col s-gap-1 s-px-1">
-        {label && (
-          <Label
-            htmlFor={props.name}
-            className="s-pb-1 s-text-element-700 dark:s-text-element-700-dark"
-          >
-            {label}
-          </Label>
-        )}
+        {label && <Label htmlFor={props.name}>{label}</Label>}
         <input
           ref={ref}
-          className={cn(
-            inputStyleClasses,
-            className,
-            !error
-              ? cn(
-                  "s-ring-structure-200 focus:s-ring-action-300",
-                  "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark"
-                )
-              : cn(
-                  "s-ring-warning-200 focus:s-ring-warning-300",
-                  "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
-                )
-          )}
+          className={cn(inputStyleClasses({ state }), className)}
           data-1p-ignore={props.type !== "password"}
           value={value ?? undefined}
+          disabled={disabled}
           {...props}
         />
-        <div className="s-ml-2 s-text-sm s-text-warning-500">
-          {showErrorLabel && error ? error : null}
-        </div>
+        {showErrorLabel && error && (
+          <div className="s-ml-3.5 s-text-xs s-text-foreground-warning">
+            {error}
+          </div>
+        )}
       </div>
     );
   }

package/src/components/Label.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@sparkle/lib/utils";
 
 const labelVariants = cn(
-  "s-text-sm s-text-foreground s-leading-none",
+  "s-text-sm s-font-medium s-text-foreground s-leading-none",
   "peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70"
 );
 

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/NavigationList.tsx

@@ -0,0 +1,137 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Button, Icon } from "@sparkle/components/";
+import { MoreIcon } from "@sparkle/icons";
+import { cn } from "@sparkle/lib/utils";
+
+const listStyles = cva("s-flex", {
+  variants: {
+    layout: {
+      container: "s-gap-1 s-flex-col s-overflow-hidden",
+      item: cn(
+        "s-box-border s-items-center s-w-full s-flex s-gap-1.5 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-xl s-text-sm s-px-3 s-py-2 s-transition-colors s-duration-300",
+        "data-[disabled]:s-pointer-events-none data-[disabled]:s-text-muted-foreground",
+        "hover:s-text-foreground hover:s-bg-structure-150"
+      ),
+    },
+    state: {
+      active: "active:s-bg-structure-200",
+      selected: "s-text-foreground s-font-medium s-bg-structure-150",
+      unselected: "s-text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    layout: "container",
+    state: "unselected",
+  },
+});
+
+const labelStyles = cva(
+  "s-font-semibold s-pt-6 s-pb-2 s-text-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
+);
+
+const NavigationList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(listStyles({ layout: "container" }), className)}
+    {...props}
+  />
+));
+NavigationList.displayName = "NavigationList";
+
+interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  selected?: boolean;
+  label?: string;
+  icon?: React.ComponentType;
+}
+
+const NavigationListItem = React.forwardRef<
+  HTMLDivElement,
+  NavigationListItemProps
+>(({ className, selected, label, icon, ...props }, ref) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isPressed, setIsPressed] = React.useState(false);
+
+  const handleMouseDown = (event: React.MouseEvent) => {
+    if (!(event.target as HTMLElement).closest(".new-button-class")) {
+      setIsPressed(true);
+    }
+  };
+
+  return (
+    <div className={className} ref={ref} {...props}>
+      <div
+        className={listStyles({
+          layout: "item",
+          state: selected ? "selected" : isPressed ? "active" : "unselected",
+        })}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => {
+          setIsHovered(false);
+          setIsPressed(false);
+        }}
+        onMouseDown={handleMouseDown}
+        onMouseUp={() => setIsPressed(false)}
+      >
+        {icon && <Icon visual={icon} size="sm" />}
+        {label && (
+          <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap">
+            {label}
+          </span>
+        )}
+        {isHovered && (
+          <div className="-s-mr-2 s-flex s-h-4 s-items-center">
+            <Button
+              variant="ghost"
+              icon={MoreIcon}
+              size="xs"
+              onClick={(e) => e.stopPropagation()}
+              onMouseDown={(e) => e.stopPropagation()}
+              onMouseUp={(e) => e.stopPropagation()}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+NavigationListItem.displayName = "NavigationListItem";
+
+const variantStyles = cva("", {
+  variants: {
+    variant: {
+      primary: "s-text-foreground",
+      secondary: "s-text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+  },
+});
+
+interface NavigationListLabelProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof variantStyles> {
+  label: string;
+}
+
+const NavigationListLabel = React.forwardRef<
+  HTMLDivElement,
+  NavigationListLabelProps
+>(({ className, variant, label, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(labelStyles(), variantStyles({ variant }), className)}
+    {...props}
+  >
+    {label}
+  </div>
+));
+
+NavigationListLabel.displayName = "NavigationListLabel";
+
+export { NavigationList, NavigationListItem, NavigationListLabel };

package/src/components/NewDropdown.tsx

@@ -13,7 +13,7 @@ type ItemVariantType = (typeof ITEM_VARIANTS)[number];
 export const menuStyleClasses = {
   inset: "s-pl-8",
   container: cn(
-    "s-rounded-lg s-border s-border-hovering s-bg-white s-p-1 s-text-primary-950",
+    "s-rounded-xl s-border s-border-hovering s-bg-white s-p-1 s-text-primary-950",
     "s-z-50 s-min-w-[8rem] s-overflow-hidden",
     "data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0 data-[state=closed]:s-zoom-out-95 data-[state=open]:s-zoom-in-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"
   ),
@@ -83,7 +83,7 @@ const ItemWithLabelIconAndDescription = <
   return (
     <>
       {label && (
-        <div className="s-grid s-grid-cols-[auto,1fr] s-gap-x-1">
+        <div className="s-grid s-grid-cols-[auto,1fr] s-gap-x-1.5">
           {icon && (
             <div
               className={cn(

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/Popover.tsx

@@ -38,7 +38,7 @@ const PopoverContent = React.forwardRef<
           "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",
-          "s-z-50 s-rounded-lg s-border s-bg-background s-text-primary-950 s-shadow-md s-outline-none",
+          "s-z-50 s-rounded-xl s-border s-bg-background s-text-primary-950 s-shadow-md s-outline-none",
           fullWidth ? "s-grow" : "s-w-72 s-p-4",
           className
         )}

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

@@ -46,7 +46,7 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("s-grid", className)}
+      className={cn("s-grid s-gap-2", className)}
       {...props}
       ref={ref}
     />
@@ -69,34 +69,32 @@ const RadioGroupItem = React.forwardRef<
     { tooltipMessage, className, size, tooltipAsChild = false, ...props },
     ref
   ) => {
+    const item = (
+      <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(radioStyles({ size }), className)}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator
+          className={radioIndicatorStyles({ size })}
+        />
+      </RadioGroupPrimitive.Item>
+    );
     return (
-      <div className="s-group">
+      <div
+        className={cn(
+          "s-group",
+          size === "sm" ? "s-h-5 s-w-5" : "-s-mt-1.5 s-h-4 s-w-4"
+        )}
+      >
         {tooltipMessage ? (
           <Tooltip
             triggerAsChild={tooltipAsChild}
-            trigger={
-              <RadioGroupPrimitive.Item
-                ref={ref}
-                className={cn(radioStyles({ size }), className)}
-                {...props}
-              >
-                <RadioGroupPrimitive.Indicator
-                  className={radioIndicatorStyles({ size })}
-                />
-              </RadioGroupPrimitive.Item>
-            }
+            trigger={item}
             label={<span>{tooltipMessage}</span>}
           />
         ) : (
-          <RadioGroupPrimitive.Item
-            ref={ref}
-            className={cn(radioStyles({ size }), className)}
-            {...props}
-          >
-            <RadioGroupPrimitive.Indicator
-              className={radioIndicatorStyles({ size })}
-            />
-          </RadioGroupPrimitive.Item>
+          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}
             />