@dust-tt/sparkle 0.2.195 → 0.2.196

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

@@ -7,12 +7,13 @@ export interface TreeProps {
 }
 export declare function Tree({ children, isLoading, isBoxed }: TreeProps): React.JSX.Element;
 export declare namespace Tree {
-    var Item: ({ label, type, className, variant, visual, checkbox, onChevronClick, collapsed, defaultCollapsed, actions, renderTreeItems, children, }: TreeItemPropsWithChildren | TreeItemPropsWithRender) => React.JSX.Element;
+    var Item: ({ label, type, className, variant, size, visual, checkbox, onChevronClick, collapsed, defaultCollapsed, actions, areActionsFading, renderTreeItems, children, }: TreeItemPropsWithChildren | TreeItemPropsWithRender) => React.JSX.Element;
 }
 interface TreeItemProps {
     label?: string;
     type?: "node" | "item" | "leaf";
     variant?: "file" | "folder" | "database" | "channel";
+    size?: "sm" | "md";
     visual?: React.ReactNode;
     checkbox?: CheckboxProps;
     onChevronClick?: () => void;
@@ -20,6 +21,7 @@ interface TreeItemProps {
     defaultCollapsed?: boolean;
     className?: string;
     actions?: React.ReactNode;
+    areActionsFading?: boolean;
 }
 export interface TreeItemPropsWithChildren extends TreeItemProps {
     renderTreeItems?: never;

package/dist/cjs/index.js

@@ -76249,8 +76249,8 @@ var visualTable = {
     channel: SvgChatBubbleBottomCenterText,
 };
 Tree.Item = function (_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "node" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.variant, variant = _d === void 0 ? "file" : _d, visual = _a.visual, checkbox = _a.checkbox, onChevronClick = _a.onChevronClick, collapsed = _a.collapsed, defaultCollapsed = _a.defaultCollapsed, actions = _a.actions, renderTreeItems = _a.renderTreeItems, children = _a.children;
-    var _e = __read(React.useState(defaultCollapsed !== null && defaultCollapsed !== void 0 ? defaultCollapsed : true), 2), collapsedState = _e[0], setCollapsedState = _e[1];
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "node" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.variant, variant = _d === void 0 ? "file" : _d, _e = _a.size, size = _e === void 0 ? "sm" : _e, visual = _a.visual, checkbox = _a.checkbox, onChevronClick = _a.onChevronClick, collapsed = _a.collapsed, defaultCollapsed = _a.defaultCollapsed, actions = _a.actions, _f = _a.areActionsFading, areActionsFading = _f === void 0 ? true : _f, renderTreeItems = _a.renderTreeItems, children = _a.children;
+    var _g = __read(React.useState(defaultCollapsed !== null && defaultCollapsed !== void 0 ? defaultCollapsed : true), 2), collapsedState = _g[0], setCollapsedState = _g[1];
     var isControlledCollapse = collapsed !== undefined;
     var effectiveCollapsed = isControlledCollapse ? collapsed : collapsedState;
     var effectiveOnChevronClick = isControlledCollapse
@@ -76264,17 +76264,19 @@ Tree.Item = function (_a) {
     };
     var childrenToRender = getChildren();
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: classNames(className ? className : "", "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4 s-py-1") },
+        React.createElement("div", { className: classNames(className ? className : "", "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4", size === "sm" ? "s-py-1" : "s-py-2") },
             type === "node" && (React.createElement(IconButton, { icon: childrenToRender && !effectiveCollapsed
                     ? SvgChevronDown$1
                     : SvgChevronRight$1, size: "sm", variant: "secondary", onClick: effectiveOnChevronClick })),
             type === "leaf" && React.createElement("div", { className: "s-w-5" }),
             checkbox && React.createElement(Checkbox, __assign({}, checkbox)),
-            React.createElement("div", { className: "s-flex s-w-full s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900" },
-                React.createElement("div", { className: "s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900" },
+            React.createElement("div", { className: "s-flex s-w-full s-items-center" },
+                React.createElement("div", { className: classNames("s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center", size === "sm" ? "s-gap-1.5" : "s-gap-2") },
                     visual ? (visual) : (React.createElement(Icon, { visual: visualTable[variant], size: "sm", className: "s-flex-shrink-0 s-text-element-700" })),
-                    React.createElement("div", { className: "s-truncate" }, label),
-                    actions && (React.createElement("div", { className: "s-inline-block s-transform s-pl-5 s-opacity-0 s-duration-300 group-hover:s-opacity-100" }, actions))))),
+                    React.createElement("div", { className: classNames("s-truncate s-font-medium s-text-element-900", size === "sm" ? "s-text-sm" : "s-text-base") }, label),
+                    actions && (React.createElement("div", { className: classNames("s-inline-block s-pl-5", areActionsFading
+                            ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
+                            : "") }, actions))))),
         React.Children.count(childrenToRender) > 0 && (React.createElement("div", { className: "s-pl-5" }, childrenToRender))));
 };