@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,172 @@
+import { css, keyframes } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('checkbox-base', [
+    'checkbox',
+    'radio',
+    'radioChecked',
+    'icon',
+    'indeterminate',
+    'input',
+    'label'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ mode, easing, gray, text }) => {
+        const lighter = Color(colorValue).lighten(.2).hex();
+        return css `
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            position: relative;
+    
+            .${classes.checkbox} {
+                min-width: 16px;
+                min-height: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 1px solid ${gray(.7)};
+                border-radius: 4px;
+                transition: border-color .2s ${easing.easeOut};
+                position: relative;
+    
+                .${classes.icon} {
+                    font-size: .9em;
+                    color: #ffffff;
+                    animation: ${iconAnim} .2s ${easing.swing};
+                    position: absolute;
+                }
+    
+                .${classes.indeterminate} {
+                    width: 60%;
+                    height: 4px;
+                    background-color: ${colorValue};
+                    animation: ${iconAnim} .2s ${easing.swing};
+                    position: absolute;
+                }
+    
+                > * {
+                    pointer-events: none;
+                }
+            }
+    
+            .${classes.radio} {
+                border-radius: 50%;
+    
+                .${classes.radioChecked} {
+                    border-radius: inherit;
+                    background-color: ${colorValue};
+                    animation: ${iconAnim} .2s ${easing.swing};
+                    position: absolute;
+                    inset: 3px;
+                }
+            }
+    
+            .${classes.label} {
+                transition: color .2s ${easing.easeOut};
+            }
+    
+            &[data-size=small] {
+                .${classes.checkbox} {
+                    min-width: 13px;
+                    min-height: 13px;
+    
+                    .${classes.icon} {
+                        font-size: .8em;
+                    }
+                }
+            }
+    
+            &[data-size=large] {
+                .${classes.checkbox} {
+                    min-width: 20px;
+                    min-height: 20px;
+    
+                    .${classes.icon} {
+                        font-size: 1em;
+                    }
+                }
+            }
+    
+            &:not([data-disabled=true]):hover {
+                .${classes.checkbox} {
+                    border-color: ${gray(mode === 'light' ? .4 : .6)};
+                }
+    
+                .${classes.label} {
+                    opacity: ${mode === 'light' ? .7 : .8};
+                }
+            }
+    
+            &:not([data-disabled=true]):active {
+                .${classes.checkbox} {
+                    transition: border-color 0s;
+                    border-color: ${gray(.9)};
+                }
+    
+                .${classes.label} {
+                    transition: color 0s;
+                    opacity: 1;
+                }
+            }
+    
+            &[data-checked=true] {
+                .${classes.checkbox} {
+                    transition: border-color 0s;
+                }
+    
+                &:not([data-disabled=true]) {
+                    .${classes.checkbox} {
+                        background-color: ${colorValue};
+                        border-color: ${colorValue};
+                    }
+
+                    .${classes.radio} {
+                        background-color: transparent;
+                    }
+                }
+            }
+    
+            &[data-disabled=true] {
+                cursor: not-allowed;
+                
+                .${classes.checkbox} {
+                    background-color: ${gray(.1)};
+                }
+    
+                .${classes.icon} {
+                    color: ${text.disabled};
+                }
+    
+                .${classes.indeterminate},
+                .${classes.radioChecked} {
+                    background-color: ${text.disabled};
+                }
+            }
+
+            .${classes.input} {
+                position: absolute;
+                opacity: 0;
+                pointer-events: none;
+            }
+    
+            &:has(\.${classes.input}:focus) {
+                .${classes.checkbox} {
+                    outline: 3px solid ${lighter};
+                    outline-offset: 1px;;
+                }
+            }
+        `;
+    }, [colorValue]);
+}
+const iconAnim = keyframes `
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+`;

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { FlexProps } from '../flex';
+import { CheckboxBaseProps } from '../checkboxBase';
+import { ColorPropsValue, Id, Obj, Size } from '../../../types';
+export interface ItemType extends Omit<CheckboxBaseProps, '_type'>, Obj {
+}
+export interface CheckboxBaseGroupCommonProps<I extends ItemType> extends Omit<FlexProps, 'defaultValue' | 'onChange'> {
+    size?: CheckboxBaseProps['size'];
+    color?: CheckboxBaseProps['color'];
+    items?: I[];
+    primaryKey?: keyof I;
+}
+export interface CheckboxBaseGroupSingleProps<I extends ItemType, V extends Id = Id> extends CheckboxBaseGroupCommonProps<I> {
+    multiple?: false;
+    defaultValue?: V;
+    value?: V;
+    onChange?(value: V): void;
+}
+export interface CheckboxBaseGroupMultipleProps<I extends ItemType, V extends Id = Id> extends CheckboxBaseGroupCommonProps<I> {
+    multiple: true;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?(value: V[]): void;
+}
+export type CheckboxBaseGroupProps<I extends ItemType, V extends Id = Id> = CheckboxBaseGroupSingleProps<I, V> | CheckboxBaseGroupMultipleProps<I, V>;
+export declare function useCheckboxBaseGroupContext(): {
+    size?: Size;
+    color?: ColorPropsValue;
+    checked?: boolean;
+    setChecked?(checked: boolean): void;
+};
+export declare const CheckboxBaseGroup: <I extends ItemType, V extends Id = Id>(props: CheckboxBaseGroupProps<I, V>) => ReactElement;

package/dist/esm/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext } from 'react';
+import { Flex } from '../flex';
+import { classnames, isSelected, useControlledSelect } from '../../utils';
+import { classes } from './checkboxBaseGroup.style';
+import { Checkbox } from '../checkbox/checkbox';
+import { Radio } from '../radio';
+import { useTheme } from '../app';
+const checkboxBaseGroupContext = createContext({});
+export function useCheckboxBaseGroupContext() {
+    return useContext(checkboxBaseGroupContext);
+}
+export const CheckboxBaseGroup = forwardRef(({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }, ref) => {
+    const { spacing } = useTheme();
+    const [innerValue, toggleSelected] = useControlledSelect({ multiple, defaultValue, value, onChange });
+    const renderItems = () => {
+        if (items) {
+            return items.map((p, i) => {
+                const Component = multiple ? Checkbox : Radio;
+                const itemValue = p[primaryKey];
+                return (_jsx(Component, { inputProps: p.inputProps, inputRef: p.inputRef, label: p.label, indeterminate: p.indeterminate, disabled: p.disabled, readOnly: p.readOnly, size: p.size ?? size, color: p.color ?? color, checked: isSelected(itemValue, innerValue.current), onChange: e => {
+                        p.onChange?.(e);
+                        toggleSelected(itemValue);
+                    } }, p.key ?? itemValue ?? i));
+            });
+        }
+        return Children.map(props.children, c => {
+            if (!isValidElement(c)) {
+                return c;
+            }
+            const itemValue = c.props.value;
+            return cloneElement(c, {
+                size: c.props.size ?? size,
+                color: c.props.color ?? color,
+                checked: isSelected(itemValue, innerValue.current),
+                onChange: e => {
+                    c.props.onChange?.(e);
+                    toggleSelected(itemValue);
+                }
+            });
+        });
+    };
+    return (_jsx(Flex, { gap: spacing[8], ...props, ref: ref, className: classnames(classes.root, props.className), children: renderItems() }));
+});

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

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

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

@@ -0,0 +1,2 @@
+import { defineClasses } from '../../utils';
+export const classes = defineClasses('checkbox-base-group');

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { DIVProps, DefineElement } from '../../../types';
+export interface ClickAwayProps extends DIVProps {
+    container?: DefineElement<Element | Window>;
+    /** 传入addEventListener的事件类型，@default 'click' */
+    eventType?: string;
+    onClickAway?(e: MouseEvent): void;
+    disabled?: boolean;
+    children?: ReactElement;
+    /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
+    targets?: () => Element | null | (Element | null)[];
+}
+export declare const ClickAway: import("react").ForwardRefExoticComponent<Omit<ClickAwayProps, "ref"> & import("react").RefAttributes<any>>;

package/dist/esm/components/clickAway/clickAway.js

@@ -0,0 +1,36 @@
+import { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
+import { cloneRef, isChildOf, toArray, useSync } from '../../utils';
+export const ClickAway = forwardRef(({ container = self, eventType = 'click', onClickAway, disabled, children, targets, ...props }, ref) => {
+    const syncOnClickAway = useSync(onClickAway);
+    const childRef = useRef(null);
+    const targetsArr = useRef([]);
+    useEffect(() => {
+        targetsArr.current = [childRef.current, ...toArray(targets?.()) || []];
+    });
+    useEffect(() => {
+        if (disabled) {
+            return;
+        }
+        const onClick = (e) => {
+            if (!syncOnClickAway.current) {
+                return;
+            }
+            if (targetsArr.current.every(t => !isChildOf(e.target, t))) {
+                syncOnClickAway.current(e);
+            }
+        };
+        const containerEl = typeof container === 'function' ? container() : container;
+        const standardEventType = eventType.toLowerCase().replace(/^on/, '');
+        containerEl.addEventListener(standardEventType, onClick);
+        return () => {
+            containerEl.removeEventListener(standardEventType, onClick);
+        };
+    }, [disabled]);
+    const clonedRef = useCallback(cloneRef(children?.ref, ref, childRef), [children?.ref, ref]);
+    return !disabled && isValidElement(children)
+        ? cloneElement(children, {
+            ...props,
+            ref: clonedRef
+        })
+        : children;
+});

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { ReactNode, Ref } from 'react';
+import { PopperProps, PopperRef } from '../popper';
+import { ColorPropsValue, DIVProps, Size } from '../../../types';
+import Color from 'color';
+export interface ColorPickerProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    popperProps?: PopperProps;
+    popperRef?: Ref<PopperRef>;
+    size?: Size;
+    shape?: 'square' | 'circular';
+    label?: ReactNode;
+    presets?: (ColorPropsValue | Color)[];
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    defaultValue?: Color;
+    value?: Color;
+    onChange?(color: Color): void;
+}
+export declare const ColorPicker: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useMemo } from 'react';
+import { Popper } from '../popper';
+import { InputBase } from '../inputBase';
+import { classes, colorPickerPopperStyle, style } from './colorPicker.style';
+import { classnames, cloneRef, colorTransfer, useControlled, useTouchRipple } from '../../utils';
+import { useTheme } from '../app';
+import { Palette } from '../palette';
+import Color from 'color';
+export const ColorPicker = memo(forwardRef(({ inputProps, inputRef, popperProps, popperRef, size, shape = 'square', label = '自定义', presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }, ref) => {
+    const theme = useTheme();
+    size ??= theme.size;
+    const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
+    const openChangeHandler = (open) => {
+        popperProps?.onOpenChange?.(open);
+        setInnerOpen(open);
+    };
+    const [innerValue, setInnerValue] = useControlled(defaultValue ?? Color(theme.colors.primary, 'hex'), value, onChange);
+    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
+                const colorInstance = Color(typeof color === 'string' ? colorTransfer(color, theme) : color);
+                return (_jsx(BlockItem, { selected: colorInstance.hex() === innerValue.current.hex(), color: Color(color), onClick: () => setInnerValue(Color(color, 'hex')) }, i));
+            }), _jsx(Popper, { css: colorPickerPopperStyle, open: innerOpen.current, trigger: ['click', 'enter'], placement: "bottomLeft", content: _jsx(Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, children: _jsx(InputBase, { className: classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => _jsxs(_Fragment, { children: [_jsx(BlockItem, { color: innerValue.current }), !!label &&
+                                _jsx("div", { className: classes.label, children: label }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" })] }) }) })] }));
+}));
+function BlockItem({ color, onClick, selected }) {
+    const light = useMemo(() => color.luminosity() >= .8, [color]);
+    const colorObject = useMemo(() => ({
+        hex: color.hex(),
+        alpha: color.alpha()
+    }), [color]);
+    const showRipple = useTouchRipple(light ? 'disabled' : colorObject.hex);
+    return (_jsx("div", { className: classes.block, "data-selected": selected, "data-light": light, onClick: e => {
+            onClick?.();
+            showRipple(e.currentTarget);
+        }, children: _jsx("div", { className: classes.blockColor, style: {
+                backgroundColor: colorObject.hex,
+                opacity: colorObject.alpha
+            } }) }));
+}

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

@@ -0,0 +1,10 @@
+export declare const classes: {
+    label: string;
+    block: string;
+    inputBase: string;
+    blockColor: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const colorPickerPopperStyle: () => import("@emotion/react").SerializedStyles[];

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

@@ -0,0 +1,100 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as inputBaseClasses } from '../inputBase/inputBase.style';
+import { getTranparentBackground } from '../palette/palette.style';
+import { popperStyleCallback } from '../popper/popper.style';
+export const classes = defineClasses('color-picker', [
+    'inputBase',
+    'block',
+    'blockColor',
+    'label',
+]);
+export const style = defineCss(({ spacing, borderRadius, divider, background }) => css `
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    user-select: none;
+
+    .${classes.inputBase} {
+        cursor: pointer;
+        padding: ${spacing[1]}px !important;
+    
+        .${inputBaseClasses.content} {
+            display: flex;
+            align-items: center;
+        }
+    
+        .${classes.label} {
+            line-height: 1;
+            margin: 0 ${spacing[2]}px;
+        }
+    }
+
+    .${classes.block} {
+        width: 24px;
+        height: 24px;
+        border-radius: ${borderRadius}px;
+        overflow: hidden;
+        cursor: pointer;
+        position: relative;
+        ${getTranparentBackground(background.body, background.card)}
+        background-size: 50% 50%;
+
+        .${classes.blockColor} {
+            position: absolute;
+            inset: 0;
+        }
+
+        &[data-selected=true] {
+            &:after {
+                content: '';
+                position: absolute;
+                inset: 3px;
+                border-radius: inherit;
+                border: 2px solid #ffffff;
+            }
+        }
+
+        &[data-light=true] {
+            border: 1px solid ${divider};
+
+            &:after {
+                border-color: #aaa;
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${classes.block} {
+            width: 16px;
+            height: 16px;
+
+            &:after {
+                inset: 2px;
+            }
+        }
+    }
+    
+    &[data-size=large] {
+        .${classes.inputBase} {
+            padding: ${spacing[2]}px !important;
+        }
+    
+        .${classes.block} {
+            width: 26px;
+            height: 26px;
+        }
+    }
+
+    &[data-shape=circular] {
+        .${classes.block} {
+            border-radius: 50%;
+        }
+    }
+`);
+export const colorPickerPopperStyle = defineCss(theme => [
+    popperStyleCallback(theme),
+    css `
+        padding: ${theme.spacing[3]}px;
+    `
+]);

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { BubbleProps } from '../bubble';
+import { ItemPropType } from '../menu';
+export interface ContextMenuProps extends Omit<BubbleProps, 'onClick'> {
+    items?: ItemPropType[];
+    onClick?(item: ItemPropType): void;
+}
+export declare const ContextMenu: import("react").ForwardRefExoticComponent<Omit<ContextMenuProps, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/esm/components/contextMenu/contextMenu.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Bubble } from '../bubble';
+import { MenuItem } from '../menuItem';
+export const ContextMenu = forwardRef(({ items, onClick, ...props }, ref) => {
+    const renderItems = (items) => {
+        return items?.map((p, i) => _jsx(MenuItem, { ...p, onClick: e => {
+                p.onClick?.(e);
+                onClick?.(p);
+            }, children: renderItems(p.children) }, p.value ?? i));
+    };
+    return (_jsx(Bubble, { placement: "bottomRight", ...props, ref: ref, trigger: "contextMenu", showArrow: false, content: props.content ?? renderItems(items) }));
+});

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { Size } from '../../../types';
+import { ButtonProps } from '../button';
+import { InputProps } from '../input';
+import { FlexProps } from '../flex';
+export interface CounterProps extends Omit<FlexProps, 'defaultValue' | 'onChange'> {
+    size?: Size;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    defaultValue?: number;
+    value?: number;
+    onChange?(value: number): void;
+    decreaseProps?: ButtonProps;
+    increaseProps?: ButtonProps;
+    inputProps?: InputProps;
+}
+export declare const Counter: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<CounterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/counter/counter.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classes, style } from './counter.style';
+import { classnames, useControlled } from '../../utils';
+import { Button } from '../button';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import { Input } from '../input';
+import { Flex } from '../flex';
+export const Counter = memo(forwardRef(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }, ref) => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
+    const commonButtonProps = {
+        size,
+        variant: 'outlined',
+        color: 'text'
+    };
+    const clickHandler = (dir) => {
+        setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
+    };
+    return (_jsxs(Flex, { compact: true, ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: [_jsx(Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
+                    decreaseProps?.onClick?.(e);
+                    clickHandler(-1);
+                }, children: _jsx(MinusOutlined, {}) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: classnames(classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
+                    inputProps?.onChange?.(e);
+                    setInnerValue(+e.target.value);
+                } }), _jsx(Button, { disabled: innerValue.current >= max, ...commonButtonProps, ...increaseProps, onClick: e => {
+                    increaseProps?.onClick?.(e);
+                    clickHandler(1);
+                }, children: _jsx(PlusOutlined, {}) })] }));
+}));

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

@@ -0,0 +1,6 @@
+export declare const classes: {
+    input: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as buttonClasses } from '../button/button.style';
+import { classes as inputClasses } from '../input/input.style';
+export const classes = defineClasses('counter', [
+    'input'
+]);
+export const style = defineCss(({ divider }) => css `
+    display: inline-flex;
+
+    .${buttonClasses.root} {
+        z-index: 1;
+
+        &[data-variant=outlined], &[data-variant=dashed] {
+            border-color: ${divider};
+        }
+    }
+
+    .${classes.input} {
+        input {
+            text-align: center;
+            
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                display: none;
+            }
+        }
+
+        .${inputClasses.adaptable} {
+            display: flex;
+            min-width: 60px;
+        }
+    }
+`);

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

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

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

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