@yakad/ui 1.3.102 → 1.3.104

package/dist/InteractiveSurface/InteractiveSurface.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export interface InteractiveSurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    onRightClick?: (e: MouseEvent) => void;
+    onTap?: (e: TouchEvent) => void;
+    onDoubleTap?: (e: TouchEvent) => void;
+    onOutsideClick?: () => void;
+    onSwipeLeft?: () => void;
+    onSwipeRight?: () => void;
+    onSwipeUp?: () => void;
+    onSwipeDown?: () => void;
+    onPinchIn?: () => void;
+    onPinchOut?: () => void;
+    onRotate?: (angle: number) => void;
+    onScrollStart?: () => void;
+    onScrollStop?: () => void;
+    onResize?: (entry: ResizeObserverEntry) => void;
+    onVisibile?: () => void;
+    onHidden?: () => void;
+    onMouseHoverStart?: (e: MouseEvent) => void;
+    onMouseHoverLeave?: (e: MouseEvent) => void;
+    children?: React.ReactNode;
+}
+export declare const InteractiveSurface: import("react").ForwardRefExoticComponent<InteractiveSurfaceProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/InteractiveSurface/InteractiveSurface.js

@@ -0,0 +1,215 @@
+"use client";
+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 { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+export const InteractiveSurface = forwardRef((_a, forwardedRef) => {
+    var { children, onRightClick, onTap, onDoubleTap, onOutsideClick, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown, onPinchIn, onPinchOut, onRotate, onScrollStart, onScrollStop, onResize, onVisibile, onHidden, onMouseHoverStart, onMouseHoverLeave } = _a, restProps = __rest(_a, ["children", "onRightClick", "onTap", "onDoubleTap", "onOutsideClick", "onSwipeLeft", "onSwipeRight", "onSwipeUp", "onSwipeDown", "onPinchIn", "onPinchOut", "onRotate", "onScrollStart", "onScrollStop", "onResize", "onVisibile", "onHidden", "onMouseHoverStart", "onMouseHoverLeave"]);
+    const localRef = useRef(null);
+    // Let the parent access our DOM node
+    useImperativeHandle(forwardedRef, () => localRef.current);
+    useEffect(() => {
+        const el = localRef.current;
+        if (!el)
+            return;
+        // Event cleanup store
+        const cleanupFns = [];
+        // === RIGHT CLICK ===
+        if (onRightClick) {
+            const handler = (e) => {
+                e.preventDefault();
+                onRightClick(e);
+            };
+            el.addEventListener("contextmenu", handler);
+            cleanupFns.push(() => el.removeEventListener("contextmenu", handler));
+        }
+        // === OUTSIDE CLICK ===
+        if (onOutsideClick) {
+            const handler = (e) => {
+                if (!el.contains(e.target)) {
+                    onOutsideClick();
+                }
+            };
+            document.addEventListener("click", handler);
+            cleanupFns.push(() => document.removeEventListener("click", handler));
+        }
+        // === TAP & DOUBLE TAP ===
+        if (onTap || onDoubleTap) {
+            let lastTap = 0;
+            const tapHandler = (e) => {
+                const now = Date.now();
+                if (now - lastTap < 300) {
+                    onDoubleTap === null || onDoubleTap === void 0 ? void 0 : onDoubleTap(e);
+                }
+                else {
+                    onTap === null || onTap === void 0 ? void 0 : onTap(e);
+                }
+                lastTap = now;
+            };
+            el.addEventListener("touchend", tapHandler);
+            cleanupFns.push(() => el.removeEventListener("touchend", tapHandler));
+        }
+        // === SWIPE ===
+        if (onSwipeLeft || onSwipeRight || onSwipeUp || onSwipeDown) {
+            let startX = 0, startY = 0, endX = 0, endY = 0;
+            const touchStart = (e) => {
+                const t = e.touches[0];
+                startX = t.clientX;
+                startY = t.clientY;
+                endX = startX;
+                endY = startY;
+            };
+            const touchMove = (e) => {
+                const t = e.touches[0];
+                endX = t.clientX;
+                endY = t.clientY;
+            };
+            const touchEnd = () => {
+                const dx = endX - startX;
+                const dy = endY - startY;
+                const absDx = Math.abs(dx);
+                const absDy = Math.abs(dy);
+                const threshold = 30;
+                if (absDx > absDy) {
+                    if (dx > threshold)
+                        onSwipeRight === null || onSwipeRight === void 0 ? void 0 : onSwipeRight();
+                    if (dx < -threshold)
+                        onSwipeLeft === null || onSwipeLeft === void 0 ? void 0 : onSwipeLeft();
+                }
+                else {
+                    if (dy > threshold)
+                        onSwipeDown === null || onSwipeDown === void 0 ? void 0 : onSwipeDown();
+                    if (dy < -threshold)
+                        onSwipeUp === null || onSwipeUp === void 0 ? void 0 : onSwipeUp();
+                }
+            };
+            el.addEventListener("touchstart", touchStart);
+            el.addEventListener("touchmove", touchMove);
+            el.addEventListener("touchend", touchEnd);
+            cleanupFns.push(() => {
+                el.removeEventListener("touchstart", touchStart);
+                el.removeEventListener("touchmove", touchMove);
+                el.removeEventListener("touchend", touchEnd);
+            });
+        }
+        // === PINCH & ROTATE ===
+        if (onPinchIn || onPinchOut || onRotate) {
+            let startDistance = 0;
+            let startAngle = 0;
+            const getDistance = (t1, t2) => Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+            const getAngle = (t1, t2) => Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) *
+                (180 / Math.PI);
+            const handleStart = (e) => {
+                if (e.touches.length === 2) {
+                    const [t1, t2] = e.touches;
+                    startDistance = getDistance(t1, t2);
+                    startAngle = getAngle(t1, t2);
+                }
+            };
+            const handleMove = (e) => {
+                if (e.touches.length === 2) {
+                    const [t1, t2] = e.touches;
+                    const dist = getDistance(t1, t2);
+                    const angle = getAngle(t1, t2);
+                    if (dist < startDistance - 20)
+                        onPinchIn === null || onPinchIn === void 0 ? void 0 : onPinchIn();
+                    if (dist > startDistance + 20)
+                        onPinchOut === null || onPinchOut === void 0 ? void 0 : onPinchOut();
+                    const deltaAngle = angle - startAngle;
+                    if (Math.abs(deltaAngle) > 15) {
+                        onRotate === null || onRotate === void 0 ? void 0 : onRotate(deltaAngle);
+                    }
+                }
+            };
+            el.addEventListener("touchstart", handleStart);
+            el.addEventListener("touchmove", handleMove);
+            cleanupFns.push(() => {
+                el.removeEventListener("touchstart", handleStart);
+                el.removeEventListener("touchmove", handleMove);
+            });
+        }
+        // === RESIZE OBSERVER ===
+        let resizeObserver = null;
+        if (onResize) {
+            resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    onResize(entry);
+                }
+            });
+            resizeObserver.observe(el);
+            cleanupFns.push(() => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect());
+        }
+        // === VISIBILITY OBSERVER ===
+        let intersectionObserver = null;
+        if (onVisibile || onHidden) {
+            intersectionObserver = new IntersectionObserver((entries) => {
+                entries[0].isIntersecting ? onVisibile === null || onVisibile === void 0 ? void 0 : onVisibile() : onHidden === null || onHidden === void 0 ? void 0 : onHidden();
+            });
+            intersectionObserver.observe(el);
+            cleanupFns.push(() => intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect());
+        }
+        // === On Hover Change ===
+        const hasFinePointer = window.matchMedia("(pointer: fine)").matches;
+        if (hasFinePointer && (onMouseHoverStart || onMouseHoverLeave)) {
+            const mouseEnter = (e) => onMouseHoverStart === null || onMouseHoverStart === void 0 ? void 0 : onMouseHoverStart(e);
+            const mouseLeave = (e) => onMouseHoverLeave === null || onMouseHoverLeave === void 0 ? void 0 : onMouseHoverLeave(e);
+            el.addEventListener("mouseenter", mouseEnter);
+            el.addEventListener("mouseleave", mouseLeave);
+            cleanupFns.push(() => {
+                el.removeEventListener("mouseenter", mouseEnter);
+                el.removeEventListener("mouseleave", mouseLeave);
+            });
+        }
+        // === SCROLL START/END ===
+        if (onScrollStart) {
+            let scrolling = false;
+            let scrollTimeout;
+            const scrollHandler = () => {
+                if (!scrolling) {
+                    scrolling = true;
+                    onScrollStart === null || onScrollStart === void 0 ? void 0 : onScrollStart();
+                }
+                clearTimeout(scrollTimeout);
+                scrollTimeout = setTimeout(() => {
+                    scrolling = false;
+                    onScrollStop === null || onScrollStop === void 0 ? void 0 : onScrollStop();
+                }, 150);
+            };
+            el.addEventListener("scroll", scrollHandler);
+            cleanupFns.push(() => el.removeEventListener("scroll", scrollHandler));
+        }
+        // Cleanup on unmount
+        return () => {
+            cleanupFns.forEach((fn) => fn());
+        };
+    }, [
+        onRightClick,
+        onTap,
+        onDoubleTap,
+        onOutsideClick,
+        onSwipeLeft,
+        onSwipeRight,
+        onSwipeUp,
+        onSwipeDown,
+        onPinchIn,
+        onPinchOut,
+        onRotate,
+        onScrollStart,
+        onScrollStop,
+        onResize,
+        onVisibile,
+        onHidden,
+        onMouseHoverStart,
+        onMouseHoverLeave,
+    ]);
+    return (_jsx("div", Object.assign({ ref: localRef }, restProps, { children: children })));
+});

package/dist/index.d.ts

@@ -28,4 +28,4 @@ export * from "./RadioGroup/RadioGroup";
 export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
-export * from "./ClickOutsideListener/ClickOutsideListener";
+export * from "./InteractiveSurface/InteractiveSurface";

package/dist/index.js

@@ -33,4 +33,4 @@ export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 // Utilities
 export * from "./Display/Display";
-export * from "./ClickOutsideListener/ClickOutsideListener";
+export * from "./InteractiveSurface/InteractiveSurface";

package/package.json

@@ -1,14 +1,11 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.102",
+    "version": "1.3.104",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "sideEffects": [
-        "dist/globals.css"
-    ],
     "keywords": [
         "yakad",
         "react",
@@ -31,7 +28,7 @@
         "typecheck": "tsc --noEmit",
         "lint": "eslint src/**/*.{ts,tsx}",
         "test": "echo \"No tests specified\" && exit 0",
-        "prepublishOnly": "npm run build && npm run test && npm run lint && npm run typecheck && npm version patch"
+        "prepublishOnly": "npm run test && npm run build && npm run typecheck && npm version patch"
     },
     "dependencies": {
         "@yakad/symbols": "1.0.25",

package/dist/ClickOutsideListener/ClickOutsideListener.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface ClickOutsideListenerProps extends React.HTMLAttributes<HTMLDivElement> {
-    onclickoutside?: () => void;
-    children?: React.ReactNode;
-}
-export declare const ClickOutsideListener: ({ onclickoutside, children, ...restProps }: ClickOutsideListenerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ClickOutsideListener/ClickOutsideListener.js

@@ -1,28 +0,0 @@
-"use client";
-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 { useEffect, useRef } from "react";
-export const ClickOutsideListener = (_a) => {
-    var { onclickoutside, children } = _a, restProps = __rest(_a, ["onclickoutside", "children"]);
-    const ref = useRef(null);
-    useEffect(() => {
-        const handleOutSideClick = (event) => {
-            if (ref.current && !ref.current.contains(event.target))
-                onclickoutside === null || onclickoutside === void 0 ? void 0 : onclickoutside();
-        };
-        document.addEventListener("click", handleOutSideClick, true);
-        // CleanUp When element unmount
-        return () => document.removeEventListener("click", handleOutSideClick, true);
-    }, [onclickoutside]);
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { children: children })));
-};