@beweco/aurora-ui 0.6.16 → 0.6.18

package/dist/index.cjs.js

@@ -7013,7 +7013,157 @@ var ModalContent = react.ModalContent;
 
 var ModalHeader = react.ModalHeader;
 
-var ModalBody = react.ModalBody;
+var ModalBody = React.forwardRef(function (props, forwardedRef) {
+    var nodeRef = React.useRef(null);
+    var callbackRef = React.useCallback(function (node) {
+        nodeRef.current = node;
+        if (forwardedRef) {
+            if (typeof forwardedRef === "function")
+                forwardedRef(node);
+            else
+                forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
+    React.useEffect(function () {
+        var node = nodeRef.current;
+        if (!node)
+            return;
+        var parent = node.parentElement;
+        if (!parent)
+            return;
+        // Hide native scrollbar
+        node.style.scrollbarWidth = "none";
+        // Parent needs relative positioning for the track
+        var parentPos = window.getComputedStyle(parent).position;
+        if (parentPos === "static") {
+            parent.style.position = "relative";
+        }
+        // Create track — placed on the PARENT so it doesn't scroll
+        var track = document.createElement("div");
+        track.setAttribute("data-auraui-scrollbar", "track");
+        Object.assign(track.style, {
+            position: "absolute",
+            right: "20px",
+            width: "6px",
+            zIndex: "10",
+            cursor: "pointer",
+        });
+        // Create thumb
+        var thumb = document.createElement("div");
+        thumb.setAttribute("data-auraui-scrollbar", "thumb");
+        Object.assign(thumb.style, {
+            width: "6px",
+            borderRadius: "3px",
+            backgroundColor: "rgba(255,255,255,0.28)",
+            cursor: "grab",
+        });
+        track.appendChild(thumb);
+        parent.appendChild(track);
+        // --- Scroll position update ---
+        var trackHeight = 0;
+        var thumbH = 0;
+        var update = function () {
+            var scrollTop = node.scrollTop, scrollHeight = node.scrollHeight, clientHeight = node.clientHeight;
+            var hasOverflow = scrollHeight > clientHeight;
+            if (!hasOverflow) {
+                track.style.display = "none";
+                return;
+            }
+            track.style.display = "block";
+            var nodeRect = node.getBoundingClientRect();
+            var parentRect = parent.getBoundingClientRect();
+            var trackTop = nodeRect.top - parentRect.top;
+            trackHeight = nodeRect.height;
+            track.style.top = "".concat(trackTop, "px");
+            track.style.height = "".concat(trackHeight, "px");
+            var ratio = clientHeight / scrollHeight;
+            thumbH = Math.max(ratio * trackHeight, 30);
+            var maxScroll = scrollHeight - clientHeight;
+            var thumbTop = maxScroll > 0
+                ? (scrollTop / maxScroll) * (trackHeight - thumbH)
+                : 0;
+            thumb.style.height = "".concat(thumbH, "px");
+            thumb.style.marginTop = "".concat(thumbTop, "px");
+        };
+        node.addEventListener("scroll", update, { passive: true });
+        var ro = new ResizeObserver(update);
+        ro.observe(node);
+        requestAnimationFrame(update);
+        // --- Drag support ---
+        var isDragging = false;
+        var startY = 0;
+        var startScrollTop = 0;
+        var getIsDark = function () {
+            return document.documentElement.classList.contains("dark") ||
+                document.documentElement.getAttribute("data-theme") === "dark" ||
+                document.body.classList.contains("dark");
+        };
+        var onMouseDown = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            isDragging = true;
+            startY = e.clientY;
+            startScrollTop = node.scrollTop;
+            thumb.style.cursor = "grabbing";
+            thumb.style.backgroundColor = getIsDark()
+                ? "rgba(255,255,255,0.45)"
+                : "rgba(0,0,0,0.55)";
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        };
+        var onMouseMove = function (e) {
+            if (!isDragging)
+                return;
+            e.preventDefault();
+            var deltaY = e.clientY - startY;
+            var maxScroll = node.scrollHeight - node.clientHeight;
+            var scrollDelta = (deltaY / (trackHeight - thumbH)) * maxScroll;
+            node.scrollTop = startScrollTop + scrollDelta;
+        };
+        var onMouseUp = function () {
+            isDragging = false;
+            thumb.style.cursor = "grab";
+            detectTheme(); // Reset thumb color
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        // Click on track to jump
+        var onTrackClick = function (e) {
+            if (e.target === thumb)
+                return;
+            var trackRect = track.getBoundingClientRect();
+            var clickRatio = (e.clientY - trackRect.top) / trackHeight;
+            node.scrollTop =
+                clickRatio * (node.scrollHeight - node.clientHeight);
+        };
+        thumb.addEventListener("mousedown", onMouseDown);
+        track.addEventListener("click", onTrackClick);
+        // --- Theme detection ---
+        var detectTheme = function () {
+            if (isDragging)
+                return;
+            thumb.style.backgroundColor = getIsDark()
+                ? "rgba(255,255,255,0.28)"
+                : "rgba(0,0,0,0.4)";
+        };
+        detectTheme();
+        var mo = new MutationObserver(detectTheme);
+        mo.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class", "data-theme", "style"],
+        });
+        return function () {
+            node.removeEventListener("scroll", update);
+            ro.disconnect();
+            mo.disconnect();
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            track.remove();
+        };
+    }, []);
+    return (jsxRuntime.jsx(react.ModalBody, __assign({ ref: callbackRef }, props)));
+});
+ModalBody.displayName = "ModalBody";
 
 var ModalFooter = react.ModalFooter;
 

package/dist/index.esm.js

@@ -7014,7 +7014,157 @@ var ModalContent = ModalContent$1;
 
 var ModalHeader = ModalHeader$1;
 
-var ModalBody = ModalBody$1;
+var ModalBody = forwardRef(function (props, forwardedRef) {
+    var nodeRef = useRef(null);
+    var callbackRef = useCallback(function (node) {
+        nodeRef.current = node;
+        if (forwardedRef) {
+            if (typeof forwardedRef === "function")
+                forwardedRef(node);
+            else
+                forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
+    useEffect(function () {
+        var node = nodeRef.current;
+        if (!node)
+            return;
+        var parent = node.parentElement;
+        if (!parent)
+            return;
+        // Hide native scrollbar
+        node.style.scrollbarWidth = "none";
+        // Parent needs relative positioning for the track
+        var parentPos = window.getComputedStyle(parent).position;
+        if (parentPos === "static") {
+            parent.style.position = "relative";
+        }
+        // Create track — placed on the PARENT so it doesn't scroll
+        var track = document.createElement("div");
+        track.setAttribute("data-auraui-scrollbar", "track");
+        Object.assign(track.style, {
+            position: "absolute",
+            right: "20px",
+            width: "6px",
+            zIndex: "10",
+            cursor: "pointer",
+        });
+        // Create thumb
+        var thumb = document.createElement("div");
+        thumb.setAttribute("data-auraui-scrollbar", "thumb");
+        Object.assign(thumb.style, {
+            width: "6px",
+            borderRadius: "3px",
+            backgroundColor: "rgba(255,255,255,0.28)",
+            cursor: "grab",
+        });
+        track.appendChild(thumb);
+        parent.appendChild(track);
+        // --- Scroll position update ---
+        var trackHeight = 0;
+        var thumbH = 0;
+        var update = function () {
+            var scrollTop = node.scrollTop, scrollHeight = node.scrollHeight, clientHeight = node.clientHeight;
+            var hasOverflow = scrollHeight > clientHeight;
+            if (!hasOverflow) {
+                track.style.display = "none";
+                return;
+            }
+            track.style.display = "block";
+            var nodeRect = node.getBoundingClientRect();
+            var parentRect = parent.getBoundingClientRect();
+            var trackTop = nodeRect.top - parentRect.top;
+            trackHeight = nodeRect.height;
+            track.style.top = "".concat(trackTop, "px");
+            track.style.height = "".concat(trackHeight, "px");
+            var ratio = clientHeight / scrollHeight;
+            thumbH = Math.max(ratio * trackHeight, 30);
+            var maxScroll = scrollHeight - clientHeight;
+            var thumbTop = maxScroll > 0
+                ? (scrollTop / maxScroll) * (trackHeight - thumbH)
+                : 0;
+            thumb.style.height = "".concat(thumbH, "px");
+            thumb.style.marginTop = "".concat(thumbTop, "px");
+        };
+        node.addEventListener("scroll", update, { passive: true });
+        var ro = new ResizeObserver(update);
+        ro.observe(node);
+        requestAnimationFrame(update);
+        // --- Drag support ---
+        var isDragging = false;
+        var startY = 0;
+        var startScrollTop = 0;
+        var getIsDark = function () {
+            return document.documentElement.classList.contains("dark") ||
+                document.documentElement.getAttribute("data-theme") === "dark" ||
+                document.body.classList.contains("dark");
+        };
+        var onMouseDown = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            isDragging = true;
+            startY = e.clientY;
+            startScrollTop = node.scrollTop;
+            thumb.style.cursor = "grabbing";
+            thumb.style.backgroundColor = getIsDark()
+                ? "rgba(255,255,255,0.45)"
+                : "rgba(0,0,0,0.55)";
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        };
+        var onMouseMove = function (e) {
+            if (!isDragging)
+                return;
+            e.preventDefault();
+            var deltaY = e.clientY - startY;
+            var maxScroll = node.scrollHeight - node.clientHeight;
+            var scrollDelta = (deltaY / (trackHeight - thumbH)) * maxScroll;
+            node.scrollTop = startScrollTop + scrollDelta;
+        };
+        var onMouseUp = function () {
+            isDragging = false;
+            thumb.style.cursor = "grab";
+            detectTheme(); // Reset thumb color
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        // Click on track to jump
+        var onTrackClick = function (e) {
+            if (e.target === thumb)
+                return;
+            var trackRect = track.getBoundingClientRect();
+            var clickRatio = (e.clientY - trackRect.top) / trackHeight;
+            node.scrollTop =
+                clickRatio * (node.scrollHeight - node.clientHeight);
+        };
+        thumb.addEventListener("mousedown", onMouseDown);
+        track.addEventListener("click", onTrackClick);
+        // --- Theme detection ---
+        var detectTheme = function () {
+            if (isDragging)
+                return;
+            thumb.style.backgroundColor = getIsDark()
+                ? "rgba(255,255,255,0.28)"
+                : "rgba(0,0,0,0.4)";
+        };
+        detectTheme();
+        var mo = new MutationObserver(detectTheme);
+        mo.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class", "data-theme", "style"],
+        });
+        return function () {
+            node.removeEventListener("scroll", update);
+            ro.disconnect();
+            mo.disconnect();
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            track.remove();
+        };
+    }, []);
+    return (jsx(ModalBody$1, __assign({ ref: callbackRef }, props)));
+});
+ModalBody.displayName = "ModalBody";
 
 var ModalFooter = ModalFooter$1;
 

package/dist/types/components/modal/_internal/ModalBody.d.ts

@@ -1,3 +1,7 @@
-declare const ModalBody: import("@heroui/react").InternalForwardRefRenderFunction<"div", import("@heroui/react").ModalBodyProps, never>;
+declare const ModalBody: import("react").ForwardRefExoticComponent<((import("@heroui/react").OmitCommonProps<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof import("@heroui/react").ModalBodyProps> & import("@heroui/react").ModalBodyProps & {
+    as?: import("@heroui/react").As<any> | undefined;
+}) | Omit<import("@heroui/react").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/react").ModalBodyProps> & import("@heroui/react").ModalBodyProps & {
+    as?: import("@heroui/react").As<any> | undefined;
+}, "ref">) & import("react").RefAttributes<HTMLElement>>;
 export default ModalBody;
 //# sourceMappingURL=ModalBody.d.ts.map

package/dist/types/components/modal/_internal/ModalBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/_internal/ModalBody.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,SAAS,gHAAkB,CAAC;AAElC,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/modal/_internal/ModalBody.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,SAAS;;;;wDAqLd,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "0.6.16",
+	"version": "0.6.18",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",
@@ -34,7 +34,9 @@
 		"format": "biome format --write",
 		"storybook": "storybook dev --port 6006",
 		"chromatic": "npx chromatic --project-token=chpt_a33f7fd2ebb3349",
-		"prepare": "husky"
+		"prepare": "husky",
+		"publish:with-env": "dotenv -e .env -- npm publish --access public",
+		"npm:whoami": "dotenv -e .env -- npm whoami"
 	},
 	"dependencies": {
 		"@heroui/react": "2.7.11",
@@ -59,6 +61,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
+		"@internationalized/date": "^3.8.2",
 		"@rollup/plugin-commonjs": "^28.0.6",
 		"@rollup/plugin-node-resolve": "^16.0.1",
 		"@rollup/plugin-typescript": "^12.1.4",
@@ -75,6 +78,7 @@
 		"@types/react-dom": "^19.1.5",
 		"autoprefixer": "^10.4.21",
 		"chromatic": "^13.0.0",
+		"dotenv-cli": "^8.0.0",
 		"husky": "^9.1.7",
 		"postcss": "^8.5.5",
 		"postcss-loader": "^8.1.1",
@@ -87,8 +91,7 @@
 		"sass": "^1.89.2",
 		"storybook": "^8.0.0",
 		"tailwindcss": "3.4.17",
-		"typescript": "^5.8.3",
-		"@internationalized/date": "^3.8.2"
+		"typescript": "^5.8.3"
 	},
 	"type": "module"
 }