@cube-dev/ui-kit 0.8.8 → 0.9.2

package/dist/cjs/styled/styled.js

@@ -0,0 +1,107 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styled = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importStar(require("styled-components"));
+const react_1 = require("react");
+const react_is_1 = require("react-is");
+const BreakpointsProvider_1 = require("../providers/BreakpointsProvider");
+const react_2 = require("../utils/react");
+const StylesProvider_1 = require("../providers/StylesProvider");
+const renderStyles_1 = require("../utils/renderStyles");
+const responsive_1 = require("../utils/responsive");
+const list_1 = require("../styles/list");
+const mergeStyles_1 = require("../utils/mergeStyles");
+const warnings_1 = require("../utils/warnings");
+// Implementation
+function styled(Component, options) {
+    var _a, _b, _c, _d, _e, _f;
+    (0, warnings_1.deprecationWarning)((options === null || options === void 0 ? void 0 : options.props) == null, {
+        property: 'props',
+        name: 'styled api',
+        betterAlternative: "inline props directly in styled(), eg: styled({ type: 'confirm' })",
+    });
+    if (typeof Component === 'string') {
+        let selector = Component;
+        let styles = options;
+        let Element = (0, styled_components_1.createGlobalStyle) `${(css) => css}`;
+        const _Component = ({ breakpoints }) => {
+            let contextBreakpoints = (0, react_1.useContext)(BreakpointsProvider_1.BreakpointsContext);
+            let zones = (0, responsive_1.pointsToZones)(breakpoints || contextBreakpoints);
+            let css = `${styles ? `\n{}${selector}{${(0, renderStyles_1.renderStyles)(styles, zones)}}` : ''}`;
+            return (0, jsx_runtime_1.jsx)(Element, { css: css }, void 0);
+        };
+        _Component.displayName = `CubeStyled(${(_b = (_a = Element.displayName) !== null && _a !== void 0 ? _a : Element.name) !== null && _b !== void 0 ? _b : Component})`;
+        return _Component;
+    }
+    if ((0, react_is_1.isValidElementType)(Component)) {
+        let { styles: extendStyles, props: legacyDefaultProps, name, tag: extendTag, ...defaultProps } = options !== null && options !== void 0 ? options : {};
+        const _StyledComponent = (0, react_1.forwardRef)((props, ref) => {
+            const { styles, styleName, as, ...restProps } = props;
+            const mergedStyles = (0, react_1.useMemo)(() => {
+                if (extendStyles != null && styles != null) {
+                    return (0, mergeStyles_1.mergeStyles)(extendStyles, styles);
+                }
+                return extendStyles;
+            }, [styles]);
+            return ((0, jsx_runtime_1.jsx)(Component, { ref: ref, ...legacyDefaultProps, ...defaultProps, ...restProps, styles: mergedStyles, styleName: styleName !== null && styleName !== void 0 ? styleName : name, as: as !== null && as !== void 0 ? as : extendTag }, void 0));
+        });
+        _StyledComponent.displayName = `CubeStyled(${(_d = (_c = Component.displayName) !== null && _c !== void 0 ? _c : Component.name) !== null && _d !== void 0 ? _d : 'Anonymous'})`;
+        return _StyledComponent;
+    }
+    options = Component;
+    let { name, tag = 'div', css: defaultCSS, styles: defaultStyles, props: legacyDefaultProps, styleProps, ...defaultProps } = options;
+    let Element = styled_components_1.default[tag](({ css }) => css);
+    let _StyledComponent = (0, react_1.forwardRef)((allProps, ref) => {
+        let { as, styles, styleName, breakpoints, mods, element, qa, qaVal, css, ...props } = allProps;
+        let propStyles = (0, react_1.useMemo)(() => (styleProps
+            ? styleProps.concat(list_1.BASE_STYLES)
+            : list_1.BASE_STYLES).reduce((map, prop) => {
+            if (prop in props) {
+                map[prop] = props[prop];
+                delete props[prop];
+            }
+            return map;
+        }, {}), [props]);
+        let contextStyles = (0, StylesProvider_1.useContextStyles)(styleName !== null && styleName !== void 0 ? styleName : name, props);
+        let allStyles = (0, react_1.useMemo)(() => (0, mergeStyles_1.mergeStyles)(defaultStyles, contextStyles, styles, propStyles), [contextStyles, styles, propStyles]);
+        let contextBreakpoints = (0, react_1.useContext)(BreakpointsProvider_1.BreakpointsContext);
+        let zones = (0, responsive_1.pointsToZones)(breakpoints !== null && breakpoints !== void 0 ? breakpoints : contextBreakpoints);
+        css = `${typeof defaultCSS === 'function' ? defaultCSS(props) : defaultCSS !== null && defaultCSS !== void 0 ? defaultCSS : ''}${typeof css === 'function' ? css(props) : css !== null && css !== void 0 ? css : ''}${allStyles ? (0, renderStyles_1.renderStyles)(allStyles, zones) : ''}`;
+        if (mods) {
+            Object.assign(props, (0, react_2.modAttrs)(mods));
+        }
+        return ((0, jsx_runtime_1.jsx)(Element, { as: as !== null && as !== void 0 ? as : tag, "data-element": element, "data-qa": qa, "data-qaval": qaVal, ...legacyDefaultProps, ...defaultProps, ...props, ref: ref, css: css }, void 0));
+    });
+    _StyledComponent.displayName = `CubeStyled(${(_f = (_e = Element.displayName) !== null && _e !== void 0 ? _e : Element.name) !== null && _f !== void 0 ? _f : tag})`;
+    return _StyledComponent;
+}
+exports.styled = styled;
+
+        

package/dist/cjs/styles/align.js

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

package/dist/cjs/styles/border.js

@@ -0,0 +1,52 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.borderStyle = void 0;
+const styles_1 = require("../utils/styles");
+const BORDER_STYLES = [
+    'none',
+    'hidden',
+    'dotted',
+    'dashed',
+    'solid',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'outset',
+];
+/**
+ *
+ * @param border
+ * @return {{border: string}|*}
+ */
+function borderStyle({ border }) {
+    if (!border && border !== 0)
+        return;
+    if (border === true)
+        border = '1bw';
+    const { values, mods, color } = (0, styles_1.parseStyle)(String(border));
+    const directions = (0, styles_1.filterMods)(mods, styles_1.DIRECTIONS);
+    const typeMods = (0, styles_1.filterMods)(mods, BORDER_STYLES);
+    const value = values[0] || 'var(--border-width)';
+    const type = typeMods[0] || 'solid';
+    const borderColor = color || 'var(--border-color)';
+    const styleValue = [value, type, borderColor].join(' ');
+    if (!directions.length) {
+        return { border: styleValue };
+    }
+    return mods.reduce((styles, dir) => {
+        styles[`border-${dir}`] = styleValue;
+        return styles;
+    }, {});
+}
+exports.borderStyle = borderStyle;
+borderStyle.__lookupStyles = ['border'];
+
+        

package/dist/cjs/styles/boxShadow.combinator.js

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.boxShadowCombinator = void 0;
+function boxShadowCombinator(styles) {
+    const values = boxShadowCombinator.__lookupStyles.reduce((list, style) => {
+        const value = styles[style];
+        if (value) {
+            list.push(`var(--local-${style}-box-shadow)`);
+        }
+        return list;
+    }, []);
+    if (!values.length)
+        return '';
+    return { 'box-shadow': values.join(', ') };
+}
+exports.boxShadowCombinator = boxShadowCombinator;
+boxShadowCombinator.__lookupStyles = ['outline', 'shadow'];
+
+        

package/dist/cjs/styles/color.js

@@ -0,0 +1,43 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorStyle = void 0;
+const styles_1 = require("../utils/styles");
+function colorStyle({ color }) {
+    if (!color)
+        return '';
+    if (color === true)
+        color = 'currentColor';
+    if (color.startsWith('#')) {
+        color = (0, styles_1.parseColor)(color).color || color;
+    }
+    const match = color.match(/var\(--(.+?)-color/);
+    let name = '';
+    if (match) {
+        name = match[1];
+    }
+    const styles = [
+        {
+            color: color,
+        },
+    ];
+    if (name) {
+        styles.push([
+            {
+                '--current-color': `var(--${name}-color, ${name})`,
+                '--current-color-rgb': `var(--${name}-color-rgb)`,
+            },
+        ]);
+    }
+    return styles;
+}
+exports.colorStyle = colorStyle;
+colorStyle.__lookupStyles = ['color'];
+
+        

package/dist/cjs/styles/dimension.js

@@ -0,0 +1,89 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dimensionStyle = void 0;
+const styles_1 = require("../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'];
+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 } = (0, styles_1.parseStyle)(val);
+        (0, styles_1.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;
+    };
+}
+exports.dimensionStyle = dimensionStyle;
+
+        

package/dist/cjs/styles/display.js

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.displayStyle = void 0;
+function displayStyle({ display, hide }) {
+    return { display: !hide ? display : 'none' };
+}
+exports.displayStyle = displayStyle;
+displayStyle.__lookupStyles = ['display', 'hide'];
+
+        

package/dist/cjs/styles/fill.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fillStyle = void 0;
+const styles_1 = require("../utils/styles");
+function fillStyle({ fill }) {
+    if (!fill)
+        return '';
+    if (fill.startsWith('#')) {
+        fill = (0, styles_1.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;
+}
+exports.fillStyle = fillStyle;
+fillStyle.__lookupStyles = ['fill'];
+
+        

package/dist/cjs/styles/flow.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flowStyle = void 0;
+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;
+}
+exports.flowStyle = flowStyle;
+flowStyle.__lookupStyles = ['display', 'flow'];
+
+        

package/dist/cjs/styles/font.js

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontStyle = void 0;
+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,
+    };
+}
+exports.fontStyle = fontStyle;
+fontStyle.__lookupStyles = ['font'];
+
+        

package/dist/cjs/styles/fontStyle.js

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontStyleStyle = void 0;
+function fontStyleStyle({ fontStyle }) {
+    if (fontStyle === true) {
+        fontStyle = 'italic';
+    }
+    if (fontStyle !== 'inherit') {
+        fontStyle = fontStyle ? 'italic' : 'normal';
+    }
+    return { 'font-style': fontStyle };
+}
+exports.fontStyleStyle = fontStyleStyle;
+fontStyleStyle.__lookupStyles = ['fontStyle'];
+
+        

package/dist/cjs/styles/gap.js

@@ -0,0 +1,67 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gapStyle = void 0;
+const styles_1 = require("../utils/styles");
+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 } = (0, styles_1.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,
+        };
+}
+exports.gapStyle = gapStyle;
+gapStyle.__lookupStyles = ['display', 'flow', 'gap'];
+
+        

package/dist/cjs/styles/groupRadius.js

@@ -0,0 +1,64 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupRadiusAttr = void 0;
+const styles_1 = require("../utils/styles");
+const MAP = {
+    row: ['* 0 0 *', '0 * * 0'],
+    column: ['* * 0 0', '0 0 * *'],
+};
+function groupRadiusAttr({ groupRadius, flow }) {
+    if (!groupRadius)
+        return '';
+    if (groupRadius === true)
+        groupRadius = '1r';
+    const { values, mods } = (0, styles_1.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',
+        },
+    ];
+}
+exports.groupRadiusAttr = groupRadiusAttr;
+groupRadiusAttr.__lookupStyles = ['groupRadius', 'flow'];
+
+        

package/dist/cjs/styles/height.js

@@ -0,0 +1,19 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.heightStyle = void 0;
+const dimension_1 = require("./dimension");
+const dimension = (0, dimension_1.dimensionStyle)('height');
+function heightStyle({ height }) {
+    return dimension(height);
+}
+exports.heightStyle = heightStyle;
+heightStyle.__lookupStyles = ['height'];
+
+