scroll-to-future 1.0.0

package/dist/index.css

@@ -0,0 +1,78 @@
+/* src/css/scroll.css */
+.scroll-to-future__overlay {
+  position: fixed;
+  pointer-events: none;
+  z-index: 10;
+}
+
+/* src/css/axis.css */
+.scroll-to-future__track {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: var(--scrollbar-backgroundColor, "transparent");
+  transition: var(--scrollbar-transition, "none");
+  border-radius: var(--scrollbar-borderRadius, "8px");
+  opacity: var(--scrollbar-opacity, 1);
+  border: var(--scrollbar-border, "none");
+  box-shadow: var(--scrollbar-boxShadow, "none");
+  transform: var(--scrollbar-transform, "none");
+  touch-action: none;
+  user-select: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  .scroll-to-future__track:hover {
+    background-color: var( --scrollbar-hover-backgroundColor, var(--scrollbar-backgroundColor) );
+    transition: var( --scrollbar-hover-transition, var(--scrollbar-transition) );
+    border-radius: var( --scrollbar-hover-borderRadius, var(--scrollbar-borderRadius) );
+    opacity: var(--scrollbar-hover-opacity, var(--scrollbar-opacity));
+    border: var(--scrollbar-hover-border, var(--scrollbar-border));
+    box-shadow: var( --scrollbar-hover-boxShadow, var(--scrollbar-boxShadow) );
+    transform: var(--scrollbar-hover-transform, var(--scrollbar-transform));
+  }
+  .scroll-to-future__track:active {
+    background-color: var( --scrollbar-active-backgroundColor, var(--scrollbar-backgroundColor) );
+    transition: var( --scrollbar-active-transition, var(--scrollbar-transition) );
+    border-radius: var( --scrollbar-active-borderRadius, var(--scrollbar-borderRadius) );
+    opacity: var(--scrollbar-active-opacity, var(--scrollbar-opacity));
+    border: var(--scrollbar-active-border, var(--scrollbar-border));
+    box-shadow: var( --scrollbar-active-boxShadow, var(--scrollbar-boxShadow) );
+    transform: var( --scrollbar-active-transform, var(--scrollbar-transform) );
+  }
+}
+.scroll-to-future__thumb {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: var(--thumb-backgroundColor, "transparent");
+  transition: var(--thumb-transition, "none");
+  border-radius: var(--thumb-borderRadius, "8px");
+  opacity: var(--thumb-opacity, 1);
+  border: var(--thumb-border, "none");
+  box-shadow: var(--thumb-boxShadow, "none");
+  transform: var(--thumb-transform, "none");
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  .scroll-to-future__thumb:hover {
+    background-color: var( --thumb-hover-backgroundColor, var(--thumb-backgroundColor) );
+    transition: var(--thumb-hover-transition, var(--thumb-transition));
+    border-radius: var( --thumb-hover-borderRadius, var(--thumb-borderRadius) );
+    opacity: var(--thumb-hover-opacity, var(--thumb-opacity));
+    border: var(--thumb-hover-border, var(--thumb-border));
+    box-shadow: var(--thumb-hover-boxShadow, var(--thumb-boxShadow));
+    transform: var(--thumb-hover-transform, var(--thumb-transform));
+  }
+  .scroll-to-future__thumb:active {
+    background-color: var( --thumb-active-backgroundColor, var(--thumb-backgroundColor) );
+    transition: var(--thumb-active-transition, var(--thumb-transition));
+    border-radius: var( --thumb-active-borderRadius, var(--thumb-borderRadius) );
+    opacity: var(--thumb-active-opacity, var(--thumb-opacity));
+    border: var(--thumb-active-border, var(--thumb-border));
+    box-shadow: var(--thumb-active-boxShadow, var(--thumb-boxShadow));
+    transform: var(--thumb-active-transform, var(--thumb-transform));
+  }
+}
+
+/* src/css/index.css */
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/css/scroll.css","../src/css/axis.css"],"sourcesContent":[".scroll-to-future__overlay {\r\n    position: fixed;\r\n    pointer-events: none;\r\n    z-index: 10;\r\n}\r\n",".scroll-to-future__track {\r\n    position: absolute;\r\n    box-sizing: border-box;\r\n    background-color: var(--scrollbar-backgroundColor, \"transparent\");\r\n    transition: var(--scrollbar-transition, \"none\");\r\n    border-radius: var(--scrollbar-borderRadius, \"8px\");\r\n    opacity: var(--scrollbar-opacity, 1);\r\n    border: var(--scrollbar-border, \"none\");\r\n    box-shadow: var(--scrollbar-boxShadow, \"none\");\r\n    transform: var(--scrollbar-transform, \"none\");\r\n\r\n    touch-action: none;\r\n    user-select: none;\r\n}\r\n\r\n@media (hover: hover) and (pointer: fine) {\r\n    .scroll-to-future__track:hover {\r\n        background-color: var(\r\n            --scrollbar-hover-backgroundColor,\r\n            var(--scrollbar-backgroundColor)\r\n        );\r\n        transition: var(\r\n            --scrollbar-hover-transition,\r\n            var(--scrollbar-transition)\r\n        );\r\n        border-radius: var(\r\n            --scrollbar-hover-borderRadius,\r\n            var(--scrollbar-borderRadius)\r\n        );\r\n        opacity: var(--scrollbar-hover-opacity, var(--scrollbar-opacity));\r\n        border: var(--scrollbar-hover-border, var(--scrollbar-border));\r\n        box-shadow: var(\r\n            --scrollbar-hover-boxShadow,\r\n            var(--scrollbar-boxShadow)\r\n        );\r\n        transform: var(--scrollbar-hover-transform, var(--scrollbar-transform));\r\n    }\r\n    .scroll-to-future__track:active {\r\n        background-color: var(\r\n            --scrollbar-active-backgroundColor,\r\n            var(--scrollbar-backgroundColor)\r\n        );\r\n        transition: var(\r\n            --scrollbar-active-transition,\r\n            var(--scrollbar-transition)\r\n        );\r\n        border-radius: var(\r\n            --scrollbar-active-borderRadius,\r\n            var(--scrollbar-borderRadius)\r\n        );\r\n        opacity: var(--scrollbar-active-opacity, var(--scrollbar-opacity));\r\n        border: var(--scrollbar-active-border, var(--scrollbar-border));\r\n        box-shadow: var(\r\n            --scrollbar-active-boxShadow,\r\n            var(--scrollbar-boxShadow)\r\n        );\r\n        transform: var(\r\n            --scrollbar-active-transform,\r\n            var(--scrollbar-transform)\r\n        );\r\n    }\r\n}\r\n\r\n.scroll-to-future__thumb {\r\n    position: absolute;\r\n    box-sizing: border-box;\r\n    background-color: var(--thumb-backgroundColor, \"transparent\");\r\n    transition: var(--thumb-transition, \"none\");\r\n    border-radius: var(--thumb-borderRadius, \"8px\");\r\n    opacity: var(--thumb-opacity, 1);\r\n    border: var(--thumb-border, \"none\");\r\n    box-shadow: var(--thumb-boxShadow, \"none\");\r\n    transform: var(--thumb-transform, \"none\");\r\n    cursor: pointer;\r\n    touch-action: none;\r\n    user-select: none;\r\n}\r\n\r\n@media (hover: hover) and (pointer: fine) {\r\n    .scroll-to-future__thumb:hover {\r\n        background-color: var(\r\n            --thumb-hover-backgroundColor,\r\n            var(--thumb-backgroundColor)\r\n        );\r\n        transition: var(--thumb-hover-transition, var(--thumb-transition));\r\n        border-radius: var(\r\n            --thumb-hover-borderRadius,\r\n            var(--thumb-borderRadius)\r\n        );\r\n        opacity: var(--thumb-hover-opacity, var(--thumb-opacity));\r\n        border: var(--thumb-hover-border, var(--thumb-border));\r\n        box-shadow: var(--thumb-hover-boxShadow, var(--thumb-boxShadow));\r\n        transform: var(--thumb-hover-transform, var(--thumb-transform));\r\n    }\r\n    .scroll-to-future__thumb:active {\r\n        background-color: var(\r\n            --thumb-active-backgroundColor,\r\n            var(--thumb-backgroundColor)\r\n        );\r\n        transition: var(--thumb-active-transition, var(--thumb-transition));\r\n        border-radius: var(\r\n            --thumb-active-borderRadius,\r\n            var(--thumb-borderRadius)\r\n        );\r\n        opacity: var(--thumb-active-opacity, var(--thumb-opacity));\r\n        border: var(--thumb-active-border, var(--thumb-border));\r\n        box-shadow: var(--thumb-active-boxShadow, var(--thumb-boxShadow));\r\n        transform: var(--thumb-active-transform, var(--thumb-transform));\r\n    }\r\n}\r\n"],"mappings":";AAAA,CAAC;AACG,YAAU;AACV,kBAAgB;AAChB,WAAS;AACb;;;ACJA,CAAC;AACG,YAAU;AACV,cAAY;AACZ,oBAAkB,IAAI,2BAA2B,EAAE;AACnD,cAAY,IAAI,sBAAsB,EAAE;AACxC,iBAAe,IAAI,wBAAwB,EAAE;AAC7C,WAAS,IAAI,mBAAmB,EAAE;AAClC,UAAQ,IAAI,kBAAkB,EAAE;AAChC,cAAY,IAAI,qBAAqB,EAAE;AACvC,aAAW,IAAI,qBAAqB,EAAE;AAEtC,gBAAc;AACd,eAAa;AACjB;AAEA,QAAO,OAAQ,YAAW,SAAU;AAChC,GAhBH,uBAgB2B;AACpB,sBAAkB,KACd,iCAAiC,EACjC,IAAI;AAER,gBAAY,KACR,4BAA4B,EAC5B,IAAI;AAER,mBAAe,KACX,8BAA8B,EAC9B,IAAI;AAER,aAAS,IAAI,yBAAyB,EAAE,IAAI;AAC5C,YAAQ,IAAI,wBAAwB,EAAE,IAAI;AAC1C,gBAAY,KACR,2BAA2B,EAC3B,IAAI;AAER,eAAW,IAAI,2BAA2B,EAAE,IAAI;AACpD;AACA,GArCH,uBAqC2B;AACpB,sBAAkB,KACd,kCAAkC,EAClC,IAAI;AAER,gBAAY,KACR,6BAA6B,EAC7B,IAAI;AAER,mBAAe,KACX,+BAA+B,EAC/B,IAAI;AAER,aAAS,IAAI,0BAA0B,EAAE,IAAI;AAC7C,YAAQ,IAAI,yBAAyB,EAAE,IAAI;AAC3C,gBAAY,KACR,4BAA4B,EAC5B,IAAI;AAER,eAAW,KACP,4BAA4B,EAC5B,IAAI;AAEZ;AACJ;AAEA,CAAC;AACG,YAAU;AACV,cAAY;AACZ,oBAAkB,IAAI,uBAAuB,EAAE;AAC/C,cAAY,IAAI,kBAAkB,EAAE;AACpC,iBAAe,IAAI,oBAAoB,EAAE;AACzC,WAAS,IAAI,eAAe,EAAE;AAC9B,UAAQ,IAAI,cAAc,EAAE;AAC5B,cAAY,IAAI,iBAAiB,EAAE;AACnC,aAAW,IAAI,iBAAiB,EAAE;AAClC,UAAQ;AACR,gBAAc;AACd,eAAa;AACjB;AAEA,QAAO,OAAQ,YAAW,SAAU;AAChC,GAhBH,uBAgB2B;AACpB,sBAAkB,KACd,6BAA6B,EAC7B,IAAI;AAER,gBAAY,IAAI,wBAAwB,EAAE,IAAI;AAC9C,mBAAe,KACX,0BAA0B,EAC1B,IAAI;AAER,aAAS,IAAI,qBAAqB,EAAE,IAAI;AACxC,YAAQ,IAAI,oBAAoB,EAAE,IAAI;AACtC,gBAAY,IAAI,uBAAuB,EAAE,IAAI;AAC7C,eAAW,IAAI,uBAAuB,EAAE,IAAI;AAChD;AACA,GA/BH,uBA+B2B;AACpB,sBAAkB,KACd,8BAA8B,EAC9B,IAAI;AAER,gBAAY,IAAI,yBAAyB,EAAE,IAAI;AAC/C,mBAAe,KACX,2BAA2B,EAC3B,IAAI;AAER,aAAS,IAAI,sBAAsB,EAAE,IAAI;AACzC,YAAQ,IAAI,qBAAqB,EAAE,IAAI;AACvC,gBAAY,IAAI,wBAAwB,EAAE,IAAI;AAC9C,eAAW,IAAI,wBAAwB,EAAE,IAAI;AACjD;AACJ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+
+type PxValue = `${number}px`;
+type BoundaryType = PxValue;
+type BoundaryType2 = `${number}px ${number}px`;
+type BoundaryOffset = BoundaryType | BoundaryType2;
+
+type HeightTrackType = BoundaryType | `${number}%` | `${number}dvh` | `${number}dsvh` | `${number}vh`;
+type ScrollBarMode = "horizontal" | "vertical" | "both";
+type PositionMode = "before" | "after";
+type Superimposition = "over" | "after";
+type HideNativeScrollbarMode = false | "fine-pointer" | "always";
+interface ScrollToFutureScrollBar {
+    mode?: ScrollBarMode;
+    hideNativeScrollbar?: HideNativeScrollbarMode;
+    positionMode?: PositionMode;
+    superimposition?: Superimposition;
+    boundaryOffset?: BoundaryOffset;
+    widthTrack?: PxValue;
+    heightTrack?: HeightTrackType;
+}
+
+interface ScrollToFutureThumb {
+    boundaryOffset?: BoundaryOffset;
+    heightTrack?: `${number}%` | PxValue | "auto";
+}
+
+type PresetsThemeType = "primary" | "midnight" | "neonCyan" | "ocean" | "deepSea" | "forest" | "moss" | "lava" | "ember" | "gold" | "roseQuartz" | "violet" | "royal" | "arctic" | "glass" | "graphite" | "terminal" | "toxic" | "candy" | "sand" | "monoLight" | "monoDark";
+
+type StatusElementsTheme = {
+    inactive?: ScrollToFutureGeneralTypes;
+    hover?: ScrollToFutureGeneralTypes;
+    active?: ScrollToFutureGeneralTypes;
+};
+type ScrollToFutureGeneralTypes = {
+    backgroundColor?: string;
+    opacity?: number;
+    border?: string;
+    borderRadius?: string;
+    outline?: string;
+    boxShadow?: string;
+    transition?: string;
+    transform?: string;
+};
+
+type ScrollToFutureThemeProps = {
+    scrollBar?: StatusElementsTheme;
+    thumb?: StatusElementsTheme;
+};
+
+interface ScrollToFutureInterface {
+    target?: React.RefObject<HTMLElement | null> | null;
+    scrollBar?: ScrollToFutureScrollBar;
+    thumb?: ScrollToFutureThumb;
+    selectTheme?: PresetsThemeType;
+    optionsTheme?: ScrollToFutureThemeProps;
+    nativeOnMobile?: boolean;
+}
+type ScrollToFutureConfig = Omit<ScrollToFutureInterface, "target">;
+
+declare const ScrollToFuture: ({ target, scrollBar, thumb, selectTheme, optionsTheme, nativeOnMobile, }: ScrollToFutureInterface) => react.JSX.Element | null;
+
+export { ScrollToFuture, type ScrollToFutureConfig };

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+
+type PxValue = `${number}px`;
+type BoundaryType = PxValue;
+type BoundaryType2 = `${number}px ${number}px`;
+type BoundaryOffset = BoundaryType | BoundaryType2;
+
+type HeightTrackType = BoundaryType | `${number}%` | `${number}dvh` | `${number}dsvh` | `${number}vh`;
+type ScrollBarMode = "horizontal" | "vertical" | "both";
+type PositionMode = "before" | "after";
+type Superimposition = "over" | "after";
+type HideNativeScrollbarMode = false | "fine-pointer" | "always";
+interface ScrollToFutureScrollBar {
+    mode?: ScrollBarMode;
+    hideNativeScrollbar?: HideNativeScrollbarMode;
+    positionMode?: PositionMode;
+    superimposition?: Superimposition;
+    boundaryOffset?: BoundaryOffset;
+    widthTrack?: PxValue;
+    heightTrack?: HeightTrackType;
+}
+
+interface ScrollToFutureThumb {
+    boundaryOffset?: BoundaryOffset;
+    heightTrack?: `${number}%` | PxValue | "auto";
+}
+
+type PresetsThemeType = "primary" | "midnight" | "neonCyan" | "ocean" | "deepSea" | "forest" | "moss" | "lava" | "ember" | "gold" | "roseQuartz" | "violet" | "royal" | "arctic" | "glass" | "graphite" | "terminal" | "toxic" | "candy" | "sand" | "monoLight" | "monoDark";
+
+type StatusElementsTheme = {
+    inactive?: ScrollToFutureGeneralTypes;
+    hover?: ScrollToFutureGeneralTypes;
+    active?: ScrollToFutureGeneralTypes;
+};
+type ScrollToFutureGeneralTypes = {
+    backgroundColor?: string;
+    opacity?: number;
+    border?: string;
+    borderRadius?: string;
+    outline?: string;
+    boxShadow?: string;
+    transition?: string;
+    transform?: string;
+};
+
+type ScrollToFutureThemeProps = {
+    scrollBar?: StatusElementsTheme;
+    thumb?: StatusElementsTheme;
+};
+
+interface ScrollToFutureInterface {
+    target?: React.RefObject<HTMLElement | null> | null;
+    scrollBar?: ScrollToFutureScrollBar;
+    thumb?: ScrollToFutureThumb;
+    selectTheme?: PresetsThemeType;
+    optionsTheme?: ScrollToFutureThemeProps;
+    nativeOnMobile?: boolean;
+}
+type ScrollToFutureConfig = Omit<ScrollToFutureInterface, "target">;
+
+declare const ScrollToFuture: ({ target, scrollBar, thumb, selectTheme, optionsTheme, nativeOnMobile, }: ScrollToFutureInterface) => react.JSX.Element | null;
+
+export { ScrollToFuture, type ScrollToFutureConfig };