@dust-tt/sparkle 0.2.242 → 0.2.244-rc

package/dist/esm/components/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,UAAU,GAAG;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,wBAAgB,KAAK,CAAC,EACpB,WAAW,EACX,KAAK,EACL,IAAW,EACX,QAAQ,EACR,KAAK,EACL,cAAsB,EACtB,IAAI,EACJ,UAAkB,EAClB,QAAgB,EAChB,SAAc,EACd,KAAK,GACN,EAAE,UAAU,qBA6CZ"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,UAAU,GAAG;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,wBAAgB,KAAK,CAAC,EACpB,WAAW,EACX,KAAK,EACL,IAAW,EACX,QAAQ,EACR,KAAK,EACL,cAAsB,EACtB,IAAI,EACJ,UAAkB,EAClB,QAAgB,EAChB,SAAc,EACd,KAAK,GACN,EAAE,UAAU,qBAgDZ"}

package/dist/esm/components/Input.js

@@ -8,9 +8,11 @@ export function Input(_a) {
     var placeholder = _a.placeholder, value = _a.value, _b = _a.size, size = _b === void 0 ? "sm" : _b, onChange = _a.onChange, error = _a.error, _c = _a.showErrorLabel, showErrorLabel = _c === void 0 ? false : _c, name = _a.name, _d = _a.isPassword, isPassword = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? "" : _f, label = _a.label;
     return (React.createElement("div", { className: "s-flex s-flex-col s-gap-1 s-p-px" },
         label && (React.createElement("label", { htmlFor: name, className: "s-pb-1 s-text-sm s-font-medium s-text-element-700 dark:s-text-element-700-dark" }, label)),
-        React.createElement("input", { type: isPassword ? "password" : "text", name: name, id: name, className: classNames("s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2", "s-bg-structure-50 s-text-element-900 s-placeholder-element-700", "dark:s-bg-structure-50-dark dark:s-text-element-800-dark dark:s-placeholder-element-700-dark", sizeInputClasses[size], "s-transition-all s-duration-300 s-ease-out", className !== null && className !== void 0 ? className : "", !error
+        React.createElement("input", { type: isPassword ? "password" : "text", name: name, id: name, className: classNames("s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2", "s-bg-structure-50 s-placeholder-element-700", "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark", sizeInputClasses[size], "s-transition-all s-duration-300 s-ease-out", className !== null && className !== void 0 ? className : "", !error
                 ? classNames("s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark")
-                : classNames("s-ring-warning-200 focus:s-ring-warning-300", "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark")), placeholder: placeholder, value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
+                : classNames("s-ring-warning-200 focus:s-ring-warning-300", "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"), disabled
+                ? "s-text-element-500 hover:s-cursor-not-allowed"
+                : "s-text-element-900 dark:s-text-element-800-dark"), placeholder: placeholder, value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
             }, "data-1p-ignore": !isPassword, disabled: disabled }),
         React.createElement("div", { className: "s-ml-2 s-text-sm s-text-warning-500" }, showErrorLabel && error ? error : null)));

package/dist/esm/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAgBhD,IAAM,gBAAgB,GAAG;IACvB,EAAE,EAAE,iDAAiD;IACrD,EAAE,EAAE,8CAA8C;CACnD,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,EAYT;QAXX,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,IAAI,UAAA,EACJ,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,KAAK,WAAA;IAEL,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC9C,KAAK,IAAI,CACR,+BACE,OAAO,EAAE,IAAI,EACb,SAAS,EAAC,gFAAgF,IAEzF,KAAK,CACA,CACT;QACD,+BACE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EACtC,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,SAAS,EAAE,UAAU,CACnB,iFAAiF,EACjF,gEAAgE,EAChE,8FAA8F,EAC9F,gBAAgB,CAAC,IAAI,CAAC,EACtB,4CAA4C,EAC5C,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EACf,CAAC,KAAK;gBACJ,CAAC,CAAC,UAAU,CACR,8CAA8C,EAC9C,kEAAkE,CACnE;gBACH,CAAC,CAAC,UAAU,CACR,6CAA6C,EAC7C,iEAAiE,CAClE,CACN,EACD,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,UAAC,CAAC;gBACV,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,oBACe,CAAC,UAAU,EAC3B,QAAQ,EAAE,QAAQ,GAClB;QACF,6BAAK,SAAS,EAAC,qCAAqC,IACjD,cAAc,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CACnC,CACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAgBhD,IAAM,gBAAgB,GAAG;IACvB,EAAE,EAAE,iDAAiD;IACrD,EAAE,EAAE,8CAA8C;CACnD,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,EAYT;QAXX,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,IAAI,UAAA,EACJ,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,KAAK,WAAA;IAEL,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC9C,KAAK,IAAI,CACR,+BACE,OAAO,EAAE,IAAI,EACb,SAAS,EAAC,gFAAgF,IAEzF,KAAK,CACA,CACT;QACD,+BACE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EACtC,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,SAAS,EAAE,UAAU,CACnB,iFAAiF,EACjF,6CAA6C,EAC7C,iEAAiE,EACjE,gBAAgB,CAAC,IAAI,CAAC,EACtB,4CAA4C,EAC5C,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EACf,CAAC,KAAK;gBACJ,CAAC,CAAC,UAAU,CACR,8CAA8C,EAC9C,kEAAkE,CACnE;gBACH,CAAC,CAAC,UAAU,CACR,6CAA6C,EAC7C,iEAAiE,CAClE,EACL,QAAQ;gBACN,CAAC,CAAC,+CAA+C;gBACjD,CAAC,CAAC,iDAAiD,CACtD,EACD,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,UAAC,CAAC;gBACV,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,oBACe,CAAC,UAAU,EAC3B,QAAQ,EAAE,QAAQ,GAClB;QACF,6BAAK,SAAS,EAAC,qCAAqC,IACjD,cAAc,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CACnC,CACF,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,QAAkB,EAClB,eAAe,GAChB,EAAE,YAAY,qBAqEd"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,QAAkB,EAClB,eAAe,GAChB,EAAE,YAAY,qBA4Fd"}

package/dist/esm/components/Tooltip.js

@@ -1,14 +1,17 @@
 import { __read } from "tslib";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { classNames } from "../lib/utils";
 export function Tooltip(_a) {
     var children = _a.children, label = _a.label, _b = _a.position, position = _b === void 0 ? "above" : _b, contentChildren = _a.contentChildren;
     var _c = __read(useState(false), 2), isHovered = _c[0], setIsHovered = _c[1];
     var _d = __read(useState(null), 2), timerId = _d[0], setTimerId = _d[1];
     var _e = __read(useState(false), 2), isTouchDevice = _e[0], setIsTouchDevice = _e[1];
+    var _f = __read(useState({ top: 0, left: 0 }), 2), tooltipPosition = _f[0], setTooltipPosition = _f[1];
+    var triggerRef = useRef(null);
     var handleMouseOver = function () {
         var id = window.setTimeout(function () {
             setIsHovered(true);
+            updateTooltipPosition();
         }, 600);
         setTimerId(id);
     };
@@ -18,6 +21,15 @@ export function Tooltip(_a) {
         }
         setIsHovered(false);
     };
+    var updateTooltipPosition = function () {
+        if (triggerRef.current) {
+            var rect = triggerRef.current.getBoundingClientRect();
+            setTooltipPosition({
+                top: position === "above" ? rect.top - 10 : rect.bottom + 10,
+                left: rect.left + rect.width / 2,
+            });
+        }
+    };
     useEffect(function () {
         setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
         return function () {
@@ -26,20 +38,29 @@ export function Tooltip(_a) {
             }
         };
     }, [timerId]);
+    useEffect(function () {
+        window.addEventListener("scroll", updateTooltipPosition);
+        window.addEventListener("resize", updateTooltipPosition);
+        return function () {
+            window.removeEventListener("scroll", updateTooltipPosition);
+            window.removeEventListener("resize", updateTooltipPosition);
+        };
+    }, []);
     if (isTouchDevice) {
         return React.createElement(React.Fragment, null, children);
     }
-    var baseClasses = classNames("s-absolute s-z-10 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform", "s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark");
-    var hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none"; // Added s-pointer-events-none
+    var baseClasses = classNames("s-fixed s-z-50 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform", "s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark");
+    var hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none";
     var visibleClasses = "-s-translate-y-0 s-opacity-100";
     var hiddenOnMobileClasses = "s-hidden sm:s-block";
-    var tooltipCenterClasses = "s-left-1/2 -s-translate-x-1/2";
-    var tooltipPositionClasses = position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
-    // if tooltip text is too long we need to wrap it
+    var tooltipCenterClasses = "-s-translate-x-1/2";
     var labelLength = (label === null || label === void 0 ? void 0 : label.length) || 0;
     var labelClasses = labelLength > 80 ? "s-w-[38em]" : "s-whitespace-nowrap";
-    return (React.createElement("div", { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
+    return (React.createElement("div", { ref: triggerRef, onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
         children,
-        React.createElement("div", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, hiddenOnMobileClasses, tooltipPositionClasses, tooltipCenterClasses, contentChildren ? "" : labelClasses), onAnimationEnd: function () { return setIsHovered(false); } }, contentChildren || label)));
+        React.createElement("div", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, hiddenOnMobileClasses, tooltipCenterClasses, contentChildren ? "" : labelClasses), style: {
+                top: "".concat(tooltipPosition.top, "px"),
+                left: "".concat(tooltipPosition.left, "px"),
+            }, onAnimationEnd: function () { return setIsHovered(false); } }, contentChildren || label)));
 }
 //# sourceMappingURL=Tooltip.js.map

package/dist/esm/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAShD,MAAM,UAAU,OAAO,CAAC,EAKT;QAJb,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,gBAAkB,EAAlB,QAAQ,mBAAG,OAAO,KAAA,EAClB,eAAe,qBAAA;IAET,IAAA,KAAA,OAA4B,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAC5C,IAAA,KAAA,OAAwB,QAAQ,CAAgB,IAAI,CAAC,IAAA,EAApD,OAAO,QAAA,EAAE,UAAU,QAAiC,CAAC;IACtD,IAAA,KAAA,OAAoC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAlD,aAAa,QAAA,EAAE,gBAAgB,QAAmB,CAAC;IAE1D,IAAM,eAAe,GAAG;QACtB,IAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC;YAC3B,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,EAAE,GAAG,CAAC,CAAC;QACR,UAAU,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,IAAM,gBAAgB,GAAG;QACvB,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;YACrB,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;QACD,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,SAAS,CAAC;QACR,gBAAgB,CAAC,cAAc,IAAI,MAAM,IAAI,SAAS,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;QAC3E,OAAO;YACL,IAAI,OAAO,EAAE,CAAC;gBACZ,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,0CAAG,QAAQ,CAAI,CAAC;IACzB,CAAC;IAED,IAAM,WAAW,GAAG,UAAU,CAC5B,oIAAoI,EACpI,sJAAsJ,CACvJ,CAAC;IACF,IAAM,aAAa,GAAG,mDAAmD,CAAC,CAAC,8BAA8B;IACzG,IAAM,cAAc,GAAG,gCAAgC,CAAC;IACxD,IAAM,qBAAqB,GAAG,qBAAqB,CAAC;IACpD,IAAM,oBAAoB,GAAG,+BAA+B,CAAC;IAC7D,IAAM,sBAAsB,GAC1B,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAEtE,iDAAiD;IACjD,IAAM,WAAW,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,KAAI,CAAC,CAAC;IACvC,IAAM,YAAY,GAAG,WAAW,GAAG,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAE7E,OAAO,CACL,6BACE,YAAY,EAAE,eAAe,EAC7B,YAAY,EAAE,gBAAgB,EAC9B,SAAS,EAAC,2BAA2B;QAEpC,QAAQ;QACT,6BACE,SAAS,EAAE,UAAU,CACnB,UAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAE,EAC/C,WAAW,EACX,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CACpC,EACD,cAAc,EAAE,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,EAAnB,CAAmB,IAExC,eAAe,IAAI,KAAK,CACrB,CACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -805,18 +805,10 @@ select {
   bottom: 1.5rem;
 }
 
-.s-bottom-full {
-  bottom: 100%;
-}
-
 .s-left-0 {
   left: 0px;
 }
 
-.s-left-1\/2 {
-  left: 50%;
-}
-
 .s-right-0 {
   right: 0px;
 }
@@ -829,10 +821,6 @@ select {
   top: 0px;
 }
 
-.s-top-full {
-  top: 100%;
-}
-
 .s-z-0 {
   z-index: 0;
 }
@@ -905,10 +893,6 @@ select {
   margin-bottom: 0.25rem;
 }
 
-.s-mb-2 {
-  margin-bottom: 0.5rem;
-}
-
 .s-ml-1 {
   margin-left: 0.25rem;
 }
@@ -949,10 +933,6 @@ select {
   margin-top: 4rem;
 }
 
-.s-mt-2 {
-  margin-top: 0.5rem;
-}
-
 .s-mt-4 {
   margin-top: 1rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.242",
+  "version": "0.2.244-rc",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Input.tsx

@@ -50,8 +50,8 @@ export function Input({
         id={name}
         className={classNames(
           "s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
-          "s-bg-structure-50 s-text-element-900 s-placeholder-element-700",
-          "dark:s-bg-structure-50-dark dark:s-text-element-800-dark dark:s-placeholder-element-700-dark",
+          "s-bg-structure-50 s-placeholder-element-700",
+          "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark",
           sizeInputClasses[size],
           "s-transition-all s-duration-300 s-ease-out",
           className ?? "",
@@ -63,7 +63,10 @@ export function Input({
             : classNames(
                 "s-ring-warning-200 focus:s-ring-warning-300",
                 "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
-              )
+              ),
+          disabled
+            ? "s-text-element-500 hover:s-cursor-not-allowed"
+            : "s-text-element-900 dark:s-text-element-800-dark"
         )}
         placeholder={placeholder}
         value={value ?? ""}

package/src/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
@@ -18,10 +18,13 @@ export function Tooltip({
   const [isHovered, setIsHovered] = useState(false);
   const [timerId, setTimerId] = useState<number | null>(null);
   const [isTouchDevice, setIsTouchDevice] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef<HTMLDivElement>(null);
 
   const handleMouseOver = () => {
     const id = window.setTimeout(() => {
       setIsHovered(true);
+      updateTooltipPosition();
     }, 600);
     setTimerId(id);
   };
@@ -33,6 +36,16 @@ export function Tooltip({
     setIsHovered(false);
   };
 
+  const updateTooltipPosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setTooltipPosition({
+        top: position === "above" ? rect.top - 10 : rect.bottom + 10,
+        left: rect.left + rect.width / 2,
+      });
+    }
+  };
+
   useEffect(() => {
     setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
     return () => {
@@ -42,27 +55,34 @@ export function Tooltip({
     };
   }, [timerId]);
 
+  useEffect(() => {
+    window.addEventListener("scroll", updateTooltipPosition);
+    window.addEventListener("resize", updateTooltipPosition);
+    return () => {
+      window.removeEventListener("scroll", updateTooltipPosition);
+      window.removeEventListener("resize", updateTooltipPosition);
+    };
+  }, []);
+
   if (isTouchDevice) {
     return <>{children}</>;
   }
 
   const baseClasses = classNames(
-    "s-absolute s-z-10 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform",
+    "s-fixed s-z-50 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform",
     "s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark"
   );
-  const hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none"; // Added s-pointer-events-none
+  const hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none";
   const visibleClasses = "-s-translate-y-0 s-opacity-100";
   const hiddenOnMobileClasses = "s-hidden sm:s-block";
-  const tooltipCenterClasses = "s-left-1/2 -s-translate-x-1/2";
-  const tooltipPositionClasses =
-    position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
+  const tooltipCenterClasses = "-s-translate-x-1/2";
 
-  // if tooltip text is too long we need to wrap it
   const labelLength = label?.length || 0;
   const labelClasses = labelLength > 80 ? "s-w-[38em]" : "s-whitespace-nowrap";
 
   return (
     <div
+      ref={triggerRef}
       onMouseEnter={handleMouseOver}
       onMouseLeave={handleMouseLeave}
       className="s-relative s-inline-block"
@@ -73,10 +93,13 @@ export function Tooltip({
           `${isHovered ? visibleClasses : hiddenClasses}`,
           baseClasses,
           hiddenOnMobileClasses,
-          tooltipPositionClasses,
           tooltipCenterClasses,
           contentChildren ? "" : labelClasses
         )}
+        style={{
+          top: `${tooltipPosition.top}px`,
+          left: `${tooltipPosition.left}px`,
+        }}
         onAnimationEnd={() => setIsHovered(false)}
       >
         {contentChildren || label}