@laser-ui/components 0.0.1

package/separator/Separator.js

@@ -0,0 +1,19 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export function Separator(props) {
+    const _a = useComponentProps('Separator', props), { children, styleOverrides, styleProvider, textAlign = 'left', vertical = false } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "textAlign", "vertical"]);
+    const styled = useStyled(CLASSES, { separator: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.separator }, styleOverrides);
+    const hasText = checkNodeExist(children);
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('separator', {
+        'separator--text': hasText,
+        [`separator--text-${textAlign}`]: hasText,
+        'separator--vertical': vertical,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { role: "separator", "aria-orientation": vertical ? 'vertical' : 'horizontal', children: hasText && _jsx("div", Object.assign({}, styled('separator__text'), { children: children })) })));
+}

package/separator/index.d.ts

@@ -0,0 +1,2 @@
+export type { SeparatorProps } from './types';
+export { Separator } from './Separator';

package/separator/index.js

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

package/separator/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface SeparatorProps extends BaseProps<'separator', typeof CLASSES>, React.HTMLAttributes<HTMLElement> {
+    textAlign?: 'left' | 'right' | 'center';
+    vertical?: boolean;
+}

package/separator/types.js

@@ -0,0 +1 @@
+export {};

package/separator/vars.d.ts

@@ -0,0 +1,9 @@
+export declare const CLASSES: {
+    separator: string;
+    'separator--text': string;
+    'separator--text-left': string;
+    'separator--text-right': string;
+    'separator--text-center': string;
+    'separator--vertical': string;
+    separator__text: string;
+};

package/separator/vars.js

@@ -0,0 +1,9 @@
+export const CLASSES = {
+    separator: '^separator',
+    'separator--text': '^separator--text',
+    'separator--text-left': '^separator--text-left',
+    'separator--text-right': '^separator--text-right',
+    'separator--text-center': '^separator--text-center',
+    'separator--vertical': '^separator--vertical',
+    separator__text: '^separator__text',
+};

package/skeleton/Skeleton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SkeletonProps } from './types';
+export declare function Skeleton(props: SkeletonProps): JSX.Element | null;

package/skeleton/Skeleton.js

@@ -0,0 +1,13 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export function Skeleton(props) {
+    const _a = useComponentProps('Skeleton', props), { children, styleOverrides, styleProvider, pattern = 'text' } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "pattern"]);
+    const styled = useStyled(CLASSES, { skeleton: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.skeleton }, styleOverrides);
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('skeleton', `skeleton--${pattern}`), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: children })));
+}

package/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export type { SkeletonProps } from './types';
+export { Skeleton } from './Skeleton';

package/skeleton/index.js

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

package/skeleton/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface SkeletonProps extends BaseProps<'skeleton', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    pattern?: 'text' | 'circular' | 'rect';
+}

package/skeleton/types.js

@@ -0,0 +1 @@
+export {};

package/skeleton/vars.d.ts

@@ -0,0 +1,6 @@
+export declare const CLASSES: {
+    skeleton: string;
+    'skeleton--text': string;
+    'skeleton--circular': string;
+    'skeleton--rect': string;
+};

package/skeleton/vars.js

@@ -0,0 +1,6 @@
+export const CLASSES = {
+    skeleton: '^skeleton',
+    'skeleton--text': '^skeleton--text',
+    'skeleton--circular': '^skeleton--circular',
+    'skeleton--rect': '^skeleton--rect',
+};

package/slider/Slider.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SliderProps } from './types';
+export declare function Slider(props: SliderProps): JSX.Element | null;

package/slider/Slider.js

@@ -0,0 +1,324 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEvent, useRefExtra } from '@laser-ui/hooks';
+import { isArray, isNull, isNumber, toNumber } from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled } from '../hooks';
+import { Tooltip } from '../tooltip';
+import { mergeCS } from '../utils';
+export function Slider(props) {
+    const _a = useComponentProps('Slider', props), { styleOverrides, styleProvider, formControl, model, defaultModel, max = 100, min = 0, step = 1, range = false, rangeMinDistance, rangeThumbDraggable = false, tooltip, customTooltip, marks, vertical = false, reverse = false, disabled: disabledProp = false, inputRef, inputRender, onModelChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "max", "min", "step", "range", "rangeMinDistance", "rangeThumbDraggable", "tooltip", "customTooltip", "marks", "vertical", "reverse", "disabled", "inputRef", "inputRender", "onModelChange"]);
+    const styled = useStyled(CLASSES, { slider: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.slider }, styleOverrides);
+    const sliderRef = useRef(null);
+    const dotLeftRef = useRef(null);
+    const dotRightRef = useRef(null);
+    const tooltipLeftRef = useRef(null);
+    const tooltipRightRef = useRef(null);
+    const windowRef = useRefExtra(() => window);
+    const [dotFocused, setDotFocused] = useState(null);
+    const [dotVisible, setDotVisible] = useState(null);
+    const [dotDraggable, setDotDraggable] = useState(null);
+    const [thumbDraggingPoint, setThumbDraggingPoint] = useState(null);
+    const [value, changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : (range ? [0, 0] : 0), model, onModelChange, (a, b) => {
+        if (isNumber(a) && isNumber(b)) {
+            return a === b;
+        }
+        else if (isArray(a) && isArray(b)) {
+            return a[0] === b[0] && a[1] === b[1];
+        }
+        return false;
+    }, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const [valueLeft, valueRight = 0] = (range ? value : [value]);
+    const [visibleLeft, visibleRight] = (() => {
+        var _a, _b;
+        if (range) {
+            return [
+                (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip[0]) !== null && _a !== void 0 ? _a : (dotVisible === 'left' ? true : !!(dotFocused === 'left' || thumbDraggingPoint)),
+                (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip[1]) !== null && _b !== void 0 ? _b : (dotVisible === 'right' ? true : !!(dotFocused === 'right' || thumbDraggingPoint)),
+            ];
+        }
+        else {
+            return [tooltip !== null && tooltip !== void 0 ? tooltip : (dotVisible === 'left' ? true : !!(dotFocused === 'left' || thumbDraggingPoint)), false];
+        }
+    })();
+    const { disabled } = useScopedProps({ disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const getValue = (value, func = 'round') => {
+        let newValue = null;
+        if (step) {
+            const n = Math[func](value / step);
+            newValue = Math.min(max, Math.max(min, n * step));
+        }
+        if (isArray(marks)) {
+            let min = newValue ? Math.abs(newValue - value) : Infinity;
+            if (min > 0) {
+                for (const mark of marks) {
+                    const v = isNumber(mark) ? mark : mark.value;
+                    if (func === 'round' || (func === 'ceil' && v - value >= 0) || (func === 'floor' && v - value <= 0)) {
+                        const offset = Math.abs(v - value);
+                        if (offset < min) {
+                            min = offset;
+                            newValue = v;
+                        }
+                    }
+                }
+            }
+        }
+        return newValue !== null && newValue !== void 0 ? newValue : min;
+    };
+    const handleMove = (e, isLeft) => {
+        isLeft = isLeft !== null && isLeft !== void 0 ? isLeft : dotFocused === 'left';
+        if (sliderRef.current) {
+            const rect = sliderRef.current.getBoundingClientRect();
+            const newValue = getValue((max - min) *
+                (vertical
+                    ? (reverse ? e.clientY - rect.top : rect.bottom - e.clientY) / rect.height
+                    : (reverse ? rect.right - e.clientX : e.clientX - rect.left) / rect.width));
+            if (range) {
+                changeValue((draft) => {
+                    const index = isLeft ? 0 : 1;
+                    if (draft[index] !== newValue) {
+                        const offset = newValue - draft[index];
+                        const isAdd = offset > 0;
+                        draft[index] = newValue;
+                        if (isNumber(rangeMinDistance) && draft[1] - draft[0] < rangeMinDistance) {
+                            const _index = isLeft ? 1 : 0;
+                            draft[_index] = getValue(draft[_index] + offset, isAdd ? 'ceil' : 'floor');
+                            if (draft[1] - draft[0] < rangeMinDistance) {
+                                draft[index] = getValue(draft[_index] + (isAdd ? -rangeMinDistance : rangeMinDistance), isAdd ? 'floor' : 'ceil');
+                            }
+                        }
+                    }
+                });
+            }
+            else {
+                changeValue(newValue);
+            }
+        }
+    };
+    const handleThumbMove = (e) => {
+        if (step && thumbDraggingPoint && sliderRef.current) {
+            const rect = sliderRef.current.getBoundingClientRect();
+            const offset = Math.round(((max - min) *
+                (vertical
+                    ? (reverse ? e.clientY - thumbDraggingPoint.clientY : thumbDraggingPoint.clientY - e.clientY) / rect.height
+                    : (reverse ? thumbDraggingPoint.clientX - e.clientX : e.clientX - thumbDraggingPoint.clientX) / rect.width)) /
+                step) * step;
+            const value = [0, 0];
+            let index = -1;
+            for (const v of [thumbDraggingPoint.left + offset, thumbDraggingPoint.right + offset]) {
+                index += 1;
+                const _index = index === 0 ? 1 : 0;
+                if (v < min) {
+                    value[index] = min;
+                    value[_index] = min + Math.abs(thumbDraggingPoint.left - thumbDraggingPoint.right);
+                    break;
+                }
+                if (v > max) {
+                    value[index] = max;
+                    value[_index] = max - Math.abs(thumbDraggingPoint.left - thumbDraggingPoint.right);
+                    break;
+                }
+                value[index] = v;
+            }
+            changeValue(value);
+        }
+    };
+    const startDrag = (e) => {
+        const handle = (isLeft = true) => {
+            const el = isLeft ? dotLeftRef.current : dotRightRef.current;
+            if (el) {
+                handleMove(e, isLeft);
+                setDotDraggable(isLeft ? 'left' : 'right');
+                el.firstElementChild.focus({ preventScroll: true });
+            }
+        };
+        if (range) {
+            if (dotLeftRef.current && dotRightRef.current) {
+                const rectLeft = dotLeftRef.current.getBoundingClientRect();
+                const rectRight = dotRightRef.current.getBoundingClientRect();
+                const offsetLeft = vertical
+                    ? Math.abs(rectLeft.bottom - rectLeft.height / 2 - e.clientY)
+                    : Math.abs(e.clientX - (rectLeft.left + rectLeft.width / 2));
+                const offsetRight = vertical
+                    ? Math.abs(rectRight.bottom - rectRight.height / 2 - e.clientY)
+                    : Math.abs(e.clientX - (rectRight.left + rectRight.width / 2));
+                if (rangeThumbDraggable &&
+                    (vertical ? e.clientY < Math.max(rectLeft.top, rectRight.top) : e.clientX > Math.min(rectLeft.right, rectRight.right)) &&
+                    (vertical ? e.clientY > Math.min(rectLeft.bottom, rectRight.bottom) : e.clientX < Math.max(rectLeft.left, rectRight.left))) {
+                    setThumbDraggingPoint({ left: valueLeft, right: valueRight, clientX: e.clientX, clientY: e.clientY });
+                }
+                else {
+                    if (offsetRight <= offsetLeft) {
+                        handle(false);
+                    }
+                    else {
+                        handle(true);
+                    }
+                }
+            }
+        }
+        else {
+            handle(true);
+        }
+    };
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (thumbDraggingPoint) {
+            (_a = tooltipLeftRef.current) === null || _a === void 0 ? void 0 : _a.updatePosition();
+            (_b = tooltipRightRef.current) === null || _b === void 0 ? void 0 : _b.updatePosition();
+        }
+        else {
+            if (dotFocused === 'left') {
+                (_c = tooltipLeftRef.current) === null || _c === void 0 ? void 0 : _c.updatePosition();
+            }
+            else if (dotFocused === 'right') {
+                (_d = tooltipRightRef.current) === null || _d === void 0 ? void 0 : _d.updatePosition();
+            }
+        }
+    }, [value, dotFocused, thumbDraggingPoint]);
+    const listenDragEvent = !isNull(dotDraggable) || !isNull(thumbDraggingPoint);
+    useEvent(windowRef, 'touchmove', (e) => {
+        if (!isNull(dotDraggable)) {
+            e.preventDefault();
+            handleMove({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
+        }
+        if (!isNull(thumbDraggingPoint)) {
+            e.preventDefault();
+            handleThumbMove({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
+        }
+    }, { passive: false }, !listenDragEvent);
+    useEvent(windowRef, 'mousemove', (e) => {
+        if (!isNull(dotDraggable)) {
+            e.preventDefault();
+            handleMove({ clientX: e.clientX, clientY: e.clientY });
+        }
+        if (!isNull(thumbDraggingPoint)) {
+            e.preventDefault();
+            handleThumbMove({ clientX: e.clientX, clientY: e.clientY });
+        }
+    }, {}, !listenDragEvent);
+    useEvent(windowRef, 'mouseup', () => {
+        setDotDraggable(null);
+        setThumbDraggingPoint(null);
+    }, {}, !listenDragEvent);
+    const markNodes = (() => {
+        const nodes = [];
+        const getNode = (value, label = null) => {
+            let percentage = (value / (max - min)) * 100;
+            if (reverse) {
+                percentage = 100 - percentage;
+            }
+            nodes.push(_createElement("div", Object.assign({}, mergeCS(styled('slider__mark', {
+                'slider__mark--hidden': value === min || value === max,
+            }), {
+                style: {
+                    left: vertical ? undefined : `${percentage}%`,
+                    bottom: vertical ? `${percentage}%` : undefined,
+                },
+            }), { key: value }), label && (_createElement("div", Object.assign({}, styled('slider__mark-label', {
+                'slider__mark-label.is-active': range
+                    ? value <= Math.max(valueLeft, valueRight) && value >= Math.min(valueLeft, valueRight)
+                    : value <= valueLeft,
+            }), { key: value }), label))));
+        };
+        if (isArray(marks)) {
+            marks.forEach((mark) => {
+                const value = isNumber(mark) ? mark : mark.value;
+                getNode(value, isNumber(mark) ? null : mark.label);
+            });
+        }
+        else if (isNumber(marks)) {
+            for (let index = 0; index < (max - min) / marks; index++) {
+                const value = index * marks;
+                getNode(value);
+            }
+        }
+        return nodes;
+    })();
+    const getDotNode = (isLeft) => {
+        const value = isLeft ? valueLeft : valueRight;
+        const render = (inputRender !== null && inputRender !== void 0 ? inputRender : [])[isLeft ? 0 : 1];
+        const inputNode = (_jsx("input", Object.assign({}, styled('slider__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? inputRef === null || inputRef === void 0 ? void 0 : inputRef[0] : inputRef === null || inputRef === void 0 ? void 0 : inputRef[1], type: "range", value: value, max: max, min: min, step: step !== null && step !== void 0 ? step : undefined, disabled: disabled, "aria-orientation": vertical ? 'vertical' : 'horizontal', onChange: (e) => {
+                const val = toNumber(e.currentTarget.value);
+                if (range) {
+                    const index = isLeft ? 0 : 1;
+                    changeValue((draft) => {
+                        const offset = val - draft[index];
+                        const isAdd = offset > 0;
+                        draft[index] = val;
+                        if (isNumber(rangeMinDistance) && draft[1] - draft[0] < rangeMinDistance) {
+                            const _index = isLeft ? 1 : 0;
+                            draft[_index] = getValue(draft[_index] + offset, isAdd ? 'ceil' : 'floor');
+                            if (draft[1] - draft[0] < rangeMinDistance) {
+                                draft[index] = getValue(draft[_index] + (isAdd ? -rangeMinDistance : rangeMinDistance), isAdd ? 'floor' : 'ceil');
+                            }
+                        }
+                    });
+                }
+                else {
+                    changeValue(val);
+                }
+            }, onFocus: () => {
+                setDotFocused(isLeft ? 'left' : 'right');
+            }, onBlur: () => {
+                setDotFocused(null);
+            } })));
+        return (_jsx(Tooltip, { ref: isLeft ? tooltipLeftRef : tooltipRightRef, visible: isLeft ? visibleLeft : visibleRight, title: customTooltip ? customTooltip(value) : value, placement: vertical ? 'right' : 'top', onVisibleChange: (visible) => {
+                setDotVisible(visible ? (isLeft ? 'left' : 'right') : null);
+            }, children: _jsx("div", Object.assign({}, mergeCS(styled('slider__input-wrapper'), {
+                style: {
+                    left: vertical ? undefined : `calc(${value} / ${max - min} * 100% - 7px)`,
+                    bottom: vertical ? `calc(${value} / ${max - min} * 100% - 7px)` : undefined,
+                },
+            }), { ref: isLeft ? dotLeftRef : dotRightRef, children: render ? render(inputNode) : inputNode })) }));
+    };
+    const preventBlur = (e) => {
+        if (e.button === 0) {
+            e.preventDefault();
+        }
+    };
+    const designProps = useDesign({ form: formControl });
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('slider', `slider--${vertical ? 'vertical' : 'horizontal'}`, {
+        'slider.is-disabled': disabled,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), designProps, { ref: sliderRef, onMouseDown: (e) => {
+            var _a;
+            (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            preventBlur(e);
+            if (e.button === 0) {
+                startDrag(e);
+            }
+        }, onMouseUp: (e) => {
+            var _a;
+            (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            preventBlur(e);
+        }, onTouchStart: (e) => {
+            var _a;
+            (_a = restProps.onTouchStart) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            startDrag({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
+        }, onTouchEnd: (e) => {
+            var _a;
+            (_a = restProps.onTouchEnd) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            setDotDraggable(null);
+            setThumbDraggingPoint(null);
+        }, children: [_jsxs("div", Object.assign({}, styled('slider__track', {
+                'slider__track--reverse': reverse,
+            }), { children: [_jsx("div", Object.assign({}, mergeCS(styled('slider__thumb', {
+                        'slider__thumb.is-focused': thumbDraggingPoint,
+                        'slider__thumb--draggable': rangeThumbDraggable,
+                    }), {
+                        style: vertical
+                            ? {
+                                bottom: `calc(${Math.min(valueLeft, valueRight)} / ${max - min} * 100%)`,
+                                top: `calc(${max - Math.max(valueLeft, valueRight)} / ${max - min} * 100%)`,
+                            }
+                            : {
+                                left: `calc(${Math.min(valueLeft, valueRight)} / ${max - min} * 100%)`,
+                                right: `calc(${max - Math.max(valueLeft, valueRight)} / ${max - min} * 100%)`,
+                            },
+                    }))), getDotNode(true), range && getDotNode(false)] })), markNodes] })));
+}

package/slider/index.d.ts

@@ -0,0 +1,2 @@
+export type { SliderProps } from './types';
+export { Slider } from './Slider';

package/slider/index.js

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

package/slider/types.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps, CloneHTMLElement } from '../types';
+export {};
+export interface SliderProps extends BaseProps<'slider', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    formControl?: FormControlProvider;
+    model?: number | [number, number];
+    defaultModel?: number | [number, number];
+    max?: number;
+    min?: number;
+    step?: number | null;
+    range?: boolean;
+    rangeMinDistance?: number;
+    rangeThumbDraggable?: boolean;
+    tooltip?: boolean | [boolean?, boolean?];
+    customTooltip?: (value: number) => React.ReactNode;
+    marks?: number | ({
+        value: number;
+        label: React.ReactNode;
+    } | number)[];
+    vertical?: boolean;
+    reverse?: boolean;
+    disabled?: boolean;
+    inputRef?: [React.ForwardedRef<HTMLInputElement>?, React.ForwardedRef<HTMLInputElement>?];
+    inputRender?: [CloneHTMLElement?, CloneHTMLElement?];
+    onModelChange?: (value: any) => void;
+}

package/slider/types.js

@@ -0,0 +1 @@
+export {};

package/slider/vars.d.ts

@@ -0,0 +1,17 @@
+export declare const CLASSES: {
+    slider: string;
+    'slider.is-disabled': string;
+    'slider--horizontal': string;
+    'slider--vertical': string;
+    slider__track: string;
+    'slider__track--reverse': string;
+    slider__thumb: string;
+    'slider__thumb.is-focused': string;
+    'slider__thumb--draggable': string;
+    slider__mark: string;
+    'slider__mark--hidden': string;
+    'slider__mark-label': string;
+    'slider__mark-label.is-active': string;
+    'slider__input-wrapper': string;
+    slider__input: string;
+};

package/slider/vars.js

@@ -0,0 +1,17 @@
+export const CLASSES = {
+    slider: '^slider',
+    'slider.is-disabled': 'is-disabled',
+    'slider--horizontal': '^slider--horizontal',
+    'slider--vertical': '^slider--vertical',
+    slider__track: '^slider__track',
+    'slider__track--reverse': '^slider__track--reverse',
+    slider__thumb: '^slider__thumb',
+    'slider__thumb.is-focused': 'is-focused',
+    'slider__thumb--draggable': '^slider__thumb--draggable',
+    slider__mark: '^slider__mark',
+    'slider__mark--hidden': '^slider__mark--hidden',
+    'slider__mark-label': '^slider__mark-label',
+    'slider__mark-label.is-active': 'is-active',
+    'slider__input-wrapper': '^slider__input-wrapper',
+    slider__input: '^slider__input',
+};

package/slides/Slides.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SlidesItem, SlidesProps } from './types';
+export declare function Slides<ID extends React.Key, T extends SlidesItem<ID>>(props: SlidesProps<ID, T>): JSX.Element | null;