@canlooks/can-ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 C.CanLiang
+
+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 @@
+# Can UI

package/build.js

@@ -0,0 +1,61 @@
+const childProcess = require('child_process')
+const path = require('path')
+const {sync: glob} = require('glob')
+const {promises: fs} = require('fs')
+
+function clean() {
+    console.log('cleaning...')
+    return Promise.all([
+        exec('shx rm -rf dist'),
+        exec('shx rm -rf extensions/**/*.js extensions/**/*.mjs extensions/**/*.mts extensions/**/*.d.ts')
+    ])
+}
+
+function buildCore() {
+    console.log('building core...')
+    return Promise.all([
+        exec('tsc -p tsconfig.esm.json'),
+        exec('tsc -p tsconfig.cjs.json')
+    ])
+}
+
+async function buildExtensions() {
+    console.log('building extensions...')
+    const paths = glob(path.join(__dirname, 'extensions/**/*.ts'))
+    await Promise.all(paths.map(async p => {
+        const data = await fs.readFile(p)
+        await fs.writeFile(p.replace('.ts', '.mts'), data.toString().replace('/cjs', '/esm'))
+    }))
+    await Promise.all([
+        exec('tsc -p extensions/tsconfig.cjs.json'),
+        exec('tsc -p extensions/tsconfig.esm.json')
+    ])
+}
+
+async function _() {
+    const [, , command] = process.argv
+    switch (command?.toLowerCase()) {
+        case 'clean':
+            return clean()
+        case 'core':
+            return buildCore()
+        case 'extensions':
+            return buildExtensions()
+        default:
+            await clean()
+            await buildCore()
+            buildExtensions()
+    }
+    console.log('done.')
+}
+
+function exec(command) {
+    return new Promise((resolve, reject) => {
+        childProcess.exec(path.join(__dirname, 'node_modules/.bin', command), (err, stdout) => {
+            stdout && console.error(stdout)
+            err ? reject(err) : resolve(stdout)
+        })
+    })
+}
+
+_()

package/canlooks.config.js

@@ -0,0 +1,5 @@
+module.exports = () => {
+    return {
+        public: 'types'
+    }
+}

package/dist/cjs/components/accordion/accordion.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { DIVProps, Size } from '../../../types';
+export interface AccordionProps extends Omit<DIVProps, 'title' | 'prefix'> {
+    size?: Size;
+    title?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    expandIcon?: ReactNode | ((expanded: boolean) => ReactNode);
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?(expanded: boolean): void;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/accordion/accordion.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const accordion_style_1 = require("./accordion.style");
+const utils_1 = require("../../utils");
+const icons_1 = require("@ant-design/icons");
+const app_1 = require("../app");
+const transitionBase_1 = require("../transitionBase");
+exports.Accordion = (0, react_1.forwardRef)(({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }, ref) => {
+    const theme = (0, app_1.useTheme)();
+    size ??= theme.size;
+    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded, onExpandedChange);
+    const toggleExpanded = () => {
+        !readOnly && !disabled && setInnerExpanded(o => !o);
+    };
+    const renderExpandIcon = () => {
+        if (!expandIcon) {
+            return (0, jsx_runtime_1.jsx)(icons_1.CaretRightOutlined, { className: accordion_style_1.classes.expandIcon });
+        }
+        if (typeof expandIcon === 'function') {
+            return expandIcon(innerExpanded.current);
+        }
+        return expandIcon;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: accordion_style_1.style, className: (0, utils_1.classnames)(accordion_style_1.classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsxs)("div", { className: accordion_style_1.classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.title, children: title }), !!suffix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.suffix, children: suffix })] }), !!props.children &&
+                (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: innerExpanded.current, children: (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.content, children: props.children }) })] }));
+});

package/dist/cjs/components/accordion/accordion.style.d.ts

@@ -0,0 +1,11 @@
+export declare const classes: {
+    title: string;
+    content: string;
+    prefix: string;
+    titleRow: string;
+    suffix: string;
+    expandIcon: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/accordion/accordion.style.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('accordion', [
+    'titleRow',
+    'expandIcon',
+    'title',
+    'prefix',
+    'suffix',
+    'content'
+]);
+exports.style = (0, utils_1.defineCss)(({ divider, borderRadius, background, spacing, text, gray, easing }) => (0, react_1.css) `
+    border: 1px solid ${divider};
+    border-radius: ${borderRadius}px;
+    background-color: ${background.card};
+    transition: margin .2s ${easing.easeOut};
+
+    .${exports.classes.titleRow} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[2]}px;
+        padding: 9px ${spacing[5]}px;
+        transition: padding .2s ${easing.easeOut};
+
+        .${exports.classes.expandIcon} {
+            color: ${text.disabled};
+            transition: transform .2s ${easing.easeOut};
+        }
+
+        .${exports.classes.title} {
+            flex: 1;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .${exports.classes.prefix},
+        .${exports.classes.suffix} {
+            color: ${text.secondary};
+        }
+    }
+
+    &:not([data-read-only=true]):not([data-disabled=true]) {
+        .${exports.classes.titleRow} {
+            cursor: pointer;
+        }
+    }
+
+    &[data-disabled=true] {
+        background-color: ${gray(.1)};
+
+        .${exports.classes.titleRow} {
+            cursor: not-allowed;
+        }
+    }
+
+    &[data-expanded=true] {
+        .${exports.classes.titleRow} {
+            padding: 15px ${spacing[5]}px;
+        }
+
+        .${exports.classes.expandIcon} {
+            transform: rotate(90deg);
+        }
+    }
+
+    .${exports.classes.content} {
+        padding: 0 ${spacing[5]}px ${spacing[5]}px;
+    }
+
+    &[data-size=small] {
+        .${exports.classes.titleRow} {
+            padding: 6px ${spacing[5]}px;
+        }
+
+        &[data-expanded=true] {
+            .${exports.classes.titleRow} {
+                padding: 11px ${spacing[5]}px;
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${exports.classes.titleRow} {
+            padding: 12px ${spacing[5]}px;
+        }
+
+        &[data-expanded=true] {
+            .${exports.classes.titleRow} {
+                padding: 17px ${spacing[5]}px;
+            }
+        }
+    }
+
+    &[data-compact=column] {
+        &:not([data-first=true]) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            margin-top: -1px;
+        }
+    
+        &:not([data-last=true]) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+        
+        &[data-expanded=true] {
+            &:not([data-first=true]) {
+                margin-top: ${spacing[3]}px;
+            }
+
+            &:not([data-last=true]):not(:has(+ [data-expanded=true])) {
+                margin-bottom: ${spacing[3]}px
+            }
+        }
+    }
+
+    &[data-compact=row] {
+        &:not([data-first=true]) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            margin-left: -1px;
+        }
+    
+        &:not([data-last=true]) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+`);

package/dist/cjs/components/accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './accordion';

package/dist/cjs/components/accordion/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./accordion"), exports);

package/dist/cjs/components/actionSheet/actionSheet.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react';
+import { OverlayBaseProps } from '../overlayBase';
+import { TransitionBaseProps } from '../transitionBase';
+import { MenuItemProps } from '../menuItem';
+import { Obj } from '../../../types';
+export type ActionSheetCloseReason = 'escape' | 'canceled' | 'confirmed' | 'maskClicked' | 'action';
+export interface ActionSheetProps<A extends MenuItemProps & Obj> extends Omit<OverlayBaseProps, 'title'> {
+    title?: ReactNode;
+    actions?: A[];
+    placement?: 'top' | 'bottom';
+    /** 是否可通过点击遮罩层关闭对话框，@default false */
+    maskClosable?: boolean;
+    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    escapeClosable?: boolean;
+    /** 点击选项 */
+    onAction?(action: A): void;
+    onConfirm?(e: React.MouseEvent<HTMLDivElement>): void;
+    onCancel?(e: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | KeyboardEvent): void;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onClose?(reason: ActionSheetCloseReason): void;
+    /** 是否显示确定按钮，@default false */
+    showConfirm?: boolean;
+    confirmText?: ReactNode;
+    confirmProps?: MenuItemProps;
+    /** 是否显示取消按钮，@default true */
+    showCancel?: boolean;
+    cancelText?: ReactNode;
+    cancelProps?: MenuItemProps;
+    slideProps?: TransitionBaseProps<HTMLDivElement>;
+}
+export declare const ActionSheet: <A extends MenuItemProps & Obj>(props: ActionSheetProps<A>) => ReactElement;

package/dist/cjs/components/actionSheet/actionSheet.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionSheet = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const actionSheet_style_1 = require("./actionSheet.style");
+const utils_1 = require("../../utils");
+const overlayBase_1 = require("../overlayBase");
+const transitionBase_1 = require("../transitionBase");
+const menuItem_1 = require("../menuItem");
+const placementToDirection = {
+    top: 'down',
+    bottom: 'up'
+};
+exports.ActionSheet = (0, react_1.memo)((0, react_1.forwardRef)(({ title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }, ref) => {
+    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
+    const close = (reason) => {
+        onClose?.(reason);
+        setInnerOpen(false);
+    };
+    const overlayRef = (0, utils_1.useEscapeClosable)({ escapeClosable, close }, onCancel);
+    const onMaskClick = (e) => {
+        props.onMaskClick?.(e);
+        maskClosable && close('maskClicked');
+    };
+    const cancelHandler = (e) => {
+        onCancel?.(e);
+        close('canceled');
+    };
+    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, ref: (0, utils_1.cloneRef)(ref, overlayRef), css: actionSheet_style_1.style, className: (0, utils_1.classnames)(actionSheet_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsxs)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, className: (0, utils_1.classnames)(actionSheet_style_1.classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
+                    (0, jsx_runtime_1.jsxs)("div", { className: actionSheet_style_1.classes.card, children: [!!title &&
+                                (0, jsx_runtime_1.jsx)("div", { className: actionSheet_style_1.classes.title, children: title }), showConfirm &&
+                                (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { className: actionSheet_style_1.classes.action, size: "large", label: confirmText, ...confirmProps, onClick: e => {
+                                        confirmProps?.onClick?.(e);
+                                        onConfirm?.(e);
+                                        close('confirmed');
+                                    } }), actions?.map((menuItemProps, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { className: (0, utils_1.classnames)(actionSheet_style_1.classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
+                                    menuItemProps.onClick?.(e);
+                                    onAction?.(menuItemProps);
+                                    close('action');
+                                } }, i))] }), showCancel &&
+                    (0, jsx_runtime_1.jsx)("div", { className: actionSheet_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { color: "error", emphasized: true, size: "large", label: cancelText, ...cancelProps, onClick: cancelHandler }) })] }) }));
+}));

package/dist/cjs/components/actionSheet/actionSheet.style.d.ts

@@ -0,0 +1,9 @@
+export declare const classes: {
+    card: string;
+    title: string;
+    sheet: string;
+    action: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/actionSheet/actionSheet.style.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('action-sheet', [
+    'sheet',
+    'card',
+    'title',
+    'action'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, background, boxShadow, borderRadius, text, divider }) => (0, react_1.css) `
+    .${exports.classes.sheet} {
+        position: absolute;
+        padding: ${spacing[8]}px;
+    }
+
+    &[data-placement=top] {
+        .${exports.classes.sheet} {
+            transform-origin: top;
+            inset: 0 0 auto;
+        }
+    }
+    
+    &[data-placement=bottom] {
+        .${exports.classes.sheet} {
+            transform-origin: bottom;
+            inset: auto 0 0;
+        }
+    }
+
+    .${exports.classes.card} {
+        text-align: center;
+        background-color: ${background.card};
+        box-shadow: ${boxShadow[1]};
+        border-radius: ${borderRadius}px;
+        overflow: hidden;
+
+        &:not(:last-of-type) {
+            margin-bottom: ${spacing[8]}px;
+        }
+    }
+
+    .${exports.classes.title} {
+        line-height: 3;
+        color: ${text.secondary};
+        font-size: ${13 / 14}em;
+    }
+
+    \.${exports.classes.action} {
+        border-radius: 0;
+
+        &:not(:last-of-type) {
+            border-bottom: 1px solid ${divider};
+        }
+    }
+`);

package/dist/cjs/components/actionSheet/index.d.ts

@@ -0,0 +1 @@
+export * from './actionSheet';

package/dist/cjs/components/actionSheet/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./actionSheet"), exports);

package/dist/cjs/components/alert/alert.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Status } from '../../../types';
+export interface AlertProps extends Omit<DIVProps, 'title' | 'prefix' | 'children'> {
+    variant?: 'filled' | 'outlined' | 'standard';
+    status?: Status;
+    color?: ColorPropsValue;
+    /** @default true */
+    showIcon?: boolean;
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    closable?: boolean;
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    loading?: boolean;
+}
+export declare const Alert: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/alert/alert.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const alert_style_1 = require("./alert.style");
+const status_1 = require("../status");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const skeleton_1 = require("../skeleton");
+exports.Alert = (0, react_1.memo)((0, react_1.forwardRef)(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }, ref) => {
+    const Icon = status_1.statusMapToIcon[status];
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, alert_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(alert_style_1.classes.root, props.className), "data-variant": variant, children: [showIcon &&
+                (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.icon, children: loading
+                        ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { variant: "circular" })
+                        : icon ?? (0, jsx_runtime_1.jsx)(Icon, {}) }), !loading && !!prefix &&
+                (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsxs)("div", { className: alert_style_1.classes.content, children: [!!(loading || title) &&
+                        (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.title, children: loading
+                                ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: "40%" })
+                                : title }), (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.description, children: loading
+                            ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {})
+                            : description })] }), !loading && !!suffix &&
+                (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.suffix, children: suffix }), closable &&
+                (0, jsx_runtime_1.jsx)(button_1.Button, { className: alert_style_1.classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text', onClick: onClose, disabled: loading, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }));
+}));

package/dist/cjs/components/alert/alert.style.d.ts

@@ -0,0 +1,15 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    title: string;
+    content: string;
+    prefix: string;
+    icon: string;
+    close: string;
+    suffix: string;
+    description: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

package/dist/cjs/components/alert/alert.style.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('alert', [
+    'icon',
+    'content',
+    'title',
+    'description',
+    'prefix',
+    'suffix',
+    'close'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ mode, spacing, borderRadius, text }) => {
+        const c = (0, color_1.default)(colorValue);
+        const border = c.alpha(.5).string();
+        const bg = c.alpha(mode === 'light' ? .1 : .16).string();
+        const filledBg = mode === 'light' ? colorValue : c.alpha(.8).string();
+        return (0, react_1.css) `
+            display: flex;
+            gap: ${spacing[3]}px;
+            padding: ${spacing[4]}px ${spacing[5]}px;
+            border-radius: ${borderRadius}px;
+
+            .${exports.classes.icon} {
+                display: block;
+                color: ${colorValue};
+            }
+
+            &[data-variant=standard],
+            &[data-variant=outlined] {
+                background-color: ${bg};
+            }
+
+            &[data-variant=outlined] {
+                border: 1px solid ${border};
+            }
+
+            &[data-variant=filled] {
+                background-color: ${filledBg};
+                color: #ffffff;
+
+                .${exports.classes.icon} {
+                    color: #ffffff;
+                }
+            }
+
+            &:has(.${exports.classes.title}) {
+                .${exports.classes.icon} {
+                    display: flex;
+                    font-size: ${20 / 14}em;
+                }
+            }
+
+            .${exports.classes.content} {
+                flex: 1;
+                min-width: 0;
+            }
+
+            .${exports.classes.title} {
+                font-weight: bold;
+                font-size: ${15 / 14}em;
+
+                & + .${exports.classes.description} {
+                    margin-top: ${spacing[3]}px;
+                }
+            }
+
+            &:not([data-variant=filled]) .${exports.classes.description} {
+                color: ${text.secondary};
+            }
+
+            .${exports.classes.close} {
+                align-self: flex-start;
+            }
+        `;
+    }, [colorValue]);
+}

package/dist/cjs/components/alert/index.d.ts

@@ -0,0 +1 @@
+export * from './alert';

package/dist/cjs/components/alert/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./alert"), exports);

package/dist/cjs/components/anchor/anchor.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+type AnchorContextBaseProps = {
+    scrollIntoViewOptions?: ScrollIntoViewOptions;
+};
+export interface AnchorContextProps extends AnchorContextBaseProps {
+    thesholds?: [number, number];
+    container?: Element | (() => Element);
+    children?: ReactNode;
+}
+export interface AnchorContextType extends AnchorContextBaseProps {
+    targets: Map<string, Element | null>;
+    activeId: string | null;
+}
+export declare const anchorContext: import("react").Context<AnchorContextType>;
+export declare function useAnchorContext(): AnchorContextType;
+export declare function AnchorContext({ thesholds, container, children, ...props }: AnchorContextProps): import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * 在链接按钮组件内使用
+ * @param id
+ */
+export declare function useAnchorLinkProps(id: string): {
+    active: boolean;
+    onClick: () => void;
+};
+/**
+ * 在需要滚动到的目标元素上使用
+ * @param id
+ */
+export declare function useAnchorTargetRef<T extends Element>(id: string): import("react").RefObject<T>;
+export {};