@vnejs/uis.react.scrollbar 0.1.2

package/dist/Scrollbar.d.ts

@@ -0,0 +1,14 @@
+import "./Scrollbar.styl";
+export declare const Scrollbar: ({ className, children, width, height, scrollTo, scrollToEnd, hideScrolbars, disableScroll, wrapRef, textSize, }: {
+    className?: string;
+    children: any;
+    width?: number;
+    height?: number;
+    scrollTo?: number;
+    scrollToEnd?: boolean;
+    hideScrolbars?: boolean;
+    disableScroll?: boolean;
+    wrapRef?: any;
+    textSize?: any;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Scrollbar.d.ts.map

package/dist/Scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"AASA,OAAO,kBAAkB,CAAC;AAa1B,eAAO,MAAM,SAAS,GAAI;;;;;;;;;;;CAWzB,4CA2DA,CAAC"}

package/dist/Scrollbar.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { cn, getVneLength } from "@vnejs/uis.utils";
+import { useThumbHook } from "./hooks/thumb.hook";
+import { useScrollHook } from "./hooks/scroll.hook";
+import { useScrollToHook } from "./hooks/scroll-to.hook";
+import { useRefForScrollHook } from "./hooks/ref.hook";
+import "./Scrollbar.styl";
+const b = cn("Scrollbar");
+const renderScroll = (thumbRef, isVisible, isHorizontal, isVertical) => (_jsx("div", { className: b("scroll", { isVisible, isHorizontal, isVertical }), children: _jsx("div", { className: b("thumb", { isHorizontal, isVertical }), ref: thumbRef }) }));
+export const Scrollbar = ({ className = "", children, width = 0, height = 0, scrollTo = 0, scrollToEnd = false, hideScrolbars = false, disableScroll = false, wrapRef = null, textSize = null, }) => {
+    const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef } = useRefForScrollHook();
+    const { shouldRenderHorizontal, shouldRenderVertical } = useScrollHook(scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize);
+    useThumbHook(scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef);
+    useScrollToHook(scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef);
+    const style = useMemo(() => {
+        const result = {};
+        if (width)
+            result.width = getVneLength(width);
+        if (height)
+            result.height = getVneLength(height);
+        return result;
+    }, [width, height]);
+    const styleWrap = useMemo(() => {
+        const result = {};
+        if (disableScroll) {
+            result.overflowX = "hidden";
+            result.overflowY = "hidden";
+        }
+        else {
+            if (shouldRenderHorizontal)
+                result.overflowX = "auto";
+            if (shouldRenderVertical)
+                result.overflowY = "auto";
+        }
+        if (width)
+            result.maxWidth = getVneLength(width);
+        if (height)
+            result.maxHeight = getVneLength(height);
+        return result;
+    }, [width, height, scrollbarWrapRef.current, shouldRenderHorizontal, shouldRenderVertical, disableScroll]);
+    useEffect(() => {
+        if (wrapRef)
+            wrapRef.current = scrollbarWrapRef.current;
+    }, [wrapRef, scrollbarWrapRef.current]);
+    return (_jsxs("div", { className: b({}, [className]), style: style, children: [!hideScrolbars && renderScroll(thumbHorizontalRef, shouldRenderHorizontal, true, false), !hideScrolbars && renderScroll(thumbVerticalRef, shouldRenderVertical, false, true), _jsx("div", { className: b("wrap"), ref: scrollbarWrapRef, style: styleWrap, children: _jsx("div", { className: b("children"), ref: scrollbarChildrenRef, children: children }) })] }));
+};
+//# sourceMappingURL=Scrollbar.js.map

package/dist/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"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"}

package/dist/Scrollbar.styl

@@ -0,0 +1,55 @@
+.Scrollbar
+  --vne-scrollbar-color-vertical: var(--vne-color-disabled, rgba(255, 255, 255, 30%))
+  --vne-scrollbar-color-horizontal: var(--vne-color-disabled, rgba(255, 255, 255, 30%))
+  --vne-scrollbar-color-thumb: var(--vne-color-selected, rgba(255, 255, 255, 75%)) 
+
+  display: block
+  position: relative
+
+  &-wrap
+    scrollbar-width: none
+
+  &-scroll
+    position: absolute
+
+    transition: 1000ms
+
+    border-radius: s('round(down, min(calc(8 * 100vw / 3840), calc(8 * 100vh / 2160)), 1px)')
+    opacity: 0
+
+  &-thumb
+    position: absolute
+
+    background: var(--vne-scrollbar-color-thumb)
+    border-radius: s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)')
+
+  &-scroll_isVertical
+    right: s('round(down, min(calc(-24 * 100vw / 3840), calc(-24 * 100vh / 2160)), 1px)')
+    top: 0;
+    bottom: s('round(down, min(calc(36 * 100vw / 3840), calc(36 * 100vh / 2160)), 1px)')
+
+    width: s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)')
+
+    background: var(--vne-scrollbar-color-vertical)
+
+  &-thumb_isVertical
+    right: s('round(down, min(calc(-6 * 100vw / 3840), calc(-6 * 100vh / 2160)), 1px)')
+    width: s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)')
+    height: s('round(down, min(calc(96 * 100vw / 3840), calc(96 * 100vh / 2160)), 1px)')
+
+  &-scroll_isHorizontal
+    bottom: s('round(down, min(calc(-24 * 100vw / 3840), calc(-24 * 100vh / 2160)), 1px)')
+    left: 0;
+    right: s('round(down, min(calc(36 * 100vw / 3840), calc(36 * 100vh / 2160)), 1px)')
+
+    height: s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)')
+
+    background: var(--vne-scrollbar-color-horizontal)
+
+  &-thumb_isHorizontal
+    top: s('round(down, min(calc(-6 * 100vw / 3840), calc(-6 * 100vh / 2160)), 1px)')
+    width: s('round(down, min(calc(96 * 100vw / 3840), calc(96 * 100vh / 2160)), 1px)')
+    height: s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)')
+
+  &-scroll_isVisible
+    opacity: 1

package/dist/hooks/ref.hook.d.ts

@@ -0,0 +1,7 @@
+export declare const useRefForScrollHook: () => {
+    scrollbarWrapRef: import("react").RefObject<any>;
+    scrollbarChildrenRef: import("react").RefObject<any>;
+    thumbVerticalRef: import("react").RefObject<any>;
+    thumbHorizontalRef: import("react").RefObject<any>;
+};
+//# sourceMappingURL=ref.hook.d.ts.map

package/dist/hooks/ref.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ref.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB;;;;;CAQ/B,CAAC"}

package/dist/hooks/ref.hook.js

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+export const useRefForScrollHook = () => {
+    const scrollbarWrapRef = useRef(null);
+    const scrollbarChildrenRef = useRef(null);
+    const thumbVerticalRef = useRef(null);
+    const thumbHorizontalRef = useRef(null);
+    return { scrollbarWrapRef, scrollbarChildrenRef, thumbVerticalRef, thumbHorizontalRef };
+};
+//# sourceMappingURL=ref.hook.js.map

package/dist/hooks/ref.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ref.hook.js","sourceRoot":"","sources":["../../src/hooks/ref.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE1C,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAExC,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC;AAC1F,CAAC,CAAC"}

package/dist/hooks/scroll-to.hook.d.ts

@@ -0,0 +1,2 @@
+export declare const useScrollToHook: (scrollTo: any, scrollToEnd: any, scrollbarWrapRef: any, scrollbarChildrenRef: any) => void;
+//# sourceMappingURL=scroll-to.hook.d.ts.map

package/dist/hooks/scroll-to.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-to.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/scroll-to.hook.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,GAAI,aAAQ,EAAE,gBAAW,EAAE,qBAAgB,EAAE,yBAAoB,SA+B5F,CAAC"}

package/dist/hooks/scroll-to.hook.js

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+export const useScrollToHook = (scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef) => {
+    useEffect(() => {
+        if (!scrollTo)
+            return;
+        const children = [...scrollbarChildrenRef.current.children];
+        if (children[scrollTo]) {
+            const element = children[scrollTo];
+            if (scrollbarWrapRef.current.scrollTop > element.offsetTop ||
+                scrollbarWrapRef.current.scrollTop + scrollbarWrapRef.current.clientHeight < element.offsetTop + element.clientHeight ||
+                scrollbarWrapRef.current.scrollLeft > element.offsetleft ||
+                scrollbarWrapRef.current.scrollleft + scrollbarWrapRef.current.clientWidth < element.offsetleft + element.clientWidth)
+                element.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [scrollTo, scrollbarWrapRef.current]);
+    useEffect(() => {
+        if (!scrollToEnd)
+            return;
+        const scrollToBottom = () => scrollbarChildrenRef?.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+        const resizeObserver = new ResizeObserver(() => {
+            setTimeout(scrollToBottom, 100);
+        });
+        resizeObserver.observe(scrollbarChildrenRef.current);
+        return () => resizeObserver.disconnect();
+    }, [scrollToEnd, scrollbarWrapRef.current]);
+};
+//# sourceMappingURL=scroll-to.hook.js.map

package/dist/hooks/scroll-to.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-to.hook.js","sourceRoot":"","sources":["../../src/hooks/scroll-to.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,EAAE;IAC/F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,QAAQ,GAAG,CAAC,GAAG,oBAAoB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAE5D,IAAI,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAEnC,IACE,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS;gBACtD,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY;gBACrH,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU;gBACxD,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,WAAW;gBAErH,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,oBAAoB,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAEjH,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,UAAU,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAErD,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC"}

package/dist/hooks/scroll.hook.d.ts

@@ -0,0 +1,5 @@
+export declare const useScrollHook: (scrollbarWrapRef: any, scrollbarChildrenRef: any, width: any, height: any, textSize: any) => {
+    shouldRenderHorizontal: boolean;
+    shouldRenderVertical: boolean;
+};
+//# sourceMappingURL=scroll.hook.d.ts.map

package/dist/hooks/scroll.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/scroll.hook.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,GAAI,qBAAgB,EAAE,yBAAoB,EAAE,UAAK,EAAE,WAAM,EAAE,aAAQ;;;CAsD5F,CAAC"}

package/dist/hooks/scroll.hook.js

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from "react";
+export const useScrollHook = (scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize) => {
+    const [shouldRenderHorizontal, setShouldRenderHorizontal] = useState(false);
+    const [shouldRenderVertical, setShouldRenderVertical] = useState(false);
+    const calcShouldRenderVertical = useCallback(() => {
+        const raf = requestAnimationFrame(() => scrollbarWrapRef.current && setShouldRenderVertical(scrollbarWrapRef.current.scrollHeight !== scrollbarWrapRef.current.clientHeight));
+        return () => cancelAnimationFrame(raf);
+    }, [scrollbarWrapRef.current, setShouldRenderVertical, textSize]);
+    const calcShouldRenderHorizontal = useCallback(() => {
+        const raf = requestAnimationFrame(() => scrollbarWrapRef.current && setShouldRenderHorizontal(scrollbarWrapRef.current.scrollWidth > scrollbarWrapRef.current.clientWidth));
+        return () => cancelAnimationFrame(raf);
+    }, [scrollbarWrapRef.current, setShouldRenderHorizontal, textSize]);
+    useEffect(calcShouldRenderVertical, [height, calcShouldRenderVertical, textSize]);
+    useEffect(calcShouldRenderHorizontal, [width, calcShouldRenderHorizontal, textSize]);
+    useEffect(() => {
+        if (!scrollbarWrapRef.current)
+            return;
+        const observer = new ResizeObserver(() => {
+            if (!scrollbarWrapRef.current)
+                return;
+            let [oldHeight, oldWidth] = [scrollbarWrapRef.current.scrollHeight, scrollbarWrapRef.current.scrollWidth];
+            const rerender = () => {
+                calcShouldRenderVertical();
+                calcShouldRenderHorizontal();
+                if (!scrollbarWrapRef.current)
+                    return;
+                if (oldHeight !== scrollbarWrapRef.current.scrollHeight || oldWidth !== scrollbarWrapRef.current.scrollWidth) {
+                    oldHeight = scrollbarWrapRef.current.scrollHeight;
+                    oldWidth = scrollbarWrapRef.current.scrollWidth;
+                    setTimeout(rerender, 50);
+                }
+            };
+            setTimeout(rerender, 50);
+        });
+        observer.observe(scrollbarChildrenRef.current);
+        return () => observer.disconnect();
+    }, [scrollbarWrapRef.current, scrollbarChildrenRef.current, calcShouldRenderVertical, calcShouldRenderHorizontal, textSize]);
+    return { shouldRenderHorizontal, shouldRenderVertical };
+};
+//# sourceMappingURL=scroll.hook.js.map

package/dist/hooks/scroll.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.hook.js","sourceRoot":"","sources":["../../src/hooks/scroll.hook.ts"],"names":[],"mappings":"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"}

package/dist/hooks/thumb.hook.d.ts

@@ -0,0 +1,2 @@
+export declare const useThumbHook: (scrollbarWrapRef: any, thumbVerticalRef: any, thumbHorizontalRef: any) => void;
+//# sourceMappingURL=thumb.hook.d.ts.map

package/dist/hooks/thumb.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumb.hook.d.ts","sourceRoot":"","sources":["../../src/hooks/thumb.hook.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,GAAI,qBAAgB,EAAE,qBAAgB,EAAE,uBAAkB,SAwBlF,CAAC"}

package/dist/hooks/thumb.hook.js

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+const getPosition = (scrollPosition, thumbSize) => `calc(${100 * scrollPosition}% - ${scrollPosition * thumbSize}px)`;
+export const useThumbHook = (scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef) => {
+    useEffect(() => {
+        const handleScroll = () => {
+            if (!scrollbarWrapRef.current)
+                return;
+            if (thumbHorizontalRef.current) {
+                const maxScroll = scrollbarWrapRef.current.scrollWidth - scrollbarWrapRef.current.clientWidth;
+                thumbHorizontalRef.current.style.left = getPosition(scrollbarWrapRef.current.scrollLeft / maxScroll, thumbVerticalRef.current.clientWidth);
+            }
+            if (thumbVerticalRef.current) {
+                const maxScroll = scrollbarWrapRef.current.scrollHeight - scrollbarWrapRef.current.clientHeight;
+                thumbVerticalRef.current.style.top = getPosition(scrollbarWrapRef.current.scrollTop / maxScroll, thumbVerticalRef.current.clientHeight);
+            }
+        };
+        const ref = scrollbarWrapRef.current;
+        ref.addEventListener("scroll", handleScroll);
+        handleScroll();
+        return () => ref.removeEventListener("scroll", handleScroll);
+    }, [scrollbarWrapRef.current, thumbHorizontalRef.current, thumbVerticalRef.current]);
+};
+//# sourceMappingURL=thumb.hook.js.map

package/dist/hooks/thumb.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumb.hook.js","sourceRoot":"","sources":["../../src/hooks/thumb.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,GAAG,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,GAAG,GAAG,cAAc,OAAO,cAAc,GAAG,SAAS,KAAK,CAAC;AAEtH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,EAAE;IACrF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,gBAAgB,CAAC,OAAO;gBAAE,OAAO;YACtC,IAAI,kBAAkB,CAAC,OAAO,EAAE,CAAC;gBAC/B,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;gBAE9F,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,UAAU,GAAG,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAC7I,CAAC;YACD,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;gBAC7B,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC;gBAEhG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YAC1I,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,GAAG,GAAG,gBAAgB,CAAC,OAAO,CAAC;QAErC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAE7C,YAAY,EAAE,CAAC;QAEf,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AACvF,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Scrollbar";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./Scrollbar";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@vnejs/uis.react.scrollbar",
+  "version": "0.1.2",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "node ../../scripts/build-package.mjs",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
+    "publish:major": "npm run build && npm version major && npm publish --access public",
+    "publish:minor": "npm run build && npm version minor && npm publish --access public",
+    "publish:patch": "npm run build && npm version patch && npm publish --access public"
+  },
+  "peerDependencies": {
+    "@bem-react/classname": "1.5.12",
+    "@vnejs/uis.utils": "~0.1.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@vnejs/uis.react": "~0.1.0",
+    "typescript": "^5.7.3",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4"
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ]
+}