@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,392 @@
+import { css } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+export const classes = defineClasses('tabs', [
+    'scroll',
+    'scrollWrap',
+    'start',
+    'end',
+    'ellipsis',
+    'prefix',
+    'suffix',
+    'tab',
+    'label',
+    'tabPrefix',
+    'tabSuffix',
+    'indicator'
+]);
+export const indicatorWidth = 2;
+export function useStyle({ color, variant }) {
+    const colorValue = useColor(color);
+    return useCss(({ divider, text, easing, background, spacing, borderRadius, gray, colors }) => {
+        const commonStyle = css `
+            display: flex;
+            position: relative;
+            overflow: hidden;
+            
+            .${classes.scroll} {
+                flex: 1;
+                display: flex;
+                overflow: auto;
+                scrollbar-width: none;
+                position: relative;
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+    
+                .${classes.scrollWrap} {
+                    flex: 1;
+                    display: flex;
+                    position: relative;
+                }
+            }
+
+            .${classes.start}, .${classes.end} {
+                display: flex;
+                z-index: 2;
+                border-bottom: 1px solid ${divider};
+                transition: box-shadow .2s ${easing.easeOut};
+
+                &[data-show=true] {
+                    box-shadow: 0 0 12px rgba(0, 0, 0, .2);
+                }
+            }
+
+            .${classes.prefix}, .${classes.suffix} {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: ${background.card};
+            }
+
+            .${classes.ellipsis} {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                margin-right: ${spacing[6]}px;
+                cursor: pointer;
+
+                &:hover {
+                    color: ${colors.primary};
+                }
+            }
+
+            &[data-position=top],
+            &[data-position=bottom] {
+                .${classes.prefix}, .${classes.suffix} {
+                    padding: 0 16px;
+                }
+
+                &[data-size=small] {
+                    .${classes.prefix}, .${classes.suffix} {
+                        padding: 0 14px;
+                    }
+                }
+
+                &[data-size=large] {
+                    .${classes.prefix}, .${classes.suffix} {
+                        padding: 0 18px;
+                    }
+                }
+            }
+
+            &[data-position=left],
+            &[data-position=right] {
+                .${classes.prefix}, .${classes.suffix} {
+                    padding: 12px 0;
+                }
+
+                &[data-size=small] {
+                    .${classes.prefix}, .${classes.suffix} {
+                        padding: 10px 0;
+                    }
+                }
+
+                &[data-size=large] {
+                    .${classes.prefix}, .${classes.suffix} {
+                        padding: 14px 0;
+                    }
+                }
+            }
+
+            &:after {
+                content: '';
+                background-color: ${divider};
+                position: absolute;
+            }
+
+            .${classes.tab} {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-shrink: 0;
+                gap: 6px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                z-index: 1;
+
+                &[data-orientation=vertical] {
+                    flex-direction: column;
+                }
+
+                &[data-disabled=true] {
+                    cursor: not-allowed;
+                    color: ${text.disabled};
+                }
+            }
+
+            &[data-full-width=true] {
+                .${classes.tab} {
+                    flex: 1;
+                }
+            }
+
+            &[data-position=top],
+            &[data-position=bottom] {
+                &:after {
+                    height: 1px;
+                }
+
+                &[data-position=top] {
+                    &:after {
+                        inset: auto 0 0 0;
+                    }
+                }
+
+                &[data-position=bottom] {
+                    &:after {
+                        inset: 0 0 auto 0;
+                    }
+                }
+            }
+
+            &[data-position=left],
+            &[data-position=right] {
+                &, .${classes.scrollWrap} {
+                    flex-direction: column;
+                }
+
+                &:after {
+                    width: 1px;
+                }
+
+                &[data-position=left] {
+                    &:after {
+                        inset: 0 0 0 auto;
+                    }
+                }
+
+                &[data-position=right] {
+                    &:after {
+                        inset: 0 auto 0 0;
+                    }
+                }
+            }
+
+            &:not([data-read-only=true]):not([data-disabled=true]) {
+                \.${classes.tab}:not([data-disabled=true]) {
+                    cursor: pointer;
+                    
+                    &:not([data-active=true]):hover {
+                        color: ${gray(.65)};
+                    }
+                
+                    &:not([data-active=true]):active {
+                        transition: color 0s;
+                        color: ${text.primary};
+                    }
+                }
+            }
+    
+            &[data-disabled=true] {
+                .${classes.tab} {
+                    cursor: not-allowed;
+                }
+            }
+        `;
+        return variant === 'line'
+            ? css `
+                ${commonStyle}
+
+                .${classes.scrollWrap} {
+                    gap: 0 ${spacing[10]}px;
+                }
+
+                .${classes.tab} {
+                    transition: color .2s ${easing.easeOut};
+                }
+
+                &[data-position=top],
+                &[data-position=bottom] {
+                    .${classes.tab} {
+                        padding: 10px 0;
+                    }
+
+                    &[data-size=small] {
+                        .${classes.tab} {
+                            padding: 6px 0;
+                        }
+                    }
+            
+                    &[data-size=large] {
+                        .${classes.tab} {
+                            padding: 14px 0;
+                        }
+                    }
+                }
+
+                &[data-position=top] {
+                    .${classes.tab} {
+                        border-bottom: ${indicatorWidth}px solid transparent;
+                    }
+                }
+
+                &[data-position=bottom] {
+                    .${classes.tab} {
+                        border-top: ${indicatorWidth}px solid transparent;
+                    }
+                }
+
+                &[data-position=left],
+                &[data-position=right] {
+                    .${classes.tab} {
+                        padding: 10px 18px;
+                    }
+
+                    &[data-size=small] {
+                        .${classes.tab} {
+                            padding: 6px 18px;
+                        }
+                    }
+            
+                    &[data-size=large] {
+                        .${classes.tab} {
+                            padding: 14px 18px;
+                        }
+                    }
+                }
+
+                &[data-position=left] {
+                    .${classes.tab} {
+                        border-right: ${indicatorWidth}px solid transparent;
+                    }
+                }
+
+                &[data-position=right] {
+                    .${classes.tab} {
+                        border-left: ${indicatorWidth}px solid transparent;
+                    }
+                }
+
+                .${classes.indicator} {
+                    position: absolute;
+                    z-index: 1;
+                    transition: all .3s ${easing.bounce};
+                }
+
+                &:not([data-animating=true]) {
+                    .${classes.indicator} {
+                        display: none;
+                    }
+                }
+            `
+            // variant === 'card'
+            : css `
+                ${commonStyle}
+
+                .${classes.scrollWrap} {
+                    gap: ${spacing[1]}px;
+                }
+
+                .${classes.tab} {
+                    border: 1px solid ${gray(.1)};
+                    background-color: ${background.body};
+                    transition: color .2s ${easing.easeOut}, background-color .2s ${easing.easeOut};
+
+                    &[data-active=true] {
+                        background-color: ${background.card};
+                    }
+                }
+
+                &[data-position=top],
+                &[data-position=bottom] {
+                    .${classes.tab} {
+                        padding: 10px 15px;
+                    }
+
+                    &[data-size=small] {
+                        .${classes.tab} {
+                            padding: 6px 15px;
+                        }
+                    }
+            
+                    &[data-size=large] {
+                        .${classes.tab} {
+                            padding: 14px 15px;
+                        }
+                    }
+                }
+
+                &[data-position=top] {
+                    .${classes.tab} {
+                        border-radius: ${borderRadius}px ${borderRadius}px 0 0;
+
+                        &[data-active=true] {
+                            border-bottom-color: ${background.card};
+                        }
+                    }
+                }
+
+                &[data-position=bottom] {
+                    .${classes.tab} {
+                        border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
+
+                        &[data-active=true] {
+                            border-top-color: ${background.card};
+                        }
+                    }
+                }
+
+                &[data-position=left],
+                &[data-position=right] {
+                    .${classes.tab} {
+                        padding: 9px 18px;
+                    }
+
+                    &[data-size=small] {
+                        .${classes.tab} {
+                            padding: 5px 18px;
+                        }
+                    }
+            
+                    &[data-size=large] {
+                        .${classes.tab} {
+                            padding: 13px 18px;
+                        }
+                    }
+                }
+
+                &[data-position=left] {
+                    .${classes.tab} {
+                        border-radius: ${borderRadius}px 0 0 ${borderRadius}px;
+
+                        &[data-active=true] {
+                            border-right-color: ${background.card};
+                        }
+                    }
+                }
+
+                &[data-position=right] {
+                    .${classes.tab} {
+                        border-radius: 0 ${borderRadius}px ${borderRadius}px 0;
+
+                        &[data-active=true] {
+                            border-left-color: ${background.card};
+                        }
+                    }
+                }
+            `;
+    }, [colorValue, variant]);
+}

package/dist/esm/components/tabs/tabsEllipsis.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { TabType, TabsProps } from './tabs';
+interface TabsEllipsisProps<T extends TabType = TabType> extends Pick<TabsProps<T>, 'tabs' | 'children' | 'labelKey' | 'primaryKey' | 'value'> {
+    onToggleSelected(value: keyof T): void;
+}
+export declare const TabsEllipsis: <T extends TabType = TabType>(props: TabsEllipsisProps<T>) => ReactElement;
+export {};

package/dist/esm/components/tabs/tabsEllipsis.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { Children, isValidElement, memo, useState } from 'react';
+import { classes } from './tabs.style';
+import { EllipsisOutlined } from '@ant-design/icons';
+import { Popper } from '../popper';
+import { tabsEllipsisPopperStyle } from './tabsEllipsis.style';
+import { OptionsBase } from '../optionsBase';
+export const TabsEllipsis = memo(({ tabs, children, labelKey = 'label', primaryKey = 'value', value, onToggleSelected }) => {
+    const [open, setOpen] = useState(false);
+    const getOptions = () => {
+        return tabs?.map((p, key) => ({
+            key,
+            label: p[labelKey],
+            value: p[primaryKey],
+            prefix: p.prefix,
+            suffix: p.suffix,
+            color: p.color,
+            disabled: p.disabled
+        })) || Children.map(children, c => isValidElement(c) ? c.props : c) || void 0;
+    };
+    const _onToggleSelected = (value) => {
+        onToggleSelected(value);
+        setOpen(false);
+    };
+    return (_jsx(_Fragment, { children: _jsx(Popper, { css: tabsEllipsisPopperStyle, placement: "bottomRight", trigger: "hover", open: open, onOpenChange: setOpen, content: _jsx(OptionsBase, { options: getOptions(), selectedValue: value, onToggleSelected: _onToggleSelected }), children: _jsx("div", { className: classes.ellipsis, children: _jsx(EllipsisOutlined, {}) }) }) }));
+});

package/dist/esm/components/tabs/tabsEllipsis.style.d.ts

@@ -0,0 +1 @@
+export declare const tabsEllipsisPopperStyle: () => import("@emotion/react").SerializedStyles[];

package/dist/esm/components/tabs/tabsEllipsis.style.js

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+import { defineCss } from '../../utils';
+import { popperStyleCallback } from '../popper/popper.style';
+import { classes as optionsBaseClasses } from '../optionsBase/optionsBase.style';
+export const tabsEllipsisPopperStyle = defineCss(theme => [
+    popperStyleCallback(theme),
+    css `
+        .${optionsBaseClasses.root} .${optionsBaseClasses.optionsList} {
+            max-width: 360px;
+            overflow: hidden auto;
+        }
+    `
+]);

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Size } from '../../../types';
+export interface TagProps extends Omit<DIVProps, 'prefix'> {
+    variant?: 'filled' | 'outlined' | 'plain';
+    color?: ColorPropsValue;
+    shape?: 'square' | 'rounded';
+    size?: Size;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    clickable?: boolean;
+    closable?: boolean;
+    onClose?: React.MouseEventHandler<HTMLDivElement>;
+}
+export declare const Tag: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/tag/tag.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classes, useStyle } from './tag.style';
+import { classnames } from '../../utils';
+import { CloseOutlined } from '@ant-design/icons';
+export const Tag = memo(forwardRef(({ variant = 'outlined', color = 'text', shape = 'square', size = 'small', prefix, suffix, clickable, closable, onClose, ...props }, ref) => {
+    const closeHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose?.(e);
+    };
+    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
+                _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.content, children: props.children }), !!suffix &&
+                _jsx("div", { className: classes.suffix, children: suffix }), closable &&
+                _jsx("div", { className: classes.close, onClick: closeHandler, children: _jsx(CloseOutlined, {}) })] }));
+}));

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

@@ -0,0 +1,10 @@
+import { TagProps } from './tag';
+export declare const classes: {
+    content: string;
+    prefix: string;
+    close: string;
+    suffix: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: Required<Pick<TagProps, 'color'>>): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,119 @@
+import { css } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('tag', [
+    'content',
+    'prefix',
+    'suffix',
+    'close'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ spacing, borderRadius, divider, gray, easing }) => {
+        const c = Color(colorValue);
+        return css `
+            line-height: 1;
+            display: inline-flex;
+            align-items: center;
+    
+            .${classes.content} {
+                flex: 1;
+                min-width: 0;
+            }
+    
+            font-size: 1em;
+            gap: ${spacing[1]}px;
+            border-radius: ${borderRadius}px;
+    
+            &[data-size=small] {
+                font-size: ${13 / 14}em;
+                gap: 4px;
+                border-radius: 4px;
+                padding: ${spacing[1]}px ${spacing[2]}px;
+            }
+    
+            &[data-shape=rounded] {
+                border-radius: 1000em;
+                padding: ${spacing[1]}px 8px;
+            }
+    
+            &[data-size=medium] {
+                padding: ${spacing[2]}px ${spacing[3]}px;
+            }
+    
+            &[data-size=large] {
+                padding: 10px ${spacing[4]}px;
+            }
+    
+            border-width: 1px;
+    
+            &[data-variant=pure] {
+                border-width: 0;
+                padding: ${spacing[1] + 1}px ${spacing[2] + 1}px;
+            }
+    
+            border-style: solid;
+            border-color: ${color === 'text' ? divider : c.alpha(.5).string()};
+            
+    
+            &[data-variant=outlined],
+            &[data-variant=pure] {
+                color: ${colorValue};
+                background-color: ${c.alpha(.1).string()};
+            }
+    
+            &[data-variant=filled] {
+                color: #ffffff;
+                background-color: ${colorValue};
+            }
+    
+            &[data-size=small] {
+                .${classes.close} {
+                    font-size: ${13 / 14}em;
+                }
+            }
+    
+            &[data-variant=filled] {
+                .${classes.close} {
+                    color: ${gray(.1)};
+                    
+                    &:hover {
+                        color: ${gray(.2)};
+                    }
+                
+                    &:active {
+                        transition: color 0s;
+                        color: ${gray(.3)}
+                    }
+                }
+            }
+    
+            &[data-clickable=true] {
+                cursor: pointer;
+                transition: filter .2s ${easing.easeOut};
+    
+                &:hover {
+                    filter: brightness(1.2);
+                }
+    
+                &:active {
+                    transition: filter 0s;
+                    filter: brightness(.8);
+                }
+            }
+    
+            &[data-compact=row] {
+                &:not([data-last=true]) {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+    
+                &:not([data-first=true]) {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                    margin-left: -1px;
+                }
+            }
+        `;
+    }, [colorValue]);
+}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { Ref } from 'react';
+import { InputBaseProps } from '../inputBase';
+export interface TextareaProps extends Omit<InputBaseProps<'textarea'>, 'children' | 'prefix' | 'suffix'> {
+    textareaProps?: JSX.IntrinsicElements['textarea'];
+    textareaRef?: Ref<HTMLTextAreaElement>;
+    rows?: number;
+    fullWidth?: boolean;
+}
+export declare const Textarea: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/textarea/textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { InputBase } from '../inputBase';
+import { classes, style } from './textarea.style';
+import { classnames, cloneRef } from '../../utils';
+export const Textarea = memo(forwardRef(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }, ref) => {
+    return (_jsx(InputBase, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => _jsx("textarea", { rows: rows, ...rest, ...textareaProps, ref: cloneRef(ref, textareaRef), className: classnames(classes.textarea, textareaProps?.className) }) }));
+}));

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

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

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

@@ -0,0 +1,40 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as inputBaseClasses } from '../inputBase/inputBase.style';
+export const classes = defineClasses('textarea', [
+    'textarea'
+]);
+export const style = defineCss(({ spacing }) => css `
+    height: auto;
+
+    &[data-size] {
+        padding: 1px;
+    }
+
+    .${classes.textarea} {
+        flex: 1;
+        border: none;
+        outline: none;
+        background-color: transparent;
+        font-size: 1em;
+        padding: ${spacing[3]}px;
+        display: block;
+    }
+
+    &[data-full-width=true] {
+        .${classes.textarea} {
+            min-width: 100%;
+            max-width: 100%;
+        }
+    }
+
+    &:not([data-full-width=true]) {
+        display: inline-flex;
+    }
+
+    .${inputBaseClasses.clear} {
+        position: absolute;
+        top: ${spacing[2]}px;
+        right: ${spacing[3]}px;
+    }
+`);