@yakad/ui 1.3.164 → 1.3.166

package/dist/Text/Text.d.ts

@@ -6,13 +6,13 @@ export interface TextProps<T> extends React.HTMLAttributes<T> {
     children?: React.ReactNode;
     ref?: React.Ref<T>;
 }
-export declare function H1({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H2({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H3({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H4({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H5({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H6({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function P({ variant, palette, className, children, ...restProps }: TextProps<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
-export declare function Span({ variant, palette, className, children, ...restProps }: TextProps<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-export declare function Text({ variant, palette, className, children, ...restProps }: TextProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function H1({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H2({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H3({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H4({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H5({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H6({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function P({ variant, palette, className, children, ...restProps }: TextProps<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function Span({ variant, palette, className, children, ...restProps }: TextProps<HTMLSpanElement>): import("react").JSX.Element;
+export declare function Text({ variant, palette, className, children, ...restProps }: TextProps<HTMLDivElement>): import("react").JSX.Element;
 export {};

package/dist/Theme/Theme.d.ts

@@ -10,4 +10,4 @@ export interface ThemeProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function Theme({ align, darkStyle, color, zoom, className, children, ...restProps }: ThemeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Theme({ align, darkStyle, color, zoom, className, children, ...restProps }: ThemeProps): import("react").JSX.Element;

package/dist/WithOverlay/WithOverlay.d.ts

@@ -11,5 +11,5 @@ export interface WithOverlayProps extends StackProps {
     children?: React.ReactElement;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function WithOverlay({ trigger, overlay, children, onClick, ref, ...restProps }: WithOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function WithOverlay({ trigger, overlay, children, onClick, ref, ...restProps }: WithOverlayProps): import("react").JSX.Element;
 export {};

package/dist/WithOverlay/WithOverlay.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, cloneElement, useEffect, useRef, useImperativeHandle, } from "react";
-import { createPortal } from "react-dom";
-import { Stack, useOnRightClick, } from "..";
+import { useState, useRef, useImperativeHandle, cloneElement, } from "react";
+import { Stack, } from "..";
+import { useOnRightClick } from "@yakad/use-interactions";
 export function WithOverlay(_a) {
     var { trigger = "onClick", overlay, children, onClick, ref } = _a, restProps = __rest(_a, ["trigger", "overlay", "children", "onClick", "ref"]);
     // Get Triggers ref and send to Overlay
@@ -28,24 +28,13 @@ export function WithOverlay(_a) {
     };
     // Let the parent access our DOM node
     useImperativeHandle(ref, () => localRef.current);
-    // Disable Body Scroll on showOverlay
-    useEffect(() => {
-        document.body.style.overflow = showOverlay ? "hidden" : "initial";
-        return () => {
-            document.body.style.overflow = "initial";
-        };
-    }, [showOverlay]);
-    // Teleport Overlay to portalRoot or body
-    const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
-    const teleport = overlay &&
-        portalRoot &&
-        createPortal(cloneElement(overlay, {
-            triggerref: localRef,
-            onClose: () => {
-                var _a, _b;
-                (_b = (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-                setShowOverlay(false);
-            },
-        }), portalRoot);
-    return (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ ref: localRef }, restProps, { onClick: onClickHandler, children: children })), showOverlay && teleport] }));
+    const clonedOverlay = cloneElement(overlay, {
+        triggerref: localRef,
+        onClose: () => {
+            var _a, _b;
+            (_b = overlay === null || overlay === void 0 ? void 0 : (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            setShowOverlay(false);
+        },
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ ref: localRef }, restProps, { onClick: onClickHandler, children: children })), showOverlay && clonedOverlay] }));
 }

package/dist/index.d.ts

@@ -16,7 +16,6 @@ export * from "./List/List";
 export * from "./ListItem/ListItem";
 export * from "./Table/Table";
 export * from "./Button/Button";
-export * from "./LoadingIcon/LoadingIcon";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
 export * from "./Form/Form";
@@ -34,13 +33,3 @@ export * from "./ActiveOnVisible/ActiveOnVisible";
 export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
 export * from "./Avatar/Avatar";
-export * from "./interactionHooks/useOnRightClick";
-export * from "./interactionHooks/useOnOutsideClick";
-export * from "./interactionHooks/useOnDoubleTap";
-export * from "./interactionHooks/useOnSwipe";
-export * from "./interactionHooks/useOnPinch";
-export * from "./interactionHooks/useOnRotate";
-export * from "./interactionHooks/useOnResizeChange";
-export * from "./interactionHooks/useOnVisibilityChange";
-export * from "./interactionHooks/useOnHoverChange";
-export * from "./interactionHooks/useOnScroll";

package/dist/index.js

@@ -19,7 +19,6 @@ export * from "./List/List";
 export * from "./ListItem/ListItem";
 export * from "./Table/Table";
 export * from "./Button/Button";
-export * from "./LoadingIcon/LoadingIcon";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
 // Form Components
@@ -40,13 +39,3 @@ export * from "./ActiveOnVisible/ActiveOnVisible"; // Stack Based
 export * from "./Dropdown/Dropdown"; // Card Based
 export * from "./Popup/Popup"; // Card Based
 export * from "./Avatar/Avatar";
-export * from "./interactionHooks/useOnRightClick";
-export * from "./interactionHooks/useOnOutsideClick";
-export * from "./interactionHooks/useOnDoubleTap";
-export * from "./interactionHooks/useOnSwipe";
-export * from "./interactionHooks/useOnPinch";
-export * from "./interactionHooks/useOnRotate";
-export * from "./interactionHooks/useOnResizeChange";
-export * from "./interactionHooks/useOnVisibilityChange";
-export * from "./interactionHooks/useOnHoverChange";
-export * from "./interactionHooks/useOnScroll";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.164",
+    "version": "1.3.166",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -33,8 +33,12 @@
     },
     "dependencies": {
         "@yakad/lib": "1.0.23",
-        "@yakad/symbols": "1.0.29",
-        "classnames": "2.5.1"
+        "@yakad/symbols": "1.0.42",
+        "@yakad/use-interactions": "1.0.0",
+        "class-variance-authority": "^0.7.1",
+        "classnames": "2.5.1",
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.6.0"
     },
     "peerDependencies": {
         "react": "^19.2.0",
@@ -47,4 +51,4 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     }
-}
+}

package/dist/InputField/InputField.module.css

@@ -1,212 +0,0 @@
-.div {
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    padding-top: 0.6rem;
-}
-.input {
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0rem;
-    border-image: initial;
-    background-color: rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.87);
-    caret-color: rgb(var(--primaryColor, 11 87 208));
-}
-
-.input:focus {
-    outline: none;
-}
-
-.input ~ .label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-    font-size: 1.5rem;
-    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    transition: 0.3s;
-    pointer-events: none;
-}
-@media (pointer: fine) {
-    .input:hover ~ .label {
-        color: rgb(var(--onSurfaceVariantColor, 73 69 78));
-    }
-}
-.input:focus ~ .label {
-    color: rgb(var(--primaryColor, 11 87 208));
-}
-.input:disabled ~ .label {
-    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.38);
-}
-.input:invalid ~ .label,
-.input:invalid:focus ~ .label {
-    color: rgb(var(--errorColor, 11 87 208));
-}
-
-/********************************************* OutLined */
-.input.outlined {
-    height: 5rem;
-    padding: 1.5rem 1.3rem;
-    border-width: 0.1rem;
-    border-style: solid;
-    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    border-radius: 0.4rem;
-    background-color: transparent;
-}
-.input.outlined.small {
-    padding: 0.75rem 1.3rem;
-    height: 3.5rem;
-}
-@media (pointer: fine) {
-    .input.outlined:hover {
-        border-color: rgb(var(--onSurfaceVariantColor, 73 69 78));
-    }
-}
-.input.outlined:focus {
-    border-width: 0.2rem;
-    border-color: rgb(var(--primaryColor, 11 87 208));
-}
-.input.outlined:disabled {
-    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.38);
-}
-.input.outlined:invalid {
-    border-color: rgb(var(--errorColor, 11 87 208));
-}
-.input.outlined:invalid:focus {
-    border-color: rgb(var(--errorColor, 11 87 208));
-}
-.input.outlined::placeholder {
-    color: transparent;
-}
-.input.outlined.havePlaceHolder:focus,
-.input.outlined.havePlaceHolder:not(:placeholder-shown) {
-    border-top-color: transparent;
-}
-
-.input.outlined ~ .label {
-    display: flex;
-    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    width: 100%;
-    max-height: 100%;
-    line-height: 6rem;
-}
-.input.outlined.small ~ .label {
-    line-height: 4.5rem;
-}
-.input.outlined:focus ~ .label,
-.input.outlined:not(:placeholder-shown) ~ .label {
-    font-size: 1.1rem;
-    line-height: 1.5rem;
-}
-
-.input.outlined ~ .label::before,
-.input.outlined ~ .label::after {
-    margin-top: 0.6rem;
-    border-top-width: 0.1rem;
-    border-top-style: solid;
-    border-color: transparent;
-    content: "";
-}
-.input.outlined:not(:placeholder-shown) ~ .label::before,
-.input.outlined:not(:placeholder-shown) ~ .label::after {
-    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-}
-.input.outlined:invalid:not(:placeholder-shown) ~ .label::before,
-.input.outlined:invalid:not(:placeholder-shown) ~ .label::after {
-    border-color: rgb(var(--errorColor, 11 87 208));
-}
-.input.outlined ~ .label::before {
-    width: 1rem;
-    margin-right: 1.2rem;
-    border-radius: 0.4rem 0rem;
-}
-.input.outlined ~ .label::after {
-    width: 100%;
-    margin-left: 1.2rem;
-    border-radius: 0rem 0.4rem;
-}
-.input.outlined:focus ~ .label::before,
-.input.outlined:focus ~ .label::after {
-    border-width: 0.2rem;
-    border-top-color: rgb(var(--primaryColor, 11 87 208));
-}
-.input.outlined:invalid:focus ~ .label::before,
-.input.outlined:invalid:focus ~ .label::after {
-    border-color: rgb(var(--errorColor, 11 87 208));
-}
-
-/********************************************* Filled */
-.input.filled {
-    height: 5rem;
-    padding: 0 1.2rem;
-    border: none;
-    border-bottom: solid 0.1rem rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    border-radius: 0.4rem 0.4rem 0rem 0rem;
-    background-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.04);
-}
-.input.filled.small {
-    height: 3.5rem;
-}
-@media (pointer: fine) {
-    .input.input.filled:hover {
-        border-color: rgb(var(--onSurfaceVariantColor, 73 69 78));
-        background-color: rgb(var(--onSurfaceVariantColor, 73 69 78) / 0.04);
-    }
-}
-.input.filled:disabled {
-    border-bottom: solid 0.1rem rgb(var(--onSurfaceColor, 28 27 31) / 0.38);
-}
-.input.filled:invalid {
-    border-bottom-color: rgb(var(--errorColor, 11 87 208));
-}
-.input.filled.havePlaceHolder {
-    padding: 2rem 1.2rem 0.5rem;
-}
-.input.filled.small.havePlaceHolder {
-    padding: 1.5rem 1.2rem 0.5rem;
-}
-
-.input.filled::placeholder {
-    color: transparent;
-}
-
-.input.filled ~ .label {
-    display: block;
-    box-sizing: border-box;
-    line-height: 6rem;
-    padding: 0 1rem;
-}
-.input.filled.small ~ .label {
-    line-height: 4.5rem;
-}
-.input.filled:focus ~ .label,
-.input.filled:not(:placeholder-shown) ~ .label {
-    font-size: 1.1rem;
-    line-height: 4rem;
-}
-.input.filled:focus.small ~ .label,
-.input.filled.small:not(:placeholder-shown) ~ .label {
-    line-height: 3rem;
-}
-.input.filled ~ .label::after {
-    position: absolute;
-    left: 0rem;
-    content: "";
-    bottom: 0rem;
-    width: 100%;
-    height: 0.2rem;
-    display: inline-block;
-    background-color: rgb(var(--primaryColor, 11 87 208));
-    transform: scaleX(0);
-    transition: transform 0.3s ease 0s;
-}
-.input.filled:focus ~ .label::after {
-    transform: scale(1);
-    content: "";
-}
-.input.filled:invalid ~ .label::after {
-    background-color: rgb(var(--errorColor, 11 87 208));
-}

package/dist/LoadingIcon/LoadingIcon.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface LoadingIconProps extends React.HTMLAttributes<HTMLDivElement> {
-    size?: "extraSmall" | "small" | "medium" | "large" | "extraLarge";
-    variant?: "scaleOut" | "dots" | "spinner";
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function LoadingIcon({ size, variant, className, ...restProps }: LoadingIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/LoadingIcon/LoadingIcon.js

@@ -1,19 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import styles from "./LoadingIcon.module.css";
-export function LoadingIcon(_a) {
-    var { size = "medium", variant = "dots", className } = _a, restProps = __rest(_a, ["size", "variant", "className"]);
-    const joinedClassNames = classNames(styles.loadingIcon, styles[size], styles[variant], className);
-    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: _jsx("div", {}) })));
-}

package/dist/LoadingIcon/LoadingIcon.module.css

@@ -1,98 +0,0 @@
-.extraSmall {
-    --size: 1.2rem;
-}
-.small {
-    --size: 2rem;
-}
-.medium {
-    --size: 2.4rem;
-}
-.large {
-    --size: 3rem;
-}
-.extraLarge {
-    --size: 5rem;
-}
-
-.loadingIcon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--size);
-    height: var(--size);
-    margin: auto;
-    box-sizing: border-box;
-    --color: #7d7d7d;
-}
-.spinner div {
-    display: flex;
-    width: 75%;
-    height: 75%;
-    --spinner-border: calc(var(--size) / 8);
-    border-top: var(--spinner-border) solid var(--color);
-    border-right: var(--spinner-border) solid transparent;
-    border-bottom: none;
-    border-left: none;
-    border-radius: 50%;
-    animation: spinner 1000ms linear infinite;
-}
-@keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.dots div {
-    width: 20%;
-    height: 20%;
-    border-radius: 50%;
-    background-color: var(--color);
-    --dots-space: calc(var(--size) / 3);
-    --dots-space-negative: calc(0rem - (var(--size) / 3));
-    box-shadow: var(--dots-space) 0 var(--color),
-        var(--dots-space-negative) 0 var(--color);
-    position: relative;
-    animation: flash 0.6s ease-out infinite alternate;
-}
-@keyframes flash {
-    0% {
-        background-color: var(--color);
-        box-shadow: var(--dots-space) 0 var(--color),
-            var(--dots-space-negative) 0 transparent;
-    }
-    50% {
-        background-color: transparent;
-        box-shadow: var(--dots-space) 0 var(--color),
-            var(--dots-space-negative) 0 var(--color);
-    }
-    100% {
-        background-color: var(--color);
-        box-shadow: var(--dots-space) 0 transparent,
-            var(--dots-space-negative) 0 var(--color);
-    }
-}
-
-.scaleOut div {
-    width: 90%;
-    height: 90%;
-    border-radius: 50%;
-    background-color: var(--color);
-    animation: sk-scaleout 1s infinite ease-in-out;
-}
-@keyframes sk-scaleout {
-    0% {
-        transform: scale(0);
-        opacity: 1;
-    }
-    5% {
-        transform: scale(0);
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.9;
-    }
-    100% {
-        transform: scale(1);
-        opacity: 0;
-    }
-}

package/dist/interactionHooks/useOnDoubleTap.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnDoubleTap<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnDoubleTap.js

@@ -1,23 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnDoubleTap(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const [lastTap, setLastTap] = useState(0);
-    const handleDoubleTap = useCallback((e) => {
-        const now = Date.now();
-        if (now - lastTap < 300) {
-            callback(e);
-        }
-        setLastTap(now);
-    }, [callback, lastTap]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("touchend", handleDoubleTap);
-        return () => {
-            element.removeEventListener("touchend", handleDoubleTap);
-        };
-    }, [handleDoubleTap, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnHoverChange.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnHoverChange<T extends HTMLElement = HTMLElement>(callback: (e: MouseEvent, hover: boolean) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnHoverChange.js

@@ -1,23 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export function useOnHoverChange(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const handleMouseEnter = useCallback((e) => {
-        window.matchMedia("(pointer: fine)").matches && callback(e, true);
-    }, [callback]);
-    const handleMouseLeave = useCallback((e) => {
-        window.matchMedia("(pointer: fine)").matches && callback(e, false);
-    }, [callback]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("mouseenter", handleMouseEnter);
-        element.addEventListener("mouseleave", handleMouseLeave);
-        return () => {
-            element.removeEventListener("mouseenter", handleMouseEnter);
-            element.removeEventListener("mouseleave", handleMouseLeave);
-        };
-    }, [handleMouseEnter, handleMouseLeave, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnOutsideClick.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnOutsideClick<T extends HTMLElement = HTMLElement>(callback: (e: MouseEvent) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnOutsideClick.js

@@ -1,21 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export function useOnOutsideClick(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const handleClick = useCallback((e) => {
-        e.preventDefault();
-        const element = targetRef.current;
-        if (!element)
-            return;
-        if (!element.contains(e.target)) {
-            callback(e);
-        }
-    }, [callback, targetRef]);
-    useEffect(() => {
-        document.addEventListener("click", handleClick);
-        return () => {
-            document.removeEventListener("click", handleClick);
-        };
-    }, [handleClick]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnPinch.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnPinch<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, action: "in" | "out") => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnPinch.js

@@ -1,35 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnPinch(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const [startDistance, setStartDistance] = useState(0);
-    const getDistance = (t1, t2) => Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-    const handleStart = useCallback((e) => {
-        if (e.touches.length === 2) {
-            const [t1, t2] = e.touches;
-            setStartDistance(getDistance(t1, t2));
-        }
-    }, []);
-    const handleMove = useCallback((e) => {
-        if (e.touches.length === 2) {
-            const [t1, t2] = e.touches;
-            const dist = getDistance(t1, t2);
-            if (dist < startDistance - 20)
-                callback(e, "in");
-            if (dist > startDistance + 20)
-                callback(e, "out");
-        }
-    }, [callback, startDistance]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("touchstart", handleStart);
-        element.addEventListener("touchmove", handleMove);
-        return () => {
-            element.removeEventListener("touchstart", handleStart);
-            element.removeEventListener("touchmove", handleMove);
-        };
-    }, [handleMove, handleStart, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnResizeChange.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnResizeChange<T extends HTMLElement = HTMLElement>(callback: (e: ResizeObserverEntry) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnResizeChange.js

@@ -1,23 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export function useOnResizeChange(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const handleResize = useCallback((e) => {
-        callback(e);
-    }, [callback]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        const resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                handleResize(entry);
-            }
-        });
-        resizeObserver.observe(element);
-        return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-        };
-    }, [handleResize, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnRightClick.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnRightClick<T extends HTMLElement = HTMLElement>(callback: (e: MouseEvent) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;