@cube-dev/ui-kit 0.8.8 → 0.9.2

package/dist/es/styles/padding.js

@@ -0,0 +1,47 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import { parseStyle, DIRECTIONS, filterMods } from '../utils/styles';
+export 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 } = parseStyle(padding);
+    let directions = filterMods(mods, DIRECTIONS);
+    if (!values.length) {
+        values = ['var(--gap)'];
+    }
+    if (!directions.length) {
+        directions = DIRECTIONS;
+    }
+    const paddingDirs = [paddingTop, paddingRight, paddingBottom, paddingLeft];
+    return directions.reduce((styles, dir) => {
+        const index = 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;
+    }, {});
+}
+paddingStyle.__lookupStyles = [
+    'padding',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingBlock',
+    'paddingInline',
+];
+
+        

package/dist/es/styles/paddingBlock.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function paddingBlockStyle({ paddingBlock: padding, paddingTop, paddingBottom, }) {
+    if (typeof padding === 'number') {
+        padding = `${padding}px`;
+    }
+    if (!padding)
+        return '';
+    if (padding === true)
+        padding = '1x';
+    let { values } = 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;
+}
+paddingBlockStyle.__lookupStyles = [
+    'paddingBlock',
+    'paddingTop',
+    'paddingBottom',
+];
+
+        

package/dist/es/styles/paddingInline.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function paddingInlineStyle({ paddingInline: padding, paddingLeft, paddingRight, }) {
+    if (typeof padding === 'number') {
+        padding = `${padding}px`;
+    }
+    if (!padding)
+        return '';
+    if (padding === true)
+        padding = '1x';
+    let { values } = 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;
+}
+paddingInlineStyle.__lookupStyles = [
+    'paddingInline',
+    'paddingLeft',
+    'paddingRight',
+];
+
+        

package/dist/es/styles/predefined.js

@@ -0,0 +1,120 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import { gapStyle } from './gap';
+import { flowStyle } from './flow';
+import { resetStyle } from './reset';
+import { colorStyle } from './color';
+import { fillStyle } from './fill';
+import { widthStyle } from './width';
+import { heightStyle } from './height';
+import { radiusStyle } from './radius';
+import { borderStyle } from './border';
+import { shadowStyle } from './shadow';
+import { paddingStyle } from './padding';
+import { paddingBlockStyle } from './paddingBlock';
+import { paddingInlineStyle } from './paddingInline';
+import { presetStyle } from './preset';
+import { fontStyleStyle } from './fontStyle';
+import { marginStyle } from './margin';
+import { marginBlockStyle } from './marginBlock';
+import { marginInlineStyle } from './marginInline';
+import { fontStyle } from './font';
+import { outlineStyle } from './outline';
+import { transitionStyle } from './transition';
+import { groupRadiusAttr } from './groupRadius';
+import { boxShadowCombinator } from './boxShadow.combinator';
+import { styledScrollbarStyle } from './styledScrollbar';
+import { displayStyle } from './display';
+import { alignStyle } from './align';
+import { justifyStyle } from './justify';
+import { defineCustomStyle, defineStyleAlias } from './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.
+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('/');
+});
+[
+    displayStyle,
+    transitionStyle,
+    resetStyle,
+    fillStyle,
+    widthStyle,
+    marginStyle,
+    marginBlockStyle,
+    marginInlineStyle,
+    gapStyle,
+    flowStyle,
+    colorStyle,
+    heightStyle,
+    radiusStyle,
+    borderStyle,
+    shadowStyle,
+    paddingStyle,
+    paddingBlockStyle,
+    paddingInlineStyle,
+    alignStyle,
+    justifyStyle,
+    presetStyle,
+    boxShadowCombinator,
+    outlineStyle,
+    fontStyle,
+    fontStyleStyle,
+    groupRadiusAttr,
+    styledScrollbarStyle,
+]
+    // @ts-ignore
+    .forEach((handler) => defineCustomStyle(handler));
+
+        

package/dist/es/styles/preset.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacing, fontWeight, fontStyle, font, }) {
+    if (!preset)
+        return '';
+    if (preset === true)
+        preset = '';
+    const { mods } = 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;
+}
+presetStyle.__lookupStyles = [
+    'preset',
+    'fontSize',
+    'lineHeight',
+    'letterSpacing',
+    'textTransform',
+    'fontWeight',
+    'fontStyle',
+    'font',
+];
+
+        

package/dist/es/styles/radius.js

@@ -0,0 +1,72 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import { parseStyle, DIRECTIONS } from '../utils/styles';
+const PROP = 'var(--radius)';
+const SHARP = 'var(--leaf-sharp-radius)';
+export function radiusStyle({ radius }) {
+    if (typeof radius === 'number') {
+        radius = `${radius}px`;
+    }
+    if (!radius)
+        return '';
+    if (radius === true)
+        radius = '1r';
+    let { mods, values } = 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;
+        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(' '),
+        },
+    ];
+}
+radiusStyle.__lookupStyles = ['radius'];
+
+        

package/dist/es/styles/reset.js

@@ -0,0 +1,100 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../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;
+`,
+        },
+    ],
+};
+export function resetStyle({ reset }) {
+    if (!reset)
+        return;
+    const { mods } = parseStyle(reset, 1);
+    return mods.reduce((sum, mod) => {
+        if (RESET_MAP[mod]) {
+            sum.push(...RESET_MAP[mod]);
+        }
+        return sum;
+    }, []);
+}
+resetStyle.__lookupStyles = ['reset'];
+
+        

package/dist/es/styles/shadow.js

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../utils/styles';
+export function shadowStyle({ shadow }) {
+    if (!shadow)
+        return '';
+    if (shadow === true)
+        shadow = '0 5px 15px #shadow';
+    const { values, mods, color } = parseStyle(shadow);
+    const mod = mods[0] || '';
+    const shadowColor = color || 'var(--shadow-color)';
+    return {
+        '--local-shadow-box-shadow': [mod, ...values, shadowColor].join(' '),
+    };
+}
+shadowStyle.__lookupStyles = ['shadow'];
+
+        

package/dist/es/styles/styledScrollbar.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+export 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)',
+        },
+    ];
+}
+styledScrollbarStyle.__lookupStyles = ['styledScrollbar'];
+
+        

package/dist/es/styles/transition.js

@@ -0,0 +1,84 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import { parseStyle } from '../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'],
+};
+export const DEFAULT_TIMING = 'var(--transition)';
+const DEFAULT_EASING = 'linear';
+function getTiming(name) {
+    return `var(--${name}-transition, var(--transition))`;
+}
+export function transitionStyle({ transition }) {
+    if (!transition)
+        return;
+    const tokens = 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 };
+}
+transitionStyle.__lookupStyles = ['transition'];
+
+        

package/dist/es/styles/types.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+export {};
+
+        

package/dist/es/styles/width.js

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

package/dist/es/test/setup.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.2
+ * Released under the MIT license.
+ */
+
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';
+
+