@canlooks/can-ui 0.0.44 → 0.0.46

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useTheme } from '../theme';
-import { useTouchRipple } from '../../utils';
+import { useTouchSpread } from '../../utils';
 import { clsx } from '../../utils';
 import { LoadingIndicator } from '../loadingIndicator';
 import { classes, useStyle } from './button.style';
@@ -8,14 +8,14 @@ import { Collapse } from '../transitionBase';
 export const Button = ({ component: Component = 'button', color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
-    const showRipple = useTouchRipple(color);
+    const showSpread = useTouchSpread(color);
     const onPointerUp = (e) => {
         props.onPointerUp?.(e);
         if (!props.disabled
             && !loading
             && !readOnly
             && { flatted: true, filled: true, outlined: true, dashed: true }[variant]) {
-            showRipple(e.currentTarget);
+            showSpread(e.currentTarget);
         }
     };
     const onClick = (e) => {

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

@@ -268,11 +268,13 @@ export function useStyle({ color }) {
                 &[data-size=small] {
                     width: 24px;
                     height: 24px;
+                    padding: 0;
                 }
 
                 &[data-size=large] {
                     width: 40px;
                     height: 40px;
+                    padding: 0;
                 }
             }
         `;

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

@@ -0,0 +1,32 @@
+import { Size } from '../../types';
+import { Dayjs } from 'dayjs';
+import { Dispatch, SetStateAction } from 'react';
+import { FlexProps } from '../flex';
+export type ViewLevel = 'date' | 'month' | 'year';
+type SharedProps = {
+    min?: Dayjs;
+    max?: Dayjs;
+    disabledDates?: (date: Dayjs) => boolean;
+    /** 是否显示`回今天`按钮，默认为`true` */
+    showToday?: boolean;
+    /** @private */
+    _defaultNull?: boolean;
+};
+export interface CalendarProps extends SharedProps, Omit<FlexProps, 'defaultValue' | 'onChange'> {
+    /** 视图等级，默认为`date` */
+    viewLevel?: ViewLevel;
+    size?: Size;
+    defaultValue?: Dayjs | null;
+    value?: Dayjs | null;
+    onChange?(value: Dayjs | null): void;
+}
+export interface PanelProps extends SharedProps {
+    value: Dayjs | null;
+    setValue: Dispatch<SetStateAction<Dayjs | null>>;
+    innerD: Dayjs;
+    setInnerD: Dispatch<SetStateAction<Dayjs>>;
+    setViewType: Dispatch<SetStateAction<'date' | 'month' | 'year'>>;
+    onSelected(newValue: Dayjs): void;
+}
+export declare const Calendar: ({ viewLevel, showToday, size, defaultValue, min, max, disabledDates, value, onChange, _defaultNull, ...props }: CalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/calendar/calendar.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import dayjs from 'dayjs';
+import { clsx, useControlled } from '../../utils';
+import { PanelDates } from './panelDates';
+import { useState } from 'react';
+import { classes, style } from './calendar.style';
+import { Flex } from '../flex';
+import { PanelYear } from './panelYear';
+import { PanelMonth } from './panelMonth';
+export const Calendar = ({ viewLevel = 'date', showToday = true, size = 'medium', defaultValue = null, min, max, disabledDates, value, onChange, _defaultNull, ...props }) => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
+    const [viewType, setViewType] = useState(viewLevel);
+    const [innerD, setInnerD] = useState(() => innerValue.current ?? dayjs().startOf('date'));
+    const commonProps = {
+        value: innerValue.current,
+        setValue: setInnerValue,
+        innerD,
+        setInnerD,
+        setViewType,
+        min,
+        max,
+        disabledDates,
+        onSelected: (newValue) => {
+            if (viewLevel === 'date') {
+                setViewType('date');
+            }
+            else {
+                // 视图等级不为`date`时，选中年或月即完成
+                setInnerValue(newValue);
+            }
+        },
+        showToday,
+        _defaultNull
+    };
+    const renderPanel = () => {
+        switch (viewType) {
+            case 'date':
+                return _jsx(PanelDates, { ...commonProps });
+            case 'month':
+                return _jsx(PanelMonth, { ...commonProps });
+            default:
+                return _jsx(PanelYear, { ...commonProps });
+        }
+    };
+    return (_jsx(Flex, { inline: true, direction: "column", ...props, css: style, className: clsx(classes.root, props.className), "data-size": size, children: renderPanel() }));
+};

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

@@ -0,0 +1,15 @@
+export declare const classes: {
+    body: string;
+    head: string;
+    headSide: string;
+    headControl: string;
+    headCenter: string;
+    headButton: string;
+    dateItem: string;
+    monthItem: string;
+    yearItem: string;
+    foot: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/{dateTimePicker → calendar}/calendar.style.js

@@ -2,99 +2,139 @@ import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
 import { menuListPadding } from '../menuItem/menuItem.style';
 export const classes = defineInnerClasses('calendar', [
-    'calendarHead',
-    'calendarHeadSide',
-    'calendarHeadControl',
-    'calendarHeadCenter',
-    'calendarHeadButton',
-    'calendarBody',
+    'head',
+    'headSide',
+    'headControl',
+    'headCenter',
+    'headButton',
+    'body',
     'dateItem',
     'monthItem',
     'yearItem',
-    'calendarFoot'
+    'foot'
 ]);
-export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.calendarHead} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.calendarHeadSide} {
-            z-index: 1;
-        }
-
-        .${classes.calendarHeadControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.calendarHeadCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${classes.calendarHeadButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${classes.calendarBody} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=dates] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=months] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-
-    .${classes.calendarFoot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+export const style = defineCss(({ divider, text, spacing }) => css `
+    .${classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuListPadding}px;
+        position: relative;
+
+        .${classes.headSide} {
+            z-index: 1;
+        }
+
+        .${classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${classes.monthItem},
+            .${classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${classes.monthItem},
+                .${classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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

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

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

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

package/dist/esm/components/calendar/panelDates.d.ts

@@ -0,0 +1,2 @@
+import { PanelProps } from './calendar';
+export declare const PanelDates: import("react").MemoExoticComponent<({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, _defaultNull }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/{dateTimePicker/calendarDates.js → calendar/panelDates.js}

@@ -1,16 +1,14 @@
-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 { memo } from 'react';
-import { classes } from './calendar.style';
 import { Button } from '../button';
-import { Tooltip } from '../tooltip';
 import dayjs from 'dayjs';
-import { style } from './calendar.style';
-import { useDateTimePickerContext } from './dateTimePicker';
-import { Icon } from '../..';
+import { Tooltip } from '../tooltip';
+import { Icon } from '../icon';
 import { faAnglesLeft } from '@fortawesome/free-solid-svg-icons/faAnglesLeft';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 import { faAnglesRight } from '@fortawesome/free-solid-svg-icons/faAnglesRight';
+import { classes } from './calendar.style';
 const days = ['一', '二', '三', '四', '五', '六', '日'];
 const renderedDaysList = (() => {
     const ret = [];
@@ -24,7 +22,7 @@ const commonButtonProps = {
     size: 'small',
     color: 'text'
 };
-export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setInnerD, setViewType }) => {
+export const PanelDates = memo(({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, _defaultNull }) => {
     const today = dayjs();
     const prevMonth = () => {
         setInnerD(d => d.subtract(1, 'month'));
@@ -38,8 +36,7 @@ export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setIn
     const nextYear = () => {
         setInnerD(d => d.add(1, 'year'));
     };
-    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { ...commonButtonProps, className: classes.calendarHeadControl, onClick: onClick, children: icon }) }));
-    const { min, max, disabledDates } = useDateTimePickerContext();
+    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { ...commonButtonProps, className: classes.headControl, onClick: onClick, children: icon }) }));
     const isDisabled = (d) => {
         if (disabledDates && !disabledDates(d)) {
             return true;
@@ -47,10 +44,7 @@ export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setIn
         if (min && min.isAfter(d)) {
             return true;
         }
-        if (max && max.isBefore(d)) {
-            return true;
-        }
-        return false;
+        return max && max.isBefore(d);
     };
     const renderDates = () => {
         let startD = innerD.date(0);
@@ -62,17 +56,15 @@ export const CalendarDates = memo(({ defaultNull, value, onChange, innerD, setIn
                 : offset < 0 ? startD.subtract(-offset, 'days')
                     : startD;
             const isToday = _d.isSame(today, 'day');
-            const selected = _d.isSame(value, 'day');
+            const selected = !_defaultNull && _d.isSame(value, 'day');
             const isCurrentMonth = _d.isSame(innerD, 'month');
             const disabled = isDisabled(_d);
             ret.push(_jsx(Button, { className: classes.dateItem, size: "small", variant: disabled || selected ? 'filled'
                     : isToday ? 'outlined'
-                        : 'text', disabled: disabled, color: selected ? 'primary' : 'text', "data-other-month": !isCurrentMonth, onClick: () => {
-                    // 默认为空时，任何日期都可选中
-                    (!selected || defaultNull) && onChange(_d);
-                }, children: _d.date() }, i));
+                        : 'text', disabled: disabled, color: selected ? 'primary' : 'text', "data-other-month": !isCurrentMonth, onClick: () => !selected && setValue(_d), children: _d.date() }, i));
         }
         return ret;
     };
-    return (_jsxs("div", { css: style, className: classes.root, children: [_jsxs("div", { className: classes.calendarHead, children: [_jsxs("div", { className: classes.calendarHeadSide, children: [renderHeadControl(_jsx(Icon, { icon: faAnglesLeft }), '上一年', prevYear), renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一月', prevMonth)] }), _jsxs("div", { className: classes.calendarHeadSide, children: [renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一月', nextMonth), renderHeadControl(_jsx(Icon, { icon: faAnglesRight }), '下一年', nextYear)] }), _jsxs("div", { className: classes.calendarHeadCenter, children: [_jsxs(Button, { ...commonButtonProps, className: classes.calendarHeadButton, onClick: () => setViewType('years'), children: [innerD.year(), "\u5E74"] }), _jsxs(Button, { ...commonButtonProps, className: classes.calendarHeadButton, onClick: () => setViewType('months'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), _jsxs("div", { className: classes.calendarBody, "data-view-type": "dates", children: [renderedDaysList, renderDates()] }), _jsx("div", { className: classes.calendarFoot, children: _jsx(Button, { variant: "text", onClick: () => onChange(dayjs()), children: "\u56DE\u4ECA\u5929" }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.head, children: [_jsxs("div", { className: classes.headSide, children: [renderHeadControl(_jsx(Icon, { icon: faAnglesLeft }), '上一年', prevYear), renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一月', prevMonth)] }), _jsxs("div", { className: classes.headSide, children: [renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一月', nextMonth), renderHeadControl(_jsx(Icon, { icon: faAnglesRight }), '下一年', nextYear)] }), _jsxs("div", { className: classes.headCenter, children: [_jsxs(Button, { ...commonButtonProps, className: classes.headButton, onClick: () => setViewType('year'), children: [innerD.year(), "\u5E74"] }), _jsxs(Button, { ...commonButtonProps, className: classes.headButton, onClick: () => setViewType('month'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), _jsxs("div", { className: classes.body, "data-view-type": "date", children: [renderedDaysList, renderDates()] }), showToday &&
+                _jsx("div", { className: classes.foot, children: _jsx(Button, { variant: "text", onClick: () => setValue(dayjs()), children: "\u56DE\u4ECA\u5929" }) })] }));
 });

package/dist/esm/components/calendar/panelMonth.d.ts

@@ -0,0 +1,2 @@
+import { PanelProps } from './calendar';
+export declare const PanelMonth: import("react").MemoExoticComponent<({ innerD, setInnerD, onSelected, min, max }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/calendar/panelMonth.js

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { memo } from 'react';
+import { classes } from './calendar.style';
+import { Button } from '../button';
+export const PanelMonth = memo(({ innerD, setInnerD, onSelected, min, max }) => {
+    const currentMonth = innerD.month();
+    const clickHandler = (d, i) => {
+        currentMonth !== i && setInnerD(d);
+        onSelected(d);
+    };
+    const isDisabled = (d) => {
+        if (min && min.isAfter(d)) {
+            return true;
+        }
+        return max && max.isBefore(d);
+    };
+    const renderButtons = () => {
+        const ret = [];
+        for (let i = 0; i < 12; i++) {
+            const d = innerD.month(i);
+            ret.push(_jsxs(Button, { className: classes.monthItem, variant: currentMonth === i ? 'filled' : 'text', size: "large", color: currentMonth === i ? 'primary' : 'text', disabled: isDisabled(d), onClick: () => clickHandler(d, i), children: [i + 1, "\u6708"] }, i));
+        }
+        return ret;
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.head, children: _jsx("div", { className: classes.headCenter, children: "\u6708\u4EFD" }) }), _jsx("div", { className: classes.body, "data-view-type": "month", children: renderButtons() })] }));
+});

package/dist/esm/components/calendar/panelYear.d.ts

@@ -0,0 +1,2 @@
+import { PanelProps } from './calendar';
+export declare const PanelYear: import("react").MemoExoticComponent<({ innerD, setInnerD, onSelected, min, max }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/calendar/panelYear.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { memo, useState } from 'react';
+import { classes } from './calendar.style';
+import { Button } from '../button';
+import { Tooltip } from '../tooltip';
+import { Icon } from '../..';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
+export const PanelYear = memo(({ innerD, setInnerD, onSelected, min, max }) => {
+    const currentYear = innerD.year();
+    const clickHandler = (d, yearNum) => {
+        currentYear !== yearNum && setInnerD(d);
+        onSelected(d);
+    };
+    const [page, setPage] = useState(() => Math.floor(currentYear / 12));
+    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { className: classes.headControl, variant: "text", size: "small", color: "text", onClick: onClick, children: icon }) }));
+    const isDisabled = (d) => {
+        if (min && min.isAfter(d)) {
+            return true;
+        }
+        return max && max.isBefore(d);
+    };
+    const renderButtons = () => {
+        const ret = [];
+        for (let i = 0; i < 12; i++) {
+            const yearNum = page * 12 + i + 1;
+            const d = innerD.year(yearNum);
+            ret.push(_jsx(Button, { className: classes.monthItem, variant: currentYear === yearNum ? 'filled' : 'text', size: "large", color: currentYear === yearNum ? 'primary' : 'text', disabled: isDisabled(d), onClick: () => clickHandler(d, yearNum), children: yearNum }, i));
+        }
+        return ret;
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.head, children: [_jsx("div", { className: classes.headSide, children: renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一页', () => setPage(p => p - 1)) }), _jsx("div", { className: classes.headSide, children: renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一页', () => setPage(p => p + 1)) }), _jsx("div", { className: classes.headCenter, children: "\u5E74\u4EFD" })] }), _jsx("div", { className: classes.body, "data-view-type": "year", children: renderButtons() })] }));
+});

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

@@ -35,11 +35,11 @@ export const style = defineCss(({ spacing, mode, background, divider, boxShadow,
         `
             : css `
             &[data-elevation="0"] {
-                background-color: ${gray(.12)};
+                background-color: ${gray(.1)};
             }
 
             &[data-elevation="1"] {
-                background-color: ${gray(.17)};
+                background-color: ${gray(.14)};
             }
 
             &[data-elevation="2"] {

package/dist/esm/components/checkboxBase/checkboxBase.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
-import { clsx, cloneRef, useControlled, useTouchRipple } from '../../utils';
+import { clsx, cloneRef, useControlled, useTouchSpread } from '../../utils';
 import { classes, useStyle } from './checkboxBase.style';
 import { useCheckboxBaseGroupContext } from '../checkboxBaseGroup';
 import { Icon } from '../..';
@@ -16,12 +16,12 @@ export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value
     const checkboxRef = useRef(null);
     const innerInputRef = useRef(null);
     const [innerChecked, setInnerChecked] = useControlled(defaultChecked, checked);
-    const showRipple = useTouchRipple(color);
+    const showSpread = useTouchSpread(color);
     const clickHandler = (e) => {
         if (disabled || readOnly) {
             return;
         }
-        showRipple(checkboxRef.current);
+        showSpread(checkboxRef.current);
         const newChecked = innerInputRef.current.checked = !innerChecked.current;
         e.target = e.currentTarget = innerInputRef.current;
         props.onClick?.(e);

package/dist/esm/components/colorPicker/colorPicker.js

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { InputBase } from '../inputBase';
 import { classes, colorPickerPopperStyle, style } from './colorPicker.style';
-import { clsx, cloneRef, colorTransfer, useControlled, useTouchRipple } from '../../utils';
+import { clsx, cloneRef, colorTransfer, useControlled, useTouchSpread } from '../../utils';
 import { useTheme } from '../theme';
 import { Palette } from '../palette';
 import Color from 'color';
@@ -23,10 +23,10 @@ function BlockItem({ color, onClick, selected }) {
         hex: color.hex(),
         alpha: color.alpha()
     }), [color]);
-    const showRipple = useTouchRipple(light ? 'text.disabled' : colorObject.hex);
+    const showSpread = useTouchSpread(light ? 'text.disabled' : colorObject.hex);
     return (_jsx("div", { className: classes.block, "data-selected": selected, "data-light": light, onClick: e => {
             onClick?.();
-            showRipple(e.currentTarget);
+            showSpread(e.currentTarget);
         }, children: _jsx("div", { className: classes.blockColor, style: {
                 backgroundColor: colorObject.hex,
                 opacity: colorObject.alpha

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

@@ -49,7 +49,7 @@ export const style = defineCss(({ spacing, borderRadius, divider, background })
             &:after {
                 content: '';
                 position: absolute;
-                inset: 3px;
+                inset: 4px;
                 border-radius: inherit;
                 border: 2px solid #ffffff;
             }

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

@@ -5,7 +5,6 @@ import { Dayjs } from 'dayjs';
 export type DatePickerSharedProps = {
     min?: Dayjs;
     max?: Dayjs;
-    disabledDates?: (date: Dayjs) => any;
     disabledHours?: (date: Dayjs, hours: number) => any;
     disabledMinutes?: (date: Dayjs, minutes: number) => any;
     disabledSeconds?: (date: Dayjs, seconds: number) => any;
@@ -21,6 +20,7 @@ export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBa
     defaultValue?: Dayjs | null;
     value?: Dayjs | null;
     onChange?(value: Dayjs | null): void;
+    disabledDates?: (date: Dayjs) => any;
 }
 export declare function useDateTimePickerContext(): DatePickerSharedProps;
 export declare const DateTimePicker: React.MemoExoticComponent<({ inputProps, popperProps, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format, defaultValue, value, onChange, defaultOpen, open, onOpenChange, autoClose, ...props }: DateTimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;