@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/es/components/organisms/FileTabs/FileTabs.js

@@ -0,0 +1,296 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import { Block } from '../../Block';
+import { Action } from '../../actions/Action';
+import { Space } from '../../layout/Space';
+import { Flex } from '../../layout/Flex';
+const FileTabsContext = createContext({
+    addTab() { },
+    removeTab() { },
+    setTab() { },
+    setDirtyTab() { },
+});
+const TABS_PANEL_CSS = `
+  position: relative;
+  overflow: auto hidden;
+  top: 1px;
+  white-space: nowrap;
+
+  ::-webkit-scrollbar-track {
+    background: var(--grey-light-color);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 1px;
+    background: var(--dark-04-color);
+    background-clip: padding-box;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+`;
+const TABS_CONTAINER_CSS = `
+  position: relative;
+
+  &::before {
+    content: '';
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    width: 32px;
+    height: 37px;
+    transition: all .15s linear;
+    background-image: linear-gradient(
+      to left,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 1)
+    );
+    z-index: 10;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 37px;
+    pointer-events: none;
+    transition: all .15s linear;
+    background-image: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 1)
+    );
+    z-index: 10;
+  }
+
+  &[data-is-left-fade]::before, &[data-is-right-fade]::after {
+    opacity: 1;
+  }
+`;
+const DIRTY_BADGE_CSS = `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: all .2s linear;
+`;
+const TAB_STYLES = {
+    radius: '1r 1r 0 0',
+    padding: '1x 1.5x',
+    border: {
+        '': 'left top right #clear',
+        disabled: 'left top right rgb(227, 227, 233)',
+    },
+    fill: {
+        '': '#dark.04',
+        hovered: '#dark.08',
+        'disabled, disabled & hover': '#white',
+    },
+    color: {
+        '': '#dark.75',
+        'disabled, hovered, hovered & disabled': '#dark',
+    },
+    cursor: {
+        '': 'pointer',
+        disabled: 'default',
+    },
+    fontWeight: 500,
+    opacity: 1,
+    preset: 'default',
+    outline: {
+        '': 'inset #purple-03.0',
+        'focused & focus-visible': 'inset #purple-03',
+    },
+};
+const CLOSE_STYLES = {
+    color: {
+        '': '#dark.50',
+        hovered: '#dark',
+    },
+    padding: '0 .25x',
+    outline: {
+        '': '#purple-03.0',
+        'focused & focus-visible': '#purple-03',
+    },
+    radius: '1r',
+};
+const TAB_CSS = `
+  margin-bottom: var(--border-width);
+  transform: translate(0, 0);
+  transition: color .2s linear, background-color .2s linear;
+
+  &[disabled] {
+    transform: translate(0, var(--border-width));
+  }
+
+  &.file-tab--dirty {
+    &:hover {
+      & .file-tab-dirty-badge {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      & .file-tab-close {
+        opacity: 1;
+      }
+    }
+
+    &:not(:hover) {
+      & .file-tab-dirty-badge {
+        opacity: 1;
+      }
+
+      & .file-tab-close {
+        opacity: 0;
+      }
+    }
+  }
+`;
+const Tab = ({ isDirty, isDisabled, children, isClosable, onClose, ...props }) => {
+    return (_jsx(Action, { className: isDirty ? 'file-tab--dirty' : '', css: TAB_CSS, styles: TAB_STYLES, isDisabled: isDisabled, ...props, children: _jsxs(Space, { gap: ".75x", children: [_jsx(Block, { children: children }, void 0), (isClosable || isDirty) && (_jsxs(Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? (_jsx(Action, { onPress: onClose, className: "file-tab-close", styles: CLOSE_STYLES, children: _jsx(CloseOutlined, {}, void 0) }, void 0)) : (_jsx("div", {}, void 0)), isDirty ? (_jsx(Block, { className: "file-tab-dirty-badge", css: DIRTY_BADGE_CSS, width: "1x", height: "1x", fill: "#dark.30", radius: "round" }, void 0)) : null] }, void 0))] }, void 0) }, void 0));
+};
+export function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, isClosable = true, children, ...props }) {
+    const tabsRef = useRef(null);
+    const [tabs, setTabs] = useState([]);
+    const [activeKey, setActiveKey] = useState(activeKeyProp || defaultActiveKey);
+    const [leftFade, setLeftFade] = useState(false);
+    const [rightFade, setRightFade] = useState(false);
+    function updateScroll() {
+        const el = tabsRef && tabsRef.current;
+        if (!el)
+            return;
+        setLeftFade(!!el.scrollLeft);
+        setRightFade(el.scrollWidth !== el.offsetWidth
+            && !!(el.scrollWidth - el.offsetWidth - el.scrollLeft));
+    }
+    useLayoutEffect(updateScroll, [tabs]);
+    function scrollCurrentIntoView() {
+        const el = tabsRef && tabsRef.current;
+        if (!el)
+            return;
+        const current = el.querySelector('button[disabled]');
+        if (!current)
+            return;
+        current.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });
+    }
+    useEffect(() => {
+        function update() {
+            updateScroll();
+        }
+        if (tabsRef && tabsRef.current) {
+            tabsRef.current.addEventListener('scroll', update);
+            tabsRef.current.addEventListener('mousewheel', update);
+            window.addEventListener('resize', update);
+        }
+        return () => {
+            if (tabsRef && tabsRef.current) {
+                tabsRef.current.removeEventListener('scroll', update);
+                tabsRef.current.removeEventListener('mousewheel', update);
+            }
+            window.removeEventListener('resize', update);
+        };
+    }, [tabsRef]);
+    useEffect(scrollCurrentIntoView, [activeKey]);
+    useEffect(() => {
+        setActiveKey(activeKeyProp);
+    }, [activeKeyProp]);
+    function getTab(tabs, key) {
+        return tabs.find((tab) => tab.id === key);
+    }
+    function setTab(key) {
+        if (getTab(tabs, key)) {
+            setActiveKey(key);
+        }
+    }
+    function addTab(tab) {
+        setTabs((tabs) => {
+            if (!getTab(tabs, tab.id)) {
+                return [...tabs, tab];
+            }
+            return tabs;
+        });
+    }
+    function setDirtyTab(id, isDirty) {
+        setTabs((tabs) => {
+            const tab = getTab(tabs, id);
+            if (tab) {
+                tab.isDirty = isDirty;
+                return [...tabs];
+            }
+            return tabs;
+        });
+    }
+    function handleClose(tab) {
+        if (getTab(tabs, tab.id)) {
+            onTabClose && onTabClose(tab.id);
+        }
+    }
+    function removeTab(tab) {
+        setTabs((tabs) => {
+            const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);
+            setActiveKey((prevActiveKey) => {
+                if (prevActiveKey === tab.id) {
+                    return _tabs[0] && _tabs[0].id;
+                }
+                return prevActiveKey;
+            });
+            return _tabs;
+        });
+    }
+    function onPress(tab) {
+        setTab(tab.id);
+        onTabClick && onTabClick(tab.id);
+    }
+    return (_jsx(Flex, { flow: "column", height: "max 100%", width: "max 100%", "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, css: TABS_CONTAINER_CSS, ...props, children: _jsxs(FileTabsContext.Provider, { value: {
+                addTab,
+                setTab,
+                removeTab,
+                setDirtyTab,
+                currentTab: activeKey,
+            }, children: [_jsx(Space, { ref: tabsRef, gap: ".5x", flexShrink: 0, css: TABS_PANEL_CSS, children: tabs.map((tab) => {
+                        return (_jsx(Tab, { onPress: () => onPress(tab), onClose: () => isClosable && handleClose(tab), isClosable: isClosable, isDisabled: tab.id === activeKey || false, isDirty: tab.isDirty, children: tab.title }, tab.id));
+                    }) }, void 0), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
+}
+FileTabs.TabPane = function FileTabPane(allProps) {
+    let { id, title, isDirty, children, ...props } = allProps;
+    const { addTab, removeTab, currentTab, setDirtyTab } = useContext(FileTabsContext);
+    useEffect(() => {
+        const tabData = {
+            id,
+            title,
+            isDirty,
+        };
+        addTab(tabData);
+        return () => {
+            removeTab(tabData);
+        };
+    }, [id, title]);
+    useEffect(() => {
+        setDirtyTab(id, isDirty || false);
+    }, [isDirty]);
+    const isCurrent = id === currentTab;
+    return (_jsx(Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }, void 0));
+};
+
+        

package/dist/es/components/organisms/Modal/Modal.js

@@ -0,0 +1,251 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Action } from '../../actions/Action';
+import { Card } from '../../content/Card/Card';
+import { Flow } from '../../layout/Flow';
+import { Flex } from '../../layout/Flex';
+import { Block } from '../../Block';
+import { Button } from '../../actions/Button/Button';
+import { Space } from '../../layout/Space';
+import { Title } from '../../content/Title';
+import styled from 'styled-components';
+import { CloseOutlined } from '@ant-design/icons';
+import { CSSTransition } from 'react-transition-group';
+const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.4);
+  place-content: center;
+  place-items: center;
+  z-index: 1000;
+  display: none;
+  white-space: normal;
+
+  .cube-modal {
+    --enter-transition-time: 250ms;
+    --leave-transition-time: 160ms;
+    --base-translate: ((50vh - 50%) / -3);
+    transform: translate(0, calc(var(--base-translate)));
+  }
+
+  &.cube-modal-transition-enter {
+    opacity: 0;
+    display: flex;
+
+    & .cube-modal {
+      transform: translate(0, calc(-32px + var(--base-translate))) scale(0.5);
+    }
+  }
+
+  &.cube-modal-transition-enter-active {
+    opacity: 1;
+    transition: all var(--enter-transition-time) cubic-bezier(0, 0.5, 0, 1);
+
+    & .cube-modal {
+      transform: translate(0, calc(var(--base-translate))) scale(1);
+      transition: all var(--enter-transition-time) cubic-bezier(0.5, 0.5, 0, 1);
+    }
+  }
+
+  &.cube-modal-transition-enter-done {
+    display: flex;
+  }
+
+  &.cube-modal-transition-exit {
+    opacity: 1;
+    display: flex;
+
+    & .cube-modal {
+      transform: translate(0, calc(var(--base-translate))) scale(1);
+    }
+  }
+
+  &.cube-modal-transition-exit-active {
+    opacity: 0;
+    transition: all var(--leave-transition-time) ease-in;
+
+    & .cube-modal {
+      transform: translate(0, calc(-32px + var(--base-translate))) scale(0.5);
+      transition: all var(--leave-transition-time) ease-in;
+    }
+  }
+
+  &.cube-modal-transition-exit-done {
+    display: none;
+  }
+`;
+/**
+ * @deprecated Prefer using Dialog instead
+ *
+ * DEPRECATED Modal component
+ * Designed after AntD Modal component and almost duplicate its API.
+ * Use Dialog component instead
+ */
+export function Modal(allProps) {
+    let { title, isVisible, type, okType, isClosable, isLoading, children, okText, cancelText, width, onOk, onCancel, onClose, qa, isDisabled, ...props } = allProps;
+    isClosable = !!isClosable;
+    const [inProp, setInProp] = useState(false);
+    const [localLoading, setLocalLoading] = useState(false);
+    useEffect(() => {
+        setInProp(isVisible || false);
+    }, [isVisible]);
+    function cancel() {
+        if (onCancel) {
+            onCancel();
+        }
+        else if (onClose) {
+            onClose();
+        }
+    }
+    function close() {
+        if (!isVisible)
+            return;
+        if (onClose || onCancel) {
+            if (isClosable) {
+                // @ts-ignore
+                (onClose || onCancel)();
+            }
+            else if (onCancel) {
+                onCancel();
+            }
+        }
+    }
+    const onOverlayClick = (evt) => {
+        if (!evt || !evt.target)
+            return;
+        if (evt.target.classList.contains('cube-modal-overlay') && !isLoading) {
+            close();
+        }
+    };
+    useEffect(() => {
+        function handleKeyDown(evt) {
+            if (evt.key === 'Escape' && !isLoading) {
+                close();
+            }
+        }
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    const handleOk = useCallback((arg) => {
+        setLocalLoading(true);
+        (async () => {
+            if (onOk) {
+                try {
+                    if ((await onOk(arg)) === false && (onClose || onCancel)) {
+                        // @ts-ignore
+                        (onClose || onCancel)();
+                    }
+                }
+                catch (e) {
+                }
+                finally {
+                    setLocalLoading(false);
+                }
+            }
+        })();
+    }, [onOk]);
+    return (_jsx(CSSTransition, { in: inProp, timeout: 250, classNames: "cube-modal-transition", children: _jsx(Overlay, { className: "cube-modal-overlay", onClick: onOverlayClick, children: _jsxs(Card, { "data-qa": qa || 'Modal', className: "cube-modal", display: "flex", role: "region", color: "#dark.85", padding: "0", shadow: true, border: false, radius: "1.5r", width: `288px (100% - 32px) ${typeof width === 'number' ? `${width}px` : width || '360px'}`, style: { textAlign: 'left' }, ...props, children: [_jsxs(Flex, { placeContent: "space-between", padding: "2x 3x", border: "bottom", children: [typeof title === 'object' ? (title) : (_jsx(Title, { level: 4, flexGrow: 1, children: title }, void 0)), isClosable ? (_jsx(Action, { qa: "ModalCloseButton", width: "3x", height: "3x", onPress: onClose || onCancel, color: { '': '#dark.75', hovered: '#purple' }, outline: {
+                                    '': '#purple-03.0',
+                                    'focused & focus-visible': '#purple-03',
+                                }, label: "Close", children: _jsx(CloseOutlined, { style: { fontSize: 16 } }, void 0) }, void 0)) : null] }, void 0), _jsxs(Flow, { padding: "3x", gap: "3x", height: "max (100vh - 90px)", style: { overflow: 'auto' }, children: [typeof children === 'string' ? (_jsx(Block, { children: children }, void 0)) : (children), type !== 'info' && (onOk || onCancel) ? (_jsxs(Space, { gap: "1.5x", children: [_jsx(Button, { "data-qa": 'ConfirmButton', isDisabled: isDisabled, type: okType === 'danger' ? 'danger' : 'primary', isLoading: isLoading || localLoading, onPress: handleOk, children: okText || 'OK' }, void 0), _jsx(Button, { "data-qa": 'CancelButton', onPress: cancel, isDisabled: isLoading, children: cancelText || (okText === 'Yes' ? 'No' : 'Cancel') }, void 0)] }, void 0)) : null, type === 'info' ? (_jsx(Space, { children: _jsx(Button, { "data-qa": 'OkButton', isDisabled: isDisabled, type: okType === 'danger' ? 'danger' : 'primary', onPress: close, children: okText || 'OK' }, void 0) }, void 0)) : null] }, void 0)] }, void 0) }, void 0) }, void 0));
+}
+let ID = 0;
+const modal = {
+    root: null,
+    items: [],
+    init() {
+        if (this.root)
+            return;
+        this.root = document.createElement('div');
+        this.root.classList.add('cube-modal-container');
+        document.body.appendChild(this.root);
+        this._render([]);
+    },
+    render() {
+        this.init();
+        this._render();
+    },
+    _render(items) {
+        if (!items) {
+            items = this.items;
+        }
+        ReactDOM.render(items.map((item) => {
+            const { id, onOk, onCancel, onClose, content, ...options } = item;
+            const wrapOnOk = async (arg) => {
+                onOk && (await onOk(arg));
+                this.resolve(item, arg);
+            };
+            const wrapOnCancel = () => {
+                onCancel && onCancel();
+                if (item.type === 'info') {
+                    this.resolve(item);
+                }
+                else {
+                    this.reject(item);
+                }
+            };
+            const wrapOnClose = () => {
+                onClose && onClose();
+                if (item.type === 'info') {
+                    this.resolve(item);
+                }
+                else {
+                    this.reject(item);
+                }
+            };
+            return (_createElement(Modal, { ...options, onOk: wrapOnOk, onCancel: wrapOnCancel, onClose: wrapOnClose, key: id }, content));
+        }), this.root);
+    },
+    open(item) {
+        item.isVisible = false;
+        item.id = ++ID;
+        this.items.push(item);
+        this.render();
+        setTimeout(() => {
+            item.isVisible = true;
+            this.render();
+        });
+        return new Promise((resolve, reject) => {
+            item.resolve = resolve;
+            item.reject = reject;
+        });
+    },
+    close(item) {
+        item.isVisible = false;
+        this.render();
+        setTimeout(() => {
+            this.items = this.items.filter((modal) => item.id !== modal.id);
+            this.render();
+        }, 1000);
+    },
+    resolve(item, arg) {
+        item.resolve(arg);
+        this.close(item);
+    },
+    reject(item, arg) {
+        item.reject(arg);
+        this.close(item);
+    },
+};
+Modal.confirm = (options) => {
+    return modal.open({ type: 'confirm', ...options });
+};
+Modal.info = (options) => {
+    return modal.open({ type: 'info', ...options });
+};
+
+        

package/dist/es/components/organisms/SearchResults/SearchResults.js

@@ -0,0 +1,104 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, Fragment } from 'react';
+import { CaretDownOutlined, CaretUpOutlined, FileOutlined, } from '@ant-design/icons';
+import { Flex } from '../../layout/Flex';
+import { Action } from '../../actions/Action';
+import { Button } from '../../actions/Button/Button';
+import { Space } from '../../layout/Space';
+import { Block } from '../../Block';
+import { Paragraph } from '../../content/Paragraph';
+import { Text } from '../../content/Text';
+const TEXT_OVERFLOW_STYLES = {
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+    overflow: 'hidden',
+};
+function getItemStyles({ indent, isSelected, }) {
+    return {
+        width: 'max 100%',
+        radius: true,
+        textAlign: 'left',
+        fill: isSelected
+            ? '#purple.05'
+            : {
+                '': '#clear',
+                hovered: '#dark.04',
+            },
+        color: isSelected ? '#purple-text' : '#dark.75',
+        outline: {
+            '': '#purple-03.0',
+            'focused & focus-visible': '#purple-03',
+        },
+        fontWeight: 400,
+        padding: `.75x .5x .75x ${indent || 0.5}x`,
+    };
+}
+function Item({ children, indent, onPress, isSelected, }) {
+    return (_jsx(Action, { onPress: onPress, styles: getItemStyles({ indent, isSelected }), style: { whiteSpace: 'nowrap' }, children: children }, void 0));
+}
+const HOVER_CSS = `
+  &:hover .actions {
+    opacity: 1;
+  }
+  &:not(:hover) .actions {
+    opacity: 0;
+  }
+`;
+export function SearchResults({ onSelect, files, selectedKey, defaultExpandAll, ...otherProps }) {
+    const [expanded, setExpanded] = useState([]);
+    const [selected, setSelected] = useState(selectedKey);
+    useEffect(() => {
+        setSelected(selectedKey);
+    }, [selectedKey]);
+    useEffect(() => {
+        if (defaultExpandAll) {
+            setExpanded(files.map((file) => file.key));
+        }
+    }, []);
+    useEffect(() => {
+        if (defaultExpandAll) {
+            setExpanded(files.map((file) => file.key));
+        }
+    }, [files]);
+    function toggle(item) {
+        if (expanded.includes(item.key)) {
+            setExpanded(expanded.filter((key) => key !== item.key));
+        }
+        else {
+            setExpanded([...expanded, item.key]);
+        }
+    }
+    function select(item, position) {
+        const key = typeof item === 'string' ? item : item.key;
+        onSelect && onSelect(key.split('|')[0], position);
+        setSelected(key);
+    }
+    const resultsNumber = files.reduce((sum, file) => sum + file.items.length, 0);
+    return (_jsxs(Flex, { styles: {
+            flow: 'column',
+            width: '100%',
+            gap: '1bw',
+            padding: '2x bottom',
+        }, ...otherProps, children: [_jsx(Paragraph, { color: "#dark.50", padding: "1x 0", children: resultsNumber
+                    ? `${resultsNumber} result${resultsNumber > 1 ? 's' : ''} in ${files.length} file${files.length > 1 ? 's' : ''}`
+                    : 'No results found' }, void 0), files.map((file) => {
+                return (_jsxs(Fragment, { children: [_jsx(Item, { isSelected: selected === file.key, onPress: () => select(file), indent: file.items.length ? null : 2.25, children: _jsxs(Space, { gap: ".5x", css: HOVER_CSS, children: [_jsx(Button, { type: "clear", margin: "-.5x", padding: ".25x", color: {
+                                            '': '#dark.60',
+                                            hovered: '#purple',
+                                        }, onPress: () => toggle(file), label: expanded.includes(file.key) ? 'Collapse' : 'Expand', children: file.items.length ? (expanded.includes(file.key) ? (_jsx(CaretUpOutlined, {}, void 0)) : (_jsx(CaretDownOutlined, {}, void 0))) : null }, void 0), _jsxs(Space, { gap: "1x", flexGrow: 1, color: selected === file.key ? '#purple' : '#dark.50', children: [expanded.includes(file.key) ? (_jsx(FileOutlined, {}, void 0)) : (_jsx(FileOutlined, {}, void 0)), _jsx(Block, { style: TEXT_OVERFLOW_STYLES, color: selected === file.key ? '#purple-text' : '#dark.75', children: file.entry ? (_jsxs(_Fragment, { children: [file.before || '', _jsx(Text.Selection, { children: file.entry }, void 0), file.after || ''] }, void 0)) : (file.title) }, void 0)] }, void 0)] }, void 0) }, file.key), (expanded.includes(file.key) ? file.items || [] : []).map((item, i) => {
+                            const key = `${file.key}|${i}`;
+                            const isSelected = selected === key;
+                            return (_jsx(Item, { indent: 3.5, isSelected: isSelected, onPress: () => select(key, [item.row, item.column]), children: _jsx(Space, { gap: "1x", css: HOVER_CSS, color: isSelected ? '#purple' : '#dark.50', children: _jsxs(Block, { style: TEXT_OVERFLOW_STYLES, flexGrow: 1, color: isSelected ? '#purple-text' : '#dark.75', children: [item.before || '', _jsx(Text.Selection, { children: item.entry }, void 0), item.after || ''] }, void 0) }, void 0) }, key));
+                        })] }, file.key));
+            })] }, void 0));
+}
+
+        

package/dist/es/components/organisms/StatsCard/StatsCard.js

@@ -0,0 +1,16 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '../../content/Card/Card';
+import { Title } from '../../content/Title';
+import { Text } from '../../content/Text';
+export function StatsCard({ title, value, suffix, ...props }) {
+    return (_jsxs(Card, { display: "flex", placeContent: "space-between", gap: "1x", border: false, shadow: "0 2px 6px #dark.10", padding: "2.5x", ...props, children: [_jsx(Title, { level: 4, color: "#minor", preset: "default", nowrap: true, children: title }, void 0), _jsxs(Text.Strong, { preset: "h3", children: [value, " ", suffix] }, void 0)] }, void 0));
+}
+
+        

package/dist/es/components/organisms/TopBar/TopBar.js

@@ -0,0 +1,29 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Base } from '../../Base';
+import { CloudLogo } from '../../other/CloudLogo/CloudLogo';
+import { Space } from '../../layout/Space';
+import { CONTAINER_STYLES } from '../../../styles/list';
+import { extractStyles } from '../../../utils/styles';
+import { filterBaseProps } from '../../../utils/filterBaseProps';
+const DEFAULT_STYLES = {
+    display: 'flex',
+    flow: 'row',
+    gap: '1x',
+    placeContent: 'space-between',
+    placeItems: 'center',
+    padding: '1x 1.5x',
+    fill: '#white',
+};
+export function TopBar({ children, onLogoPress, ...props }) {
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
+    return (_jsxs(Base, { role: "banner", styles: styles, ...filterBaseProps(props), children: [_jsx(CloudLogo, { onPress: onLogoPress }, void 0), _jsx(Space, { flexGrow: 1, placeContent: "space-between", children: children }, void 0)] }, void 0));
+}
+
+