@canlooks/can-ui 0.0.1

package/dist/esm/components/pagination/pagination.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createContext, forwardRef, memo } from 'react';
+import { classes, style } from './pagination.style';
+import { classnames, useControlled } from '../../utils';
+import { PaginationPager } from './pager';
+import { PaginationSizer } from './sizer';
+import { PaginationJumper } from './jumper';
+import { PaginationCounter } from './counter';
+export const paginationContext = createContext({
+    size: 'small',
+    total: 0,
+    pageNum: 1,
+    page: 1,
+    onPageChange(page) { },
+    pageSize: 10,
+    onPageSizeChange(pageSize) { }
+});
+export const Pagination = memo(forwardRef(({ size = 'small', total = 0, defaultPage = 1, page, onPageChange, defaultPageSize = 10, pageSize, onPageSizeChange, onChange, ...props }, ref) => {
+    const [innerPage, setInnerPage] = useControlled(defaultPage, page, onPageChange);
+    const [innerPageSize, setInnerPageSize] = useControlled(defaultPageSize, pageSize, onPageSizeChange);
+    const pageChangeHandler = (page) => {
+        setInnerPage(page);
+        onChange?.(page, innerPageSize.current);
+    };
+    const pageSizeChangeHandler = (pageSize) => {
+        setInnerPageSize(pageSize);
+        onChange?.(innerPage.current, pageSize);
+    };
+    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: _jsx(paginationContext.Provider, { value: {
+                size,
+                total,
+                pageNum: Math.max(Math.ceil(total / innerPageSize.current), 1),
+                page: innerPage.current,
+                onPageChange: pageChangeHandler,
+                pageSize: innerPageSize.current,
+                onPageSizeChange: pageSizeChangeHandler
+            }, children: props.children ||
+                _jsxs(_Fragment, { children: [_jsx(PaginationCounter, {}), _jsx(PaginationPager, {}), _jsx(PaginationSizer, {}), _jsx(PaginationJumper, {})] }) }) }));
+}));

package/dist/esm/components/pagination/pagination.style.d.ts

@@ -0,0 +1,11 @@
+export declare const classes: {
+    button: string;
+    input: string;
+    pager: string;
+    sizer: string;
+    jumper: string;
+    counter: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/pagination/pagination.style.js

@@ -0,0 +1,53 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as inputClasses } from '../input/input.style';
+export const classes = defineClasses('pagination', [
+    'button',
+    'pager',
+    'sizer',
+    'jumper',
+    'input',
+    'counter'
+]);
+export const style = defineCss(({ spacing }) => css `
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: ${spacing[3]}px;
+
+    .${classes.pager} {
+        display: flex;
+    }
+
+    .${classes.button} {
+        padding-left: 3px;
+        padding-right: 3px;
+
+        &[data-size=small] {
+            min-width: 24px;
+        }
+
+        &[data-size=medium] {
+            min-width: 32px;
+        }
+
+        &[data-size=large] {
+            min-width: 40px;
+        }
+    }
+
+    .${classes.jumper} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[3]}px;
+        
+        .${classes.input} {
+            width: 45px;
+
+            .${inputClasses.input} {
+                text-align: center;
+            }
+        }
+    }
+`);

package/dist/esm/components/pagination/sizer.d.ts

@@ -0,0 +1,5 @@
+import { SelectSingleProps } from '../select';
+import { MenuOptionType } from '../optionsBase';
+import { Id } from '../../../types';
+export type PaginationSizerProps<O extends MenuOptionType, V extends Id = Id> = SelectSingleProps<O, V>;
+export declare const PaginationSizer: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaginationSizerProps<MenuOptionType<Id>, Id>, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/pagination/sizer.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo, forwardRef, useContext } from 'react';
+import { Select } from '../select';
+import { paginationContext } from './pagination';
+import { classnames } from '../../utils';
+import { classes } from './pagination.style';
+export const PaginationSizer = memo(forwardRef((props, ref) => {
+    const { size, pageSize, onPageSizeChange } = useContext(paginationContext);
+    return (_jsxs(Select, { size: size, value: pageSize, onChange: onPageSizeChange, renderBackfill: (v) => v + ' 条/页', sizeAdaptable: false, ...props, ref: ref, className: classnames(classes.pager, props.className), children: [_jsx(Select.Option, { value: 10, label: "10 \u6761/\u9875" }), _jsx(Select.Option, { value: 20, label: "20 \u6761/\u9875" }), _jsx(Select.Option, { value: 50, label: "50 \u6761/\u9875" }), _jsx(Select.Option, { value: 100, label: "100 \u6761/\u9875" })] }));
+}));

package/dist/esm/components/palette/colorValueInput.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { FixInputNumberParam } from '../../utils';
+import { DIVProps } from '../../../types';
+interface ColorValueInputProps extends Omit<DIVProps, 'onChange'>, FixInputNumberParam {
+    value: string | number;
+    label: ReactNode;
+    onChange(value: string): void;
+    hex?: boolean;
+}
+export declare function ColorValueInput({ value, label, onChange, hex, min, max, precision, ...props }: ColorValueInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/palette/colorValueInput.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Input } from '../input';
+import { classes } from './palette.style';
+import { fixInputNumber, useDerivedState } from '../../utils';
+import Color from 'color';
+export function ColorValueInput({ value, label, onChange, hex, min, max, precision, ...props }) {
+    const [innerValue, _setInputValue] = useDerivedState(hex ? value.toString().slice(1) : value + '');
+    const setInputValue = (val) => {
+        _setInputValue(val);
+        if (hex) {
+            hexValidator(val) && onChange('#' + val);
+        }
+        else {
+            const fixedValue = fixInputNumber(val, { min, max, precision });
+            fixedValue && onChange(fixedValue);
+        }
+    };
+    const hexValidator = (val) => {
+        try {
+            Color('#' + val, 'hex');
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    };
+    const blurHandler = () => {
+        if (hex) {
+            if (!hexValidator(innerValue.current)) {
+                _setInputValue(value.toString().slice(1));
+            }
+        }
+        else {
+            const fixedValue = fixInputNumber(innerValue.current, { min, max, precision }) || value + '';
+            if (fixedValue !== innerValue.current) {
+                _setInputValue(fixedValue);
+                onChange(fixedValue);
+            }
+        }
+    };
+    return (_jsxs("div", { ...props, className: classes.inputItem, children: [_jsx(Input, { className: classes.input, size: "small", clearable: false, value: innerValue.current, onChange: e => setInputValue(e.target.value), onBlur: blurHandler, prefix: hex && '#' }), _jsx("div", { className: classes.inputItemLabel, children: label })] }));
+}

package/dist/esm/components/palette/index.d.ts

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

package/dist/esm/components/palette/index.js

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

package/dist/esm/components/palette/palette.d.ts

@@ -0,0 +1,10 @@
+import { DIVProps } from '../../../types';
+import { DraggableOptions } from '../../utils';
+import Color from 'color';
+export interface PaletteProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    defaultValue?: Color;
+    value?: Color;
+    onChange?(value: Color): void;
+    draggableOptions?: DraggableOptions<HTMLDivElement>;
+}
+export declare const Palette: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaletteProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/palette/palette.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
+import { classes, style } from './palette.style';
+import { classnames, range, useControlled, useDraggableHandle } from '../../utils';
+import { useTheme } from '../app';
+import { Slider } from '../slider';
+import Color from 'color';
+import { Button } from '../button';
+import { DownOutlined } from '@ant-design/icons';
+import { ColorValueInput } from './colorValueInput';
+const sliderProps = {
+    railSize: 9,
+    handleSize: 9,
+    variant: 'outlined',
+    inset: true,
+    disableTrack: true,
+    tooltipProps: { disabled: true }
+};
+const availableFormat = ['HEX', 'RGB', 'HSL', 'CMYK'];
+export const Palette = memo(forwardRef(({ defaultValue, value, onChange, draggableOptions, ...props }, ref) => {
+    const { colors } = useTheme();
+    const [innerValue, setInnerValue] = useControlled(defaultValue ?? Color(colors.primary, 'hex'), value, onChange);
+    const colorObject = useMemo(() => {
+        return {
+            hue: innerValue.current.hue(),
+            hex: innerValue.current.hex(),
+            alpha: innerValue.current.alpha(),
+            saturated: innerValue.current.saturationl(100).lightness(50).hex()
+        };
+    }, [innerValue.current]);
+    const hueChangeHandler = (percent) => {
+        setInnerValue(innerValue.current.hue(percent / 100 * 359));
+    };
+    const alphaChangeHandler = (percent) => {
+        setInnerValue(innerValue.current.alpha(percent / 100));
+    };
+    /**
+     * -----------------------------------------------------------------
+     * 色板拖拽滑块
+     */
+    const paletteRef = useRef(null);
+    const [handlePosition, _setHandlePosition] = useState([0, 0]);
+    const setHandlePosition = (left, top, hue) => {
+        const newTop = range(top, 0, 100);
+        const newLeft = range(left, 0, 100);
+        _setHandlePosition([newLeft, newTop]);
+        setInnerValue(innerValue.current.black(newTop).saturationv(newLeft).hue(hue));
+        return [newLeft, newTop];
+    };
+    const dragStartData = useRef();
+    const draggableHandle = useDraggableHandle({
+        ...draggableOptions,
+        onDragStart(e) {
+            draggableOptions?.onDragStart?.(e);
+            const paletteWidth = paletteRef.current.clientWidth;
+            const paletteHeight = paletteRef.current.clientHeight;
+            const { hue } = colorObject;
+            let startPosition = handlePosition;
+            if (e.currentTarget === paletteRef.current) {
+                // 直接点击调色板，立即移动滑块位置
+                const { x, y } = paletteRef.current.getBoundingClientRect();
+                startPosition = setHandlePosition((e.clientX - x) / paletteWidth * 100, (e.clientY - y) / paletteHeight * 100, hue);
+            }
+            dragStartData.current = {
+                left: startPosition[0],
+                top: startPosition[1],
+                paletteWidth,
+                paletteHeight,
+                hue
+            };
+        },
+        onDrag(info, e) {
+            draggableOptions?.onDrag?.(info, e);
+            const { top, left, paletteWidth, paletteHeight, hue } = dragStartData.current;
+            setHandlePosition(left + info.deltaX / paletteWidth * 100, top + info.deltaY / paletteHeight * 100, hue);
+        }
+    });
+    const fitHandlePosition = () => {
+        _setHandlePosition([innerValue.current.saturationv(), innerValue.current.black()]);
+    };
+    useEffect(fitHandlePosition, []);
+    /**
+     * -----------------------------------------------------------------
+     * 输入框
+     */
+    const [activeFormat, setActiveFormat] = useState(0);
+    const formatChangeHandler = () => {
+        setActiveFormat(o => (o + 1) % availableFormat.length);
+    };
+    const renderInputs = () => {
+        const commonAlphaItem = (_jsx(ColorValueInput, { label: "A", min: 0, max: 100, value: Math.round(colorObject.alpha * 100 * 10) / 10, onChange: v => alphaChangeHandler(+v) }));
+        return (_jsxs("div", { className: classes.inputsWrap, children: [(() => {
+                    switch (activeFormat) {
+                        case 0: // HEX
+                            return (_jsx(ColorValueInput, { "data-wide": "true", hex: true, label: "HEX", value: colorObject.hex, onChange: v => setInnerValue(innerValue.current.hex(v)) }));
+                        case 1: // RGB
+                            return (_jsxs(_Fragment, { children: [_jsx(ColorValueInput, { label: "R", min: 0, max: 255, value: innerValue.current.red().toFixed(), onChange: v => setInnerValue(innerValue.current.red(+v)) }), _jsx(ColorValueInput, { label: "G", min: 0, max: 255, value: innerValue.current.green().toFixed(), onChange: v => setInnerValue(innerValue.current.green(+v)) }), _jsx(ColorValueInput, { label: "B", min: 0, max: 255, value: innerValue.current.blue().toFixed(), onChange: v => setInnerValue(innerValue.current.blue(+v)) })] }));
+                        case 2: // HSL
+                            return (_jsxs(_Fragment, { children: [_jsx(ColorValueInput, { label: "H", min: 0, max: 255, value: colorObject.hue.toFixed(), onChange: v => setInnerValue(innerValue.current.hue(+v)) }), _jsx(ColorValueInput, { label: "S", min: 0, max: 255, value: innerValue.current.saturationl().toFixed(), onChange: v => setInnerValue(innerValue.current.saturationl(+v)) }), _jsx(ColorValueInput, { label: "L", min: 0, max: 255, value: innerValue.current.lightness().toFixed(), onChange: v => setInnerValue(innerValue.current.lightness(+v)) })] }));
+                        case 3: // CMYK
+                            return (_jsxs(_Fragment, { children: [_jsx(ColorValueInput, { label: "C", min: 0, max: 255, value: innerValue.current.cyan().toFixed(), onChange: v => setInnerValue(innerValue.current.cyan(+v)) }), _jsx(ColorValueInput, { label: "M", min: 0, max: 255, value: innerValue.current.magenta().toFixed(), onChange: v => setInnerValue(innerValue.current.magenta(+v)) }), _jsx(ColorValueInput, { label: "Y", min: 0, max: 255, value: innerValue.current.yellow().toFixed(), onChange: v => setInnerValue(innerValue.current.yellow(+v)) }), _jsx(ColorValueInput, { label: "K", min: 0, max: 255, value: innerValue.current.black().toFixed(), onChange: v => setInnerValue(innerValue.current.black(+v)) })] }));
+                        default:
+                            return null;
+                    }
+                })(), commonAlphaItem] }));
+    };
+    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: [_jsxs("div", { ref: paletteRef, className: classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [_jsx("div", { className: classes.mask }), _jsx("div", { className: classes.handle, style: {
+                            left: handlePosition[0] + '%',
+                            top: handlePosition[1] + '%'
+                        }, ...draggableHandle })] }), _jsxs("div", { className: classes.slidersRow, children: [_jsxs("div", { className: classes.sliders, children: [_jsx(Slider, { ...sliderProps, className: classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), _jsx(Slider, { ...sliderProps, className: classes.alpha, renderRail: (_, railProps) => _jsxs("div", { ...railProps, children: [railProps.children, _jsx("div", { className: classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), _jsx("div", { className: classes.preview, children: _jsx("div", { className: classes.previewColor, style: {
+                                backgroundColor: colorObject.hex,
+                                opacity: colorObject.alpha
+                            } }) })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(Button, { variant: "plain", color: "text", suffix: _jsx(DownOutlined, {}), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
+}));

package/dist/esm/components/palette/palette.style.d.ts

@@ -0,0 +1,21 @@
+export declare const classes: {
+    mask: string;
+    main: string;
+    input: string;
+    hue: string;
+    alpha: string;
+    handle: string;
+    slidersRow: string;
+    sliders: string;
+    alphaMask: string;
+    preview: string;
+    previewColor: string;
+    inputRow: string;
+    inputsWrap: string;
+    inputItem: string;
+    inputItemLabel: string;
+} & {
+    root: string;
+};
+export declare const getTranparentBackground: (a: string, b: string) => string;
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/palette/palette.style.js

@@ -0,0 +1,163 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as sliderClasses } from '../slider/slider.style';
+export const classes = defineClasses('palette', [
+    'main',
+    'mask',
+    'handle',
+    'slidersRow',
+    'sliders',
+    'hue',
+    'alpha',
+    'alphaMask',
+    'preview',
+    'previewColor',
+    'inputRow',
+    'inputsWrap',
+    'inputItem',
+    'input',
+    'inputItemLabel'
+]);
+export const getTranparentBackground = (a, b) => `background-image: conic-gradient(${a} 0 25%, ${b} 25% 50%, ${a} 50% 75%, ${b} 75% 100%);`;
+export const style = defineCss(({ spacing, borderRadius, background, divider, text }) => css `
+    width: 240px;
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing[3]}px;
+    user-select: none;
+    
+    .${classes.main} {
+        aspect-ratio: 3 / 2;
+        border-radius: ${borderRadius}px;
+        /* overflow: hidden; */
+        position: relative;
+        touch-action: none;
+    
+        .${classes.mask} {
+            background-image: linear-gradient(0deg, #000, transparent);
+            border-radius: inherit;
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+        }
+    
+        .${classes.handle} {
+            cursor: pointer;
+            width: 12px;
+            height: 12px;
+            border: 2px solid #ffffff;
+            border-radius: 50%;
+            box-shadow: 0 0 2px ${text.primary}, inset 0 0 1px ${text.primary};
+            position: absolute;
+            transform: translate(-50%, -50%);
+        }
+    }
+    
+    .${classes.slidersRow} {
+        display: flex;
+        gap: ${spacing[3]}px;
+    
+        .${classes.sliders} {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+    
+            .${sliderClasses.root} {
+                min-height: 0;
+    
+                .${sliderClasses.handle} {
+                    background-color: transparent;
+                    border-color: #ffffff;
+                    box-shadow: 0 0 2px #000000, inset 0 0 1px #000000;
+                }
+            }
+    
+            .${classes.hue} {
+                .${sliderClasses.rail} {
+                    background-image: linear-gradient(90deg,
+                        #f00 0%,
+                        #ff0 ${100 / 6}%,
+                        #0f0 ${100 / 6 * 2}%,
+                        #0ff 50%, #00f ${100 / 6 * 4}%,
+                        #f0f ${100 / 6 * 5}%,
+                        #f00 100%
+                    );
+                }
+            }
+    
+            .${classes.alpha} {
+                .${sliderClasses.rail} {
+                    position: relative;
+                    background-color: transparent;
+    
+                    &:before,
+                    .${classes.alphaMask} {
+                        border-radius: inherit;
+                        position: absolute;
+                        inset: 0;
+                    }
+    
+                    &:before {
+                        content: '';
+                        ${getTranparentBackground(background.body, background.card)}
+                        background-size: 9px;
+                    }
+                }
+            }
+        }
+    
+        .${classes.preview} {
+            width: 30px;
+            height: 30px;
+            border-radius: ${borderRadius}px;
+            border: 1px solid ${divider};
+            overflow: hidden;
+            ${getTranparentBackground(background.body, background.card)}
+            background-size: 50% 50%;
+            position: relative;
+    
+            .${classes.previewColor} {
+                position: absolute;
+                inset: 0;
+            }
+        }
+    }
+
+    .${classes.inputRow} {
+        display: flex;
+        gap: 12px;
+        font-size: ${13 / 14}em;
+
+        .${classes.inputsWrap} {
+            flex: 1;
+            display: flex;
+            gap: ${spacing[1]}px;
+
+            .${classes.inputItem} {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+
+                &[data-wide=true] {
+                    flex: 3;
+                }
+
+                .${classes.input} {
+                    padding: 0 ${spacing[1]}px;
+                }
+
+                &:not([data-wide=true]) {
+                    .${classes.input} input {
+                        text-align: center;
+                    }
+                }
+
+                .${classes.inputItemLabel} {
+                    text-align: center;
+                    color: ${text.placeholder};
+                }
+            }
+        }
+    }
+`);

package/dist/esm/components/pickerDialog/index.d.ts

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

package/dist/esm/components/pickerDialog/index.js

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

package/dist/esm/components/pickerDialog/pickerDialog.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { DialogProps } from '../dialog';
+import { OptionType, SelectionContextBaseProps } from '../selectionContext';
+import { SelectedListProps } from '../selectedList';
+import { Id } from '../../../types';
+export interface PickerDialogProps<O extends OptionType<V>, V extends Id = Id> extends Omit<DialogProps, 'ref' | 'children' | 'onConfirm'>, Omit<SelectionContextBaseProps<O, V>, 'children'> {
+    ref?: Ref<PickerDialogRef<V>>;
+    /** 默认的ref已被PickerDialogRef取代，需要dialogRef指向dialog元素 */
+    dialogRef?: Ref<HTMLDivElement>;
+    multiple?: boolean;
+    children?: ReactNode | ((selectionProps: Omit<SelectionContextBaseProps<O, V>, 'children'> & {
+        multiple?: boolean;
+    }) => ReactNode);
+    showSelectedList?: boolean;
+    /** 已选列表的位置，@default "left" */
+    selectedListPlacement?: 'left' | 'right';
+    selectedListProps?: SelectedListProps<V>;
+    selectedItemProps?: SelectedListProps<V>['itemProps'];
+    onConfirm?(value: V | V[]): void;
+    /** @alias {@link options} */
+    rows?: O[];
+    /** @alias {@link options} */
+    nodes?: O[];
+}
+export type PickerDialogRef<V extends Id = Id> = {
+    open(value?: V | V[]): Promise<V | V[]>;
+};
+export declare const PickerDialog: <O extends OptionType<V>, V extends Id = Id>(props: PickerDialogProps<O, V>) => ReactElement;

package/dist/esm/components/pickerDialog/pickerDialog.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, useImperativeHandle, useRef, useState } from 'react';
+import { Dialog } from '../dialog';
+import { classnames, toArray, useControlled } from '../../utils';
+import { classes, style } from './pickerDialog.style';
+import { SelectionContext } from '../selectionContext';
+import { Divider } from '../divider';
+import { SelectedList } from '../selectedList';
+import { Button } from '../button';
+import { DeleteOutlined } from '@ant-design/icons';
+export const PickerDialog = forwardRef(({ dialogRef, multiple, children, showSelectedList = !!multiple, selectedListPlacement = 'left', selectedListProps, selectedItemProps, onConfirm, rows, nodes, 
+// 以下属性从SelectionContextBaseProps继承
+options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', disabled, clearable = !!multiple, onToggle, ...props }, ref) => {
+    const resolveFn = useRef();
+    const rejectFn = useRef();
+    const [innerValue, _setInnerValue] = useState(multiple ? [] : null);
+    const setInnerValue = (value) => {
+        _setInnerValue(value);
+        // 单选模式，值每次改变都触发确认
+        !multiple && confirmHandler(value);
+    };
+    const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
+    useImperativeHandle(ref, () => ({
+        open(value) {
+            _setInnerValue(value ?? null);
+            setInnerOpen(true);
+            return new Promise((resolve, reject) => {
+                resolveFn.current = resolve;
+                rejectFn.current = reject;
+            });
+        }
+    }));
+    const onCloseHandler = (reason) => {
+        if (reason === 'confirmed') {
+            return;
+        }
+        props.onClose?.(reason);
+        if (!open) {
+            rejectFn.current?.({
+                type: 'canceled',
+                value: innerValue
+            });
+            resolveFn.current = rejectFn.current = void 0;
+        }
+        setInnerOpen(false);
+    };
+    const confirmHandler = (value = innerValue) => {
+        onConfirm?.(value);
+        resolveFn.current?.(value);
+        resolveFn.current = rejectFn.current = void 0;
+        setInnerOpen(false);
+    };
+    const exitedHanlder = () => {
+        props.modalProps?.onExited?.();
+        _setInnerValue(null);
+    };
+    const renderChildren = () => {
+        const selectionProps = { rows, nodes, options, primaryKey, relation, integration, disabled, multiple };
+        return typeof children === 'function'
+            ? children(selectionProps)
+            : isValidElement(children)
+                ? cloneElement(children, {
+                    ...selectionProps,
+                    ...children.props
+                })
+                : children;
+    };
+    const selectedCount = toArray(innerValue)?.length || 0;
+    return (_jsx(SelectionContext, { options: options, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: disabled, clearable: clearable, multiple: multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: _jsx(Dialog, { width: multiple ? '90%' : 1080, footer: null, maskClosable: false, ...props, ref: dialogRef, css: style, className: classnames(classes.root, props.className), open: innerOpen.current, onClose: onCloseHandler, modalProps: {
+                onExited: exitedHanlder,
+                ...props.modalProps
+            }, ...showSelectedList && {
+                [selectedListPlacement === 'left' ? 'prefix' : 'sufix']: (_jsxs("div", { className: classes.selectedArea, children: [_jsxs(Divider, { className: classes.count, textAlign: "start", children: [_jsxs("div", { children: ["\u5DF2\u9009\u62E9", _jsx("b", { children: selectedCount }), "\u9879"] }), clearable &&
+                                    _jsx(Button, { prefix: _jsx(DeleteOutlined, {}), variant: "plain", color: "text", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), _jsx(SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: classnames(classes.list, selectedListProps?.className) }), _jsx(Button, { className: classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
+            }, children: renderChildren() }) }));
+});

package/dist/esm/components/pickerDialog/pickerDialog.style.d.ts

@@ -0,0 +1,10 @@
+export declare const classes: {
+    content: string;
+    list: string;
+    confirm: string;
+    selectedArea: string;
+    count: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/pickerDialog/pickerDialog.style.js

@@ -0,0 +1,38 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as dividerClasses } from '../divider/divider.style';
+export const classes = defineClasses('picker-dialog', [
+    'content',
+    'selectedArea',
+    'count',
+    'list',
+    'confirm'
+]);
+export const style = defineCss(({ spacing }) => css `
+    .${classes.selectedArea} {
+        width: 320px;
+        max-height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .${classes.count} {
+            b {
+                margin: 0 ${spacing[2]}px;
+            }
+
+            .${dividerClasses.content} {
+                display: flex;
+                gap: 12px;
+            }
+        }
+
+        .${classes.list} {
+            flex: 1;
+            overflow: hidden auto;
+        }
+
+        .${classes.confirm} {
+            margin-top: ${spacing[4]}px;
+        }
+    }
+`);

package/dist/esm/components/placeholder/index.d.ts

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