@dust-tt/sparkle 0.2.472 → 0.2.474-rc-1

package/src/components/Button.tsx

@@ -29,7 +29,7 @@ export const BUTTON_VARIANTS = [
 
 export type ButtonVariantType = (typeof BUTTON_VARIANTS)[number];
 
-export const BUTTON_SIZES = ["mini", "xs", "sm", "md"] as const;
+export const BUTTON_SIZES = ["xmini", "mini", "xs", "sm", "md"] as const;
 export type ButtonSizeType = (typeof BUTTON_SIZES)[number];
 
 // Define button styling with cva
@@ -97,10 +97,11 @@ const buttonVariants = cva(
         ),
       },
       size: {
-        mini: "s-h-7 s-p-1.5 s-rounded-lg s-label-xs s-gap-1.5",
-        xs: "s-h-7 s-px-2.5 s-rounded-lg s-label-xs s-gap-1.5",
-        sm: "s-h-9 s-px-3 s-rounded-xl s-label-sm s-gap-2",
-        md: "s-h-12 s-px-4 s-py-2 s-rounded-2xl s-label-base s-gap-2.5",
+        xmini: "s-h-6 s-w-6 s-rounded-lg s-label-xs s-gap-1 s-shrink-0",
+        mini: "s-h-7 s-w-7 s-rounded-lg s-label-xs s-gap-1.5 s-shrink-0",
+        xs: "s-h-7 s-px-2.5 s-rounded-lg s-label-xs s-gap-1.5 s-shrink-0",
+        sm: "s-h-9 s-px-3 s-rounded-xl s-label-sm s-gap-2 s-shrink-0",
+        md: "s-h-12 s-px-4 s-py-2 s-rounded-2xl s-label-base s-gap-2.5 s-shrink-0",
       },
     },
     defaultVariants: {
@@ -113,7 +114,8 @@ const buttonVariants = cva(
 const labelVariants = cva("", {
   variants: {
     size: {
-      mini: "s-label-xs",
+      xmini: "s-label-xs s-hidden",
+      mini: "s-label-xs s-hidden",
       xs: "s-label-xs",
       sm: "s-label-sm",
       md: "s-label-base",
@@ -166,6 +168,25 @@ const MetaButton = React.forwardRef<HTMLButtonElement, MetaButtonProps>(
 );
 MetaButton.displayName = "MetaButton";
 
+type IconSizeType = "xs" | "sm" | "md";
+type CounterSizeType = "xs" | "sm" | "md";
+
+const ICON_SIZE_MAP: Record<ButtonSizeType, IconSizeType> = {
+  xmini: "xs",
+  mini: "sm",
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+};
+
+const COUNTER_SIZE_MAP: Record<ButtonSizeType, CounterSizeType> = {
+  xmini: "xs",
+  mini: "xs",
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+};
+
 type CommonButtonProps = Omit<MetaButtonProps, "children"> &
   Omit<LinkWrapperProps, "children"> & {
     isSelect?: boolean;
@@ -214,17 +235,16 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref
   ) => {
-    const iconsSize = size === "mini" ? "sm" : size;
-    const spinnerVariant =
-      (variant && spinnerVariantsMap[variant]) || "gray400";
+    const iconSize = ICON_SIZE_MAP[size];
+    const counterSize = COUNTER_SIZE_MAP[size];
 
     const renderIcon = (visual: React.ComponentType, extraClass = "") => (
-      <Icon visual={visual} size={iconsSize} className={cn(extraClass)} />
+      <Icon visual={visual} size={iconSize} className={cn(extraClass)} />
     );
     const renderChevron = (visual: React.ComponentType, extraClass = "") => (
       <Icon
         visual={visual}
-        size={iconsSize}
+        size={iconSize}
         className={cn(variant ? chevronVariantMap[variant] : "", extraClass)}
       />
     );
@@ -235,8 +255,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const content = (
       <>
         {isLoading ? (
-          <div className="-s-mx-0.5">
-            <Spinner size={iconsSize} variant={spinnerVariant} />
+          <div
+            className={cn(
+              "-s-mx-0.5",
+              size === "mini" && "s-w-5 s-px-0.5",
+              size === "xmini" && "s-w-5 s-px-0.5"
+            )}
+          >
+            <Spinner
+              size={size === "mini" || size === "xmini" ? "xs" : iconSize}
+              variant={(variant && spinnerVariantsMap[variant]) || "gray400"}
+            />
           </div>
         ) : (
           icon && renderIcon(icon, "-s-mx-0.5")
@@ -254,7 +283,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               <Counter
                 value={Number(counterValue)}
                 variant={variant || "primary"}
-                size={size === "mini" ? "xs" : size}
+                size={counterSize}
                 isInButton={true}
               />
             )}

package/src/components/Counter.tsx

@@ -6,13 +6,13 @@ import { cn } from "@sparkle/lib/utils";
 export const COUNTER_SIZES = ["xs", "sm", "md"] as const;
 
 const counterVariants = cva(
-  "s-inline-flex s-items-center s-justify-center s-rounded-full s-font-medium",
+  "s-inline-flex s-items-center s-justify-center s-rounded-full",
   {
     variants: {
       size: {
-        xs: "s-h-5 s-min-w-[1.25rem] s-px-1 s-text-xs",
-        sm: "s-h-6 s-min-w-[1.5rem] s-px-1.5 s-text-sm",
-        md: "s-h-7 s-min-w-[1.75rem] s-px-2 s-text-base",
+        xs: "s-h-5 s-min-w-[20px] s-px-1 s-text-xs",
+        sm: "s-h-6 s-min-w-[24px] s-px-1.5 s-text-sm",
+        md: "s-h-7 s-min-w-[28px] s-px-2 s-text-base",
       },
       variant: {
         primary: "",
@@ -32,27 +32,27 @@ const counterVariants = cva(
         isInButton: false,
         variant: "primary",
         className:
-          "s-bg-primary dark:s-bg-primary-night s-text-primary-50 dark:s-text-primary-800",
+          "s-bg-primary dark:s-bg-primary-night s-text-primary-50 dark:s-text-primary-800 s-font-medium",
       },
       {
         isInButton: false,
         variant: "highlight",
-        className: "s-bg-highlight s-text-white",
+        className: "s-bg-highlight s-text-white s-font-medium",
       },
       {
         isInButton: false,
         variant: "warning",
-        className: "s-bg-warning s-text-white",
+        className: "s-bg-warning s-text-white s-font-medium",
       },
       {
         isInButton: false,
         variant: "outline",
-        className: "s-bg-primary-200 s-text-primary-900",
+        className: "s-bg-primary-200 s-text-primary-900 s-font-medium",
       },
       {
         isInButton: false,
         variant: ["ghost", "ghost-secondary"],
-        className: "s-text-primary dark:s-text-primary-night",
+        className: "s-text-primary dark:s-text-primary-night s-font-medium",
       },
       {
         isInButton: true,

package/src/components/Dropdown.tsx

@@ -6,6 +6,7 @@ import { useRef } from "react";
 import { DoubleIcon } from "@sparkle/components/DoubleIcon";
 import { Icon } from "@sparkle/components/Icon";
 import { LinkWrapper, LinkWrapperProps } from "@sparkle/components/LinkWrapper";
+import { ScrollArea } from "@sparkle/components/ScrollArea";
 import { SearchInput, SearchInputProps } from "@sparkle/components/SearchInput";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
@@ -21,7 +22,7 @@ export const menuStyleClasses = {
     "s-border s-border-border dark:s-border-border-night",
     "s-bg-background dark:s-bg-muted-background-night",
     "s-text-foreground dark:s-text-foreground-night",
-    "s-z-50 s-min-w-[8rem] s-overflow-hidden",
+    "s-z-50 s-min-w-[8rem]",
     "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"
   ),
   item: cva(
@@ -228,6 +229,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset = 4,
       mountPortal = true,
       mountPortalContainer,
+      children,
       ...props
     },
     ref
@@ -236,9 +238,22 @@ const DropdownMenuContent = React.forwardRef<
       <DropdownMenuPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}
-        className={cn(menuStyleClasses.container, "s-shadow-md", className)}
+        className={cn(
+          menuStyleClasses.container,
+          "s-h-fit s-p-0 s-shadow-md",
+          className
+        )}
         {...props}
-      />
+      >
+        <ScrollArea
+          className="s-w-full"
+          viewportClassName={cn(
+            "s-max-h-[var(--radix-dropdown-menu-content-available-height)]"
+          )}
+        >
+          {children}
+        </ScrollArea>
+      </DropdownMenuPrimitive.Content>
     );
 
     const [container, setContainer] = React.useState<Element | undefined>(

package/src/components/SplitButton.tsx

@@ -1,4 +1,3 @@
-import { cva } from "class-variance-authority";
 import React, { useState } from "react";
 
 import {
@@ -9,27 +8,11 @@ import {
   DropdownMenuTrigger,
   RegularButtonProps,
 } from "@sparkle/components/";
-import {
-  Button,
-  ButtonSizeType,
-  ButtonVariantType,
-} from "@sparkle/components/Button";
+import { Button, ButtonVariantType } from "@sparkle/components/Button";
 import { Separator } from "@sparkle/components/Separator";
 import { ChevronDownIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib";
 
-const separatorSizeVariants: Record<Exclude<ButtonSizeType, "mini">, string> = {
-  xs: "s-h-3",
-  sm: "s-h-5",
-  md: "s-h-7",
-};
-
-const separatorVariants = cva("s--ml-[1px]", {
-  variants: {
-    size: separatorSizeVariants,
-  },
-});
-
 interface SplitButtonActionProps {
   label: string;
   icon?: React.ComponentType;
@@ -101,7 +84,7 @@ const SplitButton = React.forwardRef<HTMLButtonElement, SplitButtonProps>(
           ref={ref}
           className={cn("s-rounded-r-none s-border-r-0", className)}
         />
-        <div className={separatorVariants({ size })}>
+        <div className="sm">
           <Separator orientation="vertical" />
         </div>
         <DropdownMenu>

package/src/components/Tree.tsx

@@ -67,7 +67,7 @@ export function Tree({
       className={cn(
         "s-flex s-flex-col s-gap-0.5 s-overflow-hidden",
         isBoxed &&
-          "s-rounded-xl s-border s-border-border s-bg-muted-background s-p-4 dark:s-border-border-night dark:s-bg-muted-background-night",
+          "s-rounded-xl s-border s-border-border s-bg-muted-background s-px-3 s-py-2 dark:s-border-border-night dark:s-bg-muted-background-night",
         className
       )}
     >
@@ -235,7 +235,7 @@ Tree.Item = React.forwardRef<
           {type === "node" && (
             <Button
               icon={isExpanded ? ArrowDownSIcon : ArrowRightSIcon}
-              size="xs"
+              size="xmini"
               variant="ghost-secondary"
               disabled={!effectiveOnChevronClick}
               onClick={(e) => {
@@ -313,7 +313,7 @@ Tree.Empty = function ({ label, onItemClick }: TreeEmptyProps) {
   return (
     <div
       className={cn(
-        "s-font-regular s-py-1.5 s-pl-6 s-text-sm",
+        "s-copy-sm s-py-1.5 s-pl-6 s-italic",
         "s-text-muted-foreground dark:s-text-muted-foreground-night",
         onItemClick ? "s-cursor-pointer" : ""
       )}