@dust-tt/sparkle 0.2.58 → 0.2.60

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

@@ -8,7 +8,7 @@ export declare function DropdownMenu({ children, className }: DropdownMenuProps)
 export declare namespace DropdownMenu {
     var Button: ({ label, type, size, tooltip, icon, children, tooltipPosition, className, disabled, onClick, }: DropdownButtonProps) => React.JSX.Element;
     var Item: ({ label, description, href, disabled, visual, icon, onClick, hasChildren, children, }: DropdownItemProps) => React.JSX.Element;
-    var Items: ({ origin, width, children, }: DropdownItemsProps) => React.JSX.Element;
+    var Items: ({ origin, width, marginLeft, children, }: DropdownItemsProps) => React.JSX.Element;
 }
 export interface DropdownButtonProps {
     label?: string;
@@ -36,6 +36,7 @@ interface DropdownItemProps {
 interface DropdownItemsProps {
     origin?: "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "auto";
     width?: number;
+    marginLeft?: number;
     children: React.ReactNode;
 }
 export {};

package/dist/cjs/index.js

@@ -32153,7 +32153,7 @@ function ContextItem(_a) {
             React.createElement("div", { className: "s-flex s-grow s-flex-col s-gap-1" },
                 React.createElement("div", { className: "s-flex s-grow s-flex-row s-gap-3" },
                     React.createElement("div", { className: "s-text-normal s-flex s-flex-col s-justify-center s-font-semibold" }, title),
-                    React.createElement("div", { className: "s-flex s-items-center s-text-element-600" }, subElement)),
+                    React.createElement("div", { className: "s-flex s-items-center s-gap-1 s-text-element-600" }, subElement)),
                 React.createElement("div", { className: "-s-mt-1" }, children)),
             React.createElement("div", { className: "" }, action))));
 }
@@ -32755,13 +32755,18 @@ DropdownMenu.Button = function (_a) {
     if (children) {
         return (React.createElement(it.Button, { as: "div", disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? "s-gap-1.5" : "s-gap-0"), onClick: onClick }, tooltip ? (React.createElement(Tooltip, { position: tooltipPosition, label: tooltip }, children)) : (children)));
     }
+    var chevronIcon = type === "select"
+        ? SvgChevronUpDown$1
+        : type === "submenu"
+            ? SvgChevronRight$1
+            : SvgChevronDown$1;
     return (React.createElement(React.Fragment, null, tooltip ? (React.createElement(Tooltip, { label: tooltip, position: tooltipPosition },
         React.createElement(it.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5") },
             React.createElement(Icon, { visual: icon, size: size, className: finalIconClasses }),
-            React.createElement(Icon, { visual: type === "select" ? SvgChevronUpDown$1 : SvgChevronDown$1, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))) : (React.createElement(it.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5", type === "submenu" ? "s-opacity-50" : "") },
+            React.createElement(Icon, { visual: chevronIcon, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))) : (React.createElement(it.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0", label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5", type === "submenu" ? "s-opacity-50" : "") },
         React.createElement(Icon, { visual: icon, size: size, className: finalIconClasses }),
         React.createElement("span", { className: classNames(finalLabelClasses, type === "submenu" ? "s-w-full" : "") }, label),
-        React.createElement(Icon, { visual: type === "select" ? SvgChevronUpDown$1 : SvgChevronDown$1, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))));
+        React.createElement(Icon, { visual: chevronIcon, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))));
 };
 DropdownMenu.Item = function (_a) {
     var label = _a.label, description = _a.description, href = _a.href, disabled = _a.disabled, visual = _a.visual, icon = _a.icon, onClick = _a.onClick, hasChildren = _a.hasChildren, children = _a.children;
@@ -32772,9 +32777,9 @@ DropdownMenu.Item = function (_a) {
         children)) : (React.createElement(Item.Dropdown, { className: "s-w-full s-px-4", href: href, onClick: onClick, label: label, visual: visual, icon: icon, description: description }))));
 };
 DropdownMenu.Items = function (_a) {
-    var _b = _a.origin, origin = _b === void 0 ? "auto" : _b, _c = _a.width, width = _c === void 0 ? 160 : _c, children = _a.children;
+    var _b = _a.origin, origin = _b === void 0 ? "auto" : _b, _c = _a.width, width = _c === void 0 ? 160 : _c, _d = _a.marginLeft, marginLeft = _d === void 0 ? 0 : _d, children = _a.children;
     var buttonRef = React.useContext(ButtonRefContext);
-    var _d = __read(React.useState(0), 2), buttonHeight = _d[0], setButtonHeight = _d[1];
+    var _e = __read(React.useState(0), 2), buttonHeight = _e[0], setButtonHeight = _e[1];
     if (origin === "auto") {
         origin = findOriginFromButton(buttonRef);
     }
@@ -32811,18 +32816,26 @@ DropdownMenu.Items = function (_a) {
                 return "s-origin-top-right";
         }
     };
-    var styleInsert = function (origin) {
+    var styleInsert = function (origin, marginLeft) {
         switch (origin) {
             case "topLeft":
-                return { width: "".concat(width, "px"), top: "".concat(buttonHeight + 8, "px") };
+                return {
+                    width: "".concat(width, "px"),
+                    top: "".concat(buttonHeight + 8, "px"),
+                    left: "".concat(marginLeft, "px"),
+                };
             case "topRight":
-                return { width: "".concat(width, "px"), top: "".concat(buttonHeight + 8, "px") };
+                return {
+                    width: "".concat(width, "px"),
+                    top: "".concat(buttonHeight + 8, "px"),
+                    left: "".concat(marginLeft, "px"),
+                };
             default:
-                return { width: "".concat(width, "px") };
+                return { width: "".concat(width, "px"), left: "".concat(marginLeft, "px") };
         }
     };
     return (React.createElement(tt, { as: React.Fragment, enter: "s-transition s-ease-out s-duration-200", enterFrom: getOriginTransClass(origin), enterTo: "s-transform s-opacity-100 s-scale-100 s-translate-y-0", leave: "s-transition s-ease-in s-duration-75", leaveFrom: "s-transform s-opacity-100 s-scale-100 s-translate-y-0", leaveTo: getOriginTransClass(origin) },
-        React.createElement(it.Items, { className: "s-absolute s-z-10 ".concat(getOriginClass(origin), " s-rounded-xl s-border s-border-structure-100 s-bg-structure-0 s-py-1 s-shadow-lg focus:s-outline-none dark:s-border-structure-100-dark dark:s-bg-structure-0-dark"), style: styleInsert(origin) },
+        React.createElement(it.Items, { className: "s-absolute s-z-10 ".concat(getOriginClass(origin), " s-rounded-xl s-border s-border-structure-100 s-bg-structure-0 s-py-1 s-shadow-lg focus:s-outline-none dark:s-border-structure-100-dark dark:s-bg-structure-0-dark"), style: styleInsert(origin, marginLeft) },
             React.createElement(Item.List, null, children))));
 };
 function findOriginFromButton(buttonRef) {