@canlooks/can-ui 0.0.44 → 0.0.46

package/dist/cjs/components/dateTimePicker/dateTimePicker.js

@@ -11,7 +11,7 @@ const utils_1 = require("../../utils");
 const dateTimePicker_style_1 = require("./dateTimePicker.style");
 const dayjs_1 = tslib_1.__importDefault(require("dayjs"));
 const customParseFormat_1 = tslib_1.__importDefault(require("dayjs/plugin/customParseFormat"));
-const calendar_1 = require("./calendar");
+const calendar_1 = require("../calendar");
 const timer_1 = require("./timer");
 const __1 = require("../..");
 const faCalendar_1 = require("@fortawesome/free-regular-svg-icons/faCalendar");
@@ -81,11 +81,11 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
         }
         selectFn();
     };
-    const focusHandler = (e) => {
+    const focusHandler = () => {
         focused.current = true;
         selectFn();
     };
-    const blurHandler = (e) => {
+    const blurHandler = () => {
         resetContinue();
         focused.current = false;
         _setInnerOpen(false);
@@ -207,21 +207,18 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
         input.setSelectionRange(nextRange.start, nextRange.end);
     };
     const contextValue = (0, react_1.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 || (0, dayjs_1.default)();
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: dateTimePicker_style_1.datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: (0, jsx_runtime_1.jsxs)(DateTimePickerContext, { value: contextValue, children: [showCalendar &&
-                    (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { type: format.includes('D') ? 'dates'
-                            : format.includes('M') ? 'months'
-                                : format.includes('Y') ? 'years'
-                                    : 'dates', defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue }), showTimer &&
-                    (0, jsx_runtime_1.jsx)(timer_1.Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: dateTimePicker_style_1.datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCalendar &&
+                    (0, jsx_runtime_1.jsx)(calendar_1.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 &&
+                    (0, jsx_runtime_1.jsx)(DateTimePickerContext, { value: contextValue, children: (0, jsx_runtime_1.jsx)(timer_1.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: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: dateTimePicker_style_1.style, className: (0, utils_1.clsx)(dateTimePicker_style_1.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 }) => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref, innerInputRef), className: (0, utils_1.clsx)(dateTimePicker_style_1.classes.input, inputProps?.className) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar

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

@@ -4,7 +4,7 @@ exports.datePickerPopperStyle = exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const input_style_1 = require("../input/input.style");
-const calendar_style_1 = require("./calendar.style");
+const calendar_style_1 = require("../calendar/calendar.style");
 const timer_style_1 = require("./timer.style");
 const popper_style_1 = require("../popper/popper.style");
 exports.classes = (0, utils_1.defineInnerClasses)('date-time-picker', [

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

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

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = Icon;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const utils_1 = require("../../utils");
+function Icon({ color, ...props }) {
+    return (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { ...props, color: (0, utils_1.useColor)(color) });
+}

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

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

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

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

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const utils_1 = require("../../utils");
 const react_1 = require("@emotion/react");
-exports.classes = (0, utils_1.defineClasses)('pinchable', [
+exports.classes = (0, utils_1.defineInnerClasses)('pinchable', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `

package/dist/cjs/components/placeholder/placeholder.js

@@ -15,15 +15,15 @@ exports.imagePreset = {
     info: 'data:image/png;base64,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',
     searching: 'data:image/png;base64,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'
 };
-exports.Placeholder = (0, react_1.memo)(({ slots = {}, slotProps = {}, status = 'empty', image, title = status === 'warning' ? '警告'
+exports.Placeholder = (0, react_1.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 } = (0, theme_1.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 ((0, jsx_runtime_1.jsxs)("div", { ...props, css: placeholder_style_1.style, className: (0, utils_1.clsx)(placeholder_style_1.classes.root, props.className), children: [image ??
                 (0, jsx_runtime_1.jsx)("img", { className: placeholder_style_1.classes.image, src: status === 'empty'
                         ? (mode === 'light' ? exports.imagePreset.emptyLight : exports.imagePreset.emptyDark)

package/dist/cjs/components/popper/popper.js

@@ -484,7 +484,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
         onChildrenOpenChange,
         beforeOpenCallbacks: beforeOpenCallbacks.current
     }), [innerOpen.current, autoClose]);
-    const childRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, anchorRef, ref), [children?.props.ref]);
+    const childRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, anchorRef, ref), [children?.props.ref, ref]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(children)
                 ? (0, react_1.cloneElement)(children, { ref: childRef })
                 : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 

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

@@ -7,7 +7,7 @@ const segmented_style_1 = require("./segmented.style");
 const utils_1 = require("../../utils");
 const SegmentedOption_1 = require("./SegmentedOption");
 const theme_1 = require("../theme");
-exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
+exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, indicatorColor = 'background.content', defaultValue, value, onChange, readOnly, disabled, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [animating, setAnimating] = (0, react_1.useState)(false);
@@ -77,6 +77,6 @@ exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', si
             return c;
         });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: segmented_style_1.style, className: (0, utils_1.clsx)(segmented_style_1.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: [(0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, segmented_style_1.useStyle)({ indicatorColor }), className: (0, utils_1.clsx)(segmented_style_1.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: [(0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
 });
 exports.Segmented.Option = SegmentedOption_1.SegmentedOption;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.style = exports.classes = void 0;
+exports.classes = void 0;
+exports.useStyle = useStyle;
 const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
@@ -12,115 +13,118 @@ exports.classes = (0, utils_1.defineInnerClasses)('segmented', [
     'suffix',
     'indicator'
 ]);
-exports.style = (0, utils_1.defineCss)(({ mode, background, borderRadius, easing, text }) => {
-    const bgColor = (0, color_1.default)(background.body);
-    const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
-    const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
-    return (0, react_1.css) `
-        display: inline-flex;
-        background-color: ${background.body};
-        border-radius: ${borderRadius}px;
-        padding: 2px;
-        position: relative;
-
-        .${exports.classes.option} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            padding: 4px 12px;
+function useStyle({ indicatorColor }) {
+    const indicatorColorValue = (0, utils_1.useColor)(indicatorColor);
+    return (0, utils_1.useCss)(({ mode, background, borderRadius, easing, text }) => {
+        const bgColor = (0, color_1.default)(background.body);
+        const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
+        const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
+        return (0, react_1.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;
-            }
+            .${exports.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] {
-            .${exports.classes.option} {
-                padding: 3px 12px;
-            }
-        }
+                &[data-orientation=vertical] {
+                    flex-direction: column;
+                }
 
-        &[data-size=large] {
-            .${exports.classes.option} {
-                padding: 11px 12px;
+                &[data-disabled=true] {
+                    cursor: not-allowed;
+                    color: ${text.disabled};
+                }
             }
-        }
 
-        &[data-full-width=true] {
-            display: flex;
+            &[data-size=small] {
+                .${exports.classes.option} {
+                    padding: 3px 12px;
+                }
+            }
 
-            .${exports.classes.option} {
-                flex: 1;
+            &[data-size=large] {
+                .${exports.classes.option} {
+                    padding: 11px 12px;
+                }
             }
-        }
 
-        &[data-orientation=vertical] {
-            flex-direction: column;
-        }
+            &[data-full-width=true] {
+                display: flex;
 
-        .${exports.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};
-        }
+                .${exports.classes.option} {
+                    flex: 1;
+                }
+            }
 
-        &[data-animating=true] {
-            .${exports.classes.option} {
-                transition: background-color 0s;
+            &[data-orientation=vertical] {
+                flex-direction: column;
             }
-        }
 
-        &:not([data-animating=true]) {
-            .${exports.classes.option}[data-active=true] {
-                background-color: ${background.content};
+            .${exports.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])) {
-            .${exports.classes.indicator} {
-                display: none;
+            &[data-animating=true] {
+                .${exports.classes.option} {
+                    transition: background-color 0s;
+                }
             }
-        }
-
-        &:not([data-read-only=true]):not([data-disabled=true]) {
-            .${exports.classes.option}:not([data-disabled=true]) {
-                cursor: pointer;
-                
-                &:not([data-active=true]):hover {
-                    background-color: ${hoverBg};
+
+            &:not([data-animating=true]) {
+                .${exports.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])) {
+                .${exports.classes.indicator} {
+                    display: none;
                 }
             }
-        }
 
-        &[data-disabled=true] {
-            .${exports.classes.option} {
-                cursor: not-allowed;
+            &:not([data-read-only=true]):not([data-disabled=true]) {
+                .${exports.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] {
+                .${exports.classes.option} {
+                    cursor: not-allowed;
+                }
             }
-        }
-    `;
-});
+        `;
+    }, [indicatorColorValue]);
+}

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

@@ -15,6 +15,7 @@ function useStyle({ color }) {
     let colorValue = (0, utils_1.useColor)(color);
     colorValue = (0, color_1.default)(colorValue).alpha(.7).string();
     return (0, utils_1.useCss)(({ spacing, borderRadius, boxShadow }) => (0, react_1.css) `
+        pointer-events: none;
         z-index: ${theme_1.zIndex.tooltip};
 
         .${exports.classes.title} {

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

@@ -4,7 +4,7 @@ exports.classes = void 0;
 exports.useStyle = useStyle;
 const utils_1 = require("../../utils");
 const react_1 = require("@emotion/react");
-exports.classes = (0, utils_1.defineClasses)('waterfall', [
+exports.classes = (0, utils_1.defineInnerClasses)('waterfall', [
     'item'
 ]);
 function useStyle({ columnCount, columnGap, rowGap }) {

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

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

package/dist/cjs/extensions/documentViewer/documentViewer.js

@@ -31,7 +31,7 @@ exports.DocumentViewer = (0, react_1.memo)(({ src, filename, onError, type, exte
             return ext && mime_1.default.getType(ext);
         }
         return null;
-    }, [src, type, extension]);
+    }, [src, type, extension, filename]);
     const downloadHandler = () => {
         if (src) {
             const a = document.createElement('a');

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

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./utils"), exports);
-var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return react_fontawesome_1.FontAwesomeIcon; } });
 tslib_1.__exportStar(require("./components/accordion"), exports);
 tslib_1.__exportStar(require("./components/actionSheet"), exports);
 tslib_1.__exportStar(require("./components/alert"), exports);
@@ -20,6 +17,7 @@ tslib_1.__exportStar(require("./components/breadcrumb"), exports);
 tslib_1.__exportStar(require("./components/bubble"), exports);
 tslib_1.__exportStar(require("./components/bubbleConfirm"), exports);
 tslib_1.__exportStar(require("./components/button"), exports);
+tslib_1.__exportStar(require("./components/calendar"), exports);
 tslib_1.__exportStar(require("./components/card"), exports);
 tslib_1.__exportStar(require("./components/cascade"), exports);
 tslib_1.__exportStar(require("./components/checkbox"), exports);
@@ -45,6 +43,7 @@ tslib_1.__exportStar(require("./components/formDialog"), exports);
 tslib_1.__exportStar(require("./components/gallery"), exports);
 tslib_1.__exportStar(require("./components/grid"), exports);
 tslib_1.__exportStar(require("./components/highlight"), exports);
+tslib_1.__exportStar(require("./components/icon"), exports);
 tslib_1.__exportStar(require("./components/image"), exports);
 tslib_1.__exportStar(require("./components/input"), exports);
 tslib_1.__exportStar(require("./components/inputBase"), exports);

package/dist/cjs/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/cjs/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/cjs/utils/style.js

@@ -7,7 +7,7 @@ exports.defineCss = defineCss;
 exports.useCss = useCss;
 exports.colorTransfer = colorTransfer;
 exports.useColor = useColor;
-exports.useTouchRipple = useTouchRipple;
+exports.useTouchSpread = useTouchSpread;
 exports.responsiveVariables = responsiveVariables;
 exports.responsiveStyles = responsiveStyles;
 exports.toResponsiveValue = toResponsiveValue;
@@ -71,7 +71,7 @@ function useCss(callback, deps) {
  * @param theme
  */
 function colorTransfer(colorPropsValue, theme) {
-    const { colors, text } = theme;
+    const { colors, text, background } = theme;
     if (colorPropsValue in colors) {
         return colors[colorPropsValue].main;
     }
@@ -84,6 +84,10 @@ function colorTransfer(colorPropsValue, theme) {
             return text[member];
         }
     }
+    if (colorPropsValue.startsWith('background')) {
+        const [, member] = colorPropsValue.split('.');
+        return background[member];
+    }
     return colorPropsValue;
 }
 /**
@@ -92,14 +96,14 @@ function colorTransfer(colorPropsValue, theme) {
  */
 function useColor(colorPropsValue) {
     return useCss(theme => {
-        return colorTransfer(colorPropsValue, theme);
+        return colorPropsValue && colorTransfer(colorPropsValue, theme);
     }, [colorPropsValue]);
 }
 /**
  * 点击的波纹效果
  * @param colorPropsValue
  */
-function useTouchRipple(colorPropsValue) {
+function useTouchSpread(colorPropsValue) {
     const theme = (0, theme_1.useTheme)();
     const outlineColor = (0, react_1.useMemo)(() => {
         return (0, color_1.default)(colorTransfer(colorPropsValue, theme)).alpha(.6).string();