@dust-tt/sparkle 0.2.467 → 0.2.469

package/src/components/Button.tsx

@@ -32,76 +32,7 @@ export type ButtonVariantType = (typeof BUTTON_VARIANTS)[number];
 export const BUTTON_SIZES = ["mini", "xs", "sm", "md"] as const;
 export type ButtonSizeType = (typeof BUTTON_SIZES)[number];
 
-const styleVariants: Record<ButtonVariantType, string> = {
-  primary: cn(
-    "s-bg-primary-800 dark:s-bg-primary-800-night",
-    "s-text-primary-50 dark:s-text-primary-50-night",
-    "hover:s-bg-primary-light dark:hover:s-bg-primary-dark-night",
-    "active:s-bg-primary-dark dark:active:s-bg-primary-light-night",
-    "disabled:s-bg-primary-muted  disabled:s-text-highlight-50/60 dark:disabled:s-bg-primary-muted-night"
-  ),
-  highlight: cn(
-    "s-bg-highlight",
-    "s-text-highlight-50",
-    "hover:s-bg-highlight-light",
-    "active:s-bg-highlight-dark",
-    "disabled:s-bg-highlight-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-highlight-muted-night"
-  ),
-  warning: cn(
-    "s-bg-warning",
-    "s-text-warning-50",
-    "hover:s-bg-warning-light",
-    "active:s-bg-warning-dark",
-    "disabled:s-bg-warning-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-warning-muted-night"
-  ),
-  outline: cn(
-    "s-border",
-    "s-border-border dark:s-border-border-night",
-    "s-text-primary dark:s-text-primary-night",
-    "s-bg-background dark:s-bg-background-night",
-    "hover:s-text-primary dark:hover:s-text-primary-night",
-    "hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
-    "hover:s-border-primary-150 dark:hover:s-border-border-night",
-    "active:s-bg-primary-300 dark:active:s-bg-primary-900",
-    "disabled:s-text-primary-muted dark:disabled:s-text-primary-muted-night",
-    "disabled:s-border-primary-100 dark:disabled:s-border-primary-100-night"
-  ),
-  ghost: cn(
-    "s-border",
-    "s-border-border/0 dark:s-border-border-night/0",
-    "s-text-foreground dark:s-text-white",
-    "hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
-    "hover:s-text-primary-900 dark:hover:s-text-white",
-    "hover:s-border-border-dark dark:hover:s-border-border-night",
-    "active:s-bg-primary-300 dark:active:s-bg-primary-900",
-    "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night"
-  ),
-  "ghost-secondary": cn(
-    "s-border",
-    "s-border-border/0 dark:s-border-border-night/0",
-    "s-text-muted-foreground dark:s-text-muted-foreground-night",
-    "hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
-    "hover:s-text-primary-900 dark:hover:s-text-primary-900-night",
-    "hover:s-border-border-dark dark:hover:s-border-border-night",
-    "active:s-bg-primary-300 dark:active:s-bg-primary-900",
-    "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night"
-  ),
-};
-
-const sizeVariants: Record<ButtonSizeType, string> = {
-  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",
-};
-
-const labelVariants: Record<ButtonSizeType, string> = {
-  mini: "s-label-xs",
-  xs: "s-label-xs",
-  sm: "s-label-sm",
-  md: "s-label-base",
-};
-
+// Define button styling with cva
 const buttonVariants = cva(
   cn(
     "s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-ring-offset-background s-transition-colors",
@@ -110,44 +41,124 @@ const buttonVariants = cva(
   ),
   {
     variants: {
-      variant: styleVariants,
-      size: sizeVariants,
+      variant: {
+        primary: cn(
+          "s-bg-primary-800 dark:s-bg-primary-800-night",
+          "s-text-primary-50 dark:s-text-primary-50-night",
+          "hover:s-bg-primary-light dark:hover:s-bg-primary-dark-night",
+          "active:s-bg-primary-dark dark:active:s-bg-primary-light-night",
+          "disabled:s-bg-primary-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-primary-muted-night"
+        ),
+        highlight: cn(
+          "s-bg-highlight",
+          "s-text-highlight-50",
+          "hover:s-bg-highlight-light",
+          "active:s-bg-highlight-dark",
+          "disabled:s-bg-highlight-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-highlight-muted-night"
+        ),
+        warning: cn(
+          "s-bg-warning",
+          "s-text-warning-50",
+          "hover:s-bg-warning-light",
+          "active:s-bg-warning-dark",
+          "disabled:s-bg-warning-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-warning-muted-night"
+        ),
+        outline: cn(
+          "s-border",
+          "s-border-border dark:s-border-border-night",
+          "s-text-primary dark:s-text-primary-night",
+          "s-bg-background dark:s-bg-background-night",
+          "hover:s-text-primary dark:hover:s-text-primary-night",
+          "hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
+          "hover:s-border-primary-150 dark:hover:s-border-border-night",
+          "active:s-bg-primary-300 dark:active:s-bg-primary-900",
+          "disabled:s-text-primary-muted dark:disabled:s-text-primary-muted-night",
+          "disabled:s-border-primary-100 dark:disabled:s-border-primary-100-night"
+        ),
+        ghost: cn(
+          "s-border",
+          "s-border-border/0 dark:s-border-border-night/0",
+          "s-text-foreground dark:s-text-white",
+          "hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
+          "hover:s-text-primary-900 dark:hover:s-text-white",
+          "hover:s-border-border-dark dark:hover:s-border-border-night",
+          "active:s-bg-primary-300 dark:active:s-bg-primary-900",
+          "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night"
+        ),
+        "ghost-secondary": cn(
+          "s-border",
+          "s-border-border/0 dark:s-border-border-night/0",
+          "s-text-muted-foreground dark:s-text-muted-foreground-night",
+          "hover:s-bg-primary-100 dark:hover:s-bg-primary-900",
+          "hover:s-text-primary-900 dark:hover:s-text-primary-900-night",
+          "hover:s-border-border-dark dark:hover:s-border-border-night",
+          "active:s-bg-primary-300 dark:active:s-bg-primary-900",
+          "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night"
+        ),
+      },
+      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",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "sm",
     },
   }
 );
 
+const labelVariants = cva("", {
+  variants: {
+    size: {
+      mini: "s-label-xs",
+      xs: "s-label-xs",
+      sm: "s-label-sm",
+      md: "s-label-base",
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});
+
 type SpinnerVariant = NonNullable<SpinnerProps["variant"]>;
 
 const spinnerVariantsMap: Record<ButtonVariantType, SpinnerVariant> = {
-  primary: "light",
-  highlight: "light",
-  warning: "light",
-  outline: "dark",
-  ghost: "dark",
-  "ghost-secondary": "dark",
+  primary: "gray50",
+  highlight: "gray50",
+  warning: "gray50",
+  outline: "gray500",
+  ghost: "gray500",
+  "ghost-secondary": "gray400",
 };
 
-const spinnerVariantsMapIsLoading: Record<ButtonVariantType, SpinnerVariant> = {
-  primary: "light",
-  highlight: "light",
-  warning: "light",
-  outline: "slate400",
-  ghost: "slate400",
-  "ghost-secondary": "dark",
-};
+const chevronVariantMap = {
+  primary: "s-text-white/70",
+  outline: "s-text-foreground/70 dark:s-text-foreground-night/70",
+  ghost: "s-text-foreground/70 dark:s-text-foreground-night/70",
+  "ghost-secondary": "s-text-foreground/70 dark:s-text-foreground-night/70",
+  highlight: "s-text-white/70",
+  warning: "s-text-white/70",
+} as const;
 
 export interface MetaButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
-  variant?: ButtonVariantType | null;
 }
 
 const MetaButton = React.forwardRef<HTMLButtonElement, MetaButtonProps>(
-  ({ className, asChild = false, children, ...props }, ref) => {
+  ({ className, asChild = false, variant, size, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (
-      <Comp className={className} ref={ref} {...props}>
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      >
         {children}
       </Comp>
     );
@@ -204,12 +215,18 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) => {
     const iconsSize = size === "mini" ? "sm" : size;
-    const spinnerVariant = isLoading
-      ? (variant && spinnerVariantsMapIsLoading[variant]) || "slate400"
-      : (variant && spinnerVariantsMap[variant]) || "slate400";
+    const spinnerVariant =
+      (variant && spinnerVariantsMap[variant]) || "gray400";
 
     const renderIcon = (visual: React.ComponentType, extraClass = "") => (
-      <Icon visual={visual} size={iconsSize} className={extraClass} />
+      <Icon visual={visual} size={iconsSize} className={cn(extraClass)} />
+    );
+    const renderChevron = (visual: React.ComponentType, extraClass = "") => (
+      <Icon
+        visual={visual}
+        size={iconsSize}
+        className={cn(variant ? chevronVariantMap[variant] : "", extraClass)}
+      />
     );
 
     const showCounter = isCounter && counterValue != null;
@@ -227,7 +244,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
         {showContainer && (
           <div
-            className={cn("s-flex s-items-center s-gap-2", labelVariants[size])}
+            className={cn(
+              "s-flex s-items-center s-gap-2",
+              labelVariants({ size })
+            )}
           >
             {label}
             {showCounter && (
@@ -240,7 +260,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             )}
           </div>
         )}
-        {isSelect && renderIcon(ChevronDownIcon, isLoading ? "" : "-s-mr-1")}
+        {isSelect && renderChevron(ChevronDownIcon, isLoading ? "" : "-s-mr-1")}
       </>
     );
 
@@ -248,12 +268,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <MetaButton
         ref={ref}
         size={size}
+        variant={variant}
         disabled={isLoading || props.disabled}
-        className={cn(
-          buttonVariants({ variant, size }),
-          isPulsing && "s-animate-pulse",
-          className
-        )}
+        className={cn(isPulsing && "s-animate-pulse", className)}
         aria-label={ariaLabel || tooltip || label}
         style={
           {

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-font-semibold s-leading-none",
+  "s-heading-sm",
   "s-text-foreground dark:s-text-foreground-night",
   "peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70"
 );

package/src/stories/Avatar.stories.tsx

@@ -4,7 +4,11 @@ import React from "react";
 import {
   ActionBeerIcon,
   ActionFlagIcon,
+  ActionImageIcon,
+  ActionMagnifyingGlassIcon,
+  ActionScanIcon,
   ActionShirtIcon,
+  ActionTableIcon,
   ActionUmbrellaIcon,
 } from "@sparkle/icons/actions";
 import SvgHome from "@sparkle/icons/actions/Home";
@@ -124,6 +128,49 @@ export const AvatarExample = () => (
       <Avatar size="xl" icon={ActionShirtIcon} />
       <Avatar size="xxl" icon={StarStrokeIcon} />
     </div>
+    <div className="heading-2xl">Tools example</div>
+    <div>Remote MCP Servers</div>
+    <div className="s-flex s-gap-4">
+      <Avatar size="md" icon={SvgHome} />
+      <Avatar size="md" icon={ActionBeerIcon} />
+      <Avatar size="md" icon={ActionUmbrellaIcon} />
+      <Avatar size="md" icon={ActionFlagIcon} />
+      <Avatar size="md" icon={ActionShirtIcon} />
+      <Avatar size="md" icon={StarStrokeIcon} />
+    </div>
+    <div>Internal Tools Servers</div>
+    <div className="s-flex s-gap-4">
+      <Avatar
+        size="md"
+        icon={ActionTableIcon}
+        backgroundColor="s-bg-gray-700"
+        iconColor="s-text-gray-50"
+      />
+      <Avatar
+        size="md"
+        icon={ActionMagnifyingGlassIcon}
+        backgroundColor="s-bg-gray-700"
+        iconColor="s-text-gray-50"
+      />
+      <Avatar
+        size="md"
+        icon={ActionImageIcon}
+        backgroundColor="s-bg-gray-700"
+        iconColor="s-text-gray-50"
+      />
+      <Avatar
+        size="md"
+        icon={ActionScanIcon}
+        backgroundColor="s-bg-gray-700"
+        iconColor="s-text-gray-50"
+      />
+    </div>
+    <div>Platforms integrations</div>
+    <div className="s-flex s-gap-4">
+      <Avatar size="md" icon={DriveLogo} backgroundColor="s-bg-gray-900" />
+      <Avatar size="md" icon={NotionLogo} backgroundColor="s-bg-white" />
+      <Avatar size="md" icon={SlackLogo} hexBgColor="#421D51" />
+    </div>
   </div>
 );