@dust-tt/sparkle 0.2.274 → 0.2.276

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.5804, 0.6392, 0.7216, 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

@@ -14,6 +14,7 @@ export interface TreeProps {
   isLoading?: boolean;
   tailwindIconTextColor?: string;
   variant?: "navigator" | "finder";
+  className?: string;
 }
 
 export function Tree({
@@ -22,6 +23,7 @@ export function Tree({
   isBoxed = false,
   tailwindIconTextColor,
   variant = "finder",
+  className,
 }: TreeProps) {
   const modifiedChildren = React.Children.map(children, (child) => {
     // /!\ Limitation: This stops on the first invalid element.
@@ -44,7 +46,7 @@ export function Tree({
   });
 
   return isLoading ? (
-    <div className="s-py-2 s-pl-4">
+    <div className={cn("s-py-2 s-pl-4", className)}>
       <Spinner size="xs" variant="dark" />
     </div>
   ) : (
@@ -52,7 +54,8 @@ 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-structure-200 s-bg-structure-50 s-p-4"
+          "s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4",
+        className
       )}
     >
       {modifiedChildren}
@@ -61,12 +64,11 @@ export function Tree({
 }
 
 const treeItemStyleClasses = {
-  base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-1.5",
+  base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-2",
   isNavigatableBase:
-    "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",
+    "s-rounded-xl s-pl-1.5 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
+  isNavigatableUnselected: "s-bg-structure-150/0 hover:s-bg-structure-150",
+  isNavigatableSelected: "s-font-medium s-bg-structure-150",
 };
 
 interface TreeItemProps {
@@ -161,7 +163,7 @@ Tree.Item = function ({
           <IconButton
             icon={isExpanded ? ArrowDownSIcon : ArrowRightSIcon}
             size="xs"
-            variant="secondary"
+            variant="outline"
             onClick={(e) => {
               e.stopPropagation();
               if (effectiveOnChevronClick) {
@@ -172,7 +174,7 @@ Tree.Item = function ({
         )}
         {type === "leaf" && <div className="s-w-4 s-flex-shrink-0"></div>}
         {checkbox && <Checkbox {...checkbox} size="xs" />}
-        <Icon visual={visual} size="xs" className={tailwindIconTextColor} />
+        <Icon visual={visual} size="sm" className={tailwindIconTextColor} />
         <div
           className={`s-font-regular s-truncate s-text-sm s-text-element-900 ${labelClassName}`}
         >

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/components/index.ts

@@ -44,6 +44,11 @@ export { Item } from "./Item";
 export { Label } from "./Label";
 export { Markdown } from "./Markdown";
 export { Modal } from "./Modal";
+export {
+  NavigationList,
+  NavigationListItem,
+  NavigationListLabel,
+} from "./NavigationList";
 export {
   NewDropdownMenu,
   NewDropdownMenuCheckboxItem,
@@ -74,7 +79,7 @@ export {
 export { Popup } from "./Popup";
 export { PriceTable } from "./PriceTable";
 export { RadioGroup, RadioGroupChoice, RadioGroupItem } from "./RadioGroup";
-export { ScrollArea } from "./ScrollArea";
+export { ScrollArea, ScrollBar } from "./ScrollArea";
 export { Searchbar } from "./Searchbar";
 export { Separator } from "./Separator";
 export { SliderToggle } from "./SliderToggle";

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">