@canlooks/can-ui 0.0.21 → 0.0.23

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
-import { zIndex } from '../app';
 import { popperArrowStyle } from '../popper/popper.style';
+import { zIndex } from '../theme';
 export const classes = defineClasses('bubble-confirm', [
     'bubble',
     'icon',
@@ -18,13 +18,13 @@ export const style = defineCss(({ boxShadow, borderRadius, background, spacing,
     .${classes.bubble} {
         border-radius: ${borderRadius}px;
         box-shadow: ${boxShadow[0]};
-        background-color: ${background.card};
+        background-color: ${background.content};
         display: flex;
         gap: ${spacing[4]}px;
         padding: ${spacing[5]}px;
 
         .${classes.icon} {
-            color: ${colors.warning};
+            color: ${colors.warning.main};
             font-size: 1.2em;
         }
 
@@ -54,5 +54,5 @@ export const style = defineCss(({ boxShadow, borderRadius, background, spacing,
         }
     }
 
-    ${popperArrowStyle(background.card)}
+    ${popperArrowStyle(background.content)}
 `);

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

@@ -1,28 +1,26 @@
 import React, { ReactNode, Ref } from 'react';
-import { ColorPropsValue, Size } from '../../../types';
-export interface ButtonProps extends Omit<JSX.IntrinsicElements['button'], 'ref' | 'prefix'> {
+import { ColorPropsValue, Size } from '../../types';
+export interface ButtonProps extends Omit<React.JSX.IntrinsicElements['button'], 'ref' | 'prefix'> {
     ref?: Ref<HTMLButtonElement>;
     color?: ColorPropsValue;
-    /** @default "square" */
+    /** 默认为`"square"` */
     shape?: 'square' | 'circular' | 'rounded';
     size?: Size;
-    /** @default "filled" */
-    variant?: 'filled' | 'outlined' | 'dashed' | 'ghost' | 'text' | 'plain';
-    /** @default "horizontal" */
+    /** 默认为`"filled"` */
+    variant?: 'flatted' | 'filled' | 'outlined' | 'dashed' | 'ghost' | 'text' | 'plain';
+    /** 默认为`"horizontal"` */
     orientation?: 'horizontal' | 'vertical';
     prefix?: ReactNode;
     suffix?: ReactNode;
     loading?: boolean;
     readOnly?: boolean;
     /**
-     * prefix字段的别名
-     * @alias {@link prefix}
+     * @alias {@link ButtonProps.prefix}
      */
     icon?: ReactNode;
     /**
-     * children字段的别名
-     * @alias {@link children}
+     * @alias {@link ButtonProps.children}
      */
     label?: ReactNode;
 }
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function Button({ color, shape, size, variant, orientation, prefix, suffix, loading, readOnly, icon, label, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { useTouchRipple } from '../../utils';
 import { classnames } from '../../utils';
-import { LoadingIndicator } from '../loadingIndicator/loadingIndicator';
+import { LoadingIndicator } from '../loadingIndicator';
 import { classes, useStyle } from './button.style';
 import { Collapse } from '../transitionBase';
-export const Button = forwardRef(({ color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }, ref) => {
+export function 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);
@@ -15,7 +14,7 @@ export const Button = forwardRef(({ color = 'primary', shape = 'square', size, v
         if (!props.disabled
             && !loading
             && !readOnly
-            && { filled: true, outlined: true, dashed: true }[variant]) {
+            && { flatted: true, filled: true, outlined: true, dashed: true }[variant]) {
             showRipple(e.currentTarget);
         }
     };
@@ -24,11 +23,11 @@ export const Button = forwardRef(({ color = 'primary', shape = 'square', size, v
     };
     const actualPrefix = prefix ?? icon;
     const actualChildren = label ?? props.children;
-    return (_jsxs("button", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
+    return (_jsxs("button", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
                 ? actualPrefix
                     ? _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color })
                     : _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color }) })
                 : actualPrefix, !!actualChildren &&
                 _jsx("div", { className: classes.content, children: actualChildren }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
-});
+}

package/dist/esm/components/button/button.style.b.d.ts

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

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

@@ -0,0 +1,280 @@
+import { css } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('button', [
+    'prefix',
+    'suffix',
+    'content'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ borderRadius, easing, text, gray }) => {
+        const c = Color(colorValue);
+        const lighter = c.lighten(.1).hex();
+        const lightest = c.lighten(.2).hex();
+        const outlineColor = c.alpha(.4).string();
+        const darkerC = c.darken(.1);
+        const darker = darkerC.hex();
+        return css `
+            line-height: inherit;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            vertical-align: top;
+            font-size: 1em;
+            user-select: none;
+            appearance: none;
+            -webkit-tap-highlight-color: transparent;
+            position: relative;
+            border: none;
+            background-color: transparent;
+            color: ${colorValue};
+            border-radius: ${borderRadius}px;
+            outline-offset: 1px;
+            outline: 0 solid ${outlineColor};
+            transition-property: outline-width, filter, border-color, background-color, color;
+            transition-duration: .2s;
+            transition-timing-function: ${easing.easeOut};
+
+            &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                cursor: pointer;
+            }
+
+            &:focus-visible {
+                transition-timing-function: ${easing.swing}, ${easing.easeOut};
+                outline-width: 3px;
+            }
+
+            &:active {
+                transition: all 0s;
+            }
+
+            &[data-variant=filled], &[data-variant=text], &[data-variant=ghost] {
+                padding: 6px 16px;
+
+                &[data-size=small] {
+                    padding: 2px 8px;
+                }
+
+                &[data-size=large] {
+                    padding: 10px 20px;
+                }
+            }
+
+            &[data-variant=outlined], &[data-variant=dashed] {
+                padding: 5px 15px;
+                
+                &[data-size=small] {
+                    padding: 1px 7px;
+                }
+                
+                &[data-size=large] {
+                    padding: 9px 19px;
+                }
+            }
+
+            &[data-orientation=vertical] {
+                flex-direction: column;
+                padding-top: 9px;
+                padding-bottom: 9px;
+            }
+            
+            &[data-variant=filled] {
+                color: #ffffff;
+                background-image: linear-gradient(0deg, ${lighter}, ${darker});
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        filter: brightness(1.2);
+                    }
+
+                    &:active {
+                        background-image: linear-gradient(0deg, ${darker}, ${lighter});
+                        filter: brightness(1);
+                    }
+                }
+            }
+
+            &[data-variant=outlined], &[data-variant=dashed] {
+                border: 1px solid ${colorValue};
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        border-color: ${lightest};
+                        color: ${lightest};
+                    }
+
+                    &:active {
+                        border-color: ${darker};
+                        color: ${darker};
+                    }
+                }
+            }
+
+            &[data-variant=dashed] {
+                border-style: dashed;
+            }
+
+            &[data-variant=ghost] {
+                background-color: ${c.alpha(.05).rgb().string()};
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        background-color: ${c.alpha(.1).rgb().string()};
+                    }
+
+                    &:active {
+                        background-color: ${c.alpha(.15).rgb().string()};
+                    }
+                }
+            }
+
+            &[data-variant=text] {
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        background-color: ${c.alpha(.05).rgb().string()};
+                    }
+
+                    &:active {
+                        background-color: ${darkerC.alpha(.1).rgb().string()};
+                    }
+                }
+            }
+
+            &[data-variant=plain] {
+                padding: 0;
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        color: ${lightest};
+                    }
+
+                    &:active {
+                        color: ${darker};
+                    }
+                }
+            }
+
+            &[data-loading=true] {
+                transition: all 0s;
+
+                &[data-variant=filled] {
+                    background-image: none;
+                    background-color: ${lightest};
+                }
+
+                &[data-variant=outlined], &[data-variant=dashed] {
+                    color: ${lightest};
+                    border-color: ${lightest};
+                }
+
+                &[data-variant=text], &[data-variant=plain] {
+                    color: ${lightest};
+                }
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                color: ${text.disabled};
+                border-color: ${text.disabled};
+
+                &:not([data-variant=text]):not([data-variant=plain]) {
+                    background-image: none;
+                    background-color: ${gray(.1)};
+                 }
+            }
+
+            &[data-shape=rounded] {
+                border-radius: 1000em;
+            }
+
+            &[data-shape=circular] {
+                border-radius: 50%;
+                padding: 0;
+                width: 32px;
+                height: 32px;
+
+                &[data-size=small] {
+                    width: 24px;
+                    height: 24px;
+                }
+
+                &[data-size=large] {
+                    width: 40px;
+                    height: 40px;
+                }
+            }
+
+            &[data-compact=row] {
+                &[data-variant=filled]:not(:disabled) {
+                    background-image: linear-gradient(180deg, ${lighter}, ${darker});
+                    
+                    &:before, &:after {
+                        content: '';
+                        width: 1px;
+                        height: 100%;
+                        position: absolute;
+                        top: 0;
+                        display: none;
+                    }
+
+                    &:before {
+                        background-color: ${lighter};
+                        left: 0;
+                    }
+
+                    &:after {
+                        background-color: ${colorValue};
+                        right: 0;
+                    }
+                }
+
+                &:not([data-last=true]) {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                    
+                    &:after {
+                        display: block;
+                    }
+                }
+        
+                &:not([data-first=true]) {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+
+                    &:before {
+                        display: block;
+                    }
+
+                    &[data-variant=outlined] {
+                        border-left-color: transparent;
+                    }
+                }
+            }
+    
+            &[data-compact=column] {
+                &[data-variant=filled] {
+                    background-image: linear-gradient(90deg, ${lighter}, ${darker});
+                    border-top-color: ${lighter};
+                }
+
+                &:not([data-last=true]) {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                    border-bottom-width: 1px;
+                }
+        
+                &:not([data-first=true]) {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                    border-top-width: 1px;
+                    
+                    &[data-variant=outlined] {
+                        margin-top: -1px;
+                    }
+                }
+            }
+        `;
+    }, [colorValue]);
+}

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

@@ -1,4 +1,4 @@
-import { ColorPropsValue } from '../../../types';
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     content: string;
     prefix: string;
@@ -8,4 +8,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/react").SerializedStyles[];