@yakad/ui 1.3.155 → 1.3.157

package/dist/Avatar/Avatar.js

@@ -9,18 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Avatar.module.css";
 import { Symbol } from "@yakad/symbols";
-const DefaultAvatar = () => {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "256", height: "256", viewBox: "0 0 256 256", role: "img", "aria-label": "Default avatar", children: [_jsx("rect", { width: "100%", height: "100%", rx: "24", fill: "#E6EEF8" }), _jsxs("g", { transform: "translate(48,40)", fill: "none", fillRule: "evenodd", children: [_jsx("circle", { cx: "80", cy: "56", r: "40", fill: "#CBDFF6" }), _jsx("path", { d: "M0 152c0-44.18 35.82-80 80-80s80 35.82 80 80v8H0v-8z", fill: "#B6D0FB" })] })] }));
-};
 export const Avatar = forwardRef(function Avatar(_a, ref) {
     var { src, className } = _a, restProps = __rest(_a, ["src", "className"]);
     const joinedClassNames = classNames(styles.profileContainer, className);
-    const backgroundImage = src ? `url(${src})` : `url(${DefaultAvatar})`;
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: { backgroundImage }, children: _jsx("div", { className: styles.editOverlay, children: _jsx(Symbol, { icon: "edit" }) }) })));
+    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: src ? { backgroundImage: `url(${src})` } : {}, children: _jsx("div", { className: styles.editOverlay, children: _jsx(Symbol, { icon: "edit" }) }) })));
 });
 export default Avatar;

package/dist/Avatar/Avatar.module.css

@@ -1,4 +1,5 @@
 .profileContainer {
+    background-image: url("./default-avatar.svg");
     position: relative;
     width: 60px;
     height: 60px;

package/dist/Avatar/default-avatar.svg

@@ -0,0 +1,17 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="256"
+    height="256"
+    viewBox="0 0 256 256"
+    role="img"
+    aria-label="Default avatar"
+>
+    <rect width="100%" height="100%" rx="24" fill="#E6EEF8" />
+    <g transform="translate(48,40)" fill="none" fill-rule="evenodd">
+        <circle cx="80" cy="56" r="40" fill="#CBDFF6" />
+        <path
+            d="M0 152c0-44.18 35.82-80 80-80s80 35.82 80 80v8H0v-8z"
+            fill="#B6D0FB"
+        />
+    </g>
+</svg>

package/dist/Button/Button.js

@@ -13,12 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import { LoadingIcon } from "..";
+import boxingStyles from "../boxing.module.css";
 import styles from "./Button.module.css";
 export const Button = forwardRef(function Button(_a, ref) {
     var { fullWidthOnParentDemand = false, size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
     const childrenFirst = iconPosition === "end";
     const isloadingPositionCenter = !icon || loadingPosition === "center";
-    const joinedClassNames = classNames({ fullWidthOnParentDemand: fullWidthOnParentDemand }, styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
+    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
     return (_jsxs("button", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: [childrenFirst && children, loadingVariant && (_jsx("div", { className: classNames(styles.displayOnDisabled, {
                     [styles.positionCenter]: isloadingPositionCenter,
                 }), children: _jsx(LoadingIcon, { size: size, variant: loadingVariant }) })), icon, !childrenFirst && children] })));

package/dist/CheckBox/CheckBox.js

@@ -13,9 +13,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import { Symbol } from "@yakad/symbols";
+import boxingStyles from "../boxing.module.css";
 import styles from "./CheckBox.module.css";
 export const CheckBox = forwardRef(function CheckBox(_a, ref) {
     var { label, className, style } = _a, restProps = __rest(_a, ["label", "className", "style"]);
-    const joinedClassNames = classNames({ fullWidthOnParentDemand: label }, styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
+    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: label }, styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
     return (_jsxs("label", { className: joinedClassNames, style: style, children: [label, _jsx("input", Object.assign({ ref: ref }, restProps, { className: styles.input, type: "checkbox" })), _jsxs("div", { className: styles.symbolContainer, children: [_jsx(Symbol, { className: styles.symbolChecked, icon: "check_box" }), _jsx(Symbol, { className: styles.symbolUnChecked, icon: "check_box_outline_blank" })] })] }));
 });

package/dist/CodeBox/CodeBox.js

@@ -14,9 +14,10 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import { Symbol } from "@yakad/symbols";
 import { Button, Card } from "..";
+import boxingStyles from "../boxing.module.css";
 import styles from "./CodeBox.module.css";
 export const CodeBox = forwardRef(function CodeBox(_a, ref) {
     var { copyButton, className, children } = _a, restProps = __rest(_a, ["copyButton", "className", "children"]);
-    const joinedClassNames = classNames({ fullWidthOnParentDemand: true }, styles.ZZZZZZZZZZ, className);
+    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.ZZZZZZZZZZ, className);
     return (_jsxs(Card, Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: [_jsx("pre", { children: children }), copyButton && _jsx(Button, { icon: _jsx(Symbol, { icon: "copy_all" }) })] })));
 });

package/dist/CodeField/CodeField.js

@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
+import boxingStyles from "../boxing.module.css";
 import styles from "./CodeField.module.css";
 function isInputFilled(event, inputLength) {
     const targetInputElement = event.target;
@@ -32,7 +33,7 @@ function removeUnNumberChars(inputElement) {
 }
 export const CodeField = forwardRef(function CodeField(_a, ref) {
     var { length = 6, onFilled, autoComplete, pattern, onInput, className, style } = _a, restProps = __rest(_a, ["length", "onFilled", "autoComplete", "pattern", "onInput", "className", "style"]);
-    const joinedClassNames = classNames({ fullWidthOnParentDemand: true }, styles.input, className);
+    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.input, className);
     const joinedStyles = Object.assign(Object.assign({}, style), { width: `calc(1.5ch * ${length})` });
     return (_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: joinedStyles, type: "number", minLength: length, maxLength: length, autoComplete: autoComplete || "off", pattern: pattern || "[0-9]", onInput: (event) => {
             isInputFilled(event, length) && onFilled;

package/dist/Container/Container.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Container.module.css";
 export const Container = forwardRef(function Container(_a, ref) {
     var { size = "xl", align, className, children } = _a, restProps = __rest(_a, ["size", "align", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.container, styles[size], className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.container, styles[size], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Display/Display.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Display.module.css";
 export const Display = forwardRef(function Display(_a, ref) {
     var { align, fullWidthOnParentDemand = true, minWidth, maxWidth, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "minWidth", "maxWidth", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, { fullWidthOnParentDemand: fullWidthOnParentDemand }, { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, { [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Form/Form.js

@@ -16,6 +16,6 @@ import styles from "./Form.module.css";
 import boxingStyles from "../boxing.module.css";
 export const Form = forwardRef(function Form(_a, ref) {
     var { align, fullWidthOnParentDemand = true, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, { fullWidthOnParentDemand: fullWidthOnParentDemand }, styles.form, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, { [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles.form, className);
     return (_jsx("form", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/GridItem/GridItem.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./GridItem.module.css";
 export const GridItem = forwardRef(function GridItem(_a, ref) {
     var { align, xs, sm, md, lg, xl, className, children } = _a, restProps = __rest(_a, ["align", "xs", "sm", "md", "lg", "xl", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.gridItem, { [styles[`xs${xs}`]]: xs }, { [styles[`sm${sm}`]]: sm }, { [styles[`md${md}`]]: md }, { [styles[`lg${lg}`]]: lg }, { [styles[`xl${xl}`]]: xl }, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.gridItem, { [styles[`xs${xs}`]]: xs }, { [styles[`sm${sm}`]]: sm }, { [styles[`md${md}`]]: md }, { [styles[`lg${lg}`]]: lg }, { [styles[`xl${xl}`]]: xl }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/InputField/InputField.js

@@ -12,9 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
+import boxingStyles from "../boxing.module.css";
 import styles from "./InputField.module.css";
 export const InputField = forwardRef(function InputField(_a, ref) {
     var { variant = "outlined", boxSize = "normal", placeholder, className } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className"]);
     const joinedClassNames = classNames(styles.input, styles[variant], styles[boxSize], placeholder && styles.havePlaceHolder, className);
-    return (_jsxs("div", { className: classNames({ fullWidthOnParentDemand: true }, styles.div), children: [_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, placeholder: " " })), placeholder && (_jsx("label", { className: styles.label, children: placeholder }))] }));
+    return (_jsxs("div", { className: classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.div), children: [_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, placeholder: " " })), placeholder && (_jsx("label", { className: styles.label, children: placeholder }))] }));
 });

package/dist/List/List.js

@@ -12,9 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
+import boxingStyles from "../boxing.module.css";
 import styles from "./List.module.css";
 export const List = forwardRef(function List(_a, ref) {
     var { direction = "row", collapsed, className, children } = _a, restProps = __rest(_a, ["direction", "collapsed", "className", "children"]);
-    const joinedClassNames = classNames({ fullWidthOnParentDemand: true }, styles.list, styles[direction], { [styles.collapsed]: collapsed }, className);
+    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.list, styles[direction], { [styles.collapsed]: collapsed }, className);
     return (_jsx("ul", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/ListItem/ListItem.js

@@ -16,5 +16,5 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./ListItem.module.css";
 export const ListItem = forwardRef(function ListItem(_a, ref) {
     var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
-    return (_jsx("li", Object.assign({ ref: ref }, restProps, { className: classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.listItem, className), children: children })));
+    return (_jsx("li", Object.assign({ ref: ref }, restProps, { className: classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.listItem, className), children: children })));
 });

package/dist/Main/Main.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Main.module.css";
 export const Main = forwardRef(function Main(_a, ref) {
     var { align, navOpen = false, className, children } = _a, restProps = __rest(_a, ["align", "navOpen", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.main, { [styles.navOpen]: navOpen }, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.main, { [styles.navOpen]: navOpen }, className);
     return (_jsx("main", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Navigation/Navigation.js

@@ -16,7 +16,7 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Navigation.module.css";
 export const Navigation = forwardRef(function Navigation(_a, ref) {
     var { align, anchor = "auto", open = false, className, children } = _a, restProps = __rest(_a, ["align", "anchor", "open", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.navigation, styles[anchor], {
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.navigation, styles[anchor], {
         [styles.open]: open,
     }, className);
     return (_jsx("nav", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));

package/dist/Row/Row.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Row.module.css";
 export const Row = forwardRef(function Row(_a, ref) {
     var { align, fullWidthOnParentDemand = true, overflow = "shrink", size = "xl", className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "overflow", "size", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexRowBox, { [boxingStyles[align]]: align }, boxingStyles[overflow], styles.row, { fullWidthOnParentDemand: fullWidthOnParentDemand }, styles[size], className);
+    const joinedClassNames = classNames(boxingStyles.flexRowBox, { [boxingStyles[align]]: align }, boxingStyles[overflow], styles.row, { [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles[size], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Screen/Screen.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Screen.module.css";
 export const Screen = forwardRef(function Screen(_a, ref) {
     var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.screen, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.screen, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Select/Select.js

@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
+import boxingStyles from "../boxing.module.css";
 import styles from "./Select.module.css";
 import inputStyles from "../InputField/InputField.module.css";
 export const Select = forwardRef(function Select(_a, ref) {
     var { variant = "outlined", boxsize = "normal", placeholder, className, children } = _a, restProps = __rest(_a, ["variant", "boxsize", "placeholder", "className", "children"]);
     const joinedClassNames = classNames(styles.select, inputStyles.input, inputStyles[variant], inputStyles[boxsize], { [inputStyles.havePlaceHolder]: placeholder }, className);
-    return (_jsxs("div", { className: classNames({ fullWidthOnParentDemand: true }, inputStyles.div), children: [_jsx("select", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })), placeholder ? (_jsx("label", { className: inputStyles.label, children: placeholder })) : null] }));
+    return (_jsxs("div", { className: classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, inputStyles.div), children: [_jsx("select", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })), placeholder ? (_jsx("label", { className: inputStyles.label, children: placeholder })) : null] }));
 });

package/dist/Stack/Stack.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Stack.module.css";
 export const Stack = forwardRef(function Stack(_a, ref) {
     var { align, fullWidthOnParentDemand = true, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, { fullWidthOnParentDemand: fullWidthOnParentDemand }, styles.stack, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, { [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles.stack, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Table/Table.js

@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
+import boxingStyles from "../boxing.module.css";
 import styles from "./Table.module.css";
 export const Table = forwardRef(function Table(_a, ref) {
     var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames({ fullWidthOnParentDemand: true }, styles.table, className);
+    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.table, className);
     return (_jsx("table", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const Thead = forwardRef(function Thead(_a, ref) {

package/dist/Theme/Theme.js

@@ -22,6 +22,6 @@ export const Theme = forwardRef(function Theme(_a, ref) {
     useEffect(() => {
         document.documentElement.style.setProperty("font-size", zoomPercentage + "%");
     }, [zoomPercentage]);
-    const joinedClassNames = classNames({ portalRoot: true }, boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.theme, styles[darkStyle], styles[color], className);
+    const joinedClassNames = classNames({ portalRoot: true }, boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.theme, styles[darkStyle], styles[color], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/boxing.module.css

@@ -1,5 +1,5 @@
 /* Full Width Childs */
-:global(.demandChildsToBeFullWidth) > :global(.fullWidthOnParentDemand) {
+.demandChildsToBeFullWidth > .fullWidthOnParentDemand {
     width: 100%;
 }
 

package/dist/index.d.ts

@@ -35,3 +35,13 @@ 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/useOnResizeObserver";
+export * from "./interactionHooks/useOnVisibilityObserver";
+export * from "./interactionHooks/useOnHoverChange";
+export * from "./interactionHooks/useOnScroll";

package/dist/index.js

@@ -41,3 +41,13 @@ 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/useOnResizeObserver";
+export * from "./interactionHooks/useOnVisibilityObserver";
+export * from "./interactionHooks/useOnHoverChange";
+export * from "./interactionHooks/useOnScroll";

package/dist/interactionHooks/useOnDoubleTap.d.ts

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

package/dist/interactionHooks/useOnDoubleTap.js

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useOnDoubleTap(callback) {
+    const ref = useRef(null);
+    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 = ref.current;
+        if (!element)
+            return;
+        element.addEventListener("touchend", handleDoubleTap);
+        return () => {
+            element.removeEventListener("touchend", handleDoubleTap);
+        };
+    }, [handleDoubleTap]);
+    return ref;
+}

package/dist/interactionHooks/useOnHoverChange.d.ts

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

package/dist/interactionHooks/useOnHoverChange.js

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

package/dist/interactionHooks/useOnOutsideClick.d.ts

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

package/dist/interactionHooks/useOnOutsideClick.js

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

package/dist/interactionHooks/useOnPinch.d.ts

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

package/dist/interactionHooks/useOnPinch.js

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useOnPinch(callback) {
+    const ref = useRef(null);
+    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 = ref.current;
+        if (!element)
+            return;
+        element.addEventListener("touchstart", handleStart);
+        element.addEventListener("touchmove", handleMove);
+        return () => {
+            element.removeEventListener("touchstart", handleStart);
+            element.removeEventListener("touchmove", handleMove);
+        };
+    }, [handleMove, handleStart]);
+    return ref;
+}

package/dist/interactionHooks/useOnResizeObserver.d.ts

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

package/dist/interactionHooks/useOnResizeObserver.js

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef } from "react";
+export function useOnResizeObserver(callback) {
+    const ref = useRef(null);
+    const handleResize = useCallback((e) => {
+        callback(e);
+    }, [callback]);
+    useEffect(() => {
+        const element = ref.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]);
+    return ref;
+}

package/dist/interactionHooks/useOnRightClick.d.ts

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

package/dist/interactionHooks/useOnRightClick.js

@@ -0,0 +1,18 @@
+import { useCallback, useEffect, useRef } from "react";
+export function useOnRightClick(callback) {
+    const ref = useRef(null);
+    const handleContextMenu = useCallback((e) => {
+        e.preventDefault();
+        callback(e);
+    }, [callback]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.addEventListener("contextmenu", handleContextMenu);
+        return () => {
+            element.removeEventListener("contextmenu", handleContextMenu);
+        };
+    }, [handleContextMenu]);
+    return ref;
+}

package/dist/interactionHooks/useOnRotate.d.ts

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

package/dist/interactionHooks/useOnRotate.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useOnRotate(callback) {
+    const ref = useRef(null);
+    const [startAngle, setStartAngle] = useState(0);
+    const getAngle = (t1, t2) => Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) *
+        (180 / Math.PI);
+    const handleStart = useCallback((e) => {
+        if (e.touches.length === 2) {
+            const [t1, t2] = e.touches;
+            setStartAngle(getAngle(t1, t2));
+        }
+    }, []);
+    const handleMove = useCallback((e) => {
+        if (e.touches.length === 2) {
+            const [t1, t2] = e.touches;
+            const angle = getAngle(t1, t2);
+            const deltaAngle = angle - startAngle;
+            if (Math.abs(deltaAngle) > 15) {
+                callback(e, deltaAngle);
+            }
+        }
+    }, [callback, startAngle]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.addEventListener("touchstart", handleStart);
+        element.addEventListener("touchmove", handleMove);
+        return () => {
+            element.removeEventListener("touchstart", handleStart);
+            element.removeEventListener("touchmove", handleMove);
+        };
+    }, [handleMove, handleStart]);
+    return ref;
+}

package/dist/interactionHooks/useOnScroll.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare function useOnScroll<T extends HTMLElement = HTMLElement>(callback: (action: "start" | "stop") => void): RefObject<T | null>;

package/dist/interactionHooks/useOnScroll.js

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef } from "react";
+export function useOnScroll(callback) {
+    const ref = useRef(null);
+    const scrollTimeoutRef = useRef(undefined);
+    const scrollingRef = useRef(false);
+    const handleScroll = useCallback(() => {
+        console.log("bb123");
+        if (!scrollingRef.current) {
+            scrollingRef.current = true;
+            callback("start");
+        }
+        clearTimeout(scrollTimeoutRef.current);
+        scrollTimeoutRef.current = setTimeout(() => {
+            scrollingRef.current = false;
+            callback("stop");
+        }, 150);
+    }, [callback]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.addEventListener("scroll", handleScroll);
+        return () => {
+            element.removeEventListener("scroll", handleScroll);
+            clearTimeout(scrollTimeoutRef.current);
+        };
+    }, [handleScroll]);
+    return ref;
+}

package/dist/interactionHooks/useOnSwipe.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare function useOnSwipe<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, direction: "left" | "right" | "up" | "down") => void): RefObject<T | null>;

package/dist/interactionHooks/useOnSwipe.js

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useOnSwipe(callback) {
+    const ref = useRef(null);
+    const [swipeCoordinates, setSwipeCoordinates] = useState({
+        startX: 0,
+        startY: 0,
+        endX: 0,
+        endY: 0,
+    });
+    const touchStart = useCallback((e) => {
+        const t = e.touches[0];
+        setSwipeCoordinates(prev => (Object.assign(Object.assign({}, prev), { startX: t.clientX, startY: t.clientY, endX: t.clientX, endY: t.clientY })));
+    }, []);
+    const touchMove = useCallback((e) => {
+        const t = e.touches[0];
+        setSwipeCoordinates(prev => (Object.assign(Object.assign({}, prev), { endX: t.clientX, endY: t.clientY })));
+    }, []);
+    const touchEnd = useCallback((e) => {
+        // Could do unpacking of object but its not necessary
+        const dx = swipeCoordinates.endX - swipeCoordinates.startX;
+        const dy = swipeCoordinates.endY - swipeCoordinates.startY;
+        const absDx = Math.abs(dx);
+        const absDy = Math.abs(dy);
+        const threshold = 30;
+        if (absDx > absDy) {
+            if (dx > threshold)
+                callback(e, "right");
+            if (dx < -threshold)
+                callback(e, "left");
+        }
+        else {
+            if (dy > threshold)
+                callback(e, "down");
+            if (dy < -threshold)
+                callback(e, "up");
+        }
+    }, [callback, swipeCoordinates.endX, swipeCoordinates.startX, swipeCoordinates.endY, swipeCoordinates.startY]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.addEventListener("touchstart", touchStart, { passive: true });
+        element.addEventListener("touchmove", touchMove, { passive: true });
+        element.addEventListener("touchend", touchEnd, { passive: true });
+        return () => {
+            element.removeEventListener("touchstart", touchStart);
+            element.removeEventListener("touchmove", touchMove);
+            element.removeEventListener("touchend", touchEnd);
+        };
+    }, [touchStart, touchMove, touchEnd]);
+    return ref;
+}

package/dist/interactionHooks/useOnVisibilityObserver.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare function useOnVisibilityObserver<T extends HTMLElement = HTMLElement>(callback: (action: "visible" | "hidden") => void): RefObject<T | null>;

package/dist/interactionHooks/useOnVisibilityObserver.js

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useRef } from "react";
+export function useOnVisibilityObserver(callback) {
+    const ref = useRef(null);
+    const handleVisibility = useCallback((action) => {
+        callback(action);
+    }, [callback]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const intersectionObserver = new IntersectionObserver((entries) => {
+            entries[0].isIntersecting ? handleVisibility("visible") : handleVisibility("hidden");
+        });
+        intersectionObserver.observe(element);
+        return () => {
+            intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect();
+        };
+    }, [handleVisibility]);
+    return ref;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.155",
+    "version": "1.3.157",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@yakad/lib": "1.0.22",
-        "@yakad/symbols": "1.0.25",
+        "@yakad/symbols": "^1.0.28",
         "classnames": "2.5.1"
     },
     "peerDependencies": {
@@ -47,4 +47,4 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     }
-}
+}