@laser-ui/components 0.0.1

package/anchor/Anchor.js

@@ -0,0 +1,112 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEvent, useEventCallback, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
+import { getOffsetToRoot, scrollTo, toPx } from '@laser-ui/utils';
+import { isArray, isString, isUndefined } from 'lodash';
+import { Fragment, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { CLASSES, DOT_INDICATOR, LINE_INDICATOR } from './vars';
+import { useComponentProps, useLayout, useListenGlobalScrolling, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+function AnchorFC(props, ref) {
+    const _a = useComponentProps('Anchor', props), { styleOverrides, styleProvider, list, page, distance: distanceProp = 0, scrollBehavior = 'instant', indicator = DOT_INDICATOR, onClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "page", "distance", "scrollBehavior", "indicator", "onClick"]);
+    const styled = useStyled(CLASSES, { anchor: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.anchor }, styleOverrides);
+    const { pageScrollRef, contentResizeRef } = useLayout();
+    const anchorRef = useRef(null);
+    const indicatorRef = useRef(null);
+    const activeLinkRef = useRef(null);
+    const pageRef = useRefExtra(page !== null && page !== void 0 ? page : (() => pageScrollRef.current));
+    const dataRef = useRef({});
+    const [active, setActive] = useState(null);
+    const updateAnchor = useEventCallback(() => {
+        if (pageRef.current) {
+            const pageTop = getOffsetToRoot(pageRef.current);
+            let nearestEl;
+            const reduceLinks = (arr) => {
+                arr.forEach(({ href, children }) => {
+                    const el = document.getElementById(href);
+                    if (el && pageRef.current) {
+                        const top = getOffsetToRoot(el);
+                        const distance = isString(distanceProp) ? toPx(distanceProp, true) : distanceProp;
+                        if (Math.ceil(pageRef.current.scrollTop) + distance >= top - pageTop) {
+                            if (isUndefined(nearestEl)) {
+                                nearestEl = [href, top];
+                            }
+                            else if (top > nearestEl[1]) {
+                                nearestEl = [href, top];
+                            }
+                        }
+                    }
+                    if (isArray(children)) {
+                        reduceLinks(children);
+                    }
+                });
+            };
+            reduceLinks(list);
+            const href = nearestEl ? nearestEl[0] : null;
+            setActive(href);
+        }
+    });
+    useIsomorphicLayoutEffect(() => {
+        updateAnchor();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const listenGlobalScrolling = useListenGlobalScrolling(updateAnchor);
+    useEvent(pageRef, 'scroll', updateAnchor, { passive: true }, listenGlobalScrolling);
+    useResize(contentResizeRef, updateAnchor);
+    useEffect(() => {
+        if (anchorRef.current && indicatorRef.current) {
+            if (activeLinkRef.current) {
+                const rect = activeLinkRef.current.getBoundingClientRect();
+                const top = rect.top - anchorRef.current.getBoundingClientRect().top + rect.height / 2;
+                indicatorRef.current.style.cssText = `opacity:1;top:${top}px;`;
+            }
+            else {
+                indicatorRef.current.style.cssText += 'opacity:0;';
+            }
+        }
+    });
+    useImperativeHandle(ref, () => ({
+        active,
+        updateAnchor,
+    }), [active, updateAnchor]);
+    const handleLinkClick = (href) => {
+        var _a, _b;
+        if (pageRef.current) {
+            const pageTop = getOffsetToRoot(pageRef.current);
+            const scrollTop = pageRef.current.scrollTop;
+            window.location.hash = `#${href}`;
+            pageRef.current.scrollTop = scrollTop;
+            const el = document.getElementById(href);
+            if (el) {
+                const top = getOffsetToRoot(el);
+                const distance = isString(distanceProp) ? toPx(distanceProp, true) : distanceProp;
+                (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+                dataRef.current.clearTid = scrollTo(pageRef.current, {
+                    top: top - pageTop - distance,
+                    behavior: scrollBehavior,
+                });
+            }
+        }
+    };
+    const linkNodes = (() => {
+        const getNodes = (arr, level = 0) => arr.map((link) => {
+            const { title: linkTitle, href: linkHref, target: linkTarget, children } = link;
+            const isActive = linkHref === active;
+            return (_jsxs(Fragment, { children: [_jsx("li", Object.assign({}, styled('anchor__link', {
+                        'anchor__link.is-active': isActive,
+                    }), { ref: isActive ? activeLinkRef : undefined, children: _jsx("a", { style: { paddingLeft: 16 + level * 16 }, href: `#${linkHref}`, target: linkTarget, onClick: (e) => {
+                                e.preventDefault();
+                                handleLinkClick(linkHref);
+                                onClick === null || onClick === void 0 ? void 0 : onClick(linkHref, link);
+                            }, children: linkTitle !== null && linkTitle !== void 0 ? linkTitle : linkHref }) })), children && getNodes(children, level + 1)] }, `${linkHref}-${level}`));
+        });
+        return getNodes(list);
+    })();
+    return (_jsxs("ul", Object.assign({}, restProps, mergeCS(styled('anchor'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: anchorRef, children: [_jsx("div", Object.assign({}, styled('anchor__indicator-track'), { children: _jsx("div", Object.assign({}, styled('anchor__indicator-wrapper'), { ref: indicatorRef, children: indicator === DOT_INDICATOR ? (_jsx("div", Object.assign({}, styled('anchor__dot-indicator')))) : indicator === LINE_INDICATOR ? (_jsx("div", Object.assign({}, styled('anchor__line-indicator')))) : (indicator) })) })), linkNodes] })));
+}
+export const Anchor = forwardRef(AnchorFC);
+Anchor.DOT_INDICATOR = DOT_INDICATOR;
+Anchor.LINE_INDICATOR = LINE_INDICATOR;

package/anchor/index.d.ts

@@ -0,0 +1,2 @@
+export type { AnchorRef, AnchorProps } from './types';
+export { Anchor } from './Anchor';

package/anchor/index.js

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

package/anchor/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { CLASSES, DOT_INDICATOR, LINE_INDICATOR } from './vars';
+import type { BaseProps } from '../types';
+import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
+export {};
+export interface AnchorRef {
+    active: string | null;
+    updateAnchor: () => void;
+}
+export interface AnchorItem {
+    href: string;
+    title?: React.ReactNode;
+    target?: string;
+    children?: AnchorItem[];
+}
+export interface AnchorProps<T extends AnchorItem> extends BaseProps<'anchor', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLUListElement>, 'children' | 'onClick'> {
+    list: T[];
+    page?: RefExtra;
+    distance?: number | string;
+    scrollBehavior?: 'instant' | 'smooth';
+    indicator?: React.ReactNode | typeof DOT_INDICATOR | typeof LINE_INDICATOR;
+    onClick?: (href: string, origin: T) => void;
+}

package/anchor/types.js

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

package/anchor/vars.d.ts

@@ -0,0 +1,11 @@
+export declare const CLASSES: {
+    anchor: string;
+    anchor__link: string;
+    'anchor__link.is-active': string;
+    'anchor__indicator-track': string;
+    'anchor__indicator-wrapper': string;
+    'anchor__dot-indicator': string;
+    'anchor__line-indicator': string;
+};
+export declare const DOT_INDICATOR: unique symbol;
+export declare const LINE_INDICATOR: unique symbol;

package/anchor/vars.js

@@ -0,0 +1,11 @@
+export const CLASSES = {
+    anchor: '^anchor',
+    anchor__link: '^anchor__link',
+    'anchor__link.is-active': 'is-active',
+    'anchor__indicator-track': '^anchor__indicator-track',
+    'anchor__indicator-wrapper': '^anchor__indicator-wrapper',
+    'anchor__dot-indicator': '^anchor__dot-indicator',
+    'anchor__line-indicator': '^anchor__line-indicator',
+};
+export const DOT_INDICATOR = Symbol();
+export const LINE_INDICATOR = Symbol();

package/avatar/Avatar.d.ts

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

package/avatar/Avatar.js

@@ -0,0 +1,43 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toPx } from '@laser-ui/utils';
+import { isNumber } from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export function Avatar(props) {
+    const _a = useComponentProps('Avatar', props), { styleOverrides, styleProvider, shape = 'circle', img, icon, text, size = 40 } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "shape", "img", "icon", "text", "size"]);
+    const styled = useStyled(CLASSES, { avatar: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.avatar }, styleOverrides);
+    const textRef = useRef(null);
+    const [imgError, setImgError] = useState(false);
+    const type = img && !imgError ? 'img' : icon ? 'icon' : text ? 'text' : 'img';
+    useEffect(() => {
+        if (textRef.current) {
+            const maxWidth = Math.sqrt(Math.pow((isNumber(size) ? size : toPx(size, true)) / 2, 2) - Math.pow(textRef.current.scrollHeight / 2, 2)) * 2;
+            if (textRef.current.scrollWidth > maxWidth) {
+                textRef.current.style.transform = `scale(${maxWidth / textRef.current.scrollWidth})`;
+            }
+            else {
+                textRef.current.style.transform = '';
+            }
+        }
+    });
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('avatar', `avatar--${type}`, `avatar--${shape}`), {
+        className: restProps.className,
+        style: Object.assign(Object.assign({}, restProps.style), { width: size, height: size, fontSize: type === 'icon'
+                ? `calc((${size}${isNumber(size) ? 'px' : ''} / 2) * 1.25)`
+                : type === 'text'
+                    ? `calc(${size}${isNumber(size) ? 'px' : ''} / 2)`
+                    : undefined }),
+    }), { children: type === 'img' ? (
+        // eslint-disable-next-line jsx-a11y/alt-text
+        _jsx("img", Object.assign({}, img, mergeCS(styled('avatar__img'), {
+            className: img === null || img === void 0 ? void 0 : img.className,
+            style: img === null || img === void 0 ? void 0 : img.style,
+        }), { onError: (e) => {
+                var _a;
+                (_a = img === null || img === void 0 ? void 0 : img.onError) === null || _a === void 0 ? void 0 : _a.call(img, e);
+                setImgError(true);
+            } }))) : type === 'icon' ? (icon) : (_jsx("div", { ref: textRef, children: text })) })));
+}

package/avatar/index.d.ts

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

package/avatar/index.js

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

package/avatar/types.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface AvatarProps extends BaseProps<'avatar', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    shape?: 'circle' | 'square';
+    img?: React.ImgHTMLAttributes<HTMLImageElement>;
+    icon?: React.ReactNode;
+    text?: React.ReactNode;
+    size?: number | string;
+}

package/avatar/types.js

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

package/avatar/vars.d.ts

@@ -0,0 +1,9 @@
+export declare const CLASSES: {
+    avatar: string;
+    'avatar--img': string;
+    'avatar--icon': string;
+    'avatar--text': string;
+    'avatar--circle': string;
+    'avatar--square': string;
+    avatar__img: string;
+};

package/avatar/vars.js

@@ -0,0 +1,9 @@
+export const CLASSES = {
+    avatar: '^avatar',
+    'avatar--img': '^avatar--img',
+    'avatar--icon': '^avatar--icon',
+    'avatar--text': '^avatar--text',
+    'avatar--circle': '^avatar--circle',
+    'avatar--square': '^avatar--square',
+    avatar__img: '^avatar__img',
+};

package/badge/Badge.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { BadgeProps } from './types';
+import { BadgeText } from './BadgeText';
+export declare const Badge: {
+    (props: BadgeProps): JSX.Element | null;
+    Text: typeof BadgeText;
+};

package/badge/Badge.js

@@ -0,0 +1,61 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { BadgeText } from './BadgeText';
+import { BadgeNumber } from './internal/BadgeNumber';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { Transition } from '../internal/transition';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export const Badge = (props) => {
+    var _a;
+    const _b = useComponentProps('Badge', props), { styleOverrides, styleProvider, value: valueProp, theme = 'danger', max = Infinity, dot = false, showZero = false, offset = [0, '100%'], alone = false } = _b, restProps = __rest(_b, ["styleOverrides", "styleProvider", "value", "theme", "max", "dot", "showZero", "offset", "alone"]);
+    const styled = useStyled(CLASSES, { badge: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.badge }, styleOverrides);
+    const dataRef = useRef({
+        prevValue: valueProp,
+        valueDown: false,
+    });
+    const show = showZero || valueProp > 0;
+    const value = show ? valueProp : (_a = dataRef.current.saveValue) !== null && _a !== void 0 ? _a : 0;
+    dataRef.current.saveValue = value;
+    const nums = (value > max ? max : value)
+        .toString()
+        .split('')
+        .map((n) => Number(n));
+    if (value !== dataRef.current.prevValue) {
+        dataRef.current.valueDown = value < dataRef.current.prevValue;
+        dataRef.current.prevValue = value;
+    }
+    return (_jsx(Transition, { enter: show, during: TTANSITION_DURING_BASE, children: (state) => {
+            var _a;
+            let transitionStyle = {};
+            switch (state) {
+                case 'enter':
+                    transitionStyle = { transform: 'scale(0)', opacity: 0 };
+                    break;
+                case 'entering':
+                    transitionStyle = {
+                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+                    };
+                    break;
+                case 'leaving':
+                    transitionStyle = {
+                        transform: 'scale(0)',
+                        opacity: 0,
+                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+                    };
+                    break;
+                default:
+                    break;
+            }
+            return state === 'leaved' ? null : (_jsx("div", Object.assign({}, restProps, mergeCS(styled('badge', `badge.t-${theme}`, {
+                'badge--dot': dot,
+                'badge--alone': alone,
+            }), {
+                className: restProps.className,
+                style: Object.assign(Object.assign({}, restProps.style), (alone ? undefined : { top: offset[0], left: offset[1] })),
+            }), { title: (_a = restProps.title) !== null && _a !== void 0 ? _a : (dot ? undefined : valueProp.toString()), children: _jsx("div", Object.assign({}, mergeCS(styled('badge__wrapper'), { style: transitionStyle }), { children: dot ? null : (_jsxs(_Fragment, { children: [nums.map((n, i) => (_jsx(BadgeNumber, { styled: styled, value: n, valueDown: dataRef.current.valueDown }, nums.length - i))), value > max ? '+' : ''] })) })) })));
+        } }));
+};
+Badge.Text = BadgeText;

package/badge/BadgeText.d.ts

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

package/badge/BadgeText.js

@@ -0,0 +1,40 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { Transition } from '../internal/transition';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function BadgeText(props) {
+    const _a = useComponentProps('BadgeText', props), { styleOverrides, styleProvider, text, theme = 'danger', offset = [0, '100%'], alone = false } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "text", "theme", "offset", "alone"]);
+    const styled = useStyled(CLASSES, { badge: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.badge }, styleOverrides);
+    return (_jsx(Transition, { enter: text.length > 0, during: TTANSITION_DURING_BASE, children: (state) => {
+            var _a;
+            let transitionStyle = {};
+            switch (state) {
+                case 'enter':
+                    transitionStyle = { transform: 'scale(0)', opacity: 0 };
+                    break;
+                case 'entering':
+                    transitionStyle = {
+                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+                    };
+                    break;
+                case 'leaving':
+                    transitionStyle = {
+                        transform: 'scale(0)',
+                        opacity: 0,
+                        transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+                    };
+                    break;
+                default:
+                    break;
+            }
+            return state === 'leaved' ? null : (_jsx("div", Object.assign({}, restProps, mergeCS(styled('badge', `badge.t-${theme}`, {
+                'badge--alone': alone,
+            }), {
+                className: restProps.className,
+                style: Object.assign(Object.assign({}, restProps.style), (alone ? undefined : { top: offset[0], left: offset[1] })),
+            }), { title: (_a = restProps.title) !== null && _a !== void 0 ? _a : text, children: _jsx("div", Object.assign({}, mergeCS(styled('badge__wrapper'), { style: transitionStyle }), { children: text })) })));
+        } }));
+}

package/badge/index.d.ts

@@ -0,0 +1,2 @@
+export type { BadgeProps, BadgeTextProps } from './types';
+export { Badge } from './Badge';

package/badge/index.js

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

package/badge/internal/BadgeNumber.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { CLASSES } from '../vars';
+interface BadgeNumberProps {
+    styled: Styled<typeof CLASSES>;
+    value: number;
+    valueDown: boolean;
+}
+export declare function BadgeNumber(props: BadgeNumberProps): JSX.Element | null;
+export {};

package/badge/internal/BadgeNumber.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEffect, useRef, useState } from 'react';
+export function BadgeNumber(props) {
+    const { styled, value, valueDown } = props;
+    const containerRef = useRef(null);
+    const dataRef = useRef({
+        prevValue: value,
+    });
+    const [nums, setNums] = useState([value]);
+    useEffect(() => {
+        if (containerRef.current && dataRef.current.prevValue !== value) {
+            let newNums = Array.from({ length: 10 }).map((_, i) => i);
+            if (valueDown) {
+                newNums = newNums.concat(Array.from({ length: dataRef.current.prevValue + 1 }).map((_, i) => i));
+                newNums = newNums.slice(newNums.length - 10, newNums.length);
+                containerRef.current.style.cssText = 'transform:translateY(-900%);transition:none;';
+            }
+            else {
+                newNums = Array.from({ length: 10 - dataRef.current.prevValue })
+                    .map((_, i) => dataRef.current.prevValue + i)
+                    .concat(newNums);
+                newNums = newNums.slice(0, 10);
+                containerRef.current.style.cssText = 'transform:translateY(0);transition:none;';
+            }
+            dataRef.current.prevValue = value;
+            setNums(newNums);
+        }
+    }, [value, valueDown]);
+    useEffect(() => {
+        if (containerRef.current) {
+            containerRef.current.style.cssText = `transform:translateY(-${nums.findIndex((n) => n === value) * 100}%); `;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nums]);
+    return (_jsx("div", Object.assign({}, styled('badge__number-container'), { ref: containerRef, children: nums.map((n, i) => (_createElement("span", Object.assign({}, styled('badge__number'), { key: i }), n))) })));
+}

package/badge/types.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface BadgeProps extends BaseProps<'badge', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    value: number;
+    theme?: 'primary' | 'success' | 'warning' | 'danger';
+    max?: number;
+    dot?: boolean;
+    showZero?: boolean;
+    offset?: [number | string, number | string];
+    alone?: boolean;
+}
+export interface BadgeTextProps extends BaseProps<'badge', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    text: string;
+    theme?: 'primary' | 'success' | 'warning' | 'danger';
+    offset?: [number | string, number | string];
+    alone?: boolean;
+}

package/badge/types.js

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

package/badge/vars.d.ts

@@ -0,0 +1,12 @@
+export declare const CLASSES: {
+    badge: string;
+    'badge.t-primary': string;
+    'badge.t-success': string;
+    'badge.t-warning': string;
+    'badge.t-danger': string;
+    'badge--dot': string;
+    'badge--alone': string;
+    badge__wrapper: string;
+    'badge__number-container': string;
+    badge__number: string;
+};

package/badge/vars.js

@@ -0,0 +1,12 @@
+export const CLASSES = {
+    badge: '^badge',
+    'badge.t-primary': 't-primary',
+    'badge.t-success': 't-success',
+    'badge.t-warning': 't-warning',
+    'badge.t-danger': 't-danger',
+    'badge--dot': '^badge--dot',
+    'badge--alone': '^badge--alone',
+    badge__wrapper: '^badge__wrapper',
+    'badge__number-container': '^badge__number-container',
+    badge__number: '^badge__number',
+};

package/breadcrumb/Breadcrumb.d.ts

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

package/breadcrumb/Breadcrumb.js

@@ -0,0 +1,22 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export function Breadcrumb(props) {
+    const _a = useComponentProps('Breadcrumb', props), { styleOverrides, styleProvider, list, separator, onClick } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "separator", "onClick"]);
+    const styled = useStyled(CLASSES, { breadcrumb: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.breadcrumb }, styleOverrides);
+    return (_jsx("nav", Object.assign({}, restProps, mergeCS(styled('breadcrumb'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: _jsx("ol", Object.assign({}, styled('breadcrumb__list'), { children: list.map((item, index) => {
+                var _a, _b;
+                return (_jsxs(Fragment, { children: [_jsx("li", Object.assign({}, styled('breadcrumb__item', {
+                            'breadcrumb__item--link': item.link,
+                            'breadcrumb__item--last': index === list.length - 1,
+                        }), { onClick: () => {
+                                onClick === null || onClick === void 0 ? void 0 : onClick(item.id, item);
+                            }, children: item.title })), index !== list.length - 1 && (_jsx("li", Object.assign({}, styled('breadcrumb__separator'), { "aria-hidden": true, children: (_b = (_a = item.separator) !== null && _a !== void 0 ? _a : separator) !== null && _b !== void 0 ? _b : '/' })))] }, item.id));
+            }) })) })));
+}

package/breadcrumb/index.d.ts

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

package/breadcrumb/index.js

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

package/breadcrumb/types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface BreadcrumbItem<ID extends React.Key> {
+    id: ID;
+    title: React.ReactNode;
+    link?: boolean;
+    separator?: React.ReactNode;
+}
+export interface BreadcrumbProps<ID extends React.Key, T extends BreadcrumbItem<ID>> extends BaseProps<'breadcrumb', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'onClick'> {
+    list: T[];
+    separator?: React.ReactNode;
+    onClick?: (id: ID, origin: T) => void;
+}

package/breadcrumb/types.js

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

package/breadcrumb/vars.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    breadcrumb: string;
+    breadcrumb__list: string;
+    breadcrumb__item: string;
+    'breadcrumb__item--link': string;
+    'breadcrumb__item--last': string;
+    breadcrumb__separator: string;
+};

package/breadcrumb/vars.js

@@ -0,0 +1,8 @@
+export const CLASSES = {
+    breadcrumb: '^breadcrumb',
+    breadcrumb__list: '^breadcrumb__list',
+    breadcrumb__item: '^breadcrumb__item',
+    'breadcrumb__item--link': '^breadcrumb__item--link',
+    'breadcrumb__item--last': '^breadcrumb__item--last',
+    breadcrumb__separator: '^breadcrumb__separator',
+};

package/button/Button.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ButtonProps } from './types';
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/button/Button.js

@@ -0,0 +1,50 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { forwardRef, useRef } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useDesign, useScopedProps, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { CircularProgress } from '../internal/circular-progress';
+import { CollapseTransition } from '../internal/transition';
+import { Wave } from '../internal/wave';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_SLOW } from '../vars';
+export const Button = forwardRef((props, ref) => {
+    var _a;
+    const _b = useComponentProps('Button', props), { children, styleOverrides, styleProvider, pattern = 'primary', theme = 'primary', loading = false, shape, block = false, size: sizeProp, icon, iconRight = false } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "pattern", "theme", "loading", "shape", "block", "size", "icon", "iconRight"]);
+    const styled = useStyled(CLASSES, { button: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.button }, styleOverrides);
+    const waveRef = useRef(null);
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: restProps.disabled || loading });
+    const designProps = useDesign({ compose: { disabled } });
+    return (_jsxs("button", Object.assign({}, restProps, mergeCS(styled('button', `button.t-${theme}`, `button--${pattern}`, `button--${size}`, {
+        'button.is-loading': loading,
+        [`button--${shape}`]: shape,
+        'button--block': block,
+        'button--icon': !children,
+        'button--icon-right': iconRight,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), designProps, { ref: ref, type: (_a = restProps.type) !== null && _a !== void 0 ? _a : 'button', disabled: disabled, onClick: (e) => {
+            var _a, _b;
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            if (['primary', 'secondary', 'outline', 'dashed'].includes(pattern)) {
+                (_b = waveRef.current) === null || _b === void 0 ? void 0 : _b.call(waveRef);
+            }
+        }, children: [_jsx(Wave, { ref: waveRef, color: "var(--color)" }), checkNodeExist(icon) ? (_jsx("div", Object.assign({}, styled('button__icon'), { children: loading ? (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) : (icon) }))) : (_jsx(CollapseTransition, { originalSize: {
+                    width: '',
+                }, collapsedSize: {
+                    width: 0,
+                }, enter: loading, during: TTANSITION_DURING_SLOW, styles: {
+                    entering: {
+                        transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_SLOW}ms linear`).join(', '),
+                    },
+                    leaving: {
+                        transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_SLOW}ms linear`).join(', '),
+                    },
+                    leaved: { display: 'none' },
+                }, destroyWhenLeaved: true, children: (loadingRef, collapseStyle) => (_jsx("div", Object.assign({}, mergeCS(styled('button__icon'), {
+                    style: collapseStyle,
+                }), { ref: loadingRef, children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))) })), _jsx("div", { children: children })] })));
+});

package/button/index.d.ts

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

package/button/index.js

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