@uni-design-system/uni-react 0.0.8 → 0.0.10

package/dist/cjs/components/button/button.component.js

@@ -42,12 +42,12 @@ const react_1 = __importStar(require("react"));
 const core_1 = require("../../core");
 const icon_text_row_1 = require("../icon-text-row");
 const layout_hook_1 = __importDefault(require("../../core/layout/layout.hook"));
-const use_ripple_1 = __importDefault(require("../../core/hooks/use-ripple"));
+const use_ripple_hook_1 = __importDefault(require("use-ripple-hook"));
 const Button = (_a) => {
     var { text, children, buttonType = 'filled', disabled = false, iconName, onClick, disableRipple = false, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "onClick", "disableRipple", "style"]);
     const { deviceSize } = (0, layout_hook_1.default)();
     const theme = (0, core_1.useTheme)();
-    const [ref, createRipple] = (0, use_ripple_1.default)({ disabled: disableRipple || buttonType === 'elevated' });
+    const [ref, createRipple] = (0, use_ripple_hook_1.default)({ disabled: disableRipple || buttonType === 'elevated' });
     const buttonProps = theme.buttons[buttonType];
     const getOnColorToken = (color) => `on-${color}`;
     const defaultContentColor = getOnColorToken(buttonProps.color);

package/dist/cjs/components/card/card.component.js

@@ -6,18 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 const react_1 = __importDefault(require("react"));
 const core_1 = require("../../core");
-const framer_motion_1 = require("framer-motion");
 function Card({ children, cardType, elevation, colorToken = 'primary-container', width, height, borderRadius, }) {
     const { colors, containers } = (0, core_1.useTheme)();
     const { borderRadii } = containers.card;
     const style = Object.assign({ height,
-        width, position: 'fixed', backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, (0, core_1.Padding)('md', 'all'));
+        width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, (0, core_1.Padding)('md', 'all'));
     if (cardType === 'elevated') {
         style.boxShadow = (0, core_1.BoxShadow)(elevation || 'raised');
     }
     if (borderRadii && borderRadius !== 'none') {
         style.borderRadius = borderRadii[borderRadius || 'md'];
     }
-    return (react_1.default.createElement(framer_motion_1.motion.div, { style: style, initial: { y: 36, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: 36, opacity: 0 }, transition: { duration: 0.2 } }, children));
+    return react_1.default.createElement("div", { style: style }, children);
 }
 exports.Card = Card;

package/dist/cjs/components/modal/modal.component.js

@@ -7,6 +7,7 @@ exports.Modal = void 0;
 const react_1 = __importDefault(require("react"));
 const card_1 = require("../card");
 const core_1 = require("../../core");
+const framer_motion_1 = require("framer-motion");
 const ModalSizes = {
     sm: 260,
     md: 320,
@@ -15,6 +16,7 @@ const ModalSizes = {
 const Modal = ({ children, isOpen, size = 'lg' }) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(core_1.Overlay, { isOpen: isOpen },
-            react_1.default.createElement(card_1.Card, { colorToken: "background", width: ModalSizes[size], cardType: "elevated", elevation: "modal" }, children))));
+            react_1.default.createElement(framer_motion_1.motion.div, { style: { position: 'fixed' }, initial: { y: 36, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: 36, opacity: 0 }, transition: { duration: 0.2 } },
+                react_1.default.createElement(card_1.Card, { colorToken: "background", width: ModalSizes[size], cardType: "elevated", elevation: "modal" }, children)))));
 };
 exports.Modal = Modal;

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

@@ -1,3 +1,2 @@
 export * from './use-toggle';
-export * from './use-ripple';
 export * from './use-media';

package/dist/cjs/core/hooks/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./use-toggle"), exports);
-__exportStar(require("./use-ripple"), exports);
 __exportStar(require("./use-media"), exports);

package/dist/esm/components/button/button.component.js

@@ -13,7 +13,7 @@ import React, { useEffect, useState } from 'react';
 import { BoxShadow, Text, useTheme } from '../../core';
 import { IconTextRow } from '../icon-text-row';
 import useLayout from '../../core/layout/layout.hook';
-import useRipple from '../../core/hooks/use-ripple';
+import useRipple from 'use-ripple-hook';
 export const Button = (_a) => {
     var { text, children, buttonType = 'filled', disabled = false, iconName, onClick, disableRipple = false, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "onClick", "disableRipple", "style"]);
     const { deviceSize } = useLayout();

package/dist/esm/components/card/card.component.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import { BoxShadow, Padding, useTheme } from '../../core';
-import { motion } from 'framer-motion';
 export function Card({ children, cardType, elevation, colorToken = 'primary-container', width, height, borderRadius, }) {
     const { colors, containers } = useTheme();
     const { borderRadii } = containers.card;
     const style = Object.assign({ height,
-        width, position: 'fixed', backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, Padding('md', 'all'));
+        width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, Padding('md', 'all'));
     if (cardType === 'elevated') {
         style.boxShadow = BoxShadow(elevation || 'raised');
     }
     if (borderRadii && borderRadius !== 'none') {
         style.borderRadius = borderRadii[borderRadius || 'md'];
     }
-    return (React.createElement(motion.div, { style: style, initial: { y: 36, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: 36, opacity: 0 }, transition: { duration: 0.2 } }, children));
+    return React.createElement("div", { style: style }, children);
 }

package/dist/esm/components/modal/modal.component.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card } from '../card';
 import { Overlay } from '../../core';
+import { motion } from 'framer-motion';
 const ModalSizes = {
     sm: 260,
     md: 320,
@@ -9,5 +10,6 @@ const ModalSizes = {
 export const Modal = ({ children, isOpen, size = 'lg' }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Overlay, { isOpen: isOpen },
-            React.createElement(Card, { colorToken: "background", width: ModalSizes[size], cardType: "elevated", elevation: "modal" }, children))));
+            React.createElement(motion.div, { style: { position: 'fixed' }, initial: { y: 36, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: 36, opacity: 0 }, transition: { duration: 0.2 } },
+                React.createElement(Card, { colorToken: "background", width: ModalSizes[size], cardType: "elevated", elevation: "modal" }, children)))));
 };

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

@@ -1,3 +1,2 @@
 export * from './use-toggle';
-export * from './use-ripple';
 export * from './use-media';

package/dist/esm/core/hooks/index.js

@@ -1,3 +1,2 @@
 export * from './use-toggle';
-export * from './use-ripple';
 export * from './use-media';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-react",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "React component library for the UNI Design System.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -37,8 +37,9 @@
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@uni-design-system/uni-core": "^0.0.33",
-    "@uni-design-system/uni-react-icons": "^0.1.1",
-    "framer-motion": "4.1.17"
+    "@uni-design-system/uni-react-icons": "^0.1.2",
+    "framer-motion": "4.1.17",
+    "use-ripple-hook": "^1.0.22"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",

package/dist/cjs/core/hooks/use-ripple.d.ts

@@ -1,48 +0,0 @@
-/// <reference types="react" />
-export type Options<T extends HTMLElement = any> = {
-    duration: number;
-    color: string;
-    timingFunction: string;
-    disabled?: boolean;
-    className: string;
-    containerClassName: string;
-    ignoreNonLeftClick: boolean;
-    onSpawn?: (ctx: {
-        /** the ripple element */
-        readonly ripple: HTMLDivElement;
-        /** cancels the current ripple animation */
-        readonly cancelRipple: () => void;
-        /** the ref to the ripple host element */
-        readonly ref: React.RefObject<T>;
-        /** the event that triggered the ripple (ts: casting required) */
-        readonly event: unknown;
-        /** the ripple container element */
-        readonly container: HTMLDivElement;
-    }) => void;
-    cancelAutomatically: boolean;
-    ref: React.RefObject<T>;
-};
-export type MinimalEvent = {
-    clientX: number;
-    clientY: number;
-    nativeEvent?: {
-        which?: number;
-        type?: string;
-    };
-};
-/**
- * useRipple - Material UI style ripple effect React hook
- * @author Jonathan Asplund <jonathan@asplund.net>
- * @param inputOptions Ripple options
- * @returns Tuple `[ref, event]`. See https://github.com/asplunds/use-ripple for usage
- */
-export default function useRipple<T extends HTMLElement = any>(inputOptions?: Partial<Options<T>>): readonly [import("react").RefObject<any>, (event: MinimalEvent) => void];
-/**
- * HOF useRipple - Generate a custom ripple hook with predefined options
- *
- * After generating a HOF useRipple you can then override some or all predefined options by passing a new option object.
- * @author Jonathan Asplund <jonathan@asplund.net>
- * @param inputOptions ripple options
- * @returns Custom HOC useRipple hook
- */
-export declare function customRipple<T extends HTMLElement = any>(inputOptions?: Partial<Omit<Options<T>, 'ref'>>): (overrideOptions?: Partial<Options<T>>) => readonly [import("react").RefObject<any>, (event: MinimalEvent) => void];

package/dist/cjs/core/hooks/use-ripple.js

@@ -1,171 +0,0 @@
-"use strict";
-// https://github.com/asplunds/use-ripple
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.customRipple = void 0;
-const react_1 = require("react");
-const self = () => document;
-const completedFactor = 0.4;
-const className = '__useRipple--ripple';
-const containerClassName = '__useRipple--ripple-container';
-/**
- * useRipple - Material UI style ripple effect React hook
- * @author Jonathan Asplund <jonathan@asplund.net>
- * @param inputOptions Ripple options
- * @returns Tuple `[ref, event]`. See https://github.com/asplunds/use-ripple for usage
- */
-function useRipple(inputOptions) {
-    const internalRef = (0, react_1.useRef)(null);
-    const _a = Object.assign({ duration: 450, color: 'rgba(255, 255, 255, .3)', cancelAutomatically: false, timingFunction: 'cubic-bezier(.42,.36,.28,.88)', disabled: false, className,
-        containerClassName, ignoreNonLeftClick: true, ref: internalRef }, (inputOptions !== null && inputOptions !== void 0 ? inputOptions : {})), { ref } = _a, options = __rest(_a, ["ref"]);
-    const event = (0, react_1.useCallback)((event) => {
-        var _a, _b;
-        if (!ref.current ||
-            options.disabled ||
-            (options.ignoreNonLeftClick && ((_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.which) !== 1 && ((_b = event.nativeEvent) === null || _b === void 0 ? void 0 : _b.type) === 'mousedown'))
-            return;
-        const target = ref.current;
-        if (window.getComputedStyle(target).position === 'static')
-            void applyStyles([['position', 'relative']], target);
-        if (!target)
-            return;
-        const existingContainer = target.querySelector(`:scope > .${options.containerClassName}`);
-        const container = existingContainer !== null && existingContainer !== void 0 ? existingContainer : createRippleContainer(options.containerClassName);
-        if (!existingContainer)
-            target.appendChild(container);
-        // Used to ensure overflow: hidden is registered properly on IOS Safari before ripple is shown
-        void requestAnimationFrame(() => {
-            var _a;
-            const begun = Date.now();
-            const ripple = centerElementToPointer(event, target, createRipple(target, event, options));
-            const events = ['mouseup', 'touchend'];
-            const cancelRipple = () => {
-                const now = Date.now();
-                const diff = now - begun;
-                // Ensure the transform animation is complete before cancellation
-                void setTimeout(() => {
-                    void cancelRippleAnimation(ripple, options);
-                }, diff > 0.4 * options.duration ? 0 : completedFactor * options.duration - diff);
-                for (const event of events)
-                    void self().removeEventListener(event, cancelRipple);
-            };
-            if (!options.cancelAutomatically && !isTouchDevice())
-                for (const event of events)
-                    void self().addEventListener(event, cancelRipple);
-            else
-                setTimeout(() => void cancelRippleAnimation(ripple, options), options.duration * completedFactor);
-            void container.appendChild(ripple);
-            void ((_a = options.onSpawn) === null || _a === void 0 ? void 0 : _a.call(options, {
-                ripple,
-                cancelRipple,
-                event,
-                ref,
-                container,
-            }));
-        });
-    }, [ref, options]);
-    return [ref, event];
-}
-exports.default = useRipple;
-/**
- * HOF useRipple - Generate a custom ripple hook with predefined options
- *
- * After generating a HOF useRipple you can then override some or all predefined options by passing a new option object.
- * @author Jonathan Asplund <jonathan@asplund.net>
- * @param inputOptions ripple options
- * @returns Custom HOC useRipple hook
- */
-function customRipple(inputOptions) {
-    return (overrideOptions) => useRipple(Object.assign(Object.assign({}, inputOptions), overrideOptions));
-}
-exports.customRipple = customRipple;
-function centerElementToPointer(event, ref, element) {
-    const { top, left } = ref.getBoundingClientRect();
-    void element.style.setProperty('top', px(event.clientY - top));
-    void element.style.setProperty('left', px(event.clientX - left));
-    return element;
-}
-function px(arg) {
-    return `${arg}px`;
-}
-function createRipple(ref, event, { duration, color, timingFunction, className }, ctx = document) {
-    const element = ctx.createElement('div');
-    const { clientX, clientY } = event;
-    const { height, width, top, left } = ref.getBoundingClientRect();
-    const maxHeight = Math.max(clientY - top, height - clientY + top);
-    const maxWidth = Math.max(clientX - left, width - clientX + left);
-    // @ts-ignore
-    const size = px(Math.hypot(maxHeight, maxWidth) * 2);
-    const styles = [
-        ['position', 'absolute'],
-        ['height', size],
-        ['width', size],
-        ['transform', 'translate(-50%, -50%) scale(0)'],
-        ['pointer-events', 'none'],
-        ['border-radius', '50%'],
-        ['opacity', '.6'],
-        ['background', color],
-        [
-            'transition',
-            `transform ${duration * 0.6}ms ${timingFunction}, opacity ${Math.max(duration * 0.05, 140)}ms ease-out`,
-        ],
-    ];
-    void element.classList.add(className);
-    void window.requestAnimationFrame(() => {
-        void applyStyles([['transform', 'translate(-50%, -50%) scale(1)']], element);
-    });
-    return applyStyles(styles, element);
-}
-function applyStyles(styles, target) {
-    if (!target)
-        return target;
-    for (const [property, value] of styles) {
-        void target.style.setProperty(property, value);
-    }
-    return target;
-}
-function cancelRippleAnimation(element, options) {
-    const { duration, timingFunction } = options;
-    void applyStyles([
-        ['opacity', '0'],
-        [
-            'transition',
-            `transform ${duration * 0.6}ms ${timingFunction}, opacity ${duration * 0.65}ms ease-in-out ${duration * 0.13}ms`,
-        ],
-    ], element);
-    void window.requestAnimationFrame(() => {
-        void element.addEventListener('transitionend', (e) => {
-            if (e.propertyName === 'opacity')
-                void element.remove();
-        });
-    });
-}
-function createRippleContainer(className) {
-    const container = self().createElement('div');
-    void container.classList.add(className);
-    return applyStyles([
-        ['position', 'absolute'],
-        ['height', '100%'],
-        ['width', '100%'],
-        ['border-radius', 'inherit'],
-        ['top', '0'],
-        ['left', '0'],
-        ['pointer-events', 'none'],
-        ['overflow', 'hidden'],
-    ], container);
-}
-/** taken from https://stackoverflow.com/a/4819886/13188385 */
-function isTouchDevice() {
-    var _a;
-    return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.msMaxTouchPoints) !== null && _a !== void 0 ? _a : 0 > 0);
-}

package/dist/esm/core/hooks/use-ripple.d.ts

@@ -1,48 +0,0 @@
-/// <reference types="react" />
-export type Options<T extends HTMLElement = any> = {
-    duration: number;
-    color: string;
-    timingFunction: string;
-    disabled?: boolean;
-    className: string;
-    containerClassName: string;
-    ignoreNonLeftClick: boolean;
-    onSpawn?: (ctx: {
-        /** the ripple element */
-        readonly ripple: HTMLDivElement;
-        /** cancels the current ripple animation */
-        readonly cancelRipple: () => void;
-        /** the ref to the ripple host element */
-        readonly ref: React.RefObject<T>;
-        /** the event that triggered the ripple (ts: casting required) */
-        readonly event: unknown;
-        /** the ripple container element */
-        readonly container: HTMLDivElement;
-    }) => void;
-    cancelAutomatically: boolean;
-    ref: React.RefObject<T>;
-};
-export type MinimalEvent = {
-    clientX: number;
-    clientY: number;
-    nativeEvent?: {
-        which?: number;
-        type?: string;
-    };
-};
-/**
- * useRipple - Material UI style ripple effect React hook
- * @author Jonathan Asplund <jonathan@asplund.net>
- * @param inputOptions Ripple options
- * @returns Tuple `[ref, event]`. See https://github.com/asplunds/use-ripple for usage
- */
-export default function useRipple<T extends HTMLElement = any>(inputOptions?: Partial<Options<T>>): readonly [import("react").RefObject<any>, (event: MinimalEvent) => void];
-/**
- * HOF useRipple - Generate a custom ripple hook with predefined options
- *
- * After generating a HOF useRipple you can then override some or all predefined options by passing a new option object.
- * @author Jonathan Asplund <jonathan@asplund.net>
- * @param inputOptions ripple options
- * @returns Custom HOC useRipple hook
- */
-export declare function customRipple<T extends HTMLElement = any>(inputOptions?: Partial<Omit<Options<T>, 'ref'>>): (overrideOptions?: Partial<Options<T>>) => readonly [import("react").RefObject<any>, (event: MinimalEvent) => void];

package/dist/esm/core/hooks/use-ripple.js

@@ -1,166 +0,0 @@
-// https://github.com/asplunds/use-ripple
-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 { useCallback, useRef } from 'react';
-const self = () => document;
-const completedFactor = 0.4;
-const className = '__useRipple--ripple';
-const containerClassName = '__useRipple--ripple-container';
-/**
- * useRipple - Material UI style ripple effect React hook
- * @author Jonathan Asplund <jonathan@asplund.net>
- * @param inputOptions Ripple options
- * @returns Tuple `[ref, event]`. See https://github.com/asplunds/use-ripple for usage
- */
-export default function useRipple(inputOptions) {
-    const internalRef = useRef(null);
-    const _a = Object.assign({ duration: 450, color: 'rgba(255, 255, 255, .3)', cancelAutomatically: false, timingFunction: 'cubic-bezier(.42,.36,.28,.88)', disabled: false, className,
-        containerClassName, ignoreNonLeftClick: true, ref: internalRef }, (inputOptions !== null && inputOptions !== void 0 ? inputOptions : {})), { ref } = _a, options = __rest(_a, ["ref"]);
-    const event = useCallback((event) => {
-        var _a, _b;
-        if (!ref.current ||
-            options.disabled ||
-            (options.ignoreNonLeftClick && ((_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.which) !== 1 && ((_b = event.nativeEvent) === null || _b === void 0 ? void 0 : _b.type) === 'mousedown'))
-            return;
-        const target = ref.current;
-        if (window.getComputedStyle(target).position === 'static')
-            void applyStyles([['position', 'relative']], target);
-        if (!target)
-            return;
-        const existingContainer = target.querySelector(`:scope > .${options.containerClassName}`);
-        const container = existingContainer !== null && existingContainer !== void 0 ? existingContainer : createRippleContainer(options.containerClassName);
-        if (!existingContainer)
-            target.appendChild(container);
-        // Used to ensure overflow: hidden is registered properly on IOS Safari before ripple is shown
-        void requestAnimationFrame(() => {
-            var _a;
-            const begun = Date.now();
-            const ripple = centerElementToPointer(event, target, createRipple(target, event, options));
-            const events = ['mouseup', 'touchend'];
-            const cancelRipple = () => {
-                const now = Date.now();
-                const diff = now - begun;
-                // Ensure the transform animation is complete before cancellation
-                void setTimeout(() => {
-                    void cancelRippleAnimation(ripple, options);
-                }, diff > 0.4 * options.duration ? 0 : completedFactor * options.duration - diff);
-                for (const event of events)
-                    void self().removeEventListener(event, cancelRipple);
-            };
-            if (!options.cancelAutomatically && !isTouchDevice())
-                for (const event of events)
-                    void self().addEventListener(event, cancelRipple);
-            else
-                setTimeout(() => void cancelRippleAnimation(ripple, options), options.duration * completedFactor);
-            void container.appendChild(ripple);
-            void ((_a = options.onSpawn) === null || _a === void 0 ? void 0 : _a.call(options, {
-                ripple,
-                cancelRipple,
-                event,
-                ref,
-                container,
-            }));
-        });
-    }, [ref, options]);
-    return [ref, event];
-}
-/**
- * HOF useRipple - Generate a custom ripple hook with predefined options
- *
- * After generating a HOF useRipple you can then override some or all predefined options by passing a new option object.
- * @author Jonathan Asplund <jonathan@asplund.net>
- * @param inputOptions ripple options
- * @returns Custom HOC useRipple hook
- */
-export function customRipple(inputOptions) {
-    return (overrideOptions) => useRipple(Object.assign(Object.assign({}, inputOptions), overrideOptions));
-}
-function centerElementToPointer(event, ref, element) {
-    const { top, left } = ref.getBoundingClientRect();
-    void element.style.setProperty('top', px(event.clientY - top));
-    void element.style.setProperty('left', px(event.clientX - left));
-    return element;
-}
-function px(arg) {
-    return `${arg}px`;
-}
-function createRipple(ref, event, { duration, color, timingFunction, className }, ctx = document) {
-    const element = ctx.createElement('div');
-    const { clientX, clientY } = event;
-    const { height, width, top, left } = ref.getBoundingClientRect();
-    const maxHeight = Math.max(clientY - top, height - clientY + top);
-    const maxWidth = Math.max(clientX - left, width - clientX + left);
-    // @ts-ignore
-    const size = px(Math.hypot(maxHeight, maxWidth) * 2);
-    const styles = [
-        ['position', 'absolute'],
-        ['height', size],
-        ['width', size],
-        ['transform', 'translate(-50%, -50%) scale(0)'],
-        ['pointer-events', 'none'],
-        ['border-radius', '50%'],
-        ['opacity', '.6'],
-        ['background', color],
-        [
-            'transition',
-            `transform ${duration * 0.6}ms ${timingFunction}, opacity ${Math.max(duration * 0.05, 140)}ms ease-out`,
-        ],
-    ];
-    void element.classList.add(className);
-    void window.requestAnimationFrame(() => {
-        void applyStyles([['transform', 'translate(-50%, -50%) scale(1)']], element);
-    });
-    return applyStyles(styles, element);
-}
-function applyStyles(styles, target) {
-    if (!target)
-        return target;
-    for (const [property, value] of styles) {
-        void target.style.setProperty(property, value);
-    }
-    return target;
-}
-function cancelRippleAnimation(element, options) {
-    const { duration, timingFunction } = options;
-    void applyStyles([
-        ['opacity', '0'],
-        [
-            'transition',
-            `transform ${duration * 0.6}ms ${timingFunction}, opacity ${duration * 0.65}ms ease-in-out ${duration * 0.13}ms`,
-        ],
-    ], element);
-    void window.requestAnimationFrame(() => {
-        void element.addEventListener('transitionend', (e) => {
-            if (e.propertyName === 'opacity')
-                void element.remove();
-        });
-    });
-}
-function createRippleContainer(className) {
-    const container = self().createElement('div');
-    void container.classList.add(className);
-    return applyStyles([
-        ['position', 'absolute'],
-        ['height', '100%'],
-        ['width', '100%'],
-        ['border-radius', 'inherit'],
-        ['top', '0'],
-        ['left', '0'],
-        ['pointer-events', 'none'],
-        ['overflow', 'hidden'],
-    ], container);
-}
-/** taken from https://stackoverflow.com/a/4819886/13188385 */
-function isTouchDevice() {
-    var _a;
-    return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.msMaxTouchPoints) !== null && _a !== void 0 ? _a : 0 > 0);
-}