@dust-tt/sparkle 0.1.66-rc2 → 0.1.67

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

@@ -11,4 +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;
+export declare const ItemWithVisual: 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, imageUrl, onClick, }: DropdownItemProps) => React.JSX.Element;
+    var Item: ({ label, href, disabled, key, visual, onClick, }: DropdownItemProps) => React.JSX.Element;
     var Items: ({ origin, width, children, }: DropdownItemsProps) => React.JSX.Element;
 }
 export interface DropdownButtonProps {
@@ -25,7 +25,7 @@ interface DropdownItemProps {
     href?: string;
     disabled?: boolean;
     key?: string;
-    imageUrl?: string;
+    visual?: string | React.ReactNode;
     onClick?: () => void;
 }
 interface DropdownItemsProps {

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

@@ -7,11 +7,11 @@ type ItemProps = {
     disabled?: boolean;
     label: string;
     icon?: ComponentType;
-    imageUrl?: string;
+    visual?: string | React.ReactNode;
     className?: string;
     href?: string;
 };
-export declare function Item({ onClick, selected, size, disabled, variant, label, icon, imageUrl, className, href, }: ItemProps): React.JSX.Element;
+export declare function Item({ onClick, selected, size, disabled, variant, label, icon, visual, 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

@@ -500,18 +500,93 @@ function Tab(_a) {
             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,
+                tab.hasSeparator && (React__default.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) })))) : (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,
+                tab.hasSeparator && (React__default.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) }))))) : (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" })));
+                tab.hasSeparator && (React__default.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) }))));
         });
     };
     return (React__default.createElement("div", { className: "s-border-b s-border-structure-200 dark:s-border-structure-200-dark" },
         React__default.createElement("nav", { className: "-s-mb-px s-flex s-space-x-0", "aria-label": "Tabs" }, renderTabs())));
 }
 
+var colors = [
+    "s-bg-red-300",
+    "s-bg-orange-300",
+    "s-bg-amber-300",
+    "s-bg-yellow-300",
+    "s-bg-lime-300",
+    "s-bg-green-300",
+    "s-bg-emerald-300",
+    "s-bg-teal-300",
+    "s-bg-cyan-300",
+    "s-bg-sky-300",
+    "s-bg-blue-300",
+    "s-bg-indigo-300",
+    "s-bg-violet-300",
+    "s-bg-purple-300",
+    "s-bg-fuchsia-300",
+    "s-bg-rose-300",
+];
+var txtColors = [
+    "s-text-red-700",
+    "s-text-orange-700",
+    "s-text-amber-700",
+    "s-text-yellow-700",
+    "s-text-lime-700",
+    "s-text-green-700",
+    "s-text-emerald-700",
+    "s-text-teal-700",
+    "s-text-cyan-700",
+    "s-text-sky-700",
+    "s-text-blue-700",
+    "s-text-indigo-700",
+    "s-text-violet-700",
+    "s-text-purple-700",
+    "s-text-fuchsia-700",
+    "s-text-rose-700",
+];
 var sizeClasses$2 = {
+    xs: "s-h-6 s-w-6 s-rounded-full",
+    sm: "s-h-10 s-w-10 s-rounded-xl",
+    md: "s-h-16 s-w-16 s-rounded-2xl",
+    lg: "s-h-36 s-w-36 s-rounded-3xl",
+    full: "s-h-full s-w-full",
+};
+var textSize = {
+    xs: "s-text-xs",
+    sm: "s-text-base",
+    md: "s-text-3xl",
+    lg: "s-text-7xl",
+    full: "s-text-6xl",
+};
+function Avatar(_a) {
+    var _b = _a.size, size = _b === void 0 ? "sm" : _b, name = _a.name, visual = _a.visual, onClick = _a.onClick, _c = _a.busy, busy = _c === void 0 ? false : _c;
+    var getColor = function (name) {
+        var hash = 0;
+        for (var i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return colors[Math.abs(hash) % colors.length];
+    };
+    var getTextVariant = function (name) {
+        var hash = 0;
+        for (var i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return txtColors[Math.abs(hash) % txtColors.length];
+    };
+    var clickableStyles = onClick && !busy
+        ? "s-cursor-pointer hover:s-filter hover:s-brightness-110 active:s-brightness-90 s-transition s-duration-200 s-ease-out"
+        : "";
+    var busyStyles = busy ? "s-animate-breathing s-cursor-default" : "";
+    var avatarClass = classNames(sizeClasses$2[size], name ? getColor(name) : "s-bg-slate-200", "s-flex s-flex-shrink-0 s-items-center s-justify-center s-overflow-hidden", clickableStyles, busyStyles);
+    return (React__default.createElement("div", { className: avatarClass }, typeof visual === "string" ? (React__default.createElement("img", { src: visual, alt: name, className: classNames(sizeClasses$2[size], "s-object-cover") })) : visual ? (visual) : name ? (React__default.createElement("span", { className: classNames(getTextVariant(name), textSize[size], "s-select-none s-font-medium") }, name[0].toUpperCase())) : (React__default.createElement(SvgUser$1, { className: "s-h-1/2 s-w-1/2 s-opacity-20" }) // Default icon with size and slate-900 color
+    )));
+}
+
+var sizeClasses$1 = {
     sm: "s-py-2 s-text-sm s-font-normal",
     md: "s-py-3 s-text-sm s-font-semibold",
 };
@@ -535,11 +610,6 @@ var iconClasses$3 = {
         },
     },
 };
-var imageClasses = {
-    default: {
-        base: "s-h-5 s-w-5 s-rounded-full",
-    },
-};
 var chevronClasses$1 = {
     default: {
         base: "s-text-element-600",
@@ -610,7 +680,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, imageUrl = _a.imageUrl, _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, visual = _a.visual, _j = _a.className, className = _j === void 0 ? "" : _j, href = _a.href;
     var components = React__default.useContext(SparkleContext).components;
     var currentStateClasses = size === "md"
         ? selected
@@ -625,18 +695,17 @@ function Item(_a) {
     var currentChevronClasses = selected
         ? chevronClasses$1.selected
         : chevronClasses$1.default;
-    var itemClasses = classNames(baseClasses$3, sizeClasses$2[size], disabled ? "s-cursor-default" : currentStateClasses.base, disabled ? "s-cursor-default" : (_b = currentStateClasses.dark) === null || _b === void 0 ? void 0 : _b.base, disabled ? currentStateClasses.disabled : "", !selected && !disabled ? currentStateClasses.hover : "", !selected && !disabled ? (_c = currentStateClasses.dark) === null || _c === void 0 ? void 0 : _c.hover : "", !selected && !disabled ? currentStateClasses.active : "", !selected && !disabled ? (_d = currentStateClasses.dark) === null || _d === void 0 ? void 0 : _d.active : "", className);
+    var itemClasses = classNames(baseClasses$3, sizeClasses$1[size], disabled ? "s-cursor-default" : currentStateClasses.base, disabled ? "s-cursor-default" : (_b = currentStateClasses.dark) === null || _b === void 0 ? void 0 : _b.base, disabled ? currentStateClasses.disabled : "", !selected && !disabled ? currentStateClasses.hover : "", !selected && !disabled ? (_c = currentStateClasses.dark) === null || _c === void 0 ? void 0 : _c.hover : "", !selected && !disabled ? currentStateClasses.active : "", !selected && !disabled ? (_d = currentStateClasses.dark) === null || _d === void 0 ? void 0 : _d.active : "", className);
     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) })),
+        visual && React__default.createElement(Avatar, { size: "xs", visual: visual }),
         React__default.createElement("span", { className: "s-grow s-truncate" }, label),
         variant === "default" && (React__default.createElement(Icon, { visual: SvgChevronRight$1, className: finalCevronClasses, size: "sm" }))));
 }
@@ -650,7 +719,7 @@ Item.List = function (_a) {
         React__default.createElement("div", { className: "s-flex s-w-full s-flex-col" }, children)));
 };
 
-var sizeClasses$1 = {
+var sizeClasses = {
     sm: "s-py-1.5 s-text-xs s-font-medium s-px-3",
     md: "s-py-2 s-text-sm s-font-semibold s-px-3",
 };
@@ -669,7 +738,7 @@ function Chip(_a) {
                 return "s-bg-violet-100 s-border-violet-200";
         }
     })();
-    var ChipClasses = classNames(baseClasses$2, sizeClasses$1[size], backgroundColor, className);
+    var ChipClasses = classNames(baseClasses$2, sizeClasses[size], backgroundColor, className);
     return (React__default.createElement("div", { className: ChipClasses, "aria-label": label },
         label && (React__default.createElement("span", { className: "s-pointer s-grow s-cursor-default s-truncate" }, label)),
         children));
@@ -31762,9 +31831,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, imageUrl = _a.imageUrl, onClick = _a.onClick;
+    var label = _a.label, href = _a.href, disabled = _a.disabled, _b = _a.key, key = _b === void 0 ? "" : _b, visual = _a.visual, 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, imageUrl: imageUrl })));
+        React__default.createElement(Item, { variant: "dropdown", size: "md", href: href, onClick: onClick, label: label, visual: visual })));
 };
 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;
@@ -32051,81 +32120,6 @@ function IconToggleButton(_a) {
     return tooltip ? (React__default.createElement(Tooltip, { label: tooltip, position: tooltipPosition }, IconButtonToggleContent)) : (IconButtonToggleContent);
 }
 
-var colors = [
-    "s-bg-red-300",
-    "s-bg-orange-300",
-    "s-bg-amber-300",
-    "s-bg-yellow-300",
-    "s-bg-lime-300",
-    "s-bg-green-300",
-    "s-bg-emerald-300",
-    "s-bg-teal-300",
-    "s-bg-cyan-300",
-    "s-bg-sky-300",
-    "s-bg-blue-300",
-    "s-bg-indigo-300",
-    "s-bg-violet-300",
-    "s-bg-purple-300",
-    "s-bg-fuchsia-300",
-    "s-bg-rose-300",
-];
-var txtColors = [
-    "s-text-red-700",
-    "s-text-orange-700",
-    "s-text-amber-700",
-    "s-text-yellow-700",
-    "s-text-lime-700",
-    "s-text-green-700",
-    "s-text-emerald-700",
-    "s-text-teal-700",
-    "s-text-cyan-700",
-    "s-text-sky-700",
-    "s-text-blue-700",
-    "s-text-indigo-700",
-    "s-text-violet-700",
-    "s-text-purple-700",
-    "s-text-fuchsia-700",
-    "s-text-rose-700",
-];
-var sizeClasses = {
-    xs: "s-h-6 s-w-6 s-rounded-full",
-    sm: "s-h-10 s-w-10 s-rounded-xl",
-    md: "s-h-16 s-w-16 s-rounded-2xl",
-    lg: "s-h-36 s-w-36 s-rounded-3xl",
-    full: "s-h-full s-w-full",
-};
-var textSize = {
-    xs: "s-text-xs",
-    sm: "s-text-base",
-    md: "s-text-3xl",
-    lg: "s-text-7xl",
-    full: "s-text-6xl",
-};
-function Avatar(_a) {
-    var _b = _a.size, size = _b === void 0 ? "sm" : _b, name = _a.name, visual = _a.visual, onClick = _a.onClick, _c = _a.busy, busy = _c === void 0 ? false : _c;
-    var getColor = function (name) {
-        var hash = 0;
-        for (var i = 0; i < name.length; i++) {
-            hash = name.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        return colors[Math.abs(hash) % colors.length];
-    };
-    var getTextVariant = function (name) {
-        var hash = 0;
-        for (var i = 0; i < name.length; i++) {
-            hash = name.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        return txtColors[Math.abs(hash) % txtColors.length];
-    };
-    var clickableStyles = onClick && !busy
-        ? "s-cursor-pointer hover:s-filter hover:s-brightness-110 active:s-brightness-90 s-transition s-duration-200 s-ease-out"
-        : "";
-    var busyStyles = busy ? "s-animate-breathing s-cursor-default" : "";
-    var avatarClass = classNames(sizeClasses[size], name ? getColor(name) : "s-bg-slate-200", "s-flex s-flex-shrink-0 s-items-center s-justify-center s-overflow-hidden", clickableStyles, busyStyles);
-    return (React__default.createElement("div", { className: avatarClass }, typeof visual === "string" ? (React__default.createElement("img", { src: visual, alt: name, className: classNames(sizeClasses[size], "s-object-cover") })) : visual ? (visual) : name ? (React__default.createElement("span", { className: classNames(getTextVariant(name), textSize[size], "s-select-none s-font-medium") }, name[0].toUpperCase())) : (React__default.createElement(SvgUser$1, { className: "s-h-1/2 s-w-1/2 s-opacity-20" }) // Default icon with size and slate-900 color
-    )));
-}
-
 var Spinner = function (_a) {
     var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "lightGrey" : _c;
     var sizeClasses = {