@laser-ui/components 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.0.1 (2023-09-07)
+
+**Note:** Version bump only for package @laser-ui/components

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Xie Jay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+<p align="center">
+  <a href="//react-devui.com" rel="noopener" target="_blank"><img width="150" src="/packages/site/src/assets/logo.svg" alt="DevUI logo"></a>
+</p>
+
+<h1 align="center">React DevUI</h1>
+
+<div align="center">
+
+<!-- prettier-ignore-start -->
+[![npm latest package](http://img.shields.io/npm/v/@react-devui/ui/latest.svg?style=flat-square)](https://www.npmjs.com/package/@react-devui/ui)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@react-devui/ui?style=flat-square)](https://bundlephobia.com/package/@react-devui/ui)
+[![gitHub workflow status](https://img.shields.io/github/actions/workflow/status/DevCloudFE/react-devui/main.yml?branch=main&style=flat-square)](https://github.com/DevCloudFE/react-devui/actions/workflows/main.yml)
+<!-- prettier-ignore-end -->
+
+</div>
+
+<div align="center">
+
+English | [简体中文](README.zh-CN.md)
+
+</div>
+
+## Installation
+
+```bash
+yarn add @react-devui/ui @react-devui/icons @react-devui/hooks @react-devui/utils
+```
+
+## Getting Started
+
+```tsx
+import type { DRootProps } from '@react-devui/ui';
+
+import { useMemo } from 'react';
+
+import { DRoot } from '@react-devui/ui';
+
+export default function App() {
+  const rootContext = useMemo<DRootProps['context']>(
+    () => ({
+      layout: { pageScrollEl: '#app-main', contentResizeEl: '#app-content' },
+    }),
+    []
+  );
+
+  return (
+    <DRoot context={rootContext}>
+      <main id="app-main" style={{ overflow: 'auto' }}>
+        <section id="app-content" style={{ height: '200vh' }}>
+          Some content...
+        </section>
+      </main>
+    </DRoot>
+  );
+}
+```
+
+## Links
+
+- [react-devui.com](//react-devui.com)
+- [admin.react-devui.com](//admin.react-devui.com)
+
+## Contributing
+
+Please read our [contributing guide](/CONTRIBUTING.md) first.
+
+Need unit test support (Jest) 🤝.
+
+## License
+
+[![gitHub license](https://img.shields.io/github/license/DevCloudFE/react-devui?style=flat-square)](/LICENSE)

package/accordion/Accordion.d.ts

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

package/accordion/Accordion.js

@@ -0,0 +1,162 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
+import { isNull, isUndefined, nth } from 'lodash';
+import { useId } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useNamespace, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { CollapseTransition } from '../internal/transition';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function Accordion(props) {
+    const _a = useComponentProps('Accordion', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive, activeOne, arrow = 'right', onActiveChange, afterActiveChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "activeOne", "arrow", "onActiveChange", "afterActiveChange"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { accordion: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.accordion }, styleOverrides);
+    const uniqueId = useId();
+    const getButtonId = (id) => `${namespace}-accordion-button-${id}-${uniqueId}`;
+    const getRegionId = (id) => `${namespace}-accordion-region-${id}-${uniqueId}`;
+    const [activeId, changeActiveId] = useControlled(defaultActive !== null && defaultActive !== void 0 ? defaultActive : (activeOne ? null : []), activeProp, (id) => {
+        if (onActiveChange) {
+            if (activeOne) {
+                onActiveChange(id, isNull(id) ? null : list.find((item) => item.id === id));
+            }
+            else {
+                let length = id.length;
+                const items = [];
+                for (const item of list) {
+                    if (length === 0) {
+                        break;
+                    }
+                    const index = id.findIndex((v) => v === item.id);
+                    if (index !== -1) {
+                        items[index] = item;
+                        length -= 1;
+                    }
+                }
+                onActiveChange(id, items);
+            }
+        }
+    });
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('accordion'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: list.map((item, index) => {
+            const { id: itemId, title: itemTitle, region: itemRegion, arrow: itemArrow = arrow, disabled: itemDisabled = false } = item;
+            const getAccordion = (next, _index = index) => {
+                for (let focusIndex = next ? _index + 1 : _index - 1, n = 0; n < list.length; next ? focusIndex++ : focusIndex--, n++) {
+                    const t = nth(list, focusIndex % list.length);
+                    if (t && !t.disabled) {
+                        return t;
+                    }
+                }
+            };
+            const focusTab = (t) => {
+                if (t) {
+                    const el = document.getElementById(getButtonId(t.id));
+                    if (el) {
+                        el.focus();
+                    }
+                }
+            };
+            const buttonId = getButtonId(itemId);
+            const regionId = getRegionId(itemId);
+            const isActive = activeOne ? activeId === itemId : activeId.includes(itemId);
+            const iconRotate = (() => {
+                if (itemArrow === 'left' && !isActive) {
+                    return -90;
+                }
+                if (itemArrow === 'right' && isActive) {
+                    return 180;
+                }
+                return undefined;
+            })();
+            const handleClick = () => {
+                if (activeOne) {
+                    changeActiveId(isActive ? null : itemId);
+                }
+                else {
+                    changeActiveId((draft) => {
+                        const index = draft.findIndex((v) => v === itemId);
+                        if (index !== -1) {
+                            draft.splice(index, 1);
+                        }
+                        else {
+                            draft.push(itemId);
+                        }
+                    });
+                }
+            };
+            return (_createElement("div", Object.assign({}, styled('accordion__item'), { key: itemId }),
+                _jsxs("div", Object.assign({}, styled('accordion__item-button', {
+                    'accordion__item-button.is-disabled': itemDisabled,
+                    'accordion__item-button--arrow-left': itemArrow === 'left',
+                }), { id: buttonId, tabIndex: itemDisabled ? -1 : 0, role: "button", "aria-controls": regionId, "aria-expanded": isActive, "aria-disabled": itemDisabled, onClick: handleClick, onKeyDown: (e) => {
+                        switch (e.code) {
+                            case 'Enter':
+                            case 'Space':
+                                e.preventDefault();
+                                handleClick();
+                                break;
+                            case 'ArrowUp':
+                                e.preventDefault();
+                                focusTab(getAccordion(false));
+                                break;
+                            case 'ArrowDown':
+                                e.preventDefault();
+                                focusTab(getAccordion(true));
+                                break;
+                            case 'Home':
+                                e.preventDefault();
+                                for (const a of list) {
+                                    if (!a.disabled) {
+                                        focusTab(a);
+                                        break;
+                                    }
+                                }
+                                break;
+                            case 'End':
+                                e.preventDefault();
+                                for (let index = list.length - 1; index >= 0; index--) {
+                                    if (!list[index].disabled) {
+                                        focusTab(list[index]);
+                                        break;
+                                    }
+                                }
+                                break;
+                            default:
+                                break;
+                        }
+                    }, children: [_jsx("div", Object.assign({}, styled('accordion__item-title'), { children: itemTitle })), itemArrow && (_jsx("div", Object.assign({}, mergeCS(styled('accordion__item-arrow'), {
+                            style: {
+                                transform: isUndefined(iconRotate) ? undefined : `rotate(${iconRotate}deg)`,
+                            },
+                        }), { children: _jsx(Icon, { children: _jsx(KeyboardArrowDownOutlined, {}) }) })))] })),
+                _jsx(CollapseTransition, { originalSize: {
+                        height: 'auto',
+                    }, collapsedSize: {
+                        height: 0,
+                    }, enter: isActive, during: TTANSITION_DURING_BASE, styles: {
+                        enter: { opacity: 0 },
+                        entering: {
+                            transition: ['height', 'padding', 'margin', 'opacity']
+                                .map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`)
+                                .join(', '),
+                        },
+                        leaving: {
+                            opacity: 0,
+                            transition: ['height', 'padding', 'margin', 'opacity']
+                                .map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`)
+                                .join(', '),
+                        },
+                        leaved: { display: 'none' },
+                    }, afterEnter: () => {
+                        afterActiveChange === null || afterActiveChange === void 0 ? void 0 : afterActiveChange(itemId, item, true);
+                    }, afterLeave: () => {
+                        afterActiveChange === null || afterActiveChange === void 0 ? void 0 : afterActiveChange(itemId, item, false);
+                    }, children: (regionRef, collapseStyle) => (_jsx("div", Object.assign({}, mergeCS(styled('accordion__item-region'), {
+                        style: collapseStyle,
+                    }), { ref: regionRef, id: regionId, role: "region", "aria-labelledby": getButtonId(itemId), children: itemRegion }))) })));
+        }) })));
+}

package/accordion/index.d.ts

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

package/accordion/index.js

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

package/accordion/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface AccordionItem<ID extends React.Key> {
+    id: ID;
+    title: React.ReactNode;
+    region: React.ReactNode;
+    arrow?: boolean | 'left';
+    disabled?: boolean;
+}
+export interface AccordionProps<ID extends React.Key, T extends AccordionItem<ID>> extends BaseProps<'accordion', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    list: T[];
+    active?: ID | null | ID[];
+    defaultActive?: ID | null | ID[];
+    activeOne?: boolean;
+    arrow?: 'left' | 'right' | false;
+    onActiveChange?: (id: any, origin: any) => void;
+    afterActiveChange?: (id: ID, origin: T, active: boolean) => void;
+}

package/accordion/types.js

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

package/accordion/vars.d.ts

@@ -0,0 +1,10 @@
+export declare const CLASSES: {
+    accordion: string;
+    accordion__item: string;
+    'accordion__item-button': string;
+    'accordion__item-button.is-disabled': string;
+    'accordion__item-button--arrow-left': string;
+    'accordion__item-title': string;
+    'accordion__item-arrow': string;
+    'accordion__item-region': string;
+};

package/accordion/vars.js

@@ -0,0 +1,10 @@
+export const CLASSES = {
+    accordion: '^accordion',
+    accordion__item: '^accordion__item',
+    'accordion__item-button': '^accordion__item-button',
+    'accordion__item-button.is-disabled': 'is-disabled',
+    'accordion__item-button--arrow-left': '^accordion__item-button--arrow-left',
+    'accordion__item-title': '^accordion__item-title',
+    'accordion__item-arrow': '^accordion__item-arrow',
+    'accordion__item-region': '^accordion__item-region',
+};

package/affix/Affix.d.ts

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

package/affix/Affix.js

@@ -0,0 +1,56 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEvent, useEventCallback, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
+import { getOffsetToRoot, toPx } from '@laser-ui/utils';
+import { isFunction, isString, isUndefined } from 'lodash';
+import { cloneElement, forwardRef, useId, useImperativeHandle, useState } from 'react';
+import { useComponentProps, useLayout, useListenGlobalScrolling, useNamespace } from '../hooks';
+export const Affix = forwardRef((props, ref) => {
+    const { children, top = 0, target, zIndex } = useComponentProps('Affix', props);
+    const namespace = useNamespace();
+    const { pageScrollRef, contentResizeRef } = useLayout();
+    const uniqueId = useId();
+    const affixRef = useRefExtra(() => document.querySelector(`[data-l-affix="${uniqueId}"]`));
+    const referenceRef = useRefExtra(() => document.querySelector(`[data-l-affix-reference="${uniqueId}"]`));
+    const targetRef = useRefExtra(isUndefined(target) ? () => pageScrollRef.current : target);
+    const [sticky, setSticky] = useState(false);
+    const [positionStyle, setPositionStyle] = useState();
+    const updatePosition = useEventCallback(() => {
+        const offsetEl = sticky ? referenceRef.current : affixRef.current;
+        if (targetRef.current && offsetEl) {
+            const offsetRect = offsetEl.getBoundingClientRect();
+            const targetTop = getOffsetToRoot(targetRef.current);
+            const distance = isString(top) ? toPx(top, true) : top;
+            setSticky(Math.ceil(targetRef.current.scrollTop) + distance >= getOffsetToRoot(offsetEl) - targetTop);
+            setPositionStyle({
+                width: offsetRect.width,
+                height: offsetRect.height,
+                top: (isUndefined(target) ? targetTop : targetRef.current.getBoundingClientRect().top) + distance,
+                left: offsetRect.left,
+            });
+        }
+    });
+    useIsomorphicLayoutEffect(() => {
+        updatePosition();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition);
+    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, listenGlobalScrolling);
+    useEvent(targetRef, 'scroll', updatePosition, { passive: true }, listenGlobalScrolling || isUndefined(target));
+    useResize(sticky ? referenceRef : affixRef, updatePosition);
+    useResize(contentResizeRef, updatePosition);
+    useImperativeHandle(ref, () => ({
+        sticky,
+        updatePosition,
+    }), [sticky, updatePosition]);
+    const render = (el) => (_jsxs(_Fragment, { children: [sticky &&
+                cloneElement(el, {
+                    style: Object.assign(Object.assign({}, el.props.style), { visibility: 'hidden' }),
+                    'aria-hidden': true,
+                    'data-l-affix-reference': uniqueId,
+                }), cloneElement(el, {
+                style: sticky
+                    ? Object.assign(Object.assign(Object.assign({}, el.props.style), positionStyle), { position: 'fixed', zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : `var(--${namespace}-zindex-sticky)` }) : el.props.style,
+                'data-l-affix': uniqueId,
+            })] }));
+    return isFunction(children) ? children(render) : render(children);
+});

package/affix/index.d.ts

@@ -0,0 +1,2 @@
+export type { AffixRef, AffixProps } from './types';
+export { Affix } from './Affix';

package/affix/index.js

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

package/affix/types.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { CloneHTMLElement } from '../types';
+import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
+export {};
+export interface AffixRef {
+    sticky: boolean;
+    updatePosition: () => void;
+}
+export interface AffixProps {
+    children: React.ReactElement | ((render: CloneHTMLElement) => JSX.Element | null);
+    top?: number | string;
+    target?: RefExtra;
+    zIndex?: number | string;
+}

package/affix/types.js

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

package/alert/Alert.d.ts

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

package/alert/Alert.js

@@ -0,0 +1,53 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
+import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
+import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import { isUndefined } from 'lodash';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { CollapseTransition } from '../internal/transition';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function Alert(props) {
+    const _a = useComponentProps('Alert', props), { children, styleOverrides, styleProvider, visible: visibleProp, type, title, icon, closable = false, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "type", "title", "icon", "closable", "onClose", "afterVisibleChange"]);
+    const styled = useStyled(CLASSES, { alert: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.alert }, styleOverrides);
+    const { t } = useTranslation();
+    const [visible, changeVisible] = useControlled(true, visibleProp, onClose);
+    const hasTitle = checkNodeExist(title);
+    const closeNode = closable && (_jsx("button", Object.assign({}, styled('alert__close'), { "aria-label": t('Close'), onClick: () => {
+            changeVisible(false);
+        }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })));
+    return (_jsx(CollapseTransition, { originalSize: {
+            height: 'auto',
+        }, collapsedSize: {
+            height: 0,
+        }, enter: visible, during: TTANSITION_DURING_BASE, styles: {
+            enter: { opacity: 0 },
+            entering: {
+                transition: ['height', 'padding', 'margin', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+            },
+            leaving: {
+                opacity: 0,
+                transition: ['height', 'padding', 'margin', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+            },
+            leaved: { display: 'none' },
+        }, destroyWhenLeaved: true, afterEnter: () => {
+            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+        }, afterLeave: () => {
+            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+        }, children: (alertRef, collapseStyle) => {
+            var _a;
+            return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('alert', {
+                'alert--with-title': hasTitle,
+                [`alert--${type}`]: type,
+            }), {
+                className: restProps.className,
+                style: Object.assign(Object.assign({}, restProps.style), collapseStyle),
+            }), { ref: alertRef, role: (_a = restProps.role) !== null && _a !== void 0 ? _a : 'alert', children: [icon !== false && (!isUndefined(type) || checkNodeExist(icon)) && (_jsx("div", Object.assign({}, styled('alert__icon'), { children: checkNodeExist(icon) ? (icon) : (_jsx(Icon, { children: type === 'success' ? (_jsx(CheckCircleOutlined, {})) : type === 'warning' ? (_jsx(WarningAmberOutlined, {})) : type === 'error' ? (_jsx(HighlightOffOutlined, {})) : (_jsx(InfoOutlined, {})) })) }))), _jsxs("div", Object.assign({}, styled('alert__content'), { children: [hasTitle && (_jsxs("div", Object.assign({}, styled('alert__header'), { children: [_jsx("div", Object.assign({}, styled('alert__title'), { children: title })), closeNode] }))), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('alert__message'), { children: children })), !hasTitle && closeNode] }))] })));
+        } }));
+}

package/alert/index.d.ts

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

package/alert/index.js

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

package/alert/types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface AlertProps extends BaseProps<'alert', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    visible?: boolean;
+    type?: 'success' | 'warning' | 'error' | 'info';
+    title?: React.ReactNode;
+    icon?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}

package/alert/types.js

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

package/alert/vars.d.ts

@@ -0,0 +1,14 @@
+export declare const CLASSES: {
+    alert: string;
+    'alert--success': string;
+    'alert--warning': string;
+    'alert--error': string;
+    'alert--info': string;
+    'alert--with-title': string;
+    alert__icon: string;
+    alert__content: string;
+    alert__message: string;
+    alert__header: string;
+    alert__title: string;
+    alert__close: string;
+};

package/alert/vars.js

@@ -0,0 +1,14 @@
+export const CLASSES = {
+    alert: '^alert',
+    'alert--success': '^alert--success',
+    'alert--warning': '^alert--warning',
+    'alert--error': '^alert--error',
+    'alert--info': '^alert--info',
+    'alert--with-title': '^alert--with-title',
+    alert__icon: '^alert__icon',
+    alert__content: '^alert__content',
+    alert__message: '^alert__message',
+    alert__header: '^alert__header',
+    alert__title: '^alert__title',
+    alert__close: '^alert__close',
+};

package/anchor/Anchor.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { AnchorItem, AnchorProps, AnchorRef } from './types';
+import { DOT_INDICATOR, LINE_INDICATOR } from './vars';
+declare function AnchorFC<T extends AnchorItem>(props: AnchorProps<T>, ref: React.ForwardedRef<AnchorRef>): JSX.Element | null;
+export declare const Anchor: {
+    <T extends AnchorItem>(props: AnchorProps<T> & React.RefAttributes<AnchorRef>): ReturnType<typeof AnchorFC>;
+    DOT_INDICATOR: typeof DOT_INDICATOR;
+    LINE_INDICATOR: typeof LINE_INDICATOR;
+};
+export {};