@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/cjs/styles/radius.js

@@ -0,0 +1,76 @@
+/**
+ * @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.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/dist/cjs/styles/reset.js

@@ -0,0 +1,104 @@
+/**
+ * @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.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/dist/cjs/styles/shadow.js

@@ -0,0 +1,27 @@
+/**
+ * @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.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'];
+
+        

package/dist/cjs/styles/styledScrollbar.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.styledScrollbarStyle = void 0;
+function styledScrollbarStyle({ styledScrollbar: val }) {
+    if (val == null)
+        return null;
+    if (!val) {
+        return [
+            {
+                $: '::-webkit-scrollbar',
+                display: 'none',
+            },
+            {
+                'scrollbar-width': 'none',
+            },
+        ];
+    }
+    return [
+        {
+            $: '::-webkit-scrollbar',
+            width: 'var(--scrollbar-width)',
+            height: 'var(--scrollbar-width)',
+        },
+        {
+            $: '::-webkit-scrollbar-track',
+            'background-color': 'var(--scrollbar-bg-color)',
+        },
+        {
+            $: '::-webkit-scrollbar-thumb',
+            'background-color': 'var(--scrollbar-thumb-color)',
+            'border-radius': 'var(--scrollbar-radius)',
+            border: 'var(--scrollbar-outline-width) solid var(--scrollbar-outline-color)',
+            'background-clip': 'padding-box',
+        },
+        {
+            $: '::-webkit-scrollbar-corner',
+            'background-color': 'var(--scrollbar-corner-color)',
+        },
+        {
+            'scrollbar-width': 'thin',
+            'scrollbar-color': 'var(--scrollbar-bg-color) var(--scrollbar-thumb-color)',
+        },
+    ];
+}
+exports.styledScrollbarStyle = styledScrollbarStyle;
+styledScrollbarStyle.__lookupStyles = ['styledScrollbar'];
+
+        

package/dist/cjs/styles/transition.js

@@ -0,0 +1,88 @@
+/**
+ * @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.transitionStyle = exports.DEFAULT_TIMING = void 0;
+const styles_1 = require("../utils/styles");
+const MAP = {
+    move: ['transform'],
+    rotate: ['transform'],
+    scale: ['transform'],
+    placeSelf: ['transform', 'top', 'right', 'bottom', 'left'],
+    fill: ['background-color'],
+    border: ['border', 'box-shadow'],
+    filter: ['filter', 'backdrop-filter'],
+    radius: ['border-radius'],
+    shadow: ['box-shadow'],
+    outline: ['box-shadow'],
+    preset: [
+        'font-size',
+        'line-height',
+        'letter-spacing',
+        'font-weight',
+        'font-style',
+    ],
+    text: ['font-weight', 'text-decoration-color'],
+    theme: ['color', 'background-color', 'box-shadow', 'border', 'border-radius'],
+    inset: ['box-shadow'],
+    mark: ['box-shadow'],
+    width: ['max-width', 'min-width', 'width'],
+    height: ['max-height', 'min-height', 'height'],
+    gap: ['gap', 'margin'],
+    zIndex: ['z-index'],
+    image: ['background-image', 'background-position', 'background-size'],
+};
+exports.DEFAULT_TIMING = 'var(--transition)';
+const DEFAULT_EASING = 'linear';
+function getTiming(name) {
+    return `var(--${name}-transition, var(--transition))`;
+}
+function transitionStyle({ transition }) {
+    if (!transition)
+        return;
+    const tokens = (0, styles_1.parseStyle)(transition).all;
+    if (!tokens)
+        return;
+    let tempTransition = [];
+    const transitions = [];
+    tokens.forEach((token) => {
+        if (token === ',') {
+            if (tempTransition) {
+                transitions.push(tempTransition);
+                tempTransition = [];
+            }
+        }
+        else {
+            tempTransition.push(token);
+        }
+    });
+    if (tempTransition) {
+        transitions.push(tempTransition);
+    }
+    const map = {};
+    transitions.forEach((transition) => {
+        const name = transition[0];
+        const timing = transition[1];
+        const easing = transition[2];
+        const delay = transition[3];
+        const styles = MAP[name] || [name];
+        styles.forEach((style) => {
+            map[style] = [name, easing, timing, delay];
+        });
+    });
+    const result = Object.entries(map)
+        .map(([style, [name, easing, timing, delay]]) => {
+        return `${style}  ${timing || getTiming(name)} ${easing || DEFAULT_EASING} ${delay || '0s'}`;
+    })
+        .join(', ');
+    return { transition: result };
+}
+exports.transitionStyle = transitionStyle;
+transitionStyle.__lookupStyles = ['transition'];
+
+        

package/dist/cjs/styles/types.js

@@ -0,0 +1,11 @@
+/**
+ * @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 });
+
+        

package/dist/cjs/styles/width.js

@@ -0,0 +1,19 @@
+/**
+ * @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.widthStyle = void 0;
+const dimension_1 = require("./dimension");
+const dimension = (0, dimension_1.dimensionStyle)('width');
+function widthStyle({ width }) {
+    return dimension(width);
+}
+exports.widthStyle = widthStyle;
+widthStyle.__lookupStyles = ['width'];
+
+        

package/dist/cjs/test/setup.js

@@ -0,0 +1,14 @@
+/**
+ * @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 });
+require("@testing-library/jest-dom");
+require("@testing-library/jest-dom/extend-expect");
+require("jest-styled-components");
+
+        

package/dist/cjs/tokens.js

@@ -0,0 +1,233 @@
+/**
+ * @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.TOKENS = void 0;
+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)',
+};
+exports.TOKENS = TOKENS;
+// Map color tokens
+Object.keys(colors).forEach((name) => {
+    TOKENS[`${name}-color`] = color(name);
+    TOKENS[`${name}-color-rgb`] = colors[name];
+});
+
+