@laser-ui/components 0.0.1

package/slides/Slides.js

@@ -0,0 +1,277 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
+import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
+import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import { isBoolean, isNumber, isUndefined, nth } from 'lodash';
+import { useEffect, useId, useRef, useState } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useNamespace, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export function Slides(props) {
+    var _a, _b;
+    const _c = useComponentProps('Slides', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive, autoplay: autoplayProp = 0, arrow = 'hover', pagination: paginationProp = true, vertical = false, effect = 'slide', onActiveChange } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "autoplay", "arrow", "pagination", "vertical", "effect", "onActiveChange"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { slides: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.slides }, styleOverrides);
+    const async = useAsync();
+    const slidesRef = useRef(null);
+    const windowRef = useRefExtra(() => window);
+    const uniqueId = useId();
+    const viewId = `${namespace}-slides-view-${uniqueId}`;
+    const dataRef = useRef({
+        startDragTime: 0,
+    });
+    const autoplay = Object.assign({ delay: 0, stopOnLast: false, pauseOnMouseEnter: true }, isNumber(autoplayProp) ? { delay: autoplayProp } : autoplayProp);
+    const pagination = Object.assign({ visible: true, dynamic: false }, isBoolean(paginationProp) ? { visible: paginationProp } : paginationProp === 'hover' ? { visible: 'hover' } : paginationProp);
+    const [active, changeActive] = useControlled((_b = defaultActive !== null && defaultActive !== void 0 ? defaultActive : (_a = nth(list, 0)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null, activeProp, (id) => {
+        if (onActiveChange) {
+            onActiveChange(id, list.find((s) => s.id === id));
+        }
+    });
+    const activeIndex = list.findIndex((s) => s.id === active);
+    const [mouseEnter, setMouseEnter] = useState(false);
+    const [dragStartPosition, setDragStartPosition] = useState();
+    const [dragDistance, setDragDistance] = useState(0);
+    const [dragOpacity, setDragOpacity] = useState();
+    const listenDragEvent = !isUndefined(dragStartPosition);
+    const changeDragDistance = (distance) => {
+        if (slidesRef.current) {
+            const els = [];
+            const slideEls = slidesRef.current.querySelectorAll(`.${namespace}-slides__slide`);
+            slideEls.forEach((el) => {
+                const index = Number(el.dataset['index']);
+                els[index] = el;
+            });
+            if (distance > 0) {
+                let size = 0;
+                for (let index = activeIndex - 1; index >= 0; index--) {
+                    size += els[index][vertical ? 'offsetHeight' : 'offsetWidth'];
+                }
+                const distanceValue = Math.abs(distance) > size
+                    ? size +
+                        Math.sin(Math.min((Math.abs(distance) - size) / (els[0][vertical ? 'offsetHeight' : 'offsetWidth'] * 3), 1) * (Math.PI / 2)) *
+                            els[0][vertical ? 'offsetHeight' : 'offsetWidth']
+                    : distance;
+                setDragDistance(distanceValue);
+                setDragOpacity({
+                    index: activeIndex,
+                    value: activeIndex === 0
+                        ? 1
+                        : Math.max(1 - Math.abs(distanceValue) / els[activeIndex - 1][vertical ? 'offsetHeight' : 'offsetWidth'], 0),
+                });
+            }
+            else {
+                let size = 0;
+                for (let index = activeIndex + 1; index < list.length; index++) {
+                    size += els[index][vertical ? 'offsetHeight' : 'offsetWidth'];
+                }
+                const distanceValue = Math.abs(distance) > size
+                    ? -(size +
+                        Math.sin(Math.min((Math.abs(distance) - size) / (els[list.length - 1][vertical ? 'offsetHeight' : 'offsetWidth'] * 3), 1) *
+                            (Math.PI / 2)) *
+                            els[list.length - 1][vertical ? 'offsetHeight' : 'offsetWidth'])
+                    : distance;
+                setDragDistance(distanceValue);
+                setDragOpacity({
+                    index: Math.min(activeIndex + 1, list.length - 1),
+                    value: activeIndex === list.length - 1
+                        ? 1
+                        : Math.min(Math.abs(distanceValue) / els[activeIndex + 1][vertical ? 'offsetHeight' : 'offsetWidth'], 1),
+                });
+            }
+        }
+    };
+    const handleDragEnd = () => {
+        var _a, _b, _c, _d;
+        if (slidesRef.current) {
+            const els = [];
+            const slideEls = slidesRef.current.querySelectorAll(`.${namespace}-slides__slide`);
+            slideEls.forEach((el) => {
+                const index = Number(el.dataset['index']);
+                els[index] = el;
+            });
+            if (dragDistance > 0) {
+                let newIndex = activeIndex;
+                let size = 0;
+                for (let index = activeIndex - 1; index >= 0; index--) {
+                    if (Math.abs(dragDistance) > size + els[index][vertical ? 'offsetHeight' : 'offsetWidth'] / 2) {
+                        size += els[index][vertical ? 'offsetHeight' : 'offsetWidth'];
+                        newIndex = index;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if (newIndex === activeIndex) {
+                    if (performance.now() - dataRef.current.startDragTime < 300 && Math.abs(dragDistance) > 30) {
+                        const id = (_a = nth(list, Math.max(newIndex - 1, 0))) === null || _a === void 0 ? void 0 : _a.id;
+                        if (!isUndefined(id)) {
+                            changeActive(id);
+                        }
+                    }
+                }
+                else {
+                    const id = (_b = nth(list, newIndex)) === null || _b === void 0 ? void 0 : _b.id;
+                    if (!isUndefined(id)) {
+                        changeActive(id);
+                    }
+                }
+            }
+            else {
+                let newIndex = activeIndex;
+                let size = 0;
+                for (let index = activeIndex + 1; index < list.length; index++) {
+                    if (Math.abs(dragDistance) > size + els[index][vertical ? 'offsetHeight' : 'offsetWidth'] / 2) {
+                        size += els[index][vertical ? 'offsetHeight' : 'offsetWidth'];
+                        newIndex = index;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if (newIndex === activeIndex) {
+                    if (performance.now() - dataRef.current.startDragTime < 300 && Math.abs(dragDistance) > 30) {
+                        const id = (_c = nth(list, Math.min(newIndex + 1, list.length - 1))) === null || _c === void 0 ? void 0 : _c.id;
+                        if (!isUndefined(id)) {
+                            changeActive(id);
+                        }
+                    }
+                }
+                else {
+                    const id = (_d = nth(list, newIndex)) === null || _d === void 0 ? void 0 : _d.id;
+                    if (!isUndefined(id)) {
+                        changeActive(id);
+                    }
+                }
+            }
+        }
+        setDragStartPosition(undefined);
+        setDragDistance(0);
+        setDragOpacity(undefined);
+    };
+    useEffect(() => {
+        if (slidesRef.current) {
+            let size = 0;
+            const slideEls = slidesRef.current.querySelectorAll(`.${namespace}-slides__slide`);
+            slideEls.forEach((el) => {
+                const index = Number(el.dataset['index']);
+                if (index < activeIndex) {
+                    size += el[vertical ? 'offsetHeight' : 'offsetWidth'];
+                }
+                else if (index === activeIndex) {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    slidesRef.current.style.height = el.offsetHeight + 'px';
+                }
+            });
+            const containerEl = slidesRef.current.querySelector(`.${namespace}-slides__container`);
+            containerEl.style.transform = effect === 'slide' ? `translate${vertical ? 'Y' : 'X'}(calc(-${size}px + ${dragDistance}px))` : '';
+        }
+    });
+    useEffect(() => {
+        var _a, _b;
+        if (autoplay.delay === 0 ||
+            (autoplay.stopOnLast && activeIndex === list.length - 1) ||
+            (autoplay.pauseOnMouseEnter && mouseEnter) ||
+            listenDragEvent) {
+            (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+            dataRef.current.clearTid = undefined;
+        }
+        else if (isUndefined(dataRef.current.clearTid)) {
+            dataRef.current.clearTid = async.setTimeout(() => {
+                var _a;
+                dataRef.current.clearTid = undefined;
+                const id = (_a = nth(list, (activeIndex + 1) % list.length)) === null || _a === void 0 ? void 0 : _a.id;
+                if (!isUndefined(id)) {
+                    changeActive(id);
+                }
+            }, autoplay.delay, () => {
+                dataRef.current.clearTid = undefined;
+            });
+        }
+    });
+    useEvent(windowRef, 'touchmove', (e) => {
+        if (listenDragEvent) {
+            e.preventDefault();
+            changeDragDistance(e.touches[0][vertical ? 'clientY' : 'clientX'] - dragStartPosition);
+        }
+    }, { passive: false }, !listenDragEvent);
+    useEvent(windowRef, 'mousemove', (e) => {
+        if (listenDragEvent) {
+            e.preventDefault();
+            changeDragDistance(e[vertical ? 'clientY' : 'clientX'] - dragStartPosition);
+        }
+    }, {}, !listenDragEvent);
+    useEvent(windowRef, 'mouseup', () => {
+        handleDragEnd();
+    }, {}, !listenDragEvent);
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('slides', {
+        'slides--vertical': vertical,
+        'slides--fade': effect === 'fade',
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: slidesRef, onMouseEnter: (e) => {
+            var _a;
+            (_a = restProps.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            setMouseEnter(true);
+        }, onMouseLeave: (e) => {
+            var _a;
+            (_a = restProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            setMouseEnter(false);
+        }, children: [_jsx("div", Object.assign({}, mergeCS(styled('slides__container'), {
+                style: { transition: listenDragEvent ? 'none' : undefined },
+            }), { id: viewId, role: "region", "aria-live": "polite", onMouseDown: (e) => {
+                    e.preventDefault();
+                    if (e.button === 0) {
+                        setDragStartPosition(e[vertical ? 'clientY' : 'clientX']);
+                        dataRef.current.startDragTime = performance.now();
+                    }
+                }, onTouchStart: (e) => {
+                    setDragStartPosition(e.touches[0][vertical ? 'clientY' : 'clientX']);
+                    dataRef.current.startDragTime = performance.now();
+                }, onTouchEnd: () => {
+                    handleDragEnd();
+                }, children: list.map((slide, index) => {
+                    let opacity = index <= activeIndex ? 1 : 0;
+                    if (listenDragEvent && dragOpacity && dragOpacity.index === index) {
+                        opacity = dragOpacity.value;
+                    }
+                    return (_createElement("div", Object.assign({}, mergeCS(styled('slides__slide'), {
+                        style: effect === 'slide' ? undefined : { opacity, transition: listenDragEvent ? 'none' : undefined },
+                    }), { key: slide.id, "aria-hidden": slide.id !== active, "data-index": index }), slide.content));
+                }) })), (arrow === true || arrow === 'hover') && (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({}, styled('slides__arrow', 'slides__arrow--prev', {
+                        'slides__arrow.is-hidden': arrow === 'hover' && !mouseEnter,
+                    }), { tabIndex: -1, disabled: activeIndex === 0, onClick: () => {
+                            var _a;
+                            const id = (_a = nth(list, activeIndex - 1)) === null || _a === void 0 ? void 0 : _a.id;
+                            if (!isUndefined(id)) {
+                                changeActive(id);
+                            }
+                        }, children: _jsx(Icon, { children: _jsx(KeyboardArrowLeftOutlined, {}) }) })), _jsx("button", Object.assign({}, styled('slides__arrow', 'slides__arrow--next', {
+                        'slides__arrow.is-hidden': arrow === 'hover' && !mouseEnter,
+                    }), { tabIndex: -1, disabled: activeIndex === list.length - 1, onClick: () => {
+                            var _a;
+                            const id = (_a = nth(list, activeIndex + 1)) === null || _a === void 0 ? void 0 : _a.id;
+                            if (!isUndefined(id)) {
+                                changeActive(id);
+                            }
+                        }, children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) }))] })), (pagination.visible === true || pagination.visible === 'hover') && (_jsx("div", Object.assign({}, styled('slides__pagination', {
+                'slides__pagination.is-hidden': pagination.visible === 'hover' && !mouseEnter,
+                'slides__pagination--dynamic': pagination.dynamic,
+            }), { role: "radiogroup", children: list.map((slide, index) => {
+                    const checked = active === slide.id;
+                    return (_createElement("input", Object.assign({}, mergeCS(styled('slides__pagination-radio', {
+                        'slides__pagination-radio.is-checked': checked,
+                        'slides__pagination-radio--prev-1': pagination.dynamic && index - activeIndex === -1,
+                        'slides__pagination-radio--prev-2': pagination.dynamic && index - activeIndex === -2,
+                        'slides__pagination-radio--next-1': pagination.dynamic && index - activeIndex === 1,
+                        'slides__pagination-radio--next-2': pagination.dynamic && index - activeIndex === 2,
+                    }), {
+                        style: { [vertical ? 'top' : 'left']: pagination.dynamic ? 40 - 8 - 16 * activeIndex : undefined },
+                    }), { key: slide.id, type: "radio", value: slide.id, checked: checked, name: uniqueId, title: slide.tooltip, "aria-checked": checked, "aria-controls": viewId, onChange: () => {
+                            changeActive(slide.id);
+                        } })));
+                }) })))] })));
+}

package/slides/index.d.ts

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

package/slides/index.js

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

package/slides/types.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface SlidesAutoplayOptions {
+    delay?: number;
+    stopOnLast?: boolean;
+    pauseOnMouseEnter?: boolean;
+}
+export interface SlidesPaginationOptions {
+    visible?: boolean | 'hover';
+    dynamic?: boolean;
+}
+export interface SlidesItem<ID extends React.Key> {
+    id: ID;
+    tooltip?: string;
+    content: React.ReactNode;
+}
+export interface SlidesProps<ID extends React.Key, T extends SlidesItem<ID>> extends BaseProps<'slides', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    list: T[];
+    active?: ID;
+    defaultActive?: ID;
+    autoplay?: number | SlidesAutoplayOptions;
+    arrow?: boolean | 'hover';
+    pagination?: boolean | 'hover' | SlidesPaginationOptions;
+    vertical?: boolean;
+    effect?: 'slide' | 'fade';
+    onActiveChange?: (id: ID, origin: T) => void;
+}

package/slides/types.js

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

package/slides/vars.d.ts

@@ -0,0 +1,20 @@
+export declare const CLASSES: {
+    slides: string;
+    'slides--vertical': string;
+    'slides--fade': string;
+    slides__container: string;
+    slides__slide: string;
+    slides__arrow: string;
+    'slides__arrow.is-hidden': string;
+    'slides__arrow--prev': string;
+    'slides__arrow--next': string;
+    slides__pagination: string;
+    'slides__pagination.is-hidden': string;
+    'slides__pagination--dynamic': string;
+    'slides__pagination-radio': string;
+    'slides__pagination-radio.is-checked': string;
+    'slides__pagination-radio--prev-1': string;
+    'slides__pagination-radio--prev-2': string;
+    'slides__pagination-radio--next-1': string;
+    'slides__pagination-radio--next-2': string;
+};

package/slides/vars.js

@@ -0,0 +1,20 @@
+export const CLASSES = {
+    slides: '^slides',
+    'slides--vertical': '^slides--vertical',
+    'slides--fade': '^slides--fade',
+    slides__container: '^slides__container',
+    slides__slide: '^slides__slide',
+    slides__arrow: '^slides__arrow',
+    'slides__arrow.is-hidden': 'is-hidden',
+    'slides__arrow--prev': '^slides__arrow--prev',
+    'slides__arrow--next': '^slides__arrow--next',
+    slides__pagination: '^slides__pagination',
+    'slides__pagination.is-hidden': 'is-hidden',
+    'slides__pagination--dynamic': '^slides__pagination--dynamic',
+    'slides__pagination-radio': '^slides__pagination-radio',
+    'slides__pagination-radio.is-checked': 'is-checked',
+    'slides__pagination-radio--prev-1': '^slides__pagination-radio--prev-1',
+    'slides__pagination-radio--prev-2': '^slides__pagination-radio--prev-2',
+    'slides__pagination-radio--next-1': '^slides__pagination-radio--next-1',
+    'slides__pagination-radio--next-2': '^slides__pagination-radio--next-2',
+};

package/spinner/Spinner.d.ts

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

package/spinner/Spinner.js

@@ -0,0 +1,66 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAsync, useForceUpdate } from '@laser-ui/hooks';
+import { checkNodeExist } from '@laser-ui/utils';
+import { isNumber, isUndefined } from 'lodash';
+import { useEffect, useRef } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { CircularProgress } from '../internal/circular-progress';
+import { Transition } from '../internal/transition';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function Spinner(props) {
+    const _a = useComponentProps('Spinner', props), { children, styleOverrides, styleProvider, visible: visibleProp, text, size = 28, delay, alone = false, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "text", "size", "delay", "alone", "afterVisibleChange"]);
+    const styled = useStyled(CLASSES, { spinner: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.spinner }, styleOverrides);
+    const async = useAsync();
+    const forceUpdate = useForceUpdate();
+    const spinnerRef = useRef(null);
+    const containerRef = useRef(null);
+    const dataRef = useRef({
+        delayVisible: false,
+    });
+    if (visibleProp === false) {
+        dataRef.current.delayVisible = false;
+    }
+    const visible = isUndefined(delay) ? visibleProp : dataRef.current.delayVisible;
+    useEffect(() => {
+        if (isNumber(delay) && visibleProp) {
+            const clearTid = async.setTimeout(() => {
+                dataRef.current.delayVisible = true;
+                forceUpdate();
+            }, delay);
+            return () => {
+                clearTid();
+            };
+        }
+    }, [async, delay, forceUpdate, visibleProp]);
+    const transitionStyles = {
+        enter: { opacity: 0 },
+        entering: {
+            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
+        },
+        leaving: {
+            opacity: 0,
+            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
+        },
+        leaved: { display: 'none' },
+    };
+    return (_jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, afterRender: () => {
+            if (!alone && spinnerRef.current && containerRef.current) {
+                containerRef.current.style.height = `${spinnerRef.current.offsetHeight}px`;
+            }
+        }, destroyWhenLeaved: true, afterEnter: () => {
+            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+        }, afterLeave: () => {
+            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+        }, children: (state) => (_jsx("div", Object.assign({}, restProps, mergeCS(styled('spinner', {
+            'spinner--alone': alone,
+        }), {
+            className: restProps.className,
+            style: Object.assign(Object.assign({}, restProps.style), transitionStyles[state]),
+        }), { ref: spinnerRef, children: _jsxs("div", Object.assign({}, styled('spinner__container'), { ref: containerRef, children: [children !== false && (_jsx("div", Object.assign({}, mergeCS(styled('spinner__icon'), {
+                        style: { fontSize: size },
+                    }), { children: checkNodeExist(children) ? (children) : (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) }))), checkNodeExist(text) && _jsx("div", Object.assign({}, styled('spinner__text'), { children: text }))] })) }))) }));
+}

package/spinner/index.d.ts

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

package/spinner/index.js

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

package/spinner/types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface SpinnerProps extends BaseProps<'spinner', typeof CLASSES>, React.HTMLAttributes<HTMLElement> {
+    visible: boolean;
+    text?: React.ReactNode;
+    size?: number | string;
+    delay?: number;
+    alone?: boolean;
+    afterVisibleChange?: (visible: boolean) => void;
+}

package/spinner/types.js

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

package/spinner/vars.d.ts

@@ -0,0 +1,7 @@
+export declare const CLASSES: {
+    spinner: string;
+    'spinner--alone': string;
+    spinner__container: string;
+    spinner__icon: string;
+    spinner__text: string;
+};

package/spinner/vars.js

@@ -0,0 +1,7 @@
+export const CLASSES = {
+    spinner: '^spinner',
+    'spinner--alone': '^spinner--alone',
+    spinner__container: '^spinner__container',
+    spinner__icon: '^spinner__icon',
+    spinner__text: '^spinner__text',
+};

package/stepper/Stepper.d.ts

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

package/stepper/Stepper.js

@@ -0,0 +1,87 @@
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as CheckOutlined } from '@material-design-icons/svg/outlined/check.svg';
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { isNumber, isUndefined } from 'lodash';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { CollapseTransition } from '../internal/transition';
+import { Progress } from '../progress';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function Stepper(props) {
+    const _a = useComponentProps('Stepper', props), { styleOverrides, styleProvider, list, active, percent, dotSize = 36, clickable = false, labelBottom = false, vertical = false, onClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "percent", "dotSize", "clickable", "labelBottom", "vertical", "onClick"]);
+    const styled = useStyled(CLASSES, { stepper: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.stepper }, styleOverrides);
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('stepper', {
+        'stepper--button': clickable,
+        'stepper--label-bottom': labelBottom,
+        'stepper--vertical': vertical,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: list.map((item, index) => {
+            const { step: itemStep = index + 1, title: itemTitle, description: itemDescription, state: itemState, color: itemColor, dot: itemDot, } = item;
+            const isWait = itemStep > active;
+            const isActive = itemStep === active;
+            const isCompleted = itemStep < active;
+            const isProgress = isActive && isNumber(percent);
+            const titleNode = (_jsx("div", Object.assign({}, mergeCS(styled('stepper__step-title'), {
+                style: { marginTop: labelBottom ? undefined : `calc((${dotSize}px - 1.1em) / 2)` },
+            }), { children: itemTitle })));
+            const separatoreNode = vertical && labelBottom
+                ? null
+                : index !== list.length - 1 && (_jsx("div", Object.assign({}, mergeCS(styled('stepper__step-separator'), {
+                    style: {
+                        top: vertical ? `${dotSize}px` : `calc((${dotSize}px - 2px) / 2)`,
+                        left: vertical ? `${dotSize / 2}px` : labelBottom ? `calc(50% + ${dotSize / 2}px)` : undefined,
+                        width: !vertical && labelBottom ? `calc(100% - ${dotSize}px)` : undefined,
+                        height: vertical ? `calc(100% - ${dotSize}px)` : undefined,
+                    },
+                }))));
+            return (_createElement("div", Object.assign({}, mergeCS(styled('stepper__step', isUndefined(itemState)
+                ? {
+                    'stepper__step.is-wait': isWait,
+                    'stepper__step.is-active': isActive,
+                    'stepper__step.is-completed': isCompleted,
+                }
+                : {}, {
+                [`stepper__step.is-${itemState}`]: itemState,
+            }), {
+                style: Object.assign({ '--color': itemColor }, { maxWidth: !vertical && index === list.length - 1 ? `calc(100% / ${list.length})` : undefined, width: !vertical && labelBottom ? `calc(100% / ${list.length})` : undefined }),
+            }), { key: itemStep, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, onKeyDown: (e) => {
+                    if (clickable) {
+                        if (e.code === 'Enter' || e.code === 'Space') {
+                            e.preventDefault();
+                            onClick === null || onClick === void 0 ? void 0 : onClick(itemStep, item);
+                        }
+                    }
+                }, onClick: () => {
+                    if (clickable) {
+                        onClick === null || onClick === void 0 ? void 0 : onClick(itemStep, item);
+                    }
+                } }),
+                _jsxs("div", Object.assign({}, styled('stepper__step-header'), { children: [_jsxs("div", Object.assign({}, mergeCS(styled('stepper__step-dot', {
+                            'stepper__step-dot--progress': isProgress,
+                        }), { style: { width: dotSize, height: dotSize } }), { children: [itemDot === false ? null : checkNodeExist(itemDot) ? (itemDot) : itemState === 'error' ? (_jsx(Icon, { children: _jsx(CloseOutlined, {}) })) : isCompleted ? (_jsx(Icon, { children: _jsx(CheckOutlined, {}) })) : (itemStep), isProgress && (_jsx("div", Object.assign({}, styled('stepper__step-progress'), { children: _jsx(Progress, { percent: percent, pattern: "circle", state: "process", label: false, size: dotSize + 8, lineWidth: 4 }) })))] })), !labelBottom && titleNode, !vertical && separatoreNode] })),
+                labelBottom && titleNode,
+                vertical && separatoreNode,
+                checkNodeExist(itemDescription) && (_jsx(CollapseTransition, { originalSize: {
+                        height: 'auto',
+                    }, collapsedSize: {
+                        height: 0,
+                    }, enter: !vertical || isActive, during: TTANSITION_DURING_BASE, styles: {
+                        entering: {
+                            transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+                        },
+                        leaving: {
+                            transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+                        },
+                        leaved: { display: 'none' },
+                    }, children: (descriptionRef, collapseStyle) => (_jsx("div", Object.assign({}, mergeCS(styled('stepper__step-description'), {
+                        style: Object.assign({ marginLeft: labelBottom ? undefined : `calc(${dotSize}px + 8px)` }, collapseStyle),
+                    }), { ref: descriptionRef, children: itemDescription }))) }))));
+        }) })));
+}

package/stepper/index.d.ts

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

package/stepper/index.js

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

package/stepper/types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface StepperItem {
+    step?: number;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    state?: 'wait' | 'active' | 'completed' | 'warning' | 'error';
+    color?: string;
+    dot?: React.ReactNode;
+}
+export interface StepperProps<T extends StepperItem> extends BaseProps<'stepper', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onClick'> {
+    list: T[];
+    active: number;
+    percent?: number;
+    dotSize?: number;
+    clickable?: boolean;
+    labelBottom?: boolean;
+    vertical?: boolean;
+    onClick?: (step: number, origin: T) => void;
+}

package/stepper/types.js

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

package/stepper/vars.d.ts

@@ -0,0 +1,19 @@
+export declare const CLASSES: {
+    stepper: string;
+    'stepper--button': string;
+    'stepper--label-bottom': string;
+    'stepper--vertical': string;
+    stepper__step: string;
+    'stepper__step.is-wait': string;
+    'stepper__step.is-active': string;
+    'stepper__step.is-completed': string;
+    'stepper__step.is-warning': string;
+    'stepper__step.is-error': string;
+    'stepper__step-header': string;
+    'stepper__step-title': string;
+    'stepper__step-description': string;
+    'stepper__step-dot': string;
+    'stepper__step-dot--progress': string;
+    'stepper__step-separator': string;
+    'stepper__step-progress': string;
+};

package/stepper/vars.js

@@ -0,0 +1,19 @@
+export const CLASSES = {
+    stepper: '^stepper',
+    'stepper--button': '^stepper--button',
+    'stepper--label-bottom': '^stepper--label-bottom',
+    'stepper--vertical': '^stepper--vertical',
+    stepper__step: '^stepper__step',
+    'stepper__step.is-wait': 'is-wait',
+    'stepper__step.is-active': 'is-active',
+    'stepper__step.is-completed': 'is-completed',
+    'stepper__step.is-warning': 'is-warning',
+    'stepper__step.is-error': 'is-error',
+    'stepper__step-header': '^stepper__step-header',
+    'stepper__step-title': '^stepper__step-title',
+    'stepper__step-description': '^stepper__step-description',
+    'stepper__step-dot': '^stepper__step-dot',
+    'stepper__step-dot--progress': '^stepper__step-dot--progress',
+    'stepper__step-separator': '^stepper__step-separator',
+    'stepper__step-progress': '^stepper__step-progress',
+};

package/switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import type { SwitchProps } from './types';
+export declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;