@dust-tt/sparkle 0.1.64 → 0.1.66-rc1

package/dist/cjs/stories/Item.stories.d.ts

@@ -11,3 +11,4 @@ export declare const ListItemExample: () => React.JSX.Element;
 export declare const ItemMD: Story;
 export declare const ItemSM: Story;
 export declare const ItemWithoutIcon: Story;
+export declare const ItemWithImage: Story;

package/dist/esm/components/DropdownMenu.d.ts

@@ -7,7 +7,7 @@ export interface DropdownMenuProps {
 export declare function DropdownMenu({ children, className }: DropdownMenuProps): React.JSX.Element;
 export declare namespace DropdownMenu {
     var Button: ({ label, type, tooltip, icon, children, tooltipPosition, className, disabled, }: DropdownButtonProps) => React.JSX.Element;
-    var Item: ({ label, href, disabled, key, onClick, }: DropdownItemProps) => React.JSX.Element;
+    var Item: ({ label, href, disabled, key, imageUrl, onClick, }: DropdownItemProps) => React.JSX.Element;
     var Items: ({ origin, width, children, }: DropdownItemsProps) => React.JSX.Element;
 }
 export interface DropdownButtonProps {
@@ -25,6 +25,7 @@ interface DropdownItemProps {
     href?: string;
     disabled?: boolean;
     key?: string;
+    imageUrl?: string;
     onClick?: () => void;
 }
 interface DropdownItemsProps {

package/dist/esm/components/Item.d.ts

@@ -7,10 +7,11 @@ type ItemProps = {
     disabled?: boolean;
     label: string;
     icon?: ComponentType;
+    imageUrl?: string;
     className?: string;
     href?: string;
 };
-export declare function Item({ onClick, selected, size, disabled, variant, label, icon, className, href, }: ItemProps): React.JSX.Element;
+export declare function Item({ onClick, selected, size, disabled, variant, label, icon, imageUrl, className, href, }: ItemProps): React.JSX.Element;
 export declare namespace Item {
     var SectionHeader: ({ label }: ItemSectionHeaderProps) => React.JSX.Element;
     var List: ({ children, className }: ListItemProps) => React.JSX.Element;

package/dist/esm/index.js

@@ -497,12 +497,13 @@ function Tab(_a) {
                         ? "s-flex s-gap-x-2"
                         : "s-flex s-gap-x-2 s-transition s-duration-300 s-ease-out" },
                     tab.icon && (React__default.createElement(Icon, { visual: tab.icon, className: finalIconClasses, size: "sm" })), (_b = tab.hideLabel) !== null && _b !== void 0 ? _b : tab.label)));
-            return tab.hideLabel ? (tab.label ? (React__default.createElement("div", { key: "tab-".concat(i) },
-                React__default.createElement(Tooltip, { label: tab.label }, content),
-                tab.hasSeparator && React__default.createElement("div", { className: "s-flex s-h-full s-grow" }))) : (React__default.createElement("div", { key: "tab-".concat(i) },
-                content,
-                tab.hasSeparator && React__default.createElement("div", { className: "s-flex s-h-full s-grow" })))) : (React__default.createElement("div", { key: "tab-".concat(i) },
-                content,
+            return tab.hideLabel ? (tab.label ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { key: "tab-".concat(i) },
+                    React__default.createElement(Tooltip, { label: tab.label }, content)),
+                tab.hasSeparator && React__default.createElement("div", { className: "s-flex s-h-full s-grow" }))) : (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { key: "tab-".concat(i) }, content),
+                tab.hasSeparator && React__default.createElement("div", { className: "s-flex s-h-full s-grow" })))) : (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { key: "tab-".concat(i) }, content),
                 tab.hasSeparator && React__default.createElement("div", { className: "s-flex s-h-full s-grow" })));
         });
     };
@@ -534,6 +535,11 @@ var iconClasses$3 = {
         },
     },
 };
+var imageClasses = {
+    default: {
+        base: "s-h-6 s-w-6 s-rounded-full",
+    },
+};
 var chevronClasses$1 = {
     default: {
         base: "s-text-element-600",
@@ -604,7 +610,7 @@ var stateClassesMD = {
 };
 function Item(_a) {
     var _b, _c, _d;
-    var onClick = _a.onClick, _e = _a.selected, selected = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "sm" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.variant, variant = _h === void 0 ? "default" : _h, label = _a.label, icon = _a.icon, _j = _a.className, className = _j === void 0 ? "" : _j, href = _a.href;
+    var onClick = _a.onClick, _e = _a.selected, selected = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "sm" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.variant, variant = _h === void 0 ? "default" : _h, label = _a.label, icon = _a.icon, imageUrl = _a.imageUrl, _j = _a.className, className = _j === void 0 ? "" : _j, href = _a.href;
     var components = React__default.useContext(SparkleContext).components;
     var currentStateClasses = size === "md"
         ? selected
@@ -623,12 +629,14 @@ function Item(_a) {
     var finalIconClasses = classNames(iconBaseClasses, currentIconClasses.base, !disabled ? currentIconClasses.hover : "", // Add condition here
     currentIconClasses.dark.base, !disabled ? currentIconClasses.dark.hover : "" // Add condition here
     );
+    var finalImageClasses = classNames(imageClasses.default.base);
     var finalCevronClasses = classNames(iconBaseClasses, "s-flex-shrink-0", size === "sm" ? "s-text-transparent" : currentChevronClasses.base, !disabled ? currentChevronClasses.hover : "", // Add condition here
     currentChevronClasses.dark.base, !disabled ? currentChevronClasses.dark.hover : "" // Add condition here
     );
     var Link = href ? components.link : noHrefLink;
     return (React__default.createElement(Link, { className: itemClasses, onClick: selected || disabled ? undefined : onClick, "aria-label": label, href: href || "#" },
         icon && React__default.createElement(Icon, { visual: icon, className: finalIconClasses }),
+        imageUrl && (React__default.createElement("img", { src: imageUrl, className: classNames(finalImageClasses) })),
         React__default.createElement("span", { className: "s-grow s-truncate" }, label),
         variant === "default" && (React__default.createElement(Icon, { visual: SvgChevronRight$1, className: finalCevronClasses, size: "sm" }))));
 }
@@ -31754,9 +31762,9 @@ DropdownMenu.Button = function (_a) {
         React__default.createElement(Icon, { visual: type === "select" ? SvgChevronUpDown$1 : SvgChevronDown$1, size: "xs", className: finalChevronClasses })))));
 };
 DropdownMenu.Item = function (_a) {
-    var label = _a.label, href = _a.href, disabled = _a.disabled, _b = _a.key, key = _b === void 0 ? "" : _b, onClick = _a.onClick;
+    var label = _a.label, href = _a.href, disabled = _a.disabled, _b = _a.key, key = _b === void 0 ? "" : _b, imageUrl = _a.imageUrl, onClick = _a.onClick;
     return (React__default.createElement(it.Item, { disabled: disabled, key: key },
-        React__default.createElement(Item, { variant: "dropdown", size: "md", href: href, onClick: onClick, label: label })));
+        React__default.createElement(Item, { variant: "dropdown", size: "md", href: href, onClick: onClick, label: label, imageUrl: imageUrl })));
 };
 DropdownMenu.Items = function (_a) {
     var _b = _a.origin, origin = _b === void 0 ? "topRight" : _b, _c = _a.width, width = _c === void 0 ? 160 : _c, children = _a.children;