yet-another-react-lightbox 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Igor Danchenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,63 @@
+# Yet Another React Lightbox
+
+Modern lightbox component for React.
+
+## Overview
+
+[![NPM Version](https://img.shields.io/npm/v/yet-another-react-lightbox?color=blue)](https://www.npmjs.com/package/yet-another-react-lightbox)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
+[![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox?color=blue)](LICENSE)
+
+Coming soon...
+
+## Documentation
+
+Coming soon...
+
+## Installation
+
+```shell
+npm install yet-another-react-lightbox
+```
+
+or
+
+```shell
+yarn add yet-another-react-lightbox
+```
+
+### Minimal Setup Example
+
+```javascript
+import * as React from "react";
+import { Lightbox } from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+const Page = () => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <>
+            <button type="button" onClick={() => setOpen(true)}>
+                Open Lightbox
+            </button>
+
+            <Lightbox
+                open={open}
+                close={() => setOpen(false)}
+                slides={[
+                    { src: "/image1.jpg" }, 
+                    { src: "/image2.jpg" }, 
+                    { src: "/image3.jpg" },
+                ]}
+            />
+        </>
+    );
+};
+
+export default Page;
+```
+
+## License
+
+MIT © [Igor Danchenko](https://github.com/igordanchenko)

package/dist/Lightbox.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { LightboxDefaultProps, LightboxProps } from "./types.js";
+declare const LightboxComponent: {
+    (props: LightboxProps & typeof LightboxDefaultProps): JSX.Element | null;
+    propTypes: {
+        open: import("prop-types").Validator<boolean>;
+        close: import("prop-types").Validator<(...args: any[]) => any>;
+        index: import("prop-types").Validator<number>;
+        slides: import("prop-types").Validator<any[]>;
+        render: import("prop-types").Validator<import("prop-types").InferProps<{
+            slide: import("prop-types").Validator<(...args: any[]) => any>;
+        }>>;
+        plugins: import("prop-types").Validator<((...args: any[]) => any)[]>;
+        toolbar: import("prop-types").Validator<import("prop-types").InferProps<{
+            buttons: import("prop-types").Validator<(string | number | boolean | import("prop-types").ReactElementLike | import("prop-types").ReactNodeArray | null | undefined)[]>;
+        }>>;
+        labels: import("prop-types").Validator<import("prop-types").InferProps<{}>>;
+        carousel: import("prop-types").Validator<import("prop-types").InferProps<{
+            finite: import("prop-types").Validator<boolean>;
+            preload: import("prop-types").Validator<number>;
+            padding: import("prop-types").Validator<string | number>;
+            spacing: import("prop-types").Validator<string | number>;
+        }>>;
+        animation: import("prop-types").Validator<import("prop-types").InferProps<{
+            fade: import("prop-types").Validator<number>;
+            swipe: import("prop-types").Validator<number>;
+        }>>;
+    };
+    defaultProps: {
+        open: boolean;
+        close: () => void;
+        index: number;
+        slides: import("./types.js").Slide[];
+        render: import("./types.js").Render;
+        plugins: import("./types.js").Plugin[];
+        toolbar: import("./types.js").Toolbar;
+        labels: {};
+        animation: import("./types.js").Animation;
+        carousel: import("./types.js").Carousel;
+    };
+};
+declare type ComponentProps<T> = T extends React.ComponentType<infer P> | React.Component<infer P> ? JSX.LibraryManagedAttributes<T, P> : never;
+declare type MakePartial<T> = T extends object ? Partial<T> : T;
+declare type NestedPartial<T extends object> = {
+    [P in keyof T]?: MakePartial<T[P]>;
+};
+declare type NestedOptional<T, K extends keyof T> = Omit<T, K> & NestedPartial<Pick<T, K>>;
+export declare const Lightbox: (props: NestedOptional<ComponentProps<typeof LightboxComponent>, "carousel" | "animation" | "render">) => JSX.Element;
+export {};

package/dist/Lightbox.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { LightboxDefaultProps, LightboxPropTypes } from "./types.js";
+import { CarouselModule, ControllerModule, CoreModule, createNode, NavigationModule, NoScrollModule, PortalModule, ToolbarModule, withPlugins, } from "./core/index.js";
+const renderNode = (node, props) => React.createElement(node.module.component, { key: node.module.name, ...props }, node.children?.map((child) => renderNode(child, props)));
+const LightboxComponent = (props) => {
+    const { plugins } = props;
+    const { config, augmentation } = withPlugins([
+        createNode(PortalModule, [
+            createNode(NoScrollModule, [
+                createNode(ControllerModule, [
+                    createNode(CarouselModule),
+                    createNode(ToolbarModule),
+                    createNode(NavigationModule),
+                ]),
+            ]),
+        ]),
+    ], plugins);
+    const augmentedProps = augmentation(props);
+    if (!augmentedProps.open)
+        return null;
+    return React.createElement(React.Fragment, null, renderNode(createNode(CoreModule, config), augmentedProps));
+};
+LightboxComponent.propTypes = LightboxPropTypes;
+LightboxComponent.defaultProps = LightboxDefaultProps;
+export const Lightbox = (props) => {
+    const { carousel, animation, render, ...restProps } = props;
+    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, ...restDefaultProps } = LightboxDefaultProps;
+    return (React.createElement(LightboxComponent, { carousel: { ...defaultCarousel, ...carousel }, animation: { ...defaultAnimation, ...animation }, render: { ...defaultRender, ...render }, ...restDefaultProps, ...restProps }));
+};

package/dist/core/components/IconButton.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export declare type IconButtonProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "aria-label"> & {
+    label: string;
+    icon: React.ElementType;
+};
+export declare const IconButton: ({ label, className, icon: Icon, onClick, ...rest }: IconButtonProps) => JSX.Element;

package/dist/core/components/IconButton.js

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { clsx, cssClass } from "../utils.js";
+export const IconButton = ({ label, className, icon: Icon, onClick, ...rest }) => (React.createElement("button", { type: "button", "aria-label": label, className: clsx(cssClass("button"), className), onClick: onClick || undefined, ...rest },
+    React.createElement(Icon, { className: cssClass("icon") })));

package/dist/core/components/Icons.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export declare const createIcon: (name: string, glyph: React.ReactNode) => {
+    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+};
+export declare const CloseIcon: {
+    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+};
+export declare const PreviousIcon: {
+    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+};
+export declare const NextIcon: {
+    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+};
+export declare const LoadingIcon: {
+    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+};
+export declare const ErrorIcon: {
+    (props: React.SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+};

package/dist/core/components/Icons.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+export const createIcon = (name, glyph) => {
+    const icon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", ...props },
+        React.createElement("g", { fill: "currentColor" },
+            React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+            glyph)));
+    icon.displayName = name;
+    return icon;
+};
+export const CloseIcon = createIcon("Close", React.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
+export const PreviousIcon = createIcon("Previous", React.createElement("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));
+export const NextIcon = createIcon("Next", React.createElement("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }));
+export const LoadingIcon = createIcon("Loading", React.createElement(React.Fragment, null, Array.from({ length: 8 }).map((_, index, array) => (React.createElement("line", { key: index, x1: "12", y1: "6.5", x2: "12", y2: "1.8", strokeLinecap: "round", strokeWidth: "2.6", stroke: "currentColor", strokeOpacity: (1 / array.length) * (index + 1), transform: `rotate(${(360 / array.length) * index}, 12, 12)` })))));
+export const ErrorIcon = createIcon("Error", React.createElement("path", { d: "M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z" }));

package/dist/core/components/ImageSlide.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SlideImage } from "../../types.js";
+export declare const ImageSlide: ({ slide: image }: {
+    slide: SlideImage;
+}) => JSX.Element;

package/dist/core/components/ImageSlide.js

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { clsx, cssClass } from "../utils.js";
+import { useLatest } from "../hooks/index.js";
+import { ErrorIcon, LoadingIcon } from "./Icons.js";
+import { useController } from "../modules/Controller.js";
+export const ImageSlide = ({ slide: image }) => {
+    const [state, setState] = React.useState("loading");
+    const latestState = useLatest(state);
+    const imageRef = React.useRef(null);
+    const { containerRect } = useController();
+    const handleLoading = React.useCallback((img) => {
+        if (latestState.current === "complete") {
+            return;
+        }
+        ("decode" in img ? img.decode() : Promise.resolve())
+            .catch(() => { })
+            .then(() => {
+            if (!img.parentNode) {
+                return;
+            }
+            setState("complete");
+        });
+    }, [latestState]);
+    const setImageRef = React.useCallback((img) => {
+        imageRef.current = img;
+        if (img?.complete) {
+            handleLoading(img);
+        }
+    }, [handleLoading]);
+    const onLoad = React.useCallback((event) => {
+        handleLoading(event.currentTarget);
+    }, [handleLoading]);
+    const onError = React.useCallback(() => {
+        setState("error");
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), state !== "complete" && cssClass("slide_image_loading")), draggable: false, alt: image.title, ...(image.srcSet
+                ? {
+                    sizes: `${Math.ceil((Math.min(image.aspectRatio ? containerRect.height * image.aspectRatio : Number.MAX_VALUE, containerRect.width) /
+                        window.innerWidth) *
+                        100)}vw`,
+                    srcSet: image.srcSet
+                        .sort((a, b) => a.width - b.width)
+                        .map((item) => `${item.src} ${item.width}w`)
+                        .join(", "),
+                    style: {
+                        maxWidth: `${Math.max(...image.srcSet.map((x) => x.width))}px`,
+                    },
+                }
+                : {
+                    style: (imageRef.current?.naturalWidth ?? 0) > 0
+                        ? {
+                            maxWidth: `${imageRef.current?.naturalWidth}px`,
+                        }
+                        : undefined,
+                }), src: image.src }),
+        state !== "complete" && (React.createElement("div", { className: cssClass("slide_placeholder") },
+            state === "loading" && (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) })),
+            state === "error" && React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))));
+};

package/dist/core/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./IconButton.js";
+export * from "./Icons.js";
+export * from "./ImageSlide.js";

package/dist/core/components/index.js

@@ -0,0 +1,3 @@
+export * from "./IconButton.js";
+export * from "./Icons.js";
+export * from "./ImageSlide.js";

package/dist/core/config.d.ts

@@ -0,0 +1,7 @@
+import { Augmentation, Component, Module, Node, Plugin } from "../types.js";
+export declare const createModule: (name: string, component: Component) => Module;
+export declare const createNode: (module: Module, children?: Node[] | undefined) => Node;
+export declare const withPlugins: (root: Node[], plugins?: Plugin[] | undefined) => {
+    config: Node[];
+    augmentation: Augmentation;
+};

package/dist/core/config.js

@@ -0,0 +1,70 @@
+export const createModule = (name, component) => ({
+    name,
+    component,
+});
+export const createNode = (module, children) => ({
+    module,
+    children,
+});
+const traverseNode = (node, target, apply) => {
+    if (node.module.name === target) {
+        return apply(node);
+    }
+    if (node.children) {
+        return [
+            createNode(node.module, node.children.flatMap((n) => traverseNode(n, target, apply) ?? [])),
+        ];
+    }
+    return [node];
+};
+const traverse = (nodes, target, apply) => nodes.flatMap((node) => traverseNode(node, target, apply) ?? []);
+export const withPlugins = (root, plugins) => {
+    let config = root;
+    const augmentations = [];
+    const addParent = (target, module) => {
+        if (target === "") {
+            config = [createNode(module, config)];
+            return;
+        }
+        config = traverse(config, target, (node) => [createNode(module, [node])]);
+    };
+    const addChild = (target, module, precede) => {
+        config = traverse(config, target, (node) => [
+            createNode(node.module, [
+                ...(precede ? [createNode(module)] : []),
+                ...(node.children ?? []),
+                ...(!precede ? [createNode(module)] : []),
+            ]),
+        ]);
+    };
+    const addSibling = (target, module, precede) => {
+        config = traverse(config, target, (node) => [
+            ...(precede ? [createNode(module)] : []),
+            node,
+            ...(!precede ? [createNode(module)] : []),
+        ]);
+    };
+    const replace = (target, module) => {
+        config = traverse(config, target, (node) => [createNode(module, node.children)]);
+    };
+    const remove = (target) => {
+        config = traverse(config, target, (node) => node.children);
+    };
+    const augment = (augmentation) => {
+        augmentations.push(augmentation);
+    };
+    plugins?.forEach((plugin) => {
+        plugin({
+            addParent,
+            addChild,
+            addSibling,
+            replace,
+            remove,
+            augment,
+        });
+    });
+    return {
+        config,
+        augmentation: (props) => augmentations.reduce((acc, augmentation) => augmentation(acc), props),
+    };
+};

package/dist/core/contexts/Events.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export declare type Topic = string;
+export declare type Callback = (topic: Topic, event?: unknown) => void;
+export declare type Events = {
+    [key: string]: Callback[];
+};
+export declare type Subscribe = (topic: Topic, callback: Callback) => () => void;
+export declare type Unsubscribe = (topic: Topic, callback: Callback) => void;
+export declare type Publish = (topic: Topic, event?: unknown) => void;
+export declare type EventsContextType = {
+    subscribe: Subscribe;
+    unsubscribe: Unsubscribe;
+    publish: Publish;
+};
+export declare const useEvents: () => EventsContextType;
+export declare const EventsProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;

package/dist/core/contexts/Events.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { makeUseContext } from "../utils.js";
+const EventsContext = React.createContext(null);
+export const useEvents = makeUseContext("useEvents", "EventsContext", EventsContext);
+export const EventsProvider = ({ children }) => {
+    const subscriptions = React.useRef({});
+    const unsubscribe = (topic, callback) => {
+        if (subscriptions.current[topic]) {
+            subscriptions.current[topic] = subscriptions.current[topic].filter((cb) => cb !== callback);
+        }
+    };
+    const subscribe = (topic, callback) => {
+        if (!subscriptions.current[topic]) {
+            subscriptions.current[topic] = [];
+        }
+        subscriptions.current[topic].push(callback);
+        return () => unsubscribe(topic, callback);
+    };
+    const publish = (topic, event) => {
+        subscriptions.current[topic]?.forEach((callback) => callback(topic, event));
+    };
+    React.useEffect(() => () => {
+        subscriptions.current = {};
+    }, []);
+    const context = React.useRef({
+        subscribe,
+        unsubscribe,
+        publish,
+    });
+    return React.createElement(EventsContext.Provider, { value: context.current }, children);
+};

package/dist/core/contexts/Timeouts.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export declare type TimeoutsContextType = {
+    setTimeout: (func: () => void, time?: number) => number;
+    clearTimeout: (id?: number) => void;
+    clearTimeouts: () => void;
+};
+export declare const useTimeouts: () => TimeoutsContextType;
+export declare const TimeoutsProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;

package/dist/core/contexts/Timeouts.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { makeUseContext } from "../utils.js";
+const TimeoutsContext = React.createContext(null);
+export const useTimeouts = makeUseContext("useTimeouts", "TimeoutsContext", TimeoutsContext);
+export const TimeoutsProvider = ({ children }) => {
+    const timeouts = React.useRef([]);
+    const removeTimeout = (id) => {
+        timeouts.current.splice(0, timeouts.current.length, ...timeouts.current.filter((tid) => tid !== id));
+    };
+    const setTimeout = (func, time) => {
+        const id = window.setTimeout(() => {
+            removeTimeout(id);
+            func();
+        }, time);
+        timeouts.current.push(id);
+        return id;
+    };
+    const clearTimeout = (id) => {
+        if (typeof id !== "undefined") {
+            removeTimeout(id);
+            window.clearTimeout(id);
+        }
+    };
+    const clearTimeouts = () => {
+        timeouts.current.forEach((tid) => window.clearTimeout(tid));
+        timeouts.current.splice(0, timeouts.current.length);
+    };
+    React.useEffect(() => () => clearTimeouts(), []);
+    const context = React.useRef({
+        setTimeout,
+        clearTimeout,
+        clearTimeouts,
+    });
+    return React.createElement(TimeoutsContext.Provider, { value: context.current }, children);
+};

package/dist/core/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Events.js";
+export * from "./Timeouts.js";

package/dist/core/contexts/index.js

@@ -0,0 +1,2 @@
+export * from "./Events.js";
+export * from "./Timeouts.js";

package/dist/core/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./useContainerRect.js";
+export * from "./useEnhancedEffect.js";
+export * from "./useLatest.js";
+export * from "./useSensors.js";

package/dist/core/hooks/index.js

@@ -0,0 +1,4 @@
+export * from "./useContainerRect.js";
+export * from "./useEnhancedEffect.js";
+export * from "./useLatest.js";
+export * from "./useSensors.js";

package/dist/core/hooks/useContainerRect.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export declare type ContainerRect = {
+    width: number;
+    height: number;
+};
+export declare const useContainerRect: <T extends HTMLElement = HTMLElement>() => {
+    setContainerRef: (node: T | null) => void;
+    containerRef: React.MutableRefObject<T | null>;
+    containerRect: ContainerRect | undefined;
+};

package/dist/core/hooks/useContainerRect.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+export const useContainerRect = () => {
+    const [containerRect, setContainerRect] = React.useState();
+    const containerRef = React.useRef(null);
+    const observerRef = React.useRef();
+    const setContainerRef = React.useCallback((node) => {
+        containerRef.current = node;
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = undefined;
+        }
+        const updateContainerRect = () => {
+            const width = node?.clientWidth;
+            const height = node?.clientHeight;
+            setContainerRect(width !== undefined && height !== undefined
+                ? {
+                    width,
+                    height,
+                }
+                : undefined);
+        };
+        updateContainerRect();
+        if (node && typeof ResizeObserver !== "undefined") {
+            observerRef.current = new ResizeObserver(updateContainerRect);
+            observerRef.current.observe(node);
+        }
+    }, []);
+    return React.useMemo(() => ({
+        setContainerRef,
+        containerRef,
+        containerRect,
+    }), [setContainerRef, containerRef, containerRect]);
+};

package/dist/core/hooks/useEnhancedEffect.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const useEnhancedEffect: typeof React.useLayoutEffect;

package/dist/core/hooks/useEnhancedEffect.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+export const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

package/dist/core/hooks/useLatest.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const useLatest: <T>(value: T) => React.MutableRefObject<T>;

package/dist/core/hooks/useLatest.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+export const useLatest = (value) => {
+    const ref = React.useRef(value);
+    ref.current = value;
+    return ref;
+};

package/dist/core/hooks/useSensors.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export declare type PointerEventType = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel";
+export declare type TouchEventType = "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel";
+export declare type KeyboardEventType = "onKeyDown" | "onKeyUp";
+export declare type WheelEventType = "onWheel";
+export declare type SupportedEventType = PointerEventType | TouchEventType | KeyboardEventType | WheelEventType;
+export declare type ReactEventType<T, K extends SupportedEventType> = K extends TouchEventType ? React.TouchEvent<T> : K extends KeyboardEventType ? React.KeyboardEvent<T> : K extends WheelEventType ? React.WheelEvent<T> : K extends PointerEventType ? React.PointerEvent<T> : never;
+export declare type EventCallback<T, P extends React.PointerEvent<T> | React.TouchEvent<T> | React.KeyboardEvent<T> | React.WheelEvent<T>> = (event: P) => void;
+export declare type SubscribeSensors<T> = <ET extends SupportedEventType>(type: ET, callback: EventCallback<T, ReactEventType<T, ET>>) => () => void;
+export declare type RegisterSensors<T> = Required<Pick<React.HTMLAttributes<T>, PointerEventType>> & Required<Pick<React.HTMLAttributes<T>, TouchEventType>> & Required<Pick<React.HTMLAttributes<T>, KeyboardEventType>> & Required<Pick<React.HTMLAttributes<T>, WheelEventType>>;
+export declare type UseSensors<T> = {
+    registerSensors: RegisterSensors<T>;
+    subscribeSensors: SubscribeSensors<T>;
+};
+export declare const useSensors: <T extends Element>() => UseSensors<T>;

package/dist/core/hooks/useSensors.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+export const useSensors = () => {
+    const [subscribers] = React.useState({});
+    return React.useMemo(() => {
+        const notifySubscribers = (type, event) => {
+            subscribers[type]?.forEach((listener) => listener(event));
+        };
+        return {
+            registerSensors: {
+                onPointerDown: (event) => notifySubscribers("onPointerDown", event),
+                onPointerMove: (event) => notifySubscribers("onPointerMove", event),
+                onPointerUp: (event) => notifySubscribers("onPointerUp", event),
+                onPointerLeave: (event) => notifySubscribers("onPointerLeave", event),
+                onPointerCancel: (event) => notifySubscribers("onPointerCancel", event),
+                onTouchStart: (event) => notifySubscribers("onTouchStart", event),
+                onTouchMove: (event) => notifySubscribers("onTouchMove", event),
+                onTouchEnd: (event) => notifySubscribers("onTouchEnd", event),
+                onTouchCancel: (event) => notifySubscribers("onTouchCancel", event),
+                onKeyDown: (event) => notifySubscribers("onKeyDown", event),
+                onKeyUp: (event) => notifySubscribers("onKeyUp", event),
+                onWheel: (event) => notifySubscribers("onWheel", event),
+            },
+            subscribeSensors: (type, callback) => {
+                if (!subscribers[type]) {
+                    subscribers[type] = [];
+                }
+                subscribers[type]?.push(callback);
+                return () => {
+                    const listeners = subscribers[type];
+                    if (listeners) {
+                        listeners.splice(0, listeners.length, ...listeners.filter((el) => el !== callback));
+                    }
+                };
+            },
+        };
+    }, [subscribers]);
+};

package/dist/core/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./utils.js";
+export * from "./config.js";
+export * from "./hooks/index.js";
+export * from "./contexts/index.js";
+export * from "./components/index.js";
+export * from "./modules/index.js";

package/dist/core/index.js

@@ -0,0 +1,6 @@
+export * from "./utils.js";
+export * from "./config.js";
+export * from "./hooks/index.js";
+export * from "./contexts/index.js";
+export * from "./components/index.js";
+export * from "./modules/index.js";

package/dist/core/modules/Carousel.d.ts

@@ -0,0 +1,3 @@
+import { Component } from "../../types.js";
+export declare const Carousel: Component;
+export declare const CarouselModule: import("../../types.js").Module;