@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const inputBase_style_1 = require("../inputBase/inputBase.style");
+exports.classes = (0, utils_1.defineClasses)('textarea', [
+    'textarea'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
+    height: auto;
+
+    &[data-size] {
+        padding: 1px;
+    }
+
+    .${exports.classes.textarea} {
+        flex: 1;
+        border: none;
+        outline: none;
+        background-color: transparent;
+        font-size: 1em;
+        padding: ${spacing[3]}px;
+        display: block;
+    }
+
+    &[data-full-width=true] {
+        .${exports.classes.textarea} {
+            min-width: 100%;
+            max-width: 100%;
+        }
+    }
+
+    &:not([data-full-width=true]) {
+        display: inline-flex;
+    }
+
+    .${inputBase_style_1.classes.clear} {
+        position: absolute;
+        top: ${spacing[2]}px;
+        right: ${spacing[3]}px;
+    }
+`);

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

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

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

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

package/dist/cjs/components/timeline/timeline.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ColorPropsValue, DIVProps, Obj } from '../../../types';
+import { TimelineItem, TimelineItemProps } from './timelineItem';
+export interface TimelineSharedProps extends DIVProps {
+    variant?: 'filled' | 'outlined';
+    /**标签的位置，@default "end" */
+    labelPosition?: 'start' | 'end' | 'alternate' | 'alternate-reverse';
+    color?: ColorPropsValue;
+}
+export interface TimelineProps extends TimelineSharedProps {
+    items?: (TimelineItemProps & Obj)[];
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare function useTimelineContext(): TimelineSharedProps & Pick<TimelineProps, "orientation">;
+export declare const Timeline: {
+    (props: TimelineProps): ReactElement;
+    Item: typeof TimelineItem;
+};

package/dist/cjs/components/timeline/timeline.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = void 0;
+exports.useTimelineContext = useTimelineContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const timeline_style_1 = require("./timeline.style");
+const utils_1 = require("../../utils");
+const timelineItem_1 = require("./timelineItem");
+const timelineContext = (0, react_1.createContext)({});
+function useTimelineContext() {
+    return (0, react_1.useContext)(timelineContext);
+}
+exports.Timeline = (0, react_1.memo)((0, react_1.forwardRef)(({ items, 
+// 共享属性
+variant = 'outlined', labelPosition = 'end', orientation = 'vertical', color = 'primary', ...props }, ref) => {
+    const renderItems = () => {
+        if (items) {
+            return items.map((p, i) => {
+                return ((0, jsx_runtime_1.jsx)(timelineItem_1.TimelineItem, { dot: p.dot, content: p.content, oppositeContent: p.oppositeContent, loading: p.loading, variant: p.variant, labelPosition: p.labelPosition, color: p.color, _index: i }, p.key ?? i));
+            });
+        }
+        return react_1.Children.map(props.children, (child, _index) => {
+            if ((0, react_1.isValidElement)(child)) {
+                return (0, react_1.cloneElement)(child, { _index });
+            }
+            return child;
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: timeline_style_1.style, className: (0, utils_1.classnames)(timeline_style_1.classes.root, props.className), "data-label-position": labelPosition, "data-orientation": orientation, children: (0, jsx_runtime_1.jsx)(timelineContext.Provider, { value: (0, react_1.useMemo)(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
+}));
+exports.Timeline.Item = timelineItem_1.TimelineItem;

package/dist/cjs/components/timeline/timeline.style.d.ts

@@ -0,0 +1,14 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    content: string;
+    dot: string;
+    item: string;
+    opposite: string;
+    dotArea: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare function useTimelineItemStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+exports.useTimelineItemStyle = useTimelineItemStyle;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('timeline', ['item', 'opposite', 'dotArea', 'dot', 'content']);
+exports.style = (0, utils_1.defineCss)(() => (0, react_1.css) `
+    display: flex;
+    flex-direction: column;
+
+    &[data-orientation=vertical] {
+        &[data-label-position='alternate'],
+        &[data-label-position='alternate-reverse'],
+        &:has(.${exports.classes.opposite}[data-show=true]) {
+            .${exports.classes.opposite} {
+                display: flex;
+            }
+        }
+    
+        &[data-label-position='start'] .${exports.classes.item}, &[data-label-position='alternate'] .${exports.classes.item}:nth-of-type(even),
+        &[data-label-position='alternate-reverse'] .${exports.classes.item}:nth-of-type(odd) {
+            flex-direction: row-reverse;
+    
+            .${exports.classes.content} {
+                align-items: flex-end;
+            }
+    
+            .${exports.classes.opposite} {
+                align-items: stretch;
+            }
+        }
+    }
+
+    &[data-orientation=horizontal] {
+        flex-direction: row;
+
+        &[data-label-position='alternate'],
+        &[data-label-position='alternate-reverse'],
+        &:has(.${exports.classes.opposite}[data-show=true]) {
+            .${exports.classes.opposite} {
+                display: flex;
+
+                &:before {
+                    content: '1';
+                    width: 0;
+                    overflow: hidden;
+                }
+            }
+        }
+    
+        &[data-label-position='start'] .${exports.classes.item}, &[data-label-position='alternate'] .${exports.classes.item}:nth-of-type(even),
+        &[data-label-position='alternate-reverse'] .${exports.classes.item}:nth-of-type(odd) {
+            flex-direction: column-reverse;
+    
+            .${exports.classes.content} {
+                align-items: flex-end;
+            }
+    
+            .${exports.classes.opposite} {
+                align-items: stretch;
+            }
+        }
+    }
+`);
+function useTimelineItemStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ spacing, divider }) => (0, react_1.css) `
+        display: flex;
+        gap: ${spacing[3]}px ${spacing[5]}px;
+
+        .${exports.classes.dotArea} {
+            display: flex;
+            align-items: baseline;
+            position: relative;
+
+            &:before {
+                content: '1';
+                width: 0;
+                overflow: hidden;
+            }
+
+            &:after {
+                content: '';
+                background-color: ${divider};
+                position: absolute;
+            }
+        }
+
+        .${exports.classes.dot} {
+            width: 9px;
+            height: 9px;
+            border: 2px solid ${colorValue};
+            border-radius: 50%;
+        }
+
+        &[data-variant='filled'] {
+            .${exports.classes.dot} {
+                background-color: ${colorValue};
+            }
+        }
+
+        .${exports.classes.content}, .${exports.classes.opposite} {
+            flex-direction: column;
+            flex: 1;
+        }
+
+        .${exports.classes.content} {
+            display: flex;
+        }
+
+        .${exports.classes.opposite} {
+            align-items: flex-end;
+            display: none;
+        }
+
+        &:not(:last-of-type) {
+            \.${exports.classes.dotArea}:after {
+                width: 1px;
+                height: calc(100% - 1.5em);
+                bottom: 0;
+                left: 4px;
+            }
+
+            .${exports.classes.content}, .${exports.classes.opposite} {
+                padding-bottom: ${spacing[6]}px;
+            }
+        }
+
+        &[data-orientation=horizontal] {
+            flex-direction: column;
+
+            .${exports.classes.dotArea} {
+                &:before {
+                    display: none;
+                }
+            }
+
+            &:not(:last-of-type) {
+                \.${exports.classes.dotArea}:after {
+                    width: calc(100% - 9px - 8px);
+                    height: 1px;
+                    bottom: 4px;
+                    left: auto;
+                    right: 4px;
+                }
+            }
+
+            .${exports.classes.content}, .${exports.classes.opposite} {
+                padding-bottom: 0;
+                padding-right: ${spacing[6]}px;
+            }
+        }
+    `, [colorValue]);
+}

package/dist/cjs/components/timeline/timelineItem.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { TimelineSharedProps } from './timeline';
+export interface TimelineItemProps extends Omit<TimelineSharedProps, 'content'> {
+    dot?: ReactNode;
+    content?: ReactNode;
+    /** 相对{@link content}，另外一侧的内容 */
+    oppositeContent?: ReactNode;
+    loading?: boolean;
+    /** @private 内部使用，用于alternate模式下判断标签位置 */
+    _index?: number;
+}
+export declare const TimelineItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TimelineItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/timeline/timelineItem.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const timeline_style_1 = require("./timeline.style");
+const timeline_1 = require("./timeline");
+exports.TimelineItem = (0, react_1.memo)((0, react_1.forwardRef)(({ dot, content, oppositeContent, loading, _index = 0, 
+// 共享属性，从TimelineSharedProps继承
+variant, labelPosition, color, ...props }, ref) => {
+    const context = (0, timeline_1.useTimelineContext)();
+    variant ??= context.variant ?? 'outlined';
+    labelPosition ??= context.labelPosition ?? 'end';
+    color ??= context.color ?? 'primary';
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, timeline_style_1.useTimelineItemStyle)({ color }), className: (0, utils_1.classnames)(timeline_style_1.classes.item, props.className), "data-variant": variant, "data-reverse": (labelPosition === 'alternate' && _index % 2 !== 0) ||
+            (labelPosition === 'alternate-reverse' && _index % 2 === 0), "data-orientation": context.orientation, children: [(0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.opposite, "data-show": !!oppositeContent, children: oppositeContent }), (0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.dotArea, children: (0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.dot }) }), (0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.content, children: content })] }));
+}));

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

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

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

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

package/dist/cjs/components/toggleButton/toggleButton.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement } from 'react';
+import { FlexProps } from '../flex';
+import { ButtonProps } from '../button';
+import { Id, Obj } from '../../../types';
+type ButtonItem = ButtonProps & Obj;
+export interface ToggleButtonBaseProps<I extends ButtonItem> extends Omit<FlexProps, 'defaultValue' | 'onChange'> {
+    variant?: 'filled' | 'outlined';
+    size?: ButtonProps['size'];
+    color?: ButtonProps['color'];
+    disabled?: boolean;
+    readOnly?: boolean;
+    items?: I[];
+    primaryKey?: keyof I;
+}
+export interface ToggleButtonSingleProps<I extends ButtonItem, V extends Id = Id> extends ToggleButtonBaseProps<I> {
+    multiple?: false;
+    defaultValue?: V;
+    value?: V;
+    onChange?(value: V): void;
+}
+export interface ToggleButtonMultipleProps<I extends ButtonItem, V extends Id = Id> extends ToggleButtonBaseProps<I> {
+    multiple: true;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?(value: V[]): void;
+}
+export type ToggleButtonProps<I extends ButtonItem, V extends Id = Id> = ToggleButtonSingleProps<I, V> | ToggleButtonMultipleProps<I, V>;
+export declare const ToggleButton: <I extends ButtonItem, V extends Id = Id>(props: ToggleButtonProps<I, V>) => ReactElement;
+export {};

package/dist/cjs/components/toggleButton/toggleButton.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const flex_1 = require("../flex");
+const utils_1 = require("../../utils");
+const toggleButton_style_1 = require("./toggleButton.style");
+const button_1 = require("../button");
+exports.ToggleButton = (0, react_1.forwardRef)(({ variant = 'filled', size, color = 'primary', disabled, readOnly, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }, ref) => {
+    const [innerValue, toggleSelected] = (0, utils_1.useControlledSelect)({
+        disabled: disabled ?? readOnly,
+        multiple,
+        defaultValue,
+        value,
+        onChange
+    });
+    const renderItems = () => {
+        const makeProps = (p, value, selected) => ({
+            size: p.size ?? size,
+            readOnly: p.readOnly ?? readOnly,
+            disabled: p.disabled ?? disabled,
+            variant: selected ? variant : 'outlined',
+            color: selected ? color : 'text',
+            onClick(e) {
+                p.onClick?.(e);
+                toggleSelected(value);
+            },
+            style: {
+                borderLeftColor: selected ? 'inherit' : void 0,
+                ...p.style
+            }
+        });
+        if (items) {
+            return items.map((p, i) => {
+                const itemValue = p[primaryKey];
+                return ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: p.ref, shape: p.shape, prefix: p.prefix, suffix: p.suffix, loading: p.loading, label: p.label, ...makeProps(p, itemValue, (0, utils_1.isSelected)(itemValue, innerValue.current)), children: p.children }, itemValue ?? i));
+            });
+        }
+        return react_1.Children.map(props.children, c => {
+            if ((0, react_1.isValidElement)(c)) {
+                const { value } = c.props;
+                return (0, react_1.cloneElement)(c, makeProps(c.props, value, (0, utils_1.isSelected)(value, innerValue.current)));
+            }
+            return c;
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { compact: true, ...props, ref: ref, className: (0, utils_1.classnames)(toggleButton_style_1.classes.root, props.className), children: renderItems() }));
+});

package/dist/cjs/components/toggleButton/toggleButton.style.d.ts

@@ -0,0 +1,3 @@
+export declare const classes: {
+    root: string;
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('buttonGroup');

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

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

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

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

package/dist/cjs/components/tooltip/tooltip.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { PopperProps } from '../popper';
+import { ColorPropsValue } from '../../../types';
+export interface TooltipProps extends Omit<PopperProps, 'title' | 'content'> {
+    title?: ReactNode;
+    color?: ColorPropsValue;
+    showArrow?: boolean;
+}
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/cjs/components/tooltip/tooltip.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const popper_1 = require("../popper");
+const tooltip_style_1 = require("./tooltip.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+exports.Tooltip = (0, react_1.forwardRef)(({ title, color, showArrow = true, offset, ...props }, ref) => {
+    const { spacing } = (0, app_1.useTheme)();
+    offset ??= showArrow ? spacing[3] : spacing[2];
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, ref: ref, css: (0, tooltip_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(tooltip_style_1.classes.root, props.className), offset: offset, content: (0, jsx_runtime_1.jsx)("div", { className: tooltip_style_1.classes.title, "data-show-arrow": showArrow, children: title }) }));
+});

package/dist/cjs/components/tooltip/tooltip.style.d.ts

@@ -0,0 +1,7 @@
+import { TooltipProps } from './tooltip';
+export declare const classes: {
+    title: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: Pick<TooltipProps, 'color'>): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const popper_style_1 = require("../popper/popper.style");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('tooltip', [
+    'title'
+]);
+function useStyle({ color }) {
+    let colorValue = color ? (0, utils_1.useColor)(color) : '#000000';
+    colorValue = (0, color_1.default)(colorValue).alpha(.7).string();
+    return (0, utils_1.useCss)(({ spacing, borderRadius, boxShadow }) => (0, react_1.css) `
+        z-index: ${app_1.zIndex.tooltip};
+
+        .${exports.classes.title} {
+            font-size: ${13 / 14}em;
+            padding: ${spacing[2]}px ${spacing[3]}px;
+            background-color: ${colorValue};
+            color: #ffffff;
+            border-radius: ${borderRadius}px;
+            box-shadow: ${boxShadow[0]};
+        }
+
+        ${(0, popper_style_1.popperArrowStyle)(colorValue)}
+    `, [colorValue]);
+}

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

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

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

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

package/dist/cjs/components/touchRipple/touchRipple.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { ColorPropsValue, DIVProps } from '../../../types';
+export interface TouchRippleProps extends Omit<DIVProps, 'children'> {
+    color?: ColorPropsValue;
+    rippleProps?: DIVProps;
+    children?: ReactElement;
+}
+export declare const TouchRipple: {
+    (props: TouchRippleProps): ReactElement;
+    Ripple: typeof Ripple;
+};
+interface RippleProps extends DIVProps {
+    color?: ColorPropsValue;
+}
+export declare const Ripple: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<RippleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/cjs/components/touchRipple/touchRipple.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ripple = exports.TouchRipple = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const touchRipple_style_1 = require("./touchRipple.style");
+const utils_1 = require("../../utils");
+exports.TouchRipple = (0, react_1.forwardRef)(({ color, rippleProps, children, ...props }, ref) => {
+    const renderedRipple = ((0, jsx_runtime_1.jsx)(exports.Ripple, { ...rippleProps, 
+        // 有children属性时，ref传递给children
+        ref: children ? ref : void 0 }));
+    return children
+        // 有children属性时，props传递给children，再追加Ripple组件
+        ? (0, react_1.cloneElement)(children, { ...props, ref }, children.props.children, renderedRipple)
+        : renderedRipple;
+});
+exports.Ripple = (0, react_1.memo)((0, react_1.forwardRef)(({ color = 'primary', ...props }, ref) => {
+    const [ripples, setRipples] = (0, react_1.useState)([]);
+    const rippleRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const wrapper = rippleRef.current?.parentElement;
+        if (wrapper) {
+            const { position } = getComputedStyle(wrapper);
+            if (position === 'static') {
+                wrapper.style.position = 'relative';
+            }
+            const pointerDown = ({ offsetX, offsetY }) => {
+                setRipples(o => [
+                    ...o,
+                    {
+                        key: (0, utils_1.getEazyID)('touch-ripple'),
+                        leaving: false,
+                        position: [offsetX, offsetY]
+                    }
+                ]);
+                wrapper.addEventListener('pointerup', leave);
+                wrapper.addEventListener('pointerleave', leave);
+            };
+            const leave = () => {
+                setRipples(o => {
+                    return o.map(v => ({ ...v, leaving: true }));
+                });
+                removeLeaveListener();
+            };
+            wrapper.addEventListener('pointerdown', pointerDown);
+            const removeLeaveListener = () => {
+                wrapper.removeEventListener('pointerup', leave);
+                wrapper.removeEventListener('pointerleave', leave);
+            };
+            return () => {
+                wrapper.removeEventListener('pointerdown', pointerDown);
+                removeLeaveListener();
+            };
+        }
+        return;
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(ref, rippleRef), css: (0, touchRipple_style_1.useStyle)({ color }), className: touchRipple_style_1.classes.root, children: ripples.map(({ key, leaving, position: [x, y] }) => (0, jsx_runtime_1.jsx)("div", { className: touchRipple_style_1.classes.ripple, style: { left: x, top: y }, "data-leaving": leaving, onTransitionEnd: () => setRipples(o => o.filter(v => v.key !== key)) }, key)) }));
+}));

package/dist/cjs/components/touchRipple/touchRipple.style.d.ts

@@ -0,0 +1,9 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    ripple: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('touch-ripple', [
+    'ripple'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ easing }) => {
+        const bg = (0, color_1.default)(colorValue).alpha(.1).string();
+        return (0, react_1.css) `
+            overflow: hidden;
+            pointer-events: none;
+            border-radius: inherit;
+            position: absolute;
+            inset: 0;
+            z-index: 0;
+
+            .${exports.classes.ripple} {
+                min-width: 100%;
+                min-height: 100%;
+                aspect-ratio: 1;
+                border-radius: 50%;
+                position: absolute;
+                translate: -50% -50%;
+                background-color: ${bg};
+                animation: ${showRippleAnim} .4s ${easing.easeIn} forwards;
+                transition: opacity .4s ${easing.easeIn};
+
+                &[data-leaving=true] {
+                    opacity: 0;
+                }
+            }
+        `;
+    }, [colorValue]);
+}
+const showRippleAnim = (0, react_1.keyframes) `
+    0% {
+        scale: 0;
+    }
+
+    100% {
+        scale: ${Math.sqrt(8)};
+    }
+`;

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

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

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

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