@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/public/components/Modal/Modal.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.MODAL_SIZE = void 0;
+exports.Modal = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalHeader = exports.MODAL_SIZE = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Modal_1 = __importDefault(require("react-overlays/Modal"));
@@ -15,6 +15,7 @@ const bem_1 = require("../../utilities/bem");
 const Tab_1 = require("../Tab");
 const Heading_1 = require("../Heading");
 const Overlay_1 = require("../Overlay");
+const context_1 = require("./context");
 const cn = "Modal";
 var MODAL_SIZE;
 (function (MODAL_SIZE) {
@@ -26,6 +27,7 @@ const ModalHeader = (props) => {
     const { className, ...rest } = props;
     return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "header" }), className]) }, rest)));
 };
+exports.ModalHeader = ModalHeader;
 const ModalBody = (props) => {
     const { padded = true, className, ...rest } = props;
     return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([
@@ -50,7 +52,7 @@ const ModalFooterMultiStep = ({ steps, currentStep, leftButtonLabel, rightButton
         react_1.default.createElement(Flex_1.Flex, { className: bem_1.bem(cn, { e: "buttonLabels" }) },
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "buttonLabel", m: "left" }) }, leftButtonLabel),
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "buttonLabel", m: "right" }) }, rightButtonLabel)),
-        react_1.default.createElement(Box_1.Box, { className: "relative" },
+        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "progressDots-container" }) },
             children,
             react_1.default.createElement(Flex_1.Flex, { className: bem_1.bem(cn, { e: "progressDots" }) },
                 react_1.default.createElement(Stack_1.Stack, { spacing: 5 }, [...new Array(steps).keys()].map((dot, index) => (react_1.default.createElement(Box_1.Box, { key: dot, className: classnames_1.default([
@@ -60,30 +62,38 @@ const ModalFooterMultiStep = ({ steps, currentStep, leftButtonLabel, rightButton
                     ]) }))))))));
 };
 exports.ModalFooterMultiStep = ModalFooterMultiStep;
+const ModalCloseButton = ({ className, ...rest }) => {
+    const { onClose } = context_1.useModalContext();
+    return (react_1.default.createElement(CloseButton_1.CloseButton, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "close" }), className), onClick: onClose }, rest)));
+};
+exports.ModalCloseButton = ModalCloseButton;
 const Modal = (props) => {
-    const { title, secondaryTitle, children, isOpen, onClose, autoFocus = true, enableOutsideClick = false, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, disableBackdrop = false, className, style, ...rest } = props;
+    const { title, secondaryTitle, children, isOpen, onClose, autoFocus = true, enableOutsideClick = false, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, disableBackdrop = false, noHeader = false, className, style, ...rest } = props;
     const showHeader = title || secondaryTitle || !hideCloseButton;
-    return (react_1.default.createElement(Modal_1.default, Object.assign({ className: classnames_1.default([
-            bem_1.bem(`${cn}Container`),
-            enableOutsideClick && "pointer-events-none",
-        ]), show: isOpen, onHide: onClose, autoFocus: autoFocus, keyboard: !disableEscClose, renderBackdrop: disableBackdrop ? undefined : (p) => react_1.default.createElement(Overlay_1.Overlay, Object.assign({}, p)) }, rest),
-        react_1.default.createElement(Box_1.Box, { className: classnames_1.default([
-                bem_1.bem(cn),
-                bem_1.bem(cn, { m: size }),
-                center && bem_1.bem(cn, { m: "center" }),
-                enableOutsideClick && "pointer-events-auto",
-                className,
-            ]), style: style },
-            showHeader && (react_1.default.createElement(ModalHeader, null,
-                title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
-                react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
-                    secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
-                    !hideCloseButton && (react_1.default.createElement(CloseButton_1.CloseButton, { className: bem_1.bem(cn, { e: "close" }), onClick: onClose }))))),
-            children)));
+    return (react_1.default.createElement(context_1.ModalContext.Provider, { value: { onClose } },
+        react_1.default.createElement(Modal_1.default, Object.assign({ className: classnames_1.default([
+                bem_1.bem(`${cn}Container`),
+                enableOutsideClick && "pointer-events-none",
+            ]), show: isOpen, onHide: onClose, autoFocus: autoFocus, keyboard: !disableEscClose, renderBackdrop: disableBackdrop ? undefined : (p) => react_1.default.createElement(Overlay_1.Overlay, Object.assign({}, p)) }, rest),
+            react_1.default.createElement(Box_1.Box, { className: classnames_1.default([
+                    bem_1.bem(cn),
+                    bem_1.bem(cn, { m: size }),
+                    center && bem_1.bem(cn, { m: "center" }),
+                    enableOutsideClick && "pointer-events-auto",
+                    className,
+                ]), style: style },
+                !noHeader && showHeader && (react_1.default.createElement(exports.ModalHeader, null,
+                    title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
+                    react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
+                        secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
+                        !hideCloseButton && react_1.default.createElement(exports.ModalCloseButton, null)))),
+                children))));
 };
 exports.Modal = Modal;
 exports.Modal.Root = exports.Modal;
 exports.Modal.Tabs = exports.ModalTabs;
+exports.Modal.Header = exports.ModalHeader;
 exports.Modal.Body = exports.ModalBody;
 exports.Modal.Footer = exports.ModalFooter;
 exports.Modal.FooterMultiStep = exports.ModalFooterMultiStep;
+exports.Modal.CloseButton = exports.ModalCloseButton;

package/public/components/Modal/context.d.ts

@@ -0,0 +1,6 @@
+import { Context } from "react";
+import { DisclosureProps } from "../../types";
+declare type ModalContextType = Partial<DisclosureProps>;
+export declare const ModalContext: Context<ModalContextType>;
+export declare function useModalContext(): Partial<DisclosureProps>;
+export {};

package/public/components/Modal/context.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalContext = exports.ModalContext = void 0;
+const react_1 = require("react");
+const defaultContext = {
+    onClose: () => { },
+};
+exports.ModalContext = react_1.createContext(defaultContext);
+function useModalContext() {
+    const context = react_1.useContext(exports.ModalContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useModalContext = useModalContext;

package/public/components/Modal/index.d.ts

@@ -1 +1,2 @@
 export * from "./Modal";
+export * from "./context";

package/public/components/Modal/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Modal"), exports);
+__exportStar(require("./context"), exports);

package/public/components/OptionButton/OptionButton.d.ts

@@ -1,7 +1,34 @@
 import { HTMLProps } from "react";
+import { BoxProps } from "../Box";
+import { TextProps } from "../Text";
+import { StackProps } from "../Stack";
+export interface OptionButtonGroupProps extends StackProps {
+    name?: string;
+    type?: "radio" | "checkbox";
+}
+export declare const OptionButtonGroup: (props: OptionButtonGroupProps) => JSX.Element;
+export declare type OptionButtonRootProps = HTMLProps<HTMLLabelElement>;
+export declare const OptionButtonRoot: ({ children, className, ...rest }: OptionButtonRootProps) => JSX.Element;
+export declare type OptionButtonInputProps = HTMLProps<HTMLInputElement>;
+export declare const OptionButtonInput: (props: OptionButtonInputProps) => JSX.Element;
+export declare const OptionButtonContent: ({ className, children, ...rest }: BoxProps) => JSX.Element;
+export declare const OptionButtonHeading: ({ className, children, ...rest }: TextProps) => JSX.Element;
+export declare const OptionButtonDescription: ({ className, children, ...rest }: TextProps) => JSX.Element;
+export declare const OptionButtonBackdrop: ({ className, ...rest }: BoxProps) => JSX.Element;
+export declare const OptionButtonSelectedIcon: ({ className, ...rest }: BoxProps) => JSX.Element;
 interface OptionButtonProps extends HTMLProps<HTMLInputElement> {
     heading: string;
     description?: string;
 }
-export declare const OptionButton: (props: OptionButtonProps) => JSX.Element;
+export declare const OptionButton: {
+    (props: OptionButtonProps): JSX.Element;
+    Group: (props: OptionButtonGroupProps) => JSX.Element;
+    Root: ({ children, className, ...rest }: OptionButtonRootProps) => JSX.Element;
+    Input: (props: OptionButtonInputProps) => JSX.Element;
+    Content: ({ className, children, ...rest }: BoxProps) => JSX.Element;
+    Heading: ({ className, children, ...rest }: TextProps) => JSX.Element;
+    Description: ({ className, children, ...rest }: TextProps) => JSX.Element;
+    Backdrop: ({ className, ...rest }: BoxProps) => JSX.Element;
+    SelectedIcon: ({ className, ...rest }: BoxProps) => JSX.Element;
+};
 export {};

package/public/components/OptionButton/OptionButton.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionButton = void 0;
+exports.OptionButton = exports.OptionButtonSelectedIcon = exports.OptionButtonBackdrop = exports.OptionButtonDescription = exports.OptionButtonHeading = exports.OptionButtonContent = exports.OptionButtonInput = exports.OptionButtonRoot = exports.OptionButtonGroup = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const auto_id_1 = require("@reach/auto-id");
@@ -11,21 +11,73 @@ const Box_1 = require("../Box");
 const Input_1 = require("../Input");
 const Text_1 = require("../Text");
 const Icon_1 = require("../Icon");
+const Stack_1 = require("../Stack");
 const bem_1 = require("../../utilities/bem");
 const isUndefined_1 = __importDefault(require("../../utilities/isUndefined"));
-const cn = "OptionButton";
-const OptionButton = (props) => {
-    const { heading, description, id: idProp, checked, className, defaultValue, ...rest } = props;
+const types_1 = require("../../types");
+const context_1 = require("./context");
+const cn = bem_1.bemHOF("OptionButton");
+const OptionButtonGroup = (props) => {
+    const { name = "", type = "radio", orientation = types_1.ORIENTATION.VERTICAL, ...rest } = props;
+    return (react_1.default.createElement(context_1.OptionButtonContext.Provider, { value: {
+            name,
+            type,
+        } },
+        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: orientation }, rest))));
+};
+exports.OptionButtonGroup = OptionButtonGroup;
+const OptionButtonRoot = ({ children, className, ...rest }) => {
+    return (react_1.default.createElement("label", Object.assign({ className: classnames_1.default(cn(), className) }, rest), children));
+};
+exports.OptionButtonRoot = OptionButtonRoot;
+const OptionButtonInput = (props) => {
+    const { name: nameFromContext, type: typeFromContext, } = context_1.useOptionButtonContext();
+    const { id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", ...rest } = props;
     const fallbackId = `OptionButton:${auto_id_1.useId()}`;
     const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
-    return (react_1.default.createElement(Box_1.Box, { as: "label", className: classnames_1.default(bem_1.bem(cn), className) },
-        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "content" }) },
-            heading && (react_1.default.createElement(Text_1.Text, { as: "div", className: bem_1.bem(cn, { e: "heading" }) }, heading)),
-            description && (react_1.default.createElement(Text_1.Text, { as: "div", className: bem_1.bem(cn, { e: "description" }) }, description))),
-        react_1.default.createElement(Input_1.Input, Object.assign({ id: id, type: "radio", checked: checked, className: bem_1.bem(cn, { e: "input" }), defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)),
-        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "backdrop" }) }),
-        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "selected" }) },
-            react_1.default.createElement(Icon_1.Icon, { className: bem_1.bem(cn, { e: "icon" }), icon: Icon_1.ICON_TYPE.CHECK }),
-            "Selected")));
+    const name = isUndefined_1.default(nameFromContext) ? nameProp : nameFromContext;
+    const type = isUndefined_1.default(typeFromContext) ? typeProp : typeFromContext;
+    return (react_1.default.createElement(Input_1.Input, Object.assign({ id: id, name: name, type: type, checked: checked, className: classnames_1.default([cn({ e: "input" }), className]), defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)));
+};
+exports.OptionButtonInput = OptionButtonInput;
+const OptionButtonContent = ({ className, children, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn({ e: "content" }), className]) }, rest), children));
+exports.OptionButtonContent = OptionButtonContent;
+const OptionButtonHeading = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([cn({ e: "heading" }), className]) }, rest), children));
+exports.OptionButtonHeading = OptionButtonHeading;
+const OptionButtonDescription = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([cn({ e: "description" }), className]) }, rest), children));
+exports.OptionButtonDescription = OptionButtonDescription;
+const OptionButtonBackdrop = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn({ e: "backdrop" }), className]) }, rest)));
+exports.OptionButtonBackdrop = OptionButtonBackdrop;
+const OptionButtonSelectedIcon = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn({ e: "selected" }), className]) }, rest),
+    react_1.default.createElement(Icon_1.Icon, { className: cn({ e: "icon" }), icon: Icon_1.ICON_TYPE.CHECK }),
+    "Selected"));
+exports.OptionButtonSelectedIcon = OptionButtonSelectedIcon;
+const OptionButton = (props) => {
+    const { name: nameFromContext, type: typeFromContext, } = context_1.useOptionButtonContext();
+    const { heading, description, id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", disabled = false, ...rest } = props;
+    const fallbackId = `OptionButton-${auto_id_1.useId()}`;
+    const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
+    const name = isUndefined_1.default(nameFromContext) ? nameProp : nameFromContext;
+    const type = isUndefined_1.default(typeFromContext) ? typeProp : typeFromContext;
+    const rootClassName = classnames_1.default([
+        cn(),
+        disabled && cn({ m: "disabled" }),
+        className,
+    ]);
+    return (react_1.default.createElement(exports.OptionButtonRoot, { className: rootClassName },
+        react_1.default.createElement(exports.OptionButtonContent, null,
+            heading && react_1.default.createElement(exports.OptionButtonHeading, null, heading),
+            description && (react_1.default.createElement(exports.OptionButtonDescription, null, description))),
+        react_1.default.createElement(exports.OptionButtonInput, Object.assign({ id: id, name: name, type: type, checked: checked, defaultValue: defaultValue, "aria-checked": checked ? "true" : "false", disabled: disabled }, rest)),
+        react_1.default.createElement(exports.OptionButtonBackdrop, null),
+        react_1.default.createElement(exports.OptionButtonSelectedIcon, null)));
 };
 exports.OptionButton = OptionButton;
+exports.OptionButton.Group = exports.OptionButtonGroup;
+exports.OptionButton.Root = exports.OptionButtonRoot;
+exports.OptionButton.Input = exports.OptionButtonInput;
+exports.OptionButton.Content = exports.OptionButtonContent;
+exports.OptionButton.Heading = exports.OptionButtonHeading;
+exports.OptionButton.Description = exports.OptionButtonDescription;
+exports.OptionButton.Backdrop = exports.OptionButtonBackdrop;
+exports.OptionButton.SelectedIcon = exports.OptionButtonSelectedIcon;

package/public/components/OptionButton/context.d.ts

@@ -0,0 +1,11 @@
+import { Context } from "react";
+declare type OptionButtonContextType = {
+    name?: string;
+    type?: "radio" | "checkbox";
+} | undefined;
+export declare const OptionButtonContext: Context<OptionButtonContextType>;
+export declare function useOptionButtonContext(): {
+    name?: string | undefined;
+    type?: "radio" | "checkbox" | undefined;
+};
+export {};

package/public/components/OptionButton/context.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOptionButtonContext = exports.OptionButtonContext = void 0;
+const react_1 = require("react");
+const defaultContext = {
+    name: "",
+    type: "radio",
+};
+exports.OptionButtonContext = react_1.createContext(defaultContext);
+function useOptionButtonContext() {
+    const context = react_1.useContext(exports.OptionButtonContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useOptionButtonContext = useOptionButtonContext;

package/public/components/Overlay/Overlay.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overlay = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Fixed_1 = require("../Fixed");
+const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
 const cn = "Overlay";
 const Overlay = (props) => {
     const { className, ...rest } = props;
-    return react_1.default.createElement(Fixed_1.Fixed, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest));
+    return react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest));
 };
 exports.Overlay = Overlay;

package/public/components/Paragraph/Paragraph.js

@@ -7,14 +7,10 @@ exports.Paragraph = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Text_1 = require("../Text");
+const bem_1 = require("../../utilities/bem");
+const cn = bem_1.bemHOF("Paragraph");
 const Paragraph = (props) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(Text_1.Text, Object.assign({}, rest, { className: classnames_1.default([
-            "text-body",
-            "text-gray-700",
-            "leading-normal",
-            "my-6",
-            className,
-        ]) })));
+    return react_1.default.createElement(Text_1.Text, Object.assign({ className: classnames_1.default([cn(), className]) }, rest));
 };
 exports.Paragraph = Paragraph;

package/public/components/Popover/Popover.js

@@ -25,7 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const Box_1 = require("../Box");
 const Portal_1 = require("../Portal");
 const bem_1 = require("../../utilities/bem");
@@ -62,13 +62,13 @@ const Popover = ({ removePadding = false, ...props }) => {
             },
         ];
         const propModifiers = popperModifiers || [];
-        return (react_1.default.createElement(react_popper_2_1.Manager, null,
-            isVisible && (react_1.default.createElement(react_popper_2_1.Popper, { placement: placement, modifiers: [...defaultPopperModifiers, ...propModifiers] }, ({ ref, style, placement: popperPlacement, arrowProps, update, }) => (react_1.default.createElement(InlinePopover, Object.assign({ ref: ref, style: {
+        return (react_1.default.createElement(react_popper_1.Manager, null,
+            isVisible && (react_1.default.createElement(react_popper_1.Popper, { placement: placement, modifiers: [...defaultPopperModifiers, ...propModifiers] }, ({ ref, style, placement: popperPlacement, arrowProps, update, }) => (react_1.default.createElement(InlinePopover, Object.assign({ ref: ref, style: {
                     ...style,
                     ...styleProp,
                 }, className: className, "data-placement": popperPlacement, hasPortal: true, removePadding: removePadding }, rest),
                 react_1.default.createElement(ChildrenWithArrow, { popperPlacement: popperPlacement, arrowProps: arrowProps, update: update, showArrow: showArrow }, children))))),
-            react_1.default.createElement(react_popper_2_1.Reference, null, ({ ref }) => react_1.cloneElement(referenceElement, {
+            react_1.default.createElement(react_popper_1.Reference, null, ({ ref }) => react_1.cloneElement(referenceElement, {
                 ref,
             }))));
     }

package/public/components/Reference/Reference.d.ts

@@ -1,11 +1,11 @@
 import { ForwardRefExoticComponent } from "react";
 import { BoxProps } from "../Box";
-import { ICON_STYLE_PREFIX, ICON_TYPE } from "../Icon";
+import { ICON_STYLE_PREFIX, IconType } from "../Icon";
 import { STATUS_VARIANT } from "../../types";
 export interface ReferenceProps {
     as?: any;
     disabled?: boolean;
-    icon?: ICON_TYPE;
+    icon?: IconType;
     iconPrefix?: ICON_STYLE_PREFIX;
     badgeVariant?: STATUS_VARIANT;
     badgeLabel?: string;

package/public/components/ScrollSpy/ScrollSpy.d.ts

@@ -0,0 +1,92 @@
+import React, { ReactNode, Dispatch, HTMLAttributes, ReactElement, AnchorHTMLAttributes, MouseEvent, ChangeEvent, InputHTMLAttributes } from "react";
+import { ScrollSpyState, ScrollSpyAction } from "./types";
+export declare const ScrollSpyStateContext: React.Context<{
+    state: ScrollSpyState;
+    dispatch: Dispatch<ScrollSpyAction>;
+}>;
+export declare function useScrollSpyStateContext(): {
+    state: ScrollSpyState;
+    dispatch: React.Dispatch<ScrollSpyAction>;
+};
+declare type ScrollSpyContextType = {
+    id: string;
+    itemCount: number;
+    defaultIndex: number;
+    updateCurrentRef(index: number, refItem: HTMLElement): void;
+    scrollToRef(refToScrollTo: HTMLElement): void;
+    scrollToFirst(event: MouseEvent): void;
+    scrollToLast(event: MouseEvent): void;
+    scrollToPage(page: number): void;
+    skipToPage(page: number): void;
+};
+export declare const ScrollSpyContext: React.Context<ScrollSpyContextType>;
+export declare function useScrollSpyContext(): ScrollSpyContextType;
+export declare type ScrollSpyInputUsePropsHookProps = {
+    className?: string;
+    onChange?(event: ChangeEvent<HTMLInputElement>): void;
+};
+export declare const useScrollSpyInputProps: ({ className, onChange, }: ScrollSpyInputUsePropsHookProps) => {
+    className: string;
+    type: string;
+    min: string;
+    max: number;
+    maxLength: number;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    value: number;
+};
+export declare type ScrollSpyInputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const ScrollSpyInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<ScrollSpyInputProps & React.RefAttributes<HTMLInputElement>>>;
+export interface ScrollSpyPageProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement;
+    index: number;
+    threshold?: number | number[] | undefined;
+}
+export declare type ScrollSpyPageUsePropsHookProps = {
+    index: number;
+    id?: string;
+};
+export declare const useScrollSpyPageProps: ({ index, id }?: ScrollSpyPageUsePropsHookProps) => {
+    id: string;
+};
+export declare const ScrollSpyPage: React.MemoExoticComponent<React.ForwardRefExoticComponent<ScrollSpyPageProps & React.RefAttributes<HTMLDivElement>>>;
+export interface ScrollSpyAnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    index: number;
+}
+export declare type ScrollSpyAnchorUsePropsHookProps = {
+    index: number;
+    id?: string;
+    href?: string;
+    onClick?(event: MouseEvent<HTMLAnchorElement>): void;
+};
+export declare const useScrollSpyAnchorProps: ({ index, id, href, onClick }?: ScrollSpyAnchorUsePropsHookProps) => {
+    id: string;
+    href: string;
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+    isActive: boolean;
+};
+export declare const ScrollSpyAnchor: React.MemoExoticComponent<React.ForwardRefExoticComponent<ScrollSpyAnchorProps & React.RefAttributes<HTMLAnchorElement>>>;
+export declare type ScrollSpyRootProps = {
+    children: ReactNode;
+    itemCount: number;
+    defaultIndex?: number;
+    id?: string;
+};
+export declare const ScrollSpyRoot: React.MemoExoticComponent<({ children, itemCount, defaultIndex, id, }: ScrollSpyRootProps) => JSX.Element>;
+export declare const ScrollSpyStateProvider: ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const ScrollSpyReducers: {
+    reducer: (state: ScrollSpyState | undefined, action: ScrollSpyAction) => ScrollSpyState;
+};
+export declare const ScrollSpySelectors: {
+    selectCurrentIndex: (state: ScrollSpyState) => number;
+    selectCurrentPage: (state: ScrollSpyState) => number;
+};
+export declare const ScrollSpyActions: {
+    updateIndex: (index: number) => {
+        type: import("./types").ScrollSpyActionType;
+        index: number;
+    };
+};
+export {};