@dust-tt/sparkle 0.2.275 → 0.2.276

package/dist/cjs/index.js

@@ -79204,7 +79204,7 @@ var Label$2 = React__namespace.forwardRef((props, forwardedRef) => {
 Label$2.displayName = NAME$3;
 var Root$6 = Label$2;
 
-var labelVariants = cn("s-text-sm s-text-foreground s-leading-none", "peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70");
+var labelVariants = cn("s-text-sm s-font-medium s-text-foreground s-leading-none", "peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70");
 var Label$1 = React__namespace.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return (React__namespace.createElement(Root$6, __assign({ ref: ref, className: cn(labelVariants, className) }, props)));
@@ -105674,7 +105674,7 @@ var colors = {
     dark: [0.0588, 0.0902, 0.1647, 1],
     purple900: [0.298, 0.1137, 0.5843, 1], // #4C1D95
     pink900: [0.5137, 0.0941, 0.2627, 1], // #831843
-    slate400: [0.5647, 0.6314, 0.7176, 1], // #94a3b8
+    slate400: [0.5804, 0.6392, 0.7216, 1], // #94A3B8
 };
 var isColorArray = function (arr) {
     return (Array.isArray(arr) &&
@@ -111353,7 +111353,7 @@ var PopoverTrigger = Trigger$1;
 var PopoverContent = React__namespace.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.align, align = _b === void 0 ? "center" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 4 : _c, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, props = __rest(_a, ["className", "align", "sideOffset", "fullWidth"]);
     return (React__namespace.createElement(Portal$2, null,
-        React__namespace.createElement(Content2$2, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("data-[state=open]:s-animate-in data-[state=open]:s-fade-in-0 data-[state=open]:s-zoom-in-95", "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95", "data-[side=bottom]:s-slide-in-from-top-2", "data-[side=left]:s-slide-in-from-right-2", "data-[side=right]:s-slide-in-from-left-2", "data-[side=top]:s-slide-in-from-bottom-2", "s-z-50 s-rounded-lg s-border s-bg-background s-text-primary-950 s-shadow-md s-outline-none", fullWidth ? "s-grow" : "s-w-72 s-p-4", className) }, props))));
+        React__namespace.createElement(Content2$2, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("data-[state=open]:s-animate-in data-[state=open]:s-fade-in-0 data-[state=open]:s-zoom-in-95", "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95", "data-[side=bottom]:s-slide-in-from-top-2", "data-[side=left]:s-slide-in-from-right-2", "data-[side=right]:s-slide-in-from-left-2", "data-[side=top]:s-slide-in-from-bottom-2", "s-z-50 s-rounded-xl s-border s-bg-background s-text-primary-950 s-shadow-md s-outline-none", fullWidth ? "s-grow" : "s-w-72 s-p-4", className) }, props))));
 });
 function Popover(_a) {
     var trigger = _a.trigger, _b = _a.popoverTriggerAsChild, popoverTriggerAsChild = _b === void 0 ? false : _b, content = _a.content, props = __rest(_a, ["trigger", "popoverTriggerAsChild", "content"]);
@@ -115118,7 +115118,7 @@ function Dialog(_a) {
                             React.createElement("div", { className: "s-flex s-w-full s-justify-end" },
                                 React.createElement("div", { className: "s-flex s-gap-2" },
                                     !isSaving && (React.createElement(React.Fragment, null,
-                                        props.onCancel && (React.createElement(Button, { label: (_b = props.cancelLabel) !== null && _b !== void 0 ? _b : "Cancel", variant: "ghost", onClick: props.onCancel })),
+                                        props.onCancel && (React.createElement(Button, { label: (_b = props.cancelLabel) !== null && _b !== void 0 ? _b : "Cancel", variant: "outline", onClick: props.onCancel })),
                                         React.createElement(Button, { disabled: disabled, label: validateLabel, variant: validateVariant, onClick: onValidate }))),
                                     isSaving && React.createElement(Spinner$1, { variant: "color" }))),
                             backgroundType !== "none" && (React.createElement("div", { className: "s-absolute s-bottom-0 s-left-0 s-right-0 s-top-0 s-z-0" },
@@ -116023,15 +116023,26 @@ function IconToggleButton(_a) {
     return tooltip ? (React.createElement(Tooltip, { trigger: IconButtonToggleContent, label: tooltip, side: tooltipPosition })) : (IconButtonToggleContent);
 }
 
-var inputStyleClasses = cn("s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ", "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground", "placeholder:s-text-muted-foreground", "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-ring-ring focus-visible:s-border-primary-400", "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground");
+var stateVariantStyles = {
+    default: "focus-visible:s-ring-ring",
+    disabled: "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground",
+    error: "s-border-border-warning focus:s-ring-ring-warning",
+};
+var inputStyleClasses = cva(cn("s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ", "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground", "placeholder:s-text-muted-foreground", "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-border-border-dark"), {
+    variants: {
+        state: stateVariantStyles,
+    },
+    defaultVariants: {
+        state: "default",
+    },
+});
 var Input = React.forwardRef(function (_a, ref) {
-    var className = _a.className, error = _a.error, value = _a.value, label = _a.label, _b = _a.showErrorLabel, showErrorLabel = _b === void 0 ? false : _b, props = __rest(_a, ["className", "error", "value", "label", "showErrorLabel"]);
+    var className = _a.className, error = _a.error, value = _a.value, label = _a.label, disabled = _a.disabled, _b = _a.showErrorLabel, showErrorLabel = _b === void 0 ? false : _b, props = __rest(_a, ["className", "error", "value", "label", "disabled", "showErrorLabel"]);
+    var state = error ? "error" : disabled ? "disabled" : "default";
     return (React.createElement("div", { className: "s-flex s-flex-col s-gap-1 s-px-1" },
-        label && (React.createElement(Label$1, { htmlFor: props.name, className: "s-pb-1 s-text-element-700 dark:s-text-element-700-dark" }, label)),
-        React.createElement("input", __assign({ ref: ref, className: cn(inputStyleClasses, className, !error
-                ? cn("s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark")
-                : cn("s-ring-warning-200 focus:s-ring-warning-300", "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark")), "data-1p-ignore": props.type !== "password", value: value !== null && value !== void 0 ? value : undefined }, props)),
-        React.createElement("div", { className: "s-ml-2 s-text-sm s-text-warning-500" }, showErrorLabel && error ? error : null)));
+        label && React.createElement(Label$1, { htmlFor: props.name }, label),
+        React.createElement("input", __assign({ ref: ref, className: cn(inputStyleClasses({ state: state }), className), "data-1p-ignore": props.type !== "password", value: value !== null && value !== void 0 ? value : undefined, disabled: disabled }, props)),
+        showErrorLabel && error && (React.createElement("div", { className: "s-ml-3.5 s-text-xs s-text-foreground-warning" }, error))));
 });
 Input.displayName = "Input";
 
@@ -137574,6 +137585,69 @@ function Markdown(_a) {
         }, className: className }, content));
 }
 
+var listStyles = cva("s-flex", {
+    variants: {
+        layout: {
+            container: "s-gap-1 s-flex-col s-overflow-hidden",
+            item: cn("s-box-border s-items-center s-w-full s-flex s-gap-1.5 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-xl s-text-sm s-px-3 s-py-2 s-transition-colors s-duration-300", "data-[disabled]:s-pointer-events-none data-[disabled]:s-text-muted-foreground", "hover:s-text-foreground hover:s-bg-structure-150"),
+        },
+        state: {
+            active: "active:s-bg-structure-200",
+            selected: "s-text-foreground s-font-medium s-bg-structure-150",
+            unselected: "s-text-muted-foreground",
+        },
+    },
+    defaultVariants: {
+        layout: "container",
+        state: "unselected",
+    },
+});
+var labelStyles = cva("s-font-semibold s-pt-6 s-pb-2 s-text-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis");
+var NavigationList = React__namespace.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React__namespace.createElement("div", __assign({ ref: ref, className: cn(listStyles({ layout: "container" }), className) }, props)));
+});
+NavigationList.displayName = "NavigationList";
+var NavigationListItem = React__namespace.forwardRef(function (_a, ref) {
+    var className = _a.className, selected = _a.selected, label = _a.label, icon = _a.icon, props = __rest(_a, ["className", "selected", "label", "icon"]);
+    var _b = __read(React__namespace.useState(false), 2), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = __read(React__namespace.useState(false), 2), isPressed = _c[0], setIsPressed = _c[1];
+    var handleMouseDown = function (event) {
+        if (!event.target.closest(".new-button-class")) {
+            setIsPressed(true);
+        }
+    };
+    return (React__namespace.createElement("div", __assign({ className: className, ref: ref }, props),
+        React__namespace.createElement("div", { className: listStyles({
+                layout: "item",
+                state: selected ? "selected" : isPressed ? "active" : "unselected",
+            }), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () {
+                setIsHovered(false);
+                setIsPressed(false);
+            }, onMouseDown: handleMouseDown, onMouseUp: function () { return setIsPressed(false); } },
+            icon && React__namespace.createElement(Icon, { visual: icon, size: "sm" }),
+            label && (React__namespace.createElement("span", { className: "s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap" }, label)),
+            isHovered && (React__namespace.createElement("div", { className: "-s-mr-2 s-flex s-h-4 s-items-center" },
+                React__namespace.createElement(Button, { variant: "ghost", icon: MoreIcon, size: "xs", onClick: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); }, onMouseUp: function (e) { return e.stopPropagation(); } }))))));
+});
+NavigationListItem.displayName = "NavigationListItem";
+var variantStyles = cva("", {
+    variants: {
+        variant: {
+            primary: "s-text-foreground",
+            secondary: "s-text-muted-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+    },
+});
+var NavigationListLabel = React__namespace.forwardRef(function (_a, ref) {
+    var className = _a.className, variant = _a.variant, label = _a.label, props = __rest(_a, ["className", "variant", "label"]);
+    return (React__namespace.createElement("div", __assign({ ref: ref, className: cn(labelStyles(), variantStyles({ variant: variant }), className) }, props), label));
+});
+NavigationListLabel.displayName = "NavigationListLabel";
+
 // packages/core/primitive/src/primitive.tsx
 function composeEventHandlers$3(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -140547,7 +140621,7 @@ var SubContent2 = DropdownMenuSubContent;
 
 var menuStyleClasses = {
     inset: "s-pl-8",
-    container: cn("s-rounded-lg s-border s-border-hovering s-bg-white s-p-1 s-text-primary-950", "s-z-50 s-min-w-[8rem] s-overflow-hidden", "data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0 data-[state=closed]:s-zoom-out-95 data-[state=open]:s-zoom-in-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2"),
+    container: cn("s-rounded-xl s-border s-border-hovering s-bg-white s-p-1 s-text-primary-950", "s-z-50 s-min-w-[8rem] s-overflow-hidden", "data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0 data-[state=closed]:s-zoom-out-95 data-[state=open]:s-zoom-in-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2"),
     item: cva("s-relative s-flex s-gap-2 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-md s-text-sm s-font-medium s-px-2 s-py-2 s-transition-colors s-duration-300 data-[disabled]:s-pointer-events-none data-[disabled]:s-text-primary-400", {
         variants: {
             variant: {
@@ -140577,7 +140651,7 @@ var NewDropdownMenuTrigger = Trigger;
 var ItemWithLabelIconAndDescription = function (_a) {
     var label = _a.label, icon = _a.icon, description = _a.description, children = _a.children;
     return (React__namespace.createElement(React__namespace.Fragment, null,
-        label && (React__namespace.createElement("div", { className: "s-grid s-grid-cols-[auto,1fr] s-gap-x-1" },
+        label && (React__namespace.createElement("div", { className: "s-grid s-grid-cols-[auto,1fr] s-gap-x-1.5" },
             icon && (React__namespace.createElement("div", { className: cn("s-flex", description ? "s-items-start s-pt-0.5" : "s-items-center") },
                 React__namespace.createElement(Icon, { size: "xs", visual: icon }))),
             React__namespace.createElement("div", { className: "s-flex s-flex-col" },
@@ -141836,14 +141910,14 @@ var radioIndicatorStyles = cva("s-bg-primary s-flex s-items-center s-justify-cen
 });
 var RadioGroup = React__namespace.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (React__namespace.createElement(Root2, __assign({ className: cn("s-grid", className) }, props, { ref: ref })));
+    return (React__namespace.createElement(Root2, __assign({ className: cn("s-grid s-gap-2", className) }, props, { ref: ref })));
 });
 RadioGroup.displayName = Root2.displayName;
 var RadioGroupItem = React__namespace.forwardRef(function (_a, ref) {
     var tooltipMessage = _a.tooltipMessage, className = _a.className, size = _a.size, _b = _a.tooltipAsChild, tooltipAsChild = _b === void 0 ? false : _b, props = __rest(_a, ["tooltipMessage", "className", "size", "tooltipAsChild"]);
-    return (React__namespace.createElement("div", { className: "s-group" }, tooltipMessage ? (React__namespace.createElement(Tooltip, { triggerAsChild: tooltipAsChild, trigger: React__namespace.createElement(Item2, __assign({ ref: ref, className: cn(radioStyles({ size: size }), className) }, props),
-            React__namespace.createElement(Indicator, { className: radioIndicatorStyles({ size: size }) })), label: React__namespace.createElement("span", null, tooltipMessage) })) : (React__namespace.createElement(Item2, __assign({ ref: ref, className: cn(radioStyles({ size: size }), className) }, props),
-        React__namespace.createElement(Indicator, { className: radioIndicatorStyles({ size: size }) })))));
+    var item = (React__namespace.createElement(Item2, __assign({ ref: ref, className: cn(radioStyles({ size: size }), className) }, props),
+        React__namespace.createElement(Indicator, { className: radioIndicatorStyles({ size: size }) })));
+    return (React__namespace.createElement("div", { className: cn("s-group", size === "sm" ? "s-h-5 s-w-5" : "-s-mt-1.5 s-h-4 s-w-4") }, tooltipMessage ? (React__namespace.createElement(Tooltip, { triggerAsChild: tooltipAsChild, trigger: item, label: React__namespace.createElement("span", null, tooltipMessage) })) : (item)));
 });
 RadioGroupItem.displayName = Item2.displayName;
 var RadioGroupChoice = React__namespace.forwardRef(function (_a, ref) {
@@ -142953,7 +143027,7 @@ var TextArea = React.forwardRef(function (_a, ref) {
 TextArea.displayName = "TextArea";
 
 function Tree(_a) {
-    var children = _a.children, isLoading = _a.isLoading, _b = _a.isBoxed, isBoxed = _b === void 0 ? false : _b, tailwindIconTextColor = _a.tailwindIconTextColor, _c = _a.variant, variant = _c === void 0 ? "finder" : _c;
+    var children = _a.children, isLoading = _a.isLoading, _b = _a.isBoxed, isBoxed = _b === void 0 ? false : _b, tailwindIconTextColor = _a.tailwindIconTextColor, _c = _a.variant, variant = _c === void 0 ? "finder" : _c, className = _a.className;
     var modifiedChildren = React.Children.map(children, function (child) {
         // /!\ Limitation: This stops on the first invalid element.
         // Meaning that if Tree.Item is not the first child, it will not work.
@@ -142970,15 +143044,15 @@ function Tree(_a) {
         }
         return child;
     });
-    return isLoading ? (React.createElement("div", { className: "s-py-2 s-pl-4" },
+    return isLoading ? (React.createElement("div", { className: cn("s-py-2 s-pl-4", className) },
         React.createElement(Spinner$1, { size: "xs", variant: "dark" }))) : (React.createElement("div", { className: cn("s-flex s-flex-col s-gap-0.5 s-overflow-hidden", isBoxed &&
-            "s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4") }, modifiedChildren));
+            "s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4", className) }, modifiedChildren));
 }
 var treeItemStyleClasses = {
-    base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-1.5",
-    isNavigatableBase: "s-rounded-lg s-pl-1.5 s-pr-3 s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
-    isNavigatableUnselected: "s-border-structure-200/0 s-bg-white/0 hover:s-border-structure-200 hover:s-bg-white",
-    isNavigatableSelected: "s-border-structure-200 s-bg-white",
+    base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-2",
+    isNavigatableBase: "s-rounded-xl s-pl-1.5 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
+    isNavigatableUnselected: "s-bg-structure-150/0 hover:s-bg-structure-150",
+    isNavigatableSelected: "s-font-medium s-bg-structure-150",
 };
 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.labelClassName, labelClassName = _d === void 0 ? "" : _d, _e = _a.tailwindIconTextColor, tailwindIconTextColor = _e === void 0 ? "s-text-element-800" : _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, _g = _a.isNavigatable, isNavigatable = _g === void 0 ? false : _g, _h = _a.isSelected, isSelected = _h === void 0 ? false : _h, onItemClick = _a.onItemClick;
@@ -143010,7 +143084,7 @@ Tree.Item = function (_a) {
                 } })),
             type === "leaf" && React.createElement("div", { className: "s-w-4 s-flex-shrink-0" }),
             checkbox && React.createElement(Checkbox, __assign({}, checkbox, { size: "xs" })),
-            React.createElement(Icon, { visual: visual, size: "xs", className: tailwindIconTextColor }),
+            React.createElement(Icon, { visual: visual, size: "sm", className: tailwindIconTextColor }),
             React.createElement("div", { className: "s-font-regular s-truncate s-text-sm s-text-element-900 ".concat(labelClassName) }, label),
             React.createElement("div", { className: "s-grow" }),
             actions && (React.createElement("div", { className: cn("s-flex s-gap-2 s-pl-4", areActionsFading &&
@@ -143505,6 +143579,9 @@ exports.MoreIcon = MoreIcon;
 exports.MoreStrokeIcon = SvgMore$1;
 exports.MovingMailIcon = SvgMovingMail$3;
 exports.MovingMailStrokeIcon = SvgMovingMail$1;
+exports.NavigationList = NavigationList;
+exports.NavigationListItem = NavigationListItem;
+exports.NavigationListLabel = NavigationListLabel;
 exports.NewDropdownMenu = NewDropdownMenu;
 exports.NewDropdownMenuCheckboxItem = NewDropdownMenuCheckboxItem;
 exports.NewDropdownMenuContent = NewDropdownMenuContent;
@@ -143573,6 +143650,7 @@ exports.SalesforceLogo = SvgSalesforce$1;
 exports.ScanIcon = SvgScan$3;
 exports.ScanStrokeIcon = SvgScan$1;
 exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
 exports.Searchbar = Searchbar;
 exports.Separator = Separator;
 exports.ServerIcon = SvgServer$3;