@cube-dev/ui-kit 0.9.4 → 0.9.7

package/cjs/styles/marginBlock.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * 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/cjs/styles/marginInline.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * 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/cjs/styles/outline.js

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * 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/cjs/styles/padding.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * 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/cjs/styles/paddingBlock.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * 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/cjs/styles/paddingInline.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * 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/cjs/styles/predefined.js

@@ -0,0 +1,162 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.predefine = exports.defineStyleAlias = exports.defineCustomStyle = exports.STYLE_HANDLER_MAP = void 0;
+const styles_1 = require("../utils/styles");
+const gap_1 = require("./gap");
+const fill_1 = require("./fill");
+const flow_1 = require("./flow");
+const reset_1 = require("./reset");
+const color_1 = require("./color");
+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 createStyle_1 = require("./createStyle");
+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;
+};
+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 = (0, createStyle_1.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;
+function predefine() {
+    // Manually define styles that are used in other custom styles.
+    // Otherwise, they won't be handled as expected.
+    defineStyleAlias('fontSize');
+    defineStyleAlias('lineHeight');
+    defineStyleAlias('fontWeight');
+    defineStyleAlias('fontStyle');
+    defineStyleAlias('letterSpacing');
+    defineStyleAlias('textTransform');
+    defineStyleAlias('fontFamily');
+    defineStyleAlias('paddingTop');
+    defineStyleAlias('paddingRight');
+    defineStyleAlias('paddingBottom');
+    defineStyleAlias('paddingLeft');
+    defineStyleAlias('marginTop');
+    defineStyleAlias('marginRight');
+    defineStyleAlias('marginBottom');
+    defineStyleAlias('marginLeft');
+    // Coordinates
+    defineStyleAlias('top', 'top', numberConverter);
+    defineStyleAlias('right', 'right', numberConverter);
+    defineStyleAlias('bottom', 'bottom', numberConverter);
+    defineStyleAlias('left', 'left', numberConverter);
+    // Style aliases
+    defineStyleAlias('gridAreas', 'grid-template-areas');
+    defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);
+    defineStyleAlias('gridRows', 'grid-template-rows', rowsConverter);
+    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) => defineCustomStyle(handler));
+    return { STYLE_HANDLER_MAP: exports.STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };
+}
+exports.predefine = predefine;
+
+        

package/cjs/styles/preset.js

@@ -0,0 +1,55 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * 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',
+];
+
+        

package/cjs/styles/radius.js

@@ -0,0 +1,76 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radiusStyle = void 0;
+const styles_1 = require("../utils/styles");
+const PROP = 'var(--radius)';
+const SHARP = 'var(--leaf-sharp-radius)';
+function radiusStyle({ radius }) {
+    if (typeof radius === 'number') {
+        radius = `${radius}px`;
+    }
+    if (!radius)
+        return '';
+    if (radius === true)
+        radius = '1r';
+    let { mods, values } = (0, styles_1.parseStyle)(radius, 1);
+    if (mods.includes('round')) {
+        values = ['9999rem'];
+    }
+    else if (mods.includes('ellipse')) {
+        values = ['50%'];
+    }
+    else if (!values.length) {
+        values = [PROP];
+    }
+    if (mods.includes('leaf')) {
+        values = [
+            values[1] || SHARP,
+            values[0] || PROP,
+            values[1] || SHARP,
+            values[0] || PROP,
+        ];
+    }
+    else if (mods.includes('backleaf')) {
+        values = [
+            values[0] || PROP,
+            values[1] || SHARP,
+            values[0] || PROP,
+            values[1] || SHARP,
+        ];
+    }
+    else if (mods.length) {
+        const arr = ['0', '0', '0', '0'];
+        let flag = false;
+        styles_1.DIRECTIONS.forEach((dir, i) => {
+            if (!mods.includes(dir))
+                return;
+            flag = true;
+            arr[i] = values[0] || PROP;
+            arr[(i + 1) % 4] = values[0] || PROP;
+        });
+        if (flag) {
+            values = arr;
+        }
+    }
+    return [
+        {
+            '--local-radius': values.join(' '),
+            'border-radius': 'var(--local-radius)',
+        },
+        {
+            $: '>*',
+            '--context-radius': values.join(' '),
+        },
+    ];
+}
+exports.radiusStyle = radiusStyle;
+radiusStyle.__lookupStyles = ['radius'];
+
+        

package/cjs/styles/reset.js

@@ -0,0 +1,104 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetStyle = void 0;
+const styles_1 = require("../utils/styles");
+const RESET_MAP = {
+    input: [
+        {
+            css: `
+-webkit-appearance: none;
+font-family: inherit;
+font-weight: inherit;
+word-spacing: initial;
+-webkit-text-fill-color: currentColor;
+box-sizing: border-box;
+user-select: auto;
+resize: none;
+`,
+        },
+        {
+            $: '::-webkit-search-cancel-button',
+            css: 'display: none',
+        },
+        {
+            $: [
+                ':-webkit-autofill',
+                ':-webkit-autofill:hover',
+                ':-webkit-autofill:focus',
+            ],
+            css: `
+caret-color: var(--purple-color);
+-webkit-text-fill-color: var(--purple-color);
+-webkit-box-shadow: 0 0 0px 9999rem var(--white-color) inset;
+box-shadow: 0 0 0px 9999rem var(--white-color) inset;
+font-family: inherit;
+font-size: inherit;
+line-height: inherit;
+`,
+        },
+        {
+            $: '[disabled]',
+            css: `
+color: inherit;
+background: transparent;
+-webkit-opacity: 1;
+`,
+        },
+        {
+            $: '::placeholder',
+            css: `
+-webkit-text-fill-color: var(--local-placeholder-color);
+color: var(--local-placeholder-color);
+filter: saturate(.33);
+`,
+        },
+        {
+            $: '::-webkit-search-cancel-button',
+            css: `
+display: none;
+-webkit-appearance: none;
+`,
+        },
+        {
+            $: ':not([disabled])::placeholder',
+            css: '--local-placeholder-color: var(--placeholder-color, rgba(var(--dark-color-rgb), .3));\n',
+        },
+    ],
+    button: [
+        {
+            css: `
+transition: all var(--transition) linear;
+background: transparent;
+border: none;
+outline: none;
+appearance: none;
+position: relative;
+touch-action: manipulation;
+-webkit-tap-highlight-color: transparent;
+text-decoration: none;
+`,
+        },
+    ],
+};
+function resetStyle({ reset }) {
+    if (!reset)
+        return;
+    const { mods } = (0, styles_1.parseStyle)(reset, 1);
+    return mods.reduce((sum, mod) => {
+        if (RESET_MAP[mod]) {
+            sum.push(...RESET_MAP[mod]);
+        }
+        return sum;
+    }, []);
+}
+exports.resetStyle = resetStyle;
+resetStyle.__lookupStyles = ['reset'];
+
+        

package/cjs/styles/shadow.js

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shadowStyle = void 0;
+const styles_1 = require("../utils/styles");
+function shadowStyle({ shadow }) {
+    if (!shadow)
+        return '';
+    if (shadow === true)
+        shadow = '0 5px 15px #shadow';
+    const { values, mods, color } = (0, styles_1.parseStyle)(shadow);
+    const mod = mods[0] || '';
+    const shadowColor = color || 'var(--shadow-color)';
+    return {
+        '--local-shadow-box-shadow': [mod, ...values, shadowColor].join(' '),
+    };
+}
+exports.shadowStyle = shadowStyle;
+shadowStyle.__lookupStyles = ['shadow'];
+
+