@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/es/styles/dimension.js

@@ -0,0 +1,85 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { parseStyle, transferMods } from '../utils/styles';
+const DEFAULT_MIN_SIZE = 'var(--gap)';
+const DEFAULT_MAX_SIZE = '100%';
+function isSizingSupport(val) {
+    return typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined'
+        ? CSS.supports('height', val)
+        : false;
+}
+const STRETCH = 'stretch';
+const FILL_AVAILABLE = 'fill-available';
+const WEBKIT_FILL_AVAILABLE = '-webkit-fill-available';
+const MOZ_FILL_AVAILABLE = '-moz-fill-available';
+const STRETCH_SIZE = isSizingSupport(STRETCH)
+    ? STRETCH
+    : isSizingSupport(FILL_AVAILABLE)
+        ? FILL_AVAILABLE
+        : isSizingSupport(WEBKIT_FILL_AVAILABLE)
+            ? WEBKIT_FILL_AVAILABLE
+            : isSizingSupport(MOZ_FILL_AVAILABLE)
+                ? MOZ_FILL_AVAILABLE
+                : null;
+const INTRINSIC_MODS = ['max-content', 'min-content', 'fit-content', 'stretch'];
+export function dimensionStyle(name) {
+    const minStyle = `min-${name}`;
+    const maxStyle = `max-${name}`;
+    return (val) => {
+        if (!val)
+            return '';
+        if (typeof val === 'number') {
+            val = `${val}px`;
+        }
+        val = String(val);
+        const styles = {
+            [name]: 'auto',
+            [minStyle]: 'initial',
+            [maxStyle]: 'initial',
+        };
+        const { mods, values } = parseStyle(val);
+        transferMods(INTRINSIC_MODS, mods, values);
+        values.forEach((v, i) => {
+            if (v === 'stretch') {
+                values[i] = STRETCH_SIZE || (name === 'height' ? '100vh' : '100vw');
+            }
+        });
+        let flag = false;
+        for (let mod of mods) {
+            switch (mod) {
+                case 'min':
+                    styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;
+                    flag = true;
+                    break;
+                case 'max':
+                    styles[maxStyle] = values[0] || DEFAULT_MAX_SIZE;
+                    flag = true;
+                    break;
+                default:
+                    break;
+            }
+        }
+        if (!flag || !mods.length) {
+            if (values.length === 2) {
+                styles[minStyle] = values[0];
+                styles[maxStyle] = values[1];
+            }
+            else if (values.length === 3) {
+                styles[minStyle] = values[0];
+                styles[name] = values[1];
+                styles[maxStyle] = values[2];
+            }
+            else {
+                styles[name] = values[0] || 'auto';
+            }
+        }
+        return styles;
+    };
+}
+
+        

package/dist/es/styles/display.js

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export function displayStyle({ display, hide }) {
+    return { display: !hide ? display : 'none' };
+}
+displayStyle.__lookupStyles = ['display', 'hide'];
+
+        

package/dist/es/styles/fill.js

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function fillStyle({ fill }) {
+    if (!fill)
+        return '';
+    if (fill.startsWith('#')) {
+        fill = parseStyle(fill).color || fill;
+    }
+    const match = fill.match(/var\(--(.+?)-color/);
+    let name = '';
+    if (match) {
+        name = match[1];
+    }
+    const styles = [
+        {
+            'background-color': fill,
+        },
+    ];
+    if (name) {
+        styles.push([
+            {
+                $: '>*',
+                '--context-fill-color': fill,
+                '--context-fill-color-rgb': `var(--${name}-color-rgb)`,
+            },
+        ]);
+    }
+    return styles;
+}
+fillStyle.__lookupStyles = ['fill'];
+
+        

package/dist/es/styles/flow.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export function flowStyle({ display = 'block', flow }) {
+    let style;
+    if (display.includes('grid')) {
+        style = 'grid-auto-flow';
+    }
+    else if (display.includes('flex')) {
+        style = 'flex-flow';
+    }
+    return style ? { [style]: flow } : null;
+}
+flowStyle.__lookupStyles = ['display', 'flow'];
+
+        

package/dist/es/styles/font.js

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export function fontStyle({ font }) {
+    if (font == null || font === false)
+        return null;
+    const fontFamily = font === 'monospace'
+        ? 'var(--monospace-font)'
+        : font === true
+            ? 'var(--font)'
+            : `${font}, var(--font)`;
+    return {
+        'font-family': fontFamily,
+        '--font-family': fontFamily,
+    };
+}
+fontStyle.__lookupStyles = ['font'];
+
+        

package/dist/es/styles/fontStyle.js

@@ -0,0 +1,19 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export function fontStyleStyle({ fontStyle }) {
+    if (fontStyle === true) {
+        fontStyle = 'italic';
+    }
+    if (fontStyle !== 'inherit') {
+        fontStyle = fontStyle ? 'italic' : 'normal';
+    }
+    return { 'font-style': fontStyle };
+}
+fontStyleStyle.__lookupStyles = ['fontStyle'];
+
+        

package/dist/es/styles/gap.js

@@ -0,0 +1,63 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function gapStyle({ display, flow, gap }) {
+    if (typeof gap === 'number') {
+        gap = `${gap}px`;
+    }
+    if (!gap) {
+        return;
+    }
+    if (gap === true) {
+        gap = '1.5x';
+    }
+    const isGrid = display.includes('grid');
+    const isFlex = display.includes('flex');
+    const isWrap = flow
+        ? flow.includes('wrap') && !flow.includes('nowrap')
+        : false;
+    if (!isGrid && flow == null) {
+        flow = isFlex ? 'row' : 'column';
+    }
+    const { values } = parseStyle(gap);
+    gap = values.join(' ');
+    if (isGrid) {
+        return { gap };
+    }
+    const isReverse = isFlex && flow.includes('reverse');
+    const gapDir = gap && !isGrid
+        ? !isReverse
+            ? flow.includes('row')
+                ? 'right'
+                : 'bottom'
+            : flow.includes('row')
+                ? 'left'
+                : 'top'
+        : '';
+    const marginFirst = isReverse ? 'margin-left' : 'margin-right';
+    const marginSecond = isReverse ? 'margin-top' : 'margin-bottom';
+    return isWrap
+        ? [
+            {
+                [marginFirst]: `calc(-1 * ${values[1] || values[0]})`,
+                [marginSecond]: `calc(-1 * ${values[0]})`,
+            },
+            {
+                $: '& > *',
+                [marginFirst]: values[1] || values[0],
+                [marginSecond]: values[0],
+            },
+        ]
+        : {
+            $: '& > *:not(:last-child)',
+            [`margin-${gapDir}`]: gap,
+        };
+}
+gapStyle.__lookupStyles = ['display', 'flow', 'gap'];
+
+        

package/dist/es/styles/groupRadius.js

@@ -0,0 +1,60 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+const MAP = {
+    row: ['* 0 0 *', '0 * * 0'],
+    column: ['* * 0 0', '0 0 * *'],
+};
+export function groupRadiusAttr({ groupRadius, flow }) {
+    if (!groupRadius)
+        return '';
+    if (groupRadius === true)
+        groupRadius = '1r';
+    const { values, mods } = parseStyle(groupRadius);
+    flow = flow || 'row';
+    const reverse = mods.includes('reverse');
+    let value = values[0];
+    if (!value) {
+        if (mods.includes('round')) {
+            value = '9999rem';
+        }
+        else if (mods.includes('ellipse')) {
+            value = '50%';
+        }
+        else {
+            value = 'var(--radius)';
+        }
+    }
+    const startValue = MAP[flow][reverse ? 1 : 0].replace(/\*/g, value);
+    const endValue = MAP[flow][reverse ? 0 : 1].replace(/\*/g, value);
+    return [
+        {
+            $: '>:first-child:not(:last-child)',
+            'border-radius': startValue,
+            '--local-radius': startValue,
+        },
+        {
+            $: '>:last-child:not(:first-child)',
+            'border-radius': endValue,
+            '--local-radius': endValue,
+        },
+        {
+            $: '>:last-child:first-child',
+            'border-radius': value,
+            '--local-radius': value,
+        },
+        {
+            $: '>:not(:last-child):not(:first-child)',
+            'border-radius': '0',
+            '--local-radius': '0',
+        },
+    ];
+}
+groupRadiusAttr.__lookupStyles = ['groupRadius', 'flow'];
+
+        

package/dist/es/styles/height.js

@@ -0,0 +1,15 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { dimensionStyle } from './dimension';
+const dimension = dimensionStyle('height');
+export function heightStyle({ height }) {
+    return dimension(height);
+}
+heightStyle.__lookupStyles = ['height'];
+
+        

package/dist/es/styles/index.js

@@ -0,0 +1,99 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { getRgbValuesFromRgbaString, parseColor, parseStyle, strToRgb, styleHandlerCacheWrapper, } from '../utils/styles';
+import { toSnakeCase } from '../utils/string';
+const CACHE = {};
+export function createStyle(styleName, cssStyle, converter) {
+    const key = `${styleName}.${cssStyle || ''}`;
+    if (!CACHE[key]) {
+        CACHE[key] = styleHandlerCacheWrapper((styleMap) => {
+            let styleValue = styleMap[styleName];
+            if (styleValue == null || styleValue === false)
+                return;
+            const finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^@/, '--');
+            // convert non-string values
+            if (converter && typeof styleValue !== 'string') {
+                styleValue = converter(styleValue);
+                if (!styleValue)
+                    return;
+            }
+            if (typeof styleValue === 'string'
+                && finalCssStyle.startsWith('--')
+                && finalCssStyle.endsWith('-color')) {
+                styleValue = styleValue.trim();
+                const rgba = strToRgb(styleValue);
+                const { color, name } = parseColor(styleValue);
+                if (name && rgba) {
+                    return {
+                        [finalCssStyle]: `var(--${name}-color, ${rgba})`,
+                        [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb, ${getRgbValuesFromRgbaString(rgba).join(', ')})`,
+                    };
+                }
+                else if (name) {
+                    if (color) {
+                        return {
+                            [finalCssStyle]: color,
+                            [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb)`,
+                        };
+                    }
+                    return {
+                        [finalCssStyle]: `var(--${name}-color)`,
+                        [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb)`,
+                    };
+                }
+                else if (rgba) {
+                    return {
+                        [finalCssStyle]: rgba,
+                        [`${finalCssStyle}-rgb`]: getRgbValuesFromRgbaString(rgba).join(', '),
+                    };
+                }
+                return {
+                    [finalCssStyle]: color,
+                };
+            }
+            const { value } = parseStyle(styleValue, 1);
+            return { [finalCssStyle]: value };
+        });
+        CACHE[key].__lookupStyles = [styleName];
+    }
+    return CACHE[key];
+}
+export const STYLE_HANDLER_MAP = {};
+export function defineCustomStyle(names, handler) {
+    let handlerWithLookup;
+    if (typeof names === 'function') {
+        handlerWithLookup = names;
+        names = handlerWithLookup.__lookupStyles;
+    }
+    else if (handler) {
+        handlerWithLookup = Object.assign(handler, { __lookupStyles: names });
+    }
+    else {
+        console.warn('CubeUIKit: incorrect custom style definition:', names);
+        return;
+    }
+    handlerWithLookup = styleHandlerCacheWrapper(handlerWithLookup);
+    if (Array.isArray(names)) {
+        // just to pass type checking
+        names.forEach((name) => {
+            if (!STYLE_HANDLER_MAP[name]) {
+                STYLE_HANDLER_MAP[name] = [];
+            }
+            STYLE_HANDLER_MAP[name].push(handlerWithLookup);
+        });
+    }
+}
+export function defineStyleAlias(styleName, cssStyleName, converter) {
+    const styleHandler = createStyle(styleName, cssStyleName, converter);
+    if (!STYLE_HANDLER_MAP[styleName]) {
+        STYLE_HANDLER_MAP[styleName] = [];
+    }
+    STYLE_HANDLER_MAP[styleName].push(styleHandler);
+}
+
+        

package/dist/es/styles/justify.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export function justifyStyle({ justify }) {
+    if (typeof justify !== 'string')
+        return;
+    if (!justify)
+        return;
+    return {
+        'justify-items': justify,
+        'justify-content': justify,
+    };
+}
+justifyStyle.__lookupStyles = ['justify'];
+
+        

package/dist/es/styles/list.js

@@ -0,0 +1,84 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export const BASE_STYLES = [
+    'display',
+    'font',
+    'preset',
+    'hide',
+    'opacity',
+    'whiteSpace',
+];
+export const POSITION_STYLES = [
+    'gridArea',
+    'order',
+    'gridColumn',
+    'gridRow',
+    'placeSelf',
+    'alignSelf',
+    'justifySelf',
+    'zIndex',
+    'margin',
+];
+export const BLOCK_STYLES = [
+    'reset',
+    'padding',
+    'paddingInline',
+    'paddingBlock',
+    'shadow',
+    'border',
+    'radius',
+    'opacity',
+    'overflow',
+    'styledScrollbar',
+    'hide',
+    'outline',
+    'textAlign',
+];
+export const COLOR_STYLES = ['color', 'fill'];
+export const TEXT_STYLES = [
+    'textTransform',
+    'fontWeight',
+    'fontStyle',
+];
+export const DIMENSION_STYLES = [
+    'width',
+    'height',
+    'flexBasis',
+    'flexGrow',
+    'flexShrink',
+    'flex',
+];
+export const FLOW_STYLES = [
+    'flow',
+    'placeItems',
+    'placeContent',
+    'alignItems',
+    'alignContent',
+    'justifyItems',
+    'justifyContent',
+    'align',
+    'justify',
+    'gap',
+    'columnGap',
+    'rowGap',
+    'gridColumns',
+    'gridRows',
+    'gridTemplate',
+    'gridAreas',
+];
+export const CONTAINER_STYLES = [
+    ...BASE_STYLES,
+    ...COLOR_STYLES,
+    ...DIMENSION_STYLES,
+    ...POSITION_STYLES,
+    ...BLOCK_STYLES,
+    ...FLOW_STYLES,
+];
+export const OUTER_STYLES = [...POSITION_STYLES, ...DIMENSION_STYLES];
+
+        

package/dist/es/styles/margin.js

@@ -0,0 +1,46 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { parseStyle, DIRECTIONS, filterMods } from '../utils/styles';
+export function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft, }) {
+    if (typeof margin === 'number') {
+        margin = `${margin}px`;
+    }
+    if (!margin)
+        return '';
+    if (margin === true)
+        margin = '1x';
+    let { values, mods } = parseStyle(margin);
+    let directions = filterMods(mods, DIRECTIONS);
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    if (!directions.length) {
+        directions = DIRECTIONS;
+    }
+    const marginDirs = [marginTop, marginRight, marginBottom, marginLeft];
+    return directions.reduce((styles, dir) => {
+        const index = DIRECTIONS.indexOf(dir);
+        if (((!!(index % 2) && marginInline == null)
+            || (!(index % 2) && marginBlock == null))
+            && marginDirs[index] == null) {
+            styles[`margin-${dir}`] = values[index] || values[index % 2] || values[0];
+        }
+        return styles;
+    }, {});
+}
+marginStyle.__lookupStyles = [
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'marginBlock',
+    'marginInline',
+];
+
+        

package/dist/es/styles/marginBlock.js

@@ -0,0 +1,32 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function marginBlockStyle({ marginBlock: margin, marginTop, marginBottom, }) {
+    if (typeof margin === 'number') {
+        margin = `${margin}px`;
+    }
+    if (!margin)
+        return '';
+    if (margin === true)
+        margin = '1x';
+    let { values } = parseStyle(margin);
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    const styles = {};
+    if (marginTop == null) {
+        styles['margin-top'] = values[0];
+    }
+    if (marginBottom == null) {
+        styles['margin-bottom'] = values[1] || values[0];
+    }
+    return styles;
+}
+marginBlockStyle.__lookupStyles = ['marginBlock', 'marginTop', 'marginBottom'];
+
+        

package/dist/es/styles/marginInline.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function marginInlineStyle({ marginInline: margin, marginLeft, marginRight, }) {
+    if (typeof margin === 'number') {
+        margin = `${margin}px`;
+    }
+    if (!margin)
+        return '';
+    if (margin === true)
+        margin = '1x';
+    let { values } = parseStyle(margin);
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    const styles = {};
+    if (marginLeft == null) {
+        styles['margin-left'] = values[0];
+    }
+    if (marginRight == null) {
+        styles['margin-right'] = values[1] || values[0];
+    }
+    return styles;
+}
+marginInlineStyle.__lookupStyles = [
+    'marginInline',
+    'marginLeft',
+    'marginRight',
+];
+
+        

package/dist/es/styles/outline.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function outlineStyle({ outline }) {
+    if (!outline && outline !== 0)
+        return '';
+    if (outline === true)
+        outline = '1ow';
+    const { values, color, mods } = parseStyle(String(outline));
+    const inset = mods.includes('inset');
+    const size = values[0] || 'var(--outline-width)';
+    const outlineColor = color || 'var(--outline-color)';
+    return {
+        '--local-outline-box-shadow': `${inset ? 'inset ' : ''}0 0 0 ${size} ${outlineColor}`,
+    };
+}
+outlineStyle.__lookupStyles = ['outline'];
+
+