@dust-tt/sparkle 0.1.87 → 0.1.88-ed2

package/dist/cjs/components/Avatar.d.ts

@@ -10,10 +10,11 @@ type AvatarProps = {
 };
 export declare function Avatar({ size, name, visual, onClick, clickable, busy, isRounded, }: AvatarProps): React.JSX.Element;
 export declare namespace Avatar {
-    var Stack: ({ children, nbMoreItems }: AvatarStackProps) => React.JSX.Element;
+    var Stack: ({ children, nbMoreItems, size, }: AvatarStackProps) => React.JSX.Element;
 }
 interface AvatarStackProps {
     children: ReactNode;
     nbMoreItems?: number;
+    size?: "sm" | "md";
 }
 export {};

package/dist/cjs/index.js

@@ -413,30 +413,39 @@ function Avatar(_a) {
         size === "auto" && React.createElement("div", { style: { paddingBottom: "100%" } }),
         typeof visual === "string" ? (React.createElement("img", { src: visual, alt: name, className: classNames(sizeClasses$4[size], "s-h-full s-w-full s-object-cover s-object-center") })) : visual ? (visual) : name ? (React.createElement("span", { className: classNames(getTextVariant(name), textSize[size], "s-select-none s-font-medium") }, /\+/.test(name) ? name : name[0].toUpperCase())) : (React.createElement(SvgUser$1, { className: "s-h-1/2 s-w-1/2 s-opacity-20" }))));
 }
+var SIZE_SETTINGS = {
+    sm: { widthHovered: "44px", width: "32px" },
+    md: { widthHovered: "52px", width: "40px" }, // Adjust these values as needed for the 'md' size
+};
 Avatar.Stack = function (_a) {
-    var children = _a.children, nbMoreItems = _a.nbMoreItems;
-    var _b = __read(React.useState(false), 2), isHovered = _b[0], setIsHovered = _b[1];
+    var children = _a.children, nbMoreItems = _a.nbMoreItems, _b = _a.size, size = _b === void 0 ? "sm" : _b;
+    var _c = __read(React.useState(false), 2), isHovered = _c[0], setIsHovered = _c[1];
+    var childrenArray = React.Children.toArray(children);
     var handleMouseEnter = function () {
-        setIsHovered(true);
+        if (childrenArray.length > 1) {
+            setIsHovered(true);
+        }
     };
     var handleMouseLeave = function () {
-        setIsHovered(false);
+        if (childrenArray.length > 1) {
+            setIsHovered(false);
+        }
     };
-    var childrenArray = React.Children.toArray(children);
+    var sizeSetting = SIZE_SETTINGS[size];
     return (React.createElement("div", { className: "s-flex s-flex-row", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: {
             marginLeft: "20px",
         } },
         childrenArray.map(function (child) { return (React.createElement("div", { className: "s-cursor-pointer s-drop-shadow-md", style: {
-                width: isHovered ? "44px" : "32px",
+                width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
                 transition: "width 200ms ease-out",
                 marginLeft: "-20px",
             } }, child)); }),
-        nbMoreItems && (React.createElement("div", { className: "s-cursor-pointer s-drop-shadow-md", style: {
-                width: isHovered ? "42px" : "32px",
+        Boolean(nbMoreItems) && (React.createElement("div", { className: "s-cursor-pointer s-drop-shadow-md", style: {
+                width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
                 transition: "width 200ms ease-out",
                 marginLeft: "-20px",
             } },
-            React.createElement(Avatar, { size: "sm", name: "+" + String(nbMoreItems < 10 ? nbMoreItems : ""), isRounded: true })))));
+            React.createElement(Avatar, { size: size, name: "+" + String(Number(nbMoreItems) < 10 ? nbMoreItems : ""), isRounded: true, clickable: true })))));
 };
 
 var IconSizes = {