@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,396 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.indicatorWidth = exports.classes = void 0;
+exports.useStyle = useStyle;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('tabs', [
+    'scroll',
+    'scrollWrap',
+    'start',
+    'end',
+    'ellipsis',
+    'prefix',
+    'suffix',
+    'tab',
+    'label',
+    'tabPrefix',
+    'tabSuffix',
+    'indicator'
+]);
+exports.indicatorWidth = 2;
+function useStyle({ color, variant }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ divider, text, easing, background, spacing, borderRadius, gray, colors }) => {
+        const commonStyle = (0, react_1.css) `
+            display: flex;
+            position: relative;
+            overflow: hidden;
+            
+            .${exports.classes.scroll} {
+                flex: 1;
+                display: flex;
+                overflow: auto;
+                scrollbar-width: none;
+                position: relative;
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+    
+                .${exports.classes.scrollWrap} {
+                    flex: 1;
+                    display: flex;
+                    position: relative;
+                }
+            }
+
+            .${exports.classes.start}, .${exports.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);
+                }
+            }
+
+            .${exports.classes.prefix}, .${exports.classes.suffix} {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: ${background.card};
+            }
+
+            .${exports.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] {
+                .${exports.classes.prefix}, .${exports.classes.suffix} {
+                    padding: 0 16px;
+                }
+
+                &[data-size=small] {
+                    .${exports.classes.prefix}, .${exports.classes.suffix} {
+                        padding: 0 14px;
+                    }
+                }
+
+                &[data-size=large] {
+                    .${exports.classes.prefix}, .${exports.classes.suffix} {
+                        padding: 0 18px;
+                    }
+                }
+            }
+
+            &[data-position=left],
+            &[data-position=right] {
+                .${exports.classes.prefix}, .${exports.classes.suffix} {
+                    padding: 12px 0;
+                }
+
+                &[data-size=small] {
+                    .${exports.classes.prefix}, .${exports.classes.suffix} {
+                        padding: 10px 0;
+                    }
+                }
+
+                &[data-size=large] {
+                    .${exports.classes.prefix}, .${exports.classes.suffix} {
+                        padding: 14px 0;
+                    }
+                }
+            }
+
+            &:after {
+                content: '';
+                background-color: ${divider};
+                position: absolute;
+            }
+
+            .${exports.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] {
+                .${exports.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] {
+                &, .${exports.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]) {
+                \.${exports.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] {
+                .${exports.classes.tab} {
+                    cursor: not-allowed;
+                }
+            }
+        `;
+        return variant === 'line'
+            ? (0, react_1.css) `
+                ${commonStyle}
+
+                .${exports.classes.scrollWrap} {
+                    gap: 0 ${spacing[10]}px;
+                }
+
+                .${exports.classes.tab} {
+                    transition: color .2s ${easing.easeOut};
+                }
+
+                &[data-position=top],
+                &[data-position=bottom] {
+                    .${exports.classes.tab} {
+                        padding: 10px 0;
+                    }
+
+                    &[data-size=small] {
+                        .${exports.classes.tab} {
+                            padding: 6px 0;
+                        }
+                    }
+            
+                    &[data-size=large] {
+                        .${exports.classes.tab} {
+                            padding: 14px 0;
+                        }
+                    }
+                }
+
+                &[data-position=top] {
+                    .${exports.classes.tab} {
+                        border-bottom: ${exports.indicatorWidth}px solid transparent;
+                    }
+                }
+
+                &[data-position=bottom] {
+                    .${exports.classes.tab} {
+                        border-top: ${exports.indicatorWidth}px solid transparent;
+                    }
+                }
+
+                &[data-position=left],
+                &[data-position=right] {
+                    .${exports.classes.tab} {
+                        padding: 10px 18px;
+                    }
+
+                    &[data-size=small] {
+                        .${exports.classes.tab} {
+                            padding: 6px 18px;
+                        }
+                    }
+            
+                    &[data-size=large] {
+                        .${exports.classes.tab} {
+                            padding: 14px 18px;
+                        }
+                    }
+                }
+
+                &[data-position=left] {
+                    .${exports.classes.tab} {
+                        border-right: ${exports.indicatorWidth}px solid transparent;
+                    }
+                }
+
+                &[data-position=right] {
+                    .${exports.classes.tab} {
+                        border-left: ${exports.indicatorWidth}px solid transparent;
+                    }
+                }
+
+                .${exports.classes.indicator} {
+                    position: absolute;
+                    z-index: 1;
+                    transition: all .3s ${easing.bounce};
+                }
+
+                &:not([data-animating=true]) {
+                    .${exports.classes.indicator} {
+                        display: none;
+                    }
+                }
+            `
+            // variant === 'card'
+            : (0, react_1.css) `
+                ${commonStyle}
+
+                .${exports.classes.scrollWrap} {
+                    gap: ${spacing[1]}px;
+                }
+
+                .${exports.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] {
+                    .${exports.classes.tab} {
+                        padding: 10px 15px;
+                    }
+
+                    &[data-size=small] {
+                        .${exports.classes.tab} {
+                            padding: 6px 15px;
+                        }
+                    }
+            
+                    &[data-size=large] {
+                        .${exports.classes.tab} {
+                            padding: 14px 15px;
+                        }
+                    }
+                }
+
+                &[data-position=top] {
+                    .${exports.classes.tab} {
+                        border-radius: ${borderRadius}px ${borderRadius}px 0 0;
+
+                        &[data-active=true] {
+                            border-bottom-color: ${background.card};
+                        }
+                    }
+                }
+
+                &[data-position=bottom] {
+                    .${exports.classes.tab} {
+                        border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
+
+                        &[data-active=true] {
+                            border-top-color: ${background.card};
+                        }
+                    }
+                }
+
+                &[data-position=left],
+                &[data-position=right] {
+                    .${exports.classes.tab} {
+                        padding: 9px 18px;
+                    }
+
+                    &[data-size=small] {
+                        .${exports.classes.tab} {
+                            padding: 5px 18px;
+                        }
+                    }
+            
+                    &[data-size=large] {
+                        .${exports.classes.tab} {
+                            padding: 13px 18px;
+                        }
+                    }
+                }
+
+                &[data-position=left] {
+                    .${exports.classes.tab} {
+                        border-radius: ${borderRadius}px 0 0 ${borderRadius}px;
+
+                        &[data-active=true] {
+                            border-right-color: ${background.card};
+                        }
+                    }
+                }
+
+                &[data-position=right] {
+                    .${exports.classes.tab} {
+                        border-radius: 0 ${borderRadius}px ${borderRadius}px 0;
+
+                        &[data-active=true] {
+                            border-left-color: ${background.card};
+                        }
+                    }
+                }
+            `;
+    }, [colorValue, variant]);
+}

package/dist/cjs/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/cjs/components/tabs/tabsEllipsis.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsEllipsis = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const tabs_style_1 = require("./tabs.style");
+const icons_1 = require("@ant-design/icons");
+const popper_1 = require("../popper");
+const tabsEllipsis_style_1 = require("./tabsEllipsis.style");
+const optionsBase_1 = require("../optionsBase");
+exports.TabsEllipsis = (0, react_1.memo)(({ tabs, children, labelKey = 'label', primaryKey = 'value', value, onToggleSelected }) => {
+    const [open, setOpen] = (0, react_1.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
+        })) || react_1.Children.map(children, c => (0, react_1.isValidElement)(c) ? c.props : c) || void 0;
+    };
+    const _onToggleSelected = (value) => {
+        onToggleSelected(value);
+        setOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: tabsEllipsis_style_1.tabsEllipsisPopperStyle, placement: "bottomRight", trigger: "hover", open: open, onOpenChange: setOpen, content: (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { options: getOptions(), selectedValue: value, onToggleSelected: _onToggleSelected }), children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.ellipsis, children: (0, jsx_runtime_1.jsx)(icons_1.EllipsisOutlined, {}) }) }) }));
+});

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabsEllipsisPopperStyle = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const popper_style_1 = require("../popper/popper.style");
+const optionsBase_style_1 = require("../optionsBase/optionsBase.style");
+exports.tabsEllipsisPopperStyle = (0, utils_1.defineCss)(theme => [
+    (0, popper_style_1.popperStyleCallback)(theme),
+    (0, react_1.css) `
+        .${optionsBase_style_1.classes.root} .${optionsBase_style_1.classes.optionsList} {
+            max-width: 360px;
+            overflow: hidden auto;
+        }
+    `
+]);

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

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

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

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

package/dist/cjs/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/cjs/components/tag/tag.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const tag_style_1 = require("./tag.style");
+const utils_1 = require("../../utils");
+const icons_1 = require("@ant-design/icons");
+exports.Tag = (0, react_1.memo)((0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, tag_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(tag_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
+                (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.content, children: props.children }), !!suffix &&
+                (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.suffix, children: suffix }), closable &&
+                (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }));
+}));

package/dist/cjs/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/cjs/components/tag/tag.style.js

@@ -0,0 +1,124 @@
+"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)('tag', [
+    'content',
+    'prefix',
+    'suffix',
+    'close'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ spacing, borderRadius, divider, gray, easing }) => {
+        const c = (0, color_1.default)(colorValue);
+        return (0, react_1.css) `
+            line-height: 1;
+            display: inline-flex;
+            align-items: center;
+    
+            .${exports.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] {
+                .${exports.classes.close} {
+                    font-size: ${13 / 14}em;
+                }
+            }
+    
+            &[data-variant=filled] {
+                .${exports.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/cjs/components/textarea/index.d.ts

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

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

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

package/dist/cjs/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/cjs/components/textarea/textarea.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const inputBase_1 = require("../inputBase");
+const textarea_style_1 = require("./textarea.style");
+const utils_1 = require("../../utils");
+exports.Textarea = (0, react_1.memo)((0, react_1.forwardRef)(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, ref: ref, css: textarea_style_1.style, className: (0, utils_1.classnames)(textarea_style_1.classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsx)("textarea", { rows: rows, ...rest, ...textareaProps, ref: (0, utils_1.cloneRef)(ref, textareaRef), className: (0, utils_1.classnames)(textarea_style_1.classes.textarea, textareaProps?.className) }) }));
+}));

package/dist/cjs/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;