@canlooks/can-ui 0.0.1

package/dist/cjs/components/cascade/cascade.js

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cascade = void 0;
+exports.useCascadeContext = useCascadeContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const icons_1 = require("@ant-design/icons");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const input_1 = require("../input");
+const inputBase_1 = require("../inputBase");
+const popper_1 = require("../popper");
+const tag_1 = require("../tag");
+const cascade_style_1 = require("./cascade.style");
+const cascadePanel_1 = require("./cascadePanel");
+const searchResult_1 = require("./searchResult");
+const selectionHook_1 = require("../selectionContext/selectionHook");
+const cascadeContext = (0, react_1.createContext)({});
+function useCascadeContext() {
+    return (0, react_1.useContext)(cascadeContext);
+}
+exports.Cascade = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, defaultOpen = false, open, onOpenChange, children, loadOptions, multiple = false, showCheckbox = !!multiple, defaultValue = [], value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, popperProps, popperRef, clearable = !!multiple, integration = 'deepest', 
+// 共享属性，从OptionsBaseSharedProps继承
+loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'children', searchTokenKey = 'searchToken', ...props }, ref) => {
+    /**
+     * --------------------------------------------------------------------
+     * 搜索
+     */
+    const [innerSearchValue, setInnerSearchValue] = (0, utils_1.useControlled)(defaultSearchValue, searchValue, onSearchChange);
+    const deferredSearchValue = (0, react_1.useDeferredValue)(innerSearchValue.current.trim());
+    (0, react_1.useEffect)(() => {
+        loadOptions && searchable && deferredSearchValue && innerLoadOptions();
+    }, [deferredSearchValue]);
+    /**
+     * --------------------------------------------------------------------
+     * 打开的弹框与面板
+     */
+    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
+    const openChangeHandler = (open) => {
+        popperProps?.onOpenChange?.(open);
+        setInnerOpen(open);
+    };
+    const onOpenChangeEnd = (open) => {
+        popperProps?.onOpenChangeEnd?.(open);
+        // 关闭动画结束后清空搜索框
+        !open && setInnerSearchValue('');
+    };
+    const [openedPanels, setOpenedPanels] = (0, react_1.useState)([]);
+    const toggleOpenedPanels = (value, index) => {
+        setOpenedPanels(o => {
+            const newOpened = o.slice(0, index);
+            newOpened.push(value);
+            return newOpened;
+        });
+    };
+    /**
+     * --------------------------------------------------------------------
+     * 选项与请求
+     */
+    const [loadingOption, setLoadingOption] = (0, react_1.useState)();
+    const [innerOptions, setInnerOptions] = (0, react_1.useState)();
+    const [innerLoading, innerLoadOptions] = (0, utils_1.useLoading)(async (searchValue, parent) => {
+        if (!loadOptions) {
+            return;
+        }
+        setLoadingOption(parent?.[primaryKey]);
+        setInnerOptions(await loadOptions(searchValue, parent));
+    }, loading);
+    (0, react_1.useEffect)(() => {
+        if (loadOptions && !searchable && !innerOpen.current && (0, utils_1.toArray)(innerValue.current)?.length) {
+            // 第一次渲染就有value，需要请求数据
+            innerLoadOptions(innerSearchValue.current);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // 打开下拉框时请求数据
+        loadOptions && innerOpen.current && innerLoadOptions(innerSearchValue.current);
+    }, [innerOpen.current]);
+    const actualOptions = innerOptions || options;
+    /**
+     * --------------------------------------------------------------------
+     * 控制选中状态
+     */
+    const [pathifiedValue, setPathifiedValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    // 路径转单一键
+    const toStandardValue = (path) => {
+        if (!path) {
+            return;
+        }
+        if (multiple) {
+            return path.map(path => path[path.length - 1]);
+        }
+        return path[path.length - 1];
+    };
+    // 单一键转路径
+    const toPathifiedValue = (value) => {
+        if (!value) {
+            return;
+        }
+        const findParent = (v, path = []) => {
+            const node = optionsMap.get(v);
+            if (node) {
+                path.unshift(v);
+                node._parentId && findParent(node._parentId, path);
+            }
+            return path;
+        };
+        return multiple ? value.map(v => findParent(v)) : findParent(value);
+    };
+    const { innerValue, setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionHook_1.useTreeSelect)({
+        options: actualOptions,
+        multiple,
+        value: toStandardValue(pathifiedValue.current),
+        onChange(value) {
+            setPathifiedValue(toPathifiedValue(value));
+        },
+        primaryKey,
+        childrenKey,
+        clearable,
+        integration
+    });
+    const clearHandler = () => {
+        props.onClear?.();
+        setInnerValue([]);
+        setOpenedPanels([]);
+    };
+    const onOptionClick = async (option, index) => {
+        const optVal = option[primaryKey];
+        const opened = openedPanels[index] === optVal;
+        if (!opened) {
+            await innerLoadOptions(innerSearchValue.current, option);
+            toggleOpenedPanels(optVal, index);
+        }
+        if (!multiple || opened) {
+            toggleSelected(optVal);
+        }
+    };
+    const onCheckboxClick = (option, index) => {
+        toggleSelected(option[primaryKey]);
+        onOptionClick(option, index);
+    };
+    /**
+     * --------------------------------------------------------------------
+     * 键盘控制
+     */
+    const getChildren = (index) => {
+        const targetNode = optionsMap.get(openedPanels[index]);
+        return targetNode ? targetNode[childrenKey] : actualOptions;
+    };
+    const horizontalCount = () => {
+        const lastOpenedChildren = getChildren(openedPanels.length - 1);
+        return lastOpenedChildren?.length ? openedPanels.length + 1 : openedPanels.length;
+    };
+    const { verticalIndex, horizontalIndex, setVerticalIndex, setHorizontalIndex } = (0, utils_1.useKeyboard)({
+        disabled: !!deferredSearchValue,
+        allowHorizontal: true,
+        horizontalCount,
+        allowVertical: true,
+        verticalCount(hi) {
+            const arr = getChildren(hi - 1);
+            return arr?.length || 0;
+        },
+        open: innerOpen.current,
+        setOpen: setInnerOpen,
+        onEnter(info) {
+            keyboardPressHandler(info);
+        },
+        onKeyDown(info, e) {
+            if (e.key === 'ArrowRight' && info.horizontalIndex === info.horizontalCount - 1) {
+                // 在最后一个面板按右箭头，相当于按回车
+                e.preventDefault();
+                keyboardPressHandler(info);
+            }
+        }
+    });
+    const keyboardPressHandler = ({ verticalIndex, horizontalIndex }) => {
+        const option = getChildren(horizontalIndex - 1)?.[verticalIndex];
+        if (option) {
+            onOptionClick(option, horizontalIndex);
+        }
+    };
+    (0, react_1.useMemo)(() => {
+        setHorizontalIndex(Math.max(horizontalCount() - 1, 0));
+    }, [openedPanels]);
+    /**
+     * --------------------------------------------------------------------
+     * 渲染部分
+     */
+    const renderBackfillFn = () => {
+        if (renderBackfill) {
+            return renderBackfill(pathifiedValue.current);
+        }
+        if (multiple) {
+            return pathifiedValue.current?.map(path => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(path[path.length - 1]), children: (0, utils_1.joinNodes)(path, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }, path[path.length - 1]));
+        }
+        else {
+            return ((0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfillWrap, children: (0, utils_1.joinNodes)(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: cascade_style_1.cascadePopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled, content: (0, jsx_runtime_1.jsxs)("div", { children: [searchable &&
+                    (0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: (0, utils_1.classnames)(cascade_style_1.classes.searchInput, searchInputProps?.className), onChange: e => {
+                            searchInputProps?.onChange?.(e);
+                            setInnerSearchValue(e.target.value);
+                        } }), deferredSearchValue
+                    ? (0, jsx_runtime_1.jsx)(searchResult_1.SearchResult, { primaryKey: primaryKey, labelKey: labelKey, childrenKey: childrenKey, searchTokenKey: searchTokenKey, options: actualOptions, searchValue: deferredSearchValue, onSelect: toggleSelected, selectionStatus: selectionStatus })
+                    : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.panelContainer, children: (0, jsx_runtime_1.jsx)(cascadeContext.Provider, { value: {
+                                innerLoading: innerLoading.current, loadingOption, multiple, showCheckbox,
+                                primaryKey, labelKey, childrenKey, pathifiedValue: pathifiedValue.current,
+                                selectionStatus, optionsMap,
+                                openedPanels, onOptionClick, onCheckboxClick,
+                                verticalIndex: verticalIndex.current, setVerticalIndex, horizontalIndex: horizontalIndex.current
+                            }, children: (0, jsx_runtime_1.jsx)(cascadePanel_1.CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, ref: ref, css: cascade_style_1.style, className: (0, utils_1.classnames)(cascade_style_1.classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: cascade_style_1.classes.contentWrap, children: [!pathifiedValue.current?.length
+                        ? (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.placeholder, children: props.placeholder })
+                        : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.arrow, "data-open": innerOpen.current, children: (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}) })] }) }) }));
+}));

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

@@ -0,0 +1,15 @@
+export declare const classes: {
+    placeholder: string;
+    arrow: string;
+    contentWrap: string;
+    backfill: string;
+    backfillWrap: string;
+    searchInput: string;
+    panelContainer: string;
+    panel: string;
+    searchResult: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const cascadePopperStyle: () => import("@emotion/react").SerializedStyles[];

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

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cascadePopperStyle = exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const tag_style_1 = require("../tag/tag.style");
+const menuItem_style_1 = require("../menuItem/menuItem.style");
+const popper_style_1 = require("../popper/popper.style");
+exports.classes = (0, utils_1.defineClasses)('cascade', [
+    'contentWrap',
+    'placeholder',
+    'backfill',
+    'backfillWrap',
+    'arrow',
+    'searchInput',
+    'panelContainer',
+    'panel',
+    'searchResult'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_1.css) `
+    cursor: pointer;
+    position: relative;
+
+    .${exports.classes.contentWrap} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[1]}px;
+    }
+
+    .${exports.classes.placeholder} {
+        flex: 1;
+        color: ${text.placeholder};
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .${exports.classes.arrow} {
+        color: ${text.placeholder};
+        transition: transform .2s ${easing.easeOut};
+
+        &[data-open=true] {
+            transform: rotate(180deg);
+        }
+    }
+
+    .${exports.classes.backfill} {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${spacing[1]}px;
+
+        .${tag_style_1.classes.root} {
+            min-width: 0;
+        }
+
+        .${tag_style_1.classes.content},
+        .${exports.classes.backfillWrap} {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            direction: rtl;
+        }
+    }
+`);
+exports.cascadePopperStyle = (0, utils_1.defineCss)(theme => [
+    (0, popper_style_1.popperStyleCallback)(theme),
+    (0, react_1.css) `
+        .${exports.classes.searchInput} {
+            margin-bottom: ${menuItem_style_1.menuListPadding}px;
+        }
+        
+        .${exports.classes.panelContainer} {
+            display: flex;
+            gap: ${menuItem_style_1.menuListPadding}px;
+        }
+        
+        .${exports.classes.panel} {
+            min-width: 120px;
+            overflow: hidden;
+            max-height: ${32 * 8 + 8}px;
+            position: relative;
+
+            &:hover {
+                overflow: hidden auto;
+            }
+
+        }
+
+        .${exports.classes.searchResult} {
+            min-width: 360px;
+        }
+    `
+]);

package/dist/cjs/components/cascade/cascadePanel.d.ts

@@ -0,0 +1,5 @@
+import { MenuOptionType } from '../optionsBase';
+export declare function CascadePanel({ options, index }: {
+    options?: MenuOptionType[];
+    index?: number;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/cascade/cascadePanel.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CascadePanel = CascadePanel;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const icons_1 = require("@ant-design/icons");
+const loading_1 = require("../loading");
+const loadingIndicator_1 = require("../loadingIndicator");
+const menuItem_1 = require("../menuItem");
+const placeholder_1 = require("../placeholder");
+const cascade_style_1 = require("./cascade.style");
+const transitionBase_1 = require("../transitionBase");
+const cascade_1 = require("./cascade");
+const utils_1 = require("../../utils");
+function CascadePanel({ options, index = 0 }) {
+    const { innerLoading, loadingOption, multiple, showCheckbox, primaryKey, labelKey, childrenKey, pathifiedValue, selectionStatus, optionsMap, openedPanels, onOptionClick, onCheckboxClick, verticalIndex, setVerticalIndex, horizontalIndex } = (0, cascade_1.useCascadeContext)();
+    const onPointerEnter = () => {
+        setVerticalIndex(-1);
+    };
+    const isSelected = (id) => {
+        if ((0, utils_1.isUnset)(id)) {
+            return false;
+        }
+        if (multiple) {
+            return pathifiedValue?.some(path => path[index] === id);
+        }
+        return pathifiedValue?.[index] === id;
+    };
+    const renderOptions = () => {
+        if (!options?.length) {
+            return (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {});
+        }
+        return options.map((option, i) => {
+            if (!option || typeof option !== 'object') {
+                return option;
+            }
+            const { _parentId, ...opt } = option;
+            const optVal = opt[primaryKey];
+            const status = selectionStatus?.get(optVal);
+            const opened = openedPanels[index] === optVal;
+            const hasChildren = !!opt[childrenKey]?.length;
+            return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { showCheckbox: showCheckbox, ...opt, checkboxProps: {
+                    ...opt?.checkboxProps,
+                    ...showCheckbox && {
+                        indeterminate: status === 1,
+                        checked: status === 2,
+                        async onClick(e) {
+                            opt.onClick?.(e);
+                            e.stopPropagation();
+                            onCheckboxClick(opt, index);
+                        }
+                    }
+                }, selected: isSelected(optVal) || (opened && hasChildren), focused: horizontalIndex === index && verticalIndex === i, label: opt[labelKey], onClick: () => onOptionClick(opt, index), onPointerEnter: onPointerEnter, suffix: innerLoading && loadingOption === optVal
+                    ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
+                    : hasChildren && (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}), children: null }, optVal));
+        });
+    };
+    const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [index === 0
+                ? (0, jsx_runtime_1.jsx)(loading_1.Loading, { className: cascade_style_1.classes.panel, loading: innerLoading && typeof loadingOption === 'undefined', children: renderOptions() })
+                : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.panel, children: renderOptions() }), !!nextOptions?.length &&
+                (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: cascade_style_1.classes.panelContainer, in: true, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(CascadePanel, { options: nextOptions, index: index + 1 }) })] }));
+}

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

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

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

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

package/dist/cjs/components/cascade/searchResult.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { OptionType } from '../selectionContext';
+import { Id } from '../../../types';
+type SearchResultProps<O extends OptionType<V>, V extends Id = Id> = {
+    primaryKey: keyof O;
+    labelKey: keyof O;
+    childrenKey: keyof O;
+    searchTokenKey: keyof O;
+    options?: O[];
+    searchValue: string;
+    onSelect(value: V): void;
+    selectionStatus: Map<V, 1 | 2>;
+};
+export declare const SearchResult: <O extends OptionType<V>, V extends Id = Id>(props: SearchResultProps<O, V>) => ReactElement;
+export {};

package/dist/cjs/components/cascade/searchResult.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchResult = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const cascade_style_1 = require("./cascade.style");
+const highlight_1 = require("../highlight");
+const utils_1 = require("../../utils");
+const menuItem_1 = require("../menuItem");
+const popper_1 = require("../popper");
+exports.SearchResult = (0, react_1.memo)(({ primaryKey, labelKey, childrenKey, searchTokenKey, options, searchValue, onSelect, selectionStatus }) => {
+    const allLabelIsString = (0, react_1.useRef)(true);
+    const flattedOptions = (0, react_1.useMemo)(() => {
+        allLabelIsString.current = true;
+        const ret = [];
+        const fn = (arr, optionsPath = [], searchTokenPath = '') => {
+            arr?.forEach(item => {
+                if (item && typeof item === 'object') {
+                    let searchToken;
+                    if (typeof item[labelKey] === 'string') {
+                        searchToken = item[labelKey];
+                    }
+                    else {
+                        searchToken = item[searchTokenKey];
+                        allLabelIsString.current = false;
+                    }
+                    if (searchToken) {
+                        item[childrenKey]?.length
+                            ? fn(item[childrenKey], [...optionsPath, item], `${searchTokenPath} ${searchToken}`)
+                            : ret.push({
+                                options: [...optionsPath, item],
+                                searchToken: `${searchTokenPath} ${searchToken}`
+                            });
+                    }
+                }
+            });
+        };
+        fn(options);
+        return ret;
+    }, [options, labelKey, childrenKey, searchTokenKey]);
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        if (!searchValue) {
+            return flattedOptions;
+        }
+        const splited = searchValue.split(' ');
+        return flattedOptions.filter(({ searchToken }) => {
+            return splited.some(k => {
+                return k && searchToken.toLowerCase().includes(k.toLowerCase());
+            });
+        });
+    }, [searchValue, flattedOptions]);
+    const { open, setOpen } = (0, popper_1.usePopperContext)();
+    const { verticalIndex } = (0, utils_1.useKeyboard)({
+        allowVertical: true,
+        verticalCount: filteredOptions?.length,
+        open,
+        setOpen,
+        onEnter({ verticalIndex }) {
+            const opt = filteredOptions[verticalIndex];
+            opt && typeof opt === 'object' && onSelect(opt.options[opt.options.length - 1][primaryKey]);
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.searchResult, children: filteredOptions.map((opt, i) => {
+            const optVal = opt.options[opt.options.length - 1][primaryKey];
+            return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { label: allLabelIsString.current
+                    ? (0, jsx_runtime_1.jsx)(highlight_1.Highlight, { keywords: searchValue?.split(' '), children: opt.options.map(o => o[labelKey]).join(' / ') })
+                    : (0, utils_1.joinNodes)(opt.options, o => o[labelKey]), selected: selectionStatus.get(optVal) === 2, focused: verticalIndex.current === i, onClick: () => onSelect(optVal) }, optVal));
+        }) }));
+});

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

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { CheckboxBaseProps } from '../checkboxBase';
+import { CheckboxBaseGroupMultipleProps, ItemType } from '../checkboxBaseGroup';
+import { Id } from '../../../types';
+export interface CheckboxProps extends Omit<CheckboxBaseProps, '_type'> {
+}
+export declare const Checkbox: {
+    (props: CheckboxProps): ReactElement;
+    Group: typeof CheckboxGroup;
+};
+export interface CheckboxGroupProps<I extends ItemType, V extends Id = Id> extends Omit<CheckboxBaseGroupMultipleProps<I, V>, 'multiple'> {
+}
+export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<CheckboxGroupProps<ItemType, Id>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/checkbox/checkbox.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroup = exports.Checkbox = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const checkboxBase_1 = require("../checkboxBase");
+const checkboxBaseGroup_1 = require("../checkboxBaseGroup");
+exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
+    return (0, jsx_runtime_1.jsx)(checkboxBase_1.CheckboxBase, { ...props, ref: ref, _type: "checkbox" });
+});
+exports.CheckboxGroup = (0, react_1.forwardRef)((props, ref) => {
+    return (0, jsx_runtime_1.jsx)(checkboxBaseGroup_1.CheckboxBaseGroup, { ...props, multiple: true });
+});
+exports.Checkbox.Group = exports.CheckboxGroup;

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { ReactNode, Ref } from 'react';
+import { ColorPropsValue, DIVProps, Id, Size } from '../../../types';
+export interface CheckboxBaseProps extends DIVProps {
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    /** @private 内部使用 */
+    _type: 'checkbox' | 'radio';
+    size?: Size;
+    color?: ColorPropsValue;
+    label?: ReactNode;
+    value?: Id;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?(e: React.ChangeEvent<HTMLInputElement>): void;
+}
+export declare const CheckboxBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<CheckboxBaseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/checkboxBase/checkboxBase.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxBase = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const checkboxBase_style_1 = require("./checkboxBase.style");
+const icons_1 = require("@ant-design/icons");
+const checkboxBaseGroup_1 = require("../checkboxBaseGroup");
+exports.CheckboxBase = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }, ref) => {
+    const context = (0, checkboxBaseGroup_1.useCheckboxBaseGroupContext)();
+    size ??= context.size || 'medium';
+    color ??= context.color || 'primary';
+    if (_type === 'radio') {
+        // "radio"不支持indeterminate
+        indeterminate = false;
+    }
+    const checkboxRef = (0, react_1.useRef)(null);
+    const innerInputRef = (0, react_1.useRef)(null);
+    const [innerChecked, setInnerChecked] = (0, utils_1.useControlled)(defaultChecked, context.checked ?? checked);
+    const showRipple = (0, utils_1.useTouchRipple)(color);
+    const clickHandler = (e) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        showRipple(checkboxRef.current);
+        const newChecked = innerInputRef.current.checked = !innerChecked.current;
+        e.target = e.currentTarget = innerInputRef.current;
+        props.onClick?.(e);
+        onChange?.(e);
+        context.setChecked?.(newChecked);
+        setInnerChecked(newChecked);
+    };
+    const inputKeydown = (e) => {
+        inputProps?.onKeyDown?.(e);
+        e.key === 'Enter' && clickHandler(e);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, checkboxBase_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(checkboxBase_style_1.classes.root, props.className), onClick: clickHandler, "data-size": size, "data-checked": innerChecked.current && !indeterminate, "data-disabled": disabled, children: [_type === 'checkbox'
+                ? (0, jsx_runtime_1.jsx)("div", { ref: checkboxRef, className: checkboxBase_style_1.classes.checkbox, children: indeterminate
+                        ? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.indeterminate })
+                        : innerChecked.current
+                            ? (0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { className: checkboxBase_style_1.classes.icon })
+                            : null })
+                : (0, jsx_runtime_1.jsx)("div", { ref: checkboxRef, className: `${checkboxBase_style_1.classes.checkbox} ${checkboxBase_style_1.classes.radio}`, children: innerChecked.current
+                        ? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.radioChecked })
+                        : null }), !!label &&
+                (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputRef), className: (0, utils_1.classnames)(checkboxBase_style_1.classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
+}));

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

@@ -0,0 +1,13 @@
+import { CheckboxBaseProps } from './checkboxBase';
+export declare const classes: {
+    checkbox: string;
+    radio: string;
+    input: string;
+    label: string;
+    icon: string;
+    radioChecked: string;
+    indeterminate: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: Required<Pick<CheckboxBaseProps, 'color'>>): import("@emotion/react").SerializedStyles;