@dust-tt/sparkle 0.2.222 → 0.2.223

package/dist/cjs/index.js

@@ -71866,10 +71866,10 @@ var labelStyleClasses = {
     warning: "s-font-semibold",
 };
 var labelColorClasses = {
-    item: "s-text-element-600 dark:s-text-element-500-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
-    action: "s-text-element-800 dark:s-text-element-800-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
-    link: "s-text-element-800 dark:s-text-element-800-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
-    warning: "s-text-warning-500 dark:s-text-warning-400-dark group-hover:s-text-warning-400 group-active:s-text-warning-700 dark:group-hover:s-text-warning-600-dark dark:group-active:s-text-warning-400-dark",
+    item: "s-text-element-600 dark:s-text-element-500-dark group-hover/item:s-text-action-500 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
+    action: "s-text-element-800 dark:s-text-element-800-dark group-hover/item:s-text-action-500 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
+    link: "s-text-element-800 dark:s-text-element-800-dark group-hover/item:s-text-action-500 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
+    warning: "s-text-warning-500 dark:s-text-warning-400-dark group-hover/item:s-text-warning-400 group-active/item:s-text-warning-700 dark:group-hover/item:s-text-warning-600-dark dark:group-active/item:s-text-warning-400-dark",
 };
 var spacingClasses = {
     sm: "s-py-2 s-gap-x-2",
@@ -71877,10 +71877,10 @@ var spacingClasses = {
     lg: "s-py-3 s-gap-x-3",
 };
 var iconClasses$4 = {
-    item: "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
-    action: "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
-    link: "s-text-brand group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
-    warning: "s-text-warning-400 group-hover:s-text-warning-300 group-active:s-text-warning-700 dark:group-hover:s-text-warning-600-dark dark:group-active:s-text-warning-400-dark",
+    item: "s-text-element-600 group-hover/item:s-text-action-400 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
+    action: "s-text-element-600 group-hover/item:s-text-action-400 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
+    link: "s-text-brand group-hover/item:s-text-action-400 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
+    warning: "s-text-warning-400 group-hover/item:s-text-warning-300 group-active/item:s-text-warning-700 dark:group-hover/item:s-text-warning-600-dark dark:group-active/item:s-text-warning-400-dark",
 };
 function Item(_a) {
     var label = _a.label, description = _a.description, visual = _a.visual, icon = _a.icon, _b = _a.style, style = _b === void 0 ? "action" : _b, _c = _a.spacing, spacing = _c === void 0 ? "sm" : _c, _d = _a.action, action = _d === void 0 ? SvgChevronRight$1 : _d, _e = _a.hasAction, hasAction = _e === void 0 ? true : _e, onClick = _a.onClick, _f = _a.selected, selected = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.className, className = _h === void 0 ? "" : _h, href = _a.href, target = _a.target;
@@ -71898,7 +71898,7 @@ function Item(_a) {
                     : iconClasses$4[style]) }));
     }
     var targetProps = target ? { target: target } : {};
-    return (React.createElement(Link, __assign({ className: classNames("s-duration-400 s-group s-box-border s-flex s-select-none s-text-sm s-transition-colors s-ease-out", spacingClasses[spacing], disabled ? "" : "s-cursor-pointer", className), onClick: selected || disabled ? undefined : onClick, "aria-label": label, href: href || "#" }, targetProps),
+    return (React.createElement(Link, __assign({ className: classNames("s-duration-400 s-group/item s-box-border s-flex s-select-none s-text-sm s-transition-colors s-ease-out", spacingClasses[spacing], disabled ? "s-cursor-default" : "s-cursor-pointer", className), onClick: selected || disabled ? undefined : onClick, "aria-label": label, href: href || "#" }, targetProps),
         visualElement,
         React.createElement("div", { className: classNames("s-flex s-grow s-flex-col s-gap-0 s-overflow-hidden") },
             React.createElement("div", { className: classNames("s-transition-colors s-duration-200 s-ease-out", "s-grow s-truncate s-text-sm", labelStyleClasses[style], disabled
@@ -71911,12 +71911,12 @@ function Item(_a) {
                     : "s-text-element-700 dark:s-text-element-600-dark") }, description)),
         React.createElement(Icon, { visual: action, className: hasAction
                 ? classNames("s-shrink-0 s-transition-all s-duration-200 s-ease-out", hasAction === "hover"
-                    ? "s-opacity-0 group-hover:s-opacity-100"
+                    ? "s-opacity-0 group-hover/item:s-opacity-100"
                     : "", disabled
                     ? "s-text-element-500 dark:s-text-element-500-dark"
                     : selected
                         ? "s-text-action-400 s-opacity-100 dark:s-text-action-600-dark"
-                        : classNames("s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark", hasAction ? "group-hover:s-opacity-100" : ""))
+                        : classNames("s-text-element-600 group-hover/item:s-text-action-400 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark", hasAction ? "group-hover/item:s-opacity-100" : ""))
                 : "s-hidden", size: "sm" })));
 }
 Item.Entry = function (props) {
@@ -71956,11 +71956,11 @@ Item.List = function (_a) {
 var ButtonRefContext = React.createContext(null);
 var labelClasses$1 = {
     base: "s-text-element-900 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
-    hover: "group-hover:s-text-action-500",
+    hover: "group-hover/dm:s-text-action-500",
     active: "active:s-text-action-700",
     dark: {
         base: "dark:s-text-element-900-dark",
-        hover: "dark:group-hover:s-text-action-400",
+        hover: "dark:group-hover/dm:s-text-action-400",
         active: "dark:active:s-text-action-600",
         disabled: "dark:s-element-500-dark",
     },
@@ -71972,22 +71972,22 @@ var labelSizeClasses = {
 };
 var iconClasses$3 = {
     base: "s-text-element-700 s-transition-colors s-ease-out s-duration-400",
-    hover: "group-hover:s-text-action-500",
+    hover: "group-hover/dm:s-text-action-500",
     active: "active:s-text-action-700",
     disabled: "s-opacity-50",
     dark: {
         base: "dark:s-text-element-700-dark",
-        hover: "dark:group-hover:s-text-action-500-dark",
+        hover: "dark:group-hover/dm:s-text-action-500-dark",
         active: "dark:active:s-text-action-600",
     },
 };
 var chevronClasses = {
     base: "s-text-element-600 s-mt-0.5",
-    hover: "group-hover:s-text-action-400",
+    hover: "group-hover/dm:s-text-action-400",
     disabled: "s-element-500",
     dark: {
         base: "dark:s-text-element-600-dark",
-        hover: "dark:group-hover:s-text-action-500-dark",
+        hover: "dark:group-hover/dm:s-text-action-500-dark",
         disabled: "dark:s-element-500-dark",
     },
 };
@@ -72004,7 +72004,7 @@ DropdownMenu.Button = function (_a) {
     var finalChevronClasses = classNames(chevronClasses.base, !disabled ? chevronClasses.hover : "", chevronClasses.dark.base, !disabled ? chevronClasses.dark.hover : "", disabled ? chevronClasses.disabled : "");
     var buttonRef = React.useContext(ButtonRefContext);
     if (children) {
-        return (React.createElement(qe$1.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)));
+        return (React.createElement(qe$1.Button, { as: "div", disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/dm 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
@@ -72012,9 +72012,9 @@ DropdownMenu.Button = function (_a) {
             ? SvgChevronRight$1
             : SvgChevronDown$1;
     return (React.createElement(React.Fragment, null, tooltip ? (React.createElement(Tooltip, { label: tooltip, position: tooltipPosition },
-        React.createElement(qe$1.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(qe$1.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/dm 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: chevronIcon, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))) : (React.createElement(qe$1.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(qe$1.Button, { disabled: disabled, ref: buttonRef, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/dm 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: chevronIcon, size: size === "sm" ? "xs" : "sm", className: finalChevronClasses })))));
@@ -72024,8 +72024,8 @@ DropdownMenu.Item = function (_a) {
     return (
     // need to use as="div" -- otherwise we get a "forwardRef" error in the console
     React.createElement(qe$1.Item, { disabled: disabled, as: "div" }, hasChildren ? (React.createElement(DropdownMenu, { className: "s-w-full s-gap-x-2 s-py-2" },
-        React.createElement(DropdownMenu.Button, { label: label, type: "submenu", className: "s-w-full" }),
-        children)) : (React.createElement(Item.Dropdown, { style: variant, className: "s-w-full", href: href, onClick: onClick, label: label, visual: visual, icon: icon, description: description, selected: selected }))));
+        React.createElement(DropdownMenu.Button, { className: "s-w-full", disabled: disabled, label: label, type: "submenu" }),
+        children)) : (React.createElement(Item.Dropdown, { className: "s-w-full", description: description, disabled: disabled, href: href, icon: icon, label: label, onClick: onClick, selected: selected, style: variant, visual: visual }))));
 };
 DropdownMenu.SectionHeader = function (_a) {
     var label = _a.label;
@@ -99703,11 +99703,11 @@ Collapsible.Button = function (_a) {
     var labelClasses = {
         primary: {
             base: "s-text-action-500 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
-            hover: "group-hover:s-text-action-400",
+            hover: "group-hover/col:s-text-action-400",
             active: "active:s-text-action-600",
             dark: {
                 base: "dark:s-text-action-500-dark",
-                hover: "dark:group-hover:s-text-action-400-dark",
+                hover: "dark:group-hover/col:s-text-action-400-dark",
                 active: "dark:active:s-text-action-600-dark",
                 disabled: "dark:s-element-500-dark",
             },
@@ -99715,11 +99715,11 @@ Collapsible.Button = function (_a) {
         },
         secondary: {
             base: "s-text-element-900 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
-            hover: "group-hover:s-text-action-500",
+            hover: "group-hover/col:s-text-action-500",
             active: "active:s-text-action-600",
             dark: {
                 base: "dark:s-text-element-900-dark",
-                hover: "dark:group-hover:s-text-action-400-dark",
+                hover: "dark:group-hover/col:s-text-action-400-dark",
                 active: "dark:active:s-text-action-600-dark",
                 disabled: "dark:s-element-500-dark",
             },
@@ -99729,24 +99729,24 @@ Collapsible.Button = function (_a) {
     var chevronClasses = {
         primary: {
             base: "s-text-element-600",
-            hover: "group-hover:s-text-action-400",
+            hover: "group-hover/col:s-text-action-400",
             active: "active:s-text-action-700",
             disabled: "s-element-500",
             dark: {
                 base: "dark:s-text-element-600-dark",
-                hover: "dark:group-hover:s-text-action-500-dark",
+                hover: "dark:group-hover/col:s-text-action-500-dark",
                 active: "dark:active:s-text-action-700-dark",
                 disabled: "dark:s-element-500-dark",
             },
         },
         secondary: {
             base: "s-text-element-600",
-            hover: "group-hover:s-text-action-400",
+            hover: "group-hover/col:s-text-action-400",
             active: "active:s-text-action-700",
             disabled: "s-element-500",
             dark: {
                 base: "dark:s-text-element-600-dark",
-                hover: "dark:group-hover:s-text-action-500-dark",
+                hover: "dark:group-hover/col:s-text-action-500-dark",
                 active: "dark:active:s-text-action-700-dark",
                 disabled: "dark:s-element-500-dark",
             },
@@ -99754,7 +99754,7 @@ Collapsible.Button = function (_a) {
     };
     var finalLabelClasses = classNames(labelClasses[variant].base, labelClasses[variant].dark.base, !disabled ? labelClasses[variant].active : "", !disabled ? labelClasses[variant].dark.active : "", !disabled ? labelClasses[variant].hover : "", !disabled ? labelClasses[variant].dark.hover : "", disabled ? labelClasses[variant].disabled : "");
     var finalChevronClasses = classNames(chevronClasses[variant].base, chevronClasses[variant].dark.base, !disabled ? chevronClasses[variant].active : "", !disabled ? chevronClasses[variant].dark.active : "", !disabled ? chevronClasses[variant].hover : "", !disabled ? chevronClasses[variant].dark.hover : "", disabled ? chevronClasses[variant].disabled : "");
-    return (React.createElement(Ae$1.Button, { disabled: disabled, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group s-flex s-items-center s-justify-items-center s-gap-1 s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0") },
+    return (React.createElement(Ae$1.Button, { disabled: disabled, className: classNames(disabled ? "s-cursor-default" : "s-cursor-pointer", className, "s-group/col s-flex s-items-center s-justify-items-center s-gap-1 s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0") },
         React.createElement(Icon, { visual: open ? SvgChevronDown$1 : SvgChevronRight$1, size: "sm", className: finalChevronClasses }),
         children ? children : React.createElement("span", { className: finalLabelClasses }, label)));
 };
@@ -103342,9 +103342,9 @@ DataTable.Body = function Body(_a) {
 };
 DataTable.Row = function Row(_a) {
     var children = _a.children, className = _a.className, onClick = _a.onClick, moreMenuItems = _a.moreMenuItems, props = __rest(_a, ["children", "className", "onClick", "moreMenuItems"]);
-    return (React.createElement("tr", __assign({ className: classNames("s-group s-border-b s-border-structure-200 s-text-sm s-transition-colors s-duration-300 s-ease-out", onClick ? "s-cursor-pointer hover:s-bg-structure-50" : "", className || ""), onClick: onClick ? onClick : undefined }, props),
+    return (React.createElement("tr", __assign({ className: classNames("s-group/dt s-border-b s-border-structure-200 s-text-sm s-transition-colors s-duration-300 s-ease-out", onClick ? "s-cursor-pointer hover:s-bg-structure-50" : "", className || ""), onClick: onClick ? onClick : undefined }, props),
         children,
-        React.createElement("td", { className: "s-w-1 s-cursor-pointer s-pl-1 s-text-element-600" }, moreMenuItems && (React.createElement(DropdownMenu, { className: "s-mr-1.5 s-flex" },
+        React.createElement("td", { className: "s-w-1 s-cursor-pointer s-pl-1 s-text-element-600" }, moreMenuItems && moreMenuItems.length > 0 && (React.createElement(DropdownMenu, { className: "s-mr-1.5 s-flex" },
             React.createElement(DropdownMenu.Button, { onClick: function (e) {
                     e.stopPropagation();
                 } },
@@ -128938,10 +128938,10 @@ var tabClasses = {
 var iconClasses = {
     default: {
         base: "s-text-element-600",
-        hover: "group-hover:s-text-action-400",
+        hover: "group-hover/tab:s-text-action-400",
         dark: {
             base: "dark:s-text-element-600-dark",
-            hover: "dark:group-hover:s-text-action-500-dark",
+            hover: "dark:group-hover/tab:s-text-action-500-dark",
         },
     },
     selected: {
@@ -128982,7 +128982,7 @@ function Tab(_a) {
             var iconStateClasses = tab.current
                 ? iconClasses.selected
                 : iconClasses.default;
-            var finalTabClasses = classNames("s-group s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none", variant === "default"
+            var finalTabClasses = classNames("s-group/tab s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none", variant === "default"
                 ? tab.icon
                     ? tab.hideLabel
                         ? "s-px-3"
@@ -129089,7 +129089,7 @@ Tree.Item = function (_a) {
     };
     var childrenToRender = getChildren();
     var treeItemStyleClasses = {
-        base: "s-group s-flex s-cursor-default s-flex-row s-items-center",
+        base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center",
         isNavigatableBase: "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",
@@ -129119,7 +129119,7 @@ Tree.Item = function (_a) {
             React.createElement("div", { className: classNames("s-truncate s-font-medium s-text-element-900", size === "sm" ? "s-ml-1 s-text-sm" : "s-ml-1 s-text-base") }, label),
             React.createElement("div", { className: "s-grow" }),
             actions && (React.createElement("div", { className: classNames("s-flex s-gap-2 s-pl-4", areActionsFading
-                    ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
+                    ? "s-transform s-opacity-0 s-duration-300 group-hover/tree:s-opacity-100"
                     : "") }, actions))),
         React.Children.count(childrenToRender) > 0 && (React.createElement("div", { className: "s-pl-2.5" }, childrenToRender))));
 };