@canlooks/can-ui 0.0.20 → 0.0.22

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

@@ -13,49 +13,47 @@ exports.classes = (0, utils_1.defineClasses)('button', [
 ]);
 function useStyle({ color }) {
     const colorValue = (0, utils_1.useColor)(color);
-    return (0, utils_1.useCss)(({ borderRadius, easing, text, gray }) => {
+    return (0, utils_1.useCss)(({ borderRadius, easing, spacing, text, gray }) => {
         const c = (0, color_1.default)(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 (0, react_1.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 = (0, react_1.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 = (0, react_1.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] {
@@ -65,54 +63,98 @@ 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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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};
                     }
                 }
             }
@@ -120,35 +162,44 @@ function useStyle({ color }) {
             &[data-variant=dashed] {
                 border-style: dashed;
             }
-
+        `;
+        const ghostStyle = (0, react_1.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 = (0, react_1.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 = (0, react_1.css) `
             &[data-variant=plain] {
                 padding: 0;
+                color: ${colorValue};
+                background-color: transparent;
 
                 &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
                     &:hover {
@@ -156,29 +207,24 @@ function useStyle({ color }) {
                     }
 
                     &:active {
-                        color: ${darker};
+                        color: ${dark};
                     }
                 }
             }
+        `;
+        const statusStyle = (0, react_1.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};
@@ -187,9 +233,24 @@ 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 = (0, react_1.css) `
             &[data-shape=rounded] {
                 border-radius: 1000em;
             }
@@ -199,6 +260,7 @@ function useStyle({ color }) {
                 padding: 0;
                 width: 32px;
                 height: 32px;
+                aspect-ratio: 1;
 
                 &[data-size=small] {
                     width: 24px;
@@ -210,76 +272,52 @@ function useStyle({ color }) {
                     height: 40px;
                 }
             }
-
+        `;
+        const compactStyle = (0, react_1.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/cjs/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/cjs/components/card/card.js

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = void 0;
+exports.Card = Card;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const card_style_1 = require("./card.style");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const flex_1 = require("../flex");
-exports.Card = (0, react_1.forwardRef)(({ flexable, bordered, elevation, borderRadius, ...props }, ref) => {
-    const theme = (0, app_1.useTheme)();
+function Card({ flexable, bordered, elevation, borderRadius, ...props }) {
+    const theme = (0, theme_1.useTheme)();
     borderRadius ??= theme.borderRadius;
     elevation ??= theme.mode === 'light' ? 0 : 2;
-    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { direction: "column", ...props, ref: ref, css: card_style_1.style, className: (0, utils_1.classnames)(card_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { direction: "column", ...props, css: card_style_1.style, className: (0, utils_1.classnames)(card_style_1.classes.root, props.className), style: {
             display: flexable ? 'flex' : void 0,
             borderRadius,
             ...props.style
         }, "data-elevation": elevation, "data-bordered": bordered }));
-});
+}

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

@@ -10,7 +10,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, background, divider, bo
     `,
     ...[mode === 'light'
             ? (0, react_1.css) `
-            background-color: ${background.card};
+            background-color: ${background.content};
 
             &[data-bordered=true] {
                 border: 1px solid ${divider};

package/dist/cjs/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/cjs/components/cascade/cascade.js

@@ -13,14 +13,14 @@ 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)({});
+const selectionContext_1 = require("../selectionContext");
+const CascadeContext = (0, react_1.createContext)({});
 function useCascadeContext() {
-    return (0, react_1.useContext)(cascadeContext);
+    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', 
+exports.Cascade = (0, react_1.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 }) => {
     /**
      * --------------------------------------------------------------------
      * 搜索
@@ -42,7 +42,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     const onOpenChangeEnd = (open) => {
         popperProps?.onOpenChangeEnd?.(open);
         // 关闭动画结束后清空搜索框
-        !open && setInnerSearchValue('');
+        searchable && !open && setInnerSearchValue('');
     };
     const [openedPanels, setOpenedPanels] = (0, react_1.useState)([]);
     const toggleOpenedPanels = (value, index) => {
@@ -59,14 +59,11 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     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) {
+        if (loadOptions && !searchable && !innerOpen.current && (0, utils_1.toArray)(innerValue)?.length) {
             // 第一次渲染就有value，需要请求数据
             innerLoadOptions(innerSearchValue.current);
         }
@@ -106,7 +103,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         };
         return multiple ? value.map(v => findParent(v)) : findParent(value);
     };
-    const { innerValue, setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionHook_1.useTreeSelect)({
+    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionContext_1.useSelection)({
         options: actualOptions,
         multiple,
         value: toStandardValue(pathifiedValue.current),
@@ -202,13 +199,13 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
                             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: {
+                    : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.panelContainer, children: (0, jsx_runtime_1.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: (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
+                            }, 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, 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

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

package/dist/cjs/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/cjs/components/checkbox/checkbox.js

@@ -2,13 +2,12 @@
 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.Checkbox = ((props) => {
+    return (0, jsx_runtime_1.jsx)(checkboxBase_1.CheckboxBase, { ...props, _type: "checkbox" });
 });
-exports.CheckboxGroup = (0, react_1.forwardRef)((props, ref) => {
+exports.CheckboxGroup = ((props) => {
     return (0, jsx_runtime_1.jsx)(checkboxBaseGroup_1.CheckboxBaseGroup, { ...props, multiple: true });
 });
 exports.Checkbox.Group = exports.CheckboxGroup;