@lumx/core 3.21.1-alpha.0 → 3.21.2-alpha.0

package/js/constants/{keycodes.js → keycodes/index.js}

@@ -1,7 +1,3 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * The down key code.
  */
@@ -39,12 +35,4 @@ const UP_KEY_CODE = 38;
  */
 const BACKSPACE_KEY_CODE = 8;
 
-exports.BACKSPACE_KEY_CODE = BACKSPACE_KEY_CODE;
-exports.DOWN_KEY_CODE = DOWN_KEY_CODE;
-exports.ENTER_KEY_CODE = ENTER_KEY_CODE;
-exports.ESCAPE_KEY_CODE = ESCAPE_KEY_CODE;
-exports.LEFT_KEY_CODE = LEFT_KEY_CODE;
-exports.RIGHT_KEY_CODE = RIGHT_KEY_CODE;
-exports.SPACE_KEY_CODE = SPACE_KEY_CODE;
-exports.TAB_KEY_CODE = TAB_KEY_CODE;
-exports.UP_KEY_CODE = UP_KEY_CODE;
+export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEFT_KEY_CODE, RIGHT_KEY_CODE, SPACE_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE };

package/js/types/Direction.d.ts

@@ -0,0 +1 @@
+export type Direction = 'top' | 'right' | 'bottom' | 'left' | 'vertical' | 'horizontal' | 'all';

package/js/types/{GenericProps.ts → GenericProps.d.ts}

@@ -1,5 +1,4 @@
 import type { HasClassName } from './HasClassName';
-
 /**
  * Define a generic props types.
  */

package/js/types/HasAriaLabelOrLabelledBy.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+export type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+    /**
+     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+     * Although it is not recommended, aria-label can be used instead if no visible element is available.
+     */
+    'aria-labelledby': T;
+    /** The label of the dialog. */
+    'aria-label'?: undefined;
+} : {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+};

package/js/types/{HasTheme.ts → HasTheme.d.ts}

@@ -1,5 +1,4 @@
 import type { Theme } from '../constants';
-
 export interface HasTheme {
     /**
      * Theme adapting the component to light or dark background.

package/js/types/KebabCase.d.ts

@@ -0,0 +1,2 @@
+/** Transform a string literal into kebab case */
+export type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;

package/js/types/LumxClassName.d.ts

@@ -0,0 +1,3 @@
+import type { KebabCase } from './KebabCase';
+/** Transform the component name into the lumx class name. */
+export type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;

package/js/types/Point.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A point coordinate in 2D space
+ */
+export type Point = {
+    x: number;
+    y: number;
+};

package/js/types/RectSize.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Rectangle size
+ */
+export type RectSize = {
+    width: number;
+    height: number;
+};

package/js/types/Spacing.d.ts

@@ -0,0 +1 @@
+export type Spacing = 'margin' | 'padding';

package/js/types/{TextElement.ts → TextElement.d.ts}

@@ -1,4 +1,3 @@
 import type { HeadingElement } from './HeadingElement';
-
 /** Union type of all text elements */
 export type TextElement = 'span' | 'p' | HeadingElement;

package/js/types/{index.ts → index.d.ts}

@@ -11,3 +11,6 @@ export type { Predicate } from './Predicate';
 export type { RectSize } from './RectSize';
 export type { TextElement } from './TextElement';
 export type { ValueOf } from './ValueOf';
+export type { LumxClassName } from './LumxClassName';
+export type { Direction } from './Direction';
+export type { Spacing } from './Spacing';

package/js/types/index.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/utils/_internal/className/getBasicClass.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Get the basic CSS class for the given type.
+ *
+ * @param  prefix The class name prefix for the generated CSS class.
+ * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
+ * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
+ * @return The basic CSS class.
+ */
+export declare function getBasicClass({ prefix, type, value, }: {
+    prefix: string;
+    type: string;
+    value: string | number | boolean | undefined;
+}): string;

package/js/utils/_internal/className/handleBasicClasses.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Return all basic LumX CSS classes which are available for every components.
+ *
+ * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
+ *
+ * @param  prefix The class name prefix for the generated CSS class.
+ * @param  props  All the other props you want to generate a class.
+ *                The rule of thumb: the key is the name of the prop in the class, the value a string that will
+ *                be used in the classname to represent the value of the given prop.
+ * @return All LumX basic CSS classes.
+ */
+export declare function handleBasicClasses({ prefix, ...props }: {
+    prefix: string;
+    [prop: string]: any;
+}): string;

package/js/utils/_internal/className/index.d.ts

@@ -0,0 +1,2 @@
+export { handleBasicClasses } from './handleBasicClasses';
+export { getBasicClass } from './getBasicClass';

package/js/utils/_internal/color/index.d.ts

@@ -0,0 +1 @@
+export { resolveColorWithVariants } from './resolveColorWithVariants';

package/js/utils/_internal/color/resolveColorWithVariants.d.ts

@@ -0,0 +1,3 @@
+import type { ColorPalette, ColorVariant, ColorWithVariants } from '@lumx/core/js/constants';
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+export declare function resolveColorWithVariants(colorWithVariants?: ColorWithVariants, colorVariant?: ColorVariant): [color?: ColorPalette, colorVariant?: ColorVariant];

package/js/utils/classNames/color/index.d.ts

@@ -0,0 +1,43 @@
+import { ColorVariant, ColorWithVariants } from '@lumx/core/js/constants';
+/**
+ * Generates a Lumx color class name for the given type, color and variant.
+ * This is the base function used by font() and background() utilities.
+ *
+ * @param type - The color class type ('font' or 'background')
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx color class name or undefined if no color is provided
+ *
+ * @example
+ * color('font', 'dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * color('background', 'primary'); // 'lumx-color-background-primary-N'
+ * color('font', 'primary-L2'); // 'lumx-color-font-primary-L2'
+ * color('font', undefined); // undefined
+ */
+export declare function color(type: 'font' | 'background', propColor: ColorWithVariants, propColorVariant?: ColorVariant): string;
+/**
+ * Generates a Lumx background color class name for the given color and variant.
+ *
+ * @param propColor - The color palette name (e.g., 'primary', 'dark', 'light')
+ * @param propColorVariant - The color variant (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx background color class name
+ *
+ * @example
+ * background('dark', 'L2'); // 'lumx-color-background-dark-L2'
+ * background('primary', 'N'); // 'lumx-color-background-primary-N'
+ */
+export declare const background: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string;
+/**
+ * Generates a Lumx font color class name for the given color and variant.
+ *
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx font color class name or undefined if no color is provided
+ *
+ * @example
+ * font('dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * font('primary-L2'); // 'lumx-color-font-primary-L2'
+ * font('primary'); // 'lumx-color-font-primary-N'
+ * font(undefined); // undefined
+ */
+export declare const font: (propColor: ColorWithVariants, propColorVariant?: ColorVariant) => string;

package/js/utils/classNames/color/index.js

@@ -0,0 +1,50 @@
+import { ColorVariant } from '../../../constants/enums/index.js';
+import { resolveColorWithVariants } from '../../../../_internal/DPnPEC08.js';
+
+/**
+ * Generates a Lumx color class name for the given type, color and variant.
+ * This is the base function used by font() and background() utilities.
+ *
+ * @param type - The color class type ('font' or 'background')
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx color class name or undefined if no color is provided
+ *
+ * @example
+ * color('font', 'dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * color('background', 'primary'); // 'lumx-color-background-primary-N'
+ * color('font', 'primary-L2'); // 'lumx-color-font-primary-L2'
+ * color('font', undefined); // undefined
+ */
+function color(type, propColor, propColorVariant) {
+    const [cColor, cColorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+    return `lumx-color-${type}-${cColor}-${cColorVariant}`;
+}
+/**
+ * Generates a Lumx background color class name for the given color and variant.
+ *
+ * @param propColor - The color palette name (e.g., 'primary', 'dark', 'light')
+ * @param propColorVariant - The color variant (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx background color class name
+ *
+ * @example
+ * background('dark', 'L2'); // 'lumx-color-background-dark-L2'
+ * background('primary', 'N'); // 'lumx-color-background-primary-N'
+ */
+const background = (propColor, propColorVariant) => color('background', propColor, propColorVariant);
+/**
+ * Generates a Lumx font color class name for the given color and variant.
+ *
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx font color class name or undefined if no color is provided
+ *
+ * @example
+ * font('dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * font('primary-L2'); // 'lumx-color-font-primary-L2'
+ * font('primary'); // 'lumx-color-font-primary-N'
+ * font(undefined); // undefined
+ */
+const font = (propColor, propColorVariant) => color('font', propColor, propColorVariant);
+
+export { background, color, font };

package/js/utils/classNames/index.d.ts

@@ -0,0 +1,5 @@
+export { default as join } from 'classnames';
+export * from './color';
+export * from './typography';
+export * from './spacing';
+export * from './visually-hidden';

package/js/utils/classNames/index.js

@@ -0,0 +1,5 @@
+export { default as join } from 'classnames';
+export { background, color, font } from './color/index.js';
+export { typography } from './typography/index.js';
+export { margin, margins, padding, paddings, spacing, spacings } from './spacing/index.js';
+export { visuallyHidden } from './visually-hidden/index.js';

package/js/utils/classNames/spacing/index.d.ts

@@ -0,0 +1,70 @@
+import type { Direction, Spacing } from '@lumx/core/js/types';
+import type { Size } from '@lumx/core/js/constants';
+/**
+ * Returns a lumx classname for the given type, direction and size. For example, for
+ * arguments type='padding', direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * @param type - margin or padding
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+export declare function spacing(type: Spacing, direction?: Direction, size?: Size | null): string;
+/**
+ * Returns a list of lumx classnames for the given types, directions and sizes. For example, for
+ * arguments [
+ *  { type: 'padding', direction: 'right', size: 'regular'},
+ *  { type: 'margin', direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-padding-right-regular lumx-spacing-margin-left-big
+ * @param spacingConfigs - Array of spacing configurations with direction and size
+ * @returns string
+ */
+export declare const spacings: (spacingConfigs: {
+    type: Spacing;
+    direction?: Direction;
+    size?: Size | null;
+}[]) => string;
+/**
+ * Returns a lumx margin classname for the given direction and size. For example, for
+ * arguments direction='right', size='regular' it returns lumx-spacing-margin-right-regular
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+export declare const margin: (direction?: Direction, size?: Size | null) => string;
+/**
+ * Returns a list of lumx margin classnames for the given directions and sizes. For example, for
+ * arguments [
+ *  { direction: 'right', size: 'regular'},
+ *  { direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-margin-right-regular lumx-spacing-margin-left-big
+ * @param marginConfigs - Array of padding configurations with direction and size
+ * @returns string
+ */
+export declare const margins: (marginConfigs: {
+    direction?: Direction;
+    size?: Size | null;
+}[]) => string;
+/**
+ * Returns a lumx padding classname for the given direction and size. For example, for
+ * arguments direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+export declare const padding: (direction?: Direction, size?: Size | null) => string;
+/**
+ * Returns a list of lumx padding classnames for the given directions and sizes. For example, for
+ * arguments [
+ *  { direction: 'right', size: 'regular'},
+ *  { direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-padding-right-regular lumx-spacing-padding-left-big
+ * @param paddingConfigs - Array of padding configurations with direction and size
+ * @returns Combined padding classnames as a string
+ */
+export declare const paddings: (paddingConfigs: {
+    direction?: Direction;
+    size?: Size | null;
+}[]) => string;

package/js/utils/classNames/spacing/index.js

@@ -0,0 +1,74 @@
+import classnames from 'classnames';
+
+/**
+ * Returns a lumx classname for the given type, direction and size. For example, for
+ * arguments type='padding', direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * @param type - margin or padding
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+function spacing(type, direction, size) {
+    let baseClass = `lumx-spacing-${type}`;
+    if (direction && direction !== 'all') {
+        baseClass = `${baseClass}-${direction}`;
+    }
+    if (size) {
+        baseClass = `${baseClass}-${size}`;
+    }
+    else if (size === null) {
+        baseClass = `${baseClass}-none`;
+    }
+    return baseClass;
+}
+/**
+ * Returns a list of lumx classnames for the given types, directions and sizes. For example, for
+ * arguments [
+ *  { type: 'padding', direction: 'right', size: 'regular'},
+ *  { type: 'margin', direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-padding-right-regular lumx-spacing-margin-left-big
+ * @param spacingConfigs - Array of spacing configurations with direction and size
+ * @returns string
+ */
+const spacings = (spacingConfigs) => classnames(spacingConfigs.map((spa) => spacing(spa.type, spa.direction, spa.size)));
+/**
+ * Returns a lumx margin classname for the given direction and size. For example, for
+ * arguments direction='right', size='regular' it returns lumx-spacing-margin-right-regular
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+const margin = (direction, size) => spacing('margin', direction, size);
+/**
+ * Returns a list of lumx margin classnames for the given directions and sizes. For example, for
+ * arguments [
+ *  { direction: 'right', size: 'regular'},
+ *  { direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-margin-right-regular lumx-spacing-margin-left-big
+ * @param marginConfigs - Array of padding configurations with direction and size
+ * @returns string
+ */
+const margins = (marginConfigs) => spacings(marginConfigs.map(({ direction, size }) => ({ type: 'margin', direction, size })));
+/**
+ * Returns a lumx padding classname for the given direction and size. For example, for
+ * arguments direction='right', size='regular' it returns lumx-spacing-padding-right-regular
+ * @param direction - Direction
+ * @param size - Size
+ * @returns string
+ */
+const padding = (direction, size) => spacing('padding', direction, size);
+/**
+ * Returns a list of lumx padding classnames for the given directions and sizes. For example, for
+ * arguments [
+ *  { direction: 'right', size: 'regular'},
+ *  { direction: 'left', size: 'big'},
+ * ]
+ * it returns lumx-spacing-padding-right-regular lumx-spacing-padding-left-big
+ * @param paddingConfigs - Array of padding configurations with direction and size
+ * @returns Combined padding classnames as a string
+ */
+const paddings = (paddingConfigs) => spacings(paddingConfigs.map(({ direction, size }) => ({ type: 'padding', direction, size })));
+
+export { margin, margins, padding, paddings, spacing, spacings };

package/js/utils/classNames/typography/index.d.ts

@@ -0,0 +1,6 @@
+import type { Typography } from '@lumx/core/js/constants';
+/**
+ * Returns the classname associated to the given typography. For example, for Typography.title it returns
+ * lumx-typography-title
+ */
+export declare function typography(typo: Typography): string;

package/js/utils/classNames/typography/index.js

@@ -0,0 +1,9 @@
+/**
+ * Returns the classname associated to the given typography. For example, for Typography.title it returns
+ * lumx-typography-title
+ */
+function typography(typo) {
+    return `lumx-typography-${typo}`;
+}
+
+export { typography };

package/js/utils/classNames/visually-hidden/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Visually hidden class name.
+ * Used to hide elements from view but keep them readable from screen readers
+ */
+export declare const visuallyHidden: () => string;

package/js/utils/classNames/visually-hidden/index.js

@@ -0,0 +1,10 @@
+import '../../../constants/enums/index.js';
+import { VISUALLY_HIDDEN } from '../../../constants/className/index.js';
+
+/**
+ * Visually hidden class name.
+ * Used to hide elements from view but keep them readable from screen readers
+ */
+const visuallyHidden = () => VISUALLY_HIDDEN;
+
+export { visuallyHidden };

package/js/utils/events/index.d.ts

@@ -0,0 +1,2 @@
+export * from './keyboard';
+export * from './swipe';

package/js/utils/events/index.js

@@ -0,0 +1,2 @@
+export { onButtonPressed, onEnterPressed, onEscapePressed } from './keyboard.js';
+export { detectHorizontalSwipe } from './swipe.js';

package/js/utils/events/keyboard.d.ts

@@ -0,0 +1,24 @@
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+type KeyboardEventHandler<E extends KeyboardEvent | ReactKeyboardEvent> = (event: E) => void;
+/**
+ * Make sure the pressed key is the enter key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+export declare function onEnterPressed<E extends KeyboardEvent | ReactKeyboardEvent>(handler: KeyboardEventHandler<E>): KeyboardEventHandler<E>;
+/**
+ * Make sure the pressed key is the escape key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+export declare function onEscapePressed<E extends KeyboardEvent | ReactKeyboardEvent>(handler: KeyboardEventHandler<E>): KeyboardEventHandler<E>;
+/**
+ * Handle button key pressed (Enter + Space).
+ *
+ * @param  handler The handler to call.
+ * @return The decorated function.
+ */
+export declare function onButtonPressed<E extends KeyboardEvent | ReactKeyboardEvent>(handler: KeyboardEventHandler<E>): KeyboardEventHandler<E>;
+export {};

package/js/utils/events/keyboard.js

@@ -0,0 +1,44 @@
+/**
+ * Make sure the pressed key is the enter key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+function onEnterPressed(handler) {
+    return (evt) => {
+        if (evt.key !== 'Enter') {
+            return;
+        }
+        handler(evt);
+    };
+}
+/**
+ * Make sure the pressed key is the escape key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+function onEscapePressed(handler) {
+    return (evt) => {
+        if (evt.key !== 'Escape') {
+            return;
+        }
+        handler(evt);
+    };
+}
+/**
+ * Handle button key pressed (Enter + Space).
+ *
+ * @param  handler The handler to call.
+ * @return The decorated function.
+ */
+function onButtonPressed(handler) {
+    return (evt) => {
+        if (evt.key !== 'Enter' && evt.key !== ' ') {
+            return;
+        }
+        handler(evt);
+    };
+}
+
+export { onButtonPressed, onEnterPressed, onEscapePressed };

package/js/utils/events/swipe.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Detects horizontal swipe direction without blocking the browser scroll using passive event.
+ * @see http://javascriptkit.com/javatutors/touchevents2.shtml
+ * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ */
+export declare function detectHorizontalSwipe(touchSurface: Element, handleSwipe: (direction: 'right' | 'left') => void): () => void;

package/js/utils/events/swipe.js

@@ -0,0 +1,79 @@
+/**
+ * Checks whether the browser support passive events.
+ * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js
+ */
+function isPassiveEventAvailable() {
+    let supportsPassiveOption = false;
+    try {
+        const opts = Object.defineProperty({}, 'passive', {
+            get() {
+                supportsPassiveOption = true;
+            },
+        });
+        window.addEventListener('testPassiveEventSupport', () => { }, opts);
+        window.removeEventListener('testPassiveEventSupport', () => { }, opts);
+    }
+    catch (e) {
+        // ignored
+    }
+    return supportsPassiveOption;
+}
+/**
+ * Detects horizontal swipe direction without blocking the browser scroll using passive event.
+ * @see http://javascriptkit.com/javatutors/touchevents2.shtml
+ * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ */
+function detectHorizontalSwipe(touchSurface, handleSwipe) {
+    let startX;
+    let startY;
+    // Required min distance traveled to be considered swipe.
+    const threshold = 150;
+    // Maximum distance allowed at the same time in perpendicular direction.
+    const restraint = 150;
+    // Maximum time allowed to travel that distance.
+    const allowedTime = 300;
+    let elapsedTime;
+    let startTime;
+    let finished;
+    const onTouchStart = (evt) => {
+        const [touch] = Array.from(evt.changedTouches);
+        startX = touch.pageX;
+        startY = touch.pageY;
+        // Record time when finger first makes contact with surface.
+        startTime = new Date().getTime();
+        finished = false;
+    };
+    const onTouchMove = (evt) => {
+        if (finished) {
+            return;
+        }
+        elapsedTime = new Date().getTime() - startTime;
+        if (elapsedTime > allowedTime) {
+            // Touch swipe too long to be considered.
+            return;
+        }
+        const [touch] = Array.from(evt.changedTouches);
+        // Get horizontal dist traveled by finger while in contact with surface.
+        const distX = touch.pageX - startX;
+        // Get vertical dist traveled by finger while in contact with surface.
+        const distY = touch.pageY - startY;
+        if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {
+            // Swipe is not horizontal.
+            return;
+        }
+        // Swipe direction.
+        const direction = distX < 0 ? 'left' : 'right';
+        handleSwipe(direction);
+        finished = true;
+    };
+    // Activate passive event if possible for better scrolling performance.
+    const eventOptions = isPassiveEventAvailable() ? { passive: true } : false;
+    touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);
+    touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);
+    return () => {
+        touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);
+        touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
+    };
+}
+
+export { detectHorizontalSwipe };

package/js/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * as classNames from './classNames';
+export * from './events';