@canlooks/can-ui 0.0.21 → 0.0.23

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

@@ -8,49 +8,47 @@ export const classes = defineClasses('button', [
 ]);
 export function useStyle({ color }) {
     const colorValue = useColor(color);
-    return useCss(({ borderRadius, easing, text, gray }) => {
+    return useCss(({ borderRadius, easing, spacing, text, gray }) => {
         const c = Color(colorValue);
-        const lighter = c.lighten(.1).hex();
-        const lightest = c.lighten(.2).hex();
         const outlineColor = c.alpha(.4).string();
-        const darkerC = c.darken(.1);
-        const darker = darkerC.hex();
-        return css `
+        const light = c.lighten(.1).hex();
+        const lighter = c.lighten(.15).hex();
+        const lightest = c.lighten(.2).hex();
+        const darkC = c.darken(.1);
+        const dark = darkC.hex();
+        const defaultStyle = css `
             line-height: inherit;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
             vertical-align: top;
             font-size: 1em;
             user-select: none;
             appearance: none;
             -webkit-tap-highlight-color: transparent;
-            position: relative;
             border: none;
-            background-color: transparent;
-            color: ${colorValue};
             border-radius: ${borderRadius}px;
-            outline-offset: 1px;
-            outline: 0 solid ${outlineColor};
-            transition-property: outline-width, filter, border-color, background-color, color;
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            transition-property: outline-width, background-color, filter, color, border-color;
             transition-duration: .2s;
             transition-timing-function: ${easing.easeOut};
 
-            &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-                cursor: pointer;
-            }
-
-            &:focus-visible {
-                transition-timing-function: ${easing.swing}, ${easing.easeOut};
-                outline-width: 3px;
+            &[data-orientation=vertical] {
+                flex-direction: column;
             }
 
             &:active {
-                transition: all 0s;
+                transition-duration: 0s;
             }
+        `;
+        const sizeStyle = css `
+            gap: ${spacing[2]}px;
 
-            &[data-variant=filled], &[data-variant=text], &[data-variant=ghost] {
+            &[data-size=small] {
+                gap: ${spacing[1]}px;
+            }
+            
+            &[data-variant=filled], &[data-variant=flatted], &[data-variant=text], &[data-variant=ghost] {
                 padding: 6px 16px;
 
                 &[data-size=small] {
@@ -60,54 +58,98 @@ export function useStyle({ color }) {
                 &[data-size=large] {
                     padding: 10px 20px;
                 }
+
+                &[data-orientation=vertical] {
+                    padding-top: 9px;
+                    padding-bottom: 9px;
+
+                    &[data-size=small] {
+                        padding-top: 4px;
+                        padding-bottom: 4px;
+                    }
+
+                    &[data-size=large] {
+                        padding-top: 15px;
+                        padding-bottom: 15px;
+                    }
+                }
             }
 
             &[data-variant=outlined], &[data-variant=dashed] {
                 padding: 5px 15px;
-                
+
                 &[data-size=small] {
                     padding: 1px 7px;
                 }
-                
+
                 &[data-size=large] {
                     padding: 9px 19px;
                 }
+
+                &[data-orientation=vertical] {
+                    padding-top: 8px;
+                    padding-bottom: 8px;
+
+                    &[data-size=small] {
+                        padding-top: 3px;
+                        padding-bottom: 3px;
+                    }
+
+                    &[data-size=large] {
+                        padding-top: 14px;
+                        padding-bottom: 14px;
+                    }
+                }
             }
+        `;
+        const flattedStyle = css `
+            &[data-variant=flatted] {
+                color: #fff;
+                background-color: ${colorValue};
 
-            &[data-orientation=vertical] {
-                flex-direction: column;
-                padding-top: 9px;
-                padding-bottom: 9px;
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        background-color: ${lighter};
+                    }
+
+                    &:active {
+                        background-color: ${dark};
+                    }
+                }
             }
-            
+        `;
+        const filledStyle = css `
             &[data-variant=filled] {
-                color: #ffffff;
-                background-image: linear-gradient(135deg, ${lighter}, ${darker});
+                color: #fff;
+                background-image: linear-gradient(0deg, ${dark}, ${light});
 
                 &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
                     &:hover {
-                        filter: brightness(1.2);
+                        filter: brightness(1.1);
                     }
 
                     &:active {
-                        background-image: linear-gradient(135deg, ${darker}, ${lighter});
-                        filter: brightness(1);
+                        filter: none;
+                        background-image: linear-gradient(0deg, ${light}, ${dark});
                     }
                 }
             }
-
+        `;
+        const outlinedAndDashedStyle = css `
             &[data-variant=outlined], &[data-variant=dashed] {
+                color: ${colorValue};
                 border: 1px solid ${colorValue};
+                background-color: transparent;
 
                 &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
                     &:hover {
-                        border-color: ${lightest};
                         color: ${lightest};
+                        border-color: ${lightest};
                     }
 
                     &:active {
-                        border-color: ${darker};
-                        color: ${darker};
+                        color: ${dark};
+                        border-color: ${dark};
                     }
                 }
             }
@@ -115,35 +157,44 @@ export function useStyle({ color }) {
             &[data-variant=dashed] {
                 border-style: dashed;
             }
-
+        `;
+        const ghostStyle = css `
             &[data-variant=ghost] {
-                background-color: ${c.alpha(.05).rgb().string()};
+                color: ${colorValue};
+                background-color: ${c.alpha(.05).string()};
 
                 &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
                     &:hover {
-                        background-color: ${c.alpha(.1).rgb().string()};
+                        background-color: ${c.alpha(.1).string()};
                     }
-
+                    
                     &:active {
-                        background-color: ${c.alpha(.15).rgb().string()};
+                        background-color: ${darkC.alpha(.15).string()};
                     }
                 }
             }
-
+        `;
+        const textStyle = css `
             &[data-variant=text] {
+                color: ${colorValue};
+                background-color: transparent;
+
                 &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
                     &:hover {
-                        background-color: ${c.alpha(.05).rgb().string()};
+                        background-color: ${c.alpha(.05).string()};
                     }
 
                     &:active {
-                        background-color: ${darkerC.alpha(.1).rgb().string()};
+                        background-color: ${darkC.alpha(.1).string()};
                     }
                 }
             }
-
+        `;
+        const plainStyle = css `
             &[data-variant=plain] {
                 padding: 0;
+                color: ${colorValue};
+                background-color: transparent;
 
                 &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
                     &:hover {
@@ -151,29 +202,24 @@ export function useStyle({ color }) {
                     }
 
                     &:active {
-                        color: ${darker};
+                        color: ${dark};
                     }
                 }
             }
+        `;
+        const statusStyle = css `
+            &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                cursor: pointer;
+            }
 
-            &[data-loading=true] {
-                transition: all 0s;
-
-                &[data-variant=filled] {
-                    background-image: none;
-                    background-color: ${lightest};
-                }
-
-                &[data-variant=outlined], &[data-variant=dashed] {
-                    color: ${lightest};
-                    border-color: ${lightest};
-                }
+            outline-offset: 1px;
+            outline: ${outlineColor} solid 0;
 
-                &[data-variant=text], &[data-variant=plain] {
-                    color: ${lightest};
-                }
+            &:focus-visible {
+                transition-timing-function: ${easing.swing}, ${easing.easeOut};
+                outline-width: 3px;
             }
-
+            
             &:disabled {
                 cursor: not-allowed;
                 color: ${text.disabled};
@@ -182,9 +228,24 @@ export function useStyle({ color }) {
                 &:not([data-variant=text]):not([data-variant=plain]) {
                     background-image: none;
                     background-color: ${gray(.1)};
-                 }
+                }
             }
 
+            &[data-loading=true] {
+                transition: all 0s;
+
+                &[data-variant=flatted], &[data-variant=filled] {
+                    background-image: none;
+                    background-color: ${lightest};
+                    border-color: ${lightest};
+                }
+                
+                &:not([data-variant=flatted]):not([data-variant=filled]) {
+                    color: ${lightest};
+                }
+            }
+        `;
+        const shapeStyle = css `
             &[data-shape=rounded] {
                 border-radius: 1000em;
             }
@@ -194,6 +255,7 @@ export function useStyle({ color }) {
                 padding: 0;
                 width: 32px;
                 height: 32px;
+                aspect-ratio: 1;
 
                 &[data-size=small] {
                     width: 24px;
@@ -205,76 +267,52 @@ export function useStyle({ color }) {
                     height: 40px;
                 }
             }
-
+        `;
+        const compactStyle = css `
             &[data-compact=row] {
-                &[data-variant=filled]:not(:disabled) {
-                    background-image: linear-gradient(180deg, ${lighter}, ${darker});
-                    
-                    &:before, &:after {
-                        content: '';
-                        width: 1px;
-                        height: 100%;
-                        position: absolute;
-                        top: 0;
-                        display: none;
-                    }
-
-                    &:before {
-                        background-color: ${lighter};
-                        left: 0;
-                    }
-
-                    &:after {
-                        background-color: ${colorValue};
-                        right: 0;
-                    }
-                }
-
                 &:not([data-last=true]) {
                     border-top-right-radius: 0;
                     border-bottom-right-radius: 0;
-                    
-                    &:after {
-                        display: block;
-                    }
                 }
-        
+
                 &:not([data-first=true]) {
                     border-top-left-radius: 0;
                     border-bottom-left-radius: 0;
-
-                    &:before {
-                        display: block;
-                    }
-
-                    &[data-variant=outlined] {
+                    
+                    &[data-variant=outlined], &[data-variant=dashed] {
                         border-left-color: transparent;
                     }
                 }
             }
-    
-            &[data-compact=column] {
-                &[data-variant=filled] {
-                    background-image: linear-gradient(90deg, ${lighter}, ${darker});
-                    border-top-color: ${lighter};
-                }
 
+            &[data-compact=column] {
                 &:not([data-last=true]) {
                     border-bottom-left-radius: 0;
                     border-bottom-right-radius: 0;
-                    border-bottom-width: 1px;
                 }
-        
+
                 &:not([data-first=true]) {
                     border-top-left-radius: 0;
                     border-top-right-radius: 0;
-                    border-top-width: 1px;
-                    
-                    &[data-variant=outlined] {
-                        margin-top: -1px;
+
+                    &[data-variant=outlined], &[data-variant=dashed] {
+                        border-top-color: transparent;
                     }
                 }
             }
         `;
+        return [
+            defaultStyle,
+            sizeStyle,
+            flattedStyle,
+            filledStyle,
+            outlinedAndDashedStyle,
+            ghostStyle,
+            textStyle,
+            plainStyle,
+            statusStyle,
+            shapeStyle,
+            compactStyle
+        ];
     }, [colorValue]);
 }

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

@@ -1,12 +1,12 @@
 import { FlexProps } from '../flex';
 export interface CardProps extends FlexProps {
-    /** 是否采用flex布局，等效于display: flex，@default false */
+    /** 是否采用flex布局，等效于`display: flex`，默认为`false` */
     flexable?: boolean;
-    /** 是否显示边框，@default 0 */
+    /** 是否显示边框，默认为`false` */
     bordered?: boolean;
-    /** @ 支持0-5，明亮主题表示阴影的程度，@default 0; 暗黑主题表示背景色，@default 2 */
+    /** @ 支持0-5，明亮主题表示阴影的程度，默认为`0`; 暗黑主题表示背景色，默认为`2` */
     elevation?: number;
-    /** @default theme.borderRadius */
+    /** 默认为{@link Theme.borderRadius} */
     borderRadius?: number;
 }
-export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Card({ flexable, bordered, elevation, borderRadius, ...props }: CardProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/card/card.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { classes, style } from './card.style';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { Flex } from '../flex';
-export const Card = forwardRef(({ flexable, bordered, elevation, borderRadius, ...props }, ref) => {
+export function Card({ flexable, bordered, elevation, borderRadius, ...props }) {
     const theme = useTheme();
     borderRadius ??= theme.borderRadius;
     elevation ??= theme.mode === 'light' ? 0 : 2;
-    return (_jsx(Flex, { direction: "column", ...props, ref: ref, css: style, className: classnames(classes.root, props.className), style: {
+    return (_jsx(Flex, { direction: "column", ...props, css: style, className: classnames(classes.root, props.className), style: {
             display: flexable ? 'flex' : void 0,
             borderRadius,
             ...props.style
         }, "data-elevation": elevation, "data-bordered": bordered }));
-});
+}

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

@@ -7,7 +7,7 @@ export const style = defineCss(({ spacing, mode, background, divider, boxShadow,
     `,
     ...[mode === 'light'
             ? css `
-            background-color: ${background.card};
+            background-color: ${background.content};
 
             &[data-bordered=true] {
                 border: 1px solid ${divider};

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

@@ -1,13 +1,13 @@
-import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
+import React, { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
 import { InputProps } from '../input';
 import { InputBaseProps } from '../inputBase';
 import { PopperProps, PopperRef } from '../popper';
 import { SelectionContextProps } from '../selectionContext';
 import { MenuOptionType, OptionsBaseSharedProps } from '../optionsBase';
-import { Id } from '../../../types';
+import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../types';
 export interface CascadeBaseProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<OptionsBaseSharedProps<O>, 'filterPredicate'>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
     /** cascade内部由<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     defaultOpen?: boolean;
     open?: boolean;
@@ -24,18 +24,10 @@ export interface CascadeBaseProps<O extends MenuOptionType<V>, V extends Id = Id
     popperRef?: Ref<PopperRef>;
     integration?: SelectionContextProps<O, V>['integration'];
 }
-export interface CascadeSingleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V> {
-    multiple?: false;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
+export interface CascadeSingleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V>, SelectableSingleProps<V[]> {
     renderBackfill?(value: V[]): ReactNode;
 }
-export interface CascadeMultipleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V> {
-    multiple: true;
-    defaultValue?: V[][];
-    value?: V[][];
-    onChange?(value: V[][]): void;
+export interface CascadeMultipleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V>, SelectableMultipleProps<V[]> {
     renderBackfill?(value: V[][]): ReactNode;
 }
 export type CascadeProps<O extends MenuOptionType<V>, V extends Id = Id> = CascadeSingleProps<O, V> | CascadeMultipleProps<O, V>;
@@ -44,7 +36,7 @@ type CascadeContext<O extends MenuOptionType<V>, V extends Id = Id> = {
     loadingOption: V | undefined;
     multiple: boolean;
     showCheckbox: boolean;
-    /** @default "value" */
+    /** 默认为"value" */
     primaryKey: keyof O;
     labelKey: keyof O;
     childrenKey: keyof O;
@@ -58,6 +50,7 @@ type CascadeContext<O extends MenuOptionType<V>, V extends Id = Id> = {
     setVerticalIndex: Dispatch<SetStateAction<number>>;
     horizontalIndex: number;
 };
+declare const CascadeContext: React.Context<CascadeContext<any, Id>>;
 export declare function useCascadeContext<O extends MenuOptionType<V>, V extends Id = Id>(): CascadeContext<O, V>;
 export declare const Cascade: <O extends MenuOptionType<V>, V extends Id = Id>(props: CascadeProps<O, V>) => ReactElement;
 export {};

package/dist/esm/components/cascade/cascade.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { SearchOutlined, CaretDownOutlined } from '@ant-design/icons';
-import { createContext, forwardRef, memo, useContext, useDeferredValue, useEffect, useMemo, useState } from 'react';
+import { createContext, memo, useContext, useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { useControlled, useLoading, useKeyboard, joinNodes, classnames, cloneRef, toArray } from '../../utils';
 import { Input } from '../input';
 import { InputBase } from '../inputBase';
@@ -9,14 +9,14 @@ import { Tag } from '../tag';
 import { classes, cascadePopperStyle, style } from './cascade.style';
 import { CascadePanel } from './cascadePanel';
 import { SearchResult } from './searchResult';
-import { useTreeSelect } from '../selectionContext/selectionHook';
-const cascadeContext = createContext({});
+import { useSelection } from '../selectionContext';
+const CascadeContext = createContext({});
 export function useCascadeContext() {
-    return useContext(cascadeContext);
+    return useContext(CascadeContext);
 }
-export const Cascade = memo(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', 
+export const Cascade = memo(({ 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) => {
+loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'children', searchTokenKey = 'searchToken', ...props }) => {
     /**
      * --------------------------------------------------------------------
      * 搜索
@@ -38,7 +38,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     const onOpenChangeEnd = (open) => {
         popperProps?.onOpenChangeEnd?.(open);
         // 关闭动画结束后清空搜索框
-        !open && setInnerSearchValue('');
+        searchable && !open && setInnerSearchValue('');
     };
     const [openedPanels, setOpenedPanels] = useState([]);
     const toggleOpenedPanels = (value, index) => {
@@ -55,14 +55,11 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     const [loadingOption, setLoadingOption] = useState();
     const [innerOptions, setInnerOptions] = useState();
     const [innerLoading, innerLoadOptions] = useLoading(async (searchValue, parent) => {
-        if (!loadOptions) {
-            return;
-        }
         setLoadingOption(parent?.[primaryKey]);
         setInnerOptions(await loadOptions(searchValue, parent));
     }, loading);
     useEffect(() => {
-        if (loadOptions && !searchable && !innerOpen.current && toArray(innerValue.current)?.length) {
+        if (loadOptions && !searchable && !innerOpen.current && toArray(innerValue)?.length) {
             // 第一次渲染就有value，需要请求数据
             innerLoadOptions(innerSearchValue.current);
         }
@@ -102,7 +99,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         };
         return multiple ? value.map(v => findParent(v)) : findParent(value);
     };
-    const { innerValue, setInnerValue, toggleSelected, selectionStatus, optionsMap } = useTreeSelect({
+    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = useSelection({
         options: actualOptions,
         multiple,
         value: toStandardValue(pathifiedValue.current),
@@ -198,13 +195,13 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
                             setInnerSearchValue(e.target.value);
                         } }), deferredSearchValue
                     ? _jsx(SearchResult, { primaryKey: primaryKey, labelKey: labelKey, childrenKey: childrenKey, searchTokenKey: searchTokenKey, options: actualOptions, searchValue: deferredSearchValue, onSelect: toggleSelected, selectionStatus: selectionStatus })
-                    : _jsx("div", { className: classes.panelContainer, children: _jsx(cascadeContext.Provider, { value: {
+                    : _jsx("div", { className: classes.panelContainer, children: _jsx(CascadeContext, { 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: _jsx(CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: _jsx(InputBase, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
+                            }, children: _jsx(CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: _jsx(InputBase, { ...props, css: style, className: classnames(classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
                         ? _jsx("div", { className: classes.placeholder, children: props.placeholder })
                         : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: _jsx(CaretDownOutlined, {}) })] }) }) }));
-}));
+});

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

@@ -1,7 +1,7 @@
 export declare const classes: {
     placeholder: string;
-    arrow: string;
     contentWrap: string;
+    arrow: string;
     backfill: string;
     backfillWrap: string;
     searchInput: string;

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

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { OptionType } from '../selectionContext';
-import { Id } from '../../../types';
+import { Id } from '../../types';
 type SearchResultProps<O extends OptionType<V>, V extends Id = Id> = {
     primaryKey: keyof O;
     labelKey: keyof O;

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

@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 import { CheckboxBaseProps } from '../checkboxBase';
-import { CheckboxBaseGroupMultipleProps, ItemType } from '../checkboxBaseGroup';
-import { Id } from '../../../types';
+import { CheckboxBaseGroupCommonProps, ItemType } from '../checkboxBaseGroup';
+import { Id, SelectableMultipleProps } 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 interface CheckboxGroupProps<I extends ItemType, V extends Id = Id> extends CheckboxBaseGroupCommonProps<I>, Omit<SelectableMultipleProps<V>, 'multiple'> {
 }
-export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<CheckboxGroupProps<ItemType, Id>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CheckboxGroup: <I extends ItemType, V extends Id = Id>(props: CheckboxGroupProps<I, V>) => ReactElement;

package/dist/esm/components/checkbox/checkbox.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { CheckboxBase } from '../checkboxBase';
 import { CheckboxBaseGroup } from '../checkboxBaseGroup';
-export const Checkbox = forwardRef((props, ref) => {
-    return _jsx(CheckboxBase, { ...props, ref: ref, _type: "checkbox" });
+export const Checkbox = ((props) => {
+    return _jsx(CheckboxBase, { ...props, _type: "checkbox" });
 });
-export const CheckboxGroup = forwardRef((props, ref) => {
+export const CheckboxGroup = ((props) => {
     return _jsx(CheckboxBaseGroup, { ...props, multiple: true });
 });
 Checkbox.Group = CheckboxGroup;