@cube-dev/ui-kit 0.9.6 → 0.9.7

package/dist/es/tokens.js

@@ -1,230 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-const colors = {
-    pink: '255, 100, 146',
-    'pink-02': '255, 131, 168',
-    purple: '122, 119, 255',
-    'purple-text': '102, 93, 232',
-    'purple-01': '122, 119, 255',
-    'purple-02': '149, 146, 255',
-    'purple-03': '175, 173, 255',
-    'purple-04': '202, 201, 255',
-    text: '91, 92, 125',
-    dark: '20, 20, 70',
-    'dark-01': '20, 20, 70',
-    'dark-02': '67, 67, 107',
-    'dark-03': '114, 114, 144',
-    'dark-04': '161, 161, 181',
-    'dark-05': '213, 213, 226',
-    'grey-light': '248, 248, 249',
-    light: '246, 246, 248',
-    white: '255, 255, 255',
-    black: '0, 0, 0',
-    'danger-text': '239, 64, 74',
-    danger: '255, 100, 109',
-    'light-grey': '248, 248, 249',
-    success: '49, 195, 124',
-    'success-text': '48, 166, 102',
-    note: '251, 188, 5',
-};
-function color(name, opacity = 1) {
-    return `rgba(${colors[name]}, ${opacity})`;
-}
-const TOKENS = {
-    // Base and legacy tokens
-    'font-size': '14px',
-    'line-height': '20px',
-    'input-font-size': '14px',
-    'input-line-height': '20px',
-    'input-letter-spacing': '0.02em',
-    'disabled-opacity': '.4',
-    gap: '8px',
-    'outline-width': 'calc(1rem / 16 * 3)',
-    'border-width': '1px',
-    radius: '4px',
-    'leaf-sharp-radius': '0px',
-    transition: '120ms',
-    'clear-color': 'transparent',
-    'border-color': color('dark', 0.1),
-    'shadow-color': color('dark-03', 0.1),
-    'draft-color': color('dark', 0.2),
-    'minor-color': color('dark', 0.65),
-    'success-bg-color': 'rgba(41, 190, 110, .1)',
-    'note-bg-color': color('note', 0.1),
-    'note-text-color': color('dark', 0.65),
-    'danger-bg-color': color('danger', 0.05),
-    'danger-bg-hover-color': color('danger', 0.1),
-    'primary-1': color('purple', 0.9),
-    'primary-2': color('purple', 0.8),
-    'primary-3': color('purple', 0.7),
-    'primary-4': color('purple', 0.6),
-    'primary-5': color('purple', 0.5),
-    'primary-6': color('purple', 0.4),
-    'primary-7': color('purple', 0.3),
-    'primary-8': color('purple', 0.2),
-    'primary-9': color('purple', 0.1),
-    'primary-10': color('purple', 0),
-    'dark-75-color': color('dark', 0.75),
-    'primary-color': color('purple'),
-    'pink-8-color': color('pink', 0.2),
-    'pink-9-color': color('pink', 0.1),
-    'disabled-color': color('dark-01', 0.25),
-    'disabled-text-color': color('dark-01', 0.25),
-    'disabled-bg': color('dark-05', 0.2),
-    'disabled-bg-color': color('dark-05', 0.2),
-    'max-content-width': '1440px',
-    'topbar-height': '48px',
-    'devmodebar-height': '54px',
-    'sidebar-width': '200px',
-    'border-radius-base': '4px',
-    // font sizes
-    'text-font-size': '14px',
-    'text-line-height': '20px',
-    'text-letter-spacing': '0.02em',
-    // h1
-    'h1-font-size': '36px',
-    'h1-line-height': '44px',
-    'h1-letter-spacing': '-0.01em',
-    'h1-font-weight': '700',
-    // h2
-    'h2-font-size': '24px',
-    'h2-line-height': '36px',
-    'h2-letter-spacing': '0em',
-    'h2-font-weight': '700',
-    // h3
-    'h3-font-size': '20px',
-    'h3-line-height': '28px',
-    'h3-letter-spacing': '0em',
-    'h3-font-weight': '700',
-    // h4
-    'h4-font-size': '18px',
-    'h4-line-height': '24px',
-    'h4-letter-spacing': '0.01em',
-    'h4-font-weight': '700',
-    // h5
-    'h5-font-size': '16px',
-    'h5-line-height': '22px',
-    'h5-letter-spacing': '0.02em',
-    'h5-font-weight': '700',
-    // h5 semi-bold
-    'h5s-font-size': '16px',
-    'h5s-line-height': '22px',
-    'h5s-letter-spacing': '0.02em',
-    'h5s-font-weight': '600',
-    // h5 medium
-    'h5m-font-size': '16px',
-    'h5m-line-height': '22px',
-    'h5m-letter-spacing': '0.02em',
-    'h5m-font-weight': '500',
-    // h6 (unused)
-    'h6-font-size': '14px',
-    'h6-line-height': '20px',
-    'h6-font-weight': '700',
-    // t1
-    't1-font-size': '18px',
-    't1-line-height': '24px',
-    't1-letter-spacing': '0',
-    't1-font-weight': '400',
-    // t2
-    't2-font-size': '16px',
-    't2-line-height': '22px',
-    't2-letter-spacing': '0.01em',
-    't2-font-weight': '400',
-    // t3
-    't3-font-size': '14px',
-    't3-line-height': '20px',
-    't3-letter-spacing': '0.02em',
-    't3-font-weight': '400',
-    // t3m
-    't3m-font-size': '14px',
-    't3m-line-height': '20px',
-    't3m-letter-spacing': '0.015em',
-    't3m-font-weight': '500',
-    // t4
-    't4-font-size': '12px',
-    't4-line-height': '18px',
-    't4-letter-spacing': '0.025em',
-    't4-font-weight': '400',
-    // t4m
-    't4m-font-size': '12px',
-    't4m-line-height': '18px',
-    't4m-letter-spacing': '0.02em',
-    't4m-font-weight': '500',
-    // p1
-    'p1-font-size': '18px',
-    'p1-line-height': '28px',
-    'p1-letter-spacing': '0',
-    'p1-font-weight': '400',
-    // p2
-    'p2-font-size': '16px',
-    'p2-line-height': '24px',
-    'p2-letter-spacing': '0.01em',
-    'p2-font-weight': '400',
-    // p3
-    'p3-font-size': '14px',
-    'p3-line-height': '22px',
-    'p3-letter-spacing': '0.02em',
-    'p3-font-weight': '400',
-    // p4
-    'p4-font-size': '12px',
-    'p4-line-height': '20px',
-    'p4-letter-spacing': '0.025em',
-    'p4-font-weight': '400',
-    // c1
-    'c1-font-size': '14px',
-    'c1-line-height': '20px',
-    'c1-letter-spacing': '0.015em',
-    'c1-font-weight': '500',
-    'c1-text-transform': 'uppercase',
-    // c2
-    'c2-font-size': '12px',
-    'c2-line-height': '18px',
-    'c2-letter-spacing': '0.02em',
-    'c2-font-weight': '500',
-    'c2-text-transform': 'uppercase',
-    // tag
-    'tag-font-size': '12px',
-    'tag-line-height': '12px',
-    'tag-letter-spacing': '0.02em',
-    'tag-font-weight': '500',
-    // strong
-    'strong-font-size': 'inherit',
-    'strong-line-height': 'inherit',
-    'strong-letter-spacing': 'inherit',
-    'strong-font-family': 'inherit',
-    'strong-font-style': 'inherit',
-    'strong-font-weight': 600,
-    // em
-    'em-font-size': 'inherit',
-    'em-line-height': 'inherit',
-    'em-letter-spacing': 'inherit',
-    'em-font-family': 'inherit',
-    'em-font-style': 'italic',
-    'em-font-weight': 'inherit',
-    // default
-    'default-font-size': 'var(--t3-font-size)',
-    'default-line-height': 'var(--t3-line-height)',
-    'default-letter-spacing': 'var(--t3-letter-spacing)',
-    'default-font-weight': 'var(--t3-font-weight)',
-    // scrollbar colors
-    'scrollbar-width': '1.5x',
-    'scrollbar-outline-width': '1ow',
-    'scrollbar-radius': '1.5r',
-    'scrollbar-thumb-color': 'rgba(var(--text-color-rgb), .5)',
-    'scrollbar-outline-color': 'var(--clear-color)',
-    'scrollbar-bg-color': 'var(--grey-light-color)',
-    'scrollbar-corner-color': 'var(--clear-color)',
-};
-// Map color tokens
-Object.keys(colors).forEach((name) => {
-    TOKENS[`${name}-color`] = color(name);
-    TOKENS[`${name}-color-rgb`] = colors[name];
-});
-export { TOKENS };
-
-        

package/dist/es/utils/ResizeSensor.js

@@ -1,320 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-// @ts-nocheck
-/**
- * Iterate over each of the provided element(s).
- *
- * @param {HTMLElement|HTMLElement[]} elements
- * @param {Function}                  callback
- */
-function forEachElement(elements, callback) {
-    let elementsType = Object.prototype.toString.call(elements);
-    let isCollectionTyped = '[object Array]' === elementsType
-        || '[object NodeList]' === elementsType
-        || '[object HTMLCollection]' === elementsType
-        || '[object Object]' === elementsType
-        || ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
-        || ('undefined' !== typeof Elements && elements instanceof Elements); //mootools
-    let i = 0, j = elements.length;
-    if (isCollectionTyped) {
-        for (; i < j; i++) {
-            callback(elements[i]);
-        }
-    }
-    else {
-        callback(elements);
-    }
-}
-/**
- * Get element size
- * @param {HTMLElement} element
- * @returns {Object} {width, height}
- */
-function getElementSize(element) {
-    if (!element.getBoundingClientRect) {
-        return {
-            width: element.offsetWidth,
-            height: element.offsetHeight,
-        };
-    }
-    let rect = element.getBoundingClientRect();
-    return {
-        width: Math.round(rect.width),
-        height: Math.round(rect.height),
-    };
-}
-/**
- * Apply CSS styles to element.
- *
- * @param {HTMLElement} element
- * @param {Object} style
- */
-function setStyle(element, style) {
-    Object.keys(style).forEach(function (key) {
-        element.style[key] = style[key];
-    });
-}
-/**
- * Class for dimension change detection.
- *
- * @param {Element|Element[]|Elements} element
- * @param {Function} callback
- *
- * @constructor
- */
-export let ResizeSensor = function (element, callback) {
-    // https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js
-    // https://github.com/Semantic-Org/Semantic-UI/issues/3855
-    // https://github.com/marcj/css-element-queries/issues/257
-    let globalWindow = window;
-    // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
-    // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
-    // would generate too many unnecessary events.
-    let requestAnimationFrame = globalWindow.requestAnimationFrame
-        || globalWindow.mozRequestAnimationFrame
-        || globalWindow.webkitRequestAnimationFrame
-        || function (fn) {
-            return globalWindow.setTimeout(fn, 20);
-        };
-    let cancelAnimationFrame = globalWindow.cancelAnimationFrame
-        || globalWindow.mozCancelAnimationFrame
-        || globalWindow.webkitCancelAnimationFrame
-        || function (timer) {
-            globalWindow.clearTimeout(timer);
-        };
-    //Is used when checking in reset() only for invisible elements
-    let lastAnimationFrameForInvisibleCheck = 0;
-    /**
-     *
-     * @constructor
-     */
-    function EventQueue() {
-        let q = [];
-        this.add = function (ev) {
-            q.push(ev);
-        };
-        let i, j;
-        this.call = function (sizeInfo) {
-            for (i = 0, j = q.length; i < j; i++) {
-                q[i].call(this, sizeInfo);
-            }
-        };
-        this.remove = function (ev) {
-            let newQueue = [];
-            for (i = 0, j = q.length; i < j; i++) {
-                if (q[i] !== ev)
-                    newQueue.push(q[i]);
-            }
-            q = newQueue;
-        };
-        this.length = function () {
-            return q.length;
-        };
-    }
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Function}    resized
-     */
-    function attachResizeEvent(element, resized) {
-        if (!element)
-            return;
-        if (element.resizedAttached) {
-            element.resizedAttached.add(resized);
-            return;
-        }
-        element.resizedAttached = new EventQueue();
-        element.resizedAttached.add(resized);
-        element.resizeSensor = document.createElement('div');
-        element.resizeSensor.dir = 'ltr';
-        element.resizeSensor.className = 'resize-sensor';
-        let style = {
-            pointerEvents: 'none',
-            position: 'absolute',
-            left: '0px',
-            top: '0px',
-            right: '0px',
-            bottom: '0px',
-            overflow: 'hidden',
-            zIndex: '-1',
-            visibility: 'hidden',
-            maxWidth: '100%',
-        };
-        let styleChild = {
-            position: 'absolute',
-            left: '0px',
-            top: '0px',
-            transition: '0s',
-        };
-        setStyle(element.resizeSensor, style);
-        let expand = document.createElement('div');
-        expand.className = 'resize-sensor-expand';
-        setStyle(expand, style);
-        let expandChild = document.createElement('div');
-        setStyle(expandChild, styleChild);
-        expand.appendChild(expandChild);
-        let shrink = document.createElement('div');
-        shrink.className = 'resize-sensor-shrink';
-        setStyle(shrink, style);
-        let shrinkChild = document.createElement('div');
-        setStyle(shrinkChild, styleChild);
-        setStyle(shrinkChild, { width: '200%', height: '200%' });
-        shrink.appendChild(shrinkChild);
-        element.resizeSensor.appendChild(expand);
-        element.resizeSensor.appendChild(shrink);
-        element.appendChild(element.resizeSensor);
-        let computedStyle = window.getComputedStyle(element);
-        let position = computedStyle
-            ? computedStyle.getPropertyValue('position')
-            : null;
-        if ('absolute' !== position
-            && 'relative' !== position
-            && 'fixed' !== position
-            && 'sticky' !== position) {
-            element.style.position = 'relative';
-        }
-        let dirty = false;
-        //last request animation frame id used in onscroll event
-        let rafId = 0;
-        let size = getElementSize(element);
-        let lastWidth = 0;
-        let lastHeight = 0;
-        let initialHiddenCheck = true;
-        lastAnimationFrameForInvisibleCheck = 0;
-        let resetExpandShrink = function () {
-            let width = element.offsetWidth;
-            let height = element.offsetHeight;
-            expandChild.style.width = width + 10 + 'px';
-            expandChild.style.height = height + 10 + 'px';
-            expand.scrollLeft = width + 10;
-            expand.scrollTop = height + 10;
-            shrink.scrollLeft = width + 10;
-            shrink.scrollTop = height + 10;
-        };
-        let reset = function () {
-            // Check if element is hidden
-            if (initialHiddenCheck) {
-                let invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
-                if (invisible) {
-                    // Check in next frame
-                    if (!lastAnimationFrameForInvisibleCheck) {
-                        lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function () {
-                            lastAnimationFrameForInvisibleCheck = 0;
-                            reset();
-                        });
-                    }
-                    return;
-                }
-                else {
-                    // Stop checking
-                    initialHiddenCheck = false;
-                }
-            }
-            resetExpandShrink();
-        };
-        element.resizeSensor.resetSensor = reset;
-        let onResized = function () {
-            rafId = 0;
-            if (!dirty)
-                return;
-            lastWidth = size.width;
-            lastHeight = size.height;
-            if (element.resizedAttached) {
-                element.resizedAttached.call(size);
-            }
-        };
-        let onScroll = function () {
-            size = getElementSize(element);
-            dirty = size.width !== lastWidth || size.height !== lastHeight;
-            if (dirty && !rafId) {
-                rafId = requestAnimationFrame(onResized);
-            }
-            reset();
-        };
-        let addEvent = function (el, name, cb) {
-            if (el.attachEvent) {
-                el.attachEvent('on' + name, cb);
-            }
-            else {
-                el.addEventListener(name, cb);
-            }
-        };
-        addEvent(expand, 'scroll', onScroll);
-        addEvent(shrink, 'scroll', onScroll);
-        // Fix for custom Elements and invisible elements
-        lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function () {
-            lastAnimationFrameForInvisibleCheck = 0;
-            reset();
-        });
-    }
-    forEachElement(element, function (elem) {
-        attachResizeEvent(elem, callback);
-    });
-    this.detach = function (ev) {
-        // clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset
-        if (lastAnimationFrameForInvisibleCheck) {
-            cancelAnimationFrame(lastAnimationFrameForInvisibleCheck);
-            lastAnimationFrameForInvisibleCheck = 0;
-        }
-        ResizeSensor.detach(element, ev);
-    };
-    this.reset = function () {
-        //To prevent invoking element.resizeSensor.resetSensor if it's undefined
-        if (element.resizeSensor.resetSensor) {
-            element.resizeSensor.resetSensor();
-        }
-    };
-};
-ResizeSensor.reset = function (element) {
-    forEachElement(element, function (elem) {
-        //To prevent invoking element.resizeSensor.resetSensor if it's undefined
-        if (element.resizeSensor.resetSensor) {
-            elem.resizeSensor.resetSensor();
-        }
-    });
-};
-ResizeSensor.detach = function (element, ev) {
-    forEachElement(element, function (elem) {
-        if (!elem)
-            return;
-        if (elem.resizedAttached && typeof ev === 'function') {
-            elem.resizedAttached.remove(ev);
-            if (elem.resizedAttached.length())
-                return;
-        }
-        if (elem.resizeSensor) {
-            if (elem.contains(elem.resizeSensor)) {
-                elem.removeChild(elem.resizeSensor);
-            }
-            delete elem.resizeSensor;
-            delete elem.resizedAttached;
-        }
-    });
-};
-if (typeof MutationObserver !== 'undefined') {
-    let observer = new MutationObserver(function (mutations) {
-        for (let i in mutations) {
-            if (mutations.hasOwnProperty(i)) {
-                let items = mutations[i].addedNodes;
-                for (let j = 0; j < items.length; j++) {
-                    if (items[j].resizeSensor) {
-                        ResizeSensor.reset(items[j]);
-                    }
-                }
-            }
-        }
-    });
-    document.addEventListener('DOMContentLoaded', function (event) {
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-    });
-}
-
-        

package/dist/es/utils/colors.js

@@ -1,15 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-export function color(name, opacity = 1) {
-    if (opacity !== 1) {
-        return `rgba(var(--${name}-color-rgb), ${opacity})`;
-    }
-    return `var(--${name}-color)`;
-}
-
-