@canlooks/can-ui 0.0.44 → 0.0.46

package/dist/esm/components/dateTimePicker/dateTimePicker.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useEffect, useMemo, useRef } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
@@ -6,7 +6,7 @@ import { clsx, cloneRef, useControlled } from '../../utils';
 import { classes, datePickerPopperStyle, style } from './dateTimePicker.style';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { Calendar } from './calendar';
+import { Calendar } from '../calendar';
 import { Timer } from './timer';
 import { Icon } from '../..';
 import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar';
@@ -76,11 +76,11 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
         }
         selectFn();
     };
-    const focusHandler = (e) => {
+    const focusHandler = () => {
         focused.current = true;
         selectFn();
     };
-    const blurHandler = (e) => {
+    const blurHandler = () => {
         resetContinue();
         focused.current = false;
         _setInnerOpen(false);
@@ -202,21 +202,18 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
         input.setSelectionRange(nextRange.start, nextRange.end);
     };
     const contextValue = useMemo(() => ({
-        min, max, disabledDates,
-        disabledHours, disabledMinutes, disabledSeconds
+        min, max, disabledHours, disabledMinutes, disabledSeconds
     }), [
-        min, max, disabledDates,
-        disabledHours, disabledMinutes, disabledSeconds
+        min, max, disabledHours, disabledMinutes, disabledSeconds
     ]);
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
     const _dateVal = dateValue.current || dayjs();
-    return (_jsx(Popper, { css: datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: _jsxs(DateTimePickerContext, { value: contextValue, children: [showCalendar &&
-                    _jsx(Calendar, { type: format.includes('D') ? 'dates'
-                            : format.includes('M') ? 'months'
-                                : format.includes('Y') ? 'years'
-                                    : 'dates', defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue }), showTimer &&
-                    _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
+    return (_jsx(Popper, { css: datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: _jsxs(_Fragment, { children: [showCalendar &&
+                    _jsx(Calendar, { viewLevel: format.includes('D') ? 'date'
+                            : format.includes('M') ? 'month'
+                                : 'year', _defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
+                    _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue }) })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
         }, children: _jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), "data-focused": innerOpen.current, value: dateValue.current, onClear: clearHandler, onSelect: selectHandler, onFocus: focusHandler, onBlur: blurHandler, onKeyDown: keydownHandler, children: ({ ref, value, onChange, ...rest }) => _jsxs("div", { className: classes.container, children: [_jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref, innerInputRef), className: clsx(classes.input, inputProps?.className) }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar

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

@@ -2,16 +2,16 @@ export declare const classes: {
     input: string;
     container: string;
     calendar: string;
+    dateItem: string;
+    inputGroup: string;
+    inputUnit: string;
+    dateTimeIcon: string;
     calendarHead: string;
     calendarHeadSide: string;
     calendarHeadControl: string;
     calendarHeadCenter: string;
     calendarHeadButton: string;
     calendarBody: string;
-    dateItem: string;
-    inputGroup: string;
-    inputUnit: string;
-    dateTimeIcon: string;
     calendarDays: string;
 } & {
     root: string;

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
 import { commonNativeInputStyle } from '../input/input.style';
-import { classes as calendarClasses } from './calendar.style';
+import { classes as calendarClasses } from '../calendar/calendar.style';
 import { classes as timerClasses } from './timer.style';
 import { popperStyleCallback } from '../popper/popper.style';
 export const classes = defineInnerClasses('date-time-picker', [

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

@@ -1,3 +1,3 @@
-export * from './calendar';
+export * from '../calendar/calendar';
 export * from './dateTimePicker';
 export * from './timer';

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

@@ -1,3 +1,3 @@
-export * from './calendar';
+export * from '../calendar/calendar';
 export * from './dateTimePicker';
 export * from './timer';

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

@@ -15,6 +15,7 @@ export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<Di
     onOpenPickerChange?(openPicker?: 'start' | 'end' | 'closed'): void;
     autoClose?: boolean;
     separator?: ReactNode;
+    disabledDates?: (date: Dayjs) => any;
     variant?: 'outlined' | 'underlined' | 'plain';
     size?: Size;
     color?: ColorPropsValue;

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

@@ -49,7 +49,7 @@ export type FormRef<V extends FormValue = FormValue> = {
     isFieldTouched(field: FieldPath): boolean;
 };
 export declare const Form: {
-    <V extends FormValue, C extends ElementType>(props: FormProps<V, C>): ReactElement;
+    <V extends FormValue, C extends ElementType = "form">(props: FormProps<V, C>): ReactElement;
     Item: typeof FormItem;
     Relatable: typeof FormRelatable;
 };

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

@@ -0,0 +1,6 @@
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { ColorPropsValue } from '../../types';
+export interface IconProps extends Omit<FontAwesomeIconProps, 'color'> {
+    color?: ColorPropsValue;
+}
+export declare function Icon({ color, ...props }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/icon/icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useColor } from '../../utils';
+export function Icon({ color, ...props }) {
+    return _jsx(FontAwesomeIcon, { ...props, color: useColor(color) });
+}

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

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

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

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

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

@@ -1,6 +1,6 @@
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { css } from '@emotion/react';
-export const classes = defineClasses('pinchable', [
+export const classes = defineInnerClasses('pinchable', [
     'content'
 ]);
 export const style = defineCss(({ easing }) => css `

package/dist/esm/components/placeholder/placeholder.js

@@ -12,15 +12,15 @@ export const imagePreset = {
     info: 'data:image/png;base64,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',
     searching: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF0ElEQVR4nO2dTWgdVRTHn4KI7l2IgriwggsXinbr1o+Fgoppm5jaUgsV0YIBq6ZaN8GFqItGEW3jB4KgCBIapQjFom/O/3/fix8VkhQ/4gdFKVpijSnakWtGiOl7c2fefNyZuffA2eTl3Xvf+Z1z7vdMq+XFixcvXrx48eLFixcvOQrJi4Mg2ADgJpK3krwLwFCZSvIV56AuLi5e1Ol0blBK3VO2wXEugJDkqy1XpN1uX27D0xEPIHQiEkTk6ip4PXoDaDYE7flVMz7OBdDMdKQ72yqlHcQDaF4kkNxo29BIB6A5kaC9v4qpB2YAzYiE2dnZDVUwNAYDUP9I0JOsmgMIax0JJG9rAICwtpFQ1dEP0gOoJwTbBka+AOoHoYEAwlpBaCiAsDYQGgwgrAWEEo05IiJTABYA/BnpAsmD+rOY7y03GkIZxheRXQC+7Wck/Vn0P72+/0NGAFonW1WVMjwfMcZfC6FPJBzKAUB1I6EE759KaiQAB3qUMUby75wgTDoHgOTxFAAW+pTxYU4AqgehhBS0nALAcp8oGgbwZSMhVAkAyT9iUtkwyQ8al47qkILwfxCPkJwmuZjDEHXSBQAHM3bChapt+1dqGCqrud4DqNhEbMhHQD4QhqMUsxCNdrTO67/Z8HyXUtBQldW2/T0A22LbA+EjwL4R4FNQ7kZ4gGRAcpCJkv6OANjt+4DBjb+Uw1LBUhlD08b1AVz1/LwWzdoeQHoAyzkC6Ls45yOgHACnPYD0ESA5Agg8gPThvjuvTlgp9bAHMEC+FZFdugPVOXyQvK89vwzjN3IUhJqpbft7ALbFtgfCR4B9I8CnIPuGgCW1nYF8CrIttj0QPgLsGwE5qYhsITmulHpZRN7TB7n04V4A75LcH50z3dSEFJRlvT80KYDPgiDYnMLw+0h+nLA9vwGY0TDqCiCv9f6wj/FPkNyepC1KqcdIzg1Yz9loxn1FrQDkvN4frlN97nM8SaqJUkzmc6IAfid5d50AFJJ2uKrTCeofBTCbc9TpaNgXhuF5zgIAsARgm6H+EZLHinIAAM/VAUCe6/3hGn0zQeo5WmD0/QdhW6UB5LjeH6750csicp/B+PuLNn7UlhWS11UZQNb1/rCHHo6rLwiCe0meTFHeN9Edgtd0ZEVXnE6k+P5HlQZQtpJ8K6H3HhORPTHlTCS99ioiN3sAWO14dQedwGjT62e5MaMoJijvqAeAf9Pdswk8/8gAUOcNZZ5tt9tXOp+CSB42ADhl6sBjBhN/GSDsdB4ADNebROTtDP3LJwa4U04DILmJ5IrBS8cylP+CoexPnQaglNpqytN6XShDHWOGCDjuNAAR2VHk2dFoPhMH+MfG7wdIzAW9IAhGTRFgeNZQrJLcY2jfnAv7AdsNRjptALh3UAB658wA+Ejj9wOCIDDdhFkwGOlQhgj4wtC+F11Yjp4w1Pm+4fsrOioH+B1Pm9qmlNpSuQe35g0AwBtx9YmI0VAA5lL2BTtJ/mIo90yn07mkco8uLmA/oG2oT6/v/JygnM+T7CWLyEMkv0/SrlZFH96d634AgFMJTkAcSFjeyahjHe1h+B161pwygscLBxC9psrqfgCApwx1jiilfkpR5hmSX+mjKnq5IerIB93AH3f6BQ6IVCmlIcUunhWoxULodrs32jYwkulLlgBo3Vv0i9vurICBhxLoTCMhkLy0DqkIqyOjqRwf3pdWJwp9n0xdICilntEjqMZFQrfbvawu6UhEtgJ4Rz8I3AKEBwuDMD8/f2G73b5eROoSDfcDeF3PiA3bjPrm/YzeZwDwZEYAeqZ8VavoIaquxObrbJEehr4joGe7T+gjKkopvadwu1LqWpIXrP19AB7PCOH5QgG4IMgGoWu7/a5D+M52252GUMqmvUuClBB0R267zc5CAPBrKfsFLgrJR6NbM/2Mr19AdIvtdjZaSN5B8usextcnezfabp8TEobh+dHLrvXVqM2dTuea9f/0D/kpCFxyBQcLAAAAAElFTkSuQmCC'
 };
-export const Placeholder = memo(({ slots = {}, slotProps = {}, status = 'empty', image, title = status === 'warning' ? '警告'
+export const Placeholder = memo(({ slots, slotProps, status = 'empty', image, title = status === 'warning' ? '警告'
     : status === 'error' ? '出错啦'
         : status === 'success' ? '成功'
             : void 0, description = status === 'empty' ? '暂无数据'
     : status === 'searching' ? '搜索中...'
         : void 0, extra, ...props }) => {
     const { mode } = useTheme();
-    const { title: Title = 'div', description: Description = 'div', extra: Extra = 'div' } = slots;
-    const { title: titleProps, description: descriptionProps, extra: extraProps } = slotProps;
+    const { title: Title = 'div', description: Description = 'div', extra: Extra = 'div' } = slots || {};
+    const { title: titleProps, description: descriptionProps, extra: extraProps } = slotProps || {};
     return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [image ??
                 _jsx("img", { className: classes.image, src: status === 'empty'
                         ? (mode === 'light' ? imagePreset.emptyLight : imagePreset.emptyDark)

package/dist/esm/components/popper/popper.js

@@ -481,7 +481,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
         onChildrenOpenChange,
         beforeOpenCallbacks: beforeOpenCallbacks.current
     }), [innerOpen.current, autoClose]);
-    const childRef = useCallback(cloneRef(children?.props.ref, anchorRef, ref), [children?.props.ref]);
+    const childRef = useCallback(cloneRef(children?.props.ref, anchorRef, ref), [children?.props.ref, ref]);
     return (_jsxs(_Fragment, { children: [isValidElement(children)
                 ? cloneElement(children, { ref: childRef })
                 : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { DivProps, Id, Obj, Size } from '../../types';
+import { ColorPropsValue, DivProps, Id, Obj, Size } from '../../types';
 import { SegmentedOption, SegmentedOptionProps } from './SegmentedOption';
 export type ISegmentedOption = SegmentedOptionProps & Obj;
 export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> extends Omit<DivProps, 'defaultValue' | 'onChange'> {
@@ -9,6 +9,8 @@ export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> e
     labelKey?: keyof O;
     primaryKey?: keyof O;
     fullWidth?: boolean;
+    /** 指示器的颜色，默认为`background.content` */
+    indicatorColor?: ColorPropsValue;
     defaultValue?: V;
     value?: V;
     onChange?(value: V): void;

package/dist/esm/components/segmented/segmented.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement, memo, useEffect, useRef, useState } from 'react';
-import { classes, style } from './segmented.style';
+import { classes, useStyle } from './segmented.style';
 import { clsx, cloneRef, isUnset, useControlled, useDerivedState } from '../../utils';
 import { SegmentedOption } from './SegmentedOption';
 import { useTheme } from '../theme';
-export const Segmented = memo(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
+export const Segmented = memo(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, indicatorColor = 'background.content', defaultValue, value, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const [animating, setAnimating] = useState(false);
@@ -74,6 +74,6 @@ export const Segmented = memo(({ options, orientation = 'horizontal', size, labe
             return c;
         });
     };
-    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
+    return (_jsxs("div", { ...props, css: useStyle({ indicatorColor }), className: clsx(classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
 });
 Segmented.Option = SegmentedOption;

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

@@ -1,3 +1,4 @@
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     label: string;
     option: string;
@@ -7,4 +8,6 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare function useStyle({ indicatorColor }: {
+    indicatorColor: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { defineInnerClasses, defineCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
 export const classes = defineInnerClasses('segmented', [
     'option',
@@ -8,115 +8,118 @@ export const classes = defineInnerClasses('segmented', [
     'suffix',
     'indicator'
 ]);
-export const style = defineCss(({ mode, background, borderRadius, easing, text }) => {
-    const bgColor = Color(background.body);
-    const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
-    const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
-    return css `
-        display: inline-flex;
-        background-color: ${background.body};
-        border-radius: ${borderRadius}px;
-        padding: 2px;
-        position: relative;
-
-        .${classes.option} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            padding: 4px 12px;
+export function useStyle({ indicatorColor }) {
+    const indicatorColorValue = useColor(indicatorColor);
+    return useCss(({ mode, background, borderRadius, easing, text }) => {
+        const bgColor = Color(background.body);
+        const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
+        const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
+        return css `
+            display: inline-flex;
+            background-color: ${background.body};
             border-radius: ${borderRadius}px;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            z-index: 1;
-            transition: background-color .3s ${easing.easeOut};
-            -webkit-tap-highlight-color: transparent;
-
-            &[data-active=true] {
-                transition: background-color 0s;
-            }
+            padding: 2px;
+            position: relative;
 
-            &[data-orientation=vertical] {
-                flex-direction: column;
-            }
+            .${classes.option} {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                padding: 4px 12px;
+                border-radius: ${borderRadius}px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                z-index: 1;
+                transition: background-color .3s ${easing.easeOut};
+                -webkit-tap-highlight-color: transparent;
 
-            &[data-disabled=true] {
-                cursor: not-allowed;
-                color: ${text.disabled};
-            }
-        }
+                &[data-active=true] {
+                    transition: background-color 0s;
+                }
 
-        &[data-size=small] {
-            .${classes.option} {
-                padding: 3px 12px;
-            }
-        }
+                &[data-orientation=vertical] {
+                    flex-direction: column;
+                }
 
-        &[data-size=large] {
-            .${classes.option} {
-                padding: 11px 12px;
+                &[data-disabled=true] {
+                    cursor: not-allowed;
+                    color: ${text.disabled};
+                }
             }
-        }
 
-        &[data-full-width=true] {
-            display: flex;
+            &[data-size=small] {
+                .${classes.option} {
+                    padding: 3px 12px;
+                }
+            }
 
-            .${classes.option} {
-                flex: 1;
+            &[data-size=large] {
+                .${classes.option} {
+                    padding: 11px 12px;
+                }
             }
-        }
 
-        &[data-orientation=vertical] {
-            flex-direction: column;
-        }
+            &[data-full-width=true] {
+                display: flex;
 
-        .${classes.indicator} {
-            border-radius: ${borderRadius}px;
-            background-color: ${background.content};
-            box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
-            position: absolute;
-            transition: all .3s ${easing.bounce};
-        }
+                .${classes.option} {
+                    flex: 1;
+                }
+            }
 
-        &[data-animating=true] {
-            .${classes.option} {
-                transition: background-color 0s;
+            &[data-orientation=vertical] {
+                flex-direction: column;
             }
-        }
 
-        &:not([data-animating=true]) {
-            .${classes.option}[data-active=true] {
-                background-color: ${background.content};
+            .${classes.indicator} {
+                border-radius: ${borderRadius}px;
+                background-color: ${indicatorColorValue};
                 box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
+                position: absolute;
+                transition: all .3s ${easing.bounce};
             }
-        }
 
-        &:not(:has([data-active=true])) {
-            .${classes.indicator} {
-                display: none;
+            &[data-animating=true] {
+                .${classes.option} {
+                    transition: background-color 0s;
+                }
             }
-        }
-
-        &:not([data-read-only=true]):not([data-disabled=true]) {
-            .${classes.option}:not([data-disabled=true]) {
-                cursor: pointer;
-                
-                &:not([data-active=true]):hover {
-                    background-color: ${hoverBg};
+
+            &:not([data-animating=true]) {
+                .${classes.option}[data-active=true] {
+                    background-color: ${indicatorColorValue};
+                    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
                 }
-            
-                &:not([data-active=true]):active {
-                    transition: background-color 0s;
-                    background-color: ${activeBg};
+            }
+
+            &:not(:has([data-active=true])) {
+                .${classes.indicator} {
+                    display: none;
                 }
             }
-        }
 
-        &[data-disabled=true] {
-            .${classes.option} {
-                cursor: not-allowed;
+            &:not([data-read-only=true]):not([data-disabled=true]) {
+                .${classes.option}:not([data-disabled=true]) {
+                    cursor: pointer;
+
+                    &:not([data-active=true]):hover {
+                        background-color: ${hoverBg};
+                    }
+
+                    &:not([data-active=true]):active {
+                        transition: background-color 0s;
+                        background-color: ${activeBg};
+                    }
+                }
+            }
+
+            &[data-disabled=true] {
+                .${classes.option} {
+                    cursor: not-allowed;
+                }
             }
-        }
-    `;
-});
+        `;
+    }, [indicatorColorValue]);
+}

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

@@ -39,7 +39,6 @@ interface SliderBaseProps extends Omit<DivProps, 'defaultValue' | 'onChange' | '
     marks?: MarkItem[];
     /** mark中的标签与滑动轨道的距离，默认为`6` */
     markLabelOffset?: number;
-    markSize?: number;
     disableTrack?: boolean;
     gestureOptions?: GestureOptions;
 }

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

@@ -10,6 +10,7 @@ export function useStyle({ color }) {
     let colorValue = useColor(color);
     colorValue = Color(colorValue).alpha(.7).string();
     return useCss(({ spacing, borderRadius, boxShadow }) => css `
+        pointer-events: none;
         z-index: ${zIndex.tooltip};
 
         .${classes.title} {

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

@@ -1,6 +1,6 @@
-import { defineClasses, responsiveVariables, useCss } from '../../utils';
+import { defineInnerClasses, responsiveVariables, useCss } from '../../utils';
 import { css } from '@emotion/react';
-export const classes = defineClasses('waterfall', [
+export const classes = defineInnerClasses('waterfall', [
     'item'
 ]);
 export function useStyle({ columnCount, columnGap, rowGap }) {

package/dist/esm/components/waterfall/waterfallItem.js

@@ -21,7 +21,7 @@ export const WaterfallItem = ({ ref, onLoad, child }) => {
             }
         })).then(() => onLoad());
     });
-    const clonedRef = useCallback(cloneRef(child.props.ref, innerRef, ref), [child.props.ref]);
+    const clonedRef = useCallback(cloneRef(child.props.ref, innerRef, ref), [child.props.ref, ref]);
     return cloneElement(child, {
         ref: clonedRef,
         className: clsx(classes.item, child.props.className),

package/dist/esm/extensions/documentViewer/documentViewer.js

@@ -25,7 +25,7 @@ export const DocumentViewer = memo(({ src, filename, onError, type, extension, s
             return ext && mime.getType(ext);
         }
         return null;
-    }, [src, type, extension]);
+    }, [src, type, extension, filename]);
     const downloadHandler = () => {
         if (src) {
             const a = document.createElement('a');

package/dist/esm/index.d.ts

@@ -1,5 +1,4 @@
 export * from './utils';
-export { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
 export * from './components/accordion';
 export * from './components/actionSheet';
 export * from './components/alert';
@@ -15,6 +14,7 @@ export * from './components/breadcrumb';
 export * from './components/bubble';
 export * from './components/bubbleConfirm';
 export * from './components/button';
+export * from './components/calendar';
 export * from './components/card';
 export * from './components/cascade';
 export * from './components/checkbox';
@@ -40,6 +40,7 @@ export * from './components/formDialog';
 export * from './components/gallery';
 export * from './components/grid';
 export * from './components/highlight';
+export * from './components/icon';
 export * from './components/image';
 export * from './components/input';
 export * from './components/inputBase';

package/dist/esm/index.js

@@ -1,5 +1,4 @@
 export * from './utils';
-export { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
 export * from './components/accordion';
 export * from './components/actionSheet';
 export * from './components/alert';
@@ -15,6 +14,7 @@ export * from './components/breadcrumb';
 export * from './components/bubble';
 export * from './components/bubbleConfirm';
 export * from './components/button';
+export * from './components/calendar';
 export * from './components/card';
 export * from './components/cascade';
 export * from './components/checkbox';
@@ -40,6 +40,7 @@ export * from './components/formDialog';
 export * from './components/gallery';
 export * from './components/grid';
 export * from './components/highlight';
+export * from './components/icon';
 export * from './components/image';
 export * from './components/input';
 export * from './components/inputBase';

package/dist/esm/types.d.ts

@@ -46,7 +46,7 @@ export type SlotsAndProps<Default extends Record<string, any>> = {
         [P in keyof Default]?: ElementType;
     };
     slotProps?: {
-        [P in keyof Default]?: Default[P] & Obj;
+        [P in keyof Default]?: Default[P] | Obj;
     };
 };
 /**

package/dist/esm/utils/style.d.ts

@@ -51,12 +51,12 @@ export declare function colorTransfer(colorPropsValue: ColorPropsValue, theme: T
  * 将useCss()与colorTransfer()方法结合封装
  * @param colorPropsValue
  */
-export declare function useColor(colorPropsValue: ColorPropsValue): string;
+export declare function useColor(colorPropsValue: ColorPropsValue | undefined): string | undefined;
 /**
  * 点击的波纹效果
  * @param colorPropsValue
  */
-export declare function useTouchRipple(colorPropsValue: ColorPropsValue): (element: Animatable) => void;
+export declare function useTouchSpread(colorPropsValue: ColorPropsValue): (element: Animatable) => void;
 /**
  * 生成响应式样式，与{@link responsiveStyles}的区别在于，本方法会遍历{@link Theme}中的所有`breakpoints`，触发回调函数
  * @param breakpoints 传入{@link Theme}中的断点，或自定义断点

package/dist/esm/utils/style.js

@@ -55,7 +55,7 @@ export function useCss(callback, deps) {
  * @param theme
  */
 export function colorTransfer(colorPropsValue, theme) {
-    const { colors, text } = theme;
+    const { colors, text, background } = theme;
     if (colorPropsValue in colors) {
         return colors[colorPropsValue].main;
     }
@@ -68,6 +68,10 @@ export function colorTransfer(colorPropsValue, theme) {
             return text[member];
         }
     }
+    if (colorPropsValue.startsWith('background')) {
+        const [, member] = colorPropsValue.split('.');
+        return background[member];
+    }
     return colorPropsValue;
 }
 /**
@@ -76,14 +80,14 @@ export function colorTransfer(colorPropsValue, theme) {
  */
 export function useColor(colorPropsValue) {
     return useCss(theme => {
-        return colorTransfer(colorPropsValue, theme);
+        return colorPropsValue && colorTransfer(colorPropsValue, theme);
     }, [colorPropsValue]);
 }
 /**
  * 点击的波纹效果
  * @param colorPropsValue
  */
-export function useTouchRipple(colorPropsValue) {
+export function useTouchSpread(colorPropsValue) {
     const theme = useTheme();
     const outlineColor = useMemo(() => {
         return Color(colorTransfer(colorPropsValue, theme)).alpha(.6).string();