@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/cjs/styles/index.js

@@ -0,0 +1,105 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineStyleAlias = exports.defineCustomStyle = exports.STYLE_HANDLER_MAP = exports.createStyle = void 0;
+const styles_1 = require("../utils/styles");
+const string_1 = require("../utils/string");
+const CACHE = {};
+function createStyle(styleName, cssStyle, converter) {
+    const key = `${styleName}.${cssStyle || ''}`;
+    if (!CACHE[key]) {
+        CACHE[key] = (0, styles_1.styleHandlerCacheWrapper)((styleMap) => {
+            let styleValue = styleMap[styleName];
+            if (styleValue == null || styleValue === false)
+                return;
+            const finalCssStyle = cssStyle || (0, string_1.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 = (0, styles_1.strToRgb)(styleValue);
+                const { color, name } = (0, styles_1.parseColor)(styleValue);
+                if (name && rgba) {
+                    return {
+                        [finalCssStyle]: `var(--${name}-color, ${rgba})`,
+                        [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb, ${(0, styles_1.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`]: (0, styles_1.getRgbValuesFromRgbaString)(rgba).join(', '),
+                    };
+                }
+                return {
+                    [finalCssStyle]: color,
+                };
+            }
+            const { value } = (0, styles_1.parseStyle)(styleValue, 1);
+            return { [finalCssStyle]: value };
+        });
+        CACHE[key].__lookupStyles = [styleName];
+    }
+    return CACHE[key];
+}
+exports.createStyle = createStyle;
+exports.STYLE_HANDLER_MAP = {};
+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 = (0, styles_1.styleHandlerCacheWrapper)(handlerWithLookup);
+    if (Array.isArray(names)) {
+        // just to pass type checking
+        names.forEach((name) => {
+            if (!exports.STYLE_HANDLER_MAP[name]) {
+                exports.STYLE_HANDLER_MAP[name] = [];
+            }
+            exports.STYLE_HANDLER_MAP[name].push(handlerWithLookup);
+        });
+    }
+}
+exports.defineCustomStyle = defineCustomStyle;
+function defineStyleAlias(styleName, cssStyleName, converter) {
+    const styleHandler = createStyle(styleName, cssStyleName, converter);
+    if (!exports.STYLE_HANDLER_MAP[styleName]) {
+        exports.STYLE_HANDLER_MAP[styleName] = [];
+    }
+    exports.STYLE_HANDLER_MAP[styleName].push(styleHandler);
+}
+exports.defineStyleAlias = defineStyleAlias;
+
+        

package/dist/cjs/styles/justify.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.justifyStyle = void 0;
+function justifyStyle({ justify }) {
+    if (typeof justify !== 'string')
+        return;
+    if (!justify)
+        return;
+    return {
+        'justify-items': justify,
+        'justify-content': justify,
+    };
+}
+exports.justifyStyle = justifyStyle;
+justifyStyle.__lookupStyles = ['justify'];
+
+        

package/dist/cjs/styles/list.js

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

package/dist/cjs/styles/margin.js

@@ -0,0 +1,50 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.marginStyle = void 0;
+const styles_1 = require("../utils/styles");
+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 } = (0, styles_1.parseStyle)(margin);
+    let directions = (0, styles_1.filterMods)(mods, styles_1.DIRECTIONS);
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    if (!directions.length) {
+        directions = styles_1.DIRECTIONS;
+    }
+    const marginDirs = [marginTop, marginRight, marginBottom, marginLeft];
+    return directions.reduce((styles, dir) => {
+        const index = styles_1.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;
+    }, {});
+}
+exports.marginStyle = marginStyle;
+marginStyle.__lookupStyles = [
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'marginBlock',
+    'marginInline',
+];
+
+        

package/dist/cjs/styles/marginBlock.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.marginBlockStyle = void 0;
+const styles_1 = require("../utils/styles");
+function marginBlockStyle({ marginBlock: margin, marginTop, marginBottom, }) {
+    if (typeof margin === 'number') {
+        margin = `${margin}px`;
+    }
+    if (!margin)
+        return '';
+    if (margin === true)
+        margin = '1x';
+    let { values } = (0, styles_1.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;
+}
+exports.marginBlockStyle = marginBlockStyle;
+marginBlockStyle.__lookupStyles = ['marginBlock', 'marginTop', 'marginBottom'];
+
+        

package/dist/cjs/styles/marginInline.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.marginInlineStyle = void 0;
+const styles_1 = require("../utils/styles");
+function marginInlineStyle({ marginInline: margin, marginLeft, marginRight, }) {
+    if (typeof margin === 'number') {
+        margin = `${margin}px`;
+    }
+    if (!margin)
+        return '';
+    if (margin === true)
+        margin = '1x';
+    let { values } = (0, styles_1.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;
+}
+exports.marginInlineStyle = marginInlineStyle;
+marginInlineStyle.__lookupStyles = [
+    'marginInline',
+    'marginLeft',
+    'marginRight',
+];
+
+        

package/dist/cjs/styles/outline.js

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.outlineStyle = void 0;
+const styles_1 = require("../utils/styles");
+function outlineStyle({ outline }) {
+    if (!outline && outline !== 0)
+        return '';
+    if (outline === true)
+        outline = '1ow';
+    const { values, color, mods } = (0, styles_1.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}`,
+    };
+}
+exports.outlineStyle = outlineStyle;
+outlineStyle.__lookupStyles = ['outline'];
+
+        

package/dist/cjs/styles/padding.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.paddingStyle = void 0;
+const styles_1 = require("../utils/styles");
+function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft, }) {
+    if (typeof padding === 'number') {
+        padding = `${padding}px`;
+    }
+    if (!padding)
+        return '';
+    if (padding === true)
+        padding = '1x';
+    let { values, mods } = (0, styles_1.parseStyle)(padding);
+    let directions = (0, styles_1.filterMods)(mods, styles_1.DIRECTIONS);
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    if (!directions.length) {
+        directions = styles_1.DIRECTIONS;
+    }
+    const paddingDirs = [paddingTop, paddingRight, paddingBottom, paddingLeft];
+    return directions.reduce((styles, dir) => {
+        const index = styles_1.DIRECTIONS.indexOf(dir);
+        if (((!!(index % 2) && paddingInline == null)
+            || (!(index % 2) && paddingBlock == null))
+            && paddingDirs[index] == null) {
+            styles[`padding-${dir}`]
+                = values[index] || values[index % 2] || values[0];
+        }
+        return styles;
+    }, {});
+}
+exports.paddingStyle = paddingStyle;
+paddingStyle.__lookupStyles = [
+    'padding',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingBlock',
+    'paddingInline',
+];
+
+        

package/dist/cjs/styles/paddingBlock.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.paddingBlockStyle = void 0;
+const styles_1 = require("../utils/styles");
+function paddingBlockStyle({ paddingBlock: padding, paddingTop, paddingBottom, }) {
+    if (typeof padding === 'number') {
+        padding = `${padding}px`;
+    }
+    if (!padding)
+        return '';
+    if (padding === true)
+        padding = '1x';
+    let { values } = (0, styles_1.parseStyle)(padding);
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    const styles = {};
+    if (paddingTop == null) {
+        styles['padding-top'] = values[0];
+    }
+    if (paddingBottom == null) {
+        styles['padding-bottom'] = values[1] || values[0];
+    }
+    return styles;
+}
+exports.paddingBlockStyle = paddingBlockStyle;
+paddingBlockStyle.__lookupStyles = [
+    'paddingBlock',
+    'paddingTop',
+    'paddingBottom',
+];
+
+        

package/dist/cjs/styles/paddingInline.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.paddingInlineStyle = void 0;
+const styles_1 = require("../utils/styles");
+function paddingInlineStyle({ paddingInline: padding, paddingLeft, paddingRight, }) {
+    if (typeof padding === 'number') {
+        padding = `${padding}px`;
+    }
+    if (!padding)
+        return '';
+    if (padding === true)
+        padding = '1x';
+    let { values } = (0, styles_1.parseStyle)(padding);
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    const styles = {};
+    if (paddingLeft == null) {
+        styles['padding-left'] = values[0];
+    }
+    if (paddingRight == null) {
+        styles['padding-right'] = values[1] || values[0];
+    }
+    return styles;
+}
+exports.paddingInlineStyle = paddingInlineStyle;
+paddingInlineStyle.__lookupStyles = [
+    'paddingInline',
+    'paddingLeft',
+    'paddingRight',
+];
+
+        

package/dist/cjs/styles/predefined.js

@@ -0,0 +1,122 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const gap_1 = require("./gap");
+const flow_1 = require("./flow");
+const reset_1 = require("./reset");
+const color_1 = require("./color");
+const fill_1 = require("./fill");
+const width_1 = require("./width");
+const height_1 = require("./height");
+const radius_1 = require("./radius");
+const border_1 = require("./border");
+const shadow_1 = require("./shadow");
+const padding_1 = require("./padding");
+const paddingBlock_1 = require("./paddingBlock");
+const paddingInline_1 = require("./paddingInline");
+const preset_1 = require("./preset");
+const fontStyle_1 = require("./fontStyle");
+const margin_1 = require("./margin");
+const marginBlock_1 = require("./marginBlock");
+const marginInline_1 = require("./marginInline");
+const font_1 = require("./font");
+const outline_1 = require("./outline");
+const transition_1 = require("./transition");
+const groupRadius_1 = require("./groupRadius");
+const boxShadow_combinator_1 = require("./boxShadow.combinator");
+const styledScrollbar_1 = require("./styledScrollbar");
+const display_1 = require("./display");
+const align_1 = require("./align");
+const justify_1 = require("./justify");
+const index_1 = require("./index");
+const numberConverter = (val) => {
+    if (typeof val === 'number') {
+        return `${val}px`;
+    }
+    return val;
+};
+const columnsConverter = (val) => {
+    if (typeof val === 'number') {
+        return 'minmax(1px, 1fr) '.repeat(val).trim();
+    }
+    return;
+};
+const rowsConverter = (val) => {
+    if (typeof val === 'number') {
+        return 'auto '.repeat(val).trim();
+    }
+    return;
+};
+// Manually define styles that are used in other custom styles.
+// Otherwise, they won't be handled as expected.
+(0, index_1.defineStyleAlias)('fontSize');
+(0, index_1.defineStyleAlias)('lineHeight');
+(0, index_1.defineStyleAlias)('fontWeight');
+(0, index_1.defineStyleAlias)('fontStyle');
+(0, index_1.defineStyleAlias)('letterSpacing');
+(0, index_1.defineStyleAlias)('textTransform');
+(0, index_1.defineStyleAlias)('fontFamily');
+(0, index_1.defineStyleAlias)('paddingTop');
+(0, index_1.defineStyleAlias)('paddingRight');
+(0, index_1.defineStyleAlias)('paddingBottom');
+(0, index_1.defineStyleAlias)('paddingLeft');
+(0, index_1.defineStyleAlias)('marginTop');
+(0, index_1.defineStyleAlias)('marginRight');
+(0, index_1.defineStyleAlias)('marginBottom');
+(0, index_1.defineStyleAlias)('marginLeft');
+// Coordinates
+(0, index_1.defineStyleAlias)('top', 'top', numberConverter);
+(0, index_1.defineStyleAlias)('right', 'right', numberConverter);
+(0, index_1.defineStyleAlias)('bottom', 'bottom', numberConverter);
+(0, index_1.defineStyleAlias)('left', 'left', numberConverter);
+// Style aliases
+(0, index_1.defineStyleAlias)('gridAreas', 'grid-template-areas');
+(0, index_1.defineStyleAlias)('gridColumns', 'grid-template-columns', columnsConverter);
+(0, index_1.defineStyleAlias)('gridRows', 'grid-template-rows', rowsConverter);
+(0, index_1.defineStyleAlias)('gridTemplate', 'grid-template', (val) => {
+    if (typeof val !== 'string')
+        return;
+    return val
+        .split('/')
+        .map((s, i) => (i ? columnsConverter : rowsConverter)(s))
+        .join('/');
+});
+[
+    display_1.displayStyle,
+    transition_1.transitionStyle,
+    reset_1.resetStyle,
+    fill_1.fillStyle,
+    width_1.widthStyle,
+    margin_1.marginStyle,
+    marginBlock_1.marginBlockStyle,
+    marginInline_1.marginInlineStyle,
+    gap_1.gapStyle,
+    flow_1.flowStyle,
+    color_1.colorStyle,
+    height_1.heightStyle,
+    radius_1.radiusStyle,
+    border_1.borderStyle,
+    shadow_1.shadowStyle,
+    padding_1.paddingStyle,
+    paddingBlock_1.paddingBlockStyle,
+    paddingInline_1.paddingInlineStyle,
+    align_1.alignStyle,
+    justify_1.justifyStyle,
+    preset_1.presetStyle,
+    boxShadow_combinator_1.boxShadowCombinator,
+    outline_1.outlineStyle,
+    font_1.fontStyle,
+    fontStyle_1.fontStyleStyle,
+    groupRadius_1.groupRadiusAttr,
+    styledScrollbar_1.styledScrollbarStyle,
+]
+    // @ts-ignore
+    .forEach((handler) => (0, index_1.defineCustomStyle)(handler));
+
+        

package/dist/cjs/styles/preset.js

@@ -0,0 +1,55 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.presetStyle = void 0;
+const styles_1 = require("../utils/styles");
+function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacing, fontWeight, fontStyle, font, }) {
+    if (!preset)
+        return '';
+    if (preset === true)
+        preset = '';
+    const { mods } = (0, styles_1.parseStyle)(preset);
+    const name = mods[0] || 'default';
+    const styles = {};
+    if (!fontSize) {
+        styles['font-size'] = styles['--font-size'] = `var(--${name}-font-size, var(--initial-font-size, inherit))`;
+    }
+    if (!lineHeight) {
+        styles['line-height'] = styles['--line-height'] = `var(--${name}-line-height, var(--initial-line-height, 1.5))`;
+    }
+    if (!letterSpacing) {
+        styles['letter-spacing'] = styles['--letter-spacing'] = `var(--${name}-letter-spacing, var(--initial-letter-spacing, 0))`;
+    }
+    if (!fontWeight) {
+        styles['font-weight'] = styles['--font-weight'] = `var(--${name}-font-weight, var(--initial-font-weight, 400))`;
+    }
+    if (!fontStyle) {
+        styles['font-style'] = styles['--font-style'] = `var(--${name}-font-style, var(--initial-font-style, normal))`;
+    }
+    if (!textTransform) {
+        styles['text-transform'] = styles['--text-transform'] = `var(--${name}-text-transform, var(--initial-text-transform, none))`;
+    }
+    if (!font) {
+        styles['font-family'] = styles['--font-family'] = `var(--${name}-font-family, var(--font))`;
+    }
+    return styles;
+}
+exports.presetStyle = presetStyle;
+presetStyle.__lookupStyles = [
+    'preset',
+    'fontSize',
+    'lineHeight',
+    'letterSpacing',
+    'textTransform',
+    'fontWeight',
+    'fontStyle',
+    'font',
+];
+
+